katello 4.8.0.rc1 → 4.8.0

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/AlternateContentSources/MainTable/ACSTable.js

@@ -107,6 +107,7 @@ const ACSTable = () => {
   const onBulkDelete = (ids) => {
     setDeleting(true);
     dispatch(bulkDeleteACS({ ids }, () => {
+      setDeleting(false);
       if (acsId && ids.has(Number(acsId))) {
         push('/alternate_content_sources');
       } else {

data/webpack/scenes/Content/{ContentPage.js → GenericContentPage.js}

@@ -12,7 +12,7 @@ import { getContentTypes } from './ContentActions';
 import Loading from '../../components/Loading';
 import EmptyStateMessage from '../../components/Table/EmptyStateMessage';
 
-const ContentPage = () => {
+const GenericContentPage = () => {
   const dispatch = useDispatch();
   const contentTypesResponse = useSelector(selectContentTypes);
   const contentTypesStatus = useSelector(selectContentTypesStatus);
@@ -86,4 +86,4 @@ const ContentPage = () => {
   );
 };
 
-export default ContentPage;
+export default GenericContentPage;

data/webpack/scenes/Content/__tests__/contentTable.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
 import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../test-utils/nockWrapper';
 import api from '../../../services/api';
-import ContentPage from '../ContentPage';
+import GenericContentPage from '../GenericContentPage';
 import ansibleCollectionsResponse from './ansibleCollections.fixtures';
 import contentTypesResponse from './contentTypes.fixtures.json';
 import pythonPackagesResponse from './pythonPackages.fixtures.json';
@@ -29,7 +29,7 @@ test('Can call API for Python Packages and show table on page load', async (done
     .reply(200, contentTypesResponse);
 
   const { queryByText, getAllByText } =
-    renderWithRedux(<ContentPage />);
+    renderWithRedux(<GenericContentPage />);
 
   expect(queryByText(firstPackage.name)).toBeNull();
   await patientlyWaitFor(() => {

data/webpack/scenes/Content/index.js

@@ -1,4 +1,4 @@
 import { withRouter } from 'react-router-dom';
-import ContentPage from './ContentPage';
+import GenericContentPage from './GenericContentPage';
 
-export default withRouter(ContentPage);
+export default withRouter(GenericContentPage);

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/Details/Filters/Rules/ContainerTag/AddEditContainerTagRuleModal.js

@@ -5,7 +5,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { Modal, ModalVariant, Form, FormGroup, ActionGroup, Button } from '@patternfly/react-core';
 import { addCVFilterRule, editCVFilterRule, getCVFilterRules } from '../../../ContentViewDetailActions';
 import { orgId } from '../../../../../../services/api';
-import Search from '../../../../../../components/Search/Search';
+import SearchText from '../../../../../../components/Search/SearchText';
 
 const AddEditContainerTagRuleModal = ({
   onClose, filterId, selectedFilterRuleData, repositoryIds,
@@ -16,7 +16,7 @@ const AddEditContainerTagRuleModal = ({
   const [saving, setSaving] = useState(false);
   const isEditing = name && id;
 
-  const autoCompleteEndpoint = '/docker_tags/auto_complete_name';
+  const autoCompleteEndpoint = '/katello/api/v2/docker_tags/auto_complete_name';
 
   const onSubmit = () => {
     setSaving(true);
@@ -36,13 +36,10 @@ const AddEditContainerTagRuleModal = ({
     onClose();
   };
 
-  const getAutoCompleteParams = term => ({
-    endpoint: autoCompleteEndpoint,
-    params: {
-      organization_id: orgId(),
-      term,
-      repoids: repositoryIds,
-    },
+  const searchDataProp = term => ({
+    organization_id: orgId(),
+    term,
+    repoids: repositoryIds,
   });
 
   return (
@@ -59,14 +56,14 @@ const AddEditContainerTagRuleModal = ({
       }}
       >
         <FormGroup label={__('Tag name')} isRequired fieldId="tag_name">
-          <Search
-            patternfly4
-            initialInputValue={tagName}
-            onSearch={() => {}}
-            getAutoCompleteParams={getAutoCompleteParams}
-            foremanApiAutoComplete={false}
-            isTextInput
-            setTextInputValue={setTagName}
+          <SearchText
+            data={{
+              autocomplete: {
+                url: autoCompleteEndpoint,
+                apiParams: tag => searchDataProp(tag),
+              },
+            }}
+            onSearchChange={setTagName}
           />
         </FormGroup>
         <ActionGroup>

data/webpack/scenes/ContentViews/Details/Filters/Rules/Package/AddEditPackageRuleModal.js

@@ -13,7 +13,7 @@ import {
   selectCreateFilterRuleStatus,
 } from '../../../ContentViewDetailSelectors';
 import { orgId } from '../../../../../../services/api';
-import Search from '../../../../../../components/Search/Search';
+import SearchText from '../../../../../../components/Search/SearchText';
 
 const AddEditPackageRuleModal = ({
   filterId, onClose, selectedFilterRuleData, repositoryIds,
@@ -27,8 +27,8 @@ const AddEditPackageRuleModal = ({
     max_version: editingMaxVersion,
   } = selectedFilterRuleData || {};
 
-  const architectureAutoCompleteEndpoint = '/packages/auto_complete_arch';
-  const nameAutoCompleteEndpoint = '/packages/auto_complete_name';
+  const architectureAutoCompleteEndpoint = '/katello/api/v2/packages/auto_complete_arch';
+  const nameAutoCompleteEndpoint = '/katello/api/v2/packages/auto_complete_name';
 
   const isEditing = !!selectedFilterRuleData;
 
@@ -118,14 +118,11 @@ const AddEditPackageRuleModal = ({
     }
   }, [status, setSaving]);
 
-  const getAutoCompleteParams = (term, autoCompleteEndpoint) => ({
-    endpoint: autoCompleteEndpoint,
-    params: {
-      organization_id: orgId(),
-      term,
-      repoids: repositoryIds,
-      non_modular: true,
-    },
+  const searchDataProp = term => ({
+    organization_id: orgId(),
+    term,
+    repoids: repositoryIds,
+    non_modular: true,
   });
 
   return (
@@ -142,26 +139,25 @@ const AddEditPackageRuleModal = ({
       }}
       >
         <FormGroup label={__('RPM name')} isRequired fieldId="name">
-          <Search
-            patternfly4
-            initialInputValue={name}
-            onSearch={() => {}}
-            getAutoCompleteParams={term => getAutoCompleteParams(term, nameAutoCompleteEndpoint)}
-            foremanApiAutoComplete={false}
-            isTextInput
-            setTextInputValue={setName}
+          <SearchText
+            data={{
+              autocomplete: {
+                url: nameAutoCompleteEndpoint,
+                apiParams: input => searchDataProp(input),
+              },
+            }}
+            onSearchChange={setName}
           />
         </FormGroup>
         <FormGroup label={__('Architecture')} fieldId="architecture">
-          <Search
-            patternfly4
-            initialInputValue={architecture}
-            onSearch={() => {}}
-            getAutoCompleteParams={term =>
-              getAutoCompleteParams(term, architectureAutoCompleteEndpoint)}
-            foremanApiAutoComplete={false}
-            isTextInput
-            setTextInputValue={setArchitecture}
+          <SearchText
+            data={{
+              autocomplete: {
+                url: architectureAutoCompleteEndpoint,
+                apiParams: arch => searchDataProp(arch),
+              },
+            }}
+            onSearchChange={setArchitecture}
           />
         </FormGroup>
         <FormGroup label={__('Version')} fieldId="version_comparator">

data/webpack/scenes/ContentViews/Details/Filters/__tests__/CVContainerImageFilterContent.test.js

@@ -7,7 +7,6 @@ import {
   nockInstance,
   assertNockRequest,
   mockAutocomplete,
-  mockSetting,
 } from '../../../../../test-utils/nockWrapper';
 import api from '../../../../../services/api';
 import CVContainerImageFilterContent from '../CVContainerImageFilterContent';
@@ -140,8 +139,6 @@ test('Can add filter rules', async (done) => {
     2,
   );
   const autocompleteNameScope = mockAutocomplete(nockInstance, autocompleteNameUrl, true, [], 2);
-  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const cvFiltersScope = nockInstance
     .get(cvFilterRulesPath)
@@ -158,7 +155,7 @@ test('Can add filter rules', async (done) => {
     .query(true)
     .reply(200, { ...cvFilterFixtures, results: [...cvFilterFixtures.results, addedRule] });
 
-  const { queryByText, getByLabelText } =
+  const { queryByText, getByLabelText, getAllByLabelText } =
     renderWithRedux(
       withCVRoute(<CVContainerImageFilterContent filterId={195} details={details} />),
       renderOptions,
@@ -177,7 +174,9 @@ test('Can add filter rules', async (done) => {
     expect(getByLabelText('add_edit_filter_rule')).toHaveAttribute('aria-disabled', 'true');
   });
 
-  fireEvent.change(getByLabelText('text input for search'), { target: { value: 'new-rule' } });
+  const searchInput = getAllByLabelText('Search input')[1];
+  searchInput.focus();
+  fireEvent.change(searchInput, { target: { value: 'new-rule' } });
   fireEvent.submit(getByLabelText('add_edit_filter_rule'));
 
   await patientlyWaitFor(() => {
@@ -185,8 +184,6 @@ test('Can add filter rules', async (done) => {
   });
 
   assertNockRequest(autocompleteScope);
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvFilterAddScope);
   assertNockRequest(autocompleteNameScope);
@@ -205,8 +202,6 @@ test('Can edit filter rules', async (done) => {
     2,
   );
   const autocompleteNameScope = mockAutocomplete(nockInstance, autocompleteNameUrl, true, [], 2);
-  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const cvFiltersScope = nockInstance
     .get(cvFilterRulesPath)
@@ -231,7 +226,9 @@ test('Can edit filter rules', async (done) => {
       }),
     });
 
-  const { queryByText, getAllByLabelText, getByLabelText } =
+  const {
+    queryByText, getAllByLabelText, getByLabelText,
+  } =
     renderWithRedux(
       withCVRoute(<CVContainerImageFilterContent filterId={195} details={details} />),
       renderOptions,
@@ -258,7 +255,9 @@ test('Can edit filter rules', async (done) => {
     expect(getByLabelText('add_edit_filter_rule')).toHaveAttribute('aria-disabled', 'false');
   });
 
-  fireEvent.change(getByLabelText('text input for search'), { target: { value: 'changed-name' } });
+  const searchInput = getAllByLabelText('Search input')[1];
+  searchInput.focus();
+  fireEvent.change(searchInput, { target: { value: 'changed-name' } });
   fireEvent.submit(getByLabelText('add_edit_filter_rule'));
 
   await patientlyWaitFor(() => {
@@ -266,8 +265,6 @@ test('Can edit filter rules', async (done) => {
   });
 
   assertNockRequest(autocompleteScope);
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvFilterAddScope);
   assertNockRequest(autocompleteNameScope);
@@ -284,8 +281,6 @@ test('Shows call-to-action when there are no filter rules', async (done) => {
     2,
   );
   const autocompleteNameScope = mockAutocomplete(nockInstance, autocompleteNameUrl, true, [], 2);
-  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
   const cvFiltersScope = nockInstance
     .get(cvFilterRulesPath)
     .times(2)
@@ -302,13 +297,11 @@ test('Shows call-to-action when there are no filter rules', async (done) => {
   await patientlyWaitFor(() => expect(queryByLabelText('add_filter_rule_empty_state')).toBeInTheDocument());
   fireEvent.click(queryByLabelText('add_filter_rule_empty_state'));
   await patientlyWaitFor(() => {
-    expect(getAllByLabelText('text input for search')[0]).toBeInTheDocument();
+    expect(getAllByLabelText('Search input')[0]).toBeInTheDocument();
   });
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(autocompleteNameScope);
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
   assertNockRequest(cvFiltersScope, done);
   act(done);
 });

data/webpack/scenes/ContentViews/Details/Filters/__tests__/CVRpmFilterContent.test.js

@@ -8,7 +8,6 @@ import {
   nockInstance,
   assertNockRequest,
   mockAutocomplete,
-  mockSetting,
 } from '../../../../../test-utils/nockWrapper';
 import api from '../../../../../services/api';
 import cvFilterDetails from './cvPackageFilterDetail.fixtures.json';
@@ -163,8 +162,6 @@ test('Can add package rules to filter in a self-closing modal', async (done) =>
     nockInstance, autocompleteArchUrl, true,
     undefined, 2,
   );
-  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0, 3);
-  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', undefined, 3);
 
   const cvFiltersScope = nockInstance
     .get(cvFiltersPath)
@@ -214,20 +211,22 @@ test('Can add package rules to filter in a self-closing modal', async (done) =>
   });
   getByLabelText('add_rpm_rule').click();
   await patientlyWaitFor(() => {
-    expect(getAllByLabelText('text input for search')[0]).toBeInTheDocument();
-    expect(getAllByLabelText('text input for search')[1]).toBeInTheDocument();
+    expect(getAllByLabelText('Search input')[0]).toBeInTheDocument();
+    expect(getAllByLabelText('Search input')[1]).toBeInTheDocument();
     expect(getByLabelText('add_package_filter_rule')).toBeInTheDocument();
   });
-  fireEvent.change(getAllByLabelText('text input for search')[0], { target: { value: 'elephant' } });
-  fireEvent.change(getAllByLabelText('text input for search')[1], { target: { value: 'noarch' } });
+  const nameSearchInput = getAllByLabelText('Search input')[1];
+  const archSearchInput = getAllByLabelText('Search input')[2];
+  nameSearchInput.focus();
+  fireEvent.change(nameSearchInput, { target: { value: 'elephant' } });
+  archSearchInput.focus();
+  fireEvent.change(archSearchInput, { target: { value: 'noarch' } });
   fireEvent.submit(getByLabelText('add_package_filter_rule'));
 
   await patientlyWaitFor(() => {
     expect(queryByText('Add rule')).not.toBeInTheDocument();
   });
   assertNockRequest(autocompleteScope);
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
   assertNockRequest(autocompleteNameScope);
   assertNockRequest(autocompleteArchScope);
   assertNockRequest(cvFiltersScope);
@@ -241,8 +240,6 @@ test('Can add package rules to filter in a self-closing modal', async (done) =>
 test('Remove rpm filter rule in a self-closing modal', async (done) => {
   const { name: cvFilterName } = cvFilterDetails;
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const cvFiltersScope = nockInstance
     .get(cvFiltersPath)
@@ -289,8 +286,6 @@ test('Remove rpm filter rule in a self-closing modal', async (done) => {
   });
 
   assertNockRequest(autocompleteScope);
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvFilterDetailsScope);
   assertNockRequest(cvPackageFilterRulesScope);
@@ -310,8 +305,6 @@ test('Edit rpm filter rule in a self-closing modal', async (done) => {
     nockInstance, autocompleteArchUrl, true,
     undefined, 2,
   );
-  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0, 3);
-  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', undefined, 3);
   const cvFiltersScope = nockInstance
     .get(cvFiltersPath)
     .times(2)
@@ -366,8 +359,6 @@ test('Edit rpm filter rule in a self-closing modal', async (done) => {
   });
 
   assertNockRequest(autocompleteScope);
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
   assertNockRequest(autocompleteNameScope);
   assertNockRequest(autocompleteArchScope);
   assertNockRequest(cvFiltersScope);
@@ -381,8 +372,6 @@ test('Shows call-to-action when there are no RPM filters', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const autocompleteNameScope = mockAutocomplete(nockInstance, autocompleteNameUrl);
   const autocompleteArchScope = mockAutocomplete(nockInstance, autocompleteArchUrl);
-  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0, 3);
-  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', undefined, 3);
   const cvFilterDetailScope = nockInstance
     .get(cvFilterDetailsPath)
     .query(true)
@@ -397,7 +386,7 @@ test('Shows call-to-action when there are no RPM filters', async (done) => {
     .query(true)
     .reply(200, emptyCVPackageFilterRules);
   const {
-    queryByLabelText, getAllByLabelText, queryByText,
+    queryByLabelText, queryByText, getAllByLabelText,
   } =
     renderWithRedux(withCVRoute(<ContentViewFilterDetails
       cvId={1}
@@ -408,7 +397,7 @@ test('Shows call-to-action when there are no RPM filters', async (done) => {
   fireEvent.click(queryByLabelText('add_rpm_rule_empty_state'));
 
   await patientlyWaitFor(() => {
-    expect(getAllByLabelText('text input for search')[0]).toBeInTheDocument();
+    expect(getAllByLabelText('Search input')[0]).toBeInTheDocument();
     expect(queryByText('Cancel')).toBeInTheDocument();
   });
   fireEvent.click(queryByText('Cancel'));
@@ -418,8 +407,6 @@ test('Shows call-to-action when there are no RPM filters', async (done) => {
   assertNockRequest(autocompleteNameScope);
   assertNockRequest(autocompleteArchScope);
   assertNockRequest(autocompleteScope);
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvFilterDetailScope);
   assertNockRequest(cvPackageFilterRulesScope);

data/webpack/scenes/ContentViews/Details/Filters/__tests__/ContentViewPackageGroupFilter.test.js

@@ -46,8 +46,6 @@ const renderOptions = {
 
 const withCVRoute = component => <Route path="/content_views/:id([0-9]+)#/filters/:filterId([0-9]+)">{component}</Route>;
 
-jest.mock('../../../../../components/Search', () => () => 'mocked!');
-
 test('Can enable and disable add filter button', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
   const { name: cvFilterName } = cvFilterDetails;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { act, renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
 import { Route } from 'react-router-dom';
-import { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../../../test-utils/nockWrapper';
+import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../../../test-utils/nockWrapper';
 import api from '../../../../../services/api';
 import CONTENT_VIEWS_KEY from '../../../ContentViewsConstants';
 import ContentViewVersions from '../ContentViewVersions';
@@ -36,15 +36,11 @@ const autocompleteUrl = '/content_view_versions/auto_complete_search';
 const taskPollingUrl = '/foreman_tasks/api/tasks/6b900ff8-62bb-42ac-8c45-da86b7258520';
 
 let firstVersion;
-let searchDelayScope;
-let autoSearchScope;
 let envScope;
 
 beforeEach(() => {
   const { results } = cvVersionsData;
   [firstVersion] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
   envScope = nockInstance
     .get(environmentPathsPath)
     .query(true)
@@ -53,8 +49,6 @@ beforeEach(() => {
 
 afterEach(() => {
   assertNockRequest(envScope);
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
 });
 
 test('Can call API and show versions on page load', async (done) => {

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/ContentViews/expansions/__tests__/contentViewComponentsModal.test.js

@@ -9,8 +9,6 @@ import RelatedCompositeContentViewsModal from '../RelatedCompositeContentViewsMo
 
 import contentViewComponentsResponse from './contentViewComponentsResponse.fixtures.json';
 
-jest.mock('../../../../components/Search', () => () => 'Mocked!');
-
 test('Can call API and show Related Content Views Components Modal', async (done) => {
   const cvId = 5;
   const relatedCvCount = 2;