fix(canvas): Missing Kamelet icons in the from node

Currently, when replacing the `from` node with a source `Kamelet` adds it incorrectly as it doesn't prefix the URI with the `kamelet` string.

The fix is to add `kamelet:` prefix to `Kamelets` nodes

Fixes: #409

packages/ui/src/components/Visualization/Custom/ItemReplaceNode.tsx

@@ -17,13 +17,10 @@ export const ItemReplaceNode: FunctionComponent<IDataTestID> = (props) => {
     if (!vizNode || !entitiesContext) return;
 
     /** Find compatible components */
-    const compatibleNodes = entitiesContext.camelResource.getCompatibleComponents(
-      AddStepMode.ReplaceStep,
-      vizNode.data,
-    );
+    const catalogFilter = entitiesContext.camelResource.getCompatibleComponents(AddStepMode.ReplaceStep, vizNode.data);
 
     /** Open Catalog modal, filtering the compatible nodes */
-    const definedComponent = await catalogModalContext?.getNewComponent(compatibleNodes);
+    const definedComponent = await catalogModalContext?.getNewComponent(catalogFilter);
     if (!definedComponent) return;
 
     /** Add new node to the entities */

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

@@ -14,9 +14,14 @@ export class CamelComponentDefaultService {
    * Get the default definition for the `from` component
    */
   static getDefaultFromDefinitionValue(definedComponent: DefinedComponent): ProcessorDefinition {
+    let uri = definedComponent.name;
+    if (definedComponent.type === CatalogKind.Kamelet) {
+      uri = this.getPrefixedKameletName(definedComponent.name);
+    }
+
     return parse(`
       id: ${getCamelRandomId('from')}
-      uri: "${definedComponent.name}"
+      uri: "${uri}"
       parameters: {}
     `);
   }
@@ -51,7 +56,7 @@ export class CamelComponentDefaultService {
       default:
         return parse(`
           to:
-            uri: "kamelet:${kameletName}"
+            uri: "${this.getPrefixedKameletName(kameletName)}"
             id: ${getCamelRandomId('to')}
         `);
     }
@@ -99,4 +104,8 @@ export class CamelComponentDefaultService {
         };
     }
   }
+
+  private static getPrefixedKameletName(kameletName: string): string {
+    return `kamelet:${kameletName}`;
+  }
 }