feature(catalog): Allow consumers to update Camel Catalog URL

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

@@ -1,5 +1,6 @@
 import {
   CatalogLoaderProvider,
+  CatalogSchemaLoader,
   CatalogTilesProvider,
   ContextToolbar,
   EntitiesContext,
@@ -14,8 +15,8 @@ import camelRouteMock from '../cypress/fixtures/camelRouteMock.json';
 const EntitiesContextDecorator = (Story: StoryFn) => (
   <SourceCodeContext.Provider value={{ sourceCode: '', setCodeAndNotify: () => {} }}>
     <EntitiesContext.Provider value={camelRouteMock}>
-      <SchemasLoaderProvider>
-        <CatalogLoaderProvider>
+      <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+        <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
           <CatalogTilesProvider>
             <VisibleFlowsProvider>
               <Story />

packages/ui/src/App.tsx

@@ -5,14 +5,15 @@ 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 { CatalogSchemaLoader } from './utils/catalog-schema-loader';
 
 function App() {
   return (
     <SourceCodeProvider>
       <EntitiesProvider>
         <Shell>
-          <SchemasLoaderProvider>
-            <CatalogLoaderProvider>
+          <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+            <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
               <CatalogTilesProvider>
                 <Outlet />
               </CatalogTilesProvider>

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

@@ -10,27 +10,27 @@ export const CatalogContext = createContext<typeof CamelCatalogService>(CamelCat
 /**
  * Loader for the components catalog.
  */
-export const CatalogLoaderProvider: FunctionComponent<PropsWithChildren> = (props) => {
+export const CatalogLoaderProvider: FunctionComponent<PropsWithChildren<{ catalogUrl: string }>> = (props) => {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    fetch(`.${CatalogSchemaLoader.DEFAULT_CATALOG_PATH}/index.json`)
+    fetch(`${props.catalogUrl}/index.json`)
       .then((response) => response.json())
       .then(async (catalogIndex: CamelCatalogIndex) => {
         const camelComponentsFiles = CatalogSchemaLoader.fetchFile<ComponentsCatalog[CatalogKind.Component]>(
-          catalogIndex.catalogs.components.file,
+          `${props.catalogUrl}/${catalogIndex.catalogs.components.file}`,
         );
         const camelProcessorsFiles = CatalogSchemaLoader.fetchFile<ComponentsCatalog[CatalogKind.Processor]>(
-          catalogIndex.catalogs.models.file,
+          `${props.catalogUrl}/${catalogIndex.catalogs.models.file}`,
         );
         const camelLanguagesFiles = CatalogSchemaLoader.fetchFile<ComponentsCatalog[CatalogKind.Language]>(
-          catalogIndex.catalogs.languages.file,
+          `${props.catalogUrl}/${catalogIndex.catalogs.languages.file}`,
         );
         const camelDataformatsFiles = CatalogSchemaLoader.fetchFile<ComponentsCatalog[CatalogKind.Dataformat]>(
-          catalogIndex.catalogs.dataformats.file,
+          `${props.catalogUrl}/${catalogIndex.catalogs.dataformats.file}`,
         );
         const kameletsFiles = CatalogSchemaLoader.fetchFile<ComponentsCatalog[CatalogKind.Kamelet]>(
-          catalogIndex.catalogs.kamelets.file,
+          `${props.catalogUrl}/${catalogIndex.catalogs.kamelets.file}`,
         );
 
         const [camelComponents, camelProcessors, camelLanguages, camelDataformats, kamelets] = await Promise.all([

packages/ui/src/providers/schemas.provider.tsx

@@ -11,16 +11,16 @@ export const SchemasContext = createContext<Record<string, Schema>>({});
 /**
  * Loader for the components schemas.
  */
-export const SchemasLoaderProvider: FunctionComponent<PropsWithChildren> = (props) => {
+export const SchemasLoaderProvider: FunctionComponent<PropsWithChildren<{ catalogUrl: string }>> = (props) => {
   const setSchema = useSchemasStore((state) => state.setSchema);
   const [isLoading, setIsLoading] = useState(true);
   const [schemas, setSchemas] = useState<Record<string, Schema>>({});
 
   useEffect(() => {
-    fetch(`.${CatalogSchemaLoader.DEFAULT_CATALOG_PATH}/index.json`)
+    fetch(`${props.catalogUrl}/index.json`)
       .then((response) => response.json())
       .then(async (catalogIndex: CamelCatalogIndex) => {
-        const schemaFilesPromise = CatalogSchemaLoader.getSchemasFiles(catalogIndex.schemas);
+        const schemaFilesPromise = CatalogSchemaLoader.getSchemasFiles(props.catalogUrl, catalogIndex.schemas);
 
         const loadedSchemas = await Promise.all(schemaFilesPromise);
         const combinedSchemas = loadedSchemas.reduce(

packages/ui/src/utils/catalog-schema-loader.test.ts

@@ -19,10 +19,10 @@ describe('CatalogSchemaLoader', () => {
   });
 
   describe('fetchFile', () => {
-    it('should use the file and the DEFAULT_CATALOG_PATH in the path', async () => {
+    it('should fetch the file', async () => {
       await CatalogSchemaLoader.fetchFile('file.json');
 
-      expect(fetchMock).toHaveBeenCalledWith('./camel-catalog/file.json');
+      expect(fetchMock).toHaveBeenCalledWith('file.json');
     });
 
     it('should return the body and the uri', async () => {
@@ -32,7 +32,7 @@ describe('CatalogSchemaLoader', () => {
         body: {
           content: 'file-content',
         },
-        uri: 'http://localhost/./camel-catalog/file.json',
+        uri: 'http://localhost/file.json',
       });
     });
   });
@@ -69,7 +69,7 @@ describe('CatalogSchemaLoader', () => {
     });
 
     it('should return the schemas files', async () => {
-      const schemaPromises = CatalogSchemaLoader.getSchemasFiles(schemasEntries);
+      const schemaPromises = CatalogSchemaLoader.getSchemasFiles('http://localhost', schemasEntries);
 
       const result = await Promise.all(schemaPromises);
 

packages/ui/src/utils/catalog-schema-loader.ts

@@ -1,20 +1,20 @@
 import { Schema, SchemaEntry } from '../models';
 
 export class CatalogSchemaLoader {
-  static readonly DEFAULT_CATALOG_PATH = '/camel-catalog';
+  /** The `.` is required to support relative routes in GitHub pages */
+  static readonly DEFAULT_CATALOG_PATH = './camel-catalog';
   static readonly VISUAL_FLOWS = ['route', 'Integration', 'Kamelet', 'KameletBinding', 'Pipe'];
 
   static async fetchFile<T>(file: string): Promise<{ body: T; uri: string }> {
-    /** The `.` is required to support relative routes in GitHub pages */
-    const response = await fetch(`.${this.DEFAULT_CATALOG_PATH}/${file}`);
+    const response = await fetch(file);
     const body = await response.json();
 
     return { body, uri: response.url };
   }
 
-  static getSchemasFiles(schemaFiles: Record<string, SchemaEntry>): Promise<Schema>[] {
+  static getSchemasFiles(basePath: string, schemaFiles: Record<string, SchemaEntry>): Promise<Schema>[] {
     return Object.entries(schemaFiles).map(async ([name, schemaDef]) => {
-      const fetchedSchema = await this.fetchFile(schemaDef.file);
+      const fetchedSchema = await this.fetchFile(`${basePath}/${schemaDef.file}`);
       const tags = [];
 
       if (this.VISUAL_FLOWS.includes(name)) {