feat: batch exports to destinations table part 2 (#19708)

* feat: batch exports to destinations table part 2 * Update UI snapshots for `chromium` (1) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Jan 11, 2024 · 24569f7 · 24569f7
1 parent 26ddccc
commit 24569f7
Show file tree

Hide file tree

Showing 8 changed files with 731 additions and 58 deletions.
diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--dark.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--dark.png
diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--light.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--light.png
diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-landing-page--dark.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-landing-page--dark.png
diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-landing-page--light.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-landing-page--light.png
diff --git a/frontend/src/scenes/pipeline/Destinations.tsx b/frontend/src/scenes/pipeline/Destinations.tsx
@@ -46,31 +46,15 @@ export function Destinations(): JSX.Element {
                     isEmpty={true}
                 />
             )}
-            <AppsTable />
-            <BatchExportsTable />
+            <DestinationsTable />
         </>
     )
 }
 
-function BatchExportsTable(): JSX.Element {
-    return (
-        <>
-            <h2>Batch exports</h2>
-
-            <h2>Backfills</h2>
-        </>
-    )
-}
-
-function AppsTable(): JSX.Element {
-    const { loading, destinations, enabledPluginConfigs, disabledPluginConfigs, canConfigurePlugins } =
-        useValues(pipelineDestinationsLogic)
+function DestinationsTable(): JSX.Element {
+    const { loading, destinations, canConfigurePlugins } = useValues(pipelineDestinationsLogic)
     const { toggleEnabled, loadPluginConfigs } = useActions(pipelineDestinationsLogic)
 
-    if (enabledPluginConfigs.length === 0 && disabledPluginConfigs.length === 0) {
-        return <></>
-    }
-
     return (
         <>
             <LemonTable
@@ -107,6 +91,12 @@ function AppsTable(): JSX.Element {
                             return <></> // TODO: batch export
                         },
                     },
+                    {
+                        title: 'Frequency',
+                        render: function RenderFrequency(_, destination) {
+                            return destination.frequency
+                        },
+                    },
                     {
                         title: '24h', // TODO: two options 24h or 7d selected
                         render: function Render24hDeliveryRate(_, destination) {
@@ -154,11 +144,11 @@ function AppsTable(): JSX.Element {
                                 <>
                                     {destination.enabled ? (
                                         <LemonTag type="success" className="uppercase">
-                                            Enabled
+                                            Active
                                         </LemonTag>
                                     ) : (
                                         <LemonTag type="default" className="uppercase">
-                                            Disabled
+                                            Paused
                                         </LemonTag>
                                     )}
                                 </>
@@ -172,45 +162,38 @@ function AppsTable(): JSX.Element {
                                 <More
                                     overlay={
                                         <>
-                                            {destination.type === 'webhook' && (
-                                                <LemonButton
-                                                    onClick={() => {
-                                                        toggleEnabled({
-                                                            enabled: !destination.enabled,
-                                                            id: destination.id,
-                                                        })
-                                                    }}
-                                                    id={`app-${destination.id}-enable-switch`}
-                                                    disabledReason={
-                                                        canConfigurePlugins
-                                                            ? undefined
-                                                            : 'You do not have permission to enable/disable apps.'
-                                                    }
-                                                    fullWidth
-                                                >
-                                                    {destination.enabled ? 'Disable' : 'Enable'} app
-                                                </LemonButton>
-                                            )}
+                                            <LemonButton
+                                                onClick={() => toggleEnabled(destination, !destination.enabled)}
+                                                id={`app-${destination.id}-enable-switch`}
+                                                disabledReason={
+                                                    canConfigurePlugins
+                                                        ? undefined
+                                                        : 'You do not have permission to enable/disable destinations.'
+                                                }
+                                                fullWidth
+                                            >
+                                                {destination.enabled ? 'Pause' : 'Unpause'} destination
+                                            </LemonButton>
                                             <LemonButton
                                                 to={destination.config_url}
                                                 id={`app-${destination.id}-configuration`}
                                                 fullWidth
                                             >
-                                                {canConfigurePlugins ? 'Edit' : 'View'} app configuration
+                                                {canConfigurePlugins ? 'Edit' : 'View'} destination configuration
                                             </LemonButton>
                                             <LemonButton
                                                 to={destination.metrics_url}
                                                 id={`app-${destination.id}-metrics`}
                                                 fullWidth
                                             >
-                                                View app metrics
+                                                View metrics
                                             </LemonButton>
                                             <LemonButton
                                                 to={destination.logs_url}
                                                 id={`app-${destination.id}-logs`}
                                                 fullWidth
                                             >
-                                                View app logs
+                                                View logs
                                             </LemonButton>
                                             {destination.app_source_code_url && (
                                                 <LemonButton