refactor(iconUrl): move icon fetching from the canvas layer to the mapping layer

Author: shivamG640

packages/ui/src/camel-utils/camel-to-tile.adapter.test.ts

@@ -14,7 +14,7 @@ import {
 } from './camel-to-tile.adapter';
 
 describe('camelComponentToTile', () => {
-  it('should return a tile with the correct type', () => {
+  it('should return a tile with the correct type', async () => {
     const componentDef = {
       component: {
         name: 'my-component',
@@ -23,80 +23,79 @@ describe('camelComponentToTile', () => {
       },
     } as ICamelComponentDefinition;
 
-    const tile = camelComponentToTile(componentDef);
+    const tile = await camelComponentToTile(componentDef);
 
-    expect(tile.type).toEqual(CatalogKind.Component);
     expect(tile.name).toEqual('my-component');
     expect(tile.description).toEqual('My Component Description');
   });
 
-  it('should populate the headerTags', () => {
+  it('should populate the headerTags', async () => {
     const componentDef = {
       component: {
         supportLevel: 'Preview',
       },
     } as ICamelComponentDefinition;
 
-    const tile = camelComponentToTile(componentDef);
+    const tile = await camelComponentToTile(componentDef);
 
     expect(tile.headerTags).toEqual(['Component', 'Preview']);
   });
 
-  it('should populate the tags and version', () => {
+  it('should populate the tags and version', async () => {
     const componentDef = {
       component: {
         label: 'label1,label2',
         version: '4.0.0',
       },
     } as ICamelComponentDefinition;
 
-    const tile = camelComponentToTile(componentDef);
+    const tile = await camelComponentToTile(componentDef);
 
     expect(tile.tags).toEqual(['label1', 'label2']);
     expect(tile.version).toEqual('4.0.0');
   });
 
-  it('should populate the provider', () => {
+  it('should populate the provider', async () => {
     const componentDef = {
       component: {
         provider: 'my-provider',
       },
     } as ICamelComponentDefinition;
 
-    const tile = camelComponentToTile(componentDef);
+    const tile = await camelComponentToTile(componentDef);
 
     expect(tile.provider).toEqual('my-provider');
   });
 
-  it('should populate tags with `consumerOnly` and `producerOnly` when applicable', () => {
+  it('should populate tags with `consumerOnly` and `producerOnly` when applicable', async () => {
     const componentDef = {
       component: {
         consumerOnly: true,
         producerOnly: true,
       },
     } as ICamelComponentDefinition;
 
-    const tile = camelComponentToTile(componentDef);
+    const tile = await camelComponentToTile(componentDef);
 
     expect(tile.tags).toEqual(['consumerOnly', 'producerOnly']);
   });
 
-  it('should replace the supportLevel header tag if the component is deprecated', () => {
+  it('should replace the supportLevel header tag if the component is deprecated', async () => {
     const componentDef = {
       component: {
         supportLevel: 'Stable',
         deprecated: true,
       },
     } as ICamelComponentDefinition;
 
-    const tile = camelComponentToTile(componentDef);
+    const tile = await camelComponentToTile(componentDef);
 
     expect(tile.headerTags).toEqual(['Component', 'Deprecated']);
   });
 });
 
 describe('camelProcessorToTile', () => {
-  it('should return a tile with the correct type', () => {
+  it('should return a tile with the correct type', async () => {
     const processorDef = {
       model: {
         name: 'my-processor',
@@ -106,39 +105,38 @@ describe('camelProcessorToTile', () => {
       },
     } as ICamelProcessorDefinition;
 
-    const tile = camelProcessorToTile(processorDef);
+    const tile = await camelProcessorToTile(processorDef);
 
-    expect(tile.type).toEqual(CatalogKind.Processor);
     expect(tile.name).toEqual('my-processor');
     expect(tile.description).toEqual('My Processor Description');
   });
 
-  it('should populate the headerTags', () => {
+  it('should populate the headerTags', async () => {
     const processorDef = {
       model: {
         supportLevel: 'Preview',
         label: 'label1,label2',
       },
     } as ICamelProcessorDefinition;
 
-    const tile = camelProcessorToTile(processorDef);
+    const tile = await camelProcessorToTile(processorDef);
 
     expect(tile.headerTags).toEqual(['Processor', 'Preview']);
   });
 
-  it('should populate the tags', () => {
+  it('should populate the tags', async () => {
     const processorDef = {
       model: {
         label: 'label1,label2',
       },
     } as ICamelProcessorDefinition;
 
-    const tile = camelProcessorToTile(processorDef);
+    const tile = await camelProcessorToTile(processorDef);
 
     expect(tile.tags).toEqual(['label1', 'label2']);
   });
 
-  it('should populate the provider', () => {
+  it('should populate the provider', async () => {
     const processorDef = {
       model: {
         name: 'my-processor',
@@ -149,14 +147,14 @@ describe('camelProcessorToTile', () => {
       },
     } as ICamelProcessorDefinition;
 
-    const tile = camelProcessorToTile(processorDef);
+    const tile = await camelProcessorToTile(processorDef);
 
     expect(tile.provider).toEqual('my-provider');
   });
 });
 
 describe('camelEntityToTile', () => {
-  it('should return a tile with the correct type', () => {
+  it('should return a tile with the correct type', async () => {
     const processorDef = {
       model: {
         name: 'my-entity',
@@ -166,16 +164,15 @@ describe('camelEntityToTile', () => {
       },
     } as ICamelProcessorDefinition;
 
-    const tile = camelEntityToTile(processorDef);
+    const tile = await camelEntityToTile(processorDef);
 
-    expect(tile.type).toEqual(CatalogKind.Entity);
     expect(tile.name).toEqual('my-entity');
     expect(tile.description).toEqual('My Entity Description');
   });
 });
 
 describe('citrusComponentToTile', () => {
-  it('should return a tile with the correct type', () => {
+  it('should return a tile with the correct type', async () => {
     const componentDef = {
       kind: CatalogKind.TestAction,
       name: 'my-action',
@@ -184,31 +181,29 @@ describe('citrusComponentToTile', () => {
       description: 'This is the description',
     } as ICitrusComponentDefinition;
 
-    const tile = citrusComponentToTile(componentDef);
+    const tile = await citrusComponentToTile(componentDef);
 
-    expect(tile.type).toEqual(CatalogKind.TestAction);
     expect(tile.name).toEqual('my-action');
     expect(tile.title).toEqual('My Action');
     expect(tile.description).toEqual('This is the description');
   });
 
-  it('should return a tile with defaults', () => {
+  it('should return a tile with defaults', async () => {
     const componentDef = {
       kind: CatalogKind.TestContainer,
       name: 'my-container',
     } as ICitrusComponentDefinition;
 
-    const tile = citrusComponentToTile(componentDef);
+    const tile = await citrusComponentToTile(componentDef);
 
-    expect(tile.type).toEqual(CatalogKind.TestContainer);
     expect(tile.name).toEqual('my-container');
     expect(tile.title).toEqual('my-container');
     expect(tile.description).toBeUndefined();
   });
 });
 
 describe('kameletToTile', () => {
-  it('should return a tile with the correct type', () => {
+  it('should return a tile with the correct type', async () => {
     const kameletDef = {
       metadata: {
         name: 'my-kamelet',
@@ -227,14 +222,13 @@ describe('kameletToTile', () => {
       },
     } as IKameletDefinition;
 
-    const tile = kameletToTile(kameletDef);
+    const tile = await kameletToTile(kameletDef);
 
-    expect(tile.type).toEqual(CatalogKind.Kamelet);
     expect(tile.name).toEqual('my-kamelet');
     expect(tile.description).toEqual('My Kamelet Description');
   });
 
-  it('should populate the tags for type', () => {
+  it('should populate the tags for type', async () => {
     const kameletDef = {
       metadata: {
         labels: {
@@ -250,12 +244,12 @@ describe('kameletToTile', () => {
       },
     } as IKameletDefinition;
 
-    const tile = kameletToTile(kameletDef);
+    const tile = await kameletToTile(kameletDef);
 
     expect(tile.tags).toEqual(['source']);
   });
 
-  it('should use the selected CatalogKind.Kamelet by default', () => {
+  it('should use the selected CatalogKind.Kamelet by default', async () => {
     const kameletDef = {
       metadata: {
         labels: {
@@ -271,12 +265,12 @@ describe('kameletToTile', () => {
       },
     } as IKameletDefinition;
 
-    const tile = kameletToTile(kameletDef);
+    const tile = await kameletToTile(kameletDef);
 
     expect(tile.type).toEqual(CatalogKind.Kamelet);
   });
 
-  it('should populate the version for annotations', () => {
+  it('should populate the version for annotations', async () => {
     const kameletDef = {
       metadata: {
         labels: {},
@@ -292,12 +286,12 @@ describe('kameletToTile', () => {
       },
     } as IKameletDefinition;
 
-    const tile = kameletToTile(kameletDef);
+    const tile = await kameletToTile(kameletDef);
 
     expect(tile.version).toEqual('1.0.0');
   });
 
-  it('should populate the headerTags', () => {
+  it('should populate the headerTags', async () => {
     const kameletDef = {
       metadata: {
         annotations: {
@@ -313,7 +307,7 @@ describe('kameletToTile', () => {
       },
     } as IKameletDefinition;
 
-    const tile = kameletToTile(kameletDef);
+    const tile = await kameletToTile(kameletDef);
 
     expect(tile.headerTags).toEqual(['Kamelet', 'Preview']);
   });

packages/ui/src/camel-utils/camel-to-tile.adapter.ts

@@ -1,4 +1,5 @@
 import { ITile } from '../components/Catalog/Catalog.models';
+import { getIconRequest } from '../components/IconResolver/getIconRequest';
 import {
   CatalogKind,
   ICamelComponentDefinition,
@@ -7,7 +8,7 @@ import {
   IKameletDefinition,
 } from '../models';
 
-export const camelComponentToTile = (componentDef: ICamelComponentDefinition): ITile => {
+export const camelComponentToTile = async (componentDef: ICamelComponentDefinition): Promise<ITile> => {
   const { name, title, description, supportLevel, label, provider, version } = componentDef.component;
   const headerTags: string[] = ['Component'];
   const tags: string[] = [];
@@ -27,6 +28,8 @@ export const camelComponentToTile = (componentDef: ICamelComponentDefinition): I
     tags.push('producerOnly');
   }
 
+  const { icon: iconUrl } = await getIconRequest(CatalogKind.Component, name);
+
   return {
     type: CatalogKind.Component,
     name,
@@ -36,10 +39,11 @@ export const camelComponentToTile = (componentDef: ICamelComponentDefinition): I
     tags,
     provider,
     version,
+    iconUrl,
   };
 };
 
-export const camelProcessorToTile = (processorDef: ICamelProcessorDefinition): ITile => {
+export const camelProcessorToTile = async (processorDef: ICamelProcessorDefinition): Promise<ITile> => {
   const { name, title, description, supportLevel, label, provider } = processorDef.model;
   const headerTags: string[] = ['Processor'];
   const tags = label.split(',');
@@ -48,6 +52,8 @@ export const camelProcessorToTile = (processorDef: ICamelProcessorDefinition): I
     headerTags.push(supportLevel);
   }
 
+  const { icon: iconUrl } = await getIconRequest(CatalogKind.Processor, name);
+
   return {
     type: CatalogKind.Processor,
     name,
@@ -56,18 +62,22 @@ export const camelProcessorToTile = (processorDef: ICamelProcessorDefinition): I
     headerTags,
     tags,
     provider,
+    iconUrl,
   };
 };
 
-export const camelEntityToTile = (processorDef: ICamelProcessorDefinition): ITile => {
-  const entityTile = camelProcessorToTile(processorDef);
+export const camelEntityToTile = async (processorDef: ICamelProcessorDefinition): Promise<ITile> => {
+  const entityTile = await camelProcessorToTile(processorDef);
   entityTile.type = CatalogKind.Entity;
   entityTile.headerTags = ['Entity'];
 
+  const { icon: iconUrl } = await getIconRequest(CatalogKind.Entity, entityTile.name);
+  entityTile.iconUrl = iconUrl;
+
   return entityTile;
 };
 
-export const kameletToTile = (kameletDef: IKameletDefinition): ITile => {
+export const kameletToTile = async (kameletDef: IKameletDefinition): Promise<ITile> => {
   const headerTags: string[] = ['Kamelet'];
   if (kameletDef.metadata.annotations['camel.apache.org/kamelet.support.level']) {
     headerTags.push(kameletDef.metadata.annotations['camel.apache.org/kamelet.support.level']);
@@ -83,6 +93,8 @@ export const kameletToTile = (kameletDef: IKameletDefinition): ITile => {
     version = kameletDef.metadata.annotations['camel.apache.org/catalog.version'];
   }
 
+  const { icon: iconUrl } = await getIconRequest(CatalogKind.Kamelet, kameletDef.metadata.name);
+
   return {
     type: CatalogKind.Kamelet,
     name: kameletDef.metadata.name,
@@ -91,15 +103,18 @@ export const kameletToTile = (kameletDef: IKameletDefinition): ITile => {
     headerTags,
     tags,
     version,
+    iconUrl,
   };
 };
 
-export const citrusComponentToTile = (componentDefinition: ICitrusComponentDefinition): ITile => {
+export const citrusComponentToTile = async (componentDefinition: ICitrusComponentDefinition): Promise<ITile> => {
   const { kind, version, name, title, description } = componentDefinition;
 
   const headerTags: string[] = [kind];
   const tags: string[] = [];
 
+  const { icon: iconUrl } = await getIconRequest(CatalogKind.TestAction, name);
+
   return {
     type: kind,
     name: name,
@@ -108,5 +123,6 @@ export const citrusComponentToTile = (componentDefinition: ICitrusComponentDefin
     headerTags,
     tags,
     version,
+    iconUrl,
   };
 };