Tweak new user menu design (#33444)

* Tweak new user menu design * Update screenshots * More screenshots * Add story with no avatar * add story to test * Expand the menu so it actually shows what it's supposed to show * Use the open parameter which is the param to open the menu * snapshot * Add test for normal open menu version * Move menu to the right of the avatar and make it appear on top of the display name * Fix user menu layout * screenshots * snapshot * screenshots * more screenshots * Shift toasts to the left slightly So they completely cover the display name of the user menu when it's expanded. Also down slightly so they're level with the user menu. * Tweak toast border radius & position to match & sit on top of the user menu * Close toasts in cider tests * Only close the toast if it's actually there * Fix some toasts to be dismissed & update screenshots more to come though * Make closeKeyStorageToast actually optional * Fix some more toasts & races * Screenshots again again (again) * More screenshots * Convert to rejectToast * Fix toast rejectors to not wait and update screenshots * Apparently 1ms is not long enough
2026-05-19 14:10:14 +01:00
parent 00ccc97c79
commit 0140563b64
46 changed files with 1011 additions and 255 deletions
@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

+import { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { getSampleFilePath } from "../../sample-files";
@@ -28,7 +30,9 @@ test.describe("Composer", () => {
        },
    });

-    test.beforeEach(async ({ room }) => {}); // trigger room fixture
+    test.beforeEach(async ({ app, room /* trigger room fixture */ }) => {
+        await rejectToastIfExists(app.page, "Notifications");
+    });

    test.describe("CIDER", () => {
        test("sends a message when you click send or press Enter", async ({ page }) => {
@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

+import { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
+
 import type { Preset, RoomMemberEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { expect, test } from "../../element-web-test";
 import {
@@ -118,6 +120,9 @@ test.describe("Cryptography", function () {
                user: alice,
                bot: bob,
            }) => {
+                await rejectToastIfExists(page, "Verify this device");
+                await rejectToastIfExists(page, "Notifications");
+
                // Bob creates an encrypted room and sends a message to it. He then invites Alice
                const roomId = await bob.evaluate(
                    async (client, { alice }) => {
@@ -224,6 +229,9 @@ test.describe("Cryptography", function () {
                user: alice,
                bot: bob,
            }) => {
+                await rejectToastIfExists(page, "Verify this device");
+                await rejectToastIfExists(page, "Notifications");
+
                // Bob:
                // - creates an encrypted room,
                // - invites Alice,
@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

+import { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 import { isDendrite } from "../../plugins/homeserver/dendrite";

@@ -46,6 +48,8 @@ test.describe("Mark as Unread", () => {
        // navigate away from the room again
        await page.goto("/#/room/" + dummyRoomId);

+        await rejectToastIfExists(page, "Verify this device");
+
        const roomTile = page.getByLabel(TEST_ROOM_NAME);
        await roomTile.click({ button: "right" });
        await page.getByRole("menuitem", { name: "Mark as unread" }).click();
@@ -69,6 +69,7 @@ test.describe("Appearance user settings tab", () => {
        { tag: "@screenshot" },
        async ({ page, app, user, util }) => {
            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");

            const roomId = await util.createAndDisplayRoom();

@@ -28,6 +28,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
        { tag: "@screenshot" },
        async ({ util, page }) => {
            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");

            // Open the space panel
            await util.expandSpacePanel();
@@ -41,6 +42,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
        { tag: "@screenshot" },
        async ({ room1, util, app, page }) => {
            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");

            // No indicator should be shown
            await util.assertNoTacIndicator();
@@ -61,6 +63,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
        page,
    }) => {
        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");

        await util.goTo(room1);
        await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);
@@ -78,6 +81,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
        page,
    }) => {
        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");

        await util.goTo(room1);
        await util.receiveMessages(room1, [
@@ -101,6 +105,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
        { tag: "@screenshot" },
        async ({ room1, room2, util, msg, user, app, page }) => {
            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");

            await util.goTo(room2);
            await util.populateThreads(room1, room2, msg, user);
@@ -124,6 +129,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
        { tag: "@screenshot" },
        async ({ room1, room2, util, msg, user, app, page }) => {
            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");

            await util.goTo(room2);
            await util.populateThreads(room1, room2, msg, user);
@@ -150,6 +156,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {

    test("should order by recency after notification level", async ({ room1, room2, util, msg, user, app, page }) => {
        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");

        await util.goTo(room2);
        await util.populateThreads(room1, room2, msg, user, false);
@@ -163,6 +170,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {

    test("should block the Spotlight to open when the TAC is opened", async ({ util, page, app }) => {
        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");

        const toggleSpotlight = () => page.keyboard.press(`${CommandOrControl}+k`);

@@ -180,6 +188,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {

    test("should have the correct hover state", { tag: "@screenshot" }, async ({ util, page, app }) => {
        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");

        await util.hoverTacButton();
        await expect(util.getSpacePanel()).toMatchScreenshot("tac-hovered.png");
@@ -192,6 +201,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {

    test("should mark all threads as read", { tag: "@screenshot" }, async ({ room1, room2, util, msg, page, app }) => {
        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");

        await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);

@@ -214,6 +224,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
        page,
    }) => {
        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");

        await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { type Locator, type Page, expect } from "@playwright/test";
 import { readFile } from "node:fs/promises";
 import { basename } from "node:path";
-import { rejectToast } from "@element-hq/element-web-playwright-common";
+import { rejectToastIfExists } from "@element-hq/element-web-playwright-common";

 import { Settings } from "./settings";
 import { Client } from "./client";
@@ -96,6 +96,17 @@ export class ElementAppPage {
     * @param name The exact room name to find and click on/open.
     */
    public async viewRoomByName(name: string): Promise<void> {
+        // Make sure the room list is actually present before we try closing toasts,
+        // otherwise we may race with page loading
+        await this.page.getByTestId("room-list").waitFor();
+
+        await rejectToastIfExists(this.page, "Verify this device", { timeout: 50 });
+        const keyStorageToastRejected = await rejectToastIfExists(this.page, "Turn on key storage", { timeout: 50 });
+        if (keyStorageToastRejected) {
+            await this.page.getByRole("button", { name: "Yes, dismiss" }).click();
+        }
+        await rejectToastIfExists(this.page, "Notifications", { timeout: 50 });
+
        // We get the room list by test-id which is a listbox and matching title=name
        return this.page.getByTestId("room-list").locator(`[title="${name}"]`).first().click();
    }
@@ -363,7 +374,7 @@ export class ElementAppPage {
     * Dismiss the "Turn on key storage" toast.
     */
    public async closeKeyStorageToast() {
-        await rejectToast(this.page, "Turn on key storage");
+        await this.closeToast("Turn on key storage", "Dismiss");
        await this.page.getByRole("button", { name: "Yes, dismiss" }).click();
    }