danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: remove read-only mode from volume form

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/client/modules/volumes/components/create-volume-form.tsx
View file

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

5
app/client/modules/volumes/components/volume-forms/nfs-form.tsx
View file

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

7
app/client/modules/volumes/components/volume-forms/rclone-form.tsx
View file

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

5
app/client/modules/volumes/components/volume-forms/sftp-form.tsx
View file

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

5
app/client/modules/volumes/components/volume-forms/smb-form.tsx
View file

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