feat(ui)!: update app store to support nesting children

Author: a-asaad

ui/src/api/flow.ts

@@ -1,15 +1,13 @@
 import { Edge, Node } from "reactflow"
 import { Attribute } from "./generated/eipComponentDef"
 import { Attributes } from "./generated/eipFlow"
-import { EipId } from "./id"
 
 export interface Layout {
   orientation: "horizontal" | "vertical"
   density: "compact" | "comfortable"
 }
 
 export interface EipNodeData {
-  eipId: EipId
   label?: string
 }
 

ui/src/api/id.ts

@@ -3,25 +3,28 @@ import { ServiceId } from "@carbon/react/icons"
 import { Handle, NodeProps, Position } from "reactflow"
 import { EipNodeData, Layout } from "../../api/flow"
 import { ConnectionType, EipRole } from "../../api/generated/eipComponentDef"
-import { ChildNodeId, EipId } from "../../api/id"
+import { EipId } from "../../api/generated/eipFlow"
 import { lookupEipComponent } from "../../singletons/eipDefinitions"
 import getIconUrl from "../../singletons/eipIconCatalog"
 import {
   clearSelectedChildNode,
   updateSelectedChildNode,
 } from "../../singletons/store/appActions"
 import {
-  useGetChildren,
+  useGetEnabledChildren,
   useGetLayout,
-  useIsChildSelected,
+  useGetSelectedChildNode,
 } from "../../singletons/store/getterHooks"
+import { getEipId } from "../../singletons/store/storeViews"
 import { toTitleCase } from "../../utils/titleTransform"
 import "./nodes.scss"
 
 interface ChildrenIconsProps {
-  childrenNames: string[]
-  parentNodeId: string
-  parentEipId: EipId
+  childIds: string[]
+}
+
+interface ChildIconButtonProps {
+  id: string
 }
 
 const DEFAULT_NAMESPACE = "integration"
@@ -102,36 +105,39 @@ const getClassNames = (props: NodeProps<EipNodeData>, role: EipRole) => {
   return ["eip-node", roleClsName, selectedClsName].join(" ")
 }
 
-const ChildIconButton = (props: ChildNodeId) => {
-  const selected = useIsChildSelected(props)
+const ChildIconButton = (props: ChildIconButtonProps) => {
+  const currSelection = useGetSelectedChildNode()
+  const isSelected = currSelection === props.id
 
   const clsNames = ["child-icon-button"]
-  selected && clsNames.push("child-icon-button-focused")
+  isSelected && clsNames.push("child-icon-button-focused")
 
-  return (
+  const eipId = getEipId(props.id)
+
+  return eipId ? (
     <Button
       className={clsNames.join(" ")}
       hasIconOnly
       renderIcon={ServiceId}
-      iconDescription={props.name}
+      iconDescription={eipId.name}
       size="sm"
       tooltipPosition="bottom"
       kind="primary"
       onClick={(ev) => {
         ev.stopPropagation()
-        updateSelectedChildNode(props)
+        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 = ({ childrenNames, parentNodeId }: ChildrenIconsProps) => {
+const ChildrenIcons = ({ childIds }: ChildrenIconsProps) => {
   return (
     <Stack className="eip-node-children" orientation="horizontal" gap={2}>
-      {childrenNames.map((name) => (
-        <ChildIconButton key={name} name={name} parentNodeId={parentNodeId} />
+      {childIds.map((id) => (
+        <ChildIconButton key={id} id={id} />
       ))}
     </Stack>
   )
@@ -140,37 +146,37 @@ const ChildrenIcons = ({ childrenNames, parentNodeId }: ChildrenIconsProps) => {
 // 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 childrenState = useGetChildren(props.id)
+  const layout = useGetLayout()
+  const childrenState = useGetEnabledChildren(props.id)
   const hasChildren = childrenState.length > 0
 
-  const { data } = props
-  const componentDefinition = lookupEipComponent(data.eipId)!
-  const layout = useGetLayout()
+  const eipId = getEipId(props.id)
+  const componentDefinition = eipId && lookupEipComponent(eipId)
+  if (!componentDefinition) {
+    return null
+  }
+
   const handles = renderHandles(
     componentDefinition.connectionType,
     layout.orientation
   )
 
+  const { data } = props
+
   return (
     <Tile
       className={getClassNames(props, componentDefinition.role)}
       onClick={hasChildren ? () => clearSelectedChildNode() : undefined}
     >
-      <div>{getNamespacedTitle(data.eipId)}</div>
-      <img className="eip-node-image" src={getIconUrl(data.eipId)} />
+      <div>{getNamespacedTitle(eipId)}</div>
+      <img className="eip-node-image" src={getIconUrl(eipId)} />
       <div
         className="eip-node-label"
         style={hasChildren ? { marginBottom: "0.5rem" } : {}}
       >
         <strong>{data.label || DEFAULT_NODE_LABEL}</strong>
       </div>
-      {hasChildren && (
-        <ChildrenIcons
-          childrenNames={childrenState}
-          parentNodeId={props.id}
-          parentEipId={props.data.eipId}
-        />
-      )}
+      {hasChildren && <ChildrenIcons childIds={childrenState} />}
       {handles}
     </Tile>
   )

ui/src/components/canvas/EipNode.tsx

@@ -21,7 +21,7 @@ import {
 } from "reactflow"
 import "reactflow/dist/base.css"
 import { DYNAMIC_EDGE_TYPE, EIP_NODE_TYPE } from "../../api/flow"
-import { EipId } from "../../api/id"
+import { EipId } from "../../api/generated/eipFlow"
 import {
   clearFlow,
   clearSelectedChildNode,

ui/src/components/canvas/FlowCanvas.tsx

@@ -23,27 +23,23 @@ const addPaddingClass = "cfg-panel__container__padding-add"
 interface AttributeInputFactoryProps {
   attr: Attribute
   id: string
-  parentId: string
 }
 
 interface AttributeInputProps<T> {
   id: string
-  parentId: string
   attr: Attribute
   attrValue: T
 }
 
 interface AttributeFormProps {
   attrs: Attribute[]
   id: string
-  parentId: string
 }
 
 const AttributeSelectInput = ({
   attr,
   attrValue,
   id,
-  parentId,
 }: AttributeInputProps<string>) => {
   const emptySelect = ""
   const options = useMemo(
@@ -56,8 +52,8 @@ const AttributeSelectInput = ({
 
   const handleSelect = (ev: ChangeEvent<HTMLSelectElement>) => {
     ev.target.value === emptySelect
-      ? deleteEipAttribute(id, parentId, attr.name)
-      : updateEipAttribute(id, parentId, attr.name, ev.target.value)
+      ? deleteEipAttribute(id, attr.name)
+      : updateEipAttribute(id, attr.name, ev.target.value)
   }
 
   return (
@@ -81,10 +77,9 @@ const AttributeBoolInput = ({
   attr,
   attrValue,
   id,
-  parentId,
 }: AttributeInputProps<boolean>) => {
   const handleToggle = (checked: boolean) =>
-    updateEipAttribute(id, parentId, attr.name, checked)
+    updateEipAttribute(id, attr.name, checked)
 
   return (
     <DescriptionTooltipWrapper id={attr.name} description={attr.description}>
@@ -110,16 +105,15 @@ const AttributeTextInput = ({
   attr,
   attrValue,
   id,
-  parentId,
 }: AttributeInputProps<string>) => {
   const handleTextUpdates = useMemo(
     () =>
       debounce((ev: ChangeEvent<HTMLInputElement>) => {
         ev.target.value === ""
-          ? deleteEipAttribute(id, parentId, attr.name)
-          : updateEipAttribute(id, parentId, attr.name, ev.target.value)
+          ? deleteEipAttribute(id, attr.name)
+          : updateEipAttribute(id, attr.name, ev.target.value)
       }, 300),
-    [id, parentId, attr.name]
+    [id, attr.name]
   )
 
   return (
@@ -136,11 +130,7 @@ const AttributeTextInput = ({
 }
 
 const AttributeInput = (props: AttributeInputFactoryProps) => {
-  const attrValue = useGetEipAttribute(
-    props.id,
-    props.parentId,
-    props.attr.name
-  )
+  const attrValue = useGetEipAttribute(props.id, props.attr.name)
 
   switch (props.attr.type) {
     // TODO: Handle number types with more specific input components (e.g. NumberInput, Slider).

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

@@ -1,12 +1,12 @@
 import { Stack, TextArea } from "@carbon/react"
 import { Attribute } from "../../api/generated/eipComponentDef"
-import { ChildNodeId } from "../../api/id"
+import { getEipId } from "../../singletons/store/storeViews"
 import { toTitleCase } from "../../utils/titleTransform"
 import { AttributeConfigForm } from "./AttributeConfigForm"
 import ConfigurationInputTabs from "./ConfigurationTabs"
 
 interface ChildAttributePanelProps {
-  childId: ChildNodeId
+  childId: string
   parentName: string
   attributes: Attribute[]
   hasChildren: boolean
@@ -18,33 +18,32 @@ const ChildNodeConfig = ({
   parentName,
   attributes,
   hasChildren,
-}: ChildAttributePanelProps) => (
-  <Stack gap={6}>
-    <Stack gap={6} className="cfg-panel__container__padding-add">
-      <h4>{toTitleCase(parentName)}</h4>
-      <h5>{toTitleCase(childId.name)}</h5>
+}: ChildAttributePanelProps) => {
+  const eipId = getEipId(childId)
+  const childName = eipId?.name ?? ""
+
+  return (
+    <Stack gap={6}>
+      <Stack gap={6} className="cfg-panel__container__padding-add">
+        <h4>{toTitleCase(parentName)}</h4>
+        <h5>{toTitleCase(childName)}</h5>
+      </Stack>
+      <ConfigurationInputTabs
+        hasAttributes={attributes.length > 0}
+        hasChildren={hasChildren}
+        attributesForm={<AttributeConfigForm id={childId} attrs={attributes} />}
+        childrenForm={
+          <TextArea
+            labelText="Children XML"
+            helperText="Pass in any additional nested children as XML elements"
+            id="children-xml-escape"
+            enableCounter
+            maxCount={5000}
+          />
+        }
+      />
     </Stack>
-    <ConfigurationInputTabs
-      hasAttributes={attributes.length > 0}
-      hasChildren={hasChildren}
-      attributesForm={
-        <AttributeConfigForm
-          id={childId.name}
-          parentId={childId.parentNodeId}
-          attrs={attributes}
-        />
-      }
-      childrenForm={
-        <TextArea
-          labelText="Children XML"
-          helperText="Pass in any additional nested children as XML elements"
-          id="children-xml-escape"
-          enableCounter
-          maxCount={5000}
-        />
-      }
-    />
-  </Stack>
-)
+  )
+}
 
 export default ChildNodeConfig