mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 03:45:06 +03:00
## 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, plus a refactor of the shared logs-rewrite flow. PR 8 of the SQL editor query-source series. Stacked on #48457 — review that one first, and merge this after it. ## What is the current behavior? A `log_sql` snippet runs against the ClickHouse-backed analytics endpoint, but the SQL editor's AI still writes Postgres: inline edits get Postgres system prompts, and the result is run through `sql-formatter`, which mangles ClickHouse backticks and `log_attributes` map lookups. Legacy Logs Explorer saved queries open in the editor as `log_sql` snippets. Those are BigQuery dialect and error against the ClickHouse endpoint the editor runs them on, with no in-editor way out — only the Logs Explorer offered a rewrite. The completion route was also asymmetric. It assembled a schema/code/instruction message for Postgres but forwarded `prompt` verbatim for ClickHouse, so a client wanting ClickHouse had to hand-build the equivalent string. ## What is the new behavior? **Inline AI speaks ClickHouse for logs snippets.** `sqlSourceToDialect` maps a snippet's source to `postgres`/`clickhouse` and `buildCompletionRequestBody` threads it through. For ClickHouse, `useSqlEditorAi` strips code fences from the response and skips `formatSql`. Execution and dialect both follow the snippet type, so a snippet's valid dialect never flips. **Rewrite to ClickHouse in the editor.** A banner offers the rewrite for a logs snippet whose text trips `looksLikeLegacyLogsQuery`, and proposes the result through the editor's existing AI diff view rather than replacing the snippet, so it's accepted or discarded like any other AI edit. Gated on `otelLegacyLogs`: on a non-migrated org the BigQuery text is still correct, so rewriting it would break a working query. The offer is a state machine (`offered` / `rewriting` / `failed` / `noRewriteNeeded` / `dismissed`) with a declarative table of valid transitions, so the states are mutually exclusive by construction and dismissal is terminal. A failure keeps its message and offers a retry; a response identical to the input is reported rather than opening an empty diff. **One place assembles completion prompts.** The route now uses a single template for both dialects, branching only the schema section and — for `intent: 'rewrite'` — the instruction. `lib/ai/clickhouse-logs.ts` is the single home for ClickHouse-logs prompt content, replacing two independently maintained descriptions of the same table. Clients carry no prompt text. **The rewrite flow is shared with the Logs Explorer.** Both surfaces previously hand-rolled the same sequence and had drifted: only one detected a no-op rewrite, they sourced `log_attributes` keys differently, and the Explorer formatted errors with an `as Error` cast. Both now use `useLegacyLogsRewrite` and the same state-driven banner, so the Explorer picks up no-op detection and typed error extraction. **Attribute keys are fetched on submit, not while typing.** The detected source would otherwise feed a reactive query key, making every edit that changed it cost another network call. `useLogsAttributeKeys` is imperative and goes through `queryClient.fetchQuery`, so a source already cached — including by the Explorer header and query panel, which subscribe reactively — is reused. This also closes a gap where inline edits never received keys at all, unlike full rewrites. `getErrorMessage` gains an optional typed fallback and no longer stringifies a bare object into `'[object Object]'`; every existing caller already hand-rolled a fallback, except `QueueSettings`, which interpolated the raw result and now passes one. Nothing here is user-visible until the `sqlEditorLogsSource` flag is enabled. Tests: dialect selection and request-body shape, the ClickHouse prompt content (including that the schema section does not restate the dialect rules), the reducer's valid and invalid transitions, `shouldOfferLegacyLogsRewrite`, on-submit key discovery with cache reuse, and `getErrorMessage`. ## Additional context <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added an Assistant banner to help rewrite legacy BigQuery-style logs queries into ClickHouse SQL. * SQL assistance now adapts to the selected query type, including relevant log attribute context. * Rewrite suggestions can be reviewed as editor diffs before being applied. * **Bug Fixes** * Improved rewrite failure handling, retry options, dismissal behavior, and “no rewrite needed” messaging. * Error notifications now provide a clearer fallback message when details are unavailable. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
279 lines
9.5 KiB
TypeScript
279 lines
9.5 KiB
TypeScript
import { type UntrustedSqlFragment } from '@supabase/pg-meta'
|
|
import { useParams } from 'common'
|
|
import {
|
|
createContext,
|
|
use,
|
|
useCallback,
|
|
useEffect,
|
|
useEffectEvent,
|
|
useMemo,
|
|
useState,
|
|
type Context,
|
|
type Dispatch,
|
|
type PropsWithChildren,
|
|
type SetStateAction,
|
|
} from 'react'
|
|
|
|
import { useSqlEditorDiff, useSqlEditorPrompt } from './hooks'
|
|
import { type QuerySource } from './querySource'
|
|
import type { UtilityTab } from './SQLEditor.types'
|
|
import { useSQLEditorContext } from './SQLEditorContext'
|
|
import { useAddDefinitions } from './useAddDefinitions'
|
|
import { useEditorMount } from './useEditorMount'
|
|
import { useLogsSqlExecution } from './useLogsSqlExecution'
|
|
import { usePrettifyQuery } from './usePrettifyQuery'
|
|
import { useRunSource } from './useRunSource'
|
|
import { useSnippetIdentity } from './useSnippetIdentity'
|
|
import { useSnippetTitleGenerator } from './useSnippetTitleGenerator'
|
|
import { useSqlEditorAi } from './useSqlEditorAi'
|
|
import { useSqlEditorExecution } from './useSqlEditorExecution'
|
|
import { useSqlEditorShortcuts } from './useSqlEditorShortcuts'
|
|
import { isValidConnString } from '@/data/fetchers'
|
|
import {
|
|
untrustedLogSql,
|
|
type SafeLogSqlFragment,
|
|
type UntrustedLogSqlFragment,
|
|
} from '@/data/logs/safe-analytics-sql'
|
|
import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
|
|
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
|
|
import { useDatabaseSelectorStateSnapshot } from '@/state/database-selector'
|
|
import {
|
|
getSqlEditorV2StateSnapshot,
|
|
useSqlEditorV2StateSnapshot,
|
|
} from '@/state/sql-editor/sql-editor-state'
|
|
import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
|
|
|
|
/**
|
|
* Reactive SQL-editor controllers, distributed via a handful of focused
|
|
* contexts so the visual tree consumes exactly the slice it needs instead of
|
|
* prop-drilling whole hook bundles. The stable Monaco refs + imperative helpers
|
|
* live in `SQLEditorContext`; this provider owns everything that changes with
|
|
* state.
|
|
*
|
|
* SQL that a user runs is NOT promoted to safety here — the provider only
|
|
* exposes the already-safe `executeQuery` pipeline plus
|
|
* `readEditorSql` (which returns an `UntrustedSqlFragment`). Each user-action
|
|
* site (the toolbar/editor/results components and the shortcut handlers)
|
|
* promotes with `acceptUntrustedSql` right where the user acts, so the promotion
|
|
* is auditable.
|
|
*/
|
|
|
|
type SnippetContextValue = {
|
|
id: string
|
|
snippetName: string
|
|
isLoading: boolean
|
|
}
|
|
|
|
type AssistantContextValue = {
|
|
diff: ReturnType<typeof useSqlEditorDiff>
|
|
prompt: ReturnType<typeof useSqlEditorPrompt>
|
|
ai: ReturnType<typeof useSqlEditorAi>
|
|
}
|
|
|
|
type SqlEditorExecution = ReturnType<typeof useSqlEditorExecution>
|
|
type SqlEditorMount = ReturnType<typeof useEditorMount>
|
|
|
|
/** Running SQL: the safe execute pipeline, its status, and formatting. */
|
|
type RunContextValue = {
|
|
executeQuery: SqlEditorExecution['executeQuery']
|
|
readEditorSql: () => UntrustedSqlFragment | undefined
|
|
isExecuting: boolean
|
|
potentialIssues: SqlEditorExecution['potentialIssues']
|
|
resetPotentialIssues: () => void
|
|
prettifyQuery: () => void
|
|
runSource: QuerySource
|
|
executeLogsQuery: (sql: SafeLogSqlFragment) => void
|
|
readEditorLogsSql: () => UntrustedLogSqlFragment | undefined
|
|
}
|
|
|
|
/** Editor-surface UI state: selection, the active results tab, and mount. */
|
|
type UiContextValue = {
|
|
hasSelection: boolean
|
|
setHasSelection: Dispatch<SetStateAction<boolean>>
|
|
activeUtilityTab: UtilityTab
|
|
setActiveUtilityTab: Dispatch<SetStateAction<UtilityTab>>
|
|
onMount: SqlEditorMount['onMount']
|
|
}
|
|
|
|
const SnippetContext = createContext<SnippetContextValue | null>(null)
|
|
const AssistantContext = createContext<AssistantContextValue | null>(null)
|
|
const RunContext = createContext<RunContextValue | null>(null)
|
|
const UiContext = createContext<UiContextValue | null>(null)
|
|
|
|
function useGuardedContext<T>(context: Context<T | null>, hookName: string): T {
|
|
const value = use(context)
|
|
if (!value) {
|
|
throw new Error(`${hookName} must be used within a SQLEditorControllersProvider`)
|
|
}
|
|
return value
|
|
}
|
|
|
|
/** Snippet identity + display name for the current tab. */
|
|
export const useSqlEditorSnippet = () => useGuardedContext(SnippetContext, 'useSqlEditorSnippet')
|
|
|
|
/** The Assistant / diff cluster controllers (diff, prompt, ai). */
|
|
export const useSqlEditorAssistant = () =>
|
|
useGuardedContext(AssistantContext, 'useSqlEditorAssistant')
|
|
|
|
/** Run execution, warnings, and query formatting. */
|
|
export const useSqlEditorRun = () => useGuardedContext(RunContext, 'useSqlEditorRun')
|
|
|
|
/** Editor-surface UI state (selection, active results tab, editor mount). */
|
|
export const useSqlEditorUi = () => useGuardedContext(UiContext, 'useSqlEditorUi')
|
|
|
|
export const SQLEditorControllersProvider = ({ children }: PropsWithChildren) => {
|
|
const { monacoRef, scrollTopRef, editor } = useSQLEditorContext()
|
|
|
|
const { ref } = useParams()
|
|
const { data: project } = useSelectedProjectQuery()
|
|
|
|
const tabs = useTabsStateSnapshot()
|
|
const snapV2 = useSqlEditorV2StateSnapshot()
|
|
const { setSelectedDatabaseId } = useDatabaseSelectorStateSnapshot()
|
|
|
|
const diff = useSqlEditorDiff()
|
|
const { isDiffOpen } = diff
|
|
const prompt = useSqlEditorPrompt()
|
|
const { promptState, resetPrompt } = prompt
|
|
|
|
const [hasSelection, setHasSelection] = useState<boolean>(false)
|
|
const [activeUtilityTab, setActiveUtilityTab] = useState<UtilityTab>('results')
|
|
|
|
const { id, urlId, generatedNewSnippetName, isLoading } = useSnippetIdentity()
|
|
const { onMount, editorMountCount } = useEditorMount({ id })
|
|
|
|
const runSource = useRunSource(id)
|
|
|
|
useAddDefinitions(id, monacoRef.current, { enabled: runSource.type !== 'logs' })
|
|
|
|
const { data: databases, isSuccess: isSuccessReadReplicas } = useReadReplicasQuery(
|
|
{
|
|
projectRef: ref,
|
|
},
|
|
{ enabled: isValidConnString(project?.connectionString) }
|
|
)
|
|
|
|
const { setAiTitle } = useSnippetTitleGenerator()
|
|
|
|
const prettifyQuery = usePrettifyQuery({ id, isDiffOpen })
|
|
|
|
// Reads the SQL to run from the editor as an UntrustedSqlFragment. Promotion
|
|
// to safety (acceptUntrustedSql) happens at each user-action site, never here.
|
|
const readEditorSql = useCallback((): UntrustedSqlFragment | undefined => {
|
|
const snippet = getSqlEditorV2StateSnapshot().snippets[id]?.snippet
|
|
const fallback = snippet?.type === 'log_sql' ? undefined : snippet?.content?.unchecked_sql
|
|
return editor.getSql(fallback)
|
|
}, [editor, id])
|
|
|
|
// Reads the SQL to run from the editor as an UntrustedLogSqlFragment — the logs
|
|
// sibling of readEditorSql. Promotion (acceptUntrustedLogsSql) happens at each
|
|
// user-action site, never here.
|
|
const readEditorLogsSql = useCallback((): UntrustedLogSqlFragment | undefined => {
|
|
const snippet = getSqlEditorV2StateSnapshot().snippets[id]?.snippet
|
|
const fallback = snippet?.type === 'log_sql' ? snippet.content?.unchecked_sql : undefined
|
|
const sql = editor.getSql(fallback)
|
|
return sql === undefined ? undefined : untrustedLogSql(sql)
|
|
}, [editor, id])
|
|
|
|
const {
|
|
executeQuery,
|
|
isExecuting: isExecutingDb,
|
|
potentialIssues,
|
|
resetPotentialIssues,
|
|
} = useSqlEditorExecution({
|
|
id,
|
|
isDiffOpen,
|
|
hasSelection,
|
|
setAiTitle,
|
|
})
|
|
|
|
const { executeLogsQuery, isExecuting: isExecutingLogs } = useLogsSqlExecution({ id })
|
|
|
|
const isExecuting = isExecutingDb || isExecutingLogs
|
|
|
|
const ai = useSqlEditorAi({ id, editorMountCount, diff, prompt, sqlSource: runSource.type })
|
|
const { acceptAiHandler, discardAiHandler } = ai
|
|
|
|
useSqlEditorShortcuts({
|
|
isDiffOpen,
|
|
isPromptOpen: promptState.isOpen,
|
|
prettifyQuery,
|
|
acceptAiHandler,
|
|
discardAiHandler,
|
|
resetPrompt,
|
|
})
|
|
|
|
const saveScrollPosition = useEffectEvent((snippetId: string) => {
|
|
if (ref) {
|
|
const tabId = createTabId('sql', { id: snippetId })
|
|
tabs.updateTab(tabId, { scrollTop: scrollTopRef.current })
|
|
}
|
|
})
|
|
useEffect(() => {
|
|
// Save the departing snippet's scroll position on unmount / snippet switch.
|
|
return () => saveScrollPosition(id)
|
|
}, [id])
|
|
|
|
useEffect(() => {
|
|
if (isSuccessReadReplicas) {
|
|
const primaryDatabase = databases.find((db) => db.identifier === ref)
|
|
setSelectedDatabaseId(primaryDatabase?.identifier)
|
|
}
|
|
}, [isSuccessReadReplicas, databases, ref, setSelectedDatabaseId])
|
|
|
|
const snippetName =
|
|
urlId === 'new'
|
|
? generatedNewSnippetName
|
|
: (snapV2.snippets[id]?.snippet.name ?? generatedNewSnippetName)
|
|
|
|
const snippetValue = useMemo<SnippetContextValue>(
|
|
() => ({ id, snippetName, isLoading }),
|
|
[id, snippetName, isLoading]
|
|
)
|
|
|
|
const assistantValue = useMemo<AssistantContextValue>(
|
|
() => ({ diff, prompt, ai }),
|
|
[diff, prompt, ai]
|
|
)
|
|
|
|
const runValue = useMemo<RunContextValue>(
|
|
() => ({
|
|
executeQuery,
|
|
readEditorSql,
|
|
isExecuting,
|
|
potentialIssues,
|
|
resetPotentialIssues,
|
|
prettifyQuery,
|
|
runSource,
|
|
executeLogsQuery,
|
|
readEditorLogsSql,
|
|
}),
|
|
[
|
|
executeQuery,
|
|
readEditorSql,
|
|
isExecuting,
|
|
potentialIssues,
|
|
resetPotentialIssues,
|
|
prettifyQuery,
|
|
runSource,
|
|
executeLogsQuery,
|
|
readEditorLogsSql,
|
|
]
|
|
)
|
|
|
|
const uiValue = useMemo<UiContextValue>(
|
|
() => ({ hasSelection, setHasSelection, activeUtilityTab, setActiveUtilityTab, onMount }),
|
|
[hasSelection, activeUtilityTab, onMount]
|
|
)
|
|
|
|
return (
|
|
<SnippetContext.Provider value={snippetValue}>
|
|
<AssistantContext.Provider value={assistantValue}>
|
|
<RunContext.Provider value={runValue}>
|
|
<UiContext.Provider value={uiValue}>{children}</UiContext.Provider>
|
|
</RunContext.Provider>
|
|
</AssistantContext.Provider>
|
|
</SnippetContext.Provider>
|
|
)
|
|
}
|