katello 4.12.1 → 4.13.0

data/package.json

@@ -51,7 +51,6 @@
     "angular": "1.8.2",
     "bootstrap-select": "1.13.18",
     "ngreact": "^0.5.0",
-    "query-string": "^6.1.0",
     "react-bootstrap": "^0.32.1",
     "use-deep-compare-effect": "^1.6.1"
   }

data/webpack/ForemanColumnExtensions/index.js

@@ -0,0 +1,129 @@
+/* eslint-disable no-param-reassign */
+import React from 'react';
+import {
+  BugIcon,
+  SecurityIcon,
+  EnhancementIcon,
+  PackageIcon,
+} from '@patternfly/react-icons';
+import { Link } from 'react-router-dom';
+import { Flex, FlexItem } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
+
+const hostsIndexColumnExtensions = [
+  {
+    columnName: 'rhel_lifecycle_status',
+    title: __('RHEL Lifecycle status'),
+    wrapper: (hostDetails) => {
+      const rhelLifecycle = hostDetails?.rhel_lifecycle_status_label;
+      return rhelLifecycle || '—';
+    },
+    weight: 2000,
+    isSorted: true,
+  },
+  {
+    columnName: 'installable_updates',
+    title: __('Installable updates'),
+    wrapper: (hostDetails) => {
+      const errataCounts = hostDetails?.content_facet_attributes?.errata_counts;
+      const registered = !!hostDetails?.subscription_facet_attributes?.uuid;
+      const { security, bugfix, enhancement } = errataCounts ?? {};
+      const upgradableRpmCount = hostDetails?.content_facet_attributes?.upgradable_package_count;
+      if (!registered) return '—';
+      const hostErrataUrl = type => `hosts/${hostDetails?.name}#/Content/errata?type=${type}&show=installable`;
+      return (
+        <Flex alignContent={{ default: 'alignContentSpaceBetween' }}>
+          {security !== undefined &&
+            <FlexItem>
+              <SecurityIcon color="#0066cc" />
+              <Link to={hostErrataUrl('security')}>{security}</Link>
+            </FlexItem>
+          }
+          {bugfix !== undefined &&
+            <FlexItem>
+              <BugIcon color="#8bc1f7" />
+              <Link to={hostErrataUrl('bugfix')}>{bugfix}</Link>
+            </FlexItem>
+          }
+          {enhancement !== undefined &&
+            <FlexItem>
+              <EnhancementIcon color="#002f5d" />
+              <Link to={hostErrataUrl('enhancement')}>{enhancement}</Link>
+            </FlexItem>
+          }
+          {upgradableRpmCount !== undefined &&
+            <FlexItem>
+              <PackageIcon />
+              <Link to={`hosts/${hostDetails?.name}#/Content/Packages?status=Upgradable`}>{upgradableRpmCount}</Link>
+            </FlexItem>
+          }
+        </Flex>
+      );
+    },
+    weight: 2100,
+    isSorted: false,
+  },
+  {
+    columnName: 'last_checkin',
+    title: __('Last seen'),
+    wrapper: (hostDetails) => {
+      const lastCheckin =
+        hostDetails?.subscription_facet_attributes?.last_checkin;
+      return <RelativeDateTime defaultValue="—" date={lastCheckin} />;
+    },
+    weight: 2200,
+    isSorted: true,
+  },
+  {
+    columnName: 'lifecycle_environment',
+    title: __('Lifecycle environment'),
+    wrapper: (hostDetails) => {
+      const lifecycleEnvironment =
+        hostDetails?.content_facet_attributes?.lifecycle_environment?.name;
+      return lifecycleEnvironment || '—';
+    },
+    weight: 2300,
+    isSorted: true,
+  },
+  {
+    columnName: 'content_view',
+    title: __('Content view'),
+    wrapper: (hostDetails) => {
+      const contentView =
+        hostDetails?.content_facet_attributes?.content_view?.name;
+      return contentView || '—';
+    },
+    weight: 2400,
+    isSorted: true,
+  },
+  {
+    columnName: 'content_source',
+    title: __('Content source'),
+    wrapper: (hostDetails) => {
+      const contentSource =
+        hostDetails?.content_facet_attributes?.content_source_name;
+      return contentSource || '—';
+    },
+    weight: 2500,
+    isSorted: false,
+  },
+  {
+    columnName: 'registered_at',
+    title: __('Registered at'),
+    wrapper: (hostDetails) => {
+      const registeredAt = hostDetails?.subscription_facet_attributes?.registered_at;
+      return <RelativeDateTime defaultValue="—" date={registeredAt} />;
+    },
+    weight: 2600,
+    isSorted: true,
+  },
+];
+
+hostsIndexColumnExtensions.forEach((column) => {
+  column.tableName = 'hosts';
+  column.categoryName = 'Content';
+  column.categoryKey = 'content';
+});
+
+export default hostsIndexColumnExtensions;

data/webpack/components/Content/ContentTable.js

@@ -20,7 +20,6 @@ const ContentTable = ({ content, tableSchema, onPaginationChange }) => {
       loadingText={__('Loading')}
     >
       <Table
-        ouiaId="content-table-table"
         columns={tableSchema}
         rows={results}
         pagination={pagination}

data/webpack/components/Content/__tests__/__snapshots__/ContentTable.test.js.snap

@@ -15,7 +15,6 @@ exports[`Content Table should render and contain appropriate components 1`] = `
     }
     itemCount={2}
     onPaginationChange={[Function]}
-    ouiaId="content-table-table"
     pagination={Object {}}
     rows={
       Array [

data/webpack/components/Table/TableWrapper.js

@@ -36,10 +36,12 @@ const TableWrapper = ({
   selectAll,
   selectAllMode,
   selectNone,
+  selectDefault,
   selectPage,
   areAllRowsOnPageSelected,
   areAllRowsSelected,
   selectedCount,
+  selectedDefaultCount,
   selectedResults,
   clearSelectedResults,
   emptySearchBody,
@@ -49,6 +51,8 @@ const TableWrapper = ({
   nodesBelowSearch,
   bookmarkController,
   readOnlyBookmarks,
+  inclusionSet,
+  exclusionSet,
   ...allTableProps
 }) => {
   const dispatch = useDispatch();
@@ -182,7 +186,9 @@ const TableWrapper = ({
                 selectAll,
                 selectPage,
                 selectNone,
+                selectDefault,
                 selectedCount,
+                selectedDefaultCount,
                 pageRowCount,
               }
               }
@@ -298,11 +304,13 @@ TableWrapper.propTypes = {
   ])),
   displaySelectAllCheckbox: PropTypes.bool,
   selectedCount: PropTypes.number,
+  selectedDefaultCount: PropTypes.number,
   selectedResults: PropTypes.arrayOf(PropTypes.shape({})),
   clearSelectedResults: PropTypes.func,
   selectAll: PropTypes.func,
   selectAllMode: PropTypes.bool,
   selectNone: PropTypes.func,
+  selectDefault: PropTypes.func,
   selectPage: PropTypes.func,
   areAllRowsOnPageSelected: PropTypes.func,
   areAllRowsSelected: PropTypes.func,
@@ -314,6 +322,8 @@ TableWrapper.propTypes = {
   bookmarkController: PropTypes.string,
   readOnlyBookmarks: PropTypes.bool,
   resetFilters: PropTypes.func,
+  inclusionSet: PropTypes.oneOfType([PropTypes.array, PropTypes.element, PropTypes.object]),
+  exclusionSet: PropTypes.oneOfType([PropTypes.array, PropTypes.element, PropTypes.object]),
 };
 
 TableWrapper.defaultProps = {
@@ -329,11 +339,13 @@ TableWrapper.defaultProps = {
   toggleGroup: null,
   displaySelectAllCheckbox: false,
   selectedCount: 0,
+  selectedDefaultCount: 0,
   selectedResults: [],
   clearSelectedResults: noop,
   selectAll: undefined,
   selectAllMode: false,
   selectNone: undefined,
+  selectDefault: undefined,
   selectPage: undefined,
   areAllRowsOnPageSelected: noop,
   areAllRowsSelected: noop,
@@ -346,6 +358,8 @@ TableWrapper.defaultProps = {
   readOnlyBookmarks: false,
   resetFilters: undefined,
   autocompleteQueryParams: undefined,
+  inclusionSet: new Set([]),
+  exclusionSet: new Set([]),
 };
 
 export default TableWrapper;

data/webpack/components/extensions/HostDetails/ActionsBar/index.js

@@ -65,7 +65,7 @@ const HostActionsBar = () => {
       <DropdownItem
         ouiaId="katello-change-host-content-source"
         key="katello-change-host-content-source"
-        href={foremanUrl(`/change_host_content_source?host_id=${hostDetails?.id}`)}
+        href={foremanUrl(`/change_host_content_source?host_id=${hostDetails?.id}&initialContentSourceId=${hostDetails?.content_facet_attributes?.content_source_id}`)}
         icon={<CubeIcon />}
       >
         {__('Change content source')}

data/webpack/components/extensions/Hosts/ActionsBar/index.js

@@ -1,8 +1,11 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { DropdownItem } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import { ForemanHostsIndexActionsBarContext } from 'foremanReact/components/HostsIndex';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+import { addModal } from 'foremanReact/components/ForemanModal/ForemanModalActions';
 
 const HostActionsBar = () => {
   const {
@@ -11,6 +14,14 @@ const HostActionsBar = () => {
     selectAllMode,
   } = useContext(ForemanHostsIndexActionsBarContext);
 
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(addModal({
+      id: 'bulk-change-cv-modal',
+    }));
+  }, [dispatch]);
+  const { setModalOpen } = useForemanModal({ id: 'bulk-change-cv-modal' });
+
   let href = '';
   if (selectAllMode) {
     const query = fetchBulkParams({ selectAllQuery: 'created_at < "1 second ago"' });
@@ -29,6 +40,14 @@ const HostActionsBar = () => {
       >
         {__('Change content source')}
       </DropdownItem>
+      <DropdownItem
+        ouiaId="bulk-change-cv-dropdown-item"
+        key="bulk-change-cv-dropdown-item"
+        onClick={setModalOpen}
+        isDisabled={selectedCount === 0}
+      >
+        {__('Change content view environments')}
+      </DropdownItem>
     </>
   );
 };

data/webpack/components/extensions/Hosts/BulkActions/BulkChangeHostCVModal/BulkChangeHostCVModal.js

@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { Modal, Button, Alert, TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { selectAPIStatus } from 'foremanReact/redux/API/APISelectors';
+import { ENVIRONMENT_PATHS_KEY } from '../../../../../scenes/ContentViews/components/EnvironmentPaths/EnvironmentPathConstants';
+import EnvironmentPaths from '../../../../../scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths';
+import ContentViewSelect from '../../../../../scenes/ContentViews/components/ContentViewSelect/ContentViewSelect';
+import ContentViewSelectOption from '../../../../../scenes/ContentViews/components/ContentViewSelect/ContentViewSelectOption';
+import api from '../../../../../services/api';
+import getContentViews from '../../../../../scenes/ContentViews/ContentViewsActions';
+import { selectContentViews, selectContentViewStatus } from '../../../../../scenes/ContentViews/ContentViewSelectors';
+import { bulkUpdateHostContentViewAndEnvironment } from './actions';
+import { getCVPlaceholderText } from '../../../../../scenes/ContentViews/components/ContentViewSelect/helpers';
+import HOST_CV_AND_ENV_KEY from '../../../HostDetails/Cards/ContentViewDetailsCard/HostContentViewConstants';
+
+const ENV_PATH_OPTIONS = { key: ENVIRONMENT_PATHS_KEY };
+
+const BulkChangeHostCVModal = ({
+  isOpen,
+  closeModal,
+  selectedCount,
+  orgId,
+  fetchBulkParams,
+}) => {
+  const [selectedLifecycleEnv, setSelectedLifecycleEnv]
+    = useState([]);
+
+  const [selectedContentView, setSelectedContentView] = useState(null);
+  const [cvSelectOpen, setCVSelectOpen] = useState(false);
+  const dispatch = useDispatch();
+  const contentViewsInEnvResponse = useSelector(state => selectContentViews(state, '_FOR_DEFAULT_ENV'));
+  const { results } = contentViewsInEnvResponse;
+  const contentViewsInEnvStatus = useSelector(state => selectContentViewStatus(state, '_FOR_DEFAULT_ENV'));
+  const hostUpdateStatus = useSelector(state => selectAPIStatus(state, HOST_CV_AND_ENV_KEY));
+  const pathsUrl = `/organizations/${orgId}/environments/paths?permission_type=promotable`;
+  useAPI( // No TableWrapper here, so we can useAPI from Foreman
+    'get',
+    api.getApiUrl(pathsUrl),
+    ENV_PATH_OPTIONS,
+  );
+  const selectedContentViewId = results?.find(cv => cv.name === selectedContentView)?.id;
+
+  const handleModalClose = () => {
+    setCVSelectOpen(false);
+    setSelectedContentView(null);
+    setSelectedLifecycleEnv([]);
+    closeModal();
+  };
+
+  const selectedEnv = selectedLifecycleEnv?.[0];
+  const selectedEnvId = selectedEnv?.id;
+
+  const handleCVSelect = (event, selection) => {
+    setSelectedContentView(selection);
+    setCVSelectOpen(false);
+  };
+
+  const handleEnvSelect = (selection) => {
+    dispatch(getContentViews({
+      environment_id: selection[0].id,
+      include_default: true,
+      full_result: true,
+      order: 'default DESC', // show Default Organization View first
+    }, '_FOR_DEFAULT_ENV'));
+    setSelectedContentView(null);
+    setSelectedLifecycleEnv(selection);
+  };
+  const { results: contentViewsInEnv = [] } = contentViewsInEnvResponse;
+  const canSave = !!(selectedContentView && selectedLifecycleEnv.length);
+
+  const handleSave = () => {
+    const requestBody = {
+      content_view_id: selectedContentViewId,
+      environment_id: selectedEnvId,
+      organization_id: orgId,
+      included: {
+        search: fetchBulkParams(),
+      },
+    };
+    dispatch(bulkUpdateHostContentViewAndEnvironment(
+      requestBody, fetchBulkParams(),
+      handleModalClose, handleModalClose,
+    ));
+  };
+
+  const cvPlaceholderText = getCVPlaceholderText({
+    environments: selectedLifecycleEnv,
+    cvSelectOptions: contentViewsInEnv,
+    contentViewsStatus: contentViewsInEnvStatus,
+  });
+
+  const stillLoading =
+    (contentViewsInEnvStatus === STATUS.PENDING || hostUpdateStatus === STATUS.PENDING);
+  const noContentViewsAvailable =
+    (contentViewsInEnv.length === 0 || selectedLifecycleEnv.length === 0);
+
+  const modalActions = ([
+    <Button
+      key="add"
+      ouiaId="bulk-change-host-cv-modal-add-button"
+      variant="primary"
+      onClick={handleSave}
+      isDisabled={!canSave || hostUpdateStatus === STATUS.PENDING}
+      isLoading={hostUpdateStatus === STATUS.PENDING}
+    >
+      {__('Save')}
+    </Button>,
+    <Button key="cancel" ouiaId="change-host-cv-modal-cancel-button" variant="link" onClick={handleModalClose}>
+      Cancel
+    </Button>,
+  ]);
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleModalClose}
+      onEscapePress={handleModalClose}
+      title={__('Edit content view environments')}
+      width="50%"
+      position="top"
+      actions={modalActions}
+      id="bulk-change-host-cv-modal"
+      key="bulk-change-host-cv-modal"
+      ouiaId="bulk-change-host-cv-modal"
+    >
+      <TextContent>
+        <Text
+          ouiaId="bulk-change-cv-options-description"
+        >
+          <FormattedMessage
+            defaultMessage={__('This will update the content view environments for {hosts}.')}
+            values={{
+              hosts: (
+                <strong>
+                  <FormattedMessage
+                    defaultMessage="{count, plural, one {# {singular}} other {# {plural}}}"
+                    values={{
+                      count: selectedCount,
+                      singular: __('selected host'),
+                      plural: __('selected hosts'),
+                    }}
+                    id="ccs-options-i18n"
+                  />
+                </strong>
+              ),
+            }}
+            id="bulk-change-cv-options-description-i18n"
+          />
+        </Text>
+      </TextContent>
+      {contentViewsInEnvStatus === STATUS.RESOLVED &&
+        !!selectedLifecycleEnv.length && contentViewsInEnv.length === 0 &&
+        <Alert
+          ouiaId="no-cv-alert"
+          variant="warning"
+          isInline
+          title={__('No content views available for the selected environment')}
+          style={{ marginBottom: '1rem' }}
+        >
+          <a href="/content_views">{__('View the Content Views page')}</a>
+          {__(' to manage and promote content views, or select a different environment.')}
+        </Alert>
+      }
+      <EnvironmentPaths
+        userCheckedItems={selectedLifecycleEnv}
+        setUserCheckedItems={handleEnvSelect}
+        publishing={false}
+        multiSelect={false}
+        headerText={__('Select environment')}
+        isDisabled={hostUpdateStatus === STATUS.PENDING}
+      />
+      <ContentViewSelect
+        selections={selectedContentView}
+        onClear={() => setSelectedContentView(null)}
+        onSelect={handleCVSelect}
+        isOpen={cvSelectOpen}
+        isDisabled={stillLoading || noContentViewsAvailable}
+        onToggle={isExpanded => setCVSelectOpen(isExpanded)}
+        placeholderText={cvPlaceholderText}
+      >
+        {(contentViewsInEnv.length !== 0 && selectedLifecycleEnv.length !== 0) &&
+            contentViewsInEnv?.map(cv => (
+              <ContentViewSelectOption
+                key={cv.id}
+                value={cv.name}
+                cv={cv}
+                env={selectedLifecycleEnv[0]}
+              />
+            ))}
+      </ContentViewSelect>
+      <hr />
+      <TextContent>
+        <Text component={TextVariants.small} ouiaId="profile-upload-reminder-text">
+          {__('Errata and package information will be updated at the next host check-in or package action.')}
+        </Text>
+      </TextContent>
+      <hr />
+    </Modal>
+  );
+};
+
+BulkChangeHostCVModal.propTypes = {
+  isOpen: PropTypes.bool,
+  closeModal: PropTypes.func,
+  selectedCount: PropTypes.number.isRequired,
+  orgId: PropTypes.number.isRequired,
+  fetchBulkParams: PropTypes.func.isRequired,
+};
+
+BulkChangeHostCVModal.defaultProps = {
+  isOpen: false,
+  closeModal: () => {},
+};
+
+
+export default BulkChangeHostCVModal;

data/webpack/components/extensions/Hosts/BulkActions/BulkChangeHostCVModal/actions.js

@@ -0,0 +1,23 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+import { API_OPERATIONS, put } from 'foremanReact/redux/API';
+import { errorToast, renderTaskStartedToast } from '../../../../../scenes/Tasks/helpers';
+import { foremanApi } from '../../../../../services/api';
+import HOST_CV_AND_ENV_KEY from '../../../HostDetails/Cards/ContentViewDetailsCard/HostContentViewConstants';
+
+export const bulkUpdateHostContentViewAndEnvironment =
+  (params, bulkParams, handleSuccess, handleError) => put({
+    type: API_OPERATIONS.PUT,
+    key: HOST_CV_AND_ENV_KEY,
+    url: foremanApi.getApiUrl('/hosts/bulk/environment_content_view'),
+    ...bulkParams,
+    successToast: () => __('Host content view environments updating.'),
+    handleSuccess: (response) => {
+      if (handleSuccess) handleSuccess(response);
+      return renderTaskStartedToast(response.data);
+    },
+    handleError,
+    errorToast,
+    params,
+  });
+
+export default bulkUpdateHostContentViewAndEnvironment;

data/webpack/components/extensions/Hosts/BulkActions/BulkChangeHostCVModal/index.js

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import { useForemanOrganization } from 'foremanReact/Root/Context/ForemanContext';
+import { ForemanActionsBarContext } from 'foremanReact/components/HostDetails/ActionsBar';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+import BulkChangeHostCVModal from './BulkChangeHostCVModal';
+
+const BulkChangeHostCVModalScene = () => {
+  const org = useForemanOrganization();
+  const { selectedCount, fetchBulkParams } = useContext(ForemanActionsBarContext);
+  const { modalOpen, setModalClosed } = useForemanModal({ id: 'bulk-change-cv-modal' });
+
+  return (
+    <BulkChangeHostCVModal
+      key="bulk-change-cv-modal"
+      selectedCount={selectedCount}
+      fetchBulkParams={fetchBulkParams}
+      isOpen={modalOpen}
+      closeModal={setModalClosed}
+      orgId={org?.id}
+    />
+
+  );
+};
+
+export default BulkChangeHostCVModalScene;

data/webpack/components/extensions/Hosts/BulkActions/__tests__/bulkChangeHostCVModal.test.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, act } from 'react-testing-lib-wrapper';
+import userEvent from '@testing-library/user-event';
+import BulkChangeHostCVModal from '../BulkChangeHostCVModal/BulkChangeHostCVModal.js';
+import mockEnvPaths from '../../../HostDetails/Cards/ContentViewDetailsCard/__tests__/envPaths.fixtures.json';
+import mockContentViews from '../../../HostDetails/Cards/ContentViewDetailsCard/__tests__/contentViews.fixtures.json';
+import HOST_CV_AND_ENV_KEY from '../../../HostDetails/Cards/ContentViewDetailsCard/HostContentViewConstants';
+import { assertNockRequest, nockInstance } from '../../../../../test-utils/nockWrapper';
+import katelloApi from '../../../../../services/api';
+
+const contentViews = katelloApi.getApiUrl('/content_views');
+const renderOptions = () => ({
+  apiNamespace: HOST_CV_AND_ENV_KEY,
+  initialState: {
+    API: {
+      HOST_DETAILS: {
+        response: {
+          id: 1,
+          name: 'test-host',
+          content_facet_attributes: {
+            content_view_id: 1,
+            lifecycle_environment_id: 1,
+          },
+          organization_id: 1,
+        },
+        status: 'RESOLVED',
+      },
+      ENVIRONMENT_PATHS: {
+        response: mockEnvPaths,
+        status: 'RESOLVED',
+      },
+    },
+  },
+});
+
+let firstEnvPath;
+let firstCV;
+let secondCV;
+let firstEnv;
+
+const cvQuery = {
+  organization_id: 1,
+  include_permissions: true,
+  include_default: true,
+  environment_id: 1,
+  full_result: true,
+  order: 'default DESC',
+};
+
+beforeEach(() => {
+  const { results } = mockEnvPaths;
+  [firstEnvPath] = results;
+  const { environments: envResults } = firstEnvPath;
+  [firstEnv] = envResults;
+  const { results: cvResults } = mockContentViews;
+  [firstCV, secondCV] = cvResults;
+});
+
+jest.mock('foremanReact/common/hooks/API/APIHooks', () => ({
+  useAPI: jest.fn(),
+}));
+
+test('Displays environment paths', async (done) => {
+  const jsx = (
+    <BulkChangeHostCVModal
+      isOpen
+      closeModal={jest.fn()}
+      selectedCount={1}
+      fetchBulkParams={() => 'id ^ 1'}
+      orgId={1}
+    />
+  );
+  const { getAllByText }
+     = renderWithRedux(jsx, renderOptions());
+
+  await patientlyWaitFor(() =>
+    expect(getAllByText(firstEnv.name)[0]).toBeInTheDocument());
+  done();
+});
+
+test('Select an env > call CV API > select a CV > Save button is enabled', async (done) => {
+  const contentViewsScope = nockInstance
+    .get(contentViews)
+    .query(cvQuery)
+    .reply(200, mockContentViews);
+
+  const jsx = (
+    <BulkChangeHostCVModal
+      isOpen
+      closeModal={jest.fn()}
+      selectedCount={1}
+      fetchBulkParams={() => 'id ^ 1'}
+      orgId={1}
+    />
+  );
+  const {
+    getAllByText, getByText,
+    findByPlaceholderText, getAllByRole,
+  } = renderWithRedux(jsx, renderOptions());
+
+  await patientlyWaitFor(() => {
+    const envLabel = getAllByText(firstEnv.name)[0];
+    expect(envLabel).toBeInTheDocument();
+  });
+
+  const envRadio = getAllByRole('radio', { name: firstEnv.name })[0];
+  expect(envRadio).toBeInTheDocument();
+
+  await act(async () => {
+    userEvent.click(envRadio); // Select the Library environment
+
+    const cvDropdown = await findByPlaceholderText('Select a content view');
+    expect(cvDropdown).toBeInTheDocument();
+
+    userEvent.click(cvDropdown); // Open the CV dropdown
+
+
+    [firstCV, secondCV].forEach((cv) => {
+      expect(getByText(cv.name)).toBeInTheDocument(); // the content view names should be showing
+    });
+
+
+    userEvent.click(getByText(secondCV.name)); // Select the second content view
+  });
+
+  // find the Save button and assert that it is enabled
+  const saveButton = getAllByRole('button', { name: 'Save' })[0];
+  expect(saveButton).toBeInTheDocument();
+  expect(saveButton).toHaveAttribute('aria-disabled', 'false');
+
+  assertNockRequest(contentViewsScope, done);
+  act(done);
+});