ruvector/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.tsx

import { useRouter } from 'next/router'
import { PropsWithChildren, ReactNode } from 'react'

import { useParams } from 'common'
import { Markdown } from 'components/interfaces/Markdown'
import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import { Alert_Shadcn_, AlertDescription_Shadcn_, Badge, Separator } from 'ui'
import { INTEGRATIONS } from '../Landing/Integrations.constants'
import { BuiltBySection } from './BuildBySection'
import { MarkdownContent } from './MarkdownContent'
import { MissingExtensionAlert } from './MissingExtensionAlert'

interface IntegrationOverviewTabProps {
  actions?: ReactNode
}

export const IntegrationOverviewTab = ({
  actions,
  children,
}: PropsWithChildren<IntegrationOverviewTabProps>) => {
  const { id } = useParams()
  const router = useRouter()
  const { data: project } = useSelectedProjectQuery()

  const integration = INTEGRATIONS.find((i) => i.id === id)

  const { data: extensions } = useDatabaseExtensionsQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })

  if (!integration) {
    return <div>Unsupported integration type</div>
  }

  const dependsOnExtension = (integration.requiredExtensions ?? []).length > 0

  const installableExtensions = (extensions ?? []).filter((ext) =>
    (integration.requiredExtensions ?? []).includes(ext.name)
  )
  const hasToInstallExtensions = installableExtensions.some((x) => !x.installed_version)

  // The integration requires extensions that are not available to install on the current database image
  const hasMissingExtensions =
    installableExtensions.length !== integration.requiredExtensions.length

  return (
    <div className="flex flex-col gap-8 py-10">
      <BuiltBySection integration={integration} />
      {dependsOnExtension && (
        <div className="px-4 md:px-10 max-w-4xl">
          <Alert_Shadcn_ variant="default" className="bg-surface-200/25 border border-default">
            <AlertDescription_Shadcn_ className="flex flex-col gap-y-2">
              <Badge className="bg-surface-300 bg-opacity-100 flex items-center gap-x-2 w-max">
                <img
                  alt="Supabase"
                  src={`${router.basePath}/img/supabase-logo.svg`}
                  className=" h-2.5 cursor-pointer rounded"
                />
                <span>Postgres Module</span>
              </Badge>
              <Markdown
                className="max-w-full"
                content={`This integration uses the ${integration.requiredExtensions.map((x) => `\`${x}\``).join(', ')}
              extension${integration.requiredExtensions.length > 1 ? 's' : ''} directly in your Postgres database.
              ${hasToInstallExtensions && !hasMissingExtensions ? `Install ${integration.requiredExtensions.length > 1 ? 'these' : 'this'} database extension${integration.requiredExtensions.length > 1 ? 's' : ''} to use ${integration.name} in your project.` : ''}
              `}
              />

              {hasMissingExtensions ? (
                integration.missingExtensionsAlert
              ) : (
                <div className="flex flex-row gap-x-2">
                  {installableExtensions.map((extension) => (
                    <MissingExtensionAlert key={extension.name} extension={extension} />
                  ))}
                </div>
              )}
            </AlertDescription_Shadcn_>
          </Alert_Shadcn_>
        </div>
      )}
      {!!actions && !hasToInstallExtensions && <div className="px-10 max-w-4xl">{actions}</div>}
      <MarkdownContent key={integration.id} integrationId={integration.id} />
      <Separator />
      {children}
    </div>
  )
}