feat(ui): allow EIP children to have a different namespace than parent node (#34)

Author: a-asaad

ui/genApiFromSchema.js

@@ -10,7 +10,7 @@ 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 = "47b4b770e33f576da45ec1b5156d3b94d744d2ee"
+const COMMIT_HASH = "26f958d0d923b87bb3f7b598763c63493a42f770"
 
 const SCHEMAS = ["eipComponentDef.schema.json", "eipFlow.schema.json"]
 

ui/src/api/flow.ts

@@ -1,6 +1,6 @@
 import { BuiltInEdge, Edge, Node } from "@xyflow/react"
 import { Attribute } from "./generated/eipComponentDef"
-import { Attributes } from "./generated/eipFlow"
+import { Attributes, EipId } from "./generated/eipFlow"
 
 export interface Layout {
   orientation: "horizontal" | "vertical"
@@ -40,7 +40,7 @@ export const isFollowerNode = (node?: Node): node is FollowerNode =>
 export type CustomNode = EipFlowNode | FollowerNode
 
 export interface ChannelMapping {
-  mapperName: string
+  mapperId: EipId
   matcher: Attribute
   matcherValue?: string
   isDefaultMapping?: boolean
@@ -65,13 +65,13 @@ export const isDynamicEdge = (edge?: Edge): edge is DynamicEdge =>
   edge?.type === DYNAMIC_EDGE_TYPE
 
 export interface RouterKeyDef {
-  name: string
+  eipId: EipId
   type: "attribute" | "child"
   attributesDef: Attribute[]
 }
 
 export interface RouterKey {
-  name: string
+  eipId: EipId
   attributes?: Attributes
 }
 

ui/src/api/generated/eipComponentDef.ts

@@ -48,11 +48,18 @@ export interface EipComponentDefinition {
  * The base schema for all EIP Elements (e.g. EipComponent, EipChildElement)
  */
 export interface EipElement {
-  name: string;
+  eipId: EipId;
   description?: string;
   attributes?: Attribute[];
   childGroup?: EipChildGroup;
 }
+/**
+ * A combination of fields uniquely identifying a component in an 'EipComponentDefinition'
+ */
+export interface EipId {
+  namespace: string;
+  name: string;
+}
 /**
  * Defines an EIP attribute
  */

ui/src/api/generated/eipFlow.ts

@@ -68,7 +68,7 @@ export interface Attributes {
  * An instance of an 'EipChildElement'. Can recursively contain more child nodes as well as attributes of its own.
  */
 export interface EipChildNode {
-  name: string;
+  eipId: EipId;
   attributes?: Attributes;
   children?: EipChildNode[];
 }

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

@@ -11,7 +11,6 @@ import {
 import { Close, SettingsEdit } from "@carbon/react/icons"
 import { ReactNode, useState } from "react"
 import { createPortal } from "react-dom"
-import { DEFAULT_NAMESPACE } from "../../api/flow"
 import {
   EipChildElement,
   EipComponent,
@@ -83,13 +82,9 @@ const ChildSelector = ({ parentId, childOptions }: ChildSelectorProps) => (
     id={"dropdown-child-selector"}
     label="Select child..."
     items={[null, ...childOptions]}
-    itemToString={(child) => child?.name ?? ""}
+    itemToString={(child) => child?.eipId.name ?? ""}
     onChange={({ selectedItem }) => {
-      selectedItem &&
-        enableChild(parentId, {
-          namespace: DEFAULT_NAMESPACE,
-          name: selectedItem.name,
-        })
+      selectedItem && enableChild(parentId, selectedItem.eipId)
     }}
     selectedItem={null}
     titleText={"Add a child"}

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

@@ -94,9 +94,17 @@ const RouterKeyConfig = ({ routerNodeId, routerKeyDef }: RouterKeyProps) => {
   const handleUpdates = useMemo(
     () =>
       debounce((attrName: string, value: string) => {
-        updateContentRouterKey(routerNodeId, routerKeyDef.name, attrName, value)
+        updateContentRouterKey(
+          routerNodeId,
+          {
+            namespace: routerKeyDef.eipId.namespace,
+            name: routerKeyDef.eipId.name,
+          },
+          attrName,
+          value
+        )
       }, 300),
-    [routerNodeId, routerKeyDef.name]
+    [routerNodeId, routerKeyDef.eipId.name, routerKeyDef.eipId.namespace]
   )
 
   const required = routerKeyDef.attributesDef
@@ -130,7 +138,7 @@ const RouterKeyConfig = ({ routerNodeId, routerKeyDef }: RouterKeyProps) => {
           title="Key"
           helperText={
             routerKeyDef.attributesDef.length !== 1
-              ? routerKeyDef.name
+              ? routerKeyDef.eipId.name
               : "Targeted by the matcher"
           }
         />
@@ -142,7 +150,7 @@ const RouterKeyConfig = ({ routerNodeId, routerKeyDef }: RouterKeyProps) => {
 
 // TODO: Allow mapping multiple values to the same channel
 const EdgeMatcher = ({ edgeId, mapping }: EdgeMatcherProps) => {
-  const { mapperName, matcher, matcherValue } = mapping
+  const { mapperId, matcher, matcherValue } = mapping
 
   const handleUpdates = useMemo(
     () =>
@@ -155,7 +163,7 @@ const EdgeMatcher = ({ edgeId, mapping }: EdgeMatcherProps) => {
   return (
     <Section>
       <Stack gap={6}>
-        <SectionHeading title="Matcher" helperText={mapperName} />
+        <SectionHeading title="Matcher" helperText={mapperId.name} />
         <DescriptionTooltipWrapper
           key={matcher.name}
           id={matcher.name}

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

@@ -37,7 +37,7 @@ const isDynamicRouterAttribute = (attribute: Attribute, eipId?: EipId) => {
     return false
   }
 
-  return keyDef.type === "attribute" && keyDef.name === attribute.name
+  return keyDef.type === "attribute" && keyDef.eipId.name === attribute.name
 }
 
 const filterConfigurableAttributes = (attrs?: Attribute[], eipId?: EipId) => {

ui/src/components/config-panel/childDefinitions.ts

@@ -1,3 +1,4 @@
+import isDeepEqual from "fast-deep-equal"
 import {
   EipChildElement,
   EipComponent,
@@ -17,8 +18,8 @@ export const findChildDefinition = (
   }
 
   for (const id of childPath.slice(1)) {
-    const name = getEipId(id)?.name
-    child = children?.find((c) => c.name === name) ?? null
+    const eipId = getEipId(id)
+    child = children?.find((c) => isDeepEqual(c.eipId, eipId)) ?? null
     children = child?.childGroup?.children
   }
 

ui/src/components/palette/EipComponentPanel.tsx

@@ -62,7 +62,7 @@ const EipNamespaceCollection = ({
   allExpanded,
 }: EipBlockCollectionProps) => {
   const eipItems = namespace.components.map((c) => (
-    <EipItem key={c.name} eipId={{ namespace: namespace.name, name: c.name }} />
+    <EipItem key={c.eipId.name} eipId={c.eipId} />
   ))
 
   return (
@@ -82,10 +82,12 @@ const namespacesToDisplay = (
 ): Namespace[] => {
   const withFilteredComponents = entries.map(([namespace, components]) => {
     const filtered = searchTerm
-      ? components.filter((c) => c.name.toLowerCase().includes(searchTerm))
+      ? components.filter((c) =>
+          c.eipId.name.toLowerCase().includes(searchTerm)
+        )
       : components
 
-    filtered.sort((a, b) => a.name.localeCompare(b.name))
+    filtered.sort((a, b) => a.eipId.name.localeCompare(b.eipId.name))
     return { name: namespace, components: filtered }
   })
 

ui/src/components/toolbar/assistant/fuzzyEipIdMatch.test.ts

@@ -0,0 +1,39 @@
+import { expect, test } from "vitest"
+import { DEFAULT_NAMESPACE } from "../../../api/flow"
+import { fuzzyEipMatch } from "./fuzzyEipIdMatch"
+
+test("exact match", () => {
+  const eipId = { namespace: DEFAULT_NAMESPACE, name: "filter" }
+  const result = fuzzyEipMatch(eipId)
+  expect(result).toEqual(eipId)
+})
+
+test("partial match in the same namespace", () => {
+  const eipId = { namespace: "jms", name: "test-adapter" }
+  const result = fuzzyEipMatch(eipId)
+  expect(result).toEqual({ namespace: "jms", name: "inbound-channel-adapter" })
+})
+
+test("exact name match in default namespace", () => {
+  const eipId = { namespace: "jms", name: "aggregator" }
+  const result = fuzzyEipMatch(eipId)
+  expect(result).toEqual({ namespace: DEFAULT_NAMESPACE, name: "aggregator" })
+})
+
+test("no partial match in the same namespace -> fallback to default namespace", () => {
+  const eipId = { namespace: "jms", name: "test-split-example" }
+  const result = fuzzyEipMatch(eipId)
+  expect(result).toEqual({ namespace: DEFAULT_NAMESPACE, name: "splitter" })
+})
+
+test("no partial matches -> return same input EipId", () => {
+  const eipId = { namespace: "jms", name: "unknown" }
+  const result = fuzzyEipMatch(eipId)
+  expect(result).toEqual({ namespace: "jms", name: "unknown" })
+})
+
+test("unknown namespace -> return same input EipId", () => {
+  const eipId = { namespace: "ns_unknown", name: "unknown" }
+  const result = fuzzyEipMatch(eipId)
+  expect(result).toEqual({ namespace: "ns_unknown", name: "unknown" })
+})