fix

Author: lucasgoral

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

@@ -67,9 +67,10 @@ type CreateManagedControlPlaneWizardContainerProps = {
   initialTemplateName?: string;
   initialData?: ManagedControlPlaneInterface;
   isOnMcpPage?: boolean;
+  initialSection?: WizardStepType;
 };
 
-type WizardStepType = 'metadata' | 'members' | 'componentSelection' | 'summarize' | 'success';
+export type WizardStepType = 'metadata' | 'members' | 'componentSelection' | 'summarize' | 'success';
 
 const wizardStepOrder: WizardStepType[] = ['metadata', 'members', 'componentSelection', 'summarize', 'success'];
 
@@ -82,12 +83,13 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
   initialTemplateName,
   initialData,
   isOnMcpPage = false,
+  initialSection,
 }) => {
   const { t } = useTranslation();
   const { user } = useAuthOnboarding();
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
 
-  const [selectedStep, setSelectedStep] = useState<WizardStepType>('summarize');
+  const [selectedStep, setSelectedStep] = useState<WizardStepType>(initialSection ?? 'metadata');
   const [metadataFormKey, setMetadataFormKey] = useState(0);
 
   const normalizeChargingTargetType = useCallback((val?: string | null) => (val ?? '').trim().toLowerCase(), []);

src/components/Wizards/CreateManagedControlPlane/EditManagedControlPlaneWizardDataLoader.tsx

@@ -3,7 +3,10 @@ import { useApiResource } from '../../../lib/api/useApiResource.ts';
 import { ResourceObject } from '../../../lib/api/types/crate/resourceObject.ts';
 import styles from './EditManagedControlPlaneWizardDataLoader.module.css';
 
-import { CreateManagedControlPlaneWizardContainer } from './CreateManagedControlPlaneWizardContainer.tsx';
+import {
+  CreateManagedControlPlaneWizardContainer,
+  WizardStepType,
+} from './CreateManagedControlPlaneWizardContainer.tsx';
 import { PROJECT_NAME_LABEL, WORKSPACE_LABEL } from '../../../lib/api/types/shared/keyNames.ts';
 
 import { BusyIndicator } from '@ui5/webcomponents-react';
@@ -15,6 +18,7 @@ export type EditManagedControlPlaneWizardDataLoaderProps = {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   isOnMcpPage?: boolean;
+  initialSection?: WizardStepType;
 };
 
 export const EditManagedControlPlaneWizardDataLoader: FC<EditManagedControlPlaneWizardDataLoaderProps> = ({
@@ -23,6 +27,7 @@ export const EditManagedControlPlaneWizardDataLoader: FC<EditManagedControlPlane
   isOpen,
   setIsOpen,
   isOnMcpPage = false,
+  initialSection,
 }) => {
   const { isLoading, data, error } = useApiResource(
     ResourceObject<ManagedControlPlaneInterface>(workspaceName ?? '', 'managedcontrolplanes', resourceName),
@@ -53,6 +58,7 @@ export const EditManagedControlPlaneWizardDataLoader: FC<EditManagedControlPlane
           isEditMode={true}
           initialData={data}
           isOnMcpPage={isOnMcpPage}
+          initialSection={initialSection}
         />
       ) : null}
     </>

src/spaces/mcp/pages/McpPage.tsx

@@ -1,4 +1,13 @@
-import { BusyIndicator, ObjectPage, ObjectPageSection, ObjectPageTitle, Panel, Title } from '@ui5/webcomponents-react';
+import {
+  BusyIndicator,
+  Button,
+  FlexBox,
+  ObjectPage,
+  ObjectPageSection,
+  ObjectPageTitle,
+  Panel,
+  Title,
+} from '@ui5/webcomponents-react';
 import { useParams } from 'react-router-dom';
 import CopyKubeconfigButton from '../../../components/ControlPlanes/CopyKubeconfigButton.tsx';
 import styles from './McpPage.module.css';
@@ -32,17 +41,29 @@ import { useState } from 'react';
 import { EditManagedControlPlaneWizardDataLoader } from '../../../components/Wizards/CreateManagedControlPlane/EditManagedControlPlaneWizardDataLoader.tsx';
 import { ControlPlanePageMenu } from '../../../components/ControlPlanes/ControlPlanePageMenu.tsx';
 import { DISPLAY_NAME_ANNOTATION } from '../../../lib/api/types/shared/keyNames.ts';
+import { WizardStepType } from '../../../components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx';
 
 export default function McpPage() {
   const { projectName, workspaceName, controlPlaneName } = useParams();
   const { t } = useTranslation();
   const [isEditManagedControlPlaneWizardOpen, setIsEditManagedControlPlaneWizardOpen] = useState(false);
+  const [editManagedControlPlaneWizardSection, setEditManagedControlPlaneWizardSection] = useState<
+    undefined | WizardStepType
+  >(undefined);
   const {
     data: mcp,
     error,
     isLoading,
   } = useApiResource(ControlPlaneResource(projectName, workspaceName, controlPlaneName));
   const displayName = mcp?.metadata?.annotations?.[DISPLAY_NAME_ANNOTATION];
+  const onEditComponents = () => {
+    setEditManagedControlPlaneWizardSection('componentSelection');
+    setIsEditManagedControlPlaneWizardOpen(true);
+  };
+  const handleEditManagedControlPlaneWizardClose = () => {
+    setIsEditManagedControlPlaneWizardOpen(false);
+    setEditManagedControlPlaneWizardSection(undefined);
+  };
   if (isLoading) {
     return <BusyIndicator active />;
   }
@@ -98,10 +119,11 @@ export default function McpPage() {
                     />
                     <EditManagedControlPlaneWizardDataLoader
                       isOpen={isEditManagedControlPlaneWizardOpen}
-                      setIsOpen={setIsEditManagedControlPlaneWizardOpen}
+                      setIsOpen={handleEditManagedControlPlaneWizardClose}
                       workspaceName={mcp?.status?.access?.namespace}
                       resourceName={controlPlaneName}
                       isOnMcpPage
+                      initialSection={editManagedControlPlaneWizardSection}
                     />
                   </div>
                 }
@@ -134,7 +156,14 @@ export default function McpPage() {
                 className={styles.panel}
                 headerLevel="H2"
                 headerText="Panel"
-                header={<Title level="H3">{t('McpPage.componentsTitle')}</Title>}
+                header={
+                  <FlexBox justifyContent={'SpaceBetween'} alignItems={'Center'} style={{ width: '100%' }}>
+                    <Title level="H3">{t('McpPage.componentsTitle')}</Title>{' '}
+                    <Button icon={'edit'} onClick={onEditComponents}>
+                      Edit components
+                    </Button>
+                  </FlexBox>
+                }
                 noAnimation
               >
                 <ComponentList mcp={mcp} />