diff --git a/src/Components/CreateImageWizard/CreateImageWizard.js b/src/Components/CreateImageWizard/CreateImageWizard.js index 6b1d2638..ad6c981d 100644 --- a/src/Components/CreateImageWizard/CreateImageWizard.js +++ b/src/Components/CreateImageWizard/CreateImageWizard.js @@ -2,6 +2,7 @@ import React from 'react'; import componentTypes from '@data-driven-forms/react-form-renderer/component-types'; import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux'; +import { useFlag } from '@unleash/proxy-client-react'; import { useDispatch, useStore } from 'react-redux'; import { useNavigate, useParams } from 'react-router-dom'; @@ -450,7 +451,7 @@ const requestToState = (composeRequest, distroInfo, isBeta, isProd) => { } }; -const formStepHistory = (composeRequest, isBeta) => { +const formStepHistory = (composeRequest, contentSourcesEnabled) => { if (composeRequest) { const imageRequest = composeRequest.image_requests[0]; const uploadRequest = imageRequest.upload_request; @@ -469,7 +470,7 @@ const formStepHistory = (composeRequest, isBeta) => { steps.push('registration'); } - if (isBeta) { + if (contentSourcesEnabled) { steps.push('File system configuration', 'packages', 'repositories'); const customRepositories = @@ -500,6 +501,7 @@ const CreateImageWizard = () => { const { getState } = useStore(); const compose = getState().composes?.byId?.[composeId]; const composeRequest = compose?.request; + const contentSourcesEnabled = useFlag('image-builder.enable-content-sources'); // TODO: This causes an annoying re-render when using Recreate image const { data: distroInfo } = useGetArchitecturesQuery( @@ -522,11 +524,17 @@ const CreateImageWizard = () => { isBeta(), isProd() ); - const stepHistory = formStepHistory(composeRequest, isBeta()); + const stepHistory = formStepHistory(composeRequest, contentSourcesEnabled); - initialState - ? (initialState.isBeta = isBeta()) - : (initialState = { isBeta: isBeta() }); + if (initialState) { + initialState.isBeta = isBeta(); + initialState.contentSourcesEnabled = contentSourcesEnabled; + } else { + initialState = { + isBeta: isBeta(), + contentSourcesEnabled, + }; + } const handleClose = () => navigate(resolveRelPath('')); diff --git a/src/Components/CreateImageWizard/steps/packages.js b/src/Components/CreateImageWizard/steps/packages.js index bcb1f355..8b9a3654 100644 --- a/src/Components/CreateImageWizard/steps/packages.js +++ b/src/Components/CreateImageWizard/steps/packages.js @@ -14,7 +14,7 @@ const packagesStep = { name: 'packages', substepOf: 'Content', nextStep: ({ values }) => { - if (values.isBeta) { + if (values.contentSourcesEnabled) { return 'repositories'; } else { return 'details'; diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js index 789c2416..f3ea9ba7 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js @@ -69,6 +69,13 @@ jest .spyOn(api, 'getComposes') .mockImplementation(() => Promise.resolve(mockComposesEmpty)); +jest.mock('@unleash/proxy-client-react', () => ({ + useUnleashContext: () => jest.fn(), + useFlag: jest.fn((flag) => + flag === 'image-builder.enable-content-sources' ? true : false + ), +})); + const searchForAvailablePackages = async (searchbox, searchTerm) => { const user = userEvent.setup(); await user.type(searchbox, searchTerm); diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js index 6088d236..b48342bc 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js @@ -76,6 +76,13 @@ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ }), })); +jest.mock('@unleash/proxy-client-react', () => ({ + useUnleashContext: () => jest.fn(), + useFlag: jest.fn((flag) => + flag === 'image-builder.enable-content-sources' ? true : false + ), +})); + const searchForAvailablePackages = async (searchbox, searchTerm) => { const user = userEvent.setup(); await user.type(searchbox, searchTerm); @@ -414,6 +421,7 @@ describe('Step Upload to AWS', () => { await clickNext(); await clickNext(); await clickNext(); + await clickNext(); }); const composeImage = jest @@ -615,6 +623,10 @@ describe('Step Registration', () => { await act(async () => { n4.click(); }); + const n5 = screen.getByRole('button', { name: /Next/ }); + await act(async () => { + n5.click(); + }); const review = screen.getByTestId('review-registration'); expect(review).toHaveTextContent( 'Register with Red Hat Subscription Manager (RHSM)' @@ -677,6 +689,10 @@ describe('Step Registration', () => { await act(async () => { n4.click(); }); + const n5 = screen.getByRole('button', { name: /Next/ }); + await act(async () => { + n5.click(); + }); const review = screen.getByTestId('review-registration'); expect(review).toHaveTextContent( 'Register with Red Hat Subscription Manager (RHSM)' @@ -737,6 +753,10 @@ describe('Step Registration', () => { await act(async () => { n4.click(); }); + const n5 = screen.getByRole('button', { name: /Next/ }); + await act(async () => { + n5.click(); + }); const exp1 = screen.getByTestId('registration-expandable'); await act(async () => { exp1.click(); @@ -782,6 +802,10 @@ describe('Step Registration', () => { await act(async () => { n4.click(); }); + const n5 = screen.getByRole('button', { name: /Next/ }); + await act(async () => { + n5.click(); + }); screen.getByText('Register the system later'); }); @@ -919,6 +943,7 @@ describe('Step Packages', () => { await act(async () => { await clickNext(); + await clickNext(); }); screen.getByRole('heading', { @@ -1084,6 +1109,12 @@ describe('Step Packages', () => { brs.click(); }); + // skip repositories + const bnRep = screen.getByRole('button', { name: /Next/ }); + await act(async () => { + bnRep.click(); + }); + // skip name page const bn1 = screen.getByRole('button', { name: /Next/ }); await act(async () => { @@ -1109,6 +1140,10 @@ describe('Step Packages', () => { await act(async () => { bb2.click(); }); + const bb3 = screen.getByRole('button', { name: /Back/ }); + await act(async () => { + bb3.click(); + }); await screen.findByTestId('search-available-pkgs-input'); const op = screen.getByRole('option', { name: /summary for test package/ }); await act(async () => { @@ -1128,6 +1163,10 @@ describe('Step Packages', () => { await act(async () => { n2.click(); }); + const n3 = screen.getByRole('button', { name: /Next/ }); + await act(async () => { + n3.click(); + }); // await screen.findByTestId('chosen-packages-count'); chosen = await screen.findByTestId('chosen-packages-count'); @@ -1362,6 +1401,8 @@ describe('Step Details', () => { await clickNext(); // skip packages await clickNext(); + // skip repositories + await clickNext(); }); }; @@ -1436,6 +1477,8 @@ describe('Step Review', () => { // skip packages await clickNext(); + // skip repositories + await clickNext(); // skip name await clickNext(); }); @@ -1478,6 +1521,8 @@ describe('Step Review', () => { // skip packages await clickNext(); + // skip repositories + await clickNext(); // skip name await clickNext(); }); @@ -1697,6 +1742,11 @@ describe('Click through all steps', () => { await clickNext(); }); + // TODO: should select a repo here + await act(async () => { + await clickNext(); + }); + // Enter image name const nameInput = screen.getByRole('textbox', { name: 'Image Name', @@ -2155,6 +2205,9 @@ describe('Keyboard accessibility', () => { expect(availablePackagesInput).toHaveFocus(); await clickNext(); + // TODO: what should have focus on Custom Repos step? + await clickNext(); + // Name const nameInput = screen.getByRole('textbox', { name: /image name/i }); expect(nameInput).toHaveFocus();