Merge pull request #2592 from bluewave-labs/feature/all-maintenance-on-window

Add "All Monitors" as an option for Maintenance windows  #2579

client/src/Pages/Maintenance/CreateMaintenance/Components/MonitorList/index.jsx

@@ -0,0 +1,69 @@
+// Components
+import { Stack, Typography } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+const MonitorListItem = ({ monitor, onDelete }) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction={"row"}
+			alignItems={"center"}
+			gap={theme.spacing(4)}
+			width="100%"
+		>
+			<Typography flexGrow={1}>{monitor.name}</Typography>
+			<DeleteIcon
+				sx={{ cursor: "pointer" }}
+				onClick={() => onDelete(monitor)}
+			/>
+		</Stack>
+	);
+};
+
+MonitorListItem.propTypes = {
+	monitor: PropTypes.shape({
+		_id: PropTypes.string.isRequired,
+		name: PropTypes.string.isRequired,
+	}).isRequired,
+	onDelete: PropTypes.func.isRequired,
+};
+
+const MonitorList = ({ selectedMonitors, setSelectedMonitors }) => {
+	const onDelete = (monitorToDelete) => {
+		const newMonitors = selectedMonitors.filter(
+			(monitor) => monitor._id !== monitorToDelete._id
+		);
+		setSelectedMonitors(newMonitors);
+	};
+
+	const theme = useTheme();
+
+	return (
+		<Stack
+			gap={theme.spacing(6)}
+			width="100%"
+		>
+			{selectedMonitors?.map((monitor) => (
+				<MonitorListItem
+					key={monitor._id}
+					monitor={monitor}
+					onDelete={onDelete}
+				/>
+			))}
+		</Stack>
+	);
+};
+
+MonitorList.propTypes = {
+	selectedMonitors: PropTypes.arrayOf(
+		PropTypes.shape({
+			_id: PropTypes.string.isRequired,
+			name: PropTypes.string.isRequired,
+		})
+	).isRequired,
+	setSelectedMonitors: PropTypes.func.isRequired,
+};
+
+export default MonitorList;

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

@@ -9,6 +9,8 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
 import { maintenanceWindowValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
+import MonitorList from "./Components/MonitorList";
+import Checkbox from "../../../Components/Inputs/Checkbox";
 
 import dayjs from "dayjs";
 import Select from "../../../Components/Inputs/Select";
@@ -212,6 +214,17 @@ const CreateMaintenance = () => {
 		});
 	};
 
+	const handleMonitorsChange = (selected) => {
+		setForm((prev) => ({ ...prev, monitors: selected }));
+		const { error } = maintenanceWindowValidation.validate(
+			{ monitors: selected },
+			{ abortEarly: false }
+		);
+		setErrors((prev) => {
+			return buildErrors(prev, "monitors", error);
+		});
+	};
+
 	const handleSubmit = async () => {
 		if (hasValidationErrors(form, maintenanceWindowValidation, setErrors)) return;
 		// Build timestamp for maintenance window from startDate and startTime
@@ -525,19 +538,25 @@ const CreateMaintenance = () => {
 							id={"monitors"}
 							label={t("addMonitors")}
 							multiple={true}
-							isAdorned={false}
-							options={monitors ? monitors : []}
+							isAdorned={true}
+							options={monitors}
 							filteredBy="name"
 							secondaryLabel={"type"}
 							inputValue={search}
 							value={form.monitors}
-							handleInputChange={handleSearch}
-							handleChange={handleSelectMonitors}
+							handleInputChange={setSearch}
+							handleChange={handleMonitorsChange}
 							error={errors["monitors"]}
-							disabled={maintenanceWindowId !== undefined}
+						/>
+						<MonitorList
+							selectedMonitors={form.monitors}
+							setSelectedMonitors={(monitors) =>
+								setForm((prev) => ({ ...prev, monitors }))
+							}
 						/>
 					</Stack>
 				</ConfigBox>
+
 				<Box
 					ml="auto"
 					display="inline-block"