chore(tests): rewrite storybook stories as typescript

ui/Makefile

@@ -43,7 +43,7 @@ lint-deps: node_modules/depcheck/bin/depcheck.js
 
 .PHONY: lint-typescript
 lint-typescript:
-	@$(eval JSFILES := $(shell find $(CURDIR)/src/Components -name \*.js -not -name \*.test.js  -not -name \*.stories.js))
+	@$(eval JSFILES := $(shell find $(CURDIR)/src/Components -name \*.js -not -name \*.test.js))
 	@if [ "$(JSFILES)" != "" ]; then echo "$(JSFILES)" | tr " " "\n"; exit 1 ; fi
 
 .PHONY: format

ui/src/Components/Grid/index.stories.tsx

@@ -45,7 +45,7 @@ storiesOf("Grid", module)
   })
   .add("AlertGrid", () => {
     const alertStore = new AlertStore([]);
-    const settingsStore = new Settings();
+    const settingsStore = new Settings(null);
     const silenceFormStore = new SilenceFormStore();
 
     MockGrid(alertStore);

ui/src/Components/MainModal/index.stories.tsx

@@ -20,7 +20,7 @@ storiesOf("MainModal", module)
   ))
   .add("Configuration", () => {
     const alertStore = new AlertStore([]);
-    const settingsStore = new Settings();
+    const settingsStore = new Settings(null);
 
     fetchMock.mock(
       "begin:/label",
@@ -41,20 +41,18 @@ storiesOf("MainModal", module)
         alertStore={alertStore}
         settingsStore={settingsStore}
         onHide={() => {}}
-        isVisible={true}
         expandAllOptions={true}
       />
     );
   })
   .add("Help", () => {
     const alertStore = new AlertStore([]);
-    const settingsStore = new Settings();
+    const settingsStore = new Settings(null);
     return (
       <MainModalContent
         alertStore={alertStore}
         settingsStore={settingsStore}
         onHide={() => {}}
-        isVisible={true}
         openTab={"help"}
         expandAllOptions={true}
       />

ui/src/Components/ManagedSilence/index.stories.tsx

@@ -23,6 +23,7 @@ storiesOf("ManagedSilence", module)
     const cluster = "am";
 
     alertStore.data.upstreams = {
+      counters: { healthy: 1, failed: 0, total: 1 },
       instances: [
         {
           name: "am1",
@@ -42,6 +43,7 @@ storiesOf("ManagedSilence", module)
 
     const alertStoreReadOnly = new AlertStore([]);
     alertStoreReadOnly.data.upstreams = {
+      counters: { healthy: 1, failed: 0, total: 1 },
       clusters: { ro: ["readonly"] },
       instances: [
         {

ui/src/Components/NavBar/index.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
+import { AlertStore, NewUnappliedFilter, FilterT } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { HistoryMenu } from "./FilterInput/History";
@@ -10,7 +10,15 @@ import { NavBar } from ".";
 
 import "Styles/Percy.scss";
 
-const NewFilter = (raw, name, matcher, value, applied, isValid, hits) => {
+const NewFilter = (
+  raw: string,
+  name: string,
+  matcher: string,
+  value: string,
+  applied: boolean,
+  isValid: boolean,
+  hits: number
+): FilterT => {
   const filter = NewUnappliedFilter(raw);
   filter.name = name;
   filter.matcher = matcher;
@@ -23,7 +31,7 @@ const NewFilter = (raw, name, matcher, value, applied, isValid, hits) => {
 
 storiesOf("NavBar", module).add("NavBar", () => {
   const alertStore = new AlertStore([]);
-  const settingsStore = new Settings();
+  const settingsStore = new Settings(null);
   const silenceFormStore = new SilenceFormStore();
 
   alertStore.info.totalAlerts = 197;
@@ -113,8 +121,6 @@ storiesOf("NavBar", module).add("NavBar", () => {
         alertStore={alertStore}
         settingsStore={settingsStore}
         afterClick={() => {}}
-        handleClickOutside={() => {}}
-        outsideClickIgnoreClass="components-navbar-history"
       />
     </React.Fragment>
   );

ui/src/Components/OverviewModal/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 
 import { storiesOf } from "@storybook/react";
 
@@ -9,7 +9,7 @@ import { OverviewModalContent } from "./OverviewModalContent";
 import "Styles/Percy.scss";
 
 storiesOf("OverviewModal", module).add("OverviewModal", () => {
-  const Modal = ({ children }) => (
+  const Modal: FC = ({ children }) => (
     <div>
       <div className="modal-dialog modal-lg" role="document">
         <div className="modal-content">{children}</div>

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 
 import fetchMock from "fetch-mock";
 
@@ -10,14 +10,22 @@ import addDays from "date-fns/addDays";
 import { MockSilence } from "__mocks__/Alerts";
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
-import { SilenceFormStore, NewEmptyMatcher } from "Stores/SilenceFormStore";
+import {
+  SilenceFormStore,
+  NewEmptyMatcher,
+  MatcherWithIDT,
+} from "Stores/SilenceFormStore";
 import { StringToOption } from "Common/Select";
 import { DateTimeSelect } from "./DateTimeSelect";
 import { SilenceModalContent } from "./SilenceModalContent";
 
 import "Styles/Percy.scss";
 
-const MockMatcher = (name, values, isRegex) => {
+const MockMatcher = (
+  name: string,
+  values: string[],
+  isRegex: boolean
+): MatcherWithIDT => {
   const matcher = NewEmptyMatcher();
   matcher.name = name;
   matcher.values = values.map((v) => StringToOption(v));
@@ -25,7 +33,7 @@ const MockMatcher = (name, values, isRegex) => {
   return matcher;
 };
 
-const Modal = ({ children }) => (
+const Modal: FC = ({ children }) => (
   <div>
     <div className="modal-dialog modal-lg" role="document">
       <div className="modal-content">{children}</div>
@@ -36,13 +44,14 @@ const Modal = ({ children }) => (
 storiesOf("SilenceModal", module)
   .add("Editor", () => {
     const alertStore = new AlertStore([]);
-    const settingsStore = new Settings();
+    const settingsStore = new Settings(null);
     const silenceFormStore = new SilenceFormStore();
 
     alertStore.info.authentication.enabled = true;
     alertStore.info.authentication.username = "me@example.com";
 
     alertStore.data.upstreams = {
+      counters: { healthy: 3, failed: 0, total: 3 },
       clusters: { default: ["default"], HA: ["ha1", "ha2"] },
       instances: [
         {
@@ -146,6 +155,7 @@ storiesOf("SilenceModal", module)
 
     const alertStoreReadOnly = new AlertStore([]);
     alertStoreReadOnly.data.upstreams = {
+      counters: { healthy: 1, failed: 0, total: 1 },
       clusters: { default: ["readonly"] },
       instances: [
         {
@@ -204,12 +214,13 @@ storiesOf("SilenceModal", module)
   })
   .add("Browser", () => {
     const alertStore = new AlertStore([]);
-    const settingsStore = new Settings();
+    const settingsStore = new Settings(null);
     const silenceFormStore = new SilenceFormStore();
 
     silenceFormStore.tab.current = "browser";
 
     alertStore.data.upstreams = {
+      counters: { healthy: 1, failed: 0, total: 1 },
       instances: [
         {
           name: "am1",
@@ -267,12 +278,13 @@ storiesOf("SilenceModal", module)
   })
   .add("Empty Browser", () => {
     const alertStore = new AlertStore([]);
-    const settingsStore = new Settings();
+    const settingsStore = new Settings(null);
     const silenceFormStore = new SilenceFormStore();
 
     silenceFormStore.tab.current = "browser";
 
     alertStore.data.upstreams = {
+      counters: { healthy: 1, failed: 0, total: 1 },
       instances: [
         {
           name: "am1",