chore(hogql): Add export CSV button that uses HogQL query export (Pos…

…tHog#19507)
jacobwgillespie · Jan 12, 2024 · 04b94ab · 04b94ab
1 parent 564332a
commit 04b94ab
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 18 deletions.
diff --git a/frontend/src/queries/nodes/DataTable/DataTableExport.tsx b/frontend/src/queries/nodes/DataTable/DataTableExport.tsx
@@ -16,14 +16,14 @@ import {
 } from '~/queries/nodes/DataTable/utils'
 import { getPersonsEndpoint } from '~/queries/query'
 import { DataNode, DataTableNode, NodeKind } from '~/queries/schema'
-import { isEventsQuery, isHogQLQuery, isPersonsNode } from '~/queries/utils'
+import { isActorsQuery, isEventsQuery, isHogQLQuery, isPersonsNode } from '~/queries/utils'
 import { ExporterFormat } from '~/types'
 
 import { dataTableLogic, DataTableRow } from './dataTableLogic'
 
-const EXPORT_MAX_LIMIT = 10000
+export const EXPORT_MAX_LIMIT = 10000
 
-async function startDownload(query: DataTableNode, onlySelectedColumns: boolean): Promise<void> {
+export async function startDownload(query: DataTableNode, onlySelectedColumns: boolean): Promise<void> {
     const exportContext = isPersonsNode(query.source)
         ? { path: getPersonsEndpoint(query.source) }
         : { source: query.source }
@@ -33,7 +33,7 @@ async function startDownload(query: DataTableNode, onlySelectedColumns: boolean)
 
     if (onlySelectedColumns) {
         exportContext['columns'] = (
-            (isEventsQuery(query.source) ? query.source.select : null) ??
+            (isEventsQuery(query.source) || isActorsQuery(query.source) ? query.source.select : null) ??
             query.columns ??
             defaultDataTableColumns(query.source.kind)
         )?.filter((c) => c !== 'person.$delete')

diff --git a/frontend/src/scenes/retention/RetentionModal.tsx b/frontend/src/scenes/retention/RetentionModal.tsx
@@ -14,6 +14,9 @@ import { RetentionTableAppearanceType } from 'scenes/retention/types'
 import { MissingPersonsAlert } from 'scenes/trends/persons-modal/PersonsModal'
 import { urls } from 'scenes/urls'
 
+import { EXPORT_MAX_LIMIT, startDownload } from '~/queries/nodes/DataTable/DataTableExport'
+import { ExportWithConfirmation } from '~/queries/nodes/DataTable/ExportWithConfirmation'
+import { DataTableNode, NodeKind } from '~/queries/schema'
 import { ExporterFormat } from '~/types'
 
 import { retentionLogic } from './retentionLogic'
@@ -25,9 +28,18 @@ export function RetentionModal(): JSX.Element | null {
     const { results } = useValues(retentionLogic(insightProps))
     const { people, peopleLoading, peopleLoadingMore } = useValues(retentionPeopleLogic(insightProps))
     const { loadMorePeople } = useActions(retentionPeopleLogic(insightProps))
-    const { aggregationTargetLabel, selectedInterval, exploreUrl } = useValues(retentionModalLogic(insightProps))
+    const { aggregationTargetLabel, selectedInterval, exploreUrl, actorsQuery } = useValues(
+        retentionModalLogic(insightProps)
+    )
     const { closeModal } = useActions(retentionModalLogic(insightProps))
 
+    const dataTableNodeQuery: DataTableNode | undefined = actorsQuery
+        ? {
+              kind: NodeKind.DataTableNode,
+              source: actorsQuery,
+          }
+        : undefined
+
     if (!results || selectedInterval === null) {
         return null
     }
@@ -41,19 +53,34 @@ export function RetentionModal(): JSX.Element | null {
             footer={
                 <div className="flex justify-between gap-2 w-full">
                     <div className="flex gap-2">
-                        <LemonButton
-                            type="secondary"
-                            onClick={() =>
-                                void triggerExport({
-                                    export_format: ExporterFormat.CSV,
-                                    export_context: {
-                                        path: row?.people_url,
-                                    },
-                                })
-                            }
-                        >
-                            Download CSV
-                        </LemonButton>
+                        {!exploreUrl && (
+                            <LemonButton
+                                type="secondary"
+                                onClick={() =>
+                                    void triggerExport({
+                                        export_format: ExporterFormat.CSV,
+                                        export_context: {
+                                            path: row?.people_url,
+                                        },
+                                    })
+                                }
+                            >
+                                Download CSV
+                            </LemonButton>
+                        )}
+                        {!!dataTableNodeQuery && (
+                            <ExportWithConfirmation
+                                key={1}
+                                placement={'topRight'}
+                                onConfirm={() => {
+                                    dataTableNodeQuery && void startDownload(dataTableNodeQuery, true)
+                                }}
+                                actor={'persons'}
+                                limit={EXPORT_MAX_LIMIT}
+                            >
+                                <LemonButton type="secondary">Export all as CSV</LemonButton>
+                            </ExportWithConfirmation>
+                        )}
                     </div>
                     {exploreUrl && (
                         <LemonButton