wip

PostHog · Jul 26, 2024 · beb89c0 · beb89c0
1 parent 6c99d0a
commit beb89c0
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 38 deletions.
diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx
@@ -41,14 +41,19 @@ export const humanFriendlyDataWarehouseTabName = (tab: DataWarehouseTab): string
 export function DataWarehouseExternalScene(): JSX.Element {
     const { currentTab } = useValues(dataWarehouseSceneLogic)
 
-    const { insightProps, insightSaving } = useValues(
+    const { insightSaving, insightProps } = useValues(
         insightLogic({
             dashboardItemId: 'new',
             cachedInsight: null,
         })
     )
-
-    const { saveAs } = useActions(insightDataLogic(insightProps))
+    const { saveAs } = useActions(
+        insightLogic({
+            dashboardItemId: 'new',
+            cachedInsight: null,
+        })
+    )
+    const { query } = useValues(insightDataLogic(insightProps))
 
     return (
         <div>
@@ -59,7 +64,7 @@ export function DataWarehouseExternalScene(): JSX.Element {
                             <LemonButton
                                 type="primary"
                                 data-attr="save-exploration"
-                                onClick={() => saveAs(true)}
+                                onClick={() => saveAs(query, true)}
                                 loading={insightSaving}
                             >
                                 Save as insight
@@ -93,7 +98,7 @@ export function DataWarehouseExternalScene(): JSX.Element {
                 onChange={(tab) => router.actions.push(urls.dataWarehouse(tab as DataWarehouseTab))}
                 tabs={Object.entries(tabToContent).map(([tab, content]) => ({
                     label: (
-                        <span className="flex justify-center items-center justify-between gap-1">
+                        <span className="flex items-center justify-between gap-1">
                             {humanFriendlyDataWarehouseTabName(tab as DataWarehouseTab)}{' '}
                         </span>
                     ),

diff --git a/frontend/src/scenes/insights/InsightPageHeader.tsx b/frontend/src/scenes/insights/InsightPageHeader.tsx
@@ -46,14 +46,14 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
         insightSaving,
         hasDashboardItemId,
     } = useValues(insightLogic(insightLogicProps))
-    const { setInsightMetadata } = useActions(insightLogic(insightLogicProps))
+    const { setInsightMetadata, saveAs } = useActions(insightLogic(insightLogicProps))
 
     // savedInsightsLogic
     const { duplicateInsight, loadInsights } = useActions(savedInsightsLogic)
 
     // insightDataLogic
-    const { queryChanged, showQueryEditor, hogQL, exportContext } = useValues(insightDataLogic(insightProps))
-    const { saveInsight, saveAs, toggleQueryEditorPanel } = useActions(insightDataLogic(insightProps))
+    const { queryChanged, showQueryEditor, hogQL, exportContext, query } = useValues(insightDataLogic(insightProps))
+    const { saveInsight, toggleQueryEditorPanel } = useActions(insightDataLogic(insightProps))
 
     // other logics
     useMountedLogic(insightCommandLogic(insightProps))
@@ -275,6 +275,7 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
                             )
                         ) : (
                             <InsightSaveButton
+                                query={query}
                                 saveAs={saveAs}
                                 saveInsight={saveInsight}
                                 isSaved={hasDashboardItemId}

diff --git a/frontend/src/scenes/insights/InsightSaveButton.tsx b/frontend/src/scenes/insights/InsightSaveButton.tsx
@@ -1,14 +1,18 @@
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 
+import { Node } from '~/queries/schema'
+
 export function InsightSaveButton({
+    query,
     saveAs,
     saveInsight,
     isSaved,
     insightSaving,
     insightChanged,
     addingToDashboard,
 }: {
-    saveAs: () => void
+    query: Node
+    saveAs: (query: Node) => void
     saveInsight: (redirectToViewMode?: boolean) => void
     isSaved: boolean | undefined
     insightSaving: boolean
@@ -40,7 +44,11 @@ export function InsightSaveButton({
                                 </LemonButton>
                             )}
                             {saveAsAvailable && (
-                                <LemonButton onClick={saveAs} data-attr="insight-save-as-new-insight" fullWidth>
+                                <LemonButton
+                                    onClick={() => saveAs(query)}
+                                    data-attr="insight-save-as-new-insight"
+                                    fullWidth
+                                >
                                     Save as…
                                 </LemonButton>
                             )}

diff --git a/frontend/src/scenes/insights/insightDataLogic.tsx b/frontend/src/scenes/insights/insightDataLogic.tsx
@@ -1,7 +1,5 @@
-import { LemonDialog, LemonInput } from '@posthog/lemon-ui'
 import { actions, connect, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
-import { LemonField } from 'lib/lemon-ui/LemonField'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { objectsEqual } from 'lib/utils'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
@@ -66,7 +64,7 @@ export const insightDataLogic = kea<insightDataLogicType>([
         ],
         actions: [
             insightLogic,
-            ['setInsight', 'loadInsightSuccess', 'saveInsight as insightLogicSaveInsight', 'saveAsConfirmation'],
+            ['setInsight', 'loadInsightSuccess', 'saveInsight as insightLogicSaveInsight'],
             dataNodeLogic({ key: insightVizDataNodeKey(props) } as DataNodeLogicProps),
             ['loadData', 'loadDataSuccess', 'loadDataFailure', 'setResponse as setInsightData'],
         ],
@@ -75,7 +73,6 @@ export const insightDataLogic = kea<insightDataLogicType>([
 
     actions({
         setQuery: (query: Node | null) => ({ query }),
-        saveAs: (redirectToViewMode?: boolean) => ({ redirectToViewMode }),
         saveInsight: (redirectToViewMode = true) => ({ redirectToViewMode }),
         toggleQueryEditorPanel: true,
         cancelChanges: true,
@@ -231,26 +228,6 @@ export const insightDataLogic = kea<insightDataLogicType>([
 
             actions.insightLogicSaveInsight(redirectToViewMode)
         },
-        saveAs: async ({ redirectToViewMode }) => {
-            LemonDialog.openForm({
-                title: 'Save as new insight',
-                initialValues: {
-                    insightName:
-                        values.queryBasedInsight.name || values.queryBasedInsight.derived_name
-                            ? `${values.queryBasedInsight.name || values.queryBasedInsight.derived_name} (copy)`
-                            : '',
-                },
-                content: (
-                    <LemonField name="insightName">
-                        <LemonInput data-attr="insight-name" placeholder="Please enter the new name" autoFocus />
-                    </LemonField>
-                ),
-                errors: {
-                    insightName: (name) => (!name ? 'You must enter a name' : undefined),
-                },
-                onSubmit: async ({ insightName }) => actions.saveAsConfirmation(insightName, redirectToViewMode),
-            })
-        },
         cancelChanges: () => {
             const savedFilters = values.savedInsight.filters
             const savedResult = values.savedInsight.result

diff --git a/frontend/src/scenes/insights/insightLogic.ts → ...tend/src/scenes/insights/insightLogic.tsx b/frontend/src/scenes/insights/insightLogic.ts → ...tend/src/scenes/insights/insightLogic.tsx
@@ -1,8 +1,10 @@
+import { LemonDialog, LemonInput } from '@posthog/lemon-ui'
 import { actions, connect, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import { router } from 'kea-router'
 import api from 'lib/api'
 import { DashboardPrivilegeLevel, FEATURE_FLAGS } from 'lib/constants'
+import { LemonField } from 'lib/lemon-ui/LemonField'
 import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { objectsEqual } from 'lib/utils'
@@ -24,7 +26,7 @@ import { insightsModel } from '~/models/insightsModel'
 import { tagsModel } from '~/models/tagsModel'
 import { getInsightFilterOrQueryForPersistance } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter'
 import { getQueryBasedInsightModel } from '~/queries/nodes/InsightViz/utils'
-import { InsightVizNode } from '~/queries/schema'
+import { InsightVizNode, Node } from '~/queries/schema'
 import {
     FilterType,
     InsightLogicProps,
@@ -87,7 +89,12 @@ export const insightLogic = kea<insightLogicType>([
             insight,
             options,
         }),
-        saveAsConfirmation: (name: string, redirectToViewMode?: boolean) => ({ name, redirectToViewMode }),
+        saveAs: (query: Node, redirectToViewMode?: boolean) => ({ query, redirectToViewMode }),
+        saveAsConfirmation: (name: string, query: Node, redirectToViewMode?: boolean) => ({
+            name,
+            query,
+            redirectToViewMode,
+        }),
         cancelChanges: true,
         saveInsight: (redirectToViewMode = true) => ({ redirectToViewMode }),
         saveInsightSuccess: true,
@@ -420,11 +427,31 @@ export const insightLogic = kea<insightLogicType>([
                 router.actions.push(urls.insightEdit(savedInsight.short_id))
             }
         },
-        saveAsConfirmation: async ({ name, redirectToViewMode }) => {
+        saveAs: async ({ query, redirectToViewMode }) => {
+            LemonDialog.openForm({
+                title: 'Save as new insight',
+                initialValues: {
+                    name:
+                        values.queryBasedInsight.name || values.queryBasedInsight.derived_name
+                            ? `${values.queryBasedInsight.name || values.queryBasedInsight.derived_name} (copy)`
+                            : '',
+                },
+                content: (
+                    <LemonField name="name">
+                        <LemonInput data-attr="insight-name" placeholder="Please enter the new name" autoFocus />
+                    </LemonField>
+                ),
+                errors: {
+                    name: (name) => (!name ? 'You must enter a name' : undefined),
+                },
+                onSubmit: async ({ name }) => actions.saveAsConfirmation(name, query, redirectToViewMode),
+            })
+        },
+        saveAsConfirmation: async ({ name, query, redirectToViewMode }) => {
             const insight = await insightsApi.create(
                 {
                     name,
-                    query: values.queryBasedInsight.query,
+                    query,
                     saved: true,
                 },
                 {