feat(ui): deprecate 'web-services' and 'xml' eip namespaces

Author: a-asaad

ui/src/components/palette/EipComponentPanel.tsx

@@ -12,7 +12,7 @@ import { EipId } from "../../api/generated/eipFlow"
 import { EIP_SCHEMA } from "../../singletons/eipDefinitions"
 import getIconUrl from "../../singletons/eipIconCatalog"
 import { useNodeCount } from "../../singletons/store/getterHooks"
-import { toTitleCase } from "../../utils/titleTransform"
+import { getNamespaceAlias, toTitleCase } from "../../utils/titleTransform"
 import { DragTypes } from "./dragTypes"
 
 interface Namespace {
@@ -67,7 +67,7 @@ const EipNamespaceCollection = ({
 
   return (
     <AccordionItem
-      title={toTitleCase(namespace.name)}
+      title={toTitleCase(getNamespaceAlias(namespace.name))}
       open={allExpanded || expandedNamespace === namespace.name}
       onHeadingClick={({ isOpen }) => handleExpand(isOpen)}
     >

ui/src/json/springIntegrationEipComponents.json

@@ -60,7 +60,7 @@ const contentBasedRouterTargets: ReadonlyMap<string, RouterTarget> = new Map([
     { name: "header-name", type: "attribute" },
   ],
   ["integration.router", { name: "expression", type: "attribute" }],
-  ["xml.xpath-router", { name: "xpath-expression", type: "child" }],
+  ["int-xml.xpath-router", { name: "xpath-expression", type: "child" }],
 ])
 
 export const lookupContentBasedRouterKeys = (

ui/src/singletons/eipDefinitions.ts

@@ -32,7 +32,7 @@ exports[`import flow from an exported JSON file > 'import a deprecated flow part
   "eipIds": [
     {
       "name": "inbound-gateway",
-      "namespace": "web-services",
+      "namespace": "ws",
     },
     {
       "name": "transformer",
@@ -99,48 +99,46 @@ exports[`import flow from an exported JSON file > 'import a deprecated flow part
 }
 `;
 
-exports[`import flow from an exported JSON file > 'import a valid flow success' 1`] = `
+exports[`import flow from an exported JSON file > 'import a flow with deprecated namespa…' 1`] = `
 {
   "children": [
     {
-      "81HAL73ElW": [],
+      "EhSdB7aSPh": [],
     },
     {
-      "Hz22QyhCpj": [],
+      "e5ZObyhckj": [],
     },
     {
-      "THgI9WvsJh": [
-        "mbL_mB1wGOY",
-      ],
+      "PFC0tD2Jjq": [],
     },
   ],
   "edges": [
     {
-      "id": "reactflow__edge-81HAL73ElWoutput-Hz22QyhCpjinput",
-      "source": "81HAL73ElW",
+      "id": "xy-edge__EhSdB7aSPhoutput-e5ZObyhckjinput",
+      "source": "EhSdB7aSPh",
       "sourceHandle": "output",
-      "target": "Hz22QyhCpj",
+      "target": "e5ZObyhckj",
       "targetHandle": "input",
     },
     {
-      "id": "reactflow__edge-Hz22QyhCpjoutput-THgI9WvsJhinput",
-      "source": "Hz22QyhCpj",
+      "id": "xy-edge__PFC0tD2Jjqoutput-EhSdB7aSPhinput",
+      "source": "PFC0tD2Jjq",
       "sourceHandle": "output",
-      "target": "THgI9WvsJh",
+      "target": "EhSdB7aSPh",
       "targetHandle": "input",
     },
   ],
   "eipIds": [
     {
-      "name": "inbound-gateway",
-      "namespace": "web-services",
+      "name": "xpath-transformer",
+      "namespace": "int-xml",
     },
     {
-      "name": "transformer",
-      "namespace": "integration",
+      "name": "outbound-gateway",
+      "namespace": "ws",
     },
     {
-      "name": "outbound-gateway",
+      "name": "inbound-channel-adapter",
       "namespace": "http",
     },
   ],
@@ -151,11 +149,51 @@ exports[`import flow from an exported JSON file > 'import a valid flow success'
   "nodes": [
     {
       "data": {
-        "label": "ws-in",
+        "label": "transform",
       },
       "dragging": false,
-      "height": 124,
-      "id": "81HAL73ElW",
+      "id": "EhSdB7aSPh",
+      "measured": {
+        "height": 90,
+        "width": 104,
+      },
+      "position": {
+        "x": 203,
+        "y": 22.5,
+      },
+      "selected": false,
+      "sourcePosition": "right",
+      "targetPosition": "left",
+      "type": "eipNode",
+    },
+    {
+      "data": {
+        "label": "out1",
+      },
+      "dragging": false,
+      "id": "e5ZObyhckj",
+      "measured": {
+        "height": 127,
+        "width": 128,
+      },
+      "position": {
+        "x": 382,
+        "y": 4,
+      },
+      "selected": false,
+      "sourcePosition": "right",
+      "targetPosition": "left",
+      "type": "eipNode",
+    },
+    {
+      "data": {
+        "label": "in1",
+      },
+      "id": "PFC0tD2Jjq",
+      "measured": {
+        "height": 135,
+        "width": 128,
+      },
       "position": {
         "x": 0,
         "y": 0,
@@ -164,16 +202,73 @@ exports[`import flow from an exported JSON file > 'import a valid flow success'
       "sourcePosition": "right",
       "targetPosition": "left",
       "type": "eipNode",
-      "width": 128,
+    },
+  ],
+}
+`;
+
+exports[`import flow from an exported JSON file > 'import a valid flow success' 1`] = `
+{
+  "children": [
+    {
+      "Hz22QyhCpj": [],
     },
+    {
+      "THgI9WvsJh": [
+        "mbL_mB1wGOY",
+      ],
+    },
+    {
+      "OuC9d1xC5e": [],
+    },
+  ],
+  "edges": [
+    {
+      "id": "reactflow__edge-Hz22QyhCpjoutput-THgI9WvsJhinput",
+      "source": "Hz22QyhCpj",
+      "sourceHandle": "output",
+      "target": "THgI9WvsJh",
+      "targetHandle": "input",
+    },
+    {
+      "id": "xy-edge__OuC9d1xC5eoutput-Hz22QyhCpjinput",
+      "source": "OuC9d1xC5e",
+      "sourceHandle": "output",
+      "target": "Hz22QyhCpj",
+      "targetHandle": "input",
+    },
+  ],
+  "eipIds": [
+    {
+      "name": "transformer",
+      "namespace": "integration",
+    },
+    {
+      "name": "outbound-gateway",
+      "namespace": "http",
+    },
+    {
+      "name": "message-driven-channel-adapter",
+      "namespace": "jms",
+    },
+  ],
+  "layout": {
+    "density": "comfortable",
+    "orientation": "horizontal",
+  },
+  "nodes": [
     {
       "data": {},
       "dragging": false,
       "height": 87,
       "id": "Hz22QyhCpj",
+      "measured": {
+        "height": 87,
+        "width": 99,
+      },
       "position": {
         "x": 203,
-        "y": 18.5,
+        "y": 24,
       },
       "selected": false,
       "sourcePosition": "right",
@@ -186,16 +281,39 @@ exports[`import flow from an exported JSON file > 'import a valid flow success'
       "dragging": false,
       "height": 121,
       "id": "THgI9WvsJh",
+      "measured": {
+        "height": 121,
+        "width": 109,
+      },
       "position": {
         "x": 377,
-        "y": 5.5,
+        "y": 7,
       },
       "selected": false,
       "sourcePosition": "right",
       "targetPosition": "left",
       "type": "eipNode",
       "width": 109,
     },
+    {
+      "data": {
+        "label": "jms-in",
+      },
+      "dragging": false,
+      "id": "OuC9d1xC5e",
+      "measured": {
+        "height": 135,
+        "width": 128,
+      },
+      "position": {
+        "x": 0,
+        "y": 0,
+      },
+      "selected": false,
+      "sourcePosition": "right",
+      "targetPosition": "left",
+      "type": "eipNode",
+    },
   ],
 }
 `;

ui/src/singletons/store/__snapshots__/appActions.test.ts.snap

@@ -58,6 +58,7 @@ import {
   getNodesView,
 } from "./storeViews"
 import deprecatedExportedFlow from "./testdata/exported-diagrams/deprecatedFlow.json?raw"
+import deprecatedNamespacesFlow from "./testdata/exported-diagrams/deprecatedNamespaces.json?raw"
 import validExportedFlow from "./testdata/exported-diagrams/validFlow.json?raw"
 
 vi.mock("zustand")
@@ -594,6 +595,10 @@ describe("import flow from an exported JSON file", () => {
       msg: "import a deprecated flow partial success",
       flow: deprecatedExportedFlow,
     },
+    {
+      msg: "import a flow with deprecated namespaces success",
+      flow: deprecatedNamespacesFlow,
+    },
   ])("$msg", ({ flow }) => {
     const initNodes = getNodesView()
 

ui/src/singletons/store/appActions.test.ts

@@ -231,15 +231,16 @@ export const importFlowFromObject = (flow: SerializedFlow) => {
       throw new Error("Failed to import an EIP flow JSON. Malformed input")
     }
 
-    // Maintain backwards compatibility with older exported formats
     if (!flow.eipConfigs && !flow.version) {
       return importDeprecatedFlow(flow)
     }
 
+    const eipConfigs = convertDeprecatedNamespaces(flow.eipConfigs)
+
     return {
       nodes: flow.nodes,
       edges: flow.edges,
-      eipConfigs: flow.eipConfigs,
+      eipConfigs,
       customEntities: flow.customEntities ?? {},
     }
   })
@@ -418,15 +419,15 @@ const isStoreType = (state: unknown): state is AppStore => {
   )
 }
 
-// Maintains compatibility with older exported formats
+// Maintain backwards compatibility with older exported formats
 const importDeprecatedFlow = (flow: SerializedFlow): Partial<AppStore> => {
   const eipConfigs = {} as AppStore["eipConfigs"]
   const nodes = flow.nodes.map((node) => {
     const { eipId: oldEipId, ...rest } = node.data as { eipId: EipId }
     eipConfigs[node.id] = {
       attributes: {},
       children: [],
-      eipId: oldEipId,
+      eipId: fixDeprecatedEipId(oldEipId),
     }
     return {
       ...node,
@@ -441,6 +442,42 @@ const importDeprecatedFlow = (flow: SerializedFlow): Partial<AppStore> => {
   }
 }
 
+const DEPRECATED_EIP_NAMESPACES: Record<string, string> = {
+  xml: "int-xml",
+  "web-services": "ws",
+}
+
+// Maintain backwards compatibility with older exported namespaces
+const convertDeprecatedNamespaces = (
+  eipConfigs: SerializedFlow["eipConfigs"]
+) =>
+  Object.fromEntries(
+    Object.entries(eipConfigs).map(([id, config]) => {
+      const eipId = config.eipId
+      if (eipId.namespace in DEPRECATED_EIP_NAMESPACES) {
+        const convertedEipId = fixDeprecatedEipId(eipId)
+
+        console.warn(
+          `Imported flow has a deprecated namespace '${eipId.namespace}'. Converting the namespace to '${convertedEipId.namespace}'.`
+        )
+
+        return [
+          id,
+          {
+            ...config,
+            eipId: convertedEipId,
+          },
+        ]
+      }
+      return [id, config]
+    })
+  )
+
+const fixDeprecatedEipId = (eipId: EipId): EipId => ({
+  ...eipId,
+  namespace: DEPRECATED_EIP_NAMESPACES[eipId.namespace] ?? eipId.namespace,
+})
+
 const isWellFormedXML = (content: string) => {
   if (!content) {
     return false