refactor: update event handling and validation in UpsertWebhookDialog

- Changed the type of the event parameter in handleEventToggle to SandboxLifecycleEventType for improved type safety.
- Updated the events prop in UpsertWebhookDialog to use safe parsing, ensuring better handling of webhook events.
- Adjusted the Input component to require a minimum length of 32 characters for custom secrets, enhancing validation.

These changes aim to strengthen the event handling logic and improve user feedback in the webhook management process.

Author: sarimrmalik

src/features/dashboard/settings/webhooks/upsert-webhook-dialog-steps.tsx

@@ -38,7 +38,7 @@ type UpsertWebhookDialogStepsProps = {
   exampleEventType: SandboxLifecycleEventType
   allEventsSelected: boolean
   handleAllToggle: () => void
-  handleEventToggle: (event: string) => void
+  handleEventToggle: (event: SandboxLifecycleEventType) => void
   mode: 'create' | 'update'
   secretType: SecretType
   onSecretTypeChange: (value: SecretType) => void
@@ -365,7 +365,7 @@ export function UpsertWebhookDialogSteps({
                       <Input
                         placeholder="Enter your custom secret"
                         disabled={isLoading}
-                        maxLength={32}
+                        minLength={32}
                         className="min-w-0"
                         {...field}
                         ref={(el) => {

src/features/dashboard/settings/webhooks/upsert-webhook-dialog.tsx

@@ -82,7 +82,9 @@ export function UpsertWebhookDialog({
     mode,
     name: webhook?.name || '',
     url: webhook?.url || '',
-    events: webhook?.events || [],
+    events:
+      SandboxLifecycleEventTypeSchema.array().safeParse(webhook?.events).data ??
+      [],
     ...(isUpdateMode ? {} : { signatureSecret: '' }),
   }
 
@@ -199,19 +201,16 @@ export function UpsertWebhookDialog({
     }
   }
 
-  const handleEventToggle = (event: string) => {
+  const handleEventToggle = (event: SandboxLifecycleEventType) => {
     const currentEvents = form.getValues('events') || []
     if (currentEvents.includes(event)) {
       form.setValue(
         'events',
-        currentEvents.filter((eventName: string) => eventName !== event)
+        currentEvents.filter((eventName) => eventName !== event)
       )
     } else {
       form.setValue('events', [...currentEvents, event])
-      const matched = SandboxLifecycleEventTypeSchema.options.find(
-        (e) => e === event
-      )
-      if (matched) setLastSelectedEvent(matched)
+      setLastSelectedEvent(event)
     }
   }