feat(cdp): client side destinations

frontend/src/lib/api.ts

@@ -1765,11 +1765,17 @@ const api = {
         },
     },
     hogFunctions: {
-        async list(params?: {
-            filters?: any
-            type?: HogFunctionTypeType
-        }): Promise<PaginatedResponse<HogFunctionType>> {
-            return await new ApiRequest().hogFunctions().withQueryString(params).get()
+        async list(
+            filters?: any,
+            type?: HogFunctionTypeType | HogFunctionTypeType[]
+        ): Promise<PaginatedResponse<HogFunctionType>> {
+            return await new ApiRequest()
+                .hogFunctions()
+                .withQueryString({
+                    filters: filters,
+                    ...(type ? (Array.isArray(type) ? { types: type.join(',') } : { type }) : {}),
+                })
+                .get()
         },
         async get(id: HogFunctionType['id']): Promise<HogFunctionType> {
             return await new ApiRequest().hogFunction(id).get()
@@ -1798,10 +1804,12 @@ const api = {
         ): Promise<AppMetricsTotalsV2Response> {
             return await new ApiRequest().hogFunction(id).withAction('metrics/totals').withQueryString(params).get()
         },
-        async listTemplates(type?: HogFunctionTypeType): Promise<PaginatedResponse<HogFunctionTemplateType>> {
+        async listTemplates(
+            type?: HogFunctionTypeType | HogFunctionTypeType[]
+        ): Promise<PaginatedResponse<HogFunctionTemplateType>> {
             return new ApiRequest()
                 .hogFunctionTemplates()
-                .withQueryString({ type: type ?? 'destination' })
+                .withQueryString(Array.isArray(type) ? { types: type.join(',') } : { type: type ?? 'destination' })
                 .get()
         },
         async getTemplate(id: HogFunctionTemplateType['id']): Promise<HogFunctionTemplateType> {

frontend/src/scenes/actions/actionLogic.ts

@@ -40,7 +40,7 @@ export const actionLogic = kea<actionLogicType>([
             null as HogFunctionType[] | null,
             {
                 loadMatchingHogFunctions: async () => {
-                    const res = await api.hogFunctions.list({ filters: { actions: [{ id: `${props.id}` }] } })
+                    const res = await api.hogFunctions.list({ actions: [{ id: `${props.id}` }] })
 
                     return res.results
                 },

frontend/src/scenes/billing/ExportsUnsubscribeTable/exportsUnsubscribeTableLogic.tsx

@@ -3,7 +3,8 @@ import { actions, afterMount, connect, kea, listeners, path, selectors } from 'k
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
 import { getCurrentTeamId } from 'lib/utils/getAppContext'
-import { pipelineDestinationsLogic } from 'scenes/pipeline/destinations/destinationsLogic'
+import { DESTINATION_TYPES } from 'scenes/pipeline/hog-functions-list/constants'
+import { hogFunctionsListLogic } from 'scenes/pipeline/hog-functions-list/hogFunctionsListLogic'
 import { HogFunctionIcon } from 'scenes/pipeline/hogfunctions/HogFunctionIcon'
 import { pipelineAccessLogic } from 'scenes/pipeline/pipelineAccessLogic'
 import { FunctionDestination, PipelineBackend } from 'scenes/pipeline/types'
@@ -35,10 +36,10 @@ export const exportsUnsubscribeTableLogic = kea<exportsUnsubscribeTableLogicType
             ['canConfigurePlugins'],
             userLogic,
             ['user'],
-            pipelineDestinationsLogic,
+            hogFunctionsListLogic({ types: DESTINATION_TYPES }),
             ['paidHogFunctions'],
         ],
-        actions: [pipelineDestinationsLogic, ['toggleNodeHogFunction']],
+        actions: [hogFunctionsListLogic({ types: DESTINATION_TYPES }), ['toggleNodeHogFunction']],
     }),
 
     actions({

frontend/src/scenes/messaging/functionsTableLogic.tsx

@@ -48,7 +48,7 @@ export const functionsTableLogic = kea<functionsTableLogicType>([
             {
                 loadHogFunctions: async () => {
                     // TODO: pagination?
-                    return (await api.hogFunctions.list({ type: props.type ?? 'destination' })).results
+                    return (await api.hogFunctions.list(undefined, props.type ?? 'destination')).results
                 },
                 deleteHogFunction: async ({ hogFunction }) => {
                     await deleteWithUndo({

frontend/src/scenes/pipeline/Overview.tsx

@@ -9,7 +9,8 @@ import { urls } from 'scenes/urls'
 
 import { PipelineStage, PipelineTab } from '~/types'
 
-import { DestinationsTable } from './destinations/Destinations'
+import { DESTINATION_TYPES } from './hog-functions-list/constants'
+import { HogFunctionsListTable } from './hog-functions-list/HogFunctionsList'
 import { TransformationsTable } from './Transformations'
 
 export function Overview(): JSX.Element {
@@ -72,7 +73,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 />
+                    <HogFunctionsListTable types={DESTINATION_TYPES} />
                 </div>
             </div>
         </>

frontend/src/scenes/pipeline/Pipeline.tsx

@@ -8,8 +8,8 @@ import { urls } from 'scenes/urls'
 import { ActivityScope, PipelineTab } from '~/types'
 
 import { AppsManagement } from './AppsManagement'
-import { Destinations } from './destinations/Destinations'
-import { FrontendApps } from './FrontendApps'
+import { DESTINATION_TYPES, SITE_APP_TYPES } from './hog-functions-list/constants'
+import { HogFunctionsList } from './hog-functions-list/HogFunctionsList'
 import { ImportApps } from './ImportApps'
 import { importAppsLogic } from './importAppsLogic'
 import { Overview } from './Overview'
@@ -27,8 +27,8 @@ export function Pipeline(): JSX.Element {
         { key: PipelineTab.Overview, content: <Overview /> },
         { key: PipelineTab.Sources, content: <Sources /> },
         { key: PipelineTab.Transformations, content: <Transformations /> },
-        { key: PipelineTab.Destinations, content: <Destinations /> },
-        { key: PipelineTab.SiteApps, content: <FrontendApps /> },
+        { key: PipelineTab.Destinations, content: <HogFunctionsList types={DESTINATION_TYPES} /> },
+        { key: PipelineTab.SiteApps, content: <HogFunctionsList types={SITE_APP_TYPES} /> },
     ]
 
     // Import apps are deprecated, we only show the tab if there are some still enabled

frontend/src/scenes/pipeline/PipelineNode.tsx

@@ -41,7 +41,7 @@ const paramsToProps = ({
     }
 
     return {
-        stage: PIPELINE_TAB_TO_NODE_STAGE[stage] || null,
+        stage: PIPELINE_TAB_TO_NODE_STAGE[stage as PipelineTab] || null,
         id: numericId && !isNaN(numericId) ? numericId : id,
     }
 }
@@ -95,6 +95,12 @@ export function PipelineNode(params: { stage?: string; id?: string } = {}): JSX.
                 scope={ActivityScope.HOG_FUNCTION}
             />
         )
+
+        // Remove "logs" and "metrics" if we can't use them
+        if (stage === PipelineStage.SiteApp) {
+            delete tabToContent[PipelineNodeTab.Logs]
+            delete tabToContent[PipelineNodeTab.Metrics]
+        }
     }
 
     return (

frontend/src/scenes/pipeline/PipelineNodeNew.tsx

@@ -13,8 +13,8 @@ import { urls } from 'scenes/urls'
 
 import { AvailableFeature, PipelineStage, PluginType } from '~/types'
 
-import { NewDestinations } from './destinations/NewDestinations'
-import { frontendAppsLogic } from './frontendAppsLogic'
+import { DESTINATION_TYPES, SITE_APP_TYPES } from './hog-functions-list/constants'
+import { NewFunctionsList } from './hog-functions-list/NewHogFunction'
 import { HogFunctionConfiguration } from './hogfunctions/HogFunctionConfiguration'
 import { PipelineBatchExportConfiguration } from './PipelineBatchExportConfiguration'
 import { PIPELINE_TAB_TO_NODE_STAGE } from './PipelineNode'
@@ -103,9 +103,9 @@ export function PipelineNodeNew(params: { stage?: string; id?: string } = {}): J
     if (stage === PipelineStage.Transformation) {
         return <TransformationOptionsTable />
     } else if (stage === PipelineStage.Destination) {
-        return <NewDestinations />
+        return <NewFunctionsList types={DESTINATION_TYPES} />
     } else if (stage === PipelineStage.SiteApp) {
-        return <SiteAppOptionsTable />
+        return <NewFunctionsList types={SITE_APP_TYPES} />
     } else if (stage === PipelineStage.Source) {
         return <NewSourceWizardScene />
     }
@@ -118,12 +118,6 @@ function TransformationOptionsTable(): JSX.Element {
     return <NodeOptionsTable stage={PipelineStage.Transformation} targets={targets} loading={loading} />
 }
 
-function SiteAppOptionsTable(): JSX.Element {
-    const { plugins, loading } = useValues(frontendAppsLogic)
-    const targets = Object.values(plugins).map(convertPluginToTableEntry)
-    return <NodeOptionsTable stage={PipelineStage.SiteApp} targets={targets} loading={loading} />
-}
-
 function NodeOptionsTable({
     stage,
     targets,