fix

Author: lucasgoral

src/components/ControlPlanes/ControlPlanesListMenu.tsx

@@ -1,15 +1,15 @@
 import { Button, Menu, MenuItem } from '@ui5/webcomponents-react';
-import { useToast } from '../../context/ToastContext.tsx';
+
 import { useRef, useState } from 'react';
 import '@ui5/webcomponents-icons/dist/copy';
 import '@ui5/webcomponents-icons/dist/accept';
-import { useMcp } from '../../lib/shared/McpContext.tsx';
+
 import { useTranslation } from 'react-i18next';
 
 export const ControlPlanesListMenu = () => {
   const popoverRef = useRef(null);
   const [open, setOpen] = useState(false);
-  const { show } = useToast();
+
   const { t } = useTranslation();
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -21,7 +21,6 @@ export const ControlPlanesListMenu = () => {
       setOpen((prev) => !prev);
     }
   };
-  const mcp = useMcp();
 
   return (
     <>
@@ -30,19 +29,9 @@ export const ControlPlanesListMenu = () => {
         ref={popoverRef}
         open={open}
         onItemClick={(event) => {
-          if (event.detail.item.dataset.action === 'download') {
-            DownloadKubeconfig(mcp.kubeconfig, mcp.name);
-            return;
+          if (event.detail.item.dataset.action === 'newManagedControlPlane') {
           }
-          if (event.detail.item.dataset.action === 'copy') {
-            try {
-              navigator.clipboard.writeText(mcp.kubeconfig ?? '');
-              show(t('CopyKubeconfigButton.copiedMessage'));
-            } catch (error) {
-              //TODO: handle error, show error to user
-              show(`${t('CopyKubeconfigButton.failedMessage')} ${error}`);
-              console.error(error);
-            }
+          if (event.detail.item.dataset.action === 'deleteWorkspace') {
           }
 
           setOpen(false);
@@ -64,28 +53,3 @@ export const ControlPlanesListMenu = () => {
     </>
   );
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function DownloadKubeconfig(config: any, displayName: string) {
-  const filename = 'kubeconfig-' + displayName + '.yaml';
-
-  try {
-    const file = new File([config], filename, {
-      type: 'application/yaml',
-    });
-
-    const link = document.createElement('a');
-    const url = URL.createObjectURL(file);
-
-    link.href = url;
-    link.download = file.name;
-    document.body.appendChild(link);
-    link.click();
-
-    document.body.removeChild(link);
-    window.URL.revokeObjectURL(url);
-  } catch (error) {
-    console.error(error);
-  }
-  // dynaLeaveAction(id);
-}

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -37,7 +37,7 @@ import { YamlViewButtonWithLoader } from '../../Yaml/YamlViewButtonWithLoader.ts
 import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.tsx';
 import { useLink } from '../../../lib/shared/useLink.ts';
 import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
-import CopyKubeconfigButton from '../CopyKubeconfigButton.tsx';
+
 import { ControlPlanesListMenu } from '../ControlPlanesListMenu.tsx';
 
 interface Props {
@@ -105,7 +105,6 @@ export function ControlPlaneListWorkspaceGridTile({
         <Panel
           headerLevel="H2"
           style={{ margin: '12px 12px 12px 0' }}
-          collapsed={controlplanes?.length === 0}
           header={
             <div
               style={{
@@ -162,6 +161,11 @@ export function ControlPlaneListWorkspaceGridTile({
                 link: mcpCreationGuide,
                 buttonText: t('IllustratedBanner.helpButton'),
               }}
+              button={
+                <Button icon={'add'} design={'Emphasized'}>
+                  {t('ControlPlaneListToolbar.createNewManagedControlPlane')}
+                </Button>
+              }
             />
           ) : (
             <Grid defaultSpan="XL4 L4 M7 S12">

src/components/Ui/IllustratedBanner/IllustratedBanner.tsx

@@ -13,13 +13,15 @@ type InfoBannerProps = {
     buttonText: string;
     buttonIcon?: string;
   };
+  button?: React.ReactElement;
 };
 
 export const IllustratedBanner = ({
   title,
   subtitle,
   illustrationName,
   help,
+  button,
 }: InfoBannerProps) => {
   return (
     <FlexBox direction="Column" alignItems="Center">
@@ -41,6 +43,7 @@ export const IllustratedBanner = ({
           </Button>
         </a>
       )}
+      {button}
     </FlexBox>
   );
 };