feat: Pipeline UI transformations (#18402)

Co-authored-by: Thomas Obermüller <[email protected]>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx

@@ -42,3 +42,21 @@ export function createdByColumn<T extends { created_by?: UserBasicType | null }>
             ),
     }
 }
+
+export function updatedAtColumn<T extends { updated_at?: string | Dayjs | null }>(): LemonTableColumn<T, 'updated_at'> {
+    return {
+        title: 'Updated',
+        dataIndex: 'updated_at',
+        render: function RenderCreatedAt(updated_at) {
+            return updated_at ? (
+                <div className="whitespace-nowrap text-right">
+                    <TZLabel time={updated_at} />
+                </div>
+            ) : (
+                <span className="text-muted">—</span>
+            )
+        },
+        align: 'right',
+        sorter: (a, b) => dayjs(a.updated_at || 0).diff(b.updated_at || 0),
+    }
+}

frontend/src/scenes/pipeline/NewButton.tsx

@@ -0,0 +1,17 @@
+import { LemonButton } from 'lib/lemon-ui/LemonButton/LemonButton'
+import { urls } from 'scenes/urls'
+import { singularName } from './pipelineLogic'
+import { PipelineTabs } from '~/types'
+
+type NewButtonProps = {
+    tab: PipelineTabs
+}
+
+export function NewButton({ tab }: NewButtonProps): JSX.Element {
+    const singular = singularName(tab)
+    return (
+        <LemonButton data-attr={`new-${singular}`} to={urls.pipelineNew(tab)} type="primary">
+            New {singular}
+        </LemonButton>
+    )
+}

frontend/src/scenes/pipeline/Pipeline.stories.tsx

@@ -5,10 +5,19 @@ import { router } from 'kea-router'
 import { urls } from 'scenes/urls'
 import { PipelineTabs } from '~/types'
 import { pipelineLogic } from './pipelineLogic'
+import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
 
 export default {
     title: 'Scenes-App/Pipeline',
-    decorators: [],
+    decorators: [
+        // mocks used by all stories in this file
+        mswDecorator({
+            get: {
+                'api/organizations/@current/pipeline_transformations/': {},
+                'api/projects/:team_id/pipeline_transformations_configs/': {},
+            },
+        }),
+    ],
     parameters: { layout: 'fullscreen', options: { showPanel: false }, viewMode: 'story' }, // scene mode
 } as Meta
 
@@ -27,7 +36,22 @@ export function PipelineFilteringPage(): JSX.Element {
     }, [])
     return <App />
 }
+
+export function PipelineTransformationsPageEmpty(): JSX.Element {
+    useEffect(() => {
+        router.actions.push(urls.pipeline(PipelineTabs.Transformations))
+        pipelineLogic.mount()
+    }, [])
+    return <App />
+}
+
 export function PipelineTransformationsPage(): JSX.Element {
+    useStorybookMocks({
+        get: {
+            'api/organizations/@current/pipeline_transformations/': require('./__mocks__/plugins.json'),
+            'api/projects/:team_id/pipeline_transformations_configs/': require('./__mocks__/transformationPluginConfigs.json'),
+        },
+    })
     useEffect(() => {
         router.actions.push(urls.pipeline(PipelineTabs.Transformations))
         pipelineLogic.mount()

frontend/src/scenes/pipeline/Pipeline.tsx

@@ -1,26 +1,24 @@
 import { SceneExport } from 'scenes/sceneTypes'
 import { PageHeader } from 'lib/components/PageHeader'
-import { humanFriendlyTabName, pipelineLogic, singularName } from './pipelineLogic'
+import { humanFriendlyTabName, pipelineLogic } from './pipelineLogic'
 import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
 import { useValues } from 'kea'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { urls } from 'scenes/urls'
 import { router } from 'kea-router'
 import { PipelineTabs } from '~/types'
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { Transformations } from './Transformations'
+import { NewButton } from './NewButton'
 
 export function Pipeline(): JSX.Element {
     const { currentTab } = useValues(pipelineLogic)
 
-    const singular = singularName(currentTab)
     return (
         <div className="pipeline-scene">
             <PageHeader
                 title="Pipeline"
-                buttons={
-                    <LemonButton data-attr={`new-${singular}`} to={urls.pipelineNew(currentTab)} type="primary">
-                        New {singular}
-                    </LemonButton>
-                }
+                caption="Add filters or transformations to the events sent to PostHog or export them to other tools."
+                buttons={<NewButton tab={currentTab} />}
             />
             <LemonTabs
                 activeKey={currentTab}
@@ -30,6 +28,8 @@ export function Pipeline(): JSX.Element {
                     key: tab,
                 }))}
             />
+
+            {!currentTab ? <Spinner /> : currentTab === PipelineTabs.Transformations ? <Transformations /> : null}
         </div>
     )
 }