Add autocomplete component to create maintenance window page

Client/src/App.jsx

@@ -26,7 +26,7 @@ import withAdminProp from "./HOC/withAdminProp";
 import Configure from "./Pages/Monitors/Configure";
 import PageSpeed from "./Pages/PageSpeed";
 import CreatePageSpeed from "./Pages/PageSpeed/CreatePageSpeed";
-import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenanceWindow";
+import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenance";
 import PageSpeedDetails from "./Pages/PageSpeed/Details";
 import PageSpeedConfigure from "./Pages/PageSpeed/Configure";
 import { ThemeProvider } from "@emotion/react";
@@ -45,7 +45,7 @@ function App() {
   const MonitorDetailsWithAdminProp = withAdminProp(Details);
   const PageSpeedWithAdminProp = withAdminProp(PageSpeed);
   const PageSpeedDetailsWithAdminProp = withAdminProp(PageSpeedDetails);
-  // const MaintenanceWithAdminProp = withAdminProp(Maintenance);
+  const MaintenanceWithAdminProp = withAdminProp(Maintenance);
   const SettingsWithAdminProp = withAdminProp(Settings);
   const AdvancedSettingsWithAdminProp = withAdminProp(AdvancedSettings);
   const mode = useSelector((state) => state.ui.mode);
@@ -86,7 +86,7 @@ function App() {
           />
           <Route
             path="/monitors/:monitorId/"
-            element={<ProtectedRoute Component={DetailsWithAdminProp} />}
+            element={<ProtectedRoute Component={MonitorDetailsWithAdminProp} />}
           />
           <Route
             path="/monitors/configure/:monitorId/"

Client/src/Components/Inputs/Search/index.jsx

@@ -19,6 +19,7 @@ const Search = ({
   id,
   options,
   filteredBy,
+  secondaryLabel,
   value,
   handleInputChange,
   handleChange,
@@ -37,7 +38,7 @@ const Search = ({
         handleChange && handleChange(newValue);
       }}
       fullWidth
-      freeSolo
+      // freeSolo
       disableClearable
       options={options}
       getOptionLabel={(option) => option[filteredBy]}
@@ -103,7 +104,8 @@ const Search = ({
                 : {}
             }
           >
-            {option[filteredBy]}
+            {option[filteredBy] +
+              (secondaryLabel ? ` (${option[secondaryLabel]})` : "")}
           </ListItem>
         );
       }}
@@ -141,6 +143,7 @@ Search.propTypes = {
   id: PropTypes.string,
   options: PropTypes.array.isRequired,
   filteredBy: PropTypes.string.isRequired,
+  secondaryLabel: PropTypes.string,
   value: PropTypes.string.isRequired,
   handleInputChange: PropTypes.func.isRequired,
   handleChange: PropTypes.func,

Client/src/Components/Sidebar/index.jsx

@@ -55,7 +55,7 @@ const menu = [
   },
   { name: "Incidents", path: "incidents", icon: <Incidents /> },
   // { name: "Status pages", path: "status", icon: <StatusPages /> },
-  // { name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
+  { name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
   // { name: "Integrations", path: "integrations", icon: <Integrations /> },
   {
     name: "Account",

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

@@ -1,6 +1,7 @@
 import { Box, Button, Stack, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
 import { useTheme } from "@emotion/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ConfigBox } from "./styled";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
@@ -10,6 +11,8 @@ import Field from "../../../Components/Inputs/Field";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import CalendarIcon from "../../../assets/icons/calendar.svg?react";
 import "./index.css";
+import Search from "../../../Components/Inputs/Search";
+import { networkService } from "../../../main";
 
 const repeatConfig = [
   { _id: 0, name: "Don't repeat" },
@@ -31,12 +34,36 @@ const periodConfig = [
 
 const CreateMaintenance = () => {
   const theme = useTheme();
+  const { user, authToken } = useSelector((state) => state.auth);
+  const [monitors, setMonitors] = useState([]);
+  const [search, setSearch] = useState("");
+  const [selectedMonitor, setSelectedMonitor] = useState(null);
 
+  useEffect(() => {
+    const fetchMonitors = async () => {
+      const response = await networkService.getMonitorsByTeamId({
+        authToken: authToken,
+        teamId: user.teamId,
+        limit: -1,
+        types: ["http", "ping", "pagespeed"],
+      });
+      setMonitors(response.data.data.monitors);
+    };
+    fetchMonitors();
+  }, [authToken, user]);
+
+  const handleSearch = (value) => {
+    setSearch(value);
+  };
+
+  const handleSelectMonitor = (monitor) => {
+    setSelectedMonitor(monitor);
+  };
   return (
     <Box className="create-maintenance">
       <Breadcrumbs
         list={[
-          { name: "mainteanance", path: "/maintenance" },
+          { name: "maintenance", path: "/maintenance" },
           { name: "create", path: `/maintenance/create` },
         ]}
       />
@@ -65,7 +92,7 @@ const CreateMaintenance = () => {
             </Typography>
           </Typography>
           <Typography component="h2" variant="body2" fontSize={14}>
-            Your pings won't be sent during this time frame
+            Your pings won&apos;t be sent during this time frame
           </Typography>
         </Box>
         <ConfigBox direction="row">
@@ -81,6 +108,7 @@ const CreateMaintenance = () => {
               id="maintenance-repeat"
               label="Maintenance Repeat"
               value={0}
+              onChange={() => {}}
               items={repeatConfig}
             />
             <Stack gap={theme.spacing(2)} mt={theme.spacing(16)}>
@@ -144,7 +172,12 @@ const CreateMaintenance = () => {
               </Typography>
             </Box>
             <Stack direction="row">
-              <Select id="maintenance-period" value={0} items={periodConfig} />
+              <Select
+                id="maintenance-period"
+                value={0}
+                items={periodConfig}
+                onChange={() => {}}
+              />
             </Stack>
           </Stack>
           <Stack direction="row">
@@ -154,7 +187,12 @@ const CreateMaintenance = () => {
               </Typography>
             </Box>
             <Stack direction="row">
-              <Select id="maintenance-unit" value={0} items={durationConfig} />
+              <Select
+                id="maintenance-unit"
+                value={0}
+                items={durationConfig}
+                onChange={() => {}}
+              />
             </Stack>
           </Stack>
         </ConfigBox>
@@ -177,15 +215,27 @@ const CreateMaintenance = () => {
               <Box>
                 <Field
                   id="maintenance-name"
-                  placeholder="Maintanence at __ : __ for ___ minutes"
+                  placeholder="Maintenance at __ : __ for ___ minutes"
                   value=""
                 />
               </Box>
             </Stack>
             <Stack direction="row">
-              <Typography component="h2" variant="h2">
-                Add monitors
-              </Typography>
+              <Box>
+                <Typography component="h2" variant="h2">
+                  Add monitors
+                </Typography>
+              </Box>
+              <Box>
+                <Search
+                  options={monitors ? monitors : []}
+                  filteredBy="name"
+                  secondaryLabel={"type"}
+                  value={search}
+                  handleInputChange={handleSearch}
+                  handleChange={handleSelectMonitor}
+                />
+              </Box>
             </Stack>
           </ConfigBox>
         </Box>

Client/src/Utils/NetworkService.js

@@ -123,7 +123,7 @@ class NetworkService {
    * @param {Object} config - The configuration object.
    * @param {string} config.authToken - The authorization token to be used in the request header.
    * @param {string} config.teamId - The ID of the team whose monitors are to be retrieved.
-   * @param {number} [config.limit] - The maximum number of monitors to retrieve.
+   * @param {number} [config.limit] - The maximum number of checks to retrieve.  0 for all, -1 for none
    * @param {Array<string>} [config.types] - The types of monitors to retrieve.
    * @param {string} [config.status] - The status of the monitors to retrieve.
    * @param {string} [config.checkOrder] - The order in which to sort the retrieved monitors.