feat(Settings): Add hidden runtime and testing versions to the Settings form

As part of migrating the catalog version settings from LocalStorage to
the Settings infrastructure, we need to add 2 additional fields to the
settings schema.

Based on #3218 from @PVinaches, we're extracting
the Settings components and related logic to this pull request.

Considering this is a multi pull request process, the fist step is to
add the fields hidden and leverage them in an upcoming PR.

relates: #3230

Author: lordrip

packages/ui/src/assets/settingsSchema.json

@@ -11,6 +11,18 @@
       "type": "string",
       "format": "uri"
     },
+    "runtimeCatalogName": {
+      "title": "Integrations runtime version",
+      "description": "Integration runtime version. f.i. 'Camel Main 4.14.5', 'Camel Quarkus 3.15.0.redhat-00010' or 'Camel Spring Boot 4.14.5'",
+      "default": "<empty string>",
+      "type": "string"
+    },
+    "testingCatalogName": {
+      "title": "Testing runtime version",
+      "description": "Testing runtime version. f.i. 'Citrus 4.10.0'",
+      "default": "<empty string>",
+      "type": "string"
+    },
     "nodeLabel": {
       "title": "Node label to display in canvas",
       "description": "Node label, which will be used for nodes in the canvas. Can be either `description` or `id`. If `description` is selected, it will be displayed only if it is available, otherwise `id` will be displayed by default.",

packages/ui/src/components/Icons/RuntimeIcon.scss

@@ -0,0 +1,12 @@
+.runtime-icon {
+  margin-top: 2px;
+
+  > [class^='pf-v6-c-icon'] {
+    display: inline-flex;
+    align-items: center;
+    width: 14px;
+    height: 14px;
+    line-height: 1;
+    padding-top: 2px;
+  }
+}

packages/ui/src/components/Icons/RuntimeIcon.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+
+import { getRuntimeIcon } from './RuntimeIcon';
+
+describe('getRuntimeIcon', () => {
+  it.each([
+    ['Main', 'Apache Camel logo'],
+    ['Camel Main 4.0.0', 'Apache Camel logo'],
+    ['Unknown Runtime', 'Apache Camel logo'],
+    ['Citrus', 'Citrus logo'],
+    ['Citrus 1.0.0', 'Citrus logo'],
+    ['Quarkus', 'Quarkus logo'],
+    ['Camel Quarkus 3.0.0', 'Quarkus logo'],
+    ['Spring Boot', 'Spring Boot logo'],
+    ['CamelSpringBoot3.0.0', 'Spring Boot logo'],
+    ['Camel Main 4.0.0.redhat-00001', 'Red Hat logo'],
+    ['anything-with-redhat-in-name', 'Red Hat logo'],
+  ])('returns correct icon for "%s"', (input, expectedAlt) => {
+    render(getRuntimeIcon(input));
+    expect(screen.getByAltText(expectedAlt)).toBeInTheDocument();
+  });
+});

packages/ui/src/components/Icons/RuntimeIcon.tsx

@@ -0,0 +1,58 @@
+import './RuntimeIcon.scss';
+
+import { Icon } from '@patternfly/react-core';
+
+import camelLogo from '../../assets/camel-logo.svg';
+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';
+
+/**
+ * Returns the appropriate icon for a given runtime or catalog name.
+ *
+ * Matches are case-insensitive and whitespace-agnostic for flexibility.
+ * @param runtimeOrName - Runtime type (e.g., "Main", "Quarkus") or catalog name (e.g., "Camel Main 4.0.0.redhat-00001")
+ * @returns Icon component with the appropriate logo
+ */
+export const getRuntimeIcon = (runtimeOrName: string = '') => {
+  const normalized = runtimeOrName.toLowerCase().replace(/\s/g, '');
+
+  if (normalized.includes('redhat')) {
+    return (
+      <Icon className="runtime-icon">
+        <img src={redhatLogo} alt="Red Hat logo" />
+      </Icon>
+    );
+  }
+
+  if (normalized.includes('citrus')) {
+    return (
+      <Icon className="runtime-icon">
+        <img src={citrusLogo} alt="Citrus logo" />
+      </Icon>
+    );
+  }
+
+  if (normalized.includes('quarkus')) {
+    return (
+      <Icon className="runtime-icon">
+        <img src={quarkusLogo} alt="Quarkus logo" />
+      </Icon>
+    );
+  }
+
+  if (normalized.includes('springboot')) {
+    return (
+      <Icon className="runtime-icon">
+        <img src={springBootLogo} alt="Spring Boot logo" />
+      </Icon>
+    );
+  }
+
+  return (
+    <Icon className="runtime-icon">
+      <img src={camelLogo} alt="Apache Camel logo" />
+    </Icon>
+  );
+};

packages/ui/src/components/Settings/SettingsForm.scss

@@ -5,8 +5,22 @@
     overflow: hidden auto;
   }
 
+  .alert-catalog-url {
+    margin-bottom: 24px;
+
+    /* stylelint-disable-next-line selector-class-pattern */
+    .pf-v6-c-alert__icon {
+      align-content: center;
+    }
+  }
+
   /* stylelint-disable-next-line selector-class-pattern */
   .pf-v6-c-card__footer {
     padding-block-start: var(--pf-v6-c-card--first-child--PaddingBlockStart);
   }
+
+  [data-testid='#.runtimeCatalogName__field-wrapper'],
+  [data-testid='#.testingCatalogName__field-wrapper'] {
+    display: none;
+  }
 }

packages/ui/src/components/Settings/SettingsForm.test.tsx

@@ -1,19 +1,26 @@
+import { SuggestionRegistryProvider } from '@kaoto/forms';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import { AbstractSettingsAdapter, DefaultSettingsAdapter } from '../../models/settings';
 import { ReloadContext, SettingsProvider } from '../../providers';
+import { TestRuntimeProviderWrapper } from '../../stubs/TestRuntimeProviderWrapper';
 import { SettingsForm } from './SettingsForm';
 
 describe('SettingsForm', () => {
   let reloadPage: jest.Mock;
   let settingsAdapter: AbstractSettingsAdapter;
+  const { Provider: RuntimeProvider } = TestRuntimeProviderWrapper();
 
   const wrapper = ({ children }: { children: React.ReactNode }) => {
     return (
       <MemoryRouter>
         <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
-          <SettingsProvider adapter={settingsAdapter}>{children}</SettingsProvider>
+          <RuntimeProvider>
+            <SettingsProvider adapter={settingsAdapter}>
+              <SuggestionRegistryProvider>{children}</SuggestionRegistryProvider>
+            </SettingsProvider>
+          </RuntimeProvider>
         </ReloadContext.Provider>
       </MemoryRouter>
     );
@@ -52,12 +59,29 @@ describe('SettingsForm', () => {
     expect(settingsAdapter.getSettings().catalogUrl).not.toBe('http://localhost:8080');
   });
 
-  it('should reload the page upon clicking save', () => {
-    act(() => {
+  it('should reload the page upon clicking save', async () => {
+    await act(async () => {
       const button = screen.getByTestId('settings-form-save-btn');
       fireEvent.click(button);
     });
 
     expect(reloadPage).toHaveBeenCalledTimes(1);
   });
+
+  it('should display error alert when save fails', async () => {
+    // Mock saveSettings to throw an error
+    const errorMessage = 'Failed to save settings to storage';
+    settingsAdapter.saveSettings = jest.fn().mockRejectedValue(new Error(errorMessage));
+
+    await act(async () => {
+      const button = screen.getByTestId('settings-form-save-btn');
+      fireEvent.click(button);
+    });
+
+    // Wait for error alert to appear
+    const errorAlert = await screen.findByText('Failed to save settings.');
+    expect(errorAlert).toBeInTheDocument();
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    expect(reloadPage).not.toHaveBeenCalled();
+  });
 });

packages/ui/src/components/Settings/SettingsForm.tsx

@@ -1,7 +1,7 @@
 import './SettingsForm.scss';
 
 import { CanvasFormTabsContext, CanvasFormTabsContextResult, KaotoForm } from '@kaoto/forms';
-import { Button, Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core';
+import { Alert, Button, Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core';
 import { FunctionComponent, useContext, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -22,22 +22,50 @@ export const SettingsForm: FunctionComponent = () => {
   const navigate = useNavigate();
   const { lastRender, reloadPage } = useReloadContext();
   const [settings, setSettings] = useState(settingsAdapter.getSettings());
+  const [saveError, setSaveError] = useState<string | undefined>(undefined);
+  const initialCatalogUrl = useMemo(() => settingsAdapter.getSettings().catalogUrl, [settingsAdapter]);
 
   const onChangeModel = (value: unknown) => {
     setSettings(value as SettingsModel);
+    setSaveError(undefined);
   };
 
-  const onSave = () => {
-    settingsAdapter.saveSettings(settings);
-    reloadPage();
-    navigate(Links.Home);
+  const hasPendingCatalogUrlChange = settings.catalogUrl !== initialCatalogUrl;
+
+  const onSave = async () => {
+    try {
+      await settingsAdapter.saveSettings(settings);
+      reloadPage();
+
+      if (!hasPendingCatalogUrlChange) {
+        navigate(Links.Home);
+      }
+    } catch (error) {
+      setSaveError(error instanceof Error ? error.message : 'Unable to save settings');
+    }
   };
 
   return (
     <Card className="settings-form-card" data-last-render={lastRender}>
       <CardTitle>Settings</CardTitle>
 
       <CardBody>
+        {hasPendingCatalogUrlChange && (
+          <Alert
+            className="alert-catalog-url"
+            isInline
+            variant="info"
+            title="Catalog versions will be recomputed after saving a custom catalog."
+          >
+            Runtime selector versions still reflect the currently saved catalog URL. Save the settings to recompute the
+            available Camel and testing catalogs options from the new catalog URL.
+          </Alert>
+        )}
+        {saveError && (
+          <Alert className="alert-catalog-url" isInline variant="danger" title="Failed to save settings.">
+            {saveError}
+          </Alert>
+        )}
         <CanvasFormTabsContext.Provider value={formTabsValue}>
           <KaotoForm
             data-testid="settings-form"