feat(catalog): Add Runtime selector

* Context
Adapt UI to accommodate the newly generated catalog library

fix: #1109

packages/camel-catalog/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@kaoto/camel-catalog",
+  "name": "@kaoto/camel-catalog-plugin",
   "version": "2.1.0-dev",
   "type": "commonjs",
   "description": "Camel Catalog and schemas for Kaoto",

packages/catalog-generator/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@kaoto/catalog-generator",
+  "name": "@kaoto/camel-catalog",
   "version": "2.1.0-dev",
   "type": "commonjs",
   "description": "Camel Catalog and schemas for Kaoto",
@@ -14,7 +14,7 @@
     "./index.json": "./dist/camel-catalog/index.json",
     "./types": "./dist/types/index.ts",
     "./package.json": "./package.json",
-    "./*.json": "./dist/*.json"
+    "./*.json": "./dist/camel-catalog/*.json"
   },
   "scripts": {
     "build": "yarn clean && yarn build:mvn && yarn build:default:catalog && yarn build:ts",

packages/ui-tests/.storybook/main.ts

@@ -26,9 +26,9 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
-  // Configures the static asset folder in Storybook 
-  // Requires the camel-catalog build
-  staticDirs: [{ from: '../../camel-catalog/dist', to: 'camel-catalog' }],
+  // Configures the static asset folder in> Storybook
+  // Requires the catalog-generator build
+  staticDirs: [{ from: '../../catalog-generator/dist/camel-catalog', to: 'camel-catalog' }],
   typescript: {
     check: false,
     checkOptions: {},

packages/ui-tests/stories/canvas/Canvas.stories.tsx

@@ -7,6 +7,7 @@ import {
   EntitiesProvider,
   KameletVisualEntity,
   PipeVisualEntity,
+  RuntimeProvider,
   SchemasLoaderProvider,
   SourceCodeProvider,
   VisibleFLowsContextResult,
@@ -48,13 +49,15 @@ const emptyPipeEntity = new PipeVisualEntity(emptyPipeJson);
 const ContextDecorator = (Story: StoryFn) => (
   <SourceCodeProvider>
     <EntitiesProvider>
-      <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-        <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-          <CatalogTilesProvider>
-            <Story />
-          </CatalogTilesProvider>
-        </CatalogLoaderProvider>
-      </SchemasLoaderProvider>
+      <RuntimeProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+        <SchemasLoaderProvider>
+          <CatalogLoaderProvider>
+            <CatalogTilesProvider>
+              <Story />
+            </CatalogTilesProvider>
+          </CatalogLoaderProvider>
+        </SchemasLoaderProvider>
+      </RuntimeProvider>
     </EntitiesProvider>
   </SourceCodeProvider>
 );

packages/ui-tests/stories/canvas/ContextToolbar.stories.tsx

@@ -4,6 +4,7 @@ import {
   CatalogTilesProvider,
   ContextToolbar,
   EntitiesProvider,
+  RuntimeProvider,
   SchemasLoaderProvider,
   SourceCodeApiContext,
   SourceCodeProvider,
@@ -20,15 +21,17 @@ const EntitiesContextDecorator = (Story: StoryFn) => {
   return (
     <SourceCodeProvider>
       <EntitiesProvider>
-        <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-          <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-            <CatalogTilesProvider>
-              <VisibleFlowsProvider>
-                <Story />
-              </VisibleFlowsProvider>
-            </CatalogTilesProvider>
-          </CatalogLoaderProvider>
-        </SchemasLoaderProvider>
+        <RuntimeProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+          <SchemasLoaderProvider>
+            <CatalogLoaderProvider>
+              <CatalogTilesProvider>
+                <VisibleFlowsProvider>
+                  <Story />
+                </VisibleFlowsProvider>
+              </CatalogTilesProvider>
+            </CatalogLoaderProvider>
+          </SchemasLoaderProvider>
+        </RuntimeProvider>
       </EntitiesProvider>
     </SourceCodeProvider>
   );

packages/ui-tests/stories/canvas/NewBeanModal.stories.tsx

@@ -1,16 +1,24 @@
 import { Meta, StoryFn } from '@storybook/react';
-import { CatalogLoaderProvider, CatalogSchemaLoader, SchemasLoaderProvider, NewBeanModal } from '@kaoto/kaoto/testing';
+import {
+  CatalogLoaderProvider,
+  CatalogSchemaLoader,
+  SchemasLoaderProvider,
+  NewBeanModal,
+  RuntimeProvider,
+} from '@kaoto/kaoto/testing';
 
 export default {
   title: 'Canvas/NewBeanModal',
   component: NewBeanModal,
   decorators: [
     (Story: StoryFn) => (
-      <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-        <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-          <Story />
-        </CatalogLoaderProvider>
-      </SchemasLoaderProvider>
+      <RuntimeProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+        <SchemasLoaderProvider>
+          <CatalogLoaderProvider>
+            <Story />
+          </CatalogLoaderProvider>
+        </SchemasLoaderProvider>
+      </RuntimeProvider>
     ),
   ],
 } as Meta<typeof NewBeanModal>;

packages/ui-tests/stories/metadataEditor/DataformatEditor.stories.tsx

@@ -1,14 +1,15 @@
 import { DataFormatEditor, MetadataEditor } from '@kaoto/kaoto';
 import {
+  CanvasNode,
   CatalogLoaderProvider,
   CatalogSchemaLoader,
   IVisualizationNode,
   KaotoSchemaDefinition,
+  RuntimeProvider,
   SchemasLoaderProvider,
   VisualComponentSchema,
 } from '@kaoto/kaoto/testing';
 import { Meta, StoryFn } from '@storybook/react';
-import { CanvasNode } from './../canvas.models';
 
 const visualComponentSchema: VisualComponentSchema = {
   title: 'My Node',
@@ -37,11 +38,13 @@ const mockNode: CanvasNode = {
 };
 
 const EntitiesContextDecorator = (Story: StoryFn) => (
-  <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-    <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-      <Story />
-    </CatalogLoaderProvider>
-  </SchemasLoaderProvider>
+  <RuntimeProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+    <SchemasLoaderProvider>
+      <CatalogLoaderProvider>
+        <Story />
+      </CatalogLoaderProvider>
+    </SchemasLoaderProvider>
+  </RuntimeProvider>
 );
 
 export default {

packages/ui-tests/stories/metadataEditor/ExpressionEditor.stories.tsx

@@ -1,14 +1,16 @@
-import { MetadataEditor, StepExpressionEditor } from '@kaoto/kaoto';
 import {
+  CanvasNode,
   CatalogLoaderProvider,
   CatalogSchemaLoader,
   IVisualizationNode,
   KaotoSchemaDefinition,
+  MetadataEditor,
+  RuntimeProvider,
   SchemasLoaderProvider,
+  StepExpressionEditor,
   VisualComponentSchema,
 } from '@kaoto/kaoto/testing';
 import { Meta, StoryFn } from '@storybook/react';
-import { CanvasNode } from './../canvas.models';
 
 const visualComponentSchema: VisualComponentSchema = {
   title: 'My Node',
@@ -36,11 +38,13 @@ const mockNode: CanvasNode = {
 };
 
 const EntitiesContextDecorator = (Story: StoryFn) => (
-  <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-    <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-      <Story />
-    </CatalogLoaderProvider>
-  </SchemasLoaderProvider>
+  <RuntimeProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+    <SchemasLoaderProvider>
+      <CatalogLoaderProvider>
+        <Story />
+      </CatalogLoaderProvider>
+    </SchemasLoaderProvider>
+  </RuntimeProvider>
 );
 
 export default {

packages/ui/scripts/copy-camel-catalog-files.js

@@ -1,16 +1,22 @@
 import { copyFileSync, existsSync, mkdirSync } from 'node:fs';
-import { resolve, join, basename } from 'node:path';
+import { basename, dirname, relative, resolve } from 'node:path';
 
 /**
  * Copy the built Kaoto Camel Catalog files into the assets/camel-catalog folder
  */
 async function copyCamelCatalogFiles(destinationFolder) {
   const { getCamelCatalogFiles } = await import('./get-camel-catalog-files.js');
-  const camelCatalogFiles = getCamelCatalogFiles();
+  const { basePath, files: camelCatalogFiles } = getCamelCatalogFiles();
 
   camelCatalogFiles.forEach((file) => {
-    const dest = resolve(join(destinationFolder, basename(file)));
+    const relativePath = relative(basePath, file);
+    const destDir = resolve(destinationFolder, dirname(relativePath));
 
+    if (!existsSync(destDir)) {
+      mkdirSync(destDir, { recursive: true });
+    }
+
+    const dest = resolve(destDir, basename(file));
     console.info('\t', `Copying '${file}' to '${dest}'`);
 
     copyFileSync(file, dest);

packages/ui/scripts/get-camel-catalog-files.js

@@ -1,4 +1,4 @@
-import { readdirSync } from 'node:fs';
+import { readdirSync, existsSync, statSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { dirname, join } from 'node:path';
 import { normalizePath } from 'vite';
@@ -38,10 +38,25 @@ export const getCamelCatalogFiles = () => {
     throw new Error(message.join('\n\n'));
   }
 
-  /** List all the JSON files in the Camel Catalog folder */
-  const jsonFiles = readdirSync(camelCatalogPath)
-    .filter((file) => file.endsWith('.json'))
-    .map((file) => normalizePath(join(camelCatalogPath, file)));
+  /** Recursively list all the JSON files in the Camel Catalog folder and subfolders */
+  const jsonFiles = [];
+  getFilesRecursively(camelCatalogPath, jsonFiles);
 
-  return jsonFiles;
+  return { basePath: camelCatalogPath, files: jsonFiles.filter((file) => file.endsWith('.json')) };
 };
+
+function getFilesRecursively(source, files) {
+  const exists = existsSync(source);
+  const stats = exists && statSync(source);
+  const isDirectory = exists && stats.isDirectory();
+
+  if (isDirectory) {
+    const directoryFiles = readdirSync(source);
+
+    for (const file of directoryFiles) {
+      getFilesRecursively(join(source, file), files);
+    }
+  } else {
+    files.push(source);
+  }
+}

packages/ui/src/App.tsx

@@ -1,27 +1,32 @@
 import { Outlet } from 'react-router-dom';
 import { Shell } from './layout/Shell';
-import { CatalogTilesProvider } from './providers/catalog-tiles.provider';
-import { CatalogLoaderProvider } from './providers/catalog.provider';
-import { EntitiesProvider } from './providers/entities.provider';
-import { SchemasLoaderProvider } from './providers/schemas.provider';
-import { SourceCodeProvider } from './providers/source-code.provider';
+import {
+  CatalogLoaderProvider,
+  CatalogTilesProvider,
+  EntitiesProvider,
+  RuntimeProvider,
+  SchemasLoaderProvider,
+  SourceCodeProvider,
+  VisibleFlowsProvider,
+} from './providers';
 import { CatalogSchemaLoader } from './utils/catalog-schema-loader';
-import { VisibleFlowsProvider } from './providers';
 
 function App() {
   return (
     <SourceCodeProvider>
       <EntitiesProvider>
         <Shell>
-          <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-            <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-              <CatalogTilesProvider>
-                <VisibleFlowsProvider>
-                  <Outlet />
-                </VisibleFlowsProvider>
-              </CatalogTilesProvider>
-            </CatalogLoaderProvider>
-          </SchemasLoaderProvider>
+          <RuntimeProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+            <SchemasLoaderProvider>
+              <CatalogLoaderProvider>
+                <CatalogTilesProvider>
+                  <VisibleFlowsProvider>
+                    <Outlet />
+                  </VisibleFlowsProvider>
+                </CatalogTilesProvider>
+              </CatalogLoaderProvider>
+            </SchemasLoaderProvider>
+          </RuntimeProvider>
         </Shell>
       </EntitiesProvider>
     </SourceCodeProvider>