remove react-intl from kibana and keep it inside only i18n package (#78956)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -17,8 +17,10 @@
  * under the License.
  */
 
-import { InjectedIntl as _InjectedIntl } from 'react-intl';
+import { InjectedIntl as _InjectedIntl, InjectedIntlProps as _InjectedIntlProps } from 'react-intl';
+
 export type InjectedIntl = _InjectedIntl;
+export type InjectedIntlProps = _InjectedIntlProps;
 
 export {
   intlShape,
@@ -29,6 +31,8 @@ export {
   FormattedPlural,
   FormattedMessage,
   FormattedHTMLMessage,
+  // Only used for testing. Use I18nProvider otherwise.
+  IntlProvider as __IntlProvider,
 } from 'react-intl';
 
 export { I18nProvider } from './provider';

packages/kbn-ui-shared-deps/entry.js

@@ -35,7 +35,6 @@ export const MonacoBarePluginApi = require('@kbn/monaco').BarePluginApi;
 export const React = require('react');
 export const ReactDom = require('react-dom');
 export const ReactDomServer = require('react-dom/server');
-export const ReactIntl = require('react-intl');
 export const ReactRouter = require('react-router'); // eslint-disable-line
 export const ReactRouterDom = require('react-router-dom');
 export const StyledComponents = require('styled-components');

packages/kbn-ui-shared-deps/index.js

@@ -39,7 +39,6 @@ exports.externals = {
   react: '__kbnSharedDeps__.React',
   'react-dom': '__kbnSharedDeps__.ReactDom',
   'react-dom/server': '__kbnSharedDeps__.ReactDomServer',
-  'react-intl': '__kbnSharedDeps__.ReactIntl',
   'react-router': '__kbnSharedDeps__.ReactRouter',
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
   'styled-components': '__kbnSharedDeps__.StyledComponents',

packages/kbn-ui-shared-deps/package.json

@@ -26,7 +26,6 @@
     "moment-timezone": "^0.5.27",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-intl": "^2.8.0",
     "react-is": "^16.8.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/plugins/input_control_vis/public/components/editor/control_editor.tsx

@@ -18,9 +18,8 @@
  */
 
 import React, { PureComponent, ChangeEvent } from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { injectI18n, FormattedMessage, InjectedIntlProps } from '@kbn/i18n/react';
 
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiAccordion,
   EuiButtonIcon,

src/plugins/input_control_vis/public/components/editor/controls_tab.tsx

@@ -18,9 +18,8 @@
  */
 
 import React, { PureComponent } from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { injectI18n, FormattedMessage, InjectedIntlProps } from '@kbn/i18n/react';
 
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiButton,
   EuiFlexGroup,

src/plugins/input_control_vis/public/components/editor/field_select.tsx

@@ -19,9 +19,8 @@
 
 import _ from 'lodash';
 import React, { Component } from 'react';
-import { InjectedIntlProps } from 'react-intl';
 
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { injectI18n, FormattedMessage, InjectedIntlProps } from '@kbn/i18n/react';
 import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { IIndexPattern, IFieldType } from '../../../../data/public';

src/plugins/input_control_vis/public/components/editor/index_pattern_select_form_row.tsx

@@ -18,9 +18,9 @@
  */
 
 import React, { ComponentType } from 'react';
-import { injectI18n } from '@kbn/i18n/react';
+import { injectI18n, InjectedIntlProps } from '@kbn/i18n/react';
 import { EuiFormRow } from '@elastic/eui';
-import { InjectedIntlProps } from 'react-intl';
+
 import { IndexPatternSelect } from 'src/plugins/data/public';
 
 export type IndexPatternSelectFormRowUiProps = InjectedIntlProps & {

src/plugins/input_control_vis/public/components/vis/list_control.tsx

@@ -19,9 +19,8 @@
 
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
-import { injectI18n } from '@kbn/i18n/react';
-import { InjectedIntlProps } from 'react-intl';
 
+import { injectI18n, InjectedIntlProps } from '@kbn/i18n/react';
 import { EuiFieldText, EuiComboBox } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormRow } from './form_row';

src/test_utils/public/enzyme_helpers.tsx

@@ -18,13 +18,13 @@
  */
 
 /**
- * Components using the react-intl module require access to the intl context.
+ * Components using the @kbn/i18n module require access to the intl context.
  * This is not available when mounting single components in Enzyme.
  * These helper functions aim to address that and wrap a valid,
  * intl context around them.
  */
 
-import { I18nProvider, InjectedIntl, intlShape } from '@kbn/i18n/react';
+import { I18nProvider, InjectedIntl, intlShape, __IntlProvider } from '@kbn/i18n/react';
 import { mount, ReactWrapper, render, shallow } from 'enzyme';
 import React, { ReactElement, ValidationMap } from 'react';
 
@@ -33,7 +33,7 @@ const { intl } = (mount(
   <I18nProvider>
     <br />
   </I18nProvider>
-).find('IntlProvider') as ReactWrapper<{}, {}, import('react-intl').IntlProvider>)
+).find('IntlProvider') as ReactWrapper<{}, {}, __IntlProvider>)
   .instance()
   .getChildContext();
 
@@ -52,7 +52,7 @@ function getOptions(context = {}, childContextTypes: ValidationMap<any> = {}, pr
 }
 
 /**
- * When using React-Intl `injectIntl` on components, props.intl is required.
+ * When using @kbn/i18n `injectI18n` on components, props.intl is required.
  */
 function nodeWithIntlProp<T>(node: ReactElement<T>): ReactElement<T & { intl: InjectedIntl }> {
   return React.cloneElement<any>(node, { intl });

x-pack/plugins/enterprise_search/public/applications/__mocks__/mount_with_i18n.mock.tsx

@@ -9,7 +9,7 @@ import { mount } from 'enzyme';
 import { I18nProvider } from '@kbn/i18n/react';
 
 /**
- * This helper wraps a component with react-intl's <I18nProvider> which
+ * This helper wraps a component with @kbn/i18n's <I18nProvider> which
  * fixes "Could not find required `intl` object" console errors when running tests
  *
  * Example usage (should be the same as mount()):

x-pack/plugins/enterprise_search/public/applications/__mocks__/shallow_with_i18n.mock.tsx

@@ -5,15 +5,21 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-import { I18nProvider } from '@kbn/i18n/react';
-import { IntlProvider } from 'react-intl';
 
-const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
-const { intl } = intlProvider.getChildContext();
+import { shallow, mount, ReactWrapper } from 'enzyme';
+import { I18nProvider, __IntlProvider } from '@kbn/i18n/react';
+
+// Use fake component to extract `intl` property to use in tests.
+const { intl } = (mount(
+  <I18nProvider>
+    <br />
+  </I18nProvider>
+).find('IntlProvider') as ReactWrapper<{}, {}, __IntlProvider>)
+  .instance()
+  .getChildContext();
 
 /**
- * This helper shallow wraps a component with react-intl's <I18nProvider> which
+ * This helper shallow wraps a component with @kbn/i18n's <I18nProvider> which
  * fixes "Could not find required `intl` object" console errors when running tests
  *
  * Example usage (should be the same as shallow()):

x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { EuiText, EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '@kbn/i18n/react';
 import styled from 'styled-components';
 
 import * as i18n from '../translations';

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

@@ -7,7 +7,7 @@
 /* eslint-disable react/display-name */
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { LimitWarningsEuiCallOut } from './styles';
 
 const lineageLimitMessage = (

x-pack/plugins/security_solution/public/resolver/view/panels/descriptive_name.tsx

@@ -4,9 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { FormattedMessage } from 'react-intl';
-
 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   isLegacyEventSafeVersion,

x-pack/plugins/security_solution/public/resolver/view/panels/event_detail.tsx

@@ -10,10 +10,10 @@
 
 import React, { memo, useMemo, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiSpacer, EuiText, EuiDescriptionList, EuiTextColor, EuiTitle } from '@elastic/eui';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
 import { StyledPanel } from '../styles';
 import {
   BoldCode,

x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx

@@ -10,7 +10,7 @@ import React, { memo, useMemo, HTMLAttributes } from 'react';
 import { useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
 import { htmlIdGenerator, EuiSpacer, EuiTitle, EuiText, EuiTextColor, EuiLink } from '@elastic/eui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '@kbn/i18n/react';
 import styled from 'styled-components';
 import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
 import { StyledDescriptionList, StyledTitle } from './styles';

x-pack/plugins/security_solution/public/resolver/view/panels/node_events.tsx

@@ -9,7 +9,7 @@
 import React, { memo, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiBasicTableColumn, EuiButtonEmpty, EuiSpacer, EuiInMemoryTable } from '@elastic/eui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { useSelector } from 'react-redux';
 import { Breadcrumbs } from './breadcrumbs';
 import * as event from '../../../../common/endpoint/models/event';

x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.tsx

@@ -10,7 +10,7 @@ import React, { memo, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer, EuiText, EuiButtonEmpty, EuiHorizontalRule } from '@elastic/eui';
 import { useSelector } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { StyledPanel } from '../styles';
 import { BoldCode, noTimestampRetrievedText, StyledTime } from './panel_content_utilities';
 import { Breadcrumbs } from './breadcrumbs';

x-pack/test_utils/enzyme_helpers.tsx

@@ -5,13 +5,13 @@
  */
 
 /**
- * Components using the react-intl module require access to the intl context.
+ * Components using the @kbn/i18n module require access to the intl context.
  * This is not available when mounting single components in Enzyme.
  * These helper functions aim to address that and wrap a valid,
  * intl context around them.
  */
 
-import { I18nProvider, InjectedIntl, intlShape } from '@kbn/i18n/react';
+import { I18nProvider, InjectedIntl, intlShape, __IntlProvider } from '@kbn/i18n/react';
 import { mount, ReactWrapper, render, shallow } from 'enzyme';
 import React, { ReactElement, ValidationMap } from 'react';
 import { act as reactAct } from 'react-dom/test-utils';
@@ -21,7 +21,7 @@ const { intl } = (mount(
   <I18nProvider>
     <br />
   </I18nProvider>
-).find('IntlProvider') as ReactWrapper<{}, {}, import('react-intl').IntlProvider>)
+).find('IntlProvider') as ReactWrapper<{}, {}, __IntlProvider>)
   .instance()
   .getChildContext();
 
@@ -40,7 +40,7 @@ function getOptions(context = {}, childContextTypes = {}, props = {}) {
 }
 
 /**
- * When using React-Intl `injectIntl` on components, props.intl is required.
+ * When using @kbn/i18n `injectI18n` on components, props.intl is required.
  */
 function nodeWithIntlProp<T>(node: ReactElement<T>): ReactElement<T & { intl: InjectedIntl }> {
   return React.cloneElement<any>(node, { intl });