feat(HMS-3390): Add delete button in the dropdown menu to delete a blueprint

src/Components/Blueprints/BlueprintCard.tsx

@@ -12,10 +12,16 @@ import {
   MenuToggle,
   MenuToggleElement,
   DropdownItem,
+  Spinner,
 } from '@patternfly/react-core';
 import { EllipsisVIcon } from '@patternfly/react-icons';
 
-import { BlueprintItem } from '../../store/imageBuilderApi';
+import { DeleteBlueprintModal } from './DeleteBlueprintModal';
+
+import {
+  BlueprintItem,
+  useDeleteBlueprintMutation,
+} from '../../store/imageBuilderApi';
 
 type blueprintProps = {
   blueprint: BlueprintItem;
@@ -36,6 +42,16 @@ const BlueprintCard = ({
     setIsOpen(!isOpen);
   };
 
+  const [showDeleteModal, setShowDeleteModal] = React.useState(false);
+  const [deleteBlueprint, { isLoading }] = useDeleteBlueprintMutation();
+  const handleDelete = async () => {
+    setShowDeleteModal(false);
+    await deleteBlueprint({ id: blueprint.id });
+  };
+  const onDeleteClose = () => {
+    setShowDeleteModal(false);
+  };
+
   const onClickHandler = ({
     currentTarget: { id: blueprintID },
   }: React.ChangeEvent<HTMLInputElement>) => {
@@ -63,37 +79,49 @@ const BlueprintCard = ({
       >
         <DropdownList>
           <DropdownItem>Edit details</DropdownItem>
-          <DropdownItem>Delete blueprint</DropdownItem>
+          <DropdownItem onClick={() => setShowDeleteModal(true)}>
+            Delete blueprint
+          </DropdownItem>
         </DropdownList>
       </Dropdown>
     </>
   );
 
   return (
-    <Card
-      ouiaId={`blueprint-card-${blueprint.id}`}
-      isCompact
-      isClickable
-      isSelectable
-      isSelected={isChecked}
-    >
-      <CardHeader
-        selectableActions={{
-          selectableActionId: blueprint.id,
-          name: blueprint.name,
-          variant: 'single',
-          isChecked: isChecked,
-          onChange: onClickHandler,
-        }}
-        actions={{ actions: headerActions }}
+    <>
+      <DeleteBlueprintModal
+        onDelete={handleDelete}
+        blueprintName={blueprint?.name}
+        isOpen={showDeleteModal}
+        onClose={onDeleteClose}
+      />
+      <Card
+        ouiaId={`blueprint-card-${blueprint.id}`}
+        isCompact
+        isClickable
+        isSelectable
+        isSelected={isChecked}
       >
-        <CardTitle>{blueprint.name}</CardTitle>
-      </CardHeader>
-      <CardBody>{blueprint.description}</CardBody>
-      <CardFooter>
-        Version <Badge isRead>{blueprint.version}</Badge>
-      </CardFooter>
-    </Card>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: blueprint.id,
+            name: blueprint.name,
+            variant: 'single',
+            isChecked: isChecked,
+            onChange: onClickHandler,
+          }}
+          actions={{ actions: headerActions }}
+        >
+          <CardTitle>
+            {blueprint.name} {isLoading && <Spinner size="md" />}
+          </CardTitle>
+        </CardHeader>
+        <CardBody>{blueprint.description}</CardBody>
+        <CardFooter>
+          Version <Badge isRead>{blueprint.version}</Badge>
+        </CardFooter>
+      </Card>
+    </>
   );
 };
 

src/Components/Blueprints/DeleteBlueprintModal.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {
+  ActionGroup,
+  Button,
+  Modal,
+  ModalVariant,
+} from '@patternfly/react-core';
+
+interface DeleteBlueprintModalProps {
+  onDelete: () => Promise<void>;
+  blueprintName: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const DeleteBlueprintModal: React.FunctionComponent<
+  DeleteBlueprintModalProps
+> = ({
+  onDelete,
+  blueprintName,
+  isOpen,
+  onClose,
+}: DeleteBlueprintModalProps) => {
+  return (
+    <Modal
+      variant={ModalVariant.small}
+      titleIconVariant="warning"
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`Permanently delete ${blueprintName}?`}
+      description={'All versions will be lost.'}
+    >
+      <ActionGroup>
+        <Button variant="danger" type="button" onClick={onDelete}>
+          Delete
+        </Button>
+        <Button variant="link" type="button" onClick={onClose}>
+          Cancel
+        </Button>
+      </ActionGroup>
+    </Modal>
+  );
+};