feat(cdp): add new button to CDP Overview page (#26335)

PostHog · Nov 27, 2024 · c0bf8cf · c0bf8cf
1 parent 3ef40c6
commit c0bf8cf
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 36 deletions.
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--actions--dark.png b/frontend/__snapshots__/filters-taxonomic-filter--actions--dark.png
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--actions--light.png b/frontend/__snapshots__/filters-taxonomic-filter--actions--light.png
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--properties--dark.png b/frontend/__snapshots__/filters-taxonomic-filter--properties--dark.png
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--properties--light.png b/frontend/__snapshots__/filters-taxonomic-filter--properties--light.png
diff --git a/frontend/src/scenes/pipeline/Overview.tsx b/frontend/src/scenes/pipeline/Overview.tsx
@@ -1,52 +1,80 @@
+import { IconPlusSmall } from '@posthog/icons'
 import { Link } from '@posthog/lemon-ui'
+import { PageHeader } from 'lib/components/PageHeader'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonMenu } from 'lib/lemon-ui/LemonMenu'
 import { DataWarehouseManagedSourcesTable } from 'scenes/data-warehouse/settings/DataWarehouseManagedSourcesTable'
 import { DataWarehouseSelfManagedSourcesTable } from 'scenes/data-warehouse/settings/DataWarehouseSelfManagedSourcesTable'
 import { urls } from 'scenes/urls'
 
-import { PipelineTab } from '~/types'
+import { PipelineStage, PipelineTab } from '~/types'
 
 import { DestinationsTable } from './destinations/Destinations'
 import { TransformationsTable } from './Transformations'
 
 export function Overview(): JSX.Element {
+    const menuItems = [
+        { label: 'Source', to: urls.pipelineNodeNew(PipelineStage.Source) },
+        { label: 'Transformation', to: urls.pipelineNodeNew(PipelineStage.Transformation) },
+        { label: 'Destination', to: urls.pipelineNodeNew(PipelineStage.Destination) },
+    ]
+
     return (
-        <div className="space-y-4">
-            <div>
-                <Link to={urls.pipeline(PipelineTab.Sources)}>
-                    <h2>Managed sources</h2>
-                </Link>
-                <div className="space-y-2">
-                    <DataWarehouseManagedSourcesTable />
+        <>
+            <PageHeader
+                buttons={
+                    <div className="shrink-0 flex items-center m-2">
+                        <LemonMenu items={menuItems}>
+                            <LemonButton
+                                data-attr="new-pipeline-button"
+                                icon={<IconPlusSmall />}
+                                size="small"
+                                type="primary"
+                            >
+                                New
+                            </LemonButton>
+                        </LemonMenu>
+                    </div>
+                }
+            />
+            <div className="space-y-4">
+                <div>
+                    <Link to={urls.pipeline(PipelineTab.Sources)}>
+                        <h2>Managed sources</h2>
+                    </Link>
+                    <div className="space-y-2">
+                        <DataWarehouseManagedSourcesTable />
+                    </div>
                 </div>
-            </div>
-            <div>
-                <Link to={urls.pipeline(PipelineTab.Sources)}>
-                    <h2>Self-managed sources</h2>
-                </Link>
-                <div className="space-y-2">
-                    <DataWarehouseSelfManagedSourcesTable />
+                <div>
+                    <Link to={urls.pipeline(PipelineTab.Sources)}>
+                        <h2>Self-managed sources</h2>
+                    </Link>
+                    <div className="space-y-2">
+                        <DataWarehouseSelfManagedSourcesTable />
+                    </div>
+                </div>
+                <div>
+                    <Link to={urls.pipeline(PipelineTab.Transformations)}>
+                        <h2>Transformations</h2>
+                    </Link>
+                    <p>
+                        Modify and enrich your incoming data. Only active transformations are shown here.{' '}
+                        <Link to={urls.pipeline(PipelineTab.Transformations)}>See all.</Link>
+                    </p>
+                    <TransformationsTable inOverview={true} />
+                </div>
+                <div>
+                    <Link to={urls.pipeline(PipelineTab.Destinations)}>
+                        <h2>Destinations</h2>
+                    </Link>
+                    <p>
+                        Send your data to destinations in real time or with batch exports. Only active Destinations are
+                        shown here. <Link to={urls.pipeline(PipelineTab.Destinations)}>See all.</Link>
+                    </p>
+                    <DestinationsTable />
                 </div>
             </div>
-            <div>
-                <Link to={urls.pipeline(PipelineTab.Transformations)}>
-                    <h2>Transformations</h2>
-                </Link>
-                <p>
-                    Modify and enrich your incoming data. Only active transformations are shown here.{' '}
-                    <Link to={urls.pipeline(PipelineTab.Transformations)}>See all.</Link>
-                </p>
-                <TransformationsTable inOverview={true} />
-            </div>
-            <div>
-                <Link to={urls.pipeline(PipelineTab.Destinations)}>
-                    <h2>Destinations</h2>
-                </Link>
-                <p>
-                    Send your data to destinations in real time or with batch exports. Only active Destinations are
-                    shown here. <Link to={urls.pipeline(PipelineTab.Destinations)}>See all.</Link>
-                </p>
-                <DestinationsTable />
-            </div>
-        </div>
+        </>
     )
 }