Files
supabase/apps/studio/components/interfaces/Integrations/DataApi/OverviewTab.tsx
T
Charis c7dcda5644 feat(studio): move data api settings to integrations (#42711)
Feature

## What is the current behavior?

Data API settings live under Project Settings.

## What is the new behavior?

Data API settings are moved to the Integrations page, treating Data API
as a platform integration. Includes security checks when toggling on the
Data API to prevent unintended exposure of project data.

## Additional context

Towards FE-2517

## Summary by CodeRabbit

* **New Features**
* Added a Data API integration with Overview and Settings pages,
endpoint display, and enable/disable toggle with safety checks and
confirmation flow.
* **Navigation Changes**
* Data API moved from Project Settings into the Integrations area and
routes now redirect to the new Overview page.
* **Documentation**
* Added an overview doc describing Data API endpoints and configuration.
* **Tests**
* Added unit tests for endpoint resolution and schema parsing utilities.
2026-02-12 15:18:39 +00:00

41 lines
1.6 KiB
TypeScript

import { useParams } from 'common'
import { AlertCircle } from 'lucide-react'
import { Alert_Shadcn_, AlertTitle_Shadcn_, cn } from 'ui'
import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
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 { PROJECT_STATUS } from '@/lib/constants'
export const DataApiOverviewTab = () => {
const { ref: projectRef } = useParams()
const { data: project, isPending: isProjectLoading } = useSelectedProjectQuery()
const { isEnabled, isPending: isConfigLoading } = useIsDataApiEnabled({ projectRef })
const isLoading = isProjectLoading || isConfigLoading
return (
<IntegrationOverviewTab>
<div className="px-10 max-w-4xl flex flex-col">
{!isProjectLoading && project?.status !== PROJECT_STATUS.ACTIVE_HEALTHY ? (
<Alert_Shadcn_ variant="destructive">
<AlertCircle size={16} />
<AlertTitle_Shadcn_>
API settings are unavailable as the project is not active
</AlertTitle_Shadcn_>
</Alert_Shadcn_>
) : (
<>
<div className={cn((isLoading || !isEnabled) && 'opacity-50 pointer-events-none')}>
<DataApiProjectUrlCard />
</div>
<DataApiEnableSwitch />
</>
)}
</div>
</IntegrationOverviewTab>
)
}