add export button

PostHog · Dec 4, 2024 · fc253af · fc253af
1 parent b5fa0ea
commit fc253af
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 24 deletions.
diff --git a/frontend/src/scenes/data-warehouse/editor/OutputPane.tsx b/frontend/src/scenes/data-warehouse/editor/OutputPane.tsx
@@ -26,7 +26,7 @@ import { variablesLogic } from '~/queries/nodes/DataVisualization/Components/Var
 import { DataTableVisualizationProps } from '~/queries/nodes/DataVisualization/DataVisualization'
 import { dataVisualizationLogic } from '~/queries/nodes/DataVisualization/dataVisualizationLogic'
 import { DataVisualizationNode, HogQLQueryResponse, NodeKind } from '~/queries/schema'
-import { ChartDisplayType, ExporterFormat } from '~/types'
+import { ChartDisplayType, ExportContext, ExporterFormat } from '~/types'
 
 import { dataWarehouseViewsLogic } from '../saved_queries/dataWarehouseViewsLogic'
 import { multitabEditorLogic } from './multitabEditorLogic'
@@ -39,6 +39,7 @@ interface OutputPaneProps {
     onQueryInputChange: () => void
     onQueryChange: (query: DataVisualizationNode) => void
     query: string
+    exportContext?: ExportContext
 }
 
 export function OutputPane({
@@ -48,6 +49,7 @@ export function OutputPane({
     onSaveInsight,
     saveDisabledReason,
     query,
+    exportContext,
 }: OutputPaneProps): JSX.Element {
     const { activeTab } = useValues(outputPaneLogic)
     const { setActiveTab } = useActions(outputPaneLogic)
@@ -64,6 +66,7 @@ export function OutputPane({
     const { response, responseLoading } = useValues(dataNodeLogic)
     const { dataWarehouseSavedQueriesLoading } = useValues(dataWarehouseViewsLogic)
     const { updateDataWarehouseSavedQuery } = useActions(dataWarehouseViewsLogic)
+    const { visualizationType } = useValues(dataVisualizationLogic)
 
     const vizKey = `SQLEditorScene`
 
@@ -126,6 +129,7 @@ export function OutputPane({
                         setQuery={onQueryChange}
                         context={{}}
                         cachedResults={undefined}
+                        exportContext={exportContext}
                         onSaveInsight={onSaveInsight}
                     />
                 </div>
@@ -160,6 +164,26 @@ export function OutputPane({
                 <div className="flex gap-4">
                     <AddVariableButton />
 
+                    {exportContext && (
+                        <ExportButton
+                            disabledReason={
+                                visualizationType != ChartDisplayType.ActionsTable &&
+                                'Only table results are exportable'
+                            }
+                            type="secondary"
+                            items={[
+                                {
+                                    export_format: ExporterFormat.CSV,
+                                    export_context: exportContext,
+                                },
+                                {
+                                    export_format: ExporterFormat.XLSX,
+                                    export_context: exportContext,
+                                },
+                            ]}
+                        />
+                    )}
+
                     {editingView ? (
                         <>
                             <LemonButton
@@ -291,26 +315,6 @@ function InternalDataTableVisualization(
                                         tooltip="Visualization settings"
                                     />
 
-                                    {props.exportContext && (
-                                        <ExportButton
-                                            disabledReason={
-                                                visualizationType != ChartDisplayType.ActionsTable &&
-                                                'Only table results are exportable'
-                                            }
-                                            type="secondary"
-                                            items={[
-                                                {
-                                                    export_format: ExporterFormat.CSV,
-                                                    export_context: props.exportContext,
-                                                },
-                                                {
-                                                    export_format: ExporterFormat.XLSX,
-                                                    export_context: props.exportContext,
-                                                },
-                                            ]}
-                                        />
-                                    )}
-
                                     <LemonButton type="primary" onClick={() => props.onSaveInsight()}>
                                         Create insight
                                     </LemonButton>

diff --git a/frontend/src/scenes/data-warehouse/editor/QueryWindow.tsx b/frontend/src/scenes/data-warehouse/editor/QueryWindow.tsx
@@ -111,8 +111,17 @@ function InternalQueryWindow({ setQuery, query }: InternalQueryWindowProps): JSX
         },
     })
 
-    const { allTabs, activeModelUri, queryInput, activeQuery, hasErrors, error, isValidView, editingView } =
-        useValues(logic)
+    const {
+        allTabs,
+        activeModelUri,
+        queryInput,
+        activeQuery,
+        hasErrors,
+        error,
+        isValidView,
+        editingView,
+        exportContext,
+    } = useValues(logic)
     const { selectTab, deleteTab, createTab, setQueryInput, runQuery, saveAsView, saveAsInsight } = useActions(logic)
 
     return (
@@ -156,6 +165,7 @@ function InternalQueryWindow({ setQuery, query }: InternalQueryWindowProps): JSX
                 onQueryChange={setQuery}
                 onSaveView={saveAsView}
                 onSaveInsight={saveAsInsight}
+                exportContext={exportContext}
                 saveDisabledReason={
                     hasErrors ? error ?? 'Query has errors' : !isValidView ? 'Some fields may need an alias' : ''
                 }

diff --git a/frontend/src/scenes/data-warehouse/editor/multitabEditorLogic.tsx b/frontend/src/scenes/data-warehouse/editor/multitabEditorLogic.tsx
@@ -11,9 +11,10 @@ import { insightsApi } from 'scenes/insights/utils/api'
 import { urls } from 'scenes/urls'
 
 import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
+import { queryExportContext } from '~/queries/query'
 import { HogQLMetadataResponse, HogQLNotice, HogQLQuery, NodeKind } from '~/queries/schema'
 import { DataVisualizationNode } from '~/queries/schema'
-import { DataWarehouseSavedQuery } from '~/types'
+import { DataWarehouseSavedQuery, ExportContext } from '~/types'
 
 import { dataWarehouseViewsLogic } from '../saved_queries/dataWarehouseViewsLogic'
 import type { multitabEditorLogicType } from './multitabEditorLogicType'
@@ -441,6 +442,18 @@ export const multitabEditorLogic = kea<multitabEditorLogicType>([
                     : null
             },
         ],
+        exportContext: [
+            () => [(_, props) => props.sourceQuery],
+            (sourceQuery) => {
+                // TODO: use active tab at some point
+                const filename = 'export'
+
+                return {
+                    ...queryExportContext(sourceQuery.source, undefined, undefined),
+                    filename,
+                } as ExportContext
+            },
+        ],
     }),
     afterMount(({ props, values }) => {
         props.onQueryInputChange?.(values.queryInput)