Add notification channel deletion functionality

- Add deletePartnerConnection API function
- Refactor ChannelCard component into modular structure with separate files
- Add ChannelDeleteDialog component for confirmation
- Add useDeleteNotificationChannel hook
- Create reusable Dialog UI component with styling
- Move NOTIFICATION_CHANNEL_TYPES from constants.js to notificationChannels.js
- Update imports to use consolidated notificationChannels module

Author: Pavel Fokin

api/partner.js

@@ -13,4 +13,9 @@ export const getPartnerConnectionListeners = async (connectionId) => {
 export const createPartnerConnection = async (data) => {
     const response = await axiosAdmin.post('/partner/connections', data)
     return response.data
+}
+
+export const deletePartnerConnection = async (connectionId) => {
+    const response = await axiosAdmin.delete(`/partner/connection/${connectionId}`)
+    return response.data
 }

components/Admin/notifications/ChannelCard.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+
+import { FaDiscord, FaEnvelope, FaSlack } from 'react-icons/fa'
+import { FaXTwitter } from 'react-icons/fa6'
+
+import Card from '@/components/UI/Card'
+import { useDeleteNotificationChannel } from '@/hooks/useNotifications'
+import { NOTIFICATION_CHANNEL_TYPES } from '@/lib/notificationChannels'
+
+import ChannelDeleteDialog from './ChannelDeleteDialog'
+import ChannelSpecificDetails from './ChannelSpecificDetails'
+
+const iconMap = {
+  [NOTIFICATION_CHANNEL_TYPES.SLACK]: FaSlack,
+  [NOTIFICATION_CHANNEL_TYPES.DISCORD]: FaDiscord,
+  [NOTIFICATION_CHANNEL_TYPES.TWITTER]: FaXTwitter,
+  [NOTIFICATION_CHANNEL_TYPES.EMAIL]: FaEnvelope
+}
+
+export default function ChannelCard({ channel }) {
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+  const deleteChannel = useDeleteNotificationChannel()
+
+  const handleDelete = async () => {
+    await deleteChannel.mutate(channel.id)
+    setIsDeleteDialogOpen(false)
+  }
+
+  return (
+    <Card className="flex flex-col justify-between">
+      <div className="font-bold text-lg mb-2 capitalize flex items-center gap-2 w-full">
+        {channel.type &&
+          iconMap[channel.type] &&
+          React.createElement(iconMap[channel.type], {
+            className: 'inline-block w-4 h-4 text-gray-600 dark:text-gray-400'
+          })}{' '}
+        {channel.name || `Channel #${channel.id}`}
+      </div>
+      <div className="flex justify-end">
+        <button className="btn btn-error" onClick={() => setIsDeleteDialogOpen(true)}>
+          Delete
+        </button>
+      </div>
+      <ChannelSpecificDetails channel={channel} />
+      <div className="text-sm text-gray-600 dark:text-gray-400 mb-2 w-full">
+        Used in {channel.rules.length} {channel.rules.length === 1 ? 'rule' : 'rules'}
+      </div>
+      <ChannelDeleteDialog
+        isOpen={isDeleteDialogOpen}
+        onClose={() => setIsDeleteDialogOpen(false)}
+        onDelete={handleDelete}
+      />
+    </Card>
+  )
+}

components/Admin/notifications/ChannelCard/ChannelCard.js

@@ -0,0 +1,23 @@
+import Dialog from '@/components/UI/Dialog'
+
+export default function ChannelDeleteDialog({ isOpen, onClose, onDelete }) {
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Delete channel"
+    >
+      <div className="text-gray-600 dark:text-gray-400 mb-4">
+        Are you sure you want to delete this channel? This action cannot be undone.
+      </div>
+      <div className="flex justify-end gap-2">
+        <button className="btn btn-secondary" onClick={onClose}>
+          Cancel
+        </button>
+        <button className="btn btn-error" onClick={onDelete}>
+          Delete
+        </button>
+      </div>
+    </Dialog>
+  )
+}

components/Admin/notifications/ChannelCard/ChannelDeleteDialog.js

@@ -0,0 +1,73 @@
+import { NOTIFICATION_CHANNEL_TYPES } from '@/lib/notificationChannels'
+
+export default function ChannelSpecificDetails({ channel }) {
+    if (!channel.settings) {
+      return null
+    }
+    switch (channel.type) {
+      case NOTIFICATION_CHANNEL_TYPES.SLACK:
+        return (
+          <div className="text-sm text-gray-600 dark:text-gray-400 mb-2 flex items-center gap-1 w-full">
+            <span className="inline-block text-xs font-bold truncate max-w-xs">{channel.settings.webhook || 'N/A'}</span>
+          </div>
+        )
+      case NOTIFICATION_CHANNEL_TYPES.DISCORD:
+        return (
+          <div className="text-sm text-gray-600 dark:text-gray-400 mb-2 w-full">
+            <div className="flex items-center gap-1">
+              <span className="inline-block text-xs font-bold truncate max-w-xs">
+                {channel.settings.webhook || 'N/A'}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              Username:{' '}
+              <span className="inline-block text-xs font-bold truncate max-w-xs">
+                {channel.settings.username || 'N/A'}
+              </span>
+            </div>
+          </div>
+        )
+      case NOTIFICATION_CHANNEL_TYPES.EMAIL:
+        return (
+          <div className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+            <div className="flex items-center gap-1">
+              Webhook:{' '}
+              <span className="inline-block text-xs font-bold truncate max-w-xs">
+                {channel.settings.webhook || 'N/A'}
+              </span>
+            </div>
+          </div>
+        )
+      case NOTIFICATION_CHANNEL_TYPES.TWITTER:
+        return (
+          <div className="text-sm text-gray-600 dark:text-gray-400 mb-2 w-full">
+            <div className="flex items-center gap-1">
+              Consumer key:{' '}
+              <span className="inline-block text-xs font-mono truncate max-w-xs">
+                {channel.settings.consumer_key ? channel.settings.consumer_key.slice(-8) : 'N/A'}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              Consumer secret:{' '}
+              <span className="inline-block text-xs font-mono truncate max-w-xs">
+                {channel.settings.consumer_secret ? channel.settings.consumer_secret.slice(-8) : 'N/A'}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              Access token key:{' '}
+              <span className="inline-block text-xs font-mono truncate max-w-xs">
+                {channel.settings.access_token_key ? channel.settings.access_token_key.slice(-8) : 'N/A'}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              <span>Access token secret:</span>
+              <span className="inline-block text-xs font-mono truncate max-w-xs">
+                {channel.settings.access_token_secret ? channel.settings.access_token_secret.slice(-8) : 'N/A'}
+              </span>
+            </div>
+          </div>
+        )
+      default:
+        return null
+    }
+  }

components/Admin/notifications/ChannelCard/ChannelSpecificDetails.js

@@ -0,0 +1 @@
+export { default } from './ChannelCard'

components/Admin/notifications/ChannelCard/index.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useRef } from 'react';
+import styles from '@/styles/components/dialog.module.scss';
+
+const Dialog = ({ 
+  isOpen, 
+  onClose, 
+  title, 
+  children, 
+  size = 'medium',
+  showCloseButton = true,
+  closeOnBackdropClick = true,
+  closeOnEscape = true
+}) => {
+  const dialogRef = useRef(null);
+  const previousActiveElement = useRef(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      // Store the currently focused element
+      previousActiveElement.current = document.activeElement;
+      
+      // Focus the dialog
+      if (dialogRef.current) {
+        dialogRef.current.focus();
+      }
+      
+      // Prevent body scroll
+      document.body.style.overflow = 'hidden';
+    } else {
+      // Restore body scroll
+      document.body.style.overflow = 'unset';
+      
+      // Restore focus to the previous element
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === 'Escape' && isOpen && closeOnEscape) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, onClose, closeOnEscape]);
+
+  const handleBackdropClick = (event) => {
+    if (event.target === event.currentTarget && closeOnBackdropClick) {
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div 
+      className={styles.backdrop}
+      onClick={handleBackdropClick}
+      role="presentation"
+    >
+      <div
+        ref={dialogRef}
+        className={`${styles.dialog} ${styles[size]}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? 'dialog-title' : undefined}
+        tabIndex={-1}
+      >
+        <div className={styles.header}>
+          {title && (
+            <h2 id="dialog-title" className={styles.title}>
+              {title}
+            </h2>
+          )}
+          {showCloseButton && (
+            <button
+              type="button"
+              className={styles.closeButton}
+              onClick={onClose}
+              aria-label="Close dialog"
+            >
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          )}
+        </div>
+        <div className={styles.content}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dialog;