katello 4.5.1 → 4.8.0.rc2

data/webpack/scenes/Content/Details/__tests__/contentDetail.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
-import { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../../test-utils/nockWrapper';
+import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../../test-utils/nockWrapper';
 import api from '../../../../services/api';
 import { CONTENT_ID_KEY } from '../../ContentConstants';
 import ContentDetails from '../ContentDetails';
@@ -17,9 +17,6 @@ const contentRepositoryDetailsPath = api.getApiUrl('/repositories');
 
 const withContentRoute = component => <Route path="/content/:content_type([a-z_]+)/:id([0-9]+)">{component}</Route>;
 
-let searchDelayScope;
-let autoSearchScope;
-
 jest.mock('react-intl', () => ({ addLocaleData: () => { }, FormattedDate: () => 'mocked' }));
 
 test('Can call API for Python package details and show details tab on page load', async (done) => {
@@ -59,8 +56,6 @@ test('Can call API for Python package details and show details tab on page load'
 test('Can call API for Python package repository details and show repositories tab', async (done) => {
   const autocompleteUrl = '/repositories/auto_complete_search';
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const results = pythonPackageRepositoryDetailsResponse.results[0];
   const repoName = results.name;
@@ -84,8 +79,6 @@ test('Can call API for Python package repository details and show repositories t
     expect(getAllByText(contentCountWords)[0]).toBeInTheDocument();
   });
 
-  assertNockRequest(autoSearchScope);
-  assertNockRequest(searchDelayScope);
   assertNockRequest(autocompleteScope);
   assertNockRequest(pythonPackageRepositoryDetailsScope, done);
 });
@@ -122,8 +115,6 @@ test('Can call API for Ansible collection details and show details tab on page l
 test('Can call API for Ansible collection repository details and show repositories tab', async (done) => {
   const autocompleteUrl = '/repositories/auto_complete_search';
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const results = ansibleCollectionRepositoryDetailsResponse.results[0];
   const repoName = results.name;
@@ -147,8 +138,6 @@ test('Can call API for Ansible collection repository details and show repositori
     expect(getAllByText(contentCountWords)[0]).toBeInTheDocument();
   });
 
-  assertNockRequest(autoSearchScope);
-  assertNockRequest(searchDelayScope);
   assertNockRequest(autocompleteScope);
   assertNockRequest(ansibleCollectionRepositoryDetailsScope, done);
 });

data/webpack/scenes/Content/Table/ContentTable.js

@@ -33,7 +33,8 @@ const ContentTable = ({
       ouiaId="content-table"
       key={selectedContentType}
       variant={TableVariant.compact}
-      autocompleteEndpoint={`/${contentTypes[selectedContentType][1]}/auto_complete_search`}
+      autocompleteEndpoint={`/katello/api/v2/${contentTypes[selectedContentType][1]}`}
+      bookmarkController="katello_generic_content_units"
       emptyContentTitle={__(`You currently don't have any ${selectedContentType}.`)}
       emptySearchTitle={__(`No matching ${selectedContentType} found`)}
       emptyContentBody={__(`${selectedContentType} will appear here when created.`)}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
-import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../test-utils/nockWrapper';
+import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../test-utils/nockWrapper';
 import api from '../../../services/api';
 import ContentPage from '../ContentPage';
 import ansibleCollectionsResponse from './ansibleCollections.fixtures';
@@ -12,20 +12,6 @@ const contentTypesPath = api.getApiUrl('/repositories/content_types');
 const pythonPackagesPath = api.getApiUrl('/python_packages');
 const ansibleCollectionsPath = api.getApiUrl('/ansible_collections');
 
-let searchDelayScope;
-let autoSearchScope;
-
-beforeEach(() => {
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
-});
-
-afterEach(() => {
-  nock.cleanAll();
-  assertNockRequest(autoSearchScope);
-  assertNockRequest(searchDelayScope);
-});
-
 test('Can call API for Python Packages and show table on page load', async (done) => {
   const autocompleteUrl = '/python_packages/auto_complete_search';
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);

data/webpack/scenes/ContentViews/ContentViewsConstants.js

@@ -2,6 +2,13 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { toUpper } from 'lodash';
 
 const CONTENT_VIEWS_KEY = 'CONTENT_VIEWS';
+const PACKAGES_KEY = 'PACKAGES';
+const PACKAGE_GROUPS_KEY = 'PACKAGE_GROUPS';
+const ERRATA_KEY = 'ERRATA';
+const MODULE_STREAMS_KEY = 'MODULE_STREAMS';
+const DEB_PACKAGES_KEY = 'DEB_PACKAGES';
+const DOCKER_TAGS_KEY = 'DOCKER_TAGS';
+const FILES_KEY = 'FILES';
 export const CREATE_CONTENT_VIEW_KEY = 'CONTENT_VIEW_CREATE';
 export const COPY_CONTENT_VIEW_KEY = 'CONTENT_VIEW_COPY';
 export const CREATE_CONTENT_VIEW_FILTER_KEY = 'CONTENT_VIEW_FILTER_CREATE';
@@ -51,12 +58,17 @@ export const cvVersionPublishKey = (cvId, versionCount) => `${PUBLISH_CONTENT_VI
 export const cvVersionTaskPollingKey = cvId => `CONTENT_VIEW_VERSION_POLLING_${cvId}`;
 export const cvAddComponentKey = cvId => `${CONTENT_VIEWS_KEY}_ADD_COMPONENT_${cvId}`;
 export const cvRemoveComponentKey = cvId => `${CONTENT_VIEWS_KEY}_REMOVE_COMPONENT_${cvId}`;
-
 export const removeComponentSuccessMessage = size => (size === 1 ? __('Removed component from content view') : __('Removed components from content view'));
-
 export const addComponentSuccessMessage = component => (component ? __('Updated component details') : __('Added component to content view'));
-
-
+export const genericContentCompareKey = (pluralLabel, versionOne, versionTwo, viewBy) => `${toUpper(pluralLabel)}_COMPARE_${versionOne}_${versionTwo}_VIEW_BY_${toUpper(viewBy)}`;
+export const cvPackageGroupsCompareKey = (versionOne, versionTwo, viewBy) => `${PACKAGE_GROUPS_KEY}_COMPARE_${versionOne}_${versionTwo}_VIEW_BY_${toUpper(viewBy)}`;
+export const cvRPMPackagesCompareKey = (versionOne, versionTwo, viewBy) => `${PACKAGES_KEY}_COMPARE_${versionOne}_${versionTwo}_VIEW_BY_${toUpper(viewBy)}`;
+export const cvRepositoriesCompareKey = (versionOne, versionTwo, viewBy) => `REPOSITORIES_COMPARE_${versionOne}_${versionTwo}_VIEW_BY_${toUpper(viewBy)}`;
+export const cvErrataCompareKey = (versionOne, versionTwo, viewBy) => `${ERRATA_KEY}_COMPARE_${versionOne}_${versionTwo}_VIEW_BY_${toUpper(viewBy)}`;
+export const cvModuleStreamsCompareKey = (versionOne, versionTwo, viewBy) => `${MODULE_STREAMS_KEY}_COMPARE_${versionOne}_${versionTwo}_VIEW_BY_${toUpper(viewBy)}`;
+export const cvDebPackagesCompareKey = (versionOne, versionTwo, viewBy) => `${DEB_PACKAGES_KEY}_COMPARE_${versionOne}_${versionTwo}_VIEW_BY_${toUpper(viewBy)}`;
+export const cvDockerTagsCompareKey = (versionOne, versionTwo, viewBy) => `${DOCKER_TAGS_KEY}_COMPARE_${versionOne}_${versionTwo}_VIEW_BY_${toUpper(viewBy)}`;
+export const filesCompareKey = (versionOne, versionTwo, viewBy) => `${FILES_KEY}_COMPARE_${versionOne}_${versionTwo}_VIEW_BY_${toUpper(viewBy)}`;
 // Repo added to content view status display and key
 export const ADDED = __('Added');
 export const NOT_ADDED = __('Not added');

data/webpack/scenes/ContentViews/ContentViewsPage.js

@@ -9,7 +9,7 @@ const ContentViewsPage = () => (
     <Grid className="margin-24">
       <GridItem span={12}>
         <TextContent>
-          <Text component={TextVariants.h1}>{__('Content views')}</Text>
+          <Text ouiaId="cvPageHeaderText" component={TextVariants.h1}>{__('Content views')}</Text>
         </TextContent>
       </GridItem>
       <GridItem span={12} className="margin-top-8">

data/webpack/scenes/ContentViews/Copy/CopyContentViewForm.js

@@ -52,6 +52,7 @@ const CopyContentViewForm = ({ cvId, setModalOpen }) => {
           type="text"
           id="name"
           aria-label="input_name"
+          ouiaId="input_name"
           name="name"
           value={name}
           onChange={setName}

data/webpack/scenes/ContentViews/Copy/CopyContentViewModal.js

@@ -18,6 +18,7 @@ const CopyContentViewModal = ({
   return (
     <Modal
       title="Copy content view"
+      ouiaId="copy-content-view-modal"
       variant={ModalVariant.small}
       isOpen={show}
       description={description}

data/webpack/scenes/ContentViews/Create/ContentViewFormComponents.js

@@ -1,15 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { Tooltip, TooltipPosition, Flex, FlexItem } from '@patternfly/react-core';
 import { autoPublishHelpText, dependenciesHelpText, importOnlyHelpText, generatedContentViewHelpText } from '../helpers';
 import ContentViewIcon from '../components/ContentViewIcon';
 
-const HelpToolTip = tooltip => (
-  <span className="foreman-spaced-icon">
+export const HelpToolTip = props => (
+  <span className={props.className ?? 'foreman-spaced-icon'}>
     <Tooltip
       position={TooltipPosition.top}
-      content={tooltip}
+      content={props.tooltip}
     >
       <OutlinedQuestionCircleIcon />
     </Tooltip>
@@ -34,7 +35,7 @@ export const LabelDependencies = () => (
   <Flex>
     <FlexItem spacer={{ default: 'spacerSm' }}>{__('Solve dependencies')}</FlexItem>
     <FlexItem>
-      {HelpToolTip(dependenciesHelpText)}
+      <HelpToolTip tooltip={dependenciesHelpText} />
     </FlexItem>
   </Flex>
 );
@@ -43,7 +44,7 @@ export const LabelAutoPublish = () => (
   <Flex>
     <FlexItem spacer={{ default: 'spacerSm' }}>{__('Auto publish')}</FlexItem>
     <FlexItem>
-      {HelpToolTip(autoPublishHelpText)}
+      <HelpToolTip tooltip={autoPublishHelpText} />
     </FlexItem>
   </Flex>
 );
@@ -52,7 +53,7 @@ export const LabelImportOnly = () => (
   <Flex>
     <FlexItem spacer={{ default: 'spacerSm' }}>{__('Import only')}</FlexItem>
     <FlexItem>
-      {HelpToolTip(importOnlyHelpText)}
+      <HelpToolTip tooltip={importOnlyHelpText} />
     </FlexItem>
   </Flex>
 );
@@ -61,7 +62,16 @@ export const LabelGenerated = () => (
   <Flex>
     <FlexItem spacer={{ default: 'spacerSm' }}>{__('Generated')}</FlexItem>
     <FlexItem>
-      {HelpToolTip(generatedContentViewHelpText)}
+      <HelpToolTip tooltip={generatedContentViewHelpText} />
     </FlexItem>
   </Flex>
 );
+
+HelpToolTip.propTypes = {
+  tooltip: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+HelpToolTip.defaultProps = {
+  className: null,
+};

data/webpack/scenes/ContentViews/Create/CreateContentViewForm.js

@@ -4,7 +4,6 @@ import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import { Redirect } from 'react-router-dom';
 import { Form, FormGroup, TextInput, TextArea, Checkbox, ActionGroup, Button, Tile, Grid, GridItem } from '@patternfly/react-core';
 import { createContentView } from '../ContentViewsActions';
 import { selectCreateContentViews, selectCreateContentViewStatus, selectCreateContentViewError } from './ContentViewCreateSelectors';
@@ -25,6 +24,18 @@ const CreateContentViewForm = ({ setModalOpen }) => {
   const [redirect, setRedirect] = useState(false);
   const [saving, setSaving] = useState(false);
 
+  const [labelValidated, setLabelValidated] = useState('default');
+  const handleLabelChange = (newLabel, _event) => {
+    setLabel(newLabel);
+    if (newLabel === '') {
+      setLabelValidated('default');
+    } else if (/^[\w-]+$/.test(newLabel)) {
+      setLabelValidated('success');
+    } else {
+      setLabelValidated('error');
+    }
+  };
+
   const response = useSelector(selectCreateContentViews);
   const status = useSelector(selectCreateContentViewStatus);
   const error = useSelector(selectCreateContentViewError);
@@ -54,18 +65,17 @@ const CreateContentViewForm = ({ setModalOpen }) => {
 
   useEffect(
     () => {
-      setLabel(name.replace(/ /g, '_'));
+      setLabel(name.replace(/[^A-Za-z0-9_-]/g, '_'));
     },
     [name],
   );
 
   if (redirect) {
     const { id } = response;
-    if (composite) { return (<Redirect to={`/content_views/${id}#/contentviews`} />); }
-    return (<Redirect to={`/content_views/${id}#/repositories`} />);
+    if (composite) { window.location.assign(`/content_views/${id}#/contentviews`); } else { window.location.assign(`/content_views/${id}#/repositories`); }
   }
 
-  const submitDisabled = !name?.length || !label?.length || saving;
+  const submitDisabled = !name?.length || !label?.length || saving || redirect || labelValidated === 'error';
 
   return (
     <Form onSubmit={(e) => {
@@ -79,20 +89,29 @@ const CreateContentViewForm = ({ setModalOpen }) => {
           type="text"
           id="name"
           aria-label="input_name"
+          ouiaId="input_name"
           name="name"
           value={name}
           onChange={value => setName(value)}
         />
       </FormGroup>
-      <FormGroup label={__('Label')} isRequired fieldId="label">
+      <FormGroup
+        label={__('Label')}
+        isRequired
+        fieldId="label"
+        helperTextInvalid="Must be Ascii alphanumeric, '_' or '-'"
+        validated={labelValidated}
+      >
         <TextInput
           isRequired
           type="text"
           id="label"
           aria-label="input_label"
+          ouiaId="input_label"
           name="label"
           value={label}
-          onChange={value => setLabel(value)}
+          validated={labelValidated}
+          onChange={handleLabelChange}
         />
       </FormGroup>
       <FormGroup label={__('Description')} fieldId="description">
@@ -142,6 +161,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
         <FormGroup isInline fieldId="dependencies">
           <Checkbox
             id="dependencies"
+            ouiaId="dependencies"
             name="dependencies"
             label={LabelDependencies()}
             isChecked={dependencies}
@@ -152,6 +172,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
         <FormGroup isInline fieldId="importOnly">
           <Checkbox
             id="importOnly"
+            ouiaId="importOnly"
             name="importOnly"
             label={LabelImportOnly()}
             isChecked={importOnly}
@@ -162,6 +183,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
         <FormGroup isInline fieldId="autoPublish">
           <Checkbox
             id="autoPublish"
+            ouiaId="autoPublish"
             name="autoPublish"
             label={LabelAutoPublish()}
             isChecked={autoPublish}
@@ -174,6 +196,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
           aria-label="create_content_view"
           variant="primary"
           isDisabled={submitDisabled}
+          isLoading={saving || redirect}
           type="submit"
         >
           {__('Create content view')}

data/webpack/scenes/ContentViews/Create/CreateContentViewModal.js

@@ -6,6 +6,7 @@ import CreateContentViewForm from './CreateContentViewForm';
 
 const CreateContentViewModal = ({ show, setIsOpen }) => (
   <Modal
+    ouiaId="create-content-view-modal"
     title={__('Create content view')}
     variant={ModalVariant.small}
     isOpen={show}

data/webpack/scenes/ContentViews/Create/__tests__/createContentView.test.js

@@ -8,7 +8,14 @@ import cvCreateData from './contentViewCreateResult.fixtures.json';
 
 const cvCreatePath = api.getApiUrl('/content_views');
 
-const setModalOpen = jest.fn();
+const mockFn = jest.fn();
+
+delete window.location;
+window.location = { assign: mockFn };
+
+afterEach(() => {
+  mockFn.mockClear();
+});
 
 const createDetails = {
   name: '1232123',
@@ -22,7 +29,7 @@ const createDetails = {
 
 const createdCVDetails = { ...cvCreateData };
 
-const form = <CreateContentViewForm setModalOpen={setModalOpen} />;
+const form = <CreateContentViewForm setModalOpen={mockFn} />;
 
 test('Can save content view from form', async (done) => {
   const createscope = nockInstance
@@ -44,7 +51,7 @@ test('Form closes itself upon save', async (done) => {
   const createscope = nockInstance
     .post(cvCreatePath, createDetails)
     .reply(201, createdCVDetails);
-  const { getByText, queryByText, getByLabelText } = renderWithRedux(form);
+  const { getByText, getByLabelText } = renderWithRedux(form);
   expect(getByText('Description')).toBeInTheDocument();
   expect(getByText('Name')).toBeInTheDocument();
   expect(getByText('Label')).toBeInTheDocument();
@@ -52,11 +59,11 @@ test('Form closes itself upon save', async (done) => {
   fireEvent.change(getByLabelText('input_name'), { target: { value: '1232123' } });
 
   await patientlyWaitFor(() => { expect(getByLabelText('input_label')).toHaveAttribute('value', '1232123'); });
-
+  jest.spyOn(window.location, 'assign');
   getByLabelText('create_content_view').click();
-  // Form closes it self on success
+  // Form closes it self on success by calling location.assign()
   await patientlyWaitFor(() => {
-    expect(queryByText('Description')).not.toBeInTheDocument();
+    expect(window.location.assign).toHaveBeenCalled();
   });
 
   assertNockRequest(createscope, done);
@@ -89,3 +96,11 @@ test('Displays dependent fields correctly', () => {
   expect(queryByText('Auto publish')).not.toBeInTheDocument();
   expect(getByText('Import only')).toBeInTheDocument();
 });
+
+test('Validates label field', () => {
+  const { getByText, getByLabelText } = renderWithRedux(form);
+  expect(getByText('Label')).toBeInTheDocument();
+
+  fireEvent.change(getByLabelText('input_label'), { target: { value: '123 2123' } });
+  expect(getByText('Must be Ascii alphanumeric, \'_\' or \'-\'')).toBeInTheDocument();
+});

data/webpack/scenes/ContentViews/Delete/Steps/CVDeleteEnvironmentsSelection.js

@@ -64,9 +64,9 @@ const CVDeleteEnvironmentSelection = () => {
               isExpanded={versionExpanded[index]}
             >
               {(version?.environments.length !== 0) ?
-                <TableComposable variant={TableVariant.compact}>
+                <TableComposable ouiaId="cv-delete-env-select-table" variant={TableVariant.compact}>
                   <Thead>
-                    <Tr>
+                    <Tr ouiaId="cv-delete-env-select-table-header">
                       <Th />
                       {columnHeaders.map(col =>
                         <Th key={col}>{col}</Th>)}
@@ -78,7 +78,7 @@ const CVDeleteEnvironmentSelection = () => {
                         id, name, activation_key_count: akCount, host_count: hostCount,
                       } = env;
                       return (
-                        <Tr key={`${name}_${id}`}>
+                        <Tr ouiaId={`${name}_${id}`} key={`${name}_${id}`}>
                           <Td
                             key={`${name}__${id}_select`}
                             select={{

data/webpack/scenes/ContentViews/Delete/Steps/CVDeletionReassignActivationKeysForm.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { ExpandableSection, Select, SelectOption } from '@patternfly/react-core';
+import { ExpandableSection, SelectOption } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import getContentViews from '../../ContentViewsActions';
@@ -9,6 +9,7 @@ import { selectContentViewError, selectContentViews, selectContentViewStatus } f
 import CVDeleteContext from '../CVDeleteContext';
 import EnvironmentPaths from '../../components/EnvironmentPaths/EnvironmentPaths';
 import AffectedActivationKeys from '../../Details/Versions/Delete/affectedActivationKeys';
+import ContentViewSelect from '../../components/ContentViewSelect/ContentViewSelect';
 
 const CVDeletionReassignActivationKeysForm = () => {
   const dispatch = useDispatch();
@@ -66,6 +67,11 @@ const CVDeletionReassignActivationKeysForm = () => {
     return results?.filter(cv => cv.id === id)[0]?.name;
   };
 
+  const onClear = () => {
+    setSelectedCVForAK(null);
+    setSelectedCVNameForAK(null);
+  };
+
   const onSelect = (_event, selection) => {
     setSelectedCVForAK(selection);
     setSelectedCVNameForAK(fetchSelectedCVName(selection));
@@ -82,22 +88,17 @@ const CVDeletionReassignActivationKeysForm = () => {
         multiSelect={false}
       />
       {!cvInEnvLoading && selectedEnvForAK.length > 0 &&
-      <div style={{ marginTop: '1em' }}>
-        <h3>{__('Select content view')}</h3>
-        <Select
+        <ContentViewSelect
           selections={selectedCVForAK}
           onSelect={onSelect}
+          onClear={onClear}
           isOpen={cvSelectOpen}
           isDisabled={cvSelectOptions.length === 0}
           onToggle={isExpanded => setCVSelectOpen(isExpanded)}
-          id="selectCV"
-          name="selectCV"
-          aria-label="selectCV"
           placeholderText={(cvSelectOptions.length === 0) ? __('No content views available') : __('Select a content view')}
         >
           {cvSelectOptions}
-        </Select>
-      </div>
+        </ContentViewSelect>
       }
       <ExpandableSection
         toggleText={showActivationKeys ?

data/webpack/scenes/ContentViews/Delete/Steps/CVDeletionReassignHostsForm.js

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { ExpandableSection, Select, SelectOption } from '@patternfly/react-core';
+import { ExpandableSection, SelectOption } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import getContentViews from '../../ContentViewsActions';
@@ -9,6 +9,7 @@ import { selectContentViewError, selectContentViews, selectContentViewStatus } f
 import CVDeleteContext from '../CVDeleteContext';
 import EnvironmentPaths from '../../components/EnvironmentPaths/EnvironmentPaths';
 import AffectedHosts from '../../Details/Versions/Delete/affectedHosts';
+import ContentViewSelect from '../../components/ContentViewSelect/ContentViewSelect';
 
 
 const CVDeletionReassignHostsForm = () => {
@@ -67,6 +68,11 @@ const CVDeletionReassignHostsForm = () => {
     return results?.filter(cv => cv.id === id)[0]?.name;
   };
 
+  const onClear = () => {
+    setSelectedCVForHosts(null);
+    setSelectedCVNameForHosts(null);
+  };
+
   const onSelect = (_event, selection) => {
     setSelectedCVForHosts(selection);
     setSelectedCVNameForHosts(fetchSelectedCVName(selection));
@@ -83,22 +89,17 @@ const CVDeletionReassignHostsForm = () => {
         multiSelect={false}
       />
       {selectedEnvForHost.length > 0 &&
-      <div style={{ marginTop: '1em' }}>
-        <h3>{__('Select content view')}</h3>
-        <Select
+        <ContentViewSelect
           selections={selectedCVForHosts}
           onSelect={onSelect}
+          onClear={onClear}
           isOpen={cvSelectOpen}
           isDisabled={cvSelectOptions.length === 0}
           onToggle={isExpanded => setCVSelectOpen(isExpanded)}
-          id="selectCV"
-          name="selectCV"
-          aria-label="selectCV"
           placeholderText={(cvSelectOptions.length === 0) ? __('No content views available') : __('Select a content view')}
         >
           {cvSelectOptions}
-        </Select>
-      </div>
+        </ContentViewSelect>
       }
       <ExpandableSection
         toggleText={showHosts ? 'Hide hosts' : 'Show hosts'}

data/webpack/scenes/ContentViews/Delete/__tests__/CvData.fixtures.json

@@ -9,6 +9,8 @@
     "by": "name",
     "order": "asc"
   },
+  "can_create": true,
+  "can_view": true,
   "results": [
     {
       "composite": false,

data/webpack/scenes/ContentViews/Delete/__tests__/contentViewDelete.test.js

@@ -2,8 +2,8 @@
 import React from 'react';
 import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 import api, { foremanApi } from '../../../../services/api';
-import nock, {
-  nockInstance, assertNockRequest, mockAutocomplete, mockSetting, mockForemanAutocomplete,
+import {
+  nockInstance, assertNockRequest, mockAutocomplete, mockForemanAutocomplete,
 } from '../../../../test-utils/nockWrapper';
 import CONTENT_VIEWS_KEY from '../../ContentViewsConstants';
 import ContentViewsPage from '../../ContentViewsPage.js';
@@ -37,25 +37,10 @@ const baseQuery = {
   sort_order: 'asc',
 };
 
-let scopeBookmark;
 let firstCV;
-let searchDelayScope;
-let autoSearchScope;
 beforeEach(() => {
   const { results } = cvIndexData;
   [firstCV] = results;
-  scopeBookmark = nockInstance
-    .get('/api/v2/bookmarks')
-    .query(true)
-    .reply(200, {});
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
-});
-
-afterEach(() => {
-  nock.cleanAll();
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
 });
 
 test('Can call API for CVs and show Delete Wizard for the row', async (done) => {
@@ -94,7 +79,6 @@ test('Can call API for CVs and show Delete Wizard for the row', async (done) =>
   await patientlyWaitFor(() => expect(getAllByText('Remove versions from environments')[1]).toBeInTheDocument());
 
   assertNockRequest(scope);
-  assertNockRequest(scopeBookmark);
   assertNockRequest(autocompleteScope);
   assertNockRequest(envPathDeleteScope);
   assertNockRequest(cvDetailsScope);
@@ -104,12 +88,8 @@ test('Can call API for CVs and show Delete Wizard for the row', async (done) =>
 test('Can open Delete wizard and delete CV with all steps', async (done) => {
   const hostAutocompleteUrl = '/hosts/auto_complete_search';
   const hostAutocompleteScope = mockForemanAutocomplete(nockInstance, hostAutocompleteUrl);
-  const hostSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  const hostAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
   const akAutocompleteUrl = '/activation_keys/auto_complete_search';
   const akAutocompleteScope = mockAutocomplete(nockInstance, akAutocompleteUrl);
-  const akSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  const akAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
 
@@ -166,7 +146,7 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
     .reply(200, cVDropDownOptionsData);
 
   const {
-    getByText, getByLabelText, getAllByLabelText, getAllByText, queryByText,
+    getByText, getByLabelText, getAllByLabelText, getAllByText, queryByText, getByPlaceholderText,
   } =
     renderWithRedux(<ContentViewsPage />, renderOptions);
   expect(queryByText(firstCV.name)).toBeNull();
@@ -192,9 +172,9 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
   fireEvent.click(getByLabelText('test1'));
   await patientlyWaitFor(() => {
     expect(getByText('Select content view')).toBeInTheDocument();
-    expect(getByText('Select a content view')).toBeInTheDocument();
+    expect(getByPlaceholderText('Select a content view')).toBeInTheDocument();
   });
-  fireEvent.click(getByText('Select a content view'));
+  fireEvent.click(getByPlaceholderText('Select a content view'));
   await patientlyWaitFor(() => {
     expect(getByText('cv2')).toBeInTheDocument();
   });
@@ -211,9 +191,9 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
   fireEvent.click(getByLabelText('test1'));
   await patientlyWaitFor(() => {
     expect(getByText('Select content view')).toBeInTheDocument();
-    expect(getByText('Select a content view')).toBeInTheDocument();
+    expect(getByPlaceholderText('Select a content view')).toBeInTheDocument();
   });
-  fireEvent.click(getByText('Select a content view'));
+  fireEvent.click(getByPlaceholderText('Select a content view'));
   await patientlyWaitFor(() => {
     expect(getByText('cv2')).toBeInTheDocument();
   });
@@ -232,19 +212,14 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
   fireEvent.click(getAllByText('Delete')[0]);
 
   assertNockRequest(scope);
-  assertNockRequest(scopeBookmark);
   assertNockRequest(autocompleteScope);
   assertNockRequest(envPathDeleteScope);
   assertNockRequest(cvDetailsScope);
   assertNockRequest(cvVersionsScope);
   assertNockRequest(hostAutocompleteScope);
-  assertNockRequest(hostSearchDelayScope);
-  assertNockRequest(hostAutoSearchScope);
   assertNockRequest(hostScope);
   assertNockRequest(cVDropDownOptionsScope);
   assertNockRequest(akAutocompleteScope);
-  assertNockRequest(akSearchDelayScope);
-  assertNockRequest(akAutoSearchScope);
   assertNockRequest(activationKeysScope);
   assertNockRequest(cVDropDownOptionsScope);
   assertNockRequest(cvDeleteScope);