katello 4.3.0 → 4.4.0.rc1

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersionContent.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { camelCase } from 'lodash';
 import { Link } from 'react-router-dom';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
@@ -17,15 +18,16 @@ const ContentViewVersionContent = ({ cvId, versionId, cvVersion }) => {
   } = cvVersion;
 
 
-  const genericContentTypes = ContentConfig().filter(({ names: { singularLabel } }) => {
-    // Ansible Collections has a tab in version details so it's handled separately below.
-    if (singularLabel === 'ansible_collection') return false;
-    const countLabel = `${singularLabel}_count`;
-    return !!cvVersion[countLabel];
-  }).map(({ names: { singularLabel, singularLowercase, pluralLowercase } }) => {
+  const contentConfigTypes = ContentConfig.filter(({ names: { singularLabel } }) =>
+    !!cvVersion[`${singularLabel}_count`]).map(({
+    names: {
+      singularLabel, singularLowercase, pluralLowercase, pluralLabel,
+    },
+  }) => {
     const countParam = `${singularLabel}_count`;
     const count = cvVersion[countParam];
     return {
+      pluralLabel,
       label: count > 1 ? pluralLowercase : singularLowercase,
       count,
     };
@@ -34,7 +36,7 @@ const ContentViewVersionContent = ({ cvId, versionId, cvVersion }) => {
   const noCounts =
     !Number(debCount) && !Number(dockerManifestCount) && !Number(dockerTagCount) &&
     !Number(fileCount) && !Number(moduleStreamCount) && !Number(ansibleCollectionCount) &&
-    !genericContentTypes?.length;
+    !contentConfigTypes?.length;
 
   if (noCounts) {
     return <InactiveText text={__('No content')} />;
@@ -69,16 +71,13 @@ const ContentViewVersionContent = ({ cvId, versionId, cvVersion }) => {
           <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/files`, '')}>{`${fileCount} Files`}</a><br />
         </>
       }
-      {ansibleCollectionCount > 0 &&
-        <>
-          <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/ansibleCollections`, '')}>{`${ansibleCollectionCount} Collections`}</a><br />
-        </>
-      }
-      {genericContentTypes?.length > 0 &&
-        genericContentTypes.map(({ label, count }) => (
-          <span key={label} style={{ whiteSpace: 'pre-line' }}>
-            {`${count} ${label}`}
-          </span>))
+      {contentConfigTypes?.length > 0 &&
+        contentConfigTypes.map(({ label, count, pluralLabel }) => (
+          <React.Fragment key={label}>
+            <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/${camelCase(pluralLabel)}`, '')}>
+              {`${count} ${label}`}
+            </a><br />
+          </React.Fragment>))
       }
     </>
   );

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersions.js

@@ -92,7 +92,7 @@ const ContentViewVersions = ({ cvId, details }) => {
       { title: <ContentViewVersionEnvironments {...{ environments }} /> },
       {
         title: Number(packageCount) ?
-          <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/packages`, '')}>{packageCount}</a> :
+          <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/rpmPackages`, '')}>{packageCount}</a> :
           <InactiveText text={__('No packages')} />,
       },
       { title: <ContentViewVersionErrata {...{ cvId, versionId, errataCounts }} /> },

data/webpack/scenes/ContentViews/Details/Versions/Delete/__tests__/cvVersionRemove.test.js

@@ -34,8 +34,8 @@ let envScope;
 beforeEach(() => {
   const { results } = cvVersionsData;
   [firstVersion] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
   envScope = nockInstance
     .get(environmentPathsPath)
     .query(true)
@@ -131,8 +131,8 @@ test('Can open Remove wizard and remove version from environment with hosts', as
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const hostAutocompleteUrl = '/hosts/auto_complete_search';
   const hostAutocompleteScope = mockForemanAutocomplete(nockInstance, hostAutocompleteUrl);
-  const hostSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  const hostAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  const hostSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  const hostAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const scope = nockInstance
     .get(cvVersions)
@@ -223,8 +223,8 @@ test('Can open Remove wizard and remove version from environment with activation
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const akAutocompleteUrl = '/activation_keys/auto_complete_search';
   const akAutocompleteScope = mockAutocomplete(nockInstance, akAutocompleteUrl);
-  const akSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  const akAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  const akSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  const akAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const scope = nockInstance
     .get(cvVersions)

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailConfig.js

@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
-import { startCase } from 'lodash';
+import { startCase, camelCase } from 'lodash';
 import {
   BugIcon,
   SecurityIcon,
   EnhancementIcon,
 } from '@patternfly/react-icons';
 import {
-  getAnsibleCollections,
   getContentViewVersions,
   getDebPackages,
   getDockerTags,
@@ -20,10 +19,9 @@ import {
   getPackageGroups,
   getRepositories,
   getRPMPackages,
+  getContent,
 } from '../../ContentViewDetailActions';
 import {
-  selectAnsibleCollections,
-  selectAnsibleCollectionsStatus,
   selectCVVersions,
   selectCVVersionsStatus,
   selectDebPackages,
@@ -42,11 +40,15 @@ import {
   selectRPMPackageGroupsStatus,
   selectRPMPackages,
   selectRPMPackagesStatus,
+  selectContent,
+  selectContentStatus,
 } from '../../ContentViewDetailSelectors';
 import ContentViewVersionRepositoryCell from './ContentViewVersionRepositoryCell';
+import ContentConfig from '../../../../Content/ContentConfig';
 
 export const TableType = PropTypes.shape({
   name: PropTypes.string,
+  route: PropTypes.string,
   getCountKey: PropTypes.func,
   repoType: PropTypes.string,
   responseSelector: PropTypes.func,
@@ -64,6 +66,7 @@ export const TableType = PropTypes.shape({
 export default ({ cvId, versionId }) => [
   {
     name: __('Components'),
+    route: 'components',
     getCountKey: item => item?.component_view_count,
     responseSelector: state => selectCVVersions(state, cvId),
     statusSelector: state => selectCVVersionsStatus(state, cvId),
@@ -91,6 +94,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('Repositories'),
+    route: 'repositories',
     getCountKey: item => item?.repositories?.length,
     responseSelector: state => selectRepositories(state),
     statusSelector: state => selectRepositoriesStatus(state),
@@ -127,6 +131,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('RPM Packages'),
+    route: 'rpmPackages',
     repoType: 'yum',
     getCountKey: item => item?.rpm_count,
     responseSelector: state => selectRPMPackages(state),
@@ -148,6 +153,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('RPM Package Groups'),
+    route: 'rpmPackageGroups',
     repoType: 'yum',
     getCountKey: item => item?.package_group_count,
     responseSelector: state => selectRPMPackageGroups(state),
@@ -161,6 +167,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('Files'),
+    route: 'files',
     repoType: 'file',
     getCountKey: item => item?.file_count,
     responseSelector: state => selectFiles(state),
@@ -180,6 +187,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('Errata'),
+    route: 'errata',
     repoType: 'yum',
     getCountKey: item => item?.erratum_count,
     responseSelector: state => selectErrata(state),
@@ -233,6 +241,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('Module Streams'),
+    route: 'moduleStreams',
     repoType: 'yum',
     getCountKey: item => item?.module_stream_count,
     responseSelector: state => selectModuleStreams(state),
@@ -255,6 +264,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('Deb Packages'),
+    route: 'debPackages',
     repoType: 'deb',
     getCountKey: item => item?.deb_count,
     responseSelector: state => selectDebPackages(state),
@@ -273,38 +283,9 @@ export default ({ cvId, versionId }) => [
       { title: __('Architecture'), getProperty: item => item?.architecture },
     ],
   },
-  {
-    name: __('Ansible Collections'),
-    repoType: 'ansible_collection',
-    getCountKey: item => item?.ansible_collection_count,
-    responseSelector: state => selectAnsibleCollections(state),
-    statusSelector: state => selectAnsibleCollectionsStatus(state),
-    autocompleteEndpoint: `/ansible_collections/auto_complete_search?content_view_version_id=${versionId}`,
-    fetchItems: params => getAnsibleCollections({ content_view_version_id: versionId, ...params }),
-    columnHeaders: [
-      {
-        title: __('Name'),
-        getProperty: item => (
-          <a href={urlBuilder(`ansible_collections/${item?.id}`, '')}>
-            {item?.name}
-          </a>),
-      },
-      {
-        title: __('Author'),
-        getProperty: item => item?.namespace,
-      },
-      {
-        title: __('Version'),
-        getProperty: item => item?.version,
-      },
-      {
-        title: __('Checksum'),
-        getProperty: item => item?.checksum,
-      },
-    ],
-  },
   {
     name: __('Docker Tags'),
+    route: 'dockerTags',
     repoType: 'docker',
     getCountKey: item => item?.docker_tag_count,
     responseSelector: state => selectDockerTags(state),
@@ -329,4 +310,19 @@ export default ({ cvId, versionId }) => [
       { title: __('Product Name'), getProperty: item => item?.product?.name },
     ],
   },
+  ...ContentConfig.map(({
+    names: { pluralTitle, pluralLabel, singularLabel },
+    columnHeaders,
+  }) => ({
+    name: pluralTitle,
+    route: camelCase(pluralLabel),
+    repoType: singularLabel,
+    getCountKey: item => item[`${singularLabel}_count`],
+    responseSelector: state => selectContent(pluralLabel, state),
+    statusSelector: state => selectContentStatus(pluralLabel, state),
+    autocompleteEndpoint: `/${pluralLabel}/auto_complete_search?content_view_version_id=${versionId}`,
+    fetchItems: params =>
+      getContent(pluralLabel, { content_view_version_id: versionId, ...params }),
+    columnHeaders,
+  })),
 ];

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetails.js

@@ -3,7 +3,7 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useParams, Route, useHistory, useLocation, Redirect, Switch } from 'react-router-dom';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { STATUS } from 'foremanReact/constants';
-import { isEmpty, camelCase, first } from 'lodash';
+import { isEmpty, first } from 'lodash';
 import { Grid, Tabs, Tab, TabTitleText, Label } from '@patternfly/react-core';
 import { number, shape } from 'prop-types';
 import './ContentViewVersionDetails.scss';
@@ -68,13 +68,14 @@ const ContentViewVersionDetails = ({ cvId, details }) => {
   const filteredTableConfigs = tableConfigs.filter(({ getCountKey }) => !!getCountKey(response));
   const { repositories } = versionDetails;
   const showTabs = filteredTableConfigs.length > 0 && repositories;
-  const getCurrentActiveKey = tab ?? camelCase(first(filteredTableConfigs)?.name);
+  const getCurrentActiveKey = tab ?? first(filteredTableConfigs)?.route;
 
   return (
     <Grid>
       <ContentViewVersionDetailsHeader
         versionDetails={versionDetails}
         onEdit={editDiscription}
+        loading={status === STATUS.PENDING}
         details={details}
       />
       {showTabs &&
@@ -84,10 +85,10 @@ const ContentViewVersionDetails = ({ cvId, details }) => {
             onSelect={onSelect}
             isVertical
           >
-            {filteredTableConfigs.map(({ name, getCountKey }) => (
+            {filteredTableConfigs.map(({ route, name, getCountKey }) => (
               <Tab
-                key={name}
-                eventKey={camelCase(name)}
+                key={route}
+                eventKey={route}
                 title={
                   <>
                     <TabTitleText>{name}</TabTitleText>
@@ -100,9 +101,9 @@ const ContentViewVersionDetails = ({ cvId, details }) => {
           <Switch>
             {filteredTableConfigs.map(config => (
               <Route
-                key={camelCase(config.name)}
+                key={config.route}
                 exact
-                path={`/versions/:versionId([0-9]+)/${camelCase(config.name)}`}
+                path={`/versions/:versionId([0-9]+)/${config.route}`}
               >
                 <ContentViewVersionDetailsTable
                   tableConfig={config}
@@ -111,7 +112,7 @@ const ContentViewVersionDetails = ({ cvId, details }) => {
               </Route>))
             }
             <Redirect
-              to={`/versions/${versionId}/${camelCase(first(filteredTableConfigs).name)}`}
+              to={`/versions/${versionId}/${first(filteredTableConfigs).route}`}
             />
           </Switch>
         </div>

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailsHeader.js

@@ -6,9 +6,7 @@ import {
   GridItem,
   TextContent,
   Text,
-  TextList,
   TextVariants,
-  TextListVariants,
   Label,
   Flex,
   FlexItem,
@@ -18,11 +16,11 @@ import {
   DropdownPosition,
 } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
-import EditableTextInput from '../../../../../components/EditableTextInput';
 import { hasPermission } from '../../../helpers';
 import ContentViewVersionPromote from '../../Promote/ContentViewVersionPromote';
 import getEnvironmentPaths from '../../../components/EnvironmentPaths/EnvironmentPathActions';
 import RemoveCVVersionWizard from '../Delete/RemoveCVVersionWizard';
+import ActionableDetail from '../../../../../components/ActionableDetail';
 
 const ContentViewVersionDetailsHeader = ({
   versionDetails: {
@@ -30,6 +28,7 @@ const ContentViewVersionDetailsHeader = ({
   },
   onEdit,
   details: { permissions },
+  loading,
 }) => {
   const dispatch = useDispatch();
   useEffect(
@@ -98,18 +97,16 @@ const ContentViewVersionDetailsHeader = ({
       </GridItem>
       <GridItem className="content-view-header-content" span={12}>
         <TextContent>
-          <TextList component={TextListVariants.dl}>
-            <EditableTextInput
-              key={description} // This fixes a render issue with the initial value
-              textArea
-              label={__('Description')}
-              attribute="description"
-              placeholder={__('No description')}
-              onEdit={onEdit}
-              disabled={!hasPermission(permissions, 'edit_content_views')}
-              value={description}
-            />
-          </TextList>
+          <ActionableDetail
+            key={description} // This fixes a render issue with the initial value
+            textArea
+            attribute="description"
+            loading={loading}
+            placeholder={__('No description')}
+            onEdit={onEdit}
+            disabled={!hasPermission(permissions, 'edit_content_views')}
+            value={description}
+          />
         </TextContent>
         <Flex>
           {environments?.map(({ name, id: envId }) =>
@@ -164,6 +161,7 @@ ContentViewVersionDetailsHeader.propTypes = {
   details: PropTypes.shape({
     permissions: PropTypes.shape({}),
   }).isRequired,
+  loading: PropTypes.bool.isRequired,
 };
 
 export default ContentViewVersionDetailsHeader;

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionRepositoryCell.js

@@ -67,7 +67,7 @@ const ContentViewVersionRepositoryCell = ({
     },
   };
 
-  ContentConfig().forEach((type) => {
+  ContentConfig.forEach((type) => {
     CONTENT_COUNTS[type.names.singularLabel] = {
       name: type.names.pluralLowercase,
       url: `products/${id}/repositories/${libraryInstanceId}/content/${type.names.pluralLabel}`,

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/__tests__/ContentViewVersionDetails.test.js

@@ -199,8 +199,8 @@ testConfig.forEach(({
     const { version } = ContentViewVersionDetailsData;
 
     const autocompleteScope = mockAutocomplete(nockInstance, autoCompleteUrl);
-    const searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY, 500);
-    const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, true);
+    const searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY);
+    const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING);
 
     const scope = nockInstance
       .get(cvVersions)
@@ -251,8 +251,8 @@ test('Can change repository selector', async (done) => {
 
   const { version } = ContentViewVersionDetailsData;
   const autocompleteScope = mockAutocomplete(nockInstance, autoCompleteUrl);
-  const searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY, 500);
-  const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, true);
+  const searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY, 0);
+  const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING);
 
   const scope = nockInstance
     .get(cvVersions)

data/webpack/scenes/ContentViews/Details/Versions/__tests__/contentViewVersions.test.js

@@ -41,8 +41,8 @@ let envScope;
 beforeEach(() => {
   const { results } = cvVersionsData;
   [firstVersion] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
   envScope = nockInstance
     .get(environmentPathsPath)
     .query(true)
@@ -122,7 +122,7 @@ test('Can show package and erratas and link to list page', async () => {
 
   await patientlyWaitFor(() => {
     expect(getAllByText(8)[0].closest('a'))
-      .toHaveAttribute('href', '/content_views/5#/versions/11/packages/');
+      .toHaveAttribute('href', '/content_views/5#/versions/11/rpmPackages/');
     expect(getAllByText(15)[0].closest('a'))
       .toHaveAttribute('href', '/content_views/5#/versions/11/errata/');
     expect(getByText(5)).toBeInTheDocument();

data/webpack/scenes/ContentViews/Details/__tests__/contentViewDetail.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrapper';
 import api from '../../../../services/api';
 import ContentViewDetails from '../ContentViewDetails';
@@ -53,7 +53,7 @@ test('Can edit text details such as name', async (done) => {
     .query(true)
     .reply(200, cvDetailData);
   const updatescope = nockInstance
-    .put(cvDetailsPath, { name: newName })
+    .put(cvDetailsPath, { include_permissions: true, name: newName })
     .reply(200, updatedCVDetails);
   const afterUpdateScope = nockInstance
     .get(cvDetailsPath)
@@ -81,6 +81,7 @@ test('Can edit text details such as name', async (done) => {
   assertNockRequest(getscope);
   assertNockRequest(updatescope);
   assertNockRequest(afterUpdateScope, done);
+  act(done);
 });
 
 test('Can edit boolean details such as solve dependencies', async (done) => {
@@ -90,7 +91,7 @@ test('Can edit boolean details such as solve dependencies', async (done) => {
     .query(true)
     .reply(200, cvDetailData);
   const updatescope = nockInstance
-    .put(cvDetailsPath, { solve_dependencies: true })
+    .put(cvDetailsPath, { include_permissions: true, solve_dependencies: true })
     .reply(200, updatedCVDetails);
   const afterUpdateScope = nockInstance
     .get(cvDetailsPath)
@@ -115,6 +116,7 @@ test('Can edit boolean details such as solve dependencies', async (done) => {
   assertNockRequest(getscope);
   assertNockRequest(updatescope);
   assertNockRequest(afterUpdateScope, done);
+  act(done);
 });
 
 test('Can link to view tasks', async () => {

data/webpack/scenes/ContentViews/__tests__/contentViewPage.test.js

@@ -26,8 +26,8 @@ beforeEach(() => {
     .get('/api/v2/bookmarks')
     .query(true)
     .reply(200, {});
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 });
 
 afterEach(() => {

data/webpack/scenes/Hosts/ChangeContentSource/actions.js

@@ -0,0 +1,43 @@
+
+import { foremanUrl } from 'foremanReact/common/helpers';
+import { get, post, put } from 'foremanReact/redux/API';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { CHANGE_CONTENT_SOURCE_DATA,
+  CHANGE_CONTENT_SOURCE,
+  CHANGE_CONTENT_SOURCE_VIEWS } from './constants';
+
+import { getHostIds } from './helpers';
+
+export const getFormData = () =>
+  post({
+    key: CHANGE_CONTENT_SOURCE_DATA,
+    url: foremanUrl('/change_host_content_source/data'),
+    params: { host_ids: getHostIds() },
+    errorToast: () => __('Something went wrong while getting the data. See the logs for more information'),
+  });
+
+export const changeContentSource = (environmentId, contentViewId, contentSourceId, hostIds) =>
+  put({
+    key: CHANGE_CONTENT_SOURCE,
+    url: foremanUrl('/api/v2/hosts/bulk/change_content_source'),
+    params: {
+      environment_id: environmentId,
+      content_view_id: contentViewId,
+      content_source_id: contentSourceId,
+      host_ids: hostIds,
+    },
+    successToast: () => __('Content source successfully updated.'),
+    errorToast: () => __('Something went wrong while updating the content source. See the logs for more information'),
+  });
+
+export const getContentViews = environmentId =>
+  get({
+    key: CHANGE_CONTENT_SOURCE_VIEWS,
+    url: foremanUrl('/katello/api/v2/content_views'),
+    params: {
+      environment_id: environmentId,
+      full_result: true,
+    },
+    errorToast: () => __('Something went wrong while loading the content views. See the logs for more information'),
+  });

data/webpack/scenes/Hosts/ChangeContentSource/components/ContentSourceForm.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  ActionGroup,
+  Button,
+  Form,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+
+import FormField from './FormField';
+
+const ContentSourceForm = ({
+  handleSubmit,
+  environments,
+  handleEnvironment,
+  environmentId,
+  contentViews,
+  handleContentView,
+  contentViewId,
+  contentSources,
+  handleContentSource,
+  contentSourceId,
+  contentHostsIds,
+  isLoading,
+}) => {
+  const formIsValid = () => (!!environmentId &&
+                             !!contentViewId &&
+                             !!contentSourceId &&
+                             contentHostsIds.length !== 0);
+
+  return (
+    <Form
+      onSubmit={e => handleSubmit(e)}
+      className="content_source_form"
+      isHorizontal
+    >
+      <Grid hasGutter>
+        <FormField label={__('Environment')} id="change_cs_environment" value={environmentId} items={environments} onChange={handleEnvironment} isLoading={isLoading} contentHostsCount={contentHostsIds.length} />
+        <FormField label={__('Content View')} id="change_cs_content_view" value={contentViewId} items={contentViews} onChange={handleContentView} isLoading={isLoading} contentHostsCount={contentHostsIds.length} />
+        <FormField label={__('Content Source')} id="change_cs_content_source" value={contentSourceId} items={contentSources} onChange={handleContentSource} isLoading={isLoading} contentHostsCount={contentHostsIds.length} />
+
+        <GridItem>
+          <ActionGroup>
+            <Button
+              variant="primary"
+              id="generate_btn"
+              onClick={e => handleSubmit(e)}
+              isDisabled={isLoading || !formIsValid()}
+              isLoading={isLoading}
+            >
+              { __('Change content source')}
+            </Button>
+          </ActionGroup>
+        </GridItem>
+      </Grid>
+    </Form>);
+};
+
+ContentSourceForm.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  environments: PropTypes.arrayOf(PropTypes.object),
+  handleEnvironment: PropTypes.func.isRequired,
+  environmentId: PropTypes.string,
+  contentViews: PropTypes.arrayOf(PropTypes.object),
+  handleContentView: PropTypes.func.isRequired,
+  contentViewId: PropTypes.string,
+  contentSources: PropTypes.arrayOf(PropTypes.object),
+  handleContentSource: PropTypes.func.isRequired,
+  contentSourceId: PropTypes.string,
+  contentHostsIds: PropTypes.arrayOf(PropTypes.number),
+  isLoading: PropTypes.bool,
+};
+
+ContentSourceForm.defaultProps = {
+  environments: [],
+  environmentId: '',
+  contentViews: [],
+  contentViewId: '',
+  contentSources: [],
+  contentSourceId: '',
+  contentHostsIds: [],
+  isLoading: false,
+};
+
+export default ContentSourceForm;