Notification channel Delete:

attempt to add the delete button to the notifications view

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

@@ -22,7 +22,10 @@ const ActionMenu = ({ notification, onDelete }) => {
 		setAnchorEl(event.currentTarget);
 	};
 
-	const handleClose = () => {
+	const handleClose = (event) => {
+		if (event) {
+			event.stopPropagation();
+		}
 		setAnchorEl(null);
 	};
 
@@ -32,7 +35,8 @@ const ActionMenu = ({ notification, onDelete }) => {
 		handleClose();
 	};
 
-	const handleConfigure = () => {
+	const handleConfigure = (e) => {
+		e.stopPropagation();
 		navigate(`/notifications/${notification._id}`);
 		handleClose();
 	};
@@ -40,8 +44,9 @@ const ActionMenu = ({ notification, onDelete }) => {
 	return (
 		<>
 			<IconButton
-				aria-label="monitor actions"
+				aria-label="notification actions"
 				onClick={handleClick}
+				onMouseDown={(e) => e.stopPropagation()}
 			>
 				<SettingsOutlinedIcon />
 			</IconButton>
@@ -51,6 +56,8 @@ const ActionMenu = ({ notification, onDelete }) => {
 				open={open}
 				onClose={handleClose}
 				anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+				onClick={(e) => e.stopPropagation()}
+				onMouseDown={(e) => e.stopPropagation()}
 			>
 				<MenuItem onClick={handleConfigure}>Configure</MenuItem>
 				<MenuItem

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

@@ -16,11 +16,12 @@ import {
 	useGetNotificationById,
 	useEditNotification,
 	useTestNotification,
+	useDeleteNotification,
 } from "../../../Hooks/useNotifications";
 import { notificationValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import {
 	NOTIFICATION_TYPES,
 	TITLE_MAP,
@@ -33,15 +34,17 @@ import {
 
 const CreateNotifications = () => {
 	const { notificationId } = useParams();
+	const navigate = useNavigate();
 	const theme = useTheme();
 	const [createNotification, isCreating, createNotificationError] =
 		useCreateNotification();
 	const [editNotification, isEditing, editNotificationError] = useEditNotification();
 	const [testNotification, isTesting, testNotificationError] = useTestNotification();
+	const [deleteNotification, isDeleting, deleteError] = useDeleteNotification();
 
 	const BREADCRUMBS = [
 		{ name: "notifications", path: "/notifications" },
-		{ name: "create", path: "/notifications/create" },
+		{ name: notificationId ? "edit" : "create", path: notificationId ? `/notifications/${notificationId}` : "/notifications/create" },
 	];
 
 	// Redux state
@@ -128,6 +131,14 @@ const CreateNotifications = () => {
 		testNotification(form);
 	};
 
+	const onDelete = () => {
+		if (notificationId) {
+			deleteNotification(notificationId, () => {
+				navigate("/notifications");
+			});
+		}
+	};
+
 	const type = NOTIFICATION_TYPES.find((type) => type._id === notification.type).value;
 	return (
 		<Stack gap={theme.spacing(10)}>
@@ -211,6 +222,16 @@ const CreateNotifications = () => {
 					>
 						Test notification
 					</Button>
+					{notificationId && (
+						<Button
+							loading={isDeleting}
+							variant="contained"
+							color="error"
+							onClick={onDelete}
+						>
+							Delete
+						</Button>
+					)}
 					<Button
 						loading={isCreating || isEditing || notificationIsLoading}
 						type="submit"

client/src/Pages/Notifications/index.jsx

@@ -62,6 +62,9 @@ const Notifications = () => {
 		{
 			id: "actions",
 			content: "Actions",
+			onClick: (e) => {
+				e.stopPropagation();
+			},
 			render: (row) => {
 				return (
 					<ActionMenu