katello 4.4.1 → 4.5.0

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

@@ -0,0 +1,206 @@
+import React, { useState } from 'react';
+import {
+  Badge,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  Dropdown,
+  ExpandableSection,
+  KebabToggle,
+  Flex,
+  FlexItem,
+  GridItem,
+  DropdownItem,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import PropTypes from 'prop-types';
+import { useSet } from '../../../../Table/TableHooks';
+import { HostCollectionsAddModal, HostCollectionsRemoveModal } from './HostCollectionsModal';
+import { hasRequiredPermissions, hostIsRegistered, userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
+
+const requiredPermissions = ['edit_hosts', 'view_host_collections'];
+
+const HostCollectionsDetails = ({
+  hostCollections, id: hostId, name: hostName,
+  showKebab,
+}) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const toggleBulkAction = () => setIsDropdownOpen(prev => !prev);
+
+  const expandedHostCollections = useSet([]);
+  const hostCollectionIds = hostCollections?.map(({ id }) => id) ?? [];
+
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const closeAddModal = () => setIsAddModalOpen(false);
+  const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
+  const closeRemoveModal = () => setIsRemoveModalOpen(false);
+
+  const openAddHostCollectionsModal = () => {
+    setIsDropdownOpen(false);
+    setIsAddModalOpen(true);
+  };
+  const openRemoveHostCollectionsModal = () => {
+    setIsDropdownOpen(false);
+    setIsRemoveModalOpen(true);
+  };
+
+  const dropdownItems = [
+    <DropdownItem
+      aria-label="add_host_to_collections"
+      key="add_host_to_collections"
+      component="button"
+      onClick={openAddHostCollectionsModal}
+    >
+      {__('Add host to collections')}
+    </DropdownItem>,
+    <DropdownItem
+      aria-label="remove_host_from_collections"
+      key="remove_host_from_collections"
+      component="button"
+      isDisabled={!hostCollections.length}
+      onClick={openRemoveHostCollectionsModal}
+    >
+      {__('Remove host from collections')}
+    </DropdownItem>,
+  ];
+
+  return (
+    <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
+      <Card isHoverable>
+        <CardHeader>
+          <Flex
+            alignItems={{ default: 'alignItemsCenter' }}
+            justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            style={{ width: '100%' }}
+          >
+            <FlexItem>
+              <Flex
+                alignItems={{ default: 'alignItemsCenter' }}
+                justifyContent={{ default: 'justifyContentSpaceBetween' }}
+              >
+                <FlexItem>
+                  <CardTitle>{__('Host collections')}</CardTitle>
+                </FlexItem>
+                <FlexItem>
+                  {!!hostCollections?.length && <Badge isRead>{hostCollections.length}</Badge>}
+                </FlexItem>
+              </Flex>
+            </FlexItem>
+            {showKebab && (
+              <FlexItem>
+                <Dropdown
+                  toggle={<KebabToggle aria-label="host_collections_bulk_actions" onToggle={toggleBulkAction} />}
+                  isOpen={isDropdownOpen}
+                  isPlain
+                  position="right"
+                  dropdownItems={dropdownItems}
+                />
+              </FlexItem>)
+            }
+          </Flex>
+        </CardHeader>
+        <CardBody>
+          {hostCollections?.map((hostCollection) => {
+            const {
+              id, name, description, maxHosts, unlimitedHosts, totalHosts,
+            } = propsToCamelCase(hostCollection);
+            const isExpanded = expandedHostCollections.has(id);
+            return (
+              <Flex
+                alignItems={{ default: 'alignItemsBaseline' }}
+                justifyContent={{ default: 'justifyContentSpaceBetween' }}
+                direction={{ default: 'row' }}
+                flexWrap={{ default: 'nowrap' }}
+                key={id}
+              >
+                <FlexItem
+                  grow={{ default: 'grow' }}
+                  style={{ whiteSpace: 'pre-line' }}
+                >
+                  <ExpandableSection
+                    toggleText={name}
+                    onToggle={() => expandedHostCollections.onToggle(!isExpanded, id)}
+                    isExpanded={isExpanded}
+                    isIndented
+                  >
+                    <div style={{ fontSize: '14px' }}>
+                      {description || <span style={{ color: '#c1c1c1' }}>{__('No description provided')}</span>}
+                    </div>
+                  </ExpandableSection>
+                </FlexItem>
+                <FlexItem component="span">
+                  {totalHosts}/{unlimitedHosts ? 'unlimited' : maxHosts}
+                </FlexItem>
+              </Flex>
+            );
+          })}
+        </CardBody>
+      </Card>
+      {hostId &&
+        <>
+          <HostCollectionsAddModal
+            isOpen={isAddModalOpen}
+            closeModal={closeAddModal}
+            hostId={hostId}
+            key={`hc-add-modal-${hostId}`}
+            hostName={hostName}
+            existingHostCollectionIds={hostCollectionIds}
+          />
+          <HostCollectionsRemoveModal
+            isOpen={isRemoveModalOpen}
+            closeModal={closeRemoveModal}
+            hostId={hostId}
+            key={`hc-remove-modal-${hostId}`}
+            hostName={hostName}
+            existingHostCollectionIds={hostCollectionIds}
+          />
+        </>
+      }
+    </GridItem>
+  );
+};
+
+const HostCollectionsCard = ({ hostDetails }) => {
+  if (hostIsRegistered({ hostDetails })) {
+    const showKebab =
+      hasRequiredPermissions(requiredPermissions, userPermissionsFromHostDetails({ hostDetails }));
+    return <HostCollectionsDetails showKebab={showKebab} {...propsToCamelCase(hostDetails)} />;
+  }
+  return null;
+};
+
+HostCollectionsDetails.propTypes = {
+  hostCollections: PropTypes.arrayOf(PropTypes.shape({})),
+  id: PropTypes.number,
+  name: PropTypes.string,
+  showKebab: PropTypes.bool,
+};
+
+HostCollectionsDetails.defaultProps = {
+  hostCollections: [],
+  id: null,
+  name: '',
+  showKebab: false,
+};
+
+HostCollectionsCard.propTypes = {
+  hostDetails: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+    contentFacetAttributes: PropTypes.shape({
+      permissions: PropTypes.shape({}),
+    }),
+  }),
+};
+
+HostCollectionsCard.defaultProps = {
+  hostDetails: {
+    permissions: {},
+    contentFacetAttributes: {
+      permissions: {},
+    },
+  },
+};
+
+export default HostCollectionsCard;

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

@@ -0,0 +1,7 @@
+export const AVAILABLE_HOST_COLLECTIONS_KEY = 'AVAILABLE_HOST_COLLECTIONS';
+export const REMOVABLE_HOST_COLLECTIONS_KEY = 'REMOVABLE_HOST_COLLECTIONS';
+export const ALTER_HOST_HOST_COLLECTIONS_KEY = 'ALTER_HOST_HOST_COLLECTIONS';
+export const MODAL_TYPES = {
+  ADD: 'ADD',
+  REMOVE: 'REMOVE',
+};

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,118 @@
+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',
+  },
+};
+
+jest.mock('../../../hostDetailsHelpers', () => ({
+  ...jest.requireActual('../../../hostDetailsHelpers'),
+  userPermissionsFromHostDetails: () => ({
+    view_host_collections: true,
+    edit_hosts: true,
+  }),
+}));
+
+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();
+});