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

src/Components/sharedComponents/ImageBuilderHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import {
   Button,
@@ -7,74 +7,33 @@ import {
   TextContent,
   Flex,
   FlexItem,
-  Dropdown,
-  DropdownList,
-  MenuToggle,
-  MenuToggleElement,
-  DropdownItem,
 } from '@patternfly/react-core';
-import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
+import {
+  ExternalLinkAltIcon,
+  HelpIcon,
+  ImportIcon,
+} from '@patternfly/react-icons';
 // eslint-disable-next-line rulesdir/disallow-fec-relative-imports
 import {
   OpenSourceBadge,
   PageHeader,
   PageHeaderTitle,
 } from '@redhat-cloud-services/frontend-components';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
-import {
-  useComposeBlueprintMutation,
-  useDeleteBlueprintMutation,
-} from '../../store/imageBuilderApi';
 import { resolveRelPath } from '../../Utilities/path';
 import './ImageBuilderHeader.scss';
-import { DeleteBlueprintModal } from '../Blueprints/DeleteBlueprintModal';
 
 type ImageBuilderHeaderPropTypes = {
   experimentalFlag?: string | true | undefined;
-  selectedBlueprint?: string | undefined;
 };
 
 export const ImageBuilderHeader = ({
   experimentalFlag,
-  selectedBlueprint,
 }: ImageBuilderHeaderPropTypes) => {
-  const [buildBlueprint, { isLoading: imageBuildLoading }] =
-    useComposeBlueprintMutation();
-  const navigate = useNavigate();
-
-  const onBuildHandler = async () => {
-    selectedBlueprint && (await buildBlueprint({ id: selectedBlueprint }));
-  };
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const onSelect = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const [showDeleteModal, setShowDeleteModal] = React.useState(false);
-  const [deleteBlueprint] = useDeleteBlueprintMutation({
-    fixedCacheKey: 'delete-blueprint',
-  });
-  const handleDelete = async () => {
-    if (selectedBlueprint) {
-      setShowDeleteModal(false);
-      await deleteBlueprint({ id: selectedBlueprint });
-    }
-  };
-  const onDeleteClose = () => {
-    setShowDeleteModal(false);
-  };
-
   return (
     <>
-      {/*@ts-ignore*/}
-      <DeleteBlueprintModal
-        onDelete={handleDelete}
-        selectedBlueprint={selectedBlueprint}
-        isOpen={showDeleteModal}
-        onClose={onDeleteClose}
-      />
-      <PageHeader>
+      <PageHeader data-testid="image-builder-header">
         <Flex>
           <FlexItem>
             <PageHeaderTitle className="title" title="Images" />
@@ -139,58 +98,17 @@ export const ImageBuilderHeader = ({
               <FlexItem align={{ default: 'alignRight' }}>
                 <Link
                   to={resolveRelPath('imagewizard')}
-                  className="pf-c-button pf-m-primary"
+                  className="pf-c-button pf-m-tertiary"
                   data-testid="create-image-action"
                 >
                   Create
                 </Link>
               </FlexItem>
               <FlexItem>
-                <Button
-                  ouiaId="build-images-button"
-                  onClick={onBuildHandler}
-                  isDisabled={!selectedBlueprint}
-                  isLoading={imageBuildLoading}
-                >
-                  Build images
+                <Button variant="link" icon={<ImportIcon />} iconPosition="end">
+                  Import{' '}
                 </Button>
               </FlexItem>
-              <FlexItem>
-                <Dropdown
-                  ouiaId={`blueprints-dropdown`}
-                  isOpen={isOpen}
-                  onSelect={onSelect}
-                  onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
-                  shouldFocusToggleOnSelect
-                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      isExpanded={isOpen}
-                      onClick={() => setIsOpen(!isOpen)}
-                      variant="secondary"
-                      aria-label={`blueprint ${selectedBlueprint} menu toggle`}
-                      isDisabled={selectedBlueprint === undefined}
-                    >
-                      Blueprint actions
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>
-                    <DropdownItem
-                      onClick={() =>
-                        navigate(
-                          resolveRelPath(`imagewizard/${selectedBlueprint}`)
-                        )
-                      }
-                    >
-                      Edit details
-                    </DropdownItem>
-                    <DropdownItem onClick={() => setShowDeleteModal(true)}>
-                      Delete blueprint
-                    </DropdownItem>
-                  </DropdownList>
-                </Dropdown>
-              </FlexItem>{' '}
             </>
           )}
         </Flex>