Add enabled input field in form

packages/web/components/patterns/FormModal.tsx

@@ -11,12 +11,13 @@ import { FormInput } from '../elements/FormElements'
 export interface FormInputProps {
   name: string
   label: string
-  value?: string
-  onChange: (value: string) => void
+  value?: any
+  onChange?: (value: any) => void
   type?: string
   placeholder?: string
   disabled?: boolean
   hidden?: boolean
+  required?: boolean
 }
 
 export interface FormModalProps {
@@ -50,9 +51,16 @@ export function FormModal(props: FormModalProps): JSX.Element {
                     type={input.type || 'text'}
                     value={input.value}
                     placeholder={input.placeholder}
-                    onChange={(event) => input.onChange(event.target.value)}
+                    onChange={(event) => {
+                      input.onChange &&
+                        input.onChange(
+                          event.target.value || event.target.checked
+                        )
+                    }}
                     disabled={input.disabled}
                     hidden={input.hidden}
+                    required={input.required}
+                    checked={input.value}
                   />
                 </HStack>
               ))}

packages/web/lib/networking/mutations/setWebhookMutation.ts

@@ -2,6 +2,15 @@ import { gql } from 'graphql-request'
 import { gqlFetcher } from '../networkHelpers'
 import { Webhook, WebhookEvent } from '../queries/useGetWebhooksQuery'
 
+export interface SetWebhookInput {
+  contentType?: string[]
+  enabled?: boolean
+  eventTypes: WebhookEvent[]
+  id?: string
+  method?: string
+  url: string
+}
+
 interface SetWebhookResult {
   setWebhook: SetWebhook
   errorCodes?: unknown[]
@@ -12,10 +21,8 @@ type SetWebhook = {
 }
 
 export async function setWebhookMutation(
-  id: string,
-  url: string,
-  eventTypes: WebhookEvent[]
-): Promise<any | undefined> {
+  input: SetWebhookInput
+): Promise<string | undefined> {
   const mutation = gql`
     mutation SetWebhook($input: SetWebhookInput!) {
       setWebhook(input: $input) {
@@ -33,7 +40,7 @@ export async function setWebhookMutation(
 
   try {
     const data = (await gqlFetcher(mutation, {
-      input: { id, url, eventTypes },
+      input,
     })) as SetWebhookResult
     return data.errorCodes ? undefined : data.setWebhook.webhook.id
   } catch (error) {

packages/web/lib/networking/queries/useGetWebhookQuery.tsx

@@ -18,6 +18,10 @@ interface WebhookData {
 }
 
 export function useGetWebhookQuery(id: string): WebhookQueryResponse {
+  if (!id) {
+    return {}
+  }
+
   const query = gql`
     query GetWebhook($id: ID!) {
       webhook(id: $id) {

packages/web/pages/settings/webhooks.tsx

@@ -20,13 +20,30 @@ export default function Webhooks(): JSX.Element {
   const [addModelOpen, setAddModelOpen] = useState(false)
   const [onEditId, setOnEditId] = useState<string>('')
   const [url, setUrl] = useState('')
-  const [eventTypes, setEventTypes] = useState<WebhookEvent[]>([])
+  const [eventTypes, setEventTypes] = useState<WebhookEvent[]>([
+    'PAGE_CREATED',
+    'HIGHLIGHT_CREATED',
+  ])
+  const [enabled, setEnabled] = useState(true)
   const [formInputs, setFormInputs] = useState<FormInputProps[]>([
     {
       label: 'URL',
       onChange: setUrl,
       name: 'url',
       placeholder: 'https://example.com/webhook',
+      required: true,
+    },
+    {
+      label: 'Event Types',
+      name: 'eventTypes',
+      disabled: true,
+      value: eventTypes.join(', '),
+    },
+    {
+      label: 'Enabled',
+      name: 'enabled',
+      type: 'checkbox',
+      onChange: setEnabled,
     },
   ])
   const { webhook } = useGetWebhookQuery(onEditId)
@@ -40,6 +57,19 @@ export default function Webhooks(): JSX.Element {
           name: 'url',
           value: webhook.url,
         },
+        {
+          label: 'Event Types',
+          name: 'eventTypes',
+          disabled: true,
+          value: eventTypes.join(', '),
+        },
+        {
+          label: 'Enabled',
+          name: 'enabled',
+          type: 'checkbox',
+          onChange: setEnabled,
+          value: webhook.enabled,
+        },
       ])
     }
   }, [webhook])
@@ -57,10 +87,7 @@ export default function Webhooks(): JSX.Element {
   }
 
   async function onAdd(): Promise<void> {
-    const result = await setWebhookMutation('', url, [
-      'PAGE_CREATED',
-      'HIGHLIGHT_CREATED',
-    ])
+    const result = await setWebhookMutation({ url, eventTypes, enabled })
     if (result) {
       showSuccessToast('Added', { position: 'bottom-right' })
     } else {
@@ -71,10 +98,12 @@ export default function Webhooks(): JSX.Element {
   }
 
   async function onUpdate(): Promise<void> {
-    const result = await setWebhookMutation(onEditId, url, [
-      'PAGE_CREATED',
-      'HIGHLIGHT_CREATED',
-    ])
+    const result = await setWebhookMutation({
+      id: onEditId,
+      url,
+      eventTypes,
+      enabled: enabled || false,
+    })
     if (result) {
       showSuccessToast('Updated', { position: 'bottom-right' })
     } else {