Merge remote-tracking branch 'origin/develop' into dbkr/refactor_crea…

…tecrosssigningdialog

.dockerignore

@@ -7,3 +7,6 @@ karma-reports/
 .idea/
 .tmp/
 config.json*
+# Exclude the playwright directory as much as we can as the snapshots are huge and we bind mount it in
+playwright/
+!playwright/docker-entrypoint.sh

.eslintrc.js

@@ -198,6 +198,8 @@ module.exports = {
                 "@typescript-eslint/ban-ts-comment": "off",
                 // We're okay with assertion errors when we ask for them
                 "@typescript-eslint/no-non-null-assertion": "off",
+                // We do this sometimes to brand interfaces
+                "@typescript-eslint/no-empty-object-type": "off",
             },
         },
         // temporary override for offending icon require files

.github/workflows/dockerhub.yaml

@@ -15,15 +15,6 @@ jobs:
         name: Docker Buildx
         runs-on: ubuntu-24.04
         environment: dockerhub
-        strategy:
-            fail-fast: false
-            matrix:
-                include:
-                    - variant: vanilla
-                    # Variant we ship to aid ESS in providing a build on the OpenCoDE platform including specific modules
-                    - variant: opendesk
-                      flavor: suffix=-opendesk,onlatest=true
-                      prepare: mv variants/openDesk/* .
         steps:
             - uses: actions/checkout@v4
               with:
@@ -32,10 +23,6 @@ jobs:
             - name: Install Cosign
               uses: sigstore/cosign-installer@4959ce089c160fddf62f7b42464195ba1a56d382 # v3
 
-            - name: Prepare
-              if: matrix.prepare
-              run: ${{ matrix.prepare }}
-
             - name: Set up QEMU
               uses: docker/setup-qemu-action@49b3bc8e6bdd4a60e6116a5414239cba5943d3cf # v3
 
@@ -61,7 +48,6 @@ jobs:
                       type=ref,event=tag
                   flavor: |
                       latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
-                      ${{ matrix.flavor }}
 
             - name: Build and push
               id: build-and-push
@@ -85,7 +71,6 @@ jobs:
                   cosign sign --yes ${images}
 
             - name: Update repo description
-              if: matrix.variant == 'vanilla'
               uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
               continue-on-error: true
               with:

package.json

@@ -67,7 +67,7 @@
         "test:playwright:open": "yarn test:playwright --ui",
         "test:playwright:screenshots": "yarn test:playwright:screenshots:build && yarn test:playwright:screenshots:run",
         "test:playwright:screenshots:build": "docker build playwright -t element-web-playwright",
-        "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright",
+        "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v $(node -e 'console.log(require(`path`).dirname(require.resolve(`matrix-js-sdk/package.json`)))'):/work/node_modules/matrix-js-sdk -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright",
         "coverage": "yarn test --coverage",
         "analyse:unused-exports": "ts-node ./scripts/analyse_unused_exports.ts",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
@@ -77,10 +77,8 @@
         "@types/react-dom": "17.0.25",
         "@types/react": "17.0.83",
         "@types/seedrandom": "3.0.8",
-        "oidc-client-ts": "3.0.1",
+        "oidc-client-ts": "3.1.0",
         "jwt-decode": "4.0.0",
-        "@vector-im/compound-design-tokens": "1.8.0",
-        "@vector-im/compound-web": "7.0.0",
         "@floating-ui/react": "0.26.11",
         "@radix-ui/react-id": "1.1.0",
         "caniuse-lite": "1.0.30001668",
@@ -98,7 +96,7 @@
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.8.0",
-        "@vector-im/compound-web": "^7.0.0",
+        "@vector-im/compound-web": "^7.1.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -115,7 +113,7 @@
         "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
-        "filesize": "10.1.4",
+        "filesize": "10.1.6",
         "github-markdown-css": "^5.5.1",
         "glob-to-regexp": "^0.4.1",
         "highlight.js": "^11.3.1",
@@ -142,7 +140,7 @@
         "png-chunks-extract": "^1.0.0",
         "posthog-js": "1.157.2",
         "qrcode": "1.5.4",
-        "re-resizable": "^6.9.0",
+        "re-resizable": "6.9.17",
         "react": "17.0.2",
         "react-beautiful-dnd": "^13.1.0",
         "react-blurhash": "^0.3.0",
@@ -151,7 +149,7 @@
         "react-transition-group": "^4.4.1",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.13.0",
+        "sanitize-html": "2.13.1",
         "tar-js": "^0.3.0",
         "temporal-polyfill": "^0.2.5",
         "ua-parser-js": "^1.0.2",
@@ -186,6 +184,7 @@
         "@playwright/test": "^1.40.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@sentry/webpack-plugin": "^2.7.1",
+        "@stylistic/eslint-plugin": "^2.9.0",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^9.0.0",
         "@testing-library/jest-dom": "^6.0.0",
@@ -223,8 +222,8 @@
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
         "@types/uuid": "^10.0.0",
-        "@typescript-eslint/eslint-plugin": "^7.0.0",
-        "@typescript-eslint/parser": "^7.0.0",
+        "@typescript-eslint/eslint-plugin": "^8.0.0",
+        "@typescript-eslint/parser": "^8.0.0",
         "axe-core": "4.10.0",
         "babel-jest": "^29.0.0",
         "babel-loader": "^9.0.0",
@@ -246,7 +245,7 @@
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-jest": "^28.0.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-matrix-org": "1.2.1",
+        "eslint-plugin-matrix-org": "^2.0.2",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
         "eslint-plugin-unicorn": "^56.0.0",

playwright.config.ts

@@ -26,6 +26,7 @@ export default defineConfig({
         command: process.env.CI ? "npx serve -p 8080 -L ./webapp" : "yarn start",
         url: `${baseURL}/config.json`,
         reuseExistingServer: true,
+        timeout: (process.env.CI ? 30 : 120) * 1000,
     },
     testDir: "playwright/e2e",
     outputDir: "playwright/test-results",

playwright/e2e/audio-player/audio-player.spec.ts

@@ -242,6 +242,7 @@ test.describe("Audio player", () => {
 
         // Find and click "Reply" button
         const clickButtonReply = async () => {
+            await tile.scrollIntoViewIfNeeded();
             await tile.hover();
             await tile.getByRole("button", { name: "Reply", exact: true }).click();
         };

playwright/e2e/composer/RTE.spec.ts

@@ -96,8 +96,7 @@ test.describe("Composer", () => {
                     },
                 });
 
-                // https://github.com/vector-im/element-web/issues/26037
-                test.skip("autocomplete behaviour tests", async ({ page, app, bot: bob }) => {
+                test("autocomplete behaviour tests", async ({ page, app, bot: bob }) => {
                     // Set up a private room so we have another user to mention
                     await app.client.createRoom({
                         is_direct: true,
@@ -138,10 +137,10 @@ test.describe("Composer", () => {
                         .pressSequentially(`initial text @${bob.credentials.displayName.slice(0, 1)} abc`);
                     await expect(page.getByTestId("autocomplete-wrapper")).toBeEmpty();
                     // Move the cursor left by 4 to put it to: `@B| abc`, check autocomplete displays
-                    await page.getByRole("textbox").press("LeftArrow");
-                    await page.getByRole("textbox").press("LeftArrow");
-                    await page.getByRole("textbox").press("LeftArrow");
-                    await page.getByRole("textbox").press("LeftArrow");
+                    await page.getByRole("textbox").press("ArrowLeft");
+                    await page.getByRole("textbox").press("ArrowLeft");
+                    await page.getByRole("textbox").press("ArrowLeft");
+                    await page.getByRole("textbox").press("ArrowLeft");
                     await expect(page.getByTestId("autocomplete-wrapper")).not.toBeEmpty();
 
                     // Selecting the autocomplete option using Enter inserts it into the composer

playwright/e2e/editing/editing.spec.ts

@@ -263,7 +263,6 @@ test.describe("Editing", () => {
         checkA11y,
     }) => {
         axe.disableRules("color-contrast"); // XXX: We have some known contrast issues here
-        axe.exclude(".mx_Tooltip_visible"); // XXX: this is fine but would be good to fix
 
         await page.goto(`#/room/${room.roomId}`);
 

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

playwright/e2e/register/register.spec.ts

@@ -96,7 +96,7 @@ test.describe("Registration", () => {
             });
         });
         await page.getByRole("textbox", { name: "Username", exact: true }).fill("_alice");
-        await expect(page.getByRole("alert").filter({ hasText: "Some characters not allowed" })).toBeVisible();
+        await expect(page.getByRole("tooltip").filter({ hasText: "Some characters not allowed" })).toBeVisible();
 
         await page.route("**/_matrix/client/*/register/available?username=bob", async (route) => {
             await route.fulfill({
@@ -108,9 +108,9 @@ test.describe("Registration", () => {
             });
         });
         await page.getByRole("textbox", { name: "Username", exact: true }).fill("bob");
-        await expect(page.getByRole("alert").filter({ hasText: "Someone already has that username" })).toBeVisible();
+        await expect(page.getByRole("tooltip").filter({ hasText: "Someone already has that username" })).toBeVisible();
 
         await page.getByRole("textbox", { name: "Username", exact: true }).fill("foobar");
-        await expect(page.getByRole("alert")).not.toBeVisible();
+        await expect(page.getByRole("tooltip")).not.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/e2e/spotlight/spotlight.spec.ts

@@ -216,7 +216,7 @@ test.describe("Spotlight", () => {
      *
      * https://github.com/matrix-org/synapse/issues/16472
      */
-    test.skip("should find unknown people", async ({ page, app }) => {
+    test("should find unknown people", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);

playwright/e2e/timeline/timeline.spec.ts

@@ -653,7 +653,7 @@ test.describe("Timeline", () => {
             const toggleEventButton = viewSourceEventExpanded.getByRole("button", { name: "toggle event" });
             // Check size and position of toggle on expanded view source event
             // See: _ViewSourceEvent.pcss
-            await expect(toggleEventButton).toHaveCSS("height", "12px"); // --ViewSourceEvent_toggle-size
+            await expect(toggleEventButton).toHaveCSS("height", "16px"); // --ViewSourceEvent_toggle-size
             await expect(toggleEventButton).toHaveCSS("align-self", "flex-end");
             // Click again to collapse the source
             await toggleEventButton.click({ position: { x: 0, y: 0 } });
@@ -679,7 +679,7 @@ test.describe("Timeline", () => {
             );
 
             // Click view source event toggle
-            await viewSourceEventIrc.getByRole("button", { name: "toggle event" }).click({ position: { x: 0, y: 0 } });
+            await viewSourceEventIrc.getByRole("button", { name: "toggle event" }).click({ position: { x: 8, y: 8 } });
 
             // Make sure the expand toggle worked
             await expect(page.locator(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded")).toBeVisible();

playwright/element-web-test.ts

@@ -345,8 +345,7 @@ export const expect = baseExpect.extend({
 
         if (!options?.showTooltips) {
             css += `
-                [role="tooltip"],
-                .mx_Tooltip_visible {
+                [role="tooltip"] {
                     visibility: hidden !important;
                 }
             `;

res/css/_components.pcss

@@ -217,7 +217,6 @@
 @import "./views/elements/_TagComposer.pcss";
 @import "./views/elements/_TextWithTooltip.pcss";
 @import "./views/elements/_ToggleSwitch.pcss";
-@import "./views/elements/_Tooltip.pcss";
 @import "./views/elements/_UseCaseSelection.pcss";
 @import "./views/elements/_UseCaseSelectionButton.pcss";
 @import "./views/elements/_Validation.pcss";

res/css/components/views/location/_ZoomButtons.pcss

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
         box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
 
         .mx_ZoomButtons_icon {
-            $ZoomButtons_icon-size: 10px;
+            $ZoomButtons_icon-size: 12px;
 
             height: $ZoomButtons_icon-size;
             width: $ZoomButtons_icon-size;

res/css/structures/_GenericDropdownMenu.pcss

@@ -99,11 +99,11 @@ Please see LICENSE files in the repository root for full details.
 
             &[aria-checked="true"]::before {
                 content: "";
-                width: 12px;
-                height: 12px;
-                margin-left: -20px;
-                margin-right: 8px;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                width: 16px;
+                height: 16px;
+                margin-left: -22px;
+                margin-right: 6px;
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                 mask-size: 100%;
                 mask-repeat: no-repeat;
                 background-color: $primary-content;

res/css/structures/_RoomStatusBar.pcss

@@ -118,7 +118,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_RoomStatusBar_unsentCancelAllBtn::before {
-                mask-image: url("$(res)/img/element-icons/trashcan.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
             }
 
             &.mx_RoomStatusBar_unsentRetry {

res/css/structures/_SpacePanel.pcss

@@ -229,7 +229,7 @@ Please see LICENSE files in the repository root for full details.
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
             &::before {
                 background-color: $primary-content;
-                mask-image: url("$(res)/img/element-icons/plus.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
                 transition: all 0.2s ease-in-out; /* TODO transition */
             }
         }
@@ -434,7 +434,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconPlus::before {
-        mask-image: url("$(res)/img/element-icons/plus.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
     }
 
     .mx_SpacePanel_iconExplore::before {

res/css/views/auth/_PassphraseField.pcss

@@ -16,7 +16,8 @@ progress.mx_PassphraseField_progress {
     border: 0;
     height: 4px;
     position: absolute;
-    top: -12px;
+    top: -10px;
+    left: 0;
 
     @mixin ProgressBarBorderRadius "2px";
     @mixin ProgressBarColour $PassphraseStrengthLow;

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconCollapse::before {
-        mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
     }
 
     .mx_MessageContextMenu_iconReport::before {
@@ -57,7 +57,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconRedact::before {
-        mask-image: url("$(res)/img/element-icons/trashcan.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
     }
 
     .mx_MessageContextMenu_iconResend::before {
@@ -92,7 +92,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReply::before {
-        mask-image: url("$(res)/img/element-icons/room/message-bar/reply.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/reply.svg");
     }
 
     .mx_MessageContextMenu_iconReplyInThread::before {

res/css/views/dialogs/_InviteDialog.pcss

@@ -351,7 +351,7 @@ Please see LICENSE files in the repository root for full details.
                 height: 24px;
                 grid-column: 1;
                 grid-row: 1;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                 mask-size: 100%;
                 mask-repeat: no-repeat;
                 position: absolute;

res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

@@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
                 color: $accent;
 
                 &::before {
-                    mask-image: url("$(res)/img/feather-customised/check.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                     background-color: $accent;
                 }
             }