ImagesTable: old images alert position

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 (
       <Bullseye>
@@ -207,7 +201,7 @@ const ImagesTable = () => {
               <Th />
             </Tr>
           </Thead>
-          {itemCount === 0 ? (
+          {itemCount === 0 && (
             <Tbody>
               <Tr>
                 <Td colSpan={12}>
@@ -215,21 +209,6 @@ const ImagesTable = () => {
                 </Td>
               </Tr>
             </Tbody>
-          ) : (
-            experimentalFlag &&
-            isBlueprintOutSync && (
-              <Tbody>
-                <Tr>
-                  <Td colSpan={12}>
-                    <Alert
-                      isInline
-                      title="You haven't built new images for this version of your blueprint yet"
-                      ouiaId="blueprint-out-of-sync-alert"
-                    />
-                  </Td>
-                </Tr>
-              </Tbody>
-            )
           )}
 
           {composes?.map((compose, rowIndex) => {

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<imagesTableToolbarProps> = ({
   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 = (
     <Pagination
@@ -105,6 +130,17 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
               : 'All images'}
           </Title>
         </ToolbarContent>
+        {itemCount > 0 && experimentalFlag && isBlueprintOutSync && (
+          <Alert
+            style={{
+              margin:
+                '0 var(--pf-v5-c-toolbar__content--PaddingRight) 0 var(--pf-v5-c-toolbar__content--PaddingLeft)',
+            }}
+            isInline
+            title={`The selected blueprint is at version ${selectedBlueprintVersion}, images are at version ${latestImageVersion}. Build images to synchronize with the latest version.`}
+            ouiaId="blueprint-out-of-sync-alert"
+          />
+        )}
         {selectedBlueprintId && (
           <ToolbarContent>
             <ToolbarItem>

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();
   });