Merge branch 'develop' into florianduros/rip-out-legacy-crypto/remove…

…-isCryptoEnabled

.eslintrc.js

@@ -51,6 +51,10 @@ module.exports = {
             "error",
             {
                 paths: [
+                    {
+                        name: "@testing-library/react",
+                        message: "Please use jest-matrix-react instead",
+                    },
                     {
                         name: "matrix-js-sdk",
                         message: "Please use matrix-js-sdk/src/matrix instead",

.github/workflows/backport.yml

@@ -10,7 +10,7 @@ on:
 jobs:
     backport:
         name: Backport
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         # Only react to merged PRs for security reasons.
         # See https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target.
         if: >

.github/workflows/end-to-end-tests-netlify.yaml

@@ -15,7 +15,7 @@ jobs:
     report:
         if: github.event.workflow_run.conclusion != 'cancelled'
         name: Report results
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         environment: Netlify
         permissions:
             statuses: write

.github/workflows/end-to-end-tests.yaml

@@ -45,7 +45,7 @@ env:
 jobs:
     build:
         name: "Build Element-Web"
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         if: inputs.skip != true
         steps:
             - name: Checkout code
@@ -95,7 +95,7 @@ jobs:
         name: "Run Tests ${{ matrix.runner }}/${{ strategy.job-total }}"
         needs: build
         if: inputs.skip != true
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         permissions:
             actions: read
             issues: read
@@ -162,7 +162,7 @@ jobs:
         name: end-to-end-tests
         needs: playwright
         if: always()
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
               if: inputs.skip != true

.github/workflows/netlify.yaml

@@ -9,7 +9,7 @@ on:
 jobs:
     deploy:
         if: github.event.workflow_run.conclusion != 'cancelled' && github.event.workflow_run.event == 'pull_request'
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         environment: Netlify
         steps:
             - name: 📝 Create Deployment

.github/workflows/notify-element-web.yml

@@ -7,7 +7,7 @@ on:
 jobs:
     notify-element-web:
         name: "Notify Element Web"
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         # Only respect triggers from our develop branch, ignore that of forks
         if: github.repository == 'element-hq/matrix-react-sdk'
         steps:

.github/workflows/playwright-image-updates.yaml

@@ -5,7 +5,7 @@ on:
         - cron: "0 6 * * *" # Every day at 6am UTC
 jobs:
     update:
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
 

.github/workflows/pull_request_base_branch.yaml

@@ -5,7 +5,7 @@ on:
 jobs:
     check_base_branch:
         name: Check PR base branch
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/github-script@v7
               with:

.github/workflows/static_analysis.yaml

@@ -18,7 +18,7 @@ env:
 jobs:
     ts_lint:
         name: "Typescript Syntax Check"
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
 
@@ -67,7 +67,7 @@ jobs:
 
     rethemendex_lint:
         name: "Rethemendex Check"
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
 
@@ -77,7 +77,7 @@ jobs:
 
     js_lint:
         name: "ESLint"
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
 
@@ -95,7 +95,7 @@ jobs:
 
     style_lint:
         name: "Style Lint"
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
 
@@ -113,7 +113,7 @@ jobs:
 
     workflow_lint:
         name: "Workflow Lint"
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
 
@@ -131,7 +131,7 @@ jobs:
 
     analyse_dead_code:
         name: "Analyse Dead Code"
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
 

.github/workflows/tests.yml

@@ -29,7 +29,7 @@ env:
 jobs:
     jest:
         name: Jest
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         strategy:
             fail-fast: false
             matrix:
@@ -93,7 +93,7 @@ jobs:
         name: jest-tests
         needs: jest
         if: always()
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - if: needs.jest.result != 'skipped' && needs.jest.result != 'success'
               run: exit 1
@@ -111,7 +111,7 @@ jobs:
 
     app-tests:
         name: Element Web Integration Tests
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
               with:

jest.config.ts

@@ -37,6 +37,7 @@ const config: Config = {
     coverageReporters: ["text-summary", "lcov"],
     testResultsProcessor: "@casualbot/jest-sonar-reporter",
     prettierPath: null,
+    moduleDirectories: ["node_modules", "test/test-utils"],
 };
 
 // if we're running under GHA, enable the GHA reporter

package.json

@@ -68,19 +68,21 @@
         "jwt-decode": "4.0.0",
         "@floating-ui/react": "0.26.11",
         "@radix-ui/react-id": "1.1.0",
-        "caniuse-lite": "1.0.30001655"
+        "caniuse-lite": "1.0.30001655",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
+        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@matrix-org/analytics-events": "^0.26.0",
-        "@matrix-org/emojibase-bindings": "^1.1.2",
+        "@matrix-org/emojibase-bindings": "^1.3.3",
         "@vector-im/matrix-wysiwyg": "2.37.13",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.8.0",
-        "@vector-im/compound-web": "^5.5.0",
+        "@vector-im/compound-web": "^7.0.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

playwright/e2e/crypto/crypto.spec.ts

@@ -43,6 +43,7 @@ const testMessages = async (page: Page, bob: Bot, bobRoomId: string) => {
 };
 
 const bobJoin = async (page: Page, bob: Bot) => {
+    // Wait for Bob to get the invite
     await bob.evaluate(async (cli) => {
         const bobRooms = cli.getRooms();
         if (!bobRooms.length) {
@@ -55,9 +56,13 @@ const bobJoin = async (page: Page, bob: Bot) => {
             });
         }
     });
-    const roomId = await bob.joinRoomByName("Alice");
 
+    const roomId = await bob.joinRoomByName("Alice");
     await expect(page.getByText("Bob joined the room")).toBeVisible();
+
+    // Even though Alice has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
+    await bob.awaitRoomMembership(roomId);
+
     return roomId;
 };
 
@@ -221,7 +226,7 @@ test.describe("Cryptography", function () {
         // Assert that verified icon is rendered
         await page.getByTestId("base-card-back-button").click();
         await page.getByLabel("Room info").nth(1).click();
-        await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="success"]')).toContainText("Encrypted");
+        await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="green"]')).toContainText("Encrypted");
 
         // Take a snapshot of RoomSummaryCard with a verified E2EE icon
         await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("RoomSummaryCard-with-verified-e2ee.png");

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

@@ -33,7 +33,7 @@ test.describe("Cryptography", function () {
             await app.client.bootstrapCrossSigning(aliceCredentials);
             await autoJoin(bob);
 
-            // create an encrypted room
+            // create an encrypted room, and wait for Bob to join it.
             testRoomId = await createSharedRoomWithUser(app, bob.credentials.userId, {
                 name: "TestRoom",
                 initial_state: [
@@ -46,6 +46,9 @@ test.describe("Cryptography", function () {
                     },
                 ],
             });
+
+            // Even though Alice has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
+            await bob.awaitRoomMembership(testRoomId);
         });
 
         test("should show the correct shield on e2e events", async ({
@@ -67,7 +70,9 @@ test.describe("Cryptography", function () {
             const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/);
             await lastE2eIcon.focus();
-            await expect(page.getByRole("tooltip")).toContainText("This message could not be decrypted");
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                "This message could not be decrypted",
+            );
 
             /* Should show a red padlock for an unencrypted message in an e2e room */
             await bob.evaluate(
@@ -87,7 +92,7 @@ test.describe("Cryptography", function () {
             await expect(last).toContainText("test unencrypted");
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastE2eIcon.focus();
-            await expect(page.getByRole("tooltip")).toContainText("Not encrypted");
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted");
 
             /* Should show no padlock for an unverified user */
             // bob sends a valid event
@@ -120,7 +125,9 @@ test.describe("Cryptography", function () {
             await expect(lastTile).toContainText("test encrypted from unverified");
             await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastTileE2eIcon.focus();
-            await expect(page.getByRole("tooltip")).toContainText("Encrypted by a device not verified by its owner.");
+            await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
+                "Encrypted by a device not verified by its owner.",
+            );
 
             /* In legacy crypto: should show a grey padlock for a message from a deleted device.
              * In rust crypto: should show a red padlock for a message from an unverified device.
@@ -156,7 +163,7 @@ test.describe("Cryptography", function () {
             await expect(last).toContainText("test encrypted from unverified");
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastE2eIcon.focus();
-            await expect(page.getByRole("tooltip")).toContainText(
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
                 workerInfo.project.name === "Legacy Crypto"
                     ? "Encrypted by an unknown or deleted device."
                     : "Encrypted by a device not verified by its owner.",
@@ -209,7 +216,7 @@ test.describe("Cryptography", function () {
             // The key is coming from backup, so it is not anymore possible to establish if the claimed device
             // creator of this key is authentic. The tooltip should be "The authenticity of this encrypted message can't be guaranteed on this device."
             // It is not "Encrypted by an unknown or deleted device." even if the claimed device is actually deleted.
-            await expect(page.getByRole("tooltip")).toContainText(
+            await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
                 "The authenticity of this encrypted message can't be guaranteed on this device.",
             );
         });
@@ -287,13 +294,15 @@ test.describe("Cryptography", function () {
             // Let our app start syncing again
             await app.client.network.goOnline();
 
-            // Wait for the messages to arrive
+            // Wait for the messages to arrive. It can take quite a while for the sync to wake up.
             const last = page.locator(".mx_EventTile_last");
-            await expect(last).toContainText("test encrypted from unverified");
+            await expect(last).toContainText("test encrypted from unverified", { timeout: 20000 });
             const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastE2eIcon.focus();
-            await expect(page.getByRole("tooltip")).toContainText("Encrypted by a device not verified by its owner.");
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                "Encrypted by a device not verified by its owner.",
+            );
 
             const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" });
             await expect(penultimate.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();

playwright/e2e/login/soft_logout.spec.ts

@@ -32,7 +32,7 @@ test.describe("Soft logout", () => {
 
             // back to the welcome page
             await expect(page).toHaveURL(/\/#\/home/);
-            await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+            await expect(page.getByRole("heading", { name: `Welcome ${user.userId}`, exact: true })).toBeVisible();
         });
 
         test("still shows the soft-logout page when the page is reloaded after a soft-logout", async ({

playwright/e2e/right-panel/file-panel.spec.ts

@@ -84,7 +84,7 @@ test.describe("FilePanel", () => {
             await expect(filePanelMessageList.locator(".mx_EventTile")).toHaveCount(3);
 
             // Assert that the download links are rendered
-            await expect(filePanelMessageList.locator(".mx_MFileBody_download")).toHaveCount(3);
+            await expect(filePanelMessageList.locator(".mx_MFileBody_download,.mx_MFileBody_info")).toHaveCount(3);
 
             // Assert that the sender of the files is rendered on all of the tiles
             await expect(filePanelMessageList.getByText(NAME)).toHaveCount(3);
@@ -176,8 +176,7 @@ test.describe("FilePanel", () => {
             // Assert that the file size is displayed in kibibytes, not kilobytes (1000 bytes)
             // See: https://github.com/vector-im/element-web/issues/24866
             await expect(tile.locator(".mx_MFileBody_info_filename", { hasText: size })).toBeVisible();
-            await expect(tile.locator(".mx_MFileBody_download a", { hasText: size })).toBeVisible();
-            await expect(tile.locator(".mx_MFileBody_download .mx_MImageBody_size", { hasText: size })).toBeVisible();
+            await expect(tile.locator(".mx_MFileBody_info", { hasText: size })).toBeVisible();
         });
     });
 

playwright/e2e/utils.ts

@@ -20,6 +20,14 @@ import { Client } from "../pages/client";
  * @param client Client instance that can be user or bot
  * @param roomId room id to find room and check
  * @param predicate defines condition that is used to check the room state
+ *
+ * FIXME this does not do what it is supposed to do, and I think it is unfixable.
+ *   `page.exposeFunction` adds a function which returns a Promise. `window[predicateId](room)` therefore
+ *   always returns a truthy value (a Promise).  But even if you fix that: as far as I can tell, the Room is
+ *   just passed to the callback function as a JSON blob: you cannot actually call any methods on it, so the
+ *   callback is useless.
+ *
+ * @deprecated This function is broken.
  */
 export async function waitForRoom(
     page: Page,

playwright/element-web-test.ts

@@ -224,7 +224,7 @@ export const test = base.extend<{
     },
 
     axe: async ({ page }, use) => {
-        await use(new AxeBuilder({ page }));
+        await use(new AxeBuilder({ page }).exclude("[id^='floating-ui-']"));
     },
     checkA11y: async ({ axe }, use, testInfo) =>
         use(async () => {

playwright/pages/ElementAppPage.ts

@@ -172,4 +172,22 @@ export class ElementAppPage {
         await this.page.getByRole("button", { name: "Room info" }).first().click();
         return this.page.locator(".mx_RightPanel");
     }
+
+    /**
+     * Get a locator for the tooltip associated with an element
+     * @param e The element with the tooltip
+     * @returns Locator to the tooltip
+     */
+    public async getTooltipForElement(e: Locator): Promise<Locator> {
+        const [labelledById, describedById] = await Promise.all([
+            e.getAttribute("aria-labelledby"),
+            e.getAttribute("aria-describedby"),
+        ]);
+        if (!labelledById && !describedById) {
+            throw new Error(
+                "Element has no aria-labelledby or aria-describedy attributes! The tooltip should have added either one of these.",
+            );
+        }
+        return this.page.locator(`#${labelledById ?? describedById}`);
+    }
 }