Merge branch 'matrix-org:develop' into asim/fix-emoji-bg

.eslintrc.js

@@ -142,6 +142,7 @@ module.exports = {
                             "!matrix-js-sdk/src/models/read-receipt",
                             "!matrix-js-sdk/src/models/relations-container",
                             "!matrix-js-sdk/src/models/related-relations",
+                            "!matrix-js-sdk/src/matrixrtc",
                         ],
                         message: "Please use matrix-js-sdk/src/matrix instead",
                     },

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged --concurrent false

.lintstagedrc

@@ -0,0 +1,5 @@
+{
+    "*": "prettier --write",
+    "*.(ts|tsx|js|jsx)": ["eslint --fix"],
+    "*.pcss": ["stylelint"]
+}

babel.config.js

@@ -10,15 +10,15 @@ module.exports = {
                     "last 2 Safari versions",
                     "last 2 Edge versions",
                 ],
+                include: ["@babel/plugin-transform-class-properties"],
             },
         ],
-        "@babel/preset-typescript",
+        ["@babel/preset-typescript", { allowDeclareFields: true }],
         "@babel/preset-react",
     ],
     plugins: [
         "@babel/plugin-proposal-export-default-from",
         "@babel/plugin-transform-numeric-separator",
-        "@babel/plugin-transform-class-properties",
         "@babel/plugin-transform-object-rest-spread",
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",

package.json

@@ -69,7 +69,9 @@
         "oidc-client-ts": "3.0.1",
         "jwt-decode": "4.0.0",
         "@floating-ui/react": "0.26.11",
-        "@radix-ui/react-id": "1.1.0"
+        "@radix-ui/react-id": "1.1.0",
+        "caniuse-lite": "1.0.30001643",
+        "electron-to-chromium": "1.5.2"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
@@ -80,20 +82,22 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^5.4.0",
+        "@vector-im/compound-design-tokens": "^1.6.1",
+        "@vector-im/compound-web": "^5.5.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
         "await-lock": "^2.1.0",
         "bloom-filters": "^3.0.1",
         "blurhash": "^2.0.3",
+        "browserslist": "^4.23.2",
         "classnames": "^2.2.6",
         "commonmark": "^0.31.0",
         "counterpart": "^0.18.6",
         "css-tree": "^2.3.1",
         "diff-dom": "^5.0.0",
         "diff-match-patch": "^1.0.5",
+        "electron-to-chromium": "^1.5.2",
         "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
@@ -122,7 +126,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.145.0",
+        "posthog-js": "1.149.1",
         "qrcode": "1.5.3",
         "re-resizable": "^6.9.0",
         "react": "17.0.2",
@@ -197,7 +201,7 @@
         "@typescript-eslint/parser": "^7.0.0",
         "axe-core": "4.9.1",
         "babel-jest": "^29.0.0",
-        "blob-polyfill": "^7.0.0",
+        "blob-polyfill": "^9.0.0",
         "eslint": "8.57.0",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^9.0.0",
@@ -214,26 +218,28 @@
         "fetch-mock-jest": "^1.5.1",
         "fs-extra": "^11.0.0",
         "glob": "^11.0.0",
+        "husky": "^8.0.3",
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
         "jest-environment-jsdom": "^29.6.2",
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",
+        "lint-staged": "^15.0.2",
         "mailhog": "^4.16.0",
         "matrix-web-i18n": "^3.2.1",
         "mocha-junit-reporter": "^2.2.0",
         "node-fetch": "2",
         "playwright-core": "^1.45.1",
         "postcss-scss": "^4.0.4",
-        "prettier": "3.3.2",
+        "prettier": "3.3.3",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "stylelint": "^16.1.0",
         "stylelint-config-standard": "^36.0.0",
         "stylelint-scss": "^6.0.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.5.3",
+        "typescript": "5.5.4",
         "web-streams-polyfill": "^4.0.0"
     },
     "peerDependencies": {

playwright.config.ts

@@ -37,7 +37,7 @@ export default defineConfig({
     },
     testDir: "playwright/e2e",
     outputDir: "playwright/test-results",
-    workers: process.env.CI ? "50%" : 1,
+    workers: 1,
     retries: process.env.CI ? 2 : 0,
     reporter: process.env.CI ? [["blob"], ["github"]] : [["html", { outputFolder: "playwright/html-report" }]],
     snapshotDir: "playwright/snapshots",

playwright/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.45.1-jammy
+FROM mcr.microsoft.com/playwright:v1.45.3-jammy
 
 WORKDIR /work/matrix-react-sdk
 VOLUME ["/work/element-web/node_modules"]

playwright/e2e/app-loading/feature-detection.spec.ts

@@ -21,9 +21,9 @@ test(`shows error page if browser lacks Intl support`, async ({ page }) => {
     await page.goto("/");
 
     // Lack of Intl support causes the app bundle to fail to load, so we get the iframed
-    // static error page and need to explicitly look in the iframe becuse Playwright doesn't
+    // static error page and need to explicitly look in the iframe because Playwright doesn't
     // recurse into iframes when looking for elements
-    const header = await page.frameLocator("iframe").getByText("Unsupported browser");
+    const header = page.frameLocator("iframe").getByText("Unsupported browser");
     await expect(header).toBeVisible();
 
     await expect(page).toMatchScreenshot("unsupported-browser.png");
@@ -34,8 +34,8 @@ test(`shows error page if browser lacks WebAssembly support`, async ({ page }) =
     await page.goto("/");
 
     // Lack of WebAssembly support doesn't cause the bundle to fail loading, so we get
-    // CompatibilityView, ie. no iframes.
-    const header = await page.getByText("Unsupported browser");
+    // CompatibilityView, i.e. no iframes.
+    const header = page.getByText("Element does not support this browser");
     await expect(header).toBeVisible();
 
     await expect(page).toMatchScreenshot("unsupported-browser-CompatibilityView.png");

playwright/e2e/app-loading/stored-credentials.spec.ts

@@ -48,7 +48,7 @@ test("Shows the last known page on reload", async ({ pageWithCredentials: page }
 
     // Check that the room reloaded
     await expect(page).toHaveURL(/\/#\/room\//);
-    await expect(page.locator(".mx_LegacyRoomHeader")).toContainText("Test Room");
+    await expect(page.locator(".mx_RoomHeader")).toContainText("Test Room");
 });
 
 test("Room link correctly loads a room view", async ({ pageWithCredentials: page }) => {

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

@@ -98,6 +98,10 @@ test.describe("HTML Export", () => {
     });
 
     test("should export html successfully and match screenshot", async ({ page, app, room }) => {
+        // Set a fixed time rather than masking off the line with the time in it: we don't need to worry
+        // about the width changing and we can actually test this line looks correct.
+        page.clock.setSystemTime(new Date("2024-01-01T00:00:00Z"));
+
         // 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" });
@@ -108,7 +112,7 @@ test.describe("HTML Export", () => {
             page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("Testing 9"),
         ).toBeVisible();
 
-        await page.getByRole("button", { name: "Room info" }).click();
+        await app.toggleRoomInfoPanel();
         await page.getByRole("menuitem", { name: "Export Chat" }).click();
 
         const downloadPromise = page.waitForEvent("download");
@@ -123,7 +127,6 @@ test.describe("HTML Export", () => {
         await page.goto(`file://${dirPath}/${Object.keys(zip.files)[0]}/messages.html`);
         await expect(page).toMatchScreenshot("html-export.png", {
             mask: [
-                page.getByText("This is the start of export", { exact: false }),
                 // We need to mask the whole thing because the width of the time part changes
                 page.locator(".mx_TimelineSeparator"),
                 page.locator(".mx_MessageTimestamp"),

playwright/e2e/create-room/create-room.spec.ts

@@ -36,8 +36,7 @@ test.describe("Create Room", () => {
         await dialog.getByRole("button", { name: "Create room" }).click();
 
         await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/);
-        const header = page.locator(".mx_LegacyRoomHeader");
+        const header = page.locator(".mx_RoomHeader");
         await expect(header).toContainText(name);
-        await expect(header).toContainText(topic);
     });
 });

playwright/e2e/crypto/crypto.spec.ts

@@ -224,7 +224,7 @@ test.describe("Cryptography", function () {
         await checkDMRoom(page);
         const bobRoomId = await bobJoin(page, bob);
         await testMessages(page, bob, bobRoomId);
-        await verify(page, bob);
+        await verify(app, bob);
 
         // Assert that verified icon is rendered
         await page.getByTestId("base-card-back-button").click();
@@ -246,6 +246,6 @@ test.describe("Cryptography", function () {
 
         // we need to have a room with the other user present, so we can open the verification panel
         await createSharedRoomWithUser(app, bob.credentials.userId);
-        await verify(page, bob);
+        await verify(app, bob);
     });
 });

playwright/e2e/crypto/event-shields.spec.ts

@@ -104,7 +104,7 @@ test.describe("Cryptography", function () {
             await expect(lastTileE2eIcon).not.toBeVisible();
 
             /* Now verify Bob */
-            await verify(page, bob);
+            await verify(app, bob);
 
             /* Existing message should be updated when user is verified. */
             await expect(last).toContainText("test encrypted 1");
@@ -222,7 +222,7 @@ test.describe("Cryptography", function () {
             await bobSecondDevice.prepareClient();
 
             // verify Bob
-            await verify(page, bob);
+            await verify(app, bob);
 
             // bob sends a valid event
             const testEvent = await bob.sendMessage(testRoomId, "Hoo!");

playwright/e2e/crypto/utils.ts

@@ -329,15 +329,6 @@ export async function createRoom(page: Page, roomName: string, isEncrypted: bool
     }
 }
 
-/**
- * Open the room info panel and return the panel element
- * @param page - the page to use
- */
-export const openRoomInfo = async (page: Page) => {
-    await page.getByRole("button", { name: "Room info" }).click();
-    return page.locator(".mx_RightPanel");
-};
-
 /**
  * Configure the given MatrixClient to auto-accept any invites
  * @param client - the client to configure
@@ -357,10 +348,11 @@ export async function autoJoin(client: Client) {
  * @param page - the page to use
  * @param bob - the user to verify
  */
-export const verify = async (page: Page, bob: Bot) => {
+export const verify = async (app: ElementAppPage, bob: Bot) => {
+    const page = app.page;
     const bobsVerificationRequestPromise = waitForVerificationRequest(bob);
 
-    const roomInfo = await openRoomInfo(page);
+    const roomInfo = await app.toggleRoomInfoPanel();
     await page.locator(".mx_RightPanelTabs").getByText("People").click();
     await roomInfo.getByText("Bob").click();
     await roomInfo.getByRole("button", { name: "Verify" }).click();

playwright/e2e/file-upload/image-upload.spec.ts

@@ -38,8 +38,8 @@ test.describe("Image Upload", () => {
             .locator(".mx_MessageComposer_actions input[type='file']")
             .setInputFiles("playwright/sample-files/riot.png");
 
-        expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
-        expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
-        expect(page).toMatchScreenshot("image-upload-preview.png");
+        await expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
+        await expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("image-upload-preview.png");
     });
 });

playwright/e2e/integration-manager/get-openid-token.spec.ts

@@ -118,8 +118,8 @@ test.describe("Integration Manager: Get OpenID Token", () => {
         await app.viewRoomByName(ROOM_NAME);
     });
 
-    test("should successfully obtain an openID token", async ({ page }) => {
-        await openIntegrationManager(page);
+    test("should successfully obtain an openID token", async ({ page, app }) => {
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl);
 
         const iframe = page.frameLocator(`iframe[src*="${integrationManagerUrl}"]`);

playwright/e2e/integration-manager/kick.spec.ts

@@ -167,7 +167,7 @@ test.describe("Integration Manager: Kick", () => {
         await app.client.inviteUser(room.roomId, targetUser.credentials.userId);
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, true);
@@ -185,7 +185,7 @@ test.describe("Integration Manager: Kick", () => {
             },
         });
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
@@ -197,7 +197,7 @@ test.describe("Integration Manager: Kick", () => {
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
         await targetUser.leave(room.roomId);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
@@ -209,7 +209,7 @@ test.describe("Integration Manager: Kick", () => {
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
         await app.client.ban(room.roomId, targetUser.credentials.userId);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
@@ -218,7 +218,7 @@ test.describe("Integration Manager: Kick", () => {
     test("should no-op if the target was never a room member", async ({ page, app, bot: targetUser, room }) => {
         await app.viewRoomByName(ROOM_NAME);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);

playwright/e2e/integration-manager/read_events.spec.ts

@@ -142,7 +142,7 @@ test.describe("Integration Manager: Read Events", () => {
 
         // Send a state event
         const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey);
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);
@@ -162,7 +162,7 @@ test.describe("Integration Manager: Read Events", () => {
 
         // Send a state event
         const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey);
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);
@@ -196,7 +196,7 @@ test.describe("Integration Manager: Read Events", () => {
             app.client.sendStateEvent(room.roomId, eventType, eventContent3, stateKey3),
         ]);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(
@@ -217,11 +217,11 @@ test.describe("Integration Manager: Read Events", () => {
         await expect(iframe.locator("#message-response")).toContainText(`"content":${JSON.stringify(eventContent3)}`);
     });
 
-    test("should fail to read an event type which is not allowed", async ({ page, room }) => {
+    test("should fail to read an event type which is not allowed", async ({ page, app, room }) => {
         const eventType = "com.example.event";
         const stateKey = "";
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);

playwright/e2e/integration-manager/send_event.spec.ts

@@ -137,7 +137,7 @@ test.describe("Integration Manager: Send Event", () => {
         );
 
         await app.viewRoomByName(ROOM_NAME);
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
     });
 
     test("should send a state event", async ({ page, app, room }) => {