Merge pull request #2297 from Dokploy/feat/add-custom-service-field-domains-compose

feat(dashboard): add manual input for service name in domains for docker compose

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import z from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -34,14 +41,6 @@ import {
 	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 { zodResolver } from "@hookform/resolvers/zod";
-import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
-import Link from "next/link";
-import z from "zod";
 
 export type CacheType = "fetch" | "cache";
 
@@ -123,6 +122,7 @@ interface Props {
 export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [cacheType, setCacheType] = useState<CacheType>("cache");
+	const [isManualInput, setIsManualInput] = useState(false);
 
 	const utils = api.useUtils();
 	const { data, refetch } = api.domain.one.useQuery(
@@ -325,6 +325,15 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 													<FormItem className="w-full">
 														<FormLabel>Service Name</FormLabel>
 														<div className="flex gap-2">
+															{isManualInput ? (
+																<FormControl>
+																	<Input
+																		placeholder="Enter service name manually"
+																		{...field}
+																		className="w-full"
+																	/>
+																</FormControl>
+															) : (
 																<Select
 																	onValueChange={field.onChange}
 																	defaultValue={field.value || ""}
@@ -349,6 +358,9 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																		</SelectItem>
 																	</SelectContent>
 																</Select>
+															)}
+															{!isManualInput && (
+																<>
 																	<TooltipProvider delayDuration={0}>
 																		<Tooltip>
 																			<TooltipTrigger asChild>
@@ -373,8 +385,8 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																				className="max-w-[10rem]"
 																			>
 																				<p>
-																			Fetch: Will clone the repository and load
+																					Fetch: Will clone the repository and
-																			the services
+																					load the services
 																				</p>
 																			</TooltipContent>
 																		</Tooltip>
@@ -404,9 +416,46 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																			>
 																				<p>
 																					Cache: If you previously deployed this
-																			compose, it will read the services from
+																					compose, it will read the services
-																			the last deployment/fetch from the
+																					from the last deployment/fetch from
-																			repository
+																					the repository
+																				</p>
+																			</TooltipContent>
+																		</Tooltip>
+																	</TooltipProvider>
+																</>
+															)}
+															<TooltipProvider delayDuration={0}>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<Button
+																			variant="secondary"
+																			type="button"
+																			onClick={() => {
+																				setIsManualInput(!isManualInput);
+																				if (!isManualInput) {
+																					field.onChange("");
+																				}
+																			}}
+																		>
+																			{isManualInput ? (
+																				<RefreshCw className="size-4 text-muted-foreground" />
+																			) : (
+																				<span className="text-xs text-muted-foreground">
+																					Manual
+																				</span>
+																			)}
+																		</Button>
+																	</TooltipTrigger>
+																	<TooltipContent
+																		side="left"
+																		sideOffset={5}
+																		className="max-w-[10rem]"
+																	>
+																		<p>
+																			{isManualInput
+																				? "Switch to service selection"
+																				: "Enter service name manually"}
 																		</p>
 																	</TooltipContent>
 																</Tooltip>

biome.json

@@ -27,7 +27,8 @@
 				"noUnsafeOptionalChaining": "off",
 				"noUnusedImports": "error",
 				"noUnusedFunctionParameters": "error",
-				"noUnusedVariables": "error"
+				"noUnusedVariables": "error",
+				"useHookAtTopLevel": "off"
 			},
 			"style": {
 				"noNonNullAssertion": "off",