reafctor

Author: lucasgoral

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCardMenu.tsx

@@ -7,16 +7,10 @@ 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,
-}) => {
+export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({ setIsEditManagedControlPlaneWizardOpen }) => {
   const buttonRef = useRef(null);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
   const { t } = useTranslation();
@@ -36,30 +30,14 @@ export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
           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}
-        />
+        <MenuItem key={'edit'} text={t('ControlPlaneCard.editMCP')} data-action="editMcp" icon="edit" />
       </Menu>
     </>
   );

src/components/ControlPlanes/ControlPlanePageMenu.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 ControlPlanePageeMenu: 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>
+    </>
+  );
+};

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

@@ -48,7 +48,7 @@ import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.
 import { ManagedControlPlaneTemplate, noTemplateValue } from '../../../lib/api/types/templates/mcpTemplate.ts';
 import { stripIdpPrefix } from '../../../utils/stripIdpPrefix.ts';
 import { buildNameWithPrefixesAndSuffixes } from '../../../utils/buildNameWithPrefixesAndSuffixes.ts';
-import { ManagedControlPlaneInterface } from './mcp_type.ts';
+import { ManagedControlPlaneInterface } from '../../../lib/api/types/mcpResource.ts';
 
 type CreateManagedControlPlaneWizardContainerProps = {
   isOpen: boolean;

src/spaces/mcp/pages/McpPage.tsx

@@ -27,11 +27,14 @@ import { isNotFoundError } from '../../../lib/api/error.ts';
 import { NotFoundBanner } from '../../../components/Ui/NotFoundBanner/NotFoundBanner.tsx';
 import Graph from '../../../components/Graphs/Graph.tsx';
 import HintsCardsRow from '../../../components/HintsCardsRow/HintsCardsRow.tsx';
+import { ControlPlaneCardMenu } from '../../../components/ControlPlanes/ControlPlaneCard/ControlPlaneCardMenu.tsx';
+import { useState } from 'react';
+import { EditManagedControlPlaneWizardDataLoader } from '../../../components/Wizards/CreateManagedControlPlane/EditManagedControlPlaneWizardDataLoader.tsx';
 
 export default function McpPage() {
   const { projectName, workspaceName, controlPlaneName } = useParams();
   const { t } = useTranslation();
-
+  const [isEditManagedControlPlaneWizardOpen, setIsEditManagedControlPlaneWizardOpen] = useState(false);
   const {
     data: mcp,
     error,
@@ -88,6 +91,15 @@ export default function McpPage() {
                       resourceName={controlPlaneName}
                     />
                     <CopyKubeconfigButton />
+                    <ControlPlaneCardMenu
+                      setIsEditManagedControlPlaneWizardOpen={setIsEditManagedControlPlaneWizardOpen}
+                    />
+                    <EditManagedControlPlaneWizardDataLoader
+                      isOpen={isEditManagedControlPlaneWizardOpen}
+                      setIsOpen={setIsEditManagedControlPlaneWizardOpen}
+                      workspaceName={mcp?.status?.access?.namespace}
+                      resourceName={controlPlaneName}
+                    />
                   </div>
                 }
               />