[Legacy controls] scss to emotion migration (#216400)

## Summary

Part of https://github.com/elastic/kibana/issues/207852

src/platform/plugins/private/input_control_vis/public/components/editor/control_editor.scss

@@ -1,4 +0,0 @@
-.icvControlEditor__panel {
-  z-index: 1;
-  margin-bottom: $euiSize;
-}

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

@@ -9,6 +9,7 @@
 
 import React, { PureComponent, ChangeEvent } from 'react';
 import { injectI18n, FormattedMessage, WrappedComponentProps } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
 
 import {
   EuiAccordion,
@@ -18,6 +19,7 @@ import {
   EuiFormRow,
   EuiPanel,
   EuiSpacer,
+  UseEuiTheme,
 } from '@elastic/eui';
 
 import { DataView } from '@kbn/data-views-plugin/public';
@@ -26,8 +28,6 @@ import { ListControlEditor } from './list_control_editor';
 import { getTitle, ControlParams, CONTROL_TYPES, ControlParamsOptions } from '../../editor_utils';
 import { InputControlVisDependencies } from '../../plugin';
 
-import './control_editor.scss';
-
 interface ControlEditorUiProps {
   controlIndex: number;
   controlParams: ControlParams;
@@ -169,7 +169,15 @@ class ControlEditorUi extends PureComponent<ControlEditorUiProps & WrappedCompon
 
   render() {
     return (
-      <EuiPanel grow={false} className="icvControlEditor__panel">
+      <EuiPanel
+        grow={false}
+        css={({ euiTheme }: UseEuiTheme) =>
+          css({
+            zIndex: 1,
+            marginBottom: euiTheme.size.base,
+          })
+        }
+      >
         <EuiAccordion
           id="controlEditorAccordion"
           buttonContent={getTitle(this.props.controlParams, this.props.controlIndex)}

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

@@ -13,12 +13,17 @@ import { findTestSubject } from '@elastic/eui/lib/test';
 import { getDepsMock, getIndexPatternMock } from '../../test_utils';
 import ControlsTab, { ControlsTabProps } from './controls_tab';
 import { Vis } from '@kbn/visualizations-plugin/public';
+import { EuiThemeProvider } from '@elastic/eui';
 
 const indexPatternsMock = {
   get: getIndexPatternMock,
 };
 let props: ControlsTabProps;
 
+const mountWithThemeProvider = (component: React.ReactElement) => {
+  return mountWithIntl(<EuiThemeProvider>{component}</EuiThemeProvider>);
+};
+
 beforeEach(() => {
   props = {
     deps: getDepsMock(),
@@ -77,7 +82,7 @@ test('renders ControlsTab', () => {
 
 describe('behavior', () => {
   test('add control button', () => {
-    const component = mountWithIntl(<ControlsTab {...props} />);
+    const component = mountWithThemeProvider(<ControlsTab {...props} />);
 
     findTestSubject(component, 'inputControlEditorAddBtn').simulate('click');
 
@@ -90,7 +95,7 @@ describe('behavior', () => {
   });
 
   test('remove control button', () => {
-    const component = mountWithIntl(<ControlsTab {...props} />);
+    const component = mountWithThemeProvider(<ControlsTab {...props} />);
     findTestSubject(component, 'inputControlEditorRemoveControl0').simulate('click');
     const expectedParams = [
       'controls',
@@ -113,7 +118,7 @@ describe('behavior', () => {
   });
 
   test('move down control button', () => {
-    const component = mountWithIntl(<ControlsTab {...props} />);
+    const component = mountWithThemeProvider(<ControlsTab {...props} />);
     findTestSubject(component, 'inputControlEditorMoveDownControl0').simulate('click');
     const expectedParams = [
       'controls',
@@ -150,7 +155,7 @@ describe('behavior', () => {
   });
 
   test('move up control button', () => {
-    const component = mountWithIntl(<ControlsTab {...props} />);
+    const component = mountWithThemeProvider(<ControlsTab {...props} />);
     findTestSubject(component, 'inputControlEditorMoveUpControl1').simulate('click');
     const expectedParams = [
       'controls',

src/platform/plugins/private/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
 <div
-  className="icvContainer__wrapper"
+  className="eui-scrollBar"
 >
   <div
-    className="icvContainer"
+    css={[Function]}
   >
     <EuiFlexGroup
       wrap={true}
@@ -90,10 +90,10 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
 
 exports[`Clear btns enabled when there are values 1`] = `
 <div
-  className="icvContainer__wrapper"
+  className="eui-scrollBar"
 >
   <div
-    className="icvContainer"
+    css={[Function]}
   >
     <EuiFlexGroup
       wrap={true}
@@ -178,10 +178,10 @@ exports[`Clear btns enabled when there are values 1`] = `
 
 exports[`Renders list control 1`] = `
 <div
-  className="icvContainer__wrapper"
+  className="eui-scrollBar"
 >
   <div
-    className="icvContainer"
+    css={[Function]}
   >
     <EuiFlexGroup
       wrap={true}
@@ -266,10 +266,10 @@ exports[`Renders list control 1`] = `
 
 exports[`Renders range control 1`] = `
 <div
-  className="icvContainer__wrapper"
+  className="eui-scrollBar"
 >
   <div
-    className="icvContainer"
+    css={[Function]}
   >
     <EuiFlexGroup
       wrap={true}

src/platform/plugins/private/input_control_vis/public/components/vis/input_control_vis.scss

@@ -1,13 +0,0 @@
-.icvContainer__wrapper {
-  min-height: 0;
-  flex: 1 1 0;
-  display: flex;
-  overflow: auto;
-  @include euiScrollBar;
-}
-
-.icvContainer {
-  width: 100%;
-  margin: 0 $euiSizeXS;
-  padding: $euiSizeS;
-}

src/platform/plugins/private/input_control_vis/public/components/vis/input_control_vis.tsx

@@ -8,7 +8,8 @@
  */
 
 import React, { Component } from 'react';
-import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, UseEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { CONTROL_TYPES } from '../../editor_utils';
 import { ListControl } from '../../control/list_control_factory';
@@ -16,8 +17,6 @@ import { RangeControl } from '../../control/range_control_factory';
 import { ListControl as ListControlComponent } from './list_control';
 import { RangeControl as RangeControlComponent } from './range_control';
 
-import './input_control_vis.scss';
-
 function isListControl(control: RangeControl | ListControl): control is ListControl {
   return control.type === CONTROL_TYPES.LIST;
 }
@@ -159,8 +158,16 @@ export class InputControlVis extends Component<InputControlVisProps> {
     }
 
     return (
-      <div className="icvContainer__wrapper">
-        <div className="icvContainer">
+      <div
+        className="eui-scrollBar"
+        css={css({
+          minHeight: 0,
+          flex: '1 1 0',
+          display: 'flex',
+          overflow: 'auto',
+        })}
+      >
+        <div css={icvContainerStyles}>
           <EuiFlexGroup wrap>{this.renderControls()}</EuiFlexGroup>
           {stagingButtons}
         </div>
@@ -168,3 +175,8 @@ export class InputControlVis extends Component<InputControlVisProps> {
     );
   }
 }
+const icvContainerStyles = ({ euiTheme }: UseEuiTheme) => css`
+  width: 100%;
+  margin: 0 ${euiTheme.size.xs};
+  padding: ${euiTheme.size.s};
+`;

src/platform/plugins/private/input_control_vis/tsconfig.json

@@ -7,6 +7,7 @@
     "public/**/*",
     "server/**/*",
     "*.ts",
+    "../../../../../typings/**/*",
   ],
   "kbn_references": [
     "@kbn/kibana-react-plugin",