Blueprints: filter composes by blueprint version

Refs: HMS-3412

src/Components/ImagesTable/ImagesTable.tsx

@@ -46,6 +46,8 @@ import {
 } from '../../constants';
 import {
   selectBlueprintSearchInput,
+  selectBlueprintVersionFilter,
+  selectBlueprintVersionFilterAPI,
   selectSelectedBlueprintId,
 } from '../../store/BlueprintSlice';
 import { useAppSelector } from '../../store/hooks';
@@ -70,6 +72,7 @@ const ImagesTable = () => {
   const [perPage, setPerPage] = useState(10);
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
+  const blueprintVersionFilter = useAppSelector(selectBlueprintVersionFilter);
 
   const { selectedBlueprintVersion } = useGetBlueprintsQuery(
     { search: blueprintSearchInput },
@@ -100,6 +103,7 @@ const ImagesTable = () => {
       id: selectedBlueprintId as string,
       limit: perPage,
       offset: perPage * (page - 1),
+      blueprintVersion: useAppSelector(selectBlueprintVersionFilterAPI),
     },
     { skip: !selectedBlueprintId }
   );
@@ -163,7 +167,12 @@ const ImagesTable = () => {
     );
   }
 
-  const composes = data?.data;
+  let composes = data?.data;
+  if (selectedBlueprintId && blueprintVersionFilter === 'latest') {
+    composes = composes?.filter((compose) => {
+      return compose.blueprint_version === selectedBlueprintVersion;
+    });
+  }
   const itemCount = data?.meta.count || 0;
 
   return (
@@ -173,7 +182,7 @@ const ImagesTable = () => {
           itemCount={itemCount}
           perPage={perPage}
           page={page}
-          onSetPage={onSetPage}
+          setPage={setPage}
           onPerPageSelect={onPerPageSelect}
         />
         <Table variant="compact" data-testid="images-table">

src/Components/ImagesTable/ImagesTableToolbar.tsx

@@ -21,6 +21,7 @@ import {
 import { resolveRelPath } from '../../Utilities/path';
 import { useExperimentalFlag } from '../../Utilities/useExperimentalFlag';
 import { BlueprintActionsMenu } from '../Blueprints/BlueprintActionsMenu';
+import BlueprintVersionFilter from '../Blueprints/BlueprintVersionFilter';
 import { BuildImagesButton } from '../Blueprints/BuildImagesButton';
 import { DeleteBlueprintModal } from '../Blueprints/DeleteBlueprintModal';
 
@@ -28,7 +29,7 @@ interface imagesTableToolbarProps {
   itemCount: number;
   perPage: number;
   page: number;
-  onSetPage: (event: React.MouseEvent, page: number) => void;
+  setPage: (page: number) => void;
   onPerPageSelect: (event: React.MouseEvent, perPage: number) => void;
 }
 
@@ -36,7 +37,7 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
   itemCount,
   perPage,
   page,
-  onSetPage,
+  setPage,
   onPerPageSelect,
 }: imagesTableToolbarProps) => {
   const experimentalFlag = useExperimentalFlag();
@@ -60,7 +61,7 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
       itemCount={itemCount}
       perPage={perPage}
       page={page}
-      onSetPage={onSetPage}
+      onSetPage={(_, page) => setPage(page)}
       onPerPageSelect={onPerPageSelect}
       widgetId="compose-pagination-top"
       data-testid="images-pagination-top"
@@ -110,6 +111,11 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
           <ToolbarItem>
             <BlueprintActionsMenu setShowDeleteModal={setShowDeleteModal} />
           </ToolbarItem>
+          {selectedBlueprintId && (
+            <ToolbarItem>
+              <BlueprintVersionFilter onFilterChange={() => setPage(1)} />
+            </ToolbarItem>
+          )}
           <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
             {pagination}
           </ToolbarItem>