feat(HMS-3431): add a blueprint build images

src/Components/ImagesTable/ImagesTable.tsx

@@ -82,7 +82,7 @@ const ImagesTable = ({ selectedBlueprint }: ImageTableProps) => {
   const {
     data: blueprintsComposes,
     isSuccess: isBlueprintsSuccess,
-    isFetching: isFetchingBlueprintsCompose,
+    isLoading: isLoadingBlueprintsCompose,
     isError: isBlueprintsError,
   } = useGetBlueprintComposesQuery(
     {
@@ -97,7 +97,7 @@ const ImagesTable = ({ selectedBlueprint }: ImageTableProps) => {
     data: composesData,
     isSuccess: isComposesSuccess,
     isError: isComposesError,
-    isFetching: isFetchingComposes,
+    isLoading: isLoadingComposes,
   } = useGetComposesQuery(
     {
       limit: perPage,
@@ -115,11 +115,11 @@ const ImagesTable = ({ selectedBlueprint }: ImageTableProps) => {
   const data = selectedBlueprint ? blueprintsComposes : composesData;
   const isSuccess = selectedBlueprint ? isBlueprintsSuccess : isComposesSuccess;
   const isError = selectedBlueprint ? isBlueprintsError : isComposesError;
-  const isFetching = selectedBlueprint
-    ? isFetchingBlueprintsCompose
-    : isFetchingComposes;
+  const isLoading = selectedBlueprint
+    ? isLoadingBlueprintsCompose
+    : isLoadingComposes;
 
-  if (isFetching) {
+  if (isLoading) {
     return (
       <Bullseye>
         <Spinner />

src/Components/LandingPage/LandingPage.tsx

@@ -96,7 +96,10 @@ export const LandingPage = () => {
 
   return (
     <>
-      <ImageBuilderHeader experimentalFlag={experimentalFlag} />
+      <ImageBuilderHeader
+        experimentalFlag={experimentalFlag}
+        selectedBlueprint={selectedBlueprint}
+      />
       {edgeParityFlag ? (
         <Tabs
           className="pf-c-tabs pf-c-page-header pf-c-table"

src/Components/sharedComponents/ImageBuilderHeader.tsx

@@ -16,15 +16,25 @@ import {
   PageHeaderTitle,
 } from '@redhat-cloud-services/frontend-components';
 
+import { useComposeBlueprintMutation } from '../../store/imageBuilderApi';
 import './ImageBuilderHeader.scss';
 
 type ImageBuilderHeaderPropTypes = {
   experimentalFlag?: string | true | undefined;
+  selectedBlueprint?: string | undefined;
 };
 
 export const ImageBuilderHeader = ({
   experimentalFlag,
+  selectedBlueprint,
 }: ImageBuilderHeaderPropTypes) => {
+  const [buildBlueprint, { isLoading: imageBuildLoading }] =
+    useComposeBlueprintMutation();
+
+  const onBuildHandler = async () => {
+    selectedBlueprint && (await buildBlueprint({ id: selectedBlueprint }));
+  };
+
   return (
     <>
       {/*@ts-ignore*/}
@@ -94,7 +104,14 @@ export const ImageBuilderHeader = ({
                 <Button>New blueprint</Button>
               </FlexItem>
               <FlexItem>
-                <Button isDisabled>Build images</Button>
+                <Button
+                  ouiaId="build-images-button"
+                  onClick={onBuildHandler}
+                  isDisabled={!selectedBlueprint}
+                  isLoading={imageBuildLoading}
+                >
+                  Build images
+                </Button>
               </FlexItem>{' '}
             </>
           )}

src/store/enhancedImageBuilderApi.ts

@@ -3,13 +3,18 @@ import { addNotification } from '@redhat-cloud-services/frontend-components-noti
 import { imageBuilderApi } from './imageBuilderApi';
 
 const enhancedApi = imageBuilderApi.enhanceEndpoints({
-  addTagTypes: ['Clone', 'Compose', 'Blueprint'],
+  addTagTypes: ['Clone', 'Compose', 'Blueprint', 'BlueprintComposes'],
   endpoints: {
     getBlueprints: {
       providesTags: () => {
         return [{ type: 'Blueprint' }];
       },
     },
+    getBlueprintComposes: {
+      providesTags: () => {
+        return [{ type: 'BlueprintComposes' }];
+      },
+    },
     getComposes: {
       providesTags: () => {
         return [{ type: 'Compose' }];
@@ -56,6 +61,34 @@ const enhancedApi = imageBuilderApi.enhanceEndpoints({
           });
       },
     },
+    composeBlueprint: {
+      invalidatesTags: [{ type: 'Compose' }, { type: 'BlueprintComposes' }],
+      onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
+        queryFulfilled
+          .then(() => {
+            dispatch(
+              addNotification({
+                variant: 'success',
+                title: 'Blueprint is being built',
+              })
+            );
+          })
+          .catch((err) => {
+            let msg = err.error.statusText;
+            if (err.error.data?.errors[0]?.detail) {
+              msg = err.error.data?.errors[0]?.detail;
+            }
+
+            dispatch(
+              addNotification({
+                variant: 'danger',
+                title: 'Blueprint could not be built',
+                description: `Status code ${err.error.status}: ${msg}`,
+              })
+            );
+          });
+      },
+    },
     composeImage: {
       onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
         queryFulfilled

src/test/Components/Blueprints/Blueprints.test.js

@@ -6,6 +6,7 @@ import { IMAGE_BUILDER_API } from '../../../constants';
 import { emptyGetBlueprints } from '../../fixtures/blueprints';
 import { server } from '../../mocks/server';
 import { renderWithReduxRouter } from '../../testUtils';
+import '@testing-library/jest-dom';
 
 import '@testing-library/jest-dom';
 
@@ -71,6 +72,20 @@ describe('Blueprints', () => {
     await user.click(blueprintRadioBtn);
     expect(screen.queryByTestId('images-table')).not.toBeInTheDocument();
   });
+  test('click build image button', async () => {
+    renderWithReduxRouter('', {});
+    const nameMatcher = (_, element) =>
+      element.getAttribute('name') === blueprintNameWithComposes;
+
+    const blueprintRadioBtn = await screen.findByRole('radio', {
+      name: nameMatcher,
+    });
+    await user.click(blueprintRadioBtn);
+    const buildImageBtn = await screen.findByRole('button', {
+      name: /Build image/i,
+    });
+    expect(buildImageBtn).toBeEnabled();
+  });
 
   describe('filtering', () => {
     test('filter blueprints', async () => {

src/test/mocks/handlers.js

@@ -131,6 +131,12 @@ export const handlers = [
 
     return res(ctx.status(200), ctx.json(resp));
   }),
+  rest.post(
+    `${IMAGE_BUILDER_API}/experimental/blueprint/:id/compose`,
+    (req, res, ctx) => {
+      return res(ctx.status(200));
+    }
+  ),
   rest.get(
     `${IMAGE_BUILDER_API}/experimental/blueprints/:id/composes`,
     (req, res, ctx) => {