Working on implementation of alert policies.

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

@@ -1,6 +1,5 @@
 "use client"
 
-import {useState} from "react";
 import {Pencil, Plus} from "lucide-react";
 
 import {

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

@@ -131,25 +131,28 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
             )}
 
 
-            <div className="flex gap-4 justify-end">
-                {defaultValues && (
-                    <NotifierTestChannelButton notificationChannel={defaultValues}/>
-                )}
+            <div className="flex justify-between">
+                <div>
+                    {defaultValues && (
+                        <NotifierTestChannelButton notificationChannel={defaultValues}/>
+                    )}
+                </div>
+                <div className="flex gap-2 ">
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => {
+                            onSuccessAction?.();
+                            form.reset();
+                        }}
+                    >
+                        Cancel
+                    </Button>
+                    <ButtonWithLoading isPending={mutationCreateOrganisation.isPending}>
+                        Add Channel
+                    </ButtonWithLoading>
+                </div>
 
-
-                <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => {
-                        onSuccessAction?.();
-                        form.reset();
-                    }}
-                >
-                    Cancel
-                </Button>
-                <ButtonWithLoading isPending={mutationCreateOrganisation.isPending}>
-                    Add Channel
-                </ButtonWithLoading>
             </div>
         </Form>
     );

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

@@ -4,6 +4,8 @@ import {NotificationChannel} from "@/db/schema/09_notification-channel";
 import {useMutation} from "@tanstack/react-query";
 import {dispatchNotification} from "@/features/notifications/dispatch";
 import {EventPayload} from "@/features/notifications/types";
+import {Send} from "lucide-react";
+import {toast} from "sonner";
 
 type NotifierTestChannelButtonProps = {
     notificationChannel: NotificationChannel;
@@ -13,30 +15,51 @@ export const NotifierTestChannelButton = ({notificationChannel}: NotifierTestCha
 
     const mutation = useMutation({
         mutationFn: async () => {
+
+            // const payload: EventPayload = {
+            //     title: 'Database Down',
+            //     message: 'Primary DB instance is unreachable',
+            //     level: 'critical',
+            //     data: {host: 'db-prod-01', error: 'connection timeout'},
+            // };
+
             const payload: EventPayload = {
-                title: 'Database Down',
-                message: 'Primary DB instance is unreachable',
-                level: 'critical',
-                data: { host: 'db-prod-01', error: 'connection timeout' },
+                title: 'Test Channel',
+                message: `We are testing channel ${notificationChannel.name}`,
+                level: 'info',
+                // data: {host: 'db-prod-01', error: 'connection timeout'},
             };
 
             const result = await dispatchNotification(payload, undefined, notificationChannel.id);
-            console.log(result);
+
+            if (result.success) {
+                toast.success(result.message);
+            } else {
+                toast.error("An error occurred while testing the notification channel");
+            }
         },
     });
 
 
-
     return (
         <Button
             type="button"
-
-            onClick={async () => {
-                await mutation.mutateAsync()
-            }}
-
+            variant="default"
+            onClick={() => mutation.mutateAsync()}
+            disabled={mutation.isPending}
+            className="bg-green-600 hover:bg-green-700 text-white font-medium shadow-sm transition-all"
         >
-            Test
+            {mutation.isPending ? (
+                <>
+                    <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white"/>
+                    Sending...
+                </>
+            ) : (
+                <>
+                    <Send className="mr-2 h-4 w-4"/>
+                    Test Channel
+                </>
+            )}
         </Button>
     )
 }