chore(ui): avoid using inject in FilteringCounterBadge

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={`${

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 };