From d2a294541837bf0bab059ea4f9c26c537dfdb741 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 9 Sep 2018 11:07:36 +0100
Subject: [PATCH 1/2] fix(ui): hide selected option in suggestion dropdown

---
 ui/src/Components/SilenceModal/LabelNameInput.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/Components/SilenceModal/LabelNameInput.js b/ui/src/Components/SilenceModal/LabelNameInput.js
index bedb21361..21f8c7b99 100644
--- a/ui/src/Components/SilenceModal/LabelNameInput.js
+++ b/ui/src/Components/SilenceModal/LabelNameInput.js
@@ -94,7 +94,8 @@ const LabelNameInput = observer(
         defaultValue: value,
         options: matcher.suggestions.names,
         placeholder: isValid ? "Label name" : <ValidationError />,
-        onChange: this.onChange
+        onChange: this.onChange,
+        hideSelectedOptions: true
       };
     };
   }

From a3b906cb2031f532adcf381471ed8abf5cf500df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 9 Sep 2018 11:12:00 +0100
Subject: [PATCH 2/2] refactor(tests): use diffable HTML for all snapshot tests

---
 ui/package-lock.json                          |   9 -
 ui/package.json                               |   6 -
 .../__snapshots__/index.test.js.snap          | 144 ++++------
 .../NavBar/FilterInput/index.test.js          |   4 +-
 .../SilenceModal/AlertManagerInput.test.js    |   4 +-
 .../SilenceModal/LabelNameInput.test.js       |   4 +-
 .../SilenceModal/LabelValueInput.test.js      |   4 +-
 .../SilenceModal/SilencePreview.test.js       |   4 +-
 .../AlertManagerInput.test.js.snap            | 260 ++++++++----------
 .../__snapshots__/LabelNameInput.test.js.snap |  84 +++---
 .../LabelValueInput.test.js.snap              |  80 +++---
 .../__snapshots__/SilencePreview.test.js.snap | 115 ++++----
 12 files changed, 326 insertions(+), 392 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 856c3dc75..0415c0606 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -3426,15 +3426,6 @@
         "prop-types": "15.6.2"
       }
     },
-    "enzyme-to-json": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.4.tgz",
-      "integrity": "sha1-Z8YEDpMRgvGDQYry659DIyWKp38=",
-      "dev": true,
-      "requires": {
-        "lodash": "4.17.10"
-      }
-    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
diff --git a/ui/package.json b/ui/package.json
index 8e0a6701b..2cd533650 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -55,7 +55,6 @@
     "diffable-html": "3.0.0",
     "enzyme": "3.6.0",
     "enzyme-adapter-react-16": "1.5.0",
-    "enzyme-to-json": "3.3.4",
     "eslint-plugin-react": "7.11.1",
     "jest-canvas-mock": "1.1.0",
     "jest-date-mock": "1.0.3",
@@ -64,10 +63,5 @@
     "markdownlint-cli": "0.13.0",
     "node-sass-chokidar": "1.3.3",
     "onchange": "4.1.0"
-  },
-  "jest": {
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
   }
 }
diff --git a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
index ad75ddc7e..8904c6a55 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
@@ -1,95 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FilterInput /> matches snapshot on default render 1`] = `
-<form
-  class="form-inline mw-100"
-  data-filters=""
+"
+<div role=\\"combobox\\"
+     aria-haspopup=\\"listbox\\"
+     aria-owns=\\"react-autowhatever-1\\"
+     aria-expanded=\\"false\\"
+     class=\\"autosuggest d-inline-block w-100\\"
 >
-  <div
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-owns="react-autowhatever-1"
-    class="autosuggest d-inline-block w-100"
-    role="combobox"
-  >
-    <div
-      class="input-group mr-2"
-    >
-      <div
-        class="input-group-prepend"
-      >
-        <span
-          class="input-group-text px-2"
+  <div class=\\"input-group mr-2\\">
+    <div class=\\"input-group-prepend\\">
+      <span class=\\"input-group-text px-2\\">
+        <svg aria-hidden=\\"true\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"search\\"
+             class=\\"svg-inline--fa fa-search fa-w-16 \\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 512 512\\"
         >
-          <svg
-            aria-hidden="true"
-            class="svg-inline--fa fa-search fa-w-16 "
-            data-icon="search"
-            data-prefix="fas"
-            role="img"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <path fill=\\"currentColor\\"
+                d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
           >
-            <path
-              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-              fill="currentColor"
-            >
-              
-            </path>
-          </svg>
-        </span>
-      </div>
-      <div
-        class="form-control p-1 components-filterinput"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="react-autowhatever-1"
-          autocomplete="off"
-          class="components-filterinput-wrapper"
-          placeholder=""
-          type="text"
-          value=""
-        >
-          
-        </input>
-      </div>
-      <div
-        class="input-group-append"
-      >
-        <button
-          aria-expanded="true"
-          aria-haspopup="true"
-          class="input-group-text rounded-right cursor-pointer components-navbar-history px-2"
-          data-toggle="dropdown"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="svg-inline--fa fa-caret-down fa-w-10 "
-            data-icon="caret-down"
-            data-prefix="fas"
-            role="img"
-            viewBox="0 0 320 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-              fill="currentColor"
-            >
-              
-            </path>
-          </svg>
-        </button>
-      </div>
+          </path>
+        </svg>
+      </span>
     </div>
-    <div
-      class="dropdown"
-      id="react-autowhatever-1"
-      role="listbox"
-    >
-      
+    <div class=\\"form-control p-1 components-filterinput\\">
+      <input type=\\"text\\"
+             class=\\"components-filterinput-wrapper\\"
+             placeholder
+             value
+             autocomplete=\\"off\\"
+             aria-autocomplete=\\"list\\"
+             aria-controls=\\"react-autowhatever-1\\"
+      >
+    </div>
+    <div class=\\"input-group-append\\">
+      <button class=\\"input-group-text rounded-right cursor-pointer components-navbar-history px-2\\"
+              type=\\"button\\"
+              data-toggle=\\"dropdown\\"
+              aria-haspopup=\\"true\\"
+              aria-expanded=\\"true\\"
+      >
+        <svg aria-hidden=\\"true\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"caret-down\\"
+             class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 320 512\\"
+        >
+          <path fill=\\"currentColor\\"
+                d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
+          >
+          </path>
+        </svg>
+      </button>
     </div>
   </div>
-</form>
+  <div id=\\"react-autowhatever-1\\"
+       role=\\"listbox\\"
+       class=\\"dropdown\\"
+  >
+  </div>
+</div>
+"
 `;
diff --git a/ui/src/Components/NavBar/FilterInput/index.test.js b/ui/src/Components/NavBar/FilterInput/index.test.js
index 8468f041c..0f7ca2c45 100644
--- a/ui/src/Components/NavBar/FilterInput/index.test.js
+++ b/ui/src/Components/NavBar/FilterInput/index.test.js
@@ -2,6 +2,8 @@ import React from "react";
 
 import { mount, render } from "enzyme";
 
+import toDiffableHtml from "diffable-html";
+
 import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { FilterInput } from ".";
@@ -33,7 +35,7 @@ describe("<FilterInput />", () => {
     const tree = render(
       <FilterInput alertStore={alertStore} settingsStore={settingsStore} />
     );
-    expect(tree).toMatchSnapshot();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("inputStore.ref should be  != null after mount", () => {
diff --git a/ui/src/Components/SilenceModal/AlertManagerInput.test.js b/ui/src/Components/SilenceModal/AlertManagerInput.test.js
index ca863bbf9..71e1fc883 100644
--- a/ui/src/Components/SilenceModal/AlertManagerInput.test.js
+++ b/ui/src/Components/SilenceModal/AlertManagerInput.test.js
@@ -2,6 +2,8 @@ import React from "react";
 
 import { shallow, mount } from "enzyme";
 
+import toDiffableHtml from "diffable-html";
+
 import { AlertStore } from "Stores/AlertStore";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { AlertManagerInput } from "./AlertManagerInput";
@@ -57,7 +59,7 @@ const ValidateSuggestions = () => {
 describe("<AlertManagerInput />", () => {
   it("matches snapshot", () => {
     const tree = ShallowAlertManagerInput();
-    expect(tree).toMatchSnapshot();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("doesn't render ValidationError after passed validation", () => {
diff --git a/ui/src/Components/SilenceModal/LabelNameInput.test.js b/ui/src/Components/SilenceModal/LabelNameInput.test.js
index 857de24b1..1e37739a9 100644
--- a/ui/src/Components/SilenceModal/LabelNameInput.test.js
+++ b/ui/src/Components/SilenceModal/LabelNameInput.test.js
@@ -2,6 +2,8 @@ import React from "react";
 
 import { shallow, mount } from "enzyme";
 
+import toDiffableHtml from "diffable-html";
+
 import { NewEmptyMatcher, MatcherValueToObject } from "Stores/SilenceFormStore";
 import { LabelNameInput } from "./LabelNameInput";
 
@@ -43,7 +45,7 @@ const ValidateSuggestions = () => {
 describe("<LabelNameInput />", () => {
   it("matches snapshot", () => {
     const tree = ShallowLabelNameInput(true);
-    expect(tree).toMatchSnapshot();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("doesn't renders ValidationError after passed validation", () => {
diff --git a/ui/src/Components/SilenceModal/LabelValueInput.test.js b/ui/src/Components/SilenceModal/LabelValueInput.test.js
index c4699c357..bf6f76bc5 100644
--- a/ui/src/Components/SilenceModal/LabelValueInput.test.js
+++ b/ui/src/Components/SilenceModal/LabelValueInput.test.js
@@ -2,6 +2,8 @@ import React from "react";
 
 import { shallow, mount } from "enzyme";
 
+import toDiffableHtml from "diffable-html";
+
 import { NewEmptyMatcher, MatcherValueToObject } from "Stores/SilenceFormStore";
 import { LabelValueInput } from "./LabelValueInput";
 
@@ -39,7 +41,7 @@ const ValidateSuggestions = () => {
 describe("<LabelValueInput />", () => {
   it("matches snapshot", () => {
     const tree = ShallowLabelValueInput(true);
-    expect(tree).toMatchSnapshot();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("doesn't renders ValidationError after passed validation", () => {
diff --git a/ui/src/Components/SilenceModal/SilencePreview.test.js b/ui/src/Components/SilenceModal/SilencePreview.test.js
index 43be7a081..44d0e0036 100644
--- a/ui/src/Components/SilenceModal/SilencePreview.test.js
+++ b/ui/src/Components/SilenceModal/SilencePreview.test.js
@@ -2,6 +2,8 @@ import React from "react";
 
 import { render } from "enzyme";
 
+import toDiffableHtml from "diffable-html";
+
 import moment from "moment";
 
 import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -16,6 +18,6 @@ describe("<SilencePreview />", () => {
     silenceFormStore.data.comment = "SilencePreview test";
 
     const tree = render(<SilencePreview silenceFormStore={silenceFormStore} />);
-    expect(tree).toMatchSnapshot();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 });
diff --git a/ui/src/Components/SilenceModal/__snapshots__/AlertManagerInput.test.js.snap b/ui/src/Components/SilenceModal/__snapshots__/AlertManagerInput.test.js.snap
index 50da3b856..fb8de53da 100644
--- a/ui/src/Components/SilenceModal/__snapshots__/AlertManagerInput.test.js.snap
+++ b/ui/src/Components/SilenceModal/__snapshots__/AlertManagerInput.test.js.snap
@@ -1,154 +1,114 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AlertManagerInput /> matches snapshot 1`] = `
-<StateManager
-  defaultInputValue=""
-  defaultMenuIsOpen={false}
-  defaultValue={
-    Array [
-      Object {
-        "label": "am1",
-        "value": "http://am1.example.com",
-        Symbol(mobx administration): ObservableObjectAdministration$$1 {
-          "defaultEnhancer": [Function],
-          "keysAtom": Atom$$1 {
-            "diffValue": 0,
-            "isBeingObserved": false,
-            "isPendingUnobservation": false,
-            "lastAccessedBy": 0,
-            "lowestObserverState": 2,
-            "name": "Silence form store.alertmanagers[..].keys",
-            "observers": Set {},
-          },
-          "name": "Silence form store.alertmanagers[..]",
-          "pendingKeys": Map {
-            "cheerio" => false,
-            "nodeType" => false,
-            "$$typeof" => false,
-            "@@__IMMUTABLE_LIST__@@" => false,
-            "@@__IMMUTABLE_SET__@@" => false,
-            "@@__IMMUTABLE_MAP__@@" => false,
-            "@@__IMMUTABLE_STACK__@@" => false,
-            "toJSON" => false,
-          },
-          "proxy": [Circular],
-          "target": Object {
-            "label": "am1",
-            "value": "http://am1.example.com",
-            Symbol(mobx administration): [Circular],
-          },
-          "values": Map {
-            "label" => "am1",
-            "value" => "http://am1.example.com",
-          },
-        },
-      },
-      Object {
-        "label": "am2",
-        "value": "http://am2.example.com",
-        Symbol(mobx administration): ObservableObjectAdministration$$1 {
-          "defaultEnhancer": [Function],
-          "keysAtom": Atom$$1 {
-            "diffValue": 0,
-            "isBeingObserved": false,
-            "isPendingUnobservation": false,
-            "lastAccessedBy": 0,
-            "lowestObserverState": 2,
-            "name": "Silence form store.alertmanagers[..].keys",
-            "observers": Set {},
-          },
-          "name": "Silence form store.alertmanagers[..]",
-          "pendingKeys": Map {
-            "cheerio" => false,
-            "nodeType" => false,
-            "$$typeof" => false,
-            "@@__IMMUTABLE_LIST__@@" => false,
-            "@@__IMMUTABLE_SET__@@" => false,
-            "@@__IMMUTABLE_MAP__@@" => false,
-            "@@__IMMUTABLE_STACK__@@" => false,
-            "toJSON" => false,
-          },
-          "proxy": [Circular],
-          "target": Object {
-            "label": "am2",
-            "value": "http://am2.example.com",
-            Symbol(mobx administration): [Circular],
-          },
-          "values": Map {
-            "label" => "am2",
-            "value" => "http://am2.example.com",
-          },
-        },
-      },
-      Object {
-        "label": "am3",
-        "value": "http://am3.example.com",
-        Symbol(mobx administration): ObservableObjectAdministration$$1 {
-          "defaultEnhancer": [Function],
-          "keysAtom": Atom$$1 {
-            "diffValue": 0,
-            "isBeingObserved": false,
-            "isPendingUnobservation": false,
-            "lastAccessedBy": 0,
-            "lowestObserverState": 2,
-            "name": "Silence form store.alertmanagers[..].keys",
-            "observers": Set {},
-          },
-          "name": "Silence form store.alertmanagers[..]",
-          "pendingKeys": Map {
-            "cheerio" => false,
-            "nodeType" => false,
-            "$$typeof" => false,
-            "@@__IMMUTABLE_LIST__@@" => false,
-            "@@__IMMUTABLE_SET__@@" => false,
-            "@@__IMMUTABLE_MAP__@@" => false,
-            "@@__IMMUTABLE_STACK__@@" => false,
-            "toJSON" => false,
-          },
-          "proxy": [Circular],
-          "target": Object {
-            "label": "am3",
-            "value": "http://am3.example.com",
-            Symbol(mobx administration): [Circular],
-          },
-          "values": Map {
-            "label" => "am3",
-            "value" => "http://am3.example.com",
-          },
-        },
-      },
-    ]
-  }
-  instanceId="silence-input-alertmanagers"
-  isMulti={true}
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "label": "am1",
-        "value": "http://am1.example.com",
-      },
-      Object {
-        "label": "am2",
-        "value": "http://am2.example.com",
-      },
-      Object {
-        "label": "am3",
-        "value": "http://am3.example.com",
-      },
-    ]
-  }
-  placeholder="Alertmanager"
-  styles={
-    Object {
-      "control": [Function],
-      "indicatorsContainer": [Function],
-      "multiValue": [Function],
-      "multiValueLabel": [Function],
-      "multiValueRemove": [Function],
-      "option": [Function],
-      "valueContainer": [Function],
-    }
-  }
-/>
+"
+<div class=\\"css-10nd86i\\">
+  <div class=\\"css-1qcoghz\\">
+    <div class=\\"css-1tmgesh\\">
+      <div class=\\"css-1y5uxcf\\">
+        <div class=\\"css-yagan3\\">
+          am1
+        </div>
+        <div class=\\"css-n82uvk\\">
+          <svg height=\\"14\\"
+               width=\\"14\\"
+               viewbox=\\"0 0 20 20\\"
+               aria-hidden=\\"true\\"
+               focusable=\\"false\\"
+               class=\\"css-19bqh2r\\"
+          >
+            <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
+            </path>
+          </svg>
+        </div>
+      </div>
+      <div class=\\"css-1y5uxcf\\">
+        <div class=\\"css-yagan3\\">
+          am2
+        </div>
+        <div class=\\"css-n82uvk\\">
+          <svg height=\\"14\\"
+               width=\\"14\\"
+               viewbox=\\"0 0 20 20\\"
+               aria-hidden=\\"true\\"
+               focusable=\\"false\\"
+               class=\\"css-19bqh2r\\"
+          >
+            <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
+            </path>
+          </svg>
+        </div>
+      </div>
+      <div class=\\"css-1y5uxcf\\">
+        <div class=\\"css-yagan3\\">
+          am3
+        </div>
+        <div class=\\"css-n82uvk\\">
+          <svg height=\\"14\\"
+               width=\\"14\\"
+               viewbox=\\"0 0 20 20\\"
+               aria-hidden=\\"true\\"
+               focusable=\\"false\\"
+               class=\\"css-19bqh2r\\"
+          >
+            <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
+            </path>
+          </svg>
+        </div>
+      </div>
+      <div class=\\"css-rsyb7x\\">
+        <div class
+             style=\\"display:inline-block\\"
+        >
+          <input type=\\"text\\"
+                 autocapitalize=\\"none\\"
+                 autocomplete=\\"off\\"
+                 autocorrect=\\"off\\"
+                 id=\\"react-select-silence-input-alertmanagers-input\\"
+                 spellcheck=\\"false\\"
+                 tabindex=\\"0\\"
+                 value
+                 aria-autocomplete=\\"list\\"
+                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+          >
+          <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"css-mik995\\">
+      <div aria-hidden=\\"true\\"
+           class=\\"css-1ep9fjw\\"
+      >
+        <svg height=\\"20\\"
+             width=\\"20\\"
+             viewbox=\\"0 0 20 20\\"
+             aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             class=\\"css-19bqh2r\\"
+        >
+          <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
+          </path>
+        </svg>
+      </div>
+      <span class=\\"css-d8oujb\\">
+      </span>
+      <div aria-hidden=\\"true\\"
+           class=\\"css-1ep9fjw\\"
+      >
+        <svg height=\\"20\\"
+             width=\\"20\\"
+             viewbox=\\"0 0 20 20\\"
+             aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             class=\\"css-19bqh2r\\"
+        >
+          <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>
+"
 `;
diff --git a/ui/src/Components/SilenceModal/__snapshots__/LabelNameInput.test.js.snap b/ui/src/Components/SilenceModal/__snapshots__/LabelNameInput.test.js.snap
index 332b0ac3d..aa5760c6d 100644
--- a/ui/src/Components/SilenceModal/__snapshots__/LabelNameInput.test.js.snap
+++ b/ui/src/Components/SilenceModal/__snapshots__/LabelNameInput.test.js.snap
@@ -1,40 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<LabelNameInput /> matches snapshot 1`] = `
-<StateManager
-  defaultInputValue=""
-  defaultMenuIsOpen={false}
-  defaultValue={
-    Object {
-      "label": "name",
-      "value": "name",
-    }
-  }
-  instanceId="silence-input-label-name-1"
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "label": "job",
-        "value": "job",
-      },
-      Object {
-        "label": "cluster",
-        "value": "cluster",
-      },
-    ]
-  }
-  placeholder="Label name"
-  styles={
-    Object {
-      "control": [Function],
-      "indicatorsContainer": [Function],
-      "multiValue": [Function],
-      "multiValueLabel": [Function],
-      "multiValueRemove": [Function],
-      "option": [Function],
-      "valueContainer": [Function],
-    }
-  }
-/>
+"
+<div class=\\"css-10nd86i\\">
+  <div class=\\"css-1qcoghz\\">
+    <div class=\\"css-s4h933\\">
+      <div class=\\"css-va7pk8\\">
+        name
+      </div>
+      <div class=\\"css-rsyb7x\\">
+        <div class
+             style=\\"display:inline-block\\"
+        >
+          <input type=\\"text\\"
+                 autocapitalize=\\"none\\"
+                 autocomplete=\\"off\\"
+                 autocorrect=\\"off\\"
+                 id=\\"react-select-silence-input-label-name-1-input\\"
+                 spellcheck=\\"false\\"
+                 tabindex=\\"0\\"
+                 value
+                 aria-autocomplete=\\"list\\"
+                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+          >
+          <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"css-mik995\\">
+      <span class=\\"css-d8oujb\\">
+      </span>
+      <div aria-hidden=\\"true\\"
+           class=\\"css-1ep9fjw\\"
+      >
+        <svg height=\\"20\\"
+             width=\\"20\\"
+             viewbox=\\"0 0 20 20\\"
+             aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             class=\\"css-19bqh2r\\"
+        >
+          <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>
+"
 `;
diff --git a/ui/src/Components/SilenceModal/__snapshots__/LabelValueInput.test.js.snap b/ui/src/Components/SilenceModal/__snapshots__/LabelValueInput.test.js.snap
index 269f13542..81cf1c7b5 100644
--- a/ui/src/Components/SilenceModal/__snapshots__/LabelValueInput.test.js.snap
+++ b/ui/src/Components/SilenceModal/__snapshots__/LabelValueInput.test.js.snap
@@ -1,36 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<LabelValueInput /> matches snapshot 1`] = `
-<StateManager
-  defaultInputValue=""
-  defaultMenuIsOpen={false}
-  defaultValue={Array []}
-  instanceId="silence-input-label-value-1"
-  isMulti={true}
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "label": "foo",
-        "value": "foo",
-      },
-      Object {
-        "label": "bar",
-        "value": "bar",
-      },
-    ]
-  }
-  placeholder="Label value"
-  styles={
-    Object {
-      "control": [Function],
-      "indicatorsContainer": [Function],
-      "multiValue": [Function],
-      "multiValueLabel": [Function],
-      "multiValueRemove": [Function],
-      "option": [Function],
-      "valueContainer": [Function],
-    }
-  }
-/>
+"
+<div class=\\"css-10nd86i\\">
+  <div class=\\"css-1qcoghz\\">
+    <div class=\\"css-1tmgesh\\">
+      <div class=\\"css-1492t68\\">
+        Label value
+      </div>
+      <div class=\\"css-rsyb7x\\">
+        <div class
+             style=\\"display:inline-block\\"
+        >
+          <input type=\\"text\\"
+                 autocapitalize=\\"none\\"
+                 autocomplete=\\"off\\"
+                 autocorrect=\\"off\\"
+                 id=\\"react-select-silence-input-label-value-1-input\\"
+                 spellcheck=\\"false\\"
+                 tabindex=\\"0\\"
+                 value
+                 aria-autocomplete=\\"list\\"
+                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+          >
+          <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"css-mik995\\">
+      <span class=\\"css-d8oujb\\">
+      </span>
+      <div aria-hidden=\\"true\\"
+           class=\\"css-1ep9fjw\\"
+      >
+        <svg height=\\"20\\"
+             width=\\"20\\"
+             viewbox=\\"0 0 20 20\\"
+             aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             class=\\"css-19bqh2r\\"
+        >
+          <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>
+"
 `;
diff --git a/ui/src/Components/SilenceModal/__snapshots__/SilencePreview.test.js.snap b/ui/src/Components/SilenceModal/__snapshots__/SilencePreview.test.js.snap
index d884d9fff..5a8cdc11d 100644
--- a/ui/src/Components/SilenceModal/__snapshots__/SilencePreview.test.js.snap
+++ b/ui/src/Components/SilenceModal/__snapshots__/SilencePreview.test.js.snap
@@ -1,73 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SilencePreview /> matches snapshot 1`] = `
-<div
-  class="mt-3"
->
-  <pre
-    class="json-pretty"
-  >
-    {
-      "
-    <span
-      class="json-key"
-    >
-      matchers
-    </span>
-    ": [],
-      "
-    <span
-      class="json-key"
-    >
-      startsAt
-    </span>
-    ": 
-    <span
-      class="json-string"
-    >
-      "2000-02-01T00:00:00.000Z"
-    </span>
-    ,
-      "
-    <span
-      class="json-key"
-    >
-      endsAt
-    </span>
-    ": 
-    <span
-      class="json-string"
-    >
-      "2000-02-01T01:00:00.000Z"
-    </span>
-    ,
-      "
-    <span
-      class="json-key"
-    >
-      createdBy
-    </span>
-    ": 
-    <span
-      class="json-string"
-    >
-      ""
-    </span>
-    ,
-      "
-    <span
-      class="json-key"
-    >
-      comment
-    </span>
-    ": 
-    <span
-      class="json-string"
-    >
-      "SilencePreview test"
-    </span>
-    
-    }
-  </pre>
-</div>
+"
+<pre class=\\"json-pretty\\">
+  {
+  &quot;
+  <span class=\\"json-key\\">
+    matchers
+  </span>
+  &quot;: [],
+  &quot;
+  <span class=\\"json-key\\">
+    startsAt
+  </span>
+  &quot;:
+  <span class=\\"json-string\\">
+    &quot;2000-02-01T00:00:00.000Z&quot;
+  </span>
+  ,
+  &quot;
+  <span class=\\"json-key\\">
+    endsAt
+  </span>
+  &quot;:
+  <span class=\\"json-string\\">
+    &quot;2000-02-01T01:00:00.000Z&quot;
+  </span>
+  ,
+  &quot;
+  <span class=\\"json-key\\">
+    createdBy
+  </span>
+  &quot;:
+  <span class=\\"json-string\\">
+    &quot;&quot;
+  </span>
+  ,
+  &quot;
+  <span class=\\"json-key\\">
+    comment
+  </span>
+  &quot;:
+  <span class=\\"json-string\\">
+    &quot;SilencePreview test&quot;
+  </span>
+  }
+</pre>
+"
 `;