From 2ba1ac0dcb45d08eab8a8f7318c2e2493bdc8b55 Mon Sep 17 00:00:00 2001 From: Tiina Turban Date: Wed, 25 Oct 2023 17:27:42 -0700 Subject: [PATCH] feat: Add tabs for pipeline UI --- .../src/scenes/pipeline/Pipeline.stories.tsx | 18 +++++ frontend/src/scenes/pipeline/Pipeline.tsx | 31 +++++++-- .../src/scenes/pipeline/pipelineLogic.tsx | 69 +++++++++++++++++-- frontend/src/scenes/scenes.ts | 7 +- frontend/src/scenes/urls.ts | 4 +- frontend/src/types.ts | 6 ++ 6 files changed, 124 insertions(+), 11 deletions(-) diff --git a/frontend/src/scenes/pipeline/Pipeline.stories.tsx b/frontend/src/scenes/pipeline/Pipeline.stories.tsx index dd0b1641b9e72..b96709bbab3a2 100644 --- a/frontend/src/scenes/pipeline/Pipeline.stories.tsx +++ b/frontend/src/scenes/pipeline/Pipeline.stories.tsx @@ -3,6 +3,8 @@ import { Meta } from '@storybook/react' import { App } from 'scenes/App' import { router } from 'kea-router' import { urls } from 'scenes/urls' +import { PipelineTabs } from '~/types' +import { pipelineLogic } from './pipelineLogic' export default { title: 'Scenes-App/Pipeline', @@ -11,8 +13,24 @@ export default { } as Meta export function PipelineLandingPage(): JSX.Element { + // also Destinations page useEffect(() => { router.actions.push(urls.pipeline()) + pipelineLogic.mount() + }, []) + return +} +export function PipelineFilteringPage(): JSX.Element { + useEffect(() => { + router.actions.push(urls.pipeline(PipelineTabs.Filtering)) + pipelineLogic.mount() + }, []) + return +} +export function PipelineTransformationsPage(): JSX.Element { + useEffect(() => { + router.actions.push(urls.pipeline(PipelineTabs.Transformations)) + pipelineLogic.mount() }, []) return } diff --git a/frontend/src/scenes/pipeline/Pipeline.tsx b/frontend/src/scenes/pipeline/Pipeline.tsx index 42ee27cc7c66b..29d417fbf614d 100644 --- a/frontend/src/scenes/pipeline/Pipeline.tsx +++ b/frontend/src/scenes/pipeline/Pipeline.tsx @@ -1,11 +1,35 @@ import { SceneExport } from 'scenes/sceneTypes' -import { pipelineLogic } from './pipelineLogic' import { PageHeader } from 'lib/components/PageHeader' +import { humanFriendlyTabName, pipelineLogic, singularName } 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' export function Pipeline(): JSX.Element { + const { currentTab } = useValues(pipelineLogic) + + const singular = singularName(currentTab) return (
- + + New {singular} + + } + /> + router.actions.push(urls.pipeline(tab as PipelineTabs))} + tabs={Object.values(PipelineTabs).map((tab) => ({ + label: humanFriendlyTabName(tab), + key: tab, + }))} + />
) } @@ -14,6 +38,3 @@ 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 diff --git a/frontend/src/scenes/pipeline/pipelineLogic.tsx b/frontend/src/scenes/pipeline/pipelineLogic.tsx index 9d74a469558e0..4a0b73f96ebfe 100644 --- a/frontend/src/scenes/pipeline/pipelineLogic.tsx +++ b/frontend/src/scenes/pipeline/pipelineLogic.tsx @@ -1,6 +1,67 @@ -import { kea } from 'kea' +import { actions, kea, path, reducers, selectors } from 'kea' import type { pipelineLogicType } from './pipelineLogicType' +import { actionToUrl, urlToAction } from 'kea-router' +import { urls } from 'scenes/urls' +import { Breadcrumb, PipelineTabs } from '~/types' -export const pipelineLogic = kea({ - path: ['scenes', 'pipeline', 'pipelineLogic'], -}) +export const singularName = (tab: PipelineTabs): string => { + switch (tab) { + case PipelineTabs.Filtering: + return 'filter' + case PipelineTabs.Transformations: + return 'transformation' + case PipelineTabs.Destinations: + return 'destination' + } +} + +export const humanFriendlyTabName = (tab: PipelineTabs): string => { + switch (tab) { + case PipelineTabs.Filtering: + return 'Filtering' + case PipelineTabs.Transformations: + return 'Transformations' + case PipelineTabs.Destinations: + return 'Destinations' + } +} + +export const pipelineLogic = kea([ + path(['scenes', 'pipeline', 'pipelineLogic']), + actions({ + setCurrentTab: (tab: PipelineTabs = PipelineTabs.Destinations) => ({ tab }), + }), + reducers({ + currentTab: [ + PipelineTabs.Destinations as PipelineTabs, + { + setCurrentTab: (_, { tab }) => tab, + }, + ], + }), + selectors(() => ({ + breadcrumbs: [ + (s) => [s.currentTab], + (tab): Breadcrumb[] => { + const breadcrumbs: Breadcrumb[] = [{ name: 'Pipeline' }] + breadcrumbs.push({ + name: humanFriendlyTabName(tab), + }) + + return breadcrumbs + }, + ], + })), + actionToUrl(({ values }) => { + return { + setCurrentTab: () => [urls.pipeline(values.currentTab)], + } + }), + urlToAction(({ actions, values }) => ({ + '/pipeline/:tab': ({ tab }) => { + if (tab !== values.currentTab) { + actions.setCurrentTab(tab as PipelineTabs) + } + }, + })), +]) diff --git a/frontend/src/scenes/scenes.ts b/frontend/src/scenes/scenes.ts index 311a72f6f5c34..78153fac0cf1e 100644 --- a/frontend/src/scenes/scenes.ts +++ b/frontend/src/scenes/scenes.ts @@ -3,7 +3,7 @@ import { Error404 as Error404Component } from '~/layout/Error404' import { ErrorNetwork as ErrorNetworkComponent } from '~/layout/ErrorNetwork' import { ErrorProjectUnavailable as ErrorProjectUnavailableComponent } from '~/layout/ErrorProjectUnavailable' import { urls } from 'scenes/urls' -import { InsightShortId, PropertyFilterType, ReplayTabs } from '~/types' +import { InsightShortId, PipelineTabs, PropertyFilterType, ReplayTabs } from '~/types' import { combineUrl } from 'kea-router' import { getDefaultEventsSceneQuery } from 'scenes/events/defaults' import { EventsQuery } from '~/queries/schema' @@ -437,6 +437,11 @@ export const routes: Record = { [urls.personByUUID('*', false)]: Scene.Person, [urls.persons()]: Scene.Persons, [urls.pipeline()]: Scene.Pipeline, + // One entry for every available tab + ...Object.values(PipelineTabs).reduce((acc, tab) => { + acc[urls.pipeline(tab)] = Scene.Pipeline + return acc + }, {} as Record), [urls.groups(':groupTypeIndex')]: Scene.Groups, [urls.group(':groupTypeIndex', ':groupKey', false)]: Scene.Group, [urls.group(':groupTypeIndex', ':groupKey', false, ':groupTab')]: Scene.Group, diff --git a/frontend/src/scenes/urls.ts b/frontend/src/scenes/urls.ts index 9e454a67f9f81..a0253f81ffc21 100644 --- a/frontend/src/scenes/urls.ts +++ b/frontend/src/scenes/urls.ts @@ -6,6 +6,7 @@ import { FilterType, InsightShortId, ReplayTabs, + PipelineTabs, } from '~/types' import { combineUrl } from 'kea-router' import { ExportOptions } from '~/exporter/types' @@ -93,7 +94,8 @@ export const urls = { personByUUID: (uuid: string, encode: boolean = true): string => encode ? `/persons/${encodeURIComponent(uuid)}` : `/persons/${uuid}`, persons: (): string => '/persons', - pipeline: (): string => '/pipeline', + pipeline: (tab?: PipelineTabs): string => `/pipeline/${tab ? tab : 'destinations'}`, + pipelineNew: (tab?: PipelineTabs): string => `/pipeline/${tab ? tab : 'destinations'}/new`, 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 => diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 292f04183121b..7ceec8570669a 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -515,6 +515,12 @@ export enum ExperimentsTabs { Archived = 'archived', } +export enum PipelineTabs { + Filtering = 'filtering', + Transformations = 'transformations', + Destinations = 'destinations', +} + export enum ProgressStatus { Draft = 'draft', Running = 'running',