Merge pull request #13251 from supabase/chore/add-edge-function-validation-for-webhook

Add edge function validation for webhooks

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

@@ -130,6 +130,9 @@ const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelProps) =
       }
     } else if (values.function_type === 'supabase_function') {
       // For Supabase Edge Functions
+      if (values.http_url.includes('undefined')) {
+        errors['http_url'] = 'No edge functions available for selection'
+      }
     }
 
     if (JSON.stringify(values) !== JSON.stringify(initialValues)) setIsEdited(true)
@@ -273,7 +276,7 @@ const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelProps) =
         }
       >
         <Form validateOnBlur initialValues={initialValues} onSubmit={onSubmit} validate={validate}>
-          {({ values, resetForm }: any) => {
+          {({ values, resetForm, errors }: any) => {
             useEffect(() => {
               if (values.function_type === 'http_request') {
                 if (selectedHook !== undefined) {
@@ -415,6 +418,7 @@ const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelProps) =
 
                 <HTTPRequestFields
                   type={values.function_type}
+                  errors={errors}
                   httpHeaders={httpHeaders}
                   httpParameters={httpParameters}
                   onAddHeader={(header?: any) => {

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

@@ -19,6 +19,7 @@ import { useProjectApiQuery } from 'data/config/project-api-query'
 
 interface HTTPRequestFieldsProps {
   type: 'http_request' | 'supabase_function'
+  errors: any
   httpHeaders: HTTPArgument[]
   httpParameters: HTTPArgument[]
   onAddHeader: (header?: any) => void
@@ -31,6 +32,7 @@ interface HTTPRequestFieldsProps {
 
 const HTTPRequestFields = ({
   type,
+  errors,
   httpHeaders = [],
   httpParameters = [],
   onAddHeader,
@@ -92,6 +94,7 @@ const HTTPRequestFields = ({
                   </a>
                 </Link>
               </div>
+              {errors.http_url && <p className="text-sm text-red-900">{errors.http_url}</p>}
             </div>
           ) : type === 'supabase_function' && edgeFunctions.length > 0 ? (
             <Listbox id="http_url" name="http_url" label="Select which edge function to trigger">

studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts

@@ -26,7 +26,6 @@ export const generateDatabaseMenu = (project?: Project): ProductMenuGroup[] => {
           name: 'Functions',
           key: 'functions',
           url: `/project/${ref}/database/functions`,
-          label: 'ALPHA',
           items: [],
         },
         {