opensource-joe opened a new pull request, #339:
URL: https://github.com/apache/fineract-backoffice-ui/pull/339
## What and why
Every browser tab read "Fineract Backoffice UI". Across 325 route
declarations in 23 files, none set `Route.title`, and the app registered no
`TitleStrategy`, so the static title in `src/index.html` was never replaced.
The tab strip carried no information, and history entries and bookmarks were
equally undifferentiated.
It also matters without a screen. The document title is announced on
navigation and is the primary way a non-visual user learns the page changed, so
in a single-page app that never updates it, navigation is silent.
`TranslatedTitleStrategy` treats `Route.title` as a translation key rather
than a phrase, resolves it through the I18N adapter and appends the short app
name, giving `Groups · Fineract`. Writing the phrase directly would have made
the tab the only user-visible string in the app that cannot be translated.
Closes #250
## On scope, since the issue invites a choice
The issue offers two paths: plain keys first with the strategy as a
follow-up, or the strategy in the same PR. This takes the second, because the
strategy is the part that decides what every later PR looks like, and it is
easier to argue about once it exists.
It also uses inheritance rather than titling all 325 routes. A route without
a `title` inherits its nearest titled ancestor, which is Angular's own
`buildTitle` behaviour. So titling the 25 sections in `app.routes.ts` gives
every page beneath them a sensible tab immediately, and a feature can then
refine its own routes without touching anything outside its own file.
`groups.routes.ts` is fully refined here as the worked example of that second
step.
That leaves the per-feature refinement of the remaining 22 route files as
exactly the small, self-contained tasks the issue describes, which seemed more
useful to you than one 325-line diff from me. Happy to take them on if you
would rather, or to leave them as newcomer tasks.
Four sections are deliberately not titled, because no existing key names
them and I did not want to invent page names: `admin`, `spm`, `fineract-mfe`,
and the `**` route (which only redirects). They fall back to `Fineract`, which
is still better than today.
## Keys
No new page names were invented. The 25 sections reuse the sidebar's own
`nav.*` keys, which are already the canonical names for these pages, or an
existing section `TITLE` where there is no `nav` entry (`MEETINGS.TITLE`,
`CALENDARS.TITLE`, `COLLECTION_SHEET.TITLE`, `SEARCH.TITLE`,
`FORGOT_PASSWORD.TITLE`, `PROFILE.TITLE`, `login.title`).
Two keys are added: `app.shortTitle` ("Fineract") for the suffix, since
`app.title` is "Fineract Backoffice UI" and repeating that on every tab defeats
the purpose; and `GROUPS.GROUP_DETAILS` for the group view page, which had no
name.
## One small addition worth calling out
`scripts/check-translations.mjs` now recognises the route form, `title:
'nav.groups'`. Without it a typo in a route key is caught by nothing and
reaches the tab as a raw key. The pattern requires the dotted-identifier key
shape, so it does not match ordinary `title:` properties holding a phrase. It
raises the referenced-key count from 1,439 to 1,514 and reports no missing keys.
## Verification
Run in a clean container (node 22.23.2), all passing: `lint:prune` (with
`eslint-suppressions.json` unchanged), `format:check`, `eslint
"src/**/*.html"`, `i18n:check`, `check:icons`, `check-license.sh`, `build`, and
`npm test` at 900 of 900, up from 896.
The four new specs drive the real Angular router through
`RouterTestingHarness`, the real `TitleStrategy` base class and the real
`Title` service, with only the I18N adapter faked, so they cover key
resolution, ancestor inheritance, the no-title fallback and re-application on
language change.
I checked they are not vacuous. Removing the `effect` that watches the
language fails exactly the language test and nothing else. Passing the key
through untranslated and dropping the suffix fails the two resolution tests.
Restoring the implementation returns all 900 to green.
What that does not cover, stated plainly: nothing here exercises the
`app.config.ts` provider registration in a real browser. I had a headless check
part-written and stopped it, so the wiring itself is verified by reading rather
than by running. It is three lines next to `provideRouter`, but it is the one
part a reviewer should not take on trust from the test results alone.
## Screenshots
Not applicable in the usual sense, since nothing inside the page changes.
The visible difference is the browser tab, which now reads for example `Groups
· Fineract` on `/groups` and `Create Group · Fineract` on `/groups/create`,
instead of `Fineract Backoffice UI` everywhere.
## Checklist
- [x] I did not hand-edit generated files under `src/app/api/`.
- [x] New component or service code uses the adapter boundary in
`src/app/core/adapters/` instead of direct browser globals or imperative
third-party APIs. The strategy resolves keys through the `I18N` token and sets
the title through Angular's `Title` service rather than touching `document`
directly.
- [x] User-facing strings use translation keys. That is the substance of the
change.
- [x] I added or updated tests appropriate to this change, or explained why
tests were not needed.
- [x] UI workflow changes include suitable e2e coverage, including
real-backend testing where relevant. No workflow changes: no route path, guard,
redirect or component was touched, only the `title` property and the strategy
that reads it.
- [x] Commits are signed.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
