fix(ui): drop useLocalStore from AlertGroup

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js

@@ -1,7 +1,7 @@
-import React, { useRef } from "react";
+import React, { useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver, useLocalStore } from "mobx-react";
+import { useObserver } from "mobx-react";
 
 import { Manager, Reference, Popper } from "react-popper";
 
@@ -99,20 +99,20 @@ const AlertMenu = ({
   silenceFormStore,
   setIsMenuOpen,
 }) => {
-  const collapse = useLocalStore(() => ({
-    isHidden: true,
-    toggle() {
-      this.isHidden = !this.isHidden;
-      setIsMenuOpen(!this.isHidden);
-    },
-    hide() {
-      this.isHidden = true;
-      setIsMenuOpen(!this.isHidden);
-    },
-  }));
+  const [isHidden, setIsHidden] = useState(true);
+
+  const toggle = useCallback(() => {
+    setIsMenuOpen(isHidden);
+    setIsHidden(!isHidden);
+  }, [isHidden, setIsMenuOpen]);
+
+  const hide = useCallback(() => {
+    setIsHidden(true);
+    setIsMenuOpen(false);
+  }, [setIsMenuOpen]);
 
   const rootRef = useRef(null);
-  useOnClickOutside(rootRef, collapse.hide, !collapse.isHidden);
+  useOnClickOutside(rootRef, hide, !isHidden);
 
   return useObserver(() => (
     <span ref={rootRef}>
@@ -122,7 +122,7 @@ const AlertMenu = ({
             <span
               className="components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer"
               ref={ref}
-              onClick={collapse.toggle}
+              onClick={toggle}
               data-toggle="dropdown"
             >
               <FontAwesomeIcon
@@ -134,7 +134,7 @@ const AlertMenu = ({
             </span>
           )}
         </Reference>
-        <DropdownSlide in={!collapse.isHidden} unmountOnExit>
+        <DropdownSlide in={!isHidden} unmountOnExit>
           <Popper
             placement="bottom-start"
             modifiers={[
@@ -151,7 +151,7 @@ const AlertMenu = ({
                 alert={alert}
                 alertStore={alertStore}
                 silenceFormStore={silenceFormStore}
-                afterClick={collapse.hide}
+                afterClick={hide}
               />
             )}
           </Popper>

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js

@@ -1,8 +1,6 @@
-import React, { useRef } from "react";
+import React, { useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver, useLocalStore } from "mobx-react";
-
 import copy from "copy-to-clipboard";
 
 import { Manager, Reference, Popper } from "react-popper";
@@ -105,29 +103,29 @@ const GroupMenu = ({
   themed,
   setIsMenuOpen,
 }) => {
-  const collapse = useLocalStore(() => ({
-    isHidden: true,
-    toggle() {
-      this.isHidden = !this.isHidden;
-      setIsMenuOpen(!this.isHidden);
-    },
-    hide() {
-      this.isHidden = true;
-      setIsMenuOpen(!this.isHidden);
-    },
-  }));
+  const [isHidden, setIsHidden] = useState(true);
+
+  const toggle = useCallback(() => {
+    setIsMenuOpen(isHidden);
+    setIsHidden(!isHidden);
+  }, [isHidden, setIsMenuOpen]);
+
+  const hide = useCallback(() => {
+    setIsHidden(true);
+    setIsMenuOpen(false);
+  }, [setIsMenuOpen]);
 
   const rootRef = useRef(null);
-  useOnClickOutside(rootRef, collapse.hide, !collapse.isHidden);
+  useOnClickOutside(rootRef, hide, !isHidden);
 
-  return useObserver(() => (
+  return (
     <span ref={rootRef}>
       <Manager>
         <Reference>
           {({ ref }) => (
             <span
               ref={ref}
-              onClick={collapse.toggle}
+              onClick={toggle}
               className={`${
                 themed ? "text-white" : "text-muted"
               } cursor-pointer badge pl-0 pr-3 pr-sm-2 components-label mr-0`}
@@ -137,7 +135,7 @@ const GroupMenu = ({
             </span>
           )}
         </Reference>
-        <DropdownSlide in={!collapse.isHidden} unmountOnExit>
+        <DropdownSlide in={!isHidden} unmountOnExit>
           <Popper
             placement="bottom-start"
             modifiers={[
@@ -153,14 +151,14 @@ const GroupMenu = ({
                 group={group}
                 alertStore={alertStore}
                 silenceFormStore={silenceFormStore}
-                afterClick={collapse.hide}
+                afterClick={hide}
               />
             )}
           </Popper>
         </DropdownSlide>
       </Manager>
     </span>
-  ));
+  );
 };
 GroupMenu.propTypes = {
   group: APIGroup.isRequired,

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js

@@ -14,7 +14,8 @@ import { ToggleIcon } from "Components/ToggleIcon";
 import { GroupMenu } from "./GroupMenu";
 
 const GroupHeader = ({
-  collapseStore,
+  isCollapsed,
+  setIsCollapsed,
   group,
   alertStore,
   silenceFormStore,
@@ -25,13 +26,13 @@ const GroupHeader = ({
   const onCollapseClick = (event) => {
     // left click       => toggle current group
     // left click + alt => toggle all groups
-    collapseStore.toggle();
+    setIsCollapsed(!isCollapsed);
 
     if (event.altKey === true) {
       const toggleEvent = new CustomEvent("alertGroupCollapse", {
         detail: {
           gridLabelValue: gridLabelValue,
-          value: collapseStore.value,
+          value: !isCollapsed,
         },
       });
       window.dispatchEvent(toggleEvent);
@@ -41,7 +42,7 @@ const GroupHeader = ({
   return useObserver(() => (
     <h5
       className={`card-header mb-0 d-flex flex-row px-2 py-1 ${
-        collapseStore.value ? "border-bottom-0" : ""
+        isCollapsed ? "border-bottom-0" : ""
       }`}
     >
       <span className="flex-shrink-0 flex-grow-0">
@@ -99,7 +100,7 @@ const GroupHeader = ({
           onClick={onCollapseClick}
         >
           <TooltipWrapper title="Click to toggle this group details or Alt+Click to toggle all groups">
-            <ToggleIcon isOpen={!collapseStore.value} />
+            <ToggleIcon isOpen={!isCollapsed} />
           </TooltipWrapper>
         </span>
       </span>
@@ -107,10 +108,8 @@ const GroupHeader = ({
   ));
 };
 GroupHeader.propTypes = {
-  collapseStore: PropTypes.shape({
-    value: PropTypes.bool.isRequired,
-    toggle: PropTypes.func.isRequired,
-  }).isRequired,
+  isCollapsed: PropTypes.bool.isRequired,
+  setIsCollapsed: PropTypes.func.isRequired,
   group: APIGroup.isRequired,
   alertStore: PropTypes.instanceOf(AlertStore).isRequired,
   silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,

ui/src/Components/Grid/AlertGrid/AlertGroup/index.js

@@ -1,8 +1,8 @@
-import React, { useEffect, useCallback, useRef } from "react";
+import React, { useEffect, useCallback, useRef, useState } from "react";
 import PropTypes from "prop-types";
 
 import { toJS } from "mobx";
-import { useObserver, useLocalStore } from "mobx-react";
+import { useObserver } from "mobx-react";
 
 import { Fade } from "react-reveal";
 
@@ -61,23 +61,15 @@ const AlertGroup = ({
     settingsStore.alertGroupConfig.config.defaultRenderCount
   );
 
-  const renderConfig = useLocalStore(() => ({
-    alertsToRender: initialAlertsToRender || defaultRenderCount,
-    isMenuOpen: false,
-    setIsMenuOpen(val) {
-      this.isMenuOpen = val;
-    },
-  }));
+  const [alertsToRender, setAlertsToRender] = useState(
+    initialAlertsToRender || defaultRenderCount
+  );
 
-  const collapse = useLocalStore(() => ({
-    value: DefaultDetailsCollapseValue(settingsStore),
-    toggle() {
-      this.value = !this.value;
-    },
-    set(value) {
-      this.value = value;
-    },
-  }));
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const [isCollapsed, setIsCollapsed] = useState(
+    DefaultDetailsCollapseValue(settingsStore)
+  );
 
   // Used to calculate step size when loading more alerts.
   // Step is calculated from the excesive alert count
@@ -99,31 +91,23 @@ const AlertGroup = ({
 
   const loadMore = () => {
     const step = getStepSize(group.alerts.length);
-
     // show cur+step, but not more that total alert count
-    renderConfig.alertsToRender = Math.min(
-      renderConfig.alertsToRender + step,
-      group.alerts.length
-    );
+    setAlertsToRender(Math.min(alertsToRender + step, group.alerts.length));
   };
 
   const loadLess = () => {
     const step = getStepSize(group.alerts.length);
-
     // show cur-step, but not less than 1
-    renderConfig.alertsToRender = Math.max(
-      renderConfig.alertsToRender - step,
-      1
-    );
+    setAlertsToRender(Math.max(alertsToRender - step, 1));
   };
 
   const onAlertGroupCollapseEvent = useCallback(
     (event) => {
       if (event.detail.gridLabelValue === gridLabelValue) {
-        collapse.set(event.detail.value);
+        setIsCollapsed(event.detail.value);
       }
     },
-    [collapse, gridLabelValue]
+    [gridLabelValue]
   );
 
   useEffect(() => {
@@ -182,7 +166,7 @@ const AlertGroup = ({
       }`}
       style={{
         width: groupWidth,
-        zIndex: renderConfig.isMenuOpen ? 100 : null,
+        zIndex: isMenuOpen ? 100 : null,
       }}
     >
       <Fade
@@ -192,37 +176,36 @@ const AlertGroup = ({
       >
         <div className={`card ${cardBackgroundClass}`}>
           <GroupHeader
-            collapseStore={collapse}
+            isCollapsed={isCollapsed}
+            setIsCollapsed={setIsCollapsed}
             group={group}
             alertStore={alertStore}
             silenceFormStore={silenceFormStore}
             themedCounters={themedCounters}
-            setIsMenuOpen={renderConfig.setIsMenuOpen}
+            setIsMenuOpen={setIsMenuOpen}
             gridLabelValue={gridLabelValue}
           />
-          {collapse.value ? null : (
+          {isCollapsed ? null : (
             <div className="card-body px-2 py-1 components-grid-alertgrid-card">
               <ul className="list-group">
-                {group.alerts
-                  .slice(0, renderConfig.alertsToRender)
-                  .map((alert) => (
-                    <Alert
-                      key={alert.id}
-                      group={group}
-                      alert={alert}
-                      showAlertmanagers={
-                        showAlertmanagers && !showAlertmanagersInFooter
-                      }
-                      showReceiver={
-                        alertStore.data.receivers.length > 1 &&
-                        group.alerts.length === 1
-                      }
-                      afterUpdate={afterUpdate}
-                      alertStore={alertStore}
-                      silenceFormStore={silenceFormStore}
-                      setIsMenuOpen={renderConfig.setIsMenuOpen}
-                    />
-                  ))}
+                {group.alerts.slice(0, alertsToRender).map((alert) => (
+                  <Alert
+                    key={alert.id}
+                    group={group}
+                    alert={alert}
+                    showAlertmanagers={
+                      showAlertmanagers && !showAlertmanagersInFooter
+                    }
+                    showReceiver={
+                      alertStore.data.receivers.length > 1 &&
+                      group.alerts.length === 1
+                    }
+                    afterUpdate={afterUpdate}
+                    alertStore={alertStore}
+                    silenceFormStore={silenceFormStore}
+                    setIsMenuOpen={setIsMenuOpen}
+                  />
+                ))}
                 {group.alerts.length > defaultRenderCount ? (
                   <li className="list-group-item border-0 p-0 text-center bg-transparent">
                     <LoadButton
@@ -231,10 +214,7 @@ const AlertGroup = ({
                       tooltip="Show fewer alerts in this group"
                     />
                     <small className="text-muted mx-2">
-                      {Math.min(
-                        renderConfig.alertsToRender,
-                        group.alerts.length
-                      )}
+                      {Math.min(alertsToRender, group.alerts.length)}
                       {" of "}
                       {group.alerts.length}
                     </small>
@@ -248,7 +228,7 @@ const AlertGroup = ({
               </ul>
             </div>
           )}
-          {collapse.value === false && group.alerts.length > 1 ? (
+          {isCollapsed === false && group.alerts.length > 1 ? (
             <GroupFooter
               group={group}
               alertmanagers={footerAlertmanagers}