From acae2cb2a57059ef3ce30d36e0aae9228d9c27db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 30 Oct 2019 13:44:18 +0000
Subject: [PATCH] chore(ui): remove all usage of Provider component

---
 ui/src/App.tsx                                | 14 +++----
 .../AlertGroup/Alert/AlertMenu.test.js        | 42 ++++++++-----------
 .../AlertGrid/AlertGroup/Alert/index.test.js  | 24 +++++------
 .../AlertGroup/GroupFooter/index.test.js      | 18 ++++----
 .../AlertGroup/GroupHeader/GroupMenu.test.js  | 38 +++++++----------
 .../Grid/AlertGrid/AlertGroup/index.test.js   | 20 ++++-----
 ui/src/Components/Grid/index.stories.js       | 14 +++----
 .../OverviewModalContent.test.js              |  6 +--
 ui/src/Components/OverviewModal/index.js      | 14 +++----
 .../Components/SilenceModal/Browser/index.js  | 34 +++++++--------
 10 files changed, 92 insertions(+), 132 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index f3e7abd5f..2f50957d0 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,7 +1,5 @@
 import React, { Component } from "react";
 
-import { Provider } from "mobx-react";
-
 import { AlertStore, DecodeLocationSearch } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -92,13 +90,11 @@ class App extends Component<AppProps, {}> {
           settingsStore={this.settingsStore}
           silenceFormStore={this.silenceFormStore}
         />
-        <Provider alertStore={this.alertStore}>
-          <Grid
-            alertStore={this.alertStore}
-            settingsStore={this.settingsStore}
-            silenceFormStore={this.silenceFormStore}
-          />
-        </Provider>
+        <Grid
+          alertStore={this.alertStore}
+          settingsStore={this.settingsStore}
+          silenceFormStore={this.silenceFormStore}
+        />
         <Fetcher
           alertStore={this.alertStore}
           settingsStore={this.settingsStore}
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js
index 4576ee460..4381e97c5 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js
@@ -1,7 +1,5 @@
 import React from "react";
 
-import { Provider } from "mobx-react";
-
 import { mount } from "enzyme";
 
 import { MockAlertGroup, MockAlert } from "__mocks__/Alerts.js";
@@ -26,16 +24,14 @@ const MockSetIsMenuOpen = jest.fn();
 
 const MountedAlertMenu = group => {
   return mount(
-    <Provider alertStore={alertStore}>
-      <AlertMenu
-        group={group}
-        alert={alert}
-        alertStore={alertStore}
-        silenceFormStore={silenceFormStore}
-        setIsMenuOpen={MockSetIsMenuOpen}
-      />
-    </Provider>
-  ).find("AlertMenu");
+    <AlertMenu
+      group={group}
+      alert={alert}
+      alertStore={alertStore}
+      silenceFormStore={silenceFormStore}
+      setIsMenuOpen={MockSetIsMenuOpen}
+    />
+  );
 };
 
 describe("<AlertMenu />", () => {
@@ -65,18 +61,16 @@ describe("<AlertMenu />", () => {
 
 const MountedMenuContent = group => {
   return mount(
-    <Provider alertStore={alertStore}>
-      <MenuContent
-        popperPlacement="top"
-        popperRef={null}
-        popperStyle={{}}
-        group={group}
-        alert={alert}
-        afterClick={MockAfterClick}
-        alertStore={alertStore}
-        silenceFormStore={silenceFormStore}
-      />
-    </Provider>
+    <MenuContent
+      popperPlacement="top"
+      popperRef={null}
+      popperStyle={{}}
+      group={group}
+      alert={alert}
+      afterClick={MockAfterClick}
+      alertStore={alertStore}
+      silenceFormStore={silenceFormStore}
+    />
   );
 };
 
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js
index 9e107b427..65256e2b6 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js
@@ -1,7 +1,5 @@
 import React from "react";
 
-import { Provider } from "mobx-react";
-
 import { mount } from "enzyme";
 
 import { advanceTo, clear } from "jest-date-mock";
@@ -53,18 +51,16 @@ const MockedAlert = () => {
 
 const MountedAlert = (alert, group, showAlertmanagers, showReceiver) => {
   return mount(
-    <Provider alertStore={alertStore}>
-      <Alert
-        alert={alert}
-        group={group}
-        showAlertmanagers={showAlertmanagers}
-        showReceiver={showReceiver}
-        afterUpdate={MockAfterUpdate}
-        alertStore={alertStore}
-        silenceFormStore={silenceFormStore}
-        setIsMenuOpen={MockSetIsMenuOpen}
-      />
-    </Provider>
+    <Alert
+      alert={alert}
+      group={group}
+      showAlertmanagers={showAlertmanagers}
+      showReceiver={showReceiver}
+      afterUpdate={MockAfterUpdate}
+      alertStore={alertStore}
+      silenceFormStore={silenceFormStore}
+      setIsMenuOpen={MockSetIsMenuOpen}
+    />
   );
 };
 
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.js
index 8da6f29e3..38d749e07 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.js
@@ -1,7 +1,5 @@
 import React from "react";
 
-import { Provider } from "mobx-react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";
@@ -59,15 +57,13 @@ afterEach(() => {
 
 const MountedGroupFooter = () => {
   return mount(
-    <Provider alertStore={alertStore}>
-      <GroupFooter
-        group={group}
-        alertmanagers={["default"]}
-        afterUpdate={MockAfterUpdate}
-        alertStore={alertStore}
-        silenceFormStore={silenceFormStore}
-      />
-    </Provider>
+    <GroupFooter
+      group={group}
+      alertmanagers={["default"]}
+      afterUpdate={MockAfterUpdate}
+      alertStore={alertStore}
+      silenceFormStore={silenceFormStore}
+    />
   );
 };
 
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.js
index d910183d5..616c5b17a 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.js
@@ -1,7 +1,5 @@
 import React from "react";
 
-import { Provider } from "mobx-react";
-
 import { mount } from "enzyme";
 
 import copy from "copy-to-clipboard";
@@ -24,15 +22,13 @@ const MockSetIsMenuOpen = jest.fn();
 
 const MountedGroupMenu = (group, themed) => {
   return mount(
-    <Provider alertStore={alertStore}>
-      <GroupMenu
-        group={group}
-        alertStore={alertStore}
-        silenceFormStore={silenceFormStore}
-        themed={themed}
-        setIsMenuOpen={MockSetIsMenuOpen}
-      />
-    </Provider>
+    <GroupMenu
+      group={group}
+      alertStore={alertStore}
+      silenceFormStore={silenceFormStore}
+      themed={themed}
+      setIsMenuOpen={MockSetIsMenuOpen}
+    />
   ).find("GroupMenu");
 };
 
@@ -67,17 +63,15 @@ describe("<GroupMenu />", () => {
 
 const MountedMenuContent = group => {
   return mount(
-    <Provider alertStore={alertStore}>
-      <MenuContent
-        popperPlacement="top"
-        popperRef={null}
-        popperStyle={{}}
-        group={group}
-        afterClick={MockAfterClick}
-        alertStore={alertStore}
-        silenceFormStore={silenceFormStore}
-      />
-    </Provider>
+    <MenuContent
+      popperPlacement="top"
+      popperRef={null}
+      popperStyle={{}}
+      group={group}
+      afterClick={MockAfterClick}
+      alertStore={alertStore}
+      silenceFormStore={silenceFormStore}
+    />
   );
 };
 
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
index c79616719..9d8361281 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
@@ -1,7 +1,5 @@
 import React from "react";
 
-import { Provider } from "mobx-react";
-
 import { mount } from "enzyme";
 
 import moment from "moment";
@@ -58,16 +56,14 @@ const MockAlerts = alertCount => {
 
 const MountedAlertGroup = (afterUpdate, showAlertmanagers) => {
   return mount(
-    <Provider alertStore={alertStore}>
-      <AlertGroup
-        afterUpdate={afterUpdate}
-        group={group}
-        showAlertmanagers={showAlertmanagers}
-        settingsStore={settingsStore}
-        alertStore={alertStore}
-        silenceFormStore={silenceFormStore}
-      />
-    </Provider>
+    <AlertGroup
+      afterUpdate={afterUpdate}
+      group={group}
+      showAlertmanagers={showAlertmanagers}
+      settingsStore={settingsStore}
+      alertStore={alertStore}
+      silenceFormStore={silenceFormStore}
+    />
   );
 };
 
diff --git a/ui/src/Components/Grid/index.stories.js b/ui/src/Components/Grid/index.stories.js
index e5d488106..84e7eaf8f 100644
--- a/ui/src/Components/Grid/index.stories.js
+++ b/ui/src/Components/Grid/index.stories.js
@@ -2,8 +2,6 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Provider } from "mobx-react";
-
 import moment from "moment";
 
 import { MockAlert, MockAlertGroup } from "__mocks__/Alerts.js";
@@ -173,12 +171,10 @@ storiesOf("Grid", module)
     alertStore.data.groups = groups;
 
     return (
-      <Provider alertStore={alertStore}>
-        <Grid
-          alertStore={alertStore}
-          settingsStore={settingsStore}
-          silenceFormStore={silenceFormStore}
-        />
-      </Provider>
+      <Grid
+        alertStore={alertStore}
+        settingsStore={settingsStore}
+        silenceFormStore={silenceFormStore}
+      />
     );
   });
diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.test.js b/ui/src/Components/OverviewModal/OverviewModalContent.test.js
index ffa1ede25..fb3174178 100644
--- a/ui/src/Components/OverviewModal/OverviewModalContent.test.js
+++ b/ui/src/Components/OverviewModal/OverviewModalContent.test.js
@@ -1,7 +1,5 @@
 import React from "react";
 
-import { Provider } from "mobx-react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";
@@ -27,9 +25,7 @@ const MountedOverviewModalContent = () =>
   // https://github.com/airbnb/enzyme/issues/1213
   mount(
     <span>
-      <Provider alertStore={alertStore}>
-        <OverviewModalContent alertStore={alertStore} onHide={onHide} />
-      </Provider>
+      <OverviewModalContent alertStore={alertStore} onHide={onHide} />
     </span>
   );
 
diff --git a/ui/src/Components/OverviewModal/index.js b/ui/src/Components/OverviewModal/index.js
index 2263870e2..f7737babe 100644
--- a/ui/src/Components/OverviewModal/index.js
+++ b/ui/src/Components/OverviewModal/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
-import { observer, Provider } from "mobx-react";
+import { observer } from "mobx-react";
 import { observable, action } from "mobx";
 
 import Flash from "react-reveal/Flash";
@@ -70,13 +70,11 @@ const OverviewModal = observer(
                 </h1>
               }
             >
-              <Provider alertStore={alertStore}>
-                <OverviewModalContent
-                  alertStore={alertStore}
-                  onHide={this.toggle.hide}
-                  isVisible={this.toggle.show}
-                />
-              </Provider>
+              <OverviewModalContent
+                alertStore={alertStore}
+                onHide={this.toggle.hide}
+                isVisible={this.toggle.show}
+              />
             </React.Suspense>
           </Modal>
         </React.Fragment>
diff --git a/ui/src/Components/SilenceModal/Browser/index.js b/ui/src/Components/SilenceModal/Browser/index.js
index 0dfbb7c58..2183aa207 100644
--- a/ui/src/Components/SilenceModal/Browser/index.js
+++ b/ui/src/Components/SilenceModal/Browser/index.js
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import { observable, action } from "mobx";
-import { observer, Provider } from "mobx-react";
+import { observer } from "mobx-react";
 
 import { debounce } from "lodash";
 
@@ -232,23 +232,21 @@ const Browser = observer(
               <Placeholder content="Nothing to show" />
             ) : (
               <React.Fragment>
-                <Provider alertStore={alertStore}>
-                  {this.dataSource.silences
-                    .slice(
-                      (this.pagination.activePage - 1) * this.maxPerPage,
-                      this.pagination.activePage * this.maxPerPage
-                    )
-                    .map(silence => (
-                      <ManagedSilence
-                        key={`${silence.cluster}/${silence.silence.id}`}
-                        cluster={silence.cluster}
-                        silence={silence.silence}
-                        alertStore={alertStore}
-                        silenceFormStore={silenceFormStore}
-                        onDeleteModalClose={onDeleteModalClose}
-                      />
-                    ))}
-                </Provider>
+                {this.dataSource.silences
+                  .slice(
+                    (this.pagination.activePage - 1) * this.maxPerPage,
+                    this.pagination.activePage * this.maxPerPage
+                  )
+                  .map(silence => (
+                    <ManagedSilence
+                      key={`${silence.cluster}/${silence.silence.id}`}
+                      cluster={silence.cluster}
+                      silence={silence.silence}
+                      alertStore={alertStore}
+                      silenceFormStore={silenceFormStore}
+                      onDeleteModalClose={onDeleteModalClose}
+                    />
+                  ))}
                 {this.dataSource.silences.length > this.maxPerPage ? (
                   <div className="mt-3">
                     <Pagination