From 071c3799c2261424fe7eb7983e6afc0085089bf6 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 9 Mar 2023 14:48:24 +0800
Subject: [PATCH] Change LABEL_CREATED to LABEL_ADDED in webhook events label

---
 .../web/components/elements/FormElements.tsx  | 87 ++++++++++++++-----
 packages/web/pages/settings/webhooks.tsx      | 17 ++--
 2 files changed, 75 insertions(+), 29 deletions(-)

diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx
index cdb98a1ca..088588bda 100644
--- a/packages/web/components/elements/FormElements.tsx
+++ b/packages/web/components/elements/FormElements.tsx
@@ -4,6 +4,11 @@ import Checkbox from './Checkbox'
 import { HStack, VStack } from './LayoutPrimitives'
 import { Label } from '@radix-ui/react-dropdown-menu'
 
+interface FormInputPropsOption {
+  label: string
+  value: string
+}
+
 export interface FormInputProps {
   name: string
   label: string
@@ -15,7 +20,7 @@ export interface FormInputProps {
   hidden?: boolean
   required?: boolean
   css?: any
-  options?: string[]
+  options?: string[] | FormInputPropsOption[]
   min?: any
 }
 
@@ -69,23 +74,49 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
 
     return (
       <VStack>
-        {input.options?.map((label, index) => (
-          <HStack key={index} alignment="center">
-            <Checkbox
-              key={index}
-              checked={input.value[index]}
-              setChecked={(arg) => {
-                input.value[index] = arg
-                setInput(input)
-                props.onChange &&
-                  props.onChange(
-                    input.options?.filter((_, i) => input.value[i])
-                  )
-              }}
-            ></Checkbox>
-            <StyledLabel>{label}</StyledLabel>
-          </HStack>
-        ))}
+        {input.options?.map((option, index) => {
+          if (typeof option === 'string') {
+            return (
+              <HStack key={index} alignment="center">
+                <Checkbox
+                  key={index}
+                  checked={input.value[index]}
+                  setChecked={(arg) => {
+                    input.value[index] = arg
+                    setInput(input)
+                    props.onChange &&
+                      props.onChange(
+                        (input.options as string[]).filter(
+                          (_, i) => input.value[i]
+                        )
+                      )
+                  }}
+                ></Checkbox>
+                <StyledLabel>{option}</StyledLabel>
+              </HStack>
+            )
+          } else {
+            return (
+              <HStack key={index} alignment="center">
+                <Checkbox
+                  key={index}
+                  checked={input.value[index]}
+                  setChecked={(arg) => {
+                    input.value[index] = arg
+                    setInput(input)
+                    props.onChange &&
+                      props.onChange(
+                        (input.options as FormInputPropsOption[])
+                          .filter((_, i) => input.value[i])
+                          .map((option) => option.value)
+                      )
+                  }}
+                ></Checkbox>
+                <StyledLabel>{option.label}</StyledLabel>
+              </HStack>
+            )
+          }
+        })}
       </VStack>
     )
   } else if (props.type === 'select') {
@@ -100,11 +131,21 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
           minWidth: '196px',
         }}
       >
-        {input.options?.map((label, index) => (
-          <option key={index} value={label}>
-            {label}
-          </option>
-        ))}
+        {input.options?.map((option, index) => {
+          if (typeof option === 'string') {
+            return (
+              <option key={index} value={option}>
+                {option}
+              </option>
+            )
+          } else {
+            return (
+              <option key={index} value={option.value}>
+                {option.label}
+              </option>
+            )
+          }
+        })}
       </select>
     )
   } else {
diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx
index 99d7ac7ba..4769351f9 100644
--- a/packages/web/pages/settings/webhooks.tsx
+++ b/packages/web/pages/settings/webhooks.tsx
@@ -25,16 +25,21 @@ interface Webhook {
   updatedAt?: Date
 }
 
+interface EventTypeOption {
+  label: string
+  value: WebhookEvent
+}
+
 export default function Webhooks(): JSX.Element {
   const { webhooks, revalidate } = useGetWebhooksQuery()
   const [onDeleteId, setOnDeleteId] = useState<string | null>(null)
   const [addModelOpen, setAddModelOpen] = useState(false)
   const [onEditWebhook, setOnEditWebhook] = useState<Webhook | null>(null)
   const [url, setUrl] = useState('')
-  const eventTypeOptions = [
-    'PAGE_CREATED',
-    'HIGHLIGHT_CREATED',
-    'LABEL_CREATED',
+  const eventTypeOptions: EventTypeOption[] = [
+    { label: 'PAGE_CREATED', value: 'PAGE_CREATED' },
+    { label: 'HIGHLIGHT_CREATED', value: 'HIGHLIGHT_CREATED' },
+    { label: 'LABEL_ADDED', value: 'LABEL_CREATED' },
   ]
   const [eventTypes, setEventTypes] = useState<WebhookEvent[]>([])
   const [contentType, setContentType] = useState('application/json')
@@ -167,7 +172,7 @@ export default function Webhooks(): JSX.Element {
             },
           ])
           setUrl('')
-          setEventTypes(eventTypeOptions as WebhookEvent[])
+          setEventTypes(['PAGE_CREATED', 'HIGHLIGHT_CREATED'])
           setAddModelOpen(true)
         }}
         onEdit={(webhook) => {
@@ -183,7 +188,7 @@ export default function Webhooks(): JSX.Element {
               label: 'Event Types',
               name: 'eventTypes',
               value: eventTypeOptions.map((option) =>
-                webhook?.eventTypes.includes(option)
+                webhook?.eventTypes.includes(option.value)
               ),
               onChange: setEventTypes,
               options: eventTypeOptions,