[Input Control] Custom renderer (elastic#84423)

* Create custom renderer

* Reduce initial bundle size

* Fix tests

* Add unit test

* Remove injectI18n usage

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

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

@@ -36,6 +36,8 @@ import { getTitle, ControlParams, CONTROL_TYPES, ControlParamsOptions } from '..
 import { IIndexPattern } from '../../../../data/public';
 import { InputControlVisDependencies } from '../../plugin';
 
+import './control_editor.scss';
+
 interface ControlEditorUiProps {
   controlIndex: number;
   controlParams: ControlParams;

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

@@ -21,16 +21,16 @@ 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 = {
+  props = ({
     deps: getDepsMock(),
     vis: ({
       API: {
@@ -78,18 +78,18 @@ beforeEach(() => {
     },
     setValue: jest.fn(),
     intl: null as any,
-  };
+  } 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',

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,
@@ -44,22 +45,17 @@ import {
 } from '../../editor_utils';
 import { getLineageMap, getParentCandidates } from '../../lineage';
 import { InputControlVisDependencies } from '../../plugin';
+import { InputControlVisParams } from '../../types';
 
 interface ControlsTabUiState {
   type: CONTROL_TYPES;
 }
 
-interface ControlsTabUiParams {
-  controls: ControlParams[];
-}
-type ControlsTabUiInjectedProps = InjectedIntlProps &
-  Pick<VisOptionsProps<ControlsTabUiParams>, 'vis' | 'stateParams' | 'setValue'> & {
-    deps: InputControlVisDependencies;
-  };
+export type ControlsTabProps = VisOptionsProps<InputControlVisParams> & {
+  deps: InputControlVisDependencies;
+};
 
-export type ControlsTabUiProps = ControlsTabUiInjectedProps;
-
-class ControlsTabUi extends PureComponent<ControlsTabUiProps, ControlsTabUiState> {
+class ControlsTab extends PureComponent<ControlsTabProps, ControlsTabUiState> {
   state = {
     type: CONTROL_TYPES.LIST,
   };
@@ -161,8 +157,6 @@ class ControlsTabUi extends PureComponent<ControlsTabUiProps, ControlsTabUiState
   }
 
   render() {
-    const { intl } = this.props;
-
     return (
       <div>
         {this.renderControls()}
@@ -176,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>
@@ -205,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"
@@ -224,8 +226,6 @@ class ControlsTabUi extends PureComponent<ControlsTabUiProps, ControlsTabUiState
   }
 }
 
-export const ControlsTab = injectI18n(ControlsTabUi);
-
-export const getControlsTab = (deps: InputControlVisDependencies) => (
-  props: Omit<ControlsTabUiProps, 'core'>
-) => <ControlsTab {...props} deps={deps} />;
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { ControlsTab as default };

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

@@ -0,0 +1,34 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { lazy } from 'react';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { InputControlVisDependencies } from '../../plugin';
+import { InputControlVisParams } from '../../types';
+
+const ControlsTab = lazy(() => import('./controls_tab'));
+const OptionsTab = lazy(() => import('./options_tab'));
+
+export const getControlsTab = (deps: InputControlVisDependencies) => (
+  props: VisOptionsProps<InputControlVisParams>
+) => <ControlsTab {...props} deps={deps} />;
+
+export const OptionsTabLazy = (props: VisOptionsProps<InputControlVisParams>) => (
+  <OptionsTab {...props} />
+);

src/plugins/input_control_vis/public/components/editor/options_tab.test.tsx

@@ -22,21 +22,21 @@ import { shallow } from 'enzyme';
 import { mountWithIntl } from '@kbn/test/jest';
 
 import { Vis } from '../../../../visualizations/public';
-import { OptionsTab, OptionsTabProps } from './options_tab';
+import OptionsTab, { OptionsTabProps } from './options_tab';
 
 describe('OptionsTab', () => {
   let props: OptionsTabProps;
 
   beforeEach(() => {
-    props = {
+    props = ({
       vis: {} as Vis,
       stateParams: {
         updateFiltersOnChange: false,
         useTimeFilter: false,
         pinFilters: false,
       },
       setValue: jest.fn(),
-    };
+    } as unknown) as OptionsTabProps;
   });
 
   it('should renders OptionsTab', () => {

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

@@ -24,20 +24,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiSwitchEvent } from '@elastic/eui';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { InputControlVisParams } from '../../types';
 
-interface OptionsTabParams {
-  updateFiltersOnChange: boolean;
-  useTimeFilter: boolean;
-  pinFilters: boolean;
-}
-type OptionsTabInjectedProps = Pick<
-  VisOptionsProps<OptionsTabParams>,
-  'vis' | 'setValue' | 'stateParams'
->;
-
-export type OptionsTabProps = OptionsTabInjectedProps;
+export type OptionsTabProps = VisOptionsProps<InputControlVisParams>;
 
-export class OptionsTab extends PureComponent<OptionsTabProps> {
+class OptionsTab extends PureComponent<OptionsTabProps> {
   handleUpdateFiltersChange = (event: EuiSwitchEvent) => {
     this.props.setValue('updateFiltersOnChange', event.target.checked);
   };
@@ -98,3 +89,6 @@ export class OptionsTab extends PureComponent<OptionsTabProps> {
     );
   }
 }
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { OptionsTab as default };