test(e2e): un-skip Phase 1 error specs after UI fix

Refs: UX-1208, UX-1215, UX-1216, UX-1218, UX-1198.

All 5 Connect-mock-dependent tests verified locally against testcontainer stack
after the UX-1218 UI fix landed. 7/9 of the total Phase 1 e2e failures are now
resolved by this series:

Un-skipped and passing locally:
- acl-create-error.spec.ts: CreateACL INVALID_ARGUMENT (UX-1218 fix required)
- acl-create-error.spec.ts: CreateACL network timeout
- user-error-handling.spec.ts: both tests
- user-delete-error.spec.ts: DeleteUser FAILED_PRECONDITION
- quota-error.spec.ts: both tests

Still skipped pending deeper diagnosis with precise root-cause notes:
- acl-delete-multi-match.spec.ts (UX-1216): after create-user + 2 ACLs +
  Delete (ACLs only) dropdown click, confirmation modal does not surface
  in local run. permissions-list.spec.ts runs a similar flow successfully,
  so the issue is a timing or state-sequencing difference specific to
  multi-host. Deferred pending trace review.
- acl-principal-special-chars.spec.ts (UX-1215): principalName containing
  ':' creates the ACL (URL correctly encodes the full principal) but the
  ACLs list does not show the row when filtered by principalName.
  Needs product decision on whether principalNames can contain ':'.

Also:
- Reset DEBUG_CONNECT_MOCK=false in connect-mock.ts (diagnostic was used
  to empirically confirm the mock helper fires correctly against the real
  backend — see evidence in /tmp/phase1-request-log.txt during debugging)
- Removed the diagnostic page.on('request') logger from acl-create-error.spec.ts

bun run type:check clean. bun run lint:check 0 new errors.

Author: c-julin

frontend/tests/shared/connect-mock.ts

@@ -79,16 +79,35 @@ function connectCodeToHttpStatus(code: ConnectErrorCode): number {
  * 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) =>
-      route.fulfill({
+    (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 }
   );
 }

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

@@ -1,4 +1,3 @@
-/** biome-ignore-all lint/suspicious/noSkippedTests: mock interception broken — see UX-1215 */
 /** biome-ignore-all lint/performance/useTopLevelRegex: e2e test */
 /**
  * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
@@ -8,24 +7,70 @@
  * Connect with InvalidArgument + structured details. Guards field-level error surfacing
  * through formatToastErrorMessageGRPC.
  *
- * NOTE: Both tests are currently skipped pending UX-1215. The mockConnectError / route.fulfill
- * approach in tests/shared/connect-mock.ts does not intercept the real Connect-JSON traffic
- * against the testcontainer backend — CI evidence (run 24569267087) shows the real CreateACL
- * request reaches the backend and the page navigates to /security/acls/<principal>/details
- * instead of staying on /create. Root cause unknown; needs local stack + instrumentation.
+ * Also guards the UI fix in UX-1218: the create page must not navigate to the detail
+ * page when the create RPC fails.
  */
 
-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.skip('CreateACL INVALID_ARGUMENT surfaces a field-level error', async () => {
-    // TODO(UX-1215): un-skip once mockConnectError intercepts correctly.
-    // Original assertions: submit an ACL; mocked INVALID_ARGUMENT response should keep
-    // URL on /security/acls/create, not navigate to detail. See git history at 488c77d3a.
+  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.skip('CreateACL network timeout keeps user on the form', async () => {
-    // TODO(UX-1215): un-skip once mockConnectNetworkFailure (route.abort) fires reliably.
-    // Original assertions: route.abort('timedout'); submit form; URL stays on /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/);
   });
 });

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

@@ -1,4 +1,4 @@
-/** biome-ignore-all lint/suspicious/noSkippedTests: confirmation modal not appearing — see UX-1216 */
+/** biome-ignore-all lint/suspicious/noSkippedTests: permissions-list delete flow intermittent — see UX-1216 */
 /**
  * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
  * parent epic: UX-1198 — REST-to-Connect RPC migration
@@ -8,22 +8,22 @@
  * with ACLs across multiple hosts). Guards the matched-count UX and ensures all
  * matching rows are actually removed.
  *
- * NOTE: Both tests are currently skipped pending UX-1216. Clicking the `delete-acls-only`
- * menuitem does not surface the `txt-confirmation-delete` input within 5s in CI (the
- * equivalent flow in permissions-list.spec.ts works). Needs local repro to diagnose —
- * may be a stale-state / timing issue with the dropdown-to-modal transition.
- * Git history at 488c77d3a contains the full test bodies.
+ * NOTE: Currently skipped pending UX-1216. After creating a SCRAM user + 2 ACLs across
+ * hosts and triggering the "Delete (ACLs only)" dropdown menuitem, the confirmation
+ * modal does not reliably surface in the local stack run. permissions-list.spec.ts
+ * does run a similar flow successfully, so there's a timing or state sequencing
+ * difference specific to multi-host. Needs deeper diagnosis with trace review.
  */
 
 import { test } from '@playwright/test';
 
 test.describe
   .serial('ACL multi-match delete', () => {
     test.skip('Delete (ACLs only) with multiple hosts deletes all matching rows', async () => {
-      // TODO(UX-1216): un-skip once the dropdown → confirmation modal flow is debugged.
+      // TODO(UX-1216): un-skip once the multi-host delete confirmation flow is stable.
     });
 
     test.skip('Delete (ACLs only) is disabled or absent when principal has zero ACLs', async () => {
-      // TODO(UX-1216): un-skip once the dropdown flow is confirmed working.
+      // TODO(UX-1216): un-skip alongside the first test.
     });
   });

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

@@ -1,4 +1,4 @@
-/** biome-ignore-all lint/suspicious/noSkippedTests: list testid not found after create — see UX-1215 */
+/** biome-ignore-all lint/suspicious/noSkippedTests: ACL list not finding principals with colon in name — see UX-1215 */
 /**
  * spec: UX-1208 — Phase 1 e2e test coverage (CRITICAL + HIGH)
  * parent epic: UX-1198 — REST-to-Connect RPC migration
@@ -7,22 +7,25 @@
  * path. Principal names like "User:foo" must round-trip correctly through URL encoding
  * (the detail page uses the principal as a URL segment).
  *
- * NOTE: The colon round-trip test is currently skipped pending UX-1215. An earlier testid
- * fix (acl-list-item uses principalName post-colon, not the full principal) moved the failure
- * one line further but still fails in CI — `getByTestId(acl-list-item-<name>-*)` not found
- * after navigating back to the list. Needs local repro to diagnose whether the ACL actually
- * landed, whether the list is filtered correctly, or whether there's a list-refresh race.
- * Git history at 488c77d3a has the last active version of this test.
+ * NOTE: The colon-in-principalName case is currently skipped pending UX-1215. When a
+ * principalName contains ":" (e.g. "test:colon:123"), the create succeeds and the detail
+ * URL correctly encodes the full principal, but the ACL list's getByTestId filter with
+ * the raw principalName does not match any row. Root cause needs product decision on
+ * whether principalNames are allowed to contain ":" — backend acceptance and list-side
+ * rendering are out of sync. Space-rejection case is also deferred pending backend policy.
  */
 
 import { test } from '@playwright/test';
 
 test.describe('ACL principal URL encoding', () => {
-  test.skip('principal containing ":" round-trips through create → list → detail', async () => {
-    // TODO(UX-1215): un-skip once the list-view round-trip after ACL creation is debugged.
+  test.skip('principalName containing ":" round-trips through create → list → detail', async () => {
+    // TODO(UX-1215): un-skip once colon-in-principalName behavior is defined by product
+    // and the ACL list rendering matches. The connect-mock infrastructure and UI create
+    // flow are both verified working in UX-1218 — this is a separate edge case.
   });
 
-  test.skip('principal containing a space is rejected with a clear validation error', async () => {
-    // TODO(runtime, UX-1208): activate once backend validation policy is confirmed.
+  test.skip('principalName containing a space is rejected with a clear validation error', async () => {
+    // TODO(UX-1208): activate once backend validation policy for whitespace in
+    // principalName is confirmed.
   });
 });