fix(studio): correct exposed-schema settings for the Data API (#47511)

apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx

@@ -16,6 +16,7 @@ import {
 } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
+import { getExposedSchemaCounts } from './ExposedSchemaSelector.utils'
 import { useSchemasQuery } from '@/data/database/schemas-query'
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { INTERNAL_SCHEMAS } from '@/hooks/useProtectedSchemas'
@@ -30,13 +31,17 @@ export const internalSchemasCannotExpose = new Set(
 )
 
 interface ExposedSchemaSelectorProps {
-  disabled?: boolean
+  /**
+   * When true the dropdown can still be opened to inspect which schemas are exposed (e.g.
+   * self-hosted, where schemas are managed via PGRST_DB_SCHEMAS), but schemas can't be toggled.
+   */
+  readOnly?: boolean
   selectedSchemas: string[]
   onToggleSchema: (schema: string) => void
 }
 
 export const ExposedSchemaSelector = ({
-  disabled = false,
+  readOnly = false,
   selectedSchemas,
   onToggleSchema,
 }: ExposedSchemaSelectorProps) => {
@@ -68,14 +73,17 @@ export const ExposedSchemaSelector = ({
   )
 
   const selectedSet = useMemo(() => new Set(selectedSchemas), [selectedSchemas])
-  const selectedCount = schemas.filter((s) => selectedSet.has(s.name)).length
+  const { selectedCount, totalCount } = getExposedSchemaCounts({
+    visibleSchemas: schemas.map((s) => s.name),
+    selectedSchemas,
+    protectedSchemas: internalSchemasCannotExpose,
+  })
 
   return (
     <Popover open={open} onOpenChange={setOpen} modal={false}>
       <PopoverTrigger asChild>
         <Button
           size="small"
-          disabled={disabled}
           variant="default"
           className="w-full [&>span]:w-full pr-1! space-x-1"
           iconRight={<ChevronsUpDown className="text-foreground-muted" strokeWidth={2} size={14} />}
@@ -83,7 +91,7 @@ export const ExposedSchemaSelector = ({
           <div className="w-full flex gap-1">
             <p className="text-foreground-lighter">
               {isSuccess
-                ? `${selectedCount} of ${schemas.length} ${pluralize(schemas.length, 'schema')} exposed`
+                ? `${selectedCount} of ${totalCount} ${pluralize(totalCount, 'schema')} exposed`
                 : 'Loading schemas...'}
             </p>
           </div>
@@ -124,8 +132,9 @@ export const ExposedSchemaSelector = ({
                       <CommandItem
                         key={schema}
                         value={schema}
-                        className="cursor-pointer w-full"
+                        className={cn('w-full', readOnly ? 'cursor-default' : 'cursor-pointer')}
                         onSelect={() => {
+                          if (readOnly) return
                           onToggleSchema(schema)
                         }}
                       >
@@ -153,8 +162,9 @@ export const ExposedSchemaSelector = ({
                         <CommandItem
                           key={schema.id}
                           value={schema.name}
-                          className="cursor-pointer w-full"
+                          className={cn('w-full', readOnly ? 'cursor-default' : 'cursor-pointer')}
                           onSelect={() => {
+                            if (readOnly) return
                             onToggleSchema(schema.name)
                           }}
                         >

apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.utils.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+
+import { getExposedSchemaCounts } from './ExposedSchemaSelector.utils'
+
+const PROTECTED = new Set(['storage', 'graphql', 'realtime', '_realtime'])
+
+describe('getExposedSchemaCounts', () => {
+  it('counts a normal platform selection (no protected schemas exposed)', () => {
+    expect(
+      getExposedSchemaCounts({
+        visibleSchemas: ['public', 'api', 'analytics'],
+        selectedSchemas: ['public'],
+        protectedSchemas: PROTECTED,
+      })
+    ).toEqual({ selectedCount: 1, totalCount: 3 })
+  })
+
+  it('folds a protected-but-exposed schema (self-hosted `storage`) into both sides', () => {
+    // `storage` is exposed via PGRST_DB_SCHEMAS but filtered out of the selectable list.
+    expect(
+      getExposedSchemaCounts({
+        visibleSchemas: ['public', 'analytics'],
+        selectedSchemas: ['public', 'storage'],
+        protectedSchemas: PROTECTED,
+      })
+    ).toEqual({ selectedCount: 2, totalCount: 3 })
+  })
+
+  it('does not count a protected schema that is not exposed', () => {
+    expect(
+      getExposedSchemaCounts({
+        visibleSchemas: ['public', 'analytics'],
+        selectedSchemas: ['public'],
+        protectedSchemas: PROTECTED,
+      })
+    ).toEqual({ selectedCount: 1, totalCount: 2 })
+  })
+
+  it('excludes orphan schemas (exposed but absent from the database and not protected)', () => {
+    // `dropped_schema` is in the exposed config but no longer exists; it renders a "does not
+    // exist" row but must not inflate either side of the fraction.
+    expect(
+      getExposedSchemaCounts({
+        visibleSchemas: ['public', 'analytics'],
+        selectedSchemas: ['public', 'dropped_schema'],
+        protectedSchemas: PROTECTED,
+      })
+    ).toEqual({ selectedCount: 1, totalCount: 2 })
+  })
+
+  it('handles a mix of protected-exposed and orphan schemas', () => {
+    expect(
+      getExposedSchemaCounts({
+        visibleSchemas: ['public', 'analytics'],
+        selectedSchemas: ['public', 'storage', 'dropped_schema'],
+        protectedSchemas: PROTECTED,
+      })
+    ).toEqual({ selectedCount: 2, totalCount: 3 })
+  })
+
+  it('returns zero counts when there are no schemas', () => {
+    expect(
+      getExposedSchemaCounts({
+        visibleSchemas: [],
+        selectedSchemas: [],
+        protectedSchemas: PROTECTED,
+      })
+    ).toEqual({ selectedCount: 0, totalCount: 0 })
+  })
+})

apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.utils.ts

@@ -0,0 +1,34 @@
+/**
+ * Computes the "{selectedCount} of {totalCount} schemas exposed" fraction shown in the
+ * ExposedSchemaSelector trigger.
+ *
+ * Protected-but-exposed schemas (e.g. self-hosted's default `storage`, which exists in the
+ * database but is filtered out of the selectable list) are folded into both sides so the
+ * fraction matches the checked rows in the dropdown.
+ *
+ * Orphan schemas (exposed in config but absent from the database and not protected) are
+ * intentionally excluded from both sides — they don't exist, so they shouldn't inflate the
+ * total, even though they still render with a "does not exist" row.
+ */
+export function getExposedSchemaCounts({
+  visibleSchemas,
+  selectedSchemas,
+  protectedSchemas,
+}: {
+  visibleSchemas: string[]
+  selectedSchemas: string[]
+  protectedSchemas: Set<string>
+}): { selectedCount: number; totalCount: number } {
+  const selectedSet = new Set(selectedSchemas)
+  const visibleSet = new Set(visibleSchemas)
+
+  const protectedExposedCount = selectedSchemas.filter(
+    (schema) => !visibleSet.has(schema) && protectedSchemas.has(schema)
+  ).length
+
+  const selectedCount =
+    visibleSchemas.filter((schema) => selectedSet.has(schema)).length + protectedExposedCount
+  const totalCount = visibleSchemas.length + protectedExposedCount
+
+  return { selectedCount, totalCount }
+}

apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx

@@ -310,7 +310,7 @@ export const PostgrestConfig = () => {
                     >
                       <ExposedSchemaSelector
                         selectedSchemas={watchedDbSchema}
-                        disabled={!canUpdatePostgrestConfig}
+                        readOnly={!canUpdatePostgrestConfig}
                         onToggleSchema={(schema) => {
                           const current = form.getValues('dbSchema')
                           if (current.includes(schema)) {

apps/studio/hooks/useProtectedSchemas.ts

@@ -29,6 +29,9 @@ export const INTERNAL_SCHEMAS = [
   'pgtle',
   'pgmq',
   'realtime',
+  // Self-hosted Realtime's own internal bookkeeping schema (docker/volumes/db/realtime.sql)
+  // is created as `_realtime`, distinct from the `realtime` schema name above.
+  '_realtime',
   'storage',
   'supabase_functions',
   'supabase_migrations',