Custom Repositories gate by Feature flag

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

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';

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

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