From ccc44b042a854e004537fbe8822b318778d9de7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 12 Dec 2019 22:25:39 +0000
Subject: [PATCH] feat(storybook): add more stories

---
 .../Components/OverviewModal/index.stories.js | 28 ++++++++-----
 .../Components/SilenceModal/index.stories.js  | 39 +++++++++++++++++++
 2 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/ui/src/Components/OverviewModal/index.stories.js b/ui/src/Components/OverviewModal/index.stories.js
index 5309c31ab..002bb937d 100644
--- a/ui/src/Components/OverviewModal/index.stories.js
+++ b/ui/src/Components/OverviewModal/index.stories.js
@@ -8,18 +8,28 @@ import { OverviewModalContent } from "./OverviewModalContent";
 
 import "Styles/Percy.scss";
 
-storiesOf("OverviewModal", module)
-  .addDecorator(storyFn => (
+storiesOf("OverviewModal", module).add("OverviewModal", () => {
+  const Modal = ({ children }) => (
     <div>
       <div className="modal-dialog modal-lg" role="document">
-        <div className="modal-content">{storyFn()}</div>
+        <div className="modal-content">{children}</div>
       </div>
     </div>
-  ))
-  .add("OverviewModal", () => {
-    const alertStore = new AlertStore([]);
+  );
 
-    MockGrid(alertStore);
+  const alertStore = new AlertStore([]);
+  MockGrid(alertStore);
 
-    return <OverviewModalContent alertStore={alertStore} onHide={() => {}} />;
-  });
+  const emptyAlertStore = new AlertStore([]);
+
+  return (
+    <div>
+      <Modal>
+        <OverviewModalContent alertStore={alertStore} onHide={() => {}} />
+      </Modal>
+      <Modal>
+        <OverviewModalContent alertStore={emptyAlertStore} onHide={() => {}} />
+      </Modal>
+    </div>
+  );
+});
diff --git a/ui/src/Components/SilenceModal/index.stories.js b/ui/src/Components/SilenceModal/index.stories.js
index 4edf22ec8..ca59f129e 100644
--- a/ui/src/Components/SilenceModal/index.stories.js
+++ b/ui/src/Components/SilenceModal/index.stories.js
@@ -177,6 +177,45 @@ storiesOf("SilenceModal", module)
       overwriteRoutes: true
     });
 
+    return (
+      <Modal>
+        <SilenceModalContent
+          alertStore={alertStore}
+          silenceFormStore={silenceFormStore}
+          settingsStore={settingsStore}
+          onHide={() => {}}
+          onDeleteModalClose={() => {}}
+        />
+      </Modal>
+    );
+  })
+  .add("Empty Browser", () => {
+    const alertStore = new AlertStore([]);
+    const settingsStore = new Settings();
+    const silenceFormStore = new SilenceFormStore();
+
+    silenceFormStore.tab.current = SilenceTabNames.Browser;
+
+    alertStore.data.upstreams = {
+      instances: [
+        {
+          name: "am1",
+          cluster: "am",
+          clusterMembers: ["am1"],
+          uri: "http://localhost:9093",
+          publicURI: "http://example.com",
+          error: "",
+          version: "0.15.3",
+          headers: {}
+        }
+      ],
+      clusters: { am: ["am1"] }
+    };
+
+    fetchMock.mock("begin:/silences.json?", [], {
+      overwriteRoutes: true
+    });
+
     return (
       <Modal>
         <SilenceModalContent