fix(ui): drop useLocalStore from ManagedSilence

ui/src/Components/ManagedSilence/SilenceProgress.js

@@ -1,6 +1,6 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
-import { useObserver, useLocalStore } from "mobx-react";
+import { useObserver } from "mobx-react";
 
 import moment from "moment";
 import Moment from "react-moment";
@@ -16,19 +16,16 @@ const calculatePercent = (startsAt, endsAt) => {
 };
 
 const SilenceProgress = ({ silence }) => {
-  const progress = useLocalStore(() => ({
-    value: calculatePercent(silence.startsAt, silence.endsAt),
-    setValue(val) {
-      this.value = val;
-    },
-  }));
+  const [progress, setProgress] = useState(
+    calculatePercent(silence.startsAt, silence.endsAt)
+  );
 
   useEffect(() => {
     const timer = setInterval(() => {
-      progress.setValue(calculatePercent(silence.startsAt, silence.endsAt));
+      setProgress(calculatePercent(silence.startsAt, silence.endsAt));
     }, 30 * 1000);
     return () => clearInterval(timer);
-  }, [progress, silence.startsAt, silence.endsAt]);
+  }, [silence.startsAt, silence.endsAt]);
 
   return useObserver(() =>
     moment(silence.endsAt) < moment() ? (
@@ -41,15 +38,15 @@ const SilenceProgress = ({ silence }) => {
         <div className="progress silence-progress">
           <div
             className={
-              progress.value > 90
+              progress > 90
                 ? "progress-bar bg-danger"
-                : progress.value > 75
+                : progress > 75
                 ? "progress-bar bg-warning"
                 : "progress-bar bg-success"
             }
             role="progressbar"
-            style={{ width: progress.value + "%" }}
-            aria-valuenow={progress.value}
+            style={{ width: progress + "%" }}
+            aria-valuenow={progress}
             aria-valuemin="0"
             aria-valuemax="100"
           />

ui/src/Components/ManagedSilence/SilenceProgress.test.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";
 
@@ -64,11 +65,11 @@ describe("<SilenceProgress />", () => {
     expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-success/);
 
     advanceTo(moment.utc([2000, 0, 1, 0, 50, 0]));
-    jest.runOnlyPendingTimers();
+    act(() => jest.runOnlyPendingTimers());
     expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-warning/);
 
     advanceTo(moment.utc([2000, 0, 1, 0, 55, 0]));
-    jest.runOnlyPendingTimers();
+    act(() => jest.runOnlyPendingTimers());
     expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-danger/);
   });
 

ui/src/Components/ManagedSilence/index.js

@@ -1,8 +1,6 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver, useLocalStore } from "mobx-react";
-
 import { Fade } from "react-reveal";
 
 import { APISilence } from "Models/API";
@@ -32,12 +30,7 @@ const ManagedSilence = ({
     if (onDidUpdate) onDidUpdate();
   });
 
-  const collapse = useLocalStore(() => ({
-    value: !isOpen,
-    toggle() {
-      this.value = !this.value;
-    },
-  }));
+  const [showDetails, setShowDetails] = useState(isOpen);
 
   const onEditSilence = () => {
     const alertmanager = GetAlertmanager(alertStore, cluster);
@@ -50,7 +43,7 @@ const ManagedSilence = ({
 
   const context = React.useContext(ThemeContext);
 
-  return useObserver(() => (
+  return (
     <Fade in={context.animations.in} duration={context.animations.duration}>
       <div className="card my-1 components-managed-silence">
         <div className="card-header rounded-0 border-bottom-0 px-3">
@@ -60,12 +53,12 @@ const ManagedSilence = ({
             silence={silence}
             alertCount={alertCount}
             alertCountAlwaysVisible={alertCountAlwaysVisible}
-            collapsed={collapse.value}
-            collapseToggle={collapse.toggle}
+            collapsed={!showDetails}
+            collapseToggle={() => setShowDetails(!showDetails)}
           />
         </div>
 
-        {collapse.value ? null : (
+        {showDetails ? (
           <div className="card-body pt-0">
             <SilenceDetails
               cluster={cluster}
@@ -76,10 +69,10 @@ const ManagedSilence = ({
               onDeleteModalClose={onDeleteModalClose}
             />
           </div>
-        )}
+        ) : null}
       </div>
     </Fade>
-  ));
+  );
 };
 ManagedSilence.propTypes = {
   cluster: PropTypes.string.isRequired,