88 lines
3.9 KiB
Markdown
88 lines
3.9 KiB
Markdown
# 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`
|
|
|