Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/dedup-icons-17oct

# Conflicts:
#	res/css/structures/_GenericDropdownMenu.pcss
#	res/css/views/elements/_ImageView.pcss
#	res/css/views/rooms/_MessageComposer.pcss
#	src/components/structures/RoomStatusBar.tsx
#	src/components/views/elements/Pill.tsx
#	src/components/views/messages/MessageActionBar.tsx
#	src/components/views/rooms/RoomKnocksBar.tsx
#	src/components/views/rooms/RoomTileSubtitle.tsx
#	src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx

playwright/e2e/accessibility/keyboard-navigation.spec.ts

@@ -15,6 +15,9 @@ test.describe("Landmark navigation tests", () => {
     });
 
     test("without any rooms", async ({ page, homeserver, app, user }) => {
+        // sometimes the space button doesn't appear right away
+        await expect(page.locator(".mx_SpaceButton_active")).toBeVisible();
+
         /**
          * Without any rooms, there is no tile in the roomlist to be focused.
          * So the next landmark in the list should be focused instead.

playwright/e2e/chat-export/html-export.spec.ts

@@ -96,7 +96,10 @@ test.describe("HTML Export", () => {
 
         // Send a bunch of messages to populate the room
         for (let i = 1; i < 10; i++) {
-            await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
+            const respone = await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
+            if (i == 1) {
+                await app.client.reactToMessage(room.roomId, null, respone.event_id, "🙃");
+            }
         }
 
         // Wait for all the messages to be displayed

playwright/e2e/login/login.spec.ts

@@ -217,7 +217,7 @@ test.describe("Login", () => {
                     const h1 = await page.getByRole("heading", { name: "Verify this device", level: 1 });
                     await expect(h1).toBeVisible();
 
-                    expect(h1.locator(".mx_CompleteSecurity_skip")).not.toBeVisible();
+                    await expect(h1.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
                 });
             });
         });

playwright/e2e/read-receipts/index.ts

@@ -69,7 +69,7 @@ export class MessageBuilder {
     /**
      * Map of message content -> event.
      */
-    messages = new Map<String, Promise<JSHandle<MatrixEvent>>>();
+    messages = new Map<string, Promise<JSHandle<MatrixEvent>>>();
 
     /**
      * Utility to find a MatrixEvent by its body content
@@ -222,14 +222,7 @@ export class MessageBuilder {
                     threadId: !ev.isThreadRoot ? ev.threadRootId : undefined,
                 }));
                 const roomId = await room.evaluate((room) => room.roomId);
-
-                await bot.sendEvent(roomId, threadId ?? null, "m.reaction", {
-                    "m.relates_to": {
-                        rel_type: "m.annotation",
-                        event_id: id,
-                        key: reaction,
-                    },
-                });
+                await bot.reactToMessage(roomId, threadId, id, reaction);
             }
         })(this);
     }

playwright/e2e/settings/account-user-settings-tab.spec.ts

@@ -140,4 +140,51 @@ test.describe("Account user settings tab", () => {
         await expect(page.locator(".mx_UserMenu .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
         await expect(page.locator(".mx_RoomView_wrapper .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
     });
+
+    // ported to a playwright test because the jest test was very flakey for no obvious reason
+    test("should display an error if the code is incorrect when adding a phone number", async ({ uut, page }) => {
+        const dummyUrl = "https://nowhere.dummy/_matrix/client/unstable/add_threepid/msisdn/submit_token";
+
+        await page.route(
+            `**/_matrix/client/v3/account/3pid/msisdn/requestToken`,
+            async (route) => {
+                await route.fulfill({
+                    json: {
+                        success: true,
+                        sid: "1",
+                        msisdn: "447700900000",
+                        intl_fmt: "+44 7700 900000",
+                        submit_url: dummyUrl,
+                    },
+                });
+            },
+            { times: 1 },
+        );
+
+        await page.route(
+            dummyUrl,
+            async (route) => {
+                await route.fulfill({
+                    status: 400,
+                    json: {
+                        errcode: "M_THREEPID_AUTH_FAILED",
+                        error: "That code is definitely wrong",
+                    },
+                });
+            },
+            { times: 1 },
+        );
+
+        const phoneSection = page.getByTestId("mx_AccountPhoneNumbers");
+        await phoneSection.getByRole("textbox", { name: "Phone Number" }).fill("07700900000");
+        await phoneSection.getByRole("button", { name: "Add" }).click();
+
+        await phoneSection
+            .getByRole("textbox", { name: "Verification code" })
+            .fill("A small eurasian field mouse dancing the paso doble");
+
+        await phoneSection.getByRole("button", { name: "Continue" }).click();
+
+        await expect(page.getByRole("heading", { name: "Unable to verify phone number." })).toBeVisible();
+    });
 });

playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts

@@ -74,7 +74,7 @@ test.describe("Appearance user settings tab", () => {
                 await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-added.png");
 
                 await util.removeCustomTheme();
-                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme.png");
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-removed.png");
             });
         });
     });

playwright/e2e/spaces/threads-activity-centre/index.ts

@@ -70,7 +70,7 @@ export class MessageBuilder {
     /**
      * Map of message content -> event.
      */
-    messages = new Map<String, Promise<JSHandle<MatrixEvent>>>();
+    messages = new Map<string, Promise<JSHandle<MatrixEvent>>>();
 
     /**
      * Utility to find a MatrixEvent by its body content

playwright/pages/client.ts

@@ -143,6 +143,29 @@ export class Client {
         );
     }
 
+    /**
+     * Send a reaction to to a message
+     * @param roomId ID of the room to send the reaction into
+     * @param threadId ID of the thread to send into or null for main timeline
+     * @param eventId Event ID of the message you are reacting to
+     * @param reaction The reaction text to send
+     * @returns
+     */
+    public async reactToMessage(
+        roomId: string,
+        threadId: string | null,
+        eventId: string,
+        reaction: string,
+    ): Promise<ISendEventResponse> {
+        return this.sendEvent(roomId, threadId ?? null, "m.reaction", {
+            "m.relates_to": {
+                rel_type: "m.annotation",
+                event_id: eventId,
+                key: reaction,
+            },
+        });
+    }
+
     /**
      * Create a room with given options.
      * @param options the options to apply when creating the room

playwright/plugins/homeserver/synapse/index.ts

@@ -20,7 +20,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for synapse docker image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:fd6ba2d8471a0807e1bccef4124b22d17f0058f2cf9285066fdd94d8c631964a";
+const DOCKER_TAG = "develop@sha256:47c62aa9507a24820190eef547861c0d278cc83fe90329c46b9f4329eed88ef4";
 
 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
     const templateDir = path.join(__dirname, "templates", opts.template);