feat: Add Pipeline menu item behind ff (#18146)

frontend/src/layout/navigation/SideBar/SideBar.tsx

@@ -18,6 +18,7 @@ import {
     IconOpenInApp,
     IconPerson,
     IconPinOutline,
+    IconPipeline,
     IconPlus,
     IconRecording,
     IconRocketLaunch,
@@ -226,6 +227,9 @@ function Pages(): JSX.Element {
                         to={urls.persons()}
                         title={`Persons${showGroupsOptions ? ' & Groups' : ''}`}
                     />
+                    <FlaggedFeature flag={FEATURE_FLAGS.PIPELINE_UI}>
+                        <PageButton icon={<IconPipeline />} identifier={Scene.Pipeline} to={urls.pipeline()} />
+                    </FlaggedFeature>
                     <FlaggedFeature flag={FEATURE_FLAGS.DATA_WAREHOUSE}>
                         <PageButton
                             icon={<IconDatabase />}

frontend/src/lib/constants.tsx

@@ -165,6 +165,7 @@ export const FEATURE_FLAGS = {
     SURVEYS_PAYGATES: 'surveys-paygates',
     CONSOLE_RECORDING_SEARCH: 'console-recording-search', // owner: #team-monitoring
     PERSONS_HOGQL_QUERY: 'persons-hogql-query', // owner: @mariusandra
+    PIPELINE_UI: 'pipeline-ui', // owner: #team-pipeline
     NOTEBOOK_CANVASES: 'notebook-canvases', // owner: #team-monitoring
     SESSION_RECORDING_SAMPLING: 'session-recording-sampling', // owner: #team-monitoring
     PERSON_FEED_CANVAS: 'person-feed-canvas', // owner: #project-canvas

frontend/src/lib/lemon-ui/icons/icons.tsx

@@ -2383,6 +2383,17 @@ export function IconDatabase(props: LemonIconProps): JSX.Element {
     )
 }
 
+export function IconPipeline(props: LemonIconProps): JSX.Element {
+    return (
+        <LemonIconBase {...props}>
+            <path
+                fill="currentColor"
+                d="M22,14H20V16H14V13H16V11H14V6A2,2 0 0,0 12,4H4V2H2V10H4V8H10V11H8V13H10V18A2,2 0 0,0 12,20H20V22H22"
+            />
+        </LemonIconBase>
+    )
+}
+
 export function IconDragHandle(props: LemonIconProps): JSX.Element {
     return (
         <LemonIconBase {...props}>

frontend/src/scenes/appScenes.ts

@@ -28,6 +28,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.ReplayPlaylist]: () => import('./session-recordings/playlist/SessionRecordingsPlaylistScene'),
     [Scene.Person]: () => import('./persons/PersonScene'),
     [Scene.Persons]: () => import('./persons/PersonsScene'),
+    [Scene.Pipeline]: () => import('./pipeline/Pipeline'),
     [Scene.Groups]: () => import('./groups/Groups'),
     [Scene.Group]: () => import('./groups/Group'),
     [Scene.Action]: () => import('./actions/Action'),

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

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import { Meta } from '@storybook/react'
+import { App } from 'scenes/App'
+import { router } from 'kea-router'
+import { urls } from 'scenes/urls'
+
+export default {
+    title: 'Scenes-App/Pipeline',
+    decorators: [],
+    parameters: { layout: 'fullscreen', options: { showPanel: false }, viewMode: 'story' }, // scene mode
+} as Meta
+
+export function PipelineLandingPage(): JSX.Element {
+    useEffect(() => {
+        router.actions.push(urls.pipeline())
+    }, [])
+    return <App />
+}

frontend/src/scenes/pipeline/Pipeline.tsx

@@ -0,0 +1,19 @@
+import { SceneExport } from 'scenes/sceneTypes'
+import { pipelineLogic } from './pipelineLogic'
+import { PageHeader } from 'lib/components/PageHeader'
+
+export function Pipeline(): JSX.Element {
+    return (
+        <div className="pipeline-scene">
+            <PageHeader title="Pipeline" />
+        </div>
+    )
+}
+
+export const scene: SceneExport = {
+    component: Pipeline,
+    logic: pipelineLogic,
+}
+
+// TODO: error from import ./pipeline/PipelineScene
+// TODO: update https://storybook.posthog.net/?path=/docs/how-to-build-a-scene--docs <- about kea stuff to exclude and have run pnpm ... for type creation

frontend/src/scenes/pipeline/pipelineLogic.tsx

@@ -0,0 +1,6 @@
+import { kea } from 'kea'
+import type { pipelineLogicType } from './pipelineLogicType'
+
+export const pipelineLogic = kea<pipelineLogicType>({
+    path: ['scenes', 'pipeline', 'pipelineLogic'],
+})

frontend/src/scenes/sceneTypes.ts

@@ -27,6 +27,7 @@ export enum Scene {
     ReplayPlaylist = 'ReplayPlaylist',
     Person = 'Person',
     Persons = 'Persons',
+    Pipeline = 'Pipeline',
     Groups = 'Groups',
     Group = 'Group',
     Action = 'Action',

frontend/src/scenes/scenes.ts

@@ -140,6 +140,10 @@ export const sceneConfigurations: Partial<Record<Scene, SceneConfig>> = {
         projectBased: true,
         name: 'Persons & Groups',
     },
+    [Scene.Pipeline]: {
+        projectBased: true,
+        name: 'Pipeline',
+    },
     [Scene.Experiments]: {
         projectBased: true,
         name: 'Experiments',
@@ -432,6 +436,7 @@ export const routes: Record<string, Scene> = {
     [urls.personByDistinctId('*', false)]: Scene.Person,
     [urls.personByUUID('*', false)]: Scene.Person,
     [urls.persons()]: Scene.Persons,
+    [urls.pipeline()]: Scene.Pipeline,
     [urls.groups(':groupTypeIndex')]: Scene.Groups,
     [urls.group(':groupTypeIndex', ':groupKey', false)]: Scene.Group,
     [urls.group(':groupTypeIndex', ':groupKey', false, ':groupTab')]: Scene.Group,

frontend/src/scenes/urls.ts

@@ -93,6 +93,7 @@ export const urls = {
     personByUUID: (uuid: string, encode: boolean = true): string =>
         encode ? `/persons/${encodeURIComponent(uuid)}` : `/persons/${uuid}`,
     persons: (): string => '/persons',
+    pipeline: (): string => '/pipeline',
     groups: (groupTypeIndex: string | number): string => `/groups/${groupTypeIndex}`,
     // :TRICKY: Note that groupKey is provided by user. We need to override urlPatternOptions for kea-router.
     group: (groupTypeIndex: string | number, groupKey: string, encode: boolean = true, tab?: string | null): string =>