Surface the ?scenario= and ?role= dev stand-ins as dropdowns in the existing debug-state devtool, so a demo can flip them with a click instead of editing the URL. scenario.ts/role.ts gain set* setters + exported valid-value lists (reused by the panel, no duplicated source of truth); scenario becomes tab-sticky like role so it survives navigation. Applied via location.reload() since both are read per-request in interceptors. Extends the debug-state eslint exemption to the ui→infrastructure rule (same devtool precedent). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2.1 KiB
2.1 KiB
WP-33 — In-app dev switchers (scenario + role)
Status: done Phase: 7 — refinements
Why
The two dev-only stand-ins — the async ?scenario= toggle (scenario.interceptor.ts) and the
faked ?role= (role.interceptor.ts) — were driven by hand-editing the URL query string.
Awkward for demos: you had to remember the valid values and retype them. This WP surfaces both
as dropdowns in the existing dev panel so a scenario/role can be flipped with a click.
Decisions (pre-made, don't relitigate)
- No new component/shell wiring. The switchers live inside the existing
debug-statedevtool (the sanctioned dev-only fab/panel already mounted in the shell underisDevMode()). - Reuse the mechanism modules, don't duplicate their source of truth.
scenario.ts/role.tsgain aset*setter + an exported valid-values list; the panel imports them.debug-stateis added to theui→infrastructureeslint exemption (same precedent as its existing cross-context exemption) rather than re-declaring the storage keys / valid lists in the UI. - Scenario becomes tab-sticky (sessionStorage), mirroring role. Without this the switcher
would be near-useless: navigation drops the query param and reverts to
defaultmid-demo. - Apply by
location.reload(). Both values are read per-request in interceptors and gate server-computed decision flags already fetched by eagerhttpResources — a reload is the simplest correct way to re-run them. Acceptable for a dev tool.
Files
shared/infrastructure/scenario.ts— tab-sticky read (mirrors role),setScenario, exportedSCENARIOS; co-locatedscenario.spec.ts.shared/infrastructure/role.ts—setRole, exportedROLES.shared/ui/debug-state/debug-state.component.ts— two<select>s in the panel.eslint.config.mjs— extend the debug-state devtool exemption to the ui→infrastructure rule.
Acceptance criteria
- Dev panel shows role + scenario dropdowns; changing one persists it and reloads.
- Scenario survives navigation within the tab (sticky).
npm run cigreen (lint, tests incl. new scenario spec, localized build).