[i18n][system upgrade] Upgrade i18n tooling

.buildkite/scripts/steps/checks/i18n.sh

@@ -5,4 +5,4 @@ set -euo pipefail
 source .buildkite/scripts/common/util.sh
 
 echo --- Check i18n
-node scripts/i18n_check --ignore-missing
+node scripts/i18n_check

.github/CODEOWNERS

@@ -1293,7 +1293,7 @@ x-pack/test_serverless/api_integration/test_suites/common/security_response_head
 x-pack/plugins/cloud_integrations/cloud_full_story/server/config.ts @elastic/kibana-core @elastic/kibana-telemetry @shahinakmal
 
 # Kibana Localization
-/src/dev/i18n/  @elastic/kibana-localization @elastic/kibana-core
+/src/dev/i18n_tools/  @elastic/kibana-localization @elastic/kibana-core
 /src/core/public/i18n/  @elastic/kibana-localization @elastic/kibana-core
 #CC# /x-pack/plugins/translations/ @elastic/kibana-localization @elastic/kibana-core
 

examples/embeddable_examples/public/react_embeddables/eui_markdown/create_eui_markdown_action.tsx

@@ -41,7 +41,7 @@ export const registerCreateEuiMarkdownAction = (uiActions: UiActionsStart) => {
       );
     },
     getDisplayName: () =>
-      i18n.translate('embeddableExamples.euiMarkdownEditor.ariaLabel', {
+      i18n.translate('embeddableExamples.euiMarkdownEditor.displayNameAriaLabel', {
         defaultMessage: 'EUI Markdown',
       }),
   });

examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx

@@ -87,7 +87,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
             `}
             value={content ?? ''}
             onChange={(value) => content$.next(value)}
-            aria-label={i18n.translate('embeddableExamples.euiMarkdownEditor.ariaLabel', {
+            aria-label={i18n.translate('embeddableExamples.euiMarkdownEditor.embeddableAriaLabel', {
               defaultMessage: 'Dashboard markdown editor',
             })}
             height="full"

package.json

@@ -131,6 +131,7 @@
     "@formatjs/intl-pluralrules": "^5.2.12",
     "@formatjs/intl-relativetimeformat": "^11.2.12",
     "@formatjs/intl-utils": "^3.8.4",
+    "@formatjs/ts-transformer": "^3.13.14",
     "@grpc/grpc-js": "^1.8.22",
     "@hapi/accept": "^5.0.2",
     "@hapi/boom": "^9.1.4",

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx

@@ -190,7 +190,7 @@ export function Header({
                   button={
                     <HeaderMenuButton
                       data-test-subj="toggleNavButton"
-                      aria-label={i18n.translate('core.ui.primaryNav.toggleNavAriaLabel', {
+                      aria-label={i18n.translate('core.ui.primaryNav.header.toggleNavAriaLabel', {
                         defaultMessage: 'Toggle primary navigation',
                       })}
                       onClick={() => setIsNavOpen(!isNavOpen)}

packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx

@@ -104,7 +104,7 @@ const headerStrings = {
     }),
   },
   nav: {
-    closeNavAriaLabel: i18n.translate('core.ui.primaryNav.toggleNavAriaLabel', {
+    closeNavAriaLabel: i18n.translate('core.ui.primaryNav.project.toggleNavAriaLabel', {
       defaultMessage: 'Toggle primary navigation',
     }),
   },

packages/core/rendering/core-rendering-server-internal/src/rendering_service.tsx

@@ -221,7 +221,6 @@ export class RenderingService {
       strictCsp: http.csp.strict,
       uiPublicUrl: `${staticAssetsHrefBase}/ui`,
       bootstrapScriptUrl: `${basePath}/${bootstrapScript}`,
-      i18n: i18nLib.translate,
       locale,
       themeVersion,
       darkMode,

packages/core/rendering/core-rendering-server-internal/src/types.ts

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-import { i18n } from '@kbn/i18n';
 import type { ThemeVersion } from '@kbn/ui-shared-deps-npm';
 import type { InjectedMetadata } from '@kbn/core-injected-metadata-common-internal';
 import type { KibanaRequest, ICspConfig } from '@kbn/core-http-server';
@@ -30,7 +29,6 @@ export interface RenderingMetadata {
   strictCsp: ICspConfig['strict'];
   uiPublicUrl: string;
   bootstrapScriptUrl: string;
-  i18n: typeof i18n.translate;
   locale: string;
   themeVersion: ThemeVersion;
   darkMode: DarkModeValue;

packages/core/rendering/core-rendering-server-internal/src/views/template.tsx

@@ -8,6 +8,7 @@
 
 import React, { FunctionComponent, createElement } from 'react';
 import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
+import { i18n } from '@kbn/i18n';
 import { RenderingMetadata } from '../types';
 import { Fonts } from './fonts';
 import { Logo } from './logo';
@@ -25,7 +26,6 @@ export const Template: FunctionComponent<Props> = ({
     stylesheetPaths,
     scriptPaths,
     injectedMetadata,
-    i18n,
     bootstrapScriptUrl,
     strictCsp,
     customBranding,
@@ -80,18 +80,18 @@ export const Template: FunctionComponent<Props> = ({
             {logo}
             <div
               className="kbnWelcomeText"
-              data-error-message-title={i18n('core.ui.welcomeErrorMessageTitle', {
+              data-error-message-title={i18n.translate('core.ui.welcomeErrorMessageTitle', {
                 defaultMessage: 'Elastic did not load properly',
               })}
-              data-error-message-text={i18n('core.ui.welcomeErrorMessageText', {
+              data-error-message-text={i18n.translate('core.ui.welcomeErrorMessageText', {
                 defaultMessage:
                   'Please reload this page. If the issue persists, check the browser console and server logs.',
               })}
-              data-error-message-reload={i18n('core.ui.welcomeErrorReloadButton', {
+              data-error-message-reload={i18n.translate('core.ui.welcomeErrorReloadButton', {
                 defaultMessage: 'Reload',
               })}
             >
-              {i18n('core.ui.welcomeMessage', {
+              {i18n.translate('core.ui.welcomeMessage', {
                 defaultMessage: 'Loading Elastic',
               })}
             </div>
@@ -103,12 +103,12 @@ export const Template: FunctionComponent<Props> = ({
           {logo}
 
           <h2 className="kbnWelcomeTitle">
-            {i18n('core.ui.legacyBrowserTitle', {
+            {i18n.translate('core.ui.legacyBrowserTitle', {
               defaultMessage: 'Please upgrade your browser',
             })}
           </h2>
           <div className="kbnWelcomeText">
-            {i18n('core.ui.legacyBrowserMessage', {
+            {i18n.translate('core.ui.legacyBrowserMessage', {
               defaultMessage:
                 'This Elastic installation has strict security requirements enabled that your current browser does not meet.',
             })}

packages/kbn-i18n/index.ts

@@ -15,7 +15,6 @@ import {
   handleIntlError,
   getIsInitialized,
 } from './src/core';
-import { polyfillLocale } from './src/polyfills';
 
 import {
   registerTranslationFile,
@@ -43,7 +42,6 @@ const i18nLoader = {
   getAllTranslations,
   getAllTranslationsFromPaths,
   getRegisteredLocales: getRegisteredLocalesForLoader,
-  polyfillLocale,
 };
 
 export type { Translation, TranslationInput } from './src/translation';

packages/kbn-i18n/src/core/error_handler.ts

@@ -9,12 +9,17 @@
 import { OnErrorFn, IntlErrorCode } from '@formatjs/intl';
 
 export const handleIntlError: OnErrorFn = (error) => {
-  // Dont throw on missing translations.
+  /**
+   * log any intl error except missing translations
+   * we do not log on missing translations because our process
+   * of translations happens after developers have commited their
+   * strings in english.
+   *
+   * Previously we used to throw an error on malformed strings but
+   * restricting to logging is less risky in cases of errors
+   * for better UX (ie seeing `InvalidDate` is better than an empty screen)
+   */
   if (error.code !== IntlErrorCode.MISSING_TRANSLATION) {
-    // eslint-disable-next-line no-console
-    console.error(
-      'Error Parsing translation string. This will start throwing an error once the i18n package tooling is upgraded.'
-    );
     // eslint-disable-next-line no-console
     console.error(error);
   }

packages/kbn-text-based-editor/src/esql_documentation_sections.tsx

@@ -4577,6 +4577,7 @@ ROW ver = CONCAT(("0"::INT + 1)::STRING, ".2.3")::VERSION
               `,
               description:
                 'Text is in markdown. Do not translate function names, special characters, or field names like sum(bytes)',
+              ignoreTag: true,
             }
           )}
         />

scripts/i18n_check.js

@@ -7,4 +7,4 @@
  */
 
 require('../src/setup_node_env');
-require('../src/dev/run_i18n_check');
+require('../src/dev/i18n_tools/bin/run_i18n_check');

scripts/i18n_extract.js

@@ -7,4 +7,4 @@
  */
 
 require('../src/setup_node_env');
-require('../src/dev/run_i18n_extract');
+require('../src/dev/i18n_tools/bin/run_i18n_extract');

scripts/i18n_integrate.js

@@ -7,4 +7,4 @@
  */
 
 require('../src/setup_node_env');
-require('../src/dev/run_i18n_integrate');
+require('../src/dev/i18n_tools/bin/run_i18n_integrate');