Move status page delete button to configuration page header (#2150)

client/src/Pages/StatusPage/Create/Components/Tabs/index.jsx

@@ -1,6 +1,6 @@
 // Components
 import { TabContext } from "@mui/lab";
-import { Tab, useTheme } from "@mui/material";
+import { Tab } from "@mui/material";
 import Settings from "./Settings";
 import Content from "./Content";
 
@@ -22,8 +22,12 @@ const Tabs = ({
 	tab,
 	setTab,
 	TAB_LIST,
+	handleDelete,
+	isDeleteOpen,
+	setIsDeleteOpen,
+	isDeleting,
+	isLoading,
 }) => {
-	const theme = useTheme();
 	return (
 		<TabContext value={TAB_LIST[tab]}>
 			<CustomTabList
@@ -32,7 +36,7 @@ const Tabs = ({
 				}}
 				aria-label="status page tabs"
 			>
-				{TAB_LIST.map((tabLabel, idx) => (
+				{TAB_LIST.map((tabLabel) => (
 					<Tab
 						key={tabLabel}
 						label={tabLabel}
@@ -50,6 +54,11 @@ const Tabs = ({
 					removeLogo={removeLogo}
 					errors={errors}
 					isCreate={isCreate}
+					handleDelete={handleDelete}
+					isDeleteOpen={isDeleteOpen}
+					setIsDeleteOpen={setIsDeleteOpen}
+					isDeleting={isDeleting}
+					isLoading={isLoading}
 				/>
 			) : (
 				<Content
@@ -67,6 +76,7 @@ const Tabs = ({
 };
 
 Tabs.propTypes = {
+	isCreate: PropTypes.bool,
 	form: PropTypes.object,
 	errors: PropTypes.object,
 	monitors: PropTypes.array,
@@ -79,6 +89,11 @@ Tabs.propTypes = {
 	tab: PropTypes.number,
 	setTab: PropTypes.func,
 	TAB_LIST: PropTypes.array,
+	handleDelete: PropTypes.func,
+	isDeleteOpen: PropTypes.bool,
+	setIsDeleteOpen: PropTypes.func,
+	isDeleting: PropTypes.bool,
+	isLoading: PropTypes.bool,
 };
 
 export default Tabs;

client/src/Pages/StatusPage/Create/index.jsx

@@ -3,6 +3,8 @@ import { Stack, Button, Typography } from "@mui/material";
 import Tabs from "./Components/Tabs";
 import GenericFallback from "../../../Components/GenericFallback";
 import SkeletonLayout from "./Components/Skeleton";
+import Dialog from "../../../Components/Dialog";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 //Utils
 import { useTheme } from "@emotion/react";
 import { useState, useEffect, useRef, useCallback } from "react";
@@ -15,6 +17,7 @@ import { useNavigate } from "react-router-dom";
 import { useStatusPageFetch } from "../Status/Hooks/useStatusPageFetch";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { useStatusPageDelete } from "../Status/Hooks/useStatusPageDelete";
 //Constants
 const TAB_LIST = ["General settings", "Contents"];
 
@@ -28,6 +31,7 @@ const CreateStatusPage = () => {
 	//Local state
 	const [tab, setTab] = useState(0);
 	const [progress, setProgress] = useState({ value: 0, isLoading: false });
+	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const [form, setForm] = useState({
 		isPublished: false,
 		companyName: "",
@@ -51,13 +55,13 @@ const CreateStatusPage = () => {
 	//Utils
 	const theme = useTheme();
 	const [monitors, isLoading, networkError] = useMonitorsFetch();
-	const [createStatusPage, createStatusIsLoading, createStatusPageNetworkError] =
-		useCreateStatusPage(isCreate);
+	const [createStatusPage] = useCreateStatusPage(isCreate);
 	const navigate = useNavigate();
 	const { t } = useTranslation();
 
-	const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] =
+	const [statusPage, statusPageMonitors, statusPageIsLoading, , fetchStatusPage] =
 		useStatusPageFetch(isCreate, url);
+	const [deleteStatusPage, isDeleting] = useStatusPageDelete(fetchStatusPage, url);
 
 	// Handlers
 	const handleFormChange = (e) => {
@@ -122,6 +126,12 @@ const CreateStatusPage = () => {
 		setProgress({ value: 0, isLoading: false });
 	};
 
+	const handleDelete = () => {
+		deleteStatusPage();
+		setIsDeleteOpen(false);
+		navigate("/status");
+	};
+
 	const handleSubmit = async () => {
 		let toSubmit = {
 			...form,
@@ -220,6 +230,37 @@ const CreateStatusPage = () => {
 	// Load fields
 	return (
 		<Stack gap={theme.spacing(10)}>
+			<Breadcrumbs
+				list={[
+					{ name: "status", path: "/status" },
+					{ name: "details", path: `/status/${url}` },
+					{ name: "configure", path: `/status/create/${url}` },
+				]}
+			/>
+			{!isCreate && (
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+				>
+					<Button
+						loading={isDeleting}
+						variant="contained"
+						color="error"
+						onClick={() => setIsDeleteOpen(true)}
+					>
+						{t("remove")}
+					</Button>
+					<Dialog
+						title={t("deleteStatusPage")}
+						onConfirm={handleDelete}
+						onCancel={() => setIsDeleteOpen(false)}
+						open={isDeleteOpen}
+						confirmationButtonLabel={t("deleteStatusPageConfirm")}
+						description={t("deleteStatusPageDescription")}
+						isLoading={isDeleting || statusPageIsLoading}
+					/>
+				</Stack>
+			)}
 			<Tabs
 				form={form}
 				errors={errors}