feat(admin): localize the operator app with react-i18next (3/4) - #1383
marcelo-maciel wants to merge 1 commit into
Conversation
Admin slice of the i18n work (split of fullstackhero#1344 as requested in review). Self-contained: it needs nothing from the backend slices, and the backend needs nothing from it. - `react-i18next` wiring in `src/i18n.ts`, language detected from the stored preference and negotiated with the API through `Accept-Language`. - English and Brazilian Portuguese catalogs, split per feature namespace. - Language switcher in the topbar; the chosen language is persisted to the user profile so it survives a reload, and `html[lang]` follows it through a `languageChanged` listener rather than staying pinned to `en`. - Number, date and currency formatting moved to `src/lib/format.ts` so the presentation layer owns formatting. The API stays UI-culture-only. - Impersonation handoff carries `locale` in the URL so an operator keeps their language when landing in the tenant app. Harmless on its own: nothing reads the parameter until the dashboard slice ships. - Playwright specs pin catalog parity (keys and placeholders, both directions), the switcher, formatting and the handoff parameter. The `SSH.NET` pin (`2026.0.0`) rides along because `template-smoke.yml` runs on `clients/**` and builds the scaffolded solution, which fails `restore` with `NU1903` until fullstackhero#1333 merges. It is byte-identical to that PR.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a10d397626
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| firstName: input.firstName ?? profile.firstName ?? null, | ||
| lastName: input.lastName ?? profile.lastName ?? null, | ||
| phoneNumber: input.phoneNumber ?? profile.phoneNumber ?? null, | ||
| locale: input.locale ?? profile.locale ?? null, |
There was a problem hiding this comment.
PUT /identity/profile currently has no way to persist this field: UpdateUserCommand exposes only the existing name/phone/email/image properties, while the server-side UserDto and FshUser also have no Locale. ASP.NET simply ignores this JSON property, so selecting a language returns 200 but never survives a server profile read, cannot follow the user to another device, and cannot be minted into the refreshed JWT as the switcher expects.
Useful? React with 👍 / 👎.
| dashboardUrl: (cfg.dashboardUrl ?? "http://localhost:5174").replace(/\/$/, ""), | ||
| inactivityIdleMs: positiveOr(cfg.inactivityIdleMs, DEFAULT_INACTIVITY_IDLE_MS), | ||
| inactivityWarningMs: positiveOr(cfg.inactivityWarningMs, DEFAULT_INACTIVITY_WARNING_MS), | ||
| defaultLanguage: cfg.defaultLanguage ?? "en-US", |
There was a problem hiding this comment.
For Docker and Terraform deployments, the generated admin config.json still contains only apiBase, defaultTenant, and dashboardUrl; neither clients/admin/docker/config.json.template nor the Terraform runtime_config map emits defaultLanguage. Consequently every production deployment takes this fallback as en-US, making the advertised per-deployment default language impossible to configure outside the Vite development file.
AGENTS.md reference: AGENTS.md:L47-L49
Useful? React with 👍 / 👎.
1 participant
clients/adminslice of the i18n work, split out of #1344. 111 files, of which 30 are JSON catalogs. Mostly mechanical, as you predicted.Independent of the backend slices. Nothing here needs the API change, and the API change needs nothing here. It can be reviewed and merged in any order relative to the other three.
clients/adminclients/dashboardWhat is in here
react-i18nextwiring insrc/i18n.ts. The chosen language is persisted to the user profile and sent to the API asAccept-LanguagethroughapiFetch; variants are canonicalised onto a supported tag before the call, so the API never sees a barept.en-USandpt-BRcatalogs, split per feature namespace, held at strict key and placeholder parity in both directions bytests/i18n/parity.spec.ts— a missing or mis-arged translation fails the build instead of shipping English.html[lang]follows the active language through alanguageChangedlistener. The app previously shipped a staticlang="en"that nothing updated, so a Portuguese UI announced itself as English to screen readers and browser translation.src/lib/format.ts). That is the other half of the framework slice's UI-culture-only decision: the API pinsCultureInfo.CurrentCultureto invariant and the app formats numbers, dates and currency itself.localein the URL.StartImpersonationstrips the target'slocaleclaim on purpose, and the two apps normally sit on different origins, so there was no other way to convey it and the API fell through to the dashboard's own browser detection. Harmless on its own: onmainnothing reads the parameter until the dashboard slice lands, and this PR'shandoff-locale.spec.tspasses with only this half present.Testing
Everything below is this slice on its own, at
mainplus these 111 files — not a share of the unsplit branch's totals.npm ci,npm run build(tsc -b+vite build),npx tsc -b tsconfig.tests.jsonandnpm run lint: all exit 0.tests/impersonation/handoff-locale.spec.ts, which passes with only this half of the handoff present.src/Directory.Packages.propsOne backend file in a React PR, which needs explaining.
template-smoke.ymltriggers onpaths: clients/**and runsdotnet buildon the scaffolded solution, and.template.config/template.jsondoes not excludesrc/Tests/**— so a front-end-only PR still restores the full package graph and hitsNU1903/GHSA-q939-rpr3-3284onSSH.NET2025.1.0, pulled transitively by Testcontainers. That advisory failsrestoreonmaintoo, re-verified today at3f2959e6.The pin is byte-identical to #1333, which owns the fix, so both stay mergeable in either order and this copy can simply be dropped once #1333 lands. All four slices carry it for the same reason. Full rationale in the framework PR.
Notes
element detached from the DOM). Three distinct approaches, then stopped rather than paper over it with retries or a longer timeout. The underlying lost update onPUT /identity/profileis tracked in #1359, where theponytail:comments in the topbar point.apiFetch, soAccept-Languageon the negotiate is the browser's. Applies to every session, not just impersonation. Named explicitly inhandoff-locale.spec.tsso any other channel that stops carrying the locale fails the test.Docs (Golden Rule #10)
fullstackhero/docs#238, kept as a single PR covering all four slices —
internationalization.mdxis one page whose sections map across the split. The Frontend (admin and dashboard) section is this slice and the dashboard one: catalogs, language detection and normalization,Accept-Language, the switcher and locale-aware formatting. That PR should merge after the last of the four, so the page never describes code that is not onmainyet.