Added MCP delete, Added translation. + small refactor.

Author: fabianwolski

public/locales/en.json

@@ -49,9 +49,9 @@
     "messageHeader": "Message",
     "reasonHeader": "Reason",
     "transitionHeader": "Last transition time"
-  }, 
+  },
   "CopyKubeconfigButton": {
-    "copiedMessage": "Copied to Clipboard", 
+    "copiedMessage": "Copied to Clipboard",
     "failedMessage": "Failed to copy, Error:",
     "menuDownload": "Download",
     "menuCopy": "Copy to clipboard"
@@ -106,7 +106,6 @@
     "errorMessage": "useCopyButton must be used within a CopyButtonProvider"
   },
   "CreateProjectWorkspaceDialog": {
-    "learnButton": "Learn how to do this in code",
     "createButton": "Create",
     "cancelButton": "Cancel",
     "chargingTargetLabel": "Charging Target",
@@ -139,6 +138,79 @@
     "copiedMessage": "Copied To Clipboard",
     "failedMessage": "Failed to copy"
   },
+  "DeleteWorkspaceDialog": {
+    "title": "Delete a Workspace",
+    "introSection1": "The below instructions will help you delete the workspace \"{{workspaceName}}\" from project namespace \"{{projectNamespace}}\" using kubectl.",
+    "introSection2": "Remember that this action is <bold1>irreversible</bold1> and all resources within the workspace will be <bold2>permanently deleted</bold2>.",
+    "mainCommandDescription": "Run this command to delete the workspace:",
+    "verificationCommandDescription": "To verify the workspace has been deleted, run:"
+  },
+  "DeleteMcpDialog": {
+    "title": "Delete a Managed Control Plane",
+    "introSection1": "The below will help you delete the Managed Control Plane \"{{mcpName}}\" from workspace \"{{workspaceNamespace}}\" using kubectl.",
+    "introSection2": "Remember that this action is <bold1>irreversible</bold1> and all resources managed by this control plane will be <bold2>permanently deleted</bold2>.",
+    "annotateCommand": "First, annotate the ManagedControlPlane to confirm deletion:",
+    "deleteCommand": "Run this command to delete the Managed Control Plane:",
+    "verificationCommandDescription": "To verify the MCP has been deleted, run:"
+  },
+  "KubectlProjectDialog": {
+    "title": "Create a Project",
+    "introSection": "A Project is the starting point to our ManagedControlPlane offering. Projects are usually created for each Organization/Team or similar root setups.",
+    "formFields": {
+      "projectName": {
+        "label": "Project Name",
+        "placeholder": "Enter project name"
+      },
+      "chargingTargetId": {
+        "label": "BTP Global Account ID",
+        "placeholder": "Enter your Global Account ID",
+        "defaultValue": "<your-ga-id>"
+      },
+      "userEmail": {
+        "label": "User Email",
+        "placeholder": "Enter your email address",
+        "defaultValue": "<[email protected]>"
+      }
+    },
+    "mainCommandDescription": "Run this command to create a new project:",
+    "resultCommandDescription": "To see the result of the project creation, run the below command:",
+    "namespaceCommandDescription": "A namespace is automatically generated for your project:"
+  },
+  "KubectlWorkspaceDialog": {
+    "title": "Create a Workspace",
+    "introSection": "Let's add a Workspace to our Project. We use workspaces to separate productive and non-productive ManagedControlPlanes.",
+    "formFields": {
+      "workspaceName": {
+        "label": "Workspace Name",
+        "placeholder": "Enter workspace name"
+      },
+      "chargingTargetId": {
+        "label": "BTP Global Account ID",
+        "placeholder": "Enter your Global Account ID",
+        "defaultValue": "<your-ga-id>"
+      },
+      "userEmail": {
+        "label": "User Email",
+        "placeholder": "Enter your email address",
+        "defaultValue": "<[email protected]>"
+      }
+    },
+    "mainCommandDescription": "Run this command to create a new workspace in your project:",
+    "resultCommandDescription": "To see the result of the workspace creation, run the below command:"
+  },
+  "KubectlBaseDialog": {
+    "prerequisites": "Prerequisites",
+    "prerequisitesText": "Make sure you have installed <bold1>kubectl</bold1> and the <bold2>kubelogin</bold2> plugin. We recommend using <bold3>krew</bold3> which is a plugin manager for kubectl.",
+    "formFieldsNote": "<bold1>Important</bold1>: Before executing, modify the commands below:",
+    "onboardingGuide": "You can also use our <link1>Onboarding Guide</link1> for more information."
+  },
+  "CommonKubectl": {
+    "emphasis": {
+      "irreversible": "irreversible",
+      "permanentlyDeleted": "permanently deleted"
+    },
+    "learnButton": "Learn how to do this in code"
+  },
   "App": {
     "loading": "Loading..."
   },
@@ -160,4 +232,4 @@
     "userExists": "User with this email already exists!",
     "atLeastOneUser": "You need to have at least one member assigned."
   }
-}
+}

src/components/ControlPlanes/ControlPlaneCard.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../lib/api/types/crate/deleteMCP.ts';
 import { DeleteConfirmationDialog } from '../Dialogs/DeleteConfirmationDialog.tsx';
 import MCPHealthPopoverButton from '../ControlPlane/MCPHealthPopoverButton.tsx';
+import { KubectlDeleteMcp } from '../Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteMcp.tsx';
 
 interface Props {
   controlPlane: ListControlPlanesType;
@@ -98,6 +99,13 @@ export function ControlPlaneCard({
       </Card>
       <DeleteConfirmationDialog
         resourceName={controlPlane.metadata.name}
+        resourceComponent={
+          <KubectlDeleteMcp
+            projectName={projectName}
+            workspaceName={workspace.metadata.name}
+            resourceName={controlPlane.metadata.name}
+          />
+        }
         isOpen={dialogDeleteMcpIsOpen}
         setIsOpen={setDialogDeleteMcpIsOpen}
         onDeletionConfirmed={async () => {

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -27,6 +27,7 @@ import useApiResource, {
 } from '../../../lib/api/useApiResource.ts';
 import { DISPLAY_NAME_ANNOTATION } from '../../../lib/api/types/shared/keyNames.ts';
 import { DeleteConfirmationDialog } from '../../Dialogs/DeleteConfirmationDialog.tsx';
+import { KubectlDeleteWorkspace } from '../../Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteWorkspace.tsx';
 import { useToast } from '../../../context/ToastContext.tsx';
 import { ListControlPlanes } from '../../../lib/api/types/crate/controlPlanes.ts';
 import IllustratedError from '../../Shared/IllustratedError.tsx';
@@ -155,6 +156,12 @@ export function ControlPlaneListWorkspaceGridTile({
       <DeleteConfirmationDialog
         resourceName={workspaceName}
         projectName={projectName}
+        resourceComponent={
+          <KubectlDeleteWorkspace
+            projectName={projectName}
+            resourceName={workspaceName}
+          />
+        }
         isOpen={dialogDeleteWsIsOpen}
         setIsOpen={setDialogDeleteWsIsOpen}
         onDeletionConfirmed={async () => {

src/components/Dialogs/CreateProjectWorkspaceDialog.tsx

@@ -12,14 +12,15 @@ import {
 import { Member } from '../../lib/api/types/shared/members';
 import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 
-import { useState, FormEvent } from 'react';
+import { FormEvent } from 'react';
 import { KubectlInfoButton } from './KubectlCommandInfo/KubectlInfoButton.tsx';
-import { KubectlWorkspaceDialog } from './KubectlCommandInfo/KubectlWorkspaceDialog.tsx';
-import { KubectlProjectDialog } from './KubectlCommandInfo/KubectlProjectDialog.tsx';
+import { KubectlWorkspaceDialog } from './KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx';
+import { KubectlProjectDialog } from './KubectlCommandInfo/KubectlCreateProjectDialog.tsx';
 
 import { EditMembers } from '../Members/EditMembers.tsx';
 // import { useFrontendConfig } from '../../context/FrontendConfigContext.tsx';
 import { useTranslation } from 'react-i18next';
+import { useDialog } from './UseDialog.tsx';
 
 import { CreateDialogProps } from './CreateWorkspaceDialogContainer.tsx';
 import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
@@ -58,14 +59,7 @@ export function CreateProjectWorkspaceDialog({
 }: CreateProjectWorkspaceDialogProps) {
   // const { links } = useFrontendConfig();
   const { t } = useTranslation();
-  const [isKubectlDialogOpen, setIsKubectlDialogOpen] = useState(false);
-
-  const handleKubectlInfoClick = () => {
-    setIsKubectlDialogOpen(true);
-  };
-  const handleKubectlDialogClose = () => {
-    setIsKubectlDialogOpen(false);
-  };
+  const kubectlDialog = useDialog();
   return (
     <>
       <Dialog
@@ -80,7 +74,7 @@ export function CreateProjectWorkspaceDialog({
               <div
                 style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
               >
-                <KubectlInfoButton onClick={handleKubectlInfoClick} />
+                <KubectlInfoButton onClick={kubectlDialog.open} />
                 <Button onClick={() => setIsOpen(false)}>
                   {' '}
                   {t('CreateProjectWorkspaceDialog.cancelButton')}
@@ -101,16 +95,15 @@ export function CreateProjectWorkspaceDialog({
           setValue={setValue}
         />
       </Dialog>
-
-      {isKubectlDialogOpen &&
-        (projectName ? (
-          <KubectlWorkspaceDialog
-            project={projectName}
-            onClose={handleKubectlDialogClose}
-          />
-        ) : (
-          <KubectlProjectDialog onClose={handleKubectlDialogClose} />
-        ))}
+      <KubectlWorkspaceDialog
+        project={projectName}
+        isOpen={kubectlDialog.isOpen && !!projectName}
+        onClose={kubectlDialog.close}
+      />
+      <KubectlProjectDialog
+        isOpen={kubectlDialog.isOpen && !projectName}
+        onClose={kubectlDialog.close}
+      />
       <ErrorDialog ref={errorDialogRef} />
     </>
   );

src/components/Dialogs/DeleteConfirmationDialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 import {
   Bar,
   Button,
@@ -12,13 +12,13 @@ import {
 } from '@ui5/webcomponents-react';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import { useTranslation } from 'react-i18next';
-import { KubectlDeleteWorkspace } from './KubectlCommandInfo/Controllers/KubectlDeleteWorkspace';
 
 interface DeleteConfirmationDialogProps {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   resourceName: string;
   projectName?: string;
+  resourceComponent: ReactNode;
   onDeletionConfirmed?: () => void;
   onCanceled?: () => void;
 }
@@ -27,9 +27,9 @@ export function DeleteConfirmationDialog({
   isOpen,
   setIsOpen,
   resourceName,
-  projectName,
   onDeletionConfirmed,
   onCanceled,
+  resourceComponent,
 }: DeleteConfirmationDialogProps) {
   const [confirmed, setConfirmed] = useState(false);
   const confirmationInput = useRef<InputDomRef>(null);
@@ -116,12 +116,7 @@ export function DeleteConfirmationDialog({
                 onInput={onConfirmationInputChange}
               />
             </FormItem>
-            <FormItem>
-              <KubectlDeleteWorkspace
-                projectName={projectName}
-                resourceName={resourceName}
-              />
-            </FormItem>
+            <FormItem>{resourceComponent}</FormItem>
           </FormGroup>
         </Form>
       </Dialog>

src/components/Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteMcp.tsx

@@ -0,0 +1,30 @@
+import { DeleteMcpDialog } from '../KubectlDeleteMcpDialog';
+import { KubectlInfoButton } from '../KubectlInfoButton';
+import { useDialog } from '../../UseDialog';
+
+interface KubectlDeleteMcpProps {
+  projectName?: string;
+  workspaceName: string;
+  resourceName: string;
+}
+
+export const KubectlDeleteMcp = ({
+  projectName,
+  workspaceName,
+  resourceName,
+}: KubectlDeleteMcpProps) => {
+  const infoDialog = useDialog();
+
+  return (
+    <>
+      <KubectlInfoButton onClick={infoDialog.open} />
+      <DeleteMcpDialog
+        projectName={projectName}
+        workspaceName={workspaceName}
+        resourceName={resourceName}
+        isOpen={infoDialog.isOpen}
+        onClose={infoDialog.close}
+      />
+    </>
+  );
+};

src/components/Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteWorkspace.tsx

@@ -1,6 +1,6 @@
 import { DeleteWorkspaceDialog } from '../KubectlDeleteWorkspaceDialog';
 import { KubectlInfoButton } from '../KubectlInfoButton';
-import { useState } from 'react';
+import { useDialog } from '../../UseDialog';
 
 interface KubectlDeleteWorkspaceProps {
   projectName?: string;
@@ -11,25 +11,17 @@ export const KubectlDeleteWorkspace = ({
   projectName,
   resourceName,
 }: KubectlDeleteWorkspaceProps) => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-  const closeDialog = () => {
-    setIsDialogOpen(false);
-  };
+  const infoDialog = useDialog();
 
   return (
     <>
-      <KubectlInfoButton
-        onClick={() => setIsDialogOpen(true)}
-      ></KubectlInfoButton>
-
-      {isDialogOpen && (
-        <DeleteWorkspaceDialog
-          onClose={closeDialog}
-          projectName={projectName}
-          resourceName={resourceName}
-        ></DeleteWorkspaceDialog>
-      )}
+      <KubectlInfoButton onClick={infoDialog.open} />
+      <DeleteWorkspaceDialog
+        projectName={projectName}
+        resourceName={resourceName}
+        isOpen={infoDialog.isOpen}
+        onClose={infoDialog.close}
+      />
     </>
   );
 };