Refactor and redesign user menu (#32812)

* Initial quick settings menu

* Total refactor

* Quick design fixes.

* Refactor to use a view model.

* Remove unused strings

* Apply label

* Refactor naming

* Fixup most tests

* Remove specific theming for old user menu

* prettier

* Lots of cleanup

* Allow overriding the menu classes

* update snap

* Oops translations

* tidy

* Cleanup guest flows.

* Copyrights

* Remove unused classname

* Match guest view to designs

* Add guest screenshots

* Update guests

* snapshot

* Cleanup

* fix import

* Update tests

* More sceenshot fixes

* update collapsed

* move statements to prevent flake

* update snap

* Kick it along

* Click the room list

* Fiddle with the room video list.

* More screenshot adjustments

* fix imports

* fix another import

* Update snaps

* update snaps

* Fix snap flakes

* Refactor to move actions to view component, and callbacks to Actions

* Cleanup

* Cleanup

* Cleanup

* invert auth

* More bits

* fix

* Change md buttons to sm

* Try to assemble the snapshot component of the house of cards

* Consistent newlines between tests

* Update snapshot

Not sure why this was like this, this seems consistet for a logged in user

* Update snapshot

again these seem sensible for a guest

* Remove test

I don't really understand why the thing it asserts matters, so I'm removing
it for now.

* Update snapshot

* screenshot

* Don't show profile picture for guests

I'm not really sure what it meant for this interface to have a
property with a default value, so I've removed it and added the
property to the view model.

* Show avatar in story

* update snapshots for showAvatar

* Update screenshots

& hopefully make hover consistent in one

* Use outline home icon

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>

apps/web/playwright/e2e/app-loading/guest-registration.spec.ts

@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
  * Tests for application startup with guest registration enabled on the server.
  */
 
+import type { Page } from "playwright-core";
 import { expect, test } from "../../element-web-test";
 
 test.use({
@@ -18,12 +19,28 @@ test.use({
     },
 });
 
+const screenshotOptions = (page?: Page) => ({
+    // Hide the UserID
+    css: `
+        span[data-testid="userId"] {
+            display: none !important;
+        }
+    `,
+});
+
 test("Shows the welcome page by default", async ({ page }) => {
     await page.goto("/");
     await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();
     await expect(page.getByRole("link", { name: "Sign in" })).toBeVisible();
 });
 
+test("Shows the user menu for guests", { tag: ["@screenshot"] }, async ({ page, app }) => {
+    await page.goto("/#/room/!room:id");
+    await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+    const menu = await app.openUserMenu();
+    await expect(menu).toMatchScreenshot("guest-menu.png", screenshotOptions(page));
+});
+
 test("Room link correctly loads a room view", async ({ page }) => {
     await page.goto("/#/room/!room:id");
     await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });

apps/web/playwright/e2e/crypto/logout.spec.ts

@@ -23,7 +23,9 @@ test.describe("Logout tests", () => {
         await sendMessageInCurrentRoom(page, "Hello secret world");
 
         const locator = await app.settings.openUserMenu();
-        await locator.getByRole("menuitem", { name: "Remove this device", exact: true }).click();
+
+        await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
+        await page.getByRole("button", { name: "Remove this device", exact: true }).click();
 
         const currentDialogLocator = page.locator(".mx_Dialog");
 
@@ -41,7 +43,8 @@ test.describe("Logout tests", () => {
         await sendMessageInCurrentRoom(page, "Hello secret world");
 
         const locator = await app.settings.openUserMenu();
-        await locator.getByRole("menuitem", { name: "Remove this device", exact: true }).click();
+        await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
+        await page.getByRole("button", { name: "Remove this device", exact: true }).click();
 
         const currentDialogLocator = page.locator(".mx_Dialog");
 
@@ -54,7 +57,8 @@ test.describe("Logout tests", () => {
         await sendMessageInCurrentRoom(page, "Hello public world!");
 
         const locator = await app.settings.openUserMenu();
-        await locator.getByRole("menuitem", { name: "Remove this device", exact: true }).click();
+        await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
+        await page.getByRole("button", { name: "Remove this device", exact: true }).click();
 
         // Should have logged out directly
         await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();

apps/web/playwright/e2e/crypto/utils.ts

@@ -252,7 +252,9 @@ export async function logIntoElementAndVerify(page: Page, credentials: Credentia
  */
 export async function logOutOfElement(page: Page, discardKeys: boolean = false) {
     await page.getByRole("button", { name: "User menu" }).click();
-    await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Remove this device" }).click();
+
+    await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
+    await page.getByRole("button", { name: "Remove this device" }).click();
     if (discardKeys) {
         await page.getByRole("button", { name: "I don't want my encrypted messages" }).click();
     } else {

apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -328,8 +328,11 @@ test.describe("Room list", () => {
             const videoRoom = roomListView.getByRole("option", { name: "video room" });
             await expect(videoRoom).toHaveAttribute("aria-selected", "true"); // wait for room list update
 
+            // Ensure we highlight the video
+            await videoRoom.click();
+
             // focus the user menu to avoid to have hover decoration
-            await page.getByRole("button", { name: "User menu" }).focus();
+            await page.getByRole("button", { name: "User menu" }).hover();
 
             await expect(videoRoom).toMatchScreenshot("room-list-item-video.png");
         });

apps/web/playwright/e2e/login/login-consent.spec.ts

@@ -340,11 +340,8 @@ test.describe("Login", () => {
 
             // Allow the outstanding requests queue to settle before logging out
             await page.waitForTimeout(2000);
-
-            await page
-                .locator(".mx_UserMenu_contextMenu")
-                .getByRole("menuitem", { name: "Remove this device" })
-                .click();
+            await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
+            await page.getByRole("button", { name: "Remove this device" }).click();
             await expect(page).toHaveURL(/\/#\/welcome$/);
         });
     });

apps/web/playwright/e2e/login/logout_redirect_url.spec.ts

@@ -28,8 +28,9 @@ test.describe("logout with logout_redirect_url", () => {
 
         // give a change for the outstanding requests queue to settle before logging out
         await page.waitForTimeout(2000);
+        await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
+        await page.getByRole("button", { name: "Remove this device" }).click();
 
-        await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Remove this device" }).click();
         await expect(page).toHaveURL(/\/decoder-ring\/$/);
     });
 });

apps/web/playwright/e2e/oidc/oidc-native.spec.ts

@@ -74,7 +74,8 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             (request) => request.url() === revokeUri && request.postDataJSON()["token_type_hint"] === "refresh_token",
         );
         const locator = await app.settings.openUserMenu();
-        await locator.getByRole("menuitem", { name: "Remove this device", exact: true }).click();
+        await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
+        await page.getByRole("button", { name: "Remove this device", exact: true }).click();
         await revokeAccessTokenPromise;
         await revokeRefreshTokenPromise;
     });
@@ -122,7 +123,8 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 
         // Allow the outstanding requests queue to settle before logging out
         await page.waitForTimeout(2000);
-        await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Remove this device" }).click();
+        await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
+        await page.getByRole("button", { name: "Remove this device" }).click();
         await expect(page).toHaveURL(/\/#\/welcome$/);
 
         // Log in again
@@ -155,10 +157,8 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await page.getByRole("button", { name: "User menu" }).click();
             await expect(page.getByText(userId, { exact: true })).toBeVisible();
             await page.waitForTimeout(2000);
-            await page
-                .locator(".mx_UserMenu_contextMenu")
-                .getByRole("menuitem", { name: "Remove this device" })
-                .click();
+            await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
+            await page.getByRole("button", { name: "Remove this device" }).click();
             await expect(page).toHaveURL(/\/#\/welcome$/);
 
             // Log in again
@@ -206,9 +206,10 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
                 await expect(page.getByText(userId, { exact: true })).toBeVisible();
                 await page.waitForTimeout(2000);
                 await page
-                    .locator(".mx_UserMenu_contextMenu")
-                    .getByRole("menuitem", { name: "Remove this device" })
+                    .getByRole("menu", { name: "User menu" })
+                    .getByRole("menuitem", { name: "All settings" })
                     .click();
+                await page.getByRole("button", { name: "Remove this device" }).click();
                 await expect(page).toHaveURL(/\/#\/welcome$/);
 
                 // Log in again

apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts

@@ -129,7 +129,7 @@ test.describe("Account user settings tab", () => {
         await expect(accountPhoneNumbers.getByRole("button", { name: "Add" })).toBeVisible();
     });
 
-    test("should support changing a display name", async ({ uut, page, app }) => {
+    test("should support changing a display name", async ({ uut, page, app, user }) => {
         // Change the diaplay name to USER_NAME_NEW
         const displayNameInput = uut
             .locator(".mx_SettingsTab .mx_UserProfileSettings")
@@ -140,7 +140,8 @@ test.describe("Account user settings tab", () => {
         await app.closeDialog();
 
         // Assert the avatar's initial characters are set
-        await expect(page.locator(".mx_UserMenu .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
+        const menu = await app.openUserMenu();
+        await expect(menu.getByRole("img", { name: user.userId }).getByText("A")).toBeVisible(); // Alice
         await expect(page.locator(".mx_RoomView_wrapper .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
     });
 

apps/web/playwright/e2e/spaces/spaces.spec.ts

@@ -318,6 +318,9 @@ test.describe("Spaces", () => {
             await spaceTree.getByRole("button", { name: "Expand" }).click();
             await expect(page.locator(".mx_SpacePanel:not(.collapsed)")).toBeVisible(); // TODO: replace :not() selector
 
+            // focus the quick settings button to ensure the spaces aren't being hovered over for consistent screenshots
+            await page.getByRole("button", { name: "Quick settings" }).focus();
+
             const item = page.locator(".mx_SpaceItem", { hasText: "Root Space" });
             await expect(item).toBeVisible();
             await expect(item.locator(".mx_SpaceItem", { hasText: "Child Space" })).toBeVisible();

apps/web/playwright/e2e/user-menu/user-menu.spec.ts

@@ -6,8 +6,18 @@ 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 type { Page } from "playwright-core";
 import { test, expect } from "../../element-web-test";
 
+const screenshotOptions = (page?: Page) => ({
+    // Hide the UserID
+    css: `
+        span[data-testid="userId"] {
+            display: none !important;
+        }
+    `,
+});
+
 test.describe("User Menu", () => {
     test.use({ displayName: "Jeff" });
 
@@ -15,8 +25,8 @@ test.describe("User Menu", () => {
         await page.getByRole("button", { name: "User menu", exact: true }).click();
         const menu = page.getByRole("menu");
 
-        await expect(menu.locator(".mx_UserMenu_contextMenu_displayName", { hasText: user.displayName })).toBeVisible();
-        await expect(menu.locator(".mx_UserMenu_contextMenu_userId", { hasText: user.userId })).toBeVisible();
-        await expect(menu).toMatchScreenshot("user-menu.png");
+        await expect(menu.getByText(user.displayName)).toBeVisible();
+        await expect(menu.getByText(user.userId)).toBeVisible();
+        await expect(menu).toMatchScreenshot("user-menu.png", screenshotOptions(page));
     });
 });

apps/web/playwright/pages/settings.ts

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