supabase/apps/studio/components/interfaces/Integrations/DataApi/OverviewTab.tsx

import { useParams } from 'common'
import { AlertCircle } from 'lucide-react'
import { Alert, AlertTitle, cn } from 'ui'
import { Admonition } from 'ui-patterns/admonition'

import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
import { IntegrationOverviewTabV2 } from '../Integration/IntegrationOverviewTabV2'
import { useIsMarketplaceEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { DataApiEnableSwitch } from '@/components/interfaces/Settings/API/DataApiEnableSwitch'
import { DataApiProjectUrlCard } from '@/components/interfaces/Settings/API/DataApiProjectUrlCard'
import { useIsDataApiEnabled } from '@/hooks/misc/useIsDataApiEnabled'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { IS_PLATFORM, PROJECT_STATUS } from '@/lib/constants'

const DataApiOverview = () => {
  const { ref: projectRef } = useParams()
  const { data: project, isPending: isProjectLoading } = useSelectedProjectQuery()
  const { isEnabled, isPending: isConfigLoading } = useIsDataApiEnabled({ projectRef })
  const isLoading = isProjectLoading || isConfigLoading

  return (
    <div className="max-w-4xl flex flex-col">
      {!isProjectLoading && project?.status !== PROJECT_STATUS.ACTIVE_HEALTHY ? (
        <Alert variant="destructive">
          <AlertCircle size={16} />
          <AlertTitle>API settings are unavailable as the project is not active</AlertTitle>
        </Alert>
      ) : (
        <>
          <div
            className={cn(
              IS_PLATFORM && (isLoading || !isEnabled) && 'opacity-50 pointer-events-none'
            )}
          >
            <DataApiProjectUrlCard />
          </div>
          {IS_PLATFORM ? (
            <DataApiEnableSwitch />
          ) : (
            <Admonition
              type="default"
              title="Managed via configuration variables"
              description="Data API settings are configured via config.toml for CLI and local development, or via docker-compose.yml and .env for self-hosted deployments."
            />
          )}
        </>
      )}
    </div>
  )
}

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

  if (isMarketplaceEnabled) {
    return (
      <IntegrationOverviewTabV2>
        <DataApiOverview />
      </IntegrationOverviewTabV2>
    )
  } else {
    return (
      <IntegrationOverviewTab>
        <div className="px-10">
          <DataApiOverview />
        </div>
      </IntegrationOverviewTab>
    )
  }
}