Files
atomic-design-poc/docs/project/backlog/WP-33-dev-switchers.md
T
ehoandClaude Opus 4.8 1ed4850858
CI / frontend (push) Successful in 1m47s
CI / storybook-a11y (push) Successful in 27m52s
CI / backend (push) Successful in 1m24s
CI / e2e (push) Successful in 27m24s
CI / semgrep (push) Failing after 30s
CI / api-client-drift (push) Successful in 2m7s
feat(dev): WP-33 — in-app dev switchers for scenario + role
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>
2026-07-22 16:53:26 +02:00

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-state devtool (the sanctioned dev-only fab/panel already mounted in the shell under isDevMode()).
  • Reuse the mechanism modules, don't duplicate their source of truth. scenario.ts/role.ts gain a set* setter + an exported valid-values list; the panel imports them. debug-state is added to the ui→infrastructure eslint 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 default mid-demo.
  • Apply by location.reload(). Both values are read per-request in interceptors and gate server-computed decision flags already fetched by eager httpResources — 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, exported SCENARIOS; co-located scenario.spec.ts.
  • shared/infrastructure/role.tssetRole, exported ROLES.
  • 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 ci green (lint, tests incl. new scenario spec, localized build).