katello 4.4.2.2 → 4.5.0.rc1

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsModal.js

@@ -0,0 +1,227 @@
+import React, { useState } from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+import { useSelector, useDispatch } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { Thead, Th, Tbody, Tr, Td, TableVariant } from '@patternfly/react-table';
+import { HOST_DETAILS_KEY } from 'foremanReact/components/HostDetails/consts';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import PropTypes from 'prop-types';
+import TableWrapper from '../../../../Table/TableWrapper';
+import { useSelectionSet } from '../../../../Table/TableHooks';
+import { selectAvailableHostCollections, selectAvailableHostCollectionsStatus, selectRemovableHostCollections, selectRemovableHostCollectionsStatus } from './HostCollectionsSelectors';
+import hostIdNotReady from '../../HostDetailsActions';
+import { alterHostCollections, getHostAvailableHostCollections, getHostRemovableHostCollections } from './HostCollectionsActions';
+import { MODAL_TYPES } from './HostCollectionsConstants';
+import { truncate } from '../../../../../utils/helpers';
+
+export const HostCollectionsAddModal =
+  props => <HostCollectionsModal modalType={MODAL_TYPES.ADD} {...props} />;
+export const HostCollectionsRemoveModal =
+  props => <HostCollectionsModal modalType={MODAL_TYPES.REMOVE} {...props} />;
+
+export const HostCollectionsModal = ({
+  isOpen, closeModal, hostId, hostName, modalType = MODAL_TYPES.ADD, existingHostCollectionIds,
+}) => {
+  const emptyContentTitle = __('No host collections');
+  const emptyContentBody = __('There are no host collections available to add.');
+  const emptySearchTitle = __('No matching host collections found');
+  const emptySearchBody = __('Try changing your search settings.');
+  const errorSearchTitle = __('Problem searching host collections');
+
+  const columnHeaders = ['', __('Host collection'), __('Capacity'), __('Description')];
+  const adding = (modalType === MODAL_TYPES.ADD);
+
+  const response = useSelector(state =>
+    (adding ? selectAvailableHostCollections(state) : selectRemovableHostCollections(state))) || {};
+  const status = useSelector(state => (adding ?
+    selectAvailableHostCollectionsStatus(state) :
+    selectRemovableHostCollectionsStatus(state))) || '';
+  const dispatch = useDispatch();
+  const { results, error: errorSearchBody, ...metadata } = response;
+  const [suppressFirstFetch, setSuppressFirstFetch] = useState(false);
+  const [searchQuery, updateSearchQuery] = useState('');
+
+  const hostLimitNotExceeded = (hc) => {
+    const { totalHosts, maxHosts, unlimitedHosts } = propsToCamelCase(hc);
+    if (unlimitedHosts) return true;
+    return totalHosts < maxHosts;
+  };
+
+  const hostLimitExceeded = hc => !hostLimitNotExceeded(hc);
+
+  const {
+    isSelected,
+    selectOne,
+    selectNone,
+    fetchBulkParams,
+    isSelectable,
+    selectedCount,
+    selectedResults,
+    selectionSet,
+    ...selectAll
+  } = useSelectionSet({
+    results,
+    metadata,
+    isSelectable: adding ? hc => hostLimitNotExceeded(hc) : () => true,
+  });
+
+  const fetchItems = (params) => {
+    if (!hostId) return hostIdNotReady;
+
+    if (results?.length > 0 && suppressFirstFetch) {
+      // If the modal has already been opened, no need to re-fetch the data that's already present
+      setSuppressFirstFetch(false);
+      return { type: 'HOST_COLLECTIONS_NOOP' };
+    }
+    switch (modalType) {
+    case MODAL_TYPES.ADD:
+      return getHostAvailableHostCollections({ ...params, host_id: hostId });
+    case MODAL_TYPES.REMOVE:
+      return getHostRemovableHostCollections({ ...params, host_id: hostId });
+    default:
+      return { type: 'HOST_COLLECTIONS_NOOP' };
+    }
+  };
+
+  const handleModalCancel = () => {
+    setSuppressFirstFetch(true);
+    closeModal();
+  };
+
+  const newHostCollectionIds = (hcIds) => {
+    const uniq = ids => [...new Set(ids)];
+    switch (modalType) {
+    case MODAL_TYPES.ADD:
+      return uniq([...hcIds, ...selectionSet]);
+    case MODAL_TYPES.REMOVE:
+      return uniq(hcIds.filter(id => !selectionSet.has(id)));
+    default:
+      return uniq(hcIds);
+    }
+  };
+
+  const refreshHostDetails = () => dispatch({
+    type: 'API_GET',
+    payload: {
+      key: HOST_DETAILS_KEY,
+      url: `/api/hosts/${hostName}`,
+    },
+  });
+
+  const handleModalAction = () => {
+    const newIds = newHostCollectionIds(existingHostCollectionIds);
+    dispatch(alterHostCollections(hostId, { host_collection_ids: newIds }, refreshHostDetails));
+    selectNone();
+    closeModal();
+  };
+
+  const modalActions = ([
+    <Button key="add" variant="primary" onClick={handleModalAction} isDisabled={!selectedCount}>
+      {adding ? __('Add') : __('Remove')}
+    </Button>,
+    <Button key="cancel" variant="link" onClick={handleModalCancel}>
+      Cancel
+    </Button>,
+  ]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={closeModal}
+      title={adding ? __('Add host to host collections') : __('Remove host from host collections')}
+      width="50%"
+      position="top"
+      actions={modalActions}
+      id={adding ? 'add-host-to-host-collections-modal' : 'remove-host-from-host-collections-modal'}
+    >
+      <FormattedMessage
+        className="host-collections-modal-blurb"
+        id={adding ? 'add-host-to-host-collections-modal-blurb' : 'remove-host-from-host-collections-modal-blurb'}
+        defaultMessage={adding ? __('Select host collection(s) to associate with host {hostName}.') : __('Select host collection(s) to remove from host {hostName}.')}
+        values={{
+          hostName: <strong>{hostName}</strong>,
+        }}
+      />
+      <TableWrapper
+        {...{
+          metadata,
+          emptyContentTitle,
+          emptyContentBody,
+          emptySearchTitle,
+          emptySearchBody,
+          errorSearchTitle,
+          errorSearchBody,
+          status,
+          searchQuery,
+          updateSearchQuery,
+          selectedCount,
+          selectNone,
+        }
+        }
+        ouiaId="host-collections-table"
+        additionalListeners={[hostId, modalType, existingHostCollectionIds.join(',')]}
+        fetchItems={fetchItems}
+        searchPlaceholderText={__('Search host collections')}
+        autocompleteEndpoint="/host_collections/auto_complete_search"
+        variant={TableVariant.compact}
+        {...selectAll}
+        displaySelectAllCheckbox={results?.length > 0}
+      >
+        <Thead>
+          <Tr>
+            {columnHeaders.map(col =>
+              <Th key={col}>{col}</Th>)}
+            <Th />
+          </Tr>
+        </Thead>
+        <Tbody>
+          {results?.map((hostCollection, rowIndex) => {
+            const {
+              id, name, description, maxHosts, unlimitedHosts, totalHosts,
+            } = propsToCamelCase(hostCollection);
+            const isDisabled = (adding && hostLimitExceeded(hostCollection));
+            return (
+              <Tr key={id}>
+                <Td
+                  select={{
+                    disable: isDisabled,
+                    isSelected: isSelected(id),
+                    onSelect: (_event, selected) => selectOne(selected, id, hostCollection),
+                    rowIndex,
+                    variant: 'checkbox',
+                  }}
+                />
+                <Td>
+                  <a href={urlBuilder(`host_collections/${id}`, '')}>{name}</a>
+                </Td>
+                <Td>
+                  {totalHosts}/{unlimitedHosts ? __('unlimited') : maxHosts}
+                </Td>
+                <Td>{description && truncate(description)}</Td>
+              </Tr>
+            );
+          })
+          }
+        </Tbody>
+      </TableWrapper>
+    </Modal>
+  );
+};
+
+HostCollectionsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  hostId: PropTypes.number.isRequired,
+  hostName: PropTypes.string.isRequired,
+  showKatelloAgent: PropTypes.bool,
+  modalType: PropTypes.string.isRequired,
+  existingHostCollectionIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+};
+
+HostCollectionsModal.defaultProps = {
+  showKatelloAgent: false,
+};
+
+export default HostCollectionsModal;

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsSelectors.js

@@ -0,0 +1,18 @@
+import {
+  selectAPIStatus,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import { AVAILABLE_HOST_COLLECTIONS_KEY, REMOVABLE_HOST_COLLECTIONS_KEY } from './HostCollectionsConstants';
+
+export const selectAvailableHostCollections = state =>
+  selectAPIResponse(state, AVAILABLE_HOST_COLLECTIONS_KEY) ?? {};
+
+export const selectRemovableHostCollections = state =>
+  selectAPIResponse(state, REMOVABLE_HOST_COLLECTIONS_KEY) ?? {};
+
+export const selectAvailableHostCollectionsStatus = state =>
+  selectAPIStatus(state, AVAILABLE_HOST_COLLECTIONS_KEY) || STATUS.PENDING;
+
+export const selectRemovableHostCollectionsStatus = state =>
+  selectAPIStatus(state, REMOVABLE_HOST_COLLECTIONS_KEY);

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/__tests__/availableHostCollections.fixtures.json

@@ -0,0 +1,106 @@
+{
+  "total": 6,
+  "subtotal": 6,
+  "selectable": 6,
+  "page": "1",
+  "per_page": "20",
+  "error": null,
+  "search": null,
+  "sort": {
+      "by": "name",
+      "order": "asc"
+  },
+  "results": [
+      {
+          "name": "hc1",
+          "organization_id": 1,
+          "max_hosts": null,
+          "description": null,
+          "total_hosts": 1,
+          "unlimited_hosts": true,
+          "created_at": "2022-03-04 09:28:47 -0500",
+          "updated_at": "2022-03-04 09:28:47 -0500",
+          "id": 5,
+          "permissions": {
+              "deletable": true,
+              "editable": true
+          }
+      },
+      {
+          "name": "hc2",
+          "organization_id": 1,
+          "max_hosts": 2,
+          "description": null,
+          "total_hosts": 1,
+          "unlimited_hosts": false,
+          "created_at": "2022-03-04 09:29:03 -0500",
+          "updated_at": "2022-03-04 09:29:03 -0500",
+          "id": 6,
+          "permissions": {
+              "deletable": true,
+              "editable": true
+          }
+      },
+      {
+          "name": "hc3",
+          "organization_id": 1,
+          "max_hosts": null,
+          "description": null,
+          "total_hosts": 1,
+          "unlimited_hosts": true,
+          "created_at": "2022-03-04 09:29:18 -0500",
+          "updated_at": "2022-03-04 09:29:18 -0500",
+          "id": 7,
+          "permissions": {
+              "deletable": true,
+              "editable": true
+          }
+      },
+      {
+          "name": "hc4",
+          "organization_id": 1,
+          "max_hosts": 1,
+          "description": null,
+          "total_hosts": 1,
+          "unlimited_hosts": false,
+          "created_at": "2022-03-04 09:29:30 -0500",
+          "updated_at": "2022-03-04 09:29:30 -0500",
+          "id": 8,
+          "permissions": {
+              "deletable": true,
+              "editable": true
+          }
+      },
+      {
+          "name": "hc5",
+          "organization_id": 1,
+          "max_hosts": 5,
+          "description": null,
+          "total_hosts": 1,
+          "unlimited_hosts": false,
+          "created_at": "2022-03-04 09:29:42 -0500",
+          "updated_at": "2022-03-04 09:29:42 -0500",
+          "id": 9,
+          "permissions": {
+              "deletable": true,
+              "editable": true
+          }
+      },
+      {
+          "name": "Partha hosts",
+          "organization_id": 1,
+          "max_hosts": 1,
+          "description": null,
+          "total_hosts": 1,
+          "unlimited_hosts": false,
+          "created_at": "2022-02-28 16:19:45 -0500",
+          "updated_at": "2022-02-28 16:19:45 -0500",
+          "id": 3,
+          "permissions": {
+              "deletable": true,
+              "editable": true
+          }
+      }
+  ]
+}
+

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/__tests__/hostCollectionsCard.test.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { render, fireEvent } from 'react-testing-lib-wrapper';
+import HostCollectionsCard from '../HostCollectionsCard';
+
+const hostDetails = {
+  host_collections: [
+    {
+      id: 1,
+      name: 'Jer Hosts',
+      description: null,
+      max_hosts: null,
+      unlimited_hosts: true,
+      total_hosts: 2,
+    },
+    {
+      id: 3,
+      name: 'Partha hosts',
+      description: null,
+      max_hosts: 1,
+      unlimited_hosts: false,
+      total_hosts: 1,
+    },
+    {
+      id: 2,
+      name: 'Jturel hosts',
+      description: 'This is my awesome description',
+      max_hosts: 43,
+      unlimited_hosts: false,
+      total_hosts: 1,
+    },
+  ],
+  subscription_facet_attributes: {
+    uuid: '123',
+  },
+};
+
+const emptyHostDetails = {
+  host_collections: [],
+  subscription_facet_attributes: {
+    uuid: '123',
+  },
+};
+
+test('shows host collections and host limits when present', () => {
+  const { getByText } = render(<HostCollectionsCard hostDetails={hostDetails} />);
+  expect(getByText('Host collections')).toBeInTheDocument();
+  expect(getByText('Jturel hosts')).toBeInTheDocument();
+  expect(getByText('1/43')).toBeInTheDocument();
+  expect(getByText('1/1')).toBeInTheDocument();
+  expect(getByText('2/unlimited')).toBeInTheDocument();
+});
+
+test('shows empty card when no host collections present', () => {
+  const { queryByText } = render(<HostCollectionsCard hostDetails={emptyHostDetails} />);
+  expect(queryByText('Host collections')).toBeInTheDocument();
+  expect(queryByText('Jturel hosts')).not.toBeInTheDocument();
+});
+
+test('expands to show description', () => {
+  const { getByText, queryByText } = render(<HostCollectionsCard hostDetails={hostDetails} />);
+  expect(getByText('Jturel hosts')).toBeInTheDocument();
+  expect(queryByText('This is my awesome description')).not.toBeVisible();
+  fireEvent.click(getByText('Jturel hosts'));
+  expect(getByText('This is my awesome description')).toBeVisible();
+});
+
+test('expands to show when no description provided', () => {
+  const { getAllByText, queryAllByText } = render(<HostCollectionsCard
+    hostDetails={hostDetails}
+  />);
+  const indescribableHostCollection = getAllByText('Jer Hosts')[0];
+  expect(indescribableHostCollection).toBeInTheDocument();
+  queryAllByText('No description provided').forEach(element => expect(element).not.toBeVisible());
+  fireEvent.click(indescribableHostCollection);
+  expect(getAllByText('No description provided')[0]).toBeVisible();
+});
+
+test('shows add and remove options in kebab', () => {
+  const { queryByLabelText } = render(<HostCollectionsCard hostDetails={hostDetails} />);
+  const kebab = queryByLabelText('host_collections_bulk_actions');
+  expect(kebab).toBeInTheDocument();
+  fireEvent.click(kebab);
+
+  const add = queryByLabelText('add_host_to_collections');
+  const remove = queryByLabelText('remove_host_from_collections');
+
+  expect(add).toBeInTheDocument();
+  expect(remove).toBeInTheDocument();
+  expect(add).toHaveAttribute('aria-disabled', 'false');
+  expect(remove).toHaveAttribute('aria-disabled', 'false');
+});
+
+test('remove is disabled when no host collections present', () => {
+  const { queryByLabelText } = render(<HostCollectionsCard hostDetails={emptyHostDetails} />);
+  const kebab = queryByLabelText('host_collections_bulk_actions');
+  expect(kebab).toBeInTheDocument();
+  fireEvent.click(kebab);
+
+  const remove = queryByLabelText('remove_host_from_collections');
+  expect(remove).toBeInTheDocument();
+  expect(remove).toHaveAttribute('aria-disabled', 'true');
+});
+
+test('does not show card when host not registered', () => {
+  const { queryByText } = render(<HostCollectionsCard
+    hostDetails={{ ...emptyHostDetails, subscription_facet_attributes: undefined }}
+  />);
+  const cardTitle = queryByText('Host collections');
+  expect(cardTitle).not.toBeInTheDocument();
+});

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/__tests__/hostCollectionsModal.test.js

@@ -0,0 +1,235 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import mockAvailableHostCollections from './availableHostCollections.fixtures.json';
+import mockRemovableHostCollections from './removableHostCollections.fixtures.json';
+import { REMOVABLE_HOST_COLLECTIONS_KEY } from '../HostCollectionsConstants';
+import { assertNockRequest, mockAutocomplete, mockSetting, nockInstance } from '../../../../../../test-utils/nockWrapper';
+import katelloApi, { foremanApi } from '../../../../../../services/api';
+import { HostCollectionsAddModal, HostCollectionsRemoveModal } from '../HostCollectionsModal';
+
+const renderOptions = () => ({
+  apiNamespace: REMOVABLE_HOST_COLLECTIONS_KEY,
+  initialState: {
+    API: {
+      HOST_DETAILS: {
+        response: {
+          id: 1,
+          name: 'test-host',
+        },
+        status: 'RESOLVED',
+      },
+    },
+  },
+});
+
+const availableHostCollections = katelloApi.getApiUrl('/host_collections');
+const alterHostCollections = foremanApi.getApiUrl('/hosts/1/host_collections');
+const autocompleteUrl = '/host_collections/auto_complete_search';
+const hostDetailsUrl = '/api/hosts/test-host';
+
+const defaultQuery = {
+  host_id: 1,
+  per_page: 20,
+  page: 1,
+};
+const defaultQueryWithAvailable = {
+  ...defaultQuery,
+  available_for: 'host',
+};
+
+let firstHostCollection;
+let searchDelayScope;
+let autoSearchScope;
+
+describe('HostCollectionsAddModal', () => {
+  beforeEach(() => {
+    const { results } = mockAvailableHostCollections;
+    [firstHostCollection] = results;
+    searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
+    autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  });
+
+  afterEach(() => {
+    assertNockRequest(searchDelayScope);
+    assertNockRequest(autoSearchScope);
+  });
+
+  test('Calls API with available_for=host on page load', async (done) => {
+    const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+    const scope = nockInstance
+      .get(availableHostCollections)
+      .query(defaultQueryWithAvailable)
+      .reply(200, mockAvailableHostCollections);
+
+    const { getAllByText }
+       = renderWithRedux(<HostCollectionsAddModal
+         isOpen
+         closeModal={jest.fn()}
+         hostId={1}
+         hostName="test-host"
+         existingHostCollectionIds={[]}
+       />, renderOptions());
+
+    await patientlyWaitFor(() =>
+      expect(getAllByText(firstHostCollection.name)[0]).toBeInTheDocument());
+    assertNockRequest(autocompleteScope);
+    assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  });
+
+  test('Calls alterHostCollections with combined list of existing and new host collections', async (done) => {
+    const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+    const scope = nockInstance
+      .get(availableHostCollections)
+      .query(defaultQueryWithAvailable)
+      .reply(200, mockAvailableHostCollections);
+
+    const alterScope = nockInstance
+      .put(alterHostCollections, {
+        host_collection_ids:
+          [...mockRemovableHostCollections.results.map(r => r.id), firstHostCollection.id],
+      })
+      .reply(200, {});
+
+    const hostDetailsScope = nockInstance
+      .get(hostDetailsUrl)
+      .reply(200, {});
+
+    const { getByRole, getAllByText }
+       = renderWithRedux(<HostCollectionsAddModal
+         isOpen
+         closeModal={jest.fn()}
+         hostId={1}
+         hostName="test-host"
+         existingHostCollectionIds={mockRemovableHostCollections.results.map(r => r.id)}
+       />, renderOptions());
+
+    await patientlyWaitFor(() =>
+      expect(getAllByText(firstHostCollection.name)[0]).toBeInTheDocument());
+    const checkbox = getByRole('checkbox', { name: 'Select row 0' });
+    fireEvent.click(checkbox);
+    const addButton = getByRole('button', { name: 'Add' });
+    expect(addButton).toHaveAttribute('aria-disabled', 'false');
+    fireEvent.click(addButton);
+
+    assertNockRequest(autocompleteScope);
+    assertNockRequest(scope);
+    assertNockRequest(alterScope);
+    assertNockRequest(hostDetailsScope, done);
+  });
+  test('Host collections whose host limit is exceeded are disabled', async (done) => {
+    const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+    const scope = nockInstance
+      .get(availableHostCollections)
+      .query(defaultQueryWithAvailable)
+      .reply(200, mockAvailableHostCollections);
+
+    const { getAllByRole, getAllByText }
+       = renderWithRedux(<HostCollectionsAddModal
+         isOpen
+         closeModal={jest.fn()}
+         hostId={1}
+         hostName="test-host"
+         existingHostCollectionIds={[]}
+       />, renderOptions());
+
+    await patientlyWaitFor(() =>
+      expect(getAllByText(firstHostCollection.name)[0]).toBeInTheDocument());
+
+    const disabledCheckboxes = getAllByRole('checkbox').filter(c => c.disabled);
+    const maxedOutHostCollections = mockAvailableHostCollections.results.filter(r =>
+      r.max_hosts === r.total_hosts);
+    expect(disabledCheckboxes.length).toBeGreaterThan(0);
+    expect(disabledCheckboxes).toHaveLength(maxedOutHostCollections.length);
+
+    assertNockRequest(autocompleteScope);
+    assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  });
+});
+
+describe('HostCollectionsRemoveModal', () => {
+  beforeEach(() => {
+    const { results } = mockAvailableHostCollections;
+    [firstHostCollection] = results;
+    searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
+    autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  });
+
+  afterEach(() => {
+    assertNockRequest(searchDelayScope);
+    assertNockRequest(autoSearchScope);
+  });
+
+  test('Calls API without available_for=host on page load', async (done) => {
+    const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+    const scope = nockInstance
+      .get(availableHostCollections)
+      .query(defaultQuery)
+      .reply(200, mockAvailableHostCollections);
+
+    const { getAllByText }
+       = renderWithRedux(<HostCollectionsRemoveModal
+         isOpen
+         closeModal={jest.fn()}
+         hostId={1}
+         hostName="test-host"
+         existingHostCollectionIds={mockRemovableHostCollections.results.map(r => r.id)}
+       />, renderOptions());
+
+    // Assert that the packages are now showing on the screen, but wait for them to appear.
+    await patientlyWaitFor(() =>
+      expect(getAllByText(firstHostCollection.name)[0]).toBeInTheDocument());
+    // Assert request was made and completed, see helper function
+    assertNockRequest(autocompleteScope);
+    assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  });
+
+  test('Calls alterHostCollections with host collections being removed filtered out from the list', async (done) => {
+    const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+    const scope = nockInstance
+      .get(availableHostCollections)
+      .query(defaultQuery)
+      .reply(200, mockRemovableHostCollections);
+
+    const alterScope = nockInstance
+      .put(alterHostCollections, {
+        host_collection_ids:
+          mockRemovableHostCollections.results.map(r => r.id).filter(r =>
+            r !== mockRemovableHostCollections.results[0].id),
+      })
+      .reply(200, {});
+
+    const hostDetailsScope = nockInstance // calls host details after successful alter
+      .get(hostDetailsUrl)
+      .reply(200, {});
+
+    const { getByRole, getAllByText }
+       = renderWithRedux(<HostCollectionsRemoveModal
+         isOpen
+         closeModal={jest.fn()}
+         hostId={1}
+         hostName="test-host"
+         existingHostCollectionIds={mockRemovableHostCollections.results.map(r => r.id)}
+       />, renderOptions());
+
+    const [firstRemovableHostCollection] = mockRemovableHostCollections.results;
+    await patientlyWaitFor(() =>
+      expect(getAllByText(firstRemovableHostCollection.name)[0]).toBeInTheDocument());
+    const checkbox = getByRole('checkbox', { name: 'Select row 0' });
+    fireEvent.click(checkbox);
+    expect(getAllByText('1 selected')).toHaveLength(1);
+    const removeButton = getByRole('button', { name: 'Remove' });
+    expect(removeButton).toHaveAttribute('aria-disabled', 'false');
+    fireEvent.click(removeButton);
+
+    assertNockRequest(autocompleteScope);
+    assertNockRequest(scope);
+    assertNockRequest(alterScope);
+    assertNockRequest(hostDetailsScope, done);
+  });
+});
+