feat(HMS-3392): add blueprint's version in image table

src/Components/ImagesTable/ImagesTable.tsx

@@ -19,6 +19,7 @@ import {
   Alert,
   Spinner,
   Bullseye,
+  Badge,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon, PlusCircleIcon } from '@patternfly/react-icons';
 import {
@@ -31,6 +32,7 @@ import {
   Thead,
   Tr,
 } from '@patternfly/react-table';
+import { useFlag } from '@unleash/proxy-client-react';
 import { Link, NavigateFunction, useNavigate } from 'react-router-dom';
 
 import './ImagesTable.scss';
@@ -71,7 +73,8 @@ type ImageTableProps = {
 const ImagesTable = ({ selectedBlueprint }: ImageTableProps) => {
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(10);
-
+  const experimentalFlag =
+    useFlag('image-builder.new-wizard.enabled') || process.env.EXPERIMENTAL;
   const onSetPage: OnSetPage = (_, page) => setPage(page);
 
   const onPerPageSelect: OnSetPage = (_, perPage) => {
@@ -189,6 +192,7 @@ const ImagesTable = ({ selectedBlueprint }: ImageTableProps) => {
                 <Th>Created/Updated</Th>
                 <Th>Release</Th>
                 <Th>Target</Th>
+                {experimentalFlag && <Th>Version</Th>}
                 <Th>Status</Th>
                 <Th>Instance</Th>
                 <Th />
@@ -508,7 +512,8 @@ const Row = ({
 }: RowPropTypes) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const handleToggle = () => setIsExpanded(!isExpanded);
-
+  const experimentalFlag =
+    useFlag('image-builder.new-wizard.enabled') || process.env.EXPERIMENTAL;
   const navigate = useNavigate();
 
   return (
@@ -531,6 +536,11 @@ const Row = ({
         <Td dataLabel="Target">
           {target ? target : <Target compose={compose} />}
         </Td>
+        {experimentalFlag && (
+          <Td dataLabel="Version">
+            <Badge isRead>{compose.blueprint_version || 'N/A'}</Badge>
+          </Td>
+        )}
         <Td dataLabel="Status">{status}</Td>
         <Td dataLabel="Instance">{instance}</Td>
         <Td>

src/test/Components/ImagesTable/ImagesTable.test.js

@@ -19,7 +19,16 @@ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
 
 jest.mock('@unleash/proxy-client-react', () => ({
   useUnleashContext: () => jest.fn(),
-  useFlag: jest.fn((flag) => (flag === 'edgeParity.image-list' ? false : true)),
+  useFlag: jest.fn((flag) => {
+    switch (flag) {
+      case 'edgeParity.image-list':
+        return false;
+      case 'image-builder.new-wizard.enabled':
+        return false;
+      default:
+        return true;
+    }
+  }),
 }));
 
 beforeAll(() => {

src/test/fixtures/blueprints.ts

@@ -45,6 +45,7 @@ export const mockBlueprintComposes: GetBlueprintComposesApiResponse = {
       id: '1579d95b-8f1d-4982-8c53-8c2afa4ab04c',
       image_name: 'Dark Chocolate',
       created_at: '2021-09-08T14:38:00.000Z',
+      blueprint_version: 1,
       request: {
         distribution: RHEL_9,
         image_requests: [
@@ -64,6 +65,7 @@ export const mockBlueprintComposes: GetBlueprintComposesApiResponse = {
     {
       id: 'c1cfa347-4c37-49b5-8e73-6aa1d1746cfa',
       created_at: '2021-04-27T12:31:12Z',
+      blueprint_version: 1,
       request: {
         distribution: RHEL_9,
         image_requests: [