Fix prelaunch navigation and log scale regressions
This commit is contained in:
@@ -0,0 +1,73 @@
|
||||
# Prelaunch Navigation And Batch Delete Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Fix the release-blocking admin mobile navigation browser path and strengthen bulk-delete confirmation on the users admin page.
|
||||
|
||||
**Architecture:** Keep the product changes minimal and local to the admin frontend. Make mobile drawer state transitions explicit in `AdminLayout`, harden the supported E2E scenario around the real drawer surface, and upgrade `UsersPage` bulk delete from a lightweight pop confirmation to a stronger modal confirmation without changing backend APIs.
|
||||
|
||||
**Tech Stack:** React 18, Ant Design, React Router, Vitest, Playwright CDP runner.
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Capture the failing browser evidence
|
||||
|
||||
**Files:**
|
||||
- Modify: none
|
||||
|
||||
- [ ] Run `cd frontend/admin && $env:E2E_SCENARIOS='desktop-mobile-navigation'; npm.cmd run e2e:full:win`.
|
||||
- [ ] Record the exact failing step and whether the drawer fails to open, the selector fails to resolve, or navigation fails after selection.
|
||||
- [ ] Do not change product code until the failure mode is confirmed.
|
||||
|
||||
### Task 2: Add the AdminLayout regression first
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/admin/src/layouts/AdminLayout/AdminLayout.test.tsx`
|
||||
- Modify: `frontend/admin/src/layouts/AdminLayout/AdminLayout.tsx`
|
||||
|
||||
- [ ] Add a failing test that switches from desktop to mobile, opens the menu, navigates through the drawer, and proves the drawer closes deterministically after selection.
|
||||
- [ ] Run `cd frontend/admin && npm.cmd run test:run -- src/layouts/AdminLayout/AdminLayout.test.tsx`.
|
||||
- [ ] Confirm the new assertion fails for the current implementation before fixing the layout.
|
||||
|
||||
### Task 3: Fix mobile drawer state and harden the browser scenario
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/admin/src/layouts/AdminLayout/AdminLayout.tsx`
|
||||
- Modify: `frontend/admin/scripts/run-playwright-cdp-e2e.mjs`
|
||||
|
||||
- [ ] Replace toggle-based mobile drawer state transitions with explicit open and close handlers.
|
||||
- [ ] Keep desktop collapse behavior unchanged.
|
||||
- [ ] Narrow browser selectors and waits so the scenario checks the intended mobile button and the open drawer content.
|
||||
- [ ] Re-run `cd frontend/admin && $env:E2E_SCENARIOS='desktop-mobile-navigation'; npm.cmd run e2e:full:win`.
|
||||
|
||||
### Task 4: Add the UsersPage regression first
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/admin/src/pages/admin/UsersPage/UsersPage.test.tsx`
|
||||
- Modify: `frontend/admin/src/pages/admin/UsersPage/UsersPage.tsx`
|
||||
|
||||
- [ ] Add a failing test that selects users, triggers bulk delete, verifies no delete happens on the first lightweight action alone, and confirms the API call only occurs after the stronger explicit confirmation.
|
||||
- [ ] Run `cd frontend/admin && npm.cmd run test:run -- src/pages/admin/UsersPage/UsersPage.test.tsx`.
|
||||
- [ ] Confirm the new assertion fails for the current implementation before changing the page.
|
||||
|
||||
### Task 5: Implement stronger bulk-delete confirmation
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/admin/src/pages/admin/UsersPage/UsersPage.tsx`
|
||||
|
||||
- [ ] Replace the direct `Popconfirm` bulk-delete path with a stronger confirmation modal flow.
|
||||
- [ ] Keep the existing self-delete guard and empty-selection guard.
|
||||
- [ ] After confirmation, keep existing success behavior: call `batchDelete`, clear selection, and refresh the list.
|
||||
- [ ] Re-run `cd frontend/admin && npm.cmd run test:run -- src/pages/admin/UsersPage/UsersPage.test.tsx`.
|
||||
|
||||
### Task 6: Verify the affected frontend surface
|
||||
|
||||
**Files:**
|
||||
- Modify: only if verification reveals another real defect
|
||||
|
||||
- [ ] Run `cd frontend/admin && npm.cmd run test:run -- src/layouts/AdminLayout/AdminLayout.test.tsx src/pages/admin/UsersPage/UsersPage.test.tsx`.
|
||||
- [ ] Run `cd frontend/admin && npm.cmd run lint`.
|
||||
- [ ] Run `cd frontend/admin && npm.cmd run build`.
|
||||
- [ ] Re-run `cd frontend/admin && $env:E2E_SCENARIOS='desktop-mobile-navigation'; npm.cmd run e2e:full:win`.
|
||||
- [ ] Report the results exactly as observed, including any remaining risk if full-suite E2E is not rerun in this turn.
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
# 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`
|
||||
|
||||
Reference in New Issue
Block a user