feat(studio): warn in Connect sheet when Data API is disabled (#47537)

## What kind of change does this PR introduce?

Feature. Resolves DEPR-599.

## What is the current behavior?

When the Data API is disabled (PostgREST has no exposed schemas), the
Connect sheet still shows client-library setup steps for Framework and
MCP modes without indicating that database queries will fail.

## What is the new behavior?

When database access via the Connect instructions requires PostgREST, an
inline warning appears above the steps (setup instructions remain
visible):

- **Framework**: warns when Data API is off; install, env vars, and
auth/SSR setup still work
- **MCP**: warns only when Database tools apply (selected explicitly, or
by default when no feature filter is set)

The warning fails open if PostgREST config cannot be loaded, and links
to Data API settings via an "Enable Data API" CTA.

| After |
| --- |
| <img width="1664" height="718" alt="CleanShot 2026-07-02 at 21 29
16@2x"
src="https://github.com/user-attachments/assets/80d21927-c4dd-4158-8946-bf648b95e451"
/>|

## Additional context

- Gating logic lives in `ConnectStepsSection.utils.ts` with unit tests
- Out of scope: warning when Data API is on but zero tables/schemas are
exposed
- Coexists with the upcoming warehouse branch's catalog warning — that
lives in a separate `WarehouseCatalogPanel` for `catalog` mode only

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Connection setup now checks Data API enablement and conditionally
shows a “Data API disabled” warning, including an action to open Data
API settings.
* **Bug Fixes**
* Warning logic now more accurately reflects the selected connection
mode and chosen feature/tool selections.
* **Tests**
* Added a focused test suite covering the Data API configuration
decision rules and when the warning should appear.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx

@@ -15,6 +15,10 @@ import type {
   StepContentProps,
 } from './Connect.types'
 import { ConnectSheetStep } from './ConnectSheetStep'
+import {
+  shouldFetchDataApiConfig,
+  shouldShowDataApiDisabledWarning,
+} from './ConnectStepsSection.utils'
 import { CopyPromptAdmonition } from './CopyPromptAdmonition'
 import { buildConnectionStringPooler, getConnectionStrings } from './DatabaseSettings.utils'
 import { getAddons } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
@@ -25,6 +29,7 @@ import { useSupavisorConfigurationQuery } from '@/data/database/supavisor-config
 import { useProjectAddonsQuery } from '@/data/subscriptions/project-addons-query'
 import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
 import { useDeploymentMode } from '@/hooks/misc/useDeploymentMode'
+import { useIsDataApiEnabled } from '@/hooks/misc/useIsDataApiEnabled'
 import { DOCS_URL } from '@/lib/constants'
 import { pluckObjectFields } from '@/lib/helpers'
 
@@ -225,6 +230,23 @@ export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsS
 
   const showSelfHostedMcpNotice = deploymentMode.isSelfHosted && state.mode === 'mcp'
 
+  const shouldFetchDataApiStatus = shouldFetchDataApiConfig({
+    mode: state.mode,
+  })
+  const {
+    isEnabled: isDataApiEnabled,
+    isPending: isDataApiConfigPending,
+    isError: isDataApiConfigError,
+  } = useIsDataApiEnabled({
+    projectRef: ref,
+    enabled: shouldFetchDataApiStatus,
+  })
+  const showDataApiDisabledWarning = shouldShowDataApiDisabledWarning({
+    mode: state.mode,
+    isDataApiEnabled,
+    isPending: isDataApiConfigPending,
+    isError: isDataApiConfigError,
+  })
   if (steps.length === 0) return null
 
   return (
@@ -232,6 +254,20 @@ export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsS
       <div className="p-8 flex flex-col gap-y-6">
         <h3>Connect your app</h3>
 
+        {showDataApiDisabledWarning && (
+          <Admonition
+            type="warning"
+            layout="responsive"
+            title="Database access requires the Data API"
+            description="Client library database queries will not work until the Data API is enabled."
+            actions={[
+              <Button asChild key="enable" variant="default">
+                <Link href={`/project/${ref}/integrations/data_api`}>Enable Data API</Link>
+              </Button>,
+            ]}
+          />
+        )}
+
         {showIpv4AddonNotice && (
           <Admonition
             type="default"

apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.utils.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, test } from 'vitest'
+
+import type { ConnectMode } from './Connect.types'
+import {
+  shouldFetchDataApiConfig,
+  shouldShowDataApiDisabledWarning,
+} from './ConnectStepsSection.utils'
+
+const ALL_MODES: ConnectMode[] = ['framework', 'direct', 'orm', 'mcp', 'server']
+const MCP_WITH_DATABASE_TOOLS = {
+  mode: 'mcp' as const,
+  mcpFeatures: ['database'],
+}
+
+describe('shouldFetchDataApiConfig', () => {
+  test('returns true for framework mode', () => {
+    expect(shouldFetchDataApiConfig({ mode: 'framework' })).toBe(true)
+  })
+
+  test.each(['direct', 'orm', 'server', 'mcp'] as const)('returns false for %s mode', (mode) => {
+    expect(shouldFetchDataApiConfig({ mode })).toBe(false)
+  })
+
+  test('returns false for mcp even when database tools are selected', () => {
+    expect(shouldFetchDataApiConfig(MCP_WITH_DATABASE_TOOLS)).toBe(false)
+  })
+})
+
+describe('shouldShowDataApiDisabledWarning', () => {
+  test.each(ALL_MODES)('returns false while pending for %s mode', (mode) => {
+    expect(
+      shouldShowDataApiDisabledWarning({
+        mode,
+        isDataApiEnabled: false,
+        isPending: true,
+        isError: false,
+      })
+    ).toBe(false)
+  })
+
+  test('returns false when config query errored', () => {
+    expect(
+      shouldShowDataApiDisabledWarning({
+        mode: 'framework',
+        isDataApiEnabled: false,
+        isPending: false,
+        isError: true,
+      })
+    ).toBe(false)
+  })
+
+  test('returns true for framework when Data API is disabled', () => {
+    expect(
+      shouldShowDataApiDisabledWarning({
+        mode: 'framework',
+        isDataApiEnabled: false,
+        isPending: false,
+        isError: false,
+      })
+    ).toBe(true)
+  })
+
+  test.each(['direct', 'orm', 'server', 'mcp'] as const)(
+    'returns false for %s when Data API is disabled',
+    (mode) => {
+      expect(
+        shouldShowDataApiDisabledWarning({
+          mode,
+          isDataApiEnabled: false,
+          isPending: false,
+          isError: false,
+        })
+      ).toBe(false)
+    }
+  )
+
+  test('returns false for mcp with database tools selected when Data API is disabled', () => {
+    expect(
+      shouldShowDataApiDisabledWarning({
+        ...MCP_WITH_DATABASE_TOOLS,
+        isDataApiEnabled: false,
+        isPending: false,
+        isError: false,
+      })
+    ).toBe(false)
+  })
+
+  test('returns false when framework mode has Data API enabled', () => {
+    expect(
+      shouldShowDataApiDisabledWarning({
+        mode: 'framework',
+        isDataApiEnabled: true,
+        isPending: false,
+        isError: false,
+      })
+    ).toBe(false)
+  })
+})

apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.utils.ts

@@ -0,0 +1,20 @@
+import type { ConnectMode } from './Connect.types'
+
+export function shouldFetchDataApiConfig({ mode }: { mode: ConnectMode }): boolean {
+  return mode === 'framework'
+}
+
+export function shouldShowDataApiDisabledWarning({
+  mode,
+  isDataApiEnabled,
+  isPending,
+  isError,
+}: {
+  mode: ConnectMode
+  isDataApiEnabled: boolean
+  isPending: boolean
+  isError: boolean
+}): boolean {
+  if (isPending || isError || isDataApiEnabled) return false
+  return shouldFetchDataApiConfig({ mode })
+}

apps/studio/hooks/misc/useIsDataApiEnabled.ts

@@ -6,8 +6,14 @@ import { useProjectPostgrestConfigQuery } from '@/data/config/project-postgrest-
  * The Data API is considered enabled when the PostgREST `db_schema` config
  * contains at least one non-empty schema name.
  */
-export const useIsDataApiEnabled = ({ projectRef }: { projectRef?: string }) => {
-  const { data: config, ...rest } = useProjectPostgrestConfigQuery({ projectRef })
+export const useIsDataApiEnabled = ({
+  projectRef,
+  enabled = true,
+}: {
+  projectRef?: string
+  enabled?: boolean
+}) => {
+  const { data: config, ...rest } = useProjectPostgrestConfigQuery({ projectRef }, { enabled })
 
   const isEnabled = !!config?.db_schema?.trim()