katello 4.7.3 → 4.8.0.rc1

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/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}

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

@@ -3,7 +3,7 @@ import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-
 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 { assertNockRequest, mockAutocomplete, nockInstance } from '../../../../../../test-utils/nockWrapper';
 import katelloApi, { foremanApi } from '../../../../../../services/api';
 import { HostCollectionsAddModal, HostCollectionsRemoveModal } from '../HostCollectionsModal';
 
@@ -38,20 +38,11 @@ const defaultQueryWithAvailable = {
 };
 
 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) => {
@@ -153,13 +144,6 @@ 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) => {

data/webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.js

@@ -99,7 +99,18 @@ export const ErrataTab = () => {
   const { allUpToDate, neededErrata } = errataStatusContemplation(errataStatus);
   const emptySearchTitle = __('No matching errata found');
   const emptySearchBody = __('Try changing your search settings.');
+  const resetFiltersOnly = () => {
+    setErrataTypeSelected(ERRATA_TYPE);
+    setErrataSeveritySelected(ERRATA_SEVERITY);
+  };
+
+  const resetFiltersAndToggle = () => {
+    resetFiltersOnly();
+    setToggleGroupState(APPLICABLE);
+  };
 
+  let resetFilters = resetFiltersOnly;
+  let secondaryActionTextOverride;
   let emptyContentTitle;
   let emptyContentBody;
   switch (friendlyErrataStatus(errataStatus)) {
@@ -108,8 +119,10 @@ export const ErrataTab = () => {
     emptyContentBody = __('No action is needed because there are no applicable errata for this host.');
     break;
   case 'Needed':
-    emptyContentTitle = __('This host has errata that are applicable, but not installable.');
-    emptyContentBody = __("You may want to check the host's content view and lifecycle environment.");
+    emptyContentTitle = __('No matching errata found');
+    emptyContentBody = __('This host has errata that are applicable, but not installable. Adjust your filters and try again.');
+    resetFilters = resetFiltersAndToggle;
+    secondaryActionTextOverride = __('View applicable errata');
     break;
   case 'Unknown':
     emptyContentTitle = __('Unknown errata status');
@@ -286,11 +299,6 @@ export const ErrataTab = () => {
     }
   };
 
-  const resetFilters = () => {
-    setErrataTypeSelected(ERRATA_TYPE);
-    setErrataSeveritySelected(ERRATA_SEVERITY);
-  };
-
   const readOnlyBookmarks =
   cannot(createBookmarks, userPermissionsFromHostDetails({ hostDetails }));
 
@@ -476,8 +484,10 @@ export const ErrataTab = () => {
             selectNone,
             toggleGroup,
             resetFilters,
+            secondaryActionTextOverride,
           }
           }
+          showSecondaryActionButton={neededErrata}
           happyEmptyContent={allUpToDate}
           ouiaId="host-errata-table"
           additionalListeners={[
@@ -487,8 +497,7 @@ export const ErrataTab = () => {
           fetchItems={fetchItems}
           bookmarkController="katello_errata"
           readOnlyBookmarks={readOnlyBookmarks}
-          autocompleteEndpoint={`/hosts/${hostId}/errata/auto_complete_search`}
-          foremanApiAutoComplete
+          autocompleteEndpoint={`/api/v2/hosts/${hostId}/errata`}
           rowsCount={results?.length}
           variant={TableVariant.compact}
           {...selectAll}

data/webpack/components/extensions/HostDetails/Tabs/ModuleStreamsTab/ModuleStreamsTab.js

@@ -379,8 +379,7 @@ export const ModuleStreamsTab = () => {
           fetchItems={fetchItems}
           bookmarkController="katello_host_available_module_streams"
           readOnlyBookmarks={hideBookmarkActions}
-          autocompleteEndpoint={`/hosts/${hostId}/module_streams/auto_complete_search`}
-          foremanApiAutoComplete
+          autocompleteEndpoint={`/api/v2/hosts/${hostId}/module_streams`}
           rowsCount={results?.length}
           variant={TableVariant.compact}
           requestKey={MODULE_STREAMS_KEY}

data/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackageInstallModal.js

@@ -219,8 +219,7 @@ const PackageInstallModal = ({
         additionalListeners={[hostId]}
         fetchItems={fetchItems}
         searchPlaceholderText={__('Search available packages')}
-        autocompleteEndpoint={`/hosts/${hostId}/packages/auto_complete_search`}
-        foremanApiAutoComplete
+        autocompleteEndpoint={`/api/v2/hosts/${hostId}/packages`}
         variant={TableVariant.compact}
         {...selectAll}
         displaySelectAllCheckbox

data/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackagesTab.js

@@ -521,8 +521,7 @@ export const PackagesTab = () => {
           fetchItems={fetchItems}
           bookmarkController="katello_host_installed_packages"
           readOnlyBookmarks={readOnlyBookmarks}
-          autocompleteEndpoint={`/hosts/${hostId}/packages/auto_complete_search`}
-          foremanApiAutoComplete
+          autocompleteEndpoint={`/api/v2/hosts/${hostId}/packages`}
           rowsCount={results?.length}
           variant={TableVariant.compact}
           {...selectAll}