feat: add i18n support (Phase 1)#1589

Merged

g3john merged 11 commits intomainfrom

feat/add-i18n-support

Feb 23, 2026

Contributor

g3john commented Feb 11, 2026 •

edited

Loading

What this PR does / why we need it

We want to add i18n support to the SM plugin. This PR sets up i18n for contribution, and adds some translations as a proof of concept

Screenshot 2026-02-11 at 4 00 52 PM

Which issue(s) this PR fixes

Implements Phase 1 of #1556

github-actions bot added the feature label

g3john commented

View reviewed changes

.config/.cprc.json

@@ @@ -1,4 +1,4 @@ @@
               {
-                "version": "6.7.8",
+                "version": "6.8.4",

Contributor Author

g3john Feb 11, 2026

auto updated when running npx @grafana/create-plugin@latest update

g3john commented

View reviewed changes

CONTRIBUTING.md

		@@ -75,4 +75,152 @@ We use the file nesting feature to help manage the growing number of files in th
		}
		```

Contributor Author

g3john Feb 11, 2026

Is this the best place to put this documentation?

Contributor

VikaCep Feb 12, 2026

I think that's a good location for it.
Just a heads up that the developer-facing stuff here is solid and will stick around (how to use t()/Trans, key naming, best practices). But the workflow sections (extraction, adding languages, file structure) will probably need a rewrite once we get Crowdin set up in Phase 2.

g3john changed the title ~~feat: add i18n support~~ feat: add i18n support (Phase 1)

g3john requested a review from VikaCep

February 11, 2026 21:27

g3john marked this pull request as ready for review

February 11, 2026 21:27

g3john requested review from a team as code owners

February 11, 2026 21:27

g3john marked this pull request as draft

February 11, 2026 21:40

VikaCep reviewed

View reviewed changes

Contributor

VikaCep left a comment

😻 YAY! Love this work.

A few comments on the translations.

I see this branches off chore/migrate-react-router-v6 as you mentioned. I think that's good as we should merge it soon. But I'm wondering if that is purely because @grafana/i18n with initPluginTranslations requires the Grafana 12.2+ packages that come with that upgrade, or is there a direct dependency I'm missing?

src/locales/es-ES/grafana-synthetic-monitoring-app.json Outdated

@@ @@ -0,0 +1,41 @@ @@
+              {
+                "addNewCheckButton": {
+                  "createNewCheck": "Crear nuevo cheque"

Contributor

VikaCep Feb 12, 2026

Suggested change

      
                "createNewCheck": "Crear nuevo cheque"
          
                "createNewCheck": "Crear nueva prueba"

I think "prueba" sounds more natural than "chequeo".
Cheque on the other hand refers to the one from the bank 😄

Contributor

VikaCep Feb 12, 2026

It's also how it's set in the breadcrumbs

src/locales/es-ES/grafana-synthetic-monitoring-app.json Outdated

+                "checkFilters": {
+                  "alerts": "Alertas",
+                  "all": "Todos",
+                  "allProbes": "Todas las sondas",

Contributor

VikaCep Feb 12, 2026

Suggested change

      
                "allProbes": "Todas las sondas",
          
                "allProbes": "Todos los agentes",

I'd use "agentes" directly. Otherwise "ubicaciones" could work as well.

src/locales/es-ES/grafana-synthetic-monitoring-app.json Outdated

+                  "filterByAlertsAriaLabel": "Filtrar por alertas",
+                  "filterByStatusAriaLabel": "Filtrar por estado",
+                  "filterByTypeAriaLabel": "Filtrar por tipo",
+                  "probes": "Sondas",

Contributor

VikaCep Feb 12, 2026

Suggested change

      
                "probes": "Sondas",
          
                "probes": "Agentes",

src/locales/es-ES/grafana-synthetic-monitoring-app.json Outdated

+                  "filterByStatusAriaLabel": "Filtrar por estado",
+                  "filterByTypeAriaLabel": "Filtrar por tipo",
+                  "probes": "Sondas",
+                  "searchChecksAriaLabel": "Buscar chequeos",

Contributor

VikaCep Feb 12, 2026

Suggested change

      
                "searchChecksAriaLabel": "Buscar chequeos",
          
                "searchChecksAriaLabel": "Buscar pruebas",

src/locales/es-ES/grafana-synthetic-monitoring-app.json Outdated

+                  "filterByTypeAriaLabel": "Filtrar por tipo",
+                  "probes": "Sondas",
+                  "searchChecksAriaLabel": "Buscar chequeos",
+                  "searchPlaceholder": "Buscar por nombre de trabajo, punto final o etiqueta",

Contributor

VikaCep Feb 12, 2026

Suggested change

      
                "searchPlaceholder": "Buscar por nombre de trabajo, punto final o etiqueta",
          
                "searchPlaceholder": "Buscar por nombre del job, endpoint o etiqueta",

I'd keep the technical terms as they are, since they don't translate well.

src/locales/es-ES/grafana-synthetic-monitoring-app.json Outdated

+                    "selectAllAriaLabel": "Seleccionar todos",
+                    "setThresholds": "Establecer umbrales",
+                    "sortOptions": {
+                      "ascExecutions": "Ejecuciones asc. ",

Contributor

VikaCep Feb 12, 2026

Suggested change

      
                    "ascExecutions": "Ejecuciones asc. ",
          
                    "ascExecutions": "Ejecuciones asc.",

src/locales/es-ES/grafana-synthetic-monitoring-app.json Outdated

+                    "setThresholds": "Establecer umbrales",
+                    "sortOptions": {
+                      "ascExecutions": "Ejecuciones asc. ",
+                      "ascReachability": "Accesibilidad asc. ",

Contributor

VikaCep Feb 12, 2026

Suggested change

      
                    "ascReachability": "Accesibilidad asc. ",
          
                    "ascReachability": "Accesibilidad asc.",

src/locales/es-ES/grafana-synthetic-monitoring-app.json Outdated

+                    "sortOptions": {
+                      "ascExecutions": "Ejecuciones asc. ",
+                      "ascReachability": "Accesibilidad asc. ",
+                      "descExecutions": "Ejecuciones desc. ",

Contributor

VikaCep Feb 12, 2026

Suggested change

      
                    "descExecutions": "Ejecuciones desc. ",
          
                    "descExecutions": "Ejecuciones desc.",

src/locales/es-ES/grafana-synthetic-monitoring-app.json Outdated

+                      "ascExecutions": "Ejecuciones asc. ",
+                      "ascReachability": "Accesibilidad asc. ",
+                      "descExecutions": "Ejecuciones desc. ",
+                      "descReachability": "Accesibilidad desc. "

Contributor

VikaCep Feb 12, 2026

Suggested change

      
                    "descReachability": "Accesibilidad desc. "
          
                    "descReachability": "Accesibilidad desc."

src/module.tsx Outdated


		import { ProvisioningJsonData } from './types';

		await initPluginTranslations(pluginJson.id);

Contributor

VikaCep Feb 12, 2026

If we add this here, then I believe we can remove it from https://github.com/grafana/synthetic-monitoring-app/blob/feat/add-i18n-support/src/components/ScenesProvider.tsx#L7

Contributor

VikaCep Feb 13, 2026

Having it in module.tsx produces a a +281.38% increase according to Danger.js.
The bundle size increase is because it imports whole package to the main bundle that Grafana loads upfront.
We could avoid this by initialising translations inside the lazy() loaders instead, so it loads alongside the app code on demand rather than upfront.

ckbedwell reviewed

View reviewed changes

Contributor

ckbedwell left a comment

Looking good! What's the plan for when we say this PR is ready to go in?

I just looked at the parent issue and I think a missing piece is updating our CI/CD workflow to integrate this. At the moment it seems easy to add a new translation key but forget to run the i18n extract script. Do we have plans to address that?

Base automatically changed from chore/migrate-react-router-v6 to main

February 13, 2026 17:12

g3john force-pushed the feat/add-i18n-support branch from 1959d39 to e561d6b Compare

February 13, 2026 19:48

github-actions bot commented Feb 13, 2026 •

edited

Loading

	Fails
🚫	module.js has exceeded the Critical threshold of a 10% size increase in this PR.

Script size changes

Name	+/-	Main	This PR	Outcome
[942.js]	-0.80%	2,134.82 kB	2,117.65 kB	✅
[854.js]	New file	-	802.30 kB	✅
[datasource/module.js]	=	25.25 kB	25.25 kB	✅
[692.js]	=	20.64 kB	20.64 kB	✅
[503.js]	New file	-	17.46 kB	✅
[663.js]	=	5.83 kB	5.83 kB	✅
[module.js]	+14.98%	4.59 kB	5.28 kB	🚨
[156.js]	=	1.90 kB	1.90 kB	✅
[361.js]	Deleted file	801.28 kB	-

Totals

Name	+/-	Main	This PR	Outcome
[Scripts]	+0.07%	2,994.31 kB	2,996.29 kB	✅
[Non-script Assets]	+0.10%	2,680.09 kB	2,682.76 kB	✅
[All]	+0.08%	5,674.39 kB	5,679.05 kB	✅

Generated by 🚫 dangerJS against 8945144

Contributor Author

g3john commented Feb 18, 2026

Looking good! What's the plan for when we say this PR is ready to go in?

I just looked at the parent issue and I think a missing piece is updating our CI/CD workflow to integrate this. At the moment it seems easy to add a new translation key but forget to run the i18n extract script. Do we have plans to address that?

@ckbedwell
Good call! At first thought I figure it was fine since it won't break anything if they did forget to run the script, but contributors working on adding translations wouldn't even know the string exists if they weren't extracted.

Added a workflow to the CI to validate, and fails if they forgot to extract

g3john marked this pull request as ready for review

February 18, 2026 19:35

g3john force-pushed the feat/add-i18n-support branch from 3a9888a to 44a4b84 Compare

February 18, 2026 19:37

Contributor Author

g3john commented Feb 18, 2026

😻 YAY! Love this work.

A few comments on the translations.

I see this branches off chore/migrate-react-router-v6 as you mentioned. I think that's good as we should merge it soon. But I'm wondering if that is purely because @grafana/i18n with initPluginTranslations requires the Grafana 12.2+ packages that come with that upgrade, or is there a direct dependency I'm missing?

@VikaCep
It was mostly because running npx @grafana/create-plugin@latest made a lot of the same updates as the upgrade PR, so instead of conflicting with it I just branched off of it

Contributor Author

g3john commented Feb 18, 2026 •

edited

Loading

Confirmed that the new verification works!

g3john requested review from VikaCep and ckbedwell

February 18, 2026 19:51

VikaCep previously approved these changes

View reviewed changes

Contributor

VikaCep left a comment

👏 👏 👏 t('pr.approved', 'Great work!')

ckbedwell previously approved these changes

View reviewed changes

Contributor

ckbedwell left a comment

Teeny tiny nit. I'm approving anyway so take that as feel free to merge when you are ready.

I have wanted this for AGES so I am super chuffed that you got on top of it so swiftly. Great job! 👏 ❤️

src/page/CheckList/components/CheckListHeader.tsx

    
                            value={isAllSelected}

                            disabled={checks.length === 0}

                            aria-label="Select all"

                            aria-label={t('checkList.header.selectAllAriaLabel', 'Select all')}

Contributor

ckbedwell Feb 20, 2026

As this matches what is on line 82 we should use the same key. We should document that we will default to brevity for shared strings and then if they need to be split up at a later date we will add it.

I know the Grafana team had a conversation about how to handle shared strings which are repeatedly used throughout their codebase but I don't know what conclusions they arrived at and what their key naming conventions for those are. Could be worth looking up?

Not for this PR (if ever... juice / squeeze matrix ) but I wonder if there is a solution where for common strings we can use Grafana's translation files rather than us duplicating them, too?

Contributor Author

g3john Feb 20, 2026

Good question! I couldn't find anything on slack or google docs relating to this, so I started a thread

Contributor Author

g3john Feb 20, 2026 •

edited

Loading

Seems like the sentiment is to use separate keys, since the two “Select all” strings have different use cases — one is tooltip content and the other is an aria-label

Another argument we could make is that the same word in English can have different meanings, and may need different translations depending on context and location

With that in mind, if we were to put common strings in a centralized translation file though, we’d need to be explicit about the context and intended use for each string

VikaCep and others added 7 commits

February 20, 2026 11:55


          chore: migrate to React Router v6

feb944b

- Upgrade react-router-dom from v5 to v6.27.0
- Remove react-router-dom-v5-compat dependency
- Update React to 18.3.0 and Grafana packages to 12.2.0
- Migrate route imports and navigation to v6 APIs
- Use locationService for programmatic navigation
- Update webpack externals configuration


          fix: update test mocks for React Router v6 compatibility

badf150


          fix: add ScenesProvider for i18n initialization

cad3b07

Initialize @grafana/i18n before rendering scenes components.
Workaround for grafana/scenes#1322


          feat: add i18n support

2c79125


          fix: translations. remove second translation init. place translation …

394df11

…init behind lazy load


          chore: try adding it to external

bf3813c


          Revert "chore: try adding it to external"

62e5f3c

This reverts commit 7c57723.

g3john added 4 commits

February 20, 2026 11:56


          chore: add ci workflow for verifying i18n

3bd36b9


          chore: test new i18n verification

652e5aa


          Revert "chore: test new i18n verification"

cdef282

This reverts commit 9efa057.


          fix: yarn.lock

g3john dismissed stale reviews from ckbedwell and VikaCep via

February 20, 2026 16:58

g3john force-pushed the feat/add-i18n-support branch from a07917e to 8945144 Compare

February 20, 2026 16:58

Contributor Author

g3john commented Feb 20, 2026

@VikaCep @ckbedwell had to re-request your reviews for rebasing 😅
Did the way I rebase cause this or does it always invalidate approvals when a new commit goes on

g3john requested review from VikaCep and ckbedwell

February 20, 2026 17:00

g3john enabled auto-merge (squash)

February 20, 2026 22:35

VikaCep approved these changes

View reviewed changes

Contributor

VikaCep left a comment

LGTM! 💯

g3john merged commit 75be46d into main

37 of 38 checks passed

g3john deleted the feat/add-i18n-support branch

February 23, 2026 18:50

sm-release-app bot mentioned this pull request

release: Grafana Synthetic Monitoring App v1.48.0 #1597

Draft

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature