refactor(domains): make traefik domains generate in a single click

apps/dokploy/components/dashboard/application/domains/add-domain.tsx

@@ -27,13 +27,20 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 
-import { domain } from "@/server/db/validations";
+import { domain } from "@/server/db/validations/domain";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Dices } from "lucide-react";
 import type z from "zod";
 
 type Domain = z.infer<typeof domain>;
@@ -60,10 +67,22 @@ export const AddDomain = ({
 		},
 	);
 
+	const { data: application } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+
 	const { mutateAsync, isError, error, isLoading } = domainId
 		? api.domain.update.useMutation()
 		: api.domain.create.useMutation();
 
+	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
+		api.domain.generateDomain.useMutation();
+
 	const form = useForm<Domain>({
 		resolver: zodResolver(domain),
 	});
@@ -75,7 +94,6 @@ export const AddDomain = ({
 				/* Convert null to undefined */
 				path: data?.path || undefined,
 				port: data?.port || undefined,
-				serviceName: data?.serviceName || undefined,
 			});
 		}
 
@@ -143,9 +161,42 @@ export const AddDomain = ({
 									render={({ field }) => (
 										<FormItem>
 											<FormLabel>Host</FormLabel>
-											<FormControl>
-												<Input placeholder="api.dokploy.com" {...field} />
-											</FormControl>
+											<div className="flex max-lg:flex-wrap sm:flex-row gap-2">
+												<FormControl>
+													<Input placeholder="api.dokploy.com" {...field} />
+												</FormControl>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingGenerate}
+																onClick={() => {
+																	generateDomain({
+																		appName: application?.appName || "",
+																	})
+																		.then((domain) => {
+																			field.onChange(domain);
+																		})
+																		.catch((err) => {
+																			toast.error(err.message);
+																		});
+																}}
+															>
+																<Dices className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>Generate traefik.me domain</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</div>
 
 											<FormMessage />
 										</FormItem>

apps/dokploy/components/dashboard/compose/domains/add-domain.tsx

@@ -40,12 +40,12 @@ import {
 } from "@/components/ui/tooltip";
 import { domainCompose } from "@/server/db/validations/domain";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { DatabaseZap, RefreshCw } from "lucide-react";
+import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
 import type z from "zod";
 
 type Domain = z.infer<typeof domainCompose>;
 
-type CacheType = "fetch" | "cache";
+export type CacheType = "fetch" | "cache";
 
 interface Props {
 	composeId: string;
@@ -70,6 +70,15 @@ export const AddDomainCompose = ({
 		},
 	);
 
+	const { data: compose } = api.compose.one.useQuery(
+		{
+			composeId,
+		},
+		{
+			enabled: !!composeId,
+		},
+	);
+
 	const {
 		data: services,
 		isFetching: isLoadingServices,
@@ -86,6 +95,9 @@ export const AddDomainCompose = ({
 		},
 	);
 
+	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
+		api.domain.generateDomain.useMutation();
+
 	const { mutateAsync, isError, error, isLoading } = domainId
 		? api.domain.update.useMutation()
 		: api.domain.create.useMutation();
@@ -279,9 +291,42 @@ export const AddDomainCompose = ({
 									render={({ field }) => (
 										<FormItem>
 											<FormLabel>Host</FormLabel>
-											<FormControl>
-												<Input placeholder="api.dokploy.com" {...field} />
-											</FormControl>
+											<div className="flex max-lg:flex-wrap sm:flex-row gap-2">
+												<FormControl>
+													<Input placeholder="api.dokploy.com" {...field} />
+												</FormControl>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingGenerate}
+																onClick={() => {
+																	generateDomain({
+																		appName: compose?.appName || "",
+																	})
+																		.then((domain) => {
+																			field.onChange(domain);
+																		})
+																		.catch((err) => {
+																			toast.error(err.message);
+																		});
+																}}
+															>
+																<Dices className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>Generate traefik.me domain</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</div>
 
 											<FormMessage />
 										</FormItem>

apps/dokploy/components/dashboard/compose/domains/generate-domain.tsx

@@ -1,79 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { api } from "@/utils/api";
-import { RefreshCcw } from "lucide-react";
-import Link from "next/link";
-import { GenerateTraefikMe } from "./generate-traefikme";
-import { GenerateWildCard } from "./generate-wildcard";
-
-interface Props {
-	applicationId: string;
-}
-
-export const GenerateDomain = ({ applicationId }: Props) => {
-	return (
-		<Dialog>
-			<DialogTrigger className="" asChild>
-				<Button variant="secondary">
-					Generate Domain
-					<RefreshCcw className="size-4  text-muted-foreground " />
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
-				<DialogHeader>
-					<DialogTitle>Generate Domain</DialogTitle>
-					<DialogDescription>
-						Generate Domains for your applications
-					</DialogDescription>
-				</DialogHeader>
-
-				<div className="flex flex-col gap-4 w-full">
-					<ul className="flex flex-col gap-4">
-						<li className="flex flex-row items-center gap-4">
-							<div className="flex flex-col gap-2">
-								<div className="text-base font-bold">
-									1. Generate TraefikMe Domain
-								</div>
-								<div className="text-sm text-muted-foreground">
-									This option generates a free domain provided by{" "}
-									<Link
-										href="https://traefik.me"
-										className="text-primary"
-										target="_blank"
-									>
-										TraefikMe
-									</Link>
-									. We recommend using this for quick domain testing or if you
-									don't have a domain yet.
-								</div>
-							</div>
-						</li>
-						{/* <li className="flex flex-row items-center gap-4">
-							<div className="flex flex-col gap-2">
-								<div className="text-base font-bold">
-									2. Use Wildcard Domain
-								</div>
-								<div className="text-sm text-muted-foreground">
-									To use this option, you need to set up an 'A' record in your
-									domain provider. For example, create a record for
-									*.yourdomain.com.
-								</div>
-							</div>
-						</li> */}
-					</ul>
-					<div className="flex flex-row gap-4 w-full">
-						<GenerateTraefikMe applicationId={applicationId} />
-						{/* <GenerateWildCard applicationId={applicationId} /> */}
-					</div>
-				</div>
-			</DialogContent>
-		</Dialog>
-	);
-};

apps/dokploy/components/dashboard/compose/domains/generate-traefikme.tsx

@@ -1,69 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { RefreshCcw } from "lucide-react";
-import React from "react";
-import { toast } from "sonner";
-
-interface Props {
-	applicationId: string;
-}
-export const GenerateTraefikMe = ({ applicationId }: Props) => {
-	const { mutateAsync, isLoading } = api.domain.generateDomain.useMutation();
-	const utils = api.useUtils();
-	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
-				<Button variant="secondary" isLoading={isLoading}>
-					Generate Domain
-					<RefreshCcw className="size-4  text-muted-foreground " />
-				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>
-						Are you sure to generate a new domain?
-					</AlertDialogTitle>
-					<AlertDialogDescription>
-						This will generate a new domain and will be used to access to the
-						application
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								applicationId,
-							})
-								.then((data) => {
-									utils.domain.byApplicationId.invalidate({
-										applicationId: applicationId,
-									});
-									utils.application.readTraefikConfig.invalidate({
-										applicationId: applicationId,
-									});
-									toast.success("Generated Domain succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to generate Domain");
-								});
-						}}
-					>
-						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-};

apps/dokploy/components/dashboard/compose/domains/show-domains.tsx

@@ -26,6 +26,7 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 			enabled: !!composeId,
 		},
 	);
+
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
@@ -45,9 +46,6 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 								</Button>
 							</AddDomainCompose>
 						)}
-						{/* {data && data?.length > 0 && (
-							<GenerateDomain composeId={composeId} />
-						)} */}
 					</div>
 				</CardHeader>
 				<CardContent className="flex w-full flex-row gap-4">
@@ -64,8 +62,6 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 										<GlobeIcon className="size-4" /> Add Domain
 									</Button>
 								</AddDomainCompose>
-
-								{/* <GenerateDomain composeId={composeId} /> */}
 							</div>
 						</div>
 					) : (

apps/dokploy/components/dashboard/compose/general/generic/show.tsx

@@ -30,9 +30,9 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 							Select the source of your code
 						</p>
 					</div>
-					<div className="hidden space-y-1 text-sm font-normal md:block">
+					{/* <div className="hidden space-y-1 text-sm font-normal md:block">
 						<GitBranch className="size-6 text-muted-foreground" />
-					</div>
+					</div> */}
 					<ShowConvertedCompose composeId={composeId} />
 				</CardTitle>
 			</CardHeader>