fix(ui): rewrite RenderNonLinkAnnotation with hooks

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

@@ -1,8 +1,7 @@
-import React, { Component } from "react";
+import React, { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 
-import { observable, action } from "mobx";
-import { observer } from "mobx-react";
+import { useLocalStore, observer } from "mobx-react";
 
 import Linkify from "react-linkify";
 
@@ -17,91 +16,72 @@ import { AlertStore } from "Stores/AlertStore";
 import { TooltipWrapper } from "Components/TooltipWrapper";
 
 const RenderNonLinkAnnotation = observer(
-  class RenderNonLinkAnnotation extends Component {
-    static propTypes = {
-      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
-      name: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-      visible: PropTypes.bool.isRequired,
-      afterUpdate: PropTypes.func.isRequired,
-    };
+  ({ alertStore, name, value, visible, afterUpdate }) => {
+    const mountRef = useRef(false);
 
-    // keep state of this annotation visibility, this is controlled by user
-    toggle = observable(
-      {
-        visible: true,
-        show(e) {
-          // Linkify only handles value, no need to check for links of
-          // collapsed annotation
-          this.visible = true;
-        },
-        hide(e) {
-          this.visible = false;
-        },
+    useEffect(() => {
+      if (mountRef.current) {
+        afterUpdate();
+      } else {
+        mountRef.current = true;
+      }
+    });
+
+    const toggle = useLocalStore(() => ({
+      visible: visible,
+      show(e) {
+        this.visible = true;
       },
-      {
-        show: action.bound,
-        hide: action.bound,
-      }
-    );
+      hide(e) {
+        this.visible = false;
+      },
+    }));
 
-    constructor(props) {
-      super(props);
-
-      this.toggle.visible = props.visible;
-    }
-
-    componentDidUpdate() {
-      const { afterUpdate } = this.props;
-
-      afterUpdate();
-    }
-
-    render() {
-      const { name, value } = this.props;
-
-      const className =
-        "mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100";
-
-      if (!this.toggle.visible) {
-        return (
-          <TooltipWrapper title="Click to show annotation value">
-            <div
-              className={`${className} cursor-pointer`}
-              onClick={this.toggle.show}
-            >
-              <FontAwesomeIcon icon={faSearchPlus} className="mr-1" />
-              {name}
-            </div>
-          </TooltipWrapper>
-        );
-      }
+    const className =
+      "mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100";
 
+    if (!toggle.visible) {
       return (
-        <TooltipWrapper title="Click the icon to hide annotation value">
-          <div key={name} className={className}>
-            <FontAwesomeIcon
-              icon={faSearchMinus}
-              className="mr-1 cursor-pointer"
-              onClick={this.toggle.hide}
-            />
-            <span className="text-muted">{name}: </span>
-            <Linkify
-              properties={{
-                target: "_blank",
-                rel: "noopener noreferrer",
-              }}
-            >
-              <Flash spy={value}>
-                <span>{value}</span>
-              </Flash>
-            </Linkify>
+        <TooltipWrapper title="Click to show annotation value">
+          <div className={`${className} cursor-pointer`} onClick={toggle.show}>
+            <FontAwesomeIcon icon={faSearchPlus} className="mr-1" />
+            {name}
           </div>
         </TooltipWrapper>
       );
     }
+
+    return (
+      <TooltipWrapper title="Click the icon to hide annotation value">
+        <div key={name} className={className}>
+          <FontAwesomeIcon
+            icon={faSearchMinus}
+            className="mr-1 cursor-pointer"
+            onClick={toggle.hide}
+          />
+          <span className="text-muted">{name}: </span>
+          <Linkify
+            properties={{
+              target: "_blank",
+              rel: "noopener noreferrer",
+            }}
+          >
+            <Flash spy={value}>
+              <span>{value}</span>
+            </Flash>
+          </Linkify>
+        </div>
+      </TooltipWrapper>
+    );
   }
 );
+RenderNonLinkAnnotation.propTypes = {
+  alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  visible: PropTypes.bool.isRequired,
+  afterUpdate: PropTypes.func.isRequired,
+};
 
 const RenderLinkAnnotation = ({ name, value }) => {
   return (