refactor

Author: lucasgoral

public/locales/en.json

@@ -60,6 +60,7 @@
   "ControlPlaneCard": {
     "deleteConfirmationDialog": "MCP deletion triggered. The list will refresh automatically once completed.",
     "editMCP": "Edit Managed Control Plane",
+    "duplicateMCP": "Duplicate Managed Control Plane",
     "deleteMCP": "Delete Managed Control Plane"
 
   },
@@ -383,7 +384,8 @@
   "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",

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx

@@ -38,11 +38,22 @@ interface Props {
   projectName: string;
 }
 
-export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props) {
+type MCPWizardState = {
+  isOpen: boolean;
+  mode?: 'edit' | 'duplicate';
+};
+export const ControlPlaneCard = ({ controlPlane, workspace, projectName }: Props) => {
   const [dialogDeleteMcpIsOpen, setDialogDeleteMcpIsOpen] = useState(false);
   const toast = useToast();
   const { t } = useTranslation();
-  const [isEditManagedControlPlaneWizardOpen, setIsEditManagedControlPlaneWizardOpen] = useState(false);
+  const [managedControlPlaneWizardState, setManagedControlPlaneWizardState] = useState<MCPWizardState>({
+    isOpen: false,
+    mode: undefined,
+  });
+
+  const handleIsManagedControlPlaneWizardOpen = (isOpen: boolean, mode?: 'edit' | 'duplicate') => {
+    setManagedControlPlaneWizardState({ isOpen, mode });
+  };
   const { trigger: patchTrigger } = useApiResourceMutation<DeleteMCPType>(
     PatchMCPResourceForDeletion(controlPlane.metadata.namespace, controlPlane.metadata.name),
   );
@@ -85,7 +96,7 @@ export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props
               <ControlPlaneCardMenu
                 setDialogDeleteMcpIsOpen={setDialogDeleteMcpIsOpen}
                 isDeleteMcpButtonDisabled={controlPlane.status?.status === ReadyStatus.InDeletion}
-                setIsEditManagedControlPlaneWizardOpen={setIsEditManagedControlPlaneWizardOpen}
+                setIsEditManagedControlPlaneWizardOpen={handleIsManagedControlPlaneWizardOpen}
               />
               <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Center" gap={10}>
                 <YamlViewButtonWithLoader
@@ -130,11 +141,12 @@ export function ControlPlaneCard({ controlPlane, workspace, projectName }: Props
         }}
       />
       <EditManagedControlPlaneWizardDataLoader
-        isOpen={isEditManagedControlPlaneWizardOpen}
-        setIsOpen={setIsEditManagedControlPlaneWizardOpen}
+        isOpen={managedControlPlaneWizardState.isOpen}
+        setIsOpen={handleIsManagedControlPlaneWizardOpen}
         workspaceName={namespace}
         resourceName={name}
+        mode={managedControlPlaneWizardState.mode}
       />
     </>
   );
-}
+};

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCardMenu.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 type ControlPlanesListMenuProps = {
   setDialogDeleteMcpIsOpen: Dispatch<SetStateAction<boolean>>;
   isDeleteMcpButtonDisabled: boolean;
-  setIsEditManagedControlPlaneWizardOpen: Dispatch<SetStateAction<boolean>>;
+  setIsEditManagedControlPlaneWizardOpen: (isOpen: boolean, mode?: 'edit' | 'duplicate') => void;
 };
 
 export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
@@ -34,7 +34,10 @@ export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
         onItemClick={(event) => {
           const action = (event.detail.item as HTMLElement).dataset.action;
           if (action === 'editMcp') {
-            setIsEditManagedControlPlaneWizardOpen(true);
+            setIsEditManagedControlPlaneWizardOpen(true, 'edit');
+          }
+          if (action === 'duplicateMcp') {
+            setIsEditManagedControlPlaneWizardOpen(true, 'duplicate');
           }
           if (action === 'deleteMcp') {
             setDialogDeleteMcpIsOpen(true);
@@ -53,6 +56,7 @@ export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
           icon="delete"
           disabled={isDeleteMcpButtonDisabled}
         />
+        <MenuItem key={'duplicate'} text={t('ControlPlaneCard.duplicateMCP')} data-action="duplicateMcp" icon="copy" />
         <MenuItem
           key={'edit'}
           text={t('ControlPlaneCard.editMCP')}

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

@@ -63,7 +63,8 @@ type CreateManagedControlPlaneWizardContainerProps = {
   setIsOpen: (isOpen: boolean) => void;
   projectName?: string;
   workspaceName?: string;
-  isEditMode: boolean;
+  isEditMode?: boolean;
+  isDuplicateMode?: boolean;
   initialTemplateName?: string;
   initialData?: ManagedControlPlaneInterface;
   isOnMcpPage?: boolean;
@@ -80,6 +81,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
   projectName = '',
   workspaceName = '',
   isEditMode = false,
+  isDuplicateMode = false,
   initialTemplateName,
   initialData,
   isOnMcpPage = false,
@@ -399,7 +401,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
 
   // Prefill form when editing
   useEffect(() => {
-    if (!isOpen || !isEditMode) return;
+    if (!isOpen || !initialData) return;
     const roleBindings = initialData?.spec?.authorization?.roleBindings ?? [];
     const members: Member[] = roleBindings.flatMap((rb) =>
       (rb.subjects ?? []).map((s: MCPSubject) => ({
@@ -409,10 +411,11 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
         namespace: s.namespace,
       })),
     );
+    const name = initialData?.metadata?.name ?? '';
     const labels = (initialData?.metadata?.labels as unknown as Record<string, string>) ?? {};
     const annotations = (initialData?.metadata?.annotations as unknown as Record<string, string>) ?? {};
     const data = {
-      name: initialData?.metadata?.name ?? '',
+      name: isDuplicateMode && !!name ? `${name}${t('createMCP.copySuffix')}` : name,
       displayName: annotations?.[DISPLAY_NAME_ANNOTATION] ?? '',
       chargingTarget: labels?.[CHARGING_TARGET_LABEL] ?? '',
       chargingTargetType: labels?.[CHARGING_TARGET_TYPE_LABEL]?.toLowerCase() ?? '',
@@ -550,7 +553,6 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
         data-testid="create-mcp-dialog"
         onClose={resetFormAndClose}
       >
-        {' '}
         <ComponentsSelectionProvider
           componentsList={componentsList ?? []}
           setComponentsList={setComponentsList}

src/components/Wizards/CreateManagedControlPlane/EditManagedControlPlaneWizardDataLoader.tsx

@@ -19,6 +19,7 @@ export type EditManagedControlPlaneWizardDataLoaderProps = {
   setIsOpen: (isOpen: boolean) => void;
   isOnMcpPage?: boolean;
   initialSection?: WizardStepType;
+  mode?: 'edit' | 'duplicate';
 };
 
 export const EditManagedControlPlaneWizardDataLoader: FC<EditManagedControlPlaneWizardDataLoaderProps> = ({
@@ -28,6 +29,7 @@ export const EditManagedControlPlaneWizardDataLoader: FC<EditManagedControlPlane
   setIsOpen,
   isOnMcpPage = false,
   initialSection,
+  mode = 'edit',
 }) => {
   const { isLoading, data, error } = useApiResource(
     ResourceObject<ManagedControlPlaneInterface>(workspaceName ?? '', 'managedcontrolplanes', resourceName),
@@ -55,7 +57,8 @@ export const EditManagedControlPlaneWizardDataLoader: FC<EditManagedControlPlane
           setIsOpen={setIsOpen}
           projectName={`project-${data?.metadata?.labels?.[PROJECT_NAME_LABEL]}`}
           workspaceName={data?.metadata?.labels?.[WORKSPACE_LABEL]}
-          isEditMode={true}
+          isEditMode={mode === 'edit'}
+          isDuplicateMode={mode === 'duplicate'}
           initialData={data}
           isOnMcpPage={isOnMcpPage}
           initialSection={initialSection}