katello 4.4.2.2 → 4.5.0.rc1

data/webpack/scenes/AlternateContentSources/MainTable/__tests__/acsTable.test.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+
+import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../../test-utils/nockWrapper';
+import api from '../../../../services/api';
+import ACSTable from '../ACSTable';
+import acsData from './acsIndex.fixtures.json';
+
+const acsURL = api.getApiUrl('/alternate_content_sources');
+const autocompleteUrl = '/alternate_content_sources/auto_complete_search';
+
+let firstAcs;
+let searchDelayScope;
+let autoSearchScope;
+
+beforeEach(() => {
+  const { results } = acsData;
+  [firstAcs] = results;
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+});
+
+afterEach(() => {
+  nock.cleanAll();
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+});
+
+test('Can call API and show ACS on page load', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(acsURL)
+    .query(true)
+    .reply(200, acsData);
+
+  const { getByText, queryByText } = renderWithRedux(<ACSTable />);
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(firstAcs.name)).toBeNull();
+  // Assert that the ACS name is now showing on the screen, but wait for it to appear.
+  await patientlyWaitFor(() => expect(getByText(firstAcs.name)).toBeInTheDocument());
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+});
+
+test('Can handle no ACS being present', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+  const noResults = {
+    total: 0,
+    subtotal: 0,
+    page: 1,
+    per_page: 20,
+    results: [],
+  };
+  const scope = nockInstance
+    .get(acsURL)
+    .query(true)
+    .reply(200, noResults);
+
+  const { queryByText } = renderWithRedux(<ACSTable />);
+
+  expect(queryByText(firstAcs.name)).toBeNull();
+  await patientlyWaitFor(() => expect(queryByText("You currently don't have any alternate content sources.")).toBeInTheDocument());
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+});

data/webpack/scenes/AlternateContentSources/index.js

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

data/webpack/scenes/Content/Details/ContentRepositories.js

@@ -42,6 +42,7 @@ const ContentRepositories = ({ contentType, id, tabKey }) => {
         emptySearchBody,
         emptyContentBody,
       }}
+      ouiaId="content-repositories-table"
       variant={TableVariant.compact}
       autocompleteEndpoint="/repositories/auto_complete_search"
       fetchItems={useCallback(

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

@@ -30,6 +30,7 @@ const ContentTable = ({
         error,
         status,
       }}
+      ouiaId="content-table"
       key={selectedContentType}
       variant={TableVariant.compact}
       autocompleteEndpoint={`/${contentTypes[selectedContentType][1]}/auto_complete_search`}

data/webpack/scenes/ContentViews/ContentViewsActions.js

@@ -54,12 +54,16 @@ export const copyContentView = params => post({
   errorToast: error => cvErrorToast(error),
 });
 
-export const publishContentView = params => post({
+export const publishContentView = (params, handleSuccess, handleError) => post({
   type: API_OPERATIONS.POST,
   key: cvVersionPublishKey(params.id, params.versionCount),
   url: api.getApiUrl(`/content_views/${params.id}/publish`),
   params,
-  handleSuccess: response => renderTaskStartedToast(response.data),
+  handleSuccess: (response) => {
+    if (handleSuccess) handleSuccess(response);
+    return renderTaskStartedToast(response.data);
+  },
+  handleError,
   errorToast: error => cvErrorToast(error),
 });
 

data/webpack/scenes/ContentViews/ContentViewsConstants.js

@@ -43,10 +43,12 @@ export const cvDetailsHistoryKey = cvId => `${CONTENT_VIEWS_KEY}_HISTORIES_${cvI
 export const cvFilterRulesKey = filterId => `CONTENT_VIEW_FILTER_${filterId}_RULES`;
 export const cvDetailsComponentKey = cvId => `${CONTENT_VIEWS_KEY}_COMPONENTS_${cvId}`;
 export const cvDetailsVersionKey = cvId => `${CONTENT_VIEWS_KEY}_VERSIONS_${cvId}`;
+export const bulkRemoveVersionKey = cvId => `BULK_REMOVE_CV_VERSION_${cvId}`;
 export const cvRemoveVersionKey = (versionId, versionEnvironments) => `REMOVE_CV_VERSION_${versionId}_${versionEnvironments.length}`;
 export const cvVersionPromoteKey = (versionId, environmentIds) => `PROMOTE_CONTENT_VIEW_VERSION_${versionId}_${environmentIds.length}`;
 export const cvVersionDetailsKey = (cvId, versionId) => `CONTENT_VIEW_VERSION_DETAILS_${cvId}_${versionId}`;
 export const cvVersionPublishKey = (cvId, versionCount) => `${PUBLISH_CONTENT_VIEW_KEY}_${cvId}_VERSION_${versionCount}`;
+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}`;
 
@@ -56,9 +58,15 @@ export const addComponentSuccessMessage = component => (component ? __('Updated
 
 
 // Repo added to content view status display and key
-export const ADDED = 'Added';
-export const NOT_ADDED = 'Not added';
-export const ALL_STATUSES = 'All';
+export const ADDED = __('Added');
+export const NOT_ADDED = __('Not added');
+export const ALL_STATUSES = __('All');
+
+export const STATUS_TRANSLATIONS_ENUM = {
+  [ADDED]: 'Added',
+  [NOT_ADDED]: 'Not added',
+  [ALL_STATUSES]: 'All',
+};
 
 export const REPOSITORY_TYPES = 'REPOSITORY_TYPES';
 export const FILTER_TYPES = ['rpm', 'package_group', 'erratum_date', 'erratum_id', 'docker', 'modulemd'];

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

@@ -59,6 +59,7 @@ const CopyContentViewForm = ({ cvId, setModalOpen }) => {
       </FormGroup>
       <ActionGroup>
         <Button
+          ouiaId="copy-form-submit-button"
           aria-label="copy_content_view"
           variant="primary"
           isDisabled={!name?.length || saving}
@@ -66,7 +67,7 @@ const CopyContentViewForm = ({ cvId, setModalOpen }) => {
         >
           {__('Copy content view')}
         </Button>
-        <Button variant="link" onClick={() => setModalOpen(false)}>{__('Cancel')}</Button>
+        <Button ouiaId="copy-form-cancel" variant="link" onClick={() => setModalOpen(false)}>{__('Cancel')}</Button>
       </ActionGroup>
     </Form >
   );

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

@@ -2,7 +2,7 @@ import React from 'react';
 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 } from '../helpers';
+import { autoPublishHelpText, dependenciesHelpText, importOnlyHelpText, generatedContentViewHelpText } from '../helpers';
 import ContentViewIcon from '../components/ContentViewIcon';
 
 const HelpToolTip = tooltip => (
@@ -56,3 +56,12 @@ export const LabelImportOnly = () => (
     </FlexItem>
   </Flex>
 );
+
+export const LabelGenerated = () => (
+  <Flex>
+    <FlexItem spacer={{ default: 'spacerSm' }}>{__('Generated')}</FlexItem>
+    <FlexItem>
+      {HelpToolTip(generatedContentViewHelpText)}
+    </FlexItem>
+  </Flex>
+);

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

@@ -115,7 +115,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
               aria-label="component_tile"
               icon={<ContentViewIcon composite={false} />}
               id="component"
-              title={__('Content view')}
+              title={__('Component content view')}
               onClick={() => { setComponent(true); setComposite(false); }}
               isSelected={component}
             >
@@ -133,7 +133,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
               onClick={() => { setComposite(true); setComponent(false); }}
               isSelected={composite}
             >
-              {__('Consisting of multiple content views')}
+              {__('Consisting of multiple component content views')}
             </Tile>
           </GridItem>
         </Grid>
@@ -170,6 +170,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
         </FormGroup>}
       <ActionGroup>
         <Button
+          ouiaId="create-content-view-form-submit"
           aria-label="create_content_view"
           variant="primary"
           isDisabled={submitDisabled}
@@ -177,7 +178,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
         >
           {__('Create content view')}
         </Button>
-        <Button variant="link" onClick={() => setModalOpen(false)}>
+        <Button ouiaId="create-content-view-form-cancel" variant="link" onClick={() => setModalOpen(false)}>
           {__('Cancel')}
         </Button>
       </ActionGroup>

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

@@ -68,7 +68,7 @@ test('Displays dependent fields correctly', () => {
   expect(getByText('Name')).toBeInTheDocument();
   expect(getByText('Label')).toBeInTheDocument();
   expect(getByText('Composite content view')).toBeInTheDocument();
-  expect(getByText('Content view')).toBeInTheDocument();
+  expect(getByText('Component content view')).toBeInTheDocument();
   expect(getByText('Solve dependencies')).toBeInTheDocument();
   expect(queryByText('Auto publish')).not.toBeInTheDocument();
   expect(getByText('Import only')).toBeInTheDocument();

data/webpack/scenes/ContentViews/Delete/ContentViewDeleteWizard.js

@@ -13,6 +13,7 @@ import {
   selectCVVersionsStatus,
 } from '../Details/ContentViewDetailSelectors';
 import getEnvironmentPaths from '../components/EnvironmentPaths/EnvironmentPathActions';
+import getContentViewDetails, { getContentViewVersions } from '../Details/ContentViewDetailActions';
 import CVDeletionReassignHostsForm from './Steps/CVDeletionReassignHostsForm';
 import CVDeletionReassignActivationKeysForm from './Steps/CVDeletionReassignActivationKeysForm';
 import CVDeletionReview from './Steps/CVDeletionReview';
@@ -23,7 +24,6 @@ import Loading from '../../../components/Loading';
 const ContentViewDeleteWizard =
   ({
     cvId, cvEnvironments, show, setIsOpen,
-    currentStep, setCurrentStep,
   }) => {
     const cvVersionResponse = useSelector(state => selectCVVersions(state, cvId));
     const cvVersionStatus = useSelector(state => selectCVVersionsStatus(state, cvId));
@@ -39,14 +39,19 @@ const ContentViewDeleteWizard =
     const [affectedActivationKeys, setAffectedActivationKeys] = useState(false);
     const [affectedHosts, setAffectedHosts] = useState(false);
     const [canReview, setCanReview] = useState(false);
+    const [currentStep, setCurrentStep] = useState(1);
 
     const { name } = cvDetailsResponse ?? {};
 
     useEffect(
       () => {
+        if (cvDetailsStatus !== STATUS.RESOLVED) { dispatch(getContentViewDetails(cvId)); }
+        if (cvVersionStatus !== STATUS.RESOLVED) { dispatch(getContentViewVersions(cvId)); }
         dispatch(getEnvironmentPaths());
       },
-      [dispatch],
+      // We don't want to call this everytime the status changes
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [cvId, dispatch],
     );
 
     useEffect(() => {
@@ -144,7 +149,6 @@ const ContentViewDeleteWizard =
           startAtStep={currentStep}
           onClose={() => {
             setIsOpen(false);
-            setCurrentStep(0);
           }}
           isOpen={show}
         />
@@ -157,8 +161,6 @@ ContentViewDeleteWizard.propTypes = {
   cvEnvironments: PropTypes.arrayOf(PropTypes.shape({})),
   show: PropTypes.bool,
   setIsOpen: PropTypes.func,
-  currentStep: PropTypes.number.isRequired,
-  setCurrentStep: PropTypes.func.isRequired,
 };
 
 ContentViewDeleteWizard.defaultProps = {

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

@@ -10,9 +10,11 @@ import getContentViews from '../../ContentViewsActions';
 import CVDeleteContext from '../CVDeleteContext';
 import Loading from '../../../../components/Loading';
 
+
 const CVDeletionFinish = () => {
   const {
-    cvId, cvEnvironments,
+    cvId,
+    cvEnvironments,
     setIsOpen,
     selectedCVForAK, selectedEnvForAK, selectedCVForHosts,
     selectedEnvForHost, affectedActivationKeys, affectedHosts,
@@ -21,53 +23,59 @@ const CVDeletionFinish = () => {
     selectRemoveCVVersionResponse(state, cvId, cvEnvironments));
   const removeCVStatus = useSelector(state =>
     selectRemoveCVVersionStatus(state, cvId, cvEnvironments));
-  const removeResolved = removeCVStatus === STATUS.RESOLVED;
   const dispatch = useDispatch();
   const [removeDispatched, setRemoveDispatched] = useState(false);
-  const { push } = useHistory();
+  const { push, location: { pathname } } = useHistory();
 
   useDeepCompareEffect(() => {
-    if (removeResolved && removeDispatched) {
-      dispatch(getContentViews());
-      push('/content_views');
-      setIsOpen(false);
-    }
-    if (removeCVStatus === STATUS.ERROR) {
+    // If there is an error, we still want to refresh or redirect to show it.
+    if (removeDispatched && removeCVStatus === STATUS.ERROR) {
+      if (pathname === '/content_views') dispatch(getContentViews());
+      else push('/content_views');
       setIsOpen(false);
     }
-  }, [removeCVResponse, removeCVStatus, removeResolved,
-    setIsOpen, dispatch, cvId, removeDispatched, push]);
+  }, [dispatch, pathname, push, removeCVStatus, removeDispatched, setIsOpen]);
 
   useDeepCompareEffect(() => {
     if (!removeDispatched) {
       let params = {
         id: cvId,
+        destroy_content_view: true,
       };
 
       if (affectedActivationKeys) {
-        const activationKeysParams = {
+        params = {
+          ...params,
           key_content_view_id: selectedCVForAK,
           key_environment_id: selectedEnvForAK[0].id,
         };
-        params = { ...activationKeysParams, ...params };
       }
 
       if (affectedHosts) {
-        const hostParams = {
+        params = {
+          ...params,
           system_content_view_id: selectedCVForHosts,
           system_environment_id: selectedEnvForHost[0].id,
         };
-        params = { ...hostParams, ...params };
       }
 
-      const deletionParams = { destroy_content_view: true };
-      params = { ...deletionParams, ...params };
-      dispatch(removeContentViewVersion(cvId, cvId, cvEnvironments, params));
+      dispatch(removeContentViewVersion(
+        cvId, cvId, cvEnvironments, params,
+        // Only when we are on the contentViews page do we need to call getContentViews.
+        () => {
+          if (pathname === '/content_views') dispatch(getContentViews());
+          else push('/content_views');
+          setIsOpen(false);
+        },
+        () => {
+          setIsOpen(false);
+        },
+      ));
       setRemoveDispatched(true);
     }
-  }, [cvId, cvEnvironments, dispatch, affectedActivationKeys,
-    affectedHosts, selectedCVForAK, selectedCVForHosts,
-    selectedEnvForAK, selectedEnvForHost, removeCVResponse, removeCVStatus, removeDispatched]);
+  }, [cvId, cvEnvironments, dispatch, affectedActivationKeys, affectedHosts,
+    selectedCVForAK, selectedCVForHosts, selectedEnvForAK, selectedEnvForHost,
+    removeCVResponse, removeCVStatus, removeDispatched, pathname, push, setIsOpen]);
 
   return <Loading loadingText={__('Please wait while the task starts..')} />;
 };

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-useless-escape */
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 import api, { foremanApi } from '../../../../services/api';
 import nock, {
   nockInstance, assertNockRequest, mockAutocomplete, mockSetting, mockForemanAutocomplete,
@@ -16,23 +16,27 @@ import affectedHostData from './affectedHosts.fixtures.json';
 import cVDropDownOptionsData from '../../Details/Versions/Delete/__tests__/cvDropDownOptionsResponse.fixture.json';
 import cvDeleteResponse from '../../Details/Versions/Delete/__tests__/cvVersionRemoveResponse.fixture.json';
 
-const cvIndexPath = api.getApiUrl('/content_views?organization_id=1&nondefault=true&include_permissions=true&per_page=20&page=1');
+const cvIndexPath = api.getApiUrl('/content_views');
 const autocompleteUrl = '/content_views/auto_complete_search';
 const renderOptions = { apiNamespace: CONTENT_VIEWS_KEY };
 const environmentPathsPath = api.getApiUrl('/organizations/1/environments/paths');
-
 const cvVersionsPath = api.getApiUrl('/content_view_versions');
-
 const cvDetailsPath = api.getApiUrl('/content_views/20');
-
 const activationKeyURL = api.getApiUrl('/activation_keys');
-
 const hostURL = foremanApi.getApiUrl('/hosts');
-
 const cVDropDownOptionsPath = api.getApiUrl('/content_views?organization_id=1&environment_id=9&include_default=true&include_permissions=true&full_result=true');
-
 const cvDeleteUrl = api.getApiUrl('/content_views/20/remove');
 
+const baseQuery = {
+  organization_id: 1,
+  nondefault: true,
+  include_permissions: true,
+  per_page: 20,
+  page: 1,
+  sort_by: 'name',
+  sort_order: 'asc',
+};
+
 let scopeBookmark;
 let firstCV;
 let searchDelayScope;
@@ -58,6 +62,7 @@ test('Can call API for CVs and show Delete Wizard for the row', async (done) =>
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const scope = nockInstance
     .get(cvIndexPath)
+    .query(baseQuery)
     .reply(200, cvIndexData);
 
   const envPathDeleteScope = nockInstance
@@ -110,6 +115,7 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
 
   const scope = nockInstance
     .get(cvIndexPath)
+    .query(true)
     .reply(200, cvIndexData);
 
   const envPathDeleteScope = nockInstance
@@ -243,4 +249,5 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
   assertNockRequest(cVDropDownOptionsScope);
   assertNockRequest(cvDeleteScope);
   assertNockRequest(cvRedirectScope, done);
+  act(done);
 });

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ComponentContentViewAddModal.js

@@ -87,7 +87,7 @@ const ComponentContentViewAddModal = ({
 
   return (
     <Modal
-      title={componentId ? __('Update version') : __('Add content view')}
+      title={componentId ? __('Update version') : __('Add component')}
       variant={ModalVariant.small}
       isOpen={show}
       description={__(`Select available version of ${cvName} to use`)}
@@ -137,8 +137,8 @@ const ComponentContentViewAddModal = ({
           </Flex>
         </FormGroup>
         <ActionGroup>
-          <Button aria-label="add_component" variant="primary" type="submit">{__('Submit')}</Button>
-          <Button variant="link" onClick={() => setIsOpen(false)}>{__('Cancel')}</Button>
+          <Button ouiaId="add-component-submit" aria-label="add_component" variant="primary" type="submit">{__('Submit')}</Button>
+          <Button ouiaId="add-component-cancel" variant="link" onClick={() => setIsOpen(false)}>{__('Cancel')}</Button>
         </ActionGroup>
       </Form>
     </Modal >);

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ComponentContentViewBulkAddModal.js

@@ -51,10 +51,10 @@ const ComponentContentViewBulkAddModal = ({ cvId, rowsToAdd, onClose }) => {
 
   return (
     <Modal
-      title={__('Add content views')}
+      title={__('Add component content views')}
       variant={ModalVariant.large}
       isOpen
-      description={__('Select available version of content views to use')}
+      description={__('Select available version of components to use')}
       onClose={onClose}
       appendTo={document.body}
     >
@@ -112,8 +112,8 @@ const ComponentContentViewBulkAddModal = ({ cvId, rowsToAdd, onClose }) => {
           </Card>
         ))}
         <ActionGroup>
-          <Button aria-label="add_components" variant="primary" type="submit">{__('Add')}</Button>
-          <Button variant="link" onClick={onClose}>{__('Cancel')}</Button>
+          <Button ouiaId="add-components-modal-add" aria-label="add_components" variant="primary" type="submit">{__('Add')}</Button>
+          <Button ouiaId="add-components-modal-cancel" variant="link" onClick={onClose}>{__('Cancel')}</Button>
         </ActionGroup>
       </Form>
     </Modal >);

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ContentViewComponents.js

@@ -148,6 +148,7 @@ const ContentViewComponents = ({ cvId, details }) => {
               {hasPermission(permissions, 'edit_content_views') && componentCvId && cvVersion &&
                 <SplitItem>
                   <Button
+                    ouiaId={`edit-component-version-${componentCvId}`}
                     className="foreman-edit-icon"
                     aria-label="edit_version"
                     variant="plain"
@@ -244,6 +245,7 @@ const ContentViewComponents = ({ cvId, details }) => {
         activeFilters,
         defaultFilters,
       }}
+      ouiaId="content-view-components-table"
       actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
       onSelect={onSelect(rows, setRows)}
       cells={columnHeaders}
@@ -268,7 +270,7 @@ const ContentViewComponents = ({ cvId, details }) => {
               <SplitItem>
                 <ActionList>
                   <ActionListItem>
-                    <Button onClick={addBulk} isDisabled={!(bulkAddEnabled())} variant="primary" aria-label="bulk_add_components">
+                    <Button ouiaId="add-content-views" onClick={addBulk} isDisabled={!(bulkAddEnabled())} variant="primary" aria-label="bulk_add_components">
                       {__('Add content views')}
                     </Button>
                   </ActionListItem>

data/webpack/scenes/ContentViews/Details/ComponentContentViews/__tests__/contentViewComponents.test.js

@@ -212,7 +212,7 @@ test('Can add published component views to content view with modal', async (done
   });
   fireEvent.click(getByText('Add'));
   await patientlyWaitFor(() => {
-    expect(getByText('Add content view')).toBeInTheDocument();
+    expect(getByText('Add component')).toBeInTheDocument();
   });
   fireEvent.click(getByLabelText('add_component'));
   await patientlyWaitFor(() => {
@@ -317,7 +317,7 @@ test('Can bulk add component views to content view with modal', async (done) =>
     .reply(200, {});
 
   const {
-    getAllByText, getByLabelText, queryByText,
+    getByText, getByLabelText, queryByText,
   } = renderWithRedux(
     <ContentViewComponents cvId={4} details={cvDetails} />,
     renderOptions,
@@ -333,14 +333,14 @@ test('Can bulk add component views to content view with modal', async (done) =>
   });
   fireEvent.click(getByLabelText('bulk_add_components'));
   await patientlyWaitFor(() => {
-    expect(getAllByText('Add content views')[1]).toBeInTheDocument();
+    expect(getByText('Add component content views')).toBeInTheDocument();
   });
   fireEvent.click(getByLabelText('version-select-cv-10'));
   fireEvent.click(getByLabelText('cv-10-3.0'));
 
   fireEvent.click(getByLabelText('add_components'));
   await patientlyWaitFor(() => {
-    expect(queryByText('Select available version of content views to use')).not.toBeInTheDocument();
+    expect(queryByText('Add component content views')).not.toBeInTheDocument();
     expect(getByLabelText('bulk_add_components')).toHaveAttribute('aria-disabled', 'false');
   });
 

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

@@ -47,6 +47,8 @@ import {
   DEB_PACKAGES_CONTENT,
   DOCKER_TAGS_CONTENT,
   generatedContentKey,
+  STATUS_TRANSLATIONS_ENUM,
+  bulkRemoveVersionKey,
 } from '../ContentViewsConstants';
 import api, { foremanApi, orgId } from '../../../services/api';
 import { getResponseErrorMsgs } from '../../../utils/helpers';
@@ -372,7 +374,7 @@ export const getCVFilterRules = (filterId, params) => get({
 });
 
 export const getContentViewComponents = (cvId, params, statusSelected) => {
-  const apiParams = { ...params, status: statusSelected };
+  const apiParams = { ...params, status: STATUS_TRANSLATIONS_ENUM[statusSelected] };
   const apiUrl = `/content_views/${cvId}/content_view_components/show_all`;
   return get({
     key: cvDetailsComponentKey(cvId),
@@ -413,21 +415,45 @@ export const editContentViewVersionDetails = (versionId, cvId, params, handleSuc
     errorToast: error => __(`Something went wrong while editing version details. ${getResponseErrorMsgs(error.response)}`),
   });
 
-export const removeContentViewVersion = (cvId, versionId, versionEnvironments, params) => put({
+export const bulkDeleteContentViewVersion = (cvId, params, handleSuccess, handleError) => put({
   type: API_OPERATIONS.PUT,
-  key: cvRemoveVersionKey(versionId, versionEnvironments),
-  url: api.getApiUrl(`/content_views/${cvId}/remove`),
+  key: bulkRemoveVersionKey(cvId),
+  url: api.getApiUrl(`/content_views/${cvId}/bulk_delete_versions`),
   params,
-  handleSuccess: response => renderTaskStartedToast(response.data),
-  errorToast: error => cvErrorToast(error),
+  handleSuccess: (response) => {
+    renderTaskStartedToast(response?.data);
+    handleSuccess(response);
+  },
+  handleError,
+  errorToast: error => __(`Something went wrong while deleting versions ${getResponseErrorMsgs(error.response)}`),
 });
 
-export const promoteContentViewVersion = params => post({
+export const removeContentViewVersion =
+  (cvId, versionId, versionEnvironments, params, handleSuccess, handleError) =>
+    put({
+      type: API_OPERATIONS.PUT,
+      key: cvRemoveVersionKey(versionId, versionEnvironments),
+      url: api.getApiUrl(`/content_views/${cvId}/remove`),
+      params,
+      handleSuccess: (response) => {
+        renderTaskStartedToast(response.data);
+        if (handleSuccess) return handleSuccess(response);
+        return undefined; // consistent-return
+      },
+      handleError,
+      errorToast: error => cvErrorToast(error),
+    });
+
+
+export const promoteContentViewVersion = (params, handleSuccess) => post({
   type: API_OPERATIONS.POST,
   key: cvVersionPromoteKey(params.id, params.versionEnvironments),
   url: api.getApiUrl(`/content_view_versions/${params.id}/promote`),
   params,
-  handleSuccess: response => renderTaskStartedToast(response.data),
+  handleSuccess: (response) => {
+    if (handleSuccess) return handleSuccess();
+    return renderTaskStartedToast(response.data);
+  },
   errorToast: error => cvErrorToast(error),
 });