Merge pull request #1982 from bluewave-labs/feat/monitor-notification-integration

Add notifications to our existing monitors

Author: ajhollid

src/Components/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx

@@ -1,5 +1,6 @@
 import { useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
 
 import { 
   Dialog, 
@@ -49,11 +50,11 @@ const NotificationIntegrationModal = ({
   // Helper to get the field state key with error handling
   const getFieldKey = (typeId, fieldId) => {
     if (typeof typeId !== 'string' || typeId === '') {
-      throw new Error('Invalid typeId provided to getFieldKey');
+      throw new Error(t('errorInvalidTypeId'));
     }
 
     if (typeof fieldId !== 'string' || fieldId === '') {
-      throw new Error('Invalid fieldId provided to getFieldKey');
+      throw new Error(t('errorInvalidFieldId'));
     }
 
     return `${typeId}${fieldId.charAt(0).toUpperCase() + fieldId.slice(1)}`;
@@ -182,43 +183,64 @@ const NotificationIntegrationModal = ({
     await sendTestNotification(type, config);
   };
 
-  const handleSave = () => {
-    //notifications array for selected integrations
-    const notifications = [...(monitor?.notifications || [])];
-    
-    // Get all notification types IDs
-    const existingTypes = activeNotificationTypes.map(type => type.id);
+  // In NotificationIntegrationModal.jsx, update the handleSave function:
+
+const handleSave = () => {
+  // Get existing notifications
+  const notifications = [...(monitor?.notifications || [])];
+  
+  // Get all notification types IDs
+  const existingTypes = activeNotificationTypes.map(type => type.id);
+  
+  // Filter out notifications that are configurable in this modal
+  const filteredNotifications = notifications.filter(
+    notification => {
 
-    // Filter out notifications that are configurable in this modal
-    const filteredNotifications = notifications.filter(
-      notification => !existingTypes.includes(notification.type)
-    );
+      if (notification.platform) {
+        return !existingTypes.includes(notification.platform);
+      }
+     
+      return !existingTypes.includes(notification.type);
+    }
+  );
 
-    // Add each enabled notification with its configured fields
-    activeNotificationTypes.forEach(type => {
-      if (integrations[type.id]) {
-        const notificationObject = {
-          type: type.id
-        };
-        
-        // Add each field value to the notification object
-        type.fields.forEach(field => {
-          const fieldKey = getFieldKey(type.id, field.id);
-          notificationObject[field.id] = integrations[fieldKey];
-        });
-        
-        filteredNotifications.push(notificationObject);
+  // Add each enabled notification with its configured fields
+  activeNotificationTypes.forEach(type => {
+    if (integrations[type.id]) {
+
+      let notificationObject = {
+        type: "webhook", 
+        platform: type.id, // Set platform to identify the specific service
+        config: {}
+      };
+      
+      // Configure based on notification type
+      switch(type.id) {
+        case "slack":
+        case "discord":
+          notificationObject.config.webhookUrl = integrations[getFieldKey(type.id, 'webhook')];
+          break;
+        case "telegram":
+          notificationObject.config.botToken = integrations[getFieldKey(type.id, 'token')];
+          notificationObject.config.chatId = integrations[getFieldKey(type.id, 'chatId')];
+          break;
+        case "webhook":
+          notificationObject.config.webhookUrl = integrations[getFieldKey(type.id, 'url')];
+          break;
       }
-    });
+      
+      filteredNotifications.push(notificationObject);
+    }
+  });
 
-    // Update monitor with new notifications
-    setMonitor(prev => ({
-      ...prev,
-      notifications: filteredNotifications
-    }));
-    
-    onClose();
-  };
+  // Update monitor with new notifications
+  setMonitor(prev => ({
+    ...prev,
+    notifications: filteredNotifications
+  }));
+  
+  onClose();
+};
 
   return (
     <Dialog 
@@ -320,4 +342,12 @@ const NotificationIntegrationModal = ({
   );
 };
 
+NotificationIntegrationModal.propTypes = {
+  open: PropTypes.bool.isRequired, 
+  onClose: PropTypes.func.isRequired, 
+  monitor: PropTypes.object.isRequired, 
+  setMonitor: PropTypes.func.isRequired, 
+  notificationTypes: PropTypes.array 
+};
+
 export default NotificationIntegrationModal;

src/Pages/Uptime/Create/index.jsx

@@ -415,15 +415,15 @@ const CreateMonitor = () => {
 							onChange={(event) => handleNotifications(event, "email")}
 						/>
 
-						<Box mt={theme.spacing(2)}>
+						{/* <Box mt={theme.spacing(2)}>
 							<Button
 								variant="contained"
 								color="accent"
 								onClick={handleOpenNotificationModal}
 							>
 								{t("notifications.integrationButton")}
 							</Button>
-						</Box>
+						</Box> */}
 					</Stack>
 				</ConfigBox>
 				<ConfigBox>

src/locales/gb.json

@@ -184,6 +184,8 @@
     "unsupportedType": "Unsupported notification type",
     "networkError": "Network error occurred"
   },
+  "errorInvalidTypeId": "Invalid notification type provided",
+  "errorInvalidFieldId": "Invalid field ID provided",
   "testLocale": "testLocale",
   "add": "Add",
   "monitors": "monitors",