Hook up delete webhook with RQ

studio/components/interfaces/Database/Hooks/CreateHookPanel/CreateHookPanel.tsx

@@ -8,6 +8,7 @@ import HTTPRequestFields from './HTTPRequestFields'
 import { FormSection, FormSectionLabel, FormSectionContent } from 'components/ui/Forms'
 import { useDatabaseTriggerCreateMutation } from 'data/database-triggers/database-trigger-create-mutation'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { isValidHttpUrl } from '../Hooks.utils'
 
 export interface CreateHookPanelProps {
   visible: boolean
@@ -80,6 +81,8 @@ const CreateHookPanel = ({ visible, onClose }: CreateHookPanelProps) => {
         errors['http_url'] = 'Please provide a URL'
       } else if (!values.http_url.startsWith('http')) {
         errors['http_url'] = 'Please include HTTP/HTTPs to your URL'
+      } else if (!isValidHttpUrl(values.http_url)) {
+        errors['http_url'] = 'Please provide a valid URL'
       }
     } else if (values.function_name === 'supabase_function') {
       // For Supabase Edge Functions
@@ -117,14 +120,18 @@ const CreateHookPanel = ({ visible, onClose }: CreateHookPanelProps) => {
 
     if (values.function_name === 'http_request') {
       const serviceTimeoutMs = '1000'
-      const headers = httpHeaders.reduce((a: any, b: any) => {
-        a[b.name] = b.value
-        return a
-      }, {})
-      const parameters = httpParameters.reduce((a: any, b: any) => {
-        a[b.name] = b.value
-        return a
-      }, {})
+      const headers = httpHeaders
+        .filter((header) => header.name && header.value)
+        .reduce((a: any, b: any) => {
+          a[b.name] = b.value
+          return a
+        }, {})
+      const parameters = httpParameters
+        .filter((param) => param.name && param.value)
+        .reduce((a: any, b: any) => {
+          a[b.name] = b.value
+          return a
+        }, {})
       payload.function_args = [
         values.http_url,
         values.http_method,

studio/components/interfaces/Database/Hooks/CreateHookPanel/HTTPRequestFields.tsx

@@ -110,7 +110,7 @@ const HTTPRequestFields = ({
                 <Button
                   type="default"
                   size="medium"
-                  icon={<IconTrash />}
+                  icon={<IconTrash size="tiny" />}
                   className="px-[10px] py-[9px]"
                   onClick={() => onRemoveParameter(idx)}
                 />

studio/components/interfaces/Database/Hooks/DeleteHook.tsx

@@ -1,32 +1,41 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useStore } from 'hooks'
 import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
 
-type DeleteHookProps = {
+interface DeleteHookProps {
   hook?: any
   visible: boolean
-  setVisible: (value: boolean) => void
-} & any
+  onClose: () => void
+}
 
-const DeleteHook: React.FC<DeleteHookProps> = ({ hook, visible, setVisible }) => {
-  const { ui, meta } = useStore()
-  const [loading, setLoading] = React.useState(false)
+const DeleteHook = ({ hook, visible, onClose }: DeleteHookProps) => {
+  const { ui } = useStore()
+  const [loading, setLoading] = useState(false)
   const { id, name, schema } = hook ?? {}
 
+  const { project } = useProjectContext()
+  const { mutateAsync: deleteDatabaseTrigger } = useDatabaseTriggerDeleteMutation()
+
   async function handleDelete() {
+    if (!project) {
+      return console.error('Project ref is required')
+    }
+    if (!id) {
+      return ui.setNotification({ category: 'error', message: 'Unable find selected hook' })
+    }
+
     try {
       setLoading(true)
-      if (!id) {
-        throw Error('Invalid hook info')
-      }
-      const response: any = await meta.hooks.del(id)
-      if (response.error) {
-        throw response.error
-      } else {
-        ui.setNotification({ category: 'success', message: `Successfully removed ${name}` })
-        setVisible(false)
-      }
+      await deleteDatabaseTrigger({
+        id,
+        projectRef: project.ref,
+        connectionString: project.connectionString,
+      })
+      ui.setNotification({ category: 'success', message: `Successfully deleted ${name}` })
+      onClose()
     } catch (error: any) {
       ui.setNotification({
         category: 'error',
@@ -40,15 +49,16 @@ const DeleteHook: React.FC<DeleteHookProps> = ({ hook, visible, setVisible }) =>
   return (
     <TextConfirmModal
       visible={visible}
-      onCancel={() => setVisible(!visible)}
+      size="medium"
+      onCancel={() => onClose()}
       onConfirm={handleDelete}
-      title="Delete this hook"
+      title="Delete database webhook"
       loading={loading}
-      confirmLabel={`Delete hook ${name}`}
-      confirmPlaceholder="Type in name of hook"
+      confirmLabel={`Delete ${name}`}
+      confirmPlaceholder="Type in name of webhook"
       confirmString={name}
-      text={`This will delete your hook called ${name} of schema ${schema}.`}
-      alert="You cannot recover this hook once it is deleted!"
+      text={`This will delete the webhook "${name}" from the schema "${schema}".`}
+      alert="You cannot recover this webhook once it is deleted!"
     />
   )
 }

studio/data/database-triggers/database-trigger-create-mutation.ts

@@ -10,7 +10,7 @@ export type DatabaseTriggerCreateVariables = {
   payload: any
 }
 
-type createDatabaseTriggerResponse = PostgresTrigger & { error?: any }
+type CreateDatabaseTriggerResponse = PostgresTrigger & { error?: any }
 
 export async function createDatabaseTrigger({
   projectRef,
@@ -25,7 +25,7 @@ export async function createDatabaseTrigger({
 
   const response = (await post(`${API_URL}/pg-meta/${projectRef}/triggers`, payload, {
     headers: Object.fromEntries(headers),
-  })) as createDatabaseTriggerResponse
+  })) as CreateDatabaseTriggerResponse
 
   if (response?.error) throw response.error
   return response as PostgresTrigger

studio/data/database-triggers/database-trigger-delete-mutation.ts

@@ -0,0 +1,56 @@
+import { PostgresTrigger } from '@supabase/postgres-meta'
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { delete_ } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { databaseTriggerKeys } from './keys'
+
+export type DatabaseTriggerDeleteVariables = {
+  id: number
+  projectRef: string
+  connectionString?: string
+}
+
+type DeleteDatabaseTriggerResponse = PostgresTrigger & { error?: any }
+
+export async function deleteDatabaseTrigger({
+  id,
+  projectRef,
+  connectionString,
+}: DatabaseTriggerDeleteVariables) {
+  if (!projectRef) throw new Error('projectRef is required')
+  if (!connectionString) throw new Error('connectionString is required')
+
+  let headers = new Headers()
+  headers.set('x-connection-encrypted', connectionString)
+
+  const response = (await delete_(`${API_URL}/pg-meta/${projectRef}/triggers?id=${id}`, undefined, {
+    headers: Object.fromEntries(headers),
+  })) as DeleteDatabaseTriggerResponse
+
+  if (response?.error) throw response.error
+  return response as PostgresTrigger
+}
+
+type DatabaseTriggerDeleteData = Awaited<ReturnType<typeof deleteDatabaseTrigger>>
+
+export const useDatabaseTriggerDeleteMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<DatabaseTriggerDeleteData, unknown, DatabaseTriggerDeleteVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<DatabaseTriggerDeleteData, unknown, DatabaseTriggerDeleteVariables>(
+    (vars) => deleteDatabaseTrigger(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { projectRef } = variables
+        await queryClient.invalidateQueries(databaseTriggerKeys.list(projectRef))
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}

studio/data/database-triggers/database-trigger-update-mutation.ts

@@ -24,7 +24,7 @@ export async function updateDatabaseTrigger({
   let headers = new Headers()
   headers.set('x-connection-encrypted', connectionString)
 
-  const response = await patch(`${API_URL}/pg-meta/${projectRef}/triggers/?id=${id}`, { payload })
+  const response = await patch(`${API_URL}/pg-meta/${projectRef}/triggers?id=${id}`, { payload })
   if (response.error) throw response.error
 
   return response as PostgresTrigger

studio/pages/project/[ref]/database/hooks/index.tsx

@@ -95,7 +95,7 @@ const HooksPage: NextPageWithLayout = () => {
       <DeleteHook
         hook={selectedHook}
         visible={showDeleteHookForm}
-        setVisible={setShowDeleteHookForm}
+        onClose={() => setShowDeleteHookForm(false)}
       />
     </div>
   )