diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx index 8d1e9c98..78b725b4 100644 --- a/src/Components/ImagesTable/ImagesTable.tsx +++ b/src/Components/ImagesTable/ImagesTable.tsx @@ -104,7 +104,6 @@ const ImagesTable = () => { data: blueprintsComposes, isSuccess: isBlueprintsSuccess, isLoading: isLoadingBlueprintsCompose, - isFetching: isFetchingBlueprintsCompose, isError: isBlueprintsError, } = useGetBlueprintComposesQuery( { @@ -144,11 +143,6 @@ const ImagesTable = () => { ? isLoadingBlueprintsCompose : isLoadingComposes; - const isBlueprintOutSync = - selectedBlueprintId && - !isFetchingBlueprintsCompose && - blueprintsComposes?.data[0]?.blueprint_version !== selectedBlueprintVersion; - if (isLoading) { return ( @@ -207,7 +201,7 @@ const ImagesTable = () => { - {itemCount === 0 ? ( + {itemCount === 0 && ( @@ -215,21 +209,6 @@ const ImagesTable = () => { - ) : ( - experimentalFlag && - isBlueprintOutSync && ( - - - - - - - - ) )} {composes?.map((compose, rowIndex) => { diff --git a/src/Components/ImagesTable/ImagesTableToolbar.tsx b/src/Components/ImagesTable/ImagesTableToolbar.tsx index bff33a49..93d9cdbb 100644 --- a/src/Components/ImagesTable/ImagesTableToolbar.tsx +++ b/src/Components/ImagesTable/ImagesTableToolbar.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { + Alert, Pagination, Toolbar, ToolbarContent, @@ -12,11 +13,13 @@ import { Link } from 'react-router-dom'; import { selectSelectedBlueprintId, selectBlueprintSearchInput, + selectBlueprintVersionFilterAPI, } from '../../store/BlueprintSlice'; import { useAppSelector } from '../../store/hooks'; import { BlueprintItem, useGetBlueprintsQuery, + useGetBlueprintComposesQuery, } from '../../store/imageBuilderApi'; import { resolveRelPath } from '../../Utilities/path'; import { useExperimentalFlag } from '../../Utilities/useExperimentalFlag'; @@ -46,16 +49,38 @@ const ImagesTableToolbar: React.FC = ({ const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId); const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput); - const { selectedBlueprintName } = useGetBlueprintsQuery( - { search: blueprintSearchInput }, - { - selectFromResult: ({ data }) => ({ - selectedBlueprintName: data?.data?.find( - (blueprint: BlueprintItem) => blueprint.id === selectedBlueprintId - )?.name, - }), - } - ); + const { data: blueprintsComposes, isFetching: isFetchingBlueprintsCompose } = + useGetBlueprintComposesQuery( + { + id: selectedBlueprintId as string, + limit: perPage, + offset: perPage * (page - 1), + blueprintVersion: useAppSelector(selectBlueprintVersionFilterAPI), + }, + { skip: !selectedBlueprintId } + ); + + const { selectedBlueprintName, selectedBlueprintVersion } = + useGetBlueprintsQuery( + { search: blueprintSearchInput }, + { + selectFromResult: ({ data }) => { + const bp = data?.data?.find( + (blueprint: BlueprintItem) => blueprint.id === selectedBlueprintId + ); + return { + selectedBlueprintName: bp?.name, + selectedBlueprintVersion: bp?.version, + }; + }, + } + ); + const latestImageVersion = blueprintsComposes?.data[0]?.blueprint_version; + + const isBlueprintOutSync = + selectedBlueprintId && + !isFetchingBlueprintsCompose && + latestImageVersion !== selectedBlueprintVersion; const pagination = ( = ({ : 'All images'} + {itemCount > 0 && experimentalFlag && isBlueprintOutSync && ( + + )} {selectedBlueprintId && ( diff --git a/src/test/Components/Blueprints/Blueprints.test.js b/src/test/Components/Blueprints/Blueprints.test.js index 96109cee..4d966f6d 100644 --- a/src/test/Components/Blueprints/Blueprints.test.js +++ b/src/test/Components/Blueprints/Blueprints.test.js @@ -109,13 +109,13 @@ describe('Blueprints', () => { await selectBlueprintById(user, blueprintIdOutOfSync); await screen.findByText( - "You haven't built new images for this version of your blueprint yet" + 'The selected blueprint is at version 2, images are at version 1. Build images to synchronize with the latest version.' ); await selectBlueprintById(user, blueprintIdWithComposes); expect( screen.queryByText( - "You haven't built new images for this version of your blueprint yet" + 'The selected blueprint is at version 2, images are at version 1. Build images to synchronize with the latest version.' ) ).not.toBeInTheDocument(); });