- Update based on review feedbacks

Client/src/Components/Dialog/index.jsx

@@ -1,11 +1,11 @@
 import LoadingButton from "@mui/lab/LoadingButton";
 import { Button, Modal, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
-const Dialog = ({ arialabelledby, ariadescribedby,
-    open, onClose, bdy1, yBtnLbl, yBtnOnClick, nBtnLbl, nBtnOnClick, theme, isLoading, bdy2 }) => {
+const Dialog = ({ modelTitle, modelDescription,
+    open, onClose, title, confirmationBtnLbl, confirmationBtnOnClick, cancelBtnLbl, cancelBtnOnClick, theme, isLoading, description }) => {
     return <Modal
-        aria-labelledby={arialabelledby}
-        aria-describedby={ariadescribedby}
+        aria-labelledby={modelTitle}
+        aria-describedby={modelDescription}
         open={open}
         onClose={onClose} >
         <Stack
@@ -27,14 +27,14 @@ const Dialog = ({ arialabelledby, ariadescribedby,
                 },
             }}
         >
-            <Typography id={arialabelledby} component="h2"
+            <Typography id={modelTitle} component="h2"
                 fontSize={16}
                 color={theme.palette.text.primary}
                 fontWeight={600}>
-                {bdy1}
+                {title}
             </Typography>
-            {bdy2 && <Typography id={ariadescribedby} color={theme.palette.text.tertiary}>
-                {bdy2}
+            {description && <Typography id={modelDescription} color={theme.palette.text.tertiary}>
+                {description}
             </Typography>}
             <Stack
                 direction="row"
@@ -45,36 +45,36 @@ const Dialog = ({ arialabelledby, ariadescribedby,
                 <Button
                     variant="text"
                     color="info"
-                    onClick={nBtnOnClick}
+                    onClick={cancelBtnOnClick}
                 >
-                    {nBtnLbl}
+                    {cancelBtnLbl}
                 </Button>
                 <LoadingButton
                     variant="contained"
                     color="error"
                     loading= {isLoading}
-                    onClick={yBtnOnClick}
+                    onClick={confirmationBtnOnClick}
                 >
-                    {yBtnLbl}
+                    {confirmationBtnLbl}
                 </LoadingButton>
             </Stack>
         </Stack>
     </Modal>
 }
 
-Dialog.prototypes = {
-    arialabelledby: PropTypes.string.isRequired,
-    ariadescribedby: PropTypes.string.isRequired,
+Dialog.PropTypes = {
+    modelTitle: PropTypes.string.isRequired,
+    modelDescription: PropTypes.string.isRequired,
     open: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
-    bdy1: PropTypes.string.isRequired,
-    nBtnLbl: PropTypes.string.isRequired,
-    nBtnOnClick: PropTypes.func.isRequired,
-    yBtnLbl: PropTypes.string.isRequired,
-    yBtnOnClick: PropTypes.func.isRequired,
+    title: PropTypes.string.isRequired,
+    confirmationBtnLbl: PropTypes.string.isRequired,
+    confirmationBtnOnClick: PropTypes.func.isRequired,
+    cancelBtnLbl: PropTypes.string.isRequired,
+    cancelBtnOnClick: PropTypes.func.isRequired,
     theme: PropTypes.object.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    bdy2: PropTypes.string    
+    description: PropTypes.string    
 }
 
 export default Dialog

Client/src/Pages/Monitors/Configure/index.jsx

@@ -2,7 +2,7 @@ import { useNavigate, useParams } from "react-router";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
-import { Box, Button, Modal, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
@@ -24,6 +24,7 @@ import PulseDot from "../../../Components/Animated/PulseDot";
 import SkeletonLayout from "./skeleton";
 import LoadingButton from "@mui/lab/LoadingButton";
 import "./index.css";
+import Dialog from "../../../Components/Dialog";
 
 /**
  * Parses a URL string and returns a URL object.
@@ -447,71 +448,21 @@ const Configure = () => {
           </Stack>
         </>
       )}
-      <Modal
-        aria-labelledby="modal-delete-monitor"
-        aria-describedby="delete-monitor-confirmation"
+      <Dialog
+        modelTitle="modal-delete-monitor"
+        modelDescription="delete-monitor-confirmation"
         open={isOpen}
         onClose={() => setIsOpen(false)}
-        disablePortal
+        title="Do you really want to delete this monitor?"
+        confirmationBtnLbl="Delete"
+        confirmationBtnOnClick={handleRemove}
+        cancelBtnLbl="Cancel"
+        cancelBtnOnClick={() => setIsOpen(false)}
+        theme={theme}
+        isLoading={isLoading}
+        description="Once deleted, this monitor cannot be retrieved."
       >
-        <Stack
-          gap={theme.spacing(2)}
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 400,
-            bgcolor: theme.palette.background.main,
-            border: 1,
-            borderColor: theme.palette.border.light,
-            borderRadius: theme.shape.borderRadius,
-            boxShadow: 24,
-            p: theme.spacing(15),
-            "&:focus": {
-              outline: "none",
-            },
-          }}
-        >
-          <Typography
-            id="modal-delete-monitor"
-            component="h2"
-            fontSize={16}
-            color={theme.palette.text.primary}
-            fontWeight={600}
-          >
-            Do you really want to delete this monitor?
-          </Typography>
-          <Typography
-            id="delete-monitor-confirmation"
-            color={theme.palette.text.tertiary}
-          >
-            Once deleted, this monitor cannot be retrieved.
-          </Typography>
-          <Stack
-            direction="row"
-            gap={theme.spacing(4)}
-            mt={theme.spacing(12)}
-            justifyContent="flex-end"
-          >
-            <Button
-              variant="text"
-              color="info"
-              onClick={() => setIsOpen(false)}
-            >
-              Cancel
-            </Button>
-            <LoadingButton
-              variant="contained"
-              color="error"
-              loading={isLoading}
-              onClick={handleRemove}
-            >
-              Delete
-            </LoadingButton>
-          </Stack>
-        </Stack>
-      </Modal>
+      </Dialog>
     </Stack>
   );
 };

Client/src/Pages/Monitors/Home/actionsMenu.jsx

@@ -5,13 +5,9 @@ import { useNavigate } from "react-router-dom";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
 import {
-  Button,
   IconButton,
   Menu,
-  MenuItem,
-  Modal,
-  Stack,
-  Typography,
+  MenuItem
 } from "@mui/material";
 import {
   deleteUptimeMonitor,
@@ -20,6 +16,7 @@ import {
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Settings from "../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
+import Dialog from "../../../Components/Dialog"
 
 const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -29,7 +26,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
   const theme = useTheme();
   const authState = useSelector((state) => state.auth);
   const authToken = authState.authToken;
-  
+  const { isLoading } = useSelector((state) => state.uptimeMonitors);  
 
   const handleRemove = async (event) => {
     event.preventDefault();
@@ -199,69 +196,21 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
           </MenuItem>
         )}     
       </Menu>
-      <Modal
-        aria-labelledby="modal-delete-monitor"
-        aria-describedby="delete-monitor-confirmation"
+      <Dialog
+        modelTitle="modal-delete-monitor"
+        modelDescription="delete-monitor-confirmation"
         open={isOpen}
-        onClose={(e) => {
-          e.stopPropagation();
-          setIsOpen(false);
-        }}
+        onClose={() => setIsOpen(false)}
+        title="Do you really want to delete this monitor?"
+        confirmationBtnLbl="Delete"
+        confirmationBtnOnClick={e => { e.stopPropagation(); handleRemove(e) }}
+        cancelBtnLbl="Cancel"
+        cancelBtnOnClick={e => { e.stopPropagation(); setIsOpen(false) }}
+        theme={theme}
+        isLoading={isLoading}
+        description="Once deleted, this monitor cannot be retrieved."
       >
-        <Stack
-          gap={theme.spacing(2)}
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 400,
-            bgcolor: theme.palette.background.main,
-            border: 1,
-            borderColor: theme.palette.border.light,
-            borderRadius: theme.shape.borderRadius,
-            boxShadow: 24,
-            p: theme.spacing(15),
-            "&:focus": {
-              outline: "none",
-            },
-          }}
-        >
-          <Typography id="modal-delete-monitor" component="h2" variant="h2">
-            Do you really want to delete this monitor?
-          </Typography>
-          <Typography id="delete-monitor-confirmation" variant="body1">
-            Once deleted, this monitor cannot be retrieved.
-          </Typography>
-          <Stack
-            direction="row"
-            gap={theme.spacing(4)}
-            mt={theme.spacing(12)}
-            justifyContent="flex-end"
-          >
-            <Button
-              variant="text"
-              color="info"
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsOpen(false);
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="contained"
-              color="error"
-              onClick={(e) => {
-                e.stopPropagation(e);
-                handleRemove(e);
-              }}
-            >
-              Delete
-            </Button>
-          </Stack>
-        </Stack>
-      </Modal>
+      </Dialog>
     </>
   );
 };

Client/src/Pages/Settings/index.jsx

@@ -39,7 +39,8 @@ const Settings = ({ isAdmin }) => {
     ttl: checkTTL ? (checkTTL / SECONDS_PER_DAY).toString() : 0,
   });
   const [errors, setErrors] = useState({});
-  const [isOpen, setIsOpen] = useState({delMntrs: false, delSts: false});  
+  const delStatMntrInitState = { delMntrs: false, delSts: false };
+  const [isOpen, setIsOpen] = useState(delStatMntrInitState);  
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
@@ -122,7 +123,7 @@ const Settings = ({ isAdmin }) => {
       logger.error(error);
       createToast({ body: "Failed to clear stats" });
     } finally {
-      setIsOpen({delMntrs: false, delSts:false})
+      setIsOpen(delStatMntrInitState)
     }
   };
 
@@ -152,10 +153,10 @@ const Settings = ({ isAdmin }) => {
       logger.error(error);
       createToast({ Body: "Failed to delete all monitors" });
     } finally {
-      setIsOpen({ delMntrs: false, delSts: false })
+      setIsOpen(delStatMntrInitState)
     }
   };
-
+  
   return (
     <Box
       className="settings"
@@ -240,15 +241,15 @@ const Settings = ({ isAdmin }) => {
               </Box>
             </Stack>
             <Dialog
-              arialabelledby="model-clear-stats"
-              ariadescribedby="clear-stats-confirmation"
+              modelTitle="model-clear-stats"
+              modelDescription="clear-stats-confirmation"
               open={isOpen.delSts}
-              onClose={() => setIsOpen({ delSts: false, delMntrs: false })}
-              bdy1="Do you want to clear all stats?"
-              yBtnLbl="Yes, clear all stats"
-              yBtnOnClick={handleClearStats}
-              nBtnLbl="Cancel"
-              nBtnOnClick={() => setIsOpen({ delSts: false, delMntrs: false })}
+              onClose={() => setIsOpen(delStatMntrInitState)}
+              title="Do you want to clear all stats?"
+              confirmationBtnLbl="Yes, clear all stats"
+              confirmationBtnOnClick={handleClearStats}
+              cancelBtnLbl="Cancel"
+              cancelBtnOnClick={() => setIsOpen(delStatMntrInitState)}
               theme={theme}
               isLoading={isLoading || authIsLoading || checksIsLoading}
             >
@@ -290,15 +291,15 @@ const Settings = ({ isAdmin }) => {
               </Box>
             </Stack>
             <Dialog
-              arialabelledby="model-delete-all-monitors" 
-              ariadescribedby="delete-all-monitors-confirmation"
+              modelTitle="model-delete-all-monitors" 
+              modelDescription="delete-all-monitors-confirmation"
               open={isOpen.delMntrs} 
-              onClose={() => setIsOpen({delMntrs:false, delSts: false})} 
-              bdy1="Do you want to remove all monitors?"               
-              yBtnLbl="Yes, clear all monitors" 
-              yBtnOnClick={handleDeleteAllMonitors} 
-              nBtnLbl="Cancel" 
-              nBtnOnClick={() => setIsOpen({delMntrs:false, delSts: false})}
+              onClose={() => setIsOpen(delStatMntrInitState)} 
+              title="Do you want to remove all monitors?"               
+              confirmationBtnLbl="Yes, clear all monitors" 
+              confirmationBtnOnClick={handleDeleteAllMonitors} 
+              cancelBtnLbl="Cancel" 
+              cancelBtnOnClick={() => setIsOpen(delStatMntrInitState)}
               theme={theme} 
               isLoading={isLoading || authIsLoading || checksIsLoading}
               >