refactor

Author: lucasgoral

public/locales/en.json

@@ -159,7 +159,7 @@
     "pageTitle": "Let's get started",
     "title": "Projects",
     "deleteProject": "Delete project",
-   "deleteConfirmationDialog": "Project deleted"
+    "deleteConfirmationDialog": "Project deleted"
   },
   "ControlPlaneView": {
     "accessError": "Managed Control Plane does not have access information yet",
@@ -192,6 +192,12 @@
     "mainCommandDescription": "Run this command to delete the workspace:",
     "verificationCommandDescription": "To verify the workspace has been deleted, run:"
   },
+  "DeleteProjectDialog": {
+    "title": "Delete a Project",
+    "introSection1": "The below instructions will help you delete the project named \"{{projectName}}\" using kubectl.",
+    "introSection2": "Remember that this action is <bold1>irreversible</bold1> and all resources within the project will be <bold2>permanently deleted</bold2>.",
+    "mainCommandDescription": "Run this command to delete the project:"
+  },
   "KubectlDeleteMcpDialog": {
     "title": "Delete a Managed Control Plane",
     "introSection1": "The below will help you delete the Managed Control Plane \"{{mcpName}}\" from workspace \"{{workspaceNamespace}}\" using kubectl.",

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

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+import { KubectlInfoButton } from '../KubectlInfoButton';
+import { DeleteProjectDialog } from '../KubectlDeleteProjectDialog.tsx';
+
+interface KubectlDeleteWorkspaceProps {
+  projectName?: string;
+}
+
+export const KubectlDeleteProject = ({ projectName }: KubectlDeleteWorkspaceProps) => {
+  const [isInfoDialogOpen, setIsInfoDialogOpen] = useState(false);
+
+  const openInfoDialog = () => setIsInfoDialogOpen(true);
+  const closeInfoDialog = () => setIsInfoDialogOpen(false);
+
+  return (
+    <>
+      <KubectlInfoButton onClick={openInfoDialog} />
+      <DeleteProjectDialog projectName={projectName} isOpen={isInfoDialogOpen} onClose={closeInfoDialog} />
+    </>
+  );
+};

src/components/Dialogs/KubectlCommandInfo/KubectlDeleteProjectDialog.tsx

@@ -0,0 +1,54 @@
+import { KubectlBaseDialog, CustomCommand } from './KubectlBaseDialog';
+import { Text } from '@ui5/webcomponents-react';
+import { useTranslation, Trans } from 'react-i18next';
+import { Fragment } from 'react/jsx-runtime';
+
+interface DeleteProjectDialogProps {
+  onClose: () => void;
+  resourceName?: string;
+  projectName?: string;
+  isOpen: boolean;
+}
+
+export const DeleteProjectDialog = ({ onClose, projectName, isOpen }: DeleteProjectDialogProps) => {
+  const { t } = useTranslation();
+
+  const projectNamespace = projectName ?? '<project-names>"';
+
+  const customCommands: CustomCommand[] = [
+    {
+      command: `kubectl delete project  ${projectNamespace}`,
+      description: t('DeleteProjectDialog.mainCommandDescription'),
+      isMainCommand: true,
+    },
+  ];
+
+  const introSection = [
+    <Fragment key="intro-1">
+      <Text>
+        {t('DeleteProjectDialog.introSection1', {
+          projectName,
+        })}
+      </Text>
+      <Text>
+        <Trans
+          i18nKey={t('DeleteProjectDialog.introSection2')}
+          components={{
+            bold1: <b />,
+            bold2: <b />,
+          }}
+        />
+      </Text>
+    </Fragment>,
+  ];
+
+  return (
+    <KubectlBaseDialog
+      title={t('DeleteProjectDialog.title')}
+      introSection={introSection}
+      customCommands={customCommands}
+      open={isOpen}
+      onClose={onClose}
+    />
+  );
+};

src/components/Dialogs/KubectlCommandInfo/KubectlDeleteWorkspaceDialog.tsx

@@ -5,42 +5,27 @@ import { Fragment } from 'react/jsx-runtime';
 
 interface DeleteWorkspaceDialogProps {
   onClose: () => void;
-  resourceName?: string;
   projectName?: string;
   isOpen: boolean;
 }
 
-export const DeleteWorkspaceDialog = ({
-  onClose,
-  resourceName,
-  projectName,
-  isOpen,
-}: DeleteWorkspaceDialogProps) => {
+export const DeleteWorkspaceDialog = ({ onClose, projectName, isOpen }: DeleteWorkspaceDialogProps) => {
   const { t } = useTranslation();
 
-  const projectNamespace = projectName
-    ? `project-${projectName}`
-    : '<project-namespace>"';
-  const workspaceName = resourceName || '<workspace-name>';
+  const projectNamespace = projectName ?? '<project-name>"';
 
   const customCommands: CustomCommand[] = [
     {
-      command: `kubectl delete workspace ${resourceName} -n ${projectNamespace}`,
+      command: `kubectl delete project ${projectName}`,
       description: t('DeleteWorkspaceDialog.mainCommandDescription'),
       isMainCommand: true,
     },
-    {
-      command: `kubectl get workspace -n ${projectNamespace}`,
-      description: t('DeleteWorkspaceDialog.verificationCommandDescription'),
-      isMainCommand: true,
-    },
   ];
 
   const introSection = [
     <Fragment key="intro-1">
       <Text>
         {t('DeleteWorkspaceDialog.introSection1', {
-          workspaceName,
           projectNamespace,
         })}
       </Text>

src/components/Projects/ProjectsList.tsx

@@ -1,5 +1,5 @@
-import { AnalyticalTable, AnalyticalTableColumnDefinition, Button, Link } from '@ui5/webcomponents-react';
-import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { AnalyticalTable, AnalyticalTableColumnDefinition, Link } from '@ui5/webcomponents-react';
+
 import { CopyButton } from '../Shared/CopyButton.tsx';
 import useLuigiNavigate from '../Shared/useLuigiNavigate.tsx';
 import IllustratedError from '../Shared/IllustratedError.tsx';

src/components/Projects/ProjectsListItemMenu.tsx

@@ -11,6 +11,7 @@ import { useToast } from '../../context/ToastContext.tsx';
 import { useApiResourceMutation } from '../../lib/api/useApiResource.ts';
 import { DeleteWorkspaceType } from '../../lib/api/types/crate/deleteWorkspace.ts';
 import { DeleteProjectResource } from '../../lib/api/types/crate/deleteProject.ts';
+import { KubectlDeleteProject } from '../Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteProject.tsx';
 
 type ProjectsListItemMenuProps = {
   projectName: string;
@@ -55,10 +56,7 @@ export const ProjectsListItemMenu: FC<ProjectsListItemMenuProps> = ({ projectNam
       {dialogDeleteProjectIsOpen && (
         <DeleteConfirmationDialog
           resourceName={projectName}
-          kubectl={
-            // <KubectlDeleteWorkspace projectName={projectName} resourceName={workspaceName} />
-            <div />
-          }
+          kubectl={<KubectlDeleteProject projectName={projectName} />}
           isOpen={dialogDeleteProjectIsOpen}
           setIsOpen={setDialogDeleteProjectIsOpen}
           onDeletionConfirmed={async () => {