refactor: remove read-only mode from volume form

This commit is contained in:
Nicolas Meienberger 2026-04-02 21:26:39 +02:00 committed by Nico
parent ae8277ab23
commit 8b796cfec2
5 changed files with 17 additions and 30 deletions

View file

@ -72,15 +72,7 @@ const defaultValuesForType = {
sftp: { backend: "sftp" as const, port: 22, path: "/", skipHostKeyCheck: false },
};
export const CreateVolumeForm = ({
onSubmit,
mode = "create",
initialValues,
formId,
loading,
className,
readOnly = false,
}: Props) => {
export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading, className }: Props) => {
const form = useForm<FormValues>({
resolver: zodResolver(formSchema, undefined, { raw: true }),
defaultValues: initialValues || {
@ -146,7 +138,7 @@ export const CreateVolumeForm = ({
onSubmit={form.handleSubmit(onSubmit, scrollToFirstError)}
className={cn("space-y-4", className)}
>
<fieldset disabled={readOnly} className="space-y-4">
<fieldset className="space-y-4">
<FormField
control={form.control}
name="name"
@ -169,7 +161,6 @@ export const CreateVolumeForm = ({
<FormItem>
<FormLabel>Backend</FormLabel>
<Select
disabled={readOnly}
onValueChange={(value) => {
field.onChange(value);
if (mode === "create") {
@ -259,13 +250,13 @@ export const CreateVolumeForm = ({
)}
/>
{watchedBackend === "directory" && <DirectoryForm form={form} />}
{watchedBackend === "nfs" && <NFSForm form={form} readOnly={readOnly} />}
{watchedBackend === "nfs" && <NFSForm form={form} />}
{watchedBackend === "webdav" && <WebDAVForm form={form} />}
{watchedBackend === "smb" && <SMBForm form={form} readOnly={readOnly} />}
{watchedBackend === "rclone" && <RcloneForm form={form} readOnly={readOnly} />}
{watchedBackend === "sftp" && <SFTPForm form={form} readOnly={readOnly} />}
{watchedBackend === "smb" && <SMBForm form={form} />}
{watchedBackend === "rclone" && <RcloneForm form={form} />}
{watchedBackend === "sftp" && <SFTPForm form={form} />}
</fieldset>
{!readOnly && watchedBackend && watchedBackend !== "directory" && watchedBackend !== "rclone" && (
{watchedBackend && watchedBackend !== "directory" && watchedBackend !== "rclone" && (
<div className="space-y-3">
<div className="flex items-center gap-2">
<Button
@ -304,7 +295,7 @@ export const CreateVolumeForm = ({
)}
</div>
)}
{!readOnly && mode === "update" && !formId && (
{mode === "update" && !formId && (
<Button type="submit" className="w-full" loading={loading}>
<Save className="h-4 w-4 mr-2" />
Save changes

View file

@ -13,10 +13,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
type Props = {
form: UseFormReturn<FormValues>;
readOnly?: boolean;
};
export const NFSForm = ({ form, readOnly = false }: Props) => {
export const NFSForm = ({ form }: Props) => {
return (
<>
<FormField
@ -74,7 +73,7 @@ export const NFSForm = ({ form, readOnly = false }: Props) => {
render={({ field }) => (
<FormItem>
<FormLabel>Version</FormLabel>
<Select disabled={readOnly} onValueChange={field.onChange} value={field.value}>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select NFS version" />

View file

@ -18,10 +18,9 @@ import { useQuery } from "@tanstack/react-query";
type Props = {
form: UseFormReturn<FormValues>;
readOnly?: boolean;
};
export const RcloneForm = ({ form, readOnly = false }: Props) => {
export const RcloneForm = ({ form }: Props) => {
const { capabilities } = useSystemInfo();
const { data: rcloneRemotes, isPending } = useQuery({
@ -29,7 +28,7 @@ export const RcloneForm = ({ form, readOnly = false }: Props) => {
enabled: capabilities.rclone,
});
if (!readOnly && !isPending && !rcloneRemotes?.length) {
if (!isPending && !rcloneRemotes?.length) {
return (
<Alert>
<AlertDescription className="space-y-2">
@ -59,7 +58,7 @@ export const RcloneForm = ({ form, readOnly = false }: Props) => {
render={({ field }) => (
<FormItem>
<FormLabel>Remote</FormLabel>
<Select disabled={readOnly} onValueChange={(v) => field.onChange(v)} value={field.value ?? ""}>
<Select onValueChange={(v) => field.onChange(v)} value={field.value ?? ""}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select an rclone remote" />

View file

@ -15,10 +15,9 @@ import { Switch } from "../../../../components/ui/switch";
type Props = {
form: UseFormReturn<FormValues>;
readOnly?: boolean;
};
export const SFTPForm = ({ form, readOnly = false }: Props) => {
export const SFTPForm = ({ form }: Props) => {
const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
return (
@ -130,7 +129,7 @@ export const SFTPForm = ({ form, readOnly = false }: Props) => {
</FormDescription>
</div>
<FormControl>
<Switch checked={field.value} disabled={readOnly} onCheckedChange={field.onChange} />
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
</FormItem>
)}

View file

@ -14,10 +14,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
type Props = {
form: UseFormReturn<FormValues>;
readOnly?: boolean;
};
export const SMBForm = ({ form, readOnly = false }: Props) => {
export const SMBForm = ({ form }: Props) => {
const guest = useWatch({ control: form.control, name: "guest" });
return (
@ -117,7 +116,7 @@ export const SMBForm = ({ form, readOnly = false }: Props) => {
render={({ field }) => (
<FormItem>
<FormLabel>SMB Version</FormLabel>
<Select disabled={readOnly} onValueChange={field.onChange} value={field.value}>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select SMB version" />