fix(Catalog): Select appropriate Catalog for Resource

Pick the catalog based on the resource's schema type so opening a Citrus test no longer loads a Camel catalog (and vice versa).

- Add `detectSchemaType()` to infer the schema from source/path without constructing a full `KaotoResource`, avoiding a chicken-and-egg problem at provider mount time.
- Add `COMPATIBLE_RUNTIMES_BY_SCHEMA_TYPE` as the single source of truth for resource→runtime compatibility, replacing the per-resource `getCompatibleRuntimes()` methods.
- Persist the selected catalog per schema type via `catalog-storage.ts` (keyed map) instead of one global entry, with legacy-format detection to discard old values.
- Simplify `IntegrationTypeSelector`, `RuntimeSelector`, and `NewFlow` now that runtime filtering lives in one place.

Author: lordrip

packages/ui/src/components/Visualization/ContextToolbar/IntegrationTypeSelector/ChangeIntegrationTypeModal/ChangeIntegrationTypeModal.tsx

@@ -3,7 +3,6 @@ import { FunctionComponent } from 'react';
 
 interface ChangeIntegrationTypeModalProps {
   isOpen: boolean;
-  changesCatalog?: boolean;
   onConfirm: () => void;
   onCancel: () => void;
 }
@@ -14,8 +13,7 @@ export const ChangeIntegrationTypeModal: FunctionComponent<ChangeIntegrationType
       <ModalHeader title="Warning" titleIconVariant="warning" />
       <ModalBody>
         <p data-testid={'confirmation-modal-text'}>
-          Changing the source type will remove any existing integration and you will lose your current work.{' '}
-          {props.changesCatalog && 'This will also change the current selected catalog.'}
+          Changing the source type will remove any existing integration and you will lose your current work.
         </p>
         <p>Are you sure you would like to proceed?</p>
       </ModalBody>

packages/ui/src/components/Visualization/ContextToolbar/IntegrationTypeSelector/IntegrationTypeSelector.test.tsx

@@ -55,6 +55,7 @@ describe('IntegrationTypeSelector.tsx', () => {
     camelResource?: KaotoResource,
   ) => {
     const mockSetSelectedCatalog = jest.fn();
+    const mockSetCodeAndNotify = jest.fn();
     const { Provider } = TestProvidersWrapper({ camelResource });
 
     return {
@@ -67,14 +68,15 @@ describe('IntegrationTypeSelector.tsx', () => {
             setSelectedCatalog: mockSetSelectedCatalog,
           }}
         >
-          <SourceCodeApiContext.Provider value={{ setCodeAndNotify: jest.fn() }}>
+          <SourceCodeApiContext.Provider value={{ setCodeAndNotify: mockSetCodeAndNotify }}>
             <Provider>
               <IntegrationTypeSelector />
             </Provider>
           </SourceCodeApiContext.Provider>
         </RuntimeContext.Provider>,
       ),
       mockSetSelectedCatalog,
+      mockSetCodeAndNotify,
     };
   };
 
@@ -159,8 +161,9 @@ describe('IntegrationTypeSelector.tsx', () => {
     expect(modalText.textContent).not.toContain('This will also change the current selected catalog');
   });
 
-  it('should warn the user when selected flow changes the catalog', async () => {
-    const { findByTestId, getByTestId, mockSetSelectedCatalog } = renderWithCustomRuntime(mockCamelCatalog);
+  it('should warn the user when selecting a flow type that previously changed the catalog', async () => {
+    const { findByTestId, getByTestId, mockSetSelectedCatalog, mockSetCodeAndNotify } =
+      renderWithCustomRuntime(mockCamelCatalog);
 
     const trigger = await findByTestId('integration-type-list-dropdown');
 
@@ -181,7 +184,7 @@ describe('IntegrationTypeSelector.tsx', () => {
 
     const modalText = await findByTestId('confirmation-modal-text');
     expect(modalText).toBeInTheDocument();
-    expect(modalText.textContent).toContain('This will also change the current selected catalog');
+    expect(modalText.textContent).not.toContain('This will also change the current selected catalog');
 
     /** Confirm **/
     const confirmButton = await findByTestId('confirmation-modal-confirm');
@@ -191,11 +194,8 @@ describe('IntegrationTypeSelector.tsx', () => {
     });
 
     await waitFor(() => {
-      expect(mockSetSelectedCatalog).toHaveBeenCalledWith(
-        expect.objectContaining({
-          runtime: 'Citrus',
-        }),
-      );
+      expect(mockSetCodeAndNotify).toHaveBeenCalled();
+      expect(mockSetSelectedCatalog).not.toHaveBeenCalled();
     });
   });
 });

packages/ui/src/components/Visualization/ContextToolbar/IntegrationTypeSelector/IntegrationTypeSelector.tsx

@@ -1,45 +1,27 @@
-import { isDefined } from '@kaoto/forms';
 import { FunctionComponent, PropsWithChildren, useCallback, useContext, useState } from 'react';
 
-import { useRuntimeContext } from '../../../../hooks/useRuntimeContext/useRuntimeContext';
 import { SourceSchemaType } from '../../../../models/camel';
 import { FlowTemplateService } from '../../../../models/visualization/flows/support/flow-templates-service';
 import { SourceCodeApiContext } from '../../../../providers';
-import { findCatalog } from '../../../../utils/catalog-helper';
 import { ChangeIntegrationTypeModal } from './ChangeIntegrationTypeModal/ChangeIntegrationTypeModal';
 import { IntegrationTypeSelectorToggle } from './IntegrationTypeSelectorToggle/IntegrationTypeSelectorToggle';
 
 export const IntegrationTypeSelector: FunctionComponent<PropsWithChildren> = () => {
-  const runtimeContext = useRuntimeContext();
   const sourceCodeContextApi = useContext(SourceCodeApiContext);
   const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
   const [proposedFlowType, setProposedFlowType] = useState<SourceSchemaType>();
-  const [changeCatalog, setChangeCatalog] = useState<boolean>();
 
-  const checkBeforeAddNewFlow = useCallback((flowType: SourceSchemaType, changeCatalog: boolean) => {
-    /**
-     * If it is not the same integration type, this operation might result in
-     * removing the existing flows, so then we warn the user first
-     */
+  const checkBeforeAddNewFlow = useCallback((flowType: SourceSchemaType) => {
     setProposedFlowType(flowType);
-    setChangeCatalog(changeCatalog);
     setIsConfirmationModalOpen(true);
   }, []);
 
   const onConfirm = useCallback(() => {
     if (proposedFlowType) {
       sourceCodeContextApi.setCodeAndNotify(FlowTemplateService.getFlowYamlTemplate(proposedFlowType));
-
-      if (changeCatalog) {
-        const matchingCatalog = findCatalog(proposedFlowType, runtimeContext.catalogLibrary);
-        if (isDefined(matchingCatalog)) {
-          runtimeContext.setSelectedCatalog(matchingCatalog);
-        }
-      }
-
       setIsConfirmationModalOpen(false);
     }
-  }, [proposedFlowType, runtimeContext, sourceCodeContextApi, changeCatalog]);
+  }, [proposedFlowType, sourceCodeContextApi]);
 
   const onCancel = useCallback(() => {
     setIsConfirmationModalOpen(false);
@@ -48,12 +30,7 @@ export const IntegrationTypeSelector: FunctionComponent<PropsWithChildren> = ()
   return (
     <>
       <IntegrationTypeSelectorToggle onSelect={checkBeforeAddNewFlow} />
-      <ChangeIntegrationTypeModal
-        isOpen={isConfirmationModalOpen}
-        changesCatalog={changeCatalog}
-        onConfirm={onConfirm}
-        onCancel={onCancel}
-      />
+      <ChangeIntegrationTypeModal isOpen={isConfirmationModalOpen} onConfirm={onConfirm} onCancel={onCancel} />
     </>
   );
 };

packages/ui/src/components/Visualization/ContextToolbar/IntegrationTypeSelector/IntegrationTypeSelectorToggle/IntegrationTypeSelectorToggle.tsx

@@ -1,49 +1,38 @@
 import { MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
 import { FunctionComponent, MouseEvent, RefObject, useCallback, useContext, useState } from 'react';
 
-import { useRuntimeContext } from '../../../../../hooks/useRuntimeContext/useRuntimeContext';
 import { ISourceSchema, sourceSchemaConfig, SourceSchemaType } from '../../../../../models/camel';
 import { EntitiesContext } from '../../../../../providers/entities.provider';
 import { getSupportedDsls } from '../../../../../serializers/serializer-dsl-lists';
-import { requiresCatalogChange } from '../../../../../utils/catalog-helper';
 
 interface ISourceTypeSelector {
-  onSelect?: (value: SourceSchemaType, changeCatalog: boolean) => void;
+  onSelect?: (value: SourceSchemaType) => void;
 }
 
 export const IntegrationTypeSelectorToggle: FunctionComponent<ISourceTypeSelector> = (props) => {
-  const runtimeContext = useRuntimeContext();
-  const { selectedCatalog } = runtimeContext;
   const { currentSchemaType, camelResource } = useContext(EntitiesContext)!;
   const currentFlowType: ISourceSchema = sourceSchemaConfig.config[currentSchemaType];
   const [isOpen, setIsOpen] = useState(false);
   const dslEntries = getSupportedDsls(camelResource);
 
   const onSelect = useCallback(
     (_event: MouseEvent | undefined, flowType: string | number | undefined) => {
-      if (!flowType) {
-        return;
-      }
+      if (!flowType) return;
       const integrationType = sourceSchemaConfig.config[flowType as SourceSchemaType];
 
       setIsOpen(false);
       if (integrationType !== undefined) {
-        props.onSelect?.(
-          flowType as SourceSchemaType,
-          requiresCatalogChange(flowType as SourceSchemaType, selectedCatalog),
-        );
+        props.onSelect?.(flowType as SourceSchemaType);
       }
     },
-    [props, selectedCatalog],
+    [props],
   );
 
   const toggle = (toggleRef: RefObject<HTMLButtonElement>) => (
     <MenuToggle
       data-testid="integration-type-list-dropdown"
       ref={toggleRef}
-      onClick={() => {
-        setIsOpen(!isOpen);
-      }}
+      onClick={() => setIsOpen(!isOpen)}
       isExpanded={isOpen}
     >
       {sourceSchemaConfig.config[currentSchemaType].name}
@@ -64,7 +53,6 @@ export const IntegrationTypeSelectorToggle: FunctionComponent<ISourceTypeSelecto
         {dslEntries.map((sourceType, index) => {
           const sourceSchema = sourceSchemaConfig.config[sourceType];
           const isCurrentType = sourceSchema.name === currentFlowType.name;
-          const changeCatalog = requiresCatalogChange(sourceType, selectedCatalog);
 
           return (
             <SelectOption
@@ -79,7 +67,6 @@ export const IntegrationTypeSelectorToggle: FunctionComponent<ISourceTypeSelecto
               isDisabled={isCurrentType}
             >
               {sourceSchema.name}
-              {changeCatalog && !isCurrentType && ' (in different catalog)'}
               {isCurrentType && ' (current integration type)'}
             </SelectOption>
           );

packages/ui/src/components/Visualization/ContextToolbar/RuntimeSelector/RuntimeSelector.test.tsx

@@ -1,5 +1,6 @@
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
 
+import { LocalStorageKeys } from '../../../../models';
 import { TestProvidersWrapper, TestRuntimeProviderWrapper } from '../../../../stubs';
 import { RuntimeSelector } from './RuntimeSelector';
 
@@ -53,6 +54,14 @@ describe('RuntimeSelector', () => {
     await waitFor(async () => {
       expect(setSelectedCatalog).toHaveBeenCalled();
     });
+
+    const raw = localStorage.getItem(LocalStorageKeys.SelectedCatalog);
+    if (raw !== null) {
+      const parsed = JSON.parse(raw);
+      expect(parsed).toEqual(expect.any(Object));
+      expect((parsed as Record<string, unknown>).name).toBeUndefined();
+      expect((parsed as Record<string, unknown>).version).toBeUndefined();
+    }
   });
 
   it('should toggle list of Runtimes', async () => {

packages/ui/src/components/Visualization/ContextToolbar/RuntimeSelector/RuntimeSelector.tsx

@@ -9,9 +9,9 @@ import citrusLogo from '../../../../assets/citrus-logo.png';
 import quarkusLogo from '../../../../assets/quarkus-logo.svg';
 import redhatLogo from '../../../../assets/redhat-logo.svg';
 import springBootLogo from '../../../../assets/springboot-logo.svg';
-import { useLocalStorage } from '../../../../hooks';
 import { useRuntimeContext } from '../../../../hooks/useRuntimeContext/useRuntimeContext';
-import { LocalStorageKeys } from '../../../../models';
+import { SourceSchemaType } from '../../../../models/camel';
+import { COMPATIBLE_RUNTIMES_BY_SCHEMA_TYPE } from '../../../../models/camel/compatible-runtimes';
 import { EntitiesContext } from '../../../../providers';
 
 const SPACE_REGEX = /\s/g;
@@ -55,11 +55,8 @@ export const RuntimeSelector: FunctionComponent = () => {
   const toggleRef = useRef<HTMLButtonElement>(null);
   const runtimeContext = useRuntimeContext();
   const entitiesContext = useContext(EntitiesContext);
-  const compatibleRuntimes = entitiesContext?.camelResource.getCompatibleRuntimes() ?? [];
-  const [_, setSelectedCatalogLocalStorage] = useLocalStorage(
-    LocalStorageKeys.SelectedCatalog,
-    runtimeContext.selectedCatalog,
-  );
+  const currentSchemaType = entitiesContext?.currentSchemaType ?? SourceSchemaType.Route;
+  const compatibleRuntimes = COMPATIBLE_RUNTIMES_BY_SCHEMA_TYPE[currentSchemaType];
   const groupedRuntimes =
     runtimeContext.catalogLibrary?.definitions
       .filter((catalog) => compatibleRuntimes.includes(catalog.runtime))
@@ -88,12 +85,11 @@ export const RuntimeSelector: FunctionComponent = () => {
 
       if (isDefined(selectedCatalog)) {
         runtimeContext.setSelectedCatalog(selectedCatalog);
-        setSelectedCatalogLocalStorage(selectedCatalog);
       }
 
       setIsOpen(false);
     },
-    [runtimeContext, setSelectedCatalogLocalStorage],
+    [runtimeContext],
   );
 
   const getMenuItem = useCallback(

packages/ui/src/components/Visualization/EmptyState/FlowType/NewFlow.test.tsx

@@ -55,6 +55,7 @@ describe('NewFlow.tsx', () => {
     sourceSchemaType: SourceSchemaType = SourceSchemaType.Integration,
   ) => {
     const mockSetSelectedCatalog = jest.fn();
+    const mockSetCodeAndNotify = jest.fn();
     const defaultRuntimeContext: IRuntimeContext = {
       basePath: '',
       selectedCatalog: mockCamelCatalog,
@@ -69,7 +70,7 @@ describe('NewFlow.tsx', () => {
         <RuntimeContext.Provider value={mergedRuntimeContext}>
           <SourceCodeApiContext.Provider
             value={{
-              setCodeAndNotify: jest.fn(),
+              setCodeAndNotify: mockSetCodeAndNotify,
             }}
           >
             <EntitiesContext.Provider
@@ -89,6 +90,7 @@ describe('NewFlow.tsx', () => {
         </RuntimeContext.Provider>,
       ),
       mockSetSelectedCatalog,
+      mockSetCodeAndNotify,
     };
   };
 
@@ -128,13 +130,11 @@ describe('NewFlow.tsx', () => {
     expect(modal).toBeInTheDocument();
   });
 
-  it('should update catalog when switching to Citrus test', async () => {
-    const mockSetSelectedCatalog = jest.fn();
-    const { findByTestId, getByText } = renderWithContext(
+  it('should call setCodeAndNotify and not directly call setSelectedCatalog when switching flow types', async () => {
+    const { findByTestId, getByText, mockSetCodeAndNotify, mockSetSelectedCatalog } = renderWithContext(
       {
         selectedCatalog: mockCamelCatalog,
         catalogLibrary: mockCatalogLibrary,
-        setSelectedCatalog: mockSetSelectedCatalog,
       },
       SourceSchemaType.Route,
     );
@@ -158,41 +158,8 @@ describe('NewFlow.tsx', () => {
       fireEvent.click(confirmButton);
     });
 
-    /** Verify catalog was updated to Citrus */
-    expect(mockSetSelectedCatalog).toHaveBeenCalledWith(mockCitrusCatalog);
-  });
-
-  it('should not update catalog when switching between Camel flow types', async () => {
-    const mockSetSelectedCatalog = jest.fn();
-    const { findByTestId, getByText } = renderWithContext(
-      {
-        selectedCatalog: mockCamelCatalog,
-        catalogLibrary: mockCatalogLibrary,
-        setSelectedCatalog: mockSetSelectedCatalog,
-      },
-      SourceSchemaType.Route,
-    );
-
-    const trigger = await findByTestId('viz-dsl-list-dropdown');
-
-    /** Open Select */
-    act(() => {
-      fireEvent.click(trigger);
-    });
-
-    /** Select Pipe option (another Camel type) */
-    act(() => {
-      const element = getByText('Pipe');
-      fireEvent.click(element);
-    });
-
-    /** Confirm the modal */
-    const confirmButton = await findByTestId('confirmation-modal-confirm');
-    act(() => {
-      fireEvent.click(confirmButton);
-    });
-
-    /** Verify catalog was NOT updated since both are Camel types */
+    /** Verify the reactive chain is triggered via setCodeAndNotify, not directly via setSelectedCatalog */
+    expect(mockSetCodeAndNotify).toHaveBeenCalled();
     expect(mockSetSelectedCatalog).not.toHaveBeenCalled();
   });
 });

packages/ui/src/components/Visualization/EmptyState/FlowType/NewFlow.tsx

@@ -1,19 +1,15 @@
-import { isDefined } from '@kaoto/forms';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import { PlusIcon } from '@patternfly/react-icons';
 import { FunctionComponent, PropsWithChildren, useCallback, useContext, useState } from 'react';
 
 import { useEntityContext } from '../../../../hooks/useEntityContext/useEntityContext';
-import { useRuntimeContext } from '../../../../hooks/useRuntimeContext/useRuntimeContext';
 import { ISourceSchema, sourceSchemaConfig, SourceSchemaType } from '../../../../models/camel';
 import { FlowTemplateService } from '../../../../models/visualization/flows/support/flow-templates-service';
 import { SourceCodeApiContext } from '../../../../providers';
 import { VisibleFlowsContext } from '../../../../providers/visible-flows.provider';
-import { findCatalog, requiresCatalogChange } from '../../../../utils/catalog-helper';
 import { FlowTypeSelector } from './FlowTypeSelector';
 
 export const NewFlow: FunctionComponent<PropsWithChildren> = () => {
-  const runtimeContext = useRuntimeContext();
   const sourceCodeContextApi = useContext(SourceCodeApiContext);
   const { currentSchemaType, camelResource, updateEntitiesFromCamelResource } = useEntityContext();
   const currentFlowType: ISourceSchema = sourceSchemaConfig.config[currentSchemaType];
@@ -84,16 +80,6 @@ export const NewFlow: FunctionComponent<PropsWithChildren> = () => {
             onClick={() => {
               if (proposedFlowType) {
                 sourceCodeContextApi.setCodeAndNotify(FlowTemplateService.getFlowYamlTemplate(proposedFlowType));
-
-                // Update catalog if needed when switching flow types
-                const changeCatalog = requiresCatalogChange(proposedFlowType, runtimeContext.selectedCatalog);
-                if (changeCatalog) {
-                  const matchingCatalog = findCatalog(proposedFlowType, runtimeContext.catalogLibrary);
-                  if (isDefined(matchingCatalog)) {
-                    runtimeContext.setSelectedCatalog(matchingCatalog);
-                  }
-                }
-
                 setIsConfirmationModalOpen(false);
               }
             }}