From 055b59e6fa3c858d6a8bbc1fe5df6792e88fa3ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gabriel?= <joao.tonaco@proton.me>
Date: Sun, 22 Dec 2024 00:42:00 -0300
Subject: [PATCH] feat: discord decoration switch

---
 .../notifications/add-notification.tsx        |  58 +++++++---
 .../notifications/delete-notification.tsx     |   8 +-
 .../notifications/show-notifications.tsx      | 102 +++++++++---------
 .../notifications/update-notification.tsx     |  63 +++++++----
 packages/server/src/db/schema/notification.ts |   2 +
 packages/server/src/services/notification.ts  |   2 +
 6 files changed, 145 insertions(+), 90 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/notifications/add-notification.tsx b/apps/dokploy/components/dashboard/settings/notifications/add-notification.tsx
index 74a933a6..a8a8470d 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/add-notification.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/add-notification.tsx
@@ -64,6 +64,7 @@ export const notificationSchema = z.discriminatedUnion("type", [
 		.object({
 			type: z.literal("discord"),
 			webhookUrl: z.string().min(1, { message: "Webhook URL is required" }),
+			decoration: z.boolean().default(true),
 		})
 		.merge(notificationBaseSchema),
 	z
@@ -195,6 +196,7 @@ export const AddNotification = () => {
 				dokployRestart: dokployRestart,
 				databaseBackup: databaseBackup,
 				webhookUrl: data.webhookUrl,
+				decoration: data.decoration,
 				name: data.name,
 				dockerCleanup: dockerCleanup,
 			});
@@ -397,23 +399,47 @@ export const AddNotification = () => {
 								)}
 
 								{type === "discord" && (
-									<FormField
-										control={form.control}
-										name="webhookUrl"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Webhook URL</FormLabel>
-												<FormControl>
-													<Input
-														placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-														{...field}
-													/>
-												</FormControl>
+									<>
+										<FormField
+											control={form.control}
+											name="webhookUrl"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Webhook URL</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+															{...field}
+														/>
+													</FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+
+										<FormField
+											control={form.control}
+											name="decoration"
+											defaultValue={true}
+											render={({ field }) => (
+												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+													<div className="space-y-0.5">
+														<FormLabel>Decoration</FormLabel>
+														<FormDescription>
+															Decorate the notification with emojis.
+														</FormDescription>
+													</div>
+													<FormControl>
+														<Switch
+															checked={field.value}
+															onCheckedChange={field.onChange}
+														/>
+													</FormControl>
+												</FormItem>
+											)}
+										/>
+									</>
 								)}
 
 								{type === "email" && (
diff --git a/apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx b/apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
index 4bb197b2..02c95d8b 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
@@ -24,12 +24,12 @@ export const DeleteNotification = ({ notificationId }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button 
-					variant="ghost" 
-					size="icon" 
+				<Button
+					variant="ghost"
+					size="icon"
 					className="h-9 w-9 group hover:bg-red-500/10"
 					isLoading={isLoading}
-					>
+				>
 					<Trash2 className="size-4 text-muted-foreground group-hover:text-red-500" />
 				</Button>
 			</AlertDialogTrigger>
diff --git a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
index 10ea7304..1883d538 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
@@ -40,58 +40,60 @@ export const ShowNotifications = () => {
 						</div>
 					) : (
 						<div className="flex flex-col gap-4">
-						<div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
-						  {data?.map((notification, index) => (
-							<div
-							  key={notification.notificationId}
-							  className="flex items-center justify-between rounded-xl p-4 transition-colors dark:bg-zinc-900/50 hover:bg-zinc-900 border border-zinc-800/50"
-							>
-							  <div className="flex items-center gap-4">
-								{notification.notificationType === "slack" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
-									<SlackIcon className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								{notification.notificationType === "telegram" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
-									<TelegramIcon className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								{notification.notificationType === "discord" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
-									<DiscordIcon className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								{notification.notificationType === "email" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10">
-									<Mail className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								<div className="flex flex-col">
-								  <span className="text-sm font-medium text-zinc-300">
-									{notification.name}
-								  </span>
-								  <span className="text-xs font-medium text-muted-foreground">
-								  	{notification.notificationType?.[0]?.toUpperCase() + notification.notificationType?.slice(1)} notification
-								  </span>
-								</div>
-							  </div>
-							  <div className="flex items-center gap-2">
-								<UpdateNotification
-								  notificationId={notification.notificationId}
-								/>
-								<DeleteNotification
-								  notificationId={notification.notificationId}
-								/>
-							  </div>
+							<div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
+								{data?.map((notification, index) => (
+									<div
+										key={notification.notificationId}
+										className="flex items-center justify-between rounded-xl p-4 transition-colors dark:bg-zinc-900/50 hover:bg-zinc-900 border border-zinc-800/50"
+									>
+										<div className="flex items-center gap-4">
+											{notification.notificationType === "slack" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
+													<SlackIcon className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											{notification.notificationType === "telegram" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
+													<TelegramIcon className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											{notification.notificationType === "discord" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
+													<DiscordIcon className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											{notification.notificationType === "email" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10">
+													<Mail className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											<div className="flex flex-col">
+												<span className="text-sm font-medium text-zinc-300">
+													{notification.name}
+												</span>
+												<span className="text-xs font-medium text-muted-foreground">
+													{notification.notificationType?.[0]?.toUpperCase() +
+														notification.notificationType?.slice(1)}{" "}
+													notification
+												</span>
+											</div>
+										</div>
+										<div className="flex items-center gap-2">
+											<UpdateNotification
+												notificationId={notification.notificationId}
+											/>
+											<DeleteNotification
+												notificationId={notification.notificationId}
+											/>
+										</div>
+									</div>
+								))}
+							</div>
+
+							<div className="flex flex-col gap-4 justify-end w-full items-end">
+								<AddNotification />
 							</div>
-						  ))}
 						</div>
-		  
-						<div className="flex flex-col gap-4 justify-end w-full items-end">
-						  <AddNotification />
-						</div>
-					  </div>
 					)}
 				</CardContent>
 			</Card>
diff --git a/apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx b/apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
index cfa2e0ba..533096fd 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
@@ -28,7 +28,7 @@ import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Mail, Pen } from "lucide-react";
 import { useEffect, useState } from "react";
-import { FieldErrors, useFieldArray, useForm } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import {
 	type NotificationSchema,
@@ -113,6 +113,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 					databaseBackup: data.databaseBackup,
 					type: data.notificationType,
 					webhookUrl: data.discord?.webhookUrl,
+					decoration: data.discord?.decoration || undefined,
 					name: data.name,
 					dockerCleanup: data.dockerCleanup,
 				});
@@ -218,9 +219,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger className="" asChild>
-				<Button variant="ghost"
-                        size="icon"
-                        className="h-9 w-9">
+				<Button variant="ghost" size="icon" className="h-9 w-9">
 					<Pen className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
@@ -358,23 +357,47 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 								)}
 
 								{type === "discord" && (
-									<FormField
-										control={form.control}
-										name="webhookUrl"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Webhook URL</FormLabel>
-												<FormControl>
-													<Input
-														placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-														{...field}
-													/>
-												</FormControl>
+									<>
+										<FormField
+											control={form.control}
+											name="webhookUrl"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Webhook URL</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+															{...field}
+														/>
+													</FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+
+										<FormField
+											control={form.control}
+											name="decoration"
+											defaultValue={true}
+											render={({ field }) => (
+												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+													<div className="space-y-0.5">
+														<FormLabel>Decoration</FormLabel>
+														<FormDescription>
+															Decorate the notification with emojis.
+														</FormDescription>
+													</div>
+													<FormControl>
+														<Switch
+															checked={field.value}
+															onCheckedChange={field.onChange}
+														/>
+													</FormControl>
+												</FormItem>
+											)}
+										/>
+									</>
 								)}
 								{type === "email" && (
 									<>
diff --git a/packages/server/src/db/schema/notification.ts b/packages/server/src/db/schema/notification.ts
index ecd25ff2..80de897b 100644
--- a/packages/server/src/db/schema/notification.ts
+++ b/packages/server/src/db/schema/notification.ts
@@ -172,6 +172,7 @@ export const apiCreateDiscord = notificationsSchema
 	})
 	.extend({
 		webhookUrl: z.string().min(1),
+		decoration: z.boolean(),
 	})
 	.required();
 
@@ -183,6 +184,7 @@ export const apiUpdateDiscord = apiCreateDiscord.partial().extend({
 
 export const apiTestDiscordConnection = apiCreateDiscord.pick({
 	webhookUrl: true,
+	decoration: true,
 });
 
 export const apiCreateEmail = notificationsSchema
diff --git a/packages/server/src/services/notification.ts b/packages/server/src/services/notification.ts
index 22e1e0b5..e75154df 100644
--- a/packages/server/src/services/notification.ts
+++ b/packages/server/src/services/notification.ts
@@ -204,6 +204,7 @@ export const createDiscordNotification = async (
 			.insert(discord)
 			.values({
 				webhookUrl: input.webhookUrl,
+				decoration: input.decoration,
 			})
 			.returning()
 			.then((value) => value[0]);
@@ -272,6 +273,7 @@ export const updateDiscordNotification = async (
 			.update(discord)
 			.set({
 				webhookUrl: input.webhookUrl,
+				decoration: input.decoration,
 			})
 			.where(eq(discord.discordId, input.discordId))
 			.returning()