From 0bf5ec1b7232035f37283c16fa82bf4c9963f96b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 30 Oct 2019 13:29:17 +0000
Subject: [PATCH] chore(ui): avoid using inject in FilteringCounterBadge

---
 .../AlertGrid/AlertGroup/GroupHeader/index.js |  3 +
 .../Labels/FilteringCounterBadge/index.js     | 84 +++++++++----------
 2 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
index caa3a0520..9b3e4b760 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
@@ -69,18 +69,21 @@ const GroupHeader = observer(
               value="unprocessed"
               counter={group.stateCount.unprocessed}
               themed={themedCounters}
+              alertStore={alertStore}
             />
             <FilteringCounterBadge
               name="@state"
               value="suppressed"
               counter={group.stateCount.suppressed}
               themed={themedCounters}
+              alertStore={alertStore}
             />
             <FilteringCounterBadge
               name="@state"
               value="active"
               counter={group.stateCount.active}
               themed={themedCounters}
+              alertStore={alertStore}
             />
             <span
               className={`${
diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.js b/ui/src/Components/Labels/FilteringCounterBadge/index.js
index af4d9524a..200b11582 100644
--- a/ui/src/Components/Labels/FilteringCounterBadge/index.js
+++ b/ui/src/Components/Labels/FilteringCounterBadge/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 
 import Flash from "react-reveal/Flash";
 
@@ -12,53 +12,51 @@ import { BaseLabel } from "Components/Labels/BaseLabel";
 // Same as FilteringLabel but for labels that are counters (usually @state)
 // and only renders a pill badge with the counter, it doesn't render anything
 // if the counter is 0
-const FilteringCounterBadge = inject("alertStore")(
-  observer(
-    class FilteringCounterBadge extends BaseLabel {
-      static propTypes = {
-        alertStore: PropTypes.instanceOf(AlertStore).isRequired,
-        name: PropTypes.string.isRequired,
-        value: PropTypes.string.isRequired,
-        counter: PropTypes.number.isRequired,
-        themed: PropTypes.bool.isRequired
-      };
+const FilteringCounterBadge = observer(
+  class FilteringCounterBadge extends BaseLabel {
+    static propTypes = {
+      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+      name: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+      counter: PropTypes.number.isRequired,
+      themed: PropTypes.bool.isRequired
+    };
 
-      render() {
-        const { name, value, counter, themed } = this.props;
+    render() {
+      const { name, value, counter, themed } = this.props;
 
-        if (counter === 0) return null;
+      if (counter === 0) return null;
 
-        const cs = this.getClassAndStyle(
-          name,
-          value,
-          "badge-pill components-label-with-hover"
-        );
+      const cs = this.getClassAndStyle(
+        name,
+        value,
+        "badge-pill components-label-with-hover"
+      );
 
-        return (
-          <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>
-          </TooltipWrapper>
-        );
-      }
+      return (
+        <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>
+        </TooltipWrapper>
+      );
     }
-  )
+  }
 );
 
 export { FilteringCounterBadge };