mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
## What PR 6 of the SQL-editor "query source (Database vs Logs)" stack (builds on the merged PR 5, #48414). Adds the user-facing toolbar surface for the logs query source and consolidates the SQL-editor toolbar into a single **source menu**. Everything stays behind `sqlEditorLogsSource` + `otelLegacyLogs` (dual-flag gated); with the flags off the toolbar is unchanged. ## Changes - **Consolidated source menu** (`QuerySourceMenu`) — one `Database ▾` / `Logs ▾` dropdown that both labels the snippet's source and hosts the source-specific controls as flyout submenus: - Database: database selector (`Primary` / read replicas), `Run as` (role impersonation), and `Row limit`. - Logs: `Time range` — the same relative presets as the Logs Explorer plus a `Custom range…` calendar dialog. - **Source is immutable** — the Database/Logs rows aren't a toggle. An existing (materialized) snippet opens a *fresh* tab of the target source (never reinterpreting a query against the wrong backend); a blank new tab re-flavors in place. Extracted as the pure, unit-tested `resolveSourceSwitch`. - **New-snippet-with-source** threaded through `/sql/new?source=`, the nav "Create a new logs query" entry, and the duplicate flow. Logs snippets hide the (db-dialect) Export action. - **Run-affordance guard** — the Run button is disabled + annotated for a logs snippet on a non-ClickHouse org (sits above PR 5's execution short-circuit). - **Retention entitlement gating** — both preset and custom logs ranges past `log.retention_days` surface the upgrade prompt instead of applying silently. Prettify is disabled for logs (sql-formatter mangles ClickHouse). ## Tests - `querySource.test.ts` — `logDateRangesEqual` (structural relative/absolute matching, incl. the "Last hour" vs "Last 1 hour" label case). - `QuerySourceMenu.utils.test.ts` — `resolveSourceSwitch` push-vs-replace / no-op behavior. `pnpm --filter studio typecheck` · `lint:ratchet` · Prettier · SQL editor suite (307 tests) all green. ## For reviewers To test manually, enable the `sqlEditorLogsSource` feature flag for yourself on local/staging. There is no nav for Log SQL snippets currently (that is by design, this PR is big enough as-is), so to check an existing logs snippet, you can create one using the existing Logs Explorer, copy its UUID, and force navigate to that snippet in the SQL editor via URL. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added support for creating and switching between database and logs queries. * Added log time-range presets and custom date-range selection. * Added database, run-as role, and row-limit controls. * Added read-replica selection, including options to create a new replica when available. * **Improvements** * Added clearer explanations when query execution is unavailable. * Disabled SQL formatting and query export where unsupported for logs queries. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import { useParams } from 'common'
|
|
import { useMemo } from 'react'
|
|
|
|
import {
|
|
DEFAULT_LOG_DATE_RANGE,
|
|
getSnippetSource,
|
|
parseSqlSnippetSource,
|
|
type QuerySource,
|
|
type SqlSnippetSource,
|
|
} from './querySource'
|
|
import { useSqlEditorSessionSnapshot } from '@/state/sql-editor/sql-editor-session-state'
|
|
import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
|
|
|
|
/**
|
|
* Resolves where a snippet's query runs. A `log_sql` snippet targets the logs
|
|
* backend and carries its session time range (falling back to the default when
|
|
* the user hasn't picked one); every other snippet targets the database. Source
|
|
* is derived from the snippet's content type and is NOT flag-gated here — a
|
|
* URL-opened logs snippet routes correctly even with the feature flag off.
|
|
*
|
|
* Before the snippet exists in the store (a fresh `/sql/new` tab, materialized
|
|
* lazily on the first keystroke) the source falls back to the `?source=` URL
|
|
* param, so a "New logs query" tab shows the logs toolbar and range picker
|
|
* immediately rather than flashing the database controls until the user types.
|
|
*/
|
|
export function useRunSource(id: string): QuerySource {
|
|
const { source: sourceParam } = useParams()
|
|
const snapV2 = useSqlEditorV2StateSnapshot()
|
|
const sessionSnap = useSqlEditorSessionSnapshot()
|
|
|
|
const snippet = snapV2.snippets[id]?.snippet
|
|
const source: SqlSnippetSource =
|
|
snippet !== undefined ? getSnippetSource(snippet) : parseSqlSnippetSource(sourceParam)
|
|
const logRange = sessionSnap.logRange[id]
|
|
|
|
return useMemo<QuerySource>(() => {
|
|
if (source === 'logs') {
|
|
return { type: 'logs', dateRange: logRange ?? DEFAULT_LOG_DATE_RANGE }
|
|
}
|
|
return { type: 'database' }
|
|
}, [source, logRange])
|
|
}
|