AvailableIntegrations() — supabase Function Reference

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

Function tsx ContentManagement AccessControl calls 1

Entity Profile

ContentManagement→ AccessControl→ AvailableIntegrations() — supabase Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx lines 20–142

export const AvailableIntegrations = () => {
  const { integrationsWrappers } = useIsFeatureEnabled(['integrations:wrappers'])

  const [selectedCategory, setSelectedCategory] = useQueryState(
    'category',
    parseAsString.withDefault('all').withOptions({ clearOnDefault: true })
  )
  const [search, setSearch] = useQueryState(
    'search',
    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
  )

  const {
    availableIntegrations: allIntegrations,
    installedIntegrations,
    error,
    isError,
    isLoading,
    isSuccess,
  } = useInstalledIntegrations()

  const installedIds = installedIntegrations.map((i) => i.id)

  // available integrations for install
  const availableIntegrations = integrationsWrappers
    ? allIntegrations
    : allIntegrations.filter((x) => !x.id.endsWith('_wrapper'))
  const integrationsByCategory =
    selectedCategory === 'all'
      ? availableIntegrations
      : availableIntegrations.filter((i) => i.type === selectedCategory)

  const filteredIntegrations = (
    search.length > 0
      ? integrationsByCategory.filter((i) => i.name.toLowerCase().includes(search.toLowerCase()))
      : integrationsByCategory
  ).sort((a, b) => a.name.localeCompare(b.name))

  return (
    <>
      <Tabs_Shadcn_
        className="mt-4"
        value={selectedCategory}
        onValueChange={(value) => setSelectedCategory(value as IntegrationCategory)}
      >
        <TabsList_Shadcn_ className="px-4 md:px-10 gap-2 border-b-0 border-t pt-5">
          {CATEGORIES.map((category) => (
            <TabsTrigger_Shadcn_
              key={category.key}
              value={category.key}
              onClick={() => setSelectedCategory(category.key as IntegrationCategory)}
              className={cn(
                buttonVariants({
                  size: 'tiny',
                  type: selectedCategory === category.key ? 'default' : 'outline',
                }),
                selectedCategory === category.key ? 'text-foreground' : 'text-foreground-lighter',
                '!rounded-full px-3'
              )}
            >
              {category.label}
            </TabsTrigger_Shadcn_>
          ))}
          <Input
            value={search}
            onChange={(e) => {
              setSearch(e.target.value)
              setSelectedCategory('all')
            }}
            containerClassName="group w-40 ml-5"
            icon={
              <Search
                size={14}
                className="transition text-foreground-lighter group-hover:text-foreground"
              />
            }
            iconContainerClassName="p-0"
            className="pl-7 rounded-none !border-0 border-transparent bg-transparent !shadow-none !ring-0 !ring-offset-0"
            placeholder="Search..."
          />
        </TabsList_Shadcn_>
      </Tabs_Shadcn_>
      <div className="p-4 md:p-10 md:py-8 flex flex-col gap-y-5">
        <div className="grid xl:grid-cols-3 2xl:grid-cols-4 gap-x-4 gap-y-3">
          {isLoading &&
            new Array(3)
              .fill(0)
              .map((_, idx) => <IntegrationLoadingCard key={`integration-loading-${idx}`} />)}
          {isError && (
            <AlertError
              className="xl:col-span-3 2xl:col-span-4"
              subject="Failed to retrieve available integrations"
              error={error}
            />
          )}
          {isSuccess &&
            filteredIntegrations.map((i) => (
              <IntegrationCard key={i.id} {...i} isInstalled={installedIds.includes(i.id)} />
            ))}
          {isSuccess && search.length > 0 && filteredIntegrations.length === 0 && (
            <NoSearchResults
              className="xl:col-span-3 2xl:col-span-4"
              searchString={search}
              onResetFilter={() => setSearch('')}
            />
          )}
          {isSuccess &&
            selectedCategory !== 'all' &&
            search.length === 0 &&
            filteredIntegrations.length === 0 && (
              <Admonition
                showIcon={false}
                className="xl:col-span-3 2xl:col-span-4"
                type="default"
                title="All integrations in this category are currently in use"
                description="Manage your installed integrations in the section above"
              />
            )}
        </div>
      </div>
    </>
  )
}