feat(cdp): show new destinations on the overview page (#26355)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben White <[email protected]>

frontend/src/scenes/pipeline/NewButton.tsx

@@ -6,15 +6,17 @@ import { PipelineStage } from '~/types'
 
 type NewButtonProps = {
     stage: PipelineStage
+    size?: 'xsmall' | 'small' | 'medium' | 'large'
 }
 
-export function NewButton({ stage }: NewButtonProps): JSX.Element {
+export function NewButton({ stage, size }: NewButtonProps): JSX.Element {
     return (
         <LemonButton
             data-attr={`new-${stage}`}
             to={urls.pipelineNodeNew(stage)}
             type="primary"
             icon={<IconPlusSmall />}
+            size={size}
         >
             New {stage}
         </LemonButton>

frontend/src/scenes/pipeline/Overview.tsx

@@ -72,7 +72,7 @@ export function Overview(): JSX.Element {
                         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 />
+                    <DestinationsTable hideFeedback={true} hideAddDestinationButton={false} />
                 </div>
             </div>
         </>

frontend/src/scenes/pipeline/destinations/Destinations.tsx

@@ -51,16 +51,20 @@ export function Destinations(): JSX.Element {
         </>
     )
 }
+export type DestinationsTableProps = {
+    hideFeedback?: boolean
+    hideAddDestinationButton?: boolean
+}
 
-export function DestinationsTable(): JSX.Element {
+export function DestinationsTable({ hideFeedback, hideAddDestinationButton }: DestinationsTableProps): JSX.Element {
     const { canConfigurePlugins, canEnableDestination } = useValues(pipelineAccessLogic)
     const { loading, filteredDestinations, destinations, hiddenDestinations } = useValues(pipelineDestinationsLogic)
     const { toggleNode, deleteNode } = useActions(pipelineDestinationsLogic)
     const { resetFilters } = useActions(destinationsFiltersLogic)
 
     return (
         <div className="space-y-2">
-            <DestinationsFilters />
+            <DestinationsFilters hideFeedback={hideFeedback} hideAddDestinationButton={hideAddDestinationButton} />
 
             <LemonTable
                 dataSource={filteredDestinations}

frontend/src/scenes/pipeline/destinations/DestinationsFilters.tsx

@@ -1,5 +1,8 @@
 import { LemonCheckbox, LemonInput, LemonSelect, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { NewButton } from 'scenes/pipeline/NewButton'
+
+import { PipelineStage } from '~/types'
 
 import { PipelineBackend } from '../types'
 import { destinationsFiltersLogic } from './destinationsFiltersLogic'
@@ -8,12 +11,16 @@ export type DestinationsFiltersProps = {
     hideSearch?: boolean
     hideShowPaused?: boolean
     hideKind?: boolean
+    hideFeedback?: boolean
+    hideAddDestinationButton?: boolean
 }
 
 export function DestinationsFilters({
     hideSearch,
     hideShowPaused,
     hideKind,
+    hideFeedback,
+    hideAddDestinationButton = true,
 }: DestinationsFiltersProps): JSX.Element | null {
     const { filters } = useValues(destinationsFiltersLogic)
     const { setFilters, openFeedbackDialog } = useActions(destinationsFiltersLogic)
@@ -29,9 +36,11 @@ export function DestinationsFilters({
                         onChange={(e) => setFilters({ search: e })}
                     />
                 )}
-                <Link className="text-sm font-semibold" subtle onClick={() => openFeedbackDialog()}>
-                    Can't find what you're looking for?
-                </Link>
+                {!hideFeedback ? (
+                    <Link className="text-sm font-semibold" subtle onClick={() => openFeedbackDialog()}>
+                        Can't find what you're looking for?
+                    </Link>
+                ) : null}
                 <div className="flex-1" />
                 {typeof hideShowPaused !== 'boolean' && (
                     <LemonCheckbox
@@ -57,6 +66,7 @@ export function DestinationsFilters({
                         onChange={(e) => setFilters({ kind: e ?? null })}
                     />
                 )}
+                {hideAddDestinationButton ? null : <NewButton stage={PipelineStage.Destination} size="small" />}
             </div>
         </div>
     )