Files
supabase/apps/studio/components/interfaces/SQLEditor/useAddDefinitions.ts
T
Charis 4c8ed105d2 feat(studio): logs SQL execution wiring + source-aware run gestures (#48414)
## 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?

Feature (SQL editor: execution wiring for logs-source snippets). Part of
the stacked SQL-editor "Database vs Logs" query-source series.

## What is the current behavior?

The SQL editor only ever runs queries against the user's Postgres
database. There is no execution path for a logs (`log_sql`) snippet, and
the run-button telemetry event carries no backend discriminator.

## What is the new behavior?

- `useRunSource(id)` derives the run backend from the snippet type; a
`log_sql` snippet resolves to `{ type: 'logs', dateRange }`, pairing the
run with its session time range (default: last hour).
- `useLogsSqlExecution` runs a promoted `SafeLogSqlFragment` against the
analytics OTEL (ClickHouse) endpoint with the resolved time range as
`iso_timestamp_start`/`iso_timestamp_end` request params. The endpoint
is **pinned to OTEL** — a snippet's dialect must not flip with org
migration.
- The run gestures (toolbar button and Cmd+Enter) branch on the source
and promote with the matching `acceptUntrusted*` right at the user
action, preserving the auditable promotion-at-gesture boundary. pg
intellisense is gated off for logs snippets.
- The `sql_editor_query_run_button_clicked` telemetry event gains a
required `{ source: 'database' | 'logs' }` property, fired from both
execution paths.
- Capability guard: a `log_sql` snippet is reachable by direct URL
regardless of the (later) entry-point flag gating, so `executeLogsQuery`
short-circuits when `otelLegacyLogs` is off — recording a clear "not
available yet" result message instead of firing a request that would
only return an opaque backend error on a non-ClickHouse project. This is
a guard on the gesture, not endpoint selection.
- Tests: `useRunSource` routing, `useLogsSqlExecution`
endpoint/range/structured-error/capability-guard, and a reusable `flags`
option on `renderSqlEditorHook`.

No UI entry points are added — the feature runs dark until the
flag-gated creation/nav PRs later in the stack.

## Additional context

Stacked on the query-source series; base branch is `master` now that PR
4 (log date range domain + session state, #48401) is merged. Follow-ups
in the stack add the toolbar/creation UI (with a run-affordance gate on
`otelLegacyLogs`), nav section, AI dialect support, and reports guard.

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

## Summary by CodeRabbit

* **New Features**
  * Added support for running log queries directly from the SQL editor.
* Log query results, errors, and time ranges are now handled within the
editor session.
* Added automatic selection between database and log query execution,
including support for custom date ranges.
* SQL assistance is disabled while editing log queries where database
definitions do not apply.

* **Tests**
* Added coverage for log query execution, date ranges, feature
availability, and execution source selection.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-29 10:43:48 -04:00

121 lines
4.1 KiB
TypeScript

import { Monaco } from '@monaco-editor/react'
import { LOCAL_STORAGE_KEYS } from 'common'
import type { IDisposable } from 'monaco-editor'
import { useEffect, useRef } from 'react'
import getPgsqlCompletionProvider from '@/components/ui/CodeEditor/Providers/PgSQLCompletionProvider'
import getPgsqlSignatureHelpProvider from '@/components/ui/CodeEditor/Providers/PgSQLSignatureHelpProvider'
import { useDatabaseFunctionsQuery } from '@/data/database-functions/database-functions-query'
import { useKeywordsQuery } from '@/data/database/keywords-query'
import { useSchemasQuery } from '@/data/database/schemas-query'
import { useTableColumnsQuery } from '@/data/database/table-columns-query'
import { useSchemasFilteredForHighAvailability } from '@/hooks/misc/useHighAvailability'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { formatSql } from '@/lib/formatSql'
import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
export const useAddDefinitions = (
id: string,
monaco: Monaco | null,
{ enabled = true }: { enabled?: boolean } = {}
) => {
const { data: project } = useSelectedProjectQuery()
const snapV2 = useSqlEditorV2StateSnapshot()
const [intellisenseEnabled] = useLocalStorageQuery(
LOCAL_STORAGE_KEYS.SQL_EDITOR_INTELLISENSE,
true
)
const { data: keywords, isSuccess: isKeywordsSuccess } = useKeywordsQuery(
{
projectRef: project?.ref,
connectionString: project?.connectionString,
},
{ enabled: enabled && intellisenseEnabled }
)
const { data: functions, isSuccess: isFunctionsSuccess } = useDatabaseFunctionsQuery(
{
projectRef: project?.ref,
connectionString: project?.connectionString,
},
{ enabled: enabled && intellisenseEnabled }
)
const { data: schemas, isSuccess: isSchemasSuccess } = useSchemasQuery(
{
projectRef: project?.ref,
connectionString: project?.connectionString,
},
{ enabled: enabled && intellisenseEnabled }
)
const { data: tableColumns, isSuccess: isTableColumnsSuccess } = useTableColumnsQuery(
{
projectRef: project?.ref,
connectionString: project?.connectionString,
},
{ enabled: enabled && intellisenseEnabled }
)
const pgInfoRef = useRef<any>(null)
const filteredSchemas = useSchemasFilteredForHighAvailability(schemas)
const isPgInfoReady =
enabled &&
intellisenseEnabled &&
isTableColumnsSuccess &&
isSchemasSuccess &&
isKeywordsSuccess &&
isFunctionsSuccess
if (isPgInfoReady) {
if (pgInfoRef.current === null) {
pgInfoRef.current = {}
}
pgInfoRef.current.tableColumns = tableColumns
pgInfoRef.current.schemas = filteredSchemas
pgInfoRef.current.keywords = keywords
pgInfoRef.current.functions = functions
}
// Enable pgsql format
useEffect(() => {
if (monaco) {
const formatProvider = monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
async provideDocumentFormattingEdits(model) {
const value = model.getValue()
const formatted = formatSql(value)
if (id) snapV2.setSql({ id, sql: formatted })
return [{ range: model.getFullModelRange(), text: formatted }]
},
})
return () => formatProvider.dispose()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [monaco])
// Register auto completion item provider for pgsql
useEffect(() => {
let completeProvider: IDisposable | null = null
let signatureHelpProvider: IDisposable | null = null
if (isPgInfoReady) {
if (monaco && isPgInfoReady) {
completeProvider = monaco.languages.registerCompletionItemProvider(
'pgsql',
getPgsqlCompletionProvider(monaco, pgInfoRef)
)
signatureHelpProvider = monaco.languages.registerSignatureHelpProvider(
'pgsql',
getPgsqlSignatureHelpProvider(monaco, pgInfoRef)
)
}
}
return () => {
completeProvider?.dispose()
signatureHelpProvider?.dispose()
}
}, [isPgInfoReady, monaco])
}