fix(ui): use types instead of objects

ui/src/Components/SilenceModal/SilenceForm.test.js

@@ -7,11 +7,7 @@ import copy from "copy-to-clipboard";
 import { MockThemeContext } from "__mocks__/Theme";
 import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
-import {
-  SilenceFormStore,
-  SilenceFormStage,
-  NewEmptyMatcher,
-} from "Stores/SilenceFormStore";
+import { SilenceFormStore, NewEmptyMatcher } from "Stores/SilenceFormStore";
 import { QueryOperators, StaticLabels } from "Common/Query";
 import { SilenceForm } from "./SilenceForm";
 
@@ -343,7 +339,7 @@ describe("<SilenceForm />", () => {
   it("calling submit doesn't move the form to Preview stage when form is invalid", () => {
     const tree = MountedSilenceForm();
     tree.simulate("submit", { preventDefault: jest.fn() });
-    expect(silenceFormStore.data.currentStage).toBe(SilenceFormStage.UserInput);
+    expect(silenceFormStore.data.currentStage).toBe("form");
   });
 
   it("calling submit move form to the 'Preview' stage when form is valid", () => {
@@ -357,7 +353,7 @@ describe("<SilenceForm />", () => {
     silenceFormStore.data.autofillMatchers = false;
     const tree = MountedSilenceForm();
     tree.simulate("submit", { preventDefault: jest.fn() });
-    expect(silenceFormStore.data.currentStage).toBe(SilenceFormStage.Preview);
+    expect(silenceFormStore.data.currentStage).toBe("preview");
   });
 
   it("calling submit saves author value to the Settings store", () => {

ui/src/Components/SilenceModal/SilenceForm.tsx

@@ -18,7 +18,6 @@ import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
 import { AlertStore } from "Stores/AlertStore";
 import {
   SilenceFormStore,
-  SilenceFormStage,
   NewEmptyMatcher,
   NewClusterRequest,
   ClusterRequestT,
@@ -173,7 +172,7 @@ const SilenceForm: FC<{
     settingsStore.silenceFormConfig.saveAuthor(silenceFormStore.data.author);
 
     if (silenceFormStore.data.isValid)
-      silenceFormStore.data.currentStage = SilenceFormStage.Preview;
+      silenceFormStore.data.currentStage = "preview";
 
     silenceFormStore.data.wasValidated = true;
   };

ui/src/Components/SilenceModal/SilenceModalContent.test.js

@@ -7,11 +7,7 @@ import toDiffableHtml from "diffable-html";
 import { MockThemeContext } from "__mocks__/Theme";
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
-import {
-  SilenceFormStore,
-  SilenceFormStage,
-  SilenceTabNames,
-} from "Stores/SilenceFormStore";
+import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { SilenceModalContent } from "./SilenceModalContent";
 
 let alertStore;
@@ -40,7 +36,7 @@ beforeEach(() => {
     clusters: { am: ["am1"] },
   };
 
-  silenceFormStore.tab.current = SilenceTabNames.Editor;
+  silenceFormStore.tab.current = "editor";
 });
 
 afterEach(() => {
@@ -78,7 +74,7 @@ describe("<SilenceModalContent />", () => {
   });
 
   it("Clicking on the Editor tab changes content", () => {
-    silenceFormStore.tab.current = SilenceTabNames.Browser;
+    silenceFormStore.tab.current = "browser";
     const tree = MountedSilenceModalContent();
     const tabs = tree.find("Tab");
     tabs.at(0).simulate("click");
@@ -101,28 +97,28 @@ describe("<SilenceModalContent />", () => {
 
 describe("<SilenceModalContent /> Editor", () => {
   it("title is 'New silence' when creating new silence", () => {
-    silenceFormStore.data.currentStage = SilenceFormStage.UserInput;
+    silenceFormStore.data.currentStage = "form";
     silenceFormStore.data.silenceID = null;
     const tree = MountedSilenceModalContent();
     const tab = tree.find("Tab").at(0);
     expect(tab.props().title).toBe("New silence");
   });
   it("title is 'Editing silence' when editing exiting silence", () => {
-    silenceFormStore.data.currentStage = SilenceFormStage.UserInput;
+    silenceFormStore.data.currentStage = "form";
     silenceFormStore.data.silenceID = "1234";
     const tree = MountedSilenceModalContent();
     const tab = tree.find("Tab").at(0);
     expect(tab.props().title).toBe("Editing silence");
   });
   it("title is 'Preview silenced alerts' when previewing silenced alerts", () => {
-    silenceFormStore.data.currentStage = SilenceFormStage.Preview;
+    silenceFormStore.data.currentStage = "preview";
     silenceFormStore.data.silenceID = "1234";
     const tree = MountedSilenceModalContent();
     const tab = tree.find("Tab").at(0);
     expect(tab.props().title).toBe("Preview silenced alerts");
   });
   it("title is 'Silence submitted' after sending silence to Alertmanager", () => {
-    silenceFormStore.data.currentStage = SilenceFormStage.Submit;
+    silenceFormStore.data.currentStage = "submit";
     silenceFormStore.data.silenceID = "1234";
     const tree = MountedSilenceModalContent();
     const tab = tree.find("Tab").at(0);
@@ -130,21 +126,21 @@ describe("<SilenceModalContent /> Editor", () => {
   });
 
   it("renders SilenceForm when silenceFormStore.data.currentStage is 'UserInput'", () => {
-    silenceFormStore.data.currentStage = SilenceFormStage.UserInput;
+    silenceFormStore.data.currentStage = "form";
     const tree = MountedSilenceModalContent();
     const form = tree.find("SilenceForm");
     expect(form).toHaveLength(1);
   });
 
   it("renders SilencePreview when silenceFormStore.data.currentStage is 'Preview'", () => {
-    silenceFormStore.data.currentStage = SilenceFormStage.Preview;
+    silenceFormStore.data.currentStage = "preview";
     const tree = MountedSilenceModalContent();
     const ctrl = tree.find("SilencePreview");
     expect(ctrl).toHaveLength(1);
   });
 
   it("renders SilenceSubmitController when silenceFormStore.data.currentStage is 'Submit'", () => {
-    silenceFormStore.data.currentStage = SilenceFormStage.Submit;
+    silenceFormStore.data.currentStage = "submit";
     const tree = MountedSilenceModalContent();
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
@@ -152,7 +148,7 @@ describe("<SilenceModalContent /> Editor", () => {
 
 describe("<SilenceModalContent /> Browser", () => {
   it("renders silence browser when tab is set to Browser", () => {
-    silenceFormStore.tab.current = SilenceTabNames.Browser;
+    silenceFormStore.tab.current = "browser";
     const tree = MountedSilenceModalContent();
     const form = tree.find("Browser");
     expect(form).toHaveLength(1);

ui/src/Components/SilenceModal/SilenceModalContent.tsx

@@ -7,11 +7,7 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
 import { faLock } from "@fortawesome/free-solid-svg-icons/faLock";
 
 import { AlertStore } from "Stores/AlertStore";
-import {
-  SilenceFormStore,
-  SilenceFormStage,
-  SilenceTabNames,
-} from "Stores/SilenceFormStore";
+import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { Settings } from "Stores/Settings";
 import { Tab } from "Components/Modal/Tab";
 import { SilenceForm } from "./SilenceForm";
@@ -47,21 +43,20 @@ const SilenceModalContent: FC<{
         <nav className="nav nav-pills nav-justified w-100">
           <Tab
             title={
-              silenceFormStore.data.currentStage === SilenceFormStage.UserInput
+              silenceFormStore.data.currentStage === "form"
                 ? silenceFormStore.data.silenceID === null
                   ? "New silence"
                   : "Editing silence"
-                : silenceFormStore.data.currentStage ===
-                  SilenceFormStage.Preview
+                : silenceFormStore.data.currentStage === "preview"
                 ? "Preview silenced alerts"
                 : "Silence submitted"
             }
-            active={silenceFormStore.tab.current === SilenceTabNames.Editor}
+            active={silenceFormStore.tab.current === "editor"}
             onClick={() => silenceFormStore.tab.setTab("editor")}
           />
           <Tab
             title="Browse"
-            active={silenceFormStore.tab.current === SilenceTabNames.Browser}
+            active={silenceFormStore.tab.current === "browser"}
             onClick={() => silenceFormStore.tab.setTab("browser")}
           />
           <button type="button" className="close" onClick={onHide}>
@@ -74,8 +69,8 @@ const SilenceModalContent: FC<{
           silenceFormStore.toggle.blurred ? "modal-content-blur" : ""
         }`}
       >
-        {silenceFormStore.tab.current === SilenceTabNames.Editor ? (
-          silenceFormStore.data.currentStage === SilenceFormStage.UserInput ? (
+        {silenceFormStore.tab.current === "editor" ? (
+          silenceFormStore.data.currentStage === "form" ? (
             alertStore.data.upstreams.instances.length > 0 ? (
               Object.keys(alertStore.data.clustersWithoutReadOnly).length >
               0 ? (
@@ -93,8 +88,7 @@ const SilenceModalContent: FC<{
                 <FontAwesomeIcon icon={faSpinner} size="lg" spin />
               </h1>
             )
-          ) : silenceFormStore.data.currentStage ===
-            SilenceFormStage.Preview ? (
+          ) : silenceFormStore.data.currentStage === "preview" ? (
             <SilencePreview
               alertStore={alertStore}
               silenceFormStore={silenceFormStore}
@@ -106,7 +100,7 @@ const SilenceModalContent: FC<{
             />
           )
         ) : null}
-        {silenceFormStore.tab.current === SilenceTabNames.Browser ? (
+        {silenceFormStore.tab.current === "browser" ? (
           <Browser
             alertStore={alertStore}
             silenceFormStore={silenceFormStore}

ui/src/Components/SilenceModal/SilencePreview/index.test.js

@@ -7,11 +7,7 @@ import toDiffableHtml from "diffable-html";
 import { EmptyAPIResponse } from "__mocks__/Fetch";
 import { MockAlertGroup, MockAlert } from "__mocks__/Alerts";
 import { AlertStore } from "Stores/AlertStore";
-import {
-  SilenceFormStore,
-  SilenceFormStage,
-  NewEmptyMatcher,
-} from "Stores/SilenceFormStore";
+import { SilenceFormStore, NewEmptyMatcher } from "Stores/SilenceFormStore";
 import { StringToOption } from "Common/Select";
 import { useFetchGet } from "Hooks/useFetchGet";
 import { SilencePreview } from ".";
@@ -170,6 +166,6 @@ describe("<SilencePreview />", () => {
     const tree = MountedSilencePreview();
     const button = tree.find(".btn-primary");
     button.simulate("click");
-    expect(silenceFormStore.data.currentStage).toBe(SilenceFormStage.Submit);
+    expect(silenceFormStore.data.currentStage).toBe("submit");
   });
 });

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

@@ -3,11 +3,7 @@ import React from "react";
 import { shallow } from "enzyme";
 
 import { AlertStore } from "Stores/AlertStore";
-import {
-  SilenceFormStore,
-  SilenceFormStage,
-  NewClusterRequest,
-} from "Stores/SilenceFormStore";
+import { SilenceFormStore, NewClusterRequest } from "Stores/SilenceFormStore";
 import {
   SilenceSubmitController,
   MultiClusterStatus,
@@ -97,7 +93,7 @@ describe("<SilenceSubmitController />", () => {
   });
 
   it("resets the form on 'Back' button click", () => {
-    silenceFormStore.data.currentStage = SilenceFormStage.Submit;
+    silenceFormStore.data.currentStage = "submit";
     const tree = shallow(
       <SilenceSubmitController
         alertStore={alertStore}
@@ -106,7 +102,7 @@ describe("<SilenceSubmitController />", () => {
     );
     const button = tree.find("button");
     button.simulate("click");
-    expect(silenceFormStore.data.currentStage).toBe(SilenceFormStage.UserInput);
+    expect(silenceFormStore.data.currentStage).toBe("form");
   });
 });
 

ui/src/Components/SilenceModal/index.stories.js

@@ -10,11 +10,7 @@ import addDays from "date-fns/addDays";
 import { MockSilence } from "__mocks__/Alerts";
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
-import {
-  SilenceFormStore,
-  NewEmptyMatcher,
-  SilenceTabNames,
-} from "Stores/SilenceFormStore";
+import { SilenceFormStore, NewEmptyMatcher } from "Stores/SilenceFormStore";
 import { StringToOption } from "Common/Select";
 import { DateTimeSelect, TabNames } from "./DateTimeSelect";
 import { SilenceModalContent } from "./SilenceModalContent";
@@ -110,7 +106,7 @@ storiesOf("SilenceModal", module)
     silenceFormStore.data.startsAt = new Date();
     silenceFormStore.data.endsAt = addDays(addHours(new Date(), 2), 10);
 
-    silenceFormStore.tab.current = SilenceTabNames.Editor;
+    silenceFormStore.tab.current = "editor";
 
     fetchMock.mock(
       "begin:/alerts.json?q=cluster",
@@ -211,7 +207,7 @@ storiesOf("SilenceModal", module)
     const settingsStore = new Settings();
     const silenceFormStore = new SilenceFormStore();
 
-    silenceFormStore.tab.current = SilenceTabNames.Browser;
+    silenceFormStore.tab.current = "browser";
 
     alertStore.data.upstreams = {
       instances: [
@@ -274,7 +270,7 @@ storiesOf("SilenceModal", module)
     const settingsStore = new Settings();
     const silenceFormStore = new SilenceFormStore();
 
-    silenceFormStore.tab.current = SilenceTabNames.Browser;
+    silenceFormStore.tab.current = "browser";
 
     alertStore.data.upstreams = {
       instances: [

ui/src/Components/SilenceModal/index.test.js

@@ -12,7 +12,7 @@ import {
 } from "Components/Theme/ReactSelect";
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
-import { SilenceFormStore, SilenceFormStage } from "Stores/SilenceFormStore";
+import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { SilenceModal } from ".";
 
 let alertStore;
@@ -144,7 +144,7 @@ describe("<SilenceModal />", () => {
     act(() => jest.runOnlyPendingTimers());
     tree.update();
     // form should be reset
-    expect(silenceFormStore.data.currentStage).toBe(SilenceFormStage.UserInput);
+    expect(silenceFormStore.data.currentStage).toBe("form");
     expect(silenceFormStore.data.wasValidated).toBe(false);
     expect(silenceFormStore.data.autofillMatchers).toBe(true);
   });

ui/src/Stores/SilenceFormStore.test.js

@@ -13,9 +13,7 @@ import {
 import { StringToOption } from "Common/Select";
 import {
   SilenceFormStore,
-  SilenceFormStage,
   NewEmptyMatcher,
-  SilenceTabNames,
   AlertmanagerClustersToOption,
 } from "./SilenceFormStore";
 
@@ -90,9 +88,9 @@ describe("SilenceFormStore.data", () => {
   });
 
   it("resetProgress() sets currentStage to UserInput", () => {
-    store.data.currentStage = SilenceFormStage.Submit;
+    store.data.currentStage = "submit";
     store.data.resetProgress();
-    expect(store.data.currentStage).toBe(SilenceFormStage.UserInput);
+    expect(store.data.currentStage).toBe("form");
   });
 
   it("resetProgress() sets 'wasValidated' to false", () => {
@@ -639,12 +637,12 @@ describe("SilenceFormStore.data startsAt & endsAt validation", () => {
 
 describe("SilenceFormStore.tab", () => {
   it("current tab is Editor by default", () => {
-    expect(store.tab.current).toBe(SilenceTabNames.Editor);
+    expect(store.tab.current).toBe("editor");
   });
 
   it("setTab() sets the current tab", () => {
-    expect(store.tab.current).toBe(SilenceTabNames.Editor);
-    store.tab.setTab(SilenceTabNames.Browser);
-    expect(store.tab.current).toBe(SilenceTabNames.Browser);
+    expect(store.tab.current).toBe("editor");
+    store.tab.setTab("browser");
+    expect(store.tab.current).toBe("browser");
   });
 });

ui/src/Stores/SilenceFormStore.ts

@@ -59,19 +59,6 @@ const AlertmanagerClustersToOption = (clusterDict: {
     value: clusterMembers,
   }));
 
-// FIXME delete
-const SilenceFormStage = Object.freeze({
-  UserInput: "form",
-  Preview: "preview",
-  Submit: "submit",
-});
-
-// FIXME delete
-const SilenceTabNames = Object.freeze({
-  Editor: "editor",
-  Browser: "browser",
-});
-
 const MatchersFromGroup = (
   group: APIAlertGroupT,
   stripLabels: string[],
@@ -208,6 +195,9 @@ const UnpackRegexMatcherValues = (isRegex: boolean, value: string) => {
   }
 };
 
+export type SilenceFormTabT = "editor" | "browser";
+export type SilenceFormStageT = "form" | "preview" | "submit";
+
 class SilenceFormStore {
   toggle = observable(
     {
@@ -236,8 +226,8 @@ class SilenceFormStore {
 
   tab = observable(
     {
-      current: SilenceTabNames.Editor,
-      setTab(value: "editor" | "browser") {
+      current: "editor" as SilenceFormTabT,
+      setTab(value: SilenceFormTabT) {
         this.current = value;
       },
     },
@@ -252,7 +242,7 @@ class SilenceFormStore {
   // this form from that alert so user can easily silence that alert
   data = observable(
     {
-      currentStage: SilenceFormStage.UserInput,
+      currentStage: "form" as SilenceFormStageT,
       wasValidated: false as boolean,
       silenceID: null as null | undefined | string,
       alertmanagers: [] as MultiValueOptionT[],
@@ -337,7 +327,7 @@ class SilenceFormStore {
       },
 
       resetProgress() {
-        this.currentStage = SilenceFormStage.UserInput;
+        this.currentStage = "form";
         this.wasValidated = false;
       },
 
@@ -350,7 +340,7 @@ class SilenceFormStore {
       },
 
       setStageSubmit() {
-        this.currentStage = SilenceFormStage.Submit;
+        this.currentStage = "submit";
       },
 
       // append a new empty matcher to the list
@@ -495,10 +485,8 @@ class SilenceFormStore {
 
 export {
   SilenceFormStore,
-  SilenceFormStage,
   NewEmptyMatcher,
   AlertmanagerClustersToOption,
-  SilenceTabNames,
   MatchersFromGroup,
   GenerateAlertmanagerSilenceData,
   NewClusterRequest,