feat(HMS-3686): Update position of blueprint buttons

src/Components/Blueprints/BlueprintActionsMenu.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
+
+interface BlueprintActionsMenuProps {
+  selectedBlueprint: string | undefined;
+  setShowDeleteModal: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const BlueprintActionsMenu: React.FunctionComponent<
+  BlueprintActionsMenuProps
+> = ({ selectedBlueprint, setShowDeleteModal }: BlueprintActionsMenuProps) => {
+  const [showBlueprintActionsMenu, setShowBlueprintActionsMenu] =
+    useState(false);
+  const onSelect = () => {
+    setShowBlueprintActionsMenu(!showBlueprintActionsMenu);
+  };
+
+  return (
+    <Dropdown
+      ouiaId={`blueprints-dropdown`}
+      isOpen={showBlueprintActionsMenu}
+      onSelect={onSelect}
+      onOpenChange={(showBlueprintActionsMenu: boolean) =>
+        setShowBlueprintActionsMenu(showBlueprintActionsMenu)
+      }
+      shouldFocusToggleOnSelect
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          isExpanded={showBlueprintActionsMenu}
+          onClick={() => setShowBlueprintActionsMenu(!showBlueprintActionsMenu)}
+          variant="plain"
+          aria-label="blueprint menu toggle"
+          isDisabled={selectedBlueprint === undefined}
+        >
+          <EllipsisVIcon aria-hidden="true" />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem>Edit details</DropdownItem>
+        <DropdownItem>Download blueprint (.json)</DropdownItem>
+        <DropdownItem onClick={() => setShowDeleteModal(true)}>
+          Delete blueprint
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};

src/Components/Blueprints/BuildImagesButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Button } from '@patternfly/react-core';
+
+import { useComposeBlueprintMutation } from '../../store/imageBuilderApi';
+
+interface BuildImagesButtonProps {
+  selectedBlueprint?: string | undefined;
+}
+
+export const BuildImagesButton: React.FunctionComponent<
+  BuildImagesButtonProps
+> = ({ selectedBlueprint }: BuildImagesButtonProps) => {
+  const [buildBlueprint, { isLoading: imageBuildLoading }] =
+    useComposeBlueprintMutation();
+  const onBuildHandler = async () => {
+    selectedBlueprint && (await buildBlueprint({ id: selectedBlueprint }));
+  };
+  return (
+    <Button
+      ouiaId="build-images-button"
+      onClick={onBuildHandler}
+      isDisabled={!selectedBlueprint}
+      isLoading={imageBuildLoading}
+    >
+      Build images
+    </Button>
+  );
+};

src/Components/Blueprints/DeleteBlueprintModal.tsx

@@ -7,22 +7,27 @@ import {
   ModalVariant,
 } from '@patternfly/react-core';
 
-import { useGetBlueprintsQuery } from '../../store/imageBuilderApi';
+import {
+  useDeleteBlueprintMutation,
+  useGetBlueprintsQuery,
+} from '../../store/imageBuilderApi';
 
 interface DeleteBlueprintModalProps {
-  onDelete: () => Promise<void>;
   selectedBlueprint: string | undefined;
+  setSelectedBlueprint: React.Dispatch<
+    React.SetStateAction<string | undefined>
+  >;
+  setShowDeleteModal: React.Dispatch<React.SetStateAction<boolean>>;
   isOpen: boolean;
-  onClose: () => void;
 }
 
 export const DeleteBlueprintModal: React.FunctionComponent<
   DeleteBlueprintModalProps
 > = ({
-  onDelete,
   selectedBlueprint,
+  setSelectedBlueprint,
+  setShowDeleteModal,
   isOpen,
-  onClose,
 }: DeleteBlueprintModalProps) => {
   const { blueprintName } = useGetBlueprintsQuery(
     { search: undefined },
@@ -35,20 +40,33 @@ export const DeleteBlueprintModal: React.FunctionComponent<
       }),
     }
   );
+  const [deleteBlueprint] = useDeleteBlueprintMutation({
+    fixedCacheKey: 'delete-blueprint',
+  });
+  const handleDelete = async () => {
+    if (selectedBlueprint) {
+      setShowDeleteModal(false);
+      await deleteBlueprint({ id: selectedBlueprint });
+      setSelectedBlueprint(undefined);
+    }
+  };
+  const onDeleteClose = () => {
+    setShowDeleteModal(false);
+  };
   return (
     <Modal
       variant={ModalVariant.small}
       titleIconVariant="warning"
       isOpen={isOpen}
-      onClose={onClose}
+      onClose={onDeleteClose}
       title={`Permanently delete ${blueprintName}?`}
       description={'All versions will be lost.'}
     >
       <ActionGroup>
-        <Button variant="danger" type="button" onClick={onDelete}>
+        <Button variant="danger" type="button" onClick={handleDelete}>
           Delete
         </Button>
-        <Button variant="link" type="button" onClick={onClose}>
+        <Button variant="link" type="button" onClick={onDeleteClose}>
           Cancel
         </Button>
       </ActionGroup>