feat: Edit ManagedControlPlane using the wizard (#287)

Author: lucasgoral

package-lock.json

@@ -45,6 +45,7 @@
     "@xyflow/react": "12.8.4",
     "clsx": "2.1.1",
     "dagre": "0.8.5",
+    "diff": "^8.0.2",
     "dotenv": "17.2.2",
     "fastify": "5.6.0",
     "fastify-plugin": "5.0.1",

package.json

@@ -58,7 +58,10 @@
     "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 Managed Control Plane",
+    "deleteMCP": "Delete Managed Control Plane"
+
   },
   "ControlPlaneListAllWorkspaces": {
     "emptyListTitleMessage": "No Workspaces created yet",
@@ -370,7 +373,8 @@
     "create": "Create",
     "close": "Close",
     "back": "Back",
-    "cancel": "Cancel"
+    "cancel": "Cancel",
+    "update": "Update"
   },
   "yaml": {
     "copiedToClipboard": "YAML copied to clipboard!",
@@ -381,6 +385,11 @@
     "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."
   },
+  "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."
+  },
   "componentsSelection": {
     "selectComponents": "Select Components",
     "selectedComponents": "Selected Components",

public/locales/en.json

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { ComponentsSelection } from './ComponentsSelection.tsx';
 
 import IllustratedError from '../Shared/IllustratedError.tsx';
@@ -14,7 +14,11 @@ import { ManagedControlPlaneTemplate } from '../../lib/api/types/templates/mcpTe
 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>;
 }
 
 /**
@@ -25,9 +29,7 @@ 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;
   });
 };
@@ -43,71 +45,112 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
   setComponentsList,
   componentsList,
   managedControlPlaneTemplate,
+  initialSelection,
+  isOnMcpPage,
+  setInitialComponentsList,
+  initializedComponents,
 }) => {
-  const { data: availableManagedComponentsListData, error, isLoading } = useApiResource(ListManagedComponents());
+  const {
+    data: availableManagedComponentsListData,
+    error,
+    isLoading,
+  } = useApiResource(ListManagedComponents(), undefined, !!isOnMcpPage);
   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);
+    if (
+      initializedComponents.current ||
+      !availableManagedComponentsListData?.items ||
+      availableManagedComponentsListData.items.length === 0
+    ) {
       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;
-    }
+    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]);
 
-    if (!defaultComponents.length) {
+  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);
+      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 : [];
+      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, setComponentsList]);
+  }, [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 />;
@@ -117,7 +160,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} />;
   }

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, FlexBox, Label, Title } from '@ui5/webcomponents-react';
+import { Card, FlexBox, Label, Title } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
 import '@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js';
 import '@ui5/webcomponents-icons/dist/delete';
@@ -27,6 +27,11 @@ import { useToast } from '../../../context/ToastContext.tsx';
 import { canConnectToMCP } from '../controlPlanes.ts';
 import { Infobox } from '../../Ui/Infobox/Infobox.tsx';
 
+import { ControlPlaneCardMenu } from './ControlPlaneCardMenu.tsx';
+
+import { EditManagedControlPlaneWizardDataLoader } from '../../Wizards/CreateManagedControlPlane/EditManagedControlPlaneWizardDataLoader.tsx';
+import { DISPLAY_NAME_ANNOTATION } from '../../../lib/api/types/shared/keyNames.ts';
+
 interface Props {
   controlPlane: ListControlPlanesType;
   workspace: ListWorkspacesType;
@@ -37,7 +42,7 @@ export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props
   const [dialogDeleteMcpIsOpen, setDialogDeleteMcpIsOpen] = useState(false);
   const toast = useToast();
   const { t } = useTranslation();
-
+  const [isEditManagedControlPlaneWizardOpen, setIsEditManagedControlPlaneWizardOpen] = useState(false);
   const { trigger: patchTrigger } = useApiResourceMutation<DeleteMCPType>(
     PatchMCPResourceForDeletion(controlPlane.metadata.namespace, controlPlane.metadata.name),
   );
@@ -46,6 +51,9 @@ export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props
   );
 
   const name = controlPlane.metadata.name;
+  const displayName =
+    controlPlane?.metadata?.annotations?.[DISPLAY_NAME_ANNOTATION as keyof typeof controlPlane.metadata.annotations];
+
   const namespace = controlPlane.metadata.namespace;
 
   const isSystemIdentityProviderEnabled = Boolean(controlPlane.spec?.authentication?.enableSystemIdentityProvider);
@@ -61,7 +69,7 @@ export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props
           <FlexBox direction="Column">
             <FlexBox direction="Row" justifyContent="SpaceBetween">
               <FlexBox direction="Column">
-                <Title level={TitleLevel.H5}>{name}</Title>
+                <Title level={TitleLevel.H5}>{displayName ? displayName : name}</Title>
                 <Label>{workspace.metadata.name} </Label>
               </FlexBox>
               <div>
@@ -74,13 +82,10 @@ export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props
               </div>
             </FlexBox>
             <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Center" className={styles.row}>
-              <Button
-                design={'Transparent'}
-                icon="delete"
-                disabled={controlPlane.status?.status === ReadyStatus.InDeletion}
-                onClick={() => {
-                  setDialogDeleteMcpIsOpen(true);
-                }}
+              <ControlPlaneCardMenu
+                setDialogDeleteMcpIsOpen={setDialogDeleteMcpIsOpen}
+                isDeleteMcpButtonDisabled={controlPlane.status?.status === ReadyStatus.InDeletion}
+                setIsEditManagedControlPlaneWizardOpen={setIsEditManagedControlPlaneWizardOpen}
               />
               <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Center" gap={10}>
                 <YamlViewButtonWithLoader
@@ -124,6 +129,12 @@ export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props
           toast.show(t('ControlPlaneCard.deleteConfirmationDialog'));
         }}
       />
+      <EditManagedControlPlaneWizardDataLoader
+        isOpen={isEditManagedControlPlaneWizardOpen}
+        setIsOpen={setIsEditManagedControlPlaneWizardOpen}
+        workspaceName={namespace}
+        resourceName={name}
+      />
     </>
   );
 }

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx

@@ -0,0 +1,66 @@
+import { Button, Menu, MenuItem } from '@ui5/webcomponents-react';
+
+import { Dispatch, FC, SetStateAction, useRef, useState } from 'react';
+import '@ui5/webcomponents-icons/dist/copy';
+import '@ui5/webcomponents-icons/dist/accept';
+
+import { useTranslation } from 'react-i18next';
+
+type ControlPlanesListMenuProps = {
+  setDialogDeleteMcpIsOpen: Dispatch<SetStateAction<boolean>>;
+  isDeleteMcpButtonDisabled: boolean;
+  setIsEditManagedControlPlaneWizardOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
+  setDialogDeleteMcpIsOpen,
+  isDeleteMcpButtonDisabled,
+  setIsEditManagedControlPlaneWizardOpen,
+}) => {
+  const buttonRef = useRef(null);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const { t } = useTranslation();
+
+  const handleOpenerClick = () => {
+    setMenuIsOpen(true);
+  };
+
+  return (
+    <>
+      <Button ref={buttonRef} icon="overflow" icon-end onClick={handleOpenerClick} />
+      <Menu
+        open={menuIsOpen}
+        opener={buttonRef.current}
+        onItemClick={(event) => {
+          const action = (event.detail.item as HTMLElement).dataset.action;
+          if (action === 'editMcp') {
+            setIsEditManagedControlPlaneWizardOpen(true);
+          }
+          if (action === 'deleteMcp') {
+            setDialogDeleteMcpIsOpen(true);
+          }
+
+          setMenuIsOpen(false);
+        }}
+        onClose={() => {
+          setMenuIsOpen(false);
+        }}
+      >
+        <MenuItem
+          key={'delete'}
+          text={t('ControlPlaneCard.deleteMCP')}
+          data-action="deleteMcp"
+          icon="delete"
+          disabled={isDeleteMcpButtonDisabled}
+        />
+        <MenuItem
+          key={'edit'}
+          text={t('ControlPlaneCard.editMCP')}
+          data-action="editMcp"
+          icon="edit"
+          disabled={isDeleteMcpButtonDisabled}
+        />
+      </Menu>
+    </>
+  );
+};