katello 4.2.2 → 4.3.0.rc1

data/webpack/scenes/ContentViews/ContentViewSelectors.js

@@ -6,11 +6,10 @@ import {
 import { STATUS } from 'foremanReact/constants';
 import CONTENT_VIEWS_KEY from './ContentViewsConstants';
 
-export const selectContentViews = state =>
-  selectAPIResponse(state, CONTENT_VIEWS_KEY) || {};
+export const selectContentViews = (state, index = '') => selectAPIResponse(state, CONTENT_VIEWS_KEY + index) || {};
 
-export const selectContentViewStatus = state =>
-  selectAPIStatus(state, CONTENT_VIEWS_KEY) || STATUS.PENDING;
+export const selectContentViewStatus = (state, index = '') =>
+  selectAPIStatus(state, CONTENT_VIEWS_KEY + index) || STATUS.PENDING;
 
-export const selectContentViewError = state =>
-  selectAPIError(state, CONTENT_VIEWS_KEY);
+export const selectContentViewError = (state, index = '') =>
+  selectAPIError(state, CONTENT_VIEWS_KEY + index);

data/webpack/scenes/ContentViews/ContentViewsActions.js

@@ -8,15 +8,20 @@ import CONTENT_VIEWS_KEY, {
 import { getResponseErrorMsgs } from '../../utils/helpers';
 import { renderTaskStartedToast } from '../Tasks/helpers';
 
-export const createContentViewsParams = extraParams => ({
-  organization_id: orgId(),
-  nondefault: true,
-  ...extraParams,
-});
+export const createContentViewsParams = (extraParams) => {
+  const getParams = {
+    organization_id: orgId(),
+    nondefault: true,
+    include_permissions: true,
+    ...extraParams,
+  };
+  if (extraParams?.include_default) delete getParams.nondefault;
+  return getParams;
+};
 
-const getContentViews = extraParams => get({
+const getContentViews = (extraParams, id = '') => get({
   type: API_OPERATIONS.GET,
-  key: CONTENT_VIEWS_KEY,
+  key: CONTENT_VIEWS_KEY + id,
   url: api.getApiUrl('/content_views'),
   params: createContentViewsParams(extraParams),
 });
@@ -26,7 +31,7 @@ const cvSuccessToast = (response) => {
   return __(`Content view ${name} created`);
 };
 
-const cvErrorToast = (error) => {
+export const cvErrorToast = (error) => {
   const message = getResponseErrorMsgs(error.response);
   return message;
 };

data/webpack/scenes/ContentViews/ContentViewsConstants.js

@@ -6,20 +6,45 @@ export const COPY_CONTENT_VIEW_KEY = 'CONTENT_VIEW_COPY';
 export const CREATE_CONTENT_VIEW_FILTER_KEY = 'CONTENT_VIEW_FILTER_CREATE';
 export const DELETE_CONTENT_VIEW_FILTER_KEY = 'CONTENT_VIEW_FILTER_DELETE';
 export const DELETE_CONTENT_VIEW_FILTERS_KEY = 'CONTENT_VIEW_FILTERS_DELETE';
+export const DELETE_CONTENT_VIEW_FILTER_RULES_KEY = 'CONTENT_VIEW_FILTER_RULES_DELETE';
+export const ADD_CONTENT_VIEW_FILTER_RULES_KEY = 'CONTENT_VIEW_FILTER_RULES_ADD';
 export const PUBLISH_CONTENT_VIEW_KEY = 'CONTENT_VIEW_PUBLISH';
 export const UPDATE_CONTENT_VIEW = 'UPDATE_CONTENT_VIEW';
 export const UPDATE_CONTENT_VIEW_SUCCESS = 'UPDATE_CONTENT_VIEW_SUCCESS';
 export const UPDATE_CONTENT_VIEW_FAILURE = 'UPDATE_CONTENT_VIEW_FAILURE';
+export const ADD_CONTENT_VIEW_FILTER_RULE = 'ADD_CONTENT_VIEW_FILTER_RULE';
+export const EDIT_CONTENT_VIEW_FILTER_RULE = 'EDIT_CONTENT_VIEW_FILTER_RULE';
+export const REMOVE_CONTENT_VIEW_FILTER_RULE = 'REMOVE_CONTENT_VIEW_FILTER_RULE';
+export const EDIT_CONTENT_VIEW_FILTER = 'EDIT_CONTENT_VIEW_FILTER';
+export const ACTIVATION_KEY_KEY = 'ACTIVATION_KEY_KEY';
+export const HOSTS_KEY = 'HOSTS_KEY';
+export const RPM_PACKAGE_GROUPS_CONTENT = 'RPM_PACKAGE_GROUPS_CONTENT';
+export const REPOSITORY_CONTENT = 'REPOSITORY_CONTENT';
+export const ERRATA_CONTENT = 'ERRATA_CONTENT';
+export const DOCKER_TAGS_CONTENT = 'DOCKER_TAGS_CONTENT';
+export const ANSIBLE_COLLECTIONS_CONTENT = 'ANSIBLE_COLLECTIONS_CONTENT';
+export const MODULE_STREAMS_CONTENT = 'MODULE_STREAMS_CONTENT';
+export const DEB_PACKAGES_CONTENT = 'DEB_PACKAGES_CONTENT';
+export const RPM_PACKAGES_CONTENT = 'RPM_PACKAGES_CONTENT';
+export const FILE_CONTENT = 'FILE_CONTENT';
 export const cvDetailsKey = cvId => `${CONTENT_VIEWS_KEY}_${cvId}`;
 export const cvDetailsRepoKey = cvId => `${CONTENT_VIEWS_KEY}_REPOSITORIES_${cvId}`;
+export const cvFilterRepoKey = filterId => `CV_FILTER_REPOSITORIES_${filterId}`;
 export const cvDetailsFiltersKey = cvId => `${CONTENT_VIEWS_KEY}_FILTERS_${cvId}`;
 export const cvFilterDetailsKey = (cvId, filterId) => `${CONTENT_VIEWS_KEY}_${cvId}_FILTER_${filterId}`;
 export const cvFilterPackageGroupsKey =
   (cvId, filterId) => `${CONTENT_VIEWS_KEY}_${cvId}_FILTER_${filterId}_PACKAGE_GROUPS`;
+export const cvFilterModuleStreamKey =
+  (cvId, filterId) => `${CONTENT_VIEWS_KEY}_${cvId}_FILTER_${filterId}_MODULE_STREAMS`;
+export const cvFilterErratumIDKey =
+  (cvId, filterId) => `${CONTENT_VIEWS_KEY}_${cvId}_FILTER_${filterId}_ERRATA`;
 export const cvDetailsHistoryKey = cvId => `${CONTENT_VIEWS_KEY}_HISTORIES_${cvId}`;
 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 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 cvAddComponentKey = cvId => `${CONTENT_VIEWS_KEY}_ADD_COMPONENT_${cvId}`;
 export const cvRemoveComponentKey = cvId => `${CONTENT_VIEWS_KEY}_REMOVE_COMPONENT_${cvId}`;
@@ -30,11 +55,13 @@ 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 REPOSITORY_TYPES = 'REPOSITORY_TYPES';
-export const FILTER_TYPES = ['rpm', 'package_group', 'erratum', 'docker', 'modulemd'];
+export const FILTER_TYPES = ['rpm', 'package_group', 'erratum_date', 'erratum_id', 'docker', 'modulemd'];
+
+export const ERRATA_TYPES = ['enhancement', 'security', 'bugfix'];
 
 export default CONTENT_VIEWS_KEY;

data/webpack/scenes/ContentViews/ContentViewsPage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { Grid, GridItem, TextContent, Text, TextVariants } from '@patternfly/react-core';
 import ContentViewsTable from './Table/ContentViewsTable';
+import ContentViewsCounter from './components/ContentViewsCounter';
 
 const ContentViewsPage = () => (
   <Grid className="grid-with-margin">
@@ -10,6 +11,9 @@ const ContentViewsPage = () => (
         <Text component={TextVariants.h1}>{__('Content Views')}</Text>
       </TextContent>
     </GridItem>
+    <GridItem span={12}>
+      <ContentViewsCounter />
+    </GridItem>
     <GridItem span={12}>
       <ContentViewsTable />
     </GridItem>

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

@@ -4,6 +4,7 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { Redirect } from 'react-router-dom';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { Form, FormGroup, TextInput, ActionGroup, Button } from '@patternfly/react-core';
 import {
   selectCopyContentViewError, selectCopyContentViews,
@@ -40,12 +41,16 @@ const CopyContentViewForm = ({ cvId, setModalOpen }) => {
 
   if (redirect) {
     const { id } = response;
-    return (<Redirect to={`/labs/content_views/${id}`} />);
+    return (<Redirect to={`/content_views/${id}`} />);
   }
 
   return (
-    <Form>
-      <FormGroup label="Name" isRequired fieldId="name">
+    <Form onSubmit={(e) => {
+      e.preventDefault();
+      onSubmit();
+    }}
+    >
+      <FormGroup label={__('Name')} isRequired fieldId="name">
         <TextInput
           isRequired
           type="text"
@@ -53,14 +58,21 @@ const CopyContentViewForm = ({ cvId, setModalOpen }) => {
           aria-label="input_name"
           name="name"
           value={name}
-          onChange={value => setName(value)}
+          onChange={setName}
         />
       </FormGroup>
       <ActionGroup>
-        <Button aria-label="copy_content_view" variant="primary" isDisabled={saving} onClick={() => onSubmit()}>Copy content view</Button>
-        <Button variant="link" onClick={() => setModalOpen(false)}>Cancel</Button>
+        <Button
+          aria-label="copy_content_view"
+          variant="primary"
+          isDisabled={saving}
+          type="submit"
+        >
+          {__('Copy content view')}
+        </Button>
+        <Button variant="link" onClick={() => setModalOpen(false)}>{__('Cancel')}</Button>
       </ActionGroup>
-    </Form>
+    </Form >
   );
 };
 

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

@@ -1,17 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalVariant } from '@patternfly/react-core';
+import { FormattedMessage } from 'react-intl';
+import { translate as __ } from 'foremanReact/common/I18n';
 import CopyContentViewForm from './CopyContentViewForm';
 
 const CopyContentViewModal = ({
   cvId, cvName, show, setIsOpen,
 }) => {
   const description = (
-    <p>
-      This will create a copy of <b>{cvName}</b>, including details,
-      repositories, and filters. Generated data such
-      as history, tasks and versions will not be copied.
-    </p>
+    <FormattedMessage
+      id="copy-cv-description"
+      values={{ cv: <b>{cvName}</b> }}
+      defaultMessage={__('This will create a copy of {cv}, including details, repositories, and filters. Generated data such as history, tasks and versions will not be copied.')}
+    />
   );
   return (
     <Modal

data/webpack/scenes/ContentViews/Copy/__tests__/copyContentView.test.js

@@ -5,7 +5,7 @@ import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrap
 import api from '../../../../services/api';
 import CopyContentViewForm from '../CopyContentViewForm';
 
-const cvCopyData = require('./contentViewCopyResult.fixtures.json');
+import cvCopyData from './contentViewCopyResult.fixtures.json';
 
 const cvId = '1';
 const cvCopyPath = api.getApiUrl(`/content_views/${cvId}/copy`);

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

@@ -60,11 +60,15 @@ const CreateContentViewForm = ({ setModalOpen }) => {
 
   if (redirect) {
     const { id } = response;
-    return (<Redirect to={`/labs/content_views/${id}`} />);
+    return (<Redirect to={`/content_views/${id}`} />);
   }
 
   return (
-    <Form>
+    <Form onSubmit={(e) => {
+      e.preventDefault();
+      onSave();
+    }}
+    >
       <FormGroup label={__('Name')} isRequired fieldId="name">
         <TextInput
           isRequired
@@ -163,7 +167,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
           aria-label="create_content_view"
           variant="primary"
           isDisabled={saving}
-          onClick={() => onSave()}
+          type="submit"
         >
           {__('Create content view')}
         </Button>

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

@@ -4,8 +4,7 @@ import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-
 import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrapper';
 import api from '../../../../services/api';
 import CreateContentViewForm from '../CreateContentViewForm';
-
-const cvCreateData = require('./contentViewCreateResult.fixtures.json');
+import cvCreateData from './contentViewCreateResult.fixtures.json';
 
 const cvCreatePath = api.getApiUrl('/content_views');
 

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

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+const CVDeleteContext = createContext({});
+export default CVDeleteContext;

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

@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { Wizard } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import CVDeleteEnvironmentSelection from './Steps/CVDeleteEnvironmentsSelection';
+import {
+  selectCVDetails,
+  selectCVDetailStatus,
+  selectCVVersions,
+  selectCVVersionsStatus,
+} from '../Details/ContentViewDetailSelectors';
+import getEnvironmentPaths from '../components/EnvironmentPaths/EnvironmentPathActions';
+import CVDeletionReassignHostsForm from './Steps/CVDeletionReassignHostsForm';
+import CVDeletionReassignActivationKeysForm from './Steps/CVDeletionReassignActivationKeysForm';
+import CVDeletionReview from './Steps/CVDeletionReview';
+import CVDeletionFinish from './Steps/CVDeletionFinish';
+import CVDeleteContext from './CVDeleteContext';
+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));
+    const cvDetailsResponse = useSelector(state => selectCVDetails(state, cvId));
+    const cvDetailsStatus = useSelector(state => selectCVDetailStatus(state, cvId));
+    const [selectedEnvForAK, setSelectedEnvForAK] = useState([]);
+    const [selectedEnvForHost, setSelectedEnvForHost] = useState([]);
+    const dispatch = useDispatch();
+    const [selectedCVForAK, setSelectedCVForAK] = useState(null);
+    const [selectedCVNameForAK, setSelectedCVNameForAK] = useState(null);
+    const [selectedCVForHosts, setSelectedCVForHosts] = useState(null);
+    const [selectedCVNameForHosts, setSelectedCVNameForHosts] = useState(null);
+    const [affectedActivationKeys, setAffectedActivationKeys] = useState(false);
+    const [affectedHosts, setAffectedHosts] = useState(false);
+    const [canReview, setCanReview] = useState(false);
+
+    const { name } = cvDetailsResponse ?? {};
+
+    useEffect(
+      () => {
+        dispatch(getEnvironmentPaths());
+      },
+      [dispatch],
+    );
+
+    useEffect(() => {
+      const hostsStepComplete = affectedHosts ?
+        selectedEnvForHost && selectedCVForHosts :
+        true;
+      const activationStepComplete = affectedActivationKeys ?
+        selectedEnvForAK && selectedCVForAK :
+        true;
+      setCanReview(hostsStepComplete && activationStepComplete);
+    }, [affectedHosts, selectedEnvForHost, selectedCVForHosts,
+      affectedActivationKeys, selectedEnvForAK, selectedCVForAK]);
+
+    const environmentSelectionStep = {
+      id: 1,
+      name: __('Remove from environments'),
+      component: <CVDeleteEnvironmentSelection />,
+    };
+    const affectedHostsStep = {
+      id: 2,
+      name: __('Reassign affected hosts'),
+      component: <CVDeletionReassignHostsForm />,
+    };
+    const affectedKeysStep = {
+      id: 3,
+      name: __('Reassign affected activation keys'),
+      component: <CVDeletionReassignActivationKeysForm />,
+      enableNext: canReview,
+    };
+    const reviewStep = {
+      id: 4,
+      name: __('Review'),
+      component: <CVDeletionReview />,
+      canJumpTo: canReview,
+      nextButtonText: __('Delete'),
+    };
+    const finishStep = {
+      id: 5,
+      name: __('Delete'),
+      component: <CVDeletionFinish />,
+      isFinishedStep: true,
+    };
+
+    useDeepCompareEffect(() => {
+      if (!(cvVersionStatus === STATUS.LOADING || cvDetailsStatus === STATUS.LOADING)) {
+        const { activation_keys: keys, hosts } = cvDetailsResponse;
+        setAffectedHosts(!!(hosts?.length));
+        setAffectedActivationKeys(!!(keys?.length));
+      }
+    }, [cvVersionResponse, cvVersionStatus, cvDetailsResponse, cvDetailsStatus]);
+
+    const steps = [
+      environmentSelectionStep,
+      ...(affectedHosts ? [affectedHostsStep] : []),
+      ...(affectedActivationKeys ? [affectedKeysStep] : []),
+      reviewStep,
+      finishStep,
+    ];
+
+    if (cvVersionStatus === STATUS.LOADING || cvDetailsStatus === STATUS.LOADING) {
+      return <Loading />;
+    }
+    return (
+      <CVDeleteContext.Provider value={{
+        cvId,
+        cvEnvironments,
+        show,
+        setIsOpen,
+        currentStep,
+        setCurrentStep,
+        cvVersionResponse,
+        cvVersionStatus,
+        cvDetailsResponse,
+        cvDetailsStatus,
+        selectedEnvForAK,
+        setSelectedEnvForAK,
+        selectedEnvForHost,
+        setSelectedEnvForHost,
+        selectedCVForAK,
+        setSelectedCVForAK,
+        selectedCVNameForAK,
+        setSelectedCVNameForAK,
+        selectedCVForHosts,
+        setSelectedCVForHosts,
+        selectedCVNameForHosts,
+        setSelectedCVNameForHosts,
+        affectedActivationKeys,
+        affectedHosts,
+        }}
+      >
+        <Wizard
+          title={__('Delete content view')}
+          description={<>{__('Deleting content view : ')}<b>{name}</b></>}
+          steps={steps}
+          startAtStep={currentStep}
+          onClose={() => {
+              setIsOpen(false);
+              setCurrentStep(0);
+            }}
+          isOpen={show}
+        />
+      </CVDeleteContext.Provider>
+    );
+  };
+
+ContentViewDeleteWizard.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  cvEnvironments: PropTypes.arrayOf(PropTypes.shape({})),
+  show: PropTypes.bool,
+  setIsOpen: PropTypes.func,
+  currentStep: PropTypes.number.isRequired,
+  setCurrentStep: PropTypes.func.isRequired,
+};
+
+ContentViewDeleteWizard.defaultProps = {
+  cvEnvironments: [],
+  show: false,
+  setIsOpen: null,
+};
+
+export default ContentViewDeleteWizard;

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

@@ -0,0 +1,108 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { ExpandableSection, Flex, FlexItem } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { TableVariant, TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import CVDeleteContext from '../CVDeleteContext';
+import { pluralize } from '../../../../utils/helpers';
+import Loading from '../../../../components/Loading';
+import './CVEnvironmentSelectionForm.scss';
+import InactiveText from '../../components/InactiveText';
+
+const CVDeleteEnvironmentSelection = () => {
+  const {
+    cvVersionResponse, cvDetailsResponse, cvVersionStatus, cvDetailsStatus,
+  } = useContext(CVDeleteContext);
+  const [versionExpanded, setVersionExpanded] = useState([]);
+  const { results } = cvVersionResponse ?? {};
+  const { version_count: versionCount } = cvDetailsResponse ?? {};
+  const resolved = (cvVersionStatus === STATUS.RESOLVED && cvDetailsStatus === STATUS.RESOLVED);
+  useEffect(() => {
+    if (cvVersionResponse && results) {
+      setVersionExpanded(new Array(results?.length).fill(false));
+    }
+  }, [cvVersionResponse, results]);
+  const columnHeaders = [
+    __('Environment'),
+    __('Hosts'),
+    __('Activation keys'),
+  ];
+
+  const setExpanded = (index, expanded) => {
+    setVersionExpanded(versionExpanded.map((val, i) => (i === index ? expanded : val)));
+  };
+
+  return (
+    <>
+      <h2>{__('Remove versions from environments')}</h2>
+      {!resolved && <Loading loadingText={__('Loading versions')} />}
+      {resolved &&
+        <>
+          <Flex>
+            <FlexItem><ExclamationTriangleIcon /></FlexItem>
+            {versionCount ?
+              (
+                <FlexItem style={{ marginBottom: '0.5em' }}>
+                  {__(`${pluralize(versionCount, 'content view version')} in the environments below will be removed when content view is deleted`)}
+                </FlexItem>
+              ) :
+              (
+                <FlexItem style={{ marginBottom: '0.5em' }}>
+                  {__('This content view does not have any versions associated.')}
+                </FlexItem>
+              )
+            }
+          </Flex>
+          {results?.map((version, index) => (
+            <ExpandableSection
+              key={version.id}
+              toggleText={__(`Version ${version.version}`)}
+              onToggle={expanded => setExpanded(index, expanded)}
+              isExpanded={versionExpanded[index]}
+            >
+              {(version?.environments.length !== 0) ?
+                <TableComposable variant={TableVariant.compact}>
+                  <Thead>
+                    <Tr>
+                      <Th />
+                      {columnHeaders.map(col =>
+                        <Th key={col}>{col}</Th>)}
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {version?.environments?.map((env, rowIndex) => {
+                  const {
+                    id, name, activation_key_count: akCount, host_count: hostCount,
+                  } = env;
+                  return (
+                    <Tr key={`${name}_${id}`}>
+                      <Td
+                        key={`${name}__${id}_select`}
+                        select={{
+                          rowIndex,
+                          isSelected: true,
+                          disable: true,
+                        }}
+                      />
+                      <Td>
+                        {name}
+                      </Td>
+                      <Td>{hostCount}</Td>
+                      <Td>{akCount}</Td>
+                    </Tr>
+                  );
+                })}
+                  </Tbody>
+                </TableComposable> :
+                <InactiveText text={__('This version is not promoted to any environments.')} />
+              }
+            </ExpandableSection>
+          ))}
+        </>
+      }
+    </>
+  );
+};
+
+export default CVDeleteEnvironmentSelection;

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

@@ -0,0 +1,69 @@
+import React, { useContext, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { getContentViewVersions, removeContentViewVersion } from '../../Details/ContentViewDetailActions';
+import { selectRemoveCVVersionResponse, selectRemoveCVVersionStatus } from '../../Details/ContentViewDetailSelectors';
+import getContentViews from '../../ContentViewsActions';
+import CVDeleteContext from '../CVDeleteContext';
+import Loading from '../../../../components/Loading';
+
+const CVDeletionFinish = () => {
+  const {
+    cvId, cvEnvironments,
+    setIsOpen,
+    selectedCVForAK, selectedEnvForAK, selectedCVForHosts,
+    selectedEnvForHost, affectedActivationKeys, affectedHosts,
+  } = useContext(CVDeleteContext);
+  const removeCVResponse = useSelector(state =>
+    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);
+
+  useDeepCompareEffect(() => {
+    if (removeResolved && removeDispatched) {
+      setIsOpen(false);
+      dispatch(getContentViewVersions(cvId));
+      dispatch(getContentViews);
+    }
+  }, [removeCVResponse, removeResolved, setIsOpen, dispatch, cvId, removeDispatched]);
+
+  useDeepCompareEffect(() => {
+    if (!removeDispatched) {
+      let params = {
+        id: cvId,
+      };
+
+      if (affectedActivationKeys) {
+        const activationKeysParams = {
+          key_content_view_id: selectedCVForAK,
+          key_environment_id: selectedEnvForAK[0].id,
+        };
+        params = { ...activationKeysParams, ...params };
+      }
+
+      if (affectedHosts) {
+        const hostParams = {
+          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));
+      setRemoveDispatched(true);
+    }
+  }, [cvId, cvEnvironments, dispatch, affectedActivationKeys,
+    affectedHosts, selectedCVForAK, selectedCVForHosts,
+    selectedEnvForAK, selectedEnvForHost, removeCVResponse, removeCVStatus, removeDispatched]);
+
+  return <Loading loadingText={__('Please wait while the task starts..')} />;
+};
+
+export default CVDeletionFinish;