katello 4.20.1 → 4.21.0

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/__tests__/cvDetails.fixtures.json

@@ -0,0 +1,25 @@
+{
+  "id": 10,
+  "name": "Billy",
+  "label": "Billy",
+  "description": "",
+  "organization_id": 1,
+  "hostgroups": [
+    {
+      "id": 1,
+      "name": "HG10"
+    },
+    {
+      "id": 2,
+      "name": "HG20"
+    }
+  ],
+  "environments": [
+    {
+      "id": 1,
+      "name": "Library",
+      "label": "Library",
+      "hostgroups": [1, 2]
+    }
+  ]
+}

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/__tests__/cvEnvironments.fixtures.json

@@ -0,0 +1,15 @@
+{
+  "total": 1,
+  "subtotal": 1,
+  "page": 1,
+  "per_page": 20,
+  "results": [
+    {
+      "id": 100,
+      "name": "Library/Eeloo",
+      "label": "Library/Eeloo",
+      "content_view_version_id": 134,
+      "environment_id": 1
+    }
+  ]
+}

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/bulkDeleteSteps.js

@@ -7,22 +7,26 @@ import {
   getNumberOfActivationKeys,
   getNumberOfEnvironments,
   getNumberOfHosts,
+  getNumberOfHostgroups,
 } from './BulkDeleteHelpers';
 import ConfirmBulkDelete from './Steps/ConfirmBulkDelete';
 import FinishBulkDelete from './Steps/FinishBulkDelete';
 import ReassignActivationKeys from './Steps/ReassignActivationKeys';
 import ReassignHosts from './Steps/ReassignHosts';
+import ReassignHostgroups from './Steps/ReassignHostgroups';
 import ReviewEnvironments from './Steps/ReviewEnvironments';
 
 const bulkDeleteSteps = ({
   versions,
   selectedCVForAK,
   selectedCVForHosts,
+  selectedCVForHostgroups,
   currentStep,
 }) => {
   const affectedEnvironmentCount = getNumberOfEnvironments(versions);
   const activationKeyCount = getNumberOfActivationKeys(versions);
   const hostCount = getNumberOfHosts(versions);
+  const hostgroupCount = getNumberOfHostgroups(versions);
   const deleteSteps = [];
 
   if (affectedEnvironmentCount) {
@@ -44,6 +48,16 @@ const bulkDeleteSteps = ({
     });
   }
 
+  if (hostgroupCount) {
+    deleteSteps.push({
+      name: hostgroupCount > 1 ?
+        __('Reassign affected host groups') :
+        __('Reassign affected host group'),
+      component: <ReassignHostgroups />,
+      enableNext: !!selectedCVForHostgroups,
+    });
+  }
+
   if (activationKeyCount) {
     deleteSteps.push({
       name: activationKeyCount > 1 ?

data/webpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompareConfig.js

@@ -15,8 +15,6 @@ import {
   selectFilesComparisonStatus,
   selectErrataComparison,
   selectErrataComparisonStatus,
-  selectModuleStreamsComparison,
-  selectModuleStreamsComparisonStatus,
   selectDebPackagesComparison,
   selectDebPackagesComparisonStatus,
   selectDockerTagsComparison,
@@ -33,7 +31,6 @@ import {
   getRPMPackagesComparison,
   getFilesComparison,
   getErrataComparison,
-  getModuleStreamsComparison,
   getDebPackagesComparison,
   getDockerTagsComparison,
   getContainerManifestListsComparison,
@@ -280,40 +277,6 @@ export default ({
         [__('Type')]: 'type',
       },
     },
-    {
-      name: __('Module streams'),
-      getCountKey: (itemVersionOne, itemVersionTwo) =>
-        itemVersionOne?.module_stream_count || itemVersionTwo?.module_stream_count,
-      responseSelector: state =>
-        selectModuleStreamsComparison(state, versionOneId, versionTwoId, viewBy),
-      statusSelector: state =>
-        selectModuleStreamsComparisonStatus(state, versionOneId, versionTwoId, viewBy),
-      autocompleteEndpoint: '/katello/api/v2/module_streams',
-      bookmarkController: 'katello_content_view_components',
-      fetchItems: params => getModuleStreamsComparison(versionOneId, versionTwoId, viewBy, params),
-      columnHeaders: [
-        {
-          title: __('Name'),
-          getProperty: item => (
-            <a href={urlBuilder(`module_streams/${item?.id}`, '')}>
-              {item?.name}
-            </a>),
-        },
-        { title: __('Stream'), getProperty: item => item?.stream },
-        { title: __('Version'), getProperty: item => item?.version },
-        { title: __('Context'), getProperty: item => item?.context },
-        { title: __('Arch'), getProperty: item => item?.arch },
-        { title: __(`Version ${versionOne}`), getProperty: item => compareContent(item, versionOneId) },
-        { title: __(`Version ${versionTwo}`), getProperty: item => compareContent(item, versionTwoId) },
-      ],
-      sortConfig: {
-        [__('Name')]: 'name',
-        [__('Stream')]: 'stream',
-        [__('Version')]: 'version',
-        [__('Context')]: 'context',
-        [__('Arch')]: 'arch',
-      },
-    },
     {
       name: __('Deb packages'),
       getCountKey: (itemVersionOne, itemVersionTwo) =>

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

@@ -10,6 +10,7 @@ import getEnvironmentPaths from '../../../components/EnvironmentPaths/Environmen
 import CVEnvironmentSelectionForm from './RemoveSteps/CVEnvironmentSelectionForm';
 import CVReassignActivationKeysForm from './RemoveSteps/CVReassignActivationKeysForm';
 import CVReassignHostsForm from './RemoveSteps/CVReassignHostsForm';
+import CVReassignHostgroupsForm from './RemoveSteps/CVReassignHostgroupsForm';
 import CVVersionRemoveReview from './RemoveSteps/CVVersionRemoveReview';
 import CVVersionDeleteFinish from './RemoveSteps/CVVersionDeleteFinish';
 import getContentViewDetails from '../../ContentViewDetailActions';
@@ -23,14 +24,18 @@ const RemoveCVVersionWizard = ({
 }) => {
   const [selectedEnvForAK, setSelectedEnvForAK] = useState([]);
   const [selectedEnvForHost, setSelectedEnvForHost] = useState([]);
+  const [selectedEnvForHostgroup, setSelectedEnvForHostgroup] = 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 [selectedCVForHostgroups, setSelectedCVForHostgroups] = useState(null);
+  const [selectedCVNameForHostgroups, setSelectedCVNameForHostgroups] = useState(null);
   const [affectedActivationKeys, setAffectedActivationKeys] = useState(false);
   const [affectedHosts, setAffectedHosts] = useState(false);
+  const [affectedHostgroups, setAffectedHostgroups] = useState(false);
   const [deleteFlow, setDeleteFlow] = useState(deleteWizard || false);
   const [removeDeletionFlow, setRemoveDeletionFlow] = useState(false);
   const [canReview, setCanReview] = useState(false);
@@ -53,11 +58,17 @@ const RemoveCVVersionWizard = ({
     const activationStepComplete = affectedActivationKeys ?
       selectedEnvForAK && selectedCVForAK :
       true;
+    const hostgroupsStepComplete = affectedHostgroups ?
+      selectedEnvForHostgroup && selectedCVForHostgroups :
+      true;
     setCanReview(hostsStepComplete &&
       activationStepComplete &&
+      hostgroupsStepComplete &&
       (selectedEnvSet.size || versionEnvironments.length === 0));
   }, [affectedHosts, selectedEnvForHost, selectedCVForHosts, versionEnvironments,
-    affectedActivationKeys, selectedEnvForAK, selectedCVForAK, selectedEnvSet.size]);
+    affectedActivationKeys, selectedEnvForAK, selectedCVForAK,
+    affectedHostgroups, selectedEnvForHostgroup, selectedCVForHostgroups,
+    selectedEnvSet.size]);
 
   const environmentSelectionStep = {
     id: 1,
@@ -74,17 +85,27 @@ const RemoveCVVersionWizard = ({
     canJumpTo: affectedHosts,
   };
 
-  const activationStep = {
+  const hostgroupStep = {
     id: 3,
+    name: 'Reassign affected host groups',
+    component: <CVReassignHostgroupsForm />,
+    enableNext: (affectedHostgroups ? selectedEnvForHostgroup && selectedCVForHostgroups : true),
+    canJumpTo: affectedHostgroups &&
+      (affectedHosts ? selectedEnvForHost && selectedCVForHosts : true),
+  };
+
+  const activationStep = {
+    id: 4,
     name: 'Reassign affected activation keys',
     component: <CVReassignActivationKeysForm />,
     enableNext: canReview,
     canJumpTo: affectedActivationKeys &&
-      (affectedHosts ? selectedEnvForHost && selectedCVForHosts : true),
+      (affectedHosts ? selectedEnvForHost && selectedCVForHosts : true) &&
+      (affectedHostgroups ? selectedEnvForHostgroup && selectedCVForHostgroups : true),
   };
 
   const reviewStep = {
-    id: 4,
+    id: 5,
     name: 'Review',
     component: <CVVersionRemoveReview />,
     canJumpTo: canReview,
@@ -92,7 +113,7 @@ const RemoveCVVersionWizard = ({
   };
 
   const finishStep = {
-    id: 5,
+    id: 6,
     name: 'Finish',
     component: <CVVersionDeleteFinish />,
     isFinishedStep: true,
@@ -101,6 +122,7 @@ const RemoveCVVersionWizard = ({
   const steps = [
     environmentSelectionStep,
     ...(affectedHosts ? [hostStep] : []),
+    ...(affectedHostgroups ? [hostgroupStep] : []),
     ...(affectedActivationKeys ? [activationStep] : []),
     reviewStep,
     finishStep,
@@ -115,8 +137,10 @@ const RemoveCVVersionWizard = ({
       setIsOpen,
       affectedActivationKeys,
       affectedHosts,
+      affectedHostgroups,
       setAffectedActivationKeys,
       setAffectedHosts,
+      setAffectedHostgroups,
       deleteFlow,
       setDeleteFlow,
       removeDeletionFlow,
@@ -125,15 +149,21 @@ const RemoveCVVersionWizard = ({
       selectedCVForHosts,
       setSelectedCVNameForHosts,
       setSelectedCVForHosts,
+      selectedCVForHostgroups,
+      setSelectedCVNameForHostgroups,
+      setSelectedCVForHostgroups,
       selectedCVForAK,
       setSelectedCVNameForAK,
       selectedCVNameForAK,
       selectedCVNameForHosts,
+      selectedCVNameForHostgroups,
       setSelectedCVForAK,
       selectedEnvForAK,
       setSelectedEnvForAK,
       selectedEnvForHost,
       setSelectedEnvForHost,
+      selectedEnvForHostgroup,
+      setSelectedEnvForHostgroup,
       selectedEnvSet,
     }}
     >

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

@@ -9,7 +9,7 @@ const CVEnvironmentSelectionForm = () => {
   const [alertDismissed, setAlertDismissed] = useState(false);
   const {
     versionNameToRemove, versionEnvironments, selectedEnvSet,
-    setAffectedActivationKeys, setAffectedHosts, deleteFlow,
+    setAffectedActivationKeys, setAffectedHosts, setAffectedHostgroups, deleteFlow,
     removeDeletionFlow, setRemoveDeletionFlow,
   } = useContext(DeleteContext);
 
@@ -34,7 +34,12 @@ const CVEnvironmentSelectionForm = () => {
     const needsAKReassignment = selectedEnvironments.some(env =>
       (env.activation_key_count || 0) > (env.multi_env_ak_count || 0));
     setAffectedActivationKeys(needsAKReassignment);
-  }, [setAffectedActivationKeys, setAffectedHosts,
+
+    // Hostgroups are always single-CVE, so any hostgroups in selected envs need reassignment
+    const needsHostgroupReassignment = selectedEnvironments.some(env =>
+      (env.hostgroup_count || 0) > 0);
+    setAffectedHostgroups(needsHostgroupReassignment);
+  }, [setAffectedActivationKeys, setAffectedHosts, setAffectedHostgroups,
     versionEnvironments, selectedEnvSet, selectedEnvSet.size]);
 
   const onSelectAll = (event, isSelected) => {
@@ -49,6 +54,7 @@ const CVEnvironmentSelectionForm = () => {
   const columnHeaders = [
     __('Environment'),
     __('Hosts'),
+    __('Host groups'),
     __('Activation keys'),
   ];
 
@@ -102,7 +108,7 @@ const CVEnvironmentSelectionForm = () => {
           <Tbody>
             {versionEnvironments?.map(({
               id, name, activation_key_count: akCount,
-              host_count: hostCount,
+              host_count: hostCount, hostgroup_count: hostgroupCount,
             }, rowIndex) =>
               (
                 <Tr ouiaId={`${name}_${id}`} key={`${name}_${id}`}>
@@ -119,6 +125,7 @@ const CVEnvironmentSelectionForm = () => {
                     {name}
                   </Td>
                   <Td>{hostCount}</Td>
+                  <Td>{hostgroupCount}</Td>
                   <Td>{akCount}</Td>
                 </Tr>
               ))

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

@@ -0,0 +1,149 @@
+import React, { useState, useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { ExpandableSection } from '@patternfly/react-core';
+import { SelectOption } from '@patternfly/react-core/deprecated';
+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 DeleteContext from '../DeleteContext';
+import ContentViewSelect from '../../../../components/ContentViewSelect/ContentViewSelect';
+import { getCVPlaceholderText, shouldDisableCVSelect } from '../../../../components/ContentViewSelect/helpers';
+import AffectedHostgroups from '../affectedHostgroups';
+
+const CVReassignHostgroupsForm = () => {
+  const dispatch = useDispatch();
+  const contentViewsInEnvResponse = useSelector(state => selectContentViews(state, 'hostgroup'));
+  const contentViewsInEnvStatus = useSelector(state => selectContentViewStatus(state, 'hostgroup'));
+  const contentViewsInEnvError = useSelector(state => selectContentViewError(state, 'hostgroup'));
+  const cvInEnvLoading = contentViewsInEnvStatus === STATUS.PENDING;
+  const [cvSelectOpen, setCVSelectOpen] = useState(false);
+  const [cvSelectOptions, setCvSelectionOptions] = useState([]);
+  const [showHostgroups, setShowHostgroups] = useState(false);
+  const {
+    cvId,
+    selectedEnvForHostgroup,
+    setSelectedEnvForHostgroup,
+    currentStep,
+    selectedCVForHostgroups,
+    setSelectedCVNameForHostgroups,
+    setSelectedCVForHostgroups,
+    selectedEnvSet,
+  } = useContext(DeleteContext);
+
+  // Fetch content views for selected environment to reassign hostgroups to
+  useDeepCompareEffect(
+    () => {
+      if (selectedEnvForHostgroup.length) {
+        dispatch(getContentViews({
+          environment_id: selectedEnvForHostgroup[0].id,
+          include_default: true,
+          full_result: true,
+        }, 'hostgroup'));
+      }
+      setCVSelectOpen(false);
+    },
+    [selectedEnvForHostgroup, dispatch, setCVSelectOpen],
+  );
+
+  // Upon receiving CVs in selected env, form select options for the content view drop down
+  useDeepCompareEffect(() => {
+    const { results = {} } = contentViewsInEnvResponse;
+    if (!cvInEnvLoading && results && selectedCVForHostgroups) {
+      const isSelectedCVEligible = results.filter(cv =>
+        cv.id === selectedCVForHostgroups).length > 0;
+      if (!isSelectedCVEligible) {
+        setSelectedCVForHostgroups(null);
+        setSelectedCVNameForHostgroups(null);
+      }
+    }
+    if (!cvInEnvLoading && results && selectedEnvForHostgroup.length) {
+      setCvSelectionOptions(results.map(cv => (
+        <SelectOption
+          key={cv.id}
+          value={cv.id}
+        >
+          {cv.name}
+        </SelectOption>
+      )));
+    }
+  }, [
+    contentViewsInEnvResponse,
+    contentViewsInEnvStatus,
+    currentStep,
+    contentViewsInEnvError,
+    selectedEnvForHostgroup,
+    setSelectedCVForHostgroups,
+    setSelectedCVNameForHostgroups,
+    cvInEnvLoading,
+    selectedCVForHostgroups,
+  ]);
+
+  const fetchSelectedCVName = (id) => {
+    const { results } = contentViewsInEnvResponse ?? { };
+    return results?.filter(cv => cv.id === id)[0]?.name;
+  };
+
+  const onClear = () => {
+    setSelectedCVForHostgroups(null);
+    setSelectedCVNameForHostgroups(null);
+  };
+
+  const onSelect = (event, selection) => {
+    setSelectedCVForHostgroups(selection);
+    setSelectedCVNameForHostgroups(fetchSelectedCVName(selection));
+    setCVSelectOpen(false);
+  };
+
+  const placeholderText = getCVPlaceholderText({
+    contentSourceId: null,
+    environments: selectedEnvForHostgroup,
+    contentViewsStatus: contentViewsInEnvStatus,
+    cvSelectOptions,
+  });
+
+  const disableCVSelect = shouldDisableCVSelect({
+    contentSourceId: null,
+    environments: selectedEnvForHostgroup,
+    contentViewsStatus: contentViewsInEnvStatus,
+    cvSelectOptions,
+  });
+
+  return (
+    <>
+      <EnvironmentPaths
+        userCheckedItems={selectedEnvForHostgroup}
+        setUserCheckedItems={setSelectedEnvForHostgroup}
+        publishing={false}
+        headerText={__('Select lifecycle environment')}
+        multiSelect={false}
+      />
+      <ContentViewSelect
+        onClear={onClear}
+        selections={selectedCVForHostgroups}
+        onSelect={onSelect}
+        isOpen={cvSelectOpen}
+        isDisabled={disableCVSelect}
+        onToggle={isExpanded => setCVSelectOpen(isExpanded)}
+        id="selectCVForHostgroups"
+        ouiaId="selectCVForHostgroups"
+        name="selectCVForHostgroups"
+        aria-label="selectCVForHostgroups"
+        placeholderText={placeholderText}
+      >
+        {cvSelectOptions}
+      </ContentViewSelect>
+      <ExpandableSection
+        toggleText={showHostgroups ? __('Hide host groups') : __('Show host groups')}
+        onToggle={(_event, expanded) => setShowHostgroups(expanded)}
+        isExpanded={showHostgroups}
+      >
+        <AffectedHostgroups cvId={cvId} selectedEnvSet={selectedEnvSet} />
+      </ExpandableSection>
+    </>
+  );
+};
+
+export default CVReassignHostgroupsForm;

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

@@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { STATUS } from 'foremanReact/constants';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { translate as __ } from 'foremanReact/common/I18n';
+import api from 'foremanReact/API';
 import { selectRemoveCVVersionStatus } from '../../../ContentViewDetailSelectors';
 import getContentViewDetails, { removeContentViewVersion } from '../../../ContentViewDetailActions';
 import Loading from '../../../../../../components/Loading';
@@ -15,6 +16,7 @@ const CVVersionDeleteFinish = () => {
     setIsOpen, selectedEnvSet,
     selectedCVForAK, selectedEnvForAK, selectedCVForHosts,
     selectedEnvForHost, affectedActivationKeys, affectedHosts,
+    selectedCVForHostgroups, selectedEnvForHostgroup, affectedHostgroups,
     deleteFlow, removeDeletionFlow,
   } = useContext(DeleteContext);
 
@@ -40,49 +42,69 @@ const CVVersionDeleteFinish = () => {
         versionEnvironments.map(env => env.id) :
         selectedEnv.map(env => env.id);
 
-      let params = {
-        id: cvId,
-        environment_ids: environmentIdParams,
-      };
-
-      if (affectedActivationKeys) {
-        params = {
-          ...params,
-          key_content_view_id: selectedCVForAK,
-          key_environment_id: selectedEnvForAK[0].id,
+      const buildParamsAndDispatch = async () => {
+        let params = {
+          id: cvId,
+          environment_ids: environmentIdParams,
         };
-      }
 
-      if (affectedHosts) {
-        params = {
-          ...params,
-          system_content_view_id: selectedCVForHosts,
-          system_environment_id: selectedEnvForHost[0].id,
-        };
-      }
+        if (affectedActivationKeys) {
+          params = {
+            ...params,
+            key_content_view_id: selectedCVForAK,
+            key_environment_id: selectedEnvForAK[0].id,
+          };
+        }
 
-      if (deleteFlow || removeDeletionFlow) {
-        params = {
-          ...params,
-          content_view_version_ids: [versionIdToRemove],
-        };
-      }
+        if (affectedHosts) {
+          params = {
+            ...params,
+            system_content_view_id: selectedCVForHosts,
+            system_environment_id: selectedEnvForHost[0].id,
+          };
+        }
+
+        if (affectedHostgroups) {
+          // Fetch the CVEnv ID for the selected CV and environment
+          const response = await api.get('/katello/api/v2/content_view_environments', {}, {
+            content_view_id: selectedCVForHostgroups,
+            lifecycle_environment_id: selectedEnvForHostgroup[0].id,
+          });
+          const cvEnvId = response.data?.results?.[0]?.id;
+          if (cvEnvId) {
+            params = {
+              ...params,
+              hostgroup_content_view_environment_id: cvEnvId,
+            };
+          }
+        }
+
+        if (deleteFlow || removeDeletionFlow) {
+          params = {
+            ...params,
+            content_view_version_ids: [versionIdToRemove],
+          };
+        }
+
+        dispatch(removeContentViewVersion(
+          cvId,
+          versionIdToRemove,
+          versionEnvironments,
+          params,
+          () => {
+            dispatch(getContentViewDetails(cvId));
+            if (pathname !== '/versions') push('/versions');
+          },
+        ));
+      };
 
-      dispatch(removeContentViewVersion(
-        cvId,
-        versionIdToRemove,
-        versionEnvironments,
-        params,
-        () => {
-          dispatch(getContentViewDetails(cvId));
-          if (pathname !== '/versions') push('/versions');
-        },
-      ));
+      buildParamsAndDispatch();
     }
-  }, [affectedActivationKeys, affectedHosts, cvId, deleteFlow,
+  }, [affectedActivationKeys, affectedHosts, affectedHostgroups, cvId, deleteFlow,
     dispatch, pathname, push, removeDeletionFlow, removeDispatched,
-    selectedCVForAK, selectedCVForHosts, selectedEnv, selectedEnvForAK,
-    selectedEnvForHost, setIsOpen, versionEnvironments, versionIdToRemove]);
+    selectedCVForAK, selectedCVForHosts, selectedCVForHostgroups,
+    selectedEnv, selectedEnvForAK, selectedEnvForHost, selectedEnvForHostgroup,
+    setIsOpen, versionEnvironments, versionIdToRemove]);
 
   return <Loading loadingText={__('Please wait while the task starts..')} />;
 };

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

@@ -9,15 +9,18 @@ import DeleteContext from '../DeleteContext';
 import WizardHeader from '../../../../components/WizardHeader';
 import AffectedHosts from '../affectedHosts';
 import AffectedActivationKeys from '../affectedActivationKeys';
+import AffectedHostgroups from '../affectedHostgroups';
 
 const CVVersionRemoveReview = () => {
   const [alertDismissed, setAlertDismissed] = useState(false);
   const [showHosts, setShowHosts] = useState(false);
   const [showAKs, setShowAKs] = useState(false);
+  const [showHostgroups, setShowHostgroups] = useState(false);
   const {
     cvId, versionEnvironments, versionIdToRemove, versionNameToRemove, selectedEnvSet,
     selectedEnvForAK, selectedCVNameForAK, selectedCVNameForHosts,
-    selectedEnvForHost, deleteFlow, removeDeletionFlow,
+    selectedEnvForHost, selectedCVNameForHostgroups, selectedEnvForHostgroup,
+    deleteFlow, removeDeletionFlow, affectedHostgroups,
   } = useContext(DeleteContext);
   const cvVersions = useSelector(state => selectCVVersions(state, cvId));
   const versionDeleteInfo = __(`Version ${versionNameToRemove} will be deleted from all environments. It will no longer be available for promotion.`);
@@ -43,6 +46,9 @@ const CVVersionRemoveReview = () => {
     sum + (env.multi_env_ak_count || 0), 0);
   const singleCVActivationKeysCount = akCount - multiCVActivationKeysCount;
 
+  const hostgroupCount = selectedEnvs.reduce((sum, env) =>
+    sum + (env.hostgroup_count || 0), 0);
+
   return (
     <>
       <WizardHeader title={__('Review details')} />
@@ -125,7 +131,7 @@ const CVVersionRemoveReview = () => {
             </Flex>
           )}
           <ExpandableSection
-            toggleText={showHosts ? 'Hide hosts' : 'Show hosts'}
+            toggleText={showHosts ? __('Hide hosts') : __('Show hosts')}
             onToggle={() => setShowHosts(prev => !prev)}
             isExpanded={showHosts}
           >
@@ -195,7 +201,7 @@ const CVVersionRemoveReview = () => {
             </Flex>
           )}
           <ExpandableSection
-            toggleText={showAKs ? 'Hide activation keys' : 'Show activation keys'}
+            toggleText={showAKs ? __('Hide activation keys') : __('Show activation keys')}
             onToggle={() => setShowAKs(prev => !prev)}
             isExpanded={showAKs}
           >
@@ -209,6 +215,40 @@ const CVVersionRemoveReview = () => {
             />
           </ExpandableSection>
         </>}
+      {affectedHostgroups &&
+        <>
+          <h3>{__('Host groups')}</h3>
+          <Flex>
+            <FlexItem><ExclamationTriangleIcon /></FlexItem>
+            <FlexItem data-testid="hostgroups-remove">
+              <FormattedMessage
+                id="hostgroups-remove"
+                defaultMessage="{count, plural, one {# {singular}} other {# {plural}}} will be moved to content view {cvName} in {envName}."
+                values={{
+                  count: hostgroupCount,
+                  singular: __('host group'),
+                  plural: __('host groups'),
+                  cvName: selectedCVNameForHostgroups,
+                  envName: selectedEnvForHostgroup[0] && (
+                    <Label color="purple" href={`/lifecycle_environments/${selectedEnvForHostgroup[0].id}`}>
+                      {selectedEnvForHostgroup[0].name}
+                    </Label>
+                  ),
+                }}
+              />
+            </FlexItem>
+          </Flex>
+          <ExpandableSection
+            toggleText={showHostgroups ? __('Hide host groups') : __('Show host groups')}
+            onToggle={() => setShowHostgroups(prev => !prev)}
+            isExpanded={showHostgroups}
+          >
+            <AffectedHostgroups
+              cvId={cvId}
+              selectedEnvSet={selectedEnvSet}
+            />
+          </ExpandableSection>
+        </>}
     </>
   );
 };