feat(Topology): Add Topology pipeline support

packages/react-integration/demo-app-ts/src/Demos.ts

@@ -510,6 +510,11 @@ export const Demos: DemoInterface[] = [
     name: 'Topology Demo',
     componentType: Examples.TopologyDemo
   },
+  {
+    id: 'topology-pipelines-demo',
+    name: 'Topology Pipelines Demo',
+    componentType: Examples.TopologyPipelineDemo
+  },
   {
     id: 'treeview-demo',
     name: 'Tree View Demo',

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PipelineLayout.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  Model,
+  ModelKind,
+  withPanZoom,
+  GraphComponent,
+  useComponentFactory,
+  useModel,
+  ComponentFactory,
+  useLayoutFactory,
+  Graph,
+  Layout,
+  PipelineDagreLayout,
+  PipelineNodeModel,
+  getSpacerNodes,
+  getEdgesFromNodes
+} from '@patternfly/react-topology';
+import '@patternfly/react-styles/css/components/Topology/topology-components.css';
+import withTopologySetup from './utils/withTopologySetup';
+import pipelineComponentFactory from './components/pipelineComponentFactory';
+import { createFinallyTasks, createParallelTasks, createStatusTasks, setWhenStatus } from './utils/pipelineUtils';
+
+export const LAYOUT_TITLE = 'Layout';
+
+const getModel = (layout: string): Model => {
+  const tasks: PipelineNodeModel[] = createStatusTasks('task', 4, undefined, false, true);
+
+  const whenTasks = tasks.reduce((acc, task, index) => {
+    if (index % (Math.floor(tasks.length / 3) + 1) !== 0) {
+      acc.push(task);
+    }
+    return acc;
+  }, []);
+  setWhenStatus(whenTasks);
+
+  for (let i = 0; i < tasks.length; i++) {
+    tasks[i + 1].runAfterTasks.push(tasks[i].id);
+    i++;
+    if (i + 1 < tasks.length) {
+      tasks[i + 1].runAfterTasks.push(tasks[i].id);
+    }
+    i++;
+    if (i + 1 < tasks.length) {
+      tasks[i + 1].runAfterTasks.push(tasks[i].id);
+    }
+    i++;
+  }
+
+  const parallelTasks = createParallelTasks('parallelTasks', tasks[9].id);
+  tasks.push(...parallelTasks);
+
+  const finallyNodes = createFinallyTasks('finally', 2, tasks, true);
+  const finallyGroup = {
+    id: 'finally-group',
+    type: 'finally-group',
+    children: finallyNodes.map(n => n.id),
+    group: true,
+    style: { padding: 17 }
+  };
+
+  const spacerNodes = getSpacerNodes([...tasks, ...finallyNodes]);
+  const edges = getEdgesFromNodes([...tasks, ...finallyNodes, ...spacerNodes]);
+
+  return {
+    graph: {
+      id: 'g1',
+      type: 'graph',
+      x: 25,
+      y: 25,
+      layout
+    },
+    nodes: [...tasks, ...finallyNodes, ...spacerNodes, finallyGroup],
+    edges
+  };
+};
+
+export const PipelineLayout = withTopologySetup(() => {
+  useLayoutFactory((type: string, graph: Graph): Layout | undefined => new PipelineDagreLayout(graph));
+  useComponentFactory(pipelineComponentFactory);
+  // support pan zoom and drag
+  useComponentFactory(
+    React.useCallback<ComponentFactory>(kind => {
+      if (kind === ModelKind.graph) {
+        return withPanZoom()(GraphComponent);
+      }
+      return undefined;
+    }, [])
+  );
+
+  useModel(getModel('PipelineDagreLayout'));
+  return null;
+});

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PipelineTasks.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  ModelKind,
+  withPanZoom,
+  GraphComponent,
+  useComponentFactory,
+  useModel,
+  ComponentFactory
+} from '@patternfly/react-topology';
+import '@patternfly/react-styles/css/components/Topology/topology-components.css';
+import withTopologySetup from './utils/withTopologySetup';
+import pipelineComponentFactory from './components/pipelineComponentFactory';
+import { createFinallyTasks, createStatusTasks, setWhenStatus } from './utils/pipelineUtils';
+
+export const TASKS_TITLE = 'Tasks';
+
+export const PipelineTasks = withTopologySetup(() => {
+  useComponentFactory(pipelineComponentFactory);
+  // support pan zoom and drag
+  useComponentFactory(
+    React.useCallback<ComponentFactory>(kind => {
+      if (kind === ModelKind.graph) {
+        return withPanZoom()(GraphComponent);
+      }
+      return undefined;
+    }, [])
+  );
+  const tasks = createStatusTasks('task', 4, undefined, false);
+  setWhenStatus(tasks);
+  const finallyNodes = createFinallyTasks('finally', 2, tasks);
+  const finallyGroup = {
+    id: 'finally-group',
+    type: 'finally-group',
+    children: finallyNodes.map(n => n.id),
+    group: true,
+    style: { padding: 17 }
+  };
+
+  useModel({
+    graph: {
+      id: 'g1',
+      type: 'graph',
+      x: 25,
+      y: 25
+    },
+    nodes: [...tasks, ...finallyNodes, finallyGroup]
+  });
+  return null;
+});

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyPipelineDemo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
+import { PipelineTasks, TASKS_TITLE } from './PipelineTasks';
+
+import './TopologyDemo.css';
+import { LAYOUT_TITLE, PipelineLayout } from './PipelineLayout';
+
+const TASKS = 0;
+const LAYOUT = 1;
+
+export const TopologyPipelineDemo: React.FunctionComponent = () => {
+  const [activeKey, setActiveKey] = React.useState<number>(TASKS);
+
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: number) => {
+    setActiveKey(tabIndex);
+  };
+
+  return (
+    <div className="pf-ri__topology-demo">
+      <Tabs unmountOnExit activeKey={activeKey} onSelect={handleTabClick}>
+        <Tab eventKey={TASKS} title={<TabTitleText>{TASKS_TITLE}</TabTitleText>}>
+          <PipelineTasks />
+        </Tab>
+        <Tab eventKey={LAYOUT} title={<TabTitleText>{LAYOUT_TITLE}</TabTitleText>}>
+          <PipelineLayout />
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
+TopologyPipelineDemo.displayName = 'TopologyPipelineDemo';

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoTaskNode.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Node, TaskNode, WhenDecorator, WithContextMenuProps, WithSelectionProps } from '@patternfly/react-topology';
+
+type DemoTaskNodeProps = {
+  element: Node;
+} & WithContextMenuProps &
+  WithSelectionProps;
+
+const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
+  element,
+  onContextMenu,
+  contextMenuOpen,
+  ...rest
+}) => {
+  const data = element.getData();
+
+  const passedData = React.useMemo(() => {
+    const newData = { ...data };
+    Object.keys(newData).forEach(key => {
+      if (newData[key] === undefined) {
+        delete newData[key];
+      }
+    });
+    return newData;
+  }, [data]);
+
+  const whenDecorator = data.whenStatus ? <WhenDecorator element={element} status={data.whenStatus} /> : null;
+
+  return (
+    <TaskNode
+      element={element}
+      onContextMenu={data.showContextMenu ? onContextMenu : undefined}
+      contextMenuOpen={contextMenuOpen}
+      {...passedData}
+      {...rest}
+    >
+      {whenDecorator}
+    </TaskNode>
+  );
+};
+
+export default observer(DemoTaskNode);

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/pipelineComponentFactory.tsx

@@ -0,0 +1,59 @@
+import { ComponentType } from 'react';
+import {
+  GraphElement,
+  ComponentFactory,
+  ModelKind,
+  SpacerNode,
+  DefaultTaskGroup,
+  TaskEdge,
+  DEFAULT_TASK_NODE_TYPE,
+  DEFAULT_SPACER_NODE_TYPE,
+  DEFAULT_EDGE_TYPE,
+  DEFAULT_FINALLY_NODE_TYPE,
+  FinallyNode,
+  ContextMenuSeparator,
+  ContextMenuItem,
+  withContextMenu,
+  withSelection
+} from '@patternfly/react-topology';
+import DemoTaskNode from './DemoTaskNode';
+import * as React from 'react';
+
+const contextMenuItem = (label: string, i: number): React.ReactElement => {
+  if (label === '-') {
+    return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
+  }
+  return (
+    // eslint-disable-next-line no-alert
+    <ContextMenuItem key={label} onClick={() => alert(`Selected: ${label}`)}>
+      {label}
+    </ContextMenuItem>
+  );
+};
+
+const createContextMenuItems = (...labels: string[]): React.ReactElement[] => labels.map(contextMenuItem);
+
+const defaultMenu = createContextMenuItems('First', 'Second', 'Third', '-', 'Fourth');
+
+const shapesComponentFactory: ComponentFactory = (
+  kind: ModelKind,
+  type: string
+): ComponentType<{ element: GraphElement }> | undefined => {
+  switch (type) {
+    case DEFAULT_TASK_NODE_TYPE:
+      return withContextMenu(() => defaultMenu)(withSelection()(DemoTaskNode));
+    case DEFAULT_FINALLY_NODE_TYPE:
+      return withContextMenu(() => defaultMenu)(withSelection()(FinallyNode));
+    case 'finally-group':
+      return DefaultTaskGroup;
+    case DEFAULT_SPACER_NODE_TYPE:
+      return SpacerNode;
+    case 'finally-spacer-edge':
+    case DEFAULT_EDGE_TYPE:
+      return TaskEdge;
+    default:
+      return undefined;
+  }
+};
+
+export default shapesComponentFactory;