Fix creatorUserId is required error when opening sticker picker (matrix-org#10423)

* Use sender if sticker picker widget does not have creatorUserId

* Add creatorUserId when creating sticker picker widgets

* Add e2e test for stickerpicker widget missing creatorUserId

* Fix stickerpicker widget event data in e2e tests

* Fix userId in stickerpicker e2e tests

* Fix linter errors

Author: justinbot

cypress/e2e/widgets/stickers.spec.ts

@@ -103,12 +103,13 @@ describe("Stickers", () => {
 
     let stickerPickerUrl: string;
     let homeserver: HomeserverInstance;
+    let userId: string;
 
     beforeEach(() => {
         cy.startHomeserver("default").then((data) => {
             homeserver = data;
 
-            cy.initTestUser(homeserver, "Sally");
+            cy.initTestUser(homeserver, "Sally").then((user) => (userId = user.userId));
         });
         cy.serveHtmlFile(WIDGET_HTML).then((url) => {
             stickerPickerUrl = url;
@@ -133,8 +134,11 @@ describe("Stickers", () => {
                     type: "m.stickerpicker",
                     name: STICKER_PICKER_WIDGET_NAME,
                     url: stickerPickerUrl,
-                    creatorUserId: "@userId",
+                    creatorUserId: userId,
                 },
+                sender: userId,
+                state_key: STICKER_PICKER_WIDGET_ID,
+                type: "m.widget",
                 id: STICKER_PICKER_WIDGET_ID,
             },
         }).as("stickers");
@@ -159,4 +163,32 @@ describe("Stickers", () => {
             expectTimelineSticker(roomId2);
         });
     });
+
+    it("should handle a sticker picker widget missing creatorUserId", () => {
+        cy.createRoom({
+            name: ROOM_NAME_1,
+        }).as("roomId1");
+        cy.setAccountData("m.widgets", {
+            [STICKER_PICKER_WIDGET_ID]: {
+                content: {
+                    type: "m.stickerpicker",
+                    name: STICKER_PICKER_WIDGET_NAME,
+                    url: stickerPickerUrl,
+                    // No creatorUserId
+                },
+                sender: userId,
+                state_key: STICKER_PICKER_WIDGET_ID,
+                type: "m.widget",
+                id: STICKER_PICKER_WIDGET_ID,
+            },
+        }).as("stickers");
+
+        cy.all([cy.get<string>("@roomId1"), cy.get<{}>("@stickers")]).then(([roomId1]) => {
+            cy.viewRoomByName(ROOM_NAME_1);
+            cy.url().should("contain", `/#/room/${roomId1}`);
+            openStickerPicker();
+            sendStickerFromPicker();
+            expectTimelineSticker(roomId1);
+        });
+    });
 });

src/components/views/rooms/Stickerpicker.tsx

@@ -273,7 +273,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
                 roomId: stickerpickerWidget.content.roomId,
                 eventId: stickerpickerWidget.content.eventId,
                 avatar_url: stickerpickerWidget.content.avatar_url,
-                creatorUserId: stickerpickerWidget.content.creatorUserId,
+                creatorUserId: stickerpickerWidget.content.creatorUserId || stickerpickerWidget.sender,
             };
 
             stickersContent = (

src/utils/WidgetUtils.ts

@@ -236,13 +236,6 @@ export default class WidgetUtils {
         widgetName: string,
         widgetData: IWidgetData,
     ): Promise<void> {
-        const content = {
-            type: widgetType.preferred,
-            url: widgetUrl,
-            name: widgetName,
-            data: widgetData,
-        };
-
         const client = MatrixClientPeg.get();
         // Get the current widgets and clone them before we modify them, otherwise
         // we'll modify the content of the old event.
@@ -257,11 +250,21 @@ export default class WidgetUtils {
 
         const addingWidget = Boolean(widgetUrl);
 
+        const userId = client.getSafeUserId();
+
+        const content = {
+            type: widgetType.preferred,
+            url: widgetUrl,
+            name: widgetName,
+            data: widgetData,
+            creatorUserId: userId,
+        };
+
         // Add new widget / update
         if (addingWidget) {
             userWidgets[widgetId] = {
                 content: content,
-                sender: client.getUserId()!,
+                sender: userId,
                 state_key: widgetId,
                 type: "m.widget",
                 id: widgetId,