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

8 Playwright specs plus a Connect RPC mock helper, exercising the paths
that were silently changed by the REST→Connect migration. All 7 tests
pass against testcontainers locally; the view-only authorization spec
is gated behind VIEW_ONLY_FIXTURE_READY pending UX-1209.

Shared infrastructure
- shared/connect-mock.ts: mockConnectError, mockConnectNetworkFailure,
  rpcUrl, captureConnectRequests — fulfills matching requests with a
  Connect-JSON error envelope so specs can deterministically exercise
  the error-handling code paths added when ConsoleSvc REST handlers
  were replaced by Connect Query mutations.
- utils/acl-page.ts: extended with submitFormExpectingError and
  validateRuleNotExists helpers used by the new error specs.

Specs
- acls/user-error-handling: CreateUser network failure + ALREADY_EXISTS
  toast copy via formatToastErrorMessageGRPC.
- acls/user-delete-error: DeleteUser FAILED_PRECONDITION leaves the user
  in place and surfaces the toast on the details page.
- acls/users-deeplink: cold-cache deep-link to /security/users/.../details
  and /security/acls/<principal>/details — the ACL case seeds a real ACL
  via AclPage and loads the URL in a fresh browser context to defeat the
  Connect Query cache.
- acls/acl-create-error, acl-delete-multi-match, acl-principal-special-chars:
  Connect-side error and edge-case coverage for ACL create/delete flows.
- quotas/quota-error: ListQuotas INTERNAL renders the Chakra Alert with
  the rawMessage (timeout absorbs the query-client's exponential-backoff
  retries on Code.Internal); PERMISSION_DENIED renders the 403
  ResultHttpError with no leak of the raw gRPC code.
- console-enterprise/users-authorization: view-only role spec — gated
  behind VIEW_ONLY_FIXTURE_READY pending UX-1209.

Author: c-julin

frontend/tests/shared/connect-mock.ts

@@ -0,0 +1,152 @@
+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.
+ */
+/**
+ * DEBUG flag for diagnosing mock interception issues. Flip to true while iterating,
+ * false before commit. Gated at module level so route handlers log only when we
+ * ask them to (no performance hit in normal runs, no process.env dependency).
+ */
+const DEBUG_CONNECT_MOCK = false;
+
+export async function mockConnectError(args: MockConnectErrorArgs): Promise<void> {
+  const { page, urlGlob, code, message = `mocked ${code}`, times } = args;
+  if (DEBUG_CONNECT_MOCK) {
+    // biome-ignore lint/suspicious/noConsole: diagnostic gated behind DEBUG_CONNECT_MOCK
+    console.log(`[connect-mock] registering route glob=${urlGlob} code=${code}`);
+  }
+  await page.route(
+    urlGlob,
+    (route) => {
+      if (DEBUG_CONNECT_MOCK) {
+        const req = route.request();
+        // biome-ignore lint/suspicious/noConsole: diagnostic gated behind DEBUG_CONNECT_MOCK
+        console.log(
+          `[connect-mock] route FIRED url=${req.url()} method=${req.method()} body=${(req.postData() ?? '').slice(0, 200)}`
+        );
+      }
+      return 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,141 @@
+/**
+ * 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 UX-1209.
+ */
+
+import { expect, test } from '@playwright/test';
+
+// 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-1209');
+  test.use({ storageState: VIEW_ONLY_STORAGE_STATE });
+
+  test('users list renders for view-only role', async ({ page }) => {
+    await page.goto('/security/users', { waitUntil: 'domcontentloaded' });
+
+    // 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 ({ 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.
+    // 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();
+    }
+  });
+
+  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-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' });
+    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 ({ 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-1209');
+  test.use({ storageState: VIEW_ONLY_STORAGE_STATE });
+
+  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

@@ -0,0 +1,76 @@
+/** 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
+ *
+ * Previously REST /api/acls returned REST error bodies. Now ACLService.CreateACL uses
+ * Connect with InvalidArgument + structured details. Guards field-level error surfacing
+ * through formatToastErrorMessageGRPC.
+ *
+ * Also guards the UI fix in UX-1218: the create page must not navigate to the detail
+ * page when the create RPC fails.
+ */
+
+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({
+      page,
+      urlGlob: rpcUrl(ACL_SERVICE, 'CreateACL'),
+      code: 'invalid_argument',
+      message: 'principal cannot be empty',
+    });
+
+    const aclPage = new AclPage(page);
+    await aclPage.goto();
+    await aclPage.setPrincipal(`err-${Date.now()}`);
+    await aclPage.setHost('*');
+    await aclPage.configureRules([MINIMAL_RULE]);
+    await aclPage.submitFormExpectingError('http-error');
+
+    // Structural: mock fails the create, so page must stay on /create and NOT reach detail.
+    await expect(page).toHaveURL(/\/security\/acls\/create/);
+  });
+
+  test('CreateACL network timeout keeps user on the form', async ({ page }) => {
+    await mockConnectNetworkFailure({
+      page,
+      urlGlob: rpcUrl(ACL_SERVICE, 'CreateACL'),
+      reason: 'timedout',
+    });
+
+    const aclPage = new AclPage(page);
+    await aclPage.goto();
+    await aclPage.setPrincipal(`timeout-${Date.now()}`);
+    await aclPage.setHost('*');
+    await aclPage.configureRules([MINIMAL_RULE]);
+    await aclPage.submitFormExpectingError('network-abort');
+
+    // Structural: URL still /create.
+    await expect(page).toHaveURL(/\/security\/acls\/create/);
+  });
+});