feat(ui): add support for follower node types

Author: a-asaad

ui/genApiFromSchema.js

@@ -9,7 +9,8 @@ import path from "node:path"
 
 // TODO: Use git tags instead of commit hashes
 // To use an updated source schema, change this to point to the desired version.
-const COMMIT_HASH = "4fe59e1438fad31b79c87568686cf867fd14a41e"
+
+const COMMIT_HASH = "9ccbe6e4f960451e36476572df05aa2bad375d4e"
 
 const SCHEMAS = ["eipComponentDef.schema.json", "eipFlow.schema.json"]
 
@@ -32,9 +33,9 @@ const generateSources = async (schemaFileName) => {
 
   const outputFileName = `${schemaFileName.split(".")[0]}.ts`
   const outputPath = path.join(GENERATED_SOURCE_DIR, outputFileName)
-  
+
   console.log(`generating ${outputPath}`)
-  
+
   await writeFile(outputPath, generatedCode)
 }
 

ui/src/api/flow.ts

@@ -7,17 +7,37 @@ export interface Layout {
   density: "compact" | "comfortable"
 }
 
-export const EIP_NODE_TYPE = "eipNode"
+export enum CustomNodeType {
+  EipNode = "eipNode",
+  FollowerNode = "followerNode",
+}
 
 // react flow requires using a type rather than an interface for NodeData
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type EipNodeData = {
   label?: string
+
+  // The id of a follower that is linked to this one (i.e. has the same lifecycle)
+  followerId?: string
 }
 
-export type EipFlowNode = Node<EipNodeData, typeof EIP_NODE_TYPE>
+export type EipFlowNode = Node<EipNodeData, CustomNodeType.EipNode>
+
+export const isEipNode = (node?: Node): node is EipFlowNode =>
+  node?.type === CustomNodeType.EipNode
+
+// react flow requires using a type rather than an interface for NodeData
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type FollowerNodeData = {
+  leaderId: string
+}
+
+export type FollowerNode = Node<FollowerNodeData, CustomNodeType.FollowerNode>
+
+export const isFollowerNode = (node?: Node): node is FollowerNode =>
+  node?.type === CustomNodeType.FollowerNode
 
-export type CustomNode = EipFlowNode
+export type CustomNode = EipFlowNode | FollowerNode
 
 export interface ChannelMapping {
   mapperName: string

ui/src/api/generated/eipComponentDef.ts

@@ -29,7 +29,14 @@ export type EipRole = "channel" | "endpoint" | "router" | "transformer";
 /**
  * Defines a connection pattern for an EIP component
  */
-export type ConnectionType = "content_based_router" | "passthru" | "request_reply" | "sink" | "source" | "tee";
+export type ConnectionType =
+  | "content_based_router"
+  | "inbound_request_reply"
+  | "passthru"
+  | "request_reply"
+  | "sink"
+  | "source"
+  | "tee";
 
 /**
  * Defines the collection of EIP components available for use

ui/src/api/generated/eipFlow.ts

@@ -12,7 +12,14 @@ export type EipRole = "channel" | "endpoint" | "router" | "transformer";
 /**
  * Defines a connection pattern for an EIP component
  */
-export type ConnectionType = "content_based_router" | "passthru" | "request_reply" | "sink" | "source" | "tee";
+export type ConnectionType =
+  | "content_based_router"
+  | "inbound_request_reply"
+  | "passthru"
+  | "request_reply"
+  | "sink"
+  | "source"
+  | "tee";
 /**
  * The attribute's value type (attribute keys are always strings)
  */

ui/src/components/canvas/EipNode.tsx

@@ -1,10 +1,19 @@
 import { Tile } from "@carbon/react"
 
-import { Handle, NodeProps, Position } from "@xyflow/react"
-import { EipFlowNode, Layout } from "../../api/flow"
+import { Handle, NodeProps, Position, useNodesData } from "@xyflow/react"
+import {
+  EipFlowNode,
+  FollowerNode as FollowerNodeType,
+  Layout,
+} from "../../api/flow"
 import { ConnectionType, EipRole } from "../../api/generated/eipComponentDef"
-import { lookupEipComponent } from "../../singletons/eipDefinitions"
+import { EipId } from "../../api/generated/eipFlow"
+import {
+  eipIdToString,
+  lookupEipComponent,
+} from "../../singletons/eipDefinitions"
 import getIconUrl from "../../singletons/eipIconCatalog"
+import { describeFollower } from "../../singletons/followerNodeDefs"
 import { clearSelectedChildNode } from "../../singletons/store/appActions"
 import {
   useGetEnabledChildren,
@@ -15,11 +24,17 @@ import { getNamespacedTitle } from "../../utils/titleTransform"
 import { ChildrenNavigationPopover } from "./ChildrenNavigationPopover"
 import "./nodes.scss"
 
+interface NodeContentProps {
+  eipId: EipId
+  label: string
+}
+
 const DEFAULT_NODE_LABEL = "New Node"
 
 const renderHorizontalHandles = (connectionType: ConnectionType) => {
   switch (connectionType) {
     case "source":
+    case "inbound_request_reply":
       return <Handle id="output" type="source" position={Position.Right} />
     case "sink":
       return <Handle id="input" type="target" position={Position.Left} />
@@ -46,6 +61,7 @@ const renderHorizontalHandles = (connectionType: ConnectionType) => {
 const renderVerticalHandles = (connectionType: ConnectionType) => {
   switch (connectionType) {
     case "source":
+    case "inbound_request_reply":
       return <Handle id="output" type="source" position={Position.Bottom} />
     case "sink":
       return <Handle id="input" type="target" position={Position.Top} />
@@ -78,13 +94,23 @@ const renderHandles = (
     ? renderHorizontalHandles(connectionType)
     : renderVerticalHandles(connectionType)
 
-const getClassNames = (props: NodeProps<EipFlowNode>, role: EipRole) => {
+const getNodeClassNames = (isSelected: boolean, role: EipRole) => {
   const roleClsName =
     role === "channel" ? "eip-channel-node" : "eip-endpoint-node"
-  const selectedClsName = props.selected ? "eip-node-selected" : ""
+  const selectedClsName = isSelected ? "eip-node-selected" : ""
   return ["eip-node", roleClsName, selectedClsName].join(" ")
 }
 
+const NodeDisplayContent = ({ eipId, label }: NodeContentProps) => (
+  <>
+    <div className="eip-node-title">{getNamespacedTitle(eipId)}</div>
+    <img className="eip-node-image" src={getIconUrl(eipId)} />
+    <div className="eip-node-label">
+      <strong>{label}</strong>
+    </div>
+  </>
+)
+
 export const EipNode = (props: NodeProps<EipFlowNode>) => {
   const layout = useGetLayout()
   const children = useGetEnabledChildren(props.id)
@@ -105,16 +131,65 @@ export const EipNode = (props: NodeProps<EipFlowNode>) => {
 
   return (
     <Tile
-      className={getClassNames(props, componentDefinition.role)}
+      className={getNodeClassNames(props.selected, componentDefinition.role)}
       onClick={hasChildren ? () => clearSelectedChildNode() : undefined}
     >
-      <div>{getNamespacedTitle(eipId)}</div>
-      <img className="eip-node-image" src={getIconUrl(eipId)} />
-      <div className="eip-node-label">
-        <strong>{data.label || DEFAULT_NODE_LABEL}</strong>
-      </div>
+      <NodeDisplayContent
+        eipId={eipId}
+        label={data.label || DEFAULT_NODE_LABEL}
+      />
       {hasChildren && <ChildrenNavigationPopover />}
       {handles}
     </Tile>
   )
 }
+
+export const FollowerNode = (props: NodeProps<FollowerNodeType>) => {
+  const layout = useGetLayout()
+  const leaderId = props.data.leaderId
+  const leaderData = useNodesData<EipFlowNode>(leaderId)
+
+  const eipId = getEipId(props.id)
+  const componentDefinition = eipId && lookupEipComponent(eipId)
+
+  const leaderEipId = getEipId(leaderId)
+
+  if (!componentDefinition || !leaderEipId) {
+    console.error(
+      `Failed to render follower node with eipId: (${eipId && eipIdToString(eipId)}) for leaderId: (${leaderId})`
+    )
+    return null
+  }
+
+  const followerDescriptor = describeFollower(leaderEipId)
+
+  if (!followerDescriptor) {
+    console.error(
+      `Failed to find follower descriptor for node with eipId: (${eipIdToString(eipId)}) for leaderId: (${leaderId})`
+    )
+    return null
+  }
+
+  const handles = renderHandles(
+    followerDescriptor.overrides?.connectionType ??
+      componentDefinition.connectionType,
+    layout.orientation
+  )
+
+  return (
+    <Tile
+      className={
+        getNodeClassNames(props.selected, componentDefinition.role) +
+        " eip-follower-node"
+      }
+    >
+      <NodeDisplayContent
+        eipId={eipId}
+        label={followerDescriptor.generateLabel(
+          leaderData?.data.label ?? leaderId
+        )}
+      />
+      {handles}
+    </Tile>
+  )
+}

ui/src/components/canvas/FlowCanvas.tsx

@@ -20,7 +20,7 @@ import "@xyflow/react/dist/style.css"
 import { KeyboardEvent, useEffect } from "react"
 import { DropTargetMonitor, useDrop } from "react-dnd"
 import { NativeTypes } from "react-dnd-html5-backend"
-import { DYNAMIC_EDGE_TYPE, EIP_NODE_TYPE } from "../../api/flow"
+import { CustomNodeType, DYNAMIC_EDGE_TYPE } from "../../api/flow"
 import { EipId } from "../../api/generated/eipFlow"
 import {
   clearFlow,
@@ -42,7 +42,7 @@ import {
 } from "../../singletons/store/reactFlowActions"
 import { DragTypes } from "../draggable-panel/dragTypes"
 import DynamicEdge from "./DynamicEdge"
-import { EipNode } from "./EipNode"
+import { EipNode, FollowerNode } from "./EipNode"
 
 const FLOW_ERROR_MESSAGE =
   "Failed to load the canvas - the stored flow is malformed. Clearing the flow from the state store."
@@ -88,7 +88,8 @@ const getDropPosition = (
 }
 
 const nodeTypes = {
-  [EIP_NODE_TYPE]: EipNode,
+  [CustomNodeType.EipNode]: EipNode,
+  [CustomNodeType.FollowerNode]: FollowerNode,
 }
 
 const edgeTypes = {

ui/src/components/canvas/nodes.scss

@@ -69,6 +69,23 @@ $icon-button-focus-shadow:
   height: 3rem;
 }
 
+// Follower node style overrides
+.eip-follower-node {
+  border-color: themes.$border-disabled;
+
+  .eip-node-title {
+    color: themes.$text-on-color-disabled;
+  }
+
+  .eip-node-label {
+    color: themes.$text-on-color-disabled;
+  }
+
+  .eip-node-image {
+    stroke: themes.$text-on-color-disabled;
+  }
+}
+
 .react-flow {
   .react-flow__handle-left,
   .react-flow__handle-right {

ui/src/components/config-panel/EipConfigSidePanel.tsx

@@ -6,6 +6,8 @@ import {
   CustomNode,
   DynamicEdge,
   isDynamicEdge,
+  isEipNode,
+  isFollowerNode,
 } from "../../api/flow"
 import { Attribute } from "../../api/generated/eipComponentDef"
 import { EipId } from "../../api/generated/eipFlow"
@@ -18,7 +20,11 @@ import { clearSelectedChildNode } from "../../singletons/store/appActions"
 import { useGetSelectedChildNode } from "../../singletons/store/getterHooks"
 import { getEipId } from "../../singletons/store/storeViews"
 import DynamicEdgeConfig from "./DynamicEdgeConfig"
-import { ChildNodeConfig, RootNodeConfig } from "./NodeConfigPanel"
+import {
+  ChildNodeConfig,
+  FollowerNodePanel,
+  RootNodeConfig,
+} from "./NodeConfigPanel"
 import { findChildDefinition } from "./childDefinitions"
 
 const isDynamicRouterAttribute = (attribute: Attribute, eipId?: EipId) => {
@@ -76,7 +82,7 @@ const EipConfigSidePanel = () => {
         attributes={configurableAttrs}
       />
     )
-  } else if (selectedNode) {
+  } else if (selectedNode && isEipNode(selectedNode)) {
     // TODO: Handle error case if eipComponent is undefined
     const selectedNodeEipId = selectedNode && getEipId(selectedNode.id)
     const eipComponent =
@@ -92,6 +98,8 @@ const EipConfigSidePanel = () => {
         attributes={configurableAttrs}
       />
     )
+  } else if (selectedNode && isFollowerNode(selectedNode)) {
+    sidePanelContent = <FollowerNodePanel node={selectedNode} />
   } else if (selectedEdge) {
     sidePanelContent = (
       <DynamicEdgeConfig key={selectedEdge.id} edge={selectedEdge} />

ui/src/components/config-panel/NodeConfigPanel.tsx

@@ -1,9 +1,10 @@
 import { Button, Stack, TextArea, TextInput } from "@carbon/react"
-import { Settings } from "@carbon/react/icons"
+import { ParentNode, Settings } from "@carbon/react/icons"
 import { ChangeEvent, useMemo, useState } from "react"
-import { EipFlowNode } from "../../api/flow"
+import { EipFlowNode, FollowerNode } from "../../api/flow"
 import { Attribute } from "../../api/generated/eipComponentDef"
 import {
+  switchNodeSelection,
   updateNodeDescription,
   updateNodeLabel,
 } from "../../singletons/store/appActions"
@@ -44,6 +45,10 @@ interface ChildPanelProps {
   attributes: Attribute[]
 }
 
+interface FollowerPanelProps {
+  node: FollowerNode
+}
+
 const IdDisplay = ({ id }: IdDisplayProps) => (
   <TextInput id="nodeId" labelText="NodeId" disabled defaultValue={id} />
 )
@@ -182,3 +187,25 @@ export const ChildNodeConfig = ({ childPath, attributes }: ChildPanelProps) => {
     />
   )
 }
+
+export const FollowerNodePanel = ({ node }: FollowerPanelProps) => {
+  const eipId = getEipId(node.id)
+
+  return (
+    <div className="cfg-panel__container__top-padding-add">
+      <Stack gap={6} className="cfg-panel__container__side-padding-add">
+        {eipId && <h4>{getNamespacedTitle(eipId)}</h4>}
+        <IdDisplay id={node.id} />
+        <h5>This node is managed by its parent</h5>
+        <Button
+          className="cfg-panel__button"
+          kind="primary"
+          onClick={() => switchNodeSelection(node.data.leaderId)}
+          renderIcon={ParentNode}
+        >
+          Go to Parent
+        </Button>
+      </Stack>
+    </div>
+  )
+}