fix: form reset and default values

2025-12-10 12:10:51 +01:00 · 2025-09-28 18:14:48 +02:00
parent 202759d9de
commit 110ebfd160
13 changed files with 133 additions and 102 deletions
--- a/apps/client/app/api-client/client.gen.ts
+++ b/apps/client/app/api-client/client.gen.ts
@@ -17,6 +17,6 @@ export type CreateClientConfig<T extends DefaultClientOptions = ClientOptions> =

 export const client = createClient(
 	createConfig<ClientOptions>({
-		baseUrl: "http://localhost:3000",
+		baseUrl: "http://localhost:4096",
 	}),
 );
--- a/apps/client/app/api-client/types.gen.ts
+++ b/apps/client/app/api-client/types.gen.ts
@@ -23,7 +23,7 @@ export type ListVolumesResponses = {
 						exportPath: string;
 						server: string;
 						version: "3" | "4" | "4.1";
-						port?: number | string;
+						port?: number;
 				  }
 				| {
 						backend: "smb";
@@ -32,20 +32,20 @@ export type ListVolumesResponses = {
 						share: string;
 						username: string;
 						vers?: "1.0" | "2.0" | "2.1" | "3.0";
-						port?: number | string;
+						port?: number;
 						domain?: string;
 				  }
 				| {
 						backend: "webdav";
 						path: string;
 						server: string;
-						port?: number | string;
+						port?: number;
 						password?: string;
 						ssl?: boolean;
 						username?: string;
 				  };
 			createdAt: number;
-			lastError: string;
+			lastError: string | null;
 			lastHealthCheck: number;
 			name: string;
 			path: string;
@@ -69,7 +69,7 @@ export type CreateVolumeData = {
 					exportPath: string;
 					server: string;
 					version: "3" | "4" | "4.1";
-					port?: number | string;
+					port?: number;
 			  }
 			| {
 					backend: "smb";
@@ -78,14 +78,14 @@ export type CreateVolumeData = {
 					share: string;
 					username: string;
 					vers?: "1.0" | "2.0" | "2.1" | "3.0";
-					port?: number | string;
+					port?: number;
 					domain?: string;
 			  }
 			| {
 					backend: "webdav";
 					path: string;
 					server: string;
-					port?: number | string;
+					port?: number;
 					password?: string;
 					ssl?: boolean;
 					username?: string;
@@ -123,7 +123,7 @@ export type TestConnectionData = {
 					exportPath: string;
 					server: string;
 					version: "3" | "4" | "4.1";
-					port?: number | string;
+					port?: number;
 			  }
 			| {
 					backend: "smb";
@@ -132,14 +132,14 @@ export type TestConnectionData = {
 					share: string;
 					username: string;
 					vers?: "1.0" | "2.0" | "2.1" | "3.0";
-					port?: number | string;
+					port?: number;
 					domain?: string;
 			  }
 			| {
 					backend: "webdav";
 					path: string;
 					server: string;
-					port?: number | string;
+					port?: number;
 					password?: string;
 					ssl?: boolean;
 					username?: string;
@@ -219,7 +219,7 @@ export type GetVolumeResponses = {
 						exportPath: string;
 						server: string;
 						version: "3" | "4" | "4.1";
-						port?: number | string;
+						port?: number;
 				  }
 				| {
 						backend: "smb";
@@ -228,20 +228,20 @@ export type GetVolumeResponses = {
 						share: string;
 						username: string;
 						vers?: "1.0" | "2.0" | "2.1" | "3.0";
-						port?: number | string;
+						port?: number;
 						domain?: string;
 				  }
 				| {
 						backend: "webdav";
 						path: string;
 						server: string;
-						port?: number | string;
+						port?: number;
 						password?: string;
 						ssl?: boolean;
 						username?: string;
 				  };
 			createdAt: number;
-			lastError: string;
+			lastError: string | null;
 			lastHealthCheck: number;
 			name: string;
 			path: string;
@@ -266,7 +266,7 @@ export type UpdateVolumeData = {
 					exportPath: string;
 					server: string;
 					version: "3" | "4" | "4.1";
-					port?: number | string;
+					port?: number;
 			  }
 			| {
 					backend: "smb";
@@ -275,14 +275,14 @@ export type UpdateVolumeData = {
 					share: string;
 					username: string;
 					vers?: "1.0" | "2.0" | "2.1" | "3.0";
-					port?: number | string;
+					port?: number;
 					domain?: string;
 			  }
 			| {
 					backend: "webdav";
 					path: string;
 					server: string;
-					port?: number | string;
+					port?: number;
 					password?: string;
 					ssl?: boolean;
 					username?: string;
@@ -319,7 +319,7 @@ export type UpdateVolumeResponses = {
 						exportPath: string;
 						server: string;
 						version: "3" | "4" | "4.1";
-						port?: number | string;
+						port?: number;
 				  }
 				| {
 						backend: "smb";
@@ -328,20 +328,20 @@ export type UpdateVolumeResponses = {
 						share: string;
 						username: string;
 						vers?: "1.0" | "2.0" | "2.1" | "3.0";
-						port?: number | string;
+						port?: number;
 						domain?: string;
 				  }
 				| {
 						backend: "webdav";
 						path: string;
 						server: string;
-						port?: number | string;
+						port?: number;
 						password?: string;
 						ssl?: boolean;
 						username?: string;
 				  };
 			createdAt: number;
-			lastError: string;
+			lastError: string | null;
 			lastHealthCheck: number;
 			name: string;
 			path: string;
@@ -472,5 +472,5 @@ export type HealthCheckVolumeResponses = {
 export type HealthCheckVolumeResponse = HealthCheckVolumeResponses[keyof HealthCheckVolumeResponses];

 export type ClientOptions = {
-	baseUrl: "http://localhost:3000" | (string & {});
+	baseUrl: "http://localhost:4096" | (string & {});
 };
--- a/apps/client/app/components/create-volume-form.tsx
+++ b/apps/client/app/components/create-volume-form.tsx
@@ -3,7 +3,7 @@ import { volumeConfigSchema } from "@ironmount/schemas";
 import { useMutation } from "@tanstack/react-query";
 import { type } from "arktype";
 import { CheckCircle, Loader2, XCircle } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { testConnectionMutation } from "~/api-client/@tanstack/react-query.gen";
 import { slugify } from "~/lib/utils";
@@ -26,15 +26,31 @@ type Props = {
 	loading?: boolean;
 };

+const defaultValuesForType = {
+	directory: { backend: "directory" as const },
+	nfs: { backend: "nfs" as const, port: 2049, version: "4.1" as const },
+	smb: { backend: "smb" as const, port: 445, vers: "3.0" as const },
+	webdav: { backend: "webdav" as const, port: 80, ssl: false },
+};
+
 export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading }: Props) => {
 	const form = useForm<FormValues>({
 		resolver: arktypeResolver(formSchema),
 		defaultValues: initialValues,
+		resetOptions: {
+			keepDefaultValues: true,
+			keepDirtyValues: false,
+		},
 	});

 	const { watch, getValues } = form;

 	const watchedBackend = watch("backend");
+	const watchedName = watch("name");
+
+	useEffect(() => {
+		form.reset({ name: watchedName, ...defaultValuesForType[watchedBackend as keyof typeof defaultValuesForType] });
+	}, [watchedBackend, watchedName, form.reset]);

 	const [testStatus, setTestStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
 	const [testMessage, setTestMessage] = useState<string>("");
@@ -74,14 +90,15 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 		<Form {...form}>
 			<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
 				<FormField
+					control={form.control}
 					name="name"
 					render={({ field }) => (
 						<FormItem>
 							<FormLabel>Name</FormLabel>
 							<FormControl>
 								<Input
+									{...field}
 									placeholder="Volume name"
-									value={field.value ?? ""}
 									onChange={(e) => field.onChange(slugify(e.target.value))}
 									max={32}
 									min={1}
@@ -95,6 +112,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 					)}
 				/>
 				<FormField
+					control={form.control}
 					name="backend"
 					render={({ field }) => (
 						<FormItem>
@@ -121,12 +139,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 				{watchedBackend === "nfs" && (
 					<>
 						<FormField
+							control={form.control}
 							name="server"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Server</FormLabel>
 									<FormControl>
-										<Input placeholder="192.168.1.100" value={field.value ?? ""} onChange={field.onChange} />
+										<Input placeholder="192.168.1.100" {...field} />
 									</FormControl>
 									<FormDescription>NFS server IP address or hostname.</FormDescription>
 									<FormMessage />
@@ -134,12 +153,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="exportPath"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Export Path</FormLabel>
 									<FormControl>
-										<Input placeholder="/export/data" value={field.value ?? ""} onChange={field.onChange} />
+										<Input placeholder="/export/data" {...field} />
 									</FormControl>
 									<FormDescription>Path to the NFS export on the server.</FormDescription>
 									<FormMessage />
@@ -147,17 +167,14 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="port"
+							defaultValue={2049}
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Port</FormLabel>
 									<FormControl>
-										<Input
-											type="number"
-											placeholder="2049"
-											value={field.value ?? ""}
-											onChange={(e) => field.onChange(parseInt(e.target.value, 10) || undefined)}
-										/>
+										<Input type="number" placeholder="2049" {...field} />
 									</FormControl>
 									<FormDescription>NFS server port (default: 2049).</FormDescription>
 									<FormMessage />
@@ -165,11 +182,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="version"
+							defaultValue="4.1"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Version</FormLabel>
-									<Select onValueChange={field.onChange} defaultValue={field.value}>
+									<Select onValueChange={field.onChange} defaultValue="4.1">
 										<FormControl>
 											<SelectTrigger>
 												<SelectValue placeholder="Select NFS version" />
@@ -192,12 +211,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 				{watchedBackend === "webdav" && (
 					<>
 						<FormField
+							control={form.control}
 							name="server"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Server</FormLabel>
 									<FormControl>
-										<Input placeholder="example.com" value={field.value ?? ""} onChange={field.onChange} />
+										<Input placeholder="example.com" {...field} />
 									</FormControl>
 									<FormDescription>WebDAV server hostname or IP address.</FormDescription>
 									<FormMessage />
@@ -205,12 +225,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="path"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Path</FormLabel>
 									<FormControl>
-										<Input placeholder="/webdav" value={field.value ?? ""} onChange={field.onChange} />
+										<Input placeholder="/webdav" {...field} />
 									</FormControl>
 									<FormDescription>Path to the WebDAV directory on the server.</FormDescription>
 									<FormMessage />
@@ -218,12 +239,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="username"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Username (Optional)</FormLabel>
 									<FormControl>
-										<Input placeholder="admin" value={field.value ?? ""} onChange={field.onChange} />
+										<Input placeholder="admin" {...field} />
 									</FormControl>
 									<FormDescription>Username for WebDAV authentication (optional).</FormDescription>
 									<FormMessage />
@@ -231,12 +253,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="password"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Password (Optional)</FormLabel>
 									<FormControl>
-										<Input type="password" placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
+										<Input type="password" placeholder="••••••••" {...field} />
 									</FormControl>
 									<FormDescription>Password for WebDAV authentication (optional).</FormDescription>
 									<FormMessage />
@@ -244,17 +267,14 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="port"
+							defaultValue={80}
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Port</FormLabel>
 									<FormControl>
-										<Input
-											type="number"
-											placeholder="80"
-											value={field.value ?? ""}
-											onChange={(e) => field.onChange(parseInt(e.target.value, 10) || undefined)}
-										/>
+										<Input type="number" placeholder="80" {...field} />
 									</FormControl>
 									<FormDescription>WebDAV server port (default: 80 for HTTP, 443 for HTTPS).</FormDescription>
 									<FormMessage />
@@ -262,7 +282,9 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="ssl"
+							defaultValue={false}
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Use SSL/HTTPS</FormLabel>
@@ -288,6 +310,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 				{watchedBackend === "smb" && (
 					<>
 						<FormField
+							control={form.control}
 							name="server"
 							render={({ field }) => (
 								<FormItem>
@@ -301,6 +324,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="share"
 							render={({ field }) => (
 								<FormItem>
@@ -314,6 +338,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="username"
 							render={({ field }) => (
 								<FormItem>
@@ -327,6 +352,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="password"
 							render={({ field }) => (
 								<FormItem>
@@ -340,7 +366,9 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="vers"
+							defaultValue="3.0"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>SMB Version</FormLabel>
@@ -363,12 +391,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="domain"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Domain (Optional)</FormLabel>
 									<FormControl>
-										<Input placeholder="WORKGROUP" value={field.value ?? ""} onChange={field.onChange} />
+										<Input placeholder="WORKGROUP" value={field.value} onChange={field.onChange} />
 									</FormControl>
 									<FormDescription>Domain or workgroup for authentication (optional).</FormDescription>
 									<FormMessage />
@@ -376,7 +405,9 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 							)}
 						/>
 						<FormField
+							control={form.control}
 							name="port"
+							defaultValue={445}
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Port</FormLabel>
@@ -384,7 +415,8 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 										<Input
 											type="number"
 											placeholder="445"
-											value={field.value ?? ""}
+											value={field.value}
+											defaultValue={445}
 											onChange={(e) => field.onChange(parseInt(e.target.value, 10) || undefined)}
 										/>
 									</FormControl>
--- a/apps/client/app/modules/details/tabs/docker.tsx
+++ b/apps/client/app/modules/details/tabs/docker.tsx
@@ -28,8 +28,15 @@ export const DockerTabContent = ({ volume }: Props) => {

 	const dockerRunCommand = `docker run -v im-${volume.name}:/path/in/container nginx:latest`;

-	const containersQuery = getContainersUsingVolumeOptions({ path: { name: volume.name } });
-	const { data: containersData, isLoading, error } = useQuery(containersQuery);
+	const {
+		data: containersData,
+		isLoading,
+		error,
+	} = useQuery({
+		...getContainersUsingVolumeOptions({ path: { name: volume.name } }),
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});

 	const containers = containersData?.containers || [];