supabase__supabase/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx

import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
import { toast } from 'sonner'
import { Admonition } from 'ui-patterns/Admonition'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'

import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
import { RequiredExtensionsSection } from '../Integration/RequiredExtensionsSection'
import { useIsMarketplaceEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { NoPermission } from '@/components/ui/NoPermission'
import { useHooksEnableMutation } from '@/data/database/hooks-enable-mutation'
import { useSchemasQuery } from '@/data/database/schemas-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'

const WebhooksContent = () => {
  const { ref: projectRef } = useParams()
  const { data: project } = useSelectedProjectQuery()

  const {
    data: schemas,
    isSuccess: isSchemasLoaded,
    refetch,
  } = useSchemasQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })

  const isHooksEnabled = schemas?.some((schema) => schema.name === 'supabase_functions')
  const { can: canReadWebhooks, isLoading: isLoadingPermissions } = useAsyncCheckPermissions(
    PermissionAction.TENANT_SQL_ADMIN_READ,
    'triggers'
  )

  const { mutate: enableHooks, isPending: isEnablingHooks } = useHooksEnableMutation({
    onSuccess: async () => {
      await refetch()
      toast.success('Successfully enabled webhooks')
    },
  })

  const enableHooksForProject = async () => {
    if (!projectRef) return console.error('Project ref is required')
    enableHooks({ ref: projectRef })
  }

  if (!isSchemasLoaded || isLoadingPermissions) {
    return (
      <div className="p-10">
        <GenericSkeletonLoader />
      </div>
    )
  }

  if (!canReadWebhooks) {
    return (
      <div className="p-10">
        <NoPermission isFullPage resourceText="view database webhooks" />
      </div>
    )
  }

  if (isSchemasLoaded && isHooksEnabled) return null

  return (
    <Admonition showIcon={false} type="default" title="Enable database webhooks on your project">
      <p>
        Database Webhooks can be used to trigger serverless functions or send requests to an HTTP
        endpoint
      </p>
      <ButtonTooltip
        variant="primary"
        className="mt-2 w-fit"
        onClick={() => enableHooksForProject()}
        disabled={isEnablingHooks}
        tooltip={{
          content: {
            side: 'bottom',
            text: !canReadWebhooks
              ? 'You need additional permissions to enable webhooks'
              : undefined,
          },
        }}
      >
        Enable webhooks
      </ButtonTooltip>
    </Admonition>
  )
}

export const WebhooksOverviewTab = () => {
  const isMarketplaceEnabled = useIsMarketplaceEnabled()

  if (isMarketplaceEnabled) {
    return <RequiredExtensionsSection />
  }

  return <IntegrationOverviewTab hideRequiredExtensionsSection actions={<WebhooksContent />} />
}