From bd5c8ca45df0569719950b25268db5fc3bd75ed8 Mon Sep 17 00:00:00 2001 From: David Newell Date: Mon, 18 Sep 2023 18:23:42 +0100 Subject: [PATCH] feat: allow embedding of the HogQL editor (#17488) --- .../src/queries/nodes/DataTable/DataTable.tsx | 2 +- .../nodes/HogQLQuery/HogQLQueryEditor.tsx | 158 +++++++++--------- .../notebooks/Nodes/NotebookNodeQuery.tsx | 1 + 3 files changed, 83 insertions(+), 78 deletions(-) diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx index d81b615a5adde..5687f2b424205 100644 --- a/frontend/src/queries/nodes/DataTable/DataTable.tsx +++ b/frontend/src/queries/nodes/DataTable/DataTable.tsx @@ -371,7 +371,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
{showHogQLEditor && isHogQLQuery(query.source) && !isReadOnly ? ( - + ) : null} {showFirstRow && (
diff --git a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx index ffd32f38a2904..872cf62478bcb 100644 --- a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx +++ b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx @@ -13,10 +13,12 @@ import { FEATURE_FLAGS } from 'lib/constants' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { featureFlagLogic } from 'lib/logic/featureFlagLogic' import { CodeEditor } from 'lib/components/CodeEditors' +import clsx from 'clsx' export interface HogQLQueryEditorProps { query: HogQLQuery setQuery?: (query: HogQLQuery) => void + embedded?: boolean } let uniqueNode = 0 @@ -45,8 +47,7 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
@@ -115,87 +116,90 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element { }} /> - setQueryInput(v ?? '')} - height="100%" - onMount={(editor, monaco) => { - monaco.languages.registerCodeActionProvider('mysql', { - provideCodeActions: (model, _range, context) => { - if (logic.isMounted()) { - // Monaco gives us a list of markers that we're looking at, but without the quick fixes. - const markersFromMonaco = context.markers - // We have a list of _all_ markers returned from the HogQL metadata query - const markersFromMetadata = logic.values.modelMarkers - // We need to merge the two lists - const quickFixes: languages.CodeAction[] = [] + {/* eslint-disable-next-line react/forbid-dom-props */} +
+ setQueryInput(v ?? '')} + height="100%" + onMount={(editor, monaco) => { + monaco.languages.registerCodeActionProvider('mysql', { + provideCodeActions: (model, _range, context) => { + if (logic.isMounted()) { + // Monaco gives us a list of markers that we're looking at, but without the quick fixes. + const markersFromMonaco = context.markers + // We have a list of _all_ markers returned from the HogQL metadata query + const markersFromMetadata = logic.values.modelMarkers + // We need to merge the two lists + const quickFixes: languages.CodeAction[] = [] - for (const activeMarker of markersFromMonaco) { - const start = model.getOffsetAt({ - column: activeMarker.startColumn, - lineNumber: activeMarker.startLineNumber, - }) - const end = model.getOffsetAt({ - column: activeMarker.endColumn, - lineNumber: activeMarker.endLineNumber, - }) - for (const rawMarker of markersFromMetadata) { - if ( - rawMarker.hogQLFix && - // if ranges overlap - rawMarker.start <= end && - rawMarker.end >= start - ) { - quickFixes.push({ - title: `Replace with: ${rawMarker.hogQLFix}`, - diagnostics: [rawMarker], - kind: 'quickfix', - edit: { - edits: [ - { - resource: model.uri, - textEdit: { - range: rawMarker, - text: rawMarker.hogQLFix, + for (const activeMarker of markersFromMonaco) { + const start = model.getOffsetAt({ + column: activeMarker.startColumn, + lineNumber: activeMarker.startLineNumber, + }) + const end = model.getOffsetAt({ + column: activeMarker.endColumn, + lineNumber: activeMarker.endLineNumber, + }) + for (const rawMarker of markersFromMetadata) { + if ( + rawMarker.hogQLFix && + // if ranges overlap + rawMarker.start <= end && + rawMarker.end >= start + ) { + quickFixes.push({ + title: `Replace with: ${rawMarker.hogQLFix}`, + diagnostics: [rawMarker], + kind: 'quickfix', + edit: { + edits: [ + { + resource: model.uri, + textEdit: { + range: rawMarker, + text: rawMarker.hogQLFix, + }, + versionId: undefined, }, - versionId: undefined, - }, - ], - }, - isPreferred: true, - }) + ], + }, + isPreferred: true, + }) + } } } + return { + actions: quickFixes, + dispose: () => {}, + } } - return { - actions: quickFixes, - dispose: () => {}, - } - } - }, - }) - monacoDisposables.current.push( - editor.addAction({ - id: 'saveAndRunPostHog', - label: 'Save and run query', - keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter], - run: () => saveQuery(), + }, }) - ) - setMonacoAndEditor([monaco, editor]) - }} - options={{ - minimap: { - enabled: false, - }, - wordWrap: 'on', - scrollBeyondLastLine: false, - automaticLayout: true, - fixedOverflowWidgets: true, - }} - /> + monacoDisposables.current.push( + editor.addAction({ + id: 'saveAndRunPostHog', + label: 'Save and run query', + keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter], + run: () => saveQuery(), + }) + ) + setMonacoAndEditor([monaco, editor]) + }} + options={{ + minimap: { + enabled: false, + }, + wordWrap: 'on', + scrollBeyondLastLine: false, + automaticLayout: true, + fixedOverflowWidgets: true, + }} + /> +
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx index 8cc364293fd49..f692d37023970 100644 --- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx +++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx @@ -86,6 +86,7 @@ export const Settings = ({ modifiedQuery.showResultsTable = false modifiedQuery.showReload = false modifiedQuery.showElapsedTime = false + modifiedQuery.embedded = true } if (NodeKind.InsightVizNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {