feat(kamelets): Load Kamelet boundaries catalog

This commit loads the Kamelet boundaries catalog, which include
kamelet:source and kamelet:sink.

Relates to: #110

packages/ui/jest-setup.ts

@@ -4,6 +4,11 @@ import { FilterDOMPropsKeys, filterDOMProps } from 'uniforms';
 
 filterDOMProps.register('inputRef' as FilterDOMPropsKeys, 'placeholder' as FilterDOMPropsKeys);
 
+Object.defineProperty(window, 'fetch', {
+  writable: true,
+  value: jest.fn(),
+});
+
 jest
   .spyOn(global, 'crypto', 'get')
   .mockImplementation(() => ({ getRandomValues: () => [12345678] }) as unknown as Crypto);
@@ -18,3 +23,9 @@ jest.spyOn(console, 'warn').mockImplementation((...args) => {
 
   console.log(...args);
 });
+
+const fetchMock = jest.spyOn(window, 'fetch');
+
+beforeEach(() => {
+  fetchMock.mockResolvedValue(null as unknown as Response);
+});

packages/ui/jest.config.ts

@@ -33,6 +33,8 @@ export default {
     '!src/**/*.models.ts',
     // Ignore stub files
     '!src/**/stubs/*.ts',
+    // Ignore icon resolver
+    '!src/**/node-icon-resolver.ts',
   ],
 
   // The directory where Jest should output its coverage files

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

@@ -150,6 +150,48 @@ describe('kameletToTile', () => {
     expect(tile.tags).toEqual(['source']);
   });
 
+  it('should use the selected CatalogKind.Kamelet by default', () => {
+    const kameletDef = {
+      metadata: {
+        labels: {
+          'camel.apache.org/kamelet.type': 'source',
+        },
+        annotations: {},
+      },
+      spec: {
+        definition: {
+          title: 'My Kamelet',
+          description: 'My Kamelet Description',
+        },
+      },
+    } as IKameletDefinition;
+
+    const tile = kameletToTile(kameletDef);
+
+    expect(tile.type).toEqual(CatalogKind.Kamelet);
+  });
+
+  it('should use the selected CatalogKind', () => {
+    const kameletDef = {
+      metadata: {
+        labels: {
+          'camel.apache.org/kamelet.type': 'source',
+        },
+        annotations: {},
+      },
+      spec: {
+        definition: {
+          title: 'My Kamelet',
+          description: 'My Kamelet Description',
+        },
+      },
+    } as IKameletDefinition;
+
+    const tile = kameletToTile(kameletDef, CatalogKind.KameletBoundary);
+
+    expect(tile.type).toEqual(CatalogKind.KameletBoundary);
+  });
+
   it('should populate the version for annotations', () => {
     const kameletDef = {
       metadata: {

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

@@ -47,7 +47,10 @@ export const camelProcessorToTile = (processorDef: ICamelProcessorDefinition): I
   };
 };
 
-export const kameletToTile = (kameletDef: IKameletDefinition): ITile => {
+export const kameletToTile = (
+  kameletDef: IKameletDefinition,
+  type: CatalogKind.Kamelet | CatalogKind.KameletBoundary = CatalogKind.Kamelet,
+): ITile => {
   const headerTags: string[] = [];
   if (kameletDef.metadata.annotations['camel.apache.org/kamelet.support.level']) {
     headerTags.push(kameletDef.metadata.annotations['camel.apache.org/kamelet.support.level']);
@@ -64,7 +67,7 @@ export const kameletToTile = (kameletDef: IKameletDefinition): ITile => {
   }
 
   return {
-    type: CatalogKind.Kamelet,
+    type,
     name: kameletDef.metadata.name,
     title: kameletDef.spec.definition.title,
     description: kameletDef.spec.definition.description,

packages/ui/src/models/camel-catalog-index.ts

@@ -16,6 +16,7 @@ export interface Catalogs {
   languages: CatalogEntry;
   dataformats: CatalogEntry;
   kamelets: CatalogEntry;
+  'kamelets-boundaries': CatalogEntry;
   patterns: CatalogEntry;
 }
 
@@ -49,4 +50,5 @@ export interface ComponentsCatalog {
   [CatalogKind.Language]?: Record<string, ICamelLanguageDefinition>;
   [CatalogKind.Dataformat]?: Record<string, ICamelDataformatDefinition>;
   [CatalogKind.Kamelet]?: Record<string, IKameletDefinition>;
+  [CatalogKind.KameletBoundary]?: Record<string, IKameletDefinition>;
 }

packages/ui/src/models/catalog-kind.ts

@@ -5,4 +5,5 @@ export const enum CatalogKind {
   Language = 'language',
   Dataformat = 'dataformat',
   Kamelet = 'kamelet',
+  KameletBoundary = 'kamelet-boundary',
 }

packages/ui/src/providers/catalog-tiles.provider.test.tsx

@@ -0,0 +1,102 @@
+import componentsCatalog from '@kaoto-next/camel-catalog/camel-catalog-aggregate-components.json';
+import patternsCatalog from '@kaoto-next/camel-catalog/camel-catalog-aggregate-patterns.json';
+import kameletsCatalog from '@kaoto-next/camel-catalog/kamelets-aggregate.json';
+import kameletsBoundariesCatalog from '@kaoto-next/camel-catalog/kamelets-boundaries.json';
+import { act, render, screen } from '@testing-library/react';
+import { camelComponentToTile, camelProcessorToTile, kameletToTile } from '../camel-utils';
+import { CatalogKind, ICamelComponentDefinition, ICamelProcessorDefinition, IKameletDefinition } from '../models';
+import { CamelCatalogService } from '../models/visualization/flows/camel-catalog.service';
+import { CatalogTilesProvider } from './catalog-tiles.provider';
+
+jest.mock('../camel-utils', () => {
+  const actual = jest.requireActual('../camel-utils');
+
+  return {
+    ...actual,
+    camelComponentToTile: jest.fn(),
+    camelProcessorToTile: jest.fn(),
+    kameletToTile: jest.fn(),
+  };
+});
+
+describe('CatalogTilesProvider', () => {
+  let getCatalogByKeySpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    getCatalogByKeySpy = jest.spyOn(CamelCatalogService, 'getCatalogByKey');
+    CamelCatalogService.setCatalogKey(
+      CatalogKind.Component,
+      componentsCatalog as unknown as Record<string, ICamelComponentDefinition>,
+    );
+    CamelCatalogService.setCatalogKey(
+      CatalogKind.Pattern,
+      patternsCatalog as unknown as Record<string, ICamelProcessorDefinition>,
+    );
+    CamelCatalogService.setCatalogKey(
+      CatalogKind.Kamelet,
+      kameletsCatalog as unknown as Record<string, IKameletDefinition>,
+    );
+    CamelCatalogService.setCatalogKey(
+      CatalogKind.KameletBoundary,
+      kameletsBoundariesCatalog as unknown as Record<string, IKameletDefinition>,
+    );
+  });
+
+  it('should render children', async () => {
+    await act(async () => {
+      render(
+        <CatalogTilesProvider>
+          <span data-testid="tiles-loaded">Loaded</span>
+        </CatalogTilesProvider>,
+      );
+    });
+
+    expect(screen.getByTestId('tiles-loaded')).toBeInTheDocument();
+  });
+
+  it('should query the catalog to build the tiles', async () => {
+    await act(async () => {
+      render(
+        <CatalogTilesProvider>
+          <span data-testid="tiles-loaded">Loaded</span>
+        </CatalogTilesProvider>,
+      );
+    });
+
+    expect(getCatalogByKeySpy).toHaveBeenCalledTimes(4);
+    expect(getCatalogByKeySpy).toHaveBeenCalledWith(CatalogKind.Component);
+    expect(getCatalogByKeySpy).toHaveBeenCalledWith(CatalogKind.Pattern);
+    expect(getCatalogByKeySpy).toHaveBeenCalledWith(CatalogKind.Kamelet);
+    expect(getCatalogByKeySpy).toHaveBeenCalledWith(CatalogKind.KameletBoundary);
+  });
+
+  it('should build the tiles', async () => {
+    await act(async () => {
+      render(
+        <CatalogTilesProvider>
+          <span data-testid="tiles-loaded">Loaded</span>
+        </CatalogTilesProvider>,
+      );
+    });
+
+    expect(camelComponentToTile).toHaveBeenCalled();
+    expect(camelProcessorToTile).toHaveBeenCalled();
+    expect(kameletToTile).toHaveBeenCalled();
+  });
+
+  it('should avoid building the tiles if the catalog is empty', async () => {
+    CamelCatalogService.clearCatalogs();
+
+    await act(async () => {
+      render(
+        <CatalogTilesProvider>
+          <span data-testid="tiles-loaded">Loaded</span>
+        </CatalogTilesProvider>,
+      );
+    });
+
+    expect(camelComponentToTile).not.toHaveBeenCalled();
+    expect(camelProcessorToTile).not.toHaveBeenCalled();
+    expect(kameletToTile).not.toHaveBeenCalled();
+  });
+});

packages/ui/src/providers/catalog-tiles.provider.tsx

@@ -31,6 +31,9 @@ export const CatalogTilesProvider: FunctionComponent<PropsWithChildren> = (props
     Object.values(catalogService.getCatalogByKey(CatalogKind.Kamelet) ?? {}).forEach((kamelet) => {
       combinedTiles.push(kameletToTile(kamelet));
     });
+    Object.values(catalogService.getCatalogByKey(CatalogKind.KameletBoundary) ?? {}).forEach((kamelet) => {
+      combinedTiles.push(kameletToTile(kamelet, CatalogKind.KameletBoundary));
+    });
 
     return combinedTiles;
   }, [catalogService]);