Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: discord decoration switch

Browse Source
This commit is contained in:
João Gabriel
2024-12-22 00:42:00 -03:00
parent 8c06296503
commit 055b59e6fa
6 changed files with 145 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/dokploy/components/dashboard/settings/notifications/add-notification.tsx
View File

@@ -64,6 +64,7 @@ export const notificationSchema = z.discriminatedUnion("type", [
.object({ .object({
type: z.literal("discord"), type: z.literal("discord"),
webhookUrl: z.string().min(1, { message: "Webhook URL is required" }), webhookUrl: z.string().min(1, { message: "Webhook URL is required" }),
decoration: z.boolean().default(true),
}) })
.merge(notificationBaseSchema), .merge(notificationBaseSchema),
z z
@@ -195,6 +196,7 @@ export const AddNotification = () => {
dokployRestart: dokployRestart, dokployRestart: dokployRestart,
databaseBackup: databaseBackup, databaseBackup: databaseBackup,
webhookUrl: data.webhookUrl, webhookUrl: data.webhookUrl,
decoration: data.decoration,
name: data.name, name: data.name,
dockerCleanup: dockerCleanup, dockerCleanup: dockerCleanup,
}); });
@@ -397,23 +399,47 @@ export const AddNotification = () => {
)} )}
{type === "discord" && ( {type === "discord" && (
<FormField <>
control={form.control} <FormField
name="webhookUrl" control={form.control}
render={({ field }) => ( name="webhookUrl"
<FormItem> render={({ field }) => (
<FormLabel>Webhook URL</FormLabel> <FormItem>
<FormControl> <FormLabel>Webhook URL</FormLabel>
<Input <FormControl>
placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ" <Input
{...field} placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
/> {...field}
</FormControl> />
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </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" && ( {type === "email" && (

8
apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
View File

@@ -24,12 +24,12 @@ export const DeleteNotification = ({ notificationId }: Props) => {
return ( return (
<AlertDialog> <AlertDialog>
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-9 w-9 group hover:bg-red-500/10" className="h-9 w-9 group hover:bg-red-500/10"
isLoading={isLoading} isLoading={isLoading}
> >
<Trash2 className="size-4 text-muted-foreground group-hover:text-red-500" /> <Trash2 className="size-4 text-muted-foreground group-hover:text-red-500" />
</Button> </Button>
</AlertDialogTrigger> </AlertDialogTrigger>

102
apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
View File

@@ -40,58 +40,60 @@ export const ShowNotifications = () => {
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4"> <div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
{data?.map((notification, index) => ( {data?.map((notification, index) => (
<div <div
key={notification.notificationId} 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" 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"> <div className="flex items-center gap-4">
{notification.notificationType === "slack" && ( {notification.notificationType === "slack" && (
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10"> <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" /> <SlackIcon className="h-6 w-6 text-indigo-400" />
</div> </div>
)} )}
{notification.notificationType === "telegram" && ( {notification.notificationType === "telegram" && (
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10"> <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" /> <TelegramIcon className="h-6 w-6 text-indigo-400" />
</div> </div>
)} )}
{notification.notificationType === "discord" && ( {notification.notificationType === "discord" && (
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10"> <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" /> <DiscordIcon className="h-6 w-6 text-indigo-400" />
</div> </div>
)} )}
{notification.notificationType === "email" && ( {notification.notificationType === "email" && (
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10"> <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" /> <Mail className="h-6 w-6 text-indigo-400" />
</div> </div>
)} )}
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-sm font-medium text-zinc-300"> <span className="text-sm font-medium text-zinc-300">
{notification.name} {notification.name}
</span> </span>
<span className="text-xs font-medium text-muted-foreground"> <span className="text-xs font-medium text-muted-foreground">
{notification.notificationType?.[0]?.toUpperCase() + notification.notificationType?.slice(1)} notification {notification.notificationType?.[0]?.toUpperCase() +
</span> notification.notificationType?.slice(1)}{" "}
</div> notification
</div> </span>
<div className="flex items-center gap-2"> </div>
<UpdateNotification </div>
notificationId={notification.notificationId} <div className="flex items-center gap-2">
/> <UpdateNotification
<DeleteNotification notificationId={notification.notificationId}
notificationId={notification.notificationId} />
/> <DeleteNotification
</div> notificationId={notification.notificationId}
/>
</div>
</div>
))}
</div>
<div className="flex flex-col gap-4 justify-end w-full items-end">
<AddNotification />
</div> </div>
))}
</div> </div>
<div className="flex flex-col gap-4 justify-end w-full items-end">
<AddNotification />
</div>
</div>
)} )}
</CardContent> </CardContent>
</Card> </Card>

63
apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
View File

@@ -28,7 +28,7 @@ import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { Mail, Pen } from "lucide-react"; import { Mail, Pen } from "lucide-react";
import { useEffect, useState } from "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 { toast } from "sonner";
import { import {
type NotificationSchema, type NotificationSchema,
@@ -113,6 +113,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
databaseBackup: data.databaseBackup, databaseBackup: data.databaseBackup,
type: data.notificationType, type: data.notificationType,
webhookUrl: data.discord?.webhookUrl, webhookUrl: data.discord?.webhookUrl,
decoration: data.discord?.decoration || undefined,
name: data.name, name: data.name,
dockerCleanup: data.dockerCleanup, dockerCleanup: data.dockerCleanup,
}); });
@@ -218,9 +219,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
return ( return (
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger className="" asChild> <DialogTrigger className="" asChild>
<Button variant="ghost" <Button variant="ghost" size="icon" className="h-9 w-9">
size="icon"
className="h-9 w-9">
<Pen className="size-4 text-muted-foreground" /> <Pen className="size-4 text-muted-foreground" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>
@@ -358,23 +357,47 @@ export const UpdateNotification = ({ notificationId }: Props) => {
)} )}
{type === "discord" && ( {type === "discord" && (
<FormField <>
control={form.control} <FormField
name="webhookUrl" control={form.control}
render={({ field }) => ( name="webhookUrl"
<FormItem> render={({ field }) => (
<FormLabel>Webhook URL</FormLabel> <FormItem>
<FormControl> <FormLabel>Webhook URL</FormLabel>
<Input <FormControl>
placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ" <Input
{...field} placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
/> {...field}
</FormControl> />
</FormControl>
<FormMessage /> <FormMessage />
</FormItem> </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" && ( {type === "email" && (
<> <>

2
packages/server/src/db/schema/notification.ts
View File

@@ -172,6 +172,7 @@ export const apiCreateDiscord = notificationsSchema
}) })
.extend({ .extend({
webhookUrl: z.string().min(1), webhookUrl: z.string().min(1),
decoration: z.boolean(),
}) })
.required(); .required();
@@ -183,6 +184,7 @@ export const apiUpdateDiscord = apiCreateDiscord.partial().extend({
export const apiTestDiscordConnection = apiCreateDiscord.pick({ export const apiTestDiscordConnection = apiCreateDiscord.pick({
webhookUrl: true, webhookUrl: true,
decoration: true,
}); });
export const apiCreateEmail = notificationsSchema export const apiCreateEmail = notificationsSchema

2
packages/server/src/services/notification.ts
View File

@@ -204,6 +204,7 @@ export const createDiscordNotification = async (
.insert(discord) .insert(discord)
.values({ .values({
webhookUrl: input.webhookUrl, webhookUrl: input.webhookUrl,
decoration: input.decoration,
}) })
.returning() .returning()
.then((value) => value[0]); .then((value) => value[0]);
@@ -272,6 +273,7 @@ export const updateDiscordNotification = async (
.update(discord) .update(discord)
.set({ .set({
webhookUrl: input.webhookUrl, webhookUrl: input.webhookUrl,
decoration: input.decoration,
}) })
.where(eq(discord.discordId, input.discordId)) .where(eq(discord.discordId, input.discordId))
.returning() .returning()