supabase__supabase/apps/studio/components/interfaces/Database/Hooks/HTTPRequestConfig.tsx

import { useParams } from 'common'
import Link from 'next/link'
import { UseFormReturn } from 'react-hook-form'
import {
  Button,
  FormControl,
  FormField,
  Input,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  useWatch,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'

import { WebhookFormValues } from './EditHookPanel.constants'
import {
  FormSection,
  FormSectionContent,
  FormSectionLabel,
} from '@/components/ui/Forms/FormSection'
import { useEdgeFunctionsQuery } from '@/data/edge-functions/edge-functions-query'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { buildDatabaseEdgeFunctionUrl } from '@/lib/api/edgeFunctions'

interface HTTPRequestConfigProps {
  form: UseFormReturn<WebhookFormValues>
}

export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
  const { ref } = useParams()
  const { data: selectedProject } = useSelectedProjectQuery()

  const { data: functions } = useEdgeFunctionsQuery({ projectRef: ref })

  const edgeFunctions = functions ?? []
  const functionType = useWatch({ control: form.control, name: 'function_type' })

  return (
    <FormSection
      header={
        <FormSectionLabel className="lg:col-span-4!">
          {functionType === 'http_request'
            ? 'HTTP Request'
            : functionType === 'supabase_function'
              ? 'Edge Function'
              : ''}
        </FormSectionLabel>
      }
    >
      <FormSectionContent loading={false} className="lg:col-span-8!">
        <FormField
          control={form.control}
          name="http_method"
          render={({ field }) => (
            <FormItemLayout label="Method" layout="vertical" className="gap-1">
              <Select value={field.value} onValueChange={field.onChange}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="GET">GET</SelectItem>
                  <SelectItem value="POST">POST</SelectItem>
                </SelectContent>
              </Select>
            </FormItemLayout>
          )}
        />

        {functionType === 'http_request' ? (
          <FormField
            control={form.control}
            name="http_url"
            render={({ field }) => (
              <FormItemLayout
                label="URL"
                layout="vertical"
                className="gap-1"
                description="URL of the HTTP request. Must include HTTP/HTTPS"
              >
                <FormControl>
                  <Input {...field} placeholder="http://api.com/path/resource" />
                </FormControl>
              </FormItemLayout>
            )}
          />
        ) : functionType === 'supabase_function' && edgeFunctions.length === 0 ? (
          <div className="space-y-1">
            <p className="text-sm text-foreground-light">Select which edge function to trigger</p>
            <div className="px-4 py-4 border rounded-sm bg-surface-300 border-strong flex items-center justify-between space-x-4">
              <p className="text-sm">No edge functions created yet</p>
              <Button variant="primary" asChild>
                <Link href={`/project/${ref}/functions`}>Create an edge function</Link>
              </Button>
            </div>
          </div>
        ) : functionType === 'supabase_function' && edgeFunctions.length > 0 ? (
          <FormField
            control={form.control}
            name="http_url"
            render={({ field }) => (
              <FormItemLayout
                label="Select which edge function to trigger"
                layout="vertical"
                className="gap-1"
              >
                <Select value={field.value} onValueChange={field.onChange}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Select an edge function" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    {edgeFunctions.map((fn) => {
                      const restUrl = selectedProject?.restUrl
                      const functionUrl = buildDatabaseEdgeFunctionUrl(fn.slug, ref ?? '', restUrl)

                      return (
                        <SelectItem key={fn.id} value={functionUrl}>
                          {fn.name}
                        </SelectItem>
                      )
                    })}
                  </SelectContent>
                </Select>
              </FormItemLayout>
            )}
          />
        ) : null}

        <FormField
          control={form.control}
          name="timeout_ms"
          render={({ field }) => (
            <FormItemLayout
              label="Timeout"
              labelOptional="Between 1000ms to 10,000ms"
              layout="vertical"
              className="gap-1"
            >
              <FormControl>
                <div className="relative">
                  <Input {...field} type="number" className="pr-10" />
                  <span className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground-light text-sm">
                    ms
                  </span>
                </div>
              </FormControl>
            </FormItemLayout>
          )}
        />
      </FormSectionContent>
    </FormSection>
  )
}