elastic · Bamieh · Jun 2, 2024 · Mar 27, 2024 · Apr 8, 2024 · Apr 8, 2024
@@ -294,7 +294,22 @@ module.exports = {
         'jsx-a11y/click-events-have-key-events': 'off',
       },
     },
-
+    /**
+     * FormatJS linter for i18n code.
+     * https://formatjs.io/docs/tooling/linter
+     */
+    {
+      files: [
+        'src/**/*.{js,mjs,ts,tsx}',
+        'x-pack/**/*.{js,mjs,ts,tsx}',
+        'packages/**/*.{js,mjs,ts,tsx}',
+      ],
+      plugins: ['formatjs'],
+      rules: {
+        'formatjs/enforce-default-message': ['error', 'anything'],
+        'formatjs/enforce-description': 'off',
+      },
+    },
     /**
      * Files that require dual-license headers, settings
      * are overridden below for files that require Elastic

diff --git a/dev_docs/tutorials/advanced_settings.mdx b/dev_docs/tutorials/advanced_settings.mdx
@@ -156,6 +156,7 @@ export class ChartsServerPlugin implements Plugin<object, object> {
         description: i18n.translate('charts.advancedSettings.visualization.colorMappingText', {
           defaultMessage:
             'Maps values to specific colors in charts using the <strong>Compatibility</strong> palette.',
+          ignoreTag: true,
         }),
         deprecation: {
           message: i18n.translate(

diff --git a/package.json b/package.json
@@ -124,6 +124,11 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.3.1",
+    "@formatjs/icu-messageformat-parser": "^2.7.6",
+    "@formatjs/intl": "^2.10.1",
+    "@formatjs/intl-pluralrules": "^5.2.12",
+    "@formatjs/intl-relativetimeformat": "^11.2.12",
+    "@formatjs/intl-utils": "^3.8.4",
     "@grpc/grpc-js": "^1.6.8",
     "@hapi/accept": "^5.0.2",
     "@hapi/boom": "^9.1.4",
@@ -1022,10 +1027,7 @@
     "immer": "^9.0.21",
     "inquirer": "^7.3.3",
     "intl": "^1.2.5",
-    "intl-format-cache": "^2.1.0",
-    "intl-messageformat": "^2.2.0",
-    "intl-messageformat-parser": "^1.4.0",
-    "intl-relativeformat": "^2.1.0",
+    "intl-messageformat": "10.5.11",
     "io-ts": "^2.0.5",
     "ipaddr.js": "2.0.0",
     "isbinaryfile": "4.0.2",
@@ -1101,7 +1103,7 @@
     "react-fast-compare": "^2.0.4",
     "react-grid-layout": "^1.3.4",
     "react-hook-form": "^7.44.2",
-    "react-intl": "^2.8.0",
+    "react-intl": "6.6.3",
     "react-is": "^17.0.2",
     "react-markdown": "^6.0.3",
     "react-monaco-editor": "^0.54.0",
@@ -1211,6 +1213,8 @@
     "@elastic/synthetics": "^1.5.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/jest": "^11.11.0",
+    "@formatjs/cli": "^6.2.8",
+    "@formatjs/cli-lib": "^6.3.8",
     "@frsource/cypress-plugin-visual-regression-diff": "^3.3.10",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@istanbuljs/schema": "^0.1.2",
@@ -1444,7 +1448,6 @@
     "@types/hjson": "^2.4.2",
     "@types/http-proxy": "^1.17.4",
     "@types/inquirer": "^7.3.1",
-    "@types/intl-relativeformat": "^2.1.0",
     "@types/jest": "^29.5.3",
     "@types/jest-axe": "^3.5.3",
     "@types/jquery": "^3.3.31",
@@ -1585,11 +1588,12 @@
     "ejs": "^3.1.8",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.46.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-ban": "^1.6.0",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-formatjs": "^4.12.2",
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",

@@ -21,14 +21,4 @@ describe('I18nProviderMock', () => {
       ).html()
     ).toMatchInlineSnapshot(`"default message"`);
   });
-
-  it('interpolates to id if default message is not present', () => {
-    expect(
-      shallow(
-        <I18nProviderMock>
-          <FormattedMessage id="id" />
-        </I18nProviderMock>
-      ).html()
-    ).toMatchInlineSnapshot(`"id"`);
-  });
 });
@@ -11,10 +11,5 @@ import { i18n, i18nLoader } from '@kbn/i18n';
 export const initTranslations = async (locale: string, translationFiles: string[]) => {
   i18nLoader.registerTranslationFiles(translationFiles);
   const translations = await i18nLoader.getTranslationsByLocale(locale);
-  i18n.init(
-    Object.freeze({
-      locale,
-      ...translations,
-    })
-  );
+  i18n.init(Object.freeze({ ...translations }));
 };
@@ -80,6 +80,9 @@ module.exports = {
           from: 'react-intl',
           to: '@kbn/i18n-react',
           disallowedMessage: `import from @kbn/i18n-react instead`,
+          exclude: [
+            /packages[\/\\]kbn-i18n-react[\/\\]/,
+          ]
         },
         {
           from: 'styled-components',

@@ -24,7 +24,8 @@ BUNDLER_DEPS = [
   "//packages/kbn-i18n",
   "@npm//prop-types",
   "@npm//react",
-  "@npm//react-intl"
+  "@npm//react-intl",
+  "@npm//@formatjs/intl-utils"
 ]
 
 js_library(

@@ -6,21 +6,27 @@
  * Side Public License, v 1.
  */
 
-// eslint-disable-next-line @kbn/eslint/module_migration
-export type { InjectedIntl, InjectedIntlProps } from 'react-intl';
+import type { IntlShape, WrappedComponentProps } from 'react-intl';
+import {
+  FormattedDate,
+  FormattedTime,
+  FormattedNumber,
+  FormattedPlural,
+  FormattedMessage,
+  FormattedRelativeTime,
+} from 'react-intl';
 
+export type { IntlShape, WrappedComponentProps };
 export {
-  intlShape,
   FormattedDate,
   FormattedTime,
-  FormattedRelative,
   FormattedNumber,
   FormattedPlural,
   FormattedMessage,
-  FormattedHTMLMessage,
-  // Only used for testing. Use I18nProvider otherwise.
-  IntlProvider as __IntlProvider, // eslint-disable-next-line @kbn/eslint/module_migration
-} from 'react-intl';
+  FormattedRelativeTime,
+};
 
+export { FormattedRelative } from './src/compatiblity_layer';
+export type { FormattedRelativeProps } from './src/compatiblity_layer';
 export { I18nProvider } from './src/provider';
-export { injectI18n } from './src/inject';
+export { injectI18n, useI18n } from './src/inject';