katello 4.5.0 → 4.6.0.rc1

data/webpack/containers/Application/config.js

@@ -7,8 +7,6 @@ import SetOrganization from '../../components/SelectOrg/SetOrganization';
 import WithOrganization from '../../components/WithOrganization/withOrganization';
 import ModuleStreams from '../../scenes/ModuleStreams';
 import ModuleStreamDetails from '../../scenes/ModuleStreams/Details';
-import AnsibleCollections from '../../scenes/AnsibleCollections';
-import AnsibleCollectionDetails from '../../scenes/AnsibleCollections/Details';
 import ContentViews from '../../scenes/ContentViews';
 import ContentViewDetails from '../../scenes/ContentViews/Details';
 import Content from '../../scenes/Content';
@@ -48,14 +46,6 @@ export const links = [
     path: 'module_streams/:id([0-9]+)',
     component: WithOrganization(withHeader(ModuleStreamDetails, { title: __('Module Stream Details') })),
   },
-  {
-    path: 'legacy_ansible_collections',
-    component: WithOrganization(withHeader(AnsibleCollections, { title: __('Ansible Collections') })),
-  },
-  {
-    path: 'legacy_ansible_collections/:id([0-9]+)',
-    component: WithOrganization(withHeader(AnsibleCollectionDetails, { title: __('Ansible Collection Details') })),
-  },
   {
     path: 'content_views',
     component: WithOrganization(withHeader(ContentViews, { title: __('Content views') })),
@@ -85,4 +75,9 @@ export const links = [
     path: 'labs/alternate_content_sources',
     component: WithOrganization(withHeader(AlternateContentSource, { title: __('Alternate Content Sources') })),
   },
+  {
+    path: 'labs/alternate_content_sources/:id([0-9]+)',
+    component: WithOrganization(withHeader(AlternateContentSource, { title: __('Alternate Content Sources') })),
+    exact: false,
+  },
 ];

data/webpack/global_index.js

@@ -4,52 +4,63 @@ import { registerReducer } from 'foremanReact/common/MountingService';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 import SystemStatuses from './components/extensions/about';
-import RegistrationCommands from './components/extensions/RegistrationCommands';
+import {
+  RegistrationCommands,
+  RegistrationActivationKeys,
+} from './components/extensions/RegistrationCommands';
 import ContentTab from './components/extensions/HostDetails/Tabs/ContentTab';
 import ContentViewDetailsCard from './components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard';
 import ErrataOverviewCard from './components/extensions/HostDetails/Cards/ErrataOverviewCard';
 import InstalledProductsCard from './components/extensions/HostDetails/DetailsTabCards/InstalledProductsCard';
 import RegistrationCard from './components/extensions/HostDetails/DetailsTabCards/RegistrationCard';
+import HwPropertiesCard from './components/extensions/HostDetails/DetailsTabCards/HwPropertiesCard';
 
 import TracesTab from './components/extensions/HostDetails/Tabs/TracesTab/TracesTab.js';
 import extendReducer from './components/extensions/reducers';
 import rootReducer from './redux/reducers';
 import HostCollectionsCard from './components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard';
 import { hostIsNotRegistered } from './components/extensions/HostDetails/hostDetailsHelpers';
-import SystemPropertiesCardExtensions from './components/extensions/HostDetails/DetailsTabCards/SystemPropertiesCardExtensions';
+import {
+  SystemPropertiesCardSubscription,
+  SystemPropertiesCardTracer,
+} from './components/extensions/HostDetails/DetailsTabCards/SystemPropertiesCardExtensions';
 import HostActionsBar from './components/extensions/HostDetails/ActionsBar';
 import RecentCommunicationCardExtensions from './components/extensions/HostDetails/DetailsTabCards/RecentCommunicationCardExtensions';
+import SystemPurposeCard from './components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard';
 
 registerReducer('katelloExtends', extendReducer);
 registerReducer('katello', rootReducer);
 
 addGlobalFill('aboutFooterSlot', '[katello]AboutSystemStatuses', <SystemStatuses key="katello-system-statuses" />, 100);
 addGlobalFill('registrationAdvanced', '[katello]RegistrationCommands', <RegistrationCommands key="katello-reg" />, 100);
+addGlobalFill('registrationGeneral', '[katello]RegistrationActivationKeys', <RegistrationActivationKeys key="katello-reg-ak" />, 100);
 
 // Host details page tabs
 addGlobalFill('host-details-page-tabs', 'Content', <ContentTab key="content" />, 900, { title: __('Content'), hideTab: hostIsNotRegistered });
 addGlobalFill('host-details-page-tabs', 'Traces', <TracesTab key="traces" />, 800, { title: __('Traces'), hideTab: hostIsNotRegistered });
 
-// Overview tab cards
+// Overview tab cards & card extensions
 addGlobalFill(
   'host-overview-cards',
   'Content view details',
   <ContentViewDetailsCard key="content-view-details" />,
-  2000,
+  3800,
 );
 addGlobalFill(
   'host-overview-cards',
   'Host collections',
   <HostCollectionsCard key="host-collections-details" />,
-  700,
+  2600,
 );
-addGlobalFill('host-overview-cards', 'Installable errata', <ErrataOverviewCard key="errata-overview" />, 1900);
+addGlobalFill('host-overview-cards', 'Installable errata', <ErrataOverviewCard key="errata-overview" />, 3600);
+addGlobalFill('host-overview-cards', 'System purpose', <SystemPurposeCard key="system-purpose" />, 1400);
 addGlobalFill('recent-communication-card-item', 'Recent communication', <RecentCommunicationCardExtensions key="recent-communication" />, 3000);
 
 // Details tab cards & card extensions
 addGlobalFill('host-tab-details-cards', 'Installed products', <InstalledProductsCard key="installed-products" />, 100);
 addGlobalFill('host-tab-details-cards', 'Registration details', <RegistrationCard key="registration-details" />, 200);
-addGlobalFill('host-details-tab-properties-1', 'Subscription UUID', <SystemPropertiesCardExtensions key="subscription-uuid" />);
+addGlobalFill('host-details-tab-properties-1', 'Subscription UUID', <SystemPropertiesCardSubscription key="subscription-uuid" />);
+addGlobalFill('host-details-tab-properties-2', 'Tracer', <SystemPropertiesCardTracer key="tracer-status" />);
 
 addGlobalFill(
   'host-details-kebab',
@@ -57,3 +68,4 @@ addGlobalFill(
   <HostActionsBar key="katello-host-details-kebab" />,
   100,
 );
+addGlobalFill('host-tab-details-cards', 'HW properties', <HwPropertiesCard key="hw-properties" />, 200);

data/webpack/global_test_setup.js

@@ -1,4 +1,5 @@
 import nock from 'nock';
+// import checkForOuiaIds from './ouia_id_check';
 
 // runs before each test to make sure console.error output will
 // fail a test (i.e. default PropType missing). Check the error
@@ -8,12 +9,18 @@ global.console.error = (error, stack) => {
   originalConsoleError(error); // ensure error is printed to console
   /* eslint-disable-next-line no-console */
   if (stack) console.log(stack); // Prints out original stack trace
-  throw new Error(error);
+  throw new Error(error); // comment this and uncomment the next line when checking for ouia ids
+  // if (!error.includes('Failed prop type')) throw new Error(error);
 };
 
 // Increase jest timeout as some tests using multiple http mocks can time out on CI systems.
 jest.setTimeout(process.env.JEST_TIMEOUT || 15000);
 
+// uncomment this to see if tests are trying to make real API requests
+// beforeAll(() => {
+//   nock.disableNetConnect();
+// });
+
 afterAll(() => {
   jest.resetModules();
   if (global.gc) global.gc();
@@ -23,7 +30,12 @@ beforeEach(() => {
   if (!nock.isActive()) { nock.activate(); }
 });
 
+// To see where you need to add ouiaIds:
+// 1. uncomment this and the import above
+// checkForOuiaIds();
+// 2. (optional) uncomment the line in global.console.error function above
+
 afterEach(() => {
-  nock.restore();
+  nock.cleanAll();
 });
 

data/webpack/ouia_id_check.js

@@ -0,0 +1,95 @@
+import PropTypes from 'prop-types';
+import {
+  Alert,
+  Breadcrumb,
+  Button,
+  Card,
+  Checkbox,
+  Chip,
+  ChipGroup,
+  ContextSelector,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  FormSelect,
+  Menu,
+  Modal,
+  ModalContent,
+  Nav,
+  NavExpandable,
+  NavItem,
+  OptionsMenu,
+  Pagination,
+  Radio,
+  Select,
+  Switch,
+  TabButton,
+  TabContent,
+  Tabs,
+  Text,
+  TextInput,
+  Title,
+  Toolbar,
+} from '@patternfly/react-core';
+import {
+  RowWrapper,
+  Table,
+  TableComposable,
+  Tr,
+} from '@patternfly/react-table';
+
+const checkForOuiaIds = () => {
+  const ouiaSupportedPFComponents = [
+    Alert,
+    Breadcrumb,
+    Button,
+    Card,
+    Checkbox,
+    Chip,
+    ChipGroup,
+    ContextSelector,
+    Dropdown,
+    DropdownItem,
+    DropdownSeparator,
+    DropdownToggle,
+    DropdownToggleCheckbox,
+    FormSelect,
+    Menu,
+    Modal,
+    ModalContent,
+    Nav,
+    NavExpandable,
+    NavItem,
+    OptionsMenu,
+    Pagination,
+    Radio,
+    Select,
+    Switch,
+    TabButton,
+    TabContent,
+    Tabs,
+    Text,
+    TextInput,
+    Title,
+    Toolbar,
+    RowWrapper,
+    Table,
+    TableComposable,
+    Tr,
+  ];
+  beforeEach(() => {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const Component of ouiaSupportedPFComponents) {
+      // eslint-disable-next-line no-continue
+      if (!Component) continue;
+      Component.propTypes = {
+        ...Component.propTypes,
+        ouiaId: PropTypes.string.isRequired,
+      };
+    }
+  });
+};
+
+export default checkForOuiaIds;

data/webpack/redux/actions/RedHatRepositories/helpers.js

@@ -10,6 +10,8 @@ const repoTypeSearchQueryMap = {
 };
 
 const recommendedRepositoriesRHEL = [
+  'rhel-9-for-x86_64-baseos-rpms',
+  'rhel-9-for-x86_64-appstream-rpms',
   'rhel-8-for-x86_64-baseos-rpms',
   'rhel-8-for-x86_64-baseos-kickstart',
   'rhel-8-for-x86_64-appstream-rpms',

data/webpack/redux/reducers/index.js

@@ -11,9 +11,8 @@ import { moduleStreams } from '../../scenes/ModuleStreams';
 import { reducers as organizationProductsReducers } from '../OrganizationProducts';
 import { moduleStreamDetails } from '../../scenes/ModuleStreams/Details';
 import { reducers as systemStatuses } from '../../components/extensions/about';
-import { ansibleCollections } from '../../scenes/AnsibleCollections';
-import { ansibleCollectionDetails } from '../../scenes/AnsibleCollections/Details';
 import { contentViewDetails } from '../../scenes/ContentViews/Details';
+import hostDetails from '../../components/extensions/HostDetails/HostDetailsReducer';
 
 export default combineReducers({
   organization,
@@ -26,9 +25,8 @@ export default combineReducers({
   setOrganization,
   moduleStreams,
   moduleStreamDetails,
-  ansibleCollections,
-  ansibleCollectionDetails,
   contentViewDetails,
+  hostDetails,
   ...organizationProductsReducers,
   ...systemStatuses,
 });

data/webpack/scenes/AlternateContentSources/ACSActions.js

@@ -1,7 +1,14 @@
 import { API_OPERATIONS, APIActions, get, post } from 'foremanReact/redux/API';
 import { translate as __ } from 'foremanReact/common/I18n';
 import api, { orgId } from '../../services/api';
-import ACS_KEY, { acsRefreshKey, CREATE_ACS_KEY, DELETE_ACS_KEY } from './ACSConstants';
+import ACS_KEY, {
+  acsDetailsKey,
+  acsRefreshKey,
+  CREATE_ACS_KEY,
+  DELETE_ACS_KEY,
+  EDIT_ACS_KEY,
+  PRODUCTS_KEY,
+} from './ACSConstants';
 import { getResponseErrorMsgs } from '../../utils/helpers';
 import { renderTaskStartedToast } from '../Tasks/helpers';
 
@@ -30,6 +37,13 @@ const getAlternateContentSources = (extraParams, id = '') => get({
   params: createACSParams(extraParams),
 });
 
+export const getACSDetails = (acsId, extraParams = {}) => get({
+  type: API_OPERATIONS.GET,
+  key: acsDetailsKey(acsId),
+  params: { organization_id: orgId(), include_permissions: true, ...extraParams },
+  url: api.getApiUrl(`/alternate_content_sources/${acsId}`),
+});
+
 export const createACS = params => post({
   type: API_OPERATIONS.POST,
   key: CREATE_ACS_KEY,
@@ -59,7 +73,26 @@ export const refreshACS = (acsId, handleSuccess) => post({
   },
   errorToast: error => __(`Something went wrong while refreshing this alternate content source! ${getResponseErrorMsgs(error.response)}`),
 });
+
+export const getProducts = () => get({
+  type: API_OPERATIONS.GET,
+  key: PRODUCTS_KEY,
+  url: api.getApiUrl('/products'),
+  params: {
+    organization_id: orgId(), full_result: true, enabled: true, non_empty: true,
+  },
+});
+
+export const editACS = (acsId, params, handleSuccess, handleError) => APIActions.put({
+  type: API_OPERATIONS.PUT,
+  key: EDIT_ACS_KEY,
+  url: api.getApiUrl(`/alternate_content_sources/${acsId}`),
+  params,
+  handleSuccess,
+  handleError,
+  successToast: () => __('Alternate content source edited'),
+  errorToast: error => __(`Something went wrong while editing the alternate content source! ${getResponseErrorMsgs(error.response)}`),
+});
+
 export default getAlternateContentSources;
 
-// acs = Katello::AlternateContentSource.new
-// (name:"acs", label:"acs", alternate_content_source_type:"custom", base_url:"abcdef")

data/webpack/scenes/AlternateContentSources/ACSConstants.js

@@ -2,10 +2,13 @@ import { translate as __ } from 'foremanReact/common/I18n';
 
 const ACS_KEY = 'ACS';
 export const CREATE_ACS_KEY = 'ACS_CREATE';
+export const EDIT_ACS_KEY = 'ACS_EDIT';
 export const DELETE_ACS_KEY = 'ACS_DELETE';
 export const SMART_PROXY_KEY = 'SMART_PROXY';
+export const PRODUCTS_KEY = 'PRODUCTS';
 export const SSL_CERTS = 'SSL_CERTS';
 export const acsRefreshKey = acsId => `${ACS_KEY}_REFRESH_${acsId}`;
+export const acsDetailsKey = acsId => `${ACS_KEY}_DETAILS_${acsId}`;
 
 export const YUM = __('Yum');
 export const FILE = __('File');

data/webpack/scenes/AlternateContentSources/ACSSelectors.js

@@ -1,10 +1,6 @@
-import {
-  selectAPIStatus,
-  selectAPIError,
-  selectAPIResponse,
-} from 'foremanReact/redux/API/APISelectors';
+import { selectAPIError, selectAPIResponse, selectAPIStatus } from 'foremanReact/redux/API/APISelectors';
 import { STATUS } from 'foremanReact/constants';
-import ACS_KEY, { CREATE_ACS_KEY } from './ACSConstants';
+import ACS_KEY, { acsDetailsKey, CREATE_ACS_KEY, PRODUCTS_KEY } from './ACSConstants';
 
 export const selectAlternateContentSources = (state, index = '') => selectAPIResponse(state, ACS_KEY + index) || {};
 
@@ -22,3 +18,16 @@ export const selectCreateACSStatus = state =>
 
 export const selectCreateACSError = state =>
   selectAPIError(state, CREATE_ACS_KEY);
+
+export const selectACSDetails = (state, acsId) =>
+  selectAPIResponse(state, acsDetailsKey(acsId)) || {};
+
+export const selectACSDetailsStatus =
+    (state, acsId) => selectAPIStatus(state, acsDetailsKey(acsId)) || STATUS.PENDING;
+
+export const selectACSDetailsError =
+    (state, acsId) => selectAPIError(state, acsDetailsKey(acsId));
+
+export const selectProducts = state => selectAPIResponse(state, PRODUCTS_KEY) || {};
+
+export const selectProductsStatus = state => selectAPIStatus(state, PRODUCTS_KEY) || STATUS.PENDING;

data/webpack/scenes/AlternateContentSources/Create/ACSCreateWizard.js

@@ -14,6 +14,8 @@ import ACSCreateFinish from './Steps/ACSCreateFinish';
 import { getContentCredentials } from '../../ContentCredentials/ContentCredentialActions';
 import { getSmartProxies } from '../../SmartProxy/SmartProxyContentActions';
 import { CONTENT_CREDENTIAL_CERT_TYPE } from '../../ContentCredentials/ContentCredentialConstants';
+import { getProducts } from '../ACSActions';
+import ACSProducts from './Steps/ACSProducts';
 
 const ACSCreateWizard = ({ show, setIsOpen }) => {
   const [acsType, setAcsType] = useState(null);
@@ -33,6 +35,8 @@ const ACSCreateWizard = ({ show, setIsOpen }) => {
   const [password, setPassword] = useState('');
   const [caCert, setCACert] = useState('');
   const [caCertName, setCACertName] = useState('');
+  const [productIds, setProductIds] = useState([]);
+  const [productNames, setProductNames] = useState([]);
   const [currentStep, setCurrentStep] = useState(1);
   const dispatch = useDispatch();
 
@@ -40,53 +44,76 @@ const ACSCreateWizard = ({ show, setIsOpen }) => {
     () => {
       dispatch(getContentCredentials({ content_type: CONTENT_CREDENTIAL_CERT_TYPE }));
       dispatch(getSmartProxies());
+      dispatch(getProducts());
     },
     [dispatch],
   );
 
-  const steps = [
-    {
-      id: 1,
-      name: __('Select source type'),
-      component: <SelectSource />,
-      enableNext: acsType && contentType,
-    },
-    {
-      id: 2,
-      name: __('Name source'),
-      component: <NameACS />,
-      enableNext: name !== '',
-    },
-    {
-      id: 3,
-      name: __('Select smart proxy'),
-      component: <ACSSmartProxies />,
-      enableNext: smartProxies.length,
-    },
-    {
-      id: 4,
-      name: __('URL and paths'),
-      component: <AcsUrlPaths />,
-      enableNext: url !== '' && subpaths !== '',
-    },
-    {
-      id: 5,
-      name: __('Credentials'),
-      component: <ACSCredentials />,
-    },
-    {
-      id: 6,
-      name: __('Review details'),
-      component: <ACSReview />,
-      nextButtonText: __('Add'),
-    },
-    {
-      id: 7,
-      name: __('Create ACS'),
-      component: <ACSCreateFinish />,
-      isFinishedStep: true,
-    },
+  const sourceTypeStep = {
+    id: 1,
+    name: __('Select source type'),
+    component: <SelectSource />,
+    enableNext: acsType && contentType,
+  };
 
+  const nameStep = {
+    id: 2,
+    name: __('Name source'),
+    component: <NameACS />,
+    enableNext: name !== '',
+  };
+
+  const smartProxyStep = {
+    id: 3,
+    name: __('Select smart proxy'),
+    component: <ACSSmartProxies />,
+    enableNext: smartProxies.length,
+  };
+
+  const productStep = {
+    id: 4,
+    name: __('Select products'),
+    component: <ACSProducts />,
+    enableNext: productIds.length,
+  };
+
+  const urlPathStep = {
+    id: 5,
+    name: __('URL and paths'),
+    component: <AcsUrlPaths />,
+    enableNext: url !== '',
+  };
+
+  const credentialsStep = {
+    id: 6,
+    name: __('Credentials'),
+    component: <ACSCredentials />,
+    enableNext: (url !== '' || productIds.length) && smartProxies.length && name !== '' && acsType && contentType,
+  };
+
+  const reviewStep = {
+    id: 7,
+    name: __('Review details'),
+    component: <ACSReview />,
+    nextButtonText: __('Add'),
+    enableNext: (url !== '' || productIds.length) && smartProxies.length && name !== '' && acsType && contentType,
+  };
+
+  const finishStep = {
+    id: 8,
+    name: __('Create ACS'),
+    component: <ACSCreateFinish />,
+    isFinishedStep: true,
+  };
+
+  const steps = [
+    sourceTypeStep,
+    nameStep,
+    smartProxyStep,
+    ...(acsType === 'custom' ? [urlPathStep, credentialsStep] : []),
+    ...(acsType === 'simplified' ? [productStep] : []),
+    reviewStep,
+    finishStep,
   ];
 
   return (
@@ -105,6 +132,10 @@ const ACSCreateWizard = ({ show, setIsOpen }) => {
       setDescription,
       smartProxies,
       setSmartProxies,
+      productIds,
+      setProductIds,
+      productNames,
+      setProductNames,
       url,
       setUrl,
       subpaths,

data/webpack/scenes/AlternateContentSources/Create/Steps/ACSCreateFinish.js

@@ -1,14 +1,16 @@
-import React, { useContext, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import ACSCreateContext from '../ACSCreateContext';
 import { selectCreateACS, selectCreateACSError, selectCreateACSStatus } from '../../ACSSelectors';
-import getAlternateContentSources, { createACS } from '../../ACSActions';
+import { createACS } from '../../ACSActions';
 import Loading from '../../../../components/Loading';
 
 const ACSCreateFinish = () => {
+  const { push } = useHistory();
   const {
     currentStep,
     setIsOpen,
@@ -26,6 +28,7 @@ const ACSCreateFinish = () => {
     username,
     password,
     caCert,
+    productIds,
   } = useContext(ACSCreateContext);
   const dispatch = useDispatch();
   const response = useSelector(state => selectCreateACS(state));
@@ -34,20 +37,33 @@ const ACSCreateFinish = () => {
   const [createACSDispatched, setCreateACSDispatched] = useState(false);
   const [saving, setSaving] = useState(true);
 
+  const acsTypeParams = useCallback((params, type) => {
+    let acsParams = params;
+    if (type === 'custom') {
+      acsParams = {
+        base_url: url, verify_ssl: verifySSL, ssl_ca_cert_id: caCert, ...acsParams,
+      };
+      if (subpaths !== '') {
+        acsParams = { subpaths: subpaths.split(','), ...acsParams };
+      }
+    }
+    if (type === 'simplified') {
+      acsParams = { product_ids: productIds, ...acsParams };
+    }
+    return acsParams;
+  }, [caCert, productIds, subpaths, url, verifySSL]);
+
   useDeepCompareEffect(() => {
-    if (currentStep === 7 && !createACSDispatched) {
+    if (currentStep === 8 && !createACSDispatched) {
       setCreateACSDispatched(true);
       let params = {
         name,
         description,
-        base_url: url,
-        subpaths: subpaths.split(','),
         smart_proxy_names: smartProxies,
         content_type: contentType,
         alternate_content_source_type: acsType,
-        verify_ssl: verifySSL,
-        ssl_ca_cert_id: caCert,
       };
+      params = acsTypeParams(params, acsType);
       if (authentication === 'content_credentials') {
         params = { ssl_client_cert_id: sslCert, ssl_client_key_id: sslKey, ...params };
       }
@@ -59,19 +75,19 @@ const ACSCreateFinish = () => {
   }, [dispatch, createACSDispatched, setCreateACSDispatched,
     acsType, authentication, name, description, url, subpaths,
     smartProxies, contentType, verifySSL, caCert, sslCert, sslKey,
-    username, password, currentStep]);
+    username, password, currentStep, acsTypeParams]);
 
   useDeepCompareEffect(() => {
     const { id } = response;
     if (id && status === STATUS.RESOLVED && saving) {
       setSaving(false);
-      dispatch(getAlternateContentSources());
+      push(`/labs/alternate_content_sources/${id}/details`);
       setIsOpen(false);
     } else if (status === STATUS.ERROR) {
       setSaving(false);
       setIsOpen(false);
     }
-  }, [response, status, error, saving, dispatch, setIsOpen]);
+  }, [response, status, error, push, saving, dispatch, setIsOpen]);
 
   return <Loading loadingText={__('Saving alternate content source...')} />;
 };

data/webpack/scenes/AlternateContentSources/Create/Steps/ACSProducts.js

@@ -0,0 +1,44 @@
+import React, { useContext, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { DualListSelector } from '@patternfly/react-core';
+import ACSCreateContext from '../ACSCreateContext';
+import WizardHeader from '../../../ContentViews/components/WizardHeader';
+import { selectProducts } from '../../ACSSelectors';
+
+const ACSProducts = () => {
+  const {
+    setProductIds, productNames, setProductNames,
+  } = useContext(ACSCreateContext);
+  const availableProducts = useSelector(selectProducts);
+  const { results } = availableProducts;
+  const [availableOptions, setAvailableOptions] = useState(results?.map(product =>
+    product.name)?.filter(pName => !productNames.includes(pName)));
+  const onListChange = (newAvailableOptions, newChosenOptions) => {
+    setAvailableOptions(newAvailableOptions);
+    setProductNames(newChosenOptions);
+    setProductIds(results?.filter(product =>
+      newChosenOptions.includes(product.name))?.map(p => p?.id));
+  };
+
+  return (
+    <>
+      <WizardHeader
+        title={__('Select products')}
+        description={__('Select products to associate to this source.')}
+      />
+      <DualListSelector
+        isSearchable
+        availableOptions={availableOptions}
+        chosenOptions={productNames}
+        addAll={onListChange}
+        removeAll={onListChange}
+        addSelected={onListChange}
+        removeSelected={onListChange}
+        id="product_selector"
+      />
+    </>
+  );
+};
+
+export default ACSProducts;