refactor: remove read-only mode from notification form

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

@@ -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 = ({
+export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValues, formId, className }: Props) => {
-	onSubmit,
-	mode = "create",
-	initialValues,
-	formId,
-	className,
-	readOnly = false,
-}: 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 === "ntfy" && <NtfyForm form={form} />}
-					{watchedType === "pushover" && <PushoverForm form={form} readOnly={readOnly} />}
+					{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>

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

@@ -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>

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

@@ -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
+							<Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked)} />
-								checked={field.value}
-								disabled={readOnly}
-								onCheckedChange={(checked) => field.onChange(checked)}
-							/>
 						</FormControl>
 						<div className="space-y-1 leading-none">
 							<FormLabel>Use JSON Template</FormLabel>

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

@@ -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" />

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

@@ -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)}