feat: Hog transformations (UI)

ee/api/hooks.py

@@ -23,6 +23,7 @@ def create_zapier_hog_function(hook: Hook, serializer_context: dict) -> HogFunct
     serializer = HogFunctionSerializer(
         data={
             "template_id": template_zapier.id,
+            "type": "destination",
             "name": f"Zapier webhook for action {hook.resource_id}",
             "filters": {"actions": [{"id": str(hook.resource_id), "name": "", "type": "actions", "order": 0}]},
             "inputs": {

frontend/src/lib/constants.tsx

@@ -235,6 +235,7 @@ export const FEATURE_FLAGS = {
     REMOTE_CONFIG: 'remote-config', // owner: @benjackwhite
     SITE_DESTINATIONS: 'site-destinations', // owner: @mariusandra #team-cdp
     SITE_APP_FUNCTIONS: 'site-app-functions', // owner: @mariusandra #team-cdp
+    HOG_TRANSFORMATIONS: 'hog-transformations', // owner: #team-cdp
     REPLAY_HOGQL_FILTERS: 'replay-hogql-filters', // owner: @pauldambra #team-replay
     REPLAY_LIST_RECORDINGS_AS_QUERY: 'replay-list-recordings-as-query', // owner: @pauldambra #team-replay
     BILLING_SKIP_FORECASTING: 'billing-skip-forecasting', // owner: @zach

frontend/src/scenes/pipeline/Transformations.tsx

@@ -4,6 +4,7 @@ import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy }
 import { CSS } from '@dnd-kit/utilities'
 import { LemonBadge, LemonButton, LemonModal, LemonTable, LemonTableColumn, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { PageHeader } from 'lib/components/PageHeader'
 import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
 import { More } from 'lib/lemon-ui/LemonButton/More'
@@ -14,6 +15,8 @@ import { urls } from 'scenes/urls'
 import { PipelineNodeTab, PipelineStage, ProductKey } from '~/types'
 
 import { AppMetricSparkLine } from './AppMetricSparkLine'
+import { TRANSFORMATION_TYPES } from './destinations/constants'
+import { Destinations } from './destinations/Destinations'
 import { NewButton } from './NewButton'
 import { pipelineAccessLogic } from './pipelineAccessLogic'
 import { PluginImage } from './PipelinePluginImage'
@@ -61,7 +64,13 @@ export function Transformations(): JSX.Element {
                     </div>
                 </>
             )}
+
             <TransformationsTable />
+
+            <FlaggedFeature flag="hog-transformations">
+                <h2 className="mt-4">Experimental transformations</h2>
+                <Destinations types={TRANSFORMATION_TYPES} />
+            </FlaggedFeature>
         </>
     )
 }
@@ -238,7 +247,7 @@ const MinimalAppView = ({ transformation, order }: { transformation: Transformat
     return (
         <div
             ref={setNodeRef}
-            className="flex gap-2 cursor-move border rounded p-2 items-center bg-bg-light relative"
+            className="relative flex items-center gap-2 p-2 border rounded cursor-move bg-bg-light"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 transform: CSS.Transform.toString(transform),

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

@@ -19,7 +19,7 @@ import { hogFunctionTypeToPipelineStage } from '../hogfunctions/urls'
 import { AppMetricSparkLineV2 } from '../metrics/AppMetricsV2Sparkline'
 import { NewButton } from '../NewButton'
 import { pipelineAccessLogic } from '../pipelineAccessLogic'
-import { Destination, PipelineBackend, SiteApp } from '../types'
+import { Destination, PipelineBackend, SiteApp, Transformation } from '../types'
 import { pipelineNodeMenuCommonItems, RenderApp, RenderBatchExportIcon } from '../utils'
 import { DestinationsFilters } from './DestinationsFilters'
 import { destinationsFiltersLogic } from './destinationsFiltersLogic'
@@ -58,12 +58,7 @@ export function Destinations({ types }: DestinationsProps): JSX.Element {
                     caption="Run custom scripts on your website."
                     buttons={<NewButton stage={PipelineStage.SiteApp} />}
                 />
-            ) : (
-                <PageHeader
-                    caption="Run custom scripts on your website or send your data in real time or in batches to destinations outside of PostHog."
-                    buttons={<NewButton stage={PipelineStage.SiteApp} />}
-                />
-            )}
+            ) : null}
 
             <DestinationsTable types={types} />
             <div className="mt-4" />
@@ -72,7 +67,9 @@ export function Destinations({ types }: DestinationsProps): JSX.Element {
                     ? 'New destinations'
                     : types.includes('site_app')
                     ? 'New site app'
-                    : 'New Hog function'}
+                    : types.includes('transformation')
+                    ? 'New transformation'
+                    : 'New'}
             </h2>
             <DestinationOptionsTable types={types} />
             {/* Old site-apps until we migrate everyone onto the new ones */}
@@ -169,7 +166,7 @@ export function DestinationsTable({
                                   render: function RenderFrequency(_, destination) {
                                       return 'interval' in destination ? destination.interval : null
                                   },
-                              } as LemonTableColumn<Destination | SiteApp, any>,
+                              } as LemonTableColumn<Destination | Transformation | SiteApp, any>,
                           ]
                         : []),
                     ...(showFrequencyHistory
@@ -193,10 +190,10 @@ export function DestinationsTable({
                                           </Link>
                                       )
                                   },
-                              } as LemonTableColumn<Destination | SiteApp, any>,
+                              } as LemonTableColumn<Destination | Transformation | SiteApp, any>,
                           ]
                         : []),
-                    updatedAtColumn() as LemonTableColumn<Destination | SiteApp, any>,
+                    updatedAtColumn() as LemonTableColumn<Destination | Transformation | SiteApp, any>,
                     {
                         title: 'Status',
                         key: 'enabled',

frontend/src/scenes/pipeline/destinations/constants.ts

@@ -2,3 +2,4 @@ import { HogFunctionTypeType } from '~/types'
 
 export const DESTINATION_TYPES = ['destination', 'site_destination'] satisfies HogFunctionTypeType[]
 export const SITE_APP_TYPES = ['site_app'] satisfies HogFunctionTypeType[]
+export const TRANSFORMATION_TYPES = ['transformation'] satisfies HogFunctionTypeType[]

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

@@ -20,6 +20,7 @@ import {
     PluginType,
 } from '~/types'
 
+import { hogFunctionTypeToPipelineStage } from '../hogfunctions/urls'
 import { pipelineAccessLogic } from '../pipelineAccessLogic'
 import {
     BatchExportDestination,
@@ -28,14 +29,15 @@ import {
     FunctionDestination,
     PipelineBackend,
     SiteApp,
+    Transformation,
     WebhookDestination,
 } from '../types'
 import { captureBatchExportEvent, capturePluginEvent, loadPluginsFromUrl } from '../utils'
 import { destinationsFiltersLogic } from './destinationsFiltersLogic'
 import type { pipelineDestinationsLogicType } from './destinationsLogicType'
 
 // Helping kea-typegen navigate the exported default class for Fuse
-export interface Fuse extends FuseClass<Destination | SiteApp> {}
+export interface Fuse extends FuseClass<Destination | Transformation | SiteApp> {}
 
 export interface PipelineDestinationsLogicProps {
     types: HogFunctionTypeType[]
@@ -60,9 +62,12 @@ export const pipelineDestinationsLogic = kea<pipelineDestinationsLogicType>([
         ],
     })),
     actions({
-        toggleNode: (destination: Destination | SiteApp, enabled: boolean) => ({ destination, enabled }),
+        toggleNode: (destination: Destination | SiteApp | Transformation, enabled: boolean) => ({
+            destination,
+            enabled,
+        }),
         toggleNodeHogFunction: (destination: FunctionDestination, enabled: boolean) => ({ destination, enabled }),
-        deleteNode: (destination: Destination | SiteApp) => ({ destination }),
+        deleteNode: (destination: Destination | SiteApp | Transformation) => ({ destination }),
         deleteNodeBatchExport: (destination: BatchExportDestination) => ({ destination }),
         deleteNodeHogFunction: (destination: FunctionDestination) => ({ destination }),
         deleteNodeWebhook: (destination: WebhookDestination) => ({ destination }),
@@ -240,7 +245,7 @@ export const pipelineDestinationsLogic = kea<pipelineDestinationsLogicType>([
                 hogFunctions,
                 user,
                 featureFlags
-            ): (Destination | SiteApp)[] => {
+            ): (Destination | Transformation | SiteApp)[] => {
                 // Migrations are shown only in impersonation mode, for us to be able to trigger them.
                 const httpEnabled =
                     featureFlags[FEATURE_FLAGS.BATCH_EXPORTS_POSTHOG_HTTP] || user?.is_impersonated || user?.is_staff
@@ -262,7 +267,7 @@ export const pipelineDestinationsLogic = kea<pipelineDestinationsLogicType>([
                 const convertedDestinations = rawDestinations.map((d) =>
                     convertToPipelineNode(
                         d,
-                        'type' in d && d.type === 'site_app' ? PipelineStage.SiteApp : PipelineStage.Destination
+                        'type' in d ? hogFunctionTypeToPipelineStage(d.type) : PipelineStage.Destination
                     )
                 )
                 const enabledFirst = convertedDestinations.sort((a, b) => Number(b.enabled) - Number(a.enabled))
@@ -281,7 +286,7 @@ export const pipelineDestinationsLogic = kea<pipelineDestinationsLogicType>([
 
         filteredDestinations: [
             (s) => [s.filters, s.destinations, s.destinationsFuse],
-            (filters, destinations, destinationsFuse): (Destination | SiteApp)[] => {
+            (filters, destinations, destinationsFuse): (Destination | Transformation | SiteApp)[] => {
                 const { search, showPaused, kind } = filters
 
                 return (search ? destinationsFuse.search(search).map((x) => x.item) : destinations).filter((dest) => {
@@ -298,7 +303,7 @@ export const pipelineDestinationsLogic = kea<pipelineDestinationsLogicType>([
 
         hiddenDestinations: [
             (s) => [s.destinations, s.filteredDestinations],
-            (destinations, filteredDestinations): (Destination | SiteApp)[] => {
+            (destinations, filteredDestinations): (Destination | Transformation | SiteApp)[] => {
                 return destinations.filter((dest) => !filteredDestinations.includes(dest))
             },
         ],