feat: Hog transformations (UI)

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

@@ -58,12 +58,7 @@
                     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 @@
                     ? '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 */}
@@ -161,7 +158,7 @@
                             )
                         },
                     },
                     ...(showFrequencyHistory
                         ? [
                               {
                                   title: 'Frequency',
@@ -172,7 +169,7 @@
                               } as LemonTableColumn<Destination | SiteApp, any>,
                           ]
                         : []),
                     ...(showFrequencyHistory
                         ? [
                               {
                                   title: 'Last 7 days',
@@ -196,13 +193,13 @@
                               } as LemonTableColumn<Destination | SiteApp, any>,
                           ]
                         : []),
                     updatedAtColumn() as LemonTableColumn<Destination | SiteApp, any>,
                     {
                         title: 'Status',
                         key: 'enabled',
                         sorter: (a) => (a.enabled ? 1 : -1),
                         width: 0,
                         render: function RenderStatus(_, destination) {
                             if (destination.backend === PipelineBackend.HogFunction) {
                                 return <HogFunctionStatusIndicator hogFunction={destination.hog_function} />
                             }
@@ -219,7 +216,7 @@
                     },
                     {
                         width: 0,
                         render: function Render(_, destination) {
                             return (
                                 <More
                                     overlay={
@@ -229,10 +226,10 @@
                                                     label: destination.enabled
                                                         ? `Pause ${simpleName}`
                                                         : `Unpause ${simpleName}`,
                                                     onClick: () => toggleNode(destination, !destination.enabled),
                                                     disabledReason: !canConfigurePlugins
                                                         ? `You do not have permission to toggle ${simpleName}s.`
                                                         : !canEnableDestination(destination) && !destination.enabled
                                                         ? `Data pipelines add-on is required for enabling new ${simpleName}s`
                                                         : undefined,
                                                 },
@@ -240,7 +237,7 @@
                                                 {
                                                     label: `Delete ${simpleName}`,
                                                     status: 'danger' as const, // for typechecker happiness
                                                     onClick: () => deleteNode(destination),
                                                     disabledReason: canConfigurePlugins
                                                         ? undefined
                                                         : `You do not have permission to delete ${simpleName}.`,

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[]
@@ -240,7 +242,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 +264,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 +283,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 +300,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))
             },
         ],

frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx

@@ -152,14 +152,13 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
         return <PayGateMini feature={AvailableFeature.DATA_PIPELINES} />
     }
 
-    const showFilters = type === 'destination' || type === 'site_destination' || type === 'broadcast'
-    const showExpectedVolume = type === 'destination' || type === 'site_destination'
-    const showStatus = type === 'destination' || type === 'email'
-    const showEnabled = type === 'destination' || type === 'email' || type === 'site_destination' || type === 'site_app'
-    const canEditSource =
-        type === 'destination' || type === 'email' || type === 'site_destination' || type === 'site_app'
-    const showPersonsCount = type === 'broadcast'
-    const showTesting = type === 'destination' || type === 'broadcast' || type === 'email'
+    const showFilters = ['destination', 'site_destination', 'broadcast', 'transformation'].includes(type)
+    const showExpectedVolume = ['destination', 'site_destination'].includes(type)
+    const showStatus = ['destination', 'email', 'transformation'].includes(type)
+    const showEnabled = ['destination', 'email', 'site_destination', 'site_app', 'transformation'].includes(type)
+    const canEditSource = ['destination', 'email', 'site_destination', 'site_app', 'transformation'].includes(type)
+    const showPersonsCount = ['broadcast'].includes(type)
+    const showTesting = ['destination', 'transformation', 'broadcast', 'email'].includes(type)
 
     return (
         <div className="space-y-3">
@@ -195,10 +194,10 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                     formKey="configuration"
                     className="space-y-3"
                 >
-                    <div className="flex flex-wrap gap-4 items-start">
-                        <div className="flex flex-col gap-4 flex-1 min-w-100">
-                            <div className="border bg-bg-light rounded p-3 space-y-2">
-                                <div className="flex flex-row gap-2 min-h-16 items-center">
+                    <div className="flex flex-wrap items-start gap-4">
+                        <div className="flex flex-col flex-1 gap-4 min-w-100">
+                            <div className="p-3 space-y-2 border rounded bg-bg-light">
+                                <div className="flex flex-row items-center gap-2 min-h-16">
                                     <LemonField name="icon_url">
                                         {({ value, onChange }) => (
                                             <HogFunctionIconEditable
@@ -209,7 +208,7 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                                         )}
                                     </LemonField>
 
-                                    <div className="flex flex-col items-start py-1 flex-1 justify-start">
+                                    <div className="flex flex-col items-start justify-start flex-1 py-1">
                                         <span className="font-semibold">{configuration.name}</span>
                                         {template && <DestinationTag status={template.status} />}
                                     </div>
@@ -244,14 +243,14 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                                     <LemonDropdown
                                         showArrow
                                         overlay={
-                                            <div className="max-w-120 p-1">
+                                            <div className="p-1 max-w-120">
                                                 <p>
                                                     This function was built from the template{' '}
                                                     <b>{hogFunction.template.name}</b>. If the template is updated, this
                                                     function is not affected unless you choose to update it.
                                                 </p>
 
-                                                <div className="flex flex-1 gap-2 items-center border-t pt-2">
+                                                <div className="flex items-center flex-1 gap-2 pt-2 border-t">
                                                     <div className="flex-1">
                                                         <LemonButton>Close</LemonButton>
                                                     </div>
@@ -272,8 +271,8 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                                             </div>
                                         }
                                     >
-                                        <div className="border border-dashed rounded text-muted-alt text-xs">
-                                            <Link subtle className="flex items-center gap-1 flex-wrap p-2">
+                                        <div className="text-xs border border-dashed rounded text-muted-alt">
+                                            <Link subtle className="flex flex-wrap items-center gap-1 p-2">
                                                 Built from template:
                                                 <span className="font-semibold">{hogFunction?.template.name}</span>
                                                 <DestinationTag status={hogFunction.template.status} />
@@ -289,7 +288,7 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                             {showFilters && <HogFunctionFilters />}
 
                             {showPersonsCount && (
-                                <div className="relative border bg-bg-light rounded p-3 space-y-2">
+                                <div className="relative p-3 space-y-2 border rounded bg-bg-light">
                                     <div>
                                         <LemonLabel>Matching persons</LemonLabel>
                                     </div>
@@ -319,7 +318,7 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                             )}
 
                             {showExpectedVolume && (
-                                <div className="relative border bg-bg-light rounded p-3 space-y-2">
+                                <div className="relative p-3 space-y-2 border rounded bg-bg-light">
                                     <LemonLabel>Expected volume</LemonLabel>
                                     {sparkline && !sparklineLoading ? (
                                         <>
@@ -359,10 +358,10 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                             )}
                         </div>
 
-                        <div className="flex-2 min-w-100 space-y-4">
+                        <div className="space-y-4 flex-2 min-w-100">
                             {!forcedSubTemplateId && template?.sub_templates && (
                                 <>
-                                    <div className="border bg-bg-light rounded p-3 space-y-2">
+                                    <div className="p-3 space-y-2 border rounded bg-bg-light">
                                         <div className="flex items-center gap-2">
                                             <LemonLabel className="flex-1">Choose template</LemonLabel>
                                             <LemonSelect
@@ -376,9 +375,9 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                                                         value: subTemplate.id,
                                                         label: subTemplate.name,
                                                         labelInMenu: (
-                                                            <div className="max-w-120 space-y-1 my-1">
+                                                            <div className="my-1 space-y-1 max-w-120">
                                                                 <div className="font-semibold">{subTemplate.name}</div>
-                                                                <div className="text-muted font-sans text-xs">
+                                                                <div className="font-sans text-xs text-muted">
                                                                     {subTemplate.description}
                                                                 </div>
                                                             </div>
@@ -395,7 +394,7 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                                 </>
                             )}
 
-                            <div className="border bg-bg-light rounded p-3 space-y-2">
+                            <div className="p-3 space-y-2 border rounded bg-bg-light">
                                 <div className="space-y-2">
                                     <HogFunctionInputs
                                         configuration={configuration}
@@ -434,7 +433,7 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                                         showSource ? 'bg-bg-light' : 'bg-accent-3000'
                                     )}
                                 >
-                                    <div className="flex items-center gap-2 justify-end">
+                                    <div className="flex items-center justify-end gap-2">
                                         <div className="flex-1 space-y-2">
                                             <h2 className="mb-0">Edit source</h2>
                                             {!showSource ? <p>Click here to edit the function's source code</p> : null}
@@ -507,7 +506,7 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur
                                     <HogFunctionTest id={id} />
                                 )
                             ) : null}
-                            <div className="flex gap-2 justify-end">{saveButtons}</div>
+                            <div className="flex justify-end gap-2">{saveButtons}</div>
                         </div>
                     </div>
                 </Form>

frontend/src/scenes/pipeline/hogfunctions/HogFunctionTest.tsx

@@ -102,16 +102,14 @@ export function HogFunctionTest(props: HogFunctionTestLogicProps): JSX.Element {
                                 </LemonButton>
                             ) : (
                                 <>
-                                    {type === 'destination' ? (
-                                        <LemonButton
-                                            type="secondary"
-                                            onClick={loadSampleGlobals}
-                                            loading={sampleGlobalsLoading}
-                                            tooltip="Find the last event matching filters, and use it to populate the globals below."
-                                        >
-                                            Refresh globals
-                                        </LemonButton>
-                                    ) : null}
+                                    <LemonButton
+                                        type="secondary"
+                                        onClick={loadSampleGlobals}
+                                        loading={sampleGlobalsLoading}
+                                        tooltip="Find the last event matching filters, and use it to populate the globals below."
+                                    >
+                                        Refresh globals
+                                    </LemonButton>
                                     <LemonField name="mock_async_functions">
                                         {({ value, onChange }) => (
                                             <LemonSwitch