diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx index 017144be..c20d6e0a 100644 --- a/src/Components/ImagesTable/ImagesTable.tsx +++ b/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 ( diff --git a/src/Components/LandingPage/LandingPage.tsx b/src/Components/LandingPage/LandingPage.tsx index c176cf85..8b35e6dd 100644 --- a/src/Components/LandingPage/LandingPage.tsx +++ b/src/Components/LandingPage/LandingPage.tsx @@ -96,7 +96,10 @@ export const LandingPage = () => { return ( <> - + {edgeParityFlag ? ( { + const [buildBlueprint, { isLoading: imageBuildLoading }] = + useComposeBlueprintMutation(); + + const onBuildHandler = async () => { + selectedBlueprint && (await buildBlueprint({ id: selectedBlueprint })); + }; + return ( <> {/*@ts-ignore*/} @@ -94,7 +104,14 @@ export const ImageBuilderHeader = ({ - + {' '} )} diff --git a/src/store/enhancedImageBuilderApi.ts b/src/store/enhancedImageBuilderApi.ts index ae9e8675..94f08f26 100644 --- a/src/store/enhancedImageBuilderApi.ts +++ b/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 diff --git a/src/test/Components/Blueprints/Blueprints.test.js b/src/test/Components/Blueprints/Blueprints.test.js index d1dc3354..e219426c 100644 --- a/src/test/Components/Blueprints/Blueprints.test.js +++ b/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 () => { diff --git a/src/test/mocks/handlers.js b/src/test/mocks/handlers.js index 41981271..5e5e2ca3 100644 --- a/src/test/mocks/handlers.js +++ b/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) => {