{topic}
+{description}
+ { + guides.length === 0 ? ( +No guides for this topic
+ ) : ( +-
+ {guides.map((guide) => (
+
- + {guide.data.title} + + ))} +
- svg]:rotate-180',
- className
- )}
- {...props}
- disabled={disabled}
- tabIndex={computedTabIndex}
- >
- {children}
- {!hideIcon && (
-
- )}
-
-
-
+ svg]:rotate-180',
+ focusVariant === 'ring' && 'rounded-md',
+ className,
+ focusVariant === 'ring' ? 'focus-ring' : 'relative focus-inset'
+ )}
+ {...props}
+ disabled={disabled}
+ tabIndex={computedTabIndex}
+ >
+ {children}
+ {!hideIcon && (
+
+ )}
+
+
+
@@ -151,9 +161,10 @@ export const NewScopedTokenSheet = ({ onCreateExperimentalToken }: NewScopedToke
/>
) : (
handleOpenChange(false, true)}
+ onCancel={handlePermissionsLoadError}
/>
)}
diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts
index e01b9126af4..c8ccbd5b671 100644
--- a/packages/common/telemetry-constants.ts
+++ b/packages/common/telemetry-constants.ts
@@ -3534,7 +3534,10 @@ export interface AccessTokenCreatedEvent {
}
/**
- * Triggered when an access token creation sheet is closed.
+ * Triggered when the access token creation sheet is closed before a token was created, either by
+ * the user (Escape, outside click, or Cancel) or because the permissions map failed to load and
+ * forced the sheet shut. The token created step blocks non-safe closes, so this event never fires
+ * for a completed creation.
*
* @group Events
* @source studio
@@ -3543,8 +3546,10 @@ export interface AccessTokenCreatedEvent {
export interface AccessTokenCreationSheetDismissedEvent {
action: 'access_token_creation_sheet_dismissed'
properties: {
- tokenType: 'classic' | 'scoped' | 'none'
- step: 'form' | 'success'
+ resourceAccess: 'project' | 'organization' | 'account'
+ formStep: 'form' | 'review'
+ isFormTouched: boolean
+ trigger: 'user' | 'permissions_load_error'
}
groups: Omit
}
From 11289328e5f42e08682135e6503b23a51cdb1b7c Mon Sep 17 00:00:00 2001
From: Coenen Benjamin
Date: Mon, 7 Sep 2026 11:24:42 +0200
Subject: [PATCH 004/333] add support for warehouse connection string (#49914)
Add support for connection string for warehouse.
This PR gives the ability to enable warehouse on a project and also get
the connection string to connect to.
> This project is only available in staging for now and gated behind a
feature flag
## Summary by CodeRabbit
- **New Features**
- Added a Warehouse connection option to the Connect dialog.
- Select schemas and tables to replicate, with setup progress, error
recovery, and retry support.
- View copyable Warehouse connection details, credentials guidance,
command-line instructions, and DuckLake setup scripts.
- Warehouse availability is controlled by feature configuration.
- **Tests**
- Added coverage for Warehouse table selection, setup script generation,
URL parsing, and connection configuration utilities.
---------
Signed-off-by: Benjamin <5719034+bnjjj@users.noreply.github.com>
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
---
.../interfaces/ConnectSheet/Connect.types.ts | 2 +-
.../ConnectSheet/ConnectModeButton.tsx | 3 +-
.../interfaces/ConnectSheet/ConnectSheet.tsx | 27 +-
.../WarehouseConnectionDetails.tsx | 211 ++++++++++++++
.../WarehouseEnablingProgress.tsx | 55 ++++
.../WarehouseModePanel/WarehouseModePanel.tsx | 123 +++++++++
.../WarehouseModePanel.utils.ts | 101 +++++++
.../WarehouseSchemaTablePicker.tsx | 261 ++++++++++++++++++
.../WarehouseModePanel.utils.test.ts | 205 ++++++++++++++
.../interfaces/ConnectSheet/connect.schema.ts | 9 +
.../ConnectSheet/useAvailableConnectModes.ts | 5 +-
.../WarehouseFdwCustomImage.constants.ts | 30 ++
apps/studio/data/warehouse/keys.ts | 6 +
.../warehouse/warehouse-catalog-mutation.ts | 63 +++++
.../data/warehouse/warehouse-catalog-query.ts | 43 +++
.../warehouse/warehouse-setup-mutation.ts | 59 ++++
.../warehouse/warehouse-setup-status-query.ts | 43 +++
.../hooks/misc/useIsWarehouseEnabled.ts | 42 +++
apps/studio/lib/warehouse.test.ts | 103 +++++++
apps/studio/lib/warehouse.ts | 119 ++++++++
knip.jsonc | 5 +
packages/common/configcat.ts | 19 ++
.../enabled-features/enabled-features.json | 1 +
.../enabled-features.schema.json | 5 +
packages/common/telemetry-constants.ts | 2 +-
25 files changed, 1529 insertions(+), 13 deletions(-)
create mode 100644 apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseConnectionDetails.tsx
create mode 100644 apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseEnablingProgress.tsx
create mode 100644 apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseModePanel.tsx
create mode 100644 apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseModePanel.utils.ts
create mode 100644 apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseSchemaTablePicker.tsx
create mode 100644 apps/studio/components/interfaces/ConnectSheet/__tests__/WarehouseModePanel.utils.test.ts
create mode 100644 apps/studio/components/interfaces/ProjectCreation/WarehouseFdwCustomImage.constants.ts
create mode 100644 apps/studio/data/warehouse/keys.ts
create mode 100644 apps/studio/data/warehouse/warehouse-catalog-mutation.ts
create mode 100644 apps/studio/data/warehouse/warehouse-catalog-query.ts
create mode 100644 apps/studio/data/warehouse/warehouse-setup-mutation.ts
create mode 100644 apps/studio/data/warehouse/warehouse-setup-status-query.ts
create mode 100644 apps/studio/hooks/misc/useIsWarehouseEnabled.ts
create mode 100644 apps/studio/lib/warehouse.test.ts
create mode 100644 apps/studio/lib/warehouse.ts
diff --git a/apps/studio/components/interfaces/ConnectSheet/Connect.types.ts b/apps/studio/components/interfaces/ConnectSheet/Connect.types.ts
index 2c863fdabb8..fc5bf7712ec 100644
--- a/apps/studio/components/interfaces/ConnectSheet/Connect.types.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/Connect.types.ts
@@ -57,7 +57,7 @@ export type ConditionalValue =
// Schema Types - Modes
// ============================================================================
-export const CONNECT_MODES = ['framework', 'direct', 'orm', 'mcp', 'server'] as const
+export const CONNECT_MODES = ['framework', 'direct', 'orm', 'mcp', 'server', 'warehouse'] as const
export type ConnectMode = (typeof CONNECT_MODES)[number]
export interface ModeDefinition {
diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectModeButton.tsx b/apps/studio/components/interfaces/ConnectSheet/ConnectModeButton.tsx
index 2d891eacbc1..83d117a1043 100644
--- a/apps/studio/components/interfaces/ConnectSheet/ConnectModeButton.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/ConnectModeButton.tsx
@@ -1,5 +1,5 @@
import { cva, type VariantProps } from 'class-variance-authority'
-import { Box, Cable, Database, Server, Sparkles } from 'lucide-react'
+import { Box, Cable, Database, Server, Sparkles, Warehouse } from 'lucide-react'
import type { ComponentPropsWithoutRef, ReactNode } from 'react'
import { cn } from 'ui'
@@ -11,6 +11,7 @@ const MODE_ICONS: Record = {
orm:
- {activeFields.length > 0 && (
+ {state.mode === 'warehouse' ? (
-
- )}
+ ) : (
+ <>
+ {activeFields.length > 0 && (
+
+
+ )}
-
+ {label}
+
+ )
+}
+
+/**
+ * The DuckDB setup script inlines everything except the two passwords, which it reads via
+ * `getenv()` — so those are the only credential values surfaced as their own rows here.
+ */
+function DuckLakeSetup({ credentials }: { credentials: WarehouseCatalogCredentials }) {
+ const connection = parseWarehouseCatalogUrl(credentials.catalog_url)
+
+ if (connection === null) {
+ return (
+ {children}
+
+
+
+
+
+ )
+ }
+
+ const setupScript = getDuckLakeSetupScript({ credentials, connection })
+
+ return (
+
+ {DUCKLAKE_S3_SECRET_ENV_VAR}}>
+
+
+ {DUCKLAKE_METADATA_PASSWORD_ENV_VAR}}
+ >
+
+
+ {/*
+ `className` is what switches CodeBlock from its plain
+ )
+}
+
+export const WarehouseConnectionDetails = ({ onEditTables }: WarehouseConnectionDetailsProps) => {
+ const { ref: projectRef } = useParams()
+
+ const {
+ data: catalog,
+ isPending: isCatalogPending,
+ isError: isCatalogError,
+ error: catalogError,
+ } = useWarehouseCatalogQuery({ projectRef })
+ const catalogMutation = useUpdateWarehouseCatalogMutation()
+
+ if (!projectRef) return null
+
+ const endpoint = getWarehouseFlightSqlEndpoint(projectRef)
+ const connectionString = getWarehouseFlightSqlConnectionString(projectRef)
+ const usqlCommand = getWarehouseUsqlCommand(projectRef)
+
+ return (
+ + Attach this project's Warehouse directly from DuckDB. The script reads both passwords from + environment variables — set these before running it: +
+ fallback to the syntax
+ highlighter — without it the SQL renders unhighlighted and the blank lines between steps
+ collapse.
+ */}
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseEnablingProgress.tsx b/apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseEnablingProgress.tsx
new file mode 100644
index 00000000000..5953901316c
--- /dev/null
+++ b/apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseEnablingProgress.tsx
@@ -0,0 +1,55 @@
+import { Loader2 } from 'lucide-react'
+import { Badge } from 'ui'
+import { Admonition } from 'ui-patterns/Admonition'
+
+import type { WarehouseSetupStatusResponse } from '@/data/warehouse/warehouse-setup-status-query'
+
+const TABLE_STATE_BADGE: Record<
+ WarehouseSetupStatusResponse['tables'][number]['state'],
+ { label: string; variant: 'warning' | 'success' | 'destructive' }
+> = {
+ syncing: { label: 'Backfilling', variant: 'warning' },
+ live: { label: 'Synced', variant: 'success' },
+ error: { label: 'Error', variant: 'destructive' },
+}
+
+export interface WarehouseEnablingProgressProps {
+ status: WarehouseSetupStatusResponse
+}
+
+export const WarehouseEnablingProgress = ({ status }: WarehouseEnablingProgressProps) => {
+ return (
+
+ Warehouse enabled
+
+
+
+ External access
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Same password as your primary database.
+
+ }
+ className="ml-auto"
+ >
+ Reset database password
+
+
+ Connect with FlightSQL
++ Warehouse speaks the Arrow FlightSQL protocol. Any FlightSQL-compatible client can connect — + for example, using the usql CLI: +
++ Connect with DuckDB (DuckLake catalog) +
+ + {isCatalogPending &&
+
+ )}
+
+ {!isCatalogPending && !isCatalogError && catalog?.enabled && catalog.credentials && (
+ + Enable catalog access to attach this project's Warehouse directly from DuckDB. +
+ +
+
+ )
+}
diff --git a/apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseModePanel.tsx b/apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseModePanel.tsx
new file mode 100644
index 00000000000..25c3eab8f4b
--- /dev/null
+++ b/apps/studio/components/interfaces/ConnectSheet/WarehouseModePanel/WarehouseModePanel.tsx
@@ -0,0 +1,123 @@
+import { useParams } from 'common'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { Button } from 'ui'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+
+import { WarehouseConnectionDetails } from './WarehouseConnectionDetails'
+import { WarehouseEnablingProgress } from './WarehouseEnablingProgress'
+import type { WarehouseSetupTarget } from './WarehouseModePanel.utils'
+import { WarehouseSchemaTablePicker } from './WarehouseSchemaTablePicker'
+import { AlertError } from '@/components/ui/AlertError'
+import { useUpdateWarehouseCatalogMutation } from '@/data/warehouse/warehouse-catalog-mutation'
+import { useWarehouseSetupMutation } from '@/data/warehouse/warehouse-setup-mutation'
+import { useWarehouseSetupStatusQuery } from '@/data/warehouse/warehouse-setup-status-query'
+
+const POLLING_SETUP_STATUSES = new Set(['setting_up', 'copying'])
+
+interface WarehouseSetupCompleteProps {
+ onSubmit: (targets: WarehouseSetupTarget[]) => void
+ isSubmitting: boolean
+}
+
+const WarehouseSetupComplete = ({ onSubmit, isSubmitting }: WarehouseSetupCompleteProps) => {
+ const [isEditingTables, setIsEditingTables] = useState(false)
+
+ if (isEditingTables) {
+ return (
+
+ {status.tables.map((table) => {
+ const badge = TABLE_STATE_BADGE[table.state]
+ return (
+
+
+
+ {table.schema}.{table.name}
+
+ {badge.label}
+
+ )
+ })}
+ {status.tables.length === 0 && (
+ + No tables are being copied yet. +
+ )} +
+
+ )
+}
diff --git a/apps/studio/components/interfaces/ConnectSheet/__tests__/WarehouseModePanel.utils.test.ts b/apps/studio/components/interfaces/ConnectSheet/__tests__/WarehouseModePanel.utils.test.ts
new file mode 100644
index 00000000000..4acbf8dc3e7
--- /dev/null
+++ b/apps/studio/components/interfaces/ConnectSheet/__tests__/WarehouseModePanel.utils.test.ts
@@ -0,0 +1,205 @@
+import { describe, expect, test } from 'vitest'
+
+import {
+ buildSelectionFromPublicationTables,
+ buildWarehouseSetupTargets,
+ getSchemaCheckedState,
+ getSchemaTableKey,
+ getSelectedTableCount,
+ isSelectableWarehouseSchema,
+ type SchemaTableSelection,
+ type SchemaWithTables,
+} from '../WarehouseModePanel/WarehouseModePanel.utils'
+
+describe('WarehouseModePanel.utils:isSelectableWarehouseSchema', () => {
+ test('excludes information_schema', () => {
+ expect(isSelectableWarehouseSchema('information_schema')).toBe(false)
+ })
+
+ test('excludes any schema starting with pg_', () => {
+ expect(isSelectableWarehouseSchema('pg_catalog')).toBe(false)
+ expect(isSelectableWarehouseSchema('pg_toast')).toBe(false)
+ })
+
+ test('excludes Supabase infrastructure schemas', () => {
+ // Replicating secrets or internal bookkeeping into a warehouse is never intended
+ expect(isSelectableWarehouseSchema('vault')).toBe(false)
+ expect(isSelectableWarehouseSchema('pgsodium')).toBe(false)
+ expect(isSelectableWarehouseSchema('realtime')).toBe(false)
+ expect(isSelectableWarehouseSchema('_realtime')).toBe(false)
+ expect(isSelectableWarehouseSchema('cron')).toBe(false)
+ expect(isSelectableWarehouseSchema('supabase_migrations')).toBe(false)
+ expect(isSelectableWarehouseSchema('extensions')).toBe(false)
+ })
+
+ test('includes public and other user schemas', () => {
+ expect(isSelectableWarehouseSchema('public')).toBe(true)
+ expect(isSelectableWarehouseSchema('analytics')).toBe(true)
+ })
+
+ test('includes auth and storage, which hold product data users replicate', () => {
+ expect(isSelectableWarehouseSchema('auth')).toBe(true)
+ expect(isSelectableWarehouseSchema('storage')).toBe(true)
+ })
+})
+
+describe('WarehouseModePanel.utils:buildSelectionFromPublicationTables', () => {
+ test('returns an empty selection when the publication has no tables', () => {
+ expect(buildSelectionFromPublicationTables([])).toEqual({})
+ })
+
+ test('marks every publication table as selected', () => {
+ expect(
+ buildSelectionFromPublicationTables([
+ { schema: 'public', name: 'orders' },
+ { schema: 'auth', name: 'users' },
+ ])
+ ).toEqual({ 'public.orders': true, 'auth.users': true })
+ })
+
+ test('produces a fully checked schema when every table of that schema is published', () => {
+ const schemaTables = ['orders', 'customers']
+ const selection = buildSelectionFromPublicationTables(
+ schemaTables.map((name) => ({ schema: 'public', name }))
+ )
+ const selectedCount = schemaTables.filter(
+ (name) => selection[getSchemaTableKey('public', name)]
+ ).length
+
+ expect(getSchemaCheckedState({ selectedCount, totalCount: schemaTables.length })).toBe(true)
+ })
+
+ test('produces an indeterminate schema when only some of its tables are published', () => {
+ const selection = buildSelectionFromPublicationTables([{ schema: 'public', name: 'orders' }])
+ const selectedCount = ['orders', 'customers'].filter(
+ (name) => selection[getSchemaTableKey('public', name)]
+ ).length
+
+ expect(getSchemaCheckedState({ selectedCount, totalCount: 2 })).toBe('indeterminate')
+ })
+
+ test('round-trips through buildWarehouseSetupTargets as a schema target when fully published', () => {
+ const schemas: SchemaWithTables[] = [{ schema: 'public', tables: ['orders', 'customers'] }]
+ const selection = buildSelectionFromPublicationTables([
+ { schema: 'public', name: 'orders' },
+ { schema: 'public', name: 'customers' },
+ ])
+
+ expect(buildWarehouseSetupTargets(selection, schemas)).toEqual([
+ { type: 'schema', schema: 'public' },
+ ])
+ })
+})
+
+describe('WarehouseModePanel.utils:getSchemaCheckedState', () => {
+ test('is unchecked when nothing is selected', () => {
+ expect(getSchemaCheckedState({ selectedCount: 0, totalCount: 3 })).toBe(false)
+ })
+
+ test('is indeterminate when only some tables are selected', () => {
+ expect(getSchemaCheckedState({ selectedCount: 1, totalCount: 3 })).toBe('indeterminate')
+ expect(getSchemaCheckedState({ selectedCount: 2, totalCount: 3 })).toBe('indeterminate')
+ })
+
+ test('is checked when every table is selected', () => {
+ expect(getSchemaCheckedState({ selectedCount: 3, totalCount: 3 })).toBe(true)
+ })
+
+ test('is unchecked for an empty schema rather than checked', () => {
+ expect(getSchemaCheckedState({ selectedCount: 0, totalCount: 0 })).toBe(false)
+ })
+})
+
+describe('WarehouseModePanel.utils:getSchemaTableKey', () => {
+ test('joins schema and table with a dot', () => {
+ expect(getSchemaTableKey('public', 'orders')).toBe('public.orders')
+ })
+})
+
+describe('WarehouseModePanel.utils:getSelectedTableCount', () => {
+ test('returns 0 for an empty selection', () => {
+ expect(getSelectedTableCount({})).toBe(0)
+ })
+
+ test('counts only truthy entries', () => {
+ const selection: SchemaTableSelection = {
+ 'public.orders': true,
+ 'public.customers': false,
+ 'public.events': true,
+ }
+ expect(getSelectedTableCount(selection)).toBe(2)
+ })
+})
+
+describe('WarehouseModePanel.utils:buildWarehouseSetupTargets', () => {
+ test('returns an empty array for an empty selection', () => {
+ const schemas: SchemaWithTables[] = [{ schema: 'public', tables: ['orders', 'customers'] }]
+ expect(buildWarehouseSetupTargets({}, schemas)).toEqual([])
+ })
+
+ test('returns an empty array when there are no schemas', () => {
+ expect(buildWarehouseSetupTargets({ 'public.orders': true }, [])).toEqual([])
+ })
+
+ test('emits a schema target when every table in that schema is selected', () => {
+ const schemas: SchemaWithTables[] = [{ schema: 'public', tables: ['orders', 'customers'] }]
+ const selection: SchemaTableSelection = {
+ 'public.orders': true,
+ 'public.customers': true,
+ }
+ expect(buildWarehouseSetupTargets(selection, schemas)).toEqual([
+ { type: 'schema', schema: 'public' },
+ ])
+ })
+
+ test('emits per-table targets when only some tables in a schema are selected', () => {
+ const schemas: SchemaWithTables[] = [{ schema: 'public', tables: ['orders', 'customers'] }]
+ const selection: SchemaTableSelection = {
+ 'public.orders': true,
+ 'public.customers': false,
+ }
+ expect(buildWarehouseSetupTargets(selection, schemas)).toEqual([
+ { type: 'table', schema: 'public', name: 'orders' },
+ ])
+ })
+
+ test('skips schemas with no tables', () => {
+ const schemas: SchemaWithTables[] = [{ schema: 'empty_schema', tables: [] }]
+ expect(buildWarehouseSetupTargets({ 'empty_schema.foo': true }, schemas)).toEqual([])
+ })
+
+ test('skips schemas with no selected tables', () => {
+ const schemas: SchemaWithTables[] = [{ schema: 'public', tables: ['orders'] }]
+ expect(buildWarehouseSetupTargets({ 'public.orders': false }, schemas)).toEqual([])
+ })
+
+ test('ignores selection keys that reference tables outside the given schemas', () => {
+ const schemas: SchemaWithTables[] = [{ schema: 'public', tables: ['orders'] }]
+ const selection: SchemaTableSelection = {
+ 'public.orders': true,
+ 'other.table': true,
+ }
+ expect(buildWarehouseSetupTargets(selection, schemas)).toEqual([
+ { type: 'schema', schema: 'public' },
+ ])
+ })
+
+ test('handles multiple schemas with a mix of full, partial, and no selection', () => {
+ const schemas: SchemaWithTables[] = [
+ { schema: 'public', tables: ['orders', 'customers'] },
+ { schema: 'auth', tables: ['users', 'sessions'] },
+ { schema: 'storage', tables: ['objects'] },
+ ]
+ const selection: SchemaTableSelection = {
+ 'public.orders': true,
+ 'public.customers': true,
+ 'auth.users': true,
+ 'auth.sessions': false,
+ 'storage.objects': false,
+ }
+ expect(buildWarehouseSetupTargets(selection, schemas)).toEqual([
+ { type: 'schema', schema: 'public' },
+ { type: 'table', schema: 'auth', name: 'users' },
+ ])
+ })
+})
diff --git a/apps/studio/components/interfaces/ConnectSheet/connect.schema.ts b/apps/studio/components/interfaces/ConnectSheet/connect.schema.ts
index e04b96085c7..c7f1e3eb325 100644
--- a/apps/studio/components/interfaces/ConnectSheet/connect.schema.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/connect.schema.ts
@@ -289,6 +289,12 @@ export const connectSchema: ConnectSchema = {
description: 'Connect your agent',
fields: ['mcpClient', 'mcpReadonly', 'mcpFeatures'],
},
+ {
+ id: 'warehouse',
+ label: 'Warehouse',
+ description: 'Connect to Warehouse',
+ fields: [],
+ },
],
// -------------------------------------------------------------------------
@@ -467,6 +473,9 @@ export const connectSchema: ConnectSchema = {
},
},
server: [serverInstallStep, serverEnvStep, serverSkillsInstallStep],
+ // Warehouse renders its own fully custom panel (WarehouseModePanel) instead of the
+ // generic field/step abstraction, so it has no steps of its own here.
+ warehouse: [],
DEFAULT: [skillsInstallStep],
},
},
diff --git a/apps/studio/components/interfaces/ConnectSheet/useAvailableConnectModes.ts b/apps/studio/components/interfaces/ConnectSheet/useAvailableConnectModes.ts
index 0fff82dfa37..904b953749a 100644
--- a/apps/studio/components/interfaces/ConnectSheet/useAvailableConnectModes.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/useAvailableConnectModes.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
import type { ConnectMode } from './Connect.types'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
+import { useIsWarehouseEnabled } from '@/hooks/misc/useIsWarehouseEnabled'
export function useAvailableConnectModes(): ConnectMode[] {
const {
@@ -13,6 +14,7 @@ export function useAvailableConnectModes(): ConnectMode[] {
'project_connection:show_mobile_frameworks',
'project_connection:show_orms',
])
+ const isWarehouseEnabled = useIsWarehouseEnabled()
return useMemo(() => {
const allModes: { id: ConnectMode; enabled: boolean }[] = [
@@ -21,7 +23,8 @@ export function useAvailableConnectModes(): ConnectMode[] {
{ id: 'direct', enabled: true },
{ id: 'orm', enabled: showOrms },
{ id: 'mcp', enabled: true },
+ { id: 'warehouse', enabled: isWarehouseEnabled },
]
return allModes.filter((m) => m.enabled).map((m) => m.id)
- }, [showAppFrameworks, showMobileFrameworks, showOrms])
+ }, [showAppFrameworks, showMobileFrameworks, showOrms, isWarehouseEnabled])
}
diff --git a/apps/studio/components/interfaces/ProjectCreation/WarehouseFdwCustomImage.constants.ts b/apps/studio/components/interfaces/ProjectCreation/WarehouseFdwCustomImage.constants.ts
new file mode 100644
index 00000000000..2724a2816dc
--- /dev/null
+++ b/apps/studio/components/interfaces/ProjectCreation/WarehouseFdwCustomImage.constants.ts
@@ -0,0 +1,30 @@
+export const WAREHOUSE_FDW_CUSTOM_POSTGRES_VERSION =
+ '15.14.1.138-fdw-warehouse-74b5ba9-r7-adminapi110'
+
+export const WAREHOUSE_FDW_CUSTOM_DB_VERSION = `supabase-postgres-${WAREHOUSE_FDW_CUSTOM_POSTGRES_VERSION}`
+
+export const WAREHOUSE_FDW_CUSTOM_INSTANCE_TYPE = 't4g.micro'
+
+export const WAREHOUSE_FDW_CUSTOM_REGION_NAME = 'Southeast Asia (Singapore)'
+
+export const WAREHOUSE_FDW_CUSTOM_REGION_SELECTION = {
+ type: 'specific',
+ code: 'ap-southeast-1',
+} as const
+
+export const WAREHOUSE_FDW_CUSTOM_REQUEST = {
+ enabled: true,
+ secret_region: 'ap-southeast-1',
+ endpoint: 'https://quaxy-flight-staging.fdw-warehouse.supabase.green',
+ tls_domain_name: 'quaxy-flight-staging.fdw-warehouse.supabase.green',
+ jwt_kid: 'fdw-warehouse-staging',
+ jwt_issuer: 'fdw-warehouse',
+ jwt_audience: 'quaxy-flight',
+ jwt_ttl_secs: 300,
+} as const
+
+export const normalizeCustomPostgresVersion = (version?: string) =>
+ version?.trim().replace(/^supabase-postgres-/, '') ?? ''
+
+export const isWarehouseFdwCustomPostgresVersion = (version?: string) =>
+ normalizeCustomPostgresVersion(version) === WAREHOUSE_FDW_CUSTOM_POSTGRES_VERSION
diff --git a/apps/studio/data/warehouse/keys.ts b/apps/studio/data/warehouse/keys.ts
new file mode 100644
index 00000000000..40edb741a87
--- /dev/null
+++ b/apps/studio/data/warehouse/keys.ts
@@ -0,0 +1,6 @@
+export const warehouseKeys = {
+ setupStatus: (projectRef: string | undefined) =>
+ ['projects', projectRef, 'warehouse', 'setup-status'] as const,
+ catalog: (projectRef: string | undefined) =>
+ ['projects', projectRef, 'warehouse', 'catalog'] as const,
+}
diff --git a/apps/studio/data/warehouse/warehouse-catalog-mutation.ts b/apps/studio/data/warehouse/warehouse-catalog-mutation.ts
new file mode 100644
index 00000000000..6c82e469c41
--- /dev/null
+++ b/apps/studio/data/warehouse/warehouse-catalog-mutation.ts
@@ -0,0 +1,63 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { components } from 'api-types'
+import { toast } from 'sonner'
+
+import { warehouseKeys } from './keys'
+import { handleError, post } from '@/data/fetchers'
+import type { ResponseError, UseCustomMutationOptions } from '@/types'
+
+export type UpdateWarehouseCatalogBody = components['schemas']['UpdateWarehouseCatalogBody']
+
+export type UpdateWarehouseCatalogVariables = {
+ projectRef: string
+ body: UpdateWarehouseCatalogBody
+}
+
+async function updateWarehouseCatalog({ projectRef, body }: UpdateWarehouseCatalogVariables) {
+ if (!projectRef) throw new Error('projectRef is required')
+
+ const { data, error } = await post('/platform/warehouse/{ref}/catalog', {
+ params: { path: { ref: projectRef } },
+ body,
+ })
+ if (error) {
+ handleError(error)
+ }
+
+ return data
+}
+
+export type UpdateWarehouseCatalogData = Awaited
+
+
+
+
+
+
+ + {isEditing ? 'Edit replicated tables' : 'Enable Warehouse'} +
++ {isEditing + ? 'Choose which schemas or tables to replicate to your Warehouse. Tables already replicating are selected.' + : 'Replicate your database to a low-latency analytical endpoint over FlightSQL. Choose which schemas or tables to replicate — you can change this later.'} +
++ Schemas and tables to replicate +
+ +
+ {schemasWithTables.map((schema) => {
+ const keys = schema.tables.map((table) => getSchemaTableKey(schema.schema, table))
+ const checkedCount = keys.filter((key) => selection[key]).length
+ const checkedState = getSchemaCheckedState({
+ selectedCount: checkedCount,
+ totalCount: keys.length,
+ })
+ const isOpen = expandedOverrides[schema.schema] ?? checkedCount > 0
+
+ return (
+ setExpanded(schema.schema, open)}
+ >
+
+ {schema.tables.map((table) => {
+ const key = getSchemaTableKey(schema.schema, table)
+ return (
+
+
+ )
+ })}
+
+
+
+
+
+ toggleSchema(schema)}
+ disabled={schema.tables.length === 0}
+ aria-label={`Select all tables in ${schema.schema}`}
+ // The shared Checkbox only fills itself for `data-state=checked`, so a partial
+ // selection would otherwise render identically to an empty one. A muted fill
+ // keeps all three states visually distinct.
+ className="data-[state=indeterminate]:border-foreground-lighter data-[state=indeterminate]:bg-foreground-lighter"
+ />
+ {schema.schema}
+
+ {checkedCount}/{keys.length} tables
+
+
+
+ toggleTable(schema.schema, table)}
+ aria-label={`Select ${schema.schema}.${table}`}
+ />
+ {table}
+
+ )
+ })}
+ {schema.tables.length === 0 && (
+ + No tables in this schema. +
+ )} +
+
+ {selectedCount} table{selectedCount === 1 ? '' : 's'} selected
+
+
+
+ {isEditing && (
+ } onClick={onBack}>
+ Back
+
+ )}
+
+
+ ` with no wrapper we can add classes to.
+ transformers: [
+ {
+ name: 'kb-code-block-classes',
+ pre(node) {
+ this.addClassToHast(node, 'border border-default rounded-lg')
+ },
+ code(node) {
+ this.addClassToHast(node, 'inline-block p-6')
+ },
+ },
+ ],
+ },
+ },
})
diff --git a/apps/kb/src/styles/globals.css b/apps/kb/src/styles/globals.css
index b15951345ec..efb8df5e7bb 100644
--- a/apps/kb/src/styles/globals.css
+++ b/apps/kb/src/styles/globals.css
@@ -73,8 +73,35 @@ h6:not(.font-mono),
border-color: var(--border-default, currentColor);
}
-/* TEMPORARY UNTIL WE IMPLEMENT OUR OWN CODE COMPONENT */
-.prose pre code {
- padding: 1rem;
- display: inline-block;
+/* Code block theme colors for use with Supabase Theme */
+[data-theme='dark'] {
+ --code-token-keyword: #bda4ff;
+ --code-foreground: #ffffff;
+ --code-token-constant: #3ecf8e;
+ --code-token-string: #ffcda1;
+ --code-token-comment: #949494;
+ --code-token-parameter: #ffffff;
+ --code-token-function: #3ecf8e;
+ --code-token-string-expression: #ffcda1;
+ --code-token-punctuation: #ffffff;
+ --code-token-link: #ffffff;
+ --code-token-number: #ffffff;
+ --code-token-property: #3ecf8e;
+ --code-highlight-color: #232323;
+}
+
+[data-theme='light'] {
+ --code-token-keyword: #5f2fc4;
+ --code-foreground: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-constant: #15593b;
+ --code-token-string: #9a5200;
+ --code-token-comment: #6a6a6a;
+ --code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-function: #15593b;
+ --code-token-string-expression: #9a5200;
+ --code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-link: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-number: oklch(from var(--foreground-light) l c h / 1);
+ --code-token-property: #15593b;
+ --code-highlight-color: #1c1c1c;
}
From 7e19cbe1409907643cede39f723067378602e2ac Mon Sep 17 00:00:00 2001
From: Jeremias Menichelli
Date: Mon, 7 Sep 2026 12:40:25 +0200
Subject: [PATCH 006/333] feat(kb): Add topics pages support (#49959)
---
apps/kb/src/components/Nav.tsx | 13 ++++---
apps/kb/src/content.config.ts | 8 +++-
apps/kb/src/content/guides/sample-guide.md | 2 +-
apps/kb/src/layouts/GuideLayout.astro | 12 +++++-
apps/kb/src/lib/topics.ts | 31 ++++++++++++++++
apps/kb/src/pages/topics/[topic].astro | 43 ++++++++++++++++++++++
6 files changed, 98 insertions(+), 11 deletions(-)
create mode 100644 apps/kb/src/lib/topics.ts
create mode 100644 apps/kb/src/pages/topics/[topic].astro
diff --git a/apps/kb/src/components/Nav.tsx b/apps/kb/src/components/Nav.tsx
index d28f765a059..16ff6977028 100644
--- a/apps/kb/src/components/Nav.tsx
+++ b/apps/kb/src/components/Nav.tsx
@@ -9,15 +9,16 @@ import {
navigationMenuTriggerStyle,
} from 'ui'
+import { TOPICS, topicToSlug } from '../lib/topics'
+
+const topics = TOPICS.map((topic) => ({
+ label: topic.name,
+ href: `${import.meta.env.BASE_URL}/topics/${topicToSlug(topic.name)}`,
+}))
+
/**
* Hard-codding links in here for now until we have actual content. Might be worth putting these arrays in their on data file too.
*/
-const topics = [
- { label: 'Troubleshooting', href: '#' },
- { label: 'Migrations', href: '#' },
- { label: 'Comparisons', href: '#' },
-]
-
const resources = [
{ label: 'Status', href: 'https://status.supabase.com' },
{ label: 'Changelog', href: 'https://supabase.com/changelog' },
diff --git a/apps/kb/src/content.config.ts b/apps/kb/src/content.config.ts
index 92612a16b79..fec50c46fb6 100644
--- a/apps/kb/src/content.config.ts
+++ b/apps/kb/src/content.config.ts
@@ -2,6 +2,8 @@ import { defineCollection } from 'astro:content'
import { glob } from 'astro/loaders'
import { z } from 'astro/zod'
+import { TOPIC_NAMES } from './lib/topics'
+
// Every entry here is rendered through GuideLayout by
// src/pages/guides/[...slug].astro — dropping a new file in
// src/content/guides doesn't need any per-file layout wiring.
@@ -9,8 +11,10 @@ const guides = defineCollection({
loader: glob({ pattern: '**/*.md', base: './src/content/guides' }),
schema: z.object({
title: z.string(),
- description: z.string().optional(),
- topics: z.array(z.string()).optional(),
+ description: z.string(),
+ // z.enum (not z.string) so a guide referencing a topic outside TOPICS
+ // fails content validation instead of silently rendering an orphaned tag.
+ topics: z.array(z.enum(TOPIC_NAMES)),
github_url: z.string().optional(),
}),
})
diff --git a/apps/kb/src/content/guides/sample-guide.md b/apps/kb/src/content/guides/sample-guide.md
index 6a69b4987bc..f1af5d55b00 100644
--- a/apps/kb/src/content/guides/sample-guide.md
+++ b/apps/kb/src/content/guides/sample-guide.md
@@ -1,7 +1,7 @@
---
title: 'Markdown elements sample'
description: 'A lorem ipsum sample guide exercising every base Markdown element supported by the guide layout.'
-topics: ['example', 'markdown']
+topics: ['Tutorial', 'Database']
github_url: 'https://github.com/supabase/supabase/discussions/0000000'
---
diff --git a/apps/kb/src/layouts/GuideLayout.astro b/apps/kb/src/layouts/GuideLayout.astro
index 49b82d04b1c..0362e842cfa 100644
--- a/apps/kb/src/layouts/GuideLayout.astro
+++ b/apps/kb/src/layouts/GuideLayout.astro
@@ -3,11 +3,12 @@ import { Github } from 'lucide-react'
import { Badge } from 'ui'
import Layout from './Layout.astro'
+import { getTopicDescription, type Topic, topicToSlug } from '../lib/topics'
interface Props {
title: string
description?: string
- topics?: string[]
+ topics?: Topic[]
github_url?: string
}
@@ -21,7 +22,14 @@ const { title, description, topics = [], github_url } = Astro.props
{
topics.length > 0 && (
- {topics.map((topic) => {topic} )}
+ {topics.map((topic) => (
+
+ {topic}
+
+ ))}
)
}
diff --git a/apps/kb/src/lib/topics.ts b/apps/kb/src/lib/topics.ts
new file mode 100644
index 00000000000..c0725d4a303
--- /dev/null
+++ b/apps/kb/src/lib/topics.ts
@@ -0,0 +1,31 @@
+// Canonical list of guide topics. Single source of truth for the `topics`
+// field in src/content.config.ts (so a guide with an unsupported topic fails
+// content validation), the "Topics" nav menu, and the /topics/[topic] pages.
+export const TOPICS = [
+ { name: 'Migration', description: 'Moving data, schemas, or projects onto Supabase' },
+ { name: 'Comparison', description: 'How Supabase compares to other databases and platforms' },
+ { name: 'Troubleshooting', description: 'Common errors and how to resolve them' },
+ { name: 'Tutorial', description: 'Step-by-step walkthroughs for building with Supabase' },
+ { name: 'Storage', description: 'Uploading, managing, and serving files' },
+ { name: 'Auth', description: 'Authentication, authorization, and user management' },
+ { name: 'Database', description: 'Postgres schemas, queries, and performance' },
+ { name: 'Edge Functions', description: 'Deploying and running serverless functions' },
+ { name: 'Queues', description: 'Background jobs and message processing' },
+ { name: 'Realtime', description: 'Broadcast, presence, and database changes' },
+ { name: 'Supabase Platform', description: 'Project settings, billing, and infrastructure' },
+] as const
+
+export type Topic = (typeof TOPICS)[number]['name']
+
+// zod's `enum()` needs a literal non-empty tuple of strings, which `.map()`
+// can't preserve on its own — this cast is safe because TOPICS is `as const`.
+export const TOPIC_NAMES = TOPICS.map((topic) => topic.name) as [Topic, ...Topic[]]
+
+export function getTopicDescription(topic: Topic): string {
+ return TOPICS.find((t) => t.name === topic)!.description
+}
+
+// URL-safe slug for a topic, e.g. "Edge Functions" -> "edge-functions".
+export function topicToSlug(topic: Topic): string {
+ return topic.toLowerCase().replace(/\s+/g, '-')
+}
diff --git a/apps/kb/src/pages/topics/[topic].astro b/apps/kb/src/pages/topics/[topic].astro
new file mode 100644
index 00000000000..aa741118dc0
--- /dev/null
+++ b/apps/kb/src/pages/topics/[topic].astro
@@ -0,0 +1,43 @@
+---
+import { getCollection } from 'astro:content'
+
+import Layout from '../../layouts/Layout.astro'
+import { TOPICS, topicToSlug } from '../../lib/topics'
+
+export async function getStaticPaths() {
+ const guides = await getCollection('guides')
+
+ // One page per topic in TOPICS — not just topics a guide already uses —
+ // so every link on the "Topics" nav resolves instead of 404ing.
+ return TOPICS.map((topic) => ({
+ params: { topic: topicToSlug(topic.name) },
+ props: {
+ topic: topic.name,
+ description: topic.description,
+ guides: guides.filter((guide) => guide.data.topics?.includes(topic.name)),
+ },
+ }))
+}
+
+const { topic, description, guides } = Astro.props
+---
+
+
+
+
+
From 16046a0139c9d574c1f89ec5941664a39d35c705 Mon Sep 17 00:00:00 2001
From: Pedro Rodrigues <44656907+Rodriguespn@users.noreply.github.com>
Date: Mon, 7 Sep 2026 11:43:00 +0100
Subject: [PATCH 007/333] docs: add omp (oh-my-pi) to supported clients in MCP
and plugin guides (#50045)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## What this does
Adds **omp** (oh-my-pi) across the Supabase AI-tools docs.
- **Plugin docs** (`AgentPluginsPanel`) — omp client + Anthropic
marketplace install: `omp plugin marketplace add
anthropics/claude-plugins-official`, then `omp plugin install
supabase@claude-plugins-official`.
- **MCP docs** (`McpUrlBuilder`) — omp under "AI Agent CLI":
`.omp/mcp.json` / `~/.omp/agent/mcp.json` (JSON), `/mcp add` guided
setup, project vs user scope.
- **"Pick your agent" grid** — add the omp logo and tagline ("A coding
agent with the IDE wired in.").
No CLI command mapping entry — omp has no `omp mcp …` subcommand, so the
page documents file-based setup (`/mcp add` wizard or direct JSON edit).
Matches other file-configured clients like kiro.
## Testing
Verified against omp 18.1.11: written `.omp/mcp.json` parsed by runtime,
`/mcp list` shows server connected; `omp plugin marketplace add/install
supabase@claude-plugins-official` works; `omp plugin list` confirms
installed.
## Preview
### Agent Plugin page
### MCP page
### AI Tools main page
Closes AI-1184
## Summary by CodeRabbit
- **New Features**
- Added OMP as a supported AI coding agent across documentation and
integrations.
- Added OMP installation guidance, including marketplace setup, scope
options, session reloads, and authentication.
- Added support for configuring the Supabase MCP server through OMP.
- Added OMP branding, icon, tagline, repository, and documentation
links.
---
.../data/content-listings/ai-tools.data.ts | 2 ++
.../features/ui/AgentPluginsPanel.data.ts | 8 +++++
apps/docs/features/ui/AgentPluginsPanel.tsx | 32 +++++++++++++++++++
apps/docs/public/img/icons/agent-omp-icon.svg | 11 +++++++
.../src/McpUrlBuilder/assets/omp-icon.svg | 11 +++++++
.../src/McpUrlBuilder/clients.data.ts | 19 +++++++++++
.../McpUrlBuilder/clients.instructions.md.tsx | 26 +++++++++++++++
.../ui-patterns/src/McpUrlBuilder/types.ts | 14 ++++++++
.../src/McpUrlBuilder/utils/mcpIconAssets.ts | 2 ++
9 files changed, 125 insertions(+)
create mode 100644 apps/docs/public/img/icons/agent-omp-icon.svg
create mode 100644 packages/ui-patterns/src/McpUrlBuilder/assets/omp-icon.svg
diff --git a/apps/docs/data/content-listings/ai-tools.data.ts b/apps/docs/data/content-listings/ai-tools.data.ts
index 4b555dc87bc..6517e8a909e 100644
--- a/apps/docs/data/content-listings/ai-tools.data.ts
+++ b/apps/docs/data/content-listings/ai-tools.data.ts
@@ -19,6 +19,7 @@ const ICON_ASSETS: Record = {
'gemini-cli': { icon: '/docs/img/icons/agent-gemini-cli-icon', hasLightIcon: false },
'github-copilot': { icon: '/docs/img/icons/agent-copilot-icon', hasLightIcon: true },
kimi: { icon: '/docs/img/icons/agent-kimi-icon', hasLightIcon: true },
+ omp: { icon: '/docs/img/icons/agent-omp-icon', hasLightIcon: false },
vscode: { icon: '/docs/img/icons/agent-vscode-icon', hasLightIcon: false },
antigravity: { icon: '/docs/img/icons/agent-antigravity-icon', hasLightIcon: false },
windsurf: { icon: '/docs/img/icons/agent-devin-icon', hasLightIcon: true },
@@ -46,6 +47,7 @@ const TAGLINES: Record = {
goose: 'Your native open source AI agent — desktop app, CLI, and API.',
kimi: 'Engineered to drop into any dev workflow and get programming tasks done fast.',
kiro: 'Move beyond AI coding to agentic engineering.',
+ omp: 'A coding agent with the IDE wired in.',
opencode: 'The open source AI coding agent.',
vscode: 'The open source AI code editor — your home for multi-agent development.',
// Pre-acquisition tagline (Cognition/Devin acquired Windsurf in 2025) — see "Open questions".
diff --git a/apps/docs/features/ui/AgentPluginsPanel.data.ts b/apps/docs/features/ui/AgentPluginsPanel.data.ts
index 91902ae6412..883baae6939 100644
--- a/apps/docs/features/ui/AgentPluginsPanel.data.ts
+++ b/apps/docs/features/ui/AgentPluginsPanel.data.ts
@@ -63,6 +63,14 @@ export const PLUGIN_CLIENTS: PluginClient[] = [
repoUrl: 'https://github.com/supabase-community/supabase-plugin',
docsUrl: 'https://www.kimi.com/code/docs/en/kimi-code-cli/customization/plugins.html',
},
+ {
+ key: 'omp',
+ label: 'omp',
+ icon: 'omp',
+ repoUrl: 'https://github.com/supabase-community/supabase-plugin',
+ docsUrl: 'https://github.com/can1357/oh-my-pi/blob/main/docs/marketplace.md',
+ docsLinkText: 'View omp plugin docs',
+ },
{
key: 'vscode',
label: 'VS Code',
diff --git a/apps/docs/features/ui/AgentPluginsPanel.tsx b/apps/docs/features/ui/AgentPluginsPanel.tsx
index 7df6f067d13..bf509160047 100644
--- a/apps/docs/features/ui/AgentPluginsPanel.tsx
+++ b/apps/docs/features/ui/AgentPluginsPanel.tsx
@@ -169,6 +169,38 @@ function PluginInstructions({ client }: { client: PluginClient }) {
)
}
+ if (client.key === 'omp') {
+ return (
+
+
+ omp reads the Claude Code plugin format, so install the Supabase plugin from the{' '}
+
+ official Anthropic marketplace
+
+ :
+
+
+ Installs with --scope user by default, making it available across all your
+ projects. Use --scope project to install it for the current project only.
+
+
+ Inside a session, run /marketplace to browse plugins, then{' '}
+ /reload-plugins after installing to load the skills and MCP server.
+
+
+ )
+ }
if (client.key === 'vscode') {
return (
diff --git a/apps/docs/public/img/icons/agent-omp-icon.svg b/apps/docs/public/img/icons/agent-omp-icon.svg
new file mode 100644
index 00000000000..379eff88719
--- /dev/null
+++ b/apps/docs/public/img/icons/agent-omp-icon.svg
@@ -0,0 +1,11 @@
+
diff --git a/packages/ui-patterns/src/McpUrlBuilder/assets/omp-icon.svg b/packages/ui-patterns/src/McpUrlBuilder/assets/omp-icon.svg
new file mode 100644
index 00000000000..379eff88719
--- /dev/null
+++ b/packages/ui-patterns/src/McpUrlBuilder/assets/omp-icon.svg
@@ -0,0 +1,11 @@
+
diff --git a/packages/ui-patterns/src/McpUrlBuilder/clients.data.ts b/packages/ui-patterns/src/McpUrlBuilder/clients.data.ts
index c73510e5023..fe7c79f3dc4 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/clients.data.ts
+++ b/packages/ui-patterns/src/McpUrlBuilder/clients.data.ts
@@ -13,6 +13,7 @@ import type {
McpClientConfig,
McpClientDeepLinkOptions,
McpFeatureGroup,
+ OmpMcpConfig,
OpenCodeMcpConfig,
VSCodeMcpConfig,
WindsurfMcpConfig,
@@ -360,6 +361,23 @@ export const MCP_CLIENT_DATA: McpClientData[] = [
}
},
},
+ {
+ key: 'omp',
+ label: 'omp',
+ icon: 'omp',
+ configFile: '.omp/mcp.json',
+ externalDocsUrl: 'https://github.com/can1357/oh-my-pi/blob/main/docs/mcp-config.md',
+ transformConfig: (config): OmpMcpConfig => {
+ return {
+ mcpServers: {
+ supabase: {
+ type: 'http',
+ url: config.mcpServers.supabase.url,
+ },
+ },
+ }
+ },
+ },
{
key: 'kiro',
label: 'Kiro',
@@ -449,6 +467,7 @@ export const MCP_CLIENT_GROUPS = [
'opencode',
'factory',
'fx',
+ 'omp',
],
},
{
diff --git a/packages/ui-patterns/src/McpUrlBuilder/clients.instructions.md.tsx b/packages/ui-patterns/src/McpUrlBuilder/clients.instructions.md.tsx
index 77ac73995d7..a73704c4797 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/clients.instructions.md.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/clients.instructions.md.tsx
@@ -275,6 +275,32 @@ export const MCP_CLIENT_INSTRUCTIONS: Record = {
),
},
+ omp: {
+ primary: () => (
+ <>
+
+ Start
+
+ That path is project-scoped. To use the server in every project, add the same entry to{' '}
+
+
+ If a session is already open, pick up the change with
+
+ Confirm the server is connected with
+
+ ),
+ },
kiro: {
deepLinkDescription: (
diff --git a/packages/ui-patterns/src/McpUrlBuilder/types.ts b/packages/ui-patterns/src/McpUrlBuilder/types.ts
index 570d09de794..89daf506c3d 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/types.ts
+++ b/packages/ui-patterns/src/McpUrlBuilder/types.ts
@@ -214,6 +214,19 @@ export interface KimiMcpConfig extends McpClientBaseConfig {
}
}
}
+/**
+ * Configuration format for the omp CLI MCP client.
+ * omp keys servers under `mcpServers` and requires an explicit `type: "http"`:
+ * an entry with a `url` but no `type` is validated as stdio and rejected.
+ */
+export interface OmpMcpConfig extends McpClientBaseConfig {
+ mcpServers: {
+ supabase: {
+ type: 'http'
+ url: string
+ }
+ }
+}
// Union of all possible config types
export type McpClientConfig =
@@ -230,6 +243,7 @@ export type McpClientConfig =
| GrokMcpConfig
| KimiMcpConfig
| McpClientBaseConfig
+ | OmpMcpConfig
| OpenCodeMcpConfig
| OtherMcpConfig
| VSCodeMcpConfig
diff --git a/packages/ui-patterns/src/McpUrlBuilder/utils/mcpIconAssets.ts b/packages/ui-patterns/src/McpUrlBuilder/utils/mcpIconAssets.ts
index a5fe3f63eb6..6b7938c2665 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/utils/mcpIconAssets.ts
+++ b/packages/ui-patterns/src/McpUrlBuilder/utils/mcpIconAssets.ts
@@ -20,6 +20,7 @@ import grokIcon from '../assets/grok-icon.svg'
import kimiDarkIcon from '../assets/kimi-icon-dark.svg'
import kimiIcon from '../assets/kimi-icon.svg'
import kiroIcon from '../assets/kiro-icon.svg'
+import ompIcon from '../assets/omp-icon.svg'
import openaiDarkIcon from '../assets/openai-icon-dark.svg'
import openaiIcon from '../assets/openai-icon.svg'
import opencodeDarkIcon from '../assets/opencode-icon-dark.svg'
@@ -52,6 +53,7 @@ const MCP_CLIENT_ICON_ASSETS = {
grok: { light: grokIcon, dark: grokDarkIcon },
kimi: { light: kimiIcon, dark: kimiDarkIcon },
kiro: { light: kiroIcon, dark: kiroIcon },
+ omp: { light: ompIcon, dark: ompIcon },
openai: { light: openaiIcon, dark: openaiDarkIcon },
opencode: { light: opencodeIcon, dark: opencodeDarkIcon },
perplexity: { light: perplexityIcon, dark: perplexityDarkIcon },
From b0601f9ab723a7fd416bf178f30a1bd20d4d0d60 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore
Date: Mon, 7 Sep 2026 12:53:01 +0200
Subject: [PATCH 008/333] feat(storage): add object versioning feature flag and
feature preview (#49202)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
| # | Branch | Base |
| - | ------ | ---- |
| 1 | `feat/storage-versioning-private-alpha` ◀ | `master` |
| 2 | `feat/storage-versioning/002-bucket-form-fields` | 1 |
| 3 | `feat/storage-versioning/003-bucket-modals` | 2 |
| 4 | `feat/storage-versioning/004-object-versions-data` | 3 |
| 5 | `feat/storage-versioning/005-file-preview-versions` | 4 |
| 6 | `feat/storage-versioning/006-billing-storage-retention` | 5 |
### PR 01
Adding feature flag for versioning.
- `UI_PREVIEW_STORAGE_VERSIONING` local storage key, allowlisted
- Feature preview entry gated on
`useFlag('storageVersioningPrivateAlpha')`
- `useIsStorageVersioningEnabled()`, following the existing
`useIsSqlEditorManualSaveEnabled` shape
Note: will improve the feature preview with an image once we approach
release.
## Summary by CodeRabbit
- **New Features**
- Added a Storage Versioning feature preview in the dashboard.
- Preview access is controlled by feature flags and is disabled by
default.
- Added descriptive information about Storage Versioning and its Private
Alpha availability.
- Added support for remembering the Storage Versioning preview setting.
---------
Co-authored-by: Claude Sonnet 5
---
.../FeaturePreview/FeaturePreviewContext.tsx | 6 +++++
.../FeaturePreview/FeaturePreviewModal.tsx | 2 ++
.../StorageVersioningPreview.tsx | 23 +++++++++++++++++++
.../App/FeaturePreview/useFeaturePreviews.ts | 12 ++++++++++
packages/common/constants/local-storage.ts | 2 ++
5 files changed, 45 insertions(+)
create mode 100644 apps/studio/components/interfaces/App/FeaturePreview/StorageVersioningPreview.tsx
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
index 739b178761e..66de34d7abb 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
@@ -171,6 +171,12 @@ export const useIsExplorerEnabled = () => {
return isExplorerEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_EXPLORER]
}
+export const useIsStorageVersioningEnabled = () => {
+ const { flags } = useFeaturePreviewContext()
+ const isStorageVersioningEnabled = useFlag('storageVersioningPrivateAlpha')
+ return isStorageVersioningEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_STORAGE_VERSIONING]
+}
+
export const useFeaturePreviewModal = () => {
const featurePreviews = useFeaturePreviews()
const [featurePreviewModal, setFeaturePreviewModal] = useQueryState('featurePreviewModal')
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
index 794d865cd2f..bd8f5ae2a19 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
@@ -39,6 +39,7 @@ import { JitDbAccessPreview } from './JitDbAccessPreview'
import { PgDeltaDiffPreview } from './PgDeltaDiffPreview'
import { PlatformWebhooksPreview } from './PlatformWebhooksPreview'
import { SqlEditorManualSavePreview } from './SqlEditorManualSavePreview'
+import { StorageVersioningPreview } from './StorageVersioningPreview'
import { UnifiedLogsPreview } from './UnifiedLogsPreview'
import { FeaturePreview, useFeaturePreviews } from './useFeaturePreviews'
import { useBannerStack } from '@/components/ui/BannerStack/BannerStackProvider'
@@ -59,6 +60,7 @@ const FEATURE_PREVIEW_KEY_TO_CONTENT: {
[LOCAL_STORAGE_KEYS.UI_PREVIEW_MARKETPLACE]:
+ Keep previous copies of a file when it's overwritten or deleted, and set a lifecycle policy
+ that expires them automatically.
+
+
+ Enabling this preview will:
+
+ - Add object versioning and lifecycle policy settings to the bucket settings
+ - Show a version history for each file in the file preview panel
+ - Allow soft-deleting and restoring files
+ - Break down retained version storage on the organization usage page
+
+
+
+ Versioning is in Private Alpha and is off for every bucket by default until you
+ turn it on.
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts b/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts
index 5b3483ac31b..5c8e9d8e8ac 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts
+++ b/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts
@@ -36,6 +36,7 @@ export const useFeaturePreviews = (): FeaturePreview[] => {
const isMarketplaceEnabled = useFlag('marketplaceIntegrations')
const isDatabaseConnectionsEnabled = useFlag('topForPostgres')
const isExplorerEnabled = useFlag('explorer')
+ const isStorageVersioningEnabled = useFlag('storageVersioningPrivateAlpha')
const isSqlEditorManualSaveForced = useFlag('sqlEditorManualSaveForced')
@@ -150,6 +151,16 @@ export const useFeaturePreviews = (): FeaturePreview[] => {
getRoute: (ref?: string) => `/project/${ref}/observability/connections`,
bannerId: 'database-connections-banner',
},
+ {
+ key: LOCAL_STORAGE_KEYS.UI_PREVIEW_STORAGE_VERSIONING,
+ name: 'Storage versioning',
+ discussionsUrl: undefined,
+ isNew: true,
+ isPlatformOnly: true,
+ isDefaultOptIn: true,
+ enabled: isStorageVersioningEnabled,
+ getRoute: (ref?: string) => `/project/${ref}/storage/files`,
+ },
]
return previews.sort((a, b) => Number(b.isNew) - Number(a.isNew))
@@ -160,5 +171,6 @@ export const useFeaturePreviews = (): FeaturePreview[] => {
isMarketplaceEnabled,
isDatabaseConnectionsEnabled,
isExplorerEnabled,
+ isStorageVersioningEnabled,
])
}
diff --git a/packages/common/constants/local-storage.ts b/packages/common/constants/local-storage.ts
index f5041ea185c..abb6311eb66 100644
--- a/packages/common/constants/local-storage.ts
+++ b/packages/common/constants/local-storage.ts
@@ -29,6 +29,7 @@ export const LOCAL_STORAGE_KEYS = {
UI_PREVIEW_MARKETPLACE: 'supabase-ui-marketplace',
UI_PREVIEW_DATABASE_CONNECTIONS: 'preview-database-connections',
UI_PREVIEW_EXPLORER: 'preview-explorer',
+ UI_PREVIEW_STORAGE_VERSIONING: 'supabase-ui-storage-versioning',
AI_ASSISTANT_MCP_OPT_IN: 'ai-assistant-mcp-opt-in',
@@ -172,6 +173,7 @@ const LOCAL_STORAGE_KEYS_ALLOWLIST = [
LOCAL_STORAGE_KEYS.UI_PREVIEW_SQL_EDITOR_MANUAL_SAVE,
LOCAL_STORAGE_KEYS.SQL_EDITOR_MANUAL_SAVE_NOTICE_DISMISSED,
LOCAL_STORAGE_KEYS.UI_PREVIEW_MARKETPLACE,
+ LOCAL_STORAGE_KEYS.UI_PREVIEW_STORAGE_VERSIONING,
LOCAL_STORAGE_KEYS.LAST_SIGN_IN_METHOD,
LOCAL_STORAGE_KEYS.HIDE_PROMO_TOAST,
LOCAL_STORAGE_KEYS.BLOG_VIEW,
From ec1029dff03d2adda95045d2bf3102acb9f3db3e Mon Sep 17 00:00:00 2001
From: Alaister Young
Date: Mon, 7 Sep 2026 21:35:06 +0800
Subject: [PATCH 009/333] chore: migrate from clsx + tailwind-merge to
shadcn-ui/cn (#49938)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Migrates the repo off `clsx` + `tailwind-merge` to
[shadcn-ui/cn](https://github.com/shadcn-ui/cn). Every app and package
already gets `cn` from `packages/ui`, so the swap happens in that one
helper and flows through to Studio, docs, www, and the rest.
**Changed:**
- `packages/ui` `cn` helper now uses `createCn` from `cn/config`,
keeping the custom `card`/`content` spacing scale so `p-card` still
overrides `p-4`. It has an explicit signature and re-exports
`ClassValue`.
- The four www Launch Week files that imported the `ClassValue` type
from `clsx` now import it from `ui`.
- `blocks/vue` local `lib/utils.ts` re-exports `cn` from the package.
- Comments/README that referenced tailwind-merge.
**Removed:**
- Direct `clsx` and `tailwind-merge` deps from `ui`, `ui-patterns`,
`www`, and `blocks/vue`. `ui-patterns` and `www` declared them without
importing.
**Added:**
- `packages/ui/src/lib/utils/cn.test.ts` covering clsx-style joining,
conflict resolution, the custom spacing scale, and variant handling.
Not migrated: the standalone apps under `examples/`. They're outside the
workspace and mostly on Tailwind v3, which `cn` doesn't support.
Lockfile note: after merging master, the lockfile diff is only the
intended swap (`clsx` and `tailwind-merge` out, `cn@0.2.5` in).
`tailwind-merge` stays in the lockfile as a transitive dep of a
third-party package.
Release-age note: this sat in draft with a temporary
`minimumReleaseAgeExclude` entry for `cn` while `cn` was inside the
workspace's 3-day `minimumReleaseAge` window. That window has closed, so
the exclusion is gone and nothing bypasses the release-age gate.
## To test
- `pnpm install --frozen-lockfile` succeeds with no
`minimumReleaseAgeExclude` entry for `cn`.
- `pnpm --filter ui test` – new `cn.test.ts` passes, including
`cn('p-4', 'p-card')` → `p-card`.
- Typecheck passes for studio, ui, ui-patterns, vue-blocks. www
typecheck panics under tsgo on master already (pre-existing, unrelated);
it passes with the JS `tsc` binary.
- Spot-check Studio locally: class overrides still win in the usual
places (e.g. `CodeEditor` height, `Button` variants with a custom
`className`).
https://claude.ai/code/session_01MkAt16tsPRDTm9oB5Jr8Ub
## Summary by CodeRabbit
* **Improvements**
* Standardized Tailwind class merging across shared UI utilities while
preserving conditional classes, custom spacing classes, and variant
behavior.
* Updated related components and examples to use the standardized
class-merging utility.
* **Tests**
* Added coverage for conditional class handling, conflicting utility
resolution, custom spacing classes, and variant separation.
* **Documentation**
* Updated usage guidance to reflect the standardized Tailwind
class-merging approach.
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
---
.../ui/CodeEditor/CodeEditor.test.tsx | 2 +-
.../components/ui/CodeEditor/CodeEditor.tsx | 2 +-
.../12/Releases/data/lw12_build_stage.tsx | 2 +-
.../13/Releases/data/lw13_build_stage.tsx | 2 +-
.../14/Releases/data/lw14_build_stage.tsx | 2 +-
.../LaunchWeek/15/data/lw15_build_stage.tsx | 2 +-
apps/www/package.json | 1 -
blocks/vue/package.json | 3 +-
blocks/vue/registry/default/lib/utils.ts | 8 +----
packages/ui-patterns/package.json | 1 -
packages/ui/README.md | 2 +-
packages/ui/package.json | 3 +-
packages/ui/src/lib/utils/cn.test.ts | 26 ++++++++++++++++
packages/ui/src/lib/utils/cn.ts | 12 +++----
pnpm-lock.yaml | 31 ++++++++-----------
15 files changed, 54 insertions(+), 45 deletions(-)
create mode 100644 packages/ui/src/lib/utils/cn.test.ts
diff --git a/apps/studio/components/ui/CodeEditor/CodeEditor.test.tsx b/apps/studio/components/ui/CodeEditor/CodeEditor.test.tsx
index d4f6d10fea7..a6e5fcc0bf6 100644
--- a/apps/studio/components/ui/CodeEditor/CodeEditor.test.tsx
+++ b/apps/studio/components/ui/CodeEditor/CodeEditor.test.tsx
@@ -9,7 +9,7 @@ import { render } from '@/tests/helpers'
* win — otherwise the editor collapses to a single line.
*
* This regressed once already: #47339 appended the default as `cn(className, 'monaco-editor',
- * 'h-full')`, and tailwind-merge keeps the *last* conflicting height utility, so the trailing
+ * 'h-full')`, and `cn` keeps the *last* conflicting height utility, so the trailing
* `h-full` clobbered caller heights. #47350 fixed it by passing `className` last. These tests
* lock that ordering in.
*
diff --git a/apps/studio/components/ui/CodeEditor/CodeEditor.tsx b/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
index cf36124858a..ad3e522f2c9 100644
--- a/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
+++ b/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
@@ -260,7 +260,7 @@ export const CodeEditor = ({
// injects a second copy of Monaco's CSS onto the shared instance). Without an explicit
// height, an absolutely-positioned wrapper collapses to 0 and Monaco lays out at ~5px.
// Order matters: `h-full` is a default, so a caller-supplied height in `className`
- // (e.g. `h-96`) wins via tailwind-merge instead of being clobbered.
+ // (e.g. `h-96`) wins via `cn` class merging instead of being clobbered.
className={cn('monaco-editor', 'h-full', className)}
wrapperProps={{ className: wrapperClassName }}
value={value ?? undefined}
diff --git a/apps/www/components/LaunchWeek/12/Releases/data/lw12_build_stage.tsx b/apps/www/components/LaunchWeek/12/Releases/data/lw12_build_stage.tsx
index 83a20c6f45d..13b763cc696 100644
--- a/apps/www/components/LaunchWeek/12/Releases/data/lw12_build_stage.tsx
+++ b/apps/www/components/LaunchWeek/12/Releases/data/lw12_build_stage.tsx
@@ -1,7 +1,7 @@
// see apps/www/components/LaunchWeek/X/Releases/data/lwx_advent_days.tsx for reference
-import { type ClassValue } from 'clsx'
import { ReactNode } from 'react'
+import type { ClassValue } from 'ui'
export interface AdventDay {
icon?: ReactNode // use svg jsx with 34x34px viewport
diff --git a/apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx b/apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx
index 5b3d6e4313d..dcf210466af 100644
--- a/apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx
+++ b/apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx
@@ -1,8 +1,8 @@
// see apps/www/components/LaunchWeek/X/Releases/data/lwx_advent_days.tsx for reference
-import { type ClassValue } from 'clsx'
import { BookCopy, Flag, GitBranch, HardDrive } from 'lucide-react'
import { ReactNode } from 'react'
+import type { ClassValue } from 'ui'
export interface AdventDay {
icon?: ReactNode // use svg jsx with 34x34px viewport
diff --git a/apps/www/components/LaunchWeek/14/Releases/data/lw14_build_stage.tsx b/apps/www/components/LaunchWeek/14/Releases/data/lw14_build_stage.tsx
index 50435fa5c6f..59ab5636e6b 100644
--- a/apps/www/components/LaunchWeek/14/Releases/data/lw14_build_stage.tsx
+++ b/apps/www/components/LaunchWeek/14/Releases/data/lw14_build_stage.tsx
@@ -1,9 +1,9 @@
// see apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx for reference
-import { type ClassValue } from 'clsx'
import { AppWindow, Database, Globe } from 'lucide-react'
import { ReactNode } from 'react'
import { PRODUCT_MODULES } from 'shared-data/products'
+import type { ClassValue } from 'ui'
export interface AdventDay {
icon?: ReactNode // use svg jsx with 34x34px viewport
diff --git a/apps/www/components/LaunchWeek/15/data/lw15_build_stage.tsx b/apps/www/components/LaunchWeek/15/data/lw15_build_stage.tsx
index ced89da85d5..39d6d2406fa 100644
--- a/apps/www/components/LaunchWeek/15/data/lw15_build_stage.tsx
+++ b/apps/www/components/LaunchWeek/15/data/lw15_build_stage.tsx
@@ -1,5 +1,5 @@
-import type { ClassValue } from 'clsx'
import type { ReactNode } from 'react'
+import type { ClassValue } from 'ui'
export interface BuildDay {
icon?: ReactNode // use svg jsx with 34x34px viewport
diff --git a/apps/www/package.json b/apps/www/package.json
index 2dbec8f9552..bdc93fa0681 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -44,7 +44,6 @@
"animejs": "^4.0.2",
"class-variance-authority": "^0.7.1",
"classnames": "^2.3.1",
- "clsx": "^2.1.1",
"cobe": "^0.6.5",
"common": "workspace:*",
"common-tags": "^1.8.2",
diff --git a/blocks/vue/package.json b/blocks/vue/package.json
index 4ca3008fd4c..fa47f83d062 100644
--- a/blocks/vue/package.json
+++ b/blocks/vue/package.json
@@ -15,11 +15,10 @@
"@supabase/supabase-js": "catalog:",
"@vueuse/core": "^14.1.0",
"class-variance-authority": "^0.7.1",
- "clsx": "^2.1.1",
+ "cn": "^0.2.4",
"h3": "^1.15.10",
"lucide-vue-next": "^0.562.0",
"nuxt": "^4.4.6",
- "tailwind-merge": "^3.5.0",
"vue": "^3.5.35",
"vue-router": "^4.5.1"
},
diff --git a/blocks/vue/registry/default/lib/utils.ts b/blocks/vue/registry/default/lib/utils.ts
index abba253f04c..ae9e5a7c376 100644
--- a/blocks/vue/registry/default/lib/utils.ts
+++ b/blocks/vue/registry/default/lib/utils.ts
@@ -1,7 +1 @@
-import type { ClassValue } from 'clsx'
-import { clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs))
-}
+export { cn } from 'cn'
diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json
index 9acb4eed9a0..dd40894f18c 100644
--- a/packages/ui-patterns/package.json
+++ b/packages/ui-patterns/package.json
@@ -774,7 +774,6 @@
"@supabase/supabase-js": "catalog:",
"@tanstack/react-table": "catalog:",
"class-variance-authority": "^0.7.1",
- "clsx": "^2.1.1",
"cmdk": "^1.1.1",
"common": "workspace:*",
"common-tags": "^1.8.2",
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 02a7da1ac4a..999e7ad9dd2 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -16,7 +16,7 @@ Some of the components have the `_Shadcn_` suffix. These components should be pr
```tsx
// deep object merge (used for themes)
-import { clipboard, cn, mergeDeep } from 'ui' // clsx + tailwind-merge
+import { clipboard, cn, mergeDeep } from 'ui' // Tailwind class merging (shadcn-ui/cn)
// copy-to-clipboard helper
```
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f87bfb5a4a5..676ce5ee370 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,7 +18,7 @@
"@tailwindcss/forms": "^0.5.11",
"@tailwindcss/typography": "^0.5.19",
"class-variance-authority": "^0.7.1",
- "clsx": "^2.1.1",
+ "cn": "^0.2.4",
"cmdk": "^1.1.1",
"color": "^4.2.3",
"date-fns": "^2.30.0",
@@ -38,7 +38,6 @@
"react-resizable-panels": "^4.6.5",
"recharts": "catalog:",
"sonner": "^1.5.0",
- "tailwind-merge": "^3.5.0",
"tailwindcss": "catalog:",
"vaul": "^1.1.2"
},
diff --git a/packages/ui/src/lib/utils/cn.test.ts b/packages/ui/src/lib/utils/cn.test.ts
new file mode 100644
index 00000000000..eb625823025
--- /dev/null
+++ b/packages/ui/src/lib/utils/cn.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+
+import { cn } from './cn'
+
+describe('cn', () => {
+ it('joins conditional inputs like clsx', () => {
+ expect(cn('a', ['b', { c: true, d: false }], undefined, null, false && 'e')).toBe('a b c')
+ })
+
+ it('resolves conflicting Tailwind utilities, last one wins', () => {
+ expect(cn('p-2 text-foreground', 'p-4', 'text-foreground-light')).toBe(
+ 'p-4 text-foreground-light'
+ )
+ expect(cn('h-full', 'h-96')).toBe('h-96')
+ })
+
+ it('treats the custom card/content spacing scale as spacing utilities', () => {
+ expect(cn('p-4', 'p-card')).toBe('p-card')
+ expect(cn('px-content', 'px-6')).toBe('px-6')
+ expect(cn('gap-2', 'gap-card')).toBe('gap-card')
+ })
+
+ it('keeps variants separate from base utilities', () => {
+ expect(cn('p-2 hover:p-4', 'md:p-6')).toBe('p-2 hover:p-4 md:p-6')
+ })
+})
diff --git a/packages/ui/src/lib/utils/cn.ts b/packages/ui/src/lib/utils/cn.ts
index a2a546b06c5..bab7d6b4646 100644
--- a/packages/ui/src/lib/utils/cn.ts
+++ b/packages/ui/src/lib/utils/cn.ts
@@ -1,14 +1,12 @@
-import { ClassValue, clsx } from 'clsx'
-import { extendTailwindMerge } from 'tailwind-merge'
+import type { ClassValue } from 'cn'
+import { createCn } from 'cn/config'
-const twMerge = extendTailwindMerge({
+export type { ClassValue } from 'cn'
+
+export const cn: (...inputs: ClassValue[]) => string = createCn({
extend: {
theme: {
spacing: ['card', 'content'],
},
},
})
-
-export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs))
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5176ef80536..619b39d6aa7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1787,9 +1787,6 @@ importers:
classnames:
specifier: ^2.3.1
version: 2.3.2
- clsx:
- specifier: ^2.1.1
- version: 2.1.1
cobe:
specifier: ^0.6.5
version: 0.6.5
@@ -2058,9 +2055,9 @@ importers:
class-variance-authority:
specifier: ^0.7.1
version: 0.7.1
- clsx:
- specifier: ^2.1.1
- version: 2.1.1
+ cn:
+ specifier: ^0.2.4
+ version: 0.2.5
h3:
specifier: 1.15.11
version: 1.15.11
@@ -2070,9 +2067,6 @@ importers:
nuxt:
specifier: ^4.4.6
version: 4.5.2(@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.29.7(supports-color@8.1.1)))(@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.7(supports-color@8.1.1)))(@electric-sql/pglite@0.4.5)(@oxc-project/types@0.143.0)(@parcel/watcher@2.5.6)(@types/node@22.13.14)(@vue/compiler-sfc@3.5.41)(aws4fetch@1.0.20)(cac@6.7.14)(commander@14.0.1)(db0@0.3.4(@electric-sql/pglite@0.4.5))(encoding@0.1.13)(esbuild@0.28.1)(eslint@9.37.0(jiti@2.7.0)(supports-color@8.1.1))(ioredis@5.10.1(supports-color@8.1.1))(lightningcss@1.33.0)(magicast@0.5.4)(oxc-parser@0.143.0)(rolldown@1.2.3)(rollup-plugin-visualizer@7.0.1(rolldown@1.2.3)(rollup@4.60.3))(rollup@4.60.3)(sass@1.77.4)(supports-color@8.1.1)(terser@5.48.0)(tsx@4.22.4)(typescript@6.0.2)(vite@7.3.5(@types/node@22.13.14)(jiti@2.7.0)(lightningcss@1.33.0)(sass@1.77.4)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0))(webpack@5.105.4(esbuild@0.28.1))(yaml@2.9.0)
- tailwind-merge:
- specifier: ^3.5.0
- version: 3.5.0
vue:
specifier: ^3.5.35
version: 3.5.35(typescript@6.0.2)
@@ -2619,12 +2613,12 @@ importers:
class-variance-authority:
specifier: ^0.7.1
version: 0.7.1
- clsx:
- specifier: ^2.1.1
- version: 2.1.1
cmdk:
specifier: ^1.1.1
version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+ cn:
+ specifier: ^0.2.4
+ version: 0.2.5
color:
specifier: ^4.2.3
version: 4.2.3
@@ -2679,9 +2673,6 @@ importers:
sonner:
specifier: ^1.5.0
version: 1.5.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
- tailwind-merge:
- specifier: ^3.5.0
- version: 3.5.0
tailwindcss:
specifier: 'catalog:'
version: 4.2.4
@@ -2761,9 +2752,6 @@ importers:
class-variance-authority:
specifier: ^0.7.1
version: 0.7.1
- clsx:
- specifier: ^2.1.1
- version: 2.1.1
cmdk:
specifier: ^1.1.1
version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -10388,6 +10376,11 @@ packages:
react: ^18 || ^19 || ^19.0.0-rc
react-dom: ^18 || ^19 || ^19.0.0-rc
+ cn@0.2.5:
+ resolution: {integrity: sha512-OCjZtMeQfXbI4Es1+EIjkd77gvWzaE689gD8KhfexlqjClC06qR1MQBR+Z35ZMSPNEBWyHiItW1Soy0UvwNv9w==}
+ engines: {node: '>=20'}
+ hasBin: true
+
cobe@0.6.5:
resolution: {integrity: sha512-MA8bu81EFY6JjQpj+FovEuhyJ25khx2Q7Lh+ot/UkCJe5yKyDgzdc6u2lGZIOmsZTXK6Itg1i4lQZIJZbPWnAg==}
@@ -27335,6 +27328,8 @@ snapshots:
- '@types/react'
- '@types/react-dom'
+ cn@0.2.5: {}
+
cobe@0.6.5:
dependencies:
phenomenon: 1.6.0
From be030229bf849c9fcfc0f671871f3f36b7232039 Mon Sep 17 00:00:00 2001
From: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Date: Mon, 7 Sep 2026 15:53:36 +0200
Subject: [PATCH 010/333] feat(studio): add workers to unified logs FE-4281
(#49682)
## Problem
Unified Logs does not expose Workers logs, so users cannot search
Workers ingress, runtime, or build events alongside other services.
## Fix
Add a Workers log type that classifies all three Workers OTEL streams.
Gate the option and any persisted Workers filters with the existing
Workers feature flag.
## How to test
- Enable the Workers feature flag and open Unified Logs.
- Select Workers from the Log Type filter.
- Expected result: Unified Logs shows ingress, runtime, and build events
with the Workers icon.
- Disable the Workers feature flag and load a URL containing
`log_type:eq:workers`.
- Expected result: the Workers option and filter are removed, and
Workers logs are not queried.
- Run `./node_modules/.bin/vitest --run
components/interfaces/UnifiedLogs/UnifiedLogs.queries.test.ts
components/interfaces/UnifiedLogs/UnifiedLogs.utils.test.ts
data/workers/worker-logs-query.test.ts` from `apps/studio`.
## Summary by CodeRabbit
* **New Features**
* Added Workers as a selectable log type in Unified Logs.
* Unified Logs now combines worker ingress, guest, and API streams under
the Workers category.
* Added a dedicated Workers icon and worker log filtering.
* **Improvements**
* Worker filters and URL parameters respect feature availability.
* Worker details show relevant metadata while omitting unavailable HTTP
fields.
* Improved handling of worker log levels, statuses, and raw data.
* Added stronger validation for unified log data.
* **Tests**
* Added coverage for worker routing, filtering, feature visibility,
parsing, and metadata redaction.
---
.../components/shared/DetailRow.tsx | 2 +-
.../UnifiedLogs/ServiceFlowPanel.test.ts | 27 +++
.../UnifiedLogs/ServiceFlowPanel.tsx | 26 ++-
.../UnifiedLogs/UnifiedLogs.constants.tsx | 7 +-
.../UnifiedLogs/UnifiedLogs.hooks.test.tsx | 40 +++++
.../UnifiedLogs/UnifiedLogs.hooks.ts | 21 +++
.../UnifiedLogs/UnifiedLogs.queries.test.ts | 44 +++++
.../UnifiedLogs/UnifiedLogs.queries.ts | 40 +++--
.../UnifiedLogs/UnifiedLogs.schema.ts | 11 +-
.../interfaces/UnifiedLogs/UnifiedLogs.tsx | 90 ++++++----
.../UnifiedLogs/UnifiedLogs.utils.test.ts | 152 ++++++++++++++++-
.../UnifiedLogs/UnifiedLogs.utils.ts | 87 ++++++++--
.../UnifiedLogs/components/Columns.tsx | 10 +-
.../UnifiedLogs/components/LogTypeIcon.tsx | 9 +-
apps/studio/data/logs/get-unified-logs.ts | 31 +---
.../data/logs/unified-logs-infinite-query.ts | 33 +---
.../data/logs/unified-logs.utils.test.ts | 156 ++++++++++++++++--
apps/studio/data/logs/unified-logs.utils.ts | 68 +++++++-
apps/studio/data/workers/worker-logs-query.ts | 7 +-
apps/studio/lib/constants/workers.ts | 6 +
packages/common/telemetry-constants.ts | 1 +
21 files changed, 695 insertions(+), 173 deletions(-)
create mode 100644 apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.test.ts
create mode 100644 apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.hooks.test.tsx
diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/DetailRow.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/DetailRow.tsx
index 1d463bc161c..92051cbf998 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/DetailRow.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/DetailRow.tsx
@@ -52,7 +52,7 @@ export const DetailRow = ({
const valueEl = isLoading ? (
= {
+export const LOG_TYPE_TO_SOURCE: Record, string> = {
edge: 'edge_logs',
postgrest: 'postgrest_logs',
storage: 'storage_logs',
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.hooks.test.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.hooks.test.tsx
new file mode 100644
index 00000000000..cff48cae578
--- /dev/null
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.hooks.test.tsx
@@ -0,0 +1,40 @@
+import { act, renderHook } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { useFilterSearchSync } from './UnifiedLogs.hooks'
+
+describe('useFilterSearchSync', () => {
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ it('defers platform filter synchronization until feature flags load', () => {
+ vi.useFakeTimers()
+ const applyFilterSearch = vi.fn()
+ const workersFilter = [{ id: 'log_type', value: ['workers'] }]
+ const { rerender } = renderHook(
+ ({ enabled }) =>
+ useFilterSearchSync({ applyFilterSearch, columnFilters: workersFilter, enabled }),
+ { initialProps: { enabled: false } }
+ )
+
+ act(() => vi.advanceTimersByTime(1_000))
+ expect(applyFilterSearch).not.toHaveBeenCalled()
+
+ rerender({ enabled: true })
+ act(() => vi.advanceTimersByTime(250))
+
+ expect(applyFilterSearch).toHaveBeenCalledOnce()
+ })
+
+ it('synchronizes self-hosted filters without waiting for feature flags', () => {
+ vi.useFakeTimers()
+ const applyFilterSearch = vi.fn()
+
+ renderHook(() => useFilterSearchSync({ applyFilterSearch, columnFilters: [], enabled: true }))
+
+ act(() => vi.advanceTimersByTime(250))
+
+ expect(applyFilterSearch).toHaveBeenCalledOnce()
+ })
+})
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.hooks.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.hooks.ts
index af67d64f4f0..5828d552d6a 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.hooks.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.hooks.ts
@@ -1,3 +1,5 @@
+import type { ColumnFiltersState } from '@tanstack/react-table'
+import { useDebounce } from 'common'
import { useQueryState } from 'nuqs'
import { useEffect, useMemo, useRef } from 'react'
@@ -5,6 +7,25 @@ import { SEARCH_PARAMS_PARSER } from './UnifiedLogs.constants'
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useShortcut } from '@/state/shortcuts/useShortcut'
+export const useFilterSearchSync = ({
+ applyFilterSearch,
+ columnFilters,
+ enabled,
+}: {
+ applyFilterSearch: () => void
+ columnFilters: ColumnFiltersState
+ enabled: boolean
+}) => {
+ const debouncedApplyFilterSearch = useDebounce(applyFilterSearch, 250)
+
+ useEffect(() => {
+ if (!enabled) return
+
+ debouncedApplyFilterSearch()
+ return () => debouncedApplyFilterSearch.cancel()
+ }, [columnFilters, debouncedApplyFilterSearch, enabled])
+}
+
export const useResetFocus = () => {
useShortcut(SHORTCUT_IDS.UNIFIED_LOGS_RESET_FOCUS, () => {
// FIXME: some dedicated div[tabindex="0"] do not auto-unblur (e.g. the DataTableFilterResetButton)
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.test.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.test.ts
index a9b62e271bd..c593da987f4 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.test.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.test.ts
@@ -46,6 +46,41 @@ describe('UnifiedLogs.queries (OTEL flat)', () => {
expect(where).not.toContain(`log_attributes['request.path'] LIKE '%/storage/%'`)
})
+ it('routes the `workers` log type to every worker OTEL stream', () => {
+ const sql = getUnifiedLogsQuery(withFilters('log_type:eq:workers'))
+ const where = sql.split(/\bWHERE\b/)[1] ?? ''
+ expect(where).toContain(
+ `log_attributes['source'] IN ('worker_ingress_logs','worker_guest_logs','worker_api_logs')`
+ )
+ expect(where).not.toContain(`source = 'workers'`)
+ })
+
+ it('classifies every worker OTEL stream as workers in the projected log type', () => {
+ const sql = getUnifiedLogsQuery(baseSearch)
+ expect(sql).toContain(
+ `WHEN log_attributes['source'] IN ('worker_ingress_logs','worker_guest_logs','worker_api_logs') THEN 'workers'`
+ )
+ })
+
+ it('excludes every worker OTEL stream when the workers log type is negated', () => {
+ const sql = getUnifiedLogsQuery(withFilters('log_type:neq:workers'))
+ const where = sql.split(/\bWHERE\b/)[1] ?? ''
+ expect(where).toContain(
+ `NOT (log_attributes['source'] IN ('worker_ingress_logs','worker_guest_logs','worker_api_logs'))`
+ )
+ })
+
+ it('projects only Workers fields that exist on worker logs', () => {
+ const sql = getUnifiedLogsQuery(withFilters('log_type:eq:workers'))
+ const workerCondition =
+ "log_attributes['source'] IN ('worker_ingress_logs','worker_guest_logs','worker_api_logs')"
+
+ expect(sql).toContain(`WHEN ${workerCondition} THEN null`)
+ expect(sql).toContain(`if(${workerCondition}, null, log_attributes['request.method'])`)
+ expect(sql).toContain(`if(${workerCondition}, null, log_attributes['request.path'])`)
+ expect(sql).toContain(`if(${workerCondition}, log_attributes, map()) AS metadata`)
+ })
+
it('escapes single quotes in filter values to prevent SQL injection', () => {
const sql = getUnifiedLogsQuery(
withFilters(`method:eq:G'ET`, `pathname:eq:/customers'; DROP TABLE logs --`)
@@ -262,6 +297,15 @@ describe('UnifiedLogs.queries (OTEL flat)', () => {
`if(source = 'auth_logs', log_attributes['status'], log_attributes['response.status_code'])`
)
})
+
+ it('does not classify Workers rows into a severity bucket', () => {
+ const sql = getLogsChartQuery(withFilters('log_type:eq:workers'))
+ const workerCondition =
+ "log_attributes['source'] IN ('worker_ingress_logs','worker_guest_logs','worker_api_logs')"
+
+ expect(sql).toContain(`WHEN ${workerCondition} THEN null`)
+ expect(sql).not.toContain(`WHEN ${workerCondition} THEN 'success'`)
+ })
})
describe('getFacetCountQuery', () => {
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.ts
index 619fd33ceef..e9f3ecba3e6 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.ts
@@ -13,6 +13,7 @@ import {
safeSql,
type SafeLogSqlFragment,
} from '@/data/logs/safe-analytics-sql'
+import { WORKER_LOG_SOURCES } from '@/lib/constants/workers'
// Operator fragments for SQL emission. `safeSql` rejects plain strings, so we
// pre-brand the keywords we want to switch between.
@@ -54,12 +55,21 @@ const HTTP_STATUS_EXPR: SafeLogSqlFragment = safeSql`if(source = 'auth_logs', lo
* logs from postgREST / storage-api and are intentionally not part of unified
* logs; the UI surfaces gateway HTTP traffic for those buckets.
*/
-const LOG_TYPE_CONDITION: Record = Object.fromEntries(
- Object.entries(LOG_TYPE_TO_SOURCE).map(([type, source]) => [
- type,
- safeSql`source = ${lit(source)}`,
- ])
-)
+const WORKER_LOG_SOURCE_VALUES = Object.values(WORKER_LOG_SOURCES)
+const WORKER_LOG_SOURCE_CONDITION = safeSql`log_attributes['source'] IN (${joinSqlFragments(
+ WORKER_LOG_SOURCE_VALUES.map((source) => lit(source)),
+ ','
+)})`
+
+const LOG_TYPE_CONDITION: Record = {
+ ...Object.fromEntries(
+ Object.entries(LOG_TYPE_TO_SOURCE).map(([type, source]) => [
+ type,
+ safeSql`source = ${lit(source)}`,
+ ])
+ ),
+ workers: WORKER_LOG_SOURCE_CONDITION,
+}
// Derived `log_type` column for SELECT / GROUP BY / countIf use.
// WHEN source = 'edge_logs' AND ${ATTR.path} LIKE '%/rest/%' THEN 'postgrest'
@@ -75,6 +85,7 @@ const LOG_TYPE_EXPR: SafeLogSqlFragment = safeSql`CASE
WHEN source = 'supavisor_logs' THEN 'supavisor'
WHEN source = 'pgbouncer_logs' THEN 'pgbouncer'
WHEN source = 'multigres_logs' THEN 'multigres'
+ WHEN ${WORKER_LOG_SOURCE_CONDITION} THEN 'workers'
ELSE source
END`
@@ -82,10 +93,15 @@ const LOG_TYPE_EXPR: SafeLogSqlFragment = safeSql`CASE
// auth-service `status` attribute for auth rows, and the Postgres
// `parsed.sql_state_code` (e.g. `42P01`) for postgres rows.
const STATUS_EXPR: SafeLogSqlFragment = safeSql`CASE
+ WHEN ${WORKER_LOG_SOURCE_CONDITION} THEN null
WHEN source = 'postgres_logs' THEN toString(log_attributes['parsed.sql_state_code'])
ELSE toString((${HTTP_STATUS_EXPR}))
END`
+const METHOD_EXPR: SafeLogSqlFragment = safeSql`if(${WORKER_LOG_SOURCE_CONDITION}, null, ${ATTR.method})`
+const PATHNAME_EXPR: SafeLogSqlFragment = safeSql`if(${WORKER_LOG_SOURCE_CONDITION}, null, ${ATTR.path})`
+const METADATA_EXPR: SafeLogSqlFragment = safeSql`if(${WORKER_LOG_SOURCE_CONDITION}, log_attributes, map())`
+
// SQL expression for derived `level`. Used inline (not as alias reference)
// because the OTEL endpoint can't resolve aliases inside countIf when the
// alias is not in GROUP BY.
@@ -95,6 +111,7 @@ const STATUS_EXPR: SafeLogSqlFragment = safeSql`CASE
// success/warning/error by status. Postgres-style severity is the
// fallback for rows without a status code.
const LEVEL_EXPR: SafeLogSqlFragment = safeSql`CASE
+ WHEN ${WORKER_LOG_SOURCE_CONDITION} THEN null
WHEN (${HTTP_STATUS_EXPR}) != '' AND toInt32OrZero((${HTTP_STATUS_EXPR})) >= 500 THEN 'error'
WHEN (${HTTP_STATUS_EXPR}) != '' AND toInt32OrZero((${HTTP_STATUS_EXPR})) BETWEEN 400 AND 499 THEN 'warning'
WHEN (${HTTP_STATUS_EXPR}) != '' AND toInt32OrZero((${HTTP_STATUS_EXPR})) BETWEEN 200 AND 299 THEN 'success'
@@ -262,10 +279,11 @@ const ROW_PROJECTION: SafeLogSqlFragment = safeSql`
${LOG_TYPE_EXPR} AS log_type,
${STATUS_EXPR} AS status,
${LEVEL_EXPR} AS level,
- ${ATTR.path} AS pathname,
+ ${PATHNAME_EXPR} AS pathname,
event_message,
- ${ATTR.method} AS method,
+ ${METHOD_EXPR} AS method,
${AUTH_USER_EXPR} AS auth_user,
+ ${METADATA_EXPR} AS metadata,
null AS log_count,
null AS logs
`
@@ -446,11 +464,11 @@ export const getFacetCountQuery = ({
: facet === 'level'
? LEVEL_EXPR
: facet === 'method'
- ? ATTR.method
+ ? METHOD_EXPR
: facet === 'status'
? STATUS_EXPR
: facet === 'pathname'
- ? ATTR.path
+ ? PATHNAME_EXPR
: safeSql`log_attributes[${lit(facet)}]`
const conditions: SafeLogSqlFragment[] = [
@@ -488,7 +506,7 @@ export const getLogsCountQuery = (search: QuerySearchParamsType): SafeLogSqlFrag
total: safeSql`'all'`,
log_type: LOG_TYPE_EXPR,
level: LEVEL_EXPR,
- method: ATTR.method,
+ method: METHOD_EXPR,
status: STATUS_EXPR,
}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.schema.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.schema.ts
index 53ea85afe0e..b5726f6e7e5 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.schema.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.schema.ts
@@ -10,16 +10,17 @@ import {
export const columnSchema = z.object({
id: z.string(),
log_type: z.enum(LOG_TYPES),
- method: z.enum(METHODS),
- pathname: z.string(),
- level: z.enum(LEVELS),
- status: z.number(),
+ method: z.enum(METHODS).nullable(),
+ pathname: z.string().nullable(),
+ level: z.enum(LEVELS).nullable(),
+ status: z.number().nullable(),
date: z.date(),
timestamp: z.number(),
event_message: z.string().optional(),
log_count: z.number().optional(), // used to count function logs for a given execution_id
logs: z.array(z.any()).optional(), // array of function logs
- auth_user: z.string().optional(),
+ auth_user: z.string().nullable().optional(),
+ metadata: z.record(z.string(), z.unknown()).nullable().optional(),
})
export type ColumnSchema = z.infer
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
index d9f4ed0f001..d39a55acd5c 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
@@ -13,7 +13,7 @@ import {
useReactTable,
VisibilityState,
} from '@tanstack/react-table'
-import { LOCAL_STORAGE_KEYS, useDebounce, useParams } from 'common'
+import { IS_PLATFORM, LOCAL_STORAGE_KEYS, useFeatureFlags, useFlag, useParams } from 'common'
import { Loader2, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
import { useQueryStates } from 'nuqs'
import { useEffect, useMemo, useRef, useState } from 'react'
@@ -42,14 +42,16 @@ import {
buildFilterSearchUpdate,
parseLogsFilterUrlParams,
} from './UnifiedLogs.filters'
-import { useLiveMode, useResetFocus } from './UnifiedLogs.hooks'
+import { useFilterSearchSync, useLiveMode, useResetFocus } from './UnifiedLogs.hooks'
import { isUserFilterUnreachable } from './UnifiedLogs.queries'
import { ColumnSchema } from './UnifiedLogs.schema'
import { QuerySearchParamsType } from './UnifiedLogs.types'
import {
- gateMultigresLogType,
+ gateLogTypeFilters,
+ gateLogTypeOptions,
getFacetedUniqueValues,
getLevelRowClassName,
+ getWorkersLogsAvailability,
} from './UnifiedLogs.utils'
import { LEVELS } from '@/components/ui/DataTable/DataTable.constants'
import { Option } from '@/components/ui/DataTable/DataTable.types'
@@ -93,10 +95,25 @@ export const UnifiedLogs = () => {
const { ref: projectRef } = useParams()
const track = useTrack()
const [search, setSearch] = useQueryStates(SEARCH_PARAMS_PARSER)
+ const showMultigresLogs = useShowMultigresLogs()
+ const { hasLoaded: flagsLoaded } = useFeatureFlags()
+ const workersEnabled = !!useFlag('workers')
+ const workersAvailability = getWorkersLogsAvailability({
+ isPlatform: IS_PLATFORM,
+ flagsLoaded,
+ workersEnabled,
+ })
+ const visibleSearchFilters = gateLogTypeFilters(search.filter, {
+ multigres: showMultigresLogs,
+ workers: workersAvailability.preserveWorkersFilter,
+ })
const defaultColumnSorting = search.sort ? [search.sort] : []
const defaultColumnVisibility = { uuid: false }
- const defaultColumnFilters = buildDefaultColumnFilters(search)
+ const defaultColumnFilters = buildDefaultColumnFilters({
+ ...search,
+ filter: visibleSearchFilters,
+ })
const [topBarHeight, setTopBarHeight] = useState(0)
const topBarRef = useRef(null)
@@ -112,8 +129,6 @@ export const UnifiedLogs = () => {
return () => observer.unobserve(topBar)
}, [])
- const showMultigresLogs = useShowMultigresLogs()
-
const [sorting, setSorting] = useState(defaultColumnSorting)
const [columnFilters, setColumnFilters] = useState(defaultColumnFilters)
const [rowSelection, setRowSelection] = useState({})
@@ -135,19 +150,26 @@ export const UnifiedLogs = () => {
// Create a stable query key object by removing nulls/undefined, id, and live
// Mainly to prevent the react queries from unnecessarily re-fetching
- const searchParameters = useMemo(
- () =>
- Object.entries(search).reduce(
- (acc, [key, value]) => {
- if (!['id', 'live'].includes(key) && value !== null && value !== undefined) {
- acc[key] = value
- }
- return acc
- },
- {} as Record
- ) as QuerySearchParamsType,
- [search]
- )
+ const searchParameters = useMemo(() => {
+ const parameters = Object.entries(search).reduce(
+ (acc, [key, value]) => {
+ if (!['id', 'live'].includes(key) && value !== null && value !== undefined) {
+ acc[key] = value
+ }
+ return acc
+ },
+ {} as Record
+ ) as QuerySearchParamsType
+
+ if (parameters.filter) {
+ parameters.filter =
+ gateLogTypeFilters(parameters.filter, {
+ multigres: showMultigresLogs,
+ workers: workersAvailability.canQueryWorkers,
+ }) ?? null
+ }
+ return parameters
+ }, [search, showMultigresLogs, workersAvailability.canQueryWorkers])
const {
data: unifiedLogsData,
@@ -223,7 +245,7 @@ export const UnifiedLogs = () => {
}, [search.filter])
const getRowClassName = <
- TData extends { date: Date; level: (typeof LEVELS)[number]; timestamp: number },
+ TData extends { date: Date; level: (typeof LEVELS)[number] | null; timestamp: number },
>(
row: Row
) => {
@@ -274,7 +296,10 @@ export const UnifiedLogs = () => {
// Will need to refactor this bit
// - Each facet just handles its own state, rather than getting passed down like this
const filterFields = useMemo(() => {
- const gatedFields = gateMultigresLogType(defaultFilterFields, showMultigresLogs)
+ const gatedFields = gateLogTypeOptions(defaultFilterFields, {
+ multigres: showMultigresLogs,
+ workers: workersAvailability.canQueryWorkers,
+ })
return gatedFields.map((field) => {
const facetsField = facets?.[field.value]
@@ -302,17 +327,24 @@ export const UnifiedLogs = () => {
return { ...field, options }
})
- }, [facets, showMultigresLogs])
+ }, [facets, showMultigresLogs, workersAvailability.canQueryWorkers])
const applyFilterSearch = () => {
- setSearch(buildFilterSearchUpdate(columnFilters, filterFields))
+ const update = buildFilterSearchUpdate(columnFilters, filterFields)
+ if (Array.isArray(update.filter)) {
+ update.filter = gateLogTypeFilters(update.filter.map(String), {
+ multigres: showMultigresLogs,
+ workers: workersAvailability.canQueryWorkers,
+ })
+ }
+ setSearch(update)
}
- const debouncedApplyFilterSearch = useDebounce(applyFilterSearch, 250)
-
- useEffect(() => {
- debouncedApplyFilterSearch()
- }, [columnFilters, debouncedApplyFilterSearch])
+ useFilterSearchSync({
+ applyFilterSearch,
+ columnFilters,
+ enabled: workersAvailability.readyToSyncFilters,
+ })
useEffect(() => {
setSearch({ sort: sorting?.[0] || null })
@@ -485,7 +517,7 @@ export const UnifiedLogs = () => {
setColumnVisibility={setColumnVisibility}
searchParamsParser={SEARCH_PARAMS_PARSER}
emptyStateMessage={
- isUserFilterUnreachable(search) ? (
+ isUserFilterUnreachable(searchParameters) ? (
No results found
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.test.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.test.ts
index c31bb69b9b2..12b7f79b467 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.test.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.test.ts
@@ -2,8 +2,11 @@ import { describe, expect, it } from 'vitest'
import {
buildUnifiedLogsUrl,
- gateMultigresLogType,
+ gateLogTypeFilters,
+ gateLogTypeOptions,
getEventMessageDisplay,
+ getRawLogData,
+ getWorkersLogsAvailability,
parseMultigresEventMessage,
} from './UnifiedLogs.utils'
@@ -94,7 +97,55 @@ describe('getEventMessageDisplay', () => {
})
})
-describe('gateMultigresLogType', () => {
+describe('getRawLogData', () => {
+ it('returns only the real Workers payload fields', () => {
+ const row = {
+ event_message: 'Error: Dynamic require of "path" is not supported',
+ id: '51a29911-9293-4616-8984-743cc548b629',
+ metadata: {
+ cw_event_id: '39883203917805946105278943454814281535421893832620638214',
+ launch_id: '1788424715503435269',
+ log_group: '/aws/lambda-microvms/workers/cxkpapyhaaywrtudnqpl/api',
+ log_stream: 'launch-1788424715503435269',
+ source: 'worker_guest_logs',
+ worker: 'api',
+ },
+ project: 'cxkpapyhaaywrtudnqpl',
+ timestamp: 1788424716876000,
+ log_type: 'workers' as const,
+ status: null,
+ level: null,
+ method: null,
+ pathname: null,
+ auth_user: null,
+ date: new Date(1788424716876),
+ }
+
+ expect(getRawLogData(row)).toEqual({
+ id: '51a29911-9293-4616-8984-743cc548b629',
+ timestamp: 1788424716876000,
+ event_message: 'Error: Dynamic require of "path" is not supported',
+ metadata: row.metadata,
+ })
+ })
+
+ it('returns non-Workers rows unchanged', () => {
+ const row = {
+ id: 'edge-log',
+ timestamp: 1788424716876000,
+ log_type: 'edge' as const,
+ status: 200,
+ method: 'GET' as const,
+ pathname: '/rest/v1',
+ level: 'success' as const,
+ date: new Date(1788424716876),
+ }
+
+ expect(getRawLogData(row)).toBe(row)
+ })
+})
+
+describe('gateLogTypeOptions', () => {
const fields = [
{ value: 'date' },
{
@@ -102,23 +153,110 @@ describe('gateMultigresLogType', () => {
options: [
{ label: 'Postgres', value: 'postgres' },
{ label: 'Multigres', value: 'multigres' },
+ { label: 'Workers', value: 'workers' },
],
},
]
- it('drops the multigres log_type option when the flag is disabled', () => {
- const gated = gateMultigresLogType(fields, false)
+ it('drops log_type options whose flags are disabled', () => {
+ const gated = gateLogTypeOptions(fields, { multigres: false, workers: false })
const logType = gated.find((field) => field.value === 'log_type')
expect(logType?.options?.map((option) => option.value)).toEqual(['postgres'])
})
- it('keeps the multigres option when the flag is enabled', () => {
- const gated = gateMultigresLogType(fields, true)
+ it('keeps independently enabled log types', () => {
+ const gated = gateLogTypeOptions(fields, { multigres: false, workers: true })
+ const logType = gated.find((field) => field.value === 'log_type')
+ expect(logType?.options?.map((option) => option.value)).toEqual(['postgres', 'workers'])
+ })
+
+ it('returns the original fields when every gated log type is enabled', () => {
+ const gated = gateLogTypeOptions(fields, { multigres: true, workers: true })
expect(gated).toBe(fields)
})
it('leaves non log_type fields untouched', () => {
- const gated = gateMultigresLogType(fields, false)
+ const gated = gateLogTypeOptions(fields, { workers: false })
expect(gated.find((field) => field.value === 'date')).toEqual({ value: 'date' })
})
})
+
+describe('gateLogTypeFilters', () => {
+ it('removes disabled log types from equality and inequality filters', () => {
+ expect(
+ gateLogTypeFilters(
+ ['log_type:eq:workers', 'log_type:neq:multigres', 'log_type:eq:postgres', 'method:eq:GET'],
+ { workers: false, multigres: false }
+ )
+ ).toEqual(['log_type:eq:postgres', 'method:eq:GET'])
+ })
+
+ it('keeps enabled log types and unrelated filters unchanged', () => {
+ const filters = ['log_type:eq:workers', 'method:eq:GET']
+ expect(gateLogTypeFilters(filters, { workers: true })).toBe(filters)
+ })
+
+ it('preserves absent filter values', () => {
+ expect(gateLogTypeFilters(undefined, { workers: false })).toBeUndefined()
+ expect(gateLogTypeFilters(null, { workers: false })).toBeNull()
+ })
+})
+
+describe('getWorkersLogsAvailability', () => {
+ const workersFilter = ['log_type:eq:workers']
+
+ it('preserves an unresolved platform filter without allowing it into queries or sync', () => {
+ const availability = getWorkersLogsAvailability({
+ isPlatform: true,
+ flagsLoaded: false,
+ workersEnabled: false,
+ })
+
+ expect(gateLogTypeFilters(workersFilter, { workers: availability.preserveWorkersFilter })).toBe(
+ workersFilter
+ )
+ expect(gateLogTypeFilters(workersFilter, { workers: availability.canQueryWorkers })).toEqual([])
+ expect(availability.readyToSyncFilters).toBe(false)
+ })
+
+ it('allows Workers filters and queries when the platform flag is enabled', () => {
+ const availability = getWorkersLogsAvailability({
+ isPlatform: true,
+ flagsLoaded: true,
+ workersEnabled: true,
+ })
+
+ expect(availability).toEqual({
+ canQueryWorkers: true,
+ preserveWorkersFilter: true,
+ readyToSyncFilters: true,
+ })
+ })
+
+ it('removes Workers filters and queries when the platform flag is disabled', () => {
+ const availability = getWorkersLogsAvailability({
+ isPlatform: true,
+ flagsLoaded: true,
+ workersEnabled: false,
+ })
+
+ expect(availability).toEqual({
+ canQueryWorkers: false,
+ preserveWorkersFilter: false,
+ readyToSyncFilters: true,
+ })
+ })
+
+ it('syncs generic filters immediately while keeping Workers unavailable on self-hosted', () => {
+ const availability = getWorkersLogsAvailability({
+ isPlatform: false,
+ workersEnabled: false,
+ })
+
+ expect(availability).toEqual({
+ canQueryWorkers: false,
+ preserveWorkersFilter: false,
+ readyToSyncFilters: true,
+ })
+ })
+})
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
index 9d4f493efc0..c51518ffb94 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
@@ -2,12 +2,32 @@ import { type Table as TTable } from '@tanstack/react-table'
import { cn } from 'ui'
import { LOG_TYPES_LABELS } from './UnifiedLogs.constants'
-import { FacetMetadataSchema } from './UnifiedLogs.schema'
+import { parseLogsFilterUrlParams } from './UnifiedLogs.filters'
+import { ColumnSchema, FacetMetadataSchema } from './UnifiedLogs.schema'
import { LEVELS } from '@/components/ui/DataTable/DataTable.constants'
import { Option } from '@/components/ui/DataTable/DataTable.types'
+import type { UnifiedLogInspectionEntry } from '@/data/logs/unified-log-inspection-query'
export type UnifiedLogType = keyof typeof LOG_TYPES_LABELS
+export function getWorkersLogsAvailability({
+ isPlatform,
+ flagsLoaded,
+ workersEnabled,
+}: {
+ isPlatform: boolean
+ flagsLoaded?: boolean
+ workersEnabled: boolean
+}) {
+ const flagsReady = flagsLoaded === true
+
+ return {
+ canQueryWorkers: isPlatform && flagsReady && workersEnabled,
+ preserveWorkersFilter: isPlatform && (!flagsReady || workersEnabled),
+ readyToSyncFilters: !isPlatform || flagsReady,
+ }
+}
+
export const buildUnifiedLogsUrl = ({
projectRef,
logType,
@@ -63,6 +83,21 @@ export function getRowTimestampMs(
return null
}
+type WorkersRawLogData = Pick
+
+export function getRawLogData(
+ row: ColumnSchema | UnifiedLogInspectionEntry
+): ColumnSchema | UnifiedLogInspectionEntry | WorkersRawLogData {
+ if (!('log_type' in row) || row.log_type !== 'workers') return row
+
+ return {
+ id: row.id,
+ timestamp: row.timestamp,
+ event_message: row.event_message,
+ metadata: row.metadata,
+ }
+}
+
export const getLevelLabel = (value: (typeof LEVELS)[number]): string => {
switch (value) {
case 'success':
@@ -86,7 +121,7 @@ export const getStatusLevel = (status?: number | string): string => {
return 'success'
}
-export function getLevelRowClassName(value: (typeof LEVELS)[number]): string {
+export function getLevelRowClassName(value: (typeof LEVELS)[number] | null | undefined): string {
switch (value) {
case 'success':
return ''
@@ -205,19 +240,43 @@ export function getEventMessageDisplay(
return { message: value, capitalize: false }
}
-/**
- * Multigres logs are gated behind the `showMultigresLogs` flag, so the multigres
- * log_type option is removed from the filter fields when the flag is disabled.
- */
-export function gateMultigresLogType(
+export function gateLogTypeOptions(
fields: T[],
- showMultigresLogs: boolean
+ visibility: Partial>
): T[] {
- if (showMultigresLogs) return fields
-
- return fields.map((field) =>
- field.value === 'log_type' && field.options
- ? ({ ...field, options: field.options.filter((option) => option.value !== 'multigres') } as T)
- : field
+ const hiddenLogTypes = new Set(
+ Object.entries(visibility)
+ .filter(([, visible]) => !visible)
+ .map(([logType]) => logType)
)
+
+ if (hiddenLogTypes.size === 0) return fields
+
+ return fields.map((field) => {
+ if (field.value !== 'log_type' || !field.options) return field
+ return {
+ ...field,
+ options: field.options.filter((option) => !hiddenLogTypes.has(option.value)),
+ }
+ })
+}
+
+export function gateLogTypeFilters(
+ filters: string[] | null | undefined,
+ visibility: Partial>
+): string[] | null | undefined {
+ if (!filters) return filters
+
+ const hiddenLogTypes = new Set(
+ Object.entries(visibility)
+ .filter(([, visible]) => !visible)
+ .map(([logType]) => logType)
+ )
+
+ if (hiddenLogTypes.size === 0) return filters
+
+ return filters.filter((filter) => {
+ const parsed = parseLogsFilterUrlParams([filter])[0]
+ return parsed?.column !== 'log_type' || !hiddenLogTypes.has(parsed.value)
+ })
}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx
index c6a6fc16046..a53b23bcfdd 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx
@@ -71,7 +71,7 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
header: '',
cell: ({ row }) => {
const level = row.getValue('level')
- return
('level')}
+ value={value ?? undefined}
+ level={row.getValue('level') ?? undefined}
/>
@@ -162,8 +162,8 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
) : (
('level')}
+ value={value ?? undefined}
+ level={row.getValue('level') ?? undefined}
/>
)}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/LogTypeIcon.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/LogTypeIcon.tsx
index 437607e219a..105a6c263b9 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/LogTypeIcon.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/LogTypeIcon.tsx
@@ -1,4 +1,4 @@
-import { Auth, EdgeFunctions, Realtime, Storage } from 'icons'
+import { Auth, EdgeFunctions, Realtime, Storage, Workers } from 'icons'
import { Box, Cable, Code2, Database, Network } from 'lucide-react'
import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
@@ -11,11 +11,7 @@ interface LogTypeIconProps {
className?: string
}
-type IconComponent = React.ComponentType<{
- size?: number
- strokeWidth?: number
- className?: string
-}>
+type IconComponent = typeof Box | typeof Auth
// [Alaister]: commented out types coming in the future
// edge: Globe,
@@ -29,6 +25,7 @@ const ICON_MAP: Partial> = {
supavisor: Cable,
pgbouncer: Cable,
multigres: Network,
+ workers: Workers,
}
export const LogTypeIcon = ({
diff --git a/apps/studio/data/logs/get-unified-logs.ts b/apps/studio/data/logs/get-unified-logs.ts
index ef077ae76f6..fbcc0c4dc71 100644
--- a/apps/studio/data/logs/get-unified-logs.ts
+++ b/apps/studio/data/logs/get-unified-logs.ts
@@ -4,6 +4,7 @@ import { toast } from 'sonner'
import { logsAllEndpointUrl, pickLogsQueryBuilder } from './logs-endpoint'
import { getUnifiedLogsISOStartEnd } from './unified-logs-infinite-query'
+import { mapUnifiedLogRow, parseUnifiedLogsQueryRows } from './unified-logs.utils'
import { getUnifiedLogsQuery } from '@/components/interfaces/UnifiedLogs/UnifiedLogs.queries'
import { getUnifiedLogsQuery as getUnifiedLogsQueryBq } from '@/components/interfaces/UnifiedLogs/UnifiedLogs.queries.bq'
import { QuerySearchParamsType } from '@/components/interfaces/UnifiedLogs/UnifiedLogs.types'
@@ -41,34 +42,8 @@ export async function retrieveUnifiedLogs({
if (error) handleError(error)
- const resultData = data?.result ?? []
-
- const result = resultData.map((row: any) => {
- const ts = String(row.timestamp ?? '')
- const looksLikeIso = /[T-]/.test(ts)
- const date = looksLikeIso
- ? new Date(/Z$|[+-]\d{2}:?\d{2}$/.test(ts) ? ts : `${ts}Z`)
- : new Date(Number(ts) / 1000)
- return {
- id: row.id,
- date,
- timestamp: row.timestamp,
- level: row.level,
- status: row.status || 200,
- method: row.method,
- host: row.host,
- pathname: (row.url || '').replace(/^https?:\/\/[^\/]+/, '') || row.pathname || '',
- event_message: row.event_message || row.body || '',
- headers:
- typeof row.headers === 'string' ? JSON.parse(row.headers || '{}') : row.headers || {},
- regions: row.region ? [row.region] : [],
- log_type: row.log_type || '',
- latency: row.latency || 0,
- log_count: row.log_count || null,
- logs: row.logs || [],
- auth_user: row.auth_user || null,
- }
- })
+ const resultData = parseUnifiedLogsQueryRows(data?.result)
+ const result = resultData.map(mapUnifiedLogRow)
return result
}
diff --git a/apps/studio/data/logs/unified-logs-infinite-query.ts b/apps/studio/data/logs/unified-logs-infinite-query.ts
index 61af3c1b476..cf564c9c81f 100644
--- a/apps/studio/data/logs/unified-logs-infinite-query.ts
+++ b/apps/studio/data/logs/unified-logs-infinite-query.ts
@@ -4,9 +4,8 @@ import { useFlag } from 'common'
import { executeAnalyticsSql } from './execute-analytics-sql'
import { logsKeys } from './keys'
import { logsAllEndpointUrl, pickLogsQueryBuilder } from './logs-endpoint'
-import { parseOtelTimestamp } from './otel-inspection.utils'
import { analyticsLiteral, safeSql } from './safe-analytics-sql'
-import { extractLogMetadata } from './unified-logs.utils'
+import { mapUnifiedLogRow, parseUnifiedLogsQueryRows } from './unified-logs.utils'
import { getUnifiedLogsQuery } from '@/components/interfaces/UnifiedLogs/UnifiedLogs.queries'
import { getUnifiedLogsQuery as getUnifiedLogsQueryBq } from '@/components/interfaces/UnifiedLogs/UnifiedLogs.queries.bq'
import {
@@ -17,7 +16,6 @@ import { handleError } from '@/data/fetchers'
import type { ResponseError, UseCustomInfiniteQueryOptions } from '@/types'
const LOGS_PAGE_LIMIT = 50
-type LogLevel = 'success' | 'warning' | 'error'
export const UNIFIED_LOGS_QUERY_OPTIONS = {
refetchOnWindowFocus: false,
@@ -122,33 +120,8 @@ export async function getUnifiedLogs(
if (data.error) handleError(new Error(data.error as string))
- const resultData = data?.result ?? []
-
- const result = resultData.map((row: any) => {
- const date = parseOtelTimestamp(row.timestamp)
-
- const { status, method, pathname } = extractLogMetadata(row)
-
- return {
- id: row.id,
- date,
- method,
- pathname,
- status,
- timestamp: row.timestamp,
- level: row.level as LogLevel,
- host: row.host,
- event_message: row.event_message || row.body || '',
- headers:
- typeof row.headers === 'string' ? JSON.parse(row.headers || '{}') : row.headers || {},
- regions: row.region ? [row.region] : [],
- log_type: row.log_type || '',
- latency: row.latency || 0,
- log_count: row.log_count || null,
- logs: row.logs || [],
- auth_user: row.auth_user || null,
- }
- })
+ const resultData = parseUnifiedLogsQueryRows(data?.result)
+ const result = resultData.map(mapUnifiedLogRow)
const firstRow = result.length > 0 ? result[0] : null
const lastRow = result.length > 0 ? result[result.length - 1] : null
diff --git a/apps/studio/data/logs/unified-logs.utils.test.ts b/apps/studio/data/logs/unified-logs.utils.test.ts
index 1246c6e4c17..ce158451453 100644
--- a/apps/studio/data/logs/unified-logs.utils.test.ts
+++ b/apps/studio/data/logs/unified-logs.utils.test.ts
@@ -1,16 +1,19 @@
import { describe, expect, it } from 'vitest'
-import { extractLogMetadata } from './unified-logs.utils'
+import {
+ extractLogMetadata,
+ mapUnifiedLogRow,
+ parseUnifiedLogsQueryRows,
+} from './unified-logs.utils'
describe('extractLogMetadata', () => {
describe('non-auth logs', () => {
- it('returns the row status, method, and url-derived pathname', () => {
+ it('returns projected status, method, and pathname', () => {
const row = {
log_type: 'api',
status: 404,
method: 'GET',
- url: 'https://example.supabase.co/rest/v1/users?select=id',
- pathname: '/ignored',
+ pathname: '/rest/v1/users?select=id',
event_message: 'irrelevant',
}
@@ -21,12 +24,11 @@ describe('extractLogMetadata', () => {
})
})
- it('falls back to row.pathname when url is missing', () => {
+ it('returns the projected pathname', () => {
const row = {
log_type: 'api',
status: 500,
method: 'POST',
- url: '',
pathname: '/fallback',
event_message: '',
}
@@ -34,7 +36,7 @@ describe('extractLogMetadata', () => {
expect(extractLogMetadata(row).pathname).toBe('/fallback')
})
- it('returns empty string for pathname when both url and pathname are missing', () => {
+ it('returns an empty string when pathname is missing', () => {
const row = {
log_type: 'api',
status: 200,
@@ -49,7 +51,6 @@ describe('extractLogMetadata', () => {
const row = {
log_type: 'api',
method: 'GET',
- url: 'https://example.supabase.co/health',
event_message: '',
}
@@ -63,7 +64,6 @@ describe('extractLogMetadata', () => {
log_type: 'auth',
status: 999,
method: 'IGNORED',
- url: 'https://ignored',
event_message: JSON.stringify({
status: 400,
method: 'POST',
@@ -146,7 +146,6 @@ describe('extractLogMetadata', () => {
log_type: 'auth',
status: 200,
method: 'GET',
- url: 'https://example.supabase.co/token',
event_message: 'not json',
}
@@ -170,4 +169,141 @@ describe('extractLogMetadata', () => {
expect(extractLogMetadata(row).status).toBe(200)
})
})
+
+ describe('workers logs', () => {
+ it('does not synthesize unsupported request metadata', () => {
+ const row = {
+ event_message: 'Error: Dynamic require of "path" is not supported',
+ id: '51a29911-9293-4616-8984-743cc548b629',
+ log_type: 'workers',
+ metadata: {
+ cw_event_id: '39883203917805946105278943454814281535421893832620638214',
+ launch_id: '1788424715503435269',
+ log_group: '/aws/lambda-microvms/workers/cxkpapyhaaywrtudnqpl/api',
+ log_stream: 'launch-1788424715503435269',
+ source: 'worker_guest_logs',
+ worker: 'api',
+ },
+ project: 'cxkpapyhaaywrtudnqpl',
+ timestamp: 1788424716876000,
+ }
+
+ expect(extractLogMetadata(row)).toEqual({ status: null, method: null, pathname: null })
+ })
+
+ it('preserves only Workers metadata while keeping unsupported fields null', () => {
+ const metadata = {
+ cw_event_id: '39883203917805946105278943454814281535421893832620638214',
+ launch_id: '1788424715503435269',
+ log_group: '/aws/lambda-microvms/workers/cxkpapyhaaywrtudnqpl/api',
+ log_stream: 'launch-1788424715503435269',
+ source: 'worker_guest_logs',
+ worker: 'api',
+ }
+ const mapped = mapUnifiedLogRow({
+ event_message: 'Error: Dynamic require of "path" is not supported',
+ id: '51a29911-9293-4616-8984-743cc548b629',
+ log_type: 'workers',
+ metadata,
+ timestamp: 1788424716876000,
+ status: 200,
+ level: 'success',
+ method: 'GET',
+ pathname: '/invented',
+ auth_user: 'invented-user',
+ log_count: null,
+ logs: null,
+ })
+
+ expect(mapped).toMatchObject({
+ id: '51a29911-9293-4616-8984-743cc548b629',
+ timestamp: 1788424716876000,
+ event_message: 'Error: Dynamic require of "path" is not supported',
+ metadata,
+ status: null,
+ level: null,
+ method: null,
+ pathname: null,
+ auth_user: null,
+ })
+ expect(mapped).not.toHaveProperty('project')
+ })
+
+ it('does not add metadata to non-Workers rows', () => {
+ const mapped = mapUnifiedLogRow({
+ id: 'edge-log',
+ timestamp: 1788424716876000,
+ log_type: 'edge',
+ metadata: { request: 'existing metadata' },
+ status: 200,
+ level: 'success',
+ method: 'GET',
+ pathname: '/rest/v1',
+ event_message: null,
+ log_count: 0,
+ logs: null,
+ })
+
+ expect(mapped).not.toHaveProperty('metadata')
+ expect(mapped.log_count).toBe(0)
+ })
+ })
+})
+
+describe('parseUnifiedLogsQueryRows', () => {
+ const workersRow = {
+ event_message: 'Error: Dynamic require of "path" is not supported',
+ id: '51a29911-9293-4616-8984-743cc548b629',
+ metadata: {
+ cw_event_id: '39883203917805946105278943454814281535421893832620638214',
+ launch_id: '1788424715503435269',
+ log_group: '/aws/lambda-microvms/workers/cxkpapyhaaywrtudnqpl/api',
+ log_stream: 'launch-1788424715503435269',
+ source: 'worker_guest_logs',
+ worker: 'api',
+ },
+ project: 'cxkpapyhaaywrtudnqpl',
+ timestamp: 1788424716876000,
+ log_type: 'workers',
+ status: null,
+ level: null,
+ pathname: null,
+ method: null,
+ log_count: null,
+ logs: null,
+ auth_user: null,
+ }
+
+ it('parses the Workers projection and strips project', () => {
+ const [parsed] = parseUnifiedLogsQueryRows([workersRow])
+
+ expect(parsed).toMatchObject({
+ id: workersRow.id,
+ timestamp: workersRow.timestamp,
+ event_message: workersRow.event_message,
+ metadata: workersRow.metadata,
+ log_type: 'workers',
+ status: null,
+ level: null,
+ pathname: null,
+ method: null,
+ })
+ expect(parsed).not.toHaveProperty('project')
+ })
+
+ it('returns an empty array for undefined results', () => {
+ expect(parseUnifiedLogsQueryRows(undefined)).toEqual([])
+ })
+
+ it('rejects invalid metadata', () => {
+ expect(() => parseUnifiedLogsQueryRows([{ ...workersRow, metadata: 'invalid' }])).toThrow()
+ })
+
+ it.each([{ id: 42 }, { timestamp: true }])('rejects invalid identity fields', (invalidFields) => {
+ expect(() => parseUnifiedLogsQueryRows([{ ...workersRow, ...invalidFields }])).toThrow()
+ })
+
+ it('rejects invalid projected field types', () => {
+ expect(() => parseUnifiedLogsQueryRows([{ ...workersRow, level: 'info' }])).toThrow()
+ })
})
diff --git a/apps/studio/data/logs/unified-logs.utils.ts b/apps/studio/data/logs/unified-logs.utils.ts
index 4a4a290e7e9..8a71ea06124 100644
--- a/apps/studio/data/logs/unified-logs.utils.ts
+++ b/apps/studio/data/logs/unified-logs.utils.ts
@@ -1,13 +1,47 @@
+import { z } from 'zod'
+
+import { parseOtelTimestamp } from './otel-inspection.utils'
+import { LEVELS } from '@/components/ui/DataTable/DataTable.constants'
import { tryParseJson } from '@/lib/helpers'
+type UnifiedLogMetadataRow = {
+ log_type?: string | null
+ status?: string | number | null
+ method?: string | null
+ pathname?: string | null
+ event_message?: string | null
+}
+
+const unifiedLogsQueryRowSchema = z.object({
+ id: z.string(),
+ timestamp: z.union([z.string(), z.number()]),
+ log_type: z.string(),
+ status: z.union([z.string(), z.number()]).nullable(),
+ level: z.enum(LEVELS).nullable(),
+ pathname: z.string().nullable(),
+ event_message: z.string().nullable(),
+ method: z.string().nullable(),
+ log_count: z.number().nullable(),
+ logs: z.array(z.unknown()).nullable(),
+ auth_user: z.string().nullish(),
+ metadata: z.record(z.string(), z.unknown()).nullish(),
+})
+
+export type UnifiedLogsQueryRow = z.infer
+
+export const parseUnifiedLogsQueryRows = (value: unknown): UnifiedLogsQueryRow[] =>
+ z.array(unifiedLogsQueryRowSchema).parse(value ?? [])
+
const extractLeadingStatus = (s?: string) => {
const m = typeof s === 'string' ? s.match(/^(\d{3})\b/) : null
return m ? Number(m[1]) : undefined
}
-// [Joshen] Row has an unknown type in this case so `any` is accurate
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const extractLogMetadata = (row: any) => {
+export const extractLogMetadata = (row: UnifiedLogMetadataRow) => {
+ if (row.log_type === 'workers') {
+ return { status: null, method: null, pathname: null }
+ }
+
// [Joshen] For auth logs, these metadata are nested within event_message,
// so opting to bring them out at the query level
const eventMessage = tryParseJson(row.event_message)
@@ -18,10 +52,30 @@ export const extractLogMetadata = (row: any) => {
extractLeadingStatus(eventMessage?.error))
: (row.status ?? 200)
const method = row.log_type === 'auth' ? eventMessage?.method : row.method
- const pathname =
- row.log_type === 'auth'
- ? eventMessage?.path
- : (row.url || '').replace(/^https?:\/\/[^\/]+/, '') || row.pathname || ''
+ const pathname = row.log_type === 'auth' ? eventMessage?.path : row.pathname || ''
return { status, method, pathname }
}
+
+export const mapUnifiedLogRow = (row: UnifiedLogsQueryRow) => {
+ const isWorkersLog = row.log_type === 'workers'
+ const { status, method, pathname } = extractLogMetadata(row)
+
+ const mappedRow = {
+ id: row.id,
+ date: parseOtelTimestamp(row.timestamp),
+ method,
+ pathname,
+ status,
+ timestamp: row.timestamp,
+ level: isWorkersLog ? null : row.level,
+ event_message: row.event_message ?? '',
+ log_type: row.log_type,
+ log_count: row.log_count ?? null,
+ logs: row.logs ?? [],
+ auth_user: isWorkersLog ? null : row.auth_user || null,
+ }
+
+ if (isWorkersLog) return { ...mappedRow, metadata: row.metadata ?? null }
+ return mappedRow
+}
diff --git a/apps/studio/data/workers/worker-logs-query.ts b/apps/studio/data/workers/worker-logs-query.ts
index 7fb4cc10ca8..4ec0b1cdbd1 100644
--- a/apps/studio/data/workers/worker-logs-query.ts
+++ b/apps/studio/data/workers/worker-logs-query.ts
@@ -8,12 +8,7 @@ import { executeAnalyticsSql } from '@/data/logs/execute-analytics-sql'
import { logsAllEndpointUrl } from '@/data/logs/logs-endpoint'
import { analyticsLiteral, safeSql } from '@/data/logs/safe-analytics-sql'
import { IS_PLATFORM } from '@/lib/constants'
-
-export const WORKER_LOG_SOURCES = {
- requests: 'worker_ingress_logs',
- output: 'worker_guest_logs',
- builds: 'worker_api_logs',
-} as const
+import { WORKER_LOG_SOURCES } from '@/lib/constants/workers'
export type WorkerLogStream = keyof typeof WORKER_LOG_SOURCES
diff --git a/apps/studio/lib/constants/workers.ts b/apps/studio/lib/constants/workers.ts
index 887f13c712a..0c331f5b925 100644
--- a/apps/studio/lib/constants/workers.ts
+++ b/apps/studio/lib/constants/workers.ts
@@ -1,2 +1,8 @@
export const PRODUCT_NAME = 'Workers'
export const CLI_NAME = 'workers'
+
+export const WORKER_LOG_SOURCES = {
+ requests: 'worker_ingress_logs',
+ output: 'worker_guest_logs',
+ builds: 'worker_api_logs',
+} as const
diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts
index 6492cccb0bd..1137c2b6deb 100644
--- a/packages/common/telemetry-constants.ts
+++ b/packages/common/telemetry-constants.ts
@@ -3708,6 +3708,7 @@ export interface UnifiedLogsRowClickedEvent {
| 'supavisor'
| 'pgbouncer'
| 'multigres'
+ | 'workers'
}
groups: TelemetryGroups
}
From 10df98f2d5028000343d616da4dfd67cecbf9bc8 Mon Sep 17 00:00:00 2001
From: Jeremias Menichelli
Date: Mon, 7 Sep 2026 16:00:29 +0200
Subject: [PATCH 011/333] feat(kb): Create homepage and pinned topics and
guides (#49999)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Adding the ability to pin guides or specific topics to homepage.
_To test:_
- Enter the preview of the project
- Go to the homepage
- Make sure pinned topics, pinned guides and the rest of the links work
correctly.
_Screenshot_
## Summary by CodeRabbit
- **New Features**
- Added homepage sections for pinned topics, featured guides, all
guides, and all topics.
- Added reusable cards with titles, descriptions, topic badges, and
optional links.
- Added support for GitHub-style Markdown alerts, including notes, tips,
warnings, and cautions.
- Added the ability to mark guides and topics as pinned for homepage
featuring.
- Added a guide demonstrating supported alert styles.
- **Style**
- Improved header, hero, and card borders for a more consistent visual
treatment.
---
apps/kb/src/components/Card.astro | 45 ++++++++++++++
apps/kb/src/components/Header.tsx | 2 +-
apps/kb/src/components/Hero.tsx | 2 +-
apps/kb/src/content.config.ts | 2 +
apps/kb/src/content/guides/sample-guide.md | 1 +
apps/kb/src/lib/topics.ts | 46 ++++++++++----
apps/kb/src/pages/index.astro | 71 ++++++++++++++++++++++
7 files changed, 156 insertions(+), 13 deletions(-)
create mode 100644 apps/kb/src/components/Card.astro
diff --git a/apps/kb/src/components/Card.astro b/apps/kb/src/components/Card.astro
new file mode 100644
index 00000000000..8784427734e
--- /dev/null
+++ b/apps/kb/src/components/Card.astro
@@ -0,0 +1,45 @@
+---
+// Small "glass panel" card, adapted from apps/docs' GlassPanel
+// (packages/ui-patterns/src/GlassPanel/index.tsx) — same surface treatment
+// (bg-surface-75, hover:border-strong), trimmed to what kb needs: no
+// logo/icon-picker machinery, which pulled in next/image and next-themes
+// that don't apply to a plain Astro app.
+//
+// Unlike GlassPanel (always a plain , link-agnostic — every call site
+// in docs wraps it in a Next.js ), this renders as an itself when
+// `href` is given. That's only safe because `topics` render as plain,
+// non-linked badges — nothing inside the card is itself a link, so there's
+// no nested- problem.
+import { Badge } from 'ui'
+
+interface Props {
+ href?: string
+ title: string
+ description?: string
+ topics?: string[]
+ class?: string
+}
+
+const { href, title, description, topics = [], class: className } = Astro.props
+const Tag = href ? 'a' : 'div'
+---
+
+
+ {title}
+ {description && {description}
}
+ {
+ topics.length > 0 && (
+
+ {topics.map((topic) => (
+ {topic}
+ ))}
+
+ )
+ }
+
diff --git a/apps/kb/src/components/Header.tsx b/apps/kb/src/components/Header.tsx
index 5f7c344da07..f1b9c746a54 100644
--- a/apps/kb/src/components/Header.tsx
+++ b/apps/kb/src/components/Header.tsx
@@ -7,7 +7,7 @@ import { ThemeToggle } from './ThemeToggle'
// search, no user menu, no dashboard link — kb doesn't have any of that yet.
function Header() {
return (
-
+
Supabase Knowledge Base
diff --git a/apps/kb/src/content.config.ts b/apps/kb/src/content.config.ts
index fec50c46fb6..245e1163529 100644
--- a/apps/kb/src/content.config.ts
+++ b/apps/kb/src/content.config.ts
@@ -15,6 +15,8 @@ const guides = defineCollection({
// z.enum (not z.string) so a guide referencing a topic outside TOPICS
// fails content validation instead of silently rendering an orphaned tag.
topics: z.array(z.enum(TOPIC_NAMES)),
+ // Surfaces the guide in the homepage's "Featured Guides" section.
+ pinned: z.boolean().default(false),
github_url: z.string().optional(),
}),
})
diff --git a/apps/kb/src/content/guides/sample-guide.md b/apps/kb/src/content/guides/sample-guide.md
index f1af5d55b00..7aa9a1f9a8c 100644
--- a/apps/kb/src/content/guides/sample-guide.md
+++ b/apps/kb/src/content/guides/sample-guide.md
@@ -2,6 +2,7 @@
title: 'Markdown elements sample'
description: 'A lorem ipsum sample guide exercising every base Markdown element supported by the guide layout.'
topics: ['Tutorial', 'Database']
+pinned: true
github_url: 'https://github.com/supabase/supabase/discussions/0000000'
---
diff --git a/apps/kb/src/lib/topics.ts b/apps/kb/src/lib/topics.ts
index c0725d4a303..ecfe5e9c764 100644
--- a/apps/kb/src/lib/topics.ts
+++ b/apps/kb/src/lib/topics.ts
@@ -1,18 +1,42 @@
// Canonical list of guide topics. Single source of truth for the `topics`
// field in src/content.config.ts (so a guide with an unsupported topic fails
// content validation), the "Topics" nav menu, and the /topics/[topic] pages.
+//
+// `pinned` topics surface as cards on the homepage (see src/pages/index.astro)
+// — keep this to a handful so that section stays a highlights row, not a
+// second copy of the full topic list.
export const TOPICS = [
- { name: 'Migration', description: 'Moving data, schemas, or projects onto Supabase' },
- { name: 'Comparison', description: 'How Supabase compares to other databases and platforms' },
- { name: 'Troubleshooting', description: 'Common errors and how to resolve them' },
- { name: 'Tutorial', description: 'Step-by-step walkthroughs for building with Supabase' },
- { name: 'Storage', description: 'Uploading, managing, and serving files' },
- { name: 'Auth', description: 'Authentication, authorization, and user management' },
- { name: 'Database', description: 'Postgres schemas, queries, and performance' },
- { name: 'Edge Functions', description: 'Deploying and running serverless functions' },
- { name: 'Queues', description: 'Background jobs and message processing' },
- { name: 'Realtime', description: 'Broadcast, presence, and database changes' },
- { name: 'Supabase Platform', description: 'Project settings, billing, and infrastructure' },
+ {
+ name: 'Migration',
+ description: 'Moving data, schemas, or projects onto Supabase',
+ pinned: false,
+ },
+ {
+ name: 'Comparison',
+ description: 'How Supabase compares to other databases and platforms',
+ pinned: false,
+ },
+ { name: 'Troubleshooting', description: 'Common errors and how to resolve them', pinned: false },
+ {
+ name: 'Tutorial',
+ description: 'Step-by-step walkthroughs for building with Supabase',
+ pinned: true,
+ },
+ { name: 'Storage', description: 'Uploading, managing, and serving files', pinned: false },
+ { name: 'Auth', description: 'Authentication, authorization, and user management', pinned: true },
+ { name: 'Database', description: 'Postgres schemas, queries, and performance', pinned: true },
+ {
+ name: 'Edge Functions',
+ description: 'Deploying and running serverless functions',
+ pinned: false,
+ },
+ { name: 'Queues', description: 'Background jobs and message processing', pinned: false },
+ { name: 'Realtime', description: 'Broadcast, presence, and database changes', pinned: false },
+ {
+ name: 'Supabase Platform',
+ description: 'Project settings, billing, and infrastructure',
+ pinned: false,
+ },
] as const
export type Topic = (typeof TOPICS)[number]['name']
diff --git a/apps/kb/src/pages/index.astro b/apps/kb/src/pages/index.astro
index fe909f38c65..0ad77523149 100644
--- a/apps/kb/src/pages/index.astro
+++ b/apps/kb/src/pages/index.astro
@@ -1,8 +1,79 @@
---
+import { getCollection } from 'astro:content'
+
+import Card from '../components/Card.astro'
import { Hero } from '../components/Hero'
import Layout from '../layouts/Layout.astro'
+import { TOPICS, topicToSlug } from '../lib/topics'
+
+const guides = await getCollection('guides')
+const pinnedTopics = TOPICS.filter((topic) => topic.pinned)
+const featuredGuides = guides.filter((guide) => guide.data.pinned)
---
+ {pinnedTopics.map((topic) => (
+
+ )
+ }
+
+ {
+ featuredGuides.length > 0 && (
+
+ Featured Guides
+
+ {featuredGuides.map((guide) => (
+
+ )
+ }
+
+
+ All Guides
+
+ {guides.map((guide) => (
+ -
+
+ {guide.data.title}
+
+
+ ))}
+
+
+
+
+ All Topics
+
+ {TOPICS.map((topic) => (
+ -
+
+ {topic.name}
+
+
+ ))}
+
+
+
From c2ebfebb39ef6c9579c6a30abbf64221e00675a1 Mon Sep 17 00:00:00 2001
From: Nik Richers
Date: Mon, 7 Sep 2026 08:24:07 -0700
Subject: [PATCH 012/333] docs: restore Troubleshooting nav link under
Resources dropdown (#50028)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
This restores the "Troubleshooting" quick link to the docs top
navigation. It was dropped from the "Manage" dropdown as a side effect
of a broader information-architecture rework, and this PR re-adds it
under the "Resources" dropdown instead, since the underlying
troubleshooting guide page was never removed, only its top-nav shortcut.
## What is the current behavior?
The "Troubleshooting" entry was removed from the "Manage" dropdown in
the top nav during a prior IA restructuring commit. The
`/guides/troubleshooting` page itself still exists and is still linked
from within the Monitoring & Debugging sidebar, but there is no longer a
top-level nav shortcut to it.
Note that we might need to make some additional updates as our
observability docs changes wrap up.
## What is the new behavior?
- Adds a "Troubleshooting" item (with its existing icon) to the end of
the "Resources" dropdown, after Glossary, Changelog, Status, and
Contributing.
- Links to the existing `/guides/troubleshooting` route.
- No changes to the "Manage" dropdown or any other nav group.
## Additional context
**Verification:**
| Check | Result |
| --- | --- |
| `pnpm typecheck --filter=docs` | pass |
| `pnpm lint --filter=docs` | pre-existing 1138 warnings/errors
unrelated to this file; edited file has zero lint issues (lint is not
hard-gated for docs) |
| Manual check: dev server, opened "Resources" dropdown |
Troubleshooting appears with icon, links to `/guides/troubleshooting`
(200) |
| Manual check: "Manage" dropdown unchanged | confirmed |
| Manual check: mobile nav (shares same config) | confirmed same entry
renders |
### Proof:
Screenshots of the "Resources" dropdown, before and after this change:
| [Before
(production)](https://supabase.com/docs/guides/getting-started) | [After
(PR
preview)](https://docs-git-docs-restore-troubleshooting-nav-resources-supabase.vercel.app/docs/guides/getting-started)
|
| --- | --- |
|
|
|
### Test plan
- [ ] Open the "Resources" dropdown in the top nav and confirm
"Troubleshooting" appears after "Contributing"
- [ ] Click "Troubleshooting" and confirm it navigates to
`/guides/troubleshooting`
- [ ] Confirm the "Manage" dropdown is unchanged
- [ ] Check the mobile nav shows the same entry under "Resources"
Co-authored-by: Nik Richers
---
.../Navigation/NavigationMenu/NavigationMenu.constants.ts | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index c0982f9a99d..7be23d9e1a3 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -337,6 +337,12 @@ export const GLOBAL_MENU_ITEMS: GlobalMenuItems = [
href: '/contributing' as `/${string}`,
enabled: contributionEnabled,
},
+ {
+ label: 'Troubleshooting',
+ icon: 'troubleshooting',
+ href: '/guides/troubleshooting' as `/${string}`,
+ level: 'troubleshooting',
+ },
],
],
},
From 0e35cbf4a46eafe62a95d74fb7224fcc2e0050a9 Mon Sep 17 00:00:00 2001
From: Marouane Souda <61951643+marsou001@users.noreply.github.com>
Date: Mon, 7 Sep 2026 22:56:57 +0100
Subject: [PATCH 013/333] Security definer materialized view (#40800)
Fixes #40799
Now, the correct error will be shown for materialized views accessible
to `anon` and `authenticated` roles via Data API, instead of the
unrelated "Security Definer view" error.
For convenience, users can immediately fix the issue by running the
correct SQL query to revoke select from `anon` and `authenticated`, just
by clicking on "confirm" on the confirmation modal I just created.
https://github.com/user-attachments/assets/f3ce9353-4ad0-4063-bf33-0b403f5fa87a
Before
Edit:
Thanks to the review by @saltcod, I now realise that revoking access
from `anon` and `authenticated` users might not be the optimal solution
since it would break many projects relying on the access to materialized
views.
After pondering on the possible solutions, I figured there isn't an easy
one, so I did away with the autofix button, and instead created a dialog
explaining three possible options for the user, with a sample query
under each one for convenience.
## Summary by CodeRabbit
* **New Features**
* Added clearer warnings when materialized views are accessible through
the API.
* Added a dialog explaining how to review and revoke API access for
materialized views.
* Added guidance and code examples for restricting access to API roles.
* Added a link to the Security Advisor for additional information.
* **Improvements**
* Updated materialized view tooltips to accurately describe API
accessibility.
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
---
.../ExposedMaterializedViewDialog.tsx | 83 +++++++++++++++++++
.../TableGridEditor/GridHeaderActions.tsx | 49 ++++++++++-
.../TableEditorLayout/EntityListItem.tsx | 2 +-
3 files changed, 132 insertions(+), 2 deletions(-)
create mode 100644 apps/studio/components/interfaces/TableGridEditor/ExposedMaterializedViewDialog.tsx
diff --git a/apps/studio/components/interfaces/TableGridEditor/ExposedMaterializedViewDialog.tsx b/apps/studio/components/interfaces/TableGridEditor/ExposedMaterializedViewDialog.tsx
new file mode 100644
index 00000000000..5971e1f37a5
--- /dev/null
+++ b/apps/studio/components/interfaces/TableGridEditor/ExposedMaterializedViewDialog.tsx
@@ -0,0 +1,83 @@
+import {
+ Button,
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogSection,
+ DialogSectionSeparator,
+ DialogTitle,
+ DialogTrigger,
+} from 'ui'
+import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
+
+import { Entity } from '@/data/table-editor/table-editor-types'
+
+interface ExposedMaterializedViewDialogProps {
+ table: Entity
+ isExposedMaterializedViewDialogOpen: boolean
+ setIsExposedMaterializedViewDialogOpen: (isExposedMaterializedViewDialogOpen: boolean) => void
+}
+
+export function ExposedMaterializedViewDialog({
+ table,
+ isExposedMaterializedViewDialogOpen,
+ setIsExposedMaterializedViewDialogOpen,
+}: ExposedMaterializedViewDialogProps) {
+ return (
+
+ )
+}
diff --git a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
index 58b7588cab0..03662e9e1a1 100644
--- a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
@@ -1,4 +1,5 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useParams } from 'common'
import { Realtime } from 'icons'
import { BookOpenText, Lightbulb, Lock, MoreVertical, PlusCircle, Unlock } from 'lucide-react'
import Link from 'next/link'
@@ -23,6 +24,7 @@ import {
import { EnableIndexAdvisorDialog } from '../QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
import { RoleImpersonationPopover } from '../RoleImpersonationSelector/RoleImpersonationPopover'
+import { ExposedMaterializedViewDialog } from './ExposedMaterializedViewDialog'
import { InsertButton } from './InsertButton'
import { RealtimeToggleDialog } from './RealtimeToggleDialog'
import { SecurityDefinerViewPopover } from './SecurityDefinerViewPopover'
@@ -60,6 +62,7 @@ export interface GridHeaderActionsProps {
isRefetching: boolean
}
export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProps) => {
+ const { ref } = useParams()
const track = useTrack()
const appSnap = useAppStateSnapshot()
const snap = useTableEditorTableStateSnapshot()
@@ -69,6 +72,8 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
const [realtimeDialogOpen, setRealtimeDialogOpen] = useState(false)
const [indexAdvisorDialogOpen, setIndexAdvisorDialogOpen] = useState(false)
const [isAutofixViewSecurityModalOpen, setIsAutofixViewSecurityModalOpen] = useState(false)
+ const [isExposedMaterializedViewDialogOpen, setIsExposedMaterializedViewDialogOpen] =
+ useState(false)
const [showWarning, setShowWarning] = useQueryState(
'showWarning',
@@ -293,7 +298,49 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
)}
{isMaterializedView && materializedViewHasLints && (
-
+
+ }>
+ Materialized View in API
+
+
+
+
+
+
+
+ Because materialized views do not automatically enforce RLS policies from their
+ source tables, exposing them through the API may reveal data that would
+ otherwise be protected.
+
+
+
+ Since this materialized view is in a schema accessible to API roles, it can be
+ queried through your project's APIs.
+
+
+
+
+
)}
{isForeignTable && table.schema === 'public' && (
diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index e3e000216d6..96a5db87d82 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -591,7 +591,7 @@ const EntityTooltipTrigger = ({
if (materializedViewHasLints) {
tooltipContent = (
<>
- {accessWarning} as this is a Security definer view {learnMoreCTA}.
+ {accessWarning} as materialized view is accessible via API. {learnMoreCTA}.
)
}
From 282a2a22cfc8d6d23e805186b1a5c1a4fcc9ce93 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Tue, 8 Sep 2026 11:32:46 +1000
Subject: [PATCH 014/333] fix(studio): allow pipeline number inputs to be
cleared (#50078)
## What kind of change does this PR introduce?
Bug fix for the pipeline destination form.
## What is the current behavior?
Clearing a numeric field under Advanced settings restores its previous
value immediately, so users cannot replace the value normally.
## What is the new behavior?
Numeric fields use an empty string as their controlled blank value while
editing, so users can clear an existing value before entering its
replacement. Existing field-specific validation messages are preserved
for invalid or empty required values. Maximum staleness remains optional
and can be left blank.
Adds component and schema coverage for all five numeric Advanced
settings fields, including the BigQuery-only fields.
## To test
1. Open Database > Replication and start a new pipeline.
2. Select BigQuery and expand Advanced settings.
3. Clear each numeric field and confirm it can be edited without
reverting to its previous value. Required fields may show their existing
validation message while empty.
4. Enter a replacement value such as `5` and confirm the field accepts
it.
5. Leave a required numeric field blank and confirm the existing
field-specific validation message appears.
## Summary by CodeRabbit
- **Bug Fixes**
- Improved validation for replication destination settings, with clearer
errors when required numeric fields are left empty.
- Validation now updates immediately when numeric values are cleared or
corrected.
- BigQuery connection pool size must be greater than zero.
- Empty maximum staleness values are accepted and handled correctly.
---------
Co-authored-by: Joshen Lim
---
.../DestinationForm/AdvancedSettings.tsx | 4 +-
.../BigQuery/BigQuery.schema.ts | 32 ++++---
.../DestinationForm.schema.test.ts | 42 +++++++++
.../DestinationForm/DestinationForm.schema.ts | 47 ++++++----
.../DestinationForm.schema.utils.ts | 7 ++
.../DestinationForm.utils.test.ts | 24 +++---
.../DestinationForm/AdvancedSettings.test.tsx | 86 +++++++++++++++++++
7 files changed, 203 insertions(+), 39 deletions(-)
create mode 100644 apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.utils.ts
create mode 100644 apps/studio/tests/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.test.tsx
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
index 23b147e9699..13cfcbae2ac 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
@@ -40,9 +40,9 @@ export const AdvancedSettings = ({
form: UseFormReturn
}) => {
const handleNumberChange =
- (field: { onChange: (value?: number) => void }) => (e: ChangeEvent) => {
+ (field: { onChange: (value: number | '') => void }) => (e: ChangeEvent) => {
const parsed = e.target.valueAsNumber
- field.onChange(e.target.value === '' || Number.isNaN(parsed) ? undefined : parsed)
+ field.onChange(e.target.value === '' || Number.isNaN(parsed) ? '' : parsed)
}
return (
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.schema.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.schema.ts
index b6fa2279c49..1777eac3546 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.schema.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.schema.ts
@@ -1,17 +1,29 @@
import * as z from 'zod'
+import {
+ optionalNumberInputSchema,
+ requiredNumberInputSchema,
+} from '../DestinationForm.schema.utils'
+
+const CONNECTION_POOL_SIZE_MIN_ERROR = 'Connection pool size must be greater than 0.'
+
export const BigQueryFormSchema = z.object({
projectId: z.string().optional(),
datasetId: z.string().optional(),
serviceAccountKey: z.string().optional(),
- connectionPoolSize: z
- .number()
- .int()
- .min(1, 'Connection pool size must be greater than 0.')
- .optional(),
- maxStalenessMins: z
- .number()
- .int('Maximum staleness must be a whole number of minutes.')
- .min(0, 'Maximum staleness must be 0 or greater.')
- .optional(),
+ connectionPoolSize: requiredNumberInputSchema(
+ z
+ .number({
+ required_error: CONNECTION_POOL_SIZE_MIN_ERROR,
+ invalid_type_error: CONNECTION_POOL_SIZE_MIN_ERROR,
+ })
+ .int()
+ .min(1, CONNECTION_POOL_SIZE_MIN_ERROR)
+ ),
+ maxStalenessMins: optionalNumberInputSchema(
+ z
+ .number()
+ .int('Maximum staleness must be a whole number of minutes.')
+ .min(0, 'Maximum staleness must be 0 or greater.')
+ ),
})
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.test.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.test.ts
index 374f82c22c2..7d9733fb255 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.test.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.test.ts
@@ -7,9 +7,51 @@ const requiredFields = {
publicationName: 'analytics_publication',
tableSyncCopyMode: 'include_all_tables' as const,
tableSyncCopyTableIds: [],
+ maxFillMs: 10_000,
+ maxTableSyncWorkers: 4,
+ maxCopyConnectionsPerTable: 4,
+ connectionPoolSize: 4,
}
+const requiredNumberFields = [
+ { field: 'maxFillMs', message: 'Batch wait time must be 0 or greater.' },
+ { field: 'maxTableSyncWorkers', message: 'Max table sync workers must be greater than 0.' },
+ {
+ field: 'maxCopyConnectionsPerTable',
+ message: 'Max copy connections per table must be greater than 0.',
+ },
+ { field: 'connectionPoolSize', message: 'Connection pool size must be greater than 0.' },
+] as const
+
describe('DestinationPanelFormSchema', () => {
+ it.each(requiredNumberFields)('uses the existing error for an empty $field field', (testCase) => {
+ const result = DestinationPanelFormSchema.safeParse({
+ ...requiredFields,
+ [testCase.field]: '',
+ })
+
+ expect(result.success).toBe(false)
+ if (!result.success) expect(result.error.issues[0]?.message).toBe(testCase.message)
+ })
+
+ it.each(requiredNumberFields)('rejects a missing $field field', (testCase) => {
+ const { [testCase.field]: _omitted, ...rest } = requiredFields
+
+ const result = DestinationPanelFormSchema.safeParse(rest)
+
+ expect(result.success).toBe(false)
+ })
+
+ it('normalizes an empty maximum staleness to undefined', () => {
+ const result = DestinationPanelFormSchema.safeParse({
+ ...requiredFields,
+ maxStalenessMins: '',
+ })
+
+ expect(result.success).toBe(true)
+ if (result.success) expect(result.data.maxStalenessMins).toBeUndefined()
+ })
+
it.each([0, 1])('accepts a batch wait time of %i milliseconds', (value) => {
const result = DestinationPanelFormSchema.safeParse({
...requiredFields,
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.ts
index dd260642b0f..0ecadb896d0 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.ts
@@ -3,9 +3,14 @@ import * as z from 'zod'
import { AnalyticsBucketFormSchema } from './AnalyticsBucket/AnalyticsBucket.schema'
import { BigQueryFormSchema } from './BigQuery/BigQuery.schema'
import { ClickHouseFormSchema } from './ClickHouse/ClickHouse.schema'
+import { requiredNumberInputSchema } from './DestinationForm.schema.utils'
import { DuckLakeFormSchema } from './DuckLake/DuckLake.schema'
import { SnowflakeFormSchema } from './Snowflake/Snowflake.schema'
+const BATCH_WAIT_TIME_MIN_ERROR = 'Batch wait time must be 0 or greater.'
+const MAX_TABLE_SYNC_WORKERS_MIN_ERROR = 'Max table sync workers must be greater than 0.'
+const MAX_COPY_CONNECTIONS_MIN_ERROR = 'Max copy connections per table must be greater than 0.'
+
const CommonFormSchema = z.object({
name: z.string().min(1, 'Name is required.'),
publicationName: z.string().min(1, 'Publication is required.'),
@@ -16,21 +21,33 @@ const CommonFormSchema = z.object({
'skip_tables',
]),
tableSyncCopyTableIds: z.array(z.string()),
- maxFillMs: z
- .number()
- .int('Batch wait time must be a whole number of milliseconds.')
- .min(0, 'Batch wait time must be 0 or greater.')
- .optional(),
- maxTableSyncWorkers: z
- .number()
- .min(1, 'Max table sync workers must be greater than 0.')
- .int('Max table sync workers must be a whole number.')
- .optional(),
- maxCopyConnectionsPerTable: z
- .number()
- .int()
- .min(1, 'Max copy connections per table must be greater than 0.')
- .optional(),
+ maxFillMs: requiredNumberInputSchema(
+ z
+ .number({
+ required_error: BATCH_WAIT_TIME_MIN_ERROR,
+ invalid_type_error: BATCH_WAIT_TIME_MIN_ERROR,
+ })
+ .int('Batch wait time must be a whole number of milliseconds.')
+ .min(0, BATCH_WAIT_TIME_MIN_ERROR)
+ ),
+ maxTableSyncWorkers: requiredNumberInputSchema(
+ z
+ .number({
+ required_error: MAX_TABLE_SYNC_WORKERS_MIN_ERROR,
+ invalid_type_error: MAX_TABLE_SYNC_WORKERS_MIN_ERROR,
+ })
+ .min(1, MAX_TABLE_SYNC_WORKERS_MIN_ERROR)
+ .int('Max table sync workers must be a whole number.')
+ ),
+ maxCopyConnectionsPerTable: requiredNumberInputSchema(
+ z
+ .number({
+ required_error: MAX_COPY_CONNECTIONS_MIN_ERROR,
+ invalid_type_error: MAX_COPY_CONNECTIONS_MIN_ERROR,
+ })
+ .int()
+ .min(1, MAX_COPY_CONNECTIONS_MIN_ERROR)
+ ),
invalidatedSlotBehavior: z.enum(['error', 'recreate']).optional(),
})
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.utils.ts
new file mode 100644
index 00000000000..68bc432320a
--- /dev/null
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.utils.ts
@@ -0,0 +1,7 @@
+import * as z from 'zod'
+
+export const requiredNumberInputSchema = (schema: z.ZodNumber) =>
+ z.preprocess((value) => (value === '' ? Number.NaN : value), schema)
+
+export const optionalNumberInputSchema = (schema: z.ZodNumber) =>
+ z.preprocess((value) => (value === '' ? undefined : value), schema.optional())
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
index 1e69cba9d97..1d5cf152e3a 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
@@ -22,14 +22,14 @@ const baseDucklakeFormData = {
publicationName: 'pub',
tableSyncCopyMode: 'include_all_tables' as const,
tableSyncCopyTableIds: [],
- maxFillMs: undefined,
- maxTableSyncWorkers: undefined,
- maxCopyConnectionsPerTable: undefined,
+ maxFillMs: 500,
+ maxTableSyncWorkers: 1,
+ maxCopyConnectionsPerTable: 1,
invalidatedSlotBehavior: undefined,
projectId: undefined,
datasetId: undefined,
serviceAccountKey: undefined,
- connectionPoolSize: undefined,
+ connectionPoolSize: 1,
maxStalenessMins: undefined,
warehouseName: undefined,
namespace: undefined,
@@ -55,14 +55,14 @@ const baseSnowflakeFormData = {
publicationName: 'pub',
tableSyncCopyMode: 'include_all_tables' as const,
tableSyncCopyTableIds: [],
- maxFillMs: undefined,
- maxTableSyncWorkers: undefined,
- maxCopyConnectionsPerTable: undefined,
+ maxFillMs: 500,
+ maxTableSyncWorkers: 1,
+ maxCopyConnectionsPerTable: 1,
invalidatedSlotBehavior: undefined,
projectId: undefined,
datasetId: undefined,
serviceAccountKey: undefined,
- connectionPoolSize: undefined,
+ connectionPoolSize: 1,
maxStalenessMins: undefined,
warehouseName: undefined,
namespace: undefined,
@@ -204,14 +204,14 @@ const baseClickHouseFormData = {
publicationName: 'pub',
tableSyncCopyMode: 'include_all_tables' as const,
tableSyncCopyTableIds: [],
- maxFillMs: undefined,
- maxTableSyncWorkers: undefined,
- maxCopyConnectionsPerTable: undefined,
+ maxFillMs: 500,
+ maxTableSyncWorkers: 1,
+ maxCopyConnectionsPerTable: 1,
invalidatedSlotBehavior: undefined,
projectId: undefined,
datasetId: undefined,
serviceAccountKey: undefined,
- connectionPoolSize: undefined,
+ connectionPoolSize: 1,
maxStalenessMins: undefined,
warehouseName: undefined,
namespace: undefined,
diff --git a/apps/studio/tests/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.test.tsx b/apps/studio/tests/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.test.tsx
new file mode 100644
index 00000000000..ea786aad869
--- /dev/null
+++ b/apps/studio/tests/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.test.tsx
@@ -0,0 +1,86 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useForm } from 'react-hook-form'
+import { Form } from 'ui'
+import { describe, expect, it } from 'vitest'
+
+import { AdvancedSettings } from '@/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings'
+import {
+ DestinationPanelFormSchema,
+ type DestinationPanelSchemaType,
+} from '@/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema'
+import { customRender } from '@/tests/lib/custom-render'
+
+const numericFields = [
+ { label: 'Batch wait time', initialValue: 10_000 },
+ { label: 'Table sync workers', initialValue: 4 },
+ { label: 'Initial sync connections per table', initialValue: 4 },
+ { label: 'Connection pool size', initialValue: 4 },
+ { label: 'Maximum staleness', initialValue: 10 },
+]
+
+const TestForm = () => {
+ const form = useForm({
+ resolver: zodResolver(DestinationPanelFormSchema),
+ mode: 'onChange',
+ reValidateMode: 'onChange',
+ defaultValues: {
+ name: 'Warehouse',
+ publicationName: 'publication',
+ tableSyncCopyMode: 'include_all_tables',
+ tableSyncCopyTableIds: [],
+ maxFillMs: 10_000,
+ maxTableSyncWorkers: 4,
+ maxCopyConnectionsPerTable: 4,
+ connectionPoolSize: 4,
+ maxStalenessMins: 10,
+ },
+ })
+ return (
+
+ )
+}
+
+describe('AdvancedSettings', () => {
+ it.each(numericFields)(
+ 'allows $label to be cleared and replaced',
+ async ({ label, initialValue }) => {
+ const user = userEvent.setup()
+ customRender(
---
.../Replication/BatchRestartDialog.tsx | 2 +-
.../DestinationForm.utils.test.ts | 46 +-
.../DestinationForm/DestinationForm.utils.ts | 20 +-
.../NewPublicationPanel.test.tsx | 118 +
.../DestinationForm/NewPublicationPanel.tsx | 112 +-
.../PipelineCostDialog.test.tsx | 4 +-
.../DestinationForm/PublicationSelection.tsx | 22 +-
.../DestinationForm/PublicationsComboBox.tsx | 130 +-
.../TableCopySelection.test.tsx | 98 +-
.../DestinationForm/TableCopySelection.tsx | 129 +-
.../DestinationForm/index.test.tsx | 309 +-
.../DestinationForm/index.tsx | 64 +-
.../DestinationTypeSelection.test.tsx | 6 +-
.../DestinationTypeSelection.tsx | 2 +-
.../Replication/DestinationRow.test.tsx | 13 +-
.../Database/Replication/Destinations.tsx | 27 +-
.../ReplicationPipelineStatus.tsx | 4 +-
.../ReplicationPipelineStatus.types.ts | 14 +-
.../ReplicationPipelineStatus.utils.tsx | 4 +-
.../SlotLagMetrics.test.tsx | 27 +
.../ReplicationPipelineStatus/SlotStatus.tsx | 2 +-
.../RestartCostEstimate.render.test.tsx | 2 +-
.../Replication/RestartTableDialog.tsx | 2 +-
.../NamespaceWithTables.utils.ts | 4 +-
.../NamespaceWithTables/TableRowComponent.tsx | 31 +-
.../useAnalyticsBucketAssociatedEntities.tsx | 16 +-
apps/studio/data/replication/constants.ts | 1 +
.../replication/destination-by-id-query.ts | 2 +-
apps/studio/data/replication/keys.ts | 18 +
.../data/replication/pipeline-by-id-query.ts | 2 +-
.../pipeline-replication-status-query.ts | 2 +-
.../data/replication/pipeline-status-query.ts | 2 +-
.../replication/pipeline-version-query.ts | 3 +-
.../publication-create-mutation.ts | 28 +-
.../publication-delete-mutation.ts | 2 +-
.../replication/publication-names-query.ts | 55 +
.../data/replication/publication-query.ts | 66 +
.../publication-update-mutation.ts | 13 +-
.../data/replication/publications-query.ts | 57 -
apps/studio/data/replication/tables-query.ts | 25 +-
packages/api-types/types/platform.d.ts | 6330 ++++++++++++++++-
41 files changed, 7247 insertions(+), 567 deletions(-)
create mode 100644 apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.test.tsx
create mode 100644 apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.test.tsx
create mode 100644 apps/studio/data/replication/constants.ts
create mode 100644 apps/studio/data/replication/publication-names-query.ts
create mode 100644 apps/studio/data/replication/publication-query.ts
delete mode 100644 apps/studio/data/replication/publications-query.ts
diff --git a/apps/studio/components/interfaces/Database/Replication/BatchRestartDialog.tsx b/apps/studio/components/interfaces/Database/Replication/BatchRestartDialog.tsx
index 1c9948cb6e0..765b929e4c7 100644
--- a/apps/studio/components/interfaces/Database/Replication/BatchRestartDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/BatchRestartDialog.tsx
@@ -26,7 +26,7 @@ interface BatchRestartDialogProps {
tables: ReplicationPipelineTableStatus[]
sourceId?: number
publicationName?: string
- tableSyncCopy?: TableSyncCopyConfig
+ tableSyncCopy?: TableSyncCopyConfig | null
pipelineStatusName?: PipelineStatusName
onRestartStart?: (tableIds: number[]) => void
onRestartComplete?: (tableIds: number[]) => void
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
index 1d5cf152e3a..2b5b503f439 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
@@ -15,7 +15,7 @@ import {
import { getDucklakeValidationIssues } from './DuckLake/DuckLake.utils'
import { getSnowflakeValidationIssues } from './Snowflake/Snowflake.utils'
import type { ReplicationPipelineByIdData } from '@/data/replication/pipeline-by-id-query'
-import type { ReplicationPublication } from '@/data/replication/publications-query'
+import type { ReplicationPublicationData } from '@/data/replication/publication-query'
const baseDucklakeFormData = {
name: 'DuckLake Destination',
@@ -169,30 +169,58 @@ describe('DestinationForm.utils table copy selection', () => {
})
it('drops selected ids that are no longer in the publication', () => {
- const publications = [
- { name: 'analytics', tables: [{ id: 101, schema: 'public', name: 'orders' }] },
- ] as ReplicationPublication[]
+ const publication: ReplicationPublicationData = {
+ name: 'analytics',
+ config: {
+ type: 'all_tables',
+ operations: ['insert'],
+ publish_via_partition_root: false,
+ },
+ tables: [
+ {
+ id: 101,
+ schema: 'public',
+ name: 'orders',
+ kind: 'table',
+ partition_parent_id: null,
+ },
+ ],
+ }
expect(
pruneStaleSelectedTableIds({
mode: 'include_tables',
selectedTableIds: ['101', '202'],
- publications,
+ publication,
publicationName: 'analytics',
})
).toEqual(['101'])
})
it('leaves selected ids untouched for non-selective modes', () => {
- const publications = [
- { name: 'analytics', tables: [{ id: 101, schema: 'public', name: 'orders' }] },
- ] as ReplicationPublication[]
+ const publication: ReplicationPublicationData = {
+ name: 'analytics',
+ config: {
+ type: 'all_tables',
+ operations: ['insert'],
+ publish_via_partition_root: false,
+ },
+ tables: [
+ {
+ id: 101,
+ schema: 'public',
+ name: 'orders',
+ kind: 'table',
+ partition_parent_id: null,
+ },
+ ],
+ }
expect(
pruneStaleSelectedTableIds({
mode: 'include_all_tables',
selectedTableIds: ['202'],
- publications,
+ publication,
publicationName: 'analytics',
})
).toEqual(['202'])
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.ts
index 3ed2cb9a00b..4c7da8776cf 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.ts
@@ -26,7 +26,7 @@ import { type DucklakeApiConfig } from './DuckLake/DuckLake.utils'
import { type SnowflakeApiConfig } from './Snowflake/Snowflake.utils'
import { type ReplicationDestinationByIdData } from '@/data/replication/destination-by-id-query'
import { type ReplicationPipelineByIdData } from '@/data/replication/pipeline-by-id-query'
-import { type ReplicationPublication } from '@/data/replication/publications-query'
+import { type ReplicationPublicationData } from '@/data/replication/publication-query'
import type {
BatchConfig,
BigQueryDestinationConfig,
@@ -203,15 +203,15 @@ export const buildBatchConfig = ({
}
// The set of table ids (as strings, matching form state) currently in the
-// selected publication. Selective table-copy only ever offers/keeps ids that
-// are in this set; ids selected previously that fall out of it are dropped at
-// submit time rather than resolved or displayed.
+// selected publication. Selective table-copy only ever offers ids in this set;
+// previously selected ids that fall out of it are highlighted in the form and
+// dropped at submit time.
export const getPublicationTableIds = (
- publications: ReplicationPublication[],
+ publication: ReplicationPublicationData,
publicationName: string
): Set => {
- const publication = publications.find(({ name }) => name === publicationName)
- return new Set((publication?.tables ?? []).map(({ id }) => String(id)))
+ if (publication.name !== publicationName) return new Set()
+ return new Set(publication.tables.map(({ id }) => String(id)))
}
// Drops selected table ids that are no longer in the current publication.
@@ -220,17 +220,17 @@ export const getPublicationTableIds = (
export const pruneStaleSelectedTableIds = ({
mode,
selectedTableIds,
- publications,
+ publication,
publicationName,
}: {
mode: DestinationPanelSchemaType['tableSyncCopyMode']
selectedTableIds: string[]
- publications: ReplicationPublication[]
+ publication: ReplicationPublicationData
publicationName: string
}): string[] => {
if (mode === 'include_all_tables' || mode === 'skip_all_tables') return selectedTableIds
- const publicationTableIds = getPublicationTableIds(publications, publicationName)
+ const publicationTableIds = getPublicationTableIds(publication, publicationName)
return selectedTableIds.filter((id) => publicationTableIds.has(id))
}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.test.tsx
new file mode 100644
index 00000000000..0268d7180cb
--- /dev/null
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.test.tsx
@@ -0,0 +1,118 @@
+import { fireEvent, screen, waitFor, within } from '@testing-library/react'
+import type { components } from 'api-types'
+import { HttpResponse } from 'msw'
+import { describe, expect, it, vi } from 'vitest'
+
+import { NewPublicationPanel } from './NewPublicationPanel'
+import { customRender } from '@/tests/lib/custom-render'
+import { addAPIMock } from '@/tests/lib/msw'
+
+type ReplicationSourcesResponse = components['schemas']['SourcesResponse_Output']
+type ReadTablesResponse = components['schemas']['ReadTablesResponse_Output']
+type PublicationDetailsResponse = components['schemas']['PublicationDetailsResponse_Output']
+
+const mockSources: ReplicationSourcesResponse = {
+ sources: [
+ {
+ id: 1,
+ name: 'default',
+ tenant_id: 'tenant',
+ config: { host: 'db.internal', name: 'main-db', port: 5432, username: 'etl_user' },
+ },
+ ],
+}
+
+const mockTables: ReadTablesResponse = {
+ tables: [
+ {
+ id: 17487,
+ schema: 'CamelSchema',
+ name: 'MixedCaseTable',
+ kind: 'table',
+ partition_parent_id: null,
+ },
+ ],
+}
+
+const mockPublication: PublicationDetailsResponse = {
+ name: 'MixedCasePublication',
+ config: {
+ type: 'tables',
+ tables: [
+ {
+ id: 17487,
+ schema: 'CamelSchema',
+ name: 'MixedCaseTable',
+ columns: null,
+ row_filter: null,
+ },
+ ],
+ operations: ['insert', 'update', 'delete', 'truncate'],
+ publish_via_partition_root: true,
+ },
+ tables: [
+ {
+ id: 17487,
+ schema: 'CamelSchema',
+ name: 'MixedCaseTable',
+ kind: 'table',
+ partition_parent_id: null,
+ },
+ ],
+}
+
+const mockQueries = () => {
+ addAPIMock({
+ method: 'get',
+ path: '/platform/replication/:ref/sources',
+ response: mockSources,
+ })
+ addAPIMock({
+ method: 'get',
+ path: '/platform/replication/v2/:ref/sources/:source_id/tables',
+ response: mockTables,
+ })
+}
+
+describe('NewPublicationPanel', () => {
+ it('shows table names but submits table ids and hides empty-state guidance after selection', async () => {
+ mockQueries()
+ let requestBody: unknown
+ addAPIMock({
+ method: 'put',
+ path: '/platform/replication/v2/:ref/sources/:source_id/publications/:publication_name',
+ response: async ({ request }) => {
+ requestBody = await request.json()
+ return HttpResponse.json(mockPublication)
+ },
+ })
+
+ customRender(
+
+const defaultValues: FormValues = {
+ name: '',
+ tableIds: [],
+}
+
export const NewPublicationPanel = ({ visible, onClose }: NewPublicationPanelProps) => {
const { ref: projectRef } = useParams()
- const { data: project } = useSelectedProjectQuery()
const sourceId = useReplicationSourceId({ projectRef })
+ const [shouldLoadTables, setShouldLoadTables] = useState(false)
- const { data: tables } = useReplicationTablesQuery({ projectRef, sourceId }, { enabled: visible })
-
- const formId = 'publication-editor'
- const FormSchema = z.object({
- name: z.string().min(1, 'Name is required'),
- tables: z.array(z.string()).min(1, 'At least one table is required'),
+ const {
+ data: tables = [],
+ isPending,
+ isFetching,
+ isError,
+ refetch: refetchTables,
+ } = useReplicationTablesQuery({ projectRef, sourceId }, { enabled: visible && shouldLoadTables })
+ const isLoadingTables = isMetadataListLoading(isPending || isFetching, tables.length)
+ const { handleOpenChange: handleRefreshTablesOnOpen } = useRefreshOnOpen({
+ isEnabled: shouldLoadTables,
+ refetch: refetchTables,
})
- const defaultValues: z.infer = {
- name: '',
- tables: [],
- }
- const form = useForm>({
+ const tableLabelsById = new Map(
+ tables.map((table) => [String(table.id), `${table.schema}.${table.name}`] as const)
+ )
+
+ const form = useForm({
mode: 'onBlur',
reValidateMode: 'onBlur',
resolver: zodResolver(FormSchema),
@@ -60,6 +83,7 @@ export const NewPublicationPanel = ({ visible, onClose }: NewPublicationPanelPro
const { isDirty } = form.formState
const closePanel = (newPublication?: string) => {
+ setShouldLoadTables(false)
form.reset(defaultValues)
onClose(newPublication)
}
@@ -69,7 +93,7 @@ export const NewPublicationPanel = ({ visible, onClose }: NewPublicationPanelPro
onClose: () => closePanel(),
})
- const { mutate: createPublication, isPending: creatingPublication } =
+ const { mutate: createPublication, isPending: isCreatingPublication } =
useCreatePublicationMutation({
onSuccess: (_, vars) => {
toast.success('Successfully created publication')
@@ -77,22 +101,15 @@ export const NewPublicationPanel = ({ visible, onClose }: NewPublicationPanelPro
},
})
- const onSubmit = async (data: z.infer) => {
+ const onSubmit = async (data: FormValues) => {
if (!projectRef) return console.error('Project ref is required')
- if (!project) return console.error('Project is required')
if (!sourceId) return console.error('Source id is required')
- const tables = data.tables.map((table) => {
- const [schema, name] = table.split('.')
- return { schema, name }
- })
-
createPublication({
projectRef,
sourceId,
name: data.name,
- tables,
- connectionString: project.connectionString,
+ tableIds: data.tableIds.map(Number),
})
}
@@ -108,7 +125,7 @@ export const NewPublicationPanel = ({ visible, onClose }: NewPublicationPanelPro
-
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PipelineCostDialog.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PipelineCostDialog.test.tsx
index d7020cc3ec4..a050d8128ca 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PipelineCostDialog.test.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PipelineCostDialog.test.tsx
@@ -7,8 +7,8 @@ import { PipelineCostDialog } from './PipelineCostDialog'
import { customRender } from '@/tests/lib/custom-render'
import { addAPIMock } from '@/tests/lib/msw'
-type CostEstimateResponse = components['schemas']['CostEstimateResponse']
-type ReplicationSourcesResponse = components['schemas']['ReplicationSourcesResponse']
+type CostEstimateResponse = components['schemas']['CostEstimateResponse_Output']
+type ReplicationSourcesResponse = components['schemas']['SourcesResponse_Output']
const tables = [
{
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
index e0ac6818d71..d8005623ba0 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
@@ -1,5 +1,4 @@
import { useParams } from 'common'
-import { useMemo } from 'react'
import { useWatch, type UseFormReturn } from 'react-hook-form'
import { FormControl, FormField } from 'ui'
import { Admonition } from 'ui-patterns/Admonition'
@@ -7,7 +6,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import type { DestinationPanelSchemaType } from './DestinationForm.schema'
import { PublicationsComboBox } from './PublicationsComboBox'
-import { useReplicationPublicationsQuery } from '@/data/replication/publications-query'
+import { useReplicationPublicationNamesQuery } from '@/data/replication/publication-names-query'
import { useReplicationSourceId } from '@/data/replication/sources-query'
type PublicationSelectionProps = {
@@ -24,14 +23,13 @@ export const PublicationSelection = ({
const sourceId = useReplicationSourceId({ projectRef })
- const { data: publications, isSuccess: isSuccessPublications } = useReplicationPublicationsQuery({
- projectRef,
- sourceId,
- })
+ const { data: publications, isSuccess: isSuccessPublications } =
+ useReplicationPublicationNamesQuery({ projectRef, sourceId })
- const publicationNames = useMemo(() => publications?.map((pub) => pub.name) ?? [], [publications])
const isSelectedPublicationMissing =
- isSuccessPublications && !!publicationName && !publicationNames.includes(publicationName)
+ isSuccessPublications &&
+ !!publicationName &&
+ !(publications ?? []).some((publication) => publication.name === publicationName)
return (
{
if (value !== field.value) {
+ // Every per-table selection is scoped to the previously selected
+ // publication's table list, so none of it carries over cleanly to a
+ // different publication — reset it all rather than risk a stale or
+ // coincidentally-matching table id sticking around.
+ form.setValue('tableSyncCopyMode', 'include_all_tables', {
+ shouldDirty: true,
+ shouldValidate: true,
+ })
form.setValue('tableSyncCopyTableIds', [], {
shouldDirty: true,
shouldValidate: true,
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx
index 2e6e8f70144..85ce0544d12 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx
@@ -1,9 +1,8 @@
import { useParams } from 'common'
-import { Check, ChevronsUpDown, Loader2, Plus } from 'lucide-react'
-import { useEffect, useState } from 'react'
+import { Check, ChevronsUpDown, Plus } from 'lucide-react'
+import { useState } from 'react'
import { ControllerRenderProps } from 'react-hook-form'
import {
- Badge,
Button,
cn,
Command,
@@ -18,10 +17,15 @@ import {
PopoverTrigger,
ScrollArea,
} from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { SelectionListState } from 'ui-patterns/SelectionListState'
import type { DestinationPanelSchemaType } from './DestinationForm.schema'
-import { useReplicationPublicationsQuery } from '@/data/replication/publications-query'
+import {
+ isMetadataListErrorVisible,
+ isMetadataListLoading,
+ useRefreshOnOpen,
+} from './useRefreshOnOpen'
+import { useReplicationPublicationNamesQuery } from '@/data/replication/publication-names-query'
interface PublicationsComboBoxProps {
sourceId?: number
@@ -37,41 +41,38 @@ export const PublicationsComboBox = ({
const { ref: projectRef } = useParams()
const [searchTerm, setSearchTerm] = useState('')
- const [dropdownOpen, setDropdownOpen] = useState(false)
- const [selectedPublication, setSelectedPublication] = useState(field?.value || '')
+ const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+ const selectedPublication = field.value || ''
const {
data: publications = [],
isPending,
isFetching,
+ isError,
refetch: refetchPublications,
- } = useReplicationPublicationsQuery({ projectRef, sourceId })
- const isLoadingPublications = isPending || isFetching
- const showLoadingState = isLoadingPublications && publications.length === 0
+ } = useReplicationPublicationNamesQuery({ projectRef, sourceId })
+ const isLoadingStateVisible = isMetadataListLoading(isPending || isFetching, publications.length)
+ const isErrorStateVisible = isMetadataListErrorVisible(isError, publications.length)
+ const { handleOpenChange: handleRefreshPublicationsOnOpen } = useRefreshOnOpen({
+ isEnabled: projectRef !== undefined && sourceId !== undefined,
+ refetch: refetchPublications,
+ })
function handlePublicationSelect(pub: string) {
- setSelectedPublication(pub)
- setDropdownOpen(false)
+ setIsDropdownOpen(false)
field.onChange(pub)
}
- useEffect(() => {
- setSelectedPublication(field?.value || '')
- }, [field?.value])
-
return (
{
- setDropdownOpen(open)
- if (open) {
- if (typeof projectRef !== 'undefined' && typeof sourceId !== 'undefined') {
- refetchPublications()
- }
- }
+ setIsDropdownOpen(open)
+ handleRefreshPublicationsOnOpen(open)
if (!open && field?.onBlur) {
+ setSearchTerm('')
field.onBlur()
}
}}
@@ -79,19 +80,25 @@ export const PublicationsComboBox = ({
-
+
- No publications found
-
- {showLoadingState && (
-
- No publications found
)}
-
- {publications.length === 0 && !showLoadingState && (
-
- No publications available
- Publications with no tables are hidden
-
- )}
- 7 ? 'h-[210px]' : ''}
- onWheel={(e) => e.stopPropagation()}
- >
- {publications.map((pub) => (
- {
- handlePublicationSelect(pub.name)
- }}
- onClick={() => {
- handlePublicationSelect(pub.name)
- }}
- >
- {pub.name}
-
-
- {pub.tables.length} {pub.tables.length === 1 ? 'table' : 'tables'}
-
+
+ 7 ? 'h-[210px]' : ''}
+ onWheel={(e) => e.stopPropagation()}
+ >
+ {publications.map((pub) => (
+ handlePublicationSelect(pub.name)}
+ onClick={() => handlePublicationSelect(pub.name)}
+ >
+ {pub.name}
{selectedPublication === pub.name && (
-
- ))}
-
-
+
+ ))}
+
+
+ )}
(mockPublications),
+ path: '/platform/replication/v2/:ref/sources/:source_id/publications/:publication_name',
+ response: () => HttpResponse.json(mockPublicationDetails),
})
}
const mockPublicationsError = () => {
addAPIMock({
method: 'get',
- path: '/platform/replication/:ref/sources/:source_id/publications',
+ path: '/platform/replication/v2/:ref/sources/:source_id/publications/:publication_name',
response: () => HttpResponse.json({ message: 'Boom' }, { status: 500 }),
})
}
@@ -63,11 +69,19 @@ const mockPublicationsError = () => {
const mockPublicationsPending = () => {
addAPIMock({
method: 'get',
- path: '/platform/replication/:ref/sources/:source_id/publications',
+ path: '/platform/replication/v2/:ref/sources/:source_id/publications/:publication_name',
response: () => new Promise(() => {}),
})
}
+const mockTables = (tables: ReadTablesResponse['tables']) => {
+ addAPIMock({
+ method: 'get',
+ path: '/platform/replication/v2/:ref/sources/:source_id/tables',
+ response: () => HttpResponse.json({ tables }),
+ })
+}
+
const TableCopySelectionHarness = ({
editMode,
mode = 'include_all_tables',
@@ -98,11 +112,14 @@ describe('TableCopySelection', () => {
mockSourcesEndpoint()
mockPublicationsSuccess()
- customRender(
@@ -38,25 +43,25 @@ export const TableCopySelection = ({ form, editMode }: TableCopySelectionProps)
})
const {
- data: publications = [],
- isPending: isLoadingPublications,
+ data: selectedPublication,
+ isPending,
+ isFetching,
isError: isErrorPublications,
- } = useReplicationPublicationsQuery({ projectRef, sourceId })
+ isSuccess: isSuccessPublication,
+ refetch: refetchPublication,
+ } = useReplicationPublicationQuery({ projectRef, sourceId, publicationName })
+ const isLoadingPublicationTables =
+ !!publicationName && isMetadataValueLoading(isPending || isFetching, selectedPublication)
+ const { handleOpenChange: handleRefreshPublicationOnOpen } = useRefreshOnOpen({
+ isEnabled: !!publicationName,
+ refetch: refetchPublication,
+ })
- // Only publication tables are ever selectable or displayed by name. A table
- // id is never resolved outside of the publication response — there's no
- // other source for a name to come from without a separate, source-wide
- // catalog fetch, which selective table-copy doesn't need.
- const publicationTables = useMemo(() => {
- const publication = publications.find(({ name }) => name === publicationName)
- return [...(publication?.tables ?? [])].sort((a, b) =>
- tableLabel(a).localeCompare(tableLabel(b))
- )
- }, [publicationName, publications])
-
- const publicationTableIds = useMemo(
- () => getPublicationTableIds(publications, publicationName),
- [publications, publicationName]
+ const publicationTables = [...(selectedPublication?.tables ?? [])].sort((a, b) =>
+ tableLabel(a).localeCompare(tableLabel(b))
+ )
+ const publicationTableIds = new Set(
+ (selectedPublication?.tables ?? []).map(({ id }) => String(id))
)
const tableLabelsById = new Map(
publicationTables.map((table) => [String(table.id), tableLabel(table)])
@@ -65,9 +70,16 @@ export const TableCopySelection = ({ form, editMode }: TableCopySelectionProps)
publicationTableIds.has(id)
).length
const staleSelectedCount =
- isLoadingPublications || isErrorPublications
+ !isSuccessPublication || isLoadingPublicationTables || isErrorPublications
? 0
: tableSyncCopyTableIds.filter((id) => !publicationTableIds.has(id)).length
+ const { data: sourceTables = [] } = useReplicationTablesQuery(
+ { projectRef, sourceId },
+ { enabled: staleSelectedCount > 0 }
+ )
+ const sourceTableLabelsById = new Map(
+ sourceTables.map((table) => [String(table.id), tableLabel(table)])
+ )
const tableCount = publicationTables.length
return (
@@ -84,7 +96,7 @@ export const TableCopySelection = ({ form, editMode }: TableCopySelectionProps)
{staleSelectedCount > 0 && (
-
-
- {staleSelectedCount === 1 ? 'It' : 'They'} will be excluded from this pipeline's
- initial sync settings when you save.
-
-
+
+ Some tables are no longer in the publication.
+
)}
)}
/>
)}
+
+ {editMode && isSelectiveMode(tableSyncCopyMode) && (
+
+ * Changes only affect tables whose initial sync has not completed. Use Reset table to sync
+ existing rows again.
+
+ )}
)
}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx
index d6313a5772d..df407d369c8 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx
@@ -1,13 +1,23 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import type { components } from 'api-types'
+import { HttpResponse } from 'msw'
import type { ButtonHTMLAttributes, PropsWithChildren } from 'react'
import type { UseFormReturn } from 'react-hook-form'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import type { DestinationPanelSchemaType } from './DestinationForm.schema'
import { DestinationForm } from './index'
+import { customRender } from '@/tests/lib/custom-render'
+import { addAPIMock } from '@/tests/lib/msw'
+
+type DestinationResponse = components['schemas']['DestinationResponse_Output']
+type PipelineResponse = components['schemas']['PipelineResponse_Output']
+type PublicationDetailsResponse = components['schemas']['PublicationDetailsResponse_Output']
+type PublicationNamesResponse = components['schemas']['ReadPublicationsResponse_Output']
+type ProjectSettingsResponse = components['schemas']['ProjectSettingsResponse']
+type SourcesResponse = components['schemas']['SourcesResponse_Output']
const mocks = vi.hoisted(() => ({
- refetchPublications: vi.fn(),
resetValidation: vi.fn(),
submitPipeline: vi.fn(),
validateConfiguration: vi.fn(),
@@ -26,14 +36,55 @@ const existingDestination = {
statusName: 'started',
}
-const sourcesData = { sources: [{ id: 42, name: 'project-ref' }] }
-const publications = [
- {
- name: 'analytics',
- tables: [{ id: 101, schema: 'public', name: 'orders' }],
+const sourcesData: SourcesResponse = {
+ sources: [
+ {
+ id: 42,
+ name: 'project-ref',
+ tenant_id: 'tenant',
+ config: { host: 'db.internal', name: 'postgres', port: 5432, username: 'postgres' },
+ },
+ ],
+}
+const publication: PublicationDetailsResponse = {
+ name: 'analytics',
+ config: {
+ type: 'tables',
+ tables: [{ id: 101, schema: 'public', name: 'orders', columns: null, row_filter: null }],
+ operations: ['insert', 'update', 'delete', 'truncate'],
+ publish_via_partition_root: false,
},
-]
-const destinationData = {
+ tables: [
+ {
+ id: 101,
+ schema: 'public',
+ name: 'orders',
+ kind: 'table',
+ partition_parent_id: null,
+ },
+ ],
+}
+const secondaryPublication: PublicationDetailsResponse = {
+ name: 'reporting',
+ config: {
+ type: 'tables',
+ tables: [{ id: 202, schema: 'public', name: 'invoices', columns: null, row_filter: null }],
+ operations: ['insert'],
+ publish_via_partition_root: false,
+ },
+ tables: [
+ {
+ id: 202,
+ schema: 'public',
+ name: 'invoices',
+ kind: 'table',
+ partition_parent_id: null,
+ },
+ ],
+}
+const destinationData: DestinationResponse = {
+ id: 7,
+ tenant_id: 'tenant',
name: 'Analytics',
config: {
big_query: {
@@ -43,48 +94,82 @@ const destinationData = {
},
},
}
-const pipelineData = {
+let pipelineTableIds = [101, 999]
+const getPipelineData = (): PipelineResponse => ({
+ id: 8,
+ tenant_id: 'tenant',
+ source_id: 42,
+ source_name: 'postgres',
+ destination_id: 7,
+ destination_name: 'Analytics',
+ replicator_id: 9,
config: {
publication_name: 'analytics',
- table_sync_copy: { type: 'include_tables' as const, table_ids: [101, 999] },
+ table_sync_copy: { type: 'include_tables', table_ids: pipelineTableIds },
batch: existingBatch,
max_table_sync_workers: 4,
max_copy_connections_per_table: 1,
},
+})
+const projectSettings: ProjectSettingsResponse = {
+ app_config: {
+ db_schema: 'public',
+ endpoint: 'project-ref.supabase.co',
+ storage_endpoint: 'project-ref.supabase.co/storage/v1',
+ },
+ cloud_provider: 'AWS',
+ db_dns_name: 'db.project-ref.supabase.co',
+ db_host: 'db.project-ref.supabase.co',
+ db_ip_addr_config: 'ipv4',
+ db_name: 'postgres',
+ db_port: 5432,
+ db_user: 'postgres',
+ inserted_at: '2026-08-28T00:00:00Z',
+ name: 'project-ref',
+ ref: 'project-ref',
+ region: 'ap-southeast-1',
+ ssl_enforced: true,
+ status: 'ACTIVE_HEALTHY',
}
-const projectSettings = { region: 'ap-southeast-1' }
-vi.mock('common', () => ({ useParams: () => ({ ref: 'project-ref' }) }))
+vi.mock('common', async (importOriginal) => {
+ const actual = await importOriginal()
+ return { ...actual, useParams: () => ({ ref: 'project-ref' }) }
+})
vi.mock('framer-motion', () => ({
AnimatePresence: ({ children }: PropsWithChildren) => children,
motion: { div: ({ children }: PropsWithChildren) => {children} },
}))
-vi.mock('ui', () => ({
- Button: ({
- children,
- loading: _loading,
- ...props
- }: ButtonHTMLAttributes & { loading?: boolean }) => (
-
- ),
- cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
- DialogSectionSeparator: () => null,
- Form: ({ children }: PropsWithChildren) => children,
- Select: ({ children }: PropsWithChildren) => {children},
- SelectContent: ({ children }: PropsWithChildren) => {children},
- SelectItem: ({ children }: PropsWithChildren) => {children},
- SelectTrigger: ({ children }: PropsWithChildren) => {children},
- SelectValue: () => null,
- SheetFooter: ({ children }: PropsWithChildren) => {children},
- SheetSection: ({ children }: PropsWithChildren) => {children},
- Tooltip: ({ children }: PropsWithChildren) => {children},
- TooltipContent: ({ children }: PropsWithChildren) => {children},
- TooltipTrigger: ({ children }: PropsWithChildren) => {children},
-}))
+vi.mock('ui', async (importOriginal) => {
+ const actual = await importOriginal()
+
+ return {
+ ...actual,
+ Button: ({
+ children,
+ loading: _loading,
+ ...props
+ }: ButtonHTMLAttributes & { loading?: boolean }) => (
+
+ ),
+ DialogSectionSeparator: () => null,
+ Form: ({ children }: PropsWithChildren) => children,
+ Select: ({ children }: PropsWithChildren) => {children},
+ SelectContent: ({ children }: PropsWithChildren) => {children},
+ SelectItem: ({ children }: PropsWithChildren) => {children},
+ SelectTrigger: ({ children }: PropsWithChildren) => {children},
+ SelectValue: () => null,
+ SheetFooter: ({ children }: PropsWithChildren) => {children},
+ SheetSection: ({ children }: PropsWithChildren) => {children},
+ Tooltip: ({ children }: PropsWithChildren) => {children},
+ TooltipContent: ({ children }: PropsWithChildren) => {children},
+ TooltipTrigger: ({ children }: PropsWithChildren) => {children},
+ }
+})
vi.mock('ui-patterns/Admonition', () => ({
Admonition: ({ children }: PropsWithChildren) => {children},
@@ -119,45 +204,31 @@ vi.mock('@/hooks/misc/useCheckPermissions', () => ({
useAsyncCheckPermissions: () => ({ can: false }),
}))
-vi.mock('@/data/api-keys/api-keys-query', () => ({ useAPIKeys: () => ({ data: undefined }) }))
-
-vi.mock('@/data/config/project-settings-v2-query', () => ({
- useProjectSettingsV2Query: () => ({ data: projectSettings }),
-}))
-
-vi.mock('@/data/replication/sources-query', () => ({
- useReplicationSourcesQuery: () => ({ data: sourcesData }),
- useReplicationSourceId: () => sourcesData.sources[0]?.id,
-}))
-
-vi.mock('@/data/replication/publications-query', () => ({
- useReplicationPublicationsQuery: () => ({
- data: publications,
- isPending: false,
- isError: false,
- isSuccess: true,
- refetch: mocks.refetchPublications,
- }),
-}))
-
-vi.mock('@/data/replication/destination-by-id-query', () => ({
- useReplicationDestinationByIdQuery: () => ({
- data: destinationData,
- isError: false,
- isSuccess: true,
- }),
-}))
-
-vi.mock('@/data/replication/pipeline-by-id-query', () => ({
- useReplicationPipelineByIdQuery: () => ({
- data: pipelineData,
- isError: false,
- isSuccess: true,
- }),
-}))
-
vi.mock('./DestinationNameInput', () => ({ DestinationNameInput: () => null }))
-vi.mock('./PublicationSelection', () => ({ PublicationSelection: () => null }))
+vi.mock('./PublicationSelection', () => ({
+ PublicationSelection: ({ form }: { form: UseFormReturn }) => (
+
+ ),
+}))
vi.mock('./TableCopySelection', () => ({
TableCopySelection: ({ form }: { form: UseFormReturn }) => (
{form.formState.errors.tableSyncCopyTableIds?.message}
@@ -181,15 +252,52 @@ vi.mock('@/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketS
describe('DestinationForm edit submission', () => {
beforeEach(() => {
vi.clearAllMocks()
- pipelineData.config.table_sync_copy.table_ids = [101, 999]
+ pipelineTableIds = [101, 999]
mocks.submitPipeline.mockResolvedValue(undefined)
mocks.validateConfiguration.mockResolvedValue({ canContinue: true, warnings: [] })
+
+ addAPIMock({
+ method: 'get',
+ path: '/platform/replication/:ref/sources',
+ response: () => HttpResponse.json(sourcesData),
+ })
+ addAPIMock({
+ method: 'get',
+ path: '/platform/replication/v2/:ref/sources/:source_id/publications',
+ response: () =>
+ HttpResponse.json({
+ publications: [{ name: publication.name }, { name: secondaryPublication.name }],
+ }),
+ })
+ addAPIMock({
+ method: 'get',
+ path: '/platform/replication/v2/:ref/sources/:source_id/publications/:publication_name',
+ response: ({ params }) =>
+ HttpResponse.json(
+ params.publication_name === secondaryPublication.name ? secondaryPublication : publication
+ ),
+ })
+ addAPIMock({
+ method: 'get',
+ path: '/platform/replication/:ref/destinations/:destination_id',
+ response: () => HttpResponse.json(destinationData),
+ })
+ addAPIMock({
+ method: 'get',
+ path: '/platform/replication/:ref/pipelines/:pipeline_id',
+ response: () => HttpResponse.json(getPipelineData()),
+ })
+ addAPIMock({
+ method: 'get',
+ path: '/platform/projects/:ref/settings',
+ response: () => HttpResponse.json(projectSettings),
+ })
})
it('bypasses create validation and submits the pruned table policy with the existing batch', async () => {
const onClose = vi.fn()
- render(
+ customRender(
{
/>
)
- fireEvent.click(screen.getByRole('button', { name: 'Apply and restart pipeline' }))
+ const submitButton = screen.getByRole('button', { name: 'Apply and restart pipeline' })
+ await waitFor(() => expect(submitButton).toBeEnabled())
+ fireEvent.click(submitButton)
await waitFor(() => expect(mocks.submitPipeline).toHaveBeenCalledOnce())
@@ -216,9 +326,9 @@ describe('DestinationForm edit submission', () => {
})
it('rejects an edit when every selected table has left the publication', async () => {
- pipelineData.config.table_sync_copy.table_ids = [999]
+ pipelineTableIds = [999]
- render(
+ customRender(
{
/>
)
- fireEvent.click(screen.getByRole('button', { name: 'Apply and restart pipeline' }))
+ const submitButton = screen.getByRole('button', { name: 'Apply and restart pipeline' })
+ await waitFor(() => expect(submitButton).toBeEnabled())
+ fireEvent.click(submitButton)
expect(await screen.findByText('Select at least one table')).toBeInTheDocument()
expect(mocks.validateConfiguration).not.toHaveBeenCalled()
expect(mocks.submitPipeline).not.toHaveBeenCalled()
})
+
+ it('submits against the newly loaded publication immediately after switching', async () => {
+ const onClose = vi.fn()
+
+ customRender(
+ >({
- mode: 'onChange',
+ mode: 'onSubmit',
reValidateMode: 'onChange',
resolver: zodResolver(
FormSchema.superRefine((data, ctx) => {
@@ -196,18 +193,10 @@ export const DestinationForm = ({
})
}
- const selectedPublicationTableIds = pruneStaleSelectedTableIds({
- mode: data.tableSyncCopyMode,
- selectedTableIds: data.tableSyncCopyTableIds,
- publications,
- publicationName: data.publicationName,
- })
-
if (
- isSuccessPublications &&
(data.tableSyncCopyMode === 'include_tables' ||
data.tableSyncCopyMode === 'skip_tables') &&
- selectedPublicationTableIds.length === 0
+ data.tableSyncCopyTableIds.length === 0
) {
addRequiredFieldError('tableSyncCopyTableIds', 'Select at least one table')
}
@@ -253,10 +242,13 @@ export const DestinationForm = ({
const { isDirty } = form.formState
const publicationName = useWatch({ control: form.control, name: 'publicationName' })
+ const { data: selectedPublication, isSuccess: isSuccessPublication } =
+ useReplicationPublicationQuery({ projectRef, sourceId, publicationName })
- const publicationNames = useMemo(() => publications?.map((pub) => pub.name) ?? [], [publications])
const isSelectedPublicationMissing =
- isSuccessPublications && !!publicationName && !publicationNames.includes(publicationName)
+ isSuccessPublicationNames &&
+ !!publicationName &&
+ !publicationNames.some(({ name }) => name === publicationName)
const allValidationFailures = [...destinationValidationFailures, ...pipelineValidationFailures]
const hasValidationFailures = allValidationFailures.some((f) => f.failure_type === 'critical')
@@ -272,16 +264,16 @@ export const DestinationForm = ({
}),
[pendingFormValues]
)
- const pendingPublicationTables = useMemo(
- () =>
- publications.find(({ name }) => name === pendingFormValues?.publicationName)?.tables ?? [],
- [pendingFormValues?.publicationName, publications]
- )
+ const pendingPublicationTables =
+ selectedPublication && selectedPublication.name === pendingFormValues?.publicationName
+ ? selectedPublication.tables
+ : []
const isSubmitDisabled =
isSaving ||
!isExistingConfigReady ||
- !isSuccessPublications ||
+ !isSuccessPublicationNames ||
+ (!!publicationName && !isSuccessPublication) ||
isSelectedPublicationMissing ||
(!editMode && hasNoAvailableDestinations)
@@ -307,7 +299,7 @@ export const DestinationForm = ({
}
const onSubmit = async (rawData: z.infer) => {
- if (!isSuccessPublications) {
+ if (!isSuccessPublication || !selectedPublication) {
toast.error('Publication tables are unavailable. Refresh and try again.')
return
}
@@ -319,11 +311,19 @@ export const DestinationForm = ({
tableSyncCopyTableIds: pruneStaleSelectedTableIds({
mode: rawData.tableSyncCopyMode,
selectedTableIds: rawData.tableSyncCopyTableIds,
- publications,
+ publication: selectedPublication,
publicationName: rawData.publicationName,
}),
}
+ if (
+ (data.tableSyncCopyMode === 'include_tables' || data.tableSyncCopyMode === 'skip_tables') &&
+ data.tableSyncCopyTableIds.length === 0
+ ) {
+ form.setError('tableSyncCopyTableIds', { message: 'Select at least one table' })
+ return
+ }
+
if (selectedType === 'BigQuery') {
const jsonIssue = getBigQueryValidationIssues(data, { secretsOptional: editMode }).find(
(issue) => issue.message === BIGQUERY_SERVICE_ACCOUNT_JSON_MESSAGE
@@ -427,12 +427,6 @@ export const DestinationForm = ({
}
}, [visible, defaultValues, form, isDirty, resetValidation])
- useEffect(() => {
- if (visible && projectRef && sourceId) {
- refetchPublications()
- }
- }, [visible, projectRef, sourceId, refetchPublications])
-
return (
<>
@@ -544,6 +538,10 @@ export const DestinationForm = ({
visible={publicationPanelVisible}
onClose={(newPublication?: string) => {
if (newPublication) {
+ form.setValue('tableSyncCopyMode', 'include_all_tables', {
+ shouldDirty: true,
+ shouldValidate: true,
+ })
form.setValue('tableSyncCopyTableIds', [], {
shouldDirty: true,
shouldValidate: true,
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
index a84bf5b1ae4..178ddfbab7d 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
@@ -8,9 +8,9 @@ import { DestinationTypeSelection } from './DestinationTypeSelection'
import { customRender } from '@/tests/lib/custom-render'
import { addAPIMock } from '@/tests/lib/msw'
-type ReplicationSourcesResponse = components['schemas']['ReplicationSourcesResponse']
-type ReplicationPipelinesResponse = components['schemas']['ReplicationPipelinesResponse']
-type ReplicationDestinationResponse = components['schemas']['ReplicationDestinationResponse']
+type ReplicationSourcesResponse = components['schemas']['SourcesResponse_Output']
+type ReplicationPipelinesResponse = components['schemas']['PipelinesResponse_Output']
+type ReplicationDestinationResponse = components['schemas']['DestinationResponse_Output']
mockAnimationsApi()
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
index 9c7c902b7b7..8ce8a4b5167 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
@@ -157,7 +157,7 @@ export const DestinationTypeSelection = () => {
>
diff --git a/apps/studio/data/replication/publication-create-mutation.ts b/apps/studio/data/replication/publication-create-mutation.ts
index 8095d2382c8..bba8eab6d24 100644
--- a/apps/studio/data/replication/publication-create-mutation.ts
+++ b/apps/studio/data/replication/publication-create-mutation.ts
@@ -10,10 +10,11 @@ export type CreatePublicationParams = {
sourceId: number
name: string
tableIds: number[]
+ publishViaPartitionRoot?: boolean
}
async function createPublication(
- { projectRef, sourceId, name, tableIds }: CreatePublicationParams,
+ { projectRef, sourceId, name, tableIds, publishViaPartitionRoot = true }: CreatePublicationParams,
signal?: AbortSignal
) {
if (!projectRef) throw new Error('projectRef is required')
@@ -26,7 +27,7 @@ async function createPublication(
type: 'tables',
tables: tableIds.map((id) => ({ id })),
operations: ['insert', 'update', 'delete', 'truncate'],
- publish_via_partition_root: true,
+ publish_via_partition_root: publishViaPartitionRoot,
},
signal,
}
From ac0d4563d657e1399e948178bec6c49dbe41caae Mon Sep 17 00:00:00 2001
From: Joshen Lim
Date: Tue, 8 Sep 2026 13:28:32 +0800
Subject: [PATCH 018/333] Add GH token for fetchAgentSkills to mitigate rate
limits (#50106)
## Context
As per PR title - just a nice to have as our `www` preview builds
occasionally fail, likely due to rate limits on the GH API
Env var `AGENT_SKILLS_GITHUB_TOKEN` has been added to the `www` app on
Vercel
## Summary by CodeRabbit
* **Chores**
* Added optional GitHub authentication support for retrieving agent
skills.
* Preserved existing request behavior when no authentication token is
provided.
---
apps/www/scripts/fetchAgentSkills.mjs | 9 +++++++--
apps/www/turbo.jsonc | 1 +
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/apps/www/scripts/fetchAgentSkills.mjs b/apps/www/scripts/fetchAgentSkills.mjs
index 36a70cf87f0..ff09f5c350c 100644
--- a/apps/www/scripts/fetchAgentSkills.mjs
+++ b/apps/www/scripts/fetchAgentSkills.mjs
@@ -8,7 +8,8 @@
* URLs — no rewriting needed on this side.
*
* Spec: https://github.com/agentskills/agentskills/pull/254
- * Runs unauthenticated — public repo, build-time only.
+ * Uses AGENT_SKILLS_GITHUB_TOKEN if set to avoid GitHub's unauthenticated
+ * rate limit (60 req/hr per IP, shared across Vercel build machines).
*/
import { promises as fs } from 'node:fs'
@@ -20,7 +21,11 @@ const OUT_DIR = join(__dirname, '..', 'public', '.well-known', 'agent-skills')
const REPO = 'supabase/agent-skills'
async function fetchJson(url) {
- const res = await fetch(url, { headers: { 'User-Agent': 'supabase-www-build' } })
+ const headers = { 'User-Agent': 'supabase-www-build' }
+ if (process.env.AGENT_SKILLS_GITHUB_TOKEN) {
+ headers['Authorization'] = `Bearer ${process.env.AGENT_SKILLS_GITHUB_TOKEN}`
+ }
+ const res = await fetch(url, { headers })
if (!res.ok) throw new Error(`GET ${url} → ${res.status}`)
return res.json()
}
diff --git a/apps/www/turbo.jsonc b/apps/www/turbo.jsonc
index 09078f17514..a42001db674 100644
--- a/apps/www/turbo.jsonc
+++ b/apps/www/turbo.jsonc
@@ -76,6 +76,7 @@
"FORCE_ASSET_CDN",
"ASSET_CDN_S3_ENDPOINT",
"SITE_NAME",
+ "AGENT_SKILLS_GITHUB_TOKEN",
"LUMA_API_KEY",
"LUMA_HACKATHONS_API_KEY",
"NEXT_RUNTIME",
From fb28b70fe729973d5043bd8695a7b8088489dc71 Mon Sep 17 00:00:00 2001
From: Wendie Cheung <49030266+wendeh@users.noreply.github.com>
Date: Tue, 8 Sep 2026 15:49:10 +1000
Subject: [PATCH 019/333] Update PostgresConf SJC 2026 contest page content
(#50112)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Content update to a `/go` landing page.
## What is the current behavior?
The PostgresConf San Jose 2026 contest page
(`supabase.com/go/postgresconf-sjc-2026/contest`) shows a "Learn about
Multigres" CTA linking to multigres.com, a "Conference Talk: Thursday,
April 23, 2026 2:30pm PDT" line, and a contest entry deadline of Monday,
May 4, 2026.
## What is the new behavior?
- Removed the outdated "Conference Talk" date/time line
- Changed the CTA to "Watch the webinar," linking to the recording
(https://www.youtube.com/watch?v=ahhQ0n1SHiQ)
- Updated the contest entry deadline to Monday, September 14, 2026 at
12:00 PM PST
## Additional context
Content-only change to
`apps/www/_go/events/postgresconf-sjc-2026/contest.tsx`.
## Summary by CodeRabbit
- **Content Updates**
- Updated the event page to link to the webinar recording with a “Watch
the webinar” label.
- Changed the contest deadline to September 14, 2026, at 12:00 PM PST.
- Removed the talk description from the event page.
Co-authored-by: Wendie Cheung
Co-authored-by: Claude Sonnet 5
---
apps/www/_go/events/postgresconf-sjc-2026/contest.tsx | 11 +++++++----
1 file changed, 7 insertions(+), 4 deletions(-)
diff --git a/apps/www/_go/events/postgresconf-sjc-2026/contest.tsx b/apps/www/_go/events/postgresconf-sjc-2026/contest.tsx
index 89a8176ed74..671ba223c64 100644
--- a/apps/www/_go/events/postgresconf-sjc-2026/contest.tsx
+++ b/apps/www/_go/events/postgresconf-sjc-2026/contest.tsx
@@ -39,7 +39,6 @@ const page: GoPageInput = {
{
type: 'single-column',
title: 'Multigres: One stop PostgreSQL Management and Scaling',
- description: 'Conference Talk: Thursday, April 23, 2026 2:30pm PDT',
children: (
@@ -86,8 +85,12 @@ const page: GoPageInput = {