Merge pull request #537 from MuhammadKhalilzadeh/aug-3-maintenance-window

fixes

Client/src/App.jsx

@@ -24,6 +24,7 @@ import withAdminCheck from "./HOC/withAdminCheck";
 import Configure from "./Pages/Monitors/Configure";
 import PageSpeed from "./Pages/PageSpeed";
 import CreatePageSpeed from "./Pages/PageSpeed/CreatePageSpeed";
+import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenanceWindow";
 
 function App() {
   const AdminCheckedRegister = withAdminCheck(Register);
@@ -69,6 +70,10 @@ function App() {
             path="maintenance"
             element={<ProtectedRoute Component={Maintenance} />}
           />
+          <Route
+            path="/maintenance/create"
+            element={<CreateNewMaintenanceWindow />}
+          />
           <Route
             path="settings"
             element={<ProtectedRoute Component={Settings} />}

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css

@@ -0,0 +1,21 @@
+.maintenance-options > .MuiStack-root > .MuiStack-root.select-wrapper {
+  width: 380px;
+}
+
+.date-picker .MuiOutlinedInput-root,
+.time-picker .MuiOutlinedInput-root {
+  height: 34px;
+  font-size: var(--env-var-font-size-medium);
+}
+
+.date-picker .MuiOutlinedInput-root {
+  width: 140px;
+}
+
+.time-picker .MuiOutlinedInput-root {
+  width: 90px;
+}
+
+.MuiInputAdornment-outlined .MuiIconButton-root svg {
+  width: 20px;
+}

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx

@@ -0,0 +1,151 @@
+import { Box, Stack, Typography } from "@mui/material";
+import "./index.css";
+import React, { useState } from "react";
+import Button from "../../../Components/Button";
+import Back from "../../../assets/icons/left-arrow.svg?react";
+import Select from "../../../Components/Inputs/Select";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import dayjs from "dayjs";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
+
+const directory = {
+  title: "Create a maintenance window",
+  description: "Your pings won’t be sent in this time frame.",
+};
+
+const repeatOptions = [
+  { _id: 1, name: "Don't repeat" },
+  { _id: 2, name: "Repeat daily" },
+  { _id: 3, name: "Repeat weekly" },
+];
+
+const configOptionTitle = (title, description) => {
+  return (
+    <Stack width="40%" gap={1}>
+      <Typography
+        style={{
+          fontWeight: 600,
+          fontSize: "var(--env-var-font-size-medium)",
+        }}
+      >
+        {title}
+      </Typography>
+      {description && (
+        <Typography
+          style={{
+            fontSize: "var(--env-var-font-size-small)",
+          }}
+        >
+          {description}
+        </Typography>
+      )}
+    </Stack>
+  );
+};
+
+const CreateNewMaintenanceWindow = () => {
+  const [values, setValues] = useState({
+    repeat: 1,
+  });
+
+  const handleChange = (event, name) => {
+    const { value } = event.target;
+    setValues((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const configOptions = [
+    {
+      title: "Repeat",
+      component: (
+        <Select
+          onChange={(e) => handleChange(e, "repeat")}
+          id="repeat-mode"
+          items={repeatOptions}
+          value={values.repeat}
+        />
+      ),
+    },
+    {
+      title: "Date",
+      component: (
+        <LocalizationProvider
+          className="date-localization-provider"
+          dateAdapter={AdapterDayjs}
+        >
+          <DatePicker className="date-picker" defaultValue={dayjs()} />
+        </LocalizationProvider>
+      ),
+    },
+    {
+      title: "Start time",
+      description: "Your pings won’t be sent in this time frame.",
+      component: (
+        <LocalizationProvider
+          className="time-localization-provider"
+          dateAdapter={AdapterDayjs}
+        >
+          <MobileTimePicker className="time-picker" defaultValue={dayjs()} />
+        </LocalizationProvider>
+      ),
+    },
+  ];
+
+  return (
+    <div className="create-maintenance-window">
+      <Stack gap={3}>
+        <Button
+          id="btn-back"
+          sx={{
+            width: "100px",
+            height: "30px",
+            gap: "10px",
+            backgroundColor: "var(--env-var-color-32)",
+            color: "var(--env-var-color-5)",
+          }}
+          label="Back"
+          level="tertiary"
+          img={<Back />}
+        />
+        <Box>
+          <Typography
+            sx={{
+              fontSize: "var(--env-var-font-size-large)",
+              fontWeight: "600",
+              color: "var(--env-var-color-5)",
+            }}
+          >
+            {directory.title}
+          </Typography>
+
+          <Typography sx={{ fontSize: "var(--env-var-font-size-medium)" }}>
+            {directory.description}
+          </Typography>
+        </Box>
+        <Stack
+          gap={5}
+          paddingY={4}
+          paddingX={8}
+          sx={{
+            border: "1px solid var(--env-var-color-16)",
+            borderRadius: "var(--env-var-radius-1)",
+          }}
+          className="maintenance-options"
+        >
+          {configOptions.map((item, index) => (
+            <Stack key={index} display="-webkit-inline-box">
+              {configOptionTitle(item.title, item.description)}
+              {item.component && item.component}
+            </Stack>
+          ))}
+        </Stack>
+      </Stack>
+    </div>
+  );
+};
+
+export default CreateNewMaintenanceWindow;

Client/src/Pages/Maintenance/index.jsx

@@ -14,6 +14,7 @@ const Maintenance = () => {
           "Eliminate any misunderstandings",
           "Stop sending alerts in maintenance windows",
         ]}
+        link="/maintenance/create"
       />
     </div>
   );

Client/src/assets/icons/left-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

Client/src/index.css

@@ -50,6 +50,8 @@
   --env-var-color-28: #f79009;
   --env-var-color-29: #d0d5dd;
   --env-var-color-30: #fcfcfd;
+  --env-var-color-31: #1a1919;
+  --env-var-color-32: #f5f5f5;
 
   --env-var-radius-1: 4px;
   --env-var-radius-2: 8px;