I18n: Improve tooling (#56731)

* Delete en-US.json before extracting strings so it's always up to date

* Add 'comment' to message jsons

* Enable Pseudo-locale option only in dev mode

* don't load english messages

* fix package.json

* fix

package.json

@@ -50,7 +50,8 @@
     "watch": "yarn start -d watch,start core:start --watchTheme",
     "ci:test-frontend": "yarn run test:ci && yarn grafana-toolkit node-version-check",
     "postinstall": "husky install",
-    "i18n:extract": "yarn run i18next -c public/locales/i18next-parser.config.js 'public/**/*.{tsx,ts}' 'packages/grafana-ui/**/*.{tsx,ts}' && node ./public/locales/psuedo.js",
+    "i18n:clean": "rimraf public/locales/en-US/grafana.json",
+    "i18n:extract": "yarn i18n:clean && yarn run i18next -c public/locales/i18next-parser.config.js 'public/**/*.{tsx,ts}' 'packages/grafana-ui/**/*.{tsx,ts}' && node ./public/locales/psuedo.js",
     "i18n:compile": "echo 'no i18n compile yet, all good'",
     "betterer": "betterer",
     "betterer:merge": "betterer merge",

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -42,33 +42,39 @@ const themes: SelectableValue[] = [
   { value: 'light', label: t('shared-preferences.theme.light-label', 'Light') },
 ];
 
-const languages: Array<SelectableValue<string>> = [
-  {
-    value: '',
-    label: t('common.locale.default', 'Default'),
-  },
-  {
-    value: ENGLISH_US,
-    label: t('common.locale.en-US', 'English'),
-  },
-  {
-    value: SPANISH_SPAIN,
-    label: t('common.locale.es-ES', 'Spanish'),
-  },
-  {
-    value: FRENCH_FRANCE,
-    label: t('common.locale.fr-FR', 'French'),
-  },
-  {
-    value: CHINESE_SIMPLIFIED,
-    label: t('common.locale.zh-Hans', 'Chinese (Simplified)'),
-  },
-  // TODO: dev only
-  {
-    value: PSEUDO_LOCALE,
-    label: 'Pseudo-locale', // no need to translate this key
-  },
-];
+function getLanguageOptions(): Array<SelectableValue<string>> {
+  const options = [
+    {
+      value: '',
+      label: t('common.locale.default', 'Default'),
+    },
+    {
+      value: ENGLISH_US,
+      label: t('common.locale.en-US', 'English'),
+    },
+    {
+      value: SPANISH_SPAIN,
+      label: t('common.locale.es-ES', 'Spanish'),
+    },
+    {
+      value: FRENCH_FRANCE,
+      label: t('common.locale.fr-FR', 'French'),
+    },
+    {
+      value: CHINESE_SIMPLIFIED,
+      label: t('common.locale.zh-Hans', 'Chinese (Simplified)'),
+    },
+  ];
+
+  if (process.env.NODE_ENV === 'development') {
+    options.push({
+      value: PSEUDO_LOCALE,
+      label: 'Pseudo-locale', // no need to translate this key
+    });
+  }
+
+  return options;
+}
 
 const i18nFlag = Boolean(config.featureToggles.internationalization);
 
@@ -134,6 +140,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
     const { theme, timezone, weekStart, homeDashboardUID, locale } = this.state;
     const { disabled } = this.props;
     const styles = getStyles();
+    const languages = getLanguageOptions();
 
     return (
       <Form onSubmit={this.onSubmitForm}>

public/app/core/internationalization/index.tsx

@@ -13,7 +13,8 @@ import {
 } from './constants';
 
 const messageLoaders: Record<string, () => Promise<ResourceKey>> = {
-  [ENGLISH_US]: () => import('../../../locales/en-US/grafana.json'),
+  // English phrases are the default fallback string in the source, so we don't need to load the catalogue
+  [ENGLISH_US]: () => Promise.resolve({}),
   [FRENCH_FRANCE]: () => import('../../../locales/fr-FR/grafana.json'),
   [SPANISH_SPAIN]: () => import('../../../locales/es-ES/grafana.json'),
   [CHINESE_SIMPLIFIED]: () => import('../../../locales/zh-Hans/grafana.json'),
@@ -50,6 +51,13 @@ export function initializeI18n(locale: string) {
       // If translations are empty strings (no translation), fall back to the default value in source code
       returnEmptyString: false,
     });
+
+  // This is a placeholder so we can put a 'comment' in the message json files.
+  // Starts with an underscore so it's sorted to the top of the file
+  t(
+    '_comment',
+    'Do not manually edit this file, or update these source phrases in Crowdin. The source of truth for English strings are in the code source'
+  );
 }
 
 export function changeLanguage(locale: string) {

public/locales/en-US/grafana.json

@@ -1,4 +1,5 @@
 {
+  "_comment": "Do not manually edit this file, or update these source phrases in Crowdin. The source of truth for English strings are in the code source",
   "common": {
     "locale": {
       "default": "Default",

public/locales/es-ES/grafana.json

@@ -1,4 +1,5 @@
 {
+  "_comment": "Do not manually edit this file. Translations must be made in Crowdin which will sync them back into this file.",
   "common": {
     "locale": {
       "default": "",

public/locales/fr-FR/grafana.json

@@ -1,4 +1,5 @@
 {
+  "_comment": "Do not manually edit this file. Translations must be made in Crowdin which will sync them back into this file.",
   "common": {
     "locale": {
       "default": "",

public/locales/pseudo-LOCALE/grafana.json

@@ -1,4 +1,5 @@
 {
+  "_comment": "Đő ʼnőŧ mäʼnūäľľy ęđįŧ ŧĥįş ƒįľę, őř ūpđäŧę ŧĥęşę şőūřčę pĥřäşęş įʼn Cřőŵđįʼn. Ŧĥę şőūřčę őƒ ŧřūŧĥ ƒőř Ēʼnģľįşĥ şŧřįʼnģş äřę įʼn ŧĥę čőđę şőūřčę",
   "common": {
     "locale": {
       "default": "Đęƒäūľŧ",
@@ -442,4 +443,4 @@
   "user-sessions": {
     "loading": "Ŀőäđįʼnģ şęşşįőʼnş..."
   }
-}
+}

public/locales/zh-Hans/grafana.json

@@ -1,4 +1,5 @@
 {
+  "_comment": "Do not manually edit this file. Translations must be made in Crowdin which will sync them back into this file.",
   "common": {
     "locale": {
       "default": "",