0.10.9 - Overhaul of the notification system and adds email notifications

.gitignore

@@ -48,3 +48,4 @@ next-env.d.ts
 *.njsproj
 *.sln
 *.sw?
+*_copy*

app/components/home/header/index.tsx

@@ -11,9 +11,11 @@ import HomeMonitorHeaderMenu from './menu';
 import useContextStore from '../../../context';
 import Role from '../../../../shared/permissions/role';
 import { PermissionsBits } from '../../../../shared/permissions/bitFlags';
+import type { MonitorType } from '../../../types/monitor';
 
 const typeToText = {
   docker: 'Docker Container',
+  email: 'Email (SMTP)',
   http: 'HTTP/S',
   json: 'JSON Query',
   ping: 'Ping',
@@ -28,6 +30,31 @@ interface HomeMonitorHeaderProps {
   isMobile?: boolean;
 }
 
+const HeaderSubtitle = ({ type, url }: { type: MonitorType; url: string }) => {
+  const { t } = useTranslation();
+
+  if (!type || !url) return null;
+
+  if (type === 'push') {
+    return (
+      <div className="navigation-header-subtitle">
+        <span>Passive push </span>
+        monitor
+      </div>
+    );
+  }
+
+  return (
+    <div className="navigation-header-subtitle">
+      <span>{typeToText[type]} </span>
+      {t('home.header.subtitle') + ' '}
+      <a href={url} target="_blank" rel="noreferrer">
+        {url}
+      </a>
+    </div>
+  );
+};
+
 const HomeMonitorHeader = ({
   isInfoOpen,
   setIsInfoOpen,
@@ -67,15 +94,7 @@ const HomeMonitorHeader = ({
         <div>
           {t('common.monitor')} - {activeMonitor.name}
         </div>
-        {activeMonitor?.url ? (
-          <div className="navigation-header-subtitle">
-            <span>{typeToText[activeMonitor.type]} </span>
-            {t('home.header.subtitle') + ' '}
-            <a href={activeMonitor.url} target="_blank" rel="noreferrer">
-              {activeMonitor.url}
-            </a>
-          </div>
-        ) : null}
+        <HeaderSubtitle type={activeMonitor.type} url={activeMonitor.url} />
       </div>
       <div className="navigation-header-buttons">
         {isEditor ? <HomeMonitorHeaderMenu /> : null}

app/components/modal/notification/dropdown/platform.tsx

@@ -3,21 +3,18 @@ import NotificationIcon from './icon';
 import Dropdown from '../../../ui/dropdown';
 import useDropdown from '../../../../hooks/useDropdown';
 import notificationsIcons from '../../../../constant/notifications.json';
-import type { NotificationProps } from '../../../../types/notifications';
+import type {
+  NotificationPlatforms,
+  NotificationProps,
+} from '../../../../types/notifications';
 
 interface NotificationModalPlatformProps {
   isEdit?: boolean;
   setPlatform: (platform: {
     key: keyof NotificationProps;
     value: string;
   }) => void;
-  platform:
-    | 'Discord'
-    | 'HomeAssistant'
-    | 'Pushover'
-    | 'Slack'
-    | 'Telegram'
-    | 'Webhook';
+  platform: NotificationPlatforms;
 }
 
 const NotificationModalPlatform = ({
@@ -60,11 +57,11 @@ const NotificationModalPlatform = ({
             {Object.values(notificationsIcons).map((notification) => (
               <Dropdown.Item
                 onClick={() => {
-                  setPlatform({ key: 'platform', value: notification.name });
+                  setPlatform({ key: 'platform', value: notification.id });
                   toggleDropdown();
                 }}
-                key={notification.name}
-                id={`notification-type-${notification.name}`}
+                key={notification.id}
+                id={`notification-type-${notification.id}`}
               >
                 <img
                   src={`/notifications/${notification.icon}`}

app/components/modal/notification/index.tsx

@@ -1,17 +1,18 @@
 // import dependencies
 import { useEffect } from 'react';
+import { toast } from 'react-toastify';
 import { Button, Modal } from '@lunalytics/ui';
 
 // import local files
+import NotificationModalPayload from './payload';
 import NotificationModalType from './dropdown/type';
+import { createPostRequest } from '../../../services/axios';
 import NotificationModalPlatform from './dropdown/platform';
-import NotificationsTemplates from '../../../../shared/notifications';
 import useNotificationForm from '../../../hooks/useNotificationForm';
-import NotificationModalPayload from './payload';
-import * as inputForPlatform from './platform';
+import NotificationsTemplates from '../../../../shared/notifications';
 import type { NotificationProps } from '../../../types/notifications';
-import { toast } from 'react-toastify';
-import { createPostRequest } from '../../../services/axios';
+import NotificationRenderer from '../../notifications/content/renderer';
+import { EmailComponent } from '../../notifications/content';
 
 interface NotificationModalProps {
   values?: NotificationProps;
@@ -54,10 +55,6 @@ const NotificationModal = ({
 
   const message = NotificationsTemplates[platform]?.[messageType] || 'basic';
 
-  const PlatformInputs = inputForPlatform[
-    inputs.platform as Platform
-  ] as React.ComponentType<any>;
-
   const testNotification = async () => {
     try {
       await createPostRequest('/api/notifications/test', inputs);
@@ -115,8 +112,9 @@ const NotificationModal = ({
         platform={inputs.platform}
       />
 
-      <PlatformInputs
-        values={inputs}
+      <NotificationRenderer
+        isEdit={false}
+        inputs={inputs}
         errors={errors}
         handleInput={handleInput}
       />
@@ -127,7 +125,14 @@ const NotificationModal = ({
       />
 
       <label className="input-label">Payload</label>
-      <NotificationModalPayload message={message} />
+
+      {inputs.platform !== 'Email' && (
+        <NotificationModalPayload message={message} />
+      )}
+
+      {inputs.platform === 'Email' && (
+        <EmailComponent type={inputs.messageType} />
+      )}
     </Modal>
   );
 };