katello 4.7.4 → 4.8.0.rc2

data/webpack/components/Content/__tests__/ContentPage.test.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
+import SearchBar from 'foremanReact/components/SearchBar';
 import ContentPage from '../ContentPage';
 import ContentTable from '../ContentTable';
-import Search from '../../../components/Search/index';
 
 describe('Content page', () => {
   it('should render and contain appropriate components', async () => {
     const contentHeader = 'Content Header';
     const content = {};
     const onSearch = () => {};
-    const getAutoCompleteParams = () => {};
     const updateSearchQuery = () => {};
     const searchQuery = '';
     const onPaginationChange = () => {};
@@ -21,7 +20,6 @@ describe('Content page', () => {
       content={content}
       tableSchema={TableSchema}
       onSearch={onSearch}
-      getAutoCompleteParams={getAutoCompleteParams}
       updateSearchQuery={updateSearchQuery}
       initialInputValue={searchQuery}
       onPaginationChange={onPaginationChange}
@@ -29,6 +27,6 @@ describe('Content page', () => {
 
     expect(toJson(wrapper)).toMatchSnapshot();
     expect(wrapper.find(ContentTable)).toHaveLength(1);
-    expect(wrapper.find(Search)).toHaveLength(1);
+    expect(wrapper.find(SearchBar)).toHaveLength(1);
   });
 });

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

@@ -40,11 +40,30 @@ exports[`Content page should render and contain appropriate components 1`] = `
           bsClass="form-group"
           className="toolbar-pf toolbar-pf-filter"
         >
-          <Connect(Search)
-            getAutoCompleteParams={[Function]}
+          <SearchBar
+            data={
+              Object {
+                "autocomplete": Object {
+                  "apiParams": Object {},
+                  "id": "searchBar-content-page-Content Header",
+                  "searchQuery": "",
+                  "url": "undefined/auto_complete_search",
+                  "useKeyShortcuts": true,
+                },
+                "bookmarks": Object {
+                  "canCreate": true,
+                  "documentationUrl": "/links/manual/4.1.5Searching",
+                  "id": "searchBar-content-page-Content Header",
+                  "url": "/api/bookmarks",
+                },
+                "controller": undefined,
+              }
+            }
             initialInputValue=""
+            initialQuery=""
+            name={null}
             onSearch={[Function]}
-            updateSearchQuery={[Function]}
+            onSearchChange={[Function]}
           />
         </FormGroup>
       </Form>

data/webpack/components/Table/EmptyStateMessage.js

@@ -33,9 +33,9 @@ const EmptyStateMessage = ({
   let emptyStateTitle = title;
   let emptyStateBody = body;
   const {
-    primaryActionTitle, showPrimaryAction, showSecondaryAction,
+    primaryActionTitle, showPrimaryAction, showSecondaryAction, showSecondaryActionButton,
     secondaryActionTitle, primaryActionLink, secondaryActionLink, searchIsActive, resetFilters,
-    filtersAreActive, requestKey, primaryActionButton,
+    filtersAreActive, requestKey, primaryActionButton, secondaryActionTextOverride,
   } = extraTableProps;
   if (error) {
     if (error?.response?.data?.error) {
@@ -48,14 +48,16 @@ const EmptyStateMessage = ({
       emptyStateBody = error?.response?.data?.displayMessage || __('Something went wrong! Please check server logs!');
     }
   }
-  const secondaryActionText = searchIsActive ? __('Clear search') : __('Clear filters');
+  const defaultSecondaryActionText = searchIsActive ? __('Clear search') : __('Clear filters');
+  const secondaryActionText = secondaryActionTextOverride || defaultSecondaryActionText;
   const dispatch = useDispatch();
   const clearSearch = useSelector(selectHostDetailsClearSearch);
+  const showSecondaryActionAnchor = showSecondaryAction && secondaryActionLink;
   const handleClick = () => {
     if (searchIsActive) {
       clearSearch();
     }
-    if (filtersAreActive) {
+    if (filtersAreActive || showSecondaryActionButton) {
       resetFilters();
     }
     dispatch({
@@ -65,7 +67,7 @@ const EmptyStateMessage = ({
   };
 
   const actionButton = primaryActionButton ?? (
-    <Button>
+    <Button ouiaId="empty-state-primary-action-button">
       <a href={primaryActionLink} style={{ color: 'white', textDecoration: 'none' }}>{primaryActionTitle}</a>
     </Button>
   );
@@ -87,17 +89,17 @@ const EmptyStateMessage = ({
           {emptyStateBody}
         </EmptyStateBody>
         {showPrimaryAction && actionButton}
-        {showSecondaryAction &&
+        {showSecondaryActionAnchor &&
           <EmptyStateSecondaryActions>
-            <Button variant="link">
+            <Button variant="link" ouiaId="empty-state-secondary-action-link">
               <a href={secondaryActionLink} style={{ textDecoration: 'none' }}>{secondaryActionTitle}</a>
             </Button>
           </EmptyStateSecondaryActions>
         }
 
-        {(searchIsActive || !!filtersAreActive) &&
+        {(showSecondaryActionButton || searchIsActive || !!filtersAreActive) &&
           <EmptyStateSecondaryActions>
-            <Button variant="link" onClick={handleClick}>
+            <Button variant="link" onClick={handleClick} ouiaId="empty-state-secondary-action-router-link">
               {secondaryActionText}
             </Button>
           </EmptyStateSecondaryActions>
@@ -143,9 +145,10 @@ EmptyStateMessage.propTypes = {
   ])),
   // eslint-disable-next-line react/require-default-props
   resetFilters: (props, propName) => {
-    if (props.defaultFilters?.length || props.activeFilters?.length) {
+    if (props.showSecondaryActionButton || props.defaultFilters?.length
+        || props.activeFilters?.length) {
       if (typeof props[propName] !== 'function') {
-        return new Error(`A ${propName} function is required when using activeFilters or defaultFilters`);
+        return new Error(`A ${propName} function is required when using activeFilters, defaultFilters, or showSecondaryActionButton`);
       }
     }
     return null;

data/webpack/components/Table/MainTable.js

@@ -16,11 +16,12 @@ import Loading from '../../components/Loading';
 
 const MainTable = ({
   status, cells, rows, error, emptyContentTitle, emptyContentBody,
-  emptySearchTitle, emptySearchBody, errorSearchTitle, errorSearchBody,
-  happyEmptyContent, searchIsActive, activeFilters, defaultFilters, actionButtons, rowsCount,
-  children, showPrimaryAction, showSecondaryAction, primaryActionLink,
-  secondaryActionLink, primaryActionTitle, secondaryActionTitle, resetFilters,
-  updateSearchQuery, requestKey, primaryActionButton, ...extraTableProps
+  emptyContentOverride, emptySearchTitle, emptySearchBody, errorSearchTitle, errorSearchBody,
+  happyEmptyContent, searchIsActive, activeFilters, defaultFilters,
+  activeToggleState, unfilteredToggleState, actionButtons, rowsCount,
+  children, showPrimaryAction, showSecondaryAction, showSecondaryActionButton, primaryActionLink,
+  secondaryActionLink, primaryActionTitle, secondaryActionTitle, secondaryActionTextOverride,
+  resetFilters, updateSearchQuery, requestKey, primaryActionButton, ...extraTableProps
 }) => {
   const tableHasNoRows = () => {
     if (children) return rowsCount === 0;
@@ -29,15 +30,20 @@ const MainTable = ({
   const callToActionProps = {
     showPrimaryAction,
     showSecondaryAction,
+    showSecondaryActionButton,
     primaryActionLink,
     primaryActionTitle,
     secondaryActionLink,
     secondaryActionTitle,
     primaryActionButton,
+    secondaryActionTextOverride,
+    emptyContentOverride,
   };
   const filtersAreActive = activeFilters?.length &&
     !isEqual(new Set(activeFilters), new Set(defaultFilters));
-  const isFiltering = searchIsActive || filtersAreActive;
+  const toggleIsActive = activeToggleState !== unfilteredToggleState;
+  const isSearchingOrFiltering = searchIsActive || filtersAreActive || toggleIsActive;
+
   if (status === STATUS.PENDING) return (<Loading />);
   const clearSearchProps = {
     resetFilters,
@@ -48,6 +54,10 @@ const MainTable = ({
     defaultFilters,
     activeFilters,
   };
+
+  const tableWouldBeEmpty = (status === STATUS.RESOLVED && tableHasNoRows());
+  const emptyContent = emptyContentOverride || (tableWouldBeEmpty && !isSearchingOrFiltering);
+  const emptySearch = (tableWouldBeEmpty && isSearchingOrFiltering);
   // Can we display the error message?
   if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
 
@@ -60,25 +70,26 @@ const MainTable = ({
       search
     />);
   }
-  if (status === STATUS.RESOLVED && isFiltering && tableHasNoRows()) {
-    return (<EmptyStateMessage
-      title={emptySearchTitle}
-      body={emptySearchBody}
-      search
-      {...clearSearchProps}
-    />);
-  }
-  if (status === STATUS.RESOLVED && tableHasNoRows()) {
+  if (emptyContent) {
     return (
       <EmptyStateMessage
         title={emptyContentTitle}
         body={emptyContentBody}
         happy={happyEmptyContent}
         search={!happyEmptyContent}
+        {...clearSearchProps}
         {...callToActionProps}
       />
     );
   }
+  if (emptySearch) {
+    return (<EmptyStateMessage
+      title={emptySearchTitle}
+      body={emptySearchBody}
+      search
+      {...clearSearchProps}
+    />);
+  }
 
   const tableProps = { cells, rows, ...extraTableProps };
   if (children) {
@@ -129,6 +140,8 @@ MainTable.propTypes = {
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string),
   ])),
+  activeToggleState: PropTypes.string,
+  unfilteredToggleState: PropTypes.string,
   actionButtons: PropTypes.bool,
   rowsCount: PropTypes.number,
   children: PropTypes.oneOfType([
@@ -136,8 +149,11 @@ MainTable.propTypes = {
     PropTypes.node,
   ]),
   happyEmptyContent: PropTypes.bool,
+  emptyContentOverride: PropTypes.bool,
   showPrimaryAction: PropTypes.bool,
   showSecondaryAction: PropTypes.bool,
+  showSecondaryActionButton: PropTypes.bool,
+  secondaryActionTextOverride: PropTypes.string,
   primaryActionLink: PropTypes.string,
   secondaryActionLink: PropTypes.string,
   secondaryActionTitle: PropTypes.string,
@@ -153,6 +169,8 @@ MainTable.defaultProps = {
   searchIsActive: false,
   activeFilters: [],
   defaultFilters: [],
+  activeToggleState: '',
+  unfilteredToggleState: '',
   errorSearchTitle: __('Problem searching'),
   errorSearchBody: '',
   actionButtons: false,
@@ -161,8 +179,11 @@ MainTable.defaultProps = {
   rows: undefined,
   rowsCount: undefined,
   happyEmptyContent: false,
+  emptyContentOverride: false,
   showPrimaryAction: false,
   showSecondaryAction: false,
+  showSecondaryActionButton: false,
+  secondaryActionTextOverride: '',
   primaryActionLink: '',
   secondaryActionLink: '',
   primaryActionTitle: '',

data/webpack/components/Table/TableWrapper.js

@@ -2,8 +2,9 @@ import React, { useCallback, useRef } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
-import { isEqual } from 'lodash';
-import { STATUS } from 'foremanReact/constants';
+import { isEqual, isEmpty } from 'lodash';
+import SearchBar from 'foremanReact/components/SearchBar';
+import { STATUS, getControllerSearchProps } from 'foremanReact/constants';
 import { noop } from 'foremanReact/common/helpers';
 import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
 import { PaginationVariant, Flex, FlexItem } from '@patternfly/react-core';
@@ -11,7 +12,6 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import PageControls from './PageControls';
 import MainTable from './MainTable';
 import { getPageStats } from './helpers';
-import Search from '../../components/Search';
 import SelectAllCheckbox from '../SelectAllCheckbox';
 import { orgId } from '../../services/api';
 
@@ -25,7 +25,7 @@ const TableWrapper = ({
   metadata,
   fetchItems,
   autocompleteEndpoint,
-  foremanApiAutoComplete,
+  autocompleteQueryParams,
   searchQuery,
   updateSearchQuery,
   searchPlaceholderText,
@@ -43,6 +43,7 @@ const TableWrapper = ({
   clearSelectedResults,
   emptySearchBody,
   hideSearch,
+  alwaysHideToolbar,
   nodesBelowSearch,
   bookmarkController,
   readOnlyBookmarks,
@@ -60,8 +61,8 @@ const TableWrapper = ({
   const showPagination = !unresolvedStatusOrNoRows;
   const filtersAreActive = activeFilters?.length &&
     !isEqual(new Set(activeFilters), new Set(allTableProps.defaultFilters));
-  const hideToolbar = !searchQuery && !filtersAreActive &&
-    allTableProps.status === STATUS.RESOLVED && total === 0;
+  const hideToolbar = alwaysHideToolbar || (!searchQuery && !filtersAreActive &&
+    allTableProps.status === STATUS.RESOLVED && total === 0);
   const showActionButtons = actionButtons && (alwaysShowActionButtons || !hideToolbar);
   const showToggleGroup = toggleGroup && (alwaysShowToggleGroup || !hideToolbar);
   const paginationParams = useCallback(() =>
@@ -131,14 +132,6 @@ const TableWrapper = ({
     spawnFetch();
   }, [searchQuery, spawnFetch, additionalListeners]);
 
-  const getAutoCompleteParams = search => ({
-    endpoint: autocompleteEndpoint,
-    params: {
-      organization_id: orgId(),
-      search,
-    },
-  });
-
   // If the new page wouldn't exist because of a perPage change,
   // we should set the current page to the last page.
   const validatePagination = (data) => {
@@ -164,6 +157,17 @@ const TableWrapper = ({
     spawnFetch(pagData);
     paginationChangePending.current = pagData;
   };
+
+  const extraSearchProps = (isEmpty(bookmarkController)) ?
+    { bookmarks: {} } :
+    { controller: bookmarkController };
+  const apiParams = { ...autocompleteQueryParams, organization_id: orgId() };
+  const searchDataProp = {
+    ...getControllerSearchProps(autocompleteEndpoint, `searchBar-${bookmarkController}`, !readOnlyBookmarks, apiParams),
+    ...extraSearchProps,
+    isDisabled: unresolvedStatusOrNoRows && !searchQuery,
+  };
+
   return (
     <>
       <Flex style={{ alignItems: 'center' }} className="margin-16-24">
@@ -186,16 +190,10 @@ const TableWrapper = ({
         }
         {!hideSearch && !hideToolbar &&
           <FlexItem>
-            <Search
-              isDisabled={unresolvedStatusOrNoRows && !searchQuery}
-              patternfly4
-              initialInputValue={searchQuery && searchQuery}
+            <SearchBar
+              data={searchDataProp}
+              initialQuery={searchQuery}
               onSearch={search => updateSearchQuery(search)}
-              getAutoCompleteParams={getAutoCompleteParams}
-              foremanApiAutoComplete={foremanApiAutoComplete}
-              bookmarkController={bookmarkController}
-              readOnlyBookmarks={readOnlyBookmarks}
-              placeholder={searchPlaceholderText}
             />
           </FlexItem>
         }
@@ -272,7 +270,7 @@ TableWrapper.propTypes = {
     search: PropTypes.string,
   }),
   autocompleteEndpoint: PropTypes.string.isRequired,
-  foremanApiAutoComplete: PropTypes.bool,
+  autocompleteQueryParams: PropTypes.shape({}),
   searchPlaceholderText: PropTypes.string,
   actionButtons: PropTypes.node,
   alwaysShowActionButtons: PropTypes.bool,
@@ -305,6 +303,7 @@ TableWrapper.propTypes = {
   areAllRowsSelected: PropTypes.func,
   emptySearchBody: PropTypes.string,
   hideSearch: PropTypes.bool,
+  alwaysHideToolbar: PropTypes.bool,
   nodesBelowSearch: PropTypes.node,
   bookmarkController: PropTypes.string,
   readOnlyBookmarks: PropTypes.bool,
@@ -317,7 +316,6 @@ TableWrapper.defaultProps = {
   additionalListeners: [],
   activeFilters: [],
   defaultFilters: [],
-  foremanApiAutoComplete: false,
   searchPlaceholderText: undefined,
   actionButtons: null,
   alwaysShowActionButtons: true,
@@ -335,10 +333,12 @@ TableWrapper.defaultProps = {
   areAllRowsSelected: noop,
   emptySearchBody: __('Try changing your search settings.'),
   hideSearch: false,
+  alwaysHideToolbar: false,
   nodesBelowSearch: null,
   bookmarkController: undefined,
   readOnlyBookmarks: false,
   resetFilters: undefined,
+  autocompleteQueryParams: undefined,
 };
 
 export default TableWrapper;

data/webpack/components/Table/__test__/emptyStateMessage.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import EmptyStateMessage from '../EmptyStateMessage';
+
+describe('EmptyStateMessage', () => {
+  test('Shows clear search link when there are no results', async (done) => {
+    const { getByText } = renderWithRedux(<EmptyStateMessage
+      title="empty content title"
+      body="empty content body"
+      search
+      searchIsActive
+    />);
+
+    // Verify that the clear search link is visible
+    await patientlyWaitFor(() => expect(getByText('Clear search')).toBeInTheDocument());
+
+    done();
+  });
+
+  test('Shows clear filters link when there are no results', async (done) => {
+    const { getByText } = renderWithRedux(<EmptyStateMessage
+      title="empty content title"
+      body="empty content body"
+      search
+      filtersAreActive
+      activeFilters={['foo']}
+      resetFilters={jest.fn()}
+    />);
+
+    // Verify that the clear filters link is visible
+    await patientlyWaitFor(() => expect(getByText('Clear filters')).toBeInTheDocument());
+
+    done();
+  });
+
+  test('Handles override of secondaryActionText', async (done) => {
+    const { getByText } = renderWithRedux(<EmptyStateMessage
+      title="empty content title"
+      body="empty content body"
+      resetFilters={jest.fn()}
+      showSecondaryActionButton
+      secondaryActionTextOverride="Custom text"
+    />);
+
+    // Verify that the custom text is visible
+    await patientlyWaitFor(() => expect(getByText('Custom text')).toBeInTheDocument());
+
+    done();
+  });
+});
+

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ChangeHostCVModal.js

@@ -1,11 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { Modal, Button, SelectOption, Alert, Flex } from '@patternfly/react-core';
-import {
-  global_palette_black_600 as pfDescriptionColor,
-} from '@patternfly/react-tokens';
+import { Modal, Button, Alert } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
@@ -15,42 +11,15 @@ import { ENVIRONMENT_PATHS_KEY } from '../../../../../scenes/ContentViews/compon
 import api from '../../../../../services/api';
 import getContentViews from '../../../../../scenes/ContentViews/ContentViewsActions';
 import { selectContentViews, selectContentViewStatus } from '../../../../../scenes/ContentViews/ContentViewSelectors';
-import { uniq } from '../../../../../utils/helpers';
-import ContentViewIcon from '../../../../../scenes/ContentViews/components/ContentViewIcon';
 import updateHostContentViewAndEnvironment from './HostContentViewActions';
 import HOST_CV_AND_ENV_KEY from './HostContentViewConstants';
 import { getHostDetails } from '../../HostDetailsActions';
 import ContentViewSelect from '../../../../../scenes/ContentViews/components/ContentViewSelect/ContentViewSelect';
+import ContentViewSelectOption
+  from '../../../../../scenes/ContentViews/components/ContentViewSelect/ContentViewSelectOption';
 
 const ENV_PATH_OPTIONS = { key: ENVIRONMENT_PATHS_KEY };
 
-const ContentViewDescription = ({ cv, versionNumber }) => {
-  const descriptionStyle = {
-    fontSize: '12px',
-    fontWeight: 400,
-    color: pfDescriptionColor.value,
-  };
-  if (cv.default) return <span style={descriptionStyle}>{__('Library')}</span>;
-  return (
-    <span style={descriptionStyle}>
-      <FormattedMessage
-        id={`content-view-${cv.id}-version-${cv.latest_version}`}
-        defaultMessage="Version {versionNumber}"
-        values={{ versionNumber }}
-      />
-    </span>
-  );
-};
-
-ContentViewDescription.propTypes = {
-  cv: PropTypes.shape({
-    default: PropTypes.bool.isRequired,
-    id: PropTypes.number.isRequired,
-    latest_version: PropTypes.string.isRequired,
-  }).isRequired,
-  versionNumber: PropTypes.string.isRequired,
-};
-
 const ChangeHostCVModal = ({
   isOpen,
   closeModal,
@@ -66,6 +35,7 @@ const ChangeHostCVModal = ({
   const [cvSelectOpen, setCVSelectOpen] = useState(false);
   const dispatch = useDispatch();
   const contentViewsInEnvResponse = useSelector(state => selectContentViews(state, `FOR_ENV_${hostEnvId}`));
+  const { results } = contentViewsInEnvResponse;
   const contentViewsInEnvStatus = useSelector(state => selectContentViewStatus(state, `FOR_ENV_${hostEnvId}`));
   const hostUpdateStatus = useSelector(state => selectAPIStatus(state, HOST_CV_AND_ENV_KEY));
   useAPI( // No TableWrapper here, so we can useAPI from Foreman
@@ -73,6 +43,7 @@ const ChangeHostCVModal = ({
     api.getApiUrl(`/organizations/${orgId}/environments/paths?permission_type=promotable`),
     ENV_PATH_OPTIONS,
   );
+  const selectedCVForHostId = results?.find(cv => cv.name === selectedCVForHost)?.id;
 
   const handleModalClose = () => {
     setCVSelectOpen(false);
@@ -102,13 +73,6 @@ const ChangeHostCVModal = ({
   const { results: contentViewsInEnv = [] } = contentViewsInEnvResponse;
   const canSave = !!(selectedCVForHost && selectedEnvForHost.length);
 
-  const relevantVersionObjFromCv = (cv, env) => { // returns the entire version object
-    const versions = cv.versions.filter(version => new Set(version.environment_ids).has(env.id));
-    return uniq(versions)?.[0];
-  };
-  const relevantVersionFromCv = (cv, env) =>
-    relevantVersionObjFromCv(cv, env)?.version; // returns the version text e.g. "1.0"
-
   const refreshHostDetails = () => {
     handleModalClose();
     return dispatch(getHostDetails({ hostname: hostName }));
@@ -119,7 +83,7 @@ const ChangeHostCVModal = ({
       id: hostId,
       host: {
         content_facet_attributes: {
-          content_view_id: selectedCVForHost,
+          content_view_id: selectedCVForHostId,
           lifecycle_environment_id: selectedEnvId,
         },
       },
@@ -183,7 +147,7 @@ const ChangeHostCVModal = ({
         headerText={__('Select environment')}
         isDisabled={hostUpdateStatus === STATUS.PENDING}
       />
-      {selectedEnvForHost.length > 0 &&
+      {selectedEnvForHost.length > 0 && contentViewsInEnvStatus !== STATUS.PENDING &&
         <ContentViewSelect
           selections={selectedCVForHost}
           onClear={() => setSelectedCVForHost(null)}
@@ -193,35 +157,9 @@ const ChangeHostCVModal = ({
           onToggle={isExpanded => setCVSelectOpen(isExpanded)}
           placeholderText={cvPlaceholderText()}
         >
-          {contentViewsInEnv?.map(cv => (
-            <SelectOption
-              key={cv.id}
-              value={cv.id}
-            >
-              <Flex
-                direction={{ default: 'row', sm: 'row' }}
-                flexWrap={{ default: 'nowrap' }}
-                alignItems={{ default: 'alignItemsCenter', sm: 'alignItemsCenter' }}
-              >
-                <ContentViewIcon
-                  composite={cv.composite}
-                  size="sm"
-                />
-                <Flex
-                  direction={{ default: 'column', sm: 'column' }}
-                  flexWrap={{ default: 'nowrap' }}
-                  alignItems={{ default: 'alignItemsFlexStart', sm: 'alignItemsFlexStart' }}
-                >
-                  {cv.name}
-                  <ContentViewDescription
-                    cv={cv}
-                    versionNumber={relevantVersionFromCv(cv, selectedEnv)}
-                  />
-                </Flex>
-              </Flex>
-            </SelectOption>
-          ))
-          }
+          {(contentViewsInEnv.length !== 0) &&
+              contentViewsInEnv?.map(cv =>
+                <ContentViewSelectOption key={cv.id} cv={cv} env={selectedEnvForHost[0]} />)}
         </ContentViewSelect>
       }
     </Modal>

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

@@ -20,6 +20,7 @@ import { TranslatedAnchor } from '../../../Table/components/TranslatedPlural';
 import EmptyStateMessage from '../../../Table/EmptyStateMessage';
 import './ErrataOverviewCard.scss';
 import { errataStatusContemplation } from '../../../Errata/errataHelpers';
+import { pluralize } from '../../../../utils/helpers';
 
 function HostInstallableErrata({
   id, errataCounts, errataStatus, errataCategory, errataStatusLabel,
@@ -31,11 +32,11 @@ function HostInstallableErrata({
   const errataEnhance = counts.enhancement;
   const { neededErrata, allUpToDate, otherErrataStatus } = errataStatusContemplation(errataStatus);
   const chartData = [{
-    w: 'security advisories', x: 'security', y: errataSecurity, z: errataTotal,
+    w: __('security advisories'), singular: __('security advisory'), x: 'security', y: errataSecurity, z: errataTotal,
   }, {
-    w: 'bug fixes', x: 'bugfix', y: errataBug, z: errataTotal,
+    w: __('bug fixes'), singular: __('bug fix'), x: 'bugfix', y: errataBug, z: errataTotal,
   }, {
-    w: 'enhancements', x: 'enhancement', y: errataEnhance, z: errataTotal,
+    w: __('enhancements'), singular: __('enhancement'), x: 'enhancement', y: errataEnhance, z: errataTotal,
   }];
   return (
     <CardBody>
@@ -75,7 +76,7 @@ function HostInstallableErrata({
                   ariaDesc="errataChart"
                   data={chartData}
                   constrainToVisibleArea
-                  labels={({ datum }) => `${datum.y} ${datum.w}`}
+                  labels={({ datum }) => pluralize(datum.y, datum.singular, datum.w)}
                   padding={{
                     bottom: 20,
                     left: 20,

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

@@ -169,7 +169,7 @@ export const HostCollectionsModal = ({
         additionalListeners={[hostId, modalType, existingHostCollectionIds.join(',')]}
         fetchItems={fetchItems}
         searchPlaceholderText={__('Search host collections')}
-        autocompleteEndpoint="/host_collections/auto_complete_search"
+        autocompleteEndpoint="/katello/api/v2/host_collections"
         variant={TableVariant.compact}
         {...selectAll}
         displaySelectAllCheckbox={results?.length > 0}