user-system/docs/superpowers/specs/2026-05-10-prelaunch-navigation-and-batch-delete-design.md

Prelaunch Navigation And Batch Delete Design

Date: 2026-05-10

Goal: Remove the release-blocking desktop-mobile-navigation browser failure and strengthen the admin users batch-delete confirmation flow identified in the 2026-05-10 prelaunch report.

Scope

• Stabilize the admin mobile navigation behavior used by the supported Playwright CDP browser gate.
• Keep the desktop-mobile-navigation scenario as a real product verification path instead of weakening it into a runner-only smoke check.
• Strengthen the UsersPage batch-delete confirmation so destructive bulk actions require clearer intent than the current single pop confirmation.
• Add focused frontend regression coverage for both changes.

Non-Goals

• No redesign of the admin layout visual system.
• No change to backend user deletion APIs or authorization rules.
• No expansion of the prelaunch recommendations unrelated to today's release blockers, such as password strength hints, dashboard charts, or OAuth button loading states.

Current Findings

1. Mobile navigation

• The admin layout keeps mobile drawer state in a toggle-style setter:
  • setMobileDrawerOpen(!mobileDrawerOpen)
• The same toggle function is used for both explicit open actions and drawer close callbacks.
• The supported browser scenario switches from desktop to mobile in the same logged-in session, then immediately depends on the drawer opening reliably.
• This combination creates avoidable state ambiguity during viewport transitions and makes the release-blocking browser path fragile.

2. Batch delete confirmation

• UsersPage already wraps bulk delete in a single Popconfirm.
• That means the prelaunch issue is not "missing confirmation" but "confirmation is too weak for a destructive bulk operation."
• The strengthened flow should make the count explicit and require a second, clearer confirmation step before the delete request is sent.

Approach

Mobile navigation

• Replace toggle-style drawer state transitions with explicit intent helpers:
  • open drawer
  • close drawer
• Ensure mobile menu selection closes the drawer deterministically.
• Keep desktop collapse behavior unchanged.
• Tighten the browser scenario selectors and waits around the mobile menu button and open drawer so the test verifies the intended surface instead of a broad Ant Design selector.

Batch delete confirmation

• Keep the existing selection toolbar and bulk action entry point.
• Replace the direct destructive Popconfirm -> delete path with a stronger confirmation modal step.
• The modal must:
  • show the selected count clearly
  • repeat that the action is irreversible
  • require explicit user confirmation before calling batchDelete
• Preserve existing safeguards:
  • no-op when nothing is selected
  • block deleting the current logged-in user

Test Strategy

Admin layout

• Add a frontend regression test proving that mobile drawer open/close behavior remains stable after switching from desktop to mobile in the same render path.
• Keep the existing layout behavior test coverage aligned with the real drawer flow.

Users page

• Add a failing regression test for the strengthened bulk-delete flow:
  • selecting rows does not delete immediately
  • destructive API call happens only after the second explicit confirmation
  • success state clears selection and refreshes data

Browser verification

• Reproduce and then rerun the supported scenario:
  • cd frontend/admin && $env:E2E_SCENARIOS='desktop-mobile-navigation'; npm.cmd run e2e:full:win

Verification

• Targeted browser check:
  • cd frontend/admin && $env:E2E_SCENARIOS='desktop-mobile-navigation'; npm.cmd run e2e:full:win
• Targeted frontend tests:
  • cd frontend/admin && npm.cmd run test:run -- src/layouts/AdminLayout/AdminLayout.test.tsx src/pages/admin/UsersPage/UsersPage.test.tsx
• Frontend quality gate for affected area:
  • cd frontend/admin && npm.cmd run lint
  • cd frontend/admin && npm.cmd run build