Remove use of injecti18n in Embeddables plugin (#44043) (#44561)

* remove use of injecti18n * fix jest tests and typescript errors * Fix more jest tests
elastic · Sep 2, 2019 · bddb3ae · bddb3ae
1 parent 47f17c7
commit bddb3ae
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 134 deletions.
diff --git a/...d_embeddable_container/public/np_ready/public/lib/embeddable/grid/dashboard_grid.test.tsx b/...d_embeddable_container/public/np_ready/public/lib/embeddable/grid/dashboard_grid.test.tsx
@@ -100,7 +100,7 @@ test('renders DashboardGrid', () => {
     </KibanaContextProvider>
   );
 
-  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

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
@@ -38,7 +38,7 @@ export {
   EditPanelAction,
   Embeddable,
   EmbeddableChildPanel,
-  EmbeddableChildPanelUiProps,
+  EmbeddableChildPanelProps,
   EmbeddableFactory,
   EmbeddableFactoryNotFoundError,
   EmbeddableInput,

diff --git a/...gins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.test.tsx b/...gins/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(
-    <EmbeddableChildPanel.WrappedComponent
-      intl={null as any}
+  const component = mount(
+    <EmbeddableChildPanel
       container={container}
       embeddableId={newEmbeddable.id}
       getActions={() => Promise.resolve([])}
@@ -97,9 +97,8 @@ test(`EmbeddableChildPanel renders an error message if the factory doesn't exist
     { getEmbeddableFactory } as any
   );
 
-  const component = mountWithIntl(
-    <EmbeddableChildPanel.WrappedComponent
-      intl={null as any}
+  const component = mount(
+    <EmbeddableChildPanel
       container={container}
       embeddableId={'1'}
       getActions={() => Promise.resolve([])}

diff --git a/...e_plugins/embeddable_api/public/np_ready/public/lib/containers/embeddable_child_panel.tsx b/...e_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<EmbeddableChildPanelUiProps, State> {
+export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelProps, State> {
   [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<EmbeddableChildPanelUiProps
     );
   }
 }
-
-export const EmbeddableChildPanel = injectI18n(EmbeddableChildPanelUi);
diff --git a/...ady/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_modal.tsx b/...ady/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_modal.tsx
@@ -30,21 +30,21 @@ import {
   EuiModalBody,
   EuiModalHeaderTitle,
 } from '@elastic/eui';
-import { injectI18n, FormattedMessage, InjectedIntl } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import { IEmbeddable } from '../../../../';
 
 interface CustomizePanelProps {
   embeddable: IEmbeddable;
   updateTitle: (newTitle: string | undefined) => void;
-  intl: InjectedIntl;
 }
 
 interface State {
   title: string | undefined;
   hideTitle: boolean;
 }
 
-export class CustomizePanelModalUi extends Component<CustomizePanelProps, State> {
+export class CustomizePanelModal extends Component<CustomizePanelProps, State> {
   constructor(props: CustomizePanelProps) {
     super(props);
     this.state = {
@@ -53,23 +53,23 @@ export class CustomizePanelModalUi extends Component<CustomizePanelProps, State>
     };
   }
 
-  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<CustomizePanelProps, State>
         </EuiModalHeader>
 
         <EuiModalBody>
-          {' '}
           <EuiFormRow>
             <EuiSwitch
               checked={!this.state.hideTitle}
@@ -104,10 +103,12 @@ export class CustomizePanelModalUi extends Component<CustomizePanelProps, State>
             />
           </EuiFormRow>
           <EuiFormRow
-            label={this.props.intl.formatMessage({
-              id: 'embeddableApi.customizePanel.modal.optionsMenuForm.panelTitleFormRowLabel',
-              defaultMessage: 'Panel title',
-            })}
+            label={i18n.translate(
+              'embeddableApi.customizePanel.modal.optionsMenuForm.panelTitleFormRowLabel',
+              {
+                defaultMessage: 'Panel title',
+              }
+            )}
           >
             <EuiFieldText
               id="panelTitleInput"
@@ -118,10 +119,12 @@ export class CustomizePanelModalUi extends Component<CustomizePanelProps, State>
               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={
                 <EuiButtonEmpty
                   data-test-subj="resetCustomEmbeddablePanelTitle"
@@ -141,7 +144,6 @@ export class CustomizePanelModalUi extends Component<CustomizePanelProps, State>
           <EuiButtonEmpty
             onClick={() => this.props.updateTitle(this.props.embeddable.getOutput().title)}
           >
-            {' '}
             <FormattedMessage
               id="embeddableApi.customizePanel.modal.cancel"
               defaultMessage="Cancel"
@@ -159,5 +161,3 @@ export class CustomizePanelModalUi extends Component<CustomizePanelProps, State>
     );
   }
 }
-
-export const CustomizePanelModal = injectI18n(CustomizePanelModalUi);
diff --git a/...eady/public/lib/panel/panel_header/panel_actions/customize_title/customize_title_form.tsx b/...eady/public/lib/panel/panel_header/panel_actions/customize_title/customize_title_form.tsx
@@ -20,35 +20,33 @@
 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<HTMLInputElement>) {
     onUpdatePanelTitle(event.target.value);
   }
 
   return (
     <div className="embPanel__optionsMenuForm" data-test-subj="dashboardPanelTitleInputMenuItem">
       <EuiFormRow
-        label={intl.formatMessage({
-          id: 'embeddableApi.customizeTitle.optionsMenuForm.panelTitleFormRowLabel',
-          defaultMessage: 'Panel title',
-        })}
+        label={i18n.translate(
+          'embeddableApi.customizeTitle.optionsMenuForm.panelTitleFormRowLabel',
+          {
+            defaultMessage: 'Panel title',
+          }
+        )}
       >
         <EuiFieldText
           id="panelTitleInput"
@@ -57,10 +55,12 @@ function CustomizeTitleFormUi({
           type="text"
           value={title}
           onChange={onInputChange}
-          aria-label={intl.formatMessage({
-            id: 'embeddableApi.customizeTitle.optionsMenuForm.panelTitleInputAriaLabel',
-            defaultMessage: 'Changes to this input are applied immediately. Press enter to exit.',
-          })}
+          aria-label={i18n.translate(
+            'embeddableApi.customizeTitle.optionsMenuForm.panelTitleInputAriaLabel',
+            {
+              defaultMessage: 'Changes to this input are applied immediately. Press enter to exit.',
+            }
+          )}
         />
       </EuiFormRow>
 
@@ -73,5 +73,3 @@ function CustomizeTitleFormUi({
     </div>
   );
 }
-
-export const CustomizeTitleForm = injectI18n(CustomizeTitleFormUi);
diff --git a/...ore_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_header.tsx b/...ore_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 => (
     <EuiBadge
@@ -52,16 +47,15 @@ function renderBadges(badges: Action[], embeddable: IEmbeddable) {
   ));
 }
 
-function PanelHeaderUi({
+export function PanelHeader({
   title,
   isViewMode,
   hidePanelTitles,
   getActionContextMenuPanel,
-  intl,
   closeContextMenu,
   badges,
   embeddable,
-}: PanelHeaderUiProps) {
+}: PanelHeaderProps) {
   const classes = classNames('embPanel__header', {
     'embPanel__header--floater': !title || hidePanelTitles,
   });
@@ -90,15 +84,12 @@ function PanelHeaderUi({
         data-test-subj="dashboardPanelTitle"
         className="embPanel__title embPanel__dragger"
         title={title}
-        aria-label={intl.formatMessage(
-          {
-            id: 'embeddableApi.panel.dashboardPanelAriaLabel',
-            defaultMessage: 'Dashboard panel: {title}',
-          },
-          {
+        aria-label={i18n.translate('embeddableApi.panel.dashboardPanelAriaLabel', {
+          defaultMessage: 'Dashboard panel: {title}',
+          values: {
             title,
-          }
-        )}
+          },
+        })}
       >
         {showTitle ? `${title} ` : ''}
         {renderBadges(badges, embeddable)}
@@ -112,5 +103,3 @@ function PanelHeaderUi({
     </div>
   );
 }
-
-export const PanelHeader = injectI18n(PanelHeaderUi);