Merge pull request #2414 from bluewave-labs/feat/fe/uptime-notification-channels

feat: fe/uptime notification channels, resolves #2344

client/src/Components/Common/AppBar.jsx

@@ -47,9 +47,6 @@ const AppAppBar = () => {
 	const location = useLocation();
 	const navigate = useNavigate();
 
-	// Debugging: Log the current theme mode
-	console.log("Current theme mode:", mode);
-
 	const logoSrc =
 		mode === "light" ? "/images/prism-black.png" : "/images/prism-white.png";
 

client/src/Components/MonitorStatusHeader/ConfigButton/index.jsx

@@ -34,8 +34,8 @@ const ConfigButton = ({ shouldRender = true, monitorId, path }) => {
 
 ConfigButton.propTypes = {
 	shouldRender: PropTypes.bool,
-	monitorId: PropTypes.string.isRequired,
-	path: PropTypes.string.isRequired,
+	monitorId: PropTypes.string,
+	path: PropTypes.string,
 };
 
 export default ConfigButton;

client/src/Components/NotificationConfig/index.jsx

@@ -0,0 +1,106 @@
+// Components
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
+import Search from "../Inputs/Search";
+
+// Utils
+import { useState, useEffect } from "react";
+import { useTheme } from "@mui/material/styles";
+import PropTypes from "prop-types";
+
+const NotificationConfig = ({ notifications, setMonitor, setNotifications }) => {
+	// Local state
+	const [notificationsSearch, setNotificationsSearch] = useState("");
+	const [selectedNotifications, setSelectedNotifications] = useState([]);
+
+	const handleSearch = (value) => {
+		setSelectedNotifications(value);
+		setMonitor((prev) => {
+			return {
+				...prev,
+				notifications: value.map((notification) => notification._id),
+			};
+		});
+	};
+
+	// Handlers
+	const handleDelete = (id) => {
+		const updatedNotifications = selectedNotifications.filter(
+			(notification) => notification._id !== id
+		);
+
+		setSelectedNotifications(updatedNotifications);
+		setMonitor((prev) => {
+			return {
+				...prev,
+				notifications: updatedNotifications.map((notification) => notification._id),
+			};
+		});
+	};
+
+	// Setup
+	const theme = useTheme();
+
+	useEffect(() => {
+		if (setNotifications) {
+			const toSet = setNotifications.map((notification) => {
+				return notifications.find((n) => n._id === notification);
+			});
+			setSelectedNotifications(toSet);
+		}
+	}, [setNotifications, notifications]);
+
+	return (
+		<Stack gap={theme.spacing(6)}>
+			<Search
+				type="notifications"
+				label="Notifications"
+				options={notifications}
+				filteredBy="notificationName"
+				multiple={true}
+				value={selectedNotifications}
+				inputValue={notificationsSearch}
+				handleInputChange={setNotificationsSearch}
+				handleChange={(value) => {
+					handleSearch(value);
+				}}
+			/>
+			<Stack
+				flex={1}
+				width="100%"
+			>
+				{selectedNotifications.map((notification, index) => (
+					<Stack
+						direction="row"
+						alignItems="center"
+						key={notification._id}
+						width="100%"
+					>
+						<Typography
+							flexGrow={1} // <-- This will take up all available horizontal space
+						>
+							{notification.notificationName}
+						</Typography>
+						<DeleteOutlineRoundedIcon
+							onClick={() => {
+								handleDelete(notification._id);
+							}}
+							sx={{ cursor: "pointer" }}
+						/>
+						{index < selectedNotifications.length - 1 && <Divider />}
+					</Stack>
+				))}
+			</Stack>
+		</Stack>
+	);
+};
+
+NotificationConfig.propTypes = {
+	notifications: PropTypes.array,
+	setMonitor: PropTypes.func,
+	setNotifications: PropTypes.array,
+};
+
+export default NotificationConfig;

client/src/Components/Sidebar/index.jsx

@@ -38,6 +38,8 @@ import ChangeLog from "../../assets/icons/changeLog.svg?react";
 import Docs from "../../assets/icons/docs.svg?react";
 import StatusPages from "../../assets/icons/status-pages.svg?react";
 import Discussions from "../../assets/icons/discussions.svg?react";
+import NotificationAddOutlinedIcon from "@mui/icons-material/NotificationAddOutlined";
+
 import "./index.css";
 
 // Utils
@@ -52,13 +54,18 @@ import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMon
 const getMenu = (t) => [
 	{ name: t("menu.uptime"), path: "uptime", icon: <Monitors /> },
 	{ name: t("menu.pagespeed"), path: "pagespeed", icon: <PageSpeed /> },
-	{ name: t("menu.infrastructure"), path: "infrastructure", icon: <Integrations /> },
 
+	{ name: t("menu.infrastructure"), path: "infrastructure", icon: <Integrations /> },
+	{
+		name: t("menu.notifications"),
+		path: "notifications",
+		icon: <NotificationAddOutlinedIcon />,
+	},
 	{ name: t("menu.incidents"), path: "incidents", icon: <Incidents /> },
 
 	{ name: t("menu.statusPages"), path: "status", icon: <StatusPages /> },
 	{ name: t("menu.maintenance"), path: "maintenance", icon: <Maintenance /> },
-	// { name: t("menu.integrations"), path: "integrations", icon: <Integrations /> },
+
 	{
 		name: t("menu.settings"),
 		icon: <Settings />,