Merge pull request #542 from MuhammadKhalilzadeh/aug-4-maintenance-window

completing create new  maintenance window (no-repeat) UI

Client/src/Layouts/HomeLayout/index.css

@@ -10,7 +10,7 @@
   grid-template-columns: var(--env-var-side-bar-width) auto;
   grid-template-rows: var(--env-var-nav-bar-height) auto;
   background-color: var(--env-var-color-30);
-  height: 100vh;
+  min-height: 100vh;
 }
 
 .home-layout aside {

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

@@ -1,5 +1,7 @@
-.maintenance-options > .MuiStack-root > .MuiStack-root.select-wrapper {
-  width: 380px;
+.maintenance-options .MuiStack-root .MuiStack-root.select-wrapper,
+.maintenance-options .MuiStack-root .field {
+  width: 60%;
+  max-width: 380px;
 }
 
 .date-picker .MuiOutlinedInput-root,
@@ -19,3 +21,51 @@
 .MuiInputAdornment-outlined .MuiIconButton-root svg {
   width: 20px;
 }
+
+.duration-config .field-text .MuiTextField-root,
+.duration-config .field {
+  width: 70px;
+  min-width: 70px;
+  max-width: 70px;
+}
+
+.duration-config > .MuiStack-root.select-wrapper {
+  width: 100px;
+}
+
+.duration-config
+  > .MuiStack-root.select-wrapper
+  > .MuiInputBase-root:has(> .MuiSelect-select) {
+  width: 100px;
+  min-width: 100px;
+}
+
+.duration-config > .select-wrapper .select-component > .MuiSelect-select {
+  text-transform: none;
+}
+
+.maintenance-options .add-monitors-fields .field.field-text {
+  width: 100%;
+}
+
+.MuiPopover-paper.MuiMenu-paper.select-dropdown
+  .MuiMenu-list
+  .MuiButtonBase-root {
+  text-transform: none;
+}
+
+.date-picker
+  .MuiOutlinedInput-root
+  .MuiInputAdornment-outlined
+  .MuiIconButton-root {
+  outline: none;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+.create-maintenance-window .MuiStack-root .MuiStack-root > button {
+  width: 110px;
+  height: 34px;
+}

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

@@ -9,6 +9,7 @@ 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";
+import Field from "../../../Components/Inputs/Field";
 
 const directory = {
   title: "Create a maintenance window",
@@ -45,9 +46,21 @@ const configOptionTitle = (title, description) => {
   );
 };
 
+const durationOptions = [
+  { _id: "minutes", name: "minutes" },
+  { _id: "hours", name: "hours" },
+  { _id: "days", name: "days" },
+];
+
 const CreateNewMaintenanceWindow = () => {
   const [values, setValues] = useState({
     repeat: 1,
+    date: dayjs(),
+    startTime: dayjs(),
+    duration: "60",
+    unit: "minutes",
+    friendlyName: "",
+    AddMonitors: "",
   });
 
   const handleChange = (event, name) => {
@@ -77,22 +90,90 @@ const CreateNewMaintenanceWindow = () => {
           className="date-localization-provider"
           dateAdapter={AdapterDayjs}
         >
-          <DatePicker className="date-picker" defaultValue={dayjs()} />
+          <DatePicker
+            className="date-picker"
+            defaultValue={values.date}
+            onChange={(date) =>
+              handleChange({ target: { value: date } }, "date")
+            }
+          />
         </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()} />
+          <MobileTimePicker
+            className="time-picker"
+            defaultValue={values.startTime}
+            onChange={(time) =>
+              handleChange({ target: { value: time } }, "startTime")
+            }
+          />
         </LocalizationProvider>
       ),
     },
+    {
+      title: "Duration",
+      component: (
+        <Stack className="duration-config" gap={2} direction="row">
+          <Field
+            id="duration-value"
+            placeholder="60"
+            onChange={(e) => handleChange(e, "duration")}
+            value={values.duration}
+          />
+          <Select
+            onChange={(e) => handleChange(e, "unit")}
+            id="duration-unit"
+            items={durationOptions}
+            value={values.unit}
+          />
+        </Stack>
+      ),
+    },
+    {
+      title: "Friendly name",
+      component: (
+        <Field
+          id="friendly-name"
+          placeholder="Maintanence at __ : __ for ___ minutes"
+          value={values.friendlyName}
+          onChange={(e) => handleChange(e, "friendlyName")}
+        />
+      ),
+    },
+    {
+      title: "Add monitors",
+      component: (
+        <Stack
+          className="add-monitors-fields"
+          sx={{ width: "60%", maxWidth: "380px" }}
+          gap={2}
+        >
+          <Field
+            id="add-monitors"
+            placeholder="Start typing to search for current monitors"
+            value={values.AddMonitors}
+            onChange={(e) => handleChange(e, "AddMonitors")}
+          />
+          <Typography
+            sx={{
+              width: "fit-content",
+              fontSize: "var(--env-var-font-size-small)",
+              borderBottom: "1px dashed var(--env-var-color-3)",
+              paddingBottom: "4px",
+            }}
+          >
+            Add all monitors to this maintenance window
+          </Typography>
+        </Stack>
+      ),
+    },
   ];
 
   return (
@@ -127,22 +208,46 @@ const CreateNewMaintenanceWindow = () => {
           </Typography>
         </Box>
         <Stack
+          className="maintenance-options"
           gap={5}
           paddingY={4}
           paddingX={8}
+          paddingBottom={10}
           sx={{
             border: "1px solid var(--env-var-color-16)",
             borderRadius: "var(--env-var-radius-1)",
+            backgroundColor: "var(--env-var-color-0)",
           }}
-          className="maintenance-options"
         >
           {configOptions.map((item, index) => (
             <Stack key={index} display="-webkit-inline-box">
-              {configOptionTitle(item.title, item.description)}
+              {item.title && configOptionTitle(item.title, item.description)}
               {item.component && item.component}
             </Stack>
           ))}
         </Stack>
+        <Stack justifyContent="end" direction="row" marginTop={3}>
+          <Button
+            sx={{
+              "&:hover": {
+                backgroundColor: "transparent",
+                boxShadow: "none",
+              },
+            }}
+            level="tertiary"
+            label="Cancel"
+          />
+          <Button
+            sx={{
+              "&:hover": {
+                backgroundColor: "#1570EF",
+                boxShadow: "none",
+              },
+            }}
+            level="primary"
+            label="Create"
+          />
+        </Stack>
       </Stack>
     </div>
   );

Client/src/index.css

@@ -17,6 +17,7 @@
 
   --env-var-font-familt-1: "Roboto", "Helvetica", "Arial", sans-serif;
 
+  --env-var-color-0: #fff;
   --env-var-color-1: #101828;
   --env-var-color-2: #475467;
   --env-var-color-3: #1570ef;