feat(product analytics): Remove insight exit pop up

cypress/e2e/insights-reload-query.ts

@@ -0,0 +1,46 @@
+describe('ReloadInsight component', () => {
+    beforeEach(() => {
+        // Clear local storage before each test to ensure a clean state
+        cy.clearLocalStorage()
+    })
+
+    it('saves the query to the URL and localStorage, and reloads it when prompted', () => {
+        // Visit the new insight creation page
+        cy.visit('/insights/new')
+
+        cy.wait(2000)
+
+        cy.get('[data-attr="math-selector-0"]').click({ force: true })
+        cy.get('[data-attr="math-dau-0"]').click({ force: true })
+
+        // Check that the 'draft-query' item is stored in localStorage
+        cy.window().then((window) => {
+            const currentTeamId = window.POSTHOG_APP_CONTEXT.current_team.id
+            const draftQuery = window.localStorage.getItem(`draft-query-${currentTeamId}`)
+            expect(draftQuery).to.not.be.null
+
+            const draftQueryObj = JSON.parse(draftQuery)
+            expect(draftQueryObj).to.have.property('query')
+
+            expect(draftQueryObj).to.have.property('query')
+
+            const firstSeries = draftQueryObj.query.source.series[0]
+
+            expect(firstSeries).to.include({
+                event: '$pageview',
+                math: 'dau',
+            })
+        })
+
+        // Navigate away to the "Saved Insights" page
+        cy.visit('/saved_insights')
+
+        // Verify that the ReloadInsight component displays a message about the unsaved insight
+        cy.contains('You have an unsaved insight from').should('exist')
+
+        // Click the link to reload the unsaved insight
+        cy.contains('Click here').click()
+
+        cy.get('[data-attr="math-selector-0"]').should('contain', 'Unique users')
+    })
+})

frontend/src/scenes/insights/Insight.tsx

@@ -4,6 +4,7 @@ import { DebugCHQueries } from 'lib/components/CommandPalette/DebugCHQueries'
 import { isObject } from 'lib/utils'
 import { InsightPageHeader } from 'scenes/insights/InsightPageHeader'
 import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
+import { ReloadInsight } from 'scenes/saved-insights/ReloadInsight'
 import { urls } from 'scenes/urls'
 
 import { Query } from '~/queries/Query/Query'
@@ -21,7 +22,7 @@ export interface InsightSceneProps {
 
 export function Insight({ insightId }: InsightSceneProps): JSX.Element {
     // insightSceneLogic
-    const { insightMode, insight, filtersOverride, variablesOverride } = useValues(insightSceneLogic)
+    const { insightMode, insight, filtersOverride, variablesOverride, freshQuery } = useValues(insightSceneLogic)
 
     // insightLogic
     const logic = insightLogic({
@@ -79,6 +80,8 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element {
                     </div>
                 )}
 
+                {freshQuery ? <ReloadInsight /> : null}
+
                 <Query
                     query={isInsightVizNode(query) ? { ...query, full: true } : query}
                     setQuery={setQuery}

frontend/src/scenes/insights/insightDataLogic.tsx

@@ -1,7 +1,9 @@
 import { actions, connect, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
+import { actionToUrl, router } from 'kea-router'
 import { objectsEqual } from 'lib/utils'
 import { DATAWAREHOUSE_EDITOR_ITEM_ID } from 'scenes/data-warehouse/external/dataWarehouseExternalSceneLogic'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { Scene } from 'scenes/sceneTypes'
 import { filterTestAccountsDefaultsLogic } from 'scenes/settings/environment/filterTestAccountDefaultsLogic'
 
 import { examples } from '~/queries/examples'
@@ -14,10 +16,13 @@ import { DataVisualizationNode, InsightVizNode, Node, NodeKind } from '~/queries
 import { isDataTableNode, isDataVisualizationNode, isHogQuery, isInsightVizNode } from '~/queries/utils'
 import { ExportContext, InsightLogicProps, InsightType } from '~/types'
 
+import { teamLogic } from '../teamLogic'
 import type { insightDataLogicType } from './insightDataLogicType'
 import { insightDataTimingLogic } from './insightDataTimingLogic'
 import { insightLogic } from './insightLogic'
+import { insightSceneLogic } from './insightSceneLogic'
 import { insightUsageLogic } from './insightUsageLogic'
+import { crushDraftQueryForLocalStorage, crushDraftQueryForURL, isQueryTooLarge } from './utils'
 import { compareQuery } from './utils/queryUtils'
 
 export const insightDataLogic = kea<insightDataLogicType>([
@@ -29,6 +34,10 @@ export const insightDataLogic = kea<insightDataLogicType>([
         values: [
             insightLogic,
             ['insight', 'savedInsight'],
+            insightSceneLogic,
+            ['insightId', 'insightMode', 'activeScene'],
+            teamLogic,
+            ['currentTeamId'],
             dataNodeLogic({
                 key: insightVizDataNodeKey(props),
                 loadPriority: props.loadPriority,
@@ -49,7 +58,7 @@ export const insightDataLogic = kea<insightDataLogicType>([
         ],
         actions: [
             insightLogic,
-            ['setInsight', 'loadInsightSuccess'],
+            ['setInsight'],
             dataNodeLogic({ key: insightVizDataNodeKey(props) } as DataNodeLogicProps),
             ['loadData', 'loadDataSuccess', 'loadDataFailure', 'setResponse as setInsightData'],
         ],
@@ -187,21 +196,59 @@ export const insightDataLogic = kea<insightDataLogicType>([
                 actions.setInsightData({ ...values.insightData, result })
             }
         },
-        loadInsightSuccess: ({ insight }) => {
-            if (insight.query) {
-                actions.setQuery(insight.query)
-            }
-        },
         cancelChanges: () => {
             const savedQuery = values.savedInsight.query
             const savedResult = values.savedInsight.result
             actions.setQuery(savedQuery || null)
             actions.setInsightData({ ...values.insightData, result: savedResult ? savedResult : null })
         },
+        setQuery: ({ query }) => {
+            // if the query is not changed, don't save it
+            if (!query || !values.queryChanged) {
+                return
+            }
+            // only run on insight scene
+            if (insightSceneLogic.values.activeScene !== Scene.Insight) {
+                return
+            }
+            // don't save for saved insights
+            if (insightSceneLogic.values.insightId !== 'new') {
+                return
+            }
+
+            if (isQueryTooLarge(query)) {
+                localStorage.removeItem(`draft-query-${values.currentTeamId}`)
+            }
+            localStorage.setItem(
+                `draft-query-${values.currentTeamId}`,
+                crushDraftQueryForLocalStorage(query, Date.now())
+            )
+        },
     })),
     propsChanged(({ actions, props, values }) => {
         if (props.cachedInsight?.query && !objectsEqual(props.cachedInsight.query, values.query)) {
             actions.setQuery(props.cachedInsight.query)
         }
     }),
+    actionToUrl(({ values }) => ({
+        setQuery: ({ query }) => {
+            if (
+                values.queryChanged &&
+                insightSceneLogic.values.activeScene === Scene.Insight &&
+                insightSceneLogic.values.insightId === 'new'
+            ) {
+                // query is changed and we are in edit mode
+                return [
+                    router.values.currentLocation.pathname,
+                    {
+                        ...router.values.currentLocation.searchParams,
+                    },
+                    {
+                        ...router.values.currentLocation.hashParams,
+                        q: crushDraftQueryForURL(query),
+                    },
+                ]
+            }
+        },
+    })),
 ])

frontend/src/scenes/insights/insightLogic.tsx

@@ -336,6 +336,8 @@ export const insightLogic: LogicWrapper<insightLogicType> = kea<insightLogicType
                     ? await insightsApi.update(insightNumericId, insightRequest)
                     : await insightsApi.create(insightRequest)
                 savedInsightsLogic.findMounted()?.actions.loadInsights() // Load insights afresh
+                // remove draft query from local storage
+                localStorage.removeItem('draft-query')
                 actions.saveInsightSuccess()
             } catch (e) {
                 actions.saveInsightFailure()

frontend/src/scenes/insights/insightSceneLogic.test.ts

@@ -44,41 +44,23 @@ describe('insightSceneLogic', () => {
             })
     })
 
-    it('redirects when opening /insight/new with insight type in theurl', async () => {
+    it('redirects maintaining url params when opening /insight/new with insight type in theurl', async () => {
         router.actions.push(urls.insightNew(InsightType.FUNNELS))
         await expectLogic(logic).toFinishAllListeners()
-        await expectLogic(router)
-            .delay(1)
-            .toMatchValues({
-                location: partial({
-                    pathname: addProjectIdIfMissing(urls.insightNew(), MOCK_TEAM_ID),
-                    search: '',
-                    hash: '',
-                }),
-            })
 
         expect((logic.values.insightLogicRef?.logic.values.insight.query as InsightVizNode).source?.kind).toEqual(
             'FunnelsQuery'
         )
     })
 
-    it('redirects when opening /insight/new with query in the url', async () => {
+    it('redirects maintaining url params when opening /insight/new with query in the url', async () => {
         router.actions.push(
             urls.insightNew(undefined, undefined, {
                 kind: NodeKind.InsightVizNode,
                 source: examples.InsightPathsQuery,
             } as InsightVizNode)
         )
         await expectLogic(logic).toFinishAllListeners()
-        await expectLogic(router)
-            .delay(1)
-            .toMatchValues({
-                location: partial({
-                    pathname: addProjectIdIfMissing(urls.insightNew(), MOCK_TEAM_ID),
-                    search: '',
-                    hash: '',
-                }),
-            })
 
         expect((logic.values.insightLogicRef?.logic.values.insight.query as InsightVizNode).source?.kind).toEqual(
             'PathsQuery'

frontend/src/scenes/insights/insightSceneLogic.tsx

@@ -26,14 +26,18 @@ import { insightDataLogic } from './insightDataLogic'
 import { insightDataLogicType } from './insightDataLogicType'
 import type { insightSceneLogicType } from './insightSceneLogicType'
 import { summarizeInsight } from './summarizeInsight'
+import { parseDraftQueryFromLocalStorage, parseDraftQueryFromURL } from './utils'
+
+const NEW_INSIGHT = 'new' as const
+export type InsightId = InsightShortId | typeof NEW_INSIGHT | null
 
 export const insightSceneLogic = kea<insightSceneLogicType>([
     path(['scenes', 'insights', 'insightSceneLogic']),
     connect(() => ({
         logic: [eventUsageLogic],
         values: [
             teamLogic,
-            ['currentTeam'],
+            ['currentTeam', 'currentTeamId'],
             sceneLogic,
             ['activeScene'],
             preflightLogic,
@@ -73,10 +77,11 @@ export const insightSceneLogic = kea<insightSceneLogicType>([
             unmount,
         }),
         setOpenedWithQuery: (query: Node | null) => ({ query }),
+        setFreshQuery: (freshQuery: boolean) => ({ freshQuery }),
     }),
     reducers({
         insightId: [
-            null as null | 'new' | InsightShortId,
+            null as null | InsightId,
             {
                 setSceneState: (_, { insightId }) => insightId,
             },
@@ -150,6 +155,7 @@ export const insightSceneLogic = kea<insightSceneLogicType>([
             },
         ],
         openedWithQuery: [null as Node | null, { setOpenedWithQuery: (_, { query }) => query }],
+        freshQuery: [false, { setFreshQuery: (_, { freshQuery }) => freshQuery }],
     }),
     selectors(() => ({
         insightSelector: [(s) => [s.insightLogicRef], (insightLogicRef) => insightLogicRef?.logic.selectors.insight],
@@ -332,24 +338,20 @@ export const insightSceneLogic = kea<insightSceneLogicType>([
 
             let queryFromUrl: Node | null = null
             if (q) {
-                queryFromUrl = JSON.parse(q)
+                const validQuery = parseDraftQueryFromURL(q)
+                if (validQuery) {
+                    queryFromUrl = validQuery
+                } else {
+                    console.error('Invalid query', q)
+                }
             } else if (insightType && Object.values(InsightType).includes(insightType)) {
                 queryFromUrl = getDefaultQuery(insightType, values.filterTestAccountsDefault)
             }
 
-            // Redirect to a simple URL if we had a query in the URL
-            if (q || insightType) {
-                router.actions.replace(
-                    insightId === 'new'
-                        ? urls.insightNew(undefined, dashboard)
-                        : insightMode === ItemMode.Edit
-                        ? urls.insightEdit(insightId)
-                        : urls.insightView(insightId)
-                )
-            }
+            actions.setFreshQuery(false)
 
             // reset the insight's state if we have to
-            if (initial || method === 'PUSH' || queryFromUrl) {
+            if (initial || queryFromUrl || method === 'PUSH') {
                 if (insightId === 'new') {
                     const query = queryFromUrl || getDefaultQuery(InsightType.TRENDS, values.filterTestAccountsDefault)
                     values.insightLogicRef?.logic.actions.setInsight(
@@ -364,6 +366,10 @@ export const insightSceneLogic = kea<insightSceneLogicType>([
                         }
                     )
 
+                    if (!queryFromUrl) {
+                        actions.setFreshQuery(true)
+                    }
+
                     actions.setOpenedWithQuery(query)
 
                     eventUsageLogic.actions.reportInsightCreated(query)
@@ -416,6 +422,22 @@ export const insightSceneLogic = kea<insightSceneLogicType>([
 
             const metadataChanged = !!values.insightLogicRef?.logic.values.insightChanged
             const queryChanged = !!values.insightDataLogicRef?.logic.values.queryChanged
+            const draftQueryFromLocalStorage = localStorage.getItem(`draft-query-${values.currentTeamId}`)
+            let draftQuery: { query: Node; timestamp: number } | null = null
+            if (draftQueryFromLocalStorage) {
+                const parsedQuery = parseDraftQueryFromLocalStorage(draftQueryFromLocalStorage)
+                if (parsedQuery) {
+                    draftQuery = parsedQuery
+                } else {
+                    // If the draft query is invalid, remove it
+                    localStorage.removeItem(`draft-query-${values.currentTeamId}`)
+                }
+            }
+            const query = values.insightDataLogicRef?.logic.values.query
+
+            if (draftQuery && query && objectsEqual(draftQuery.query, query)) {
+                return false
+            }
 
             return metadataChanged || queryChanged
         },