Don't import react-intl directly to reduce bundle sizes (#102497) (#103301)

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>

packages/elastic-eslint-config-kibana/.eslintrc.js

@@ -75,6 +75,11 @@ module.exports = {
           to: '@kbn/test',
           disallowedMessage: `import from the root of @kbn/test instead`
         },
+        {
+          from: 'react-intl',
+          to: '@kbn/i18n/react',
+          disallowedMessage: `import from @kbn/i18n/react instead`
+        }
       ],
     ],
   },

packages/kbn-i18n/src/react/index.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+// eslint-disable-next-line @kbn/eslint/module_migration
 import { InjectedIntl as _InjectedIntl, InjectedIntlProps as _InjectedIntlProps } from 'react-intl';
 export type { InjectedIntl, InjectedIntlProps } from 'react-intl';
 

packages/kbn-i18n/src/react/provider.tsx

@@ -8,6 +8,8 @@
 
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
+
+// eslint-disable-next-line @kbn/eslint/module_migration
 import { IntlProvider } from 'react-intl';
 
 import * as i18n from '../core';

src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.test.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { FieldFormat } from 'src/plugins/data/public';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 import { UrlFormatEditor } from './url';
 import { coreMock } from 'src/core/public/mocks';
 import { createKibanaReactContext } from '../../../../../../kibana_react/public';

x-pack/plugins/apm/public/components/alerting/transaction_duration_anomaly_alert_trigger/select_anomaly_severity.test.tsx

@@ -7,7 +7,7 @@
 
 import { render } from '@testing-library/react';
 import React, { ReactNode } from 'react';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 import { ANOMALY_SEVERITY } from '../../../../common/ml_constants';
 import { SelectAnomalySeverity } from './select_anomaly_severity';
 

x-pack/plugins/data_enhanced/public/search/sessions_mgmt/__mocks__/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { ReactNode } from 'react';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { UrlGeneratorsStart } from '../../../../../../../src/plugins/share/public/url_generators';
 

x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/get_columns.tsx

@@ -16,10 +16,10 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { CoreStart } from 'kibana/public';
 import { capitalize } from 'lodash';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { RedirectAppLinks } from '../../../../../../../src/plugins/kibana_react/public';
 import { IManagementSectionsPluginsSetup, SessionsConfigSchema } from '../';
 import { SearchSessionStatus } from '../../../../../../../src/plugins/data/common';

x-pack/plugins/data_enhanced/public/search/ui/connected_search_session_indicator/connected_search_session_indicator.test.tsx

@@ -22,7 +22,7 @@ import {
 import { coreMock } from '../../../../../../../src/core/public/mocks';
 import { TOUR_RESTORE_STEP_KEY, TOUR_TAKING_TOO_LONG_STEP_KEY } from './search_session_tour';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 import { createSearchUsageCollectorMock } from '../../../../../../../src/plugins/data/public/search/collectors/mocks';
 
 const coreStart = coreMock.createStart();

x-pack/plugins/data_enhanced/public/search/ui/search_session_indicator/search_session_indicator.test.tsx

@@ -9,7 +9,7 @@ import React, { ReactNode } from 'react';
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SearchSessionIndicator } from './search_session_indicator';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 import { SearchSessionState } from '../../../../../../../src/plugins/data/public';
 
 function Container({ children }: { children?: ReactNode }) {

x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_callouts.tsx

@@ -7,12 +7,11 @@
 
 import React from 'react';
 
-import { FormattedMessage } from 'react-intl';
-
 import { useValues } from 'kea';
 
 import { EuiCallOut, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import { EuiLinkTo } from '../../../shared/react_router_helpers';
 import { DOCS_PREFIX, ENGINE_SCHEMA_PATH } from '../../routes';

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomalies_table/anomalies_table.tsx

@@ -26,7 +26,7 @@ import {
   EuiText,
   OnTimeChangeProps,
 } from '@elastic/eui';
-import { FormattedDate, FormattedMessage } from 'react-intl';
+import { FormattedMessage, FormattedDate } from '@kbn/i18n/react';
 import { datemathToEpochMillis } from '../../../../../../../utils/datemath';
 import { SnapshotMetricType } from '../../../../../../../../common/inventory_models/types';
 import { withTheme } from '../../../../../../../../../../../src/plugins/kibana_react/common';

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/properties/table.tsx

@@ -18,7 +18,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { first } from 'lodash';
 import React, { useCallback, useMemo, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 interface Row {
   name: string;

x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.test.tsx

@@ -9,7 +9,7 @@ import useObservable from 'react-use/lib/useObservable';
 import mockAnnotations from '../annotations_table/__mocks__/mock_annotations.json';
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 
 import { Annotation } from '../../../../../common/types/annotations';
 import { AnnotationUpdatesService } from '../../../services/annotations_service';

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.test.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { render, waitFor, screen } from '@testing-library/react';
 
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 
 import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
 

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/source_selection/source_selection.test.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { render, fireEvent, waitFor, screen } from '@testing-library/react';
 
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 
 import {
   getIndexPatternAndSavedSearch,

x-pack/plugins/observability/public/components/shared/core_web_vitals/__stories__/core_vitals.stories.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { ComponentType } from 'react';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 import { Observable } from 'rxjs';
 import { CoreStart } from 'src/core/public';
 import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';

x-pack/plugins/observability/public/components/shared/field_value_suggestions/__stories__/field_value_selection.stories.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { ComponentType, useEffect, useState } from 'react';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 import { Observable } from 'rxjs';
 import { CoreStart } from 'src/core/public';
 import { text } from '@storybook/addon-knobs';

x-pack/plugins/observability/public/pages/alerts/alerts.stories.tsx

@@ -7,7 +7,7 @@
 
 import { StoryContext } from '@storybook/react';
 import React, { ComponentType } from 'react';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 import { MemoryRouter } from 'react-router-dom';
 import { AlertsPage } from '.';
 import { HttpSetup } from '../../../../../../src/core/public';

x-pack/plugins/observability/public/utils/test_helper.tsx

@@ -8,7 +8,7 @@
 import { render as testLibRender } from '@testing-library/react';
 import { AppMountParameters, CoreStart } from 'kibana/public';
 import React from 'react';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 import { of } from 'rxjs';
 import {
   KibanaContextProvider,

x-pack/plugins/reporting/public/components/screen_capture_panel_content.test.tsx

@@ -7,7 +7,7 @@
 
 import { mount } from 'enzyme';
 import React from 'react';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 import { coreMock } from '../../../../../src/core/public/mocks';
 import { BaseParams } from '../../common/types';
 import { ReportingAPIClient } from '../lib/reporting_api_client';

x-pack/plugins/security_solution/public/resolver/view/submenu.tsx

@@ -7,7 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { useMemo, useContext, useCallback } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { useDispatch } from 'react-redux';
 import { EuiI18nNumber } from '@elastic/eui';
 import { EventStats } from '../../../common/endpoint/types';

x-pack/plugins/transform/public/app/hooks/use_index_data.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { FC } from 'react';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 
 import '@testing-library/jest-dom/extend-expect';
 import { render, screen, waitFor } from '@testing-library/react';

x-pack/plugins/transform/public/app/sections/transform_management/components/action_discover/discover_action_name.test.tsx

@@ -7,7 +7,7 @@
 
 import { cloneDeep } from 'lodash';
 import React from 'react';
-import { IntlProvider } from 'react-intl';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
 
 import { render, waitFor, screen } from '@testing-library/react';
 

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/swimlane/steps/swimlane_connection.tsx

@@ -14,7 +14,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import React, { useCallback } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '@kbn/i18n/react';
 import * as i18n from '../translations';
 import { useKibana } from '../../../../../common/lib/kibana';
 import { useGetApplication } from '../use_get_application';

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_menu.tsx

@@ -9,7 +9,7 @@ import React, { useEffect, useState } from 'react';
 import { EuiFlexItem, EuiCard, EuiIcon, EuiFlexGrid, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { EuiToolTip } from '@elastic/eui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { ActionType, ActionTypeIndex, ActionTypeRegistryContract } from '../../../types';
 import { loadActionTypes } from '../../lib/action_connector_api';
 import { actionTypeCompare } from '../../lib/action_type_compare';