add delete dialog, state, and header

Client/src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx

@@ -0,0 +1,91 @@
+// Components
+import { Box, Stack, Typography, Button } from "@mui/material";
+import Image from "../../../../../Components/Image";
+import SettingsIcon from "../../../../../assets/icons/settings-bold.svg?react";
+
+//Utils
+import { useTheme } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import PropTypes from "prop-types";
+
+const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, monitorId }) => {
+	const theme = useTheme();
+	const navigate = useNavigate();
+
+	return (
+		<Stack
+			direction="row"
+			gap={theme.spacing(2)}
+		>
+			<Box>
+				<Button
+					variant="contained"
+					color="error"
+					onClick={() => setIsDeleteOpen(!isDeleteOpen)}
+					loading={isDeleting}
+				>
+					Delete
+				</Button>
+			</Box>
+			<Box>
+				<Button
+					variant="contained"
+					color="secondary"
+					onClick={() => {
+						navigate(`/distributed-uptime/configure/${monitorId}`);
+					}}
+					sx={{
+						px: theme.spacing(5),
+						"& svg": {
+							mr: theme.spacing(3),
+							"& path": {
+								stroke: theme.palette.secondary.contrastText,
+							},
+						},
+					}}
+				>
+					<SettingsIcon /> Configure
+				</Button>
+			</Box>
+		</Stack>
+	);
+};
+
+Controls.propTypes = {
+	isDeleting: PropTypes.bool,
+	monitorId: PropTypes.string,
+	isDeleteOpen: PropTypes.bool.isRequired,
+	setIsDeleteOpen: PropTypes.func.isRequired,
+};
+
+const ControlsHeader = ({ isDeleting, isDeleteOpen, setIsDeleteOpen, monitorId }) => {
+	const theme = useTheme();
+
+	return (
+		<Stack
+			alignSelf="flex-start"
+			direction="row"
+			width="100%"
+			gap={theme.spacing(2)}
+			justifyContent="flex-end"
+			alignItems="flex-end"
+		>
+			<Controls
+				isDeleting={isDeleting}
+				isDeleteOpen={isDeleteOpen}
+				setIsDeleteOpen={setIsDeleteOpen}
+				monitorId={monitorId}
+			/>
+		</Stack>
+	);
+};
+
+ControlsHeader.propTypes = {
+	monitorId: PropTypes.string,
+	isDeleting: PropTypes.bool,
+	isDeleteOpen: PropTypes.bool.isRequired,
+	setIsDeleteOpen: PropTypes.func.isRequired,
+};
+
+export default ControlsHeader;

Client/src/Pages/DistributedUptime/Details/Hooks/useDeleteMonitor.jsx

@@ -0,0 +1,27 @@
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import { networkService } from "../../../../main";
+import { createToast } from "../../../../Utils/toastUtils";
+
+const useDeleteMonitor = ({ monitorId }) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const { authToken } = useSelector((state) => state.auth);
+	const deleteMonitor = async () => {
+		try {
+			setIsLoading(true);
+			await networkService.deleteMonitorById({ authToken, monitorId });
+			return true;
+		} catch (error) {
+			createToast({
+				body: error.message,
+			});
+			return false;
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return [deleteMonitor, isLoading];
+};
+
+export { useDeleteMonitor };

Client/src/Pages/DistributedUptime/Details/index.jsx

@@ -12,23 +12,31 @@ import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
 import GenericFallback from "../../../Components/GenericFallback";
 import MonitorCreateHeader from "../../../Components/MonitorCreateHeader";
 import SkeletonLayout from "./Components/Skeleton";
+import ControlsHeader from "./Components/ControlsHeader";
+import Dialog from "../../../Components/Dialog";
 //Utils
 import { useTheme } from "@mui/material/styles";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useSubscribeToDetails } from "./Hooks/useSubscribeToDetails";
+import { useDeleteMonitor } from "./Hooks/useDeleteMonitor";
+import { useNavigate } from "react-router-dom";
 
 const DistributedUptimeDetails = () => {
 	const { monitorId } = useParams();
 	// Local State
 	const [dateRange, setDateRange] = useState("day");
+	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 
 	// Utils
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();
+	const navigate = useNavigate();
 	const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] =
 		useSubscribeToDetails({ monitorId, dateRange });
+
+	const [deleteMonitor, isDeleting] = useDeleteMonitor({ monitorId });
 	// Constants
 	const BREADCRUMBS = [
 		{ name: "Distributed Uptime", path: "/distributed-uptime" },
@@ -76,6 +84,12 @@ const DistributedUptimeDetails = () => {
 				isAdmin={isAdmin}
 				path={`/status/distributed/create/${monitorId}`}
 			/>
+			<ControlsHeader
+				isDeleting={isDeleting}
+				isDeleteOpen={isDeleteOpen}
+				setIsDeleteOpen={setIsDeleteOpen}
+				monitorId={monitorId}
+			/>
 			<MonitorHeader monitor={monitor} />
 			<StatBoxes
 				monitor={monitor}
@@ -107,6 +121,21 @@ const DistributedUptimeDetails = () => {
 				/>
 			</Stack>
 			<Footer />
+			<Dialog
+				title="Do you want to delete this status page?"
+				onConfirm={() => {
+					deleteMonitor();
+					setIsDeleteOpen(false);
+					navigate("/distributed-uptime");
+				}}
+				onCancel={() => {
+					setIsDeleteOpen(false);
+				}}
+				open={isDeleteOpen}
+				confirmationButtonLabel="Yes, delete status page"
+				description="Once deleted, your status page cannot be retrieved."
+				isLoading={isDeleting || isLoading}
+			/>
 		</Stack>
 	);
 };