From df302f159faeb26b679bf79f6f56254e3dd3acab Mon Sep 17 00:00:00 2001 From: Stacey Gammon Date: Mon, 26 Aug 2019 17:31:26 -0400 Subject: [PATCH 1/3] remove use of injecti18n --- .../lib/containers/embeddable_child_panel.tsx | 10 ++--- .../customize_title/customize_panel_modal.tsx | 38 +++++++++---------- .../customize_title/customize_title_form.tsx | 36 +++++++++--------- .../lib/panel/panel_header/panel_header.tsx | 27 ++++--------- .../panel/panel_header/panel_options_menu.tsx | 19 +++------- 5 files changed, 53 insertions(+), 77 deletions(-) diff --git a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.tsx b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.tsx index 34d4bc83a807b..5d316d59a536b 100644 --- a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.tsx +++ b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.tsx @@ -21,7 +21,6 @@ import classNames from 'classnames'; import React from 'react'; import { EuiLoadingChart } from '@elastic/eui'; -import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; import { Subscription } from 'rxjs'; import { CoreStart } from 'src/core/public'; import { ErrorEmbeddable, IEmbeddable } from '../embeddables'; @@ -34,8 +33,7 @@ import { } from '../types'; import { Start as InspectorStartContract } from '../../../../../../../../plugins/inspector/public'; -export interface EmbeddableChildPanelUiProps { - intl: InjectedIntl; +export interface EmbeddableChildPanelProps { embeddableId: string; className?: string; container: IContainer; @@ -57,13 +55,13 @@ interface State { * for the child to be initialized, showing a loading indicator until that is complete. */ -class EmbeddableChildPanelUi extends React.Component { +export class EmbeddableChildPanel extends React.Component { [panel: string]: any; public mounted: boolean; public embeddable!: IEmbeddable | ErrorEmbeddable; private subscription?: Subscription; - constructor(props: EmbeddableChildPanelUiProps) { + constructor(props: EmbeddableChildPanelProps) { super(props); this.state = { loading: true, @@ -114,5 +112,3 @@ class EmbeddableChildPanelUi extends React.Component void; - intl: InjectedIntl; } interface State { @@ -44,7 +44,7 @@ interface State { hideTitle: boolean; } -export class CustomizePanelModalUi extends Component { +export class CustomizePanelModal extends Component { constructor(props: CustomizePanelProps) { super(props); this.state = { @@ -53,23 +53,23 @@ export class CustomizePanelModalUi extends Component }; } - updateTitle = (title: string | undefined) => { + private updateTitle = (title: string | undefined) => { // An empty string will mean "use the default value", which is represented by setting // title to undefined (where as an empty string is actually used to indicate "hide title"). this.setState({ title: title === '' ? undefined : title }); }; - reset = () => { + private reset = () => { this.setState({ title: undefined }); }; - onHideTitleToggle = () => { + private onHideTitleToggle = () => { this.setState(prevState => ({ hideTitle: !prevState.hideTitle, })); }; - save = () => { + private save = () => { if (this.state.hideTitle) { this.props.updateTitle(''); } else { @@ -88,7 +88,6 @@ export class CustomizePanelModalUi extends Component - {' '} /> placeholder={this.props.embeddable.getOutput().defaultTitle} value={this.state.title || ''} onChange={e => this.updateTitle(e.target.value)} - aria-label={this.props.intl.formatMessage({ - id: 'embeddableApi.customizePanel.modal.optionsMenuForm.panelTitleInputAriaLabel', - defaultMessage: 'Enter a custom title for your panel', - })} + aria-label={i18n.translate( + 'embeddableApi.customizePanel.modal.optionsMenuForm.panelTitleInputAriaLabel', + { + defaultMessage: 'Enter a custom title for your panel', + } + )} append={ this.props.updateTitle(this.props.embeddable.getOutput().title)} > - {' '} ); } } - -export const CustomizePanelModal = injectI18n(CustomizePanelModalUi); diff --git a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_actions/customize_title/customize_title_form.tsx b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_actions/customize_title/customize_title_form.tsx index aa7a0b9dd781f..f72219c71dd63 100644 --- a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_actions/customize_title/customize_title_form.tsx +++ b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_actions/customize_title/customize_title_form.tsx @@ -20,24 +20,20 @@ import React, { ChangeEvent } from 'react'; import { EuiButtonEmpty, EuiFieldText, EuiFormRow } from '@elastic/eui'; -import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; -export interface Props { +export interface PanelOptionsMenuFormProps { title?: string; onReset: () => void; onUpdatePanelTitle: (newPanelTitle: string) => void; } -interface PanelOptionsMenuFormUiProps extends Props { - intl: InjectedIntl; -} - -function CustomizeTitleFormUi({ +export function CustomizeTitleForm({ title, onReset, onUpdatePanelTitle, - intl, -}: PanelOptionsMenuFormUiProps) { +}: PanelOptionsMenuFormProps) { function onInputChange(event: ChangeEvent) { onUpdatePanelTitle(event.target.value); } @@ -45,10 +41,12 @@ function CustomizeTitleFormUi({ return (
@@ -73,5 +73,3 @@ function CustomizeTitleFormUi({
); } - -export const CustomizeTitleForm = injectI18n(CustomizeTitleFormUi); diff --git a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_header.tsx b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_header.tsx index 92597e3a8b0e2..05d84142e6e34 100644 --- a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_header.tsx +++ b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_header.tsx @@ -16,9 +16,8 @@ * specific language governing permissions and limitations * under the License. */ - +import { i18n } from '@kbn/i18n'; import { EuiContextMenuPanelDescriptor, EuiBadge } from '@elastic/eui'; -import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; import classNames from 'classnames'; import React from 'react'; import { PanelOptionsMenu } from './panel_options_menu'; @@ -35,10 +34,6 @@ export interface PanelHeaderProps { embeddable: IEmbeddable; } -interface PanelHeaderUiProps extends PanelHeaderProps { - intl: InjectedIntl; -} - function renderBadges(badges: Action[], embeddable: IEmbeddable) { return badges.map(badge => ( {showTitle ? `${title} ` : ''} {renderBadges(badges, embeddable)} @@ -112,5 +103,3 @@ function PanelHeaderUi({ ); } - -export const PanelHeader = injectI18n(PanelHeaderUi); diff --git a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_options_menu.tsx b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_options_menu.tsx index ea8b1ecf7aee7..2949e435e7f41 100644 --- a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_options_menu.tsx +++ b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_options_menu.tsx @@ -17,7 +17,7 @@ * under the License. */ -import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import React from 'react'; import { @@ -33,18 +33,14 @@ export interface PanelOptionsMenuProps { closeContextMenu: boolean; } -interface PanelOptionsMenuUiProps extends PanelOptionsMenuProps { - intl: InjectedIntl; -} - interface State { actionContextMenuPanel?: EuiContextMenuPanelDescriptor; isPopoverOpen: boolean; } -class PanelOptionsMenuUi extends React.Component { +export class PanelOptionsMenu extends React.Component { private mounted = false; - public static getDerivedStateFromProps(props: PanelOptionsMenuUiProps, state: State) { + public static getDerivedStateFromProps(props: PanelOptionsMenuProps, state: State) { if (props.closeContextMenu) { return { ...state, @@ -55,7 +51,7 @@ class PanelOptionsMenuUi extends React.Component } } - constructor(props: PanelOptionsMenuUiProps) { + constructor(props: PanelOptionsMenuProps) { super(props); this.state = { actionContextMenuPanel: undefined, @@ -77,14 +73,13 @@ class PanelOptionsMenuUi extends React.Component } public render() { - const { isViewMode, intl } = this.props; + const { isViewMode } = this.props; const button = ( this.setState(({ isPopoverOpen }) => ({ isPopoverOpen: !isPopoverOpen }), after); }; } - -export const PanelOptionsMenu = injectI18n(PanelOptionsMenuUi); From 46cba3484aee17b77a0b4708b24c05d5d64d1ee0 Mon Sep 17 00:00:00 2001 From: Stacey Gammon Date: Tue, 27 Aug 2019 09:05:43 -0400 Subject: [PATCH 2/3] fix jest tests and typescript errors --- .../public/np_ready/public/index.ts | 2 +- .../embeddable_child_panel.test.tsx | 13 ++--- .../tests/customize_panel_modal.test.tsx | 58 +++++-------------- 3 files changed, 21 insertions(+), 52 deletions(-) diff --git a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/index.ts b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/index.ts index d1a4f2ed3e121..4cceceb57824f 100644 --- a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/index.ts +++ b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/index.ts @@ -38,7 +38,7 @@ export { EditPanelAction, Embeddable, EmbeddableChildPanel, - EmbeddableChildPanelUiProps, + EmbeddableChildPanelProps, EmbeddableFactory, EmbeddableFactoryNotFoundError, EmbeddableInput, diff --git a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.test.tsx b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.test.tsx index 2335173c4ef34..4b0803a890781 100644 --- a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.test.tsx +++ b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.test.tsx @@ -18,7 +18,7 @@ */ import React from 'react'; -import { mountWithIntl, nextTick } from 'test_utils/enzyme_helpers'; +import { nextTick } from 'test_utils/enzyme_helpers'; import { EmbeddableChildPanel } from './embeddable_child_panel'; import { GetEmbeddableFactory } from '../types'; import { EmbeddableFactory } from '../embeddables'; @@ -32,6 +32,7 @@ import { } from '../test_samples/embeddables/contact_card/contact_card_embeddable'; // eslint-disable-next-line import { inspectorPluginMock } from '../../../../../../../../plugins/inspector/public/mocks'; +import { mount } from 'enzyme'; test('EmbeddableChildPanel renders an embeddable when it is done loading', async () => { const inspector = inspectorPluginMock.createStartContract(); @@ -58,9 +59,8 @@ test('EmbeddableChildPanel renders an embeddable when it is done loading', async expect(newEmbeddable.id).toBeDefined(); - const component = mountWithIntl( - Promise.resolve([])} @@ -97,9 +97,8 @@ test(`EmbeddableChildPanel renders an error message if the factory doesn't exist { getEmbeddableFactory } as any ); - const component = mountWithIntl( - Promise.resolve([])} diff --git a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/tests/customize_panel_modal.test.tsx b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/tests/customize_panel_modal.test.tsx index 5c766bffa20ba..3de6c2a2c1497 100644 --- a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/tests/customize_panel_modal.test.tsx +++ b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/tests/customize_panel_modal.test.tsx @@ -20,7 +20,6 @@ // @ts-ignore import { findTestSubject } from '@elastic/eui/lib/test'; import * as React from 'react'; -import { mountWithIntl } from 'test_utils/enzyme_helpers'; import { Container, isErrorEmbeddable } from '../lib'; import { ContactCardEmbeddable, @@ -36,6 +35,7 @@ import { coreMock } from '../../../../../../../core/public/mocks'; import { testPlugin } from './test_plugin'; import { EmbeddableApi } from '../api'; import { CustomizePanelModal } from '../lib/panel/panel_header/panel_actions/customize_title/customize_panel_modal'; +import { mount } from 'enzyme'; let api: EmbeddableApi; let container: Container; @@ -79,13 +79,7 @@ beforeEach(async () => { }); test('Is initialized with the embeddables title', async () => { - const component = mountWithIntl( - {}} - /> - ); + const component = mount( {}} />); const inputField = findTestSubject(component, 'customEmbeddablePanelTitleInput').find('input'); expect(inputField.props().placeholder).toBe(embeddable.getOutput().title); @@ -95,12 +89,8 @@ test('Is initialized with the embeddables title', async () => { test('Calls updateTitle with a new title', async () => { const updateTitle = jest.fn(); - const component = mountWithIntl( - + const component = mount( + ); const inputField = findTestSubject(component, 'customEmbeddablePanelTitleInput').find('input'); @@ -116,12 +106,8 @@ test('Input value shows custom title if one given', async () => { embeddable.updateInput({ title: 'new title' }); const updateTitle = jest.fn(); - const component = mountWithIntl( - + const component = mount( + ); const inputField = findTestSubject(component, 'customEmbeddablePanelTitleInput').find('input'); @@ -134,12 +120,8 @@ test('Reset updates the input with the default title when the embeddable has no const updateTitle = jest.fn(); embeddable.updateInput({ title: 'my custom title' }); - const component = mountWithIntl( - + const component = mount( + ); const inputField = findTestSubject(component, 'customEmbeddablePanelTitleInput').find('input'); @@ -152,12 +134,8 @@ test('Reset updates the input with the default title when the embeddable has no test('Reset updates the input with the default title when the embeddable has a title override', async () => { const updateTitle = jest.fn(); - const component = mountWithIntl( - + const component = mount( + ); const inputField = findTestSubject(component, 'customEmbeddablePanelTitleInput').find('input'); @@ -170,12 +148,8 @@ test('Reset updates the input with the default title when the embeddable has a t test('Reset calls updateTitle with undefined', async () => { const updateTitle = jest.fn(); - const component = mountWithIntl( - + const component = mount( + ); const inputField = findTestSubject(component, 'customEmbeddablePanelTitleInput').find('input'); @@ -190,12 +164,8 @@ test('Reset calls updateTitle with undefined', async () => { test('Can set title to an empty string', async () => { const updateTitle = jest.fn(); - const component = mountWithIntl( - + const component = mount( + ); const inputField = findTestSubject(component, 'customizePanelHideTitle'); From 465864ad0a413f5d97f86ef7c39be624bb36d322 Mon Sep 17 00:00:00 2001 From: Stacey Gammon Date: Tue, 27 Aug 2019 10:25:45 -0400 Subject: [PATCH 3/3] Fix more jest tests --- .../public/lib/embeddable/grid/dashboard_grid.test.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/embeddable/grid/dashboard_grid.test.tsx b/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/embeddable/grid/dashboard_grid.test.tsx index a824306a023ab..70eb59643ea08 100644 --- a/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/embeddable/grid/dashboard_grid.test.tsx +++ b/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/embeddable/grid/dashboard_grid.test.tsx @@ -100,7 +100,7 @@ test('renders DashboardGrid', () => { ); - const panelElements = component.find('EmbeddableChildPanelUi'); + const panelElements = component.find('EmbeddableChildPanel'); expect(panelElements.length).toBe(2); }); @@ -115,7 +115,7 @@ test('renders DashboardGrid with no visualizations', async () => { props.container.updateInput({ panels: {} }); await nextTick(); component.update(); - expect(component.find('InjectIntl(EmbeddableChildPanelUi)').length).toBe(0); + expect(component.find('EmbeddableChildPanel').length).toBe(0); }); test('DashboardGrid removes panel when removed from container', async () => { @@ -132,7 +132,7 @@ test('DashboardGrid removes panel when removed from container', async () => { props.container.updateInput({ panels: filteredPanels }); await nextTick(); component.update(); - const panelElements = component.find('InjectIntl(EmbeddableChildPanelUi)'); + const panelElements = component.find('EmbeddableChildPanel'); expect(panelElements.length).toBe(1); }); @@ -148,7 +148,7 @@ test('DashboardGrid renders expanded panel', async () => { await nextTick(); component.update(); // Both panels should still exist in the dom, so nothing needs to be re-fetched once minimized. - expect(component.find('InjectIntl(EmbeddableChildPanelUi)').length).toBe(2); + expect(component.find('EmbeddableChildPanel').length).toBe(2); expect( (component.find('DashboardGridUi').state() as { expandedPanelId?: string }).expandedPanelId @@ -157,7 +157,7 @@ test('DashboardGrid renders expanded panel', async () => { props.container.updateInput({ expandedPanelId: undefined }); await nextTick(); component.update(); - expect(component.find('InjectIntl(EmbeddableChildPanelUi)').length).toBe(2); + expect(component.find('EmbeddableChildPanel').length).toBe(2); expect( (component.find('DashboardGridUi').state() as { expandedPanelId?: string }).expandedPanelId