Working on notifications channels.

src/components/wrappers/dashboard/common/notifier/notifier-add-edit-modal.tsx

@@ -9,6 +9,7 @@ import {Button} from "@/components/ui/button";
 import {NotifierForm} from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form";
 import {OrganizationWithMembers} from "@/db/schema/03_organization";
 import {NotificationChannel} from "@/db/schema/09_notification-channel";
+import {useIsMobile} from "@/hooks/use-mobile";
 
 type OrganizationNotifierAddModalProps = {
     notificationChannel?: NotificationChannel
@@ -24,6 +25,7 @@ export const NotifierAddEditModal = ({
                                          open,
                                          onOpenChangeAction
                                      }: OrganizationNotifierAddModalProps) => {
+    const isMobile = useIsMobile();
 
     const isCreate = !Boolean(notificationChannel);
 
@@ -32,7 +34,7 @@ export const NotifierAddEditModal = ({
             <DialogTrigger asChild>
                 {isCreate ?
                     <Button>
-                        <Plus/> Add notification channel
+                        <Plus/>{!isMobile && `Add notification channel` }
                     </Button>
                     :
                     <Button

src/components/wrappers/dashboard/common/notifier/notifier-card/button-edit-notifier.tsx

@@ -9,12 +9,14 @@ import {
 } from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.action";
 import {toast} from "sonner";
 import {useState} from "react";
+import {Organization, OrganizationWithMembers} from "@/db/schema/03_organization";
 
 export type EditNotifierButtonProps = {
     notificationChannel: NotificationChannel;
+    organization? : OrganizationWithMembers;
 };
 
-export const EditNotifierButton = ({notificationChannel}: EditNotifierButtonProps) => {
+export const EditNotifierButton = ({notificationChannel, organization}: EditNotifierButtonProps) => {
     const router = useRouter();
     const [isAddModalOpen, setIsAddModalOpen] = useState(false);
 
@@ -51,6 +53,7 @@ export const EditNotifierButton = ({notificationChannel}: EditNotifierButtonProp
             }}
             />
             <NotifierAddEditModal
+                organization={organization}
                 notificationChannel={notificationChannel}
                 open={isAddModalOpen}
                 onOpenChangeAction={setIsAddModalOpen}

src/components/wrappers/dashboard/common/notifier/notifier-card/notifier-card.tsx

@@ -9,11 +9,11 @@ import {
     DeleteNotifierButton
 } from "@/components/wrappers/dashboard/common/notifier/notifier-card/button-delete-notifier";
 import {EditNotifierButton} from "@/components/wrappers/dashboard/common/notifier/notifier-card/button-edit-notifier";
-import {Organization} from "@/db/schema/03_organization";
+import {Organization, OrganizationWithMembers} from "@/db/schema/03_organization";
 
 export type NotifierCardProps = {
     data: NotificationChannel;
-    organization?: Organization;
+    organization?: OrganizationWithMembers;
 };
 
 export const NotifierCard = (props: NotifierCardProps) => {
@@ -40,7 +40,9 @@ export const NotifierCard = (props: NotifierCardProps) => {
                 </div>
 
                 <div className="flex items-center gap-2">
-                    <EditNotifierButton notificationChannel={data}/>
+                    <EditNotifierButton
+                        organization={organization}
+                        notificationChannel={data}/>
                     <DeleteNotifierButton
                         organizationId={organization?.id}
                         notificationChannelId={data.id}

src/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.tsx

@@ -136,7 +136,7 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
             <div className="flex justify-between">
                 <div>
                     {defaultValues && (
-                        <NotifierTestChannelButton notificationChannel={defaultValues}/>
+                        <NotifierTestChannelButton organizationId={organization?.id} notificationChannel={defaultValues}/>
                     )}
                 </div>
                 <div className="flex gap-2">

src/components/wrappers/dashboard/common/notifier/notifier-form/notifier-test-channel-button.tsx

@@ -6,13 +6,17 @@ import {dispatchNotification} from "@/features/notifications/dispatch";
 import {EventPayload} from "@/features/notifications/types";
 import {Send} from "lucide-react";
 import {toast} from "sonner";
+import {useIsMobile} from "@/hooks/use-mobile";
+import {cn} from "@/lib/utils";
 
 type NotifierTestChannelButtonProps = {
     notificationChannel: NotificationChannel;
+    organizationId?: string;
 }
 
-export const NotifierTestChannelButton = ({notificationChannel}: NotifierTestChannelButtonProps) => {
+export const NotifierTestChannelButton = ({notificationChannel, organizationId}: NotifierTestChannelButtonProps) => {
 
+    const isMobile = useIsMobile()
     const mutation = useMutation({
         mutationFn: async () => {
 
@@ -23,6 +27,8 @@ export const NotifierTestChannelButton = ({notificationChannel}: NotifierTestCha
             //     data: {host: 'db-prod-01', error: 'connection timeout'},
             // };
 
+            console.log("organizationId ici", organizationId);
+
             const payload: EventPayload = {
                 title: 'Test Channel',
                 message: `We are testing channel ${notificationChannel.name}`,
@@ -30,7 +36,7 @@ export const NotifierTestChannelButton = ({notificationChannel}: NotifierTestCha
                 // data: {host: 'db-prod-01', error: 'connection timeout'},
             };
 
-            const result = await dispatchNotification(payload, undefined, notificationChannel.id);
+            const result = await dispatchNotification(payload, undefined, notificationChannel.id, organizationId);
 
             if (result.success) {
                 toast.success(result.message);
@@ -51,14 +57,13 @@ export const NotifierTestChannelButton = ({notificationChannel}: NotifierTestCha
         >
             {mutation.isPending ? (
                 <>
-                    <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white"/>
+                    <div className={cn(" h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white", !isMobile && "mr-2")}/>
-                    Sending...
+                    {!isMobile && `Sending...`}
                 </>
             ) : (
-                <>
+                <div className="flex flex-row justify-center items-center">
-                    <Send className="mr-2 h-4 w-4"/>
+                    <Send className={cn("h-4 w-4", !isMobile && "mr-2")}/>{!isMobile && ` Test Channel`}
-                    Test Channel
+                </div>
-                </>
             )}
         </Button>
     )

src/components/wrappers/dashboard/organization/tabs/organization-notifiers-tab/organization-notifiers-tab.tsx

@@ -63,17 +63,16 @@ export const OrganizationNotifiersTab = ({
         <div className="flex flex-col gap-y-6 h-full py-4">
             <div className="h-full flex flex-col gap-y-6">
                 <div className={cn("hidden flex-row justify-between items-start", hasNotifiers && "flex")}>
-                    <div className="max-w-2xl">
+                    <div className="max-w-2xl ">
                         <h3 className="text-xl font-semibold text-balance mb-1">
                             Notification Settings
                         </h3>
-                        <p className="text-muted-foreground leading-relaxed">
+                        <p className="text-muted-foreground leading-relaxed ">
                             Configure how and when you receive alerts about your services and
                             infrastructure.
                         </p>
                     </div>
                     <NotifierAddEditModal
-
                         organization={organization}
                         open={isAddModalOpen}
                         onOpenChangeAction={setIsAddModalOpen}

src/features/notifications/dispatch.ts

@@ -11,8 +11,10 @@ export async function dispatchNotification(
     payload: EventPayload,
     policyId?: string,
     channelId?: string,
+    organizationId?: string,
 ): Promise<DispatchResult> {
 
+
     // // 1. Get policy + channel
     // const policy = await db
     //     .select({
@@ -66,7 +68,7 @@ export async function dispatchNotification(
                 .values({
                     channelId: channel.id,
                     // policyId: policy.id,
-                    // organizationId: organizationId || null,
+                    organizationId: organizationId || null,
                     title: payload.title,
                     message: payload.message,
                     level: payload.level,
@@ -74,6 +76,7 @@ export async function dispatchNotification(
                     success: result.success,
                     error: result.success ? null : result.error,
                     providerResponse: result.response || null,
+
                 })
                 .returning({id: notificationLog.id});
 

src/features/notifications/providers/index.ts

@@ -1,13 +1,13 @@
 "use server"
-import type { ProviderKind, EventPayload, DispatchResult } from '../types';
+import type {ProviderKind, EventPayload, DispatchResult} from '../types';
-// import { sendSlack } from './slack';
+import {sendSlack} from './slack';
-import { sendSmtp } from './smtp';
+import {sendSmtp} from './smtp';
 
 const handlers: Record<
     ProviderKind,
     (config: any, payload: EventPayload) => Promise<DispatchResult>
 > = {
-    // slack: sendSlack,
+    slack: sendSlack,
     smtp: sendSmtp,
 };
 

src/features/notifications/providers/slack.ts

@@ -0,0 +1,46 @@
+import type {EventPayload, DispatchResult} from '../types';
+
+export async function sendSlack(
+    config: { slackWebhook: string },
+    payload: EventPayload
+): Promise<DispatchResult> {
+    const {slackWebhook: webhookUrl} = config;
+
+    const text = `*${payload.title}*\n${payload.message}`;
+    const blocks = [
+        {
+            type: 'section',
+            text: {type: 'mrkdwn', text: `*${payload.title}*`},
+        },
+        {type: 'section', text: {type: 'mrkdwn', text: payload.message}},
+        payload.data
+            ? {
+                type: 'context',
+                elements: [{type: 'mrkdwn', text: `*Data:* \`\`\`${JSON.stringify(payload.data, null, 2)}\`\`\``}],
+            }
+            : null,
+    ].filter(Boolean);
+
+    const body = {
+        text,
+        blocks,
+    };
+
+    const res = await fetch(webhookUrl, {
+        method: 'POST',
+        body: JSON.stringify(body),
+        headers: {'Content-Type': 'application/json'},
+    });
+
+    if (!res.ok) {
+        const err = await res.text();
+        throw new Error(`Slack error: ${res.status} ${err}`);
+    }
+
+    return {
+        success: true,
+        provider: 'slack',
+        message: 'Sent to Slack',
+        response: await res.text(),
+    };
+}

src/features/notifications/types.ts

@@ -1,5 +1,4 @@
-// export type ProviderKind = 'slack' | 'smtp';
+export type ProviderKind = 'slack' | 'smtp';
-export type ProviderKind =  'smtp';
 
 export interface DispatchResult {
     success: boolean;