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

refactor: remove read-only mode from notification form

Browse source
This commit is contained in:
Nicolas Meienberger 2026-04-02 22:49:57 +02:00 committed by Nico
parent fb74aebd12
commit 87082398b0
5 changed files with 17 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/client/modules/notifications/components/create-notification-form.tsx
View file

@ -59,7 +59,6 @@ type Props = {
initialValues?: Partial<NotificationFormValues>;
formId?: string;
className?: string;
readOnly?: boolean;
};
const defaultValuesForType = {
@ -123,14 +122,7 @@ const defaultValuesForType = {
},
};
export const CreateNotificationForm = ({
onSubmit,
mode = "create",
initialValues,
formId,
className,
readOnly = false,
}: Props) => {
export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValues, formId, className }: Props) => {
const form = useForm<NotificationFormValues>({
resolver: zodResolver(formSchema, undefined, { raw: true }),
defaultValues: initialValues || {
@ -153,7 +145,7 @@ export const CreateNotificationForm = ({
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"
@ -161,7 +153,7 @@ export const CreateNotificationForm = ({
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} placeholder="My notification" max={32} min={2} disabled={readOnly} />
<Input {...field} placeholder="My notification" max={32} min={2} />
</FormControl>
<FormDescription>Unique identifier for this notification destination.</FormDescription>
<FormMessage />
@ -186,10 +178,10 @@ export const CreateNotificationForm = ({
}
}}
value={field.value ?? ""}
disabled={mode === "update" || readOnly}
disabled={mode === "update"}
>
<FormControl>
<SelectTrigger className={mode === "update" || readOnly ? "bg-gray-50" : ""}>
<SelectTrigger className={mode === "update" ? "bg-gray-50" : ""}>
<SelectValue placeholder="Select notification type" />
</SelectTrigger>
</FormControl>
@ -211,14 +203,14 @@ export const CreateNotificationForm = ({
)}
/>
{watchedType === "email" && <EmailForm form={form} readOnly={readOnly} />}
{watchedType === "email" && <EmailForm form={form} />}
{watchedType === "slack" && <SlackForm form={form} />}
{watchedType === "discord" && <DiscordForm form={form} />}
{watchedType === "gotify" && <GotifyForm form={form} />}
{watchedType === "ntfy" && <NtfyForm form={form} readOnly={readOnly} />}
{watchedType === "pushover" && <PushoverForm form={form} readOnly={readOnly} />}
{watchedType === "ntfy" && <NtfyForm form={form} />}
{watchedType === "pushover" && <PushoverForm form={form} />}
{watchedType === "telegram" && <TelegramForm form={form} />}
{watchedType === "generic" && <GenericForm form={form} readOnly={readOnly} />}
{watchedType === "generic" && <GenericForm form={form} />}
{watchedType === "custom" && <CustomForm form={form} />}
</fieldset>
</form>

5
app/client/modules/notifications/components/notification-forms/email-form.tsx
View file

@ -7,10 +7,9 @@ import type { NotificationFormValues } from "../create-notification-form";
type Props = {
form: UseFormReturn<NotificationFormValues>;
readOnly?: boolean;
};
export const EmailForm = ({ form, readOnly = false }: Props) => {
export const EmailForm = ({ form }: Props) => {
return (
<>
<FormField
@ -129,7 +128,7 @@ export const EmailForm = ({ form, readOnly = false }: Props) => {
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3">
<FormControl>
<Checkbox checked={field.value} disabled={readOnly} onCheckedChange={field.onChange} />
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel>Use TLS</FormLabel>

11
app/client/modules/notifications/components/notification-forms/generic-form.tsx
View file

@ -10,7 +10,6 @@ import type { NotificationFormValues } from "../create-notification-form";
type Props = {
form: UseFormReturn<NotificationFormValues>;
readOnly?: boolean;
};
const WebhookPreview = ({ values }: { values: Partial<NotificationFormValues> }) => {
@ -49,7 +48,7 @@ ${body}`;
);
};
export const GenericForm = ({ form, readOnly = false }: Props) => {
export const GenericForm = ({ form }: Props) => {
const watchedValues = useWatch({ control: form.control });
const useJson = useWatch({ control: form.control, name: "useJson" });
@ -75,7 +74,7 @@ export const GenericForm = ({ form, readOnly = false }: Props) => {
render={({ field }) => (
<FormItem>
<FormLabel>Method</FormLabel>
<Select disabled={readOnly} onValueChange={field.onChange} value={field.value ?? ""}>
<Select onValueChange={field.onChange} value={field.value ?? ""}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select method" />
@ -128,11 +127,7 @@ export const GenericForm = ({ form, readOnly = false }: Props) => {
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3">
<FormControl>
<Checkbox
checked={field.value}
disabled={readOnly}
onCheckedChange={(checked) => field.onChange(checked)}
/>
<Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked)} />
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel>Use JSON Template</FormLabel>

5
app/client/modules/notifications/components/notification-forms/ntfy-form.tsx
View file

@ -7,10 +7,9 @@ import type { NotificationFormValues } from "../create-notification-form";
type Props = {
form: UseFormReturn<NotificationFormValues>;
readOnly?: boolean;
};
export const NtfyForm = ({ form, readOnly = false }: Props) => {
export const NtfyForm = ({ form }: Props) => {
return (
<>
<FormField
@ -91,7 +90,7 @@ export const NtfyForm = ({ form, readOnly = false }: Props) => {
render={({ field }) => (
<FormItem>
<FormLabel>Priority</FormLabel>
<Select disabled={readOnly} onValueChange={field.onChange} value={String(field.value)}>
<Select onValueChange={field.onChange} value={String(field.value)}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select priority" />

4
app/client/modules/notifications/components/notification-forms/pushover-form.tsx
View file

@ -7,10 +7,9 @@ import type { NotificationFormValues } from "../create-notification-form";
type Props = {
form: UseFormReturn<NotificationFormValues>;
readOnly?: boolean;
};
export const PushoverForm = ({ form, readOnly = false }: Props) => {
export const PushoverForm = ({ form }: Props) => {
return (
<>
<FormField
@ -62,7 +61,6 @@ export const PushoverForm = ({ form, readOnly = false }: Props) => {
<FormItem>
<FormLabel>Priority</FormLabel>
<Select
disabled={readOnly}
onValueChange={(value) => field.onChange(Number(value))}
defaultValue={String(field.value)}
value={String(field.value)}