fix: Added a fix that renames some components to make the Creation of MCP work correctly (#176)

Author: lucasgoral

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

@@ -7,7 +7,7 @@ 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 } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+import { ComponentsListItem, removeComponents } from '../../lib/api/types/crate/createManagedControlPlane.ts';
 import { useTranslation } from 'react-i18next';
 
 export interface ComponentsSelectionProps {
@@ -20,9 +20,7 @@ export interface ComponentsSelectionProps {
  * provider components are excluded.
  */
 export const getSelectedComponents = (components: ComponentsListItem[]) => {
-  const isCrossplaneSelected = components.some(
-    ({ name, isSelected }) => name === 'crossplane' && isSelected,
-  );
+  const isCrossplaneSelected = components.some(({ name, isSelected }) => name === 'crossplane' && isSelected);
   return components.filter((component) => {
     if (!component.isSelected) return false;
     if (component.name?.includes('provider') && !isCrossplaneSelected) {
@@ -32,14 +30,11 @@ export const getSelectedComponents = (components: ComponentsListItem[]) => {
   });
 };
 
-export const ComponentsSelectionContainer: React.FC<
-  ComponentsSelectionProps
-> = ({ setComponentsList, componentsList }) => {
-  const {
-    data: availableManagedComponentsListData,
-    error,
-    isLoading,
-  } = useApiResource(ListManagedComponents());
+export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> = ({
+  setComponentsList,
+  componentsList,
+}) => {
+  const { data: availableManagedComponentsListData, error, isLoading } = useApiResource(ListManagedComponents());
   const { t } = useTranslation();
   const initialized = useRef(false);
 
@@ -52,8 +47,8 @@ export const ComponentsSelectionContainer: React.FC<
       return;
     }
 
-    const newComponentsList = availableManagedComponentsListData.items.map(
-      (item) => {
+    const newComponentsList = availableManagedComponentsListData.items
+      .map((item) => {
         const versions = sortVersions(item.status.versions);
         return {
           name: item.metadata.name,
@@ -62,8 +57,8 @@ export const ComponentsSelectionContainer: React.FC<
           isSelected: false,
           documentationUrl: '',
         };
-      },
-    );
+      })
+      .filter((component) => !removeComponents.find((item) => item === component.name));
 
     setComponentsList(newComponentsList);
     initialized.current = true;
@@ -82,10 +77,5 @@ export const ComponentsSelectionContainer: React.FC<
     return <IllustratedError title={t('componentsSelection.cannotLoad')} />;
   }
 
-  return (
-    <ComponentsSelection
-      componentsList={componentsList}
-      setComponentsList={setComponentsList}
-    />
-  );
+  return <ComponentsSelection componentsList={componentsList} setComponentsList={setComponentsList} />;
 };

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

@@ -1,9 +1,5 @@
 import { Resource } from '../resource';
-import {
-  CHARGING_TARGET_LABEL,
-  CHARGING_TARGET_TYPE_LABEL,
-  DISPLAY_NAME_ANNOTATION,
-} from '../shared/keyNames';
+import { CHARGING_TARGET_LABEL, CHARGING_TARGET_TYPE_LABEL, DISPLAY_NAME_ANNOTATION } from '../shared/keyNames';
 import { Member } from '../shared/members';
 
 export type Annotations = Record<string, string>;
@@ -60,6 +56,14 @@ export interface CreateManagedControlPlaneType {
   spec: Spec;
 }
 
+// rename is used to make creation of MCP working properly
+const replaceComponentsName: Record<string, string> = {
+  'sap-btp-service-operator': 'btpServiceOperator',
+  'external-secrets': 'externalSecretsOperator',
+};
+
+export const removeComponents = ['cert-manager'];
+
 export const CreateManagedControlPlane = (
   name: string,
   namespace: string,
@@ -76,10 +80,14 @@ export const CreateManagedControlPlane = (
     optional?.componentsList
       ?.filter(
         (component) =>
-          component.isSelected &&
-          !component.name.includes('provider') &&
-          !component.name.includes('crossplane'),
+          component.isSelected && !component.name.includes('provider') && !component.name.includes('crossplane'),
       )
+      .map((component) => ({
+        ...component,
+        name: Object.prototype.hasOwnProperty.call(replaceComponentsName, component.name)
+          ? replaceComponentsName[component.name]
+          : component.name,
+      }))
       .reduce((acc, item) => {
         acc[item.name] = { version: item.selectedVersion };
         return acc;
@@ -90,9 +98,7 @@ export const CreateManagedControlPlane = (
 
   const providersListObject: Provider[] =
     optional?.componentsList
-      ?.filter(
-        ({ name, isSelected }) => name.includes('provider') && isSelected,
-      )
+      ?.filter(({ name, isSelected }) => name.includes('provider') && isSelected)
       .map(({ name, selectedVersion }) => ({
         name: name,
         version: selectedVersion,
@@ -140,10 +146,7 @@ export const CreateManagedControlPlane = (
     },
   };
 };
-export const CreateManagedControlPlaneResource = (
-  projectName: string,
-  workspaceName: string,
-): Resource<undefined> => {
+export const CreateManagedControlPlaneResource = (projectName: string, workspaceName: string): Resource<undefined> => {
   return {
     path: `/apis/core.openmcp.cloud/v1alpha1/namespaces/${projectName}--ws-${workspaceName}/managedcontrolplanes`,
     method: 'POST',