persons modal as a new page

PostHog · Oct 2, 2023 · 30f66d2 · 30f66d2
1 parent c81923b
commit 30f66d2
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 21 deletions.
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -9,6 +9,7 @@ import {
     PersonsNode,
     QueryContext,
     PersonsQuery,
+    NodeKind,
 } from '~/queries/schema'
 import { useCallback, useState } from 'react'
 import { BindLogic, useValues } from 'kea'
@@ -33,6 +34,7 @@ import { OpenEditorButton } from '~/queries/nodes/Node/OpenEditorButton'
 import {
     isHogQlAggregation,
     isHogQLQuery,
+    isInsightQueryNode,
     isPersonsQuery,
     taxonomicEventFilterToHogQl,
     taxonomicPersonFilterToHogQl,
@@ -51,6 +53,7 @@ import { EventType } from '~/types'
 import { SavedQueries } from '~/queries/nodes/DataTable/SavedQueries'
 import { HogQLQueryEditor } from '~/queries/nodes/HogQLQuery/HogQLQueryEditor'
 import { QueryFeature } from '~/queries/queryFeatures'
+import { IconChevronLeft } from 'lib/lemon-ui/icons'
 
 interface DataTableProps {
     uniqueKey?: string | number
@@ -121,6 +124,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
         showOpenEditorButton,
         showResultsTable,
         showTimings,
+        showBackButton,
     } = queryWithDefaults
 
     const isReadOnly = setQuery === undefined
@@ -365,6 +369,20 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
     )
 
     const firstRowLeft = [
+        showBackButton ? (
+            <LemonButton
+                type="secondary"
+                icon={<IconChevronLeft />}
+                onClick={() => {
+                    const source: Node = (query.source as any).source
+                    if (isInsightQueryNode(source)) {
+                        setQuery?.({ kind: NodeKind.InsightVizNode, source: source } as Node)
+                    }
+                }}
+            >
+                Back
+            </LemonButton>
+        ) : null,
         showDateRange && sourceFeatures.has(QueryFeature.dateRangePicker) ? (
             <DateRange query={query.source} setQuery={setQuerySource} />
         ) : null,
@@ -405,6 +423,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
     const showFirstRow = !isReadOnly && (firstRowLeft.length > 0 || firstRowRight.length > 0)
     const showSecondRow = !isReadOnly && (secondRowLeft.length > 0 || secondRowRight.length > 0)
     const inlineEditorButtonOnRow = showFirstRow ? 1 : showSecondRow ? 2 : 0
+    const showOpenEditor = showOpenEditorButton && inlineEditorButtonOnRow === 1 && !isReadOnly
 
     return (
         <BindLogic logic={dataTableLogic} props={dataTableLogicProps}>
@@ -416,11 +435,11 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                     {showFirstRow && (
                         <div className="flex gap-4 items-center flex-wrap">
                             {firstRowLeft}
-                            {firstRowLeft.length > 0 && firstRowRight.length > 0 ? <div className="flex-1" /> : null}
-                            {firstRowRight}
-                            {showOpenEditorButton && inlineEditorButtonOnRow === 1 && !isReadOnly ? (
-                                <OpenEditorButton query={query} hogql={responseHogQL} />
+                            {firstRowLeft.length > 0 && firstRowRight.length + (showOpenEditor ? 1 : 0) > 0 ? (
+                                <div className="flex-1" />
                             ) : null}
+                            {firstRowRight}
+                            {showOpenEditor ? <OpenEditorButton query={query} hogql={responseHogQL} /> : null}
                         </div>
                     )}
                     {showFirstRow && showSecondRow && <LemonDivider className="my-0" />}

diff --git a/frontend/src/queries/nodes/DataTable/dataTableLogic.ts b/frontend/src/queries/nodes/DataTable/dataTableLogic.ts
@@ -185,6 +185,7 @@ export const dataTableLogic = kea<dataTableLogicType>([
                                 ? context.showOpenEditorButton
                                 : query.showOpenEditorButton ?? true,
                         showResultsTable: query.showResultsTable ?? true,
+                        showBackButton: (query.showBackButton ?? showIfFull) && 'source' in query.source,
                     }),
                 }
             },

diff --git a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
@@ -25,8 +25,6 @@ import { ChartDisplayType } from '~/types'
 import { ShowLegendFilter } from 'scenes/insights/EditorFilters/ShowLegendFilter'
 import { router } from 'kea-router'
 import { urls } from 'scenes/urls'
-import { appendQueryToActiveNotebook } from 'scenes/notebooks/Notebook/appendQueryToActiveNotebook'
-import { DataTableNode, NodeKind } from '~/queries/schema'
 
 interface InsightDisplayConfigProps {
     disableTable: boolean
@@ -162,14 +160,7 @@ export function InsightDisplayConfig({ disableTable }: InsightDisplayConfigProps
                         <LemonButton
                             size="small"
                             onClick={() => {
-                                appendQueryToActiveNotebook(
-                                    {
-                                        kind: NodeKind.DataTableNode,
-                                        full: true,
-                                        source: { kind: NodeKind.HogQLQuery, query: hogQL },
-                                    } as DataTableNode,
-                                    () => router.actions.push(urls.insightNewHogQL(hogQL))
-                                )
+                                router.actions.push(urls.insightNewHogQL(hogQL))
                             }}
                         >
                             <span className="font-medium whitespace-nowrap">Edit SQL</span>

diff --git a/frontend/src/queries/schema.ts b/frontend/src/queries/schema.ts
@@ -319,6 +319,8 @@ interface DataTableNodeViewProps {
     showPersistentColumnConfigurator?: boolean
     /** Shows a list of saved queries */
     showSavedQueries?: boolean
+    /** Show a button to go back to the source query */
+    showBackButton?: boolean
     /** Can expand row to show raw event data (default: true) */
     expandable?: boolean
     /** Link properties via the URL (default: false) */

diff --git a/frontend/src/scenes/trends/viz/ActionsLineGraph.tsx b/frontend/src/scenes/trends/viz/ActionsLineGraph.tsx
@@ -1,5 +1,5 @@
 import { LineGraph } from '../../insights/views/LineGraph/LineGraph'
-import { useActions, useValues } from 'kea'
+import { useValues } from 'kea'
 import { InsightEmptyState } from '../../insights/EmptyStates'
 import { ChartDisplayType, ChartParams, GraphType } from '~/types'
 import { insightLogic } from 'scenes/insights/insightLogic'
@@ -12,15 +12,15 @@ import { trendsDataLogic } from '../trendsDataLogic'
 import { DataTableNode, NodeKind, PersonsQuery } from '~/queries/schema'
 import { insightDataLogic } from 'scenes/insights/insightDataLogic'
 import { isInsightVizNode } from '~/queries/utils'
-import { appendQueryToActiveNotebook } from 'scenes/notebooks/Notebook/appendQueryToActiveNotebook'
+import { urls } from 'scenes/urls'
+import { combineUrl, router } from 'kea-router'
 
 export function ActionsLineGraph({
     inSharedMode = false,
     showPersonsModal = true,
     context,
 }: ChartParams): JSX.Element | null {
     const { insightProps, hiddenLegendKeys } = useValues(insightLogic)
-    const { setQuery } = useActions(insightDataLogic(insightProps))
     const { query } = useValues(insightDataLogic(insightProps))
     const {
         indexedResults,
@@ -93,17 +93,17 @@ export function ActionsLineGraph({
                                   full: true,
                                   source: personsQuery,
                               }
-                              appendQueryToActiveNotebook(dataTable, setQuery)
+                              router.actions.push(combineUrl(urls.persons(), {}, { q: dataTable }).url)
                               return
                           }
 
                           if (!dataset) {
                               return
                           }
 
-                          const urls = urlsForDatasets(crossDataset, index)
+                          const datasetUrls = urlsForDatasets(crossDataset, index)
 
-                          if (urls?.length) {
+                          if (datasetUrls?.length) {
                               const title =
                                   shownAs === 'Stickiness' ? (
                                       <>
@@ -119,7 +119,7 @@ export function ActionsLineGraph({
                                   )
 
                               openPersonsModal({
-                                  urls,
+                                  urls: datasetUrls,
                                   urlsIndex: crossDataset?.findIndex((x) => x.id === dataset.id) || 0,
                                   title,
                               })