feat: add support for command arguments in application and database schemas

- Updated the application, mariadb, mongo, mysql, postgres, and redis schemas to include an optional `args` field for command arguments.
- Enhanced the AddCommand and ShowCustomCommand components to handle multiple arguments using a dynamic form.
- Modified the database build functions to incorporate the new `args` parameter when creating containers.
- Added SQL migrations to update the database schema for existing applications and services to accommodate the new `args` field.

apps/dokploy/components/dashboard/application/advanced/general/add-command.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Plus, Trash2 } from "lucide-react";
 import { useEffect } from "react";
-import { useForm } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { Button } from "@/components/ui/button";
@@ -28,6 +29,13 @@ interface Props {
 
 const AddRedirectSchema = z.object({
 	command: z.string(),
+	args: z
+		.array(
+			z.object({
+				value: z.string().min(1, "Argument cannot be empty"),
+			}),
+		)
+		.optional(),
 });
 
 type AddCommand = z.infer<typeof AddRedirectSchema>;
@@ -47,22 +55,36 @@ export const AddCommand = ({ applicationId }: Props) => {
 	const form = useForm<AddCommand>({
 		defaultValues: {
 			command: "",
+			args: [],
 		},
 		resolver: zodResolver(AddRedirectSchema),
 	});
 
+	const { fields, append, remove } = useFieldArray({
+		control: form.control,
+		name: "args",
+	});
+
 	useEffect(() => {
 		if (data?.command) {
 			form.reset({
 				command: data?.command || "",
+				args: data?.args?.map((arg) => ({ value: arg })) || [],
 			});
 		}
-	}, [form, form.reset, form.formState.isSubmitSuccessful, data?.command]);
+	}, [
+		form,
+		form.reset,
+		form.formState.isSubmitSuccessful,
+		data?.command,
+		data?.args,
+	]);
 
 	const onSubmit = async (data: AddCommand) => {
 		await mutateAsync({
 			applicationId,
 			command: data?.command,
+			args: data?.args?.map((arg) => arg.value).filter(Boolean),
 		})
 			.then(async () => {
 				toast.success("Command Updated");
@@ -100,13 +122,65 @@ export const AddCommand = ({ applicationId }: Props) => {
 									<FormItem>
 										<FormLabel>Command</FormLabel>
 										<FormControl>
-											<Input placeholder="Custom command" {...field} />
+											<Input placeholder="/bin/sh" {...field} />
 										</FormControl>
 
 										<FormMessage />
 									</FormItem>
 								)}
 							/>
+
+							<div className="space-y-2">
+								<div className="flex items-center justify-between">
+									<FormLabel>Arguments (Args)</FormLabel>
+									<Button
+										type="button"
+										variant="outline"
+										size="sm"
+										onClick={() => append({ value: "" })}
+									>
+										<Plus className="h-4 w-4 mr-1" />
+										Add Argument
+									</Button>
+								</div>
+
+								{fields.length === 0 && (
+									<p className="text-sm text-muted-foreground">
+										No arguments added yet. Click "Add Argument" to add one.
+									</p>
+								)}
+
+								{fields.map((field, index) => (
+									<FormField
+										key={field.id}
+										control={form.control}
+										name={`args.${index}.value`}
+										render={({ field }) => (
+											<FormItem>
+												<div className="flex gap-2">
+													<FormControl>
+														<Input
+															placeholder={
+																index === 0 ? "-c" : "echo Hello World"
+															}
+															{...field}
+														/>
+													</FormControl>
+													<Button
+														type="button"
+														variant="destructive"
+														size="icon"
+														onClick={() => remove(index)}
+													>
+														<Trash2 className="h-4 w-4" />
+													</Button>
+												</div>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								))}
+							</div>
 						</div>
 						<div className="flex justify-end">
 							<Button isLoading={isLoading} type="submit" className="w-fit">

apps/dokploy/components/dashboard/postgres/advanced/show-custom-command.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Plus, Trash2 } from "lucide-react";
 import { useEffect } from "react";
-import { useForm } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { Button } from "@/components/ui/button";
@@ -20,6 +21,13 @@ import type { ServiceType } from "../../application/advanced/show-resources";
 const addDockerImage = z.object({
 	dockerImage: z.string().min(1, "Docker image is required"),
 	command: z.string(),
+	args: z
+		.array(
+			z.object({
+				value: z.string().min(1, "Argument cannot be empty"),
+			}),
+		)
+		.optional(),
 });
 
 interface Props {
@@ -61,15 +69,22 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 		defaultValues: {
 			dockerImage: "",
 			command: "",
+			args: [],
 		},
 		resolver: zodResolver(addDockerImage),
 	});
 
+	const { fields, append, remove } = useFieldArray({
+		control: form.control,
+		name: "args",
+	});
+
 	useEffect(() => {
 		if (data) {
 			form.reset({
 				dockerImage: data.dockerImage,
 				command: data.command || "",
+				args: data.args?.map((arg) => ({ value: arg })) || [],
 			});
 		}
 	}, [data, form, form.reset]);
@@ -83,6 +98,7 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 			mariadbId: id || "",
 			dockerImage: formData?.dockerImage,
 			command: formData?.command,
+			args: formData?.args?.map((arg) => arg.value).filter(Boolean),
 		})
 			.then(async () => {
 				toast.success("Custom Command Updated");
@@ -128,13 +144,68 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 										<FormItem>
 											<FormLabel>Command</FormLabel>
 											<FormControl>
-												<Input placeholder="Custom command" {...field} />
+												<Input placeholder="/bin/sh" {...field} />
 											</FormControl>
 
 											<FormMessage />
 										</FormItem>
 									)}
 								/>
+
+								<div className="space-y-2">
+									<div className="flex items-center justify-between">
+										<FormLabel>Arguments (Args)</FormLabel>
+										<Button
+											type="button"
+											variant="outline"
+											size="sm"
+											onClick={() => append({ value: "" })}
+										>
+											<Plus className="h-4 w-4 mr-1" />
+											Add Argument
+										</Button>
+									</div>
+
+									{fields.length === 0 && (
+										<p className="text-sm text-muted-foreground">
+											No arguments added yet. Click "Add Argument" to add one.
+										</p>
+									)}
+
+									{fields.map((field, index) => (
+										<FormField
+											key={field.id}
+											control={form.control}
+											name={`args.${index}.value`}
+											render={({ field }) => (
+												<FormItem>
+													<div className="flex gap-2">
+														<FormControl>
+															<Input
+																placeholder={
+																	index === 0
+																		? "-c"
+																		: "redis-server --port 6379"
+																}
+																{...field}
+															/>
+														</FormControl>
+														<Button
+															type="button"
+															variant="destructive"
+															size="icon"
+															onClick={() => remove(index)}
+														>
+															<Trash2 className="h-4 w-4" />
+														</Button>
+													</div>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									))}
+								</div>
+
 								<div className="flex w-full justify-end">
 									<Button isLoading={form.formState.isSubmitting} type="submit">
 										Save

apps/dokploy/drizzle/0123_cloudy_piledriver.sql

@@ -0,0 +1,6 @@
+ALTER TABLE "application" ADD COLUMN "args" text[];--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "args" text[];--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "args" text[];--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "args" text[];--> statement-breakpoint
+ALTER TABLE "postgres" ADD COLUMN "args" text[];--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "args" text[];

apps/dokploy/drizzle/meta/_journal.json

@@ -862,6 +862,13 @@
       "when": 1764479387555,
       "tag": "0122_absent_frightful_four",
       "breakpoints": true
+    },
+    {
+      "idx": 123,
+      "version": "7",
+      "when": 1764525308939,
+      "tag": "0123_cloudy_piledriver",
+      "breakpoints": true
     }
   ]
 }