feat(bi): Query the highlighted hogql with cmd + enter (#23997)

PostHog · Jul 25, 2024 · 3094000 · 3094000
1 parent cf3a55b
commit 3094000
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git a/frontend/src/lib/monaco/CodeEditor.tsx b/frontend/src/lib/monaco/CodeEditor.tsx
@@ -27,7 +27,7 @@ if (loader) {
 export interface CodeEditorProps extends Omit<EditorProps, 'loading' | 'theme'> {
     queryKey?: string
     autocompleteContext?: string
-    onPressCmdEnter?: (value: string) => void
+    onPressCmdEnter?: (value: string, selectionType: 'selection' | 'full') => void
     autoFocus?: boolean
     sourceQuery?: AnyDataNode
     globals?: Record<string, any>
@@ -257,7 +257,17 @@ export function CodeEditor({
                             id: 'saveAndRunPostHog',
                             label: 'Save and run query',
                             keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
-                            run: () => onPressCmdEnter(editor.getValue()),
+                            run: () => {
+                                const selection = editor.getSelection()
+                                const model = editor.getModel()
+                                if (selection && model) {
+                                    const highlightedText = model.getValueInRange(selection)
+                                    onPressCmdEnter(highlightedText, 'selection')
+                                    return
+                                }
+
+                                onPressCmdEnter(editor.getValue(), 'full')
+                            },
                         })
                     )
                 }

diff --git a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx
@@ -143,16 +143,15 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
                             onChange={(v) => setQueryInput(v ?? '')}
                             height="100%"
                             onMount={(editor, monaco) => {
-                                monacoDisposables.current.push(
-                                    editor.addAction({
-                                        id: 'saveAndRunPostHog',
-                                        label: 'Save and run query',
-                                        keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
-                                        run: () => saveQuery(),
-                                    })
-                                )
                                 setMonacoAndEditor([monaco, editor])
                             }}
+                            onPressCmdEnter={(value, selectionType) => {
+                                if (value && selectionType === 'selection') {
+                                    saveQuery(value)
+                                } else {
+                                    saveQuery()
+                                }
+                            }}
                             options={{
                                 minimap: {
                                     enabled: false,
@@ -176,7 +175,7 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
                         <>
                             <div className="flex-1">
                                 <LemonButton
-                                    onClick={saveQuery}
+                                    onClick={() => saveQuery()}
                                     type="primary"
                                     disabledReason={
                                         !props.setQuery

diff --git a/frontend/src/queries/nodes/HogQLQuery/hogQLQueryEditorLogic.tsx b/frontend/src/queries/nodes/HogQLQuery/hogQLQueryEditorLogic.tsx
@@ -35,6 +35,14 @@ export const hogQLQueryEditorLogic = kea<hogQLQueryEditorLogicType>([
     props({} as HogQLQueryEditorLogicProps),
     key((props) => props.key),
     propsChanged(({ actions, props }, oldProps) => {
+        const selection = props.editor?.getSelection()
+        const model = props.editor?.getModel()
+        const highlightedQuery = selection && model ? model.getValueInRange(selection) : null
+
+        if (highlightedQuery && props.query.query === highlightedQuery) {
+            return
+        }
+
         if (props.query.query !== oldProps.query.query || props.editor !== oldProps.editor) {
             actions.setQueryInput(props.query.query)
         }
@@ -43,7 +51,7 @@ export const hogQLQueryEditorLogic = kea<hogQLQueryEditorLogicType>([
         actions: [dataWarehouseViewsLogic, ['createDataWarehouseSavedQuery'], dataWarehouseSceneLogic, ['updateView']],
     }),
     actions({
-        saveQuery: true,
+        saveQuery: (queryOverride?: string) => ({ queryOverride }),
         setQueryInput: (queryInput: string) => ({ queryInput }),
         setPrompt: (prompt: string) => ({ prompt }),
         setPromptError: (error: string | null) => ({ error }),
@@ -66,11 +74,12 @@ export const hogQLQueryEditorLogic = kea<hogQLQueryEditorLogicType>([
         aiAvailable: [() => [preflightLogic.selectors.preflight], (preflight) => preflight?.openai_available],
     }),
     listeners(({ actions, props, values }) => ({
-        saveQuery: () => {
+        saveQuery: ({ queryOverride }) => {
             const query = values.queryInput
             // TODO: Is below line necessary if the only way for queryInput to change is already through setQueryInput?
             actions.setQueryInput(query)
-            props.setQuery?.({ ...props.query, query })
+
+            props.setQuery?.({ ...props.query, query: queryOverride ?? query })
         },
         setQueryInput: async ({ queryInput }) => {
             props.onChange?.(queryInput)