From a0bb52001e542357a3f843313d76e8b94538b5f6 Mon Sep 17 00:00:00 2001
From: terryjung0244 <terryjung0244@gmail.com>
Date: Sun, 7 Jul 2024 22:02:08 -0400
Subject: [PATCH] 1. Added route setup for the maintenance page in App.jsx. 2.
 Added a dashboard menu button for the maintenance page in DashboardMenu. 3.
 Moved content with CSS from the Incidents page to the Maintenance page. 4.
 Updated pathMap in PathMap.js to include the maintenance route.

---
 Client/src/App.jsx                            |  5 +++
 Client/src/Components/DashboardMenu/index.jsx |  7 ++++
 Client/src/Pages/Incidents/index.css          | 36 -----------------
 Client/src/Pages/Incidents/index.jsx          | 34 +---------------
 Client/src/Pages/Maintenance/index.css        | 36 +++++++++++++++++
 Client/src/Pages/Maintenance/index.jsx        | 39 +++++++++++++++++++
 Client/src/Utils/PathMap.js                   | 15 +++----
 7 files changed, 96 insertions(+), 76 deletions(-)
 create mode 100644 Client/src/Pages/Maintenance/index.css
 create mode 100644 Client/src/Pages/Maintenance/index.jsx

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 4bd5bfed1..bcb3fb847 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -17,6 +17,7 @@ import SetNewPassword from "./Pages/SetNewPassword";
 import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed";
 import ToastComponent from "./Components/Toast";
 import ProtectedRoute from "./Components/ProtectedRoute";
+import Maintenance from "./Pages/Maintenance";
 
 function App() {
   return (
@@ -44,6 +45,10 @@ function App() {
             path="integrations"
             element={<ProtectedRoute Component={Integrations} />}
           />
+          <Route
+            path="maintenance"
+            element={<ProtectedRoute Component={Maintenance} />}
+          />
           <Route
             path="settings"
             element={<ProtectedRoute Component={Settings} />}
diff --git a/Client/src/Components/DashboardMenu/index.jsx b/Client/src/Components/DashboardMenu/index.jsx
index 2363352c1..0730ea643 100644
--- a/Client/src/Components/DashboardMenu/index.jsx
+++ b/Client/src/Components/DashboardMenu/index.jsx
@@ -62,6 +62,13 @@ function DashboardMenu() {
         activeButton === "/integrations",
         () => handleClick(pathMap["/integrations"], "/integrations")
       )}
+      {DashboardMenuButton(
+        AllInclusiveIcon,
+        "Maintenance",
+        "/maintenance",
+        activeButton === "/maintenance",
+        () => handleClick(pathMap["/maintenance"], "/maintenance")
+      )}
       {DashboardMenuButton(
         SettingsIcon,
         "Settings",
diff --git a/Client/src/Pages/Incidents/index.css b/Client/src/Pages/Incidents/index.css
index f26a48767..e69de29bb 100644
--- a/Client/src/Pages/Incidents/index.css
+++ b/Client/src/Pages/Incidents/index.css
@@ -1,36 +0,0 @@
-.maintenance-checklist-main {
-  max-width: 350px;
-  min-height: 390px;
-  margin: auto;
-  padding: 5px;
-}
-
-.maintenance-image {
-  width: 280px;
-  height: 150px;
-  background-color: whitesmoke;
-  border-radius: 10px;
-}
-
-.maintenance-title {
-  color: var(--env-var-color-2);
-  font-size: 16px;
-  font-weight: bold;
-  margin-top: 40px;
-  margin-bottom: 30px;
-}
-
-.checklist-item {
-  font-size: 13px;
-  color: var(--env-var-color-2);
-  display: flex;
-  margin-bottom: 10px;
-}
-
-.checklist-item-text {
-  margin-left: 10px;
-}
-
-.maintenance-checklist-main .maintenance-checklist-button {
-  margin-top: 30px;
-}
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 705ead72b..cf6081d9f 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -1,39 +1,7 @@
 import React from "react";
-import "./index.css";
-import WindowFrame from "./../../assets/Images/maintenance_window_frame.svg";
-import { Button } from "@mui/material";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 
 const Incidents = () => {
-  const maintenanceItems = [
-    { id: 1, text: "Mark your maintenance periods" },
-    { id: 2, text: "Eliminate any misunderstandings" },
-    { id: 3, text: "Stop sending alerts in maintenance windows" },
-  ];
-
-  return (
-    <div className="maintenance-checklist-main">
-      <img className="maintenance-image" src={WindowFrame} alt="WindowFrame" />
-      <div className="maintenance-title">Create a maintenance window to</div>
-      <div>
-        {maintenanceItems.map((item) => (
-          <div key={item.id} className="checklist-item">
-            <CheckCircleOutlineIcon color="primary" />
-            <div className="checklist-item-text">{item.text}</div>
-          </div>
-        ))}
-      </div>
-
-      <Button
-        variant="contained"
-        color="primary"
-        className="maintenance-checklist-button"
-        sx={{ textTransform: "none" }}
-      >
-        Let&apos;s create your maintenance window
-      </Button>
-    </div>
-  );
+  return <div>Incidents</div>;
 };
 
 export default Incidents;
diff --git a/Client/src/Pages/Maintenance/index.css b/Client/src/Pages/Maintenance/index.css
new file mode 100644
index 000000000..f26a48767
--- /dev/null
+++ b/Client/src/Pages/Maintenance/index.css
@@ -0,0 +1,36 @@
+.maintenance-checklist-main {
+  max-width: 350px;
+  min-height: 390px;
+  margin: auto;
+  padding: 5px;
+}
+
+.maintenance-image {
+  width: 280px;
+  height: 150px;
+  background-color: whitesmoke;
+  border-radius: 10px;
+}
+
+.maintenance-title {
+  color: var(--env-var-color-2);
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 40px;
+  margin-bottom: 30px;
+}
+
+.checklist-item {
+  font-size: 13px;
+  color: var(--env-var-color-2);
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.checklist-item-text {
+  margin-left: 10px;
+}
+
+.maintenance-checklist-main .maintenance-checklist-button {
+  margin-top: 30px;
+}
diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx
new file mode 100644
index 000000000..4cf77b025
--- /dev/null
+++ b/Client/src/Pages/Maintenance/index.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import "./index.css";
+import WindowFrame from "./../../assets/Images/maintenance_window_frame.svg";
+import { Button } from "@mui/material";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+
+const Maintenance = () => {
+  const maintenanceItems = [
+    { id: 1, text: "Mark your maintenance periods" },
+    { id: 2, text: "Eliminate any misunderstandings" },
+    { id: 3, text: "Stop sending alerts in maintenance windows" },
+  ];
+
+  return (
+    <div className="maintenance-checklist-main">
+      <img className="maintenance-image" src={WindowFrame} alt="WindowFrame" />
+      <div className="maintenance-title">Create a maintenance window to</div>
+      <div>
+        {maintenanceItems.map((item) => (
+          <div key={item.id} className="checklist-item">
+            <CheckCircleOutlineIcon color="primary" />
+            <div className="checklist-item-text">{item.text}</div>
+          </div>
+        ))}
+      </div>
+
+      <Button
+        variant="contained"
+        color="primary"
+        className="maintenance-checklist-button"
+        sx={{ textTransform: "none" }}
+      >
+        Let&apos;s create your maintenance window
+      </Button>
+    </div>
+  );
+};
+
+export default Maintenance;
diff --git a/Client/src/Utils/PathMap.js b/Client/src/Utils/PathMap.js
index 2a86c17f7..a14aafe63 100644
--- a/Client/src/Utils/PathMap.js
+++ b/Client/src/Utils/PathMap.js
@@ -1,9 +1,10 @@
 const pathMap = {
-    "/monitors": "Monitors",
-    "/incidents": "Incidents",
-    "/status" : "Status Pages",
-    "/integrations": "Integrations",
-    "/settings" : "Settings"
-}
+  "/monitors": "Monitors",
+  "/incidents": "Incidents",
+  "/status": "Status Pages",
+  "/integrations": "Integrations",
+  "/maintenance": "maintenance",
+  "/settings": "Settings",
+};
 
-export default pathMap;
\ No newline at end of file
+export default pathMap;