EUI input controls visualization (#16210) (#16404)

* update jest tests as best as possible - found some bugs that need to be addressed

* use EuiAccordion to hide/show control editor

* set control editor to be open on load

* small changes

* fix editor jest tests

* update visualization components to EUI

* fix jest tests and updated range control to EUI

* fix bug in range control input logic

* fix button layout

* fix dashboard grid resize test

* add space between panels, change button order, switch to sort icons

* remove style attribute from component, fix spelling of id

src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap

@@ -55,43 +55,71 @@ exports[`renders ControlsTab 1`] = `
     key="2"
     moveControl={[Function]}
   />
-  <div
-    className="kuiSideBarFormRow"
+  <EuiPanel
+    grow={false}
+    hasShadow={false}
+    paddingSize="m"
   >
-    <div
-      className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
+    <EuiFlexGroup
+      alignItems="stretch"
+      component="div"
+      gutterSize="l"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
     >
-      <select
-        aria-label="Select control type"
-        className="kuiSelect"
-        onChange={[Function]}
-        value="list"
+      <EuiFlexItem
+        component="div"
+        grow={true}
       >
-        <option
-          value="range"
+        <EuiFormRow
+          fullWidth={false}
+          hasEmptyLabelSpace={false}
+          id="selectControlType"
         >
-          Range slider
-        </option>
-        <option
-          value="list"
+          <EuiSelect
+            fullWidth={false}
+            isLoading={false}
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "text": "Range slider",
+                  "value": "range",
+                },
+                Object {
+                  "text": "Options list",
+                  "value": "list",
+                },
+              ]
+            }
+            value="list"
+          />
+        </EuiFormRow>
+      </EuiFlexItem>
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      >
+        <EuiFormRow
+          fullWidth={false}
+          hasEmptyLabelSpace={false}
+          id="addControl"
         >
-          Options list
-        </option>
-      </select>
-    </div>
-    <KuiButton
-      buttonType="primary"
-      data-test-subj="inputControlEditorAddBtn"
-      icon={
-        <KuiButtonIcon
-          type="create"
-        />
-      }
-      onClick={[Function]}
-      type="button"
-    >
-      Add
-    </KuiButton>
-  </div>
+          <EuiButton
+            color="primary"
+            data-test-subj="inputControlEditorAddBtn"
+            fill={true}
+            iconSide="left"
+            iconType="plusInCircle"
+            onClick={[Function]}
+            type="button"
+          >
+            Add
+          </EuiButton>
+        </EuiFormRow>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPanel>
 </div>
 `;

src/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap

@@ -14,48 +14,32 @@ exports[`renders ListControlEditor 1`] = `
     onChange={[Function]}
     value="keywordField"
   />
-  <div
-    className="kuiSideBarFormRow"
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="multiselect-0"
   >
-    <label
-      className="kuiSideBarFormRow__label"
-      htmlFor="multiselect-0"
-    >
-      Enable Multiselect
-    </label>
-    <div
-      className="kuiSideBarFormRow__control"
-    >
-      <input
-        checked={true}
-        className="kuiCheckBox"
-        id="multiselect-0"
-        onChange={[Function]}
-        type="checkbox"
-      />
-    </div>
-  </div>
-  <div
-    className="kuiSideBarFormRow"
+    <EuiSwitch
+      checked={true}
+      data-test-subj="listControlMultiselectInput"
+      label="Multiselect"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="size-0"
+    label="Size"
   >
-    <label
-      className="kuiSideBarFormRow__label"
-      htmlFor="size-0"
-    >
-      Size
-    </label>
-    <div
-      className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
-    >
-      <input
-        className="kuiTextInput"
-        id="size-0"
-        min="1"
-        onChange={[Function]}
-        type="number"
-        value={10}
-      />
-    </div>
-  </div>
+    <EuiFieldNumber
+      data-test-subj="listControlSizeInput"
+      fullWidth={false}
+      isLoading={false}
+      min={1}
+      onChange={[Function]}
+      value={10}
+    />
+  </EuiFormRow>
 </div>
 `;

src/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap

@@ -1,67 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders OptionsTab 1`] = `
-<div>
-  <div
-    className="sidebar-item"
+<EuiForm>
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="updateFiltersOnChange"
   >
-    <div
-      className="vis-editor-agg-header"
-    >
-      <KuiFieldGroup
-        isAlignedTop={false}
-      >
-        <KuiFieldGroupSection
-          isWide={false}
-        >
-          <KuiCheckBoxLabel
-            data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"
-            isChecked={false}
-            isDisabled={false}
-            onChange={[Function]}
-            text="Update Kibana filters on each change"
-          />
-        </KuiFieldGroupSection>
-      </KuiFieldGroup>
-    </div>
-    <div
-      className="vis-editor-agg-header"
-    >
-      <KuiFieldGroup
-        isAlignedTop={false}
-      >
-        <KuiFieldGroupSection
-          isWide={false}
-        >
-          <KuiCheckBoxLabel
-            data-test-subj="inputControlEditorUseTimeFilterCheckbox"
-            isChecked={false}
-            isDisabled={false}
-            onChange={[Function]}
-            text="Use time filter"
-          />
-        </KuiFieldGroupSection>
-      </KuiFieldGroup>
-    </div>
-    <div
-      className="vis-editor-agg-header"
-    >
-      <KuiFieldGroup
-        isAlignedTop={false}
-      >
-        <KuiFieldGroupSection
-          isWide={false}
-        >
-          <KuiCheckBoxLabel
-            data-test-subj="inputControlEditorPinFiltersCheckbox"
-            isChecked={false}
-            isDisabled={false}
-            onChange={[Function]}
-            text="Pin filters to global state"
-          />
-        </KuiFieldGroupSection>
-      </KuiFieldGroup>
-    </div>
-  </div>
-</div>
+    <EuiSwitch
+      checked={false}
+      data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"
+      label="Update Kibana filters on each change"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="useTimeFilter"
+  >
+    <EuiSwitch
+      checked={false}
+      data-test-subj="inputControlEditorUseTimeFilterCheckbox"
+      label="Use time filter"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="pinFilters"
+  >
+    <EuiSwitch
+      data-test-subj="inputControlEditorPinFiltersCheckbox"
+      label="Pin filters to global state"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</EuiForm>
 `;

src/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap

@@ -14,48 +14,34 @@ exports[`renders RangeControlEditor 1`] = `
     onChange={[Function]}
     value="numberField"
   />
-  <div
-    className="kuiSideBarFormRow"
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="stepSize-0"
+    label="Step Size"
   >
-    <label
-      className="kuiSideBarFormRow__label"
-      htmlFor="stepSize-0"
-    >
-      Step Size
-    </label>
-    <div
-      className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
-    >
-      <input
-        className="kuiTextInput"
-        id="stepSize-0"
-        onChange={[Function]}
-        type="number"
-        value={1}
-      />
-    </div>
-  </div>
-  <div
-    className="kuiSideBarFormRow"
+    <EuiFieldNumber
+      data-test-subj="rangeControlSizeInput0"
+      fullWidth={false}
+      isLoading={false}
+      onChange={[Function]}
+      value={1}
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="decimalPlaces-0"
+    label="Decimal Places"
   >
-    <label
-      className="kuiSideBarFormRow__label"
-      htmlFor="decimalPlaces-0"
-    >
-      Decimal Places
-    </label>
-    <div
-      className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
-    >
-      <input
-        className="kuiTextInput"
-        id="decimalPlaces-0"
-        min="0"
-        onChange={[Function]}
-        type="number"
-        value={0}
-      />
-    </div>
-  </div>
+    <EuiFieldNumber
+      data-test-subj="rangeControlDecimalPlacesInput0"
+      fullWidth={false}
+      isLoading={false}
+      min={0}
+      onChange={[Function]}
+      value={0}
+    />
+  </EuiFormRow>
 </div>
 `;