From 1250bf9421bc17e856be3922a11e31667dbc3477 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 11:28:56 -0700
Subject: [PATCH] Moved action menu back into Monitor page as separate
 component, refactored modal

---
 .../src/Pages/Monitors/ActionMenu/index.jsx   |  88 -------
 Client/src/Pages/Monitors/index.jsx           | 231 +++++++++++++-----
 2 files changed, 166 insertions(+), 153 deletions(-)
 delete mode 100644 Client/src/Pages/Monitors/ActionMenu/index.jsx

diff --git a/Client/src/Pages/Monitors/ActionMenu/index.jsx b/Client/src/Pages/Monitors/ActionMenu/index.jsx
deleted file mode 100644
index a8fb437bc..000000000
--- a/Client/src/Pages/Monitors/ActionMenu/index.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useState } from "react";
-import { Box, IconButton, Menu, MenuItem } from "@mui/material";
-import Settings from "../../../assets/icons/settings-bold.svg?react";
-import { useNavigate } from "react-router-dom";
-
-const ActionsMenu = ({ monitor }) => {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [actions, setActions] = useState({});
-  const openMenu = (event, id, url) => {
-    event.preventDefault();
-    setAnchorEl(event.currentTarget);
-    setActions({ id: id, url: url });
-  };
-
-  const openRemove = () => {
-    closeMenu();
-    setIsOpen(true);
-  };
-
-  const closeMenu = () => {
-    setAnchorEl(null);
-  };
-
-  const navigate = useNavigate();
-  return (
-    <>
-      <IconButton
-        aria-label="monitor actions"
-        onClick={(event) => {
-          event.stopPropagation();
-          openMenu(
-            event,
-            monitor._id,
-            monitor.type === "ping" ? null : monitor.url
-          );
-        }}
-        sx={{
-          "&:focus": {
-            outline: "none",
-          },
-        }}
-      >
-        <Settings />
-      </IconButton>
-
-      <Menu
-        className="actions-menu"
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={closeMenu}
-      >
-        {actions.url !== null ? (
-          <MenuItem
-            onClick={() => {
-              window.open(actions.url, "_blank", "noreferrer");
-            }}
-          >
-            Open site
-          </MenuItem>
-        ) : (
-          ""
-        )}
-        <MenuItem
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate(`/monitors/${actions.id}`);
-          }}
-        >
-          Details
-        </MenuItem>
-        {/* TODO - pass monitor id to Incidents page */}
-        <MenuItem disabled>Incidents</MenuItem>
-        <MenuItem
-          onClick={(e) => {
-            e.stopPropagation();
-
-            navigate(`/monitors/configure/${actions.id}`);
-          }}
-        >
-          Configure
-        </MenuItem>
-        <MenuItem onClick={openRemove}>Remove</MenuItem>
-      </Menu>
-    </>
-  );
-};
-
-export default ActionsMenu;
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 24ab4d172..19a4b4c4f 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -25,7 +25,172 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
-import ActionsMenu from "./ActionMenu";
+
+import Settings from "../../assets/icons/settings-bold.svg?react";
+
+const ActionsMenu = ({ monitor }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [actions, setActions] = useState({});
+  const [isOpen, setIsOpen] = useState(false);
+  const dispatch = useDispatch();
+  const theme = useTheme();
+  const authState = useSelector((state) => state.auth);
+
+  const handleRemove = async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    let monitor = { _id: actions.id };
+    const action = await dispatch(
+      deleteUptimeMonitor({ authToken: authState.authToken, monitor })
+    );
+    if (action.meta.requestStatus === "fulfilled") {
+      setIsOpen(false); // close modal
+      dispatch(getUptimeMonitorsByUserId(authState.authToken));
+      createToast({ body: "Monitor deleted successfully." });
+    } else {
+      createToast({ body: "Failed to delete monitor." });
+    }
+  };
+
+  const openMenu = (event, id, url) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+    setActions({ id: id, url: url });
+  };
+
+  const openRemove = (e) => {
+    closeMenu(e);
+    setIsOpen(true);
+  };
+
+  const closeMenu = (e) => {
+    e.stopPropagation();
+    setAnchorEl(null);
+  };
+
+  const navigate = useNavigate();
+  return (
+    <>
+      <IconButton
+        aria-label="monitor actions"
+        onClick={(event) => {
+          event.stopPropagation();
+          openMenu(
+            event,
+            monitor._id,
+            monitor.type === "ping" ? null : monitor.url
+          );
+        }}
+        sx={{
+          "&:focus": {
+            outline: "none",
+          },
+        }}
+      >
+        <Settings />
+      </IconButton>
+
+      <Menu
+        className="actions-menu"
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={(e) => closeMenu(e)}
+      >
+        {actions.url !== null ? (
+          <MenuItem
+            onClick={(e) => {
+              closeMenu(e);
+              e.stopPropagation();
+              window.open(actions.url, "_blank", "noreferrer");
+            }}
+          >
+            Open site
+          </MenuItem>
+        ) : (
+          ""
+        )}
+        <MenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+            navigate(`/monitors/${actions.id}`);
+          }}
+        >
+          Details
+        </MenuItem>
+        {/* TODO - pass monitor id to Incidents page */}
+        <MenuItem disabled>Incidents</MenuItem>
+        <MenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+
+            navigate(`/monitors/configure/${actions.id}`);
+          }}
+        >
+          Configure
+        </MenuItem>
+        <MenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+            openRemove(e);
+          }}
+        >
+          Remove
+        </MenuItem>
+      </Menu>
+      <Modal
+        aria-labelledby="modal-delete-monitor"
+        aria-describedby="delete-monitor-confirmation"
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        disablePortal
+      >
+        <Stack
+          gap={theme.gap.xs}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 400,
+            bgcolor: "white",
+            border: "solid 1px #f2f2f2",
+            borderRadius: `${theme.shape.borderRadius}px`,
+            boxShadow: 24,
+            p: "30px",
+            "&:focus": {
+              outline: "none",
+            },
+          }}
+        >
+          <Typography id="modal-delete-monitor" component="h2">
+            Do you really want to delete this monitor?
+          </Typography>
+          <Typography id="delete-monitor-confirmation">
+            Once deleted, this monitor cannot be retrieved.
+          </Typography>
+          <Stack
+            direction="row"
+            gap={theme.gap.small}
+            mt={theme.gap.large}
+            justifyContent="flex-end"
+          >
+            <Button
+              level="tertiary"
+              label="Cancel"
+              onClick={() => setIsOpen(false)}
+            />
+            <Button
+              level="error"
+              label="Delete"
+              onClick={(e) => handleRemove(e)}
+            />
+          </Stack>
+        </Stack>
+      </Modal>
+    </>
+  );
+};
 
 /**
  * Host component.
@@ -111,23 +276,6 @@ const Monitors = () => {
   const authState = useSelector((state) => state.auth);
   const dispatch = useDispatch({});
 
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleRemove = async (event) => {
-    event.preventDefault();
-    let monitor = { _id: actions.id };
-    const action = await dispatch(
-      deleteUptimeMonitor({ authToken: authState.authToken, monitor })
-    );
-    if (action.meta.requestStatus === "fulfilled") {
-      setIsOpen(false); // close modal
-      dispatch(getUptimeMonitorsByUserId(authState.authToken));
-      createToast({ body: "Monitor deleted successfully." });
-    } else {
-      createToast({ body: "Failed to delete monitor." });
-    }
-  };
-
   useEffect(() => {
     dispatch(getUptimeMonitorsByUserId(authState.authToken));
   }, [authState.authToken, dispatch]);
@@ -294,53 +442,6 @@ const Monitors = () => {
           )}
         </>
       )}
-
-      <Modal
-        aria-labelledby="modal-delete-monitor"
-        aria-describedby="delete-monitor-confirmation"
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        disablePortal
-      >
-        <Stack
-          gap={theme.gap.xs}
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 400,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: `${theme.shape.borderRadius}px`,
-            boxShadow: 24,
-            p: "30px",
-            "&:focus": {
-              outline: "none",
-            },
-          }}
-        >
-          <Typography id="modal-delete-monitor" component="h2">
-            Do you really want to delete this monitor?
-          </Typography>
-          <Typography id="delete-monitor-confirmation">
-            Once deleted, this monitor cannot be retrieved.
-          </Typography>
-          <Stack
-            direction="row"
-            gap={theme.gap.small}
-            mt={theme.gap.large}
-            justifyContent="flex-end"
-          >
-            <Button
-              level="tertiary"
-              label="Cancel"
-              onClick={() => setIsOpen(false)}
-            />
-            <Button level="error" label="Delete" onClick={handleRemove} />
-          </Stack>
-        </Stack>
-      </Modal>
     </Stack>
   );
 };