katello 4.8.0.rc1 → 4.8.0.rc2

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ChangeHostCVModal.js

@@ -1,11 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { Modal, Button, SelectOption, Alert, Flex } from '@patternfly/react-core';
-import {
-  global_palette_black_600 as pfDescriptionColor,
-} from '@patternfly/react-tokens';
+import { Modal, Button, Alert } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
@@ -15,42 +11,15 @@ import { ENVIRONMENT_PATHS_KEY } from '../../../../../scenes/ContentViews/compon
 import api from '../../../../../services/api';
 import getContentViews from '../../../../../scenes/ContentViews/ContentViewsActions';
 import { selectContentViews, selectContentViewStatus } from '../../../../../scenes/ContentViews/ContentViewSelectors';
-import { uniq } from '../../../../../utils/helpers';
-import ContentViewIcon from '../../../../../scenes/ContentViews/components/ContentViewIcon';
 import updateHostContentViewAndEnvironment from './HostContentViewActions';
 import HOST_CV_AND_ENV_KEY from './HostContentViewConstants';
 import { getHostDetails } from '../../HostDetailsActions';
 import ContentViewSelect from '../../../../../scenes/ContentViews/components/ContentViewSelect/ContentViewSelect';
+import ContentViewSelectOption
+  from '../../../../../scenes/ContentViews/components/ContentViewSelect/ContentViewSelectOption';
 
 const ENV_PATH_OPTIONS = { key: ENVIRONMENT_PATHS_KEY };
 
-const ContentViewDescription = ({ cv, versionNumber }) => {
-  const descriptionStyle = {
-    fontSize: '12px',
-    fontWeight: 400,
-    color: pfDescriptionColor.value,
-  };
-  if (cv.default) return <span style={descriptionStyle}>{__('Library')}</span>;
-  return (
-    <span style={descriptionStyle}>
-      <FormattedMessage
-        id={`content-view-${cv.id}-version-${cv.latest_version}`}
-        defaultMessage="Version {versionNumber}"
-        values={{ versionNumber }}
-      />
-    </span>
-  );
-};
-
-ContentViewDescription.propTypes = {
-  cv: PropTypes.shape({
-    default: PropTypes.bool.isRequired,
-    id: PropTypes.number.isRequired,
-    latest_version: PropTypes.string.isRequired,
-  }).isRequired,
-  versionNumber: PropTypes.string.isRequired,
-};
-
 const ChangeHostCVModal = ({
   isOpen,
   closeModal,
@@ -66,6 +35,7 @@ const ChangeHostCVModal = ({
   const [cvSelectOpen, setCVSelectOpen] = useState(false);
   const dispatch = useDispatch();
   const contentViewsInEnvResponse = useSelector(state => selectContentViews(state, `FOR_ENV_${hostEnvId}`));
+  const { results } = contentViewsInEnvResponse;
   const contentViewsInEnvStatus = useSelector(state => selectContentViewStatus(state, `FOR_ENV_${hostEnvId}`));
   const hostUpdateStatus = useSelector(state => selectAPIStatus(state, HOST_CV_AND_ENV_KEY));
   useAPI( // No TableWrapper here, so we can useAPI from Foreman
@@ -73,6 +43,7 @@ const ChangeHostCVModal = ({
     api.getApiUrl(`/organizations/${orgId}/environments/paths?permission_type=promotable`),
     ENV_PATH_OPTIONS,
   );
+  const selectedCVForHostId = results?.find(cv => cv.name === selectedCVForHost)?.id;
 
   const handleModalClose = () => {
     setCVSelectOpen(false);
@@ -102,13 +73,6 @@ const ChangeHostCVModal = ({
   const { results: contentViewsInEnv = [] } = contentViewsInEnvResponse;
   const canSave = !!(selectedCVForHost && selectedEnvForHost.length);
 
-  const relevantVersionObjFromCv = (cv, env) => { // returns the entire version object
-    const versions = cv.versions.filter(version => new Set(version.environment_ids).has(env.id));
-    return uniq(versions)?.[0];
-  };
-  const relevantVersionFromCv = (cv, env) =>
-    relevantVersionObjFromCv(cv, env)?.version; // returns the version text e.g. "1.0"
-
   const refreshHostDetails = () => {
     handleModalClose();
     return dispatch(getHostDetails({ hostname: hostName }));
@@ -119,7 +83,7 @@ const ChangeHostCVModal = ({
       id: hostId,
       host: {
         content_facet_attributes: {
-          content_view_id: selectedCVForHost,
+          content_view_id: selectedCVForHostId,
           lifecycle_environment_id: selectedEnvId,
         },
       },
@@ -183,7 +147,7 @@ const ChangeHostCVModal = ({
         headerText={__('Select environment')}
         isDisabled={hostUpdateStatus === STATUS.PENDING}
       />
-      {selectedEnvForHost.length > 0 &&
+      {selectedEnvForHost.length > 0 && contentViewsInEnvStatus !== STATUS.PENDING &&
         <ContentViewSelect
           selections={selectedCVForHost}
           onClear={() => setSelectedCVForHost(null)}
@@ -193,35 +157,9 @@ const ChangeHostCVModal = ({
           onToggle={isExpanded => setCVSelectOpen(isExpanded)}
           placeholderText={cvPlaceholderText()}
         >
-          {contentViewsInEnv?.map(cv => (
-            <SelectOption
-              key={cv.id}
-              value={cv.id}
-            >
-              <Flex
-                direction={{ default: 'row', sm: 'row' }}
-                flexWrap={{ default: 'nowrap' }}
-                alignItems={{ default: 'alignItemsCenter', sm: 'alignItemsCenter' }}
-              >
-                <ContentViewIcon
-                  composite={cv.composite}
-                  size="sm"
-                />
-                <Flex
-                  direction={{ default: 'column', sm: 'column' }}
-                  flexWrap={{ default: 'nowrap' }}
-                  alignItems={{ default: 'alignItemsFlexStart', sm: 'alignItemsFlexStart' }}
-                >
-                  {cv.name}
-                  <ContentViewDescription
-                    cv={cv}
-                    versionNumber={relevantVersionFromCv(cv, selectedEnv)}
-                  />
-                </Flex>
-              </Flex>
-            </SelectOption>
-          ))
-          }
+          {(contentViewsInEnv.length !== 0) &&
+              contentViewsInEnv?.map(cv =>
+                <ContentViewSelectOption key={cv.id} cv={cv} env={selectedEnvForHost[0]} />)}
         </ContentViewSelect>
       }
     </Modal>

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

@@ -11,7 +11,9 @@ const repoTypeSearchQueryMap = {
 
 const recommendedRepositoriesRHEL = [
   'rhel-9-for-x86_64-baseos-rpms',
+  'rhel-9-for-x86_64-baseos-kickstart',
   'rhel-9-for-x86_64-appstream-rpms',
+  'rhel-9-for-x86_64-appstream-kickstart',
   'rhel-8-for-x86_64-baseos-rpms',
   'rhel-8-for-x86_64-baseos-kickstart',
   'rhel-8-for-x86_64-appstream-rpms',
@@ -33,10 +35,10 @@ const recommendedRepositoriesSatTools = [
 ];
 
 const recommendedRepositoriesMisc = [
-  'satellite-capsule-6.12-for-rhel-8-x86_64-rpms',
+  'satellite-capsule-6.13-for-rhel-8-x86_64-rpms',
   'ansible-2-for-rhel-8-x86_64-rpms',
-  'satellite-maintenance-6.12-for-rhel-8-x86_64-rpms',
-  'satellite-utils-6.12-for-rhel-8-x86_64-rpms',
+  'satellite-maintenance-6.13-for-rhel-8-x86_64-rpms',
+  'satellite-utils-6.13-for-rhel-8-x86_64-rpms',
 ];
 
 const recommendedRepositorySetLables = recommendedRepositoriesRHEL

data/webpack/scenes/AlternateContentSources/Details/ACSExpandableDetails.js

@@ -19,6 +19,7 @@ import {
   TextListItem,
   TextListItemVariants,
   TextListVariants,
+  Text,
   Flex,
   FlexItem,
 } from '@patternfly/react-core';
@@ -104,7 +105,7 @@ const ACSExpandableDetails = ({ expandedId }) => {
                 }}
                 contentId="showDetails"
               >
-                {__('Details')}
+                <Text ouiaId="expandable-details-text">{__('Details')}</Text>
               </ExpandableSectionToggle>
             </SplitItem>
             {canEdit &&
@@ -184,7 +185,7 @@ const ACSExpandableDetails = ({ expandedId }) => {
                 }}
                 contentId="showSmartProxies"
               >
-                {__('Smart proxies')}
+                <Text ouiaId="expandable-smart-proxies-text">{__('Smart proxies')}</Text>
               </ExpandableSectionToggle>
             </SplitItem>
             {canEdit &&
@@ -255,7 +256,7 @@ const ACSExpandableDetails = ({ expandedId }) => {
                   isExpanded={showProducts}
                   contentId="showProducts"
                 >
-                  {__('Products')}
+                  <Text ouiaId="expandable-products-text">{__('Products')}</Text>
                 </ExpandableSectionToggle>
               </SplitItem>
               {canEdit &&
@@ -306,7 +307,7 @@ const ACSExpandableDetails = ({ expandedId }) => {
                   isExpanded={showUrlPaths}
                   contentId="showUrlPaths"
                 >
-                  {__('URL and subpaths')}
+                  <Text ouiaId="expandable-url-paths-text">{__('URL and subpaths')}</Text>
                 </ExpandableSectionToggle>
               </SplitItem>
               {canEdit &&
@@ -367,7 +368,7 @@ const ACSExpandableDetails = ({ expandedId }) => {
                   isExpanded={showCredentials}
                   contentId="showCredentials"
                 >
-                  {__('Credentials')}
+                  <Text ouiaId="expandable-credentials-text">{__('Credentials')}</Text>
                 </ExpandableSectionToggle>
               </SplitItem>
               {canEdit &&

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditCredentials.js

@@ -122,6 +122,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
       isOpen
       onClose={onClose}
       appendTo={document.body}
+      ouiaId="acs-edit-credentials-modal"
     >
       <Form onSubmit={(e) => {
         e.preventDefault();

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditDetails.js

@@ -34,6 +34,7 @@ const ACSEditDetails = ({ onClose, acsId, acsDetails }) => {
       isOpen
       onClose={onClose}
       appendTo={document.body}
+      ouiaId="acs-edit-details-modal"
     >
       <Form onSubmit={(e) => {
         e.preventDefault();
@@ -43,9 +44,9 @@ const ACSEditDetails = ({ onClose, acsId, acsDetails }) => {
         <FormGroup label={__('Name')} isRequired fieldId="acs_name">
           <TextInput
             isRequired
+            ouiaId="acs-edit-name-field"
             type="text"
-            id="acs_name_field"
-            ouiaId="acs_name_field"
+            id={`acs-edit-name-field-${acsId}`}
             name="acs_name_field"
             aria-label="acs_name_field"
             value={acsName}

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditProducts.js

@@ -67,6 +67,7 @@ const ACSEditProducts = ({ onClose, acsId, acsDetails }) => {
       title={__('Edit products')}
       variant={ModalVariant.small}
       isOpen
+      ouiaId="acs-edit-products-modal"
       onClose={onClose}
       appendTo={document.body}
     >

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditSmartProxies.js

@@ -80,6 +80,7 @@ const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
       isOpen
       onClose={onClose}
       appendTo={document.body}
+      ouiaId="acs-edit-smart-proxies-modal"
     >
       <Form onSubmit={(e) => {
         e.preventDefault();
@@ -110,6 +111,7 @@ const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
           <Switch
             id="use-http-proxies-switch"
             aria-label="use-http-proxies-switch"
+            ouiaId="use-http-proxies-switch"
             isChecked={acsUseHttpProxies}
             onChange={checked => setAcsUseHttpProxies(checked)}
           />

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditURLPaths.js

@@ -52,6 +52,7 @@ const ACSEditURLPaths = ({ onClose, acsId, acsDetails }) => {
       isOpen
       onClose={onClose}
       appendTo={document.body}
+      ouiaId="acs-edit-url-paths-modal"
     >
       <Form onSubmit={(e) => {
         e.preventDefault();

data/webpack/scenes/ContentViews/Details/ContentViewDetails.js

@@ -199,6 +199,7 @@ export default () => {
               <FlexItem>
                 <Dropdown
                   position={DropdownPosition.right}
+                  ouiaId="cv-details-actions"
                   style={{ marginLeft: 'auto' }}
                   toggle={<KebabToggle onToggle={setDropdownOpen} id="toggle-dropdown" />}
                   isOpen={dropDownOpen}

data/webpack/scenes/ContentViews/components/ContentViewSelect/ContentViewSelectOption.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Flex, SelectOption } from '@patternfly/react-core';
+import { FormattedMessage } from 'react-intl';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  global_palette_black_600 as pfDescriptionColor,
+} from '@patternfly/react-tokens';
+import ContentViewIcon from '../../../../scenes/ContentViews/components/ContentViewIcon';
+import { uniq } from '../../../../utils/helpers';
+
+export const ContentViewDescription = ({ cv, versionNumber }) => {
+  const descriptionStyle = {
+    fontSize: '12px',
+    fontWeight: 400,
+    color: pfDescriptionColor.value,
+  };
+  if (cv.default) return <span style={descriptionStyle}>{__('Library')}</span>;
+  return (
+    <span style={descriptionStyle}>
+      <FormattedMessage
+        id={`content-view-${cv.id}-version-${cv.latest_version}`}
+        defaultMessage="Version {versionNumber}"
+        values={{ versionNumber }}
+      />
+    </span>
+  );
+};
+
+ContentViewDescription.propTypes = {
+  cv: PropTypes.shape({
+    default: PropTypes.bool.isRequired,
+    id: PropTypes.number.isRequired,
+    latest_version: PropTypes.string.isRequired,
+  }).isRequired,
+  versionNumber: PropTypes.string.isRequired,
+};
+
+export const relevantVersionObjFromCv = (cv, env) => { // returns the entire version object
+  const versions = cv.versions.filter(version => new Set(version.environment_ids).has(env.id));
+  return uniq(versions)?.[0];
+};
+
+export const relevantVersionFromCv = (cv, env) =>
+    relevantVersionObjFromCv(cv, env)?.version; // returns the version text e.g. "1.0"
+
+const ContentViewSelectOption = ({ cv, env }) => (
+  <SelectOption
+    key={cv.id}
+    value={`${cv.name}`}
+  >
+    <Flex
+      direction={{ default: 'row', sm: 'row' }}
+      flexWrap={{ default: 'nowrap' }}
+      alignItems={{ default: 'alignItemsCenter', sm: 'alignItemsCenter' }}
+    >
+      <ContentViewIcon
+        composite={cv.composite}
+        size="sm"
+      />
+      <Flex
+        direction={{ default: 'column', sm: 'column' }}
+        flexWrap={{ default: 'nowrap' }}
+        alignItems={{ default: 'alignItemsFlexStart', sm: 'alignItemsFlexStart' }}
+      >
+        {cv.name}
+        <ContentViewDescription
+          cv={cv}
+          versionNumber={relevantVersionFromCv(cv, env)}
+        />
+      </Flex>
+    </Flex>
+  </SelectOption>
+);
+
+ContentViewSelectOption.propTypes = {
+  cv: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    composite: PropTypes.bool.isRequired,
+  }).isRequired,
+  env: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default ContentViewSelectOption;

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.js

@@ -47,7 +47,7 @@ const EnvironmentPaths = ({
           return (
             <div className="env-path" key={index}>
               {index === 0 && <hr />}
-              <FormGroup key={`fg-${index}`} isInline fieldId="environment-checkbox-group">
+              <FormGroup key={`fg-${index}`} isInline fieldId="environment-checkbox-group" style={{ display: 'block' }}>
                 {environments.map(env =>
                   (<CheckboxOrRadio
                     isChecked={(publishing && env.library) ||

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import {
   ActionGroup,
   Alert,
@@ -6,20 +7,87 @@ import {
   Form,
   Grid,
   GridItem,
+  Select,
+  SelectOption,
+  SelectVariant,
+  TextContent,
 } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { STATUS } from 'foremanReact/constants';
+import api, { orgId } from '../../../../services/api';
+import { ENVIRONMENT_PATHS_KEY } from '../../../../scenes/ContentViews/components/EnvironmentPaths/EnvironmentPathConstants';
+import EnvironmentPaths from '../../../../scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths';
+import ContentViewSelect from '../../../../scenes/ContentViews/components/ContentViewSelect/ContentViewSelect';
+import ContentViewSelectOption from '../../../../scenes/ContentViews/components/ContentViewSelect/ContentViewSelectOption';
+import { selectContentViewsStatus } from '../selectors';
 
-import FormField from './FormField';
+const ENV_PATH_OPTIONS = { key: ENVIRONMENT_PATHS_KEY };
+
+const ContentSourceSelect = ({
+  contentSources,
+  selections,
+  onToggle,
+  onSelect,
+  isOpen,
+  isDisabled,
+  onClear,
+}) => (
+  <div className="content_source_section">
+    <TextContent>{__('Content source')}</TextContent>
+    <Select
+      variant={SelectVariant.single}
+      aria-label="content-source-select"
+      ouiaId="content-source-select"
+      onToggle={onToggle}
+      onSelect={onSelect}
+      selections={selections}
+      isOpen={isOpen}
+      isDisabled={isDisabled}
+      onClear={onClear}
+      className="set-select-width"
+      placeholderText={__('Select a source')}
+    >
+      {contentSources.map(cs => (
+        <SelectOption
+          key={cs.id}
+          value={`${cs.id}`}
+        >
+          {cs.name}
+        </SelectOption>
+      ))}
+    </Select>
+  </div>
+);
+
+ContentSourceSelect.propTypes = {
+  contentSources: PropTypes.arrayOf(PropTypes.shape({})),
+  selections: PropTypes.string,
+  onToggle: PropTypes.func,
+  onSelect: PropTypes.func,
+  onClear: PropTypes.func,
+  isOpen: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+};
+
+ContentSourceSelect.defaultProps = {
+  contentSources: [],
+  selections: null,
+  onToggle: undefined,
+  onSelect: undefined,
+  onClear: undefined,
+  isOpen: false,
+  isDisabled: false,
+};
 
 const ContentSourceForm = ({
   handleSubmit,
   environments,
   handleEnvironment,
-  environmentId,
   contentViews,
   handleContentView,
-  contentViewId,
+  contentViewName,
   contentSources,
   handleContentSource,
   contentSourceId,
@@ -27,17 +95,36 @@ const ContentSourceForm = ({
   isLoading,
   hostsUpdated,
 }) => {
-  const formIsValid = () => (!!environmentId &&
-    !!contentViewId &&
+  useAPI( // No TableWrapper here, so we can useAPI from Foreman
+    'get',
+    api.getApiUrl(`/organizations/${orgId()}/environments/paths?permission_type=promotable`),
+    ENV_PATH_OPTIONS,
+  );
+  const contentViewsStatus = useSelector(selectContentViewsStatus);
+  const [csSelectOpen, setCSSelectOpen] = useState(false);
+  const [cvSelectOpen, setCVSelectOpen] = useState(false);
+
+  const handleCSSelect = (_event, selection) => {
+    handleContentSource(selection);
+    setCSSelectOpen(false);
+  };
+
+  const handleCVSelect = (_event, selection) => {
+    handleContentView(selection);
+    setCVSelectOpen(false);
+  };
+
+  const formIsValid = () => (!!environments &&
+    !!contentViewName &&
     !!contentSourceId &&
     contentHosts.length !== 0);
 
   const contentSourcesIsDisabled = (isLoading || contentSources.length === 0 ||
     contentHosts.length === 0);
-  const environmentIsDisabled = (isLoading || environments.length === 0 ||
+  const environmentIsDisabled = (isLoading || environments === [] ||
     contentSourceId === '');
   const viewIsDisabled = (isLoading || contentViews.length === 0 ||
-    contentSourceId === '' || environmentId === '');
+    contentSourceId === '' || environments === []);
 
   return (
     <Form
@@ -56,24 +143,64 @@ const ContentSourceForm = ({
           />
         </GridItem>
         )}
-        <FormField label={__('Content source')} id="change_cs_content_source" value={contentSourceId} items={contentSources} onChange={handleContentSource} isDisabled={contentSourcesIsDisabled} />
-        <FormField label={__('Environment')} id="change_cs_environment" value={environmentId} items={environments} onChange={handleEnvironment} isDisabled={environmentIsDisabled} />
-        <FormField label={__('Content view')} id="change_cs_content_view" value={contentViewId} items={contentViews} onChange={handleContentView} isDisabled={viewIsDisabled} />
-
-        <GridItem>
-          <ActionGroup>
-            <Button
-              variant="primary"
-              id="generate_btn"
-              onClick={e => handleSubmit(e)}
-              isDisabled={isLoading || !formIsValid() || hostsUpdated}
-              isLoading={isLoading}
+        {contentViewsStatus === STATUS.RESOLVED &&
+            !!environments.length && contentViews.length === 0 &&
+            <Alert
+              variant="warning"
+              className="margin-top-20"
+              title={__('No content views available for the selected environment')}
+              style={{ marginBottom: '1rem' }}
             >
-              {__('Update')}
-            </Button>
-          </ActionGroup>
-        </GridItem>
+              <a href="/content_views">{__('View the Content Views page')}</a>
+              {__(' to manage and promote content views, or select a different environment.')}
+            </Alert>
+        }
       </Grid>
+      <ContentSourceSelect
+        contentSources={contentSources}
+        selections={contentSourceId}
+        onToggle={isExpanded => setCSSelectOpen(isExpanded)}
+        onSelect={handleCSSelect}
+        onClear={() => handleContentSource(null)}
+        isOpen={csSelectOpen}
+        isDisabled={contentSourcesIsDisabled || hostsUpdated}
+      />
+      <EnvironmentPaths
+        style={{ display: 'block' }}
+        userCheckedItems={environments}
+        setUserCheckedItems={handleEnvironment}
+        publishing={false}
+        multiSelect={false}
+        headerText={__('Environment')}
+        isDisabled={environmentIsDisabled || hostsUpdated}
+      />
+      {environments.length > 0 && contentViewsStatus !== STATUS.PENDING &&
+        <ContentViewSelect
+          selections={contentViewName}
+          onClear={() => handleContentView(null)}
+          onSelect={handleCVSelect}
+          isOpen={cvSelectOpen}
+          isDisabled={viewIsDisabled || hostsUpdated}
+          onToggle={isExpanded => setCVSelectOpen(isExpanded)}
+          headerText={__('Content view')}
+          ouiaId="SelectContentView"
+          className="set-select-width"
+          placeholderText={(contentViews.length === 0) ? __('No content views available') : __('Select a content view')}
+        >
+          {contentViews?.map(cv => <ContentViewSelectOption key={`${cv.id}`} cv={cv} env={environments[0]} />)}
+        </ContentViewSelect>
+        }
+      <ActionGroup style={{ display: 'block' }}>
+        <Button
+          variant="primary"
+          id="generate_btn"
+          onClick={e => handleSubmit(e)}
+          isDisabled={isLoading || !formIsValid() || hostsUpdated}
+          isLoading={isLoading}
+        >
+          {__('Update')}
+        </Button>
+      </ActionGroup>
     </Form>);
 };
 
@@ -81,10 +208,9 @@ ContentSourceForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   environments: PropTypes.arrayOf(PropTypes.shape({})),
   handleEnvironment: PropTypes.func.isRequired,
-  environmentId: PropTypes.string,
   contentViews: PropTypes.arrayOf(PropTypes.shape({})),
   handleContentView: PropTypes.func.isRequired,
-  contentViewId: PropTypes.string,
+  contentViewName: PropTypes.string,
   contentSources: PropTypes.arrayOf(PropTypes.shape({})),
   handleContentSource: PropTypes.func.isRequired,
   contentSourceId: PropTypes.string,
@@ -95,9 +221,8 @@ ContentSourceForm.propTypes = {
 
 ContentSourceForm.defaultProps = {
   environments: [],
-  environmentId: '',
   contentViews: [],
-  contentViewId: '',
+  contentViewName: '',
   contentSources: [],
   contentSourceId: '',
   contentHosts: [],