test(e2e): fill Phase 1 spec assertions (structural) (UX-1208, UX-1198)

Follows up on skeleton scaffolding by filling every assertion that is
verifiable without running the full testcontainer stack. Copy-dependent
assertions (exact toast text emitted by formatToastErrorMessageGRPC) are
left as // TODO(runtime, UX-1208) markers for the final runtime pass.

Assertions added:
- user-error-handling: form state preserved after CreateUser failure;
  URL stays on /create; success sentinel absent.
- user-delete-error: seeds a real user via SecurityPage.createUser, mocks
  DeleteUser failure, asserts user still in list after failed delete.
- acl-create-error: uses AclPage + minimal Cluster/DESCRIBE rule; asserts
  URL stays on /security/acls/create after both invalid_argument and
  timedout failures.
- acl-delete-multi-match: seeds two ACLs across hosts for one principal,
  executes Delete (ACLs only) flow, asserts both acl-list-item testids
  are gone. Zero-match case asserts menuitem is hidden OR disabled
  (product behavior TBD — see TODO).
- quota-error: asserts Quotas heading renders even on INTERNAL error;
  asserts raw 'permission_denied' string does not leak to user on 403.
- users-deeplink: direct-load /security/users/e2euser/details; asserts
  headings + no suspicious console errors (cannot read|undefined|missing).
- acl-principal-special-chars: full round-trip for 'User:test-colon-<ts>'
  through create → detail URL encoding → list → detail click.
- users-authorization: full assertions ready behind VIEW_ONLY_FIXTURE_READY
  flag (UX-1209 unblocks).

Runtime TODOs are clearly tagged // TODO(runtime, UX-1208): each is a
toast-copy or specific-UI-copy assertion that requires a live backend to
verify without guessing. Every other structural guarantee is in place.

bun run type:check clean. bun run lint:check 0 errors. Not runtime-verified.

Author: c-julin

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

@@ -6,65 +6,137 @@
  * to list (all three are PERMISSION_VIEW in the dataplane proto) but MUST NOT be able to
  * create/update/delete (those are PERMISSION_ADMIN).
  *
- * Blocked on: new view-only auth fixture (playwright/.auth/view-only.json).
- * See global-setup.mjs + a new auth-view-only.setup.ts to seed the role + login.
+ * Blocked on: new view-only auth fixture (playwright/.auth/view-only.json) — see UX-1209.
  */
 
 import { expect, test } from '@playwright/test';
 
-// TODO(UX-1208): once auth fixture lands, replace the storageState below with the
-// real path and remove this describe-level `test.skip`.
+// TODO(UX-1209): flip to true once the view-only fixture lands. All assertions below are
+// ready; only the seeded role and storageState are missing.
 const VIEW_ONLY_STORAGE_STATE = 'playwright/.auth/view-only.json';
 const VIEW_ONLY_FIXTURE_READY = false;
 
 test.describe('Authorization - Users page (view-only role)', () => {
-  test.skip(!VIEW_ONLY_FIXTURE_READY, 'view-only auth fixture pending — see UX-1208');
+  test.skip(!VIEW_ONLY_FIXTURE_READY, 'view-only auth fixture pending — see UX-1209');
   test.use({ storageState: VIEW_ONLY_STORAGE_STATE });
 
-  test.beforeEach(async ({ page }) => {
+  test('users list renders for view-only role', async ({ page }) => {
     await page.goto('/security/users', { waitUntil: 'domcontentloaded' });
-  });
 
-  test('users list renders for view-only role', async () => {
-    // TODO: assert /security/users loads without a 403 page (page is reachable)
-    // TODO: assert users table is visible and contains at least the seed user
+    // Structural: the page loads (not a 403 / permission-denied boundary).
+    await expect(page.getByRole('table')).toBeVisible({ timeout: 10_000 });
+
+    // At least one row (the seeded view-only user itself should be present).
+    const rows = page.getByRole('row');
+    await expect(rows).not.toHaveCount(0);
   });
 
-  test('create user button is hidden or disabled for view-only role', async () => {
-    // TODO: assert getByTestId('create-user-button') is not visible OR is disabled
-    // TODO: direct navigation to /security/users/create should redirect or show permission error
+  test('create user button is hidden or disabled for view-only role', async ({ page }) => {
+    await page.goto('/security/users', { waitUntil: 'domcontentloaded' });
+
+    // Structural: the Create button is either absent or disabled — both acceptable.
+    const createButton = page.getByTestId('create-user-button');
+    const isVisible = await createButton.isVisible().catch(() => false);
+    if (isVisible) {
+      await expect(createButton).toBeDisabled();
+    } else {
+      await expect(createButton).not.toBeVisible();
+    }
+
+    // Direct navigation: /security/users/create should NOT show a working create form.
+    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 () => {
-    // TODO: navigate to a user details page
-    // TODO: assert the 'Delete user' button is hidden or disabled
+  test('delete user button is not available on details page for view-only role', async ({ page }) => {
+    // The seeded view-only user should be visible in the list.
+    await page.goto('/security/users', { waitUntil: 'domcontentloaded' });
+    await expect(page.getByRole('table')).toBeVisible({ timeout: 10_000 });
+
+    // Click the first user link (whichever exists — we don't care which one).
+    const firstUserLink = page.locator("a[href^='/security/users/'][href$='/details']").first();
+    await expect(firstUserLink).toBeVisible();
+    await firstUserLink.click();
+
+    // Structural: Delete button is hidden or disabled.
+    const deleteBtn = page.getByRole('button', { name: 'Delete user' });
+    const deleteVisible = await deleteBtn.isVisible().catch(() => false);
+    if (deleteVisible) {
+      await expect(deleteBtn).toBeDisabled();
+    } else {
+      await expect(deleteBtn).not.toBeVisible();
+    }
   });
 });
 
 test.describe('Authorization - ACLs page (view-only role)', () => {
-  test.skip(!VIEW_ONLY_FIXTURE_READY, 'view-only auth fixture pending — see UX-1208');
+  test.skip(!VIEW_ONLY_FIXTURE_READY, 'view-only auth fixture pending — see UX-1209');
   test.use({ storageState: VIEW_ONLY_STORAGE_STATE });
 
   test('ACLs list is visible but Create ACL is blocked', async ({ page }) => {
     await page.goto('/security/acls', { waitUntil: 'domcontentloaded' });
-    // TODO: assert list renders
-    // TODO: assert create button is disabled or hidden
-    // TODO: direct navigation to /security/acls/create should show permission error or redirect
     expect(page.url()).toContain('/security/acls');
+
+    // Structural: Create ACL button hidden or disabled.
+    const createAcl = page.getByTestId('create-acls');
+    const createVisible = await createAcl.isVisible().catch(() => false);
+    if (createVisible) {
+      await expect(createAcl).toBeDisabled();
+    } else {
+      await expect(createAcl).not.toBeVisible();
+    }
+
+    // Direct-nav: /security/acls/create should not present a working form.
+    await page.goto('/security/acls/create', { waitUntil: 'domcontentloaded' });
+    const principalInput = page.getByTestId('shared-principal-input');
+    const principalVisible = await principalInput.isVisible().catch(() => false);
+    if (principalVisible) {
+      await expect(principalInput).toBeDisabled();
+    }
   });
 
-  test('DeleteACLs dropdown items are hidden in permissions list for view-only', async () => {
-    // TODO: goto /security/permissions-list
-    // TODO: open the row dropdown and assert delete menuitems are absent
+  test('DeleteACLs dropdown items are hidden in permissions list for view-only', async ({ page }) => {
+    await page.goto('/security/permissions-list', { waitUntil: 'domcontentloaded' });
+
+    // Find any row and open its dropdown.
+    const firstRow = page.getByRole('row').nth(1); // nth(0) is the header
+    const rowExists = await firstRow.isVisible().catch(() => false);
+    test.skip(!rowExists, 'no permission-list rows to exercise; seed required');
+
+    await firstRow.getByRole('button').click();
+
+    // Structural: all three delete options are absent or disabled for view-only role.
+    for (const testId of ['delete-user-and-acls', 'delete-user-only', 'delete-acls-only']) {
+      const item = page.getByTestId(testId);
+      const isVisible = await item.isVisible().catch(() => false);
+      if (isVisible) {
+        await expect(item).toBeDisabled();
+      } else {
+        await expect(item).not.toBeVisible();
+      }
+    }
   });
 });
 
 test.describe('Authorization - Quotas page (view-only role)', () => {
-  test.skip(!VIEW_ONLY_FIXTURE_READY, 'view-only auth fixture pending — see UX-1208');
+  test.skip(!VIEW_ONLY_FIXTURE_READY, 'view-only auth fixture pending — see UX-1209');
   test.use({ storageState: VIEW_ONLY_STORAGE_STATE });
 
-  test('quotas table loads for view-only role', async () => {
-    // TODO: goto /security/quotas, assert column headers visible
-    // TODO: assert any existing quota rows render without permission errors
+  test('quotas table loads for view-only role', async ({ page }) => {
+    await page.goto('/quotas', { waitUntil: 'domcontentloaded' });
+
+    // Structural: heading renders.
+    await expect(page.getByRole('heading', { name: 'Quotas' })).toBeVisible({ timeout: 10_000 });
+
+    // Column headers are visible (the table is rendered even if zero quotas).
+    await expect(page.getByRole('columnheader', { name: 'Type' })).toBeVisible();
+    await expect(page.getByRole('columnheader', { name: 'Name' })).toBeVisible();
   });
 });

frontend/tests/test-variant-console/acls/acl-create-error.spec.ts

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/performance/useTopLevelRegex: e2e test */
 /**
  * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
  * parent epic: UX-1198 — REST-to-Connect RPC migration
@@ -7,12 +8,31 @@
  * through formatToastErrorMessageGRPC.
  */
 
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
+import {
+  ModeCustom,
+  OperationTypeAllow,
+  ResourcePatternTypeLiteral,
+  ResourceTypeCluster,
+  type Rule,
+} from '../../../src/components/pages/security/shared/acl-model';
 import { mockConnectError, mockConnectNetworkFailure, rpcUrl } from '../../shared/connect-mock';
+import { AclPage } from '../utils/acl-page';
 
 const ACL_SERVICE = 'redpanda.api.dataplane.v1.ACLService';
 
+const MINIMAL_RULE: Rule = {
+  id: 0,
+  resourceType: ResourceTypeCluster,
+  mode: ModeCustom,
+  selectorType: ResourcePatternTypeLiteral,
+  selectorValue: 'kafka-cluster',
+  operations: {
+    DESCRIBE: OperationTypeAllow,
+  },
+};
+
 test.describe('ACL creation - Connect RPC error handling', () => {
   test('CreateACL INVALID_ARGUMENT surfaces a field-level error', async ({ page }) => {
     await mockConnectError({
@@ -21,9 +41,21 @@ test.describe('ACL creation - Connect RPC error handling', () => {
       code: 'invalid_argument',
       message: 'principal cannot be empty',
     });
-    // TODO: use AclPage to build a minimal valid rule (Cluster + DESCRIBE allow), submit
-    // TODO: assert page stays on /security/acls/create (no navigation to detail)
-    // TODO: assert error toast visible with mocked message OR inline field error
+
+    const aclPage = new AclPage(page);
+    await aclPage.goto();
+    await aclPage.setPrincipal(`err-${Date.now()}`);
+    await aclPage.setHost('*');
+    await aclPage.configureRules([MINIMAL_RULE]);
+    await aclPage.submitForm();
+
+    // Structural: mock fails the create, so page must stay on /create and NOT reach detail.
+    await expect(page).toHaveURL(/\/security\/acls\/create/);
+
+    // TODO(runtime, UX-1208): verify exact toast copy for INVALID_ARGUMENT.
+    // formatToastErrorMessageGRPC runs collectBadRequestDetails + collectViolationDescriptions;
+    // without field-level details our mock only produces a base message — expect a generic
+    // "Failed to create ACL due to: principal cannot be empty" or similar.
   });
 
   test('CreateACL network timeout keeps user on the form', async ({ page }) => {
@@ -32,8 +64,17 @@ test.describe('ACL creation - Connect RPC error handling', () => {
       urlGlob: rpcUrl(ACL_SERVICE, 'CreateACL'),
       reason: 'timedout',
     });
-    // TODO: fill + submit form
-    // TODO: assert URL still contains /security/acls/create
-    // TODO: assert toast shown
+
+    const aclPage = new AclPage(page);
+    await aclPage.goto();
+    await aclPage.setPrincipal(`timeout-${Date.now()}`);
+    await aclPage.setHost('*');
+    await aclPage.configureRules([MINIMAL_RULE]);
+    await aclPage.submitForm();
+
+    // Structural: URL still /create.
+    await expect(page).toHaveURL(/\/security\/acls\/create/);
+
+    // TODO(runtime, UX-1208): verify toast appears for a transport timeout with no envelope.
   });
 });

frontend/tests/test-variant-console/acls/acl-delete-multi-match.spec.ts

@@ -8,22 +8,101 @@
  * matching rows are actually removed.
  */
 
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+import {
+  ModeCustom,
+  OperationTypeAllow,
+  ResourcePatternTypeLiteral,
+  ResourceTypeCluster,
+  type Rule,
+} from '../../../src/components/pages/security/shared/acl-model';
+import { AclPage } from '../utils/acl-page';
+
+const MINIMAL_RULE: Rule = {
+  id: 0,
+  resourceType: ResourceTypeCluster,
+  mode: ModeCustom,
+  selectorType: ResourcePatternTypeLiteral,
+  selectorValue: 'kafka-cluster',
+  operations: {
+    DESCRIBE: OperationTypeAllow,
+  },
+};
 
 test.describe
   .serial('ACL multi-match delete', () => {
-    test('Delete (ACLs only) with multiple hosts deletes all matching rows', async () => {
-      // TODO: create two ACLs for the same principal with different hosts (reuse multi-host
-      //       pattern from acl.spec.ts — AclPage.setHost('*') then repeat with '1.1.1.1')
-      // TODO: navigate to /security/permissions-list, filter by principal
-      // TODO: open row dropdown → 'Delete (ACLs only)'
-      // TODO: assert confirmation dialog shows the matched count (expected: 2)
-      // TODO: confirm deletion; reload list and assert both ACLs are gone
+    test('Delete (ACLs only) with multiple hosts deletes all matching rows', async ({ page }) => {
+      test.setTimeout(120_000);
+      const principal = `multi-host-${Date.now()}`;
+
+      // Seed two ACLs for the same principal across two hosts.
+      const aclPage = new AclPage(page);
+      for (const host of ['*', '1.1.1.1']) {
+        await aclPage.goto();
+        await aclPage.setPrincipal(principal);
+        await aclPage.setHost(host);
+        await aclPage.configureRules([MINIMAL_RULE]);
+        await aclPage.submitForm();
+        await aclPage.waitForDetailPage();
+      }
+
+      // Go to permissions-list, filter, open row dropdown, pick "Delete (ACLs only)".
+      await page.goto('/security/permissions-list', { waitUntil: 'domcontentloaded' });
+      await page.getByPlaceholder('Filter by name').fill(principal);
+      const row = page.getByRole('row').filter({ hasText: principal });
+      await expect(row).toBeVisible({ timeout: 5000 });
+      await row.getByRole('button').click();
+
+      // Structural: the "Delete (ACLs only)" menuitem exists.
+      await expect(page.getByTestId('delete-acls-only')).toBeVisible();
+      await page.getByTestId('delete-acls-only').dispatchEvent('click');
+
+      // Confirmation appears — fill principal and confirm.
+      await expect(page.getByTestId('txt-confirmation-delete')).toBeVisible({ timeout: 5000 });
+      await page.getByTestId('txt-confirmation-delete').fill(principal);
+      await page.getByTestId('test-delete-item').click();
+
+      // Verify all ACLs for this principal are gone from the ACLs list.
+      await page.goto('/security/acls', { waitUntil: 'domcontentloaded' });
+      await page.getByTestId('search-field-input').getByRole('textbox').fill(principal);
+      await expect(page.getByTestId(`acl-list-item-${principal}-*`)).not.toBeVisible({ timeout: 5000 });
+      await expect(page.getByTestId(`acl-list-item-${principal}-1.1.1.1`)).not.toBeVisible({ timeout: 5000 });
+
+      // TODO(runtime, UX-1208): if the confirmation dialog shows a matched-count string,
+      // verify it reports 2. Current permissions-list-tab.tsx does not expose a testid for
+      // the count — may need to add one before this assertion is valid.
     });
 
-    test('Delete ACLs for a principal with zero ACLs shows a zero-match UX', async () => {
-      // TODO: create a SCRAM user with no ACLs
-      // TODO: open row dropdown → 'Delete (ACLs only)'
-      // TODO: assert appropriate empty/disabled state (exact behavior TBD by product)
+    test('Delete (ACLs only) is disabled or absent when principal has zero ACLs', async ({ page }) => {
+      const username = `no-acls-${Date.now()}`;
+
+      // Create a SCRAM user with no ACLs.
+      await page.goto('/security/users', { waitUntil: 'domcontentloaded' });
+      await expect(page.getByTestId('create-user-button')).toBeEnabled({ timeout: 10_000 });
+      await page.getByTestId('create-user-button').click();
+      await page.getByTestId('create-user-name').fill(username);
+      await page.getByTestId('create-user-submit').click();
+      await expect(page.getByTestId('user-created-successfully')).toBeVisible();
+      await page.getByTestId('done-button').click();
+
+      await page.goto('/security/permissions-list', { waitUntil: 'domcontentloaded' });
+      await page.getByPlaceholder('Filter by name').fill(username);
+      const row = page.getByRole('row').filter({ hasText: username });
+      await expect(row).toBeVisible({ timeout: 5000 });
+      await row.getByRole('button').click();
+
+      // Structural: for a user with no ACLs, either the delete-acls-only menuitem is hidden,
+      // or it is present but disabled. Either is acceptable UX.
+      const deleteAclsOnly = page.getByTestId('delete-acls-only');
+      const isVisible = await deleteAclsOnly.isVisible().catch(() => false);
+      if (isVisible) {
+        await expect(deleteAclsOnly).toBeDisabled();
+      } else {
+        await expect(deleteAclsOnly).not.toBeVisible();
+      }
+
+      // TODO(runtime, UX-1208): confirm product-intended behavior (hidden vs disabled).
+      // Update this test to the single correct assertion once decided.
     });
   });