diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx index c20d6e0a..de9dadbf 100644 --- a/src/Components/ImagesTable/ImagesTable.tsx +++ b/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) => { Created/Updated Release Target + {experimentalFlag && Version} Status Instance @@ -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 = ({ {target ? target : } + {experimentalFlag && ( + + {compose.blueprint_version || 'N/A'} + + )} {status} {instance} diff --git a/src/test/Components/ImagesTable/ImagesTable.test.js b/src/test/Components/ImagesTable/ImagesTable.test.js index ef23714d..542dae71 100644 --- a/src/test/Components/ImagesTable/ImagesTable.test.js +++ b/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(() => { diff --git a/src/test/fixtures/blueprints.ts b/src/test/fixtures/blueprints.ts index 868bd2df..bee0592e 100644 --- a/src/test/fixtures/blueprints.ts +++ b/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: [