refactor(insights): move to queries in new insight urls (#24193)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

cypress/e2e/insights-navigation.cy.ts

@@ -71,7 +71,6 @@ describe('Insights', () => {
 
         it('can open event explorer as an insight', () => {
             cy.clickNavMenu('activity')
-            cy.get('[data-attr="data-table-export-menu"]').click()
             cy.get('[data-attr="open-json-editor-button"]').click()
             cy.get('[data-attr="insight-json-tab"]').should('exist')
         })

frontend/src/layout/navigation-3000/sidebars/featureFlags.tsx

@@ -13,7 +13,8 @@ import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 
 import { groupsModel } from '~/models/groupsModel'
-import { FeatureFlagType } from '~/types'
+import { InsightVizNode, NodeKind } from '~/queries/schema'
+import { BaseMathType, FeatureFlagType } from '~/types'
 
 import { navigation3000Logic } from '../navigationLogic'
 import { ExtendedListItem, SidebarCategory } from '../types'
@@ -56,6 +57,26 @@ export const featureFlagsSidebarLogic = kea<featureFlagsSidebarLogicType>([
                         if (!featureFlag.id) {
                             throw new Error('Feature flag ID should never be missing in the sidebar')
                         }
+
+                        const query: InsightVizNode = {
+                            kind: NodeKind.InsightVizNode,
+                            source: {
+                                kind: NodeKind.TrendsQuery,
+                                series: [
+                                    {
+                                        event: '$pageview',
+                                        name: '$pageview',
+                                        kind: NodeKind.EventsNode,
+                                        math: BaseMathType.UniqueUsers,
+                                    },
+                                ],
+                                breakdownFilter: {
+                                    breakdown: `$feature/${featureFlag.key}`,
+                                    breakdown_type: 'event',
+                                },
+                            },
+                        }
+
                         return {
                             key: featureFlag.id,
                             name: featureFlag.key,
@@ -115,13 +136,7 @@ export const featureFlagsSidebarLogic = kea<featureFlagsSidebarLogicType>([
                                         },
                                         {
                                             label: 'Try out in Insights',
-                                            to: urls.insightNew({
-                                                events: [
-                                                    { id: '$pageview', name: '$pageview', type: 'events', math: 'dau' },
-                                                ],
-                                                breakdown_type: 'event',
-                                                breakdown: `$feature/${featureFlag.key}`,
-                                            }),
+                                            to: urls.insightNew(undefined, undefined, query),
                                             'data-attr': 'usage',
                                         },
                                     ],

frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx

@@ -431,47 +431,47 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
                         display: 'Create a new Trend insight',
                         executor: () => {
                             // TODO: Don't reset insight on change
-                            push(urls.insightNew({ insight: InsightType.TRENDS }))
+                            push(urls.insightNew(InsightType.TRENDS))
                         },
                     },
                     {
                         icon: IconFunnels,
                         display: 'Create a new Funnel insight',
                         executor: () => {
                             // TODO: Don't reset insight on change
-                            push(urls.insightNew({ insight: InsightType.FUNNELS }))
+                            push(urls.insightNew(InsightType.FUNNELS))
                         },
                     },
                     {
                         icon: IconRetention,
                         display: 'Create a new Retention insight',
                         executor: () => {
                             // TODO: Don't reset insight on change
-                            push(urls.insightNew({ insight: InsightType.RETENTION }))
+                            push(urls.insightNew(InsightType.RETENTION))
                         },
                     },
                     {
                         icon: IconUserPaths,
                         display: 'Create a new Paths insight',
                         executor: () => {
                             // TODO: Don't reset insight on change
-                            push(urls.insightNew({ insight: InsightType.PATHS }))
+                            push(urls.insightNew(InsightType.PATHS))
                         },
                     },
                     {
                         icon: IconStickiness,
                         display: 'Create a new Stickiness insight',
                         executor: () => {
                             // TODO: Don't reset insight on change
-                            push(urls.insightNew({ insight: InsightType.STICKINESS }))
+                            push(urls.insightNew(InsightType.STICKINESS))
                         },
                     },
                     {
                         icon: IconLifecycle,
                         display: 'Create a new Lifecycle insight',
                         executor: () => {
                             // TODO: Don't reset insight on change
-                            push(urls.insightNew({ insight: InsightType.LIFECYCLE }))
+                            push(urls.insightNew(InsightType.LIFECYCLE))
                         },
                     },
                     {

frontend/src/lib/utils/eventUsageLogic.ts

@@ -34,6 +34,7 @@ import {
     isFunnelsQuery,
     isInsightQueryNode,
     isInsightVizNode,
+    isNodeWithSource,
 } from '~/queries/utils'
 import {
     AccessLevel,
@@ -235,6 +236,7 @@ function sanitizeFilterParams(filters: AnyPartialFilterType): Record<string, any
 function sanitizeQuery(query: Node | null): Record<string, string | number | boolean | undefined> {
     const payload: Record<string, string | number | boolean | undefined> = {
         query_kind: query?.kind,
+        query_source_kind: isNodeWithSource(query) ? query.source.kind : undefined,
     }
 
     if (isInsightVizNode(query) || isInsightQueryNode(query)) {
@@ -290,7 +292,7 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
             params,
         }),
         // insights
-        reportInsightCreated: (insightType: InsightType | null) => ({ insightType }),
+        reportInsightCreated: (query: Node | null) => ({ query }),
         reportInsightSaved: (query: Node | null, isNewInsight: boolean) => ({ query, isNewInsight }),
         reportInsightViewed: (
             insightModel: Partial<InsightModel>,
@@ -630,10 +632,14 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
             }
             posthog.capture('person viewed', properties)
         },
-        reportInsightCreated: async ({ insightType }, breakpoint) => {
+        reportInsightCreated: async ({ query }, breakpoint) => {
             // "insight created" essentially means that the user clicked "New insight"
             await breakpoint(500) // Debounce to avoid multiple quick "New insight" clicks being reported
-            posthog.capture('insight created', { insight: insightType })
+
+            posthog.capture('insight created', {
+                query_kind: query?.kind,
+                query_source_kind: isNodeWithSource(query) ? query.source.kind : undefined,
+            })
         },
         reportInsightSaved: async ({ query, isNewInsight }) => {
             // "insight saved" is a proxy for the new insight's results being valuable to the user

frontend/src/queries/nodes/DataTable/BackToSource.tsx

@@ -30,9 +30,7 @@ export function BackToSource(): JSX.Element | null {
         <LemonButton
             tooltip={summary}
             type="secondary"
-            onClick={() =>
-                router.actions.push(urls.insightNew(undefined, undefined, JSON.stringify(backToSourceQuery)))
-            }
+            onClick={() => router.actions.push(urls.insightNew(undefined, undefined, backToSourceQuery))}
         >
             &laquo; Back to {backToSourceQuery.source.kind?.replace('Query', '') ?? 'Insight'}
         </LemonButton>

frontend/src/queries/nodes/DataTable/DataTableOpenEditor.tsx

@@ -16,11 +16,19 @@ interface DataTableOpenEditorProps {
 export function DataTableOpenEditor({ query }: DataTableOpenEditorProps): JSX.Element | null {
     const { response } = useValues(dataTableLogic)
 
+    const tableInsightQuery: DataTableNode | null = response?.hogql
+        ? {
+              kind: NodeKind.DataTableNode,
+              full: true,
+              source: { kind: NodeKind.HogQLQuery, query: response.hogql },
+          }
+        : null
+
     return (
         <LemonButton
             type="secondary"
             icon={<IconTableChart />}
-            to={urls.insightNew(undefined, undefined, JSON.stringify(query))}
+            to={urls.insightNew(undefined, undefined, query)}
             sideAction={
                 response?.hogql
                     ? {
@@ -30,15 +38,7 @@ export function DataTableOpenEditor({ query }: DataTableOpenEditorProps): JSX.El
                                       items={[
                                           {
                                               label: 'Open as direct SQL insight',
-                                              to: urls.insightNew(
-                                                  undefined,
-                                                  undefined,
-                                                  JSON.stringify({
-                                                      kind: NodeKind.DataTableNode,
-                                                      full: true,
-                                                      source: { kind: NodeKind.HogQLQuery, query: response.hogql },
-                                                  })
-                                              ),
+                                              to: urls.insightNew(undefined, undefined, tableInsightQuery!),
                                               'data-attr': 'open-sql-editor-button',
                                           },
                                       ]}

frontend/src/queries/nodes/Node/EditHogQLButton.tsx

@@ -2,26 +2,23 @@ import { IconQueryEditor } from 'lib/lemon-ui/icons'
 import { LemonButton, LemonButtonWithoutSideActionProps } from 'lib/lemon-ui/LemonButton'
 import { urls } from 'scenes/urls'
 
-import { NodeKind } from '~/queries/schema'
+import { DataTableNode, NodeKind } from '~/queries/schema'
 
 export interface EditHogQLButtonProps extends LemonButtonWithoutSideActionProps {
     hogql: string
 }
 
 export function EditHogQLButton({ hogql, ...props }: EditHogQLButtonProps): JSX.Element {
+    const query: DataTableNode = {
+        kind: NodeKind.DataTableNode,
+        full: true,
+        source: { kind: NodeKind.HogQLQuery, query: hogql },
+    }
     return (
         <LemonButton
             data-attr="open-json-editor-button"
             type="secondary"
-            to={urls.insightNew(
-                undefined,
-                undefined,
-                JSON.stringify({
-                    kind: NodeKind.DataTableNode,
-                    full: true,
-                    source: { kind: NodeKind.HogQLQuery, query: hogql },
-                })
-            )}
+            to={urls.insightNew(undefined, undefined, query)}
             icon={<IconQueryEditor />}
             tooltip="Edit SQL directly"
             {...props}

frontend/src/queries/nodes/Node/OpenEditorButton.tsx

@@ -13,7 +13,7 @@ export function OpenEditorButton({ query, ...props }: OpenEditorButtonProps): JS
         <LemonButton
             data-attr="open-json-editor-button"
             type="secondary"
-            to={query ? urls.insightNew(undefined, undefined, JSON.stringify(query)) : undefined}
+            to={query ? urls.insightNew(undefined, undefined, query) : undefined}
             icon={<IconPreview />}
             tooltip="Open as a new insight"
             {...props}

frontend/src/scenes/data-management/actions/ActionsTable.tsx

@@ -1,7 +1,6 @@
 import { IconCheckCircle } from '@posthog/icons'
 import { LemonInput, LemonSegmentedButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { combineUrl } from 'kea-router'
 import api from 'lib/api'
 import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
 import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
@@ -19,15 +18,8 @@ import { actionsLogic } from 'scenes/actions/actionsLogic'
 import { userLogic } from 'scenes/userLogic'
 
 import { actionsModel } from '~/models/actionsModel'
-import {
-    ActionType,
-    AvailableFeature,
-    ChartDisplayType,
-    FilterLogicalOperator,
-    InsightType,
-    ProductKey,
-    ReplayTabs,
-} from '~/types'
+import { InsightVizNode, NodeKind } from '~/queries/schema'
+import { ActionType, AvailableFeature, ChartDisplayType, FilterLogicalOperator, ProductKey, ReplayTabs } from '~/types'
 
 import { NewActionButton } from '../../actions/NewActionButton'
 import { teamLogic } from '../../teamLogic'
@@ -44,6 +36,25 @@ export function ActionsTable(): JSX.Element {
     const { hasAvailableFeature } = useValues(userLogic)
     const { updateHasSeenProductIntroFor } = useActions(userLogic)
 
+    const tryInInsightsUrl = (action: ActionType): string => {
+        const query: InsightVizNode = {
+            kind: NodeKind.InsightVizNode,
+            source: {
+                kind: NodeKind.TrendsQuery,
+                series: [
+                    {
+                        id: action.id,
+                        name: action.name || undefined,
+                        kind: NodeKind.ActionsNode,
+                    },
+                ],
+                interval: 'day',
+                trendsFilter: { display: ChartDisplayType.ActionsLineGraph },
+            },
+        }
+        return urls.insightNew(undefined, undefined, query)
+    }
+
     const columns: LemonTableColumns<ActionType> = [
         {
             title: 'Name',
@@ -183,26 +194,7 @@ export function ActionsTable(): JSX.Element {
                                 >
                                     View recordings
                                 </LemonButton>
-                                <LemonButton
-                                    to={
-                                        combineUrl(
-                                            urls.insightNew({
-                                                insight: InsightType.TRENDS,
-                                                interval: 'day',
-                                                display: ChartDisplayType.ActionsLineGraph,
-                                                actions: [
-                                                    {
-                                                        id: action.id,
-                                                        name: action.name,
-                                                        type: 'actions',
-                                                        order: 0,
-                                                    },
-                                                ],
-                                            })
-                                        ).url
-                                    }
-                                    fullWidth
-                                >
+                                <LemonButton to={tryInInsightsUrl(action)} fullWidth>
                                     Try out in Insights
                                 </LemonButton>
                                 <LemonDivider />

frontend/src/scenes/data-management/database/DatabaseTables.tsx

@@ -80,7 +80,7 @@ export function DatabaseTables<T extends DatabaseSchemaTable>({
                                       const query = defaultQuery(table as string, Object.values(obj.fields))
                                       return (
                                           <div className="flex">
-                                              <Link to={urls.insightNew(undefined, undefined, JSON.stringify(query))}>
+                                              <Link to={urls.insightNew(undefined, undefined, query)}>
                                                   <code>{table}</code>
                                               </Link>
                                           </div>

frontend/src/scenes/data-warehouse/external/forms/SyncProgressStep.tsx

@@ -74,7 +74,7 @@ export const SyncProgressStep = (): JSX.Element => {
                             className="my-1"
                             type="primary"
                             onClick={() => cancelWizard()}
-                            to={urls.insightNew(undefined, undefined, JSON.stringify(query))}
+                            to={urls.insightNew(undefined, undefined, query)}
                         >
                             Query
                         </LemonButton>

frontend/src/scenes/experiments/ExperimentView/components.tsx

@@ -24,7 +24,7 @@ import { urls } from 'scenes/urls'
 
 import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
 import { Query } from '~/queries/Query/Query'
-import { NodeKind } from '~/queries/schema'
+import { InsightVizNode, NodeKind } from '~/queries/schema'
 import { Experiment as ExperimentType, ExperimentResults, FilterType, InsightShortId, InsightType } from '~/types'
 
 import { experimentLogic } from '../experimentLogic'
@@ -121,29 +121,27 @@ export function ExploreButton({ icon = <IconAreaChart /> }: { icon?: JSX.Element
         properties: [],
     }
 
+    const query: InsightVizNode = {
+        kind: NodeKind.InsightVizNode,
+        source: filtersToQueryNode(
+            transformResultFilters(
+                experimentResults?.filters
+                    ? { ...experimentResults.filters, explicit_date: true }
+                    : filtersFromExperiment
+            )
+        ),
+        showTable: true,
+        showLastComputation: true,
+        showLastComputationRefresh: false,
+    }
+
     return (
         <LemonButton
             className="ml-auto -translate-y-2"
             size="small"
             type="primary"
             icon={icon}
-            to={urls.insightNew(
-                undefined,
-                undefined,
-                JSON.stringify({
-                    kind: NodeKind.InsightVizNode,
-                    source: filtersToQueryNode(
-                        transformResultFilters(
-                            experimentResults?.filters
-                                ? { ...experimentResults.filters, explicit_date: true }
-                                : filtersFromExperiment
-                        )
-                    ),
-                    showTable: true,
-                    showLastComputation: true,
-                    showLastComputationRefresh: false,
-                })
-            )}
+            to={urls.insightNew(undefined, undefined, query)}
         >
             Explore results
         </LemonButton>