SuperAdmin visibility + View-As redesign
What & Why
A SuperAdmin (Darren) reports two related problems on production:
1. The Setup Guide page shows "Couldn't load the setup guide. You may not be a SuperAdmin, or the server is unreachable." even though their account IS a SuperAdmin. Deployment logs confirm returns , while is throwing a server-side and returning HTTP 500. The frontend error message is misleading — it implies a permission problem when the real failure is a server crash inside one of the auto-detector functions.
2. The current "View As" role-preview UX (cramped sidebar footer dropdown + "Simulate overrides" checkbox list + a thin orange top banner) makes it hard to tell at a glance which persona the SuperAdmin is currently viewing. The user is open to a redesign and asked for a recommendation; the chosen direction is a dedicated Persona Switcher page + persistent top-bar chip + content-area color tint per persona (no split-screen).
Done looks like
- The Setup Guide loads cleanly for the real SuperAdmin on production. One broken auto-detector cannot take down the whole page — the page shows whatever steps it could resolve, and any failed detectors render as an inline "couldn't auto-detect — mark manually" state with the underlying error name in a SuperAdmin-only tooltip.
- The frontend error state on the Setup Guide distinguishes three cases with distinct copy and recovery actions: (a) 401 not signed in, (b) 403 not a SuperAdmin, (c) 5xx / network — the latter shows "Server error" and the actual response body when available, plus a Retry button.
- A new page is the canonical place to start, switch, and stop a role preview. The sidebar footer no longer hosts the dropdown + override checklist; it just shows the current persona pill plus a "Switch persona" link to the page.
- When a preview is active, a persistent compact chip in the top bar reads "Super Admin → Coach (Intern L1)" (or whichever persona is active) with an Exit button next to it. The chip is visible on every route, not just where the orange banner used to sit.
- The main content area is tinted with the persona's surface color while a preview is active, reusing the same mechanism that already powers the parent/athlete tints. Tints are defined for: coach (cool sage), referee (court teal), athlete (existing cool cyan), parent (existing warm orange), board, coordinator. SuperAdmin default has no tint.
- "View As" is documented on the Persona Switcher page as a read-only visual filter: it never elevates permissions, and server-side checks always use the real user identity. The page surfaces a small explainer so future SuperAdmins understand the model.
Out of scope
- Split-screen / side-by-side persona comparison (deferred — capture as a follow-up if the user asks for it after using the new UX).
- Server-side persona impersonation (would require auditing every route and is a security risk we deliberately do NOT take on here).
- Audit logging of who previewed which persona when.
- Touching the unrelated silent failure surfaced in the same logs (separate task).
Steps
1.
Diagnose and harden the Setup Guide endpoint. Reproduce the from production. The likely culprit is one of the per-step calls in returning a non-iterable value (probably an storage result being spread or -iterated). Wrap each call in a per-step try/catch so a single broken detector returns plus a structured field rather than 500-ing the whole endpoint. Log the original error server-side. Identify and fix the actual root-cause detector.
2. Improve the Setup Guide frontend error state. Have the page distinguish 401 / 403 / 5xx / network using the typed introduced in Task #1377, and render appropriate copy plus a Retry button. The current single-line "You may not be a SuperAdmin, or the server is unreachable" message has to go. If any per-step came back, render that step in an "auto-detect failed — mark manually" state inline.
3. Build the Persona Switcher page at . SuperAdmin-only. Lists every previewable persona as a card (SuperAdmin default, Coach + tier picker + override checklist, Referee, Athlete, Parent, Board Member, Coordinator). Each card has a "Preview as this persona" button. Includes an "About View As" explainer block clarifying that the preview is purely visual and never grants extra permissions. Move the existing override-checklist logic out of into this page.
4. Replace the sidebar footer widget with a compact persona pill + link. The footer now shows just the current persona, the SuperAdmin name, and "Switch persona →" (deep-links to ). The Coach-tier dropdown and override checklist are no longer rendered in the sidebar.
5. Add the persistent top-bar persona chip. When a preview is active, render a chip in the top app bar (the same bar that hosts notifications/search) showing "Super Admin → {persona name}{optional tier}" with an inline Exit Preview button. Replace the old full-width orange banner with this chip — the chip is always visible, the banner takes up vertical space and was easy to miss when scrolling.
6. Wire per-persona surface tints. Add new CSS variables , , , alongside the existing parent/athlete tints. When a preview is active, wrap the main content area in with the matching . The chrome (sidebar, top bar) stays neutral so the SuperAdmin always sees their admin-mode controls.
7. Keep the security model unchanged and document it. No server route may begin trusting a client-supplied "preview persona" header — all auth checks continue to use the real session identity. Add a short architectural note in under "Architecture decisions" recording this and pointing at the Persona Switcher page.
Relevant files
- - - - - - - - - -
No comments:
Post a Comment