Fix database webhooks http headers for edge functions not loading auth headers on first open (#38894)

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

@@ -44,6 +44,7 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
   // hence why this external state as a temporary workaround
   const [events, setEvents] = useState<string[]>(selectedHook?.events ?? [])
   const [eventsError, setEventsError] = useState<string>()
+  const [isSubmitting, setIsSubmitting] = useState(false)
 
   // For HTTP request
   const [httpHeaders, setHttpHeaders] = useState<HTTPArgument[]>(() => {
@@ -65,6 +66,7 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
       value,
     }))
   })
+
   const [httpParameters, setHttpParameters] = useState<HTTPArgument[]>(() => {
     if (typeof selectedHook === `undefined`) {
       return [{ id: uuidv4(), name: '', value: '' }]
@@ -90,7 +92,7 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
     projectRef: project?.ref,
     connectionString: project?.connectionString,
   })
-  const [isSubmitting, setIsSubmitting] = useState(false)
+
   const { mutate: createDatabaseTrigger } = useDatabaseTriggerCreateMutation({
     onSuccess: (res) => {
       toast.success(`Successfully created new webhook "${res.name}"`)
@@ -102,6 +104,7 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
       toast.error(`Failed to create webhook: ${error.message}`)
     },
   })
+
   const { mutate: updateDatabaseTrigger } = useDatabaseTriggerUpdateMutation({
     onSuccess: (res) => {
       setIsSubmitting(false)
@@ -132,13 +135,6 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
     timeout_ms: Number(selectedHook?.function_args?.[4] ?? 5000),
   }
 
-  useEffect(() => {
-    if (visible) {
-      setIsEdited(false)
-      setIsClosingPanel(false)
-    }
-  }, [visible])
-
   const onClosePanel = () => {
     if (isEdited) setIsClosingPanel(true)
     else onClose()
@@ -262,6 +258,13 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
     }
   }
 
+  useEffect(() => {
+    if (visible) {
+      setIsEdited(false)
+      setIsClosingPanel(false)
+    }
+  }, [visible])
+
   return (
     <>
       <SidePanel

apps/studio/components/interfaces/Database/Hooks/FormContents.tsx

@@ -51,7 +51,9 @@ export const FormContents = ({
   const restUrlTld = restUrl ? new URL(restUrl).hostname.split('.').pop() : 'co'
 
   const { data: keys = [] } = useAPIKeysQuery({ projectRef: ref, reveal: true })
-  const { data: functions = [] } = useEdgeFunctionsQuery({ projectRef: ref })
+  const { data: functions = [], isSuccess: isSucessEdgeFunctions } = useEdgeFunctionsQuery({
+    projectRef: ref,
+  })
 
   const legacyServiceRole = keys.find((x) => x.name === 'service_role')?.api_key ?? '[YOUR API KEY]'
 
@@ -81,6 +83,8 @@ export const FormContents = ({
   }, [values.function_type])
 
   useEffect(() => {
+    if (!isSucessEdgeFunctions) return
+
     const isEdgeFunctionSelected = isEdgeFunction({ ref, restUrlTld, url: values.http_url })
 
     if (values.http_url && isEdgeFunctionSelected) {
@@ -105,7 +109,7 @@ export const FormContents = ({
       setHttpHeaders(updatedHttpHeaders)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [values.http_url])
+  }, [values.http_url, isSucessEdgeFunctions])
 
   return (
     <div>