fix: Remaping Components names of MCP mapping fix (#335)

Author: lucasgoral

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ComponentsSelection } from './ComponentsSelection.tsx';
 import IllustratedError from '../Shared/IllustratedError.tsx';
 import Loading from '../Shared/Loading.tsx';
-import { ComponentsListItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+import { ComponentsListItem, replaceComponentsName } from '../../lib/api/types/crate/createManagedControlPlane.ts';
 import { useTranslation } from 'react-i18next';
 
 export interface ComponentsSelectionProps {
@@ -19,11 +19,16 @@ export interface ComponentsSelectionProps {
  */
 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;
-    return true;
-  });
+
+  return components
+    .filter(({ isSelected, name }) => isSelected && (isCrossplaneSelected || !name?.includes('provider')))
+    .map((component) => {
+      const mapping = replaceComponentsName.find((m) => m.replaceName === component.name);
+      return {
+        ...component,
+        name: mapping ? mapping.originalName : component.name,
+      };
+    });
 };
 
 export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> = ({

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

@@ -34,6 +34,7 @@ import {
   CreateManagedControlPlaneResource,
   CreateManagedControlPlaneType,
   UpdateManagedControlPlaneResource,
+  replaceComponentsName,
 } from '../../../lib/api/types/crate/createManagedControlPlane.ts';
 import {
   CHARGING_TARGET_LABEL,
@@ -63,6 +64,16 @@ import { Infobox } from '../../Ui/Infobox/Infobox.tsx';
 import styles from './CreateManagedControlPlaneWizardContainer.module.css';
 import { useCreateManagedControlPlane as _useCreateManagedControlPlane } from '../../../hooks/useCreateManagedControlPlane.tsx';
 
+// Remap MCP components keys from internal replaceName back to originalName using replaceComponentsName mapping
+const remapComponentsKeysToOriginalNames = (components: MCPComponentsSpec = {}): MCPComponentsSpec => {
+  const remappedEntries = Object.entries(components).map(([key, value]) => {
+    const mapping = replaceComponentsName.find((m) => m.replaceName === key);
+    const newKey = mapping ? mapping.originalName : key;
+    return [newKey, value] as const;
+  });
+  return Object.fromEntries(remappedEntries) as MCPComponentsSpec;
+};
+
 type CreateManagedControlPlaneWizardContainerProps = {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
@@ -384,8 +395,11 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
   // Prepare initial selections for components when editing or duplicating
   const initialSelection = useMemo(() => {
     if (!isEditMode && !isDuplicateMode) return undefined;
+
+    const originalComponentsMap: MCPComponentsSpec = initialData?.spec.components ?? {};
+    const componentsMap = remapComponentsKeysToOriginalNames(originalComponentsMap);
+
     const selection: Record<string, { isSelected: boolean; version: string }> = {};
-    const componentsMap: MCPComponentsSpec = initialData?.spec.components ?? {};
     (Object.keys(componentsMap) as (keyof MCPComponentsSpec)[]).forEach((key) => {
       if (key === 'apiServer') return;
       const value = componentsMap[key];

src/lib/api/types/crate/createManagedControlPlane.ts

@@ -57,13 +57,12 @@ export interface CreateManagedControlPlaneType {
   spec: Spec;
 }
 
-const componentNameMap: Record<string, string> = {
-  'sap-btp-service-operator': 'btpServiceOperator',
-  'external-secrets': 'externalSecretsOperator',
-};
+export const removeComponents = ['cert-manager'];
 
-export const removedComponents = ['cert-manager'];
-export const removeComponents = removedComponents; // backward compatibility alias
+export const replaceComponentsName: { originalName: string; replaceName: string }[] = [
+  { originalName: 'sap-btp-service-operator', replaceName: 'btpServiceOperator' },
+  { originalName: 'external-secrets', replaceName: 'externalSecretsOperator' },
+];
 
 export const CreateManagedControlPlane = (
   name: string,
@@ -83,12 +82,13 @@ export const CreateManagedControlPlane = (
         (component) =>
           component.isSelected && !component.name.includes('provider') && !component.name.includes('crossplane'),
       )
-      .map((component) => ({
-        ...component,
-        name: Object.prototype.hasOwnProperty.call(componentNameMap, component.name)
-          ? componentNameMap[component.name]
-          : component.name,
-      }))
+      .map((component) => {
+        const mapping = replaceComponentsName.find((m) => m.originalName === component.name);
+        return {
+          ...component,
+          name: mapping ? mapping.replaceName : component.name,
+        };
+      })
       .reduce((acc, item) => {
         acc[item.name] = { version: item.selectedVersion };
         return acc;