mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
Jordi Enric
233c2d4a4c
- EditorPanel can now load, save, and rename SQL snippets inline - New SaveSnippetDialog component for saving snippets with AI-generated titles - EditorPanel state tracks active snippet ID and pending reset - EditQueryButton opens the inline editor panel instead of navigating to SQL editor page - AIEditor exposes onMount callback for editor instance access - SnippetDropdown label updated to "Create snippet" ## TO TEST ### Normal CRUD - open inline SQL Editor - try creating a new snippet - try editing an existing snippet ### Homepage V2 Report - Try adding a new block → create snippet - create the snippet in inline sql editor - select the snippet in the report block section
75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import { proxy, snapshot, useSnapshot } from 'valtio'
|
|
|
|
type Template = {
|
|
name: string
|
|
description: string
|
|
content: string
|
|
}
|
|
|
|
export type SqlError = {
|
|
error?: string
|
|
formattedError?: string
|
|
message?: string
|
|
}
|
|
|
|
type EditorPanelState = {
|
|
value: string
|
|
templates: Template[]
|
|
results: Record<string, unknown>[] | undefined
|
|
error: SqlError | undefined
|
|
initialPrompt: string
|
|
onChange: ((value: string) => void) | undefined
|
|
activeSnippetId: string | null
|
|
pendingReset: boolean
|
|
}
|
|
|
|
const initialState: EditorPanelState = {
|
|
value: '',
|
|
templates: [],
|
|
results: undefined,
|
|
error: undefined,
|
|
initialPrompt: '',
|
|
onChange: undefined,
|
|
activeSnippetId: null,
|
|
pendingReset: false,
|
|
}
|
|
|
|
export const editorPanelState = proxy({
|
|
...initialState,
|
|
setValue(value: string) {
|
|
editorPanelState.value = value
|
|
editorPanelState.onChange?.(value)
|
|
editorPanelState.setResults(undefined)
|
|
editorPanelState.setError(undefined)
|
|
},
|
|
setTemplates(templates: Template[]) {
|
|
editorPanelState.templates = templates
|
|
},
|
|
setResults(results: Record<string, unknown>[] | undefined) {
|
|
editorPanelState.results = results
|
|
},
|
|
setError(error: SqlError | undefined) {
|
|
editorPanelState.error = error
|
|
},
|
|
setInitialPrompt(initialPrompt: string) {
|
|
editorPanelState.initialPrompt = initialPrompt
|
|
},
|
|
setActiveSnippetId(id: string | null) {
|
|
editorPanelState.activeSnippetId = id
|
|
},
|
|
openAsNew() {
|
|
editorPanelState.value = ''
|
|
editorPanelState.results = undefined
|
|
editorPanelState.error = undefined
|
|
editorPanelState.pendingReset = true
|
|
},
|
|
reset() {
|
|
Object.assign(editorPanelState, initialState)
|
|
},
|
|
})
|
|
|
|
export const getEditorPanelStateSnapshot = () => snapshot(editorPanelState)
|
|
|
|
export const useEditorPanelStateSnapshot = (options?: Parameters<typeof useSnapshot>[1]) =>
|
|
useSnapshot(editorPanelState, options)
|