fix(ui): rewrite OverviewModalContent with hooks

ui/src/Components/OverviewModal/OverviewModalContent.js

@@ -1,8 +1,7 @@
-import React, { Component } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
-import { observable, action } from "mobx";
+import { observer, useLocalStore } from "mobx-react";
 
 import { AlertStore } from "Stores/AlertStore";
 import { TooltipWrapper } from "Components/TooltipWrapper";
@@ -100,51 +99,38 @@ const NothingToShow = () => (
   </div>
 );
 
-const OverviewModalContent = observer(
-  class OverviewModalContent extends Component {
-    static propTypes = {
-      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
-      onHide: PropTypes.func.isRequired,
-    };
-
-    allLabels = observable(
-      {
-        show: false,
-        toggle() {
-          this.show = !this.show;
-        },
-      },
-      {
-        toggle: action.bound,
-      }
-    );
-
-    render() {
-      const { alertStore, onHide } = this.props;
-
-      return (
-        <React.Fragment>
-          <div className="modal-header">
-            <h5 className="modal-title">Overview</h5>
-            <button type="button" className="close" onClick={onHide}>
-              <span className="align-middle">&times;</span>
-            </button>
-          </div>
-          <div className="modal-body">
-            {alertStore.data.counters.length === 0 ? (
-              <NothingToShow />
-            ) : (
-              <LabelsTable
-                alertStore={alertStore}
-                showAllLabels={this.allLabels.show}
-                toggleAllLabels={this.allLabels.toggle}
-              />
-            )}
-          </div>
-        </React.Fragment>
-      );
-    }
-  }
-);
+const OverviewModalContent = observer(({ alertStore, onHide }) => {
+  const allLabels = useLocalStore(() => ({
+    show: false,
+    toggle() {
+      this.show = !this.show;
+    },
+  }));
+  return (
+    <React.Fragment>
+      <div className="modal-header">
+        <h5 className="modal-title">Overview</h5>
+        <button type="button" className="close" onClick={onHide}>
+          <span className="align-middle">&times;</span>
+        </button>
+      </div>
+      <div className="modal-body">
+        {alertStore.data.counters.length === 0 ? (
+          <NothingToShow />
+        ) : (
+          <LabelsTable
+            alertStore={alertStore}
+            showAllLabels={allLabels.show}
+            toggleAllLabels={allLabels.toggle}
+          />
+        )}
+      </div>
+    </React.Fragment>
+  );
+});
+OverviewModalContent.propTypes = {
+  alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+  onHide: PropTypes.func.isRequired,
+};
 
 export { OverviewModalContent };

ui/src/Components/OverviewModal/index.test.js

@@ -38,7 +38,7 @@ describe("<OverviewModal />", () => {
     const tree = MountedOverviewModal();
     const toggle = tree.find("div.navbar-brand");
     toggle.simulate("click");
-    expect(tree.find("OverviewModalContent")).toHaveLength(1);
+    expect(tree.find(".modal-title").text()).toBe("Overview");
     expect(tree.find(".modal-content").find("svg.fa-spinner")).toHaveLength(0);
   });
 
@@ -49,12 +49,12 @@ describe("<OverviewModal />", () => {
     toggle.simulate("click");
     jest.runOnlyPendingTimers();
     tree.update();
-    expect(tree.find("OverviewModalContent")).toHaveLength(1);
+    expect(tree.find(".modal-title").text()).toBe("Overview");
 
     toggle.simulate("click");
     jest.runOnlyPendingTimers();
     tree.update();
-    expect(tree.find("OverviewModalContent")).toHaveLength(0);
+    expect(tree.find(".modal-title")).toHaveLength(0);
   });
 
   it("hides the modal when hide() is called", () => {
@@ -62,7 +62,7 @@ describe("<OverviewModal />", () => {
     const toggle = tree.find("div.navbar-brand");
 
     toggle.simulate("click");
-    expect(tree.find("OverviewModalContent")).toHaveLength(1);
+    expect(tree.find(".modal-title").text()).toBe("Overview");
 
     const instance = tree.instance();
     instance.toggle.hide();