diff --git a/client/src/Pages/CreateMonitor/index.tsx b/client/src/Pages/CreateMonitor/index.tsx index e0b5e2930..d5e10d97b 100644 --- a/client/src/Pages/CreateMonitor/index.tsx +++ b/client/src/Pages/CreateMonitor/index.tsx @@ -9,12 +9,23 @@ import RadioGroup from "@mui/material/RadioGroup"; import FormControl from "@mui/material/FormControl"; import { useTranslation } from "react-i18next"; import MenuItem from "@mui/material/MenuItem"; +import Typography from "@mui/material/Typography"; +import Divider from "@mui/material/Divider"; +import IconButton from "@mui/material/IconButton"; +import { Trash2 } from "lucide-react"; import { BasePage, ConfigBox } from "@/Components/v2/design-elements"; -import { RadioWithDescription, Button, TextField, Select } from "@/Components/v2/inputs"; +import { + RadioWithDescription, + Button, + TextField, + Select, + Autocomplete, +} from "@/Components/v2/inputs"; import { useGet } from "@/Hooks/UseApi"; import { useMonitorForm } from "@/Hooks/useMonitorForm"; import type { Monitor, MonitorType } from "@/Types/Monitor"; +import type { Notification } from "@/Types/Notification"; import type { MonitorFormData } from "@/Validation/monitor"; interface GeneralSettingsConfig { @@ -109,6 +120,9 @@ const CreateMonitorPage = () => { isEditMode ? `/monitors/${monitorId}` : null ); + // Fetch notifications for the team + const { data: notifications } = useGet("/notifications/team"); + const { schema, defaults } = useMonitorForm({ data: existingMonitor ?? null }); const form = useForm({ @@ -313,6 +327,75 @@ const CreateMonitorPage = () => { } /> + {/* Notifications ConfigBox */} + { + // Map notifications to have 'name' property for v2 Autocomplete + const notificationOptions = (notifications ?? []).map((n) => ({ + ...n, + name: n.notificationName, + })); + const selectedNotifications = notificationOptions.filter((n) => + (field.value ?? []).includes(n.id) + ); + return ( + + option.name} + onChange={(_: unknown, newValue: typeof notificationOptions) => { + field.onChange(newValue.map((n) => n.id)); + }} + isOptionEqualToValue={(option, value) => option.id === value.id} + /> + {selectedNotifications.length > 0 && ( + + {selectedNotifications.map((notification, index) => ( + + + {notification.notificationName} + + { + field.onChange( + (field.value ?? []).filter( + (id: string) => id !== notification.id + ) + ); + }} + aria-label="Remove notification" + > + + + {index < selectedNotifications.length - 1 && } + + ))} + + )} + + ); + }} + /> + } + /> + {/* Submit Button */}