feat: Universal CSV exports (PostHog#10644)

* Added new version of the exporter using API based exporting

Co-authored-by: Paul D'Ambra <[email protected]>

Author: benjackwhite

.github/workflows/docker-image-test.yml

@@ -165,6 +165,7 @@ jobs:
               uses: cypress-io/github-action@v2
               with:
                   config-file: cypress.e2e.config.ts
+                  config: retries=2
                   spec: ${{ matrix.specs }}
 
             - name: Archive test screenshots

cypress.e2e.config.ts

@@ -29,7 +29,6 @@ export default defineConfig({
     projectId: 'twojfp',
     viewportWidth: 1200,
     viewportHeight: 1080,
-    retries: 2,
     trashAssetsBeforeRuns: true,
     e2e: {
         // We've imported your old cypress plugins here.

cypress/e2e/exports.js

@@ -10,6 +10,7 @@ describe('Exporting Insights', () => {
             req.reply(
                 decideResponse({
                     'export-dashboard-insights': true,
+                    ASYNC_EXPORT_CSV_FOR_LIVE_EVENTS: true,
                 })
             )
         )
@@ -28,14 +29,14 @@ describe('Exporting Insights', () => {
     })
 
     it('Export an Insight to png', () => {
-        cy.get('[data-attr=more-button]').click()
-        cy.get('[data-attr=export-button]').click()
+        cy.get('.page-buttons [data-attr=more-button]').click()
+        cy.get('.Popup [data-attr=export-button]').click()
         cy.get('[data-attr=export-button-png]').click()
 
-        const expecteFileName = 'export-pageview-count.png'
+        const expectedFileName = 'export-pageview-count.png'
         cy.task('compareToReferenceImage', {
-            source: expecteFileName,
-            reference: `../data/exports/${expecteFileName}`,
+            source: expectedFileName,
+            reference: `../data/exports/${expectedFileName}`,
             diffThreshold: 0.01,
         })
     })

frontend/src/lib/components/ExportButton/ExportButton.tsx

@@ -1,50 +1,25 @@
 import React from 'react'
+import { ExporterFormat } from '~/types'
 import { LemonButton, LemonButtonProps, LemonButtonWithPopup } from '../LemonButton'
-import { useActions, useValues } from 'kea'
-import { ExporterFormat, exporterLogic } from './exporterLogic'
 import { LemonDivider } from '../LemonDivider'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { InsightLogicProps, InsightShortId } from '~/types'
-
-interface ExportButtonProps extends Pick<LemonButtonProps, 'icon' | 'type' | 'fullWidth'> {
-    dashboardId?: number
-    insightShortId?: InsightShortId
+import { triggerExport, TriggerExportProps } from './exporter'
+
+export interface ExportButtonItem {
+    title?: string
+    export_format: ExporterFormat
+    export_context?: TriggerExportProps['export_context']
+    dashboard?: number
+    insight?: number
 }
 
-export function ExportButton({ dashboardId, insightShortId, ...buttonProps }: ExportButtonProps): JSX.Element {
-    const insightLogicProps: InsightLogicProps = {
-        dashboardItemId: insightShortId,
-        doNotLoad: true,
-    }
-
-    const { supportsCsvExport, csvExportUrl, insight } = useValues(insightLogic(insightLogicProps))
-
-    const { exportItem } = useActions(exporterLogic({ dashboardId, insightId: insight?.id }))
-    const { exportInProgress } = useValues(exporterLogic({ dashboardId, insightId: insight?.id }))
-
-    const supportedFormats: ExporterFormat[] = []
-
-    if (dashboardId || insightShortId) {
-        supportedFormats.push(ExporterFormat.PNG)
-    }
-    if (supportsCsvExport) {
-        supportedFormats.push(ExporterFormat.CSV)
-    }
-
-    const onExportItemClick = (exportFormat: ExporterFormat): void => {
-        // NOTE: Once we standardise the exporting code in the backend this can be removed
-        if (exportFormat === ExporterFormat.CSV) {
-            window.open(csvExportUrl, '_blank')
-            return
-        }
-
-        exportItem(exportFormat)
-    }
+export interface ExportButtonProps extends Pick<LemonButtonProps, 'icon' | 'type' | 'fullWidth'> {
+    items: ExportButtonItem[]
+}
 
+export function ExportButton({ items, ...buttonProps }: ExportButtonProps): JSX.Element {
     return (
         <LemonButtonWithPopup
             type="stealth"
-            loading={exportInProgress}
             data-attr="export-button"
             {...buttonProps}
             popup={{
@@ -54,17 +29,21 @@ export function ExportButton({ dashboardId, insightShortId, ...buttonProps }: Ex
                     <>
                         <h5>File type</h5>
                         <LemonDivider />
-                        {supportedFormats.map((format) => (
-                            <LemonButton
-                                key={format}
-                                fullWidth
-                                type="stealth"
-                                onClick={() => onExportItemClick(format)}
-                                data-attr={`export-button-${format.split('/').pop()}`}
-                            >
-                                .{format.split('/').pop()}
-                            </LemonButton>
-                        ))}
+                        {items.map(({ title, ...triggerExportProps }, i) => {
+                            const exportFormatExtension = triggerExportProps.export_format.split('/').pop()
+
+                            return (
+                                <LemonButton
+                                    key={i}
+                                    fullWidth
+                                    type="stealth"
+                                    onClick={() => triggerExport(triggerExportProps)}
+                                    data-attr={`export-button-${exportFormatExtension}`}
+                                >
+                                    {title ? title : `.${exportFormatExtension}`}
+                                </LemonButton>
+                            )
+                        })}
                     </>
                 ),
             }}

frontend/src/lib/components/ExportButton/exporter.ts

@@ -0,0 +1,84 @@
+import api from 'lib/api'
+import { delay } from 'lib/utils'
+import posthog from 'posthog-js'
+import { ExportedAssetType, ExporterFormat } from '~/types'
+import { lemonToast } from '../lemonToast'
+
+const POLL_DELAY_MS = 1000
+const MAX_PNG_POLL = 10
+const MAX_CSV_POLL = 60
+
+async function downloadExportedAsset(asset: ExportedAssetType): Promise<void> {
+    const downloadUrl = api.exports.determineExportUrl(asset.id)
+    const res = await api.getRaw(downloadUrl)
+    const blobObject = await res.blob()
+    const blob = window.URL.createObjectURL(blobObject)
+    const anchor = document.createElement('a')
+    anchor.style.display = 'none'
+    anchor.href = blob
+    anchor.download = asset.filename
+    document.body.appendChild(anchor)
+    anchor.click()
+    window.URL.revokeObjectURL(blob)
+}
+
+export type TriggerExportProps = Pick<ExportedAssetType, 'export_format' | 'dashboard' | 'insight' | 'export_context'>
+
+export async function triggerExport(asset: TriggerExportProps): Promise<void> {
+    const poller = new Promise(async (resolve, reject) => {
+        const trackingProperties = {
+            export_format: asset.export_format,
+            dashboard: asset.dashboard,
+            insight: asset.insight,
+            export_context: asset.export_context,
+            total_time_ms: 0,
+        }
+        const startTime = performance.now()
+
+        try {
+            let exportedAsset = await api.exports.create({
+                export_format: asset.export_format,
+                dashboard: asset.dashboard,
+                insight: asset.insight,
+                export_context: asset.export_context,
+            })
+
+            if (!exportedAsset.id) {
+                reject('Missing export_id from response')
+                return
+            }
+
+            let attempts = 0
+
+            const maxPoll = asset.export_format === ExporterFormat.CSV ? MAX_CSV_POLL : MAX_PNG_POLL
+            while (attempts < maxPoll) {
+                attempts++
+
+                if (exportedAsset.has_content) {
+                    await downloadExportedAsset(exportedAsset)
+
+                    trackingProperties.total_time_ms = performance.now() - startTime
+                    posthog.capture('export succeeded', trackingProperties)
+
+                    resolve('Export complete')
+                    return
+                }
+
+                await delay(POLL_DELAY_MS)
+
+                exportedAsset = await api.exports.get(exportedAsset.id)
+            }
+
+            reject('Content not loaded in time...')
+        } catch (e: any) {
+            trackingProperties.total_time_ms = performance.now() - startTime
+            posthog.capture('export failed', trackingProperties)
+            reject(`Export failed: ${JSON.stringify(e)}`)
+        }
+    })
+    await lemonToast.promise(poller, {
+        pending: 'Export started...',
+        success: 'Export complete!',
+        error: 'Export failed!',
+    })
+}