katello 4.2.2 → 4.3.0.rc1

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersions.js

@@ -1,10 +1,11 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useDispatch, useSelector } from 'react-redux';
 import { TableVariant, TableText } from '@patternfly/react-table';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import { STATUS } from 'foremanReact/constants';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import TableWrapper from '../../../../components/Table/TableWrapper';
@@ -18,20 +19,33 @@ import {
   selectCVVersionsStatus,
   selectCVVersionsError,
 } from '../ContentViewDetailSelectors';
+import getEnvironmentPaths from '../../components/EnvironmentPaths/EnvironmentPathActions';
+import ContentViewVersionPromote from '../Promote/ContentViewVersionPromote';
 import TaskPresenter from '../../components/TaskPresenter/TaskPresenter';
 import { startPollingTask } from '../../../Tasks/TaskActions';
+import RemoveCVVersionWizard from './Delete/RemoveCVVersionWizard';
+import { hasPermission } from '../../helpers';
 
-const ContentViewVersions = ({ cvId }) => {
+const ContentViewVersions = ({ cvId, details }) => {
   const response = useSelector(state => selectCVVersions(state, cvId));
+  const { results, ...metadata } = response;
   const status = useSelector(state => selectCVVersionsStatus(state, cvId));
   const error = useSelector(state => selectCVVersionsError(state, cvId));
   const [pollingFinished, setPollingFinished] = useState(false);
   const loading = status === STATUS.PENDING;
   const dispatch = useDispatch();
-
   const [rows, setRows] = useState([]);
-  const [metadata, setMetadata] = useState({});
   const [searchQuery, updateSearchQuery] = useState('');
+  const [versionIdToPromote, setVersionIdToPromote] = useState('');
+  const [versionNameToPromote, setVersionNameToPromote] = useState('');
+  const [versionIdToRemove, setVersionIdToRemove] = useState('');
+  const [versionNameToRemove, setVersionNameToRemove] = useState('');
+  const [versionEnvironments, setVersionEnvironments] = useState([]);
+  const [promoting, setPromoting] = useState(false);
+  const [removingFromEnv, setRemovingFromEnv] = useState(false);
+  const [deleteVersion, setDeleteVersion] = useState(false);
+  const [currentStep, setCurrentStep] = useState(1);
+  const { permissions } = details;
 
   const columnHeaders = [
     __('Version'),
@@ -42,6 +56,13 @@ const ContentViewVersions = ({ cvId }) => {
     __('Description'),
   ];
 
+  useEffect(
+    () => {
+      dispatch(getEnvironmentPaths());
+    },
+    [dispatch],
+  );
+
   const buildCells = useCallback((cvVersion) => {
     const {
       version,
@@ -52,9 +73,9 @@ const ContentViewVersions = ({ cvId }) => {
       errata_counts: errataCounts,
     } = cvVersion;
     return [
-      { title: <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}`, '')}>{__('Version ')}{version}</a> },
+      { title: <Link to={`/versions/${versionId}`}>{__('Version ')}{version}</Link> },
       { title: <ContentViewVersionEnvironments {...{ environments }} /> },
-      { title: <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}/packages`, '')}>{`${packageCount}`}</a> },
+      { title: <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/packages`, '')}>{packageCount}</a> },
       { title: <ContentViewVersionErrata {...{ cvId, versionId, errataCounts }} /> },
       { title: <ContentViewVersionContent {...{ cvId, versionId, cvVersion }} /> },
       { title: description ? <TableText wrapModifier="truncate">{description}</TableText> : <InactiveText text={__('No description')} /> },
@@ -75,7 +96,7 @@ const ContentViewVersions = ({ cvId }) => {
     }
 
     return [
-      { title: <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}`, '')}>{__('Version ')}{version}</a> },
+      { title: <Link disabled to={`/versions/${versionId}`}>{__('Version ')}{version}</Link> },
       {
         title: <TaskPresenter
           activeHistory={activeHistory[0]}
@@ -87,31 +108,95 @@ const ContentViewVersions = ({ cvId }) => {
       { title: '' },
       { title: description ? <TableText wrapModifier="truncate">{description}</TableText> : <InactiveText text={__('No description')} /> },
     ];
-  }, [cvId, dispatch]);
+  }, [dispatch]);
 
   useDeepCompareEffect(() => {
-    const buildRows = (results) => {
+    const buildRows = () => {
       const newRows = [];
       results.forEach((cvVersion) => {
         const {
+          version,
+          id: versionId,
+          environments,
           active_history: activeHistory,
         } = cvVersion;
 
         const cells = activeHistory.length ?
           buildActiveTaskCells(cvVersion) :
           buildCells(cvVersion);
-        newRows.push({ cells });
+        newRows.push({
+          cvVersionId: versionId,
+          cvVersionName: version,
+          cvVersionEnvironments: environments,
+          activeHistory,
+          cells,
+        });
       });
       return newRows;
     };
 
-    const { results, ...meta } = response;
-    setMetadata(meta);
     if (!loading && results) {
-      const newRows = buildRows(results);
+      const newRows = buildRows();
       setRows(newRows);
     }
-  }, [response, setMetadata, buildActiveTaskCells, buildCells, dispatch, loading, setRows]);
+  }, [response, results, buildActiveTaskCells, buildCells, dispatch, loading, setRows]);
+
+  const onPromote = ({ cvVersionId, cvVersionName, cvVersionEnvironments }) => {
+    setVersionIdToPromote(cvVersionId);
+    setVersionNameToPromote(cvVersionName);
+    setVersionEnvironments(cvVersionEnvironments);
+    setPromoting(true);
+    setPollingFinished(false);
+  };
+
+  const onRemoveFromEnv = ({
+    cvVersionId, cvVersionName, cvVersionEnvironments, deleting,
+  }) => {
+    setVersionIdToRemove(cvVersionId);
+    setVersionNameToRemove(cvVersionName);
+    setVersionEnvironments(cvVersionEnvironments);
+    setRemovingFromEnv(true);
+    setDeleteVersion(deleting);
+    setPollingFinished(false);
+  };
+
+  const actionResolver = (rowData, { _rowIndex }) => [
+    {
+      title: __('Promote'),
+      isDisabled: rowData.activeHistory.length,
+      onClick: (_event, rowId, rowInfo) => {
+        onPromote({
+          cvVersionId: rowInfo.cvVersionId,
+          cvVersionName: rowInfo.cvVersionName,
+          cvVersionEnvironments: rowInfo.cvVersionEnvironments,
+        });
+      },
+    },
+    {
+      title: __('Remove'),
+      isDisabled: rowData.activeHistory.length,
+      onClick: (_event, rowId, rowInfo) => {
+        onRemoveFromEnv({
+          cvVersionId: rowInfo.cvVersionId,
+          cvVersionName: rowInfo.cvVersionName,
+          cvVersionEnvironments: rowInfo.cvVersionEnvironments,
+          deleting: false,
+        });
+      },
+    },
+    {
+      title: __('Delete'),
+      isDisabled: rowData.activeHistory.length,
+      onClick: (_event, rowId, rowInfo) => {
+        onRemoveFromEnv({
+          cvVersionId: rowInfo.cvVersionId,
+          cvVersionName: rowInfo.cvVersionName,
+          cvVersionEnvironments: rowInfo.cvVersionEnvironments,
+          deleting: true,
+        });
+      },
+    },
+  ];
 
   const emptyContentTitle = __("You currently don't have any versions for this content view.");
   const emptyContentBody = __('Versions will appear here when the content view is published.'); // needs link
@@ -132,15 +217,48 @@ const ContentViewVersions = ({ cvId }) => {
         error,
         status,
       }}
+      actionResolver={hasPermission(permissions, 'promote_or_remove_content_views') ? actionResolver : null}
       cells={columnHeaders}
       variant={TableVariant.compact}
       autocompleteEndpoint={`/content_view_versions/auto_complete_search?content_view_id=${cvId}`}
       fetchItems={useCallback(params => getContentViewVersions(cvId, params), [cvId])}
       additionalListeners={[pollingFinished]}
+      actionButtons={
+        <>
+          {promoting &&
+            <ContentViewVersionPromote
+              cvId={cvId}
+              versionIdToPromote={versionIdToPromote}
+              versionNameToPromote={versionNameToPromote}
+              versionEnvironments={versionEnvironments}
+              setIsOpen={setPromoting}
+              aria-label="promote_content_view_modal"
+            />
+          }
+          {removingFromEnv &&
+            <RemoveCVVersionWizard
+              cvId={cvId}
+              versionIdToRemove={versionIdToRemove}
+              versionNameToRemove={versionNameToRemove}
+              versionEnvironments={versionEnvironments}
+              show={removingFromEnv}
+              setIsOpen={setRemovingFromEnv}
+              currentStep={currentStep}
+              setCurrentStep={setCurrentStep}
+              deleteWizard={deleteVersion}
+              aria-label="remove_content_view_version_modal"
+            />
+          }
+        </>
+      }
     />);
 };
 
 ContentViewVersions.propTypes = {
   cvId: PropTypes.number.isRequired,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+  }).isRequired,
 };
+
 export default ContentViewVersions;

data/webpack/scenes/ContentViews/Details/Versions/Delete/DeleteContext.js

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

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveCVVersionWizard.js

@@ -0,0 +1,176 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Wizard } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import getEnvironmentPaths from '../../../components/EnvironmentPaths/EnvironmentPathActions';
+import CVEnvironmentSelectionForm from './RemoveSteps/CVEnvironmentSelectionForm';
+import CVReassignActivationKeysForm from './RemoveSteps/CVReassignActivationKeysForm';
+import CVReassignHostsForm from './RemoveSteps/CVReassignHostsForm';
+import CVVersionRemoveReview from './RemoveSteps/CVVersionRemoveReview';
+import CVVersionDeleteFinish from './RemoveSteps/CVVersionDeleteFinish';
+import getContentViewDetails from '../../ContentViewDetailActions';
+import getContentViews from '../../../ContentViewsActions';
+import DeleteContext from './DeleteContext';
+import { useSet } from '../../../../../components/Table/TableHooks';
+
+const RemoveCVVersionWizard = ({
+  cvId, versionIdToRemove, versionNameToRemove,
+  versionEnvironments, show, setIsOpen,
+  currentStep, setCurrentStep, deleteWizard,
+}) => {
+  const [selectedEnvForAK, setSelectedEnvForAK] = useState([]);
+  const [selectedEnvForHost, setSelectedEnvForHost] = useState([]);
+  const dispatch = useDispatch();
+  const selectedEnvSet = useSet([]);
+  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 [deleteFlow, setDeleteFlow] = useState(deleteWizard || false);
+  const [removeDeletionFlow, setRemoveDeletionFlow] = useState(false);
+  const [canReview, setCanReview] = useState(false);
+
+  useEffect(
+    () => {
+      dispatch(getEnvironmentPaths());
+      if (deleteFlow) {
+        versionEnvironments.forEach(env => selectedEnvSet.add(env.id));
+      }
+      if (versionEnvironments.length === 0) setDeleteFlow(true);
+    },
+    [dispatch, deleteFlow, setDeleteFlow, versionEnvironments, selectedEnvSet],
+  );
+
+  useEffect(() => {
+    const hostsStepComplete = affectedHosts ?
+      selectedEnvForHost && selectedCVForHosts :
+      true;
+    const activationStepComplete = affectedActivationKeys ?
+      selectedEnvForAK && selectedCVForAK :
+      true;
+    setCanReview(hostsStepComplete &&
+      activationStepComplete &&
+      (selectedEnvSet.size || versionEnvironments.length === 0));
+  }, [affectedHosts, selectedEnvForHost, selectedCVForHosts, versionEnvironments,
+    affectedActivationKeys, selectedEnvForAK, selectedCVForAK, selectedEnvSet.size]);
+
+  const environmentSelectionStep = {
+    id: 1,
+    name: __('Remove from environments'),
+    component: <CVEnvironmentSelectionForm />,
+    enableNext: (selectedEnvSet.size || versionEnvironments.length === 0),
+  };
+
+  const hostStep = {
+    id: 2,
+    name: 'Reassign affected hosts',
+    component: <CVReassignHostsForm />,
+    enableNext: (affectedHosts ? selectedEnvForHost && selectedCVForHosts : true),
+    canJumpTo: affectedHosts,
+  };
+
+  const activationStep = {
+    id: 3,
+    name: 'Reassign affected activation keys',
+    component: <CVReassignActivationKeysForm />,
+    enableNext: canReview,
+    canJumpTo: affectedActivationKeys &&
+    (affectedHosts ? selectedEnvForHost && selectedCVForHosts : true),
+  };
+
+  const reviewStep = {
+    id: 4,
+    name: 'Review',
+    component: <CVVersionRemoveReview />,
+    canJumpTo: canReview,
+    nextButtonText: deleteFlow ? __('Delete') : __('Remove'),
+  };
+
+  const finishStep = {
+    id: 5,
+    name: 'Finish',
+    component: <CVVersionDeleteFinish />,
+    isFinishedStep: true,
+  };
+
+  const steps = [
+    environmentSelectionStep,
+    ...(affectedHosts ? [hostStep] : []),
+    ...(affectedActivationKeys ? [activationStep] : []),
+    reviewStep,
+    finishStep,
+  ];
+
+  return (
+    <DeleteContext.Provider value={{
+      cvId,
+      versionIdToRemove,
+      versionNameToRemove,
+      versionEnvironments,
+      setIsOpen,
+      affectedActivationKeys,
+      affectedHosts,
+      setAffectedActivationKeys,
+      setAffectedHosts,
+      deleteFlow,
+      setDeleteFlow,
+      removeDeletionFlow,
+      setRemoveDeletionFlow,
+      currentStep,
+      selectedCVForHosts,
+      setSelectedCVNameForHosts,
+      setSelectedCVForHosts,
+      selectedCVForAK,
+      setSelectedCVNameForAK,
+      selectedCVNameForAK,
+      selectedCVNameForHosts,
+      setSelectedCVForAK,
+      selectedEnvForAK,
+      setSelectedEnvForAK,
+      selectedEnvForHost,
+      setSelectedEnvForHost,
+      selectedEnvSet,
+    }}
+    >
+      <Wizard
+        title={deleteFlow ? __('Delete Version') : __('Remove Version')}
+        description={__(`${deleteFlow ? 'Deleting' : 'Removing'} version ${versionNameToRemove}`)}
+        steps={steps}
+        startAtStep={currentStep}
+        onClose={() => {
+          selectedEnvSet.clear();
+          if (currentStep === 3) {
+            setCurrentStep(1);
+            dispatch(getContentViewDetails(cvId));
+            dispatch(getContentViews);
+          }
+          setIsOpen(false);
+        }}
+        isOpen={show}
+      />
+    </DeleteContext.Provider>
+  );
+};
+
+RemoveCVVersionWizard.propTypes = {
+  cvId: PropTypes.number.isRequired,
+  versionIdToRemove: PropTypes.number.isRequired,
+  versionNameToRemove: PropTypes.string.isRequired,
+  versionEnvironments: PropTypes.arrayOf(PropTypes.shape({})),
+  show: PropTypes.bool,
+  setIsOpen: PropTypes.func,
+  currentStep: PropTypes.number.isRequired,
+  setCurrentStep: PropTypes.func.isRequired,
+  deleteWizard: PropTypes.bool.isRequired,
+};
+
+RemoveCVVersionWizard.defaultProps = {
+  versionEnvironments: [],
+  show: false,
+  setIsOpen: null,
+};
+
+export default RemoveCVVersionWizard;

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVEnvironmentSelectionForm.js

@@ -0,0 +1,127 @@
+import React, { useContext } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { Alert, Checkbox, EmptyState, EmptyStateVariant, Title, EmptyStateBody } from '@patternfly/react-core';
+import { TableVariant, TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
+import DeleteContext from '../DeleteContext';
+
+const CVEnvironmentSelectionForm = () => {
+  const {
+    versionNameToRemove, versionEnvironments, selectedEnvSet,
+    setAffectedActivationKeys, setAffectedHosts, deleteFlow,
+    removeDeletionFlow, setRemoveDeletionFlow,
+  } = useContext(DeleteContext);
+
+  const areAllSelected = () => versionEnvironments.every(env => selectedEnvSet.has(env.id));
+
+  const onSelect = (_event, isSelected, rowId) => {
+    if (isSelected) {
+      selectedEnvSet.add(rowId);
+    } else {
+      selectedEnvSet.delete(rowId);
+    }
+  };
+
+  // Based on env selected for removal, decide if we need to reassign hosts and activation keys.
+  useDeepCompareEffect(() => {
+    const selectedEnv = versionEnvironments.filter(env => selectedEnvSet.has(env.id));
+    setAffectedActivationKeys(!!(selectedEnv.filter(env => env.activation_key_count > 0).length));
+    setAffectedHosts(!!(selectedEnv.filter(env => env.host_count > 0).length));
+  }, [setAffectedActivationKeys, setAffectedHosts,
+    versionEnvironments, selectedEnvSet, selectedEnvSet.size]);
+
+  const onSelectAll = (event, isSelected) => {
+    if (!isSelected) {
+      setRemoveDeletionFlow(false);
+      selectedEnvSet.clear();
+    } else {
+      versionEnvironments.forEach(env => selectedEnvSet.add(env.id));
+    }
+  };
+
+  const columnHeaders = [
+    __('Environment'),
+    __('Hosts'),
+    __('Activation keys'),
+  ];
+
+  const versionDeleteInfo = __(`Version ${versionNameToRemove} will be deleted from the listed environments. It will no longer be available for promotion.`);
+  const versionRemovalInfo = __('Removing this version from all environments will not delete the version. Version will still be available for later promotion.');
+  const versionEnvironmentsEmptyInfo = __(`Version ${versionNameToRemove} has not been promoted to any environments. ` +
+    'You can delete this version completely and it will no longer be available for promotion.');
+  return (
+    <>
+      {deleteFlow &&
+      <Alert variant="warning" isInline title={__('Warning')}>
+        <p style={{ marginBottom: '0.5em' }}>{versionDeleteInfo}</p>
+      </Alert>
+      }
+      {(!deleteFlow &&
+        (removeDeletionFlow || areAllSelected() || versionEnvironments.length === 0))
+      && (
+      <Alert variant="warning" isInline title={__('Warning')}>
+        <p style={{ marginBottom: '0.5em' }}>{removeDeletionFlow ? versionDeleteInfo : versionRemovalInfo}</p>
+        <Checkbox
+          id="delete_version"
+          label={__('Delete version')}
+          isChecked={removeDeletionFlow}
+          onChange={checked => setRemoveDeletionFlow(checked)}
+          style={{ margin: 0 }}
+        />
+      </Alert>)}
+      {(versionEnvironments.length !== 0) &&
+      <TableComposable variant={TableVariant.compact}>
+        <Thead>
+          <Tr>
+            <Td
+              select={{
+              rowIndex: 0,
+              onSelect: onSelectAll,
+              isSelected: areAllSelected() || deleteFlow || removeDeletionFlow,
+              disable: deleteFlow || removeDeletionFlow,
+              }}
+            />
+            {columnHeaders.map(col =>
+              <Th key={col}>{col}</Th>)}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {versionEnvironments?.map(({
+                                       id, name, activation_key_count: akCount,
+                                       host_count: hostCount,
+                                     }, rowIndex) =>
+            (
+              <Tr key={`${name}_${id}`}>
+                <Td
+                  key={`${name}__${id}_select`}
+                  select={{
+                          rowIndex,
+                          onSelect: (event, isSelected) => onSelect(event, isSelected, id),
+                          isSelected: selectedEnvSet.has(id) || deleteFlow || removeDeletionFlow,
+                          disable: deleteFlow || removeDeletionFlow,
+                        }}
+                />
+                <Td>
+                  {name}
+                </Td>
+                <Td>{hostCount}</Td>
+                <Td>{akCount}</Td>
+              </Tr>
+            ))
+          }
+        </Tbody>
+      </TableComposable>}
+      {(versionEnvironments.length === 0) &&
+      <EmptyState variant={EmptyStateVariant.xs}>
+        <Title headingLevel="h4" size="md">
+          {__('This version has not been promoted to any environments.')}
+        </Title>
+        <EmptyStateBody>
+          {versionEnvironmentsEmptyInfo}
+        </EmptyStateBody>
+      </EmptyState>}
+    </>
+  );
+};
+
+export default CVEnvironmentSelectionForm;

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVReassignActivationKeysForm.js

@@ -0,0 +1,131 @@
+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 { STATUS } from 'foremanReact/constants';
+import { translate as __ } from 'foremanReact/common/I18n';
+import EnvironmentPaths from '../../../../components/EnvironmentPaths/EnvironmentPaths';
+import getContentViews from '../../../../ContentViewsActions';
+import { selectContentViewError, selectContentViews, selectContentViewStatus } from '../../../../ContentViewSelectors';
+import AffectedActivationKeys from '../affectedActivationKeys';
+import DeleteContext from '../DeleteContext';
+
+const CVReassignActivationKeysForm = () => {
+  const dispatch = useDispatch();
+  const contentViewsInEnvResponse = useSelector(selectContentViews);
+  const contentViewsInEnvStatus = useSelector(selectContentViewStatus);
+  const contentViewsInEnvError = useSelector(selectContentViewError);
+  const cvInEnvLoading = contentViewsInEnvStatus === STATUS.PENDING;
+  const [cvSelectOpen, setCVSelectOpen] = useState(false);
+  const [cvSelectOptions, setCvSelectionOptions] = useState([]);
+  const [showActivationKeys, setShowActivationKeys] = useState(false);
+  const {
+    currentStep, selectedEnvForAK, versionEnvironments, cvId, selectedEnvSet,
+    setSelectedEnvForAK, selectedCVForAK, setSelectedCVNameForAK, setSelectedCVForAK,
+  } = useContext(DeleteContext);
+
+  // Fetch content views for selected environment to reassign activation keys to.
+  useDeepCompareEffect(
+    () => {
+      if (selectedEnvForAK.length) {
+        dispatch(getContentViews({
+          environment_id: selectedEnvForAK[0].id,
+          include_default: true,
+          full_result: true,
+        }));
+      }
+      setCVSelectOpen(false);
+    },
+    [selectedEnvForAK, dispatch, setCVSelectOpen],
+  );
+
+  // Upon receiving CVs in selected env, form select options for the content view drop down
+  useDeepCompareEffect(() => {
+    const { results } = contentViewsInEnvResponse;
+    // Filter out the cv in the environments that are currently being removed
+    const contentViewEligible = (cv) => {
+      if (cv.id === cvId) {
+        const selectedEnv = versionEnvironments.filter(env => selectedEnvSet.has(env.id));
+        return (selectedEnv.filter(env => env.id === selectedEnvForAK[0]?.id).length === 0);
+      }
+      return true;
+    };
+    if (!cvInEnvLoading && results && selectedEnvForAK.length) {
+      setCvSelectionOptions(results.map(cv => ((contentViewEligible(cv)) ?
+        (
+          <SelectOption
+            key={cv.id}
+            value={cv.id}
+          >
+            {cv.name}
+          </SelectOption>
+        ) : null)).filter(n => n));
+    }
+    if (!cvInEnvLoading && results && selectedCVForAK &&
+      results.filter(cv => cv.id === selectedCVForAK && contentViewEligible(cv)).length === 0) {
+      setSelectedCVForAK(null);
+      setSelectedCVNameForAK(null);
+    }
+  }, [contentViewsInEnvResponse, contentViewsInEnvStatus, currentStep,
+    contentViewsInEnvError, selectedEnvForAK, setSelectedCVForAK, setSelectedCVNameForAK,
+    cvInEnvLoading, selectedCVForAK, cvId, versionEnvironments, selectedEnvSet]);
+
+  const fetchSelectedCVName = (id) => {
+    const { results } = contentViewsInEnvResponse ?? { };
+    return results.filter(cv => cv.id === id)[0]?.name;
+  };
+
+  const onSelect = (event, selection) => {
+    setSelectedCVForAK(selection);
+    setSelectedCVNameForAK(fetchSelectedCVName(selection));
+    setCVSelectOpen(false);
+  };
+
+  return (
+    <>
+      <EnvironmentPaths
+        userCheckedItems={selectedEnvForAK}
+        setUserCheckedItems={setSelectedEnvForAK}
+        publishing={false}
+        headerText={__('Select lifecycle environment')}
+        multiSelect={false}
+      />
+      {!cvInEnvLoading && selectedEnvForAK.length > 0 &&
+        <div style={{ marginTop: '1em' }}>
+          <h3>{__('Select content view')}</h3>
+          <Select
+            selections={selectedCVForAK}
+            onSelect={onSelect}
+            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>
+      }
+      <ExpandableSection
+        toggleText={showActivationKeys ?
+          'Hide activation keys' :
+          'Show activation keys'}
+        onToggle={expanded => setShowActivationKeys(expanded)}
+        isExpanded={showActivationKeys}
+      >
+        <AffectedActivationKeys
+          {...{
+          cvId,
+          versionEnvironments,
+          selectedEnvSet,
+          }}
+          deleteCV={false}
+        />
+      </ExpandableSection>
+    </>
+  );
+};
+
+export default CVReassignActivationKeysForm;