Merge pull request #962 from joaotonaco/feat/discord-emoji-toggle

feat(notifications): discord decoration toggle
2025-06-26 18:27:59 +00:00 · 2024-12-24 14:13:09 -06:00
parent 96cdffb5b9 1d35d218ca
commit ce71fa4f4d
14 changed files with 4415 additions and 81 deletions
--- 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" && (
@@ -708,6 +734,7 @@ export const AddNotification = () => {
 									} else if (type === "discord") {
 										await testDiscordConnection({
 											webhookUrl: form.getValues("webhookUrl"),
+											decoration: form.getValues("decoration"),
 										});
 									} else if (type === "email") {
 										await testEmailConnection({
--- 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,
 				});
@@ -178,6 +179,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 				dokployRestart: dokployRestart,
 				databaseBackup: databaseBackup,
 				webhookUrl: formData.webhookUrl,
+				decoration: formData.decoration,
 				name: formData.name,
 				notificationId: notificationId,
 				discordId: data?.discordId,
@@ -360,23 +362,46 @@ 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"
+											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" && (
 									<>
@@ -671,6 +696,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 									} else if (type === "discord") {
 										await testDiscordConnection({
 											webhookUrl: form.getValues("webhookUrl"),
+											decoration: form.getValues("decoration"),
 										});
 									} else if (type === "email") {
 										await testEmailConnection({
--- a/apps/dokploy/drizzle/0052_bumpy_luckman.sql
+++ b/apps/dokploy/drizzle/0052_bumpy_luckman.sql
@@ -0,0 +1 @@
+ALTER TABLE "discord" ADD COLUMN "decoration" boolean;
--- a/apps/dokploy/drizzle/meta/0052_snapshot.json
+++ b/apps/dokploy/drizzle/meta/0052_snapshot.json
--- a/apps/dokploy/drizzle/meta/_journal.json
+++ b/apps/dokploy/drizzle/meta/_journal.json
@@ -365,6 +365,13 @@
      "when": 1734241482851,
      "tag": "0051_hard_gorgon",
      "breakpoints": true
+    },
+    {
+      "idx": 52,
+      "version": "6",
+      "when": 1734809337308,
+      "tag": "0052_bumpy_luckman",
+      "breakpoints": true
    }
  ]
 }
--- a/apps/dokploy/server/api/routers/auth.ts
+++ b/apps/dokploy/server/api/routers/auth.ts
@@ -363,7 +363,7 @@ export const authRouter = createTRPCRouter({
 				<a href="${WEBSITE_URL}/reset-password?token=${token}">
 					Reset Password
 				</a>
-			
+
 			`,
 			);
 		}),
@@ -505,7 +505,7 @@ export const sendDiscordNotificationWelcome = async (newAdmin: Auth) => {
 			webhookUrl: process.env.DISCORD_WEBHOOK_URL || "",
 		},
 		{
-			title: " New User Registered",
+			title: "New User Registered",
 			color: 0x00ff00,
 			fields: [
 				{
--- a/apps/dokploy/server/api/routers/notification.ts
+++ b/apps/dokploy/server/api/routers/notification.ts
@@ -187,11 +187,15 @@ export const notificationRouter = createTRPCRouter({
 		.input(apiTestDiscordConnection)
 		.mutation(async ({ input }) => {
 			try {
+				const decorate = (decoration: string, text: string) =>
+					`${input.decoration ? decoration : ""} ${text}`.trim();
+
 				await sendDiscordNotification(input, {
-					title: "> `🤚` - Test Notification",
-					description: "> Hi, From Dokploy 👋",
+					title: decorate(">", "`🤚` - Test Notification"),
+					description: decorate(">", "Hi, From Dokploy 👋"),
 					color: 0xf3f7f4,
 				});
+
 				return true;
 			} catch (error) {
 				throw new TRPCError({
--- a/packages/server/src/db/schema/notification.ts
+++ b/packages/server/src/db/schema/notification.ts
@@ -68,6 +68,7 @@ export const discord = pgTable("discord", {
 		.primaryKey()
 		.$defaultFn(() => nanoid()),
 	webhookUrl: text("webhookUrl").notNull(),
+	decoration: boolean("decoration"),
 });

 export const email = pgTable("email", {
@@ -171,6 +172,7 @@ export const apiCreateDiscord = notificationsSchema
 	})
 	.extend({
 		webhookUrl: z.string().min(1),
+		decoration: z.boolean(),
 	})
 	.required();

@@ -180,9 +182,13 @@ export const apiUpdateDiscord = apiCreateDiscord.partial().extend({
 	adminId: z.string().optional(),
 });

-export const apiTestDiscordConnection = apiCreateDiscord.pick({
-	webhookUrl: true,
-});
+export const apiTestDiscordConnection = apiCreateDiscord
+	.pick({
+		webhookUrl: true,
+	})
+	.extend({
+		decoration: z.boolean().optional(),
+	});

 export const apiCreateEmail = notificationsSchema
 	.pick({
--- 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()
--- a/packages/server/src/utils/notifications/build-error.ts
+++ b/packages/server/src/utils/notifications/build-error.ts
@@ -59,46 +59,49 @@ export const sendBuildErrorNotifications = async ({
 		}

 		if (discord) {
+			const decorate = (decoration: string, text: string) =>
+				`${discord.decoration ? decoration : ""} ${text}`.trim();
+
 			await sendDiscordNotification(discord, {
-				title: "> `⚠️` Build Failed",
+				title: decorate(">", "`⚠️` Build Failed"),
 				color: 0xed4245,
 				fields: [
 					{
-						name: "`🛠️` Project",
+						name: decorate("`🛠️`", "Project"),
 						value: projectName,
 						inline: true,
 					},
 					{
-						name: "`⚙️` Application",
+						name: decorate("`⚙️`", "Application"),
 						value: applicationName,
 						inline: true,
 					},
 					{
-						name: "`❔` Type",
+						name: decorate("`❔`", "Type"),
 						value: applicationType,
 						inline: true,
 					},
 					{
-						name: "`📅` Date",
+						name: decorate("`📅`", "Date"),
 						value: `<t:${unixDate}:D>`,
 						inline: true,
 					},
 					{
-						name: "`⌚` Time",
+						name: decorate("`⌚`", "Time"),
 						value: `<t:${unixDate}:t>`,
 						inline: true,
 					},
 					{
-						name: "`❓`Type",
+						name: decorate("`❓`", "Type"),
 						value: "Failed",
 						inline: true,
 					},
 					{
-						name: "`⚠️` Error Message",
+						name: decorate("`⚠️`", "Error Message"),
 						value: `\`\`\`${errorMessage}\`\`\``,
 					},
 					{
-						name: "`🧷` Build Link",
+						name: decorate("`🧷`", "Build Link"),
 						value: `[Click here to access build link](${buildLink})`,
 					},
 				],
@@ -114,15 +117,15 @@ export const sendBuildErrorNotifications = async ({
 				telegram,
 				`
 				<b>⚠️ Build Failed</b>
-				
+
 				<b>Project:</b> ${projectName}
 				<b>Application:</b> ${applicationName}
 				<b>Type:</b> ${applicationType}
 				<b>Time:</b> ${date.toLocaleString()}
-				
+
 				<b>Error:</b>
 				<pre>${errorMessage}</pre>
-				
+
 				<b>Build Details:</b> ${buildLink}
 				`,
 			);
--- a/packages/server/src/utils/notifications/build-success.ts
+++ b/packages/server/src/utils/notifications/build-success.ts
@@ -57,42 +57,45 @@ export const sendBuildSuccessNotifications = async ({
 		}

 		if (discord) {
+			const decorate = (decoration: string, text: string) =>
+				`${discord.decoration ? decoration : ""} ${text}`.trim();
+
 			await sendDiscordNotification(discord, {
 				title: "> `✅` Build Success",
 				color: 0x57f287,
 				fields: [
 					{
-						name: "`🛠️` Project",
+						name: decorate("`🛠️`", "Project"),
 						value: projectName,
 						inline: true,
 					},
 					{
-						name: "`⚙️` Application",
+						name: decorate("`⚙️`", "Application"),
 						value: applicationName,
 						inline: true,
 					},
 					{
-						name: "`❔` Application Type",
+						name: decorate("`❔`", "Type"),
 						value: applicationType,
 						inline: true,
 					},
 					{
-						name: "`📅` Date",
+						name: decorate("`📅`", "Date"),
 						value: `<t:${unixDate}:D>`,
 						inline: true,
 					},
 					{
-						name: "`⌚` Time",
+						name: decorate("`⌚`", "Time"),
 						value: `<t:${unixDate}:t>`,
 						inline: true,
 					},
 					{
-						name: "`❓` Type",
+						name: decorate("`❓`", "Type"),
 						value: "Successful",
 						inline: true,
 					},
 					{
-						name: "`🧷` Build Link",
+						name: decorate("`🧷`", "Build Link"),
 						value: `[Click here to access build link](${buildLink})`,
 					},
 				],
@@ -108,12 +111,12 @@ export const sendBuildSuccessNotifications = async ({
 				telegram,
 				`
 				<b>✅ Build Success</b>
-				
+
 				<b>Project:</b> ${projectName}
 				<b>Application:</b> ${applicationName}
 				<b>Type:</b> ${applicationType}
 				<b>Time:</b> ${date.toLocaleString()}
-				
+
 				<b>Build Details:</b> ${buildLink}
 				`,
 			);
--- a/packages/server/src/utils/notifications/database-backup.ts
+++ b/packages/server/src/utils/notifications/database-backup.ts
@@ -62,40 +62,43 @@ export const sendDatabaseBackupNotifications = async ({
 		}

 		if (discord) {
+			const decorate = (decoration: string, text: string) =>
+				`${discord.decoration ? decoration : ""} ${text}`.trim();
+
 			await sendDiscordNotification(discord, {
 				title:
 					type === "success"
-						? "> `✅` Database Backup Successful"
-						: "> `❌` Database Backup Failed",
+						? decorate(">", "`✅` Database Backup Successful")
+						: decorate(">", "`❌` Database Backup Failed"),
 				color: type === "success" ? 0x57f287 : 0xed4245,
 				fields: [
 					{
-						name: "`🛠️` Project",
+						name: decorate("`🛠️`", "Project"),
 						value: projectName,
 						inline: true,
 					},
 					{
-						name: "`⚙️` Application",
+						name: decorate("`⚙️`", "Application"),
 						value: applicationName,
 						inline: true,
 					},
 					{
-						name: "`❔` Database",
+						name: decorate("`❔`", "Database"),
 						value: databaseType,
 						inline: true,
 					},
 					{
-						name: "`📅` Date",
+						name: decorate("`📅`", "Date"),
 						value: `<t:${unixDate}:D>`,
 						inline: true,
 					},
 					{
-						name: "`⌚` Time",
+						name: decorate("`⌚`", "Time"),
 						value: `<t:${unixDate}:t>`,
 						inline: true,
 					},
 					{
-						name: "`❓` Type",
+						name: decorate("`❓`", "Type"),
 						value: type
 							.replace("error", "Failed")
 							.replace("success", "Successful"),
@@ -104,7 +107,7 @@ export const sendDatabaseBackupNotifications = async ({
 					...(type === "error" && errorMessage
 						? [
 								{
-									name: "`⚠️` Error Message",
+									name: decorate("`⚠️`", "Error Message"),
 									value: `\`\`\`${errorMessage}\`\`\``,
 								},
 							]
@@ -121,12 +124,12 @@ export const sendDatabaseBackupNotifications = async ({
 			const statusEmoji = type === "success" ? "✅" : "❌";
 			const messageText = `
 				<b>${statusEmoji} Database Backup ${type === "success" ? "Successful" : "Failed"}</b>
-			
+
 			<b>Project:</b> ${projectName}
 			<b>Application:</b> ${applicationName}
 			<b>Type:</b> ${databaseType}
 			<b>Time:</b> ${date.toLocaleString()}
-			
+
 			<b>Status:</b> ${type === "success" ? "Successful" : "Failed"}
 			${type === "error" && errorMessage ? `<b>Error:</b> ${errorMessage}` : ""}
 			`;
--- a/packages/server/src/utils/notifications/docker-cleanup.ts
+++ b/packages/server/src/utils/notifications/docker-cleanup.ts
@@ -45,27 +45,30 @@ export const sendDockerCleanupNotifications = async (
 		}

 		if (discord) {
+			const decorate = (decoration: string, text: string) =>
+				`${discord.decoration ? decoration : ""} ${text}`.trim();
+
 			await sendDiscordNotification(discord, {
-				title: "> `✅` Docker Cleanup",
+				title: decorate(">", "`✅` Docker Cleanup"),
 				color: 0x57f287,
 				fields: [
 					{
-						name: "`📅` Date",
+						name: decorate("`📅`", "Date"),
 						value: `<t:${unixDate}:D>`,
 						inline: true,
 					},
 					{
-						name: "`⌚` Time",
+						name: decorate("`⌚`", "Time"),
 						value: `<t:${unixDate}:t>`,
 						inline: true,
 					},
 					{
-						name: "`❓` Type",
+						name: decorate("`❓`", "Type"),
 						value: "Successful",
 						inline: true,
 					},
 					{
-						name: "`📜` Message",
+						name: decorate("`📜`", "Message"),
 						value: `\`\`\`${message}\`\`\``,
 					},
 				],
--- a/packages/server/src/utils/notifications/dokploy-restart.ts
+++ b/packages/server/src/utils/notifications/dokploy-restart.ts
@@ -34,22 +34,25 @@ export const sendDokployRestartNotifications = async () => {
 		}

 		if (discord) {
+			const decorate = (decoration: string, text: string) =>
+				`${discord.decoration ? decoration : ""} ${text}`.trim();
+
 			await sendDiscordNotification(discord, {
-				title: "> `✅` Dokploy Server Restarted",
+				title: decorate(">", "`✅` Dokploy Server Restarted"),
 				color: 0x57f287,
 				fields: [
 					{
-						name: "`📅` Date",
+						name: decorate("`📅`", "Date"),
 						value: `<t:${unixDate}:D>`,
 						inline: true,
 					},
 					{
-						name: "`⌚` Time",
+						name: decorate("`⌚`", "Time"),
 						value: `<t:${unixDate}:t>`,
 						inline: true,
 					},
 					{
-						name: "`❓` Type",
+						name: decorate("`❓`", "Type"),
 						value: "Successful",
 						inline: true,
 					},
				`@@ -0,0 +1 @@`
				`ALTER TABLE "discord" ADD COLUMN "decoration" boolean;`