Merge branch 'main' into ft/bento

Author: Lasserich

Dockerfile

@@ -1,5 +1,5 @@
 # BUILD STAGE
-FROM node:24-slim@sha256:0104d9447ea3ddf7373643be7f9915fc7b7c896e41d0d33229338e457217cd78 AS build-stage
+FROM node:24-slim@sha256:cadbfafeb6baf87eaaffa40b3640209c4b7fd38cebde65059d15bc39cd636b85 AS build-stage
 WORKDIR /usr/src/app
 
 # Copy package.json and package-lock.json
@@ -18,7 +18,7 @@ RUN npm prune --omit=dev
 
 
 # PRODUCTION STAGE
-FROM gcr.io/distroless/nodejs24-debian12@sha256:33204de28faf16f5bb1f8730fe12ea99609625d44aefdec32dab73b290d33943 AS production
+FROM gcr.io/distroless/nodejs24-debian12@sha256:e6af293a96996c2a6d1e8a440600518ec614571a91356a38c55f316ff1ee9924 AS production
 WORKDIR /usr/src/app
 
 # Copy built files

package-lock.json

@@ -34,14 +34,14 @@
     "@fastify/static": "8.2.0",
     "@fastify/vite": "8.2.0",
     "@hookform/resolvers": "5.2.1",
-    "@sentry/node": "10.10.0",
-    "@sentry/react": "10.10.0",
+    "@sentry/node": "10.11.0",
+    "@sentry/react": "10.11.0",
     "@sentry/vite-plugin": "4.3.0",
     "@ui5/webcomponents": "2.14.0",
     "@ui5/webcomponents-fiori": "2.14.0",
     "@ui5/webcomponents-icons": "2.14.0",
-    "@ui5/webcomponents-react": "2.14.0",
-    "@ui5/webcomponents-react-charts": "2.14.0",
+    "@ui5/webcomponents-react": "2.14.1",
+    "@ui5/webcomponents-react-charts": "2.14.1",
     "@xyflow/react": "12.8.4",
     "clsx": "2.1.1",
     "dagre": "0.8.5",
@@ -51,35 +51,35 @@
     "graphql": "16.11.0",
     "graphql-config": "5.1.5",
     "i18next": "25.5.2",
-    "javascript-time-ago": "2.5.11",
+    "javascript-time-ago": "2.5.12",
     "js-yaml": "4.1.0",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-error-boundary": "6.0.0",
     "react-hook-form": "7.62.0",
     "react-i18next": "15.7.3",
-    "react-router-dom": "7.8.2",
+    "react-router-dom": "7.9.1",
     "react-syntax-highlighter": "15.6.6",
-    "react-time-ago": "7.3.3",
+    "react-time-ago": "7.3.5",
     "swr": "2.3.6",
     "yaml": "2.8.1",
-    "zod": "4.1.5"
+    "zod": "4.1.8"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.3.1",
     "@eslint/js": "9.35.0",
-    "@graphql-codegen/cli": "5.0.7",
-    "@graphql-codegen/client-preset": "4.8.3",
+    "@graphql-codegen/cli": "6.0.0",
+    "@graphql-codegen/client-preset": "5.0.0",
     "@types/dagre": "0.7.53",
     "@types/js-yaml": "4.0.9",
-    "@types/node": "22.18.1",
-    "@types/react": "19.1.12",
+    "@types/node": "22.18.3",
+    "@types/react": "19.1.13",
     "@types/react-dom": "19.1.9",
     "@types/react-syntax-highlighter": "15.5.13",
-    "@ui5/webcomponents-cypress-commands": "2.14.0",
+    "@ui5/webcomponents-cypress-commands": "2.14.1",
     "@vitejs/plugin-react": "5.0.2",
     "@vitest/eslint-plugin": "1.3.9",
-    "cypress": "15.1.0",
+    "cypress": "15.2.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-i18next": "6.1.3",
@@ -90,11 +90,11 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
     "fastify-tsconfig": "3.0.0",
-    "globals": "16.3.0",
+    "globals": "16.4.0",
     "prettier": "3.6.2",
     "tsx": "4.20.5",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.42.0",
+    "typescript-eslint": "8.43.0",
     "vite": "7.1.5",
     "vitest": "3.2.4"
   }

package.json

@@ -93,6 +93,9 @@
     "menuDownload": "Download",
     "menuCopy": "Copy to clipboard"
   },
+  "ComponentsSelection": {
+    "chooseVersion": "Please select version"
+  },
   "IllustratedBanner": {
     "titleMessage": "No Managed Control Planes found",
     "subtitleMessage": "Get started by creating your first Managed Control Plane.",

public/locales/en.json

@@ -22,13 +22,19 @@ import { Infobox } from '../Ui/Infobox/Infobox.tsx';
 import { useTranslation } from 'react-i18next';
 import { ComponentsListItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
 import { getSelectedComponents } from './ComponentsSelectionContainer.tsx';
+import IllustratedError from '../Shared/IllustratedError.tsx';
 
 export interface ComponentsSelectionProps {
   componentsList: ComponentsListItem[];
   setComponentsList: (components: ComponentsListItem[]) => void;
+  templateDefaultsError?: string;
 }
 
-export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({ componentsList, setComponentsList }) => {
+export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
+  componentsList,
+  setComponentsList,
+  templateDefaultsError,
+}) => {
   const [searchTerm, setSearchTerm] = useState('');
   const { t } = useTranslation();
 
@@ -132,8 +138,19 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({ compon
                       value={component.selectedVersion}
                       disabled={!component.isSelected || providerDisabled}
                       aria-label={`${component.name} version`}
+                      valueState={component.isSelected && !component.selectedVersion ? 'Negative' : 'None'}
+                      valueStateMessage={
+                        component.isSelected && !component.selectedVersion ? (
+                          <span>{t('ComponentsSelection.chooseVersion')}</span>
+                        ) : undefined
+                      }
                       onChange={handleVersionChange}
                     >
+                      {!component.selectedVersion && (
+                        <Option key="__placeholder" data-version="" data-name={component.name} selected>
+                          {t('ComponentsSelection.chooseVersion')}
+                        </Option>
+                      )}
                       {component.versions.map((version) => (
                         <Option
                           key={version}
@@ -155,7 +172,14 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({ compon
             </Infobox>
           )}
         </div>
+
         <div data-layout-span="XL4 L4 M4 S4">
+          {templateDefaultsError ? (
+            <div style={{ marginBottom: 8 }}>
+              <IllustratedError title={templateDefaultsError} compact />
+            </div>
+          ) : null}
+
           {selectedComponents.length > 0 ? (
             <List headerText={t('componentsSelection.selectedComponents')}>
               {selectedComponents.map((component) => (

src/components/ComponentsSelection/ComponentsSelection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { ComponentsSelection } from './ComponentsSelection.tsx';
 
 import IllustratedError from '../Shared/IllustratedError.tsx';
@@ -9,10 +9,12 @@ import { useApiResource } from '../../lib/api/useApiResource.ts';
 import Loading from '../Shared/Loading.tsx';
 import { ComponentsListItem, removeComponents } from '../../lib/api/types/crate/createManagedControlPlane.ts';
 import { useTranslation } from 'react-i18next';
+import { ManagedControlPlaneTemplate } from '../../lib/api/types/templates/mcpTemplate.ts';
 
 export interface ComponentsSelectionProps {
   componentsList: ComponentsListItem[];
   setComponentsList: (components: ComponentsListItem[]) => void;
+  managedControlPlaneTemplate?: ManagedControlPlaneTemplate;
 }
 
 /**
@@ -30,39 +32,82 @@ export const getSelectedComponents = (components: ComponentsListItem[]) => {
   });
 };
 
+type TemplateDefaultComponent = {
+  name: string;
+  version: string;
+  removable?: boolean;
+  versionChangeable?: boolean;
+};
+
 export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> = ({
   setComponentsList,
   componentsList,
+  managedControlPlaneTemplate,
 }) => {
   const { data: availableManagedComponentsListData, error, isLoading } = useApiResource(ListManagedComponents());
   const { t } = useTranslation();
   const initialized = useRef(false);
+  const [templateDefaultsError, setTemplateDefaultsError] = useState<string | null>(null);
+  const defaultComponents = useMemo<TemplateDefaultComponent[]>(
+    () => managedControlPlaneTemplate?.spec?.spec?.components?.defaultComponents ?? [],
+    [managedControlPlaneTemplate],
+  );
 
   useEffect(() => {
-    if (
-      initialized.current ||
-      !availableManagedComponentsListData?.items ||
-      availableManagedComponentsListData.items.length === 0
-    ) {
+    const items = availableManagedComponentsListData?.items ?? [];
+
+    if (!items.length) {
+      if (!initialized.current) return;
+      setTemplateDefaultsError(null);
+      return;
+    }
+
+    if (!initialized.current) {
+      const newComponentsList = items
+        .map((item) => {
+          const versions = sortVersions(item.status.versions);
+          const template = defaultComponents.find((dc) => dc.name === item.metadata.name);
+          const templateVersion = template?.version;
+          const selectedVersion = template
+            ? templateVersion && versions.includes(templateVersion)
+              ? templateVersion
+              : ''
+            : (versions[0] ?? '');
+          return {
+            name: item.metadata.name,
+            versions,
+            selectedVersion,
+            isSelected: !!template,
+            documentationUrl: '',
+          };
+        })
+        .filter((component) => !removeComponents.find((item) => item === component.name));
+
+      setComponentsList(newComponentsList);
+      initialized.current = true;
+    }
+
+    if (!defaultComponents.length) {
+      setTemplateDefaultsError(null);
       return;
     }
 
-    const newComponentsList = availableManagedComponentsListData.items
-      .map((item) => {
-        const versions = sortVersions(item.status.versions);
-        return {
-          name: item.metadata.name,
-          versions,
-          selectedVersion: versions[0] ?? '',
-          isSelected: false,
-          documentationUrl: '',
-        };
-      })
-      .filter((component) => !removeComponents.find((item) => item === component.name));
-
-    setComponentsList(newComponentsList);
-    initialized.current = true;
-  }, [availableManagedComponentsListData, setComponentsList]);
+    const errors: string[] = [];
+    defaultComponents.forEach((dc: TemplateDefaultComponent) => {
+      if (!dc?.name) return;
+      const item = items.find((it) => it.metadata.name === dc.name);
+      if (!item) {
+        errors.push(`Component "${dc.name}" from template is not available.`);
+        return;
+      }
+      const versions: string[] = Array.isArray(item.status?.versions) ? item.status.versions : [];
+      if (dc.version && !versions.includes(dc.version)) {
+        errors.push(`Component "${dc.name}" version "${dc.version}" from template is not available.`);
+      }
+    });
+
+    setTemplateDefaultsError(errors.length ? errors.join('\n') : null);
+  }, [availableManagedComponentsListData, defaultComponents, setComponentsList]);
 
   if (isLoading) {
     return <Loading />;
@@ -77,5 +122,11 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
     return <IllustratedError title={t('componentsSelection.cannotLoad')} compact={true} />;
   }
 
-  return <ComponentsSelection componentsList={componentsList} setComponentsList={setComponentsList} />;
+  return (
+    <ComponentsSelection
+      componentsList={componentsList}
+      setComponentsList={setComponentsList}
+      templateDefaultsError={templateDefaultsError || undefined}
+    />
+  );
 };

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

@@ -5,21 +5,27 @@ import '@ui5/webcomponents-icons/dist/copy';
 import '@ui5/webcomponents-icons/dist/accept';
 
 import { useTranslation } from 'react-i18next';
+import { ManagedControlPlaneTemplate } from '../../lib/api/types/templates/mcpTemplate.ts';
 
 type ControlPlanesListMenuProps = {
   setDialogDeleteWsIsOpen: Dispatch<SetStateAction<boolean>>;
   setIsCreateManagedControlPlaneWizardOpen: Dispatch<SetStateAction<boolean>>;
+  setInitialTemplateName: Dispatch<SetStateAction<string | undefined>>;
 };
 
 export const ControlPlanesListMenu: FC<ControlPlanesListMenuProps> = ({
   setDialogDeleteWsIsOpen,
   setIsCreateManagedControlPlaneWizardOpen,
+  setInitialTemplateName,
 }) => {
   const popoverRef = useRef<MenuDomRef>(null);
   const [open, setOpen] = useState(false);
 
   const { t } = useTranslation();
 
+  // Here we will pass template list from OnboardingAPI
+  const allTemplates: ManagedControlPlaneTemplate[] = [];
+
   const handleOpenerClick = (e: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => {
     if (popoverRef.current && e.currentTarget) {
       popoverRef.current.opener = e.currentTarget as HTMLElement;
@@ -34,14 +40,20 @@ export const ControlPlanesListMenu: FC<ControlPlanesListMenuProps> = ({
         ref={popoverRef}
         open={open}
         onItemClick={(event) => {
-          const action = (event.detail.item as HTMLElement).dataset.action;
+          const item = event.detail.item as HTMLElement;
+          const action = item.dataset.action;
           if (action === 'newManagedControlPlane') {
+            setInitialTemplateName(undefined);
+            setIsCreateManagedControlPlaneWizardOpen(true);
+          }
+          if (action === 'newManagedControlPlaneWithTemplate') {
+            const tplName = item.dataset.templateName || undefined;
+            setInitialTemplateName(tplName);
             setIsCreateManagedControlPlaneWizardOpen(true);
           }
           if (action === 'deleteWorkspace') {
             setDialogDeleteWsIsOpen(true);
           }
-
           setOpen(false);
         }}
       >
@@ -51,6 +63,17 @@ export const ControlPlanesListMenu: FC<ControlPlanesListMenuProps> = ({
           data-action="newManagedControlPlane"
           icon="add"
         />
+        {allTemplates.map((tpl) => (
+          <MenuItem
+            key={`tpl-${tpl.metadata.name}`}
+            text={tpl.metadata.name}
+            title={tpl.metadata.descriptionText || ''}
+            data-action="newManagedControlPlaneWithTemplate"
+            data-template-name={tpl.metadata.name}
+            icon="document-text"
+          />
+        ))}
+
         <MenuItem
           key={'delete'}
           text={t('ControlPlaneListToolbar.deleteWorkspace')}