fix(webhooks): surface form validation errors and reset add-webhook drawer state

web/sdk/admin/components/CustomField.tsx

@@ -8,7 +8,12 @@
 import { Flex, Select, Switch, Text, TextArea, Input } from "@raystack/apsara";
 import React, { CSSProperties } from "react";
 
-import { Control, Controller, UseFormRegister } from "react-hook-form";
+import {
+  Control,
+  Controller,
+  UseFormRegister,
+  useFormState,
+} from "react-hook-form";
 import { capitalizeFirstLetter } from "../utils/helper";
 import Skeleton from "react-loading-skeleton";
 
@@ -40,6 +45,8 @@
   CustomFieldNameProps &
   React.RefAttributes<HTMLDivElement>) => {
   const inputTitle = capitalizeFirstLetter(title || name);
+  const { errors } = useFormState({ control, name });
+  const errorMessage = errors?.[name]?.message as string | undefined;
   return (
     <FormField
       name={name}
@@ -157,7 +164,7 @@
                   }
 
                   default: {
                     const { ref, ...rest } = field;
                     return (
                       <Input
                         {...rest}
@@ -174,6 +181,11 @@
             />
           )}
         </FormControl>
+        {errorMessage ? (
+          <Text size="small" variant="danger">
+            {errorMessage}
+          </Text>
+        ) : null}
       </Flex>
     </FormField>
   );

web/sdk/admin/views/webhooks/webhooks/create/index.tsx

@@ -23,7 +23,7 @@ const NewWebookSchema = z.object({
   description: z
     .string()
     .trim()
-    .min(3, { message: "Must be 10 or more characters long" }),
+    .min(3, { message: "Must be 3 or more characters long" }),
   state: z.boolean().default(false),
   subscribed_events: z.array(z.string()).default([]),
 });
@@ -48,7 +48,12 @@ export default function CreateWebhooks({ open = false, onClose: onCloseProp }: C
 
   const methods = useForm<NewWebhook>({
     resolver: zodResolver(NewWebookSchema),
-    defaultValues: {},
+    defaultValues: {
+      url: "",
+      description: "",
+      state: false,
+      subscribed_events: [],
+    },
   });
 
   const onSubmit = async (data: NewWebhook) => {
@@ -66,7 +71,14 @@ export default function CreateWebhooks({ open = false, onClose: onCloseProp }: C
       if (resp?.webhook) {
         toastManager.add({ title: "Webhook created", type: "success" });
         await invalidateWebhooksList();
+        methods.reset();
         onOpenChange();
+      } else {
+        toastManager.add({
+          title: "Something went wrong",
+          description: "Webhook was not created. Please try again.",
+          type: "error",
+        });
       }
     } catch (err) {
       console.error("Failed to create webhook:", err);

web/sdk/admin/views/webhooks/webhooks/update/index.tsx

@@ -23,7 +23,7 @@ const UpdateWebhookSchema = z.object({
   description: z
     .string()
     .trim()
-    .min(3, { message: "Must be 10 or more characters long" }),
+    .min(3, { message: "Must be 3 or more characters long" }),
   state: z.boolean().default(false),
   subscribed_events: z.array(z.string()).default([]),
 });