Add missing @gitlab/ui translation fallbacks

Justin Ho Tuan Duongrequested to merge
justin_ho-gitlab-ui-missing-translations into master

What does this MR do and why?

This MR adds 9 missing translation keys to the translations map in app/assets/javascripts/commons/gitlab_ui.js, and regenerates locale/gitlab.pot with bundle exec rake gettext:regenerate.

@gitlab/ui exports a canonical list of translation keys in node_modules/@gitlab/ui/translations.js. At version 137.1.2, this list has 48 keys. GitLab set only 39 of them. For the other 9 keys, @gitlab/ui fell back to its own hardcoded English strings. Translators could not reach those strings. In development mode, @gitlab/ui also writes a console warning that names every unset key.

The 9 keys added:

Key String New .pot entry?
GlColorModeToggle.darkLabel ColorMode|Dark mode yes
GlColorModeToggle.lightLabel ColorMode|Light mode yes
GlLabel.removeButtonAriaLabel Remove label - %{label} yes
GlLink.externalLink (external link) no, reused
GlSorting.sortByLabel Sort by: yes
GlSorting.sortDirectionUnavailable Sort direction unavailable yes
GlSorting.sortDirectionUnavailableFor Sort direction unavailable for %{sortField} yes
GlTabs.GlScrollableTabs.scrollLeftLabel Scroll left no, reused
GlTabs.GlScrollableTabs.scrollRightLabel Scroll right no, reused

(external link), Scroll left, and Scroll right already existed in locale/gitlab.pot. Translators get 6 new strings, not 9.

Every value matches the upstream English default. English output does not change, so no Jest snapshots change.

%{label} and %{sortField} stay unexpanded on purpose. The translate() helper in @gitlab/ui runs its own sprintf on the configured value.

The two color mode strings use the ColorMode namespace. lib/gitlab/color_modes.rb already uses that namespace. The other 7 strings stay generic, because they have no existing namespace, or they reuse a generic entry that is already in the .pot file.

GlColorModeToggle and GlScrollableTabs have no call sites in the repo today. Their keys are still set, because the development warning lists every unset key.

References

Screenshots or screen recordings

There is no visible change. No screenshots apply.

Before After

How to set up and validate locally

  1. Check out the branch justin_ho-gitlab-ui-missing-translations.

  2. Run this command to confirm that the config now sets every key that @gitlab/ui exports. It must print two empty arrays.

    node -e "
const fs = require('fs');
const up = fs.readFileSync('node_modules/@gitlab/ui/translations.js', 'utf8');
const upKeys = [...up.matchAll(/^  '([^']+)':/gm)].map((m) => m[1]);
const ours = fs.readFileSync('app/assets/javascripts/commons/gitlab_ui.js', 'utf8');
const ourKeys = [...ours.matchAll(/^    '([^']+)':/gm)].map((m) => m[1]);
console.log('missing:', upKeys.filter((k) => !ourKeys.includes(k)));
console.log('extra:', ourKeys.filter((k) => !upKeys.includes(k)));
"

  3. Start GDK in development mode.

  4. Open any page and look at the browser console. The [@gitlab/ui] following translations have not been given warning must be gone.

  5. Run bundle exec rake gettext:regenerate and confirm that locale/gitlab.pot has no further changes.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports