Fix settings e2e menu navigation (#543)

Author: jayvenn21

web/src/mocks/handlers/roles.ts

@@ -16,6 +16,7 @@
 // under the License.
 
 import { http, HttpResponse } from "msw";
+import settingsFixture from "@/features/core/identity/__fixtures__/settings.json";
 import type { PrivilegeKey, Role, UserRole } from "@/generated/core/types.gen";
 
 const PRIVILEGES: PrivilegeKey[] = [
@@ -79,6 +80,13 @@ const initialRoles: MockRole[] = [
         { user_id: "u3", role_id: "role-auditor", granted_at: "2026-01-15T09:00:00Z" },
       ],
     },
+    ...Object.values(settingsFixture.roleDetails).map((detail) => ({
+      ...detail.role,
+      privileges: detail.privileges as PrivilegeKey[],
+      holders: (settingsFixture.roles as UserRole[]).filter(
+        (grant) => grant.role_id === detail.role.id,
+      ),
+    })),
   ];
 
 const roles = new Map<string, MockRole>(initialRoles.map((role) => [role.id ?? "", role]));

web/src/shared/layout/UserPill.tsx

@@ -18,14 +18,14 @@
 "use client";
 
 import { LogOut, Settings } from "lucide-react";
-import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { useSignOut } from "@/shared/auth/useSignOut";
 import { Avatar, AvatarFallback } from "@/shared/ui/avatar";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLinkItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/shared/ui/dropdown-menu";
@@ -66,14 +66,10 @@ export function UserPill() {
             <div className="truncate text-xs text-muted-foreground">{email}</div>
           </div>
           <DropdownMenuSeparator />
-          <DropdownMenuItem
-            render={(props) => (
-              <Link {...props} href="/settings">
-                <Settings className="mr-2 h-4 w-4" />
-                Settings
-              </Link>
-            )}
-          />
+          <DropdownMenuLinkItem href="/settings" closeOnClick>
+            <Settings className="mr-2 h-4 w-4" />
+            Settings
+          </DropdownMenuLinkItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem
             variant="destructive"

web/src/shared/ui/dropdown-menu.tsx

@@ -113,6 +113,26 @@ function DropdownMenuItem({
   );
 }
 
+function DropdownMenuLinkItem({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.LinkItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.LinkItem
+      data-slot="dropdown-menu-link-item"
+      data-inset={inset}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
 function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
   return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
 }
@@ -264,6 +284,7 @@ export {
   DropdownMenuGroup,
   DropdownMenuLabel,
   DropdownMenuItem,
+  DropdownMenuLinkItem,
   DropdownMenuCheckboxItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,

web/tests/settings.e2e.ts

@@ -19,28 +19,41 @@ import { expect, test } from "@playwright/test";
 import { signInAs } from "./fixtures/auth";
 
 test.describe("settings", () => {
+  test.setTimeout(90_000);
+
   test("account menu opens the settings page and theme persists across reload", async ({
     page,
   }) => {
     await signInAs(page, "admin");
-    await page.goto("/");
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    await expect(page.getByRole("button", { name: /account menu/i })).toBeVisible({
+      timeout: 30_000,
+    });
 
     // Open the account menu and navigate to Settings.
     await page.getByRole("button", { name: /account menu/i }).click();
-    await page.getByRole("menuitem", { name: /settings/i }).click();
-    await expect(page).toHaveURL(/\/settings$/);
-    await expect(page.getByRole("heading", { name: /^Settings$/ })).toBeVisible();
+    await Promise.all([
+      page.waitForURL(/\/settings$/, { waitUntil: "domcontentloaded" }),
+      page.getByRole("menuitem", { name: /settings/i }).click(),
+    ]);
+    await expect(page.getByRole("heading", { name: /^Settings$/ })).toBeVisible({
+      timeout: 30_000,
+    });
 
     // The identity cards render against the seeded MSW fixtures.
-    await expect(page.getByRole("heading", { name: "Roles" })).toBeVisible();
-    await expect(page.getByRole("heading", { name: "Effective privileges" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Roles" })).toBeVisible({
+      timeout: 30_000,
+    });
+    await expect(page.getByRole("heading", { name: "Effective privileges" })).toBeVisible({
+      timeout: 30_000,
+    });
 
     // Switch to the dark theme and confirm it applies.
     await page.getByRole("button", { name: /^dark$/i }).click();
     await expect(page.locator("html")).toHaveClass(/dark/);
 
     // Reload and confirm the choice persisted (next-themes localStorage).
-    await page.reload();
+    await page.reload({ waitUntil: "domcontentloaded" });
     await expect(page.getByRole("button", { name: /^dark$/i })).toHaveAttribute(
       "aria-pressed",
       "true",