useInstalledIntegrations() — supabase Function Reference

Architecture documentation for the useInstalledIntegrations() function in useInstalledIntegrations.tsx from the supabase codebase.

Function tsx ContentManagement AccessControl calls 1 called by 2

Entity Profile

ContentManagement→ AccessControl→ useInstalledIntegrations() — supabase Function Reference

Dependency Diagram

graph TD
  fba47b05_cae2_d6c9_1d8a_9e04a88c4899["useInstalledIntegrations()"]
  a8362fd5_3334_9c84_743b_cb14d428271f["AvailableIntegrations()"]
  a8362fd5_3334_9c84_743b_cb14d428271f -->|calls| fba47b05_cae2_d6c9_1d8a_9e04a88c4899
  538934e2_0020_151a_5d56_59c5341e4ff7["InstalledIntegrations()"]
  538934e2_0020_151a_5d56_59c5341e4ff7 -->|calls| fba47b05_cae2_d6c9_1d8a_9e04a88c4899
  f6fdda8f_575f_1739_f5a8_a5415e6d46f8["wrapperMetaComparator()"]
  fba47b05_cae2_d6c9_1d8a_9e04a88c4899 -->|calls| f6fdda8f_575f_1739_f5a8_a5415e6d46f8
  style fba47b05_cae2_d6c9_1d8a_9e04a88c4899 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Integrations/Landing/useInstalledIntegrations.tsx lines 17–121

export const useInstalledIntegrations = () => {
  const { data: project } = useSelectedProjectQuery()
  const { integrationsWrappers } = useIsFeatureEnabled(['integrations:wrappers'])
  const stripeSyncEnabled = useFlag('enableStripeSyncEngineIntegration')

  const allIntegrations = useMemo(() => {
    return INTEGRATIONS.filter((integration) => {
      if (
        !integrationsWrappers &&
        (integration.type === 'wrapper' || integration.id.endsWith('_wrapper'))
      ) {
        return false
      }
      if (!stripeSyncEnabled && integration.id === 'stripe_sync_engine') {
        return false
      }
      return true
    })
  }, [integrationsWrappers, stripeSyncEnabled])

  const {
    data,
    error: fdwError,
    isError: isErrorFDWs,
    isPending: isFDWLoading,
    isSuccess: isSuccessFDWs,
  } = useFDWsQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })
  const {
    data: extensions,
    error: extensionsError,
    isError: isErrorExtensions,
    isPending: isExtensionsLoading,
    isSuccess: isSuccessExtensions,
  } = useDatabaseExtensionsQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })

  const {
    data: schemas,
    error: schemasError,
    isError: isErrorSchemas,
    isPending: isSchemasLoading,
    isSuccess: isSuccessSchemas,
  } = useSchemasQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })

  const isHooksEnabled = schemas?.some((schema) => schema.name === 'supabase_functions')
  const wrappers = useMemo(() => data ?? EMPTY_ARR, [data])

  const installedIntegrations = useMemo(() => {
    return allIntegrations
      .filter((integration) => {
        // special handling for supabase webhooks
        if (integration.id === 'webhooks') {
          return isHooksEnabled
        }
        if (integration.id === 'stripe_sync_engine') {
          const stripeSchema = schemas?.find(({ name }) => name === 'stripe')
          return (
            !!stripeSchema?.comment?.startsWith(STRIPE_SCHEMA_COMMENT_PREFIX) &&
            !!stripeSchema.comment?.includes(INSTALLATION_INSTALLED_SUFFIX)
          )
        }
        if (integration.type === 'wrapper') {
          return wrappers.find((w) => wrapperMetaComparator(integration.meta, w))
        }
        if (integration.type === 'postgres_extension') {
          return integration.requiredExtensions.every((extName) => {
            const foundExtension = (extensions ?? []).find((ext) => ext.name === extName)
            return !!foundExtension?.installed_version
          })
        }
        return false
      })
      .sort((a, b) => a.name.localeCompare(b.name))
  }, [allIntegrations, wrappers, extensions, schemas, isHooksEnabled])

  // available integrations are all integrations that can be installed. If an integration can't be installed (needed
  // extensions are not available on this DB image), the UI will provide a tooltip explaining why.
  const availableIntegrations = useMemo(
    () => allIntegrations.sort((a, b) => a.name.localeCompare(b.name)),
    [allIntegrations]
  )

  const error = fdwError || extensionsError || schemasError
  const isLoading = isSchemasLoading || isFDWLoading || isExtensionsLoading
  const isError = isErrorFDWs || isErrorExtensions || isErrorSchemas
  const isSuccess = isSuccessFDWs && isSuccessExtensions && isSuccessSchemas

  return {
    // show all integrations at once instead of showing partial results
    installedIntegrations: isLoading ? EMPTY_ARR : installedIntegrations,
    availableIntegrations: isLoading ? EMPTY_ARR : availableIntegrations,
    error,
    isError,
    isLoading,
    isSuccess,
  }
}