refactor(multi-server): add rclone to multi server

apps/dokploy/components/dashboard/project/add-database.tsx

@@ -80,9 +80,7 @@ const baseDatabaseSchema = z.object({
 	databasePassword: z.string(),
 	dockerImage: z.string(),
 	description: z.string().nullable(),
-	serverId: z.string().min(1, {
-		message: "Server is required",
-	}),
+	serverId: z.string().nullable(),
 });
 
 const mySchema = z.discriminatedUnion("type", [
@@ -174,6 +172,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 			description: "",
 			databaseName: "",
 			databaseUser: "",
+			serverId: null,
 		},
 		resolver: zodResolver(mySchema),
 	});
@@ -222,6 +221,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 			promise = redisMutation.mutateAsync({
 				...commonParams,
 				databasePassword: data.databasePassword,
+				serverId: data.serverId,
 				projectId,
 			});
 		} else if (data.type === "mariadb") {
@@ -379,7 +379,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 											<FormLabel>Select a Server</FormLabel>
 											<Select
 												onValueChange={field.onChange}
-												defaultValue={field.value}
+												defaultValue={field.value || ""}
 											>
 												<SelectTrigger>
 													<SelectValue placeholder="Select a Server" />

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -25,6 +25,7 @@ import { toast } from "sonner";
 import { TerminalModal } from "../web-server/terminal-modal";
 import { AddServer } from "./add-server";
 import { SetupServer } from "./setup-server";
+import { UpdateServer } from "./update-server";
 export const ShowServers = () => {
 	const { data, refetch } = api.server.all.useQuery();
 	const { mutateAsync } = api.server.remove.useMutation();
@@ -83,6 +84,7 @@ export const ShowServers = () => {
 									<TableHead className="text-center">IP Address</TableHead>
 									<TableHead className="text-center">Port</TableHead>
 									<TableHead className="text-center">Username</TableHead>
+									<TableHead className="text-center">SSH Key</TableHead>
 									<TableHead className="text-center">Created</TableHead>
 									<TableHead className="text-right">Actions</TableHead>
 								</TableRow>
@@ -101,6 +103,11 @@ export const ShowServers = () => {
 											<TableCell className="text-center">
 												{server.username}
 											</TableCell>
+											<TableCell className="text-right">
+												<span className="text-sm text-muted-foreground">
+													{server.sshKeyId ? "Yes" : "No"}
+												</span>
+											</TableCell>
 											<TableCell className="text-right">
 												<span className="text-sm text-muted-foreground">
 													{format(new Date(server.createdAt), "PPpp")}
@@ -121,7 +128,7 @@ export const ShowServers = () => {
 															<span>Enter the terminal</span>
 														</TerminalModal>
 														<SetupServer serverId={server.serverId} />
-
+														<UpdateServer serverId={server.serverId} />
 														<DialogAction
 															title={"Delete Server"}
 															description="This will delete the server and all associated data"

apps/dokploy/components/dashboard/settings/servers/update-server.tsx

@@ -0,0 +1,269 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const Schema = z.object({
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	description: z.string().optional(),
+	ipAddress: z.string().min(1, {
+		message: "IP Address is required",
+	}),
+	port: z.number().optional(),
+	username: z.string().optional(),
+	sshKeyId: z.string().min(1, {
+		message: "SSH Key is required",
+	}),
+});
+
+type Schema = z.infer<typeof Schema>;
+
+interface Props {
+	serverId: string;
+}
+
+export const UpdateServer = ({ serverId }: Props) => {
+	const utils = api.useUtils();
+	const [isOpen, setIsOpen] = useState(false);
+	const { data, isLoading } = api.server.one.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+	const { data: sshKeys } = api.sshKey.all.useQuery();
+	const { mutateAsync, error, isError } = api.server.update.useMutation();
+	const form = useForm<Schema>({
+		defaultValues: {
+			description: "",
+			name: "",
+			ipAddress: "",
+			port: 22,
+			username: "root",
+			sshKeyId: "",
+		},
+		resolver: zodResolver(Schema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			description: data?.description || "",
+			name: data?.name || "",
+			ipAddress: data?.ipAddress || "",
+			port: data?.port || 22,
+			username: data?.username || "root",
+			sshKeyId: data?.sshKeyId || "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
+
+	const onSubmit = async (formData: Schema) => {
+		await mutateAsync({
+			name: formData.name,
+			description: formData.description || "",
+			ipAddress: formData.ipAddress || "",
+			port: formData.port || 22,
+			username: formData.username || "root",
+			sshKeyId: formData.sshKeyId || "",
+			serverId: serverId,
+		})
+			.then(async (data) => {
+				await utils.server.all.invalidate();
+				toast.success("Server Updated");
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error to update a server");
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer "
+					onSelect={(e) => e.preventDefault()}
+				>
+					Edit Server
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-3xl ">
+				<DialogHeader>
+					<DialogTitle>Update Server</DialogTitle>
+					<DialogDescription>
+						Update a server to deploy your applications remotely.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<Form {...form}>
+					<form
+						id="hook-form-update-server"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4 ">
+							<FormField
+								control={form.control}
+								name="name"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Name</FormLabel>
+										<FormControl>
+											<Input placeholder="Hostinger Server" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<FormField
+							control={form.control}
+							name="description"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Description</FormLabel>
+									<FormControl>
+										<Textarea
+											placeholder="This server is for databases..."
+											className="resize-none"
+											{...field}
+										/>
+									</FormControl>
+
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="sshKeyId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Select a SSH Key</FormLabel>
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+									>
+										<SelectTrigger>
+											<SelectValue placeholder="Select a SSH Key" />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectGroup>
+												{sshKeys?.map((sshKey) => (
+													<SelectItem
+														key={sshKey.sshKeyId}
+														value={sshKey.sshKeyId}
+													>
+														{sshKey.name}
+													</SelectItem>
+												))}
+												<SelectLabel>
+													Registries ({sshKeys?.length})
+												</SelectLabel>
+											</SelectGroup>
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<div className="grid grid-cols-2 gap-4">
+							<FormField
+								control={form.control}
+								name="ipAddress"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>IP Address</FormLabel>
+										<FormControl>
+											<Input placeholder="192.168.1.100" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="port"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Port</FormLabel>
+										<FormControl>
+											<Input placeholder="22" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+
+						<FormField
+							control={form.control}
+							name="username"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Username</FormLabel>
+									<FormControl>
+										<Input placeholder="root" {...field} />
+									</FormControl>
+
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={form.formState.isSubmitting}
+							form="hook-form-update-server"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};