Merge branch 'develop' into florianduros/tooltip/composer

Author: florianduros

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

@@ -41,7 +41,7 @@ jobs:
                   merge-multiple: true
 
             - name: Merge into HTML Report
-              run: yarn playwright merge-reports --reporter=html,github,./playwright/flaky-reporter.ts ./all-blob-reports
+              run: yarn playwright merge-reports --reporter=html,./playwright/flaky-reporter.ts ./all-blob-reports
               env:
                   # Only pass creds to the flaky-reporter on main branch runs
                   GITHUB_TOKEN: ${{ github.event.workflow_run.head_branch == 'develop' && secrets.ELEMENT_BOT_TOKEN || '' }}

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

@@ -163,5 +163,5 @@ jobs:
         if: always()
         runs-on: ubuntu-latest
         steps:
-            - run: exit 1
-              if: failure() || cancelled()
+            - if: needs.playwright.result != 'skipped' && needs.playwright.result != 'success'
+              run: exit 1

CHANGELOG.md

@@ -1,3 +1,28 @@
+Changes in [3.99.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.99.0) (2024-05-07)
+=====================================================================================================
+## ✨ Features
+
+* Use a different error message for UTDs when you weren't in the room. ([#12453](https://github.com/matrix-org/matrix-react-sdk/pull/12453)). Contributed by @uhoreg.
+* Take the Threads Activity Centre out of labs ([#12439](https://github.com/matrix-org/matrix-react-sdk/pull/12439)). Contributed by @dbkr.
+* Expected UTDs: use a different message for UTDs sent before login ([#12391](https://github.com/matrix-org/matrix-react-sdk/pull/12391)). Contributed by @richvdh.
+* Add `Tooltip` to `AccessibleButton` ([#12443](https://github.com/matrix-org/matrix-react-sdk/pull/12443)). Contributed by @florianduros.
+* Add analytics to activity toggles ([#12418](https://github.com/matrix-org/matrix-react-sdk/pull/12418)). Contributed by @dbkr.
+* Decrypt events in reverse order without copying the array ([#12445](https://github.com/matrix-org/matrix-react-sdk/pull/12445)). Contributed by @Johennes.
+* Use new compound tooltip ([#12416](https://github.com/matrix-org/matrix-react-sdk/pull/12416)). Contributed by @florianduros.
+* Expected UTDs: report a different Posthog code ([#12389](https://github.com/matrix-org/matrix-react-sdk/pull/12389)). Contributed by @richvdh.
+
+## 🐛 Bug Fixes
+
+* TAC: Fix accessibility issue when the Release announcement is displayed ([#12484](https://github.com/matrix-org/matrix-react-sdk/pull/12484)). Contributed by @RiotRobot.
+* TAC: Close Release Announcement when TAC button is clicked ([#12485](https://github.com/matrix-org/matrix-react-sdk/pull/12485)). Contributed by @florianduros.
+* MenuItem: fix caption usage ([#12455](https://github.com/matrix-org/matrix-react-sdk/pull/12455)). Contributed by @florianduros.
+* Show the local echo in previews ([#12451](https://github.com/matrix-org/matrix-react-sdk/pull/12451)). Contributed by @langleyd.
+* Fixed the drag and drop of X #27186 ([#12450](https://github.com/matrix-org/matrix-react-sdk/pull/12450)). Contributed by @asimdelvi.
+* Move the TAC to above the button ([#12438](https://github.com/matrix-org/matrix-react-sdk/pull/12438)). Contributed by @dbkr.
+* Use the same logic in previews as the timeline to hide events that should be hidden ([#12434](https://github.com/matrix-org/matrix-react-sdk/pull/12434)). Contributed by @langleyd.
+* Fix selector so maths support doesn't mangle divs ([#12433](https://github.com/matrix-org/matrix-react-sdk/pull/12433)). Contributed by @uhoreg.
+
+
 Changes in [3.98.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.98.0) (2024-04-23)
 =====================================================================================================
 ## ✨ Features

package.json

@@ -1,6 +1,6 @@
 {
     "name": "matrix-react-sdk",
-    "version": "3.98.0",
+    "version": "3.99.0",
     "description": "SDK for matrix.org using React",
     "author": "matrix.org",
     "repository": {

playwright.config.ts

@@ -41,7 +41,7 @@ export default defineConfig<TestOptions>({
     outputDir: "playwright/test-results",
     workers: 1,
     retries: process.env.CI ? 2 : 0,
-    reporter: process.env.CI ? "blob" : [["html", { outputFolder: "playwright/html-report" }]],
+    reporter: process.env.CI ? [["blob"], ["github"]] : [["html", { outputFolder: "playwright/html-report" }]],
     projects: [
         {
             name: "Legacy Crypto",

playwright/e2e/crypto/crypto.spec.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2022-2024 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import type { Page } from "@playwright/test";
+import type { EmittedEvents, Preset } from "matrix-js-sdk/src/matrix";
 import { expect, test } from "../../element-web-test";
 import {
     copyAndContinue,
@@ -31,6 +32,7 @@ import {
 import { Bot } from "../../pages/bot";
 import { ElementAppPage } from "../../pages/ElementAppPage";
 import { Client } from "../../pages/client";
+import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 const openRoomInfo = async (page: Page) => {
     await page.getByRole("button", { name: "Room info" }).click();
@@ -599,5 +601,217 @@ test.describe("Cryptography", function () {
             await expect(tilesAfterVerify[1]).toContainText("test2 test2");
             await expect(tilesAfterVerify[1].locator(".mx_EventTile_e2eIcon_normal")).toBeVisible();
         });
+
+        test.describe("non-joined historical messages", () => {
+            test.skip(isDendrite, "does not yet support membership on events");
+
+            test("should display undecryptable non-joined historical messages with a different message", async ({
+                homeserver,
+                page,
+                app,
+                credentials: aliceCredentials,
+                user: alice,
+                cryptoBackend,
+                bot: bob,
+            }) => {
+                test.skip(cryptoBackend === "legacy", "Not implemented for legacy crypto");
+
+                // Bob creates an encrypted room and sends a message to it. He then invites Alice
+                const roomId = await bob.evaluate(
+                    async (client, { alice }) => {
+                        const encryptionStatePromise = new Promise<void>((resolve) => {
+                            client.on("RoomState.events" as EmittedEvents, (event, _state, _lastStateEvent) => {
+                                if (event.getType() === "m.room.encryption") {
+                                    resolve();
+                                }
+                            });
+                        });
+
+                        const { room_id: roomId } = await client.createRoom({
+                            initial_state: [
+                                {
+                                    type: "m.room.encryption",
+                                    content: {
+                                        algorithm: "m.megolm.v1.aes-sha2",
+                                    },
+                                },
+                            ],
+                            name: "Test room",
+                            preset: "private_chat" as Preset,
+                        });
+
+                        // wait for m.room.encryption event, so that when we send a
+                        // message, it will be encrypted
+                        await encryptionStatePromise;
+
+                        await client.sendTextMessage(roomId, "This should be undecryptable");
+
+                        await client.invite(roomId, alice.userId);
+
+                        return roomId;
+                    },
+                    { alice },
+                );
+
+                // Alice accepts the invite
+                await expect(
+                    page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
+                ).toHaveCount(1);
+                await page.getByRole("treeitem", { name: "Test room" }).click();
+                await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
+
+                // Bob sends an encrypted event and an undecryptable event
+                await bob.evaluate(
+                    async (client, { roomId }) => {
+                        await client.sendTextMessage(roomId, "This should be decryptable");
+                        await client.sendEvent(
+                            roomId,
+                            "m.room.encrypted" as any,
+                            {
+                                algorithm: "m.megolm.v1.aes-sha2",
+                                ciphertext: "this+message+will+be+undecryptable",
+                                device_id: client.getDeviceId()!,
+                                sender_key: (await client.getCrypto()!.getOwnDeviceKeys()).ed25519,
+                                session_id: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+                            } as any,
+                        );
+                    },
+                    { roomId },
+                );
+
+                // We wait for the event tiles that we expect from the messages that
+                // Bob sent, in sequence.
+                await expect(
+                    page.locator(`.mx_EventTile`).getByText("You don't have access to this message"),
+                ).toBeVisible();
+                await expect(page.locator(`.mx_EventTile`).getByText("This should be decryptable")).toBeVisible();
+                await expect(page.locator(`.mx_EventTile`).getByText("Unable to decrypt message")).toBeVisible();
+
+                // And then we ensure that they are where we expect them to be
+                // Alice should see these event tiles:
+                // - first message sent by Bob (undecryptable)
+                // - Bob invited Alice
+                // - Alice joined the room
+                // - second message sent by Bob (decryptable)
+                // - third message sent by Bob (undecryptable)
+                const tiles = await page.locator(".mx_EventTile").all();
+                expect(tiles.length).toBeGreaterThanOrEqual(5);
+
+                // The first message from Bob was sent before Alice was in the room, so should
+                // be different from the standard UTD message
+                await expect(tiles[tiles.length - 5]).toContainText("You don't have access to this message");
+                await expect(tiles[tiles.length - 5].locator(".mx_EventTile_e2eIcon_decryption_failure")).toBeVisible();
+
+                // The second message from Bob should be decryptable
+                await expect(tiles[tiles.length - 2]).toContainText("This should be decryptable");
+                // this tile won't have an e2e icon since we got the key from the sender
+
+                // The third message from Bob is undecryptable, but was sent while Alice was
+                // in the room and is expected to be decryptable, so this should have the
+                // standard UTD message
+                await expect(tiles[tiles.length - 1]).toContainText("Unable to decrypt message");
+                await expect(tiles[tiles.length - 1].locator(".mx_EventTile_e2eIcon_decryption_failure")).toBeVisible();
+            });
+
+            test("should be able to jump to a message sent before our last join event", async ({
+                homeserver,
+                page,
+                app,
+                credentials: aliceCredentials,
+                user: alice,
+                cryptoBackend,
+                bot: bob,
+            }) => {
+                // The old pre-join UTD hiding code would hide events sent
+                // before our latest join event, even if the event that we're
+                // jumping to was decryptable.  We test that this no longer happens.
+
+                test.skip(cryptoBackend === "legacy", "Not implemented for legacy crypto");
+
+                // Bob:
+                // - creates an encrypted room,
+                // - invites Alice,
+                // - sends a message to it,
+                // - kicks Alice,
+                // - sends a bunch more events
+                // - invites Alice again
+                // In this way, there will be an event that Alice can decrypt,
+                // followed by a bunch of undecryptable events which Alice shouldn't
+                // expect to be able to decrypt.  The old code would have hidden all
+                // the events, even the decryptable event (which it wouldn't have
+                // even tried to fetch, if it was far enough back).
+                const { roomId, eventId } = await bob.evaluate(
+                    async (client, { alice }) => {
+                        const { room_id: roomId } = await client.createRoom({
+                            initial_state: [
+                                {
+                                    type: "m.room.encryption",
+                                    content: {
+                                        algorithm: "m.megolm.v1.aes-sha2",
+                                    },
+                                },
+                            ],
+                            name: "Test room",
+                            preset: "private_chat" as Preset,
+                        });
+
+                        // invite Alice
+                        const inviteAlicePromise = new Promise<void>((resolve) => {
+                            client.on("RoomMember.membership" as EmittedEvents, (_event, member, _oldMembership?) => {
+                                if (member.userId === alice.userId && member.membership === "invite") {
+                                    resolve();
+                                }
+                            });
+                        });
+                        await client.invite(roomId, alice.userId);
+                        // wait for the invite to come back so that we encrypt to Alice
+                        await inviteAlicePromise;
+
+                        // send a message that Alice should be able to decrypt
+                        const { event_id: eventId } = await client.sendTextMessage(
+                            roomId,
+                            "This should be decryptable",
+                        );
+
+                        // kick Alice
+                        const kickAlicePromise = new Promise<void>((resolve) => {
+                            client.on("RoomMember.membership" as EmittedEvents, (_event, member, _oldMembership?) => {
+                                if (member.userId === alice.userId && member.membership === "leave") {
+                                    resolve();
+                                }
+                            });
+                        });
+                        await client.kick(roomId, alice.userId);
+                        await kickAlicePromise;
+
+                        // send a bunch of messages that Alice won't be able to decrypt
+                        for (let i = 0; i < 20; i++) {
+                            await client.sendTextMessage(roomId, `${i}`);
+                        }
+
+                        // invite Alice again
+                        await client.invite(roomId, alice.userId);
+
+                        return { roomId, eventId };
+                    },
+                    { alice },
+                );
+
+                // Alice accepts the invite
+                await expect(
+                    page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
+                ).toHaveCount(1);
+                await page.getByRole("treeitem", { name: "Test room" }).click();
+                await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
+
+                // wait until we're joined and see the timeline
+                await expect(page.locator(`.mx_EventTile`).getByText("Alice joined the room")).toBeVisible();
+
+                // we should be able to jump to the decryptable message that Bob sent
+                await page.goto(`#/room/${roomId}/${eventId}`);
+
+                await expect(page.locator(`.mx_EventTile`).getByText("This should be decryptable")).toBeVisible();
+            });
+        });
     });
 });

playwright/e2e/login/overwrite_login.spec.ts

@@ -18,7 +18,9 @@ import { test, expect } from "../../element-web-test";
 import { logIntoElement } from "../crypto/utils";
 
 test.describe("Overwrite login action", () => {
-    test("Try replace existing login with new one", async ({ page, app, credentials, homeserver }) => {
+    // This seems terminally flakey: https://github.com/element-hq/element-web/issues/27363
+    // I tried verious things to try & deflake it, to no avail: https://github.com/matrix-org/matrix-react-sdk/pull/12506
+    test.skip("Try replace existing login with new one", async ({ page, app, credentials, homeserver }) => {
         await logIntoElement(page, homeserver, credentials);
 
         const userMenu = await app.openUserMenu();
@@ -47,7 +49,6 @@ test.describe("Overwrite login action", () => {
         }, clientCredentials);
 
         // It should be now another user!!
-        const newUserMenu = await app.openUserMenu();
-        await expect(newUserMenu.getByText(bobRegister.userId)).toBeVisible();
+        await expect(page.getByText("Welcome BOB")).toBeVisible();
     });
 });

playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts

@@ -45,6 +45,7 @@ test.describe("1:1 chat room", () => {
         await expect(
             page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomTile").getByText(user2.displayName),
         ).not.toBeVisible();
+        await page.waitForTimeout(500); // avoid race condition with routing
 
         // open new 1:1 chat room
         await page.goto(`/#/user/${user2.userId}?action=chat`);

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

@@ -25,8 +25,6 @@ test.describe("Appearance user settings tab", () => {
     test("should be rendered properly", async ({ page, user, app }) => {
         const tab = await app.settings.openUserSettings("Appearance");
 
-        await expect(tab.getByRole("heading", { name: "Customise your appearance" })).toBeVisible();
-
         // Click "Show advanced" link button
         await tab.getByRole("button", { name: "Show advanced" }).click();
 

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

@@ -125,6 +125,11 @@ test.describe("General user settings tab", () => {
         );
     });
 
+    test("should respond to small screen sizes", async ({ page, uut }) => {
+        await page.setViewportSize({ width: 700, height: 600 });
+        await expect(uut).toMatchScreenshot("general-smallscreen.png");
+    });
+
     test("should support adding and removing a profile picture", async ({ uut }) => {
         const profileSettings = uut.locator(".mx_ProfileSettings");
         // Upload a picture

playwright/e2e/user-onboarding/user-onboarding-new.spec.ts

@@ -45,7 +45,17 @@ test.describe("User Onboarding (new user)", () => {
         await expect(
             page.getByRole("dialog").getByRole("heading", { level: 1, name: "Download Element" }),
         ).toBeVisible();
-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot();
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot(
+            "User-Onboarding-new-user-app-download-dialog-1.png",
+            {
+                // Set a constant bg behind the modal to ensure screenshot stability
+                css: `
+                    .mx_AppDownloadDialog_wrapper {
+                        background: black;
+                    }
+                `,
+            },
+        );
     });
 
     test("using find friends action should increase progress", async ({ page, homeserver }) => {

playwright/pages/settings.ts

@@ -25,8 +25,9 @@ export class Settings {
      * Open the top left user menu, returning a Locator to the resulting context menu.
      */
     public async openUserMenu(): Promise<Locator> {
-        await this.page.getByRole("button", { name: "User menu" }).click();
         const locator = this.page.locator(".mx_ContextualMenu");
+        if (await locator.locator(".mx_UserMenu_contextMenu_header").isVisible()) return locator;
+        await this.page.getByRole("button", { name: "User menu" }).click();
         await locator.waitFor();
         return locator;
     }