feat(ui): Add Canvas UI support for nested children

Author: a-asaad

ui/src/api/flow.ts

@@ -42,3 +42,5 @@ export interface RouterKey {
   name: string
   attributes?: Attributes
 }
+
+export const DEFAULT_NAMESPACE = "integration"

ui/src/components/canvas/ChildrenNavigationPopover.tsx

@@ -0,0 +1,88 @@
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  TreeNode,
+  TreeNodeProps,
+  TreeView,
+} from "@carbon/react"
+import { ParentChild } from "@carbon/react/icons"
+import { ReactElement, useState } from "react"
+import { useNodeId } from "reactflow"
+import { updateSelectedChildNode } from "../../singletons/store/appActions"
+import {
+  getEipId,
+  getEnabledChildrenView,
+  getSelectedChildNode,
+} from "../../singletons/store/storeViews"
+
+const renderTree = (idPath: string[]): ReactElement<TreeNodeProps> => {
+  const id = idPath[idPath.length - 1]
+  const children = getEnabledChildrenView(id)
+
+  return (
+    <TreeNode
+      className={"child-tree-view__node"}
+      key={id}
+      id={id}
+      label={getEipId(id)?.name}
+      onSelect={() => updateSelectedChildNode(idPath)}
+    >
+      {children && children.length > 0
+        ? children.map((childId) => renderTree([...idPath, childId]))
+        : null}
+    </TreeNode>
+  )
+}
+
+const ChildTree = () => {
+  const rootId = useNodeId()
+
+  if (!rootId) {
+    return null
+  }
+
+  return (
+    <div>
+      <TreeView
+        className={"child-tree-view"}
+        label={"children-menu"}
+        hideLabel
+        size="xs"
+      >
+        {renderTree([rootId]).props.children}
+      </TreeView>
+    </div>
+  )
+}
+
+export const ChildrenNavigationPopover = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Popover
+      className="eip-children-popover"
+      highContrast
+      open={open}
+      // Keep popover open when interacting with node config side panel
+      onRequestClose={() => !getSelectedChildNode() && setOpen(false)}
+      onKeyDown={(ev: React.KeyboardEvent) =>
+        ev.key === "Escape" && setOpen(false)
+      }
+    >
+      <Button
+        className="eip-children-popover__button nodrag"
+        hasIconOnly
+        iconDescription="children"
+        kind="primary"
+        renderIcon={ParentChild}
+        size="sm"
+        tooltipPosition="left"
+        onClick={() => setOpen(!open)}
+      />
+      <PopoverContent>
+        <ChildTree />
+      </PopoverContent>
+    </Popover>
+  )
+}

ui/src/components/canvas/EipNode.tsx

@@ -1,33 +1,20 @@
-import { Button, Stack, Tile } from "@carbon/react"
-import { ServiceId } from "@carbon/react/icons"
+import { Tile } from "@carbon/react"
+
 import { Handle, NodeProps, Position } from "reactflow"
 import { EipNodeData, Layout } from "../../api/flow"
 import { ConnectionType, EipRole } from "../../api/generated/eipComponentDef"
-import { EipId } from "../../api/generated/eipFlow"
 import { lookupEipComponent } from "../../singletons/eipDefinitions"
 import getIconUrl from "../../singletons/eipIconCatalog"
-import {
-  clearSelectedChildNode,
-  updateSelectedChildNode,
-} from "../../singletons/store/appActions"
+import { clearSelectedChildNode } from "../../singletons/store/appActions"
 import {
   useGetEnabledChildren,
   useGetLayout,
-  useGetSelectedChildNode,
 } from "../../singletons/store/getterHooks"
 import { getEipId } from "../../singletons/store/storeViews"
-import { toTitleCase } from "../../utils/titleTransform"
+import { getNamespacedTitle } from "../../utils/titleTransform"
+import { ChildrenNavigationPopover } from "./ChildrenNavigationPopover"
 import "./nodes.scss"
 
-interface ChildrenIconsProps {
-  childIds: string[]
-}
-
-interface ChildIconButtonProps {
-  id: string
-}
-
-const DEFAULT_NAMESPACE = "integration"
 const DEFAULT_NODE_LABEL = "New Node"
 
 const renderHorizontalHandles = (connectionType: ConnectionType) => {
@@ -91,64 +78,19 @@ const renderHandles = (
     ? renderHorizontalHandles(connectionType)
     : renderVerticalHandles(connectionType)
 
-const getNamespacedTitle = (eipId: EipId) => {
-  if (eipId.namespace === DEFAULT_NAMESPACE) {
-    return toTitleCase(eipId.name)
-  }
-  return toTitleCase(eipId.namespace) + " " + toTitleCase(eipId.name)
-}
-
 const getClassNames = (props: NodeProps<EipNodeData>, role: EipRole) => {
   const roleClsName =
     role === "channel" ? "eip-channel-node" : "eip-endpoint-node"
   const selectedClsName = props.selected ? "eip-node-selected" : ""
   return ["eip-node", roleClsName, selectedClsName].join(" ")
 }
 
-const ChildIconButton = (props: ChildIconButtonProps) => {
-  const currSelection = useGetSelectedChildNode()
-  const isSelected = currSelection === props.id
-
-  const clsNames = ["child-icon-button"]
-  isSelected && clsNames.push("child-icon-button-focused")
-
-  const eipId = getEipId(props.id)
-
-  return eipId ? (
-    <Button
-      className={clsNames.join(" ")}
-      hasIconOnly
-      renderIcon={ServiceId}
-      iconDescription={eipId.name}
-      size="sm"
-      tooltipPosition="bottom"
-      kind="primary"
-      onClick={(ev) => {
-        ev.stopPropagation()
-        updateSelectedChildNode(props.id)
-      }}
-    />
-  ) : null
-}
-
-// TODO: Account for a large number of children to be displayed
-// TODO: Create a mapping of children to icons (with a fallback option)
-const ChildrenIcons = ({ childIds }: ChildrenIconsProps) => {
-  return (
-    <Stack className="eip-node-children" orientation="horizontal" gap={2}>
-      {childIds.map((id) => (
-        <ChildIconButton key={id} id={id} />
-      ))}
-    </Stack>
-  )
-}
-
 // TODO: Consider separating into Endpoint and Channel custom node types
 export const EipNode = (props: NodeProps<EipNodeData>) => {
   // TODO: clearSelectedChildNode is used in too many different components. See if that can be reduced (or elimnated).
   const layout = useGetLayout()
-  const childrenState = useGetEnabledChildren(props.id)
-  const hasChildren = childrenState.length > 0
+  const children = useGetEnabledChildren(props.id)
+  const hasChildren = children.length > 0
 
   const eipId = getEipId(props.id)
   const componentDefinition = eipId && lookupEipComponent(eipId)
@@ -176,7 +118,7 @@ export const EipNode = (props: NodeProps<EipNodeData>) => {
       >
         <strong>{data.label || DEFAULT_NODE_LABEL}</strong>
       </div>
-      {hasChildren && <ChildrenIcons childIds={childrenState} />}
+      {hasChildren && <ChildrenNavigationPopover />}
       {handles}
     </Tile>
   )

ui/src/components/canvas/nodes.scss

@@ -22,25 +22,28 @@ $icon-button-focus-shadow:
     background-color: themes.$layer-hover-02;
   }
 
-  .eip-node-children {
+  .eip-children-popover {
     position: absolute;
     left: layout.$spacing-02;
   }
 
-  .eip-node-children .child-icon-button {
+  .eip-children-popover__button {
     border-radius: 100%;
     padding: 0;
     align-items: center;
   }
 
-  .eip-node-children .child-icon-button:focus {
-    box-shadow: $icon-button-focus-shadow;
+  .child-tree-view {
+    inline-size: 10rem;
+    max-block-size: 15rem;
+    overflow-y: auto;
   }
 
-  // Used from React to control appearance of a focused button
-  .eip-node-children .child-icon-button-focused {
-    box-shadow: $icon-button-focus-shadow;
+
+  .child-tree-view__node {
+    background-color: themes.$background;
   }
+
 }
 
 .eip-node-selected {
@@ -55,6 +58,7 @@ $icon-button-focus-shadow:
   overflow-wrap: break-word;
   max-height: 3rem;
   overflow-y: hidden;
+  margin-bottom: layout.$spacing-02;
 }
 
 .eip-endpoint-node .eip-node-image {

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

@@ -18,7 +18,7 @@ import { useGetEipAttribute } from "../../singletons/store/getterHooks"
 import debounce from "../../utils/debounce"
 import DescriptionTooltipWrapper from "./DescriptionTooltipWrapper"
 
-const addPaddingClass = "cfg-panel__container__padding-add"
+const addPaddingClass = "cfg-panel__container__side-padding-add"
 
 interface AttributeInputFactoryProps {
   attr: Attribute