Merge DataMapper

.github/workflows/build-lint-test.yml

@@ -36,6 +36,10 @@ jobs:
       - name: 💅 Run stylelint
         run: yarn workspace @kaoto/kaoto run lint:style
 
+      # Build packages excluding @kaoto/camel-catalog since it was build during installing dependencies
+      - name: Build packages
+        run: yarn workspaces foreach --verbose --all --topological-dev --exclude @kaoto/camel-catalog --exclude @kaoto/xml-schema-ts run build
+
       # Run tests
       - name: 🧪 Run tests
         run: yarn workspaces foreach --verbose --all --topological-dev run test
@@ -45,10 +49,6 @@ jobs:
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
 
-      # Build packages excluding @kaoto/camel-catalog since it was build during installing dependencies
-      - name: Build packages
-        run: yarn workspaces foreach --verbose --all --topological-dev --exclude @kaoto/camel-catalog run build
-
       # Build lib
       - name: Build @kaoto/kaoto package in lib mode
         run: yarn workspace @kaoto/kaoto run build:lib

.github/workflows/deploy-main.yml

@@ -44,7 +44,7 @@ jobs:
       # Build packages excluding @kaoto/camel-catalog since it was build during installing dependencies
       - name: '🔧 Build packages'
         run: |
-          yarn workspaces foreach --verbose --all --topological-dev --exclude @kaoto/camel-catalog run build
+          yarn workspaces foreach --verbose --all --topological-dev --exclude @kaoto/camel-catalog --exclude @kaoto/xml-schema-ts run build
 
       - name: '🔧 Tar UI Dist'
         shell: bash

.github/workflows/e2e-tests.yml

@@ -45,7 +45,7 @@ jobs:
 
       # Build packages excluding @kaoto/camel-catalog since it was build during installing dependencies
       - name: Build packages
-        run: yarn workspaces foreach --verbose --all --topological-dev --exclude @kaoto/camel-catalog run build
+        run: yarn workspaces foreach --verbose --all --topological-dev --exclude @kaoto/camel-catalog --exclude @kaoto/xml-schema-ts run build
 
       # Build lib
       - name: Build @kaoto/kaoto package in lib mode

.github/workflows/release-pipeline.yml

@@ -105,7 +105,7 @@ jobs:
 
       - name: '🔧 Build packages'
         run: |
-          yarn workspaces foreach --verbose --all --topological-dev --exclude @kaoto/camel-catalog run build
+          yarn workspaces foreach --verbose --all --topological-dev --exclude @kaoto/camel-catalog --exclude @kaoto/xml-schema-ts run build
 
       - name: '🛰️ Login to Container Registry'
         uses: docker/login-action@v3

package.json

@@ -26,7 +26,7 @@
     "typescript": "5.5.4"
   },
   "scripts": {
-    "postinstall": "yarn workspace @kaoto/camel-catalog run build",
+    "postinstall": "yarn workspace @kaoto/camel-catalog run build && yarn workspace @kaoto/xml-schema-ts run build",
     "version": "lerna version",
     "publish": "lerna publish from-package"
   },

packages/ui-tests/stories/datamapper/DataMapperDebugger.stories.tsx

@@ -0,0 +1,18 @@
+import { DataMapperDebugger } from '@kaoto/kaoto/testing';
+import { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+export default {
+  title: 'DataMapper/Debugger',
+  component: DataMapperDebugger,
+} as Meta<typeof DataMapperDebugger>;
+
+const Template: StoryFn<typeof DataMapperDebugger> = (args) => {
+  return <DataMapperDebugger {...args} />;
+};
+
+export const Debugger = Template.bind({});
+Debugger.args = {
+  onUpdateDocument: fn(),
+  onUpdateMappings: fn(),
+};

packages/ui/jest-setup.ts

@@ -17,6 +17,20 @@ Object.defineProperty(window, 'fetch', {
   value: jest.fn(),
 });
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 jest
   .spyOn(global, 'crypto', 'get')
   .mockImplementation(() => ({ getRandomValues: () => [12345678], subtle }) as unknown as Crypto);

packages/ui/package.json

@@ -51,12 +51,17 @@
     "lint:style:fix": "yarn lint:style --fix"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
     "@kaoto-next/uniforms-patternfly": "^0.7.14",
+    "@kaoto/xml-schema-ts": "workspace:*",
     "@kie-tools-core/editor": "0.32.0",
     "@kie-tools-core/notifications": "0.32.0",
     "@types/uuid": "^10.0.0",
+    "@types/xml-name-validator": "^4.0.3",
+    "@visx/shape": "^3.12.0",
     "ajv": "^8.12.0",
     "ajv-formats": "^3.0.0",
+    "chevrotain": "10.5.0",
     "clsx": "^2.1.0",
     "html-to-image": "^1.11.11",
     "lodash": "^4.17.21",
@@ -67,6 +72,8 @@
     "uniforms-bridge-json-schema": "4.0.0-alpha.6",
     "usehooks-ts": "^3.0.0",
     "uuid": "^10.0.0",
+    "xml-formatter": "^3.6.2",
+    "xml-name-validator": "^5.0.0",
     "yaml": "^2.3.2",
     "zustand": "^4.3.9"
   },

packages/ui/src/App.tsx

@@ -1,4 +1,11 @@
+import { VisualizationProvider } from '@patternfly/react-topology';
+import { useMemo } from 'react';
 import { Outlet } from 'react-router-dom';
+import { RenderingProvider } from './components/RenderingAnchor/rendering.provider';
+import { ControllerService } from './components/Visualization/Canvas/controller.service';
+import { RegisterComponents } from './components/registers/RegisterComponents';
+import { RegisterNodeInteractionAddons } from './components/registers/RegisterNodeInteractionAddons';
+import { NodeInteractionAddonProvider } from './components/registers/interactions/node-interaction-addon.provider';
 import { useReload } from './hooks/reload.hook';
 import { Shell } from './layout/Shell';
 import { LocalStorageSettingsAdapter } from './models/settings/localstorage-settings-adapter';
@@ -17,6 +24,7 @@
 
 function App() {
   const ReloadProvider = useReload();
+  const controller = useMemo(() => ControllerService.createController(), []);
   const settingsAdapter = new LocalStorageSettingsAdapter();
   let catalogUrl = CatalogSchemaLoader.DEFAULT_CATALOG_PATH;
   const settingsCatalogUrl = settingsAdapter.getSettings().catalogUrl;
@@ -35,9 +43,19 @@
                 <SchemasLoaderProvider>
                   <CatalogLoaderProvider>
                     <CatalogTilesProvider>
-                      <VisibleFlowsProvider>
-                        <Outlet />
-                      </VisibleFlowsProvider>
+                      <VisualizationProvider controller={controller}>
+                        <VisibleFlowsProvider>
+                          <RenderingProvider>
+                            <RegisterComponents>
+                              <NodeInteractionAddonProvider>
+                                <RegisterNodeInteractionAddons>
+                                  <Outlet />
+                                </RegisterNodeInteractionAddons>
+                              </NodeInteractionAddonProvider>
+                            </RegisterComponents>
+                          </RenderingProvider>
+                        </VisibleFlowsProvider>
+                      </VisualizationProvider>
                     </CatalogTilesProvider>
                   </CatalogLoaderProvider>
                 </SchemasLoaderProvider>

packages/ui/src/assets/kaoto-patterns/kaoto-patterns.json

@@ -0,0 +1,97 @@
+{
+  "kaoto-datamapper" : {
+    "model" : {
+      "kind" : "model",
+      "name" : "kaoto-datamapper",
+      "title" : "Kaoto DataMapper",
+      "description" : "The Kaoto DataMapper maps and transforms data using a set of Camel processors",
+      "deprecated" : false,
+      "label" : "transformation",
+      "javaType" : "org.apache.camel.model.StepDefinition",
+      "supportLevel" : "Stable",
+      "abstract" : false,
+      "input" : true,
+      "output" : true
+    },
+    "properties" : {
+      "description" : {
+        "index" : 0,
+        "kind" : "attribute",
+        "displayName" : "Description",
+        "group" : "common",
+        "required" : false,
+        "type" : "string",
+        "javaType" : "java.lang.String",
+        "deprecated" : false,
+        "autowired" : false,
+        "secret" : false,
+        "description" : "Sets the description of this node"
+      },
+      "disabled" : {
+        "index" : 1,
+        "kind" : "attribute",
+        "displayName" : "Disabled",
+        "group" : "advanced",
+        "label" : "advanced",
+        "required" : false,
+        "type" : "boolean",
+        "javaType" : "java.lang.Boolean",
+        "deprecated" : false,
+        "autowired" : false,
+        "secret" : false,
+        "defaultValue" : false,
+        "description" : "Whether to disable this EIP from the route during build time. Once an EIP has been disabled then it cannot be enabled later at runtime."
+      },
+      "outputs" : {
+        "index" : 2,
+        "kind" : "element",
+        "displayName" : "Outputs",
+        "group" : "common",
+        "required" : true,
+        "type" : "array",
+        "javaType" : "java.util.List",
+        "oneOf" : [ "aggregate", "bean", "choice", "circuitBreaker", "claimCheck", "convertBodyTo", "convertHeaderTo", "convertVariableTo", "delay", "doCatch", "doFinally", "doTry", "dynamicRouter", "enrich", "filter", "idempotentConsumer", "intercept", "interceptFrom", "interceptSendToEndpoint", "kamelet", "loadBalance", "log", "loop", "marshal", "multicast", "onCompletion", "onException", "onFallback", "otherwise", "pausable", "pipeline", "policy", "pollEnrich", "process", "recipientList", "removeHeader", "removeHeaders", "removeProperties", "removeProperty", "removeVariable", "resequence", "resumable", "rollback", "routingSlip", "saga", "sample", "script", "serviceCall", "setBody", "setExchangePattern", "setHeader", "setHeaders", "setProperty", "setVariable", "setVariables", "sort", "split", "step", "stop", "threads", "throttle", "throwException", "to", "toD", "transacted", "transform", "unmarshal", "validate", "when", "whenSkipSendToEndpoint", "wireTap" ],
+        "deprecated" : false,
+        "autowired" : false,
+        "secret" : false
+      }
+    },
+    "exchangeProperties" : {
+      "CamelStepId" : {
+        "index" : 0,
+        "kind" : "exchangeProperty",
+        "displayName" : "Step Id",
+        "label" : "producer",
+        "required" : false,
+        "javaType" : "String",
+        "deprecated" : false,
+        "autowired" : false,
+        "secret" : false,
+        "description" : "The id of the Step EIP"
+      }
+    },
+    "propertiesSchema" : {
+      "title" : "Kaoto DataMapper",
+      "description" : "The Kaoto DataMapper maps and transforms data using a set of Camel processors",
+      "type" : "object",
+      "additionalProperties" : false,
+      "properties" : {
+        "description" : {
+          "type" : "string",
+          "title" : "Description",
+          "description" : "Sets the description of this node",
+          "group" : "common"
+        },
+        "disabled" : {
+          "type" : "boolean",
+          "title" : "Disabled",
+          "description" : "Whether to disable this EIP from the route during build time. Once an EIP has been disabled then it cannot be enabled later at runtime.",
+          "group" : "advanced"
+        }
+      },
+      "$comment" : "steps",
+      "$schema" : "http://json-schema.org/draft-07/schema#",
+      "required" : [ ]
+    }
+  }
+}

packages/ui/src/camel-utils/camel-random-id.test.ts

@@ -1,4 +1,4 @@
-import { getCamelRandomId } from './camel-random-id';
+import { getCamelRandomId, getHexaDecimalRandomId } from './camel-random-id';
 
 describe('camel-random-id', () => {
   it('should return a random number', () => {
@@ -35,4 +35,19 @@ describe('camel-random-id', () => {
 
     expect(getCamelRandomId('route')).toEqual(expect.any(String));
   });
+
+  describe('getHexaDecimalRandomId()', () => {
+    it('should return a random number with Hexadecimal format', async () => {
+      // crypto.getRandomValues() in Jest returns a fixed number 12345678. Replacing with Date.now()
+      jest
+        .spyOn(global, 'crypto', 'get')
+        .mockImplementation(() => ({ getRandomValues: () => [Date.now()] }) as unknown as Crypto);
+      const one = getHexaDecimalRandomId('test');
+      expect(one).toMatch(/test-[0-9a-f]{1,8}/);
+      await new Promise((f) => setTimeout(f, 1));
+      const two = getHexaDecimalRandomId('test');
+      expect(two).toMatch(/test-[0-9a-f]{1,8}/);
+      expect(one).not.toEqual(two);
+    });
+  });
 });

packages/ui/src/camel-utils/camel-random-id.ts

@@ -1,6 +1,14 @@
+const getCryptoObj = () => {
+  return window.crypto || (window as Window & { msCrypto?: Crypto }).msCrypto;
+};
+
 export const getCamelRandomId = (kind: string, length = 4): string => {
-  const cryptoObj = window.crypto || (window as Window & { msCrypto?: Crypto }).msCrypto;
-  const randomNumber = Math.floor(cryptoObj?.getRandomValues(new Uint32Array(1))[0] ?? Date.now());
+  const randomNumber = Math.floor(getCryptoObj()?.getRandomValues(new Uint32Array(1))[0] ?? Date.now());
 
   return `${kind}-${randomNumber.toString(10).slice(0, length)}`;
 };
+
+export const getHexaDecimalRandomId = (prefix: string) => {
+  const randomNumber = getCryptoObj()?.getRandomValues(new Uint32Array(1))[0] ?? Date.now();
+  return `${prefix}-${randomNumber.toString(16)}`;
+};