fix(ui): reformat ui code with prettier

ui/src/Components/Labels/FilteringCounterBadge/index.js

@@ -38,22 +38,22 @@ const FilteringCounterBadge = inject("alertStore")(
           <TooltipWrapper
             title={`Click to only show ${value} alerts or Alt+Click to hide them`}
           >
-          <Flash spy={counter}>
-            <span
-              className={
-                themed
-                  ? cs.className
-                  : [
-                      "badge-light badge-pill components-label-with-hover",
-                      ...cs.baseClassNames
-                    ].join(" ")
-              }
-              style={themed ? {} : cs.style}
-              onClick={e => this.handleClick(e)}
-            >
-              {counter}
-            </span>
-          </Flash>
+            <Flash spy={counter}>
+              <span
+                className={
+                  themed
+                    ? cs.className
+                    : [
+                        "badge-light badge-pill components-label-with-hover",
+                        ...cs.baseClassNames
+                      ].join(" ")
+                }
+                style={themed ? {} : cs.style}
+                onClick={e => this.handleClick(e)}
+              >
+                {counter}
+              </span>
+            </Flash>
           </TooltipWrapper>
         );
       }

ui/src/Components/Labels/FilteringCounterBadge/index.test.js

@@ -36,7 +36,7 @@ const validateStyle = (value, themed) => {
     />
   );
   // opacity=>1 is set by react-reveal/Flash
-  expect(tree.find("span").prop("style")).toEqual({"opacity": 1});
+  expect(tree.find("span").prop("style")).toEqual({ opacity: 1 });
 };
 
 const validateOnClick = (value, themed) => {

ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js

@@ -88,9 +88,7 @@ const MatchCounter = observer(
       if (this.matchedAlerts.error !== null) {
         return (
           <TooltipWrapper
-            title={`Failed to fetch alerts matching this label: ${
-              this.matchedAlerts.error
-            }`}
+            title={`Failed to fetch alerts matching this label: ${this.matchedAlerts.error}`}
           >
             <FontAwesomeIcon
               className="text-danger"

ui/src/Components/SilenceModal/SilenceModalContent.js

@@ -37,8 +37,8 @@ const SilenceModalContent = observer(
                   ? "Add new silence"
                   : silenceFormStore.data.currentStage ===
                     SilenceFormStage.Preview
-                    ? "Preview silenced alerts"
-                    : "Silence submitted"
+                  ? "Preview silenced alerts"
+                  : "Silence submitted"
                 : `Editing silence ${silenceFormStore.data.silenceID}`}
             </h5>
             <button type="button" className="close" onClick={onHide}>
@@ -54,7 +54,7 @@ const SilenceModalContent = observer(
                 settingsStore={settingsStore}
               />
             ) : silenceFormStore.data.currentStage ===
-            SilenceFormStage.Preview ? (
+              SilenceFormStage.Preview ? (
               <SilencePreview
                 alertStore={alertStore}
                 silenceFormStore={silenceFormStore}

ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitProgress.test.js

@@ -214,7 +214,12 @@ describe("<SilenceSubmitProgress />", () => {
     const tree = MountedSilenceSubmitProgress();
     await expect(tree.instance().submitState.fetch).resolves.toBe("success");
     tree.update();
-    expect(tree.find("a").getDOMNode().getAttribute("href")).toBe("file:///mock/#/silences/123");
+    expect(
+      tree
+        .find("a")
+        .getDOMNode()
+        .getAttribute("href")
+    ).toBe("file:///mock/#/silences/123");
   });
 
   it("[v2] renders success icon on successful fetch", async () => {
@@ -233,7 +238,12 @@ describe("<SilenceSubmitProgress />", () => {
     const tree = MountedSilenceSubmitProgress();
     await expect(tree.instance().submitState.fetch).resolves.toBe("123");
     tree.update();
-    expect(tree.find("a").getDOMNode().getAttribute("href")).toBe("file:///mock/#/silences/123");
+    expect(
+      tree
+        .find("a")
+        .getDOMNode()
+        .getAttribute("href")
+    ).toBe("file:///mock/#/silences/123");
   });
 
   it("[v1] renders error icon on failed fetch", async () => {

ui/src/index.js

@@ -1,7 +1,7 @@
 // MUST be first thing we import
 // https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md
 // IE is not supported (lacks Proxy) but that pollyfill provides fetch and other needed features
-import 'react-app-polyfill/ie11';
+import "react-app-polyfill/ie11";
 import "react-app-polyfill/stable";
 
 import React from "react";