diff --git a/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx b/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
index b34cd5e55..a2c00c882 100644
--- a/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
+++ b/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
@@ -14,25 +14,98 @@ import TextInput from "../Inputs/TextInput";
import Checkbox from "../Inputs/Checkbox";
import TabPanel from "./TabPanel";
+// Configuration for notification tabs
+const NOTIFICATION_TYPES = [
+ {
+ id: 'slack',
+ label: 'Slack',
+ description: 'To enable Slack notifications, create a Slack app and enable incoming webhooks. After that, simply provide the webhook URL here.',
+ fields: [
+ {
+ id: 'webhook',
+ label: 'Webhook URL',
+ placeholder: 'https://hooks.slack.com/services/...',
+ type: 'text'
+ }
+ ]
+ },
+ {
+ id: 'discord',
+ label: 'Discord',
+ description: 'To send data to a Discord channel from Checkmate via Discord notifications using webhooks, you can use Discord\'s incoming Webhooks feature.',
+ fields: [
+ {
+ id: 'webhook',
+ label: 'Discord Webhook URL',
+ placeholder: 'https://discord.com/api/webhooks/...',
+ type: 'text'
+ }
+ ]
+ },
+ {
+ id: 'telegram',
+ label: 'Telegram',
+ description: 'To enable Telegram notifications, create a Telegram bot using BotFather, an official bot for creating and managing Telegram bots. Then, get the API token and chat ID and write them down here.',
+ fields: [
+ {
+ id: 'token',
+ label: 'Your bot token',
+ placeholder: '123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11',
+ type: 'text'
+ },
+ {
+ id: 'chatId',
+ label: 'Your Chat ID',
+ placeholder: '-1001234567890',
+ type: 'text'
+ }
+ ]
+ },
+ {
+ id: 'webhook',
+ label: 'Webhooks',
+ description: 'You can set up a custom webhook to receive notifications when incidents occur.',
+ fields: [
+ {
+ id: 'url',
+ label: 'Webhook URL',
+ placeholder: 'https://your-server.com/webhook',
+ type: 'text'
+ }
+ ]
+ }
+];
+
const NotificationIntegrationModal = ({
open,
onClose,
monitor,
- setMonitor
+ setMonitor,
+ // Optional prop to configure available notification types
+ notificationTypes = NOTIFICATION_TYPES
}) => {
const theme = useTheme();
const [tabValue, setTabValue] = useState(0);
- const [integrations, setIntegrations] = useState({
- slack: monitor?.notifications?.some(n => n.type === "slack") || false,
- slackWebhook: monitor?.notifications?.find(n => n.type === "slack")?.webhook || "",
- discord: monitor?.notifications?.some(n => n.type === "discord") || false,
- discordWebhook: monitor?.notifications?.find(n => n.type === "discord")?.webhook || "",
- telegram: monitor?.notifications?.some(n => n.type === "telegram") || false,
- telegramToken: monitor?.notifications?.find(n => n.type === "telegram")?.token || "",
- telegramChatId: monitor?.notifications?.find(n => n.type === "telegram")?.chatId || "",
- webhook: monitor?.notifications?.some(n => n.type === "webhook") || false,
- webhookUrl: monitor?.notifications?.find(n => n.type === "webhook")?.url || "",
- });
+
+ // Initialize integrations state based on available notification types
+ const initializeIntegrationsState = () => {
+ const state = {};
+
+ notificationTypes.forEach(type => {
+ // Add enabled flag for each notification type
+ state[type.id] = monitor?.notifications?.some(n => n.type === type.id) || false;
+
+ // Add state for each field in the notification type
+ type.fields.forEach(field => {
+ const fieldKey = `${type.id}${field.id.charAt(0).toUpperCase() + field.id.slice(1)}`;
+ state[fieldKey] = monitor?.notifications?.find(n => n.type === type.id)?.[field.id] || "";
+ });
+ });
+
+ return state;
+ };
+
+ const [integrations, setIntegrations] = useState(initializeIntegrationsState());
const handleChangeTab = (event, newValue) => {
setTabValue(newValue);
@@ -61,39 +134,30 @@ const NotificationIntegrationModal = ({
//notifications array for selected integrations
const notifications = [...(monitor?.notifications || [])];
- const existingTypes = ["slack", "discord", "telegram", "webhook"];
+ // Get all notification types IDs
+ const existingTypes = notificationTypes.map(type => type.id);
+
+ // Filter out notifications that are configurable in this modal
const filteredNotifications = notifications.filter(
notification => !existingTypes.includes(notification.type)
);
- if (integrations.slack) {
- filteredNotifications.push({
- type: "slack",
- webhook: integrations.slackWebhook
- });
- }
-
- if (integrations.discord) {
- filteredNotifications.push({
- type: "discord",
- webhook: integrations.discordWebhook
- });
- }
-
- if (integrations.telegram) {
- filteredNotifications.push({
- type: "telegram",
- token: integrations.telegramToken,
- chatId: integrations.telegramChatId
- });
- }
-
- if (integrations.webhook) {
- filteredNotifications.push({
- type: "webhook",
- url: integrations.webhookUrl
- });
- }
+ // Add each enabled notification with its configured fields
+ notificationTypes.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 = `${type.id}${field.id.charAt(0).toUpperCase() + field.id.slice(1)}`;
+ notificationObject[field.id] = integrations[fieldKey];
+ });
+
+ filteredNotifications.push(notificationObject);
+ }
+ });
// Update monitor with new notifications
setMonitor(prev => ({
@@ -141,234 +205,74 @@ const NotificationIntegrationModal = ({
onChange={handleChangeTab}
aria-label="Notification tabs"
>
-
-
-
-
+ {notificationTypes.map((type, index) => (
+
+ ))}
{/* Right side content */}
- {/* Slack Tab */}
-
- Slack
-
- To enable Slack notifications, create a Slack app and enable incoming webhooks. After that, simply provide the webhook URL here.
-
-
-
- handleIntegrationChange('slack', e.target.checked)}
- />
-
-
-
- (
+
+ Webhook URL
- handleInputChange('slackWebhook', e.target.value)}
- disabled={!integrations.slack}
- />
-
-
-
-
-
-
-
- {/* Discord Tab */}
-
- Discord
-
- To send data to a Discord channel from Checkmate via Discord notifications using webhooks, you can use Discord's incoming Webhooks feature.
-
-
-
- handleIntegrationChange('discord', e.target.checked)}
- />
-
-
-
+ }}>{type.label}
Discord Webhook URL
- handleInputChange('discordWebhook', e.target.value)}
- disabled={!integrations.discord}
- />
-
-
-
-
-
-
-
- {/* Telegram Tab */}
-
- Telegram
-
- To enable Telegram notifications, create a Telegram bot using BotFather, an official bot for creating and managing Telegram bots. Then, get the API token and chat ID and write them down here.
-
-
-
- handleIntegrationChange('telegram', e.target.checked)}
- />
-
-
-
- Your bot token
- handleInputChange('telegramToken', e.target.value)}
- disabled={!integrations.telegram}
- />
-
-
-
- Your Chat ID
- handleInputChange('telegramChatId', e.target.value)}
- disabled={!integrations.telegram}
- />
-
-
-
-
-
-
-
- {/* Webhooks Tab */}
-
- Webhooks
-
- You can set up a custom webhook to receive notifications when incidents occur.
-
-
-
- handleIntegrationChange('webhook', e.target.checked)}
- />
-
-
-
- Webhook URL
- handleInputChange('webhookUrl', e.target.value)}
- disabled={!integrations.webhook}
- />
-
-
-
-
-
-
+ mt: theme.spacing(0.5),
+ mb: theme.spacing(1.5),
+ color: theme.palette.primary.contrastTextTertiary
+ }}>
+ {type.description}
+
+
+
+ handleIntegrationChange(type.id, e.target.checked)}
+ />
+
+
+ {type.fields.map(field => {
+ const fieldKey = `${type.id}${field.id.charAt(0).toUpperCase() + field.id.slice(1)}`;
+
+ return (
+
+ {field.label}
+ handleInputChange(fieldKey, e.target.value)}
+ disabled={!integrations[type.id]}
+ />
+
+ );
+ })}
+
+
+
+
+
+ ))}