[i18n][system upgrade] Upgrade Intl Packages from v2 to v6

.eslintrc.js

@@ -295,7 +295,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

.github/CODEOWNERS

@@ -1246,6 +1246,7 @@ x-pack/test/observability_ai_assistant_functional @elastic/obs-ai-assistant
 /config/ @elastic/kibana-core
 /typings/ @elastic/kibana-core
 /test/analytics @elastic/kibana-core
+/packages/kbn-test/src/jest/setup/mocks.kbn_i18n_react.js @elastic/kibana-core
 /x-pack/test/saved_objects_field_count/ @elastic/kibana-core
 /x-pack/test_serverless/**/test_suites/common/saved_objects_management/ @elastic/kibana-core
 /x-pack/test_serverless/api_integration/test_suites/common/core/ @elastic/kibana-core

dev_docs/tutorials/advanced_settings.mdx

@@ -156,6 +156,9 @@ 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.',
+          values: {
+            strong: (chunks) => `<strong>${chunks}</strong>`,
+          },
         }),
         deprecation: {
           message: i18n.translate(

package.json

@@ -87,6 +87,7 @@
     "**/globule/minimatch": "^3.1.2",
     "**/hoist-non-react-statics": "^3.3.2",
     "**/isomorphic-fetch/node-fetch": "^2.6.7",
+    "**/react-intl/**/@types/react": "^17.0.45",
     "**/remark-parse/trim": "1.0.1",
     "**/sharp": "0.32.6",
     "**/typescript": "4.9.5",
@@ -124,6 +125,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.2",
+    "@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",
@@ -1029,11 +1035,6 @@
     "icalendar": "0.7.1",
     "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",
     "io-ts": "^2.0.5",
     "ipaddr.js": "2.0.0",
     "isbinaryfile": "4.0.2",
@@ -1109,7 +1110,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.6",
     "react-is": "^17.0.2",
     "react-markdown": "^6.0.3",
     "react-monaco-editor": "^0.54.0",
@@ -1220,6 +1221,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",
@@ -1453,7 +1456,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/jquery": "^3.3.31",
     "@types/js-levenshtein": "^1.1.0",
@@ -1504,7 +1506,6 @@
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.17",
     "@types/react-grid-layout": "^1.3.2",
-    "@types/react-intl": "^2.3.15",
     "@types/react-is": "^17.0.3",
     "@types/react-recompose": "^0.33.4",
     "@types/react-router": "^5.1.20",
@@ -1591,11 +1592,12 @@
     "ejs": "^3.1.10",
     "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",

packages/core/apps/core-apps-browser-internal/src/status/components/server_status.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { ServerStatus } from './server_status';
 import { StatusState } from '../lib';
 
@@ -22,7 +22,7 @@ const getStatus = (parts: Partial<StatusState> = {}): StatusState => ({
 describe('ServerStatus', () => {
   it('renders correctly for green state', () => {
     const status = getStatus();
-    const component = mount(<ServerStatus serverState={status} name="My Computer" />);
+    const component = mountWithIntl(<ServerStatus serverState={status} name="My Computer" />);
     expect(component.find('EuiTitle').text()).toMatchInlineSnapshot(`"Kibana status is Green"`);
     expect(component.find('EuiBadge').render()).toMatchSnapshot();
   });
@@ -32,7 +32,7 @@ describe('ServerStatus', () => {
       id: 'degraded',
       title: 'Yellow',
     });
-    const component = mount(<ServerStatus serverState={status} name="My Computer" />);
+    const component = mountWithIntl(<ServerStatus serverState={status} name="My Computer" />);
     expect(component.find('EuiTitle').text()).toMatchInlineSnapshot(`"Kibana status is Yellow"`);
     expect(component.find('EuiBadge').render()).toMatchSnapshot();
   });
@@ -42,16 +42,16 @@ describe('ServerStatus', () => {
       id: 'unavailable',
       title: 'Red',
     });
-    const component = mount(<ServerStatus serverState={status} name="My Computer" />);
+    const component = mountWithIntl(<ServerStatus serverState={status} name="My Computer" />);
     expect(component.find('EuiTitle').text()).toMatchInlineSnapshot(`"Kibana status is Red"`);
     expect(component.find('EuiBadge').render()).toMatchSnapshot();
   });
 
   it('displays the correct `name`', () => {
-    let component = mount(<ServerStatus serverState={getStatus()} name="Localhost" />);
+    let component = mountWithIntl(<ServerStatus serverState={getStatus()} name="Localhost" />);
     expect(component.find('EuiText').text()).toMatchInlineSnapshot(`"Localhost"`);
 
-    component = mount(<ServerStatus serverState={getStatus()} name="Kibana" />);
+    component = mountWithIntl(<ServerStatus serverState={getStatus()} name="Kibana" />);
     expect(component.find('EuiText').text()).toMatchInlineSnapshot(`"Kibana"`);
   });
 });

packages/core/chrome/core-chrome-browser-internal/src/project_navigation/project_navigation_service.test.ts

@@ -556,19 +556,17 @@ describe('breadcrumbs', () => {
                 <EuiContextMenuItem
                   icon="gear"
                 >
-                  <FormattedMessage
+                  <Memo(MemoizedFormattedMessage)
                     defaultMessage="Manage project"
                     id="core.ui.primaryNav.cloud.linkToProject"
-                    values={Object {}}
                   />
                 </EuiContextMenuItem>,
                 <EuiContextMenuItem
                   icon="grid"
                 >
-                  <FormattedMessage
+                  <Memo(MemoizedFormattedMessage)
                     defaultMessage="View all projects"
                     id="core.ui.primaryNav.cloud.linkToAllProjects"
-                    values={Object {}}
                   />
                 </EuiContextMenuItem>,
               ]
@@ -621,19 +619,17 @@ describe('breadcrumbs', () => {
                 <EuiContextMenuItem
                   icon="gear"
                 >
-                  <FormattedMessage
+                  <Memo(MemoizedFormattedMessage)
                     defaultMessage="Manage project"
                     id="core.ui.primaryNav.cloud.linkToProject"
-                    values={Object {}}
                   />
                 </EuiContextMenuItem>,
                 <EuiContextMenuItem
                   icon="grid"
                 >
-                  <FormattedMessage
+                  <Memo(MemoizedFormattedMessage)
                     defaultMessage="View all projects"
                     id="core.ui.primaryNav.cloud.linkToAllProjects"
-                    values={Object {}}
                   />
                 </EuiContextMenuItem>,
               ]
@@ -680,19 +676,17 @@ describe('breadcrumbs', () => {
                 <EuiContextMenuItem
                   icon="gear"
                 >
-                  <FormattedMessage
+                  <Memo(MemoizedFormattedMessage)
                     defaultMessage="Manage project"
                     id="core.ui.primaryNav.cloud.linkToProject"
-                    values={Object {}}
                   />
                 </EuiContextMenuItem>,
                 <EuiContextMenuItem
                   icon="grid"
                 >
-                  <FormattedMessage
+                  <Memo(MemoizedFormattedMessage)
                     defaultMessage="View all projects"
                     id="core.ui.primaryNav.cloud.linkToAllProjects"
-                    values={Object {}}
                   />
                 </EuiContextMenuItem>,
               ]

packages/core/i18n/core-i18n-browser-mocks/src/i18n_context_mock.test.tsx

@@ -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"`);
-  });
 });