test(e2e): add Phase 1 REST-to-Connect coverage skeletons (UX-1208, UX-1198)

Adds infrastructure for the 8 CRITICAL+HIGH e2e gaps identified in the Phase 1
REST-to-Connect RPC migration QA coverage review. All specs are scaffolds with
TODO bodies — assertions filled in once adversarial review of PR #2382 closes.

Helper:
- tests/shared/connect-mock.ts — mockConnectError / mockConnectNetworkFailure /
  captureConnectRequests / rpcUrl. Works against Connect-JSON transport (no
  binary protobuf), which src/config.ts + src/federation/console-app.tsx already
  use by default.

Specs (CRITICAL):
- users-authorization.spec.ts (enterprise) — view-only role can list users/ACLs/
  quotas but cannot create/delete. Gated behind VIEW_ONLY_FIXTURE_READY until the
  view-only auth setup lands.
- user-error-handling.spec.ts — CreateUser network failure + ALREADY_EXISTS.
- user-delete-error.spec.ts — DeleteUser FAILED_PRECONDITION.
- acl-create-error.spec.ts — CreateACL INVALID_ARGUMENT + timeout.

Specs (HIGH):
- acl-delete-multi-match.spec.ts — multi-host delete confirm count.
- quota-error.spec.ts — ListQuotas INTERNAL/PERMISSION_DENIED vs silent empty.
- users-deeplink.spec.ts — cold-cache details route rendering.
- acl-principal-special-chars.spec.ts — principal URL encoding round-trip.

No assertions yet; bun run type:check and lint:check pass.

Author: c-julin

frontend/tests/shared/connect-mock.ts

@@ -0,0 +1,133 @@
+import type { Page, Route } from '@playwright/test';
+
+/**
+ * Connect protocol error codes per https://connectrpc.com/docs/protocol#error-codes.
+ * These map 1:1 to gRPC status codes and are what @connectrpc/connect-web emits over JSON.
+ */
+export type ConnectErrorCode =
+  | 'canceled'
+  | 'unknown'
+  | 'invalid_argument'
+  | 'deadline_exceeded'
+  | 'not_found'
+  | 'already_exists'
+  | 'permission_denied'
+  | 'resource_exhausted'
+  | 'failed_precondition'
+  | 'aborted'
+  | 'out_of_range'
+  | 'unimplemented'
+  | 'internal'
+  | 'unavailable'
+  | 'data_loss'
+  | 'unauthenticated';
+
+export type MockConnectErrorArgs = {
+  page: Page;
+  urlGlob: string;
+  code: ConnectErrorCode;
+  message?: string;
+  /** Forwarded to page.route — use `times: 1` to only mock the first call. */
+  times?: number;
+};
+
+export type MockConnectNetworkFailureArgs = {
+  page: Page;
+  urlGlob: string;
+  reason?: 'failed' | 'timedout' | 'connectionrefused';
+};
+
+/**
+ * Maps a Connect error code to the HTTP status Connect transports use for JSON responses.
+ */
+function connectCodeToHttpStatus(code: ConnectErrorCode): number {
+  switch (code) {
+    case 'invalid_argument':
+    case 'out_of_range':
+      return 400;
+    case 'unauthenticated':
+      return 401;
+    case 'permission_denied':
+      return 403;
+    case 'not_found':
+      return 404;
+    case 'already_exists':
+    case 'aborted':
+      return 409;
+    case 'failed_precondition':
+      return 412;
+    case 'resource_exhausted':
+      return 429;
+    case 'canceled':
+      return 499;
+    case 'deadline_exceeded':
+      return 504;
+    case 'unavailable':
+      return 503;
+    case 'unimplemented':
+      return 501;
+    default:
+      return 500;
+  }
+}
+
+/**
+ * Fulfills all matching requests with a Connect-JSON error envelope. Since createConnectTransport
+ * in src/config.ts and src/federation/console-app.tsx does not opt into useBinaryFormat, requests
+ * use `application/json` and responses just need `{ code, message }` plus the correct HTTP status.
+ *
+ * Note on react-query retries: page.route persists for all matching calls, so retries see the same
+ * error. If a test needs to simulate recover-on-retry, use `times: 1` or swap the route mid-test.
+ */
+export async function mockConnectError(args: MockConnectErrorArgs): Promise<void> {
+  const { page, urlGlob, code, message = `mocked ${code}`, times } = args;
+  await page.route(
+    urlGlob,
+    (route) =>
+      route.fulfill({
+        status: connectCodeToHttpStatus(code),
+        contentType: 'application/json',
+        body: JSON.stringify({ code, message }),
+      }),
+    times === undefined ? undefined : { times }
+  );
+}
+
+/**
+ * Aborts all matching requests with a network-level failure. Use for simulating offline/timeout
+ * behavior where no response envelope is sent at all.
+ */
+export async function mockConnectNetworkFailure(args: MockConnectNetworkFailureArgs): Promise<void> {
+  const { page, urlGlob, reason = 'failed' } = args;
+  await page.route(urlGlob, (route) => route.abort(reason));
+}
+
+/**
+ * Returns the URL glob for a Connect RPC. Use instead of hand-writing paths so tests stay
+ * readable and the fully-qualified service name is centralized.
+ *
+ * @example rpcUrl('redpanda.api.dataplane.v1.UserService', 'CreateUser')
+ */
+export function rpcUrl(fullyQualifiedService: string, method: string): string {
+  return `**/${fullyQualifiedService}/${method}`;
+}
+
+/**
+ * Convenience wrapper around page.route that records request bodies so assertions can verify
+ * that the expected RPC was invoked with the expected input.
+ */
+export async function captureConnectRequests(
+  page: Page,
+  urlGlob: string
+): Promise<{ requests: Array<{ url: string; postData: string | null }>; stop: () => Promise<void> }> {
+  const requests: Array<{ url: string; postData: string | null }> = [];
+  const handler = async (route: Route) => {
+    requests.push({ url: route.request().url(), postData: route.request().postData() });
+    await route.continue();
+  };
+  await page.route(urlGlob, handler);
+  return {
+    requests,
+    stop: () => page.unroute(urlGlob, handler),
+  };
+}

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

@@ -0,0 +1,70 @@
+/**
+ * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
+ * parent epic: UX-1198 — REST-to-Connect RPC migration
+ *
+ * Guards the Casbin→PERMISSION_VIEW swap for users/ACLs/quotas: view-only roles MUST be able
+ * 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.
+ */
+
+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`.
+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.use({ storageState: VIEW_ONLY_STORAGE_STATE });
+
+  test.beforeEach(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
+  });
+
+  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('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.describe('Authorization - ACLs page (view-only role)', () => {
+  test.skip(!VIEW_ONLY_FIXTURE_READY, 'view-only auth fixture pending — see UX-1208');
+  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');
+  });
+
+  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.describe('Authorization - Quotas page (view-only role)', () => {
+  test.skip(!VIEW_ONLY_FIXTURE_READY, 'view-only auth fixture pending — see UX-1208');
+  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
+  });
+});

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

@@ -0,0 +1,39 @@
+/**
+ * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
+ * parent epic: UX-1198 — REST-to-Connect RPC migration
+ *
+ * Previously REST /api/acls returned REST error bodies. Now ACLService.CreateACL uses
+ * Connect with InvalidArgument + structured details. Guards field-level error surfacing
+ * through formatToastErrorMessageGRPC.
+ */
+
+import { test } from '@playwright/test';
+
+import { mockConnectError, mockConnectNetworkFailure, rpcUrl } from '../../shared/connect-mock';
+
+const ACL_SERVICE = 'redpanda.api.dataplane.v1.ACLService';
+
+test.describe('ACL creation - Connect RPC error handling', () => {
+  test('CreateACL INVALID_ARGUMENT surfaces a field-level error', async ({ page }) => {
+    await mockConnectError({
+      page,
+      urlGlob: rpcUrl(ACL_SERVICE, 'CreateACL'),
+      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
+  });
+
+  test('CreateACL network timeout keeps user on the form', async ({ page }) => {
+    await mockConnectNetworkFailure({
+      page,
+      urlGlob: rpcUrl(ACL_SERVICE, 'CreateACL'),
+      reason: 'timedout',
+    });
+    // TODO: fill + submit form
+    // TODO: assert URL still contains /security/acls/create
+    // TODO: assert toast shown
+  });
+});

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

@@ -0,0 +1,29 @@
+/**
+ * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
+ * parent epic: UX-1198 — REST-to-Connect RPC migration
+ *
+ * The permissions-list "Delete (ACLs only)" / "Delete (User and ACLs)" flows call
+ * ACLService.DeleteACLs with a filter that may match multiple rows (e.g. a principal
+ * with ACLs across multiple hosts). Guards the matched-count UX and ensures all
+ * matching rows are actually removed.
+ */
+
+import { test } from '@playwright/test';
+
+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 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)
+    });
+  });

frontend/tests/test-variant-console/acls/acl-principal-special-chars.spec.ts

@@ -0,0 +1,25 @@
+/**
+ * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
+ * parent epic: UX-1198 — REST-to-Connect RPC migration
+ *
+ * Connect protobuf string fields accept a wider range of characters than the old REST
+ * path. Principal names like "User:foo" must round-trip correctly through URL encoding
+ * (the detail page uses the principal as a URL segment).
+ */
+
+import { test } from '@playwright/test';
+
+test.describe('ACL principal URL encoding', () => {
+  test('principal containing ":" round-trips through create → list → detail', async () => {
+    // TODO: create ACL with principal 'User:test-colon-<ts>'
+    // TODO: submit; assert detail page URL contains %3A (encoded ':') correctly
+    // TODO: navigate back to list; assert row is visible
+    // TODO: click the row; assert detail renders with the full principal string
+  });
+
+  // biome-ignore lint/suspicious/noSkippedTests: skipped pending backend validation-policy decision (see UX-1208)
+  test.skip('principal containing a space is rejected with a clear validation error', async () => {
+    // TODO: attempt create with 'user with space'
+    // TODO: assert an inline validation error surfaces OR a Connect InvalidArgument is shown to the user
+  });
+});

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

@@ -0,0 +1,36 @@
+/**
+ * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
+ * parent epic: UX-1198 — REST-to-Connect RPC migration
+ *
+ * Exercises the error path in UserService.DeleteUser. The REST endpoint had a slightly
+ * different error envelope; this guards the migrated toast + UI state.
+ */
+
+import { test } from '@playwright/test';
+
+import { mockConnectError, rpcUrl } from '../../shared/connect-mock';
+import { SecurityPage } from '../utils/security-page';
+
+const USER_SERVICE = 'redpanda.api.dataplane.v1.UserService';
+
+test.describe('User deletion - error paths', () => {
+  test('DeleteUser FAILED_PRECONDITION keeps the user and shows error toast', async ({ page }) => {
+    const securityPage = new SecurityPage(page);
+    const username = `test-delete-error-${Date.now()}`;
+
+    // Seed a real user first so we have a row to attempt deleting.
+    await securityPage.createUser(username);
+
+    await mockConnectError({
+      page,
+      urlGlob: rpcUrl(USER_SERVICE, 'DeleteUser'),
+      code: 'failed_precondition',
+      message: 'user has dependent ACLs',
+    });
+
+    // TODO: navigate to user details and click 'Delete user'
+    // TODO: fill confirmation and submit; wait for mocked 412
+    // TODO: assert toast visible with error content
+    // TODO: reload users list and assert the user still appears (deletion did NOT happen client-side)
+  });
+});

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

@@ -0,0 +1,36 @@
+/**
+ * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
+ * parent epic: UX-1198 — REST-to-Connect RPC migration
+ *
+ * Exercises the Connect error-mapping path added when UserService.CreateUser replaced
+ * REST /api/users. Without these, a regression in formatToastErrorMessageGRPC or the
+ * ConnectError detail extraction would go unnoticed.
+ */
+
+import { test } from '@playwright/test';
+
+import { mockConnectError, mockConnectNetworkFailure, rpcUrl } from '../../shared/connect-mock';
+
+const USER_SERVICE = 'redpanda.api.dataplane.v1.UserService';
+
+test.describe('User creation - Connect RPC error handling', () => {
+  test('network failure on CreateUser shows error toast and preserves form state', async ({ page }) => {
+    await mockConnectNetworkFailure({ page, urlGlob: rpcUrl(USER_SERVICE, 'CreateUser') });
+    // TODO: navigate to /security/users/create and fill the form (reuse existing testids)
+    // TODO: submit and wait for the failed network call
+    // TODO: assert an error toast is visible
+    // TODO: assert the username input still contains the entered value (form not reset)
+  });
+
+  test('CreateUser ALREADY_EXISTS surfaces a user-friendly error', async ({ page }) => {
+    await mockConnectError({
+      page,
+      urlGlob: rpcUrl(USER_SERVICE, 'CreateUser'),
+      code: 'already_exists',
+      message: 'user "existing-user" already exists',
+    });
+    // TODO: fill form with any username, submit
+    // TODO: assert the page stays on /security/users/create
+    // TODO: assert toast text (exact copy depends on formatToastErrorMessageGRPC output — verify post-adversarial-review)
+  });
+});

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

@@ -0,0 +1,24 @@
+/**
+ * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
+ * parent epic: UX-1198 — REST-to-Connect RPC migration
+ *
+ * After the REST→Connect swap, the /users/:name/details route fetches via Connect
+ * Query with a different cache key. This spec catches a deep-link regression where
+ * the details page breaks when the list cache is cold (e.g. bookmarks, share links).
+ */
+
+import { test } from '@playwright/test';
+
+test.describe('Users page deep-link (cold cache)', () => {
+  test('direct-load /security/users/e2euser/details renders without prior list navigation', async () => {
+    // TODO: goto the details URL directly WITHOUT visiting /security/users first
+    // TODO: assert heading "User: e2euser" visible
+    // TODO: assert User information, Roles, and ACLs sections are visible
+    // TODO: assert no console errors about missing user / undefined data
+  });
+
+  test('direct-load /security/acls/<principal>/details for an existing principal renders', async () => {
+    // TODO: seed an ACL via AclPage (happy path), then navigate directly in a fresh context
+    // TODO: assert detail rules render
+  });
+});