init

Author: lucasgoral

public/locales/en.json

@@ -157,7 +157,9 @@
   },
   "ProjectsListView": {
     "pageTitle": "Let's get started",
-    "title": "Projects"
+    "title": "Projects",
+    "deleteProject": "Delete project",
+   "deleteConfirmationDialog": "Project deleted"
   },
   "ControlPlaneView": {
     "accessError": "Managed Control Plane does not have access information yet",
@@ -288,7 +290,8 @@
     "search": "Search",
     "components": "Components",
     "notSelected": "Not selected",
-    "btp": "BTP"
+    "btp": "BTP",
+    "options": "Options"
   },
   "buttons": {
     "viewResource": "View resource",

src/components/Dialogs/DeleteConfirmationDialog.tsx

@@ -1,15 +1,5 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
-import {
-  Bar,
-  Button,
-  Dialog,
-  Form,
-  FormGroup,
-  FormItem,
-  Input,
-  InputDomRef,
-  Label,
-} from '@ui5/webcomponents-react';
+import { Bar, Button, Dialog, Form, FormGroup, FormItem, Input, InputDomRef, Label } from '@ui5/webcomponents-react';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import { useTranslation } from 'react-i18next';
 
@@ -74,7 +64,7 @@ export function DeleteConfirmationDialog({
                 </Button>
                 <Button
                   design={ButtonDesign.Negative}
-                  disabled={confirmed === false}
+                  disabled={!confirmed}
                   onClick={() => {
                     setIsOpen(false);
                     onDeletionConfirmed && onDeletionConfirmed();
@@ -94,27 +84,20 @@ export function DeleteConfirmationDialog({
             </Label>
             <Label>
               {' '}
-              {t('DeleteConfirmationDialog.deleteMessageType')}{' '}
-              <b>{resourceName}</b>{' '}
+              {t('DeleteConfirmationDialog.deleteMessageType')} <b>{resourceName}</b>{' '}
               {t('DeleteConfirmationDialog.deleteMessageConfirm')}
             </Label>
           </FormGroup>
           <FormGroup>
             <FormItem
               labelContent={
                 <Label>
-                  {t('DeleteConfirmationDialog.deleteMessageType')}{' '}
-                  {resourceName}{' '}
+                  {t('DeleteConfirmationDialog.deleteMessageType')} {resourceName}{' '}
                   {t('DeleteConfirmationDialog.deleteMessageConfirm')}
                 </Label>
               }
             >
-              <Input
-                ref={confirmationInput}
-                id="mcp-name-input"
-                placeholder=""
-                onInput={onConfirmationInputChange}
-              />
+              <Input ref={confirmationInput} id="mcp-name-input" placeholder="" onInput={onConfirmationInputChange} />
             </FormItem>
             <FormItem>{kubectl}</FormItem>
           </FormGroup>

src/components/Projects/ProjectsList.tsx

@@ -108,7 +108,7 @@ export default function ProjectsList() {
               alignItems: 'center',
             }}
           >
-            <ProjectsListItemMenu setDialogDeleteProjectIsOpen={() => {}} />
+            <ProjectsListItemMenu projectName={instance.cell.row.original?.projectName ?? ''} />
           </div>
         ),
       },
@@ -127,7 +127,7 @@ export default function ProjectsList() {
         data={stabilizedData}
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onRowClick={(e: any) => {
-          navigate(`/mcp/projects/${data ? [e.detail.row.values.projectName] : ''}`);
+          // navigate(`/mcp/projects/${data ? [e.detail.row.values.projectName] : ''}`);
         }}
       />
     </>

src/components/Projects/ProjectsListItemMenu.tsx

@@ -1,22 +1,31 @@
 import { Button, ButtonDomRef, Menu, MenuItem, Ui5CustomEvent, MenuDomRef } from '@ui5/webcomponents-react';
 import type { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
-import { Dispatch, FC, SetStateAction, useRef, useState } from 'react';
+import { FC, useRef, useState } from 'react';
 import '@ui5/webcomponents-icons/dist/copy';
 import '@ui5/webcomponents-icons/dist/accept';
 
 import { useTranslation } from 'react-i18next';
+import { DeleteConfirmationDialog } from '../Dialogs/DeleteConfirmationDialog.tsx';
+
+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';
 
 type ProjectsListItemMenuProps = {
-  setDialogDeleteProjectIsOpen: Dispatch<SetStateAction<boolean>>;
+  projectName: string;
 };
 
-export const ProjectsListItemMenu: FC<ProjectsListItemMenuProps> = ({ setDialogDeleteProjectIsOpen }) => {
+export const ProjectsListItemMenu: FC<ProjectsListItemMenuProps> = ({ projectName }) => {
   const popoverRef = useRef<MenuDomRef>(null);
   const [open, setOpen] = useState(false);
-
+  const [dialogDeleteProjectIsOpen, setDialogDeleteProjectIsOpen] = useState(false);
   const { t } = useTranslation();
-
+  const toast = useToast();
+  const { trigger } = useApiResourceMutation<DeleteWorkspaceType>(DeleteProjectResource(projectName));
   const handleOpenerClick = (e: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => {
+    e.stopImmediatePropagation();
+    e.stopPropagation();
     if (popoverRef.current && e.currentTarget) {
       popoverRef.current.opener = e.currentTarget as HTMLElement;
       setOpen((prev) => !prev);
@@ -30,6 +39,8 @@ export const ProjectsListItemMenu: FC<ProjectsListItemMenuProps> = ({ setDialogD
         ref={popoverRef}
         open={open}
         onItemClick={(event) => {
+          event.stopImmediatePropagation();
+          event.stopPropagation();
           const action = (event.detail.item as HTMLElement).dataset.action;
           if (action === 'deleteProject') {
             setDialogDeleteProjectIsOpen(true);
@@ -38,8 +49,24 @@ export const ProjectsListItemMenu: FC<ProjectsListItemMenuProps> = ({ setDialogD
           setOpen(false);
         }}
       >
-        <MenuItem key={'delete'} text={t('Project.deleteProject')} data-action="deleteProject" icon="delete" />
+        <MenuItem key={'delete'} text={t('ProjectsListView.deleteProject')} data-action="deleteProject" icon="delete" />
       </Menu>
+
+      {dialogDeleteProjectIsOpen && (
+        <DeleteConfirmationDialog
+          resourceName={projectName}
+          kubectl={
+            // <KubectlDeleteWorkspace projectName={projectName} resourceName={workspaceName} />
+            <div />
+          }
+          isOpen={dialogDeleteProjectIsOpen}
+          setIsOpen={setDialogDeleteProjectIsOpen}
+          onDeletionConfirmed={async () => {
+            await trigger();
+            toast.show(t('ProjectsListView.deleteConfirmationDialog'));
+          }}
+        />
+      )}
     </div>
   );
 };

src/components/Yaml/YamlViewButtonWithLoader.tsx

@@ -12,11 +12,7 @@ export type YamlViewButtonProps = {
   resourceName: string;
 };
 
-export const YamlViewButtonWithLoader: FC<YamlViewButtonProps> = ({
-  workspaceName,
-  resourceType,
-  resourceName,
-}) => {
+export const YamlViewButtonWithLoader: FC<YamlViewButtonProps> = ({ workspaceName, resourceType, resourceName }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useTranslation();
   return (
@@ -25,11 +21,7 @@ export const YamlViewButtonWithLoader: FC<YamlViewButtonProps> = ({
         isOpen={isOpen}
         setIsOpen={setIsOpen}
         dialogContent={
-          <YamlLoader
-            workspaceName={workspaceName}
-            resourceName={resourceName}
-            resourceType={resourceType}
-          />
+          <YamlLoader workspaceName={workspaceName} resourceName={resourceName} resourceType={resourceType} />
         }
       />
 

src/lib/api/types/crate/deleteProject.ts

@@ -0,0 +1,15 @@
+import { Resource } from '../resource';
+
+export interface DeleteProjectType {
+  name: string;
+  namespace: string;
+}
+
+export const DeleteProjectResource = (projectName: string): Resource<undefined> => {
+  return {
+    path: `/apis/core.openmcp.cloud/v1alpha1/projects/${projectName}`,
+    method: 'DELETE',
+    jq: undefined,
+    body: undefined,
+  };
+};