From 28a107d5b8334cfd8e93d4f794bf2966f5f7358c Mon Sep 17 00:00:00 2001
From: sulemanof <daniil_suleiman@epam.com>
Date: Tue, 1 Dec 2020 11:34:37 +0300
Subject: [PATCH] Remove injectI18n usage

---
 .../components/editor/controls_tab.test.tsx   | 16 +++---
 .../public/components/editor/controls_tab.tsx | 55 ++++++++++---------
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx b/src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx
index 284c4a956b75f..c05dec8fccbe1 100644
--- a/src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx
+++ b/src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx
@@ -21,13 +21,13 @@ import React from 'react';
 import { shallowWithIntl, mountWithIntl } from '@kbn/test/jest';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { getDepsMock, getIndexPatternMock } from '../../test_utils';
-import ControlsTab, { ControlsTabUiProps } from './controls_tab';
+import ControlsTab, { ControlsTabProps } from './controls_tab';
 import { Vis } from '../../../../visualizations/public';
 
 const indexPatternsMock = {
   get: getIndexPatternMock,
 };
-let props: ControlsTabUiProps;
+let props: ControlsTabProps;
 
 beforeEach(() => {
   props = ({
@@ -78,18 +78,18 @@ beforeEach(() => {
     },
     setValue: jest.fn(),
     intl: null as any,
-  } as unknown) as ControlsTabUiProps;
+  } as unknown) as ControlsTabProps;
 });
 
 test('renders ControlsTab', () => {
-  const component = shallowWithIntl(<ControlsTab.WrappedComponent {...props} />);
+  const component = shallowWithIntl(<ControlsTab {...props} />);
 
   expect(component).toMatchSnapshot();
 });
 
 describe('behavior', () => {
   test('add control button', () => {
-    const component = mountWithIntl(<ControlsTab.WrappedComponent {...props} />);
+    const component = mountWithIntl(<ControlsTab {...props} />);
 
     findTestSubject(component, 'inputControlEditorAddBtn').simulate('click');
 
@@ -102,7 +102,7 @@ describe('behavior', () => {
   });
 
   test('remove control button', () => {
-    const component = mountWithIntl(<ControlsTab.WrappedComponent {...props} />);
+    const component = mountWithIntl(<ControlsTab {...props} />);
     findTestSubject(component, 'inputControlEditorRemoveControl0').simulate('click');
     const expectedParams = [
       'controls',
@@ -125,7 +125,7 @@ describe('behavior', () => {
   });
 
   test('move down control button', () => {
-    const component = mountWithIntl(<ControlsTab.WrappedComponent {...props} />);
+    const component = mountWithIntl(<ControlsTab {...props} />);
     findTestSubject(component, 'inputControlEditorMoveDownControl0').simulate('click');
     const expectedParams = [
       'controls',
@@ -162,7 +162,7 @@ describe('behavior', () => {
   });
 
   test('move up control button', () => {
-    const component = mountWithIntl(<ControlsTab.WrappedComponent {...props} />);
+    const component = mountWithIntl(<ControlsTab {...props} />);
     findTestSubject(component, 'inputControlEditorMoveUpControl1').simulate('click');
     const expectedParams = [
       'controls',
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 58a9863949228..0e622e08c529f 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,7 +18,8 @@
  */
 
 import React, { PureComponent } from 'react';
-import { injectI18n, FormattedMessage, InjectedIntlProps } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 import {
   EuiButton,
@@ -50,12 +51,11 @@ interface ControlsTabUiState {
   type: CONTROL_TYPES;
 }
 
-export type ControlsTabUiProps = InjectedIntlProps &
-  VisOptionsProps<InputControlVisParams> & {
-    deps: InputControlVisDependencies;
-  };
+export type ControlsTabProps = VisOptionsProps<InputControlVisParams> & {
+  deps: InputControlVisDependencies;
+};
 
-class ControlsTabUi extends PureComponent<ControlsTabUiProps, ControlsTabUiState> {
+class ControlsTab extends PureComponent<ControlsTabProps, ControlsTabUiState> {
   state = {
     type: CONTROL_TYPES.LIST,
   };
@@ -157,8 +157,6 @@ class ControlsTabUi extends PureComponent<ControlsTabUiProps, ControlsTabUiState
   }
 
   render() {
-    const { intl } = this.props;
-
     return (
       <div>
         {this.renderControls()}
@@ -172,25 +170,31 @@ class ControlsTabUi extends PureComponent<ControlsTabUiProps, ControlsTabUiState
                   options={[
                     {
                       value: CONTROL_TYPES.RANGE,
-                      text: intl.formatMessage({
-                        id: 'inputControl.editor.controlsTab.select.rangeDropDownOptionLabel',
-                        defaultMessage: 'Range slider',
-                      }),
+                      text: i18n.translate(
+                        'inputControl.editor.controlsTab.select.rangeDropDownOptionLabel',
+                        {
+                          defaultMessage: 'Range slider',
+                        }
+                      ),
                     },
                     {
                       value: CONTROL_TYPES.LIST,
-                      text: intl.formatMessage({
-                        id: 'inputControl.editor.controlsTab.select.listDropDownOptionLabel',
-                        defaultMessage: 'Options list',
-                      }),
+                      text: i18n.translate(
+                        'inputControl.editor.controlsTab.select.listDropDownOptionLabel',
+                        {
+                          defaultMessage: 'Options list',
+                        }
+                      ),
                     },
                   ]}
                   value={this.state.type}
                   onChange={(event) => this.setState({ type: event.target.value as CONTROL_TYPES })}
-                  aria-label={intl.formatMessage({
-                    id: 'inputControl.editor.controlsTab.select.controlTypeAriaLabel',
-                    defaultMessage: 'Select control type',
-                  })}
+                  aria-label={i18n.translate(
+                    'inputControl.editor.controlsTab.select.controlTypeAriaLabel',
+                    {
+                      defaultMessage: 'Select control type',
+                    }
+                  )}
                 />
               </EuiFormRow>
             </EuiFlexItem>
@@ -201,10 +205,12 @@ class ControlsTabUi extends PureComponent<ControlsTabUiProps, ControlsTabUiState
                   onClick={this.handleAddControl}
                   iconType="plusInCircle"
                   data-test-subj="inputControlEditorAddBtn"
-                  aria-label={intl.formatMessage({
-                    id: 'inputControl.editor.controlsTab.select.addControlAriaLabel',
-                    defaultMessage: 'Add control',
-                  })}
+                  aria-label={i18n.translate(
+                    'inputControl.editor.controlsTab.select.addControlAriaLabel',
+                    {
+                      defaultMessage: 'Add control',
+                    }
+                  )}
                 >
                   <FormattedMessage
                     id="inputControl.editor.controlsTab.addButtonLabel"
@@ -220,7 +226,6 @@ class ControlsTabUi extends PureComponent<ControlsTabUiProps, ControlsTabUiState
   }
 }
 
-const ControlsTab = injectI18n(ControlsTabUi);
 // default export required for React.Lazy
 // eslint-disable-next-line import/no-default-export
 export { ControlsTab as default };