feat(alert): add support for alert email notification channel (#2327)

* feat(alert): adapt to new api for alerting

* feat(alert): adapt support for email receveir

* minor fix

* fix:  inline validation in notification-channel-modal.tsx

Author: pggb25

libs/domains/observability/feature/src/lib/alerting/alerting-creation-flow/metric-configuration-step/metric-configuration-step.tsx

@@ -684,7 +684,8 @@ export function MetricConfigurationStep({
                       label: (
                         <span className="flex items-center gap-1">
                           {match(receiver.type)
-                            .with('SLACK', (v) => <Icon name={v} width={14} height={14} />)
+                            .with('SLACK', () => <Icon name="SLACK" width={14} height={14} />)
+                            .with('EMAIL', () => <Icon iconName="envelope" iconStyle="regular" className="text-xs" />)
                             .otherwise(() => (
                               <Icon iconName="webhook" iconStyle="regular" className="text-xs" />
                             ))}

libs/domains/observability/feature/src/lib/alerting/notification-channel-modal/notification-channel-modal.spec.tsx

@@ -1,4 +1,4 @@
-import { type AlertReceiverResponse } from 'qovery-typescript-axios'
+import { type AlertReceiverResponse, type EmailAlertReceiverResponse } from 'qovery-typescript-axios'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import * as useCreateAlertReceiver from '../../hooks/use-create-alert-receiver/use-create-alert-receiver'
 import * as useEditAlertReceiver from '../../hooks/use-edit-alert-receiver/use-edit-alert-receiver'
@@ -90,7 +90,7 @@ describe('NotificationChannelModal', () => {
           send_resolved: true,
           organization_id: 'org-123',
           description: 'Webhook for Qovery alerts',
-          webhook_url: undefined,
+          webhook_url: '',
         },
       },
     })
@@ -117,4 +117,72 @@ describe('NotificationChannelModal', () => {
       payload: {},
     })
   })
+
+  describe('EMAIL receiver type', () => {
+    const emailAlertReceiver: EmailAlertReceiverResponse = {
+      id: 'email-receiver-123',
+      name: 'Email Notifications',
+      type: 'EMAIL',
+      send_resolved: true,
+      to: 'ops@example.com',
+      from: 'alerts@example.com',
+      smarthost: 'smtp.gmail.com:587',
+      auth_username: 'alerts@example.com',
+      require_tls: true,
+    } as EmailAlertReceiverResponse
+
+    it('should render create mode with email fields', async () => {
+      renderWithProviders(<NotificationChannelModal onClose={mockOnClose} organizationId="org-123" type="EMAIL" />)
+
+      expect(await screen.findByText('New email')).toBeInTheDocument()
+      expect(await screen.findByLabelText('Display name')).toBeInTheDocument()
+      expect(await screen.findByLabelText('To email')).toBeInTheDocument()
+      expect(await screen.findByLabelText('From email')).toBeInTheDocument()
+      expect(await screen.findByLabelText('SMTP Server')).toBeInTheDocument()
+      expect(await screen.findByLabelText('SMTP Username')).toBeInTheDocument()
+      expect(await screen.findByLabelText('SMTP Password')).toBeInTheDocument()
+      expect(await screen.findByText('Require TLS')).toBeInTheDocument()
+    })
+
+    it('should render edit mode with email fields pre-filled', async () => {
+      renderWithProviders(
+        <NotificationChannelModal onClose={mockOnClose} organizationId="org-123" alertReceiver={emailAlertReceiver} />
+      )
+
+      expect(await screen.findByText('Edit email')).toBeInTheDocument()
+      expect(await screen.findByDisplayValue('Email Notifications')).toBeInTheDocument()
+      expect(await screen.findByDisplayValue('ops@example.com')).toBeInTheDocument()
+      // Both "From email" and "SMTP Username" have the same value, so we check both exist
+      const alertsEmails = await screen.findAllByDisplayValue('alerts@example.com')
+      expect(alertsEmails).toHaveLength(2) // From email + SMTP Username
+      expect(await screen.findByDisplayValue('smtp.gmail.com:587')).toBeInTheDocument()
+    })
+
+    it('should send test notification with email payload in create mode', async () => {
+      const mockValidateAlertReceiver = jest.fn()
+      mockUseValidateAlertReceiver.mockReturnValue({
+        mutate: mockValidateAlertReceiver,
+        isLoading: false,
+      })
+
+      const { userEvent } = renderWithProviders(
+        <NotificationChannelModal onClose={mockOnClose} organizationId="org-123" type="EMAIL" />
+      )
+
+      const testButton = await screen.findByText('Send test notification')
+      await userEvent.click(testButton)
+
+      expect(mockValidateAlertReceiver).toHaveBeenCalledWith({
+        payload: {
+          alert_receiver: expect.objectContaining({
+            type: 'EMAIL',
+            name: 'Email notifications',
+            send_resolved: true,
+            organization_id: 'org-123',
+            description: 'Email notifications for Qovery alerts',
+          }),
+        },
+      })
+    })
+  })
 })