enki/blap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Refactor and redesign user menu (#32812)

Browse Source 
* 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>
This commit is contained in:
Will Hunt
2026-05-06 09:34:36 +01:00
committed by GitHub
parent bbd2d81a08
commit d4f419d1b5
58 changed files with 1231 additions and 874 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/playwright/e2e/app-loading/guest-registration.spec.ts
+17
View File
@@ -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
+7 -3
View File
@@ -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
+3 -1
View File
@@ -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
+4 -1
View File
@@ -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
+2 -5
View File
@@ -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
+2 -1
View File
@@ -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
+9 -8
View File
@@ -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
+3 -2
View File
@@ -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
+3
View File
@@ -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
+13 -3
View File
@@ -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));
});
});