Merge branch 'main' into ft/tab-navigation

Author: andreaskienle

Dockerfile

@@ -18,7 +18,7 @@ RUN npm prune --omit=dev
 
 
 # PRODUCTION STAGE
-FROM gcr.io/distroless/nodejs24-debian12@sha256:e6af293a96996c2a6d1e8a440600518ec614571a91356a38c55f316ff1ee9924 AS production
+FROM gcr.io/distroless/nodejs24-debian12@sha256:b8be532fe81829b3803c832989cba7f42de62b2fbc8c7599cae30f378882ea12 AS production
 WORKDIR /usr/src/app
 
 # Copy built files

package-lock.json

@@ -34,8 +34,8 @@
     "@fastify/static": "8.2.0",
     "@fastify/vite": "8.2.0",
     "@hookform/resolvers": "5.2.2",
-    "@sentry/node": "10.13.0",
-    "@sentry/react": "10.13.0",
+    "@sentry/node": "10.14.0",
+    "@sentry/react": "10.14.0",
     "@sentry/vite-plugin": "4.3.0",
     "@ui5/webcomponents": "2.14.0",
     "@ui5/webcomponents-fiori": "2.14.0",
@@ -47,7 +47,7 @@
     "dagre": "0.8.5",
     "diff": "^8.0.2",
     "dotenv": "17.2.2",
-    "fastify": "5.6.0",
+    "fastify": "5.6.1",
     "fastify-plugin": "5.0.1",
     "graphql": "16.11.0",
     "graphql-config": "5.1.5",
@@ -95,7 +95,7 @@
     "prettier": "3.6.2",
     "tsx": "4.20.5",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.44.0",
+    "typescript-eslint": "8.44.1",
     "vite": "7.1.7",
     "vitest": "3.2.4"
   }

package.json

@@ -55,8 +55,9 @@
   },
   "ControlPlaneCard": {
     "deleteConfirmationDialog": "MCP deletion triggered. The list will refresh automatically once completed.",
-    "editMCP": "Edit Managed Control Plane",
-    "deleteMCP": "Delete Managed Control Plane"
+    "editMCP": "Edit ManagedControlPlane",
+    "duplicateMCP": "Duplicate ManagedControlPlane",
+    "deleteMCP": "Delete ManagedControlPlane"
 
   },
   "ControlPlaneListAllWorkspaces": {
@@ -378,18 +379,23 @@
   "createMCP": {
     "dialogTitle": "Create Managed Control Plane",
     "titleText": "Managed Control Plane Created Successfully!",
-    "subtitleText": "Your Managed Control Plane is being set up. It will be ready to use in just a few minutes. You can safely close this window."
+    "subtitleText": "Your Managed Control Plane is being set up. It will be ready to use in just a few minutes. You can safely close this window.",
+    "copySuffix": "-copy"
   },
   "editMCP": {
     "dialogTitle": "Edit Managed Control Plane",
     "titleText": "Managed Control Plane Updated Successfully!",
-    "subtitleText": "Your Managed Control Plane is being updated. It will be ready to use in just a few minutes. You can safely close this window."
+    "subtitleText": "Your Managed Control Plane is being updated. It will be ready to use in just a few minutes. You can safely close this window.",
+    "editComponents": "Edit components",
+    "duplicatingMCPInfo1": "Duplicating a <span>ManagedControlPlane</span> will only create a <span>ManagedControlPlane</span> with the same configuration. ",
+    "duplicatingMCPInfo2": "<b>It will NOT copy the managed resources inside</b>"
   },
   "componentsSelection": {
     "selectComponents": "Select Components",
     "selectedComponents": "Selected Components",
     "pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane.",
-    "cannotLoad": "Cannot load components list"
+    "cannotLoad": "Cannot load components list",
+    "noComponentsFound": "No components found matching your search."
   },
   "Hints": {
     "CrossplaneHint": {

public/locales/en.json

@@ -101,7 +101,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
       />
 
       <Grid>
-        <div data-layout-span="XL8 L8 M8 S8">
+        <div data-layout-span="XL7 L7 M7 S7">
           {searchResults.length > 0 ? (
             searchResults.map((component) => {
               const providerDisabled = isProviderDisabled(component);
@@ -167,13 +167,13 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
               );
             })
           ) : (
-            <Infobox fullWidth variant="success">
-              <Text>{t('componentsSelection.pleaseSelectComponents')}</Text>
+            <Infobox fullWidth variant="normal" icon="search">
+              <Text>{t('componentsSelection.noComponentsFound')}</Text>
             </Infobox>
           )}
         </div>
 
-        <div data-layout-span="XL4 L4 M4 S4">
+        <div data-layout-span="XL5 L5 M5 S5">
           {templateDefaultsError ? (
             <div style={{ marginBottom: 8 }}>
               <IllustratedError title={templateDefaultsError} compact />
@@ -191,7 +191,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
               ))}
             </List>
           ) : (
-            <Infobox fullWidth variant="success">
+            <Infobox variant="success" icon="add">
               <Text>{t('componentsSelection.pleaseSelectComponents')}</Text>
             </Infobox>
           )}

src/components/ComponentsSelection/ComponentsSelection.tsx

@@ -1,24 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React from 'react';
 import { ComponentsSelection } from './ComponentsSelection.tsx';
-
 import IllustratedError from '../Shared/IllustratedError.tsx';
-import { sortVersions } from '../../utils/componentsVersions.ts';
-
-import { ListManagedComponents } from '../../lib/api/types/crate/listManagedComponents.ts';
-import { useApiResource } from '../../lib/api/useApiResource.ts';
 import Loading from '../Shared/Loading.tsx';
-import { ComponentsListItem, removeComponents } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+import { ComponentsListItem } 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;
-  setInitialComponentsList: (components: ComponentsListItem[]) => void;
-  managedControlPlaneTemplate?: ManagedControlPlaneTemplate;
-  initialSelection?: Record<string, { isSelected: boolean; version: string }>;
-  isOnMcpPage?: boolean;
-  initializedComponents: React.RefObject<boolean>;
+  isLoading: boolean;
+  error: unknown;
+  templateDefaultsError?: string;
 }
 
 /**
@@ -34,124 +26,15 @@ export const getSelectedComponents = (components: ComponentsListItem[]) => {
   });
 };
 
-type TemplateDefaultComponent = {
-  name: string;
-  version: string;
-  removable?: boolean;
-  versionChangeable?: boolean;
-};
-
 export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> = ({
   setComponentsList,
   componentsList,
-  managedControlPlaneTemplate,
-  initialSelection,
-  isOnMcpPage,
-  setInitialComponentsList,
-  initializedComponents,
+  isLoading,
+  error,
+  templateDefaultsError,
 }) => {
-  const {
-    data: availableManagedComponentsListData,
-    error,
-    isLoading,
-  } = useApiResource(ListManagedComponents(), undefined, !!isOnMcpPage);
   const { t } = useTranslation();
 
-  const [templateDefaultsError, setTemplateDefaultsError] = useState<string | null>(null);
-  const defaultComponents = useMemo<TemplateDefaultComponent[]>(
-    () => managedControlPlaneTemplate?.spec?.spec?.components?.defaultComponents ?? [],
-    [managedControlPlaneTemplate],
-  );
-
-  useEffect(() => {
-    if (
-      initializedComponents.current ||
-      !availableManagedComponentsListData?.items ||
-      availableManagedComponentsListData.items.length === 0
-    ) {
-      return;
-    }
-
-    const newComponentsList = availableManagedComponentsListData.items
-      .map((item) => {
-        const versions = sortVersions(item.status?.versions ?? []);
-        const template = defaultComponents.find((dc) => dc.name === (item.metadata?.name ?? ''));
-        const templateVersion = template?.version;
-        let selectedVersion = template
-          ? templateVersion && versions.includes(templateVersion)
-            ? templateVersion
-            : ''
-          : (versions[0] ?? '');
-        let isSelected = !!template;
-
-        const initSel = initialSelection?.[item.metadata?.name ?? ''];
-        if (initSel) {
-          // Override selection and version from initial selection if provided
-          isSelected = Boolean(initSel.isSelected);
-          selectedVersion = initSel.version && versions.includes(initSel.version) ? initSel.version : '';
-        }
-        return {
-          name: item.metadata?.name ?? '',
-          versions,
-          selectedVersion,
-          isSelected,
-          documentationUrl: '',
-        };
-      })
-      .filter((component) => !removeComponents.find((item) => item === component.name));
-    setInitialComponentsList(newComponentsList);
-    setComponentsList(newComponentsList);
-    initializedComponents.current = true;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setComponentsList, defaultComponents, initialSelection, availableManagedComponentsListData?.items]);
-
-  useEffect(() => {
-    const items = availableManagedComponentsListData?.items ?? [];
-    if (items.length === 0 || !defaultComponents.length) {
-      setTemplateDefaultsError(null);
-      return;
-    }
-
-    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 as string[]) : [];
-      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]);
-
-  useEffect(() => {
-    if (!initializedComponents.current) return;
-    if (!defaultComponents?.length) return;
-    if (!componentsList?.length) return;
-    // If initialSelection is provided, do not auto-apply template defaults
-    if (initialSelection && Object.keys(initialSelection).length > 0) return;
-
-    const anySelected = componentsList.some((c) => c.isSelected);
-    if (anySelected) return;
-
-    const updated = componentsList.map((c) => {
-      const template = defaultComponents.find((dc) => dc.name === c.name);
-      if (!template) return c;
-      const templateVersion = template.version;
-      const selectedVersion =
-        templateVersion && Array.isArray(c.versions) && c.versions.includes(templateVersion) ? templateVersion : '';
-      return { ...c, isSelected: true, selectedVersion };
-    });
-
-    setComponentsList(updated);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultComponents, componentsList, setComponentsList, initialSelection]);
-
   if (isLoading) {
     return <Loading />;
   }

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

@@ -4,12 +4,13 @@ import {
   Panel,
   Title,
   Toolbar,
+  ToolbarButton,
   ToolbarSpacer,
 } from '@ui5/webcomponents-react';
 import { ControlPlaneType } from '../../lib/api/types/crate/controlPlanes';
 import { useTranslation } from 'react-i18next';
 
-export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) {
+export default function ComponentList({ mcp, onEditClick }: { mcp: ControlPlaneType; onEditClick: () => void }) {
   const { t } = useTranslation();
 
   const data = [
@@ -53,6 +54,7 @@ export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) {
         <Toolbar>
           <Title>{t('common.itemsCount', { count: data.length })}</Title>
           <ToolbarSpacer />
+          <ToolbarButton tooltip={t('editMCP.editComponents')} design="Transparent" icon="edit" onClick={onEditClick} />
         </Toolbar>
       }
     >

src/components/ControlPlane/ComponentList.tsx

@@ -38,11 +38,22 @@ interface Props {
   projectName: string;
 }
 
-export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props) {
+type MCPWizardState = {
+  isOpen: boolean;
+  mode?: 'edit' | 'duplicate';
+};
+export const ControlPlaneCard = ({ controlPlane, workspace, projectName }: Props) => {
   const [dialogDeleteMcpIsOpen, setDialogDeleteMcpIsOpen] = useState(false);
   const toast = useToast();
   const { t } = useTranslation();
-  const [isEditManagedControlPlaneWizardOpen, setIsEditManagedControlPlaneWizardOpen] = useState(false);
+  const [managedControlPlaneWizardState, setManagedControlPlaneWizardState] = useState<MCPWizardState>({
+    isOpen: false,
+    mode: undefined,
+  });
+
+  const handleIsManagedControlPlaneWizardOpen = (isOpen: boolean, mode?: 'edit' | 'duplicate') => {
+    setManagedControlPlaneWizardState({ isOpen, mode });
+  };
   const { trigger: patchTrigger } = useApiResourceMutation<DeleteMCPType>(
     PatchMCPResourceForDeletion(controlPlane.metadata.namespace, controlPlane.metadata.name),
   );
@@ -85,7 +96,7 @@ export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props
               <ControlPlaneCardMenu
                 setDialogDeleteMcpIsOpen={setDialogDeleteMcpIsOpen}
                 isDeleteMcpButtonDisabled={controlPlane.status?.status === ReadyStatus.InDeletion}
-                setIsEditManagedControlPlaneWizardOpen={setIsEditManagedControlPlaneWizardOpen}
+                setIsEditManagedControlPlaneWizardOpen={handleIsManagedControlPlaneWizardOpen}
               />
               <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Center" gap={10}>
                 <YamlViewButtonWithLoader
@@ -130,11 +141,12 @@ export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props
         }}
       />
       <EditManagedControlPlaneWizardDataLoader
-        isOpen={isEditManagedControlPlaneWizardOpen}
-        setIsOpen={setIsEditManagedControlPlaneWizardOpen}
+        isOpen={managedControlPlaneWizardState.isOpen}
+        setIsOpen={(isOpen) => handleIsManagedControlPlaneWizardOpen(isOpen)}
         workspaceName={namespace}
         resourceName={name}
+        mode={managedControlPlaneWizardState.mode}
       />
     </>
   );
-}
+};

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 type ControlPlanesListMenuProps = {
   setDialogDeleteMcpIsOpen: Dispatch<SetStateAction<boolean>>;
   isDeleteMcpButtonDisabled: boolean;
-  setIsEditManagedControlPlaneWizardOpen: Dispatch<SetStateAction<boolean>>;
+  setIsEditManagedControlPlaneWizardOpen: (isOpen: boolean, mode?: 'edit' | 'duplicate') => void;
 };
 
 export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
@@ -34,7 +34,10 @@ export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
         onItemClick={(event) => {
           const action = (event.detail.item as HTMLElement).dataset.action;
           if (action === 'editMcp') {
-            setIsEditManagedControlPlaneWizardOpen(true);
+            setIsEditManagedControlPlaneWizardOpen(true, 'edit');
+          }
+          if (action === 'duplicateMcp') {
+            setIsEditManagedControlPlaneWizardOpen(true, 'duplicate');
           }
           if (action === 'deleteMcp') {
             setDialogDeleteMcpIsOpen(true);
@@ -53,6 +56,7 @@ export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
           icon="delete"
           disabled={isDeleteMcpButtonDisabled}
         />
+        <MenuItem key={'duplicate'} text={t('ControlPlaneCard.duplicateMCP')} data-action="duplicateMcp" icon="copy" />
         <MenuItem
           key={'edit'}
           text={t('ControlPlaneCard.editMCP')}