test(e2e): tighten Phase 1 spec assertions, remove runtime TODOs (UX-1208)

Replace the structural-only assertions in the Phase 1 e2e specs with concrete
runtime checks derived from the actual UI code paths:

- user-error-handling: assert the formatToastErrorMessageGRPC output verbatim
  for ALREADY_EXISTS, anchor on the deterministic "Failed to create user"
  prefix for transport-level network failures.
- user-delete-error: assert "Failed to delete user: user has dependent ACLs"
  is rendered in the sonner toast.
- quota-error: assert the Chakra Alert (role="alert") contains the rawMessage
  for INTERNAL, and the 403 ResultHttpError + "not allowed to view this page"
  copy for PERMISSION_DENIED.
- users-deeplink: implement the previously-skipped ACL deeplink test by
  seeding a real ACL via AclPage, then loading the detail URL in a fresh
  browser context to simulate cold cache.
- users-authorization: clarify the dual-behavior comment on the view-only
  create-user gate.

Author: c-julin

frontend/tests/test-variant-console-enterprise/users-authorization.spec.ts

@@ -44,15 +44,14 @@ test.describe('Authorization - Users page (view-only role)', () => {
     }
 
     // Direct navigation: /security/users/create should NOT show a working create form.
+    // The form may either be hidden entirely (route redirect) or rendered with the submit
+    // disabled (inline permission gate) — both are acceptable view-only behaviors.
     await page.goto('/security/users/create', { waitUntil: 'domcontentloaded' });
     const submitButton = page.getByTestId('create-user-submit');
     const submitVisible = await submitButton.isVisible().catch(() => false);
     if (submitVisible) {
       await expect(submitButton).toBeDisabled();
     }
-
-    // TODO(runtime, UX-1208): confirm whether the route redirects away or shows an inline
-    // permission-denied message; tighten the assertion once product behavior is known.
   });
 
   test('delete user button is not available on details page for view-only role', async ({ page }) => {

frontend/tests/test-variant-console/acls/user-delete-error.spec.ts

@@ -45,7 +45,9 @@ test.describe('User deletion - error paths', () => {
     await page.goto('/security/users', { waitUntil: 'domcontentloaded' });
     await expect(page.getByRole('link', { name: username, exact: true })).toBeVisible({ timeout: 5000 });
 
-    // TODO(runtime, UX-1208): verify toast copy for FAILED_PRECONDITION (HTTP 412).
-    // formatToastErrorMessageGRPC produces "Failed to delete user due to: {reason} (code: 9)".
+    // Toast copy: formatToastErrorMessageGRPC composes "Failed to delete user: <rawMessage>".
+    await expect(page.getByText('Failed to delete user: user has dependent ACLs').first()).toBeVisible({
+      timeout: 10_000,
+    });
   });
 });

frontend/tests/test-variant-console/acls/user-error-handling.spec.ts

@@ -35,8 +35,10 @@ test.describe('User creation - Connect RPC error handling', () => {
     // Success sentinel must not appear.
     await expect(page.getByTestId('user-created-successfully')).not.toBeVisible();
 
-    // TODO(runtime, UX-1208): verify exact toast copy emitted by formatToastErrorMessageGRPC
-    // for a transport-level failure (no ConnectError details). Likely generic "Failed to create user".
+    // Toast copy: formatToastErrorMessageGRPC prefixes every error with "Failed to {action} {entity}".
+    // The exact rawMessage from a fetch-level abort is browser-dependent ("Failed to fetch",
+    // "TypeError: Failed to fetch", etc.), so we anchor on the deterministic prefix.
+    await expect(page.getByText(/^Failed to create user/).first()).toBeVisible({ timeout: 10_000 });
   });
 
   test('CreateUser ALREADY_EXISTS surfaces a user-friendly error', async ({ page }) => {
@@ -58,8 +60,9 @@ test.describe('User creation - Connect RPC error handling', () => {
     await expect(page).toHaveURL('/security/users/create');
     await expect(page.getByTestId('user-created-successfully')).not.toBeVisible();
 
-    // TODO(runtime, UX-1208): verify exact toast copy for ALREADY_EXISTS.
-    // formatToastErrorMessageGRPC format is "Failed to {action} {entity} due to: {reason} (code: {internalCode})".
-    // Expect 'already exists' substring to be present somewhere in the visible toast region.
+    // Toast copy: rawMessage from the mock envelope is composed verbatim into the toast title.
+    await expect(page.getByText('Failed to create user: user "existing-user" already exists').first()).toBeVisible({
+      timeout: 10_000,
+    });
   });
 });

frontend/tests/test-variant-console/acls/users-deeplink.spec.ts

@@ -10,6 +10,15 @@
 
 import { expect, test } from '@playwright/test';
 
+import {
+  ModeCustom,
+  OperationTypeAllow,
+  ResourcePatternTypeLiteral,
+  ResourceTypeTopic,
+  type Rule,
+} from '../../../src/components/pages/security/shared/acl-model';
+import { AclPage } from '../utils/acl-page';
+
 test.describe('Users page deep-link (cold cache)', () => {
   test('direct-load /security/users/e2euser/details renders without prior list navigation', async ({ page }) => {
     // Collect console/page errors to guard against cache-miss crashes.
@@ -32,17 +41,55 @@ test.describe('Users page deep-link (cold cache)', () => {
     await expect(page.getByRole('heading', { name: /ACLs/ })).toBeVisible();
 
     // Guard: no console errors mentioning undefined user / missing data.
+    // Narrow regex anchored to the cache-miss crash signatures we'd act on; benign
+    // Connect Query warnings (e.g. canceled in-flight queries on unmount) won't match.
     const suspicious = consoleErrors.filter((msg) => /cannot read|undefined|missing user/i.test(msg));
     expect(suspicious).toEqual([]);
-
-    // TODO(runtime, UX-1208): some Connect Query cache-miss warnings may appear as benign
-    // console logs. If this assertion flakes, narrow the regex to known-bad strings.
   });
 
-  // biome-ignore lint/suspicious/noSkippedTests: requires ACL seed helper — see UX-1208 runtime pass
-  test.skip('direct-load /security/acls/<principal>/details renders for existing principal', async () => {
-    // TODO(runtime, UX-1208): seed a deterministic ACL via AclPage in a beforeAll hook,
-    // then load the details URL directly in a fresh page context and assert the rules table renders.
-    // Deferred: requires AclPage.create scaffolding + serial describe to guarantee seed order.
+  test('direct-load /security/acls/<principal>/details renders for existing principal', async ({ page }) => {
+    test.setTimeout(180_000);
+
+    const principal = `deeplink-${Date.now()}`;
+    const host = '*';
+    const seedRule: Rule = {
+      id: 0,
+      resourceType: ResourceTypeTopic,
+      mode: ModeCustom,
+      selectorType: ResourcePatternTypeLiteral,
+      selectorValue: 'deeplink-topic',
+      operations: { READ: OperationTypeAllow },
+    };
+
+    const aclPage = new AclPage(page);
+
+    // Seed: create an ACL via the live UI flow so the Connect backend has a real entry to fetch.
+    await aclPage.goto();
+    await aclPage.setPrincipal(principal);
+    await aclPage.setHost(host);
+    await aclPage.configureRules([seedRule]);
+    await aclPage.submitForm();
+    await aclPage.waitForDetailPage();
+
+    // Cold-cache simulation: open a fresh page in a new context so Connect Query has no
+    // hydrated `getAclsByPrincipal` entry, then deep-link straight to the detail URL.
+    const freshContext = await page.context().browser()?.newContext();
+    if (!freshContext) {
+      throw new Error('Failed to create fresh browser context');
+    }
+    const freshPage = await freshContext.newPage();
+    try {
+      await freshPage.goto(`/security/acls/User:${principal}/details`, { waitUntil: 'domcontentloaded' });
+
+      // Structural: detail page renders rules without a prior list visit. Use a fresh AclPage
+      // so validateDetailRule queries the new context, not the original page.
+      const freshAclPage = new AclPage(freshPage);
+      await expect(freshPage.getByTestId('acl-rules-length').first()).toHaveText('ACL rules (1)', {
+        timeout: 15_000,
+      });
+      await freshAclPage.validateDetailRule(0, seedRule, principal, host);
+    } finally {
+      await freshContext.close();
+    }
   });
 });

frontend/tests/test-variant-console/quotas/quota-error.spec.ts

@@ -31,9 +31,10 @@ test.describe('Quotas page - Connect error handling', () => {
     const rowsWithData = page.getByRole('row').filter({ hasText: 'MiB' });
     await expect(rowsWithData).toHaveCount(0);
 
-    // TODO(runtime, UX-1208): assert the exact error-UI element.
-    // Quota page likely renders either a toast (via formatToastErrorMessageGRPC) or a
-    // dedicated error card. Confirm which, then replace this comment with the precise locator.
+    // Error UI: QuotasList renders a Chakra Alert (role="alert") containing the ConnectError
+    // message when the failure is not permission-related. ConnectError stringifies as
+    // "[<code>] <rawMessage>", so the mocked rawMessage is the deterministic substring to assert.
+    await expect(page.getByRole('alert')).toContainText('mocked backend failure', { timeout: 10_000 });
   });
 
   test('ListQuotas PERMISSION_DENIED surfaces a permission message (not a raw gRPC code)', async ({ page }) => {
@@ -50,7 +51,10 @@ test.describe('Quotas page - Connect error handling', () => {
     // Structural: raw "permission_denied" machine identifier must not leak to user.
     await expect(page.locator('body')).not.toContainText('permission_denied');
 
-    // TODO(runtime, UX-1208): verify user-facing message mentions permission in
-    // human-readable form (e.g. "Permission denied" or "requires PERMISSION_VIEW").
+    // QuotasList branches on error.message.includes('permission'|'forbidden') and renders
+    // a 403 ResultHttpError with a fixed user-facing message — assert both the status code
+    // and the human-readable copy that appears in its place.
+    await expect(page.getByRole('heading', { name: '403' })).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByText(/not allowed to view this page/i)).toBeVisible();
   });
 });