fix(DataMapper): Cannot resolve metadata once route ID is changed

Fixes: https://github.com/KaotoIO/kaoto-datamapper-integration/issues/234

Just use 32bit pseudo random instead of UUID

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)}`;
+};

packages/ui/src/models/visualization/flows/support/camel-component-default.service.ts

@@ -1,6 +1,6 @@
 import { ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { parse } from 'yaml';
-import { getCamelRandomId } from '../../../../camel-utils/camel-random-id';
+import { getCamelRandomId, getHexaDecimalRandomId } from '../../../../camel-utils/camel-random-id';
 import { DefinedComponent } from '../../../camel-catalog-index';
 import { CatalogKind } from '../../../catalog-kind';
 import { XSLT_COMPONENT_NAME } from '../../../../utils';
@@ -164,7 +164,7 @@ export class CamelComponentDefaultService {
       case 'kaoto-datamapper' as keyof ProcessorDefinition:
         return parse(`
           step:
-            id: ${getCamelRandomId('kaoto-datamapper')}
+            id: ${getHexaDecimalRandomId('kaoto-datamapper')}
             steps:
               - to:
                   id: ${getCamelRandomId('kaoto-datamapper-xslt')}

packages/ui/src/services/datamapper-metadata.service.ts

@@ -19,7 +19,7 @@ export class DataMapperMetadataService {
 
   static getDataMapperMetadataId(vizNode: IVisualizationNode) {
     const model = vizNode.getComponentSchema()?.definition;
-    return `${vizNode.getId()}-${model.id}`; // routeId-stepId
+    return model.id;
   }
 
   static async initializeDataMapperMetadata(