refactor: changing all dialogs to use Dialog or generic dialog

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;

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

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>

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}
+			/>
 		</>
 	);
 };

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>
 	);
 };

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"
+			/>
 		</>
 	);
 };

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

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 && (