feat(hogql): open event and person scenes in sql mode

PostHog · Oct 11, 2023 · 87c0344 · 87c0344
1 parent cc0d3f5
commit 87c0344
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 8 deletions.
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -55,6 +55,7 @@ import { EventType } from '~/types'
 import { SavedQueries } from '~/queries/nodes/DataTable/SavedQueries'
 import { HogQLQueryEditor } from '~/queries/nodes/HogQLQuery/HogQLQueryEditor'
 import { QueryFeature } from '~/queries/nodes/DataTable/queryFeatures'
+import { EditHogQLButton } from '~/queries/nodes/Node/EditHogQLButton'
 
 interface DataTableProps {
     uniqueKey?: string | number
@@ -413,11 +414,18 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
     const showSecondRow = !isReadOnly && (secondRowLeft.length > 0 || secondRowRight.length > 0)
     const inlineEditorButtonOnRow = showFirstRow ? 1 : showSecondRow ? 2 : 0
 
+    const editorButton = (
+        <>
+            <OpenEditorButton query={query} />
+            {response?.hogql ? <EditHogQLButton hogql={response.hogql} /> : null}
+        </>
+    )
+
     if (showOpenEditorButton && !isReadOnly) {
         if (inlineEditorButtonOnRow === 1) {
-            firstRowRight.push(<OpenEditorButton query={query} />)
+            firstRowRight.push(editorButton)
         } else if (inlineEditorButtonOnRow === 2) {
-            secondRowRight.push(<OpenEditorButton query={query} />)
+            secondRowRight.push(editorButton)
         }
     }
 
@@ -444,9 +452,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                         </div>
                     )}
                     {showOpenEditorButton && inlineEditorButtonOnRow === 0 && !isReadOnly ? (
-                        <div className="absolute right-0 z-10 p-1">
-                            <OpenEditorButton query={query} />
-                        </div>
+                        <div className="absolute right-0 z-10 p-1">{editorButton}</div>
                     ) : null}
                     {showResultsTable && (
                         <LemonTable

diff --git a/frontend/src/queries/nodes/Node/EditHogQLButton.tsx b/frontend/src/queries/nodes/Node/EditHogQLButton.tsx
@@ -0,0 +1,30 @@
+import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
+import { NodeKind } from '~/queries/schema'
+import { urls } from 'scenes/urls'
+import { IconQueryEditor } from 'lib/lemon-ui/icons'
+
+export interface EditHogQLButtonProps extends LemonButtonProps {
+    hogql: string
+}
+
+export function EditHogQLButton({ hogql, ...props }: EditHogQLButtonProps): JSX.Element {
+    return (
+        <LemonButton
+            data-attr={'open-json-editor-button'}
+            type="secondary"
+            status="primary-alt"
+            to={urls.insightNew(
+                undefined,
+                undefined,
+                JSON.stringify({
+                    kind: NodeKind.DataTableNode,
+                    full: true,
+                    source: { kind: NodeKind.HogQLQuery, query: hogql },
+                })
+            )}
+            icon={<IconQueryEditor />}
+            tooltip={'Edit SQL directly'}
+            {...props}
+        />
+    )
+}
diff --git a/frontend/src/queries/nodes/Node/InlineEditorButton.tsx b/frontend/src/queries/nodes/Node/InlineEditorButton.tsx
diff --git a/frontend/src/queries/nodes/Node/OpenEditorButton.tsx b/frontend/src/queries/nodes/Node/OpenEditorButton.tsx
@@ -1,7 +1,7 @@
 import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
 import { Node } from '~/queries/schema'
 import { urls } from 'scenes/urls'
-import { IconQueryEditor } from 'lib/lemon-ui/icons'
+import { IconPreview } from 'lib/lemon-ui/icons'
 
 export interface OpenEditorButtonProps extends LemonButtonProps {
     query: Node | null
@@ -14,7 +14,7 @@ export function OpenEditorButton({ query, ...props }: OpenEditorButtonProps): JS
             type="secondary"
             status="primary-alt"
             to={query ? urls.insightNew(undefined, undefined, JSON.stringify(query)) : undefined}
-            icon={<IconQueryEditor />}
+            icon={<IconPreview />}
             tooltip={'Open as a new insight'}
             {...props}
         />

diff --git a/frontend/src/queries/schema.json b/frontend/src/queries/schema.json
@@ -821,6 +821,9 @@
                 "hasMore": {
                     "type": "boolean"
                 },
+                "hogql": {
+                    "type": "string"
+                },
                 "results": {
                     "items": {
                         "items": {},
@@ -841,7 +844,7 @@
                     "type": "array"
                 }
             },
-            "required": ["columns", "types", "results"],
+            "required": ["columns", "types", "results", "hogql"],
             "type": "object"
         },
         "FeaturePropertyFilter": {

diff --git a/frontend/src/queries/schema.ts b/frontend/src/queries/schema.ts
@@ -224,6 +224,7 @@ export interface EventsQueryResponse {
     columns: any[]
     types: string[]
     results: any[][]
+    hogql: string
     hasMore?: boolean
     timings?: QueryTiming[]
 }

diff --git a/posthog/hogql_queries/events_query_runner.py b/posthog/hogql_queries/events_query_runner.py
@@ -253,6 +253,7 @@ def calculate(self) -> EventsQueryResponse:
             types=[type for _, type in query_result.types],
             hasMore=received_extra_row,
             timings=self.timings.to_list(),
+            hogql=query_result.hogql,
         )
 
     def select_input_raw(self) -> List[str]:

diff --git a/posthog/schema.py b/posthog/schema.py
@@ -566,6 +566,7 @@ class EventsQueryResponse(BaseModel):
     )
     columns: List
     hasMore: Optional[bool] = None
+    hogql: str
     results: List[List]
     timings: Optional[List[QueryTiming]] = None
     types: List[str]