From 22e1c7c05eb561db0a300001a72ec84e15b3becd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 12 May 2020 13:18:35 +0100
Subject: [PATCH] fix(ui): drop unused MultiSelect component

---
 ui/src/Components/MultiSelect/index.js        |  22 --
 .../SilenceModal/AlertManagerInput/index.js   |   2 +-
 .../SilenceMatch/LabelNameInput.js            |   2 +-
 .../SilenceMatch/LabelValueInput.js           |   2 +-
 .../ReactSelect.test.js}                      |  48 +----
 .../__snapshots__/ReactSelect.test.js.snap}   | 190 ++++--------------
 .../__snapshots__/index.test.js.snap}         |   0
 .../index.js}                                 |   0
 .../index.test.js}                            |   2 +-
 9 files changed, 57 insertions(+), 211 deletions(-)
 delete mode 100644 ui/src/Components/MultiSelect/index.js
 rename ui/src/Components/{MultiSelect/index.test.js => Theme/ReactSelect.test.js} (55%)
 rename ui/src/Components/{MultiSelect/__snapshots__/index.test.js.snap => Theme/__snapshots__/ReactSelect.test.js.snap} (56%)
 rename ui/src/Components/{MultiSelect/__snapshots__/ValidationError.test.js.snap => ValidationError/__snapshots__/index.test.js.snap} (100%)
 rename ui/src/Components/{MultiSelect/ValidationError.js => ValidationError/index.js} (100%)
 rename ui/src/Components/{MultiSelect/ValidationError.test.js => ValidationError/index.test.js} (84%)

diff --git a/ui/src/Components/MultiSelect/index.js b/ui/src/Components/MultiSelect/index.js
deleted file mode 100644
index 9e9bf2e94..000000000
--- a/ui/src/Components/MultiSelect/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-
-import Creatable from "react-select/creatable";
-
-import { ThemeContext } from "Components/Theme";
-
-class MultiSelect extends Creatable {
-  renderProps = () => ({});
-
-  render() {
-    return (
-      <Creatable
-        styles={this.context.reactSelectStyles}
-        classNamePrefix="react-select"
-        {...this.renderProps()}
-      />
-    );
-  }
-}
-MultiSelect.contextType = ThemeContext;
-
-export { MultiSelect };
diff --git a/ui/src/Components/SilenceModal/AlertManagerInput/index.js b/ui/src/Components/SilenceModal/AlertManagerInput/index.js
index 8a5bf751b..65d56e9ed 100644
--- a/ui/src/Components/SilenceModal/AlertManagerInput/index.js
+++ b/ui/src/Components/SilenceModal/AlertManagerInput/index.js
@@ -12,7 +12,7 @@ import {
   AlertmanagerClustersToOption,
 } from "Stores/SilenceFormStore";
 import { ThemeContext } from "Components/Theme";
-import { ValidationError } from "Components/MultiSelect/ValidationError";
+import { ValidationError } from "Components/ValidationError";
 
 const AlertManagerInput = ({ alertStore, silenceFormStore }) => {
   useEffect(() => {
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.js b/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.js
index 83edbb7ae..d99b390f5 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.js
+++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.js
@@ -6,7 +6,7 @@ import Creatable from "react-select/creatable";
 import { SilenceFormMatcher } from "Models/SilenceForm";
 import { FormatBackendURI } from "Stores/AlertStore";
 import { useFetchGet } from "Hooks/useFetchGet";
-import { ValidationError } from "Components/MultiSelect/ValidationError";
+import { ValidationError } from "Components/ValidationError";
 import { ThemeContext } from "Components/Theme";
 
 const LabelNameInput = ({ matcher, isValid }) => {
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js
index f1a1d9f2f..43cfb0c06 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js
+++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js
@@ -13,7 +13,7 @@ import { FormatBackendURI } from "Stores/AlertStore";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { SilenceFormMatcher } from "Models/SilenceForm";
 import { useFetchGet } from "Hooks/useFetchGet";
-import { ValidationError } from "Components/MultiSelect/ValidationError";
+import { ValidationError } from "Components/ValidationError";
 import { ThemeContext } from "Components/Theme";
 import { MatchCounter } from "./MatchCounter";
 
diff --git a/ui/src/Components/MultiSelect/index.test.js b/ui/src/Components/Theme/ReactSelect.test.js
similarity index 55%
rename from ui/src/Components/MultiSelect/index.test.js
rename to ui/src/Components/Theme/ReactSelect.test.js
index b82eaf769..e3dc01f3d 100644
--- a/ui/src/Components/MultiSelect/index.test.js
+++ b/ui/src/Components/Theme/ReactSelect.test.js
@@ -4,65 +4,35 @@ import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";
 
-import { ThemeContext } from "Components/Theme";
+import Select from "react-select";
+
 import {
   ReactSelectColors,
   ReactSelectStyles,
 } from "Components/Theme/ReactSelect";
-import { MultiSelect } from ".";
 
 const Option = (value) => ({ label: value, value: value });
 
-const Wrapped = (component) => (
-  <ThemeContext.Provider
-    value={{
-      reactSelectStyles: ReactSelectStyles(ReactSelectColors.Light),
-    }}
-  >
-    {component}
-  </ThemeContext.Provider>
+const ThemedSelect = (props) => (
+  <Select styles={ReactSelectStyles(ReactSelectColors.Light)} {...props} />
 );
 
-describe("<MultiSelect />", () => {
-  it("matches snapshot without any extra props", () => {
-    const tree = mount(Wrapped(<MultiSelect />));
-    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
-  });
-});
-
-class CustomMultiSelect extends MultiSelect {
-  constructor(props) {
-    super(props);
-    this.extraProps = props;
-  }
-
-  renderProps = () => this.extraProps;
-}
-
-const WrappedCustomMultiSelect = (props) =>
-  Wrapped(<CustomMultiSelect {...props} />);
-
 describe("<WrappedCustomMultiSelect />", () => {
-  it("matches snapshot with defaults", () => {
-    const tree = mount(<WrappedCustomMultiSelect />);
-    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
-  });
-
   it("matches snapshot with isMulti=true", () => {
-    const tree = mount(<WrappedCustomMultiSelect isMulti />);
+    const tree = mount(<ThemedSelect isMulti />);
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("matches snapshot when focused", () => {
     // this test is to cover styles state.isFocused conditions
-    const tree = mount(<WrappedCustomMultiSelect autoFocus />);
+    const tree = mount(<ThemedSelect autoFocus />);
     tree.find("input").simulate("focus");
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("matches snapshot with a value", () => {
     const tree = mount(
-      <WrappedCustomMultiSelect
+      <ThemedSelect
         defaultValue={Option("foo")}
         options={[Option("foo"), Option("bar")]}
       />
@@ -72,7 +42,7 @@ describe("<WrappedCustomMultiSelect />", () => {
 
   it("matches snapshot with isMulti=true and a value", () => {
     const tree = mount(
-      <WrappedCustomMultiSelect
+      <ThemedSelect
         isMulti
         defaultValue={Option("foo")}
         options={[Option("foo"), Option("bar")]}
@@ -83,7 +53,7 @@ describe("<WrappedCustomMultiSelect />", () => {
 
   it("matches snapshot with isDisabled=true", () => {
     const tree = mount(
-      <WrappedCustomMultiSelect
+      <ThemedSelect
         isDisabled
         defaultValue={Option("foo")}
         options={[Option("foo"), Option("bar")]}
diff --git a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap b/ui/src/Components/Theme/__snapshots__/ReactSelect.test.js.snap
similarity index 56%
rename from ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
rename to ui/src/Components/Theme/__snapshots__/ReactSelect.test.js.snap
index 99ab5ad1e..0bd40cdd1 100644
--- a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Theme/__snapshots__/ReactSelect.test.js.snap
@@ -1,56 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<MultiSelect /> matches snapshot without any extra props 1`] = `
-"
-<div class=\\" css-2b097c-container\\">
-  <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container css-1ne8613-ValueContainer\\">
-      <div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
-        Select...
-      </div>
-      <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
-             style=\\"display: inline-block;\\"
-        >
-          <input autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-2-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
-          >
-          <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
-      </span>
-      <div aria-hidden=\\"true\\"
-           class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-      >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-6q0nyr-Svg\\"
-        >
-          <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
-          </path>
-        </svg>
-      </div>
-    </div>
-  </div>
-</div>
-"
-`;
-
 exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
@@ -64,19 +13,19 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
       &nbsp;  0 results available. Select is focused ,type to refine list, press Down to open the menu,
     </p>
   </span>
-  <div class=\\"react-select__control react-select__control--is-focused css-11rrdhm-control\\">
-    <div class=\\"react-select__value-container css-1ne8613-ValueContainer\\">
-      <div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
+  <div class=\\" css-11rrdhm-control\\">
+    <div class=\\" css-1ne8613-ValueContainer\\">
+      <div class=\\" css-1wa3eu0-placeholder\\">
         Select...
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
+        <div class
              style=\\"display: inline-block;\\"
         >
           <input autocapitalize=\\"none\\"
                  autocomplete=\\"off\\"
                  autocorrect=\\"off\\"
-                 id=\\"react-select-5-input\\"
+                 id=\\"react-select-3-input\\"
                  spellcheck=\\"false\\"
                  tabindex=\\"0\\"
                  type=\\"text\\"
@@ -89,11 +38,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+    <div class=\\" css-vcwr3k-IndicatorsContainer\\">
+      <span class=\\" css-1okebmr-indicatorSeparator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"react-select__indicator react-select__dropdown-indicator css-1ij327q-indicatorContainer\\"
+           class=\\" css-1ij327q-indicatorContainer\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -115,19 +64,19 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
 exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
-      <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
+  <div class=\\" css-r5n82u-control\\">
+    <div class=\\" css-1ne8613-ValueContainer\\">
+      <div class=\\" css-1wh03ml-singleValue\\">
         foo
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
+        <div class
              style=\\"display: inline-block;\\"
         >
           <input autocapitalize=\\"none\\"
                  autocomplete=\\"off\\"
                  autocorrect=\\"off\\"
-                 id=\\"react-select-6-input\\"
+                 id=\\"react-select-4-input\\"
                  spellcheck=\\"false\\"
                  tabindex=\\"0\\"
                  type=\\"text\\"
@@ -140,62 +89,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+    <div class=\\" css-vcwr3k-IndicatorsContainer\\">
+      <span class=\\" css-1okebmr-indicatorSeparator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-      >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-6q0nyr-Svg\\"
-        >
-          <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
-          </path>
-        </svg>
-      </div>
-    </div>
-  </div>
-</div>
-"
-`;
-
-exports[`<WrappedCustomMultiSelect /> matches snapshot with defaults 1`] = `
-"
-<div class=\\" css-2b097c-container\\">
-  <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container css-1ne8613-ValueContainer\\">
-      <div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
-        Select...
-      </div>
-      <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
-             style=\\"display: inline-block;\\"
-        >
-          <input autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-3-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
-          >
-          <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
-      </span>
-      <div aria-hidden=\\"true\\"
-           class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+           class=\\" css-tlfecz-indicatorContainer\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -216,21 +114,21 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with defaults 1`] = `
 
 exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
 "
-<div class=\\"react-select--is-disabled css-14jk2my-container\\">
-  <div class=\\"react-select__control react-select__control--is-disabled css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--has-value css-8r64vq-ValueContainer\\">
-      <div class=\\"react-select__single-value react-select__single-value--is-disabled css-1wh03ml-singleValue\\">
+<div class=\\" css-14jk2my-container\\">
+  <div class=\\" css-r5n82u-control\\">
+    <div class=\\" css-8r64vq-ValueContainer\\">
+      <div class=\\" css-1wh03ml-singleValue\\">
         foo
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
+        <div class
              style=\\"display: inline-block;\\"
         >
           <input disabled
                  autocapitalize=\\"none\\"
                  autocomplete=\\"off\\"
                  autocorrect=\\"off\\"
-                 id=\\"react-select-8-input\\"
+                 id=\\"react-select-6-input\\"
                  spellcheck=\\"false\\"
                  tabindex=\\"0\\"
                  type=\\"text\\"
@@ -243,11 +141,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
         </div>
       </div>
     </div>
-    <div class=\\"react-select__indicators css-15bdmde-IndicatorsContainer\\">
-      <span class=\\"react-select__indicator-separator css-109onse-indicatorSeparator\\">
+    <div class=\\" css-15bdmde-IndicatorsContainer\\">
+      <span class=\\" css-109onse-indicatorSeparator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+           class=\\" css-tlfecz-indicatorContainer\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -269,19 +167,19 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
 exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--is-multi css-1pfcrl6-ValueContainer\\">
-      <div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
+  <div class=\\" css-r5n82u-control\\">
+    <div class=\\" css-1pfcrl6-ValueContainer\\">
+      <div class=\\" css-1wa3eu0-placeholder\\">
         Select...
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
+        <div class
              style=\\"display: inline-block;\\"
         >
           <input autocapitalize=\\"none\\"
                  autocomplete=\\"off\\"
                  autocorrect=\\"off\\"
-                 id=\\"react-select-4-input\\"
+                 id=\\"react-select-2-input\\"
                  spellcheck=\\"false\\"
                  tabindex=\\"0\\"
                  type=\\"text\\"
@@ -294,11 +192,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+    <div class=\\" css-vcwr3k-IndicatorsContainer\\">
+      <span class=\\" css-1okebmr-indicatorSeparator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+           class=\\" css-tlfecz-indicatorContainer\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -320,13 +218,13 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
 exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a value 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-1pfcrl6-ValueContainer\\">
-      <div class=\\"css-owt1hd-multiValue react-select__multi-value\\">
-        <div class=\\"css-xbn6jz react-select__multi-value__label\\">
+  <div class=\\" css-r5n82u-control\\">
+    <div class=\\" css-1pfcrl6-ValueContainer\\">
+      <div class=\\"css-owt1hd-multiValue\\">
+        <div class=\\"css-xbn6jz\\">
           foo
         </div>
-        <div class=\\"css-1ucqin4 react-select__multi-value__remove\\">
+        <div class=\\"css-1ucqin4\\">
           <svg height=\\"14\\"
                width=\\"14\\"
                viewbox=\\"0 0 20 20\\"
@@ -340,13 +238,13 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
         </div>
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
+        <div class
              style=\\"display: inline-block;\\"
         >
           <input autocapitalize=\\"none\\"
                  autocomplete=\\"off\\"
                  autocorrect=\\"off\\"
-                 id=\\"react-select-7-input\\"
+                 id=\\"react-select-5-input\\"
                  spellcheck=\\"false\\"
                  tabindex=\\"0\\"
                  type=\\"text\\"
@@ -359,9 +257,9 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
         </div>
       </div>
     </div>
-    <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
+    <div class=\\" css-vcwr3k-IndicatorsContainer\\">
       <div aria-hidden=\\"true\\"
-           class=\\"react-select__indicator react-select__clear-indicator css-tlfecz-indicatorContainer\\"
+           class=\\" css-tlfecz-indicatorContainer\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -374,10 +272,10 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
           </path>
         </svg>
       </div>
-      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+      <span class=\\" css-1okebmr-indicatorSeparator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+           class=\\" css-tlfecz-indicatorContainer\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
diff --git a/ui/src/Components/MultiSelect/__snapshots__/ValidationError.test.js.snap b/ui/src/Components/ValidationError/__snapshots__/index.test.js.snap
similarity index 100%
rename from ui/src/Components/MultiSelect/__snapshots__/ValidationError.test.js.snap
rename to ui/src/Components/ValidationError/__snapshots__/index.test.js.snap
diff --git a/ui/src/Components/MultiSelect/ValidationError.js b/ui/src/Components/ValidationError/index.js
similarity index 100%
rename from ui/src/Components/MultiSelect/ValidationError.js
rename to ui/src/Components/ValidationError/index.js
diff --git a/ui/src/Components/MultiSelect/ValidationError.test.js b/ui/src/Components/ValidationError/index.test.js
similarity index 84%
rename from ui/src/Components/MultiSelect/ValidationError.test.js
rename to ui/src/Components/ValidationError/index.test.js
index cd31b122c..c8133f0b5 100644
--- a/ui/src/Components/MultiSelect/ValidationError.test.js
+++ b/ui/src/Components/ValidationError/index.test.js
@@ -4,7 +4,7 @@ import { shallow } from "enzyme";
 
 import toDiffableHtml from "diffable-html";
 
-import { ValidationError } from "./ValidationError";
+import { ValidationError } from ".";
 
 describe("<ValidationError />", () => {
   it("matches snapshot", () => {