I18N: Add Lingui core translation framework. (#41827)

* I18N: Add Core Lingui framework for translating the UI * Make FieldSet accept ReactNode for the label, so it can be translated * Translate a phrase in the User profile edit form * Translate phrase * run lingui compile before webpack builds * init i18n more lazily * i1n:compile in drone lint step * wip for getting tests to work * Use mock lingui/macros because its too hard to use the real macros in Jest... * mock messages for tests * use specific lingui version * add comment for test helper * we actually don't need the i18n setup in tests because we mock out <Trans /> * update package.json * remove unneded imports * revert back babel core version * Create a I18nProvider wrapper
4 years ago · 4f6d08f14b
parent 50c6c7a528
commit 4f6d08f14b
18 changed files with 634 additions and 102 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -62,6 +62,7 @@ steps:
 - commands:
  - yarn run prettier:check
  - yarn run lint
+  - yarn run i18n:compile
  - yarn run typecheck
  depends_on:
  - initialize
@ -499,6 +500,7 @@ steps:
 - commands:
  - yarn run prettier:check
  - yarn run lint
+  - yarn run i18n:compile
  - yarn run typecheck
  depends_on:
  - initialize
@ -1079,6 +1081,7 @@ steps:
 - commands:
  - yarn run prettier:check
  - yarn run lint
+  - yarn run i18n:compile
  - yarn run typecheck
  depends_on:
  - initialize
@ -1564,6 +1567,7 @@ steps:
 - commands:
  - yarn run prettier:check
  - yarn run lint
+  - yarn run i18n:compile
  - yarn run typecheck
  depends_on:
  - initialize
@ -2095,6 +2099,7 @@ steps:
 - commands:
  - yarn run prettier:check
  - yarn run lint
+  - yarn run i18n:compile
  - yarn run typecheck
  depends_on:
  - initialize
@ -2554,6 +2559,7 @@ steps:
 - commands:
  - yarn run prettier:check
  - yarn run lint
+  - yarn run i18n:compile
  - yarn run typecheck
  depends_on:
  - initialize
@ -3190,6 +3196,7 @@ steps:
 - commands:
  - yarn run prettier:check
  - yarn run lint
+  - yarn run i18n:compile
  - yarn run typecheck
  depends_on:
  - initialize
@ -3626,6 +3633,7 @@ steps:
 - commands:
  - yarn run prettier:check
  - yarn run lint
+  - yarn run i18n:compile
  - yarn run typecheck
  depends_on:
  - initialize
@ -4213,6 +4221,6 @@ kind: secret
 name: prerelease_bucket
 ---
 kind: signature
-hmac: 095d741ce6f28b818cbf059f4cf19d5403a4e451fabfcad111c8674124e10db9
+hmac: 4a5d47ae5989a19e3a5f204853c7c61f7af67e0f712138b92afc4770f61d4223

 ...
--- a/.eslintignore
+++ b/.eslintignore
@ -8,3 +8,7 @@ dist
 e2e/tmp
 public/lib/monaco
 deployment_tools_config.json
+
+# Auto-generated localisation files
+public/locales/_build/
+public/locales/**/*.js
--- a/.gitignore
+++ b/.gitignore
@ -150,4 +150,9 @@ compilation-stats.json
 # auto generated Go files
 *_gen.go

+# Auto-generated localisation files
+public/locales/_build/
+public/locales/**/*.js
+
 deployment_tools_config.json
+
--- a/.linguirc
+++ b/.linguirc
@ -0,0 +1,27 @@
+{
+  "locales": [
+    "en",
+    "fr",
+    "es"
+  ],
+  "catalogs": [
+    {
+      "path": "public/locales/{locale}/messages",
+      "include": [
+        "public/app"
+      ],
+      "exclude": [
+        "**/node_modules/**",
+        "public/app/plugins"
+      ]
+    }
+  ],
+  "fallbackLocales": {
+    "default": "en"
+  },
+  "sourceLocale": "en",
+  "format": "po",
+  "formatOptions": {
+    "lineNumbers": false
+  }
+}
--- a/babel.config.json
+++ b/babel.config.json
@ -38,7 +38,8 @@
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-syntax-dynamic-import", // needed for `() => import()` in routes.ts
-    "angularjs-annotate"
+    "angularjs-annotate",
+    "macros"
  ],
  "env": {
    "production": {
--- a/jest.config.js
+++ b/jest.config.js
@ -28,6 +28,14 @@ module.exports = {
    '\\.svg': '<rootDir>/public/test/mocks/svg.ts',
    '\\.css': '<rootDir>/public/test/mocks/style.ts',
    'monaco-editor/esm/vs/editor/editor.api': '<rootDir>/public/test/mocks/monaco.ts',
+
+    // lingui-macro (for i18n) makes use of babel-macro, which we do not enable in tests, so we
+    // provide our own mock component
+    '@lingui/macro': '<rootDir>/public/test/mocks/linguiMacro.tsx',
+
+    // i18n messages.js files are auto-generated, and may not exist when the tests are ran.
+    // Because we mock out <Trans /> anyway, we can mock the messages also
+    'locales/\\w+/messages$': '<rootDir>/public/test/mocks/i18nMessages.ts',
  },
  watchPathIgnorePatterns: ['<rootDir>/node_modules/'],
 };
--- a/package.json
+++ b/package.json
@ -7,9 +7,9 @@
  "repository": "github:grafana/grafana",
  "scripts": {
    "api-tests": "jest --notify --watch --config=devenv/e2e-api-tests/jest.js",
-    "build": "NODE_ENV=production webpack --config scripts/webpack/webpack.prod.js",
+    "build": "yarn i18n:compile && NODE_ENV=production webpack --config scripts/webpack/webpack.prod.js",
    "build:nominify": "yarn run build --env noMinify=1",
-    "dev": "webpack --progress --color --config scripts/webpack/webpack.dev.js",
+    "dev": "yarn i18n:compile && webpack --progress --color --config scripts/webpack/webpack.dev.js",
    "e2e": "./e2e/start-and-run-suite",
    "e2e:debug": "./e2e/start-and-run-suite debug",
    "e2e:dev": "./e2e/start-and-run-suite dev",
@ -34,9 +34,9 @@
    "precommit": "yarn run lint-staged",
    "prettier:check": "prettier --list-different \"**/*.{scss,md,mdx}\"",
    "prettier:write": "prettier --list-different \"**/*.{scss,md,mdx}\" --write",
-    "start": "yarn themes:generate && webpack --progress --color --watch --env noTsCheck=0 --config scripts/webpack/webpack.dev.js",
-    "start:hot": "yarn themes:generate && NODE_ENV=hot webpack serve --progress --color --config scripts/webpack/webpack.hot.js",
-    "start:noTsCheck": "yarn themes:generate && webpack --progress --color --watch --env noTsCheck=1 --config scripts/webpack/webpack.dev.js",
+    "start": "yarn themes:generate && yarn dev --watch",
+    "start:noTsCheck": "yarn start --env noTsCheck=1",
+    "start:hot": "yarn themes:generate && NODE_ENV=hot yarn dev --config scripts/webpack/webpack.hot.js",
    "stats": "webpack --mode production --config scripts/webpack/webpack.prod.js --profile --json > compilation-stats.json",
    "storybook": "yarn workspace @grafana/ui storybook --ci",
    "storybook:build": "yarn workspace @grafana/ui storybook:build",
@ -45,6 +45,8 @@
    "plugins:build-bundled": "grafana-toolkit plugin:bundle-managed",
    "watch": "yarn start -d watch,start core:start --watchTheme",
    "ci:test-frontend": "yarn run test:ci && yarn grafana-toolkit node-version-check",
+    "i18n:extract": "lingui extract",
+    "i18n:compile": "lingui compile",
    "postinstall": "husky install"
  },
  "grafana": {
@ -80,6 +82,8 @@
    "@grafana/eslint-config": "2.5.1",
    "@grafana/toolkit": "workspace:*",
    "@grafana/tsconfig": "^1.0.0-rc1",
+    "@lingui/cli": "3.12.1",
+    "@lingui/macro": "3.12.1",
    "@microsoft/api-extractor": "7.18.16",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
    "@react-types/button": "3.4.1",
@ -113,6 +117,7 @@
    "@types/jest": "27.0.2",
    "@types/jquery": "3.3.38",
    "@types/jsurl": "^1.2.28",
+    "@types/lingui__macro": "^3",
    "@types/lodash": "4.14.149",
    "@types/logfmt": "^1.2.1",
    "@types/lru-cache": "^5.1.0",
@ -153,6 +158,7 @@
    "babel-jest": "27.4.2",
    "babel-loader": "8.2.2",
    "babel-plugin-angularjs-annotate": "0.10.0",
+    "babel-plugin-macros": "3.1.0",
    "copy-webpack-plugin": "9.0.1",
    "css-loader": "6.5.1",
    "css-minimizer-webpack-plugin": "^3.1.3",
@ -234,6 +240,8 @@
    "@grafana/ui": "workspace:*",
    "@jaegertracing/jaeger-ui-components": "workspace:*",
    "@kusto/monaco-kusto": "4.1.2",
+    "@lingui/core": "3.12.1",
+    "@lingui/react": "3.12.1",
    "@opentelemetry/api": "1.0.2",
    "@opentelemetry/exporter-collector": "0.25.0",
    "@opentelemetry/semantic-conventions": "1.0.0",
--- a/packages/grafana-ui/src/components/Forms/FieldSet.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldSet.tsx
@ -4,10 +4,10 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { stylesFactory, useTheme2 } from '../../themes';
 import { Legend } from './Legend';

-export interface Props extends HTMLProps<HTMLFieldSetElement> {
+export interface Props extends Omit<HTMLProps<HTMLFieldSetElement>, 'label'> {
  children: React.ReactNode[] | React.ReactNode;
-  /** Text for the fieldset's legend */
-  label?: string;
+  /** Label for the fieldset's legend */
+  label?: React.ReactNode;
 }

 export const FieldSet: FC<Props> = ({ label, children, className, ...rest }) => {
--- a/public/app/AppWrapper.tsx
+++ b/public/app/AppWrapper.tsx
@ -16,6 +16,7 @@ import { AppNotificationList } from './core/components/AppNotifications/AppNotif
 import { SearchWrapper } from 'app/features/search';
 import { LiveConnectionWarning } from './features/live/LiveConnectionWarning';
 import { AngularRoot } from './angular/AngularRoot';
+import { I18nProvider } from './core/localisation';

 interface AppWrapperProps {
  app: GrafanaApp;
@ -95,35 +96,37 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState

    return (
      <Provider store={store}>
-        <ErrorBoundaryAlert style="page">
-          <ConfigContext.Provider value={config}>
-            <ThemeProvider>
-              <ModalsProvider>
-                <GlobalStyles />
-                <div className="grafana-app">
-                  <Router history={locationService.getHistory()}>
-                    {newNavigationEnabled ? <NavBarNext /> : <NavBar />}
-                    <main className="main-view">
-                      {pageBanners.map((Banner, index) => (
-                        <Banner key={index.toString()} />
-                      ))}
-
-                      <AngularRoot ref={this.container} />
-                      <AppNotificationList />
-                      <SearchWrapper />
-                      {this.state.ngInjector && this.renderRoutes()}
-                      {bodyRenderHooks.map((Hook, index) => (
-                        <Hook key={index.toString()} />
-                      ))}
-                    </main>
-                  </Router>
-                </div>
-                <LiveConnectionWarning />
-                <ModalRoot />
-              </ModalsProvider>
-            </ThemeProvider>
-          </ConfigContext.Provider>
-        </ErrorBoundaryAlert>
+        <I18nProvider>
+          <ErrorBoundaryAlert style="page">
+            <ConfigContext.Provider value={config}>
+              <ThemeProvider>
+                <ModalsProvider>
+                  <GlobalStyles />
+                  <div className="grafana-app">
+                    <Router history={locationService.getHistory()}>
+                      {newNavigationEnabled ? <NavBarNext /> : <NavBar />}
+                      <main className="main-view">
+                        {pageBanners.map((Banner, index) => (
+                          <Banner key={index.toString()} />
+                        ))}
+
+                        <AngularRoot ref={this.container} />
+                        <AppNotificationList />
+                        <SearchWrapper />
+                        {this.state.ngInjector && this.renderRoutes()}
+                        {bodyRenderHooks.map((Hook, index) => (
+                          <Hook key={index.toString()} />
+                        ))}
+                      </main>
+                    </Router>
+                  </div>
+                  <LiveConnectionWarning />
+                  <ModalRoot />
+                </ModalsProvider>
+              </ThemeProvider>
+            </ConfigContext.Provider>
+          </ErrorBoundaryAlert>
+        </I18nProvider>
      </Provider>
    );
  }
--- a/public/app/core/localisation.tsx
+++ b/public/app/core/localisation.tsx
@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { I18n, i18n } from '@lingui/core';
+import { I18nProvider as LinguiI18nProvider } from '@lingui/react';
+
+import { messages } from '../../locales/en/messages';
+
+let i18nInstance: I18n;
+
+export function getI18n(locale = 'en') {
+  if (i18nInstance) {
+    return i18nInstance;
+  }
+
+  i18n.load(locale, messages);
+
+  // Browser support for Intl.PluralRules is good and covers what we support in .browserlistrc,
+  // but because this could potentially be in a the critical path of loading the frontend lets
+  // be extra careful
+  // If this isnt loaded, Lingui will log a warning and plurals will not be translated correctly.
+  const supportsPluralRules = 'Intl' in window && 'PluralRules' in Intl;
+  if (supportsPluralRules) {
+    const pluralsOrdinal = new Intl.PluralRules(locale, { type: 'ordinal' });
+    const pluralsCardinal = new Intl.PluralRules(locale, { type: 'cardinal' });
+    i18n.loadLocaleData(locale, {
+      plurals(count: number, ordinal: boolean) {
+        return (ordinal ? pluralsOrdinal : pluralsCardinal).select(count);
+      },
+    });
+  }
+
+  i18n.activate(locale);
+  i18nInstance = i18n;
+
+  return i18nInstance;
+}
+
+interface I18nProviderProps {
+  children: React.ReactNode;
+}
+export function I18nProvider({ children }: I18nProviderProps) {
+  const [i18nRef] = useState(() => getI18n());
+
+  return <LinguiI18nProvider i18n={i18nRef}>{children}</LinguiI18nProvider>;
+}
--- a/public/app/features/profile/UserProfileEditForm.tsx
+++ b/public/app/features/profile/UserProfileEditForm.tsx
@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import { Trans } from '@lingui/macro';
 import { Button, Field, FieldSet, Form, Icon, Input, Tooltip } from '@grafana/ui';
 import { UserDTO } from 'app/types';
 import config from 'app/core/config';
@ -21,7 +22,7 @@ export const UserProfileEditForm: FC<Props> = ({ user, isSavingUser, updateProfi
    <Form onSubmit={onSubmitProfileUpdate} validateOn="onBlur">
      {({ register, errors }) => {
        return (
-          <FieldSet label="Edit profile">
+          <FieldSet label={<Trans id="edit-user-profile.title">Edit profile</Trans>}>
            <Field label="Name" invalid={!!errors.name} error="Name is required" disabled={disableLoginForm}>
              <Input
                {...register('name', { required: true })}
--- a/public/locales/en/messages.po
+++ b/public/locales/en/messages.po
@ -0,0 +1,18 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2021-11-16 17:00+0000\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: public/app/features/profile/UserProfileEditForm.tsx
+msgid "edit-user-profile.title"
+msgstr "Edit profile"
--- a/public/locales/es/messages.po
+++ b/public/locales/es/messages.po
@ -0,0 +1,18 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2021-11-16 17:00+0000\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: es\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: public/app/features/profile/UserProfileEditForm.tsx
+msgid "edit-user-profile.title"
+msgstr "Editar perfil"
--- a/public/locales/fr/messages.po
+++ b/public/locales/fr/messages.po
@ -0,0 +1,18 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2021-11-16 17:00+0000\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: fr\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: public/app/features/profile/UserProfileEditForm.tsx
+msgid "edit-user-profile.title"
+msgstr "Editer le profil"
--- a/public/test/mocks/i18nMessages.ts
+++ b/public/test/mocks/i18nMessages.ts
@ -0,0 +1,5 @@
+// The translation functions and components we use are mocked out during tests anyway, so this
+// message cataloge isnt really used anyway, but we mock them out so anything that imports them
+// won't fail if they aren't generated when the tests run
+
+/*eslint-disable*/ module.exports = { messages: {} };
--- a/public/test/mocks/linguiMacro.tsx
+++ b/public/test/mocks/linguiMacro.tsx
@ -0,0 +1,17 @@
+import React from 'react';
+
+export const Trans: React.FC = ({ children }) => {
+  return <>{children}</>;
+};
+
+export const Plural: React.FC = () => {
+  throw new Error('Plural mock not implemented yet');
+};
+
+export const Select: React.FC = () => {
+  throw new Error('Select mock not implemented yet');
+};
+
+export const SelectOrdinal: React.FC = () => {
+  throw new Error('SelectOrdinal mock not implemented yet');
+};
--- a/scripts/drone/steps/lib.star
+++ b/scripts/drone/steps/lib.star
@ -496,6 +496,7 @@ def lint_frontend_step():
        'commands': [
            'yarn run prettier:check',
            'yarn run lint',
+            'yarn run i18n:compile', # TODO: right place for this?
            'yarn run typecheck',
        ],
    }
--- a/yarn.lock
+++ b/yarn.lock
@ -148,6 +148,17 @@ __metadata:
  languageName: node
  linkType: hard

+"@babel/generator@npm:^7.11.6, @babel/generator@npm:^7.16.0, @babel/generator@npm:^7.7.2":
+  version: 7.16.0
+  resolution: "@babel/generator@npm:7.16.0"
+  dependencies:
+    "@babel/types": ^7.16.0
+    jsesc: ^2.5.1
+    source-map: ^0.5.0
+  checksum: 9ff53e0db72a225c8783c4a277698b4efcead750542ebb9cff31732ba62d092090715a772df10a323446924712f6928ad60c03db4e7051bed3a9701b552d51fb
+  languageName: node
+  linkType: hard
+
 "@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.13.9, @babel/generator@npm:^7.15.4, @babel/generator@npm:^7.15.8, @babel/generator@npm:^7.4.0":
  version: 7.15.8
  resolution: "@babel/generator@npm:7.15.8"
@ -159,14 +170,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/generator@npm:^7.16.0, @babel/generator@npm:^7.7.2":
-  version: 7.16.0
-  resolution: "@babel/generator@npm:7.16.0"
+"@babel/generator@npm:^7.16.5":
+  version: 7.16.5
+  resolution: "@babel/generator@npm:7.16.5"
  dependencies:
    "@babel/types": ^7.16.0
    jsesc: ^2.5.1
    source-map: ^0.5.0
-  checksum: 9ff53e0db72a225c8783c4a277698b4efcead750542ebb9cff31732ba62d092090715a772df10a323446924712f6928ad60c03db4e7051bed3a9701b552d51fb
+  checksum: 621fa2da21a5397a4739f03af1eda76140f0da9f962071640a479c0cf1859edc576aa8881b5771be9274238f048bf9024c94d826003659f64eee29c48f2fe470
  languageName: node
  linkType: hard

@ -346,6 +357,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@babel/helper-environment-visitor@npm:^7.16.5":
+  version: 7.16.5
+  resolution: "@babel/helper-environment-visitor@npm:7.16.5"
+  dependencies:
+    "@babel/types": ^7.16.0
+  checksum: f57da613f2fb9ca0b85cb4a9131cb688555e78ba8b0047ac0e73551b247eb71bf8fa075e6408064e8ab71ec230f24b4e06367efc9ccd1dcfcea0efe0086f02f3
+  languageName: node
+  linkType: hard
+
 "@babel/helper-explode-assignable-expression@npm:^7.15.4":
  version: 7.15.4
  resolution: "@babel/helper-explode-assignable-expression@npm:7.15.4"
@ -431,12 +451,12 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/helper-member-expression-to-functions@npm:^7.16.0":
-  version: 7.16.0
-  resolution: "@babel/helper-member-expression-to-functions@npm:7.16.0"
+"@babel/helper-member-expression-to-functions@npm:^7.16.0, @babel/helper-member-expression-to-functions@npm:^7.16.5":
+  version: 7.16.5
+  resolution: "@babel/helper-member-expression-to-functions@npm:7.16.5"
  dependencies:
    "@babel/types": ^7.16.0
-  checksum: 58ef8e3a4af0c1dc43a2011f43f25502877ac1c5aa9a4a6586f0265ab857b65831f60560044bc9380df43c91ac21cad39a84095b91764b433d1acf18d27e38d6
+  checksum: 54d061e0f77fc7b4c338aca4c53104f5074126c23a702e6320dac39c4f99ee7ea07962824256b6b18f1202ea3c23d4e388b23a846df65550896398f65675d397
  languageName: node
  linkType: hard

@ -475,18 +495,18 @@ __metadata:
  linkType: hard

 "@babel/helper-module-transforms@npm:^7.16.0":
-  version: 7.16.0
-  resolution: "@babel/helper-module-transforms@npm:7.16.0"
+  version: 7.16.5
+  resolution: "@babel/helper-module-transforms@npm:7.16.5"
  dependencies:
+    "@babel/helper-environment-visitor": ^7.16.5
    "@babel/helper-module-imports": ^7.16.0
-    "@babel/helper-replace-supers": ^7.16.0
    "@babel/helper-simple-access": ^7.16.0
    "@babel/helper-split-export-declaration": ^7.16.0
    "@babel/helper-validator-identifier": ^7.15.7
    "@babel/template": ^7.16.0
-    "@babel/traverse": ^7.16.0
+    "@babel/traverse": ^7.16.5
    "@babel/types": ^7.16.0
-  checksum: a3d0e5556f26ebdf2ae422af3b9a1ba1848fead891f46bcd1c6a4be88ad8e9f348140f81d1843a3481574be1643a9c79b01469231f5b5801f5d5e691efdd11f3
+  checksum: 0463e7198e5540cbb90981f769c89ec302001b211c33df1a6790a1eaee678ec418cee40ef3cf0fe159d40787214fbba129582f6b07e79244dc8cbcd5e791dd18
  languageName: node
  linkType: hard

@ -557,14 +577,15 @@ __metadata:
  linkType: hard

 "@babel/helper-replace-supers@npm:^7.16.0":
-  version: 7.16.0
-  resolution: "@babel/helper-replace-supers@npm:7.16.0"
+  version: 7.16.5
+  resolution: "@babel/helper-replace-supers@npm:7.16.5"
  dependencies:
-    "@babel/helper-member-expression-to-functions": ^7.16.0
+    "@babel/helper-environment-visitor": ^7.16.5
+    "@babel/helper-member-expression-to-functions": ^7.16.5
    "@babel/helper-optimise-call-expression": ^7.16.0
-    "@babel/traverse": ^7.16.0
+    "@babel/traverse": ^7.16.5
    "@babel/types": ^7.16.0
-  checksum: 61f04bbe05ff0987d5a8d5253cb101d47004a27951d6c5cd95457e30fcb3adaca85f0bcaa7f31f4d934f22386b935ac7281398c68982d4a4768769d95c028460
+  checksum: 7eb2cba87a6c4d9c7a8d0951b70eb19007e37bfbba61e1087f847fb263b21e13cc659d6ce29c0ccd00f9870e26131c1e09a0f01afcd10f6cb792dc9d8db147bc
  languageName: node
  linkType: hard

@ -672,13 +693,13 @@ __metadata:
  linkType: hard

 "@babel/helpers@npm:^7.16.0":
-  version: 7.16.3
-  resolution: "@babel/helpers@npm:7.16.3"
+  version: 7.16.5
+  resolution: "@babel/helpers@npm:7.16.5"
  dependencies:
    "@babel/template": ^7.16.0
-    "@babel/traverse": ^7.16.3
+    "@babel/traverse": ^7.16.5
    "@babel/types": ^7.16.0
-  checksum: b725b1aab734e9e1407247ee499880583855843fa2855377a2c26277bd9fbd7080219109189bc69b18d71cc30759666bfe66d534729b41452097866d1f5a66ef
+  checksum: 960d938a4359b7f9ff7b753e33b6f600e269aec0ef6030c8026ac37525103da8cde5f1c04ce7de1ad6fc37707aa6178eae938d6fc82544aa25c9fd602c62e0a8
  languageName: node
  linkType: hard

@ -713,6 +734,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@babel/parser@npm:^7.11.5":
+  version: 7.16.3
+  resolution: "@babel/parser@npm:7.16.3"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 486b676b9d47d10de72598f9453eb4591535c5639b5e153d46442fb0d8523d775abf6e5f457193730b609d55ad0fd171f28a075c1fa5679f5049279e77cd63b2
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.16.0, @babel/parser@npm:^7.16.3, @babel/parser@npm:^7.7.2":
  version: 7.16.4
  resolution: "@babel/parser@npm:7.16.4"
@ -722,6 +752,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@babel/parser@npm:^7.16.5":
+  version: 7.16.5
+  resolution: "@babel/parser@npm:7.16.5"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 107230485fafbf215cec86ea8ae6a7e5f7f9d6ac0e63019008560f536511e7830fb2fece3052bd99a6d9e19f78fca332522beba2fde9453fffdafa37fa59baef
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.16.2":
  version: 7.16.2
  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.16.2"
@ -1305,25 +1344,25 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/plugin-syntax-jsx@npm:^7.12.13, @babel/plugin-syntax-jsx@npm:^7.14.5":
-  version: 7.14.5
-  resolution: "@babel/plugin-syntax-jsx@npm:7.14.5"
+"@babel/plugin-syntax-jsx@npm:^7.10.4, @babel/plugin-syntax-jsx@npm:^7.16.0":
+  version: 7.16.0
+  resolution: "@babel/plugin-syntax-jsx@npm:7.16.0"
  dependencies:
    "@babel/helper-plugin-utils": ^7.14.5
  peerDependencies:
    "@babel/core": ^7.0.0-0
-  checksum: 3a2ba87534b0f9ee70eba0754d2ae544825c25afd98efb8e42b41399e02de4cc5b1f70fc5ce444fb7a7e5b09972c289eed2f00917be5b88d67407f4cbde8e960
+  checksum: 34afe4030c249ed5a559c7d164b317a6209f3fca2db7dee7ecb8413af84167381d82f23517bf8e41d359da07da9b0fd2c0472e81c4389e5cc9d1997a308d49de
  languageName: node
  linkType: hard

-"@babel/plugin-syntax-jsx@npm:^7.16.0":
-  version: 7.16.0
-  resolution: "@babel/plugin-syntax-jsx@npm:7.16.0"
+"@babel/plugin-syntax-jsx@npm:^7.12.13, @babel/plugin-syntax-jsx@npm:^7.14.5":
+  version: 7.14.5
+  resolution: "@babel/plugin-syntax-jsx@npm:7.14.5"
  dependencies:
    "@babel/helper-plugin-utils": ^7.14.5
  peerDependencies:
    "@babel/core": ^7.0.0-0
-  checksum: 34afe4030c249ed5a559c7d164b317a6209f3fca2db7dee7ecb8413af84167381d82f23517bf8e41d359da07da9b0fd2c0472e81c4389e5cc9d1997a308d49de
+  checksum: 3a2ba87534b0f9ee70eba0754d2ae544825c25afd98efb8e42b41399e02de4cc5b1f70fc5ce444fb7a7e5b09972c289eed2f00917be5b88d67407f4cbde8e960
  languageName: node
  linkType: hard

@ -2747,7 +2786,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.16.3, @babel/traverse@npm:^7.7.2":
+"@babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.7.2":
  version: 7.16.3
  resolution: "@babel/traverse@npm:7.16.3"
  dependencies:
@ -2764,6 +2803,24 @@ __metadata:
  languageName: node
  linkType: hard

+"@babel/traverse@npm:^7.16.5":
+  version: 7.16.5
+  resolution: "@babel/traverse@npm:7.16.5"
+  dependencies:
+    "@babel/code-frame": ^7.16.0
+    "@babel/generator": ^7.16.5
+    "@babel/helper-environment-visitor": ^7.16.5
+    "@babel/helper-function-name": ^7.16.0
+    "@babel/helper-hoist-variables": ^7.16.0
+    "@babel/helper-split-export-declaration": ^7.16.0
+    "@babel/parser": ^7.16.5
+    "@babel/types": ^7.16.0
+    debug: ^4.1.0
+    globals: ^11.1.0
+  checksum: 6bc31311b641ac0a1c6c854cad3faa172f54d987f9a28d7d75ed64ecbcc74983f60acd51bdd792f77e451fd5385c10ce9955f9d1d60162bd32748cc42dc7eef9
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.7, @babel/types@npm:^7.13.12, @babel/types@npm:^7.13.14, @babel/types@npm:^7.14.9, @babel/types@npm:^7.15.4, @babel/types@npm:^7.15.6, @babel/types@npm:^7.2.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
  version: 7.15.6
  resolution: "@babel/types@npm:7.15.6"
@ -2774,7 +2831,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/types@npm:^7.16.0":
+"@babel/types@npm:^7.11.5, @babel/types@npm:^7.16.0":
  version: 7.16.0
  resolution: "@babel/types@npm:7.16.0"
  dependencies:
@ -3210,6 +3267,20 @@ __metadata:
  languageName: node
  linkType: hard

+"@endemolshinegroup/cosmiconfig-typescript-loader@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@endemolshinegroup/cosmiconfig-typescript-loader@npm:3.0.2"
+  dependencies:
+    lodash.get: ^4
+    make-error: ^1
+    ts-node: ^9
+    tslib: ^2
+  peerDependencies:
+    cosmiconfig: ">=6"
+  checksum: 7fe0198622b1063c40572034df7e8ba867865a1b4815afe230795929abcf785758b34d7806a8e2100ba8ab4e92c5a1c3e11a980c466c4406df6e7ec6e50df8b6
+  languageName: node
+  linkType: hard
+
 "@es-joy/jsdoccomment@npm:0.12.0":
  version: 0.12.0
  resolution: "@es-joy/jsdoccomment@npm:0.12.0"
@ -5256,6 +5327,113 @@ __metadata:
  languageName: node
  linkType: hard

+"@lingui/babel-plugin-extract-messages@npm:^3.12.1":
+  version: 3.12.1
+  resolution: "@lingui/babel-plugin-extract-messages@npm:3.12.1"
+  dependencies:
+    "@babel/generator": ^7.11.6
+    "@babel/runtime": ^7.11.2
+    "@lingui/conf": ^3.12.1
+    mkdirp: ^1.0.4
+  checksum: 889483ceb84ea33eaedf867453ee0ca47844d68fc3c893798284ccaf1c8efadc91da26d4384c77734f30a2d6f1266beb37243915367de3c1cd19c9b2bd2d005e
+  languageName: node
+  linkType: hard
+
+"@lingui/cli@npm:3.12.1":
+  version: 3.12.1
+  resolution: "@lingui/cli@npm:3.12.1"
+  dependencies:
+    "@babel/generator": ^7.11.6
+    "@babel/parser": ^7.11.5
+    "@babel/plugin-syntax-jsx": ^7.10.4
+    "@babel/runtime": ^7.11.2
+    "@babel/types": ^7.11.5
+    "@lingui/babel-plugin-extract-messages": ^3.12.1
+    "@lingui/conf": ^3.12.1
+    babel-plugin-macros: ^3.0.1
+    bcp-47: ^1.0.7
+    chalk: ^4.1.0
+    chokidar: 3.5.1
+    cli-table: ^0.3.1
+    commander: ^6.1.0
+    date-fns: ^2.16.1
+    fs-extra: ^9.0.1
+    fuzzaldrin: ^2.1.0
+    glob: ^7.1.4
+    inquirer: ^7.3.3
+    make-plural: ^6.2.2
+    messageformat-parser: ^4.1.3
+    micromatch: 4.0.2
+    mkdirp: ^1.0.4
+    node-gettext: ^3.0.0
+    normalize-path: ^3.0.0
+    ora: ^5.1.0
+    papaparse: ^5.3.0
+    pkg-up: ^3.1.0
+    plurals-cldr: ^1.0.4
+    pofile: ^1.1.0
+    pseudolocale: ^1.1.0
+    ramda: ^0.27.1
+  peerDependencies:
+    "@babel/core": ^7.0.0
+    babel-plugin-macros: 2 || 3
+    typescript: 2 || 3 || 4
+  bin:
+    lingui: lingui.js
+  checksum: 652cd719713eb628e6b56698bf0cd9f8542ba9c29500c71838584ebfe14268e02ccc977995d511d3681fcea91fcb0d8aa156838eca0c24c501b94fdb1342f91a
+  languageName: node
+  linkType: hard
+
+"@lingui/conf@npm:^3.12.1":
+  version: 3.12.1
+  resolution: "@lingui/conf@npm:3.12.1"
+  dependencies:
+    "@babel/runtime": ^7.11.2
+    "@endemolshinegroup/cosmiconfig-typescript-loader": ^3.0.2
+    chalk: ^4.1.0
+    cosmiconfig: ^7.0.0
+    jest-validate: ^26.5.2
+    lodash.get: ^4.4.2
+  checksum: 1860fd935f9c835a07d2247b39889fb72c03567cb3cf053bea9d09b75752fdfb3d0ed1df8a63af50cfcddb83d22a804c227537d0f413aaba344b69601eac563e
+  languageName: node
+  linkType: hard
+
+"@lingui/core@npm:3.12.1, @lingui/core@npm:^3.12.1":
+  version: 3.12.1
+  resolution: "@lingui/core@npm:3.12.1"
+  dependencies:
+    "@babel/runtime": ^7.11.2
+    make-plural: ^6.2.2
+    messageformat-parser: ^4.1.3
+  checksum: 3ee2ac903f85b79f7539b7e1d6d0803c2cab18cbbb9e6bf84be11d9c3521b871d38cab1d36f047de5429ba55ffdc2bd00db28dfe3f0963e2b43e17e3403ef267
+  languageName: node
+  linkType: hard
+
+"@lingui/macro@npm:*, @lingui/macro@npm:3.12.1":
+  version: 3.12.1
+  resolution: "@lingui/macro@npm:3.12.1"
+  dependencies:
+    "@babel/runtime": ^7.11.2
+    "@lingui/conf": ^3.12.1
+    ramda: ^0.27.1
+  peerDependencies:
+    babel-plugin-macros: 2 || 3
+  checksum: 83384f2d796dbc7ecadb74a1c6159ccad82976c194f97b82c2ba72cc8113f95bf0193aa6a4e9596db25b713129a9037a873bf1282bc30e197c2a72855707162f
+  languageName: node
+  linkType: hard
+
+"@lingui/react@npm:3.12.1":
+  version: 3.12.1
+  resolution: "@lingui/react@npm:3.12.1"
+  dependencies:
+    "@babel/runtime": ^7.11.2
+    "@lingui/core": ^3.12.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+  checksum: 330129116777496422037ea5a8de5883bddefb29ddbe978fab44ea1309a6e95633178b613524fcea403bd5d39b6691e4868e6ceaed76179646dc955ec6b7aeff
+  languageName: node
+  linkType: hard
+
 "@mapbox/jsonlint-lines-primitives@npm:~2.0.2":
  version: 2.0.2
  resolution: "@mapbox/jsonlint-lines-primitives@npm:2.0.2"
@ -9181,6 +9359,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/lingui__macro@npm:^3":
+  version: 3.0.0
+  resolution: "@types/lingui__macro@npm:3.0.0"
+  dependencies:
+    "@lingui/macro": "*"
+  checksum: 0a3ff3b0f037309d6435f36f737f76b542ce9a8c8f90a1f83ef24a29bfb727f8c3dfc567c38e7f436f73a2d461b91ff6948e9fbf30a15bd057659014c6e96ca0
+  languageName: node
+  linkType: hard
+
 "@types/lodash@npm:4.14.123":
  version: 4.14.123
  resolution: "@types/lodash@npm:4.14.123"
@ -11485,7 +11672,7 @@ __metadata:
  languageName: node
  linkType: hard

-"anymatch@npm:^3.0.0, anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
+"anymatch@npm:^3.0.0, anymatch@npm:^3.0.3, anymatch@npm:~3.1.1, anymatch@npm:~3.1.2":
  version: 3.1.2
  resolution: "anymatch@npm:3.1.2"
  dependencies:
@ -12172,6 +12359,17 @@ __metadata:
  languageName: node
  linkType: hard

+"babel-plugin-macros@npm:3.1.0, babel-plugin-macros@npm:^3.0.1":
+  version: 3.1.0
+  resolution: "babel-plugin-macros@npm:3.1.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    cosmiconfig: ^7.0.0
+    resolve: ^1.19.0
+  checksum: 765de4abebd3e4688ebdfbff8571ddc8cd8061f839bb6c3e550b0344a4027b04c60491f843296ce3f3379fb356cc873d57a9ee6694262547eb822c14a25be9a6
+  languageName: node
+  linkType: hard
+
 "babel-plugin-macros@npm:^2.0.0, babel-plugin-macros@npm:^2.6.1, babel-plugin-macros@npm:^2.8.0":
  version: 2.8.0
  resolution: "babel-plugin-macros@npm:2.8.0"
@ -12183,17 +12381,6 @@ __metadata:
  languageName: node
  linkType: hard

-"babel-plugin-macros@npm:^3.0.1":
-  version: 3.1.0
-  resolution: "babel-plugin-macros@npm:3.1.0"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-    cosmiconfig: ^7.0.0
-    resolve: ^1.19.0
-  checksum: 765de4abebd3e4688ebdfbff8571ddc8cd8061f839bb6c3e550b0344a4027b04c60491f843296ce3f3379fb356cc873d57a9ee6694262547eb822c14a25be9a6
-  languageName: node
-  linkType: hard
-
 "babel-plugin-named-asset-import@npm:^0.3.1":
  version: 0.3.7
  resolution: "babel-plugin-named-asset-import@npm:0.3.7"
@ -12458,6 +12645,17 @@ __metadata:
  languageName: node
  linkType: hard

+"bcp-47@npm:^1.0.7":
+  version: 1.0.8
+  resolution: "bcp-47@npm:1.0.8"
+  dependencies:
+    is-alphabetical: ^1.0.0
+    is-alphanumerical: ^1.0.0
+    is-decimal: ^1.0.0
+  checksum: 5cfd810288472a3634d0758535c77b54d399f31277411763be2095f17c9a6d5a7130fed8dbd6c36867515d62c727a991323b93f9747a403945118f5d937a7f71
+  languageName: node
+  linkType: hard
+
 "bcrypt-pbkdf@npm:^1.0.0":
  version: 1.0.2
  resolution: "bcrypt-pbkdf@npm:1.0.2"
@ -13384,6 +13582,25 @@ __metadata:
  languageName: node
  linkType: hard

+"chokidar@npm:3.5.1":
+  version: 3.5.1
+  resolution: "chokidar@npm:3.5.1"
+  dependencies:
+    anymatch: ~3.1.1
+    braces: ~3.0.2
+    fsevents: ~2.3.1
+    glob-parent: ~5.1.0
+    is-binary-path: ~2.1.0
+    is-glob: ~4.0.1
+    normalize-path: ~3.0.0
+    readdirp: ~3.5.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: b7774e6e3aeca084d39e8542041555a11452414c744122436101243f89580fad97154ae11525e46bfa816313ae32533e2a88e8587e4d50b14ea716a9e6538978
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:3.5.2, chokidar@npm:>=2.0.0 <4.0.0, chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.2.2, chokidar@npm:^3.4.1, chokidar@npm:^3.4.2, chokidar@npm:^3.5.2":
  version: 3.5.2
  resolution: "chokidar@npm:3.5.2"
@ -13580,6 +13797,15 @@ __metadata:
  languageName: node
  linkType: hard

+"cli-table@npm:^0.3.1":
+  version: 0.3.6
+  resolution: "cli-table@npm:0.3.6"
+  dependencies:
+    colors: 1.0.3
+  checksum: b0cd08578c810240920438cc2b3ffb4b4f5106b29f3362707f1d8cfc0c0440ad2afb70b96e30ce37f72f0ffe1e844ae7341dde4df17d51ad345eb186a5903af2
+  languageName: node
+  linkType: hard
+
 "cli-truncate@npm:3.1.0":
  version: 3.1.0
  resolution: "cli-truncate@npm:3.1.0"
@ -13790,6 +14016,13 @@ __metadata:
  languageName: node
  linkType: hard

+"colors@npm:1.0.3":
+  version: 1.0.3
+  resolution: "colors@npm:1.0.3"
+  checksum: 234e8d3ab7e4003851cdd6a1f02eaa16dabc502ee5f4dc576ad7959c64b7477b15bd21177bab4055a4c0a66aa3d919753958030445f87c39a253d73b7a3637f5
+  languageName: node
+  linkType: hard
+
 "colors@npm:^1.1.2, colors@npm:^1.4.0":
  version: 1.4.0
  resolution: "colors@npm:1.4.0"
@ -13851,6 +14084,13 @@ __metadata:
  languageName: node
  linkType: hard

+"commander@npm:*, commander@npm:8.3.0, commander@npm:^8.0.0, commander@npm:^8.1.0, commander@npm:^8.3.0":
+  version: 8.3.0
+  resolution: "commander@npm:8.3.0"
+  checksum: 0f82321821fc27b83bd409510bb9deeebcfa799ff0bf5d102128b500b7af22872c0c92cb6a0ebc5a4cf19c6b550fba9cedfa7329d18c6442a625f851377bacf0
+  languageName: node
+  linkType: hard
+
 "commander@npm:2, commander@npm:^2.19.0, commander@npm:^2.20.0, commander@npm:^2.7.1, commander@npm:^2.9.0":
  version: 2.20.3
  resolution: "commander@npm:2.20.3"
@ -13865,13 +14105,6 @@ __metadata:
  languageName: node
  linkType: hard

-"commander@npm:8.3.0, commander@npm:^8.0.0, commander@npm:^8.1.0, commander@npm:^8.3.0":
-  version: 8.3.0
-  resolution: "commander@npm:8.3.0"
-  checksum: 0f82321821fc27b83bd409510bb9deeebcfa799ff0bf5d102128b500b7af22872c0c92cb6a0ebc5a4cf19c6b550fba9cedfa7329d18c6442a625f851377bacf0
-  languageName: node
-  linkType: hard
-
 "commander@npm:^4.1.1":
  version: 4.1.1
  resolution: "commander@npm:4.1.1"
@ -13886,7 +14119,7 @@ __metadata:
  languageName: node
  linkType: hard

-"commander@npm:^6.2.1":
+"commander@npm:^6.1.0, commander@npm:^6.2.1":
  version: 6.2.1
  resolution: "commander@npm:6.2.1"
  checksum: d7090410c0de6bc5c67d3ca41c41760d6d268f3c799e530aafb73b7437d1826bbf0d2a3edac33f8b57cc9887b4a986dce307fa5557e109be40eadb7c43b21742
@ -18346,7 +18579,7 @@ __metadata:
  languageName: node
  linkType: hard

-"fsevents@npm:^2.1.2, fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+"fsevents@npm:^2.1.2, fsevents@npm:^2.3.2, fsevents@npm:~2.3.1, fsevents@npm:~2.3.2":
  version: 2.3.2
  resolution: "fsevents@npm:2.3.2"
  dependencies:
@ -18366,7 +18599,7 @@ __metadata:
  languageName: node
  linkType: hard

-"fsevents@patch:fsevents@^2.1.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
+"fsevents@patch:fsevents@^2.1.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.1#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
  version: 2.3.2
  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
  dependencies:
@ -18415,6 +18648,13 @@ __metadata:
  languageName: node
  linkType: hard

+"fuzzaldrin@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "fuzzaldrin@npm:2.1.0"
+  checksum: 515ffa81b0eb846ac9b8ca1f4f8f62bb154f14f04cd0adeca72f3650236b39e3acfce3edf127a7b7b7b7ca1745cd19c8742cf75bffdaf88d4ff127fed0520408
+  languageName: node
+  linkType: hard
+
 "fuzzy@npm:^0.1.3":
  version: 0.1.3
  resolution: "fuzzy@npm:0.1.3"
@ -18714,7 +18954,7 @@ __metadata:
  languageName: node
  linkType: hard

-"glob-parent@npm:^5.0.0, glob-parent@npm:^5.1.1, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
+"glob-parent@npm:^5.0.0, glob-parent@npm:^5.1.1, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.0, glob-parent@npm:~5.1.2":
  version: 5.1.2
  resolution: "glob-parent@npm:5.1.2"
  dependencies:
@ -19055,6 +19295,10 @@ __metadata:
    "@grafana/ui": "workspace:*"
    "@jaegertracing/jaeger-ui-components": "workspace:*"
    "@kusto/monaco-kusto": 4.1.2
+    "@lingui/cli": 3.12.1
+    "@lingui/core": 3.12.1
+    "@lingui/macro": 3.12.1
+    "@lingui/react": 3.12.1
    "@microsoft/api-extractor": 7.18.16
    "@opentelemetry/api": 1.0.2
    "@opentelemetry/exporter-collector": 0.25.0
@ -19105,6 +19349,7 @@ __metadata:
    "@types/jest": 27.0.2
    "@types/jquery": 3.3.38
    "@types/jsurl": ^1.2.28
+    "@types/lingui__macro": ^3
    "@types/lodash": 4.14.149
    "@types/logfmt": ^1.2.1
    "@types/lru-cache": ^5.1.0
@ -19158,6 +19403,7 @@ __metadata:
    babel-jest: 27.4.2
    babel-loader: 8.2.2
    babel-plugin-angularjs-annotate: 0.10.0
+    babel-plugin-macros: 3.1.0
    baron: 3.0.3
    brace: 0.11.1
    calculate-size: 1.1.1
@ -22515,7 +22761,7 @@ __metadata:
  languageName: node
  linkType: hard

-"jest-validate@npm:^26.6.2":
+"jest-validate@npm:^26.5.2, jest-validate@npm:^26.6.2":
  version: 26.6.2
  resolution: "jest-validate@npm:26.6.2"
  dependencies:
@ -23558,7 +23804,7 @@ __metadata:
  languageName: node
  linkType: hard

-"lodash.get@npm:^4.4.2":
+"lodash.get@npm:^4, lodash.get@npm:^4.4.2":
  version: 4.4.2
  resolution: "lodash.get@npm:4.4.2"
  checksum: e403047ddb03181c9d0e92df9556570e2b67e0f0a930fcbbbd779370972368f5568e914f913e93f3b08f6d492abc71e14d4e9b7a18916c31fa04bd2306efe545
@ -23866,7 +24112,7 @@ __metadata:
  languageName: node
  linkType: hard

-"make-error@npm:1.x, make-error@npm:^1.1.1":
+"make-error@npm:1.x, make-error@npm:^1, make-error@npm:^1.1.1":
  version: 1.3.6
  resolution: "make-error@npm:1.3.6"
  checksum: b86e5e0e25f7f777b77fabd8e2cbf15737972869d852a22b7e73c17623928fccb826d8e46b9951501d3f20e51ad74ba8c59ed584f610526a48f8ccf88aaec402
@ -23920,6 +24166,13 @@ __metadata:
  languageName: node
  linkType: hard

+"make-plural@npm:^6.2.2":
+  version: 6.2.2
+  resolution: "make-plural@npm:6.2.2"
+  checksum: 3358330c113e4586f8874a37f3ad613cd7c898ff9a0ae61d029dfbdce042ad0f76e88909464c5514be81166b842005913e58341e77f7b6378a2020630dcfc613
+  languageName: node
+  linkType: hard
+
 "makeerror@npm:1.0.12":
  version: 1.0.12
  resolution: "makeerror@npm:1.0.12"
@ -24239,6 +24492,13 @@ __metadata:
  languageName: node
  linkType: hard

+"messageformat-parser@npm:^4.1.3":
+  version: 4.1.3
+  resolution: "messageformat-parser@npm:4.1.3"
+  checksum: d5a72581116b1813460241672ffb6ff3e2f05c311d48c7d81daf368f5254447dda095756e53830664383c51c707dbf387c21b35cd341b7edd4f2945656ac476f
+  languageName: node
+  linkType: hard
+
 "methods@npm:~1.1.2":
  version: 1.1.2
  resolution: "methods@npm:1.1.2"
@ -24253,6 +24513,16 @@ __metadata:
  languageName: node
  linkType: hard

+"micromatch@npm:4.0.2":
+  version: 4.0.2
+  resolution: "micromatch@npm:4.0.2"
+  dependencies:
+    braces: ^3.0.1
+    picomatch: ^2.0.5
+  checksum: 39590a96d9ffad21f0afac044d0a5af4f33715a16fdd82c53a01c8f5ff6f70832a31b53e52972dac3deff8bf9f0bed0207d1c34e54ab3306a5e4c4efd5f7d249
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:^3.1.10, micromatch@npm:^3.1.4":
  version: 3.1.10
  resolution: "micromatch@npm:3.1.10"
@ -25050,6 +25320,15 @@ __metadata:
  languageName: node
  linkType: hard

+"node-gettext@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "node-gettext@npm:3.0.0"
+  dependencies:
+    lodash.get: ^4.4.2
+  checksum: c4864c5c3372d095d95f4925e7468c0fabd61542b3ac100d45452261bd30ea538cd95d40b6f149a04e098f6783062243c133e17d66161b1cfc14f0f23600368d
+  languageName: node
+  linkType: hard
+
 "node-gyp@npm:^5.0.2":
  version: 5.1.1
  resolution: "node-gyp@npm:5.1.1"
@ -25800,7 +26079,7 @@ __metadata:
  languageName: node
  linkType: hard

-"ora@npm:^5.4.1":
+"ora@npm:^5.1.0, ora@npm:^5.4.1":
  version: 5.4.1
  resolution: "ora@npm:5.4.1"
  dependencies:
@ -26149,6 +26428,13 @@ __metadata:
  languageName: node
  linkType: hard

+"papaparse@npm:^5.3.0":
+  version: 5.3.1
+  resolution: "papaparse@npm:5.3.1"
+  checksum: 3431917bb46f8952e49ca64ecc9107ddf05291573ef666c8fac4e172b57780d131f1af925b47841039bd5ae0ceadc2eafbcb8183c092307442f85eed11f82b69
+  languageName: node
+  linkType: hard
+
 "parallel-transform@npm:^1.1.0":
  version: 1.2.0
  resolution: "parallel-transform@npm:1.2.0"
@ -26463,7 +26749,7 @@ __metadata:
  languageName: node
  linkType: hard

-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.0.5, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0":
  version: 2.3.0
  resolution: "picomatch@npm:2.3.0"
  checksum: 16818720ea7c5872b6af110760dee856c8e4cd79aed1c7a006d076b1cc09eff3ae41ca5019966694c33fbd2e1cc6ea617ab10e4adac6df06556168f13be3fca2
@ -26545,7 +26831,7 @@ __metadata:
  languageName: node
  linkType: hard

-"pkg-up@npm:3.1.0":
+"pkg-up@npm:3.1.0, pkg-up@npm:^3.1.0":
  version: 3.1.0
  resolution: "pkg-up@npm:3.1.0"
  dependencies:
@ -26561,6 +26847,13 @@ __metadata:
  languageName: node
  linkType: hard

+"plurals-cldr@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "plurals-cldr@npm:1.0.4"
+  checksum: 1bc03505790364a5f915bd013cc78bf2eb35058c001c792bdd30e6c6beb664df8dd4512dcc5f8f936a716a553258a98f4f6c4a224aecaa4a0ee350d492d54f77
+  languageName: node
+  linkType: hard
+
 "pn@npm:^1.1.0":
  version: 1.1.0
  resolution: "pn@npm:1.1.0"
@ -26612,6 +26905,13 @@ __metadata:
  languageName: node
  linkType: hard

+"pofile@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "pofile@npm:1.1.1"
+  checksum: c470db8271f094c23b4ed907e9e04d6bd108575251dabb5787988811e89f0d04a03d02672d2790676a90af552a6f0185cec241e60d9c1a21fcbad5a909eeeae0
+  languageName: node
+  linkType: hard
+
 "polished@npm:^4.0.5":
  version: 4.1.3
  resolution: "polished@npm:4.1.3"
@ -28119,6 +28419,15 @@ __metadata:
  languageName: node
  linkType: hard

+"pseudolocale@npm:^1.1.0":
+  version: 1.2.0
+  resolution: "pseudolocale@npm:1.2.0"
+  dependencies:
+    commander: "*"
+  checksum: c504de65478454e0a64248df62422889893a4609f52d37452ecb3d0abf2a122163cbeb883709a6f23574f21cfe0fadcb06107f0834d079bf806521880e4b91fc
+  languageName: node
+  linkType: hard
+
 "pseudomap@npm:^1.0.2":
  version: 1.0.2
  resolution: "pseudomap@npm:1.0.2"
@ -28330,6 +28639,13 @@ __metadata:
  languageName: node
  linkType: hard

+"ramda@npm:^0.27.1":
+  version: 0.27.1
+  resolution: "ramda@npm:0.27.1"
+  checksum: 31a0c0ef739b2525d7615f84cbb5d3cb89ee0c795469b711f729ea1d8df0dccc3cd75d3717a1e9742d42315ce86435680b7c87743eb7618111c60c144a5b8059
+  languageName: node
+  linkType: hard
+
 "randexp@npm:0.4.6":
  version: 0.4.6
  resolution: "randexp@npm:0.4.6"
@ -29720,6 +30036,15 @@ __metadata:
  languageName: node
  linkType: hard

+"readdirp@npm:~3.5.0":
+  version: 3.5.0
+  resolution: "readdirp@npm:3.5.0"
+  dependencies:
+    picomatch: ^2.2.1
+  checksum: 6b1a9341e295e15d4fb40c010216cbcb6266587cd0b3ce7defabd66fa1b4e35f9fba3d64c2187fd38fadd01ccbfc5f1b33fdfb1da63b3cbf66224b7c6d75ce5a
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
  version: 3.6.0
  resolution: "readdirp@npm:3.6.0"
@ -33497,6 +33822,27 @@ __metadata:
  languageName: node
  linkType: hard

+"ts-node@npm:^9":
+  version: 9.1.1
+  resolution: "ts-node@npm:9.1.1"
+  dependencies:
+    arg: ^4.1.0
+    create-require: ^1.1.0
+    diff: ^4.0.1
+    make-error: ^1.1.1
+    source-map-support: ^0.5.17
+    yn: 3.1.1
+  peerDependencies:
+    typescript: ">=2.7"
+  bin:
+    ts-node: dist/bin.js
+    ts-node-script: dist/bin-script.js
+    ts-node-transpile-only: dist/bin-transpile.js
+    ts-script: dist/bin-script-deprecated.js
+  checksum: 356e2647b8b1e6ab00380c0537fa569b63bd9b6f006cc40fd650f81fae1817bd8fecc075300036950d8f45c1d85b95be33cd1e48a1a424a7d86c3dbb42bf60e5
+  languageName: node
+  linkType: hard
+
 "ts-pnp@npm:^1.1.6":
  version: 1.2.0
  resolution: "ts-pnp@npm:1.2.0"
@ -33507,7 +33853,7 @@ __metadata:
  languageName: node
  linkType: hard

-"tslib@npm:2.3.1, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0":
+"tslib@npm:2.3.1, tslib@npm:^2, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0":
  version: 2.3.1
  resolution: "tslib@npm:2.3.1"
  checksum: de17a98d4614481f7fcb5cd53ffc1aaf8654313be0291e1bfaee4b4bb31a20494b7d218ff2e15017883e8ea9626599b3b0e0229c18383ba9dce89da2adf15cb9