Merge branch 'main' into feat/deleting-managed-resources

Author: Hubert-Szczepanski-SAP

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,19 +34,20 @@
     "@fastify/static": "8.2.0",
     "@fastify/vite": "8.2.0",
     "@hookform/resolvers": "5.2.2",
-    "@sentry/node": "10.11.0",
-    "@sentry/react": "10.11.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",
     "@ui5/webcomponents-icons": "2.14.0",
     "@ui5/webcomponents-react": "2.14.1",
     "@ui5/webcomponents-react-charts": "2.14.1",
-    "@xyflow/react": "12.8.4",
+    "@xyflow/react": "12.8.5",
     "clsx": "2.1.1",
     "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",
@@ -56,29 +57,29 @@
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-error-boundary": "6.0.0",
-    "react-hook-form": "7.62.0",
+    "react-hook-form": "7.63.0",
     "react-i18next": "15.7.3",
     "react-router-dom": "7.9.1",
     "react-syntax-highlighter": "15.6.6",
     "react-time-ago": "7.3.5",
     "swr": "2.3.6",
     "yaml": "2.8.1",
-    "zod": "4.1.8"
+    "zod": "4.1.11"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.3.1",
-    "@eslint/js": "9.35.0",
+    "@eslint/js": "9.36.0",
     "@graphql-codegen/cli": "6.0.0",
-    "@graphql-codegen/client-preset": "5.0.0",
+    "@graphql-codegen/client-preset": "5.0.1",
     "@types/dagre": "0.7.53",
     "@types/js-yaml": "4.0.9",
-    "@types/node": "22.18.3",
+    "@types/node": "22.18.6",
     "@types/react": "19.1.13",
     "@types/react-dom": "19.1.9",
     "@types/react-syntax-highlighter": "15.5.13",
     "@ui5/webcomponents-cypress-commands": "2.14.1",
-    "@vitejs/plugin-react": "5.0.2",
-    "@vitest/eslint-plugin": "1.3.9",
+    "@vitejs/plugin-react": "5.0.3",
+    "@vitest/eslint-plugin": "1.3.12",
     "cypress": "15.2.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-typescript": "4.4.4",
@@ -94,8 +95,8 @@
     "prettier": "3.6.2",
     "tsx": "4.20.5",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.43.0",
-    "vite": "7.1.5",
+    "typescript-eslint": "8.44.1",
+    "vite": "7.1.7",
     "vitest": "3.2.4"
   }
 }

package.json

@@ -6,7 +6,7 @@
     "signInButton": "Sign in"
   },
   "Entities": {
-    "ManagedControlPlane": "Managed Control Plane",
+    "ManagedControlPlane": "ManagedControlPlane",
     "Project": "Project",
     "Workspace": "Workspace",
     "Users": "Users",
@@ -64,7 +64,11 @@
     "loadingErrorMessage": "Failed to list mcps in workspace"
   },
   "ControlPlaneCard": {
-    "deleteConfirmationDialog": "MCP deletion triggered. The list will refresh automatically once completed."
+    "deleteConfirmationDialog": "MCP deletion triggered. The list will refresh automatically once completed.",
+    "editMCP": "Edit ManagedControlPlane",
+    "duplicateMCP": "Duplicate ManagedControlPlane",
+    "deleteMCP": "Delete ManagedControlPlane"
+
   },
   "ControlPlaneListAllWorkspaces": {
     "emptyListTitleMessage": "No Workspaces created yet",
@@ -91,8 +95,6 @@
   },
   "CopyKubeconfigButton": {
     "kubeconfigButton": "Kubeconfig",
-    "copiedMessage": "Copied to Clipboard",
-    "failedMessage": "Failed to copy, Error:",
     "menuDownload": "Download",
     "menuCopy": "Copy to clipboard"
   },
@@ -109,11 +111,8 @@
     "subtitleMessage": "Sorry, we couldn’t find what you are looking for.<br />The link may be incorrect or the {{entityType}} might have been removed.",
     "navigateHome": "Back to Homepage"
   },
-  "IntelligentBreadcrumbs": {
-    "homeLabel": "Home",
-    "projects": "Projects",
-    "workspaces": "Workspaces",
-    "mcps": "MCPs"
+  "PathAwareBreadcrumbs": {
+    "projectsLabel": "Projects"
   },
   "MCPContext": {
     "errorMessage": "An unknown error occurred"
@@ -223,10 +222,6 @@
     "treeExecution": "Execution",
     "noExecutionFound": "No Executions found"
   },
-  "CopyButton": {
-    "copiedMessage": "Copied To Clipboard",
-    "failedMessage": "Failed to copy"
-  },
   "DeleteWorkspaceDialog": {
     "title": "Delete a Workspace",
     "introSection1": "The below instructions will help you delete the workspace \"{{workspaceName}}\" from project namespace \"{{projectNamespace}}\" using kubectl.",
@@ -360,7 +355,9 @@
     "unhealthy": "Unhealthy",
     "progress": "Managed",
     "remaining": "Remaining",
-    "active": "Active"
+    "active": "Active",
+    "copyToClipboardSuccessToast": "Copied to clipboard",
+    "copyToClipboardFailedToast": "Failed to copy to clipboard"
   },
   "errors": {
     "installError": "Install error",
@@ -376,22 +373,32 @@
     "create": "Create",
     "close": "Close",
     "back": "Back",
-    "cancel": "Cancel"
+    "cancel": "Cancel",
+    "update": "Update"
   },
   "yaml": {
-    "copiedToClipboard": "YAML copied to clipboard!",
     "YAML": "File"
   },
   "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.",
+    "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

@@ -0,0 +1,5 @@
+export const Routes = {
+  Home: '/',
+  Project: '/mcp/projects/:projectName',
+  Mcp: '/mcp/projects/:projectName/workspaces/:workspaceName/mcps/:controlPlaneName',
+} as const;

src/Routes.ts

@@ -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,20 +1,16 @@
-import React, { useEffect, useMemo, useRef, 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;
-  managedControlPlaneTemplate?: ManagedControlPlaneTemplate;
+  isLoading: boolean;
+  error: unknown;
+  templateDefaultsError?: string;
 }
 
 /**
@@ -25,89 +21,19 @@ export const getSelectedComponents = (components: ComponentsListItem[]) => {
   const isCrossplaneSelected = components.some(({ name, isSelected }) => name === 'crossplane' && isSelected);
   return components.filter((component) => {
     if (!component.isSelected) return false;
-    if (component.name?.includes('provider') && !isCrossplaneSelected) {
-      return false;
-    }
+    if (component.name?.includes('provider') && !isCrossplaneSelected) return false;
     return true;
   });
 };
 
-type TemplateDefaultComponent = {
-  name: string;
-  version: string;
-  removable?: boolean;
-  versionChangeable?: boolean;
-};
-
 export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> = ({
   setComponentsList,
   componentsList,
-  managedControlPlaneTemplate,
+  isLoading,
+  error,
+  templateDefaultsError,
 }) => {
-  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(() => {
-    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 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 />;
@@ -117,7 +43,6 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
     return <IllustratedError compact={true} />;
   }
 
-  // Defensive: If the API returned no items, show error
   if (!componentsList || componentsList.length === 0) {
     return <IllustratedError title={t('componentsSelection.cannotLoad')} compact={true} />;
   }