fix: Batch export backfill button (#23907)

PostHog · Jul 23, 2024 · ebf1bff · ebf1bff
1 parent 1ff75d7
commit ebf1bff
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 62 deletions.
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--dark.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--dark.png
diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths-edit--light.png b/frontend/__snapshots__/scenes-app-insights--user-paths-edit--light.png
diff --git a/...c/scenes/pipeline/BatchExportBackfill.tsx → ...nes/pipeline/BatchExportBackfillModal.tsx b/...c/scenes/pipeline/BatchExportBackfill.tsx → ...nes/pipeline/BatchExportBackfillModal.tsx
@@ -7,7 +7,7 @@ import { LemonModal } from 'lib/lemon-ui/LemonModal'
 
 import { batchExportRunsLogic, BatchExportRunsLogicProps } from './batchExportRunsLogic'
 
-export function BatchExportBackfill({ id }: BatchExportRunsLogicProps): JSX.Element {
+export function BatchExportBackfillModal({ id }: BatchExportRunsLogicProps): JSX.Element {
     const logic = batchExportRunsLogic({ id })
 
     const { batchExportConfig, isBackfillModalOpen, isBackfillFormSubmitting } = useValues(logic)

diff --git a/frontend/src/scenes/pipeline/BatchExportRuns.tsx b/frontend/src/scenes/pipeline/BatchExportRuns.tsx
@@ -4,89 +4,91 @@ import { LemonButton, LemonDialog, LemonSwitch, LemonTable } from '@posthog/lemo
 import { useActions, useValues } from 'kea'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { NotFound } from 'lib/components/NotFound'
+import { PageHeader } from 'lib/components/PageHeader'
 import { IconRefresh } from 'lib/lemon-ui/icons'
 import { BatchExportRunIcon } from 'scenes/batch_exports/components'
 import { isRunInProgress } from 'scenes/batch_exports/utils'
 
 import { BatchExportConfiguration, GroupedBatchExportRuns } from '~/types'
 
-import { BatchExportBackfill } from './BatchExportBackfill'
+import { BatchExportBackfillModal } from './BatchExportBackfillModal'
 import { batchExportRunsLogic, BatchExportRunsLogicProps } from './batchExportRunsLogic'
 import { pipelineAccessLogic } from './pipelineAccessLogic'
 
 export function BatchExportRuns({ id }: BatchExportRunsLogicProps): JSX.Element {
     const logic = batchExportRunsLogic({ id })
 
     const { batchExportConfig, groupedRuns, loading, hasMoreRunsToLoad, usingLatestRuns } = useValues(logic)
-    const { loadOlderRuns, retryRun } = useActions(logic)
+    const { loadOlderRuns, retryRun, openBackfillModal } = useActions(logic)
 
     if (!batchExportConfig) {
         return <NotFound object="batch export" />
     }
 
-    const dateSelector = <RunsDateSelection id={id} />
-
-    if (usingLatestRuns) {
-        return (
-            <>
-                {dateSelector}
-                <BatchExportLatestRuns id={id} />
-            </>
-        )
-    }
-
     return (
         <>
-            {dateSelector}
-            <BatchExportRunsGrouped
-                id={id}
-                groupedRuns={groupedRuns}
-                loading={loading}
-                retryRun={retryRun}
-                hasMoreRunsToLoad={hasMoreRunsToLoad}
-                loadOlderRuns={loadOlderRuns}
-                interval={batchExportConfig.interval}
+            <PageHeader
+                buttons={
+                    <LemonButton type="primary" onClick={() => openBackfillModal()}>
+                        Backfill batch export
+                    </LemonButton>
+                }
             />
+            <div className="space-y-2">
+                <BatchExportRunsFilters id={id} />
+                {usingLatestRuns ? (
+                    <BatchExportLatestRuns id={id} />
+                ) : (
+                    <BatchExportRunsGrouped
+                        id={id}
+                        groupedRuns={groupedRuns}
+                        loading={loading}
+                        retryRun={retryRun}
+                        hasMoreRunsToLoad={hasMoreRunsToLoad}
+                        loadOlderRuns={loadOlderRuns}
+                        interval={batchExportConfig.interval}
+                    />
+                )}
+            </div>
+            <BatchExportBackfillModal id={id} />
         </>
     )
 }
 
-export function RunsDateSelection({ id }: { id: string }): JSX.Element {
+function BatchExportRunsFilters({ id }: { id: string }): JSX.Element {
     const logic = batchExportRunsLogic({ id })
     const { dateRange, usingLatestRuns, loading } = useValues(logic)
     const { setDateRange, switchLatestRuns, loadRuns } = useActions(logic)
 
-    // TODO: Autoload option similar to frontend/src/queries/nodes/DataNode/AutoLoad.tsx
-    const latestToggle = (
-        <LemonSwitch bordered label="Show latest runs" checked={usingLatestRuns} onChange={switchLatestRuns} />
-    )
-
-    const dateFilter = (
-        <DateFilter
-            dateTo={dateRange.to}
-            dateFrom={dateRange.from}
-            disabledReason={usingLatestRuns ? 'Turn off "Show latest runs" to filter by data interval' : undefined}
-            onChange={(from, to) => setDateRange(from, to)}
-            allowedRollingDateOptions={['hours', 'days', 'weeks', 'months', 'years']}
-            makeLabel={(key) => (
-                <>
-                    <IconCalendar /> {key}
-                </>
-            )}
-        />
-    )
     return (
-        <div className="flex gap-2">
-            <LemonButton onClick={loadRuns} loading={loading} type="secondary" icon={<IconRefresh />}>
+        <div className="flex items-center gap-2">
+            <LemonButton onClick={loadRuns} loading={loading} type="secondary" icon={<IconRefresh />} size="small">
                 Refresh
             </LemonButton>
-            {latestToggle}
-            {dateFilter}
+            <LemonSwitch
+                bordered
+                label="Show latest runs"
+                checked={usingLatestRuns}
+                onChange={switchLatestRuns}
+                size="small"
+            />
+            <DateFilter
+                dateTo={dateRange.to}
+                dateFrom={dateRange.from}
+                disabledReason={usingLatestRuns ? 'Turn off "Show latest runs" to filter by data interval' : undefined}
+                onChange={(from, to) => setDateRange(from, to)}
+                allowedRollingDateOptions={['hours', 'days', 'weeks', 'months', 'years']}
+                makeLabel={(key) => (
+                    <>
+                        <IconCalendar /> {key}
+                    </>
+                )}
+            />
         </div>
     )
 }
 
-export function BatchExportLatestRuns({ id }: BatchExportRunsLogicProps): JSX.Element {
+function BatchExportLatestRuns({ id }: BatchExportRunsLogicProps): JSX.Element {
     const logic = batchExportRunsLogic({ id })
 
     const { batchExportConfig, latestRuns, loading, hasMoreRunsToLoad } = useValues(logic)
@@ -163,24 +165,24 @@ export function BatchExportLatestRuns({ id }: BatchExportRunsLogicProps): JSX.El
                         width: 0,
                         render: function RenderActions(_, run) {
                             if (canEnableNewDestinations) {
-                                return <RunRetryModal run={run} retryRun={retryRun} />
+                                return <RunRetryButton run={run} retryRun={retryRun} />
                             }
                         },
                     },
                 ]}
                 emptyState={
-                    <>
-                        No runs in this time range. Your exporter runs every <b>{batchExportConfig.interval}</b>.
-                        <br />
+                    <div className="space-y-2">
+                        <div>
+                            No runs in this time range. Your exporter runs every <b>{batchExportConfig.interval}</b>.
+                        </div>
                         {canEnableNewDestinations && (
                             <LemonButton type="primary" onClick={() => openBackfillModal()}>
                                 Backfill batch export
                             </LemonButton>
                         )}
-                    </>
+                    </div>
                 }
             />
-            <BatchExportBackfill id={id} />
         </>
     )
 }
@@ -302,30 +304,29 @@ export function BatchExportRunsGrouped({
                         width: 0,
                         render: function RenderActions(_, groupedRun) {
                             if (!isRunInProgress(groupedRun.runs[0]) && canEnableNewDestinations) {
-                                return <RunRetryModal run={groupedRun.runs[0]} retryRun={retryRun} />
+                                return <RunRetryButton run={groupedRun.runs[0]} retryRun={retryRun} />
                             }
                         },
                     },
                 ]}
                 emptyState={
-                    <>
-                        No runs in this time range. Your exporter runs every <b>{interval}</b>.
-                        <br />
+                    <div className="space-y-2">
+                        <div>
+                            No runs in this time range. Your exporter runs every <b>{interval}</b>.
+                        </div>
                         {canEnableNewDestinations && (
                             <LemonButton type="primary" onClick={() => openBackfillModal()}>
                                 Backfill batch export
                             </LemonButton>
                         )}
-                    </>
+                    </div>
                 }
             />
-
-            <BatchExportBackfill id={id} />
         </>
     )
 }
 
-export function RunRetryModal({ run, retryRun }: { run: any; retryRun: any }): JSX.Element {
+function RunRetryButton({ run, retryRun }: { run: any; retryRun: any }): JSX.Element {
     return (
         <span className="flex items-center gap-1">
             <LemonButton