diff --git a/packages/kbn-i18n/src/react/index.tsx b/packages/kbn-i18n/src/react/index.tsx index ff30934aad6d1..b438c44598b75 100644 --- a/packages/kbn-i18n/src/react/index.tsx +++ b/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'; diff --git a/packages/kbn-ui-shared-deps/entry.js b/packages/kbn-ui-shared-deps/entry.js index 69344174a2dc6..966fb65406ac6 100644 --- a/packages/kbn-ui-shared-deps/entry.js +++ b/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'); diff --git a/packages/kbn-ui-shared-deps/index.js b/packages/kbn-ui-shared-deps/index.js index a5d6954fd5cc0..a403ae63a8f70 100644 --- a/packages/kbn-ui-shared-deps/index.js +++ b/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', diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json index 278e8efd2d29e..83a65fd0c4bdf 100644 --- a/packages/kbn-ui-shared-deps/package.json +++ b/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", diff --git a/src/plugins/input_control_vis/public/components/editor/control_editor.tsx b/src/plugins/input_control_vis/public/components/editor/control_editor.tsx index 90e875fd43432..aa473095aaf3f 100644 --- a/src/plugins/input_control_vis/public/components/editor/control_editor.tsx +++ b/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, diff --git a/src/plugins/input_control_vis/public/components/editor/controls_tab.tsx b/src/plugins/input_control_vis/public/components/editor/controls_tab.tsx index 19046f7f62fba..a9f04a86f8d03 100644 --- a/src/plugins/input_control_vis/public/components/editor/controls_tab.tsx +++ b/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, diff --git a/src/plugins/input_control_vis/public/components/editor/field_select.tsx b/src/plugins/input_control_vis/public/components/editor/field_select.tsx index 2885cbf24553f..24ebfc46ae25f 100644 --- a/src/plugins/input_control_vis/public/components/editor/field_select.tsx +++ b/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'; diff --git a/src/plugins/input_control_vis/public/components/editor/index_pattern_select_form_row.tsx b/src/plugins/input_control_vis/public/components/editor/index_pattern_select_form_row.tsx index 66fdbca64f053..c2e726e913375 100644 --- a/src/plugins/input_control_vis/public/components/editor/index_pattern_select_form_row.tsx +++ b/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 & { diff --git a/src/plugins/input_control_vis/public/components/vis/list_control.tsx b/src/plugins/input_control_vis/public/components/vis/list_control.tsx index 8ca93a302be89..e34989427be21 100644 --- a/src/plugins/input_control_vis/public/components/vis/list_control.tsx +++ b/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'; diff --git a/src/test_utils/public/enzyme_helpers.tsx b/src/test_utils/public/enzyme_helpers.tsx index a7bed2ad84956..ce4e7c7298734 100644 --- a/src/test_utils/public/enzyme_helpers.tsx +++ b/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(
-).find('IntlProvider') as ReactWrapper<{}, {}, import('react-intl').IntlProvider>) +).find('IntlProvider') as ReactWrapper<{}, {}, __IntlProvider>) .instance() .getChildContext(); @@ -52,7 +52,7 @@ function getOptions(context = {}, childContextTypes: ValidationMap = {}, 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(node: ReactElement): ReactElement { return React.cloneElement(node, { intl }); diff --git a/x-pack/plugins/enterprise_search/public/applications/__mocks__/mount_with_i18n.mock.tsx b/x-pack/plugins/enterprise_search/public/applications/__mocks__/mount_with_i18n.mock.tsx index 55abe1030544f..5796f3db2f8c4 100644 --- a/x-pack/plugins/enterprise_search/public/applications/__mocks__/mount_with_i18n.mock.tsx +++ b/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 which + * This helper wraps a component with @kbn/i18n's which * fixes "Could not find required `intl` object" console errors when running tests * * Example usage (should be the same as mount()): diff --git a/x-pack/plugins/enterprise_search/public/applications/__mocks__/shallow_with_i18n.mock.tsx b/x-pack/plugins/enterprise_search/public/applications/__mocks__/shallow_with_i18n.mock.tsx index ae7d0b09f9872..94af8337ab356 100644 --- a/x-pack/plugins/enterprise_search/public/applications/__mocks__/shallow_with_i18n.mock.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/__mocks__/shallow_with_i18n.mock.tsx @@ -4,16 +4,21 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { ReactWrapper } from 'react'; import { shallow } from 'enzyme'; -import { I18nProvider } from '@kbn/i18n/react'; -import { IntlProvider } from 'react-intl'; +import { I18nProvider, __IntlProvider } from '@kbn/i18n/react'; -const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {}); -const { intl } = intlProvider.getChildContext(); +// Use fake component to extract `intl` property to use in tests. +const { intl } = (mount( + +
+ +).find('IntlProvider') as ReactWrapper<{}, {}, __IntlProvider>) + .instance() + .getChildContext(); /** - * This helper shallow wraps a component with react-intl's which + * This helper shallow wraps a component with @kbn/i18n's which * fixes "Could not find required `intl` object" console errors when running tests * * Example usage (should be the same as shallow()): diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.tsx index 206983f3d82d9..08c83cf682567 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.tsx +++ b/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'; diff --git a/x-pack/plugins/security_solution/public/resolver/view/limit_warnings.tsx b/x-pack/plugins/security_solution/public/resolver/view/limit_warnings.tsx index 1686fc9de2d7a..e9c666824be63 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/limit_warnings.tsx +++ b/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 = ( diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/descriptive_name.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/descriptive_name.tsx index 195ebceee0610..c15b9e01baf44 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/descriptive_name.tsx +++ b/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, diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/event_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/event_detail.tsx index 27ab343a882a6..8ef99581a0d98 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/event_detail.tsx +++ b/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, diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx index 181c9ac8ab8a0..18a5d11538718 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx +++ b/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'; diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/node_events.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/node_events.tsx index 34728d793bf90..d0601fad43f57 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/node_events.tsx +++ b/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'; diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.tsx index 0265770fbb4a5..802c801f64e33 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.tsx +++ b/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'; diff --git a/x-pack/test_utils/enzyme_helpers.tsx b/x-pack/test_utils/enzyme_helpers.tsx index 9b0b8ec386549..6e2c0144a9f0e 100644 --- a/x-pack/test_utils/enzyme_helpers.tsx +++ b/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(
-).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(node: ReactElement): ReactElement { return React.cloneElement(node, { intl });