feat(portal-shell): replace nx-welcome with real shell and home + budgets per ADR-0017 #74
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: julien/apf_portal#74
Reference in New Issue
Block a user
Delete Branch "feat/portal-shell/home-and-shell"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
Cuts the Nx scaffold's
NxWelcomepage (938 LOC of placeholder markup) and lays down the actual portal layout — header, main, footer landmarks plus a skip link — with a real home page and the two RGAA-mandated accessibility statement routes. Bundle budgets inproject.jsonare tightened to match ADR-0017.What lands
Layout shell (
apps/portal-shell/src/app/):components/header/— brand link + primary nav landmark stubcomponents/footer/— accessibility statement links (FR + EN) + version badgeapp.html/app.scss— flex column with sticky footer + skip link to#main-content(WCAG 2.4.1)Pages:
pages/home/— welcome heading + "system status" widget that fetches/api/healthfrom the BFF. Doubles as a smoke test of the full SPA → BFF stack: CORS, OTel trace propagation, Pino log correlation. After page load, http://localhost:16686 should show one trace whose root span is the SPAdocument_load, with a childfetchspan that has its own childHTTP GET /api/healthBFF span.pages/accessibility/— single component, content selected by route data (lang: 'fr' | 'en'). Mounted at/accessibility(en) and/accessibilite(fr). v1 carries placeholder copy explicitly framed as "awaiting APF user panel review" — RGAA + ADR-0016 require the routes to exist; the substantive statement (audit grid, gaps list, remediation plan) lands separately.Routing & wiring:
app.routes.tsadds the three routes, all lazy-loaded.app.config.tsaddsprovideHttpClient(withFetch())so HttpClient delegates to the patched browserfetchand the W3Ctraceparentheader propagates automatically (per ADR-0012 phase 2).nx-welcome.tsremoved;app.tsno longer imports it.Bundle budgets (
apps/portal-shell/project.json):initialanyScriptanyComponentStylebundle "styles"maximumWarning == maximumErrorso an overshoot fails the build (matchingtype: "error"in spirit). Angular CLI compares raw sizes; ADR-0017 §Confirmation is updated to record the gzip→raw translation and the deferred follow-up that will add a CI check on the actual gzipped transfer size (Angular has no native gzip-mode budget).Verified locally
pnpm exec nx run-many -t lint test build→ 8 projects green; 12 tests pass forportal-shellacross 5 specs (App, Header, Footer, Home, AccessibilityStatement).pnpm nx build portal-shell --configuration=production→ initial bundle 326.99 KB raw / 89.82 KB transfer (gzip) — well under the ADR-0017 300 KB gzip target. Lazy chunks: home 2.66 KB, accessibility 2.90 KB.pnpm auditclean.After
./infra/local/dev.sh up observability+pnpm nx serve portal-bff+pnpm nx serve portal-shell, opening http://localhost:4200 shows the new layout, the system-status widget connects to the BFF, and the corresponding trace appears in Jaeger.Out of scope (separate PRs)
libs/shared/tokens.libs/shared/ui.@angular/localize) — for v1 the FR/EN copy is inlined and route-driven; real i18n is a separate ADR.environment.ts) — the hard-codedhttp://localhost:3000/api/healthwill move there alongside the OTLP endpoint when the env-config PR lands.Test plan
/accessibilityand/accessibiliterender the matching language with<article lang="en|fr">.#main-content.Cuts the Nx scaffold's `NxWelcome` page (938 LOC of placeholder markup) and lays down the actual portal layout — header, main, footer landmarks plus a skip link — with a real home page and the two RGAA-mandated accessibility statement routes. Bundle budgets in `project.json` are tightened to match ADR-0017. Layout shell (apps/portal-shell/src/app/): - components/header/ — brand link + primary nav landmark stub - components/footer/ — accessibility statement links (FR + EN) + version badge - app.html / app.scss — flex column with sticky footer + skip link to #main-content (WCAG 2.4.1) Pages: - pages/home/ — welcome heading + "system status" widget that fetches /api/health from the BFF. Doubles as a smoke test of the full SPA → BFF stack: CORS, OTel trace propagation, Pino log correlation. - pages/accessibility/ — single component, content selected by route data (`lang: 'fr' | 'en'`). Mounted at /accessibility (en) and /accessibilite (fr). v1 carries placeholder copy explicitly framed as "awaiting APF user panel review" — RGAA + ADR-0016 require the routes to exist; the substantive statement (audit grid, gaps list, remediation plan) lands separately. Routing & wiring: - app.routes.ts adds the three routes, all lazy-loaded. - app.config.ts adds `provideHttpClient(withFetch())` so HttpClient delegates to the patched browser `fetch` and the W3C `traceparent` header propagates automatically (ADR-0012 phase 2). - nx-welcome.ts removed; app.ts no longer imports it. Bundle budgets (apps/portal-shell/project.json): - initial ≤ 1 MB raw (≈ 300 KB gzip target per ADR) - anyScript ≤ 300 KB raw (≈ 100 KB gzip per lazy chunk) - anyComponentStyle ≤ 6 KB raw (5 KB warning floor) - bundle "styles" ≤ 150 KB raw `maximumWarning == maximumError` so an overshoot fails the build (matching `type: "error"` in spirit). Angular CLI compares raw sizes; ADR-0017 §Confirmation is updated to record the gzip→raw translation and the deferred follow-up that will add a CI check on the actual gzipped transfer size (Angular has no native gzip-mode budget). Verified locally: - `nx run-many -t lint test build` → 8 projects green, 12 tests pass for portal-shell across 5 specs. - `nx build portal-shell --configuration=production` → initial bundle 326.99 KB raw / 89.82 KB transfer (gzip) — well under the ADR-0017 300 KB gzip target. Lazy chunks: home 2.66 KB, accessibility 2.90 KB. Out of scope (separate PRs): - Real RGAA audit content (APF user-panel review). - Design tokens system in libs/shared/tokens. - Reusable UI primitives in libs/shared/ui. - User-preferences panel (ADR-0016 §"User-preferences panel"). - i18n machinery (@angular/localize) — for v1 the FR/EN copy is inlined and route-driven; real i18n is a separate ADR. - env-config (Angular environment.ts) — DATABASE-of-the-front hard-coded URL `http://localhost:3000/api/health` will move there alongside the OTLP endpoint when the env-config PR lands. - CI gzip-transfer-size assertion to complement the raw-size Angular budgets.