implement editing notification channels

client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx

@@ -42,8 +42,8 @@ const ForgotPasswordLabel = ({ email, errorEmail }) => {
 };
 
 ForgotPasswordLabel.propTypes = {
-	email: PropTypes.string.isRequired,
-	errorEmail: PropTypes.string.isRequired,
+	email: PropTypes.string,
+	errorEmail: PropTypes.string,
 };
 
 export default ForgotPasswordLabel;

client/src/Pages/Infrastructure/Details/Hooks/useHardwareMonitorsFetch.jsx

@@ -3,9 +3,7 @@ import { networkService } from "../../../../main";
 
 const useHardwareMonitorsFetch = ({ monitorId, dateRange }) => {
 	// Abort early if creating monitor
-	if (!monitorId) {
-		return { monitor: undefined, isLoading: false, networkError: undefined };
-	}
+
 	const [isLoading, setIsLoading] = useState(true);
 	const [networkError, setNetworkError] = useState(false);
 	const [monitor, setMonitor] = useState(undefined);
@@ -13,6 +11,9 @@ const useHardwareMonitorsFetch = ({ monitorId, dateRange }) => {
 	useEffect(() => {
 		const fetchData = async () => {
 			try {
+				if (!monitorId) {
+					return { monitor: undefined, isLoading: false, networkError: undefined };
+				}
 				const response = await networkService.getHardwareDetailsByMonitorId({
 					monitorId: monitorId,
 					dateRange: dateRange,

client/src/Pages/Notifications/components/ActionMenu.jsx

@@ -0,0 +1,70 @@
+// Components
+import Menu from "@mui/material/Menu";
+import IconButton from "@mui/material/IconButton";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import MenuItem from "@mui/material/MenuItem";
+
+// Utils
+import { useState } from "react";
+import { useTheme } from "@emotion/react";
+import { useNavigate } from "react-router-dom";
+import PropTypes from "prop-types";
+
+const ActionMenu = ({ notification, onDelete }) => {
+	const theme = useTheme();
+	const navigate = useNavigate();
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+
+	// Handlers
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	const handleRemove = () => {
+		onDelete(notification._id);
+		handleClose();
+	};
+
+	const handleConfigure = () => {
+		navigate(`/notifications/${notification._id}`);
+		handleClose();
+	};
+
+	return (
+		<>
+			<IconButton
+				aria-label="monitor actions"
+				onClick={handleClick}
+			>
+				<SettingsOutlinedIcon />
+			</IconButton>
+
+			<Menu
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+				anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+			>
+				<MenuItem onClick={handleConfigure}>Configure</MenuItem>
+				<MenuItem
+					onClick={handleRemove}
+					sx={{ "&.MuiButtonBase-root": { color: theme.palette.error.main } }}
+				>
+					Remove
+				</MenuItem>
+			</Menu>
+		</>
+	);
+};
+
+ActionMenu.propTypes = {
+	notification: PropTypes.object,
+	onDelete: PropTypes.func,
+};
+
+export default ActionMenu;

client/src/Pages/Notifications/create/index.jsx

@@ -12,7 +12,11 @@ import TextInput from "../../../Components/Inputs/TextInput";
 import { useState } from "react";
 import { useSelector } from "react-redux";
 import { useTheme } from "@emotion/react";
-import { useCreateNotification } from "../../../Hooks/useNotifications";
+import {
+	useCreateNotification,
+	useGetNotificationById,
+	useEditNotification,
+} from "../../../Hooks/useNotifications";
 import {
 	notificationEmailValidation,
 	notificationWebhookValidation,
@@ -20,19 +24,17 @@ import {
 } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { NOTIFICATION_TYPES } from "../utils";
 
 // Setup
 
-const NOTIFICATION_TYPES = [
-	{ _id: 1, name: "E-mail", value: "email" },
-	{ _id: 2, name: "Slack", value: "webhook" },
-	{ _id: 3, name: "PagerDuty", value: "pager_duty" },
-	{ _id: 4, name: "Webhook", value: "webhook" },
-];
-
 const CreateNotifications = () => {
+	const { notificationId } = useParams();
 	const theme = useTheme();
-	const [createNotification, isLoading, error] = useCreateNotification();
+	const [createNotification, isCreating, createNotificationError] =
+		useCreateNotification();
+	const [editNotification, isEditing, editNotificationError] = useEditNotification();
 	const BREADCRUMBS = [
 		{ name: "notifications", path: "/notifications" },
 		{ name: "create", path: "/notifications/create" },
@@ -57,6 +59,11 @@ const CreateNotifications = () => {
 	const [errors, setErrors] = useState({});
 	const { t } = useTranslation();
 
+	const [notificationIsLoading, getNotificationError] = useGetNotificationById(
+		notificationId,
+		setNotification
+	);
+
 	// handlers
 	const onSubmit = (e) => {
 		e.preventDefault();
@@ -106,7 +113,11 @@ const CreateNotifications = () => {
 			return;
 		}
 
-		createNotification(form);
+		if (notificationId) {
+			editNotification(notificationId, form);
+		} else {
+			createNotification(form);
+		}
 	};
 
 	const onChange = (e) => {
@@ -348,7 +359,7 @@ const CreateNotifications = () => {
 					justifyContent="flex-end"
 				>
 					<Button
-						loading={isLoading}
+						loading={isCreating || isEditing || notificationIsLoading}
 						type="submit"
 						variant="contained"
 						color="accent"

client/src/Pages/Notifications/index.jsx

@@ -5,6 +5,8 @@ import Breadcrumbs from "../../Components/Breadcrumbs";
 import Button from "@mui/material/Button";
 import DataTable from "../../Components/Table";
 import Fallback from "../../Components/Fallback";
+import ActionMenu from "./components/ActionMenu";
+
 // Utils
 import { useIsAdmin } from "../../Hooks/useIsAdmin";
 import { useState } from "react";
@@ -15,7 +17,7 @@ import {
 	useDeleteNotification,
 } from "../../Hooks/useNotifications";
 import { useTranslation } from "react-i18next";
-// Setup
+import { useParams } from "react-router-dom";
 
 const Notifications = () => {
 	const navigate = useNavigate();
@@ -70,13 +72,10 @@ const Notifications = () => {
 			content: "Actions",
 			render: (row) => {
 				return (
-					<Button
-						variant="contained"
-						color="error"
-						onClick={() => onDelete(row._id)}
-					>
-						Delete
-					</Button>
+					<ActionMenu
+						notification={row}
+						onDelete={onDelete}
+					/>
 				);
 			},
 		},

client/src/Pages/Notifications/utils.js

@@ -0,0 +1,6 @@
+export const NOTIFICATION_TYPES = [
+	{ _id: 1, name: "E-mail", value: "email" },
+	{ _id: 2, name: "Slack", value: "webhook" },
+	{ _id: 3, name: "PagerDuty", value: "pager_duty" },
+	{ _id: 4, name: "Webhook", value: "webhook" },
+];