From effc6dac3af95bec088b0326161c7ae82d344649 Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Tue, 22 Oct 2024 05:58:21 -0400
Subject: [PATCH 1/9] feat: create generic dialog component

---
 .../src/Components/Dialog/genericDialog.jsx   |  45 ++++++++
 Client/src/Components/Dialog/index.jsx        | 100 +++++++-----------
 2 files changed, 86 insertions(+), 59 deletions(-)
 create mode 100644 Client/src/Components/Dialog/genericDialog.jsx

diff --git a/Client/src/Components/Dialog/genericDialog.jsx b/Client/src/Components/Dialog/genericDialog.jsx
new file mode 100644
index 000000000..2807b2e8c
--- /dev/null
+++ b/Client/src/Components/Dialog/genericDialog.jsx
@@ -0,0 +1,45 @@
+import { Modal, Stack } from "@mui/material";
+import PropTypes from "prop-types";
+const GenericDialog = ({ title, description, open, onClose, theme, children }) => {
+	return (
+		<Modal
+			aria-labelledby={title}
+			aria-describedby={description}
+			open={open}
+			onClose={onClose}
+		>
+			<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",
+					},
+				}}
+			>
+				{children}
+			</Stack>
+		</Modal>
+	);
+};
+
+GenericDialog.propTypes = {
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string.isRequired,
+	open: PropTypes.bool.isRequired,
+	onClose: PropTypes.func.isRequired,
+	theme: PropTypes.object.isRequired,
+	children: PropTypes.element.isRequired,
+};
+
+export { GenericDialog };
diff --git a/Client/src/Components/Dialog/index.jsx b/Client/src/Components/Dialog/index.jsx
index 55ec801d7..d87baa42a 100644
--- a/Client/src/Components/Dialog/index.jsx
+++ b/Client/src/Components/Dialog/index.jsx
@@ -1,6 +1,7 @@
 import LoadingButton from "@mui/lab/LoadingButton";
-import { Button, Modal, Stack, Typography } from "@mui/material";
+import { Button, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
+import { GenericDialog } from "./genericDialog";
 const Dialog = ({
 	modelTitle,
 	modelDescription,
@@ -16,72 +17,53 @@ const Dialog = ({
 	description,
 }) => {
 	return (
-		<Modal
-			aria-labelledby={modelTitle}
-			aria-describedby={modelDescription}
+		<GenericDialog
+			title={modelTitle}
+			description={modelDescription}
 			open={open}
-			onClose={onClose}
+			close={onClose}
+			theme={theme}
 		>
-			<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={modelTitle}
+				component="h2"
+				fontSize={16}
+				color={theme.palette.text.primary}
+				fontWeight={600}
 			>
+				{title}
+			</Typography>
+			{description && (
 				<Typography
-					id={modelTitle}
-					component="h2"
-					fontSize={16}
-					color={theme.palette.text.primary}
-					fontWeight={600}
+					id={modelDescription}
+					color={theme.palette.text.tertiary}
 				>
-					{title}
+					{description}
 				</Typography>
-				{description && (
-					<Typography
-						id={modelDescription}
-						color={theme.palette.text.tertiary}
-					>
-						{description}
-					</Typography>
-				)}
-				<Stack
-					direction="row"
-					gap={theme.spacing(4)}
-					mt={theme.spacing(12)}
-					justifyContent="flex-end"
+			)}
+			<Stack
+				direction="row"
+				gap={theme.spacing(4)}
+				mt={theme.spacing(12)}
+				justifyContent="flex-end"
+			>
+				<Button
+					variant="text"
+					color="info"
+					onClick={cancelBtnOnClick}
 				>
-					<Button
-						variant="text"
-						color="info"
-						onClick={cancelBtnOnClick}
-					>
-						{cancelBtnLbl}
-					</Button>
-					<LoadingButton
-						variant="contained"
-						color="error"
-						loading={isLoading}
-						onClick={confirmationBtnOnClick}
-					>
-						{confirmationBtnLbl}
-					</LoadingButton>
-				</Stack>
+					{cancelBtnLbl}
+				</Button>
+				<LoadingButton
+					variant="contained"
+					color="error"
+					loading={isLoading}
+					onClick={confirmationBtnOnClick}
+				>
+					{confirmationBtnLbl}
+				</LoadingButton>
 			</Stack>
-		</Modal>
+		</GenericDialog>
 	);
 };
 

From 7752e52fcdefbd7ab625b362e23f5a69cf069bab Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Tue, 22 Oct 2024 08:54:12 -0400
Subject: [PATCH 2/9] refactor team panel to get rid of error of unused code,
 and add generic modals

---
 .../TabPanels/Account/ProfilePanel.jsx        | 242 ++++++++----------
 .../TabPanels/Account/TeamPanel.jsx           | 181 ++++++-------
 2 files changed, 185 insertions(+), 238 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 999e026c7..f5ac95bc8 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -1,7 +1,7 @@
 import { useTheme } from "@emotion/react";
 import { useRef, useState } from "react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Box, Button, Divider, Modal, Stack, Typography } from "@mui/material";
+import { Box, Button, Divider, Stack, Typography } from "@mui/material";
 import Avatar from "../../Avatar";
 import Field from "../../Inputs/Field";
 import ImageField from "../../Inputs/Image";
@@ -15,6 +15,7 @@ import { clearUptimeMonitorState } from "../../../Features/UptimeMonitors/uptime
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
 import LoadingButton from "@mui/lab/LoadingButton";
+import { GenericDialog } from "../../Dialog/genericDialog";
 
 /**
  * ProfilePanel component displays a form for editing user profile information
@@ -369,158 +370,121 @@ const ProfilePanel = () => {
 				</Box>
 			)}
 			{/* TODO - Update ModalPopup Component with @mui for reusability */}
-			<Modal
-				aria-labelledby="modal-delete-account"
-				aria-describedby="delete-account-confirmation"
+			<GenericDialog
+				title={"modal-delete-account"}
+				description={"delete-account-confirmation"}
 				open={isModalOpen("delete")}
-				onClose={() => setIsOpen("")}
-				disablePortal
+				close={() => setIsOpen("")}
+				theme={theme}
+				/* disablePortal ? */
 			>
+				<Typography
+					id="modal-delete-account"
+					component="h1"
+				>
+					Really delete this account?
+				</Typography>
+				<Typography
+					id="delete-account-confirmation"
+					component="p"
+				>
+					If you delete your account, you will no longer be able to sign in, and all of
+					your data will be deleted. Deleting your account is permanent and
+					non-recoverable action.
+				</Typography>
 				<Stack
+					direction="row"
 					gap={theme.spacing(5)}
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 500,
-						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",
-						},
-					}}
+					mt={theme.spacing(5)}
+					justifyContent="flex-end"
 				>
-					<Typography
-						id="modal-delete-account"
-						component="h1"
+					<Button
+						variant="text"
+						color="info"
+						onClick={() => setIsOpen("")}
 					>
-						Really delete this account?
-					</Typography>
-					<Typography
-						id="delete-account-confirmation"
-						component="p"
+						Cancel
+					</Button>
+					<LoadingButton
+						variant="contained"
+						color="error"
+						onClick={handleDeleteAccount}
+						loading={isLoading}
 					>
-						If you delete your account, you will no longer be able to sign in, and all of
-						your data will be deleted. Deleting your account is permanent and
-						non-recoverable action.
-					</Typography>
-					<Stack
-						direction="row"
-						gap={theme.spacing(5)}
-						mt={theme.spacing(5)}
-						justifyContent="flex-end"
-					>
-						<Button
-							variant="text"
-							color="info"
-							onClick={() => setIsOpen("")}
-						>
-							Cancel
-						</Button>
-						<LoadingButton
-							variant="contained"
-							color="error"
-							onClick={handleDeleteAccount}
-							loading={isLoading}
-						>
-							Delete account
-						</LoadingButton>
-					</Stack>
+						Delete account
+					</LoadingButton>
 				</Stack>
-			</Modal>
-			<Modal
-				aria-labelledby="modal-update-picture"
-				aria-describedby="update-profile-picture"
+			</GenericDialog>
+			<GenericDialog
+				title={"modal-update-picture"}
+				description={"update-profile-picture"}
 				open={isModalOpen("picture")}
-				onClose={closePictureModal}
+				close={closePictureModal}
+				theme={theme}
 			>
-				<Stack
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 475,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: theme.shape.boxShadow,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
+				<Typography
+					id="modal-update-picture"
+					component="h1"
+					color={theme.palette.text.secondary}
 				>
-					<Typography
-						id="modal-update-picture"
-						component="h1"
-						color={theme.palette.text.secondary}
-					>
-						Upload Image
-					</Typography>
-					<ImageField
-						id="update-profile-picture"
-						src={
-							file?.delete
-								? ""
-								: file?.src
-									? file.src
-									: localData?.file
-										? localData.file
-										: user?.avatarImage
-											? `data:image/png;base64,${user.avatarImage}`
-											: ""
-						}
-						loading={progress.isLoading && progress.value !== 100}
-						onChange={handlePicture}
+					Upload Image
+				</Typography>
+				<ImageField
+					id="update-profile-picture"
+					src={
+						file?.delete
+							? ""
+							: file?.src
+								? file.src
+								: localData?.file
+									? localData.file
+									: user?.avatarImage
+										? `data:image/png;base64,${user.avatarImage}`
+										: ""
+					}
+					loading={progress.isLoading && progress.value !== 100}
+					onChange={handlePicture}
+				/>
+				{progress.isLoading || progress.value !== 0 || errors["picture"] ? (
+					<ProgressUpload
+						icon={<ImageIcon />}
+						label={file?.name}
+						size={file?.size}
+						progress={progress.value}
+						onClick={removePicture}
+						error={errors["picture"]}
 					/>
-					{progress.isLoading || progress.value !== 0 || errors["picture"] ? (
-						<ProgressUpload
-							icon={<ImageIcon />}
-							label={file?.name}
-							size={file?.size}
-							progress={progress.value}
-							onClick={removePicture}
-							error={errors["picture"]}
-						/>
-					) : (
-						""
-					)}
-					<Stack
-						direction="row"
-						mt={theme.spacing(10)}
-						gap={theme.spacing(5)}
-						justifyContent="flex-end"
+				) : (
+					""
+				)}
+				<Stack
+					direction="row"
+					mt={theme.spacing(10)}
+					gap={theme.spacing(5)}
+					justifyContent="flex-end"
+				>
+					<Button
+						variant="text"
+						color="info"
+						onClick={removePicture}
 					>
-						<Button
-							variant="text"
-							color="info"
-							onClick={removePicture}
-						>
-							Remove
-						</Button>
-						<Button
-							variant="contained"
-							color="primary"
-							onClick={handleUpdatePicture}
-							disabled={
-								(Object.keys(errors).length !== 0 && errors?.picture) ||
-								progress.value !== 100
-									? true
-									: false
-							}
-						>
-							Update
-						</Button>
-					</Stack>
+						Remove
+					</Button>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={handleUpdatePicture}
+						disabled={
+							(Object.keys(errors).length !== 0 && errors?.picture) ||
+							progress.value !== 100
+								? true
+								: false
+						}
+					>
+						Update
+					</Button>
 				</Stack>
-			</Modal>
+			</GenericDialog>
 		</TabPanel>
 	);
 };
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 33218bcbb..d1d67d253 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Box, Button, ButtonGroup, Modal, Stack, Typography } from "@mui/material";
+import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
@@ -10,6 +10,7 @@ import { useSelector } from "react-redux";
 import BasicTable from "../../BasicTable";
 import Select from "../../Inputs/Select";
 import LoadingButton from "@mui/lab/LoadingButton";
+import { GenericDialog } from "../../Dialog/genericDialog";
 
 /**
  * TeamPanel component manages the organization and team members,
@@ -31,10 +32,10 @@ const TeamPanel = () => {
 
 	const { authToken, user } = useSelector((state) => state.auth);
 	//TODO
-	const [orgStates, setOrgStates] = useState({
-		name: "Bluewave Labs",
-		isEdit: false,
-	});
+	// const [orgStates, setOrgStates] = useState({
+	// 	name: "Bluewave Labs",
+	// 	isEdit: false,
+	// });
 	const [toInvite, setToInvite] = useState({
 		email: "",
 		role: ["0"],
@@ -134,10 +135,10 @@ const TeamPanel = () => {
 	}, [errors, toInvite.email]);
 
 	// RENAME ORGANIZATION
-	const toggleEdit = () => {
-		setOrgStates((prev) => ({ ...prev, isEdit: !prev.isEdit }));
-	};
-	const handleRename = () => {};
+	// const toggleEdit = () => {
+	// 	setOrgStates((prev) => ({ ...prev, isEdit: !prev.isEdit }));
+	// };
+	// const handleRename = () => {};
 
 	// INVITE MEMBER
 	const [isOpen, setIsOpen] = useState(false);
@@ -327,100 +328,82 @@ const TeamPanel = () => {
 					table={"team"}
 				/>
 			</Stack>
-			<Modal
-				aria-labelledby="modal-invite-member"
-				aria-describedby="invite-member-to-team"
+
+			<GenericDialog
+				title={"modal-invite-member"}
+				description={"invite-member-to-team"}
 				open={isOpen}
-				onClose={closeInviteModal}
+				close={closeInviteModal}
+				theme={theme}
 			>
-				<Stack
-					gap={theme.spacing(5)}
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 450,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: theme.shape.boxShadow,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
-				>
-					<Box>
-						<Typography
-							id="modal-invite-member"
-							component="h1"
-							fontWeight={600}
-							fontColor={theme.palette.text.secondary}
-						>
-							Invite new team member
-						</Typography>
-						<Typography
-							id="invite-member-to-team"
-							component="p"
-							fontSize={13}
-							color={theme.palette.text.accent}
-							sx={{ mt: theme.spacing(1), mb: theme.spacing(4) }}
-						>
-							When you add a new team member, they will get access to all monitors.
-						</Typography>
-					</Box>
-					<Field
-						type="email"
-						id="input-team-member"
-						placeholder="Email"
-						value={toInvite.email}
-						onChange={handleChange}
-						error={errors.email}
-					/>
-					<Select
-						id="team-member-role"
-						placeholder="Select role"
-						isHidden={true}
-						value={toInvite.role[0]}
-						onChange={(event) =>
-							setToInvite((prev) => ({
-								...prev,
-								role: [event.target.value],
-							}))
-						}
-						items={[
-							{ _id: "admin", name: "Admin" },
-							{ _id: "user", name: "User" },
-						]}
-					/>
-					<Stack
-						direction="row"
-						gap={theme.spacing(4)}
-						mt={theme.spacing(8)}
-						justifyContent="flex-end"
+				<Box>
+					<Typography
+						id="modal-invite-member"
+						component="h1"
+						fontWeight={600}
+						fontColor={theme.palette.text.secondary}
 					>
-						<LoadingButton
-							loading={isSendingInvite}
-							variant="text"
-							color="info"
-							onClick={closeInviteModal}
-						>
-							Cancel
-						</LoadingButton>
-						<LoadingButton
-							variant="contained"
-							color="primary"
-							onClick={handleInviteMember}
-							loading={isSendingInvite}
-							disabled={isDisabled}
-						>
-							Send invite
-						</LoadingButton>
-					</Stack>
+						Invite new team member
+					</Typography>
+					<Typography
+						id="invite-member-to-team"
+						component="p"
+						fontSize={13}
+						color={theme.palette.text.accent}
+						sx={{ mt: theme.spacing(1), mb: theme.spacing(4) }}
+					>
+						When you add a new team member, they will get access to all monitors.
+					</Typography>
+				</Box>
+				<Field
+					type="email"
+					id="input-team-member"
+					placeholder="Email"
+					value={toInvite.email}
+					onChange={handleChange}
+					error={errors.email}
+				/>
+				<Select
+					id="team-member-role"
+					placeholder="Select role"
+					isHidden={true}
+					value={toInvite.role[0]}
+					onChange={(event) =>
+						setToInvite((prev) => ({
+							...prev,
+							role: [event.target.value],
+						}))
+					}
+					items={[
+						{ _id: "admin", name: "Admin" },
+						{ _id: "user", name: "User" },
+					]}
+				/>
+				<Stack
+					direction="row"
+					gap={theme.spacing(4)}
+					mt={theme.spacing(8)}
+					justifyContent="flex-end"
+				>
+					<LoadingButton
+						loading={isSendingInvite}
+						variant="text"
+						color="info"
+						onClick={closeInviteModal}
+					>
+						Cancel
+					</LoadingButton>
+					<LoadingButton
+						variant="contained"
+						color="primary"
+						onClick={handleInviteMember}
+						loading={isSendingInvite}
+						disabled={isDisabled}
+					>
+						Send invite
+					</LoadingButton>
 				</Stack>
-			</Modal>
+			</GenericDialog>
 		</TabPanel>
 	);
 };

From 220fc080e615113fdb5f722ef3301b3ca969a8a9 Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Tue, 22 Oct 2024 08:56:35 -0400
Subject: [PATCH 3/9] refactor actions menu

---
 .../MaintenanceTable/ActionsMenu/index.jsx    | 106 +++++++-----------
 1 file changed, 40 insertions(+), 66 deletions(-)

diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
index 088dae988..a4ed0edae 100644
--- a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
+++ b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
@@ -2,23 +2,16 @@ import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
-import {
-	Button,
-	IconButton,
-	Menu,
-	MenuItem,
-	Modal,
-	Stack,
-	Typography,
-} from "@mui/material";
+import { Button, IconButton, Menu, MenuItem, Stack, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { logger } from "../../../../Utils/Logger";
 import Settings from "../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import { networkService } from "../../../../main";
 import { createToast } from "../../../../Utils/toastUtils";
+import { GenericDialog } from "../../../../Components/Dialog/genericDialog";
 
-const ActionsMenu = ({ isAdmin, maintenanceWindow, updateCallback }) => {
+const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 	maintenanceWindow;
 	const { authToken } = useSelector((state) => state.auth);
 	const [anchorEl, setAnchorEl] = useState(null);
@@ -155,71 +148,52 @@ const ActionsMenu = ({ isAdmin, maintenanceWindow, updateCallback }) => {
 					Remove
 				</MenuItem>
 			</Menu>
-			<Modal
-				aria-labelledby="modal-delete-monitor"
-				aria-describedby="delete-monitor-confirmation"
+			<GenericDialog
+				title={"modal-delete-monitor"}
+				description={"delete-monitor-confirmation"}
 				open={isOpen}
-				onClose={(e) => {
+				close={(e) => {
 					e.stopPropagation();
 					setIsOpen(false);
 				}}
+				theme={theme}
 			>
-				<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-maintenance"
+					component="h2"
+					variant="h2"
 				>
-					<Typography
-						id="modal-delete-maintenance"
-						component="h2"
-						variant="h2"
+					Do you really want to remove this maintenance window?
+				</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);
+						}}
 					>
-						Do you really want to remove this maintenance window?
-					</Typography>
-					<Stack
-						direction="row"
-						gap={theme.spacing(4)}
-						mt={theme.spacing(12)}
-						justifyContent="flex-end"
+						Cancel
+					</Button>
+					<LoadingButton
+						loading={isLoading}
+						variant="contained"
+						color="error"
+						onClick={(e) => {
+							e.stopPropagation(e);
+							handleRemove(e);
+						}}
 					>
-						<Button
-							variant="text"
-							color="info"
-							onClick={(e) => {
-								e.stopPropagation();
-								setIsOpen(false);
-							}}
-						>
-							Cancel
-						</Button>
-						<LoadingButton
-							loading={isLoading}
-							variant="contained"
-							color="error"
-							onClick={(e) => {
-								e.stopPropagation(e);
-								handleRemove(e);
-							}}
-						>
-							Delete
-						</LoadingButton>
-					</Stack>
+						Delete
+					</LoadingButton>
 				</Stack>
-			</Modal>
+			</GenericDialog>
 		</>
 	);
 };

From 3a76fa77dd5b6ba110a8ac747b966cf427543cdf Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Tue, 22 Oct 2024 08:58:40 -0400
Subject: [PATCH 4/9] refactor page speed

---
 .../src/Pages/PageSpeed/Configure/index.jsx   | 97 ++++++++-----------
 1 file changed, 39 insertions(+), 58 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 71f3ff083..49d18e4c8 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
-import { Box, Button, Modal, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Button, Stack, Tooltip, Typography } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router";
 import {
@@ -25,6 +25,7 @@ import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineR
 import SkeletonLayout from "./skeleton";
 import useUtils from "../../Monitors/utils";
 import "./index.css";
+import { GenericDialog } from "../../../Components/Dialog/genericDialog";
 
 const PageSpeedConfigure = () => {
 	const theme = useTheme();
@@ -428,69 +429,49 @@ const PageSpeedConfigure = () => {
 					</Stack>
 				</>
 			)}
-			<Modal
-				aria-labelledby="modal-delete-pagespeed-monitor"
-				aria-describedby="delete-pagespeed-monitor-confirmation"
+			<GenericDialog
+				title={"modal-delete-pagespeed-monitor"}
+				description={"delete-pagespeed-monitor-confirmation"}
 				open={isOpen}
-				onClose={() => setIsOpen(false)}
-				disablePortal
+				close={() => setIsOpen(false)}
+				theme={theme}
 			>
-				<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-pagespeed-monitor"
+					component="h2"
+					variant="h2"
+					fontWeight={500}
 				>
-					<Typography
-						id="modal-delete-pagespeed-monitor"
-						component="h2"
-						variant="h2"
-						fontWeight={500}
+					Do you really want to delete this monitor?
+				</Typography>
+				<Typography
+					id="delete-pagespeed-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={() => setIsOpen(false)}
 					>
-						Do you really want to delete this monitor?
-					</Typography>
-					<Typography
-						id="delete-pagespeed-monitor-confirmation"
-						variant="body1"
+						Cancel
+					</Button>
+					<Button
+						variant="contained"
+						color="error"
+						onClick={handleRemove}
 					>
-						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>
-						<Button
-							variant="contained"
-							color="error"
-							onClick={handleRemove}
-						>
-							Delete
-						</Button>
-					</Stack>
+						Delete
+					</Button>
 				</Stack>
-			</Modal>
+			</GenericDialog>
 		</Stack>
 	);
 };

From 4fd11fbd1c99d2e28da19aee61e39c9d26a6ac9f Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Tue, 22 Oct 2024 10:09:03 -0400
Subject: [PATCH 5/9] refactor: changing all dialogs to use Dialog or generic
 dialog

---
 Client/src/Components/Dialog/index.jsx        | 47 +++++++-------
 .../TabPanels/Account/ProfilePanel.jsx        | 59 +++++-------------
 .../TabPanels/Account/TeamPanel.jsx           |  2 +-
 .../MaintenanceTable/ActionsMenu/index.jsx    | 61 ++++++-------------
 Client/src/Pages/Monitors/Configure/index.jsx | 16 +++--
 .../src/Pages/Monitors/Home/actionsMenu.jsx   | 25 ++++----
 .../src/Pages/PageSpeed/Configure/index.jsx   | 17 +++++-
 Client/src/Pages/Settings/index.jsx           | 27 ++++----
 8 files changed, 102 insertions(+), 152 deletions(-)

diff --git a/Client/src/Components/Dialog/index.jsx b/Client/src/Components/Dialog/index.jsx
index d87baa42a..2053304ee 100644
--- a/Client/src/Components/Dialog/index.jsx
+++ b/Client/src/Components/Dialog/index.jsx
@@ -2,30 +2,30 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import { Button, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import { GenericDialog } from "./genericDialog";
+import { useId } from "react";
 const Dialog = ({
-	modelTitle,
-	modelDescription,
 	open,
 	onClose,
-	title,
-	confirmationBtnLbl,
-	confirmationBtnOnClick,
-	cancelBtnLbl,
-	cancelBtnOnClick,
 	theme,
-	isLoading,
+	title,
 	description,
+	onCancel,
+	confirmationButtonLabel,
+	onConfirm,
+	isLoading,
 }) => {
+	const titleId = useId();
+	const descriptionId = useId();
 	return (
 		<GenericDialog
-			title={modelTitle}
-			description={modelDescription}
+			title={titleId}
+			description={descriptionId}
 			open={open}
-			close={onClose}
+			onClose={onClose}
 			theme={theme}
 		>
 			<Typography
-				id={modelTitle}
+				id={titleId}
 				component="h2"
 				fontSize={16}
 				color={theme.palette.text.primary}
@@ -35,7 +35,7 @@ const Dialog = ({
 			</Typography>
 			{description && (
 				<Typography
-					id={modelDescription}
+					id={descriptionId}
 					color={theme.palette.text.tertiary}
 				>
 					{description}
@@ -50,17 +50,17 @@ const Dialog = ({
 				<Button
 					variant="text"
 					color="info"
-					onClick={cancelBtnOnClick}
+					onClick={onCancel}
 				>
-					{cancelBtnLbl}
+					Cancel
 				</Button>
 				<LoadingButton
 					variant="contained"
 					color="error"
 					loading={isLoading}
-					onClick={confirmationBtnOnClick}
+					onClick={onConfirm}
 				>
-					{confirmationBtnLbl}
+					{confirmationButtonLabel}
 				</LoadingButton>
 			</Stack>
 		</GenericDialog>
@@ -68,18 +68,15 @@ const Dialog = ({
 };
 
 Dialog.propTypes = {
-	modelTitle: PropTypes.string.isRequired,
-	modelDescription: PropTypes.string.isRequired,
 	open: PropTypes.bool.isRequired,
 	onClose: 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,
+	title: PropTypes.string.isRequired,
 	description: PropTypes.string,
+	onCancel: PropTypes.func.isRequired,
+	confirmationButtonLabel: PropTypes.string.isRequired,
+	onConfirm: PropTypes.func.isRequired,
+	isLoading: PropTypes.bool.isRequired,
 };
 
 export default Dialog;
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index f5ac95bc8..988c4d1d5 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -16,6 +16,7 @@ import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { GenericDialog } from "../../Dialog/genericDialog";
+import Dialog from "../../Dialog";
 
 /**
  * ProfilePanel component displays a form for editing user profile information
@@ -370,56 +371,26 @@ const ProfilePanel = () => {
 				</Box>
 			)}
 			{/* TODO - Update ModalPopup Component with @mui for reusability */}
-			<GenericDialog
-				title={"modal-delete-account"}
-				description={"delete-account-confirmation"}
+
+			<Dialog
 				open={isModalOpen("delete")}
-				close={() => setIsOpen("")}
+				onClose={() => setIsOpen("")}
 				theme={theme}
-				/* disablePortal ? */
-			>
-				<Typography
-					id="modal-delete-account"
-					component="h1"
-				>
-					Really delete this account?
-				</Typography>
-				<Typography
-					id="delete-account-confirmation"
-					component="p"
-				>
-					If you delete your account, you will no longer be able to sign in, and all of
-					your data will be deleted. Deleting your account is permanent and
-					non-recoverable action.
-				</Typography>
-				<Stack
-					direction="row"
-					gap={theme.spacing(5)}
-					mt={theme.spacing(5)}
-					justifyContent="flex-end"
-				>
-					<Button
-						variant="text"
-						color="info"
-						onClick={() => setIsOpen("")}
-					>
-						Cancel
-					</Button>
-					<LoadingButton
-						variant="contained"
-						color="error"
-						onClick={handleDeleteAccount}
-						loading={isLoading}
-					>
-						Delete account
-					</LoadingButton>
-				</Stack>
-			</GenericDialog>
+				title={"Really delete this account?"}
+				description={
+					"If you delete your account, you will no longer be able to sign in, and all of your data will be deleted. Deleting your account is permanent and non-recoverable action."
+				}
+				onCancel={() => setIsOpen("")}
+				confirmationButtonLabel={"Delete account"}
+				onConfirm={handleDeleteAccount}
+				isLoading={isLoading}
+			/>
+
 			<GenericDialog
 				title={"modal-update-picture"}
 				description={"update-profile-picture"}
 				open={isModalOpen("picture")}
-				close={closePictureModal}
+				onClose={closePictureModal}
 				theme={theme}
 			>
 				<Typography
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index d1d67d253..052cfadd2 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -333,7 +333,7 @@ const TeamPanel = () => {
 				title={"modal-invite-member"}
 				description={"invite-member-to-team"}
 				open={isOpen}
-				close={closeInviteModal}
+				onClose={closeInviteModal}
 				theme={theme}
 			>
 				<Box>
diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
index a4ed0edae..b0e571fd6 100644
--- a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
+++ b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
@@ -2,14 +2,14 @@ import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
-import { Button, IconButton, Menu, MenuItem, Stack, Typography } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
+import { IconButton, Menu, MenuItem } from "@mui/material";
 import { logger } from "../../../../Utils/Logger";
 import Settings from "../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import { networkService } from "../../../../main";
 import { createToast } from "../../../../Utils/toastUtils";
-import { GenericDialog } from "../../../../Components/Dialog/genericDialog";
+
+import Dialog from "../../../../Components/Dialog";
 
 const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 	maintenanceWindow;
@@ -148,52 +148,25 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 					Remove
 				</MenuItem>
 			</Menu>
-			<GenericDialog
-				title={"modal-delete-monitor"}
-				description={"delete-monitor-confirmation"}
+			<Dialog
 				open={isOpen}
-				close={(e) => {
+				onClose={(e) => {
 					e.stopPropagation();
 					setIsOpen(false);
 				}}
 				theme={theme}
-			>
-				<Typography
-					id="modal-delete-maintenance"
-					component="h2"
-					variant="h2"
-				>
-					Do you really want to remove this maintenance window?
-				</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>
-					<LoadingButton
-						loading={isLoading}
-						variant="contained"
-						color="error"
-						onClick={(e) => {
-							e.stopPropagation(e);
-							handleRemove(e);
-						}}
-					>
-						Delete
-					</LoadingButton>
-				</Stack>
-			</GenericDialog>
+				title={"Do you really want to remove this maintenance window?"}
+				onCancel={(e) => {
+					e.stopPropagation();
+					setIsOpen(false);
+				}}
+				confirmationButtonLabel={"Delete"}
+				onConfirm={(e) => {
+					e.stopPropagation(e);
+					handleRemove(e);
+				}}
+				isLoading={isLoading}
+			/>
 		</>
 	);
 };
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 9eb27c478..8ef557f5e 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -453,20 +453,18 @@ const Configure = () => {
 					</Stack>
 				</>
 			)}
+
 			<Dialog
-				modelTitle="modal-delete-monitor"
-				modelDescription="delete-monitor-confirmation"
 				open={isOpen}
 				onClose={() => setIsOpen(false)}
-				title="Do you really want to delete this monitor?"
-				confirmationBtnLbl="Delete"
-				confirmationBtnOnClick={handleRemove}
-				cancelBtnLbl="Cancel"
-				cancelBtnOnClick={() => setIsOpen(false)}
 				theme={theme}
-				isLoading={isLoading}
+				title="Do you really want to delete this monitor?"
 				description="Once deleted, this monitor cannot be retrieved."
-			></Dialog>
+				onCancel={() => setIsOpen(false)}
+				confirmationButtonLabel="Delete"
+				onConfirm={handleRemove}
+				isLoading={isLoading}
+			/>
 		</Stack>
 	);
 };
diff --git a/Client/src/Pages/Monitors/Home/actionsMenu.jsx b/Client/src/Pages/Monitors/Home/actionsMenu.jsx
index fb3bd4b49..e72bb545f 100644
--- a/Client/src/Pages/Monitors/Home/actionsMenu.jsx
+++ b/Client/src/Pages/Monitors/Home/actionsMenu.jsx
@@ -188,25 +188,26 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
 				)}
 			</Menu>
 			<Dialog
-				modelTitle="modal-delete-monitor"
-				modelDescription="delete-monitor-confirmation"
 				open={isOpen}
 				onClose={() => setIsOpen(false)}
+				theme={theme}
 				title="Do you really want to delete this monitor?"
-				confirmationBtnLbl="Delete"
-				confirmationBtnOnClick={(e) => {
-					e.stopPropagation();
-					handleRemove(e);
-				}}
-				cancelBtnLbl="Cancel"
-				cancelBtnOnClick={(e) => {
+				description="Once deleted, this monitor cannot be retrieved."
+				/* Do we need stop propagation? */
+				onCancel={(e) => {
 					e.stopPropagation();
 					setIsOpen(false);
 				}}
-				theme={theme}
+				confirmationButtonLabel="Delete"
+				/* Do we need stop propagation? */
+				onConfirm={(e) => {
+					e.stopPropagation();
+					handleRemove(e);
+				}}
 				isLoading={isLoading}
-				description="Once deleted, this monitor cannot be retrieved."
-			></Dialog>
+				modelTitle="modal-delete-monitor"
+				modelDescription="delete-monitor-confirmation"
+			/>
 		</>
 	);
 };
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 49d18e4c8..e0ad1516b 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -26,6 +26,7 @@ import SkeletonLayout from "./skeleton";
 import useUtils from "../../Monitors/utils";
 import "./index.css";
 import { GenericDialog } from "../../../Components/Dialog/genericDialog";
+import Dialog from "../../../Components/Dialog";
 
 const PageSpeedConfigure = () => {
 	const theme = useTheme();
@@ -38,6 +39,7 @@ const PageSpeedConfigure = () => {
 	const [monitor, setMonitor] = useState({});
 	const [errors, setErrors] = useState({});
 	const { statusColor, pagespeedStatusMsg, determineState } = useUtils();
+	const [buttonLoading, setButtonLoading] = useState(false);
 	const idMap = {
 		"monitor-url": "url",
 		"monitor-name": "name",
@@ -157,12 +159,14 @@ const PageSpeedConfigure = () => {
 	const [isOpen, setIsOpen] = useState(false);
 	const handleRemove = async (event) => {
 		event.preventDefault();
+		setButtonLoading(true);
 		const action = await dispatch(deletePageSpeed({ authToken, monitor }));
 		if (action.meta.requestStatus === "fulfilled") {
 			navigate("/pagespeed");
 		} else {
 			createToast({ body: "Failed to delete monitor." });
 		}
+		setButtonLoading(false);
 	};
 
 	return (
@@ -429,11 +433,22 @@ const PageSpeedConfigure = () => {
 					</Stack>
 				</>
 			)}
+			<Dialog
+				open={isOpen}
+				onClose={() => setIsOpen(false)}
+				theme={theme}
+				title={"Do you really want to delete this monitor?"}
+				description={"Once deleted, this monitor cannot be retrieved."}
+				onCancel={() => setIsOpen(false)}
+				confirmationButtonLabel={"Delete"}
+				onConfirm={handleRemove}
+				isLoading={buttonLoading}
+			/>
 			<GenericDialog
 				title={"modal-delete-pagespeed-monitor"}
 				description={"delete-pagespeed-monitor-confirmation"}
 				open={isOpen}
-				close={() => setIsOpen(false)}
+				onClose={() => setIsOpen(false)}
 				theme={theme}
 			>
 				<Typography
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index ad4085ab6..b88650400 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -263,18 +263,16 @@ const Settings = ({ isAdmin }) => {
 							</Box>
 						</Stack>
 						<Dialog
-							modelTitle="model-clear-stats"
-							modelDescription="clear-stats-confirmation"
 							open={isOpen.deleteStats}
 							onClose={() => setIsOpen(deleteStatsMonitorsInitState)}
-							title="Do you want to clear all stats?"
-							confirmationBtnLbl="Yes, clear all stats"
-							confirmationBtnOnClick={handleClearStats}
-							cancelBtnLbl="Cancel"
-							cancelBtnOnClick={() => setIsOpen(deleteStatsMonitorsInitState)}
 							theme={theme}
+							title="Do you want to clear all stats?"
+							description="Once deleted, this monitor cannot be retrieved."
+							onCancel={() => setIsOpen(deleteStatsMonitorsInitState)}
+							confirmationButtonLabel="Yes, clear all stats"
+							onConfirm={handleClearStats}
 							isLoading={isLoading || authIsLoading || checksIsLoading}
-						></Dialog>
+						/>
 					</ConfigBox>
 				)}
 				{isAdmin && (
@@ -314,18 +312,15 @@ const Settings = ({ isAdmin }) => {
 							</Box>
 						</Stack>
 						<Dialog
-							modelTitle="model-delete-all-monitors"
-							modelDescription="delete-all-monitors-confirmation"
 							open={isOpen.deleteMonitors}
 							onClose={() => setIsOpen(deleteStatsMonitorsInitState)}
-							title="Do you want to remove all monitors?"
-							confirmationBtnLbl="Yes, clear all monitors"
-							confirmationBtnOnClick={handleDeleteAllMonitors}
-							cancelBtnLbl="Cancel"
-							cancelBtnOnClick={() => setIsOpen(deleteStatsMonitorsInitState)}
 							theme={theme}
+							title="Do you want to remove all monitors?"
+							onCancel={() => setIsOpen(deleteStatsMonitorsInitState)}
+							confirmationButtonLabel="Yes, clear all monitors"
+							onConfirm={handleDeleteAllMonitors}
 							isLoading={isLoading || authIsLoading || checksIsLoading}
-						></Dialog>
+						/>
 					</ConfigBox>
 				)}
 				{isAdmin && (

From f1d331cdf83f7256d5de849081333feb997d6ac5 Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Tue, 22 Oct 2024 11:38:54 -0400
Subject: [PATCH 6/9] refactor: update generic dialog to have title and maybe
 description

---
 .../src/Components/Dialog/genericDialog.jsx   | 30 +++++++++++++--
 Client/src/Components/Dialog/index.jsx        | 37 +++++--------------
 .../TabPanels/Account/ProfilePanel.jsx        | 10 +----
 .../TabPanels/Account/TeamPanel.jsx           | 27 +++-----------
 .../src/Pages/PageSpeed/Configure/index.jsx   | 19 ++--------
 5 files changed, 44 insertions(+), 79 deletions(-)

diff --git a/Client/src/Components/Dialog/genericDialog.jsx b/Client/src/Components/Dialog/genericDialog.jsx
index 2807b2e8c..eb1c287d3 100644
--- a/Client/src/Components/Dialog/genericDialog.jsx
+++ b/Client/src/Components/Dialog/genericDialog.jsx
@@ -1,10 +1,15 @@
-import { Modal, Stack } from "@mui/material";
+import { useId } from "react";
 import PropTypes from "prop-types";
+import { Modal, Stack, Typography } from "@mui/material";
+
 const GenericDialog = ({ title, description, open, onClose, theme, children }) => {
+	const titleId = useId();
+	const descriptionId = useId();
+	const ariaDescribedBy = description?.length > 0 ? descriptionId : "";
 	return (
 		<Modal
-			aria-labelledby={title}
-			aria-describedby={description}
+			aria-labelledby={titleId}
+			aria-describedby={ariaDescribedBy}
 			open={open}
 			onClose={onClose}
 		>
@@ -27,6 +32,23 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 					},
 				}}
 			>
+				<Typography
+					id={titleId}
+					component="h2"
+					fontSize={16}
+					color={theme.palette.text.primary}
+					fontWeight={600}
+				>
+					{title}
+				</Typography>
+				{description && (
+					<Typography
+						id={descriptionId}
+						color={theme.palette.text.tertiary}
+					>
+						{description}
+					</Typography>
+				)}
 				{children}
 			</Stack>
 		</Modal>
@@ -35,7 +57,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 
 GenericDialog.propTypes = {
 	title: PropTypes.string.isRequired,
-	description: PropTypes.string.isRequired,
+	description: PropTypes.string,
 	open: PropTypes.bool.isRequired,
 	onClose: PropTypes.func.isRequired,
 	theme: PropTypes.object.isRequired,
diff --git a/Client/src/Components/Dialog/index.jsx b/Client/src/Components/Dialog/index.jsx
index 2053304ee..d138ab983 100644
--- a/Client/src/Components/Dialog/index.jsx
+++ b/Client/src/Components/Dialog/index.jsx
@@ -1,46 +1,27 @@
-import LoadingButton from "@mui/lab/LoadingButton";
-import { Button, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { Button, Stack } from "@mui/material";
 import { GenericDialog } from "./genericDialog";
-import { useId } from "react";
+
 const Dialog = ({
+	title,
+	description,
 	open,
 	onClose,
 	theme,
-	title,
-	description,
 	onCancel,
 	confirmationButtonLabel,
 	onConfirm,
 	isLoading,
 }) => {
-	const titleId = useId();
-	const descriptionId = useId();
 	return (
 		<GenericDialog
-			title={titleId}
-			description={descriptionId}
+			title={title}
+			description={description}
 			open={open}
 			onClose={onClose}
 			theme={theme}
 		>
-			<Typography
-				id={titleId}
-				component="h2"
-				fontSize={16}
-				color={theme.palette.text.primary}
-				fontWeight={600}
-			>
-				{title}
-			</Typography>
-			{description && (
-				<Typography
-					id={descriptionId}
-					color={theme.palette.text.tertiary}
-				>
-					{description}
-				</Typography>
-			)}
 			<Stack
 				direction="row"
 				gap={theme.spacing(4)}
@@ -68,11 +49,11 @@ const Dialog = ({
 };
 
 Dialog.propTypes = {
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string,
 	open: PropTypes.bool.isRequired,
 	onClose: PropTypes.func.isRequired,
 	theme: PropTypes.object.isRequired,
-	title: PropTypes.string.isRequired,
-	description: PropTypes.string,
 	onCancel: PropTypes.func.isRequired,
 	confirmationButtonLabel: PropTypes.string.isRequired,
 	onConfirm: PropTypes.func.isRequired,
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 988c4d1d5..27f5a2ac0 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -387,19 +387,11 @@ const ProfilePanel = () => {
 			/>
 
 			<GenericDialog
-				title={"modal-update-picture"}
-				description={"update-profile-picture"}
+				title={"Upload Image"}
 				open={isModalOpen("picture")}
 				onClose={closePictureModal}
 				theme={theme}
 			>
-				<Typography
-					id="modal-update-picture"
-					component="h1"
-					color={theme.palette.text.secondary}
-				>
-					Upload Image
-				</Typography>
 				<ImageField
 					id="update-profile-picture"
 					src={
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 052cfadd2..7d9171384 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
+import { Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
@@ -330,31 +330,14 @@ const TeamPanel = () => {
 			</Stack>
 
 			<GenericDialog
-				title={"modal-invite-member"}
-				description={"invite-member-to-team"}
+				title={"Invite new team member"}
+				description={
+					"When you add a new team member, they will get access to all monitors."
+				}
 				open={isOpen}
 				onClose={closeInviteModal}
 				theme={theme}
 			>
-				<Box>
-					<Typography
-						id="modal-invite-member"
-						component="h1"
-						fontWeight={600}
-						fontColor={theme.palette.text.secondary}
-					>
-						Invite new team member
-					</Typography>
-					<Typography
-						id="invite-member-to-team"
-						component="p"
-						fontSize={13}
-						color={theme.palette.text.accent}
-						sx={{ mt: theme.spacing(1), mb: theme.spacing(4) }}
-					>
-						When you add a new team member, they will get access to all monitors.
-					</Typography>
-				</Box>
 				<Field
 					type="email"
 					id="input-team-member"
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index e0ad1516b..e4b6363fd 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -445,26 +445,13 @@ const PageSpeedConfigure = () => {
 				isLoading={buttonLoading}
 			/>
 			<GenericDialog
-				title={"modal-delete-pagespeed-monitor"}
-				description={"delete-pagespeed-monitor-confirmation"}
+				title={"Do you really want to delete this monitor?"}
+				description={"Once deleted, this monitor cannot be retrieved."}
 				open={isOpen}
 				onClose={() => setIsOpen(false)}
 				theme={theme}
 			>
-				<Typography
-					id="modal-delete-pagespeed-monitor"
-					component="h2"
-					variant="h2"
-					fontWeight={500}
-				>
-					Do you really want to delete this monitor?
-				</Typography>
-				<Typography
-					id="delete-pagespeed-monitor-confirmation"
-					variant="body1"
-				>
-					Once deleted, this monitor cannot be retrieved.
-				</Typography>
+				{/* Make it dialog? */}
 				<Stack
 					direction="row"
 					gap={theme.spacing(4)}

From d27029625cbebde5752143dd0866e76dfb88185c Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Tue, 22 Oct 2024 11:41:55 -0400
Subject: [PATCH 7/9] chore: removing duplicated code

---
 .../src/Pages/PageSpeed/Configure/index.jsx   | 34 ++-----------------
 1 file changed, 2 insertions(+), 32 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index e4b6363fd..275321694 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
-import { Box, Button, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router";
 import {
@@ -25,7 +25,6 @@ import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineR
 import SkeletonLayout from "./skeleton";
 import useUtils from "../../Monitors/utils";
 import "./index.css";
-import { GenericDialog } from "../../../Components/Dialog/genericDialog";
 import Dialog from "../../../Components/Dialog";
 
 const PageSpeedConfigure = () => {
@@ -444,36 +443,7 @@ const PageSpeedConfigure = () => {
 				onConfirm={handleRemove}
 				isLoading={buttonLoading}
 			/>
-			<GenericDialog
-				title={"Do you really want to delete this monitor?"}
-				description={"Once deleted, this monitor cannot be retrieved."}
-				open={isOpen}
-				onClose={() => setIsOpen(false)}
-				theme={theme}
-			>
-				{/* Make it dialog? */}
-				<Stack
-					direction="row"
-					gap={theme.spacing(4)}
-					mt={theme.spacing(12)}
-					justifyContent="flex-end"
-				>
-					<Button
-						variant="text"
-						color="info"
-						onClick={() => setIsOpen(false)}
-					>
-						Cancel
-					</Button>
-					<Button
-						variant="contained"
-						color="error"
-						onClick={handleRemove}
-					>
-						Delete
-					</Button>
-				</Stack>
-			</GenericDialog>
+			<Dialog />
 		</Stack>
 	);
 };

From 02d65bd0bcc5d670e44b64ba231786cdd3761cf9 Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Tue, 22 Oct 2024 11:49:12 -0400
Subject: [PATCH 8/9] chore, removing closing tag for dialog

---
 Client/src/Pages/PageSpeed/Configure/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 275321694..50488548a 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -443,7 +443,6 @@ const PageSpeedConfigure = () => {
 				onConfirm={handleRemove}
 				isLoading={buttonLoading}
 			/>
-			<Dialog />
 		</Stack>
 	);
 };

From f0c1d30de08ea980a61bdb3d20be57e71b26724c Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Tue, 22 Oct 2024 11:56:12 -0400
Subject: [PATCH 9/9] refactor: removing dupicity of onCancel and onClose

---
 Client/src/Components/Dialog/index.jsx                        | 3 +--
 Client/src/Components/TabPanels/Account/ProfilePanel.jsx      | 1 -
 .../Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx  | 4 ----
 Client/src/Pages/Monitors/Configure/index.jsx                 | 1 -
 Client/src/Pages/Monitors/Home/actionsMenu.jsx                | 1 -
 Client/src/Pages/PageSpeed/Configure/index.jsx                | 1 -
 Client/src/Pages/Settings/index.jsx                           | 2 --
 7 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/Client/src/Components/Dialog/index.jsx b/Client/src/Components/Dialog/index.jsx
index d138ab983..fdc34c0c1 100644
--- a/Client/src/Components/Dialog/index.jsx
+++ b/Client/src/Components/Dialog/index.jsx
@@ -7,7 +7,6 @@ const Dialog = ({
 	title,
 	description,
 	open,
-	onClose,
 	theme,
 	onCancel,
 	confirmationButtonLabel,
@@ -19,7 +18,7 @@ const Dialog = ({
 			title={title}
 			description={description}
 			open={open}
-			onClose={onClose}
+			onClose={onCancel}
 			theme={theme}
 		>
 			<Stack
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 27f5a2ac0..710d6a59f 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -374,7 +374,6 @@ const ProfilePanel = () => {
 
 			<Dialog
 				open={isModalOpen("delete")}
-				onClose={() => setIsOpen("")}
 				theme={theme}
 				title={"Really delete this account?"}
 				description={
diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
index b0e571fd6..8928b1e05 100644
--- a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
+++ b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
@@ -150,10 +150,6 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 			</Menu>
 			<Dialog
 				open={isOpen}
-				onClose={(e) => {
-					e.stopPropagation();
-					setIsOpen(false);
-				}}
 				theme={theme}
 				title={"Do you really want to remove this maintenance window?"}
 				onCancel={(e) => {
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 8ef557f5e..22cc8618e 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -456,7 +456,6 @@ const Configure = () => {
 
 			<Dialog
 				open={isOpen}
-				onClose={() => setIsOpen(false)}
 				theme={theme}
 				title="Do you really want to delete this monitor?"
 				description="Once deleted, this monitor cannot be retrieved."
diff --git a/Client/src/Pages/Monitors/Home/actionsMenu.jsx b/Client/src/Pages/Monitors/Home/actionsMenu.jsx
index e72bb545f..7efffa93c 100644
--- a/Client/src/Pages/Monitors/Home/actionsMenu.jsx
+++ b/Client/src/Pages/Monitors/Home/actionsMenu.jsx
@@ -189,7 +189,6 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
 			</Menu>
 			<Dialog
 				open={isOpen}
-				onClose={() => setIsOpen(false)}
 				theme={theme}
 				title="Do you really want to delete this monitor?"
 				description="Once deleted, this monitor cannot be retrieved."
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 50488548a..222fa733f 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -434,7 +434,6 @@ const PageSpeedConfigure = () => {
 			)}
 			<Dialog
 				open={isOpen}
-				onClose={() => setIsOpen(false)}
 				theme={theme}
 				title={"Do you really want to delete this monitor?"}
 				description={"Once deleted, this monitor cannot be retrieved."}
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index b88650400..9a8913c39 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -264,7 +264,6 @@ const Settings = ({ isAdmin }) => {
 						</Stack>
 						<Dialog
 							open={isOpen.deleteStats}
-							onClose={() => setIsOpen(deleteStatsMonitorsInitState)}
 							theme={theme}
 							title="Do you want to clear all stats?"
 							description="Once deleted, this monitor cannot be retrieved."
@@ -313,7 +312,6 @@ const Settings = ({ isAdmin }) => {
 						</Stack>
 						<Dialog
 							open={isOpen.deleteMonitors}
-							onClose={() => setIsOpen(deleteStatsMonitorsInitState)}
 							theme={theme}
 							title="Do you want to remove all monitors?"
 							onCancel={() => setIsOpen(deleteStatsMonitorsInitState)}