katello 4.8.0.rc2 → 4.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 623f96f2d316d946b9a19bbed0bd70a58c56541dfcde05261848efb7f868881d
-  data.tar.gz: f39b3c6dca68f3b742f6a09fb5a821ab5e9d11128835023f09a5a8df30a27272
+  metadata.gz: 2919242e09a707d0f3a395e9aaa41cb10a5df4230c72d9fa9c9a2ea4fec084c8
+  data.tar.gz: 4231fadf860f0c63c5ccbd98e05f96019eae6e91c3e12abf45c22c958ad27c67
 SHA512:
-  metadata.gz: 3d4e46aa5cdededbea344d58cc4dd5c43c1fcdd480e5a62594a1bf0892ff80c048e07a3a7460646b2778502849cc58d7ab6f8f22aaeb1ce3fd0ea8aa59f844c7
-  data.tar.gz: 97fa1540ab108458032dc4a4963b9644af0a6c7207079bf2c3ef2cc895cacab6521eec73e4ed4aadc2eaf8428fc3b2d5b7bec489a03f02a2d972310344b7c07f
+  metadata.gz: 3c3c89ea507b6f247fb1b40b17e615c903e24475b63f9b19d19ebfe1c7d284629b089c87358b3f9a0e35f09b78109823509826c70e21a21dfb8de20ade93a574
+  data.tar.gz: d71b28cc37b495a5a836031b7598819070e58c881c5e77bfe292816c2639508dbf075ef5d1234f31b96480a6ea131a8fdbdec0ea4609c2fbccab1a78cc96f5cf

data/lib/katello/plugin.rb

@@ -651,18 +651,6 @@ Foreman::Plugin.register :katello do
         full_name: N_('Applicability Batch Size'),
         description: N_("Number of host applicability calculations to process per task.")
 
-      setting 'autosearch_while_typing',
-        type: :boolean,
-        default: true,
-        full_name: N_('Autosearch'),
-        description: N_('For pages that support it, automatically perform search while typing in search input.')
-
-      setting 'autosearch_delay',
-        type: :integer,
-        default: 500,
-        full_name: N_('Autosearch delay'),
-        description: N_('If Autosearch is enabled, delay in milliseconds before executing searches while typing.')
-
       setting 'bulk_load_size',
         type: :integer,
         default: 2000,

data/lib/katello/version.rb

@@ -1,3 +1,3 @@
 module Katello
-  VERSION = "4.8.0.rc2".freeze
+  VERSION = "4.8.0".freeze
 end

data/webpack/components/Content/{ContentPage.js → GenericContentPage.js}

@@ -4,8 +4,9 @@ import { Grid, Col, Row, Form, FormGroup } from 'react-bootstrap';
 import SearchBar from 'foremanReact/components/SearchBar';
 import { getControllerSearchProps } from 'foremanReact/constants';
 import ContentTable from './ContentTable';
+import { useClearSearch } from '../extensions/SearchBar/SearchBarHooks';
 
-const ContentPage = ({
+const GenericContentPage = ({
   header, onSearch, bookmarkController,
   autocompleteEndpoint, autocompleteQueryParams,
   updateSearchQuery, initialInputValue,
@@ -15,6 +16,7 @@ const ContentPage = ({
     ...getControllerSearchProps(autocompleteEndpoint, `searchBar-content-page-${header}`, true, autocompleteQueryParams),
     controller: bookmarkController,
   };
+  const searchBarKey = useClearSearch({ updateSearchQuery });
   return (
     <Grid bsClass="container-fluid">
       <Row>
@@ -27,6 +29,7 @@ const ContentPage = ({
           <Form className="toolbar-pf-actions">
             <FormGroup className="toolbar-pf toolbar-pf-filter">
               <SearchBar
+                key={searchBarKey}
                 data={searchDataProp}
                 onSearch={onSearch}
                 onSearchChange={updateSearchQuery}
@@ -49,7 +52,7 @@ const ContentPage = ({
   );
 };
 
-ContentPage.propTypes = {
+GenericContentPage.propTypes = {
   header: PropTypes.string.isRequired,
   content: PropTypes.shape({}).isRequired,
   tableSchema: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
@@ -62,10 +65,10 @@ ContentPage.propTypes = {
   bookmarkController: PropTypes.string,
 };
 
-ContentPage.defaultProps = {
+GenericContentPage.defaultProps = {
   autocompleteEndpoint: undefined,
   autocompleteQueryParams: undefined,
   bookmarkController: undefined,
 };
 
-export default ContentPage;
+export default GenericContentPage;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import ContentTable from '../ContentTable';
 import { LoadingState } from '../../../components/LoadingState';
 import { Table } from '../../../components/pf3Table';
+import ContentTable from '../ContentTable';
 
 describe('Content Table', () => {
   it('should render and contain appropriate components', async () => {

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { act } from 'react-test-renderer';
+import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import { CONTENT_KEY } from '../../../scenes/Content/ContentConstants';
+import GenericContentPage from '../GenericContentPage';
+
+const renderOptions = () => ({
+  apiNamespace: CONTENT_KEY,
+});
+
+test('Can render the basic component with no data', async (done) => {
+  const contentHeader = 'Content Header';
+  const content = { results: [] };
+  const onSearch = jest.fn();
+  const updateSearchQuery = jest.fn();
+  const searchQuery = '';
+  const onPaginationChange = jest.fn();
+  const TableSchema = [];
+  const bookmarkController = 'module_streams';
+
+  const { getByText } = renderWithRedux(<GenericContentPage
+    header={contentHeader}
+    content={content}
+    tableSchema={TableSchema}
+    onSearch={onSearch}
+    updateSearchQuery={updateSearchQuery}
+    initialInputValue={searchQuery}
+    onPaginationChange={onPaginationChange}
+    bookmarkController={bookmarkController}
+  />, renderOptions());
+
+  await patientlyWaitFor(() =>
+    expect(getByText(contentHeader)).toBeInTheDocument());
+  act(done);
+});

data/webpack/components/Search/SearchText.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { SearchAutocomplete } from 'foremanReact/components/SearchBar/SearchAutocomplete';
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { STATUS } from 'foremanReact/constants';
+import { noop } from 'foremanReact/common/helpers';
+
+const SearchText = ({
+  data: {
+    autocomplete: { url, apiParams } = { url: '' },
+    disabled,
+  },
+  initialQuery,
+  onSearchChange,
+  name,
+}) => {
+  const [search, setSearch] = useState(initialQuery || '');
+  const getAPIparams = input => ({ ...apiParams(input) });
+  const { response, status, setAPIOptions } = useAPI('get', url, {
+    params: getAPIparams(search),
+  });
+  const onChange = (newValue) => {
+    onSearchChange(newValue);
+    setSearch(newValue);
+    setAPIOptions({ params: { ...getAPIparams(newValue) } });
+  };
+  const error =
+    status === STATUS.ERROR || response?.[0]?.error
+      ? response?.[0]?.error || response.message
+      : null;
+
+  let results = [];
+  if (Array.isArray(response) && !error) {
+    results = response.map(item => ({ label: item, category: '' }));
+  }
+
+  return (
+    <div className="foreman-search-text">
+      <SearchAutocomplete
+        results={results}
+        onSearchChange={onChange}
+        value={search}
+        disabled={disabled}
+        error={error}
+        name={name}
+      />
+    </div>
+  );
+};
+
+SearchText.propTypes = {
+  data: PropTypes.shape({
+    autocomplete: PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      apiParams: PropTypes.func,
+    }).isRequired,
+    disabled: PropTypes.bool,
+  }).isRequired,
+  initialQuery: PropTypes.string,
+  onSearchChange: PropTypes.func,
+  name: PropTypes.string,
+};
+
+SearchText.defaultProps = {
+  initialQuery: '',
+  onSearchChange: noop,
+  name: null,
+};
+
+export default SearchText;

data/webpack/components/Table/EmptyStateMessage.js

@@ -14,7 +14,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { CubeIcon, ExclamationCircleIcon, SearchIcon, CheckCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
 import { global_danger_color_200 as dangerColor, global_success_color_100 as successColor } from '@patternfly/react-tokens';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectHostDetailsClearSearch } from '../extensions/HostDetails/HostDetailsSelectors';
+import { selectSearchBarClearSearch } from '../extensions/SearchBar/SearchBarSelectors';
 
 const KatelloEmptyStateIcon = ({
   error, search, customIcon, happyIcon,
@@ -51,7 +51,7 @@ const EmptyStateMessage = ({
   const defaultSecondaryActionText = searchIsActive ? __('Clear search') : __('Clear filters');
   const secondaryActionText = secondaryActionTextOverride || defaultSecondaryActionText;
   const dispatch = useDispatch();
-  const clearSearch = useSelector(selectHostDetailsClearSearch);
+  const clearSearch = useSelector(selectSearchBarClearSearch);
   const showSecondaryActionAnchor = showSecondaryAction && secondaryActionLink;
   const handleClick = () => {
     if (searchIsActive) {

data/webpack/components/Table/TableWrapper.js

@@ -14,6 +14,7 @@ import MainTable from './MainTable';
 import { getPageStats } from './helpers';
 import SelectAllCheckbox from '../SelectAllCheckbox';
 import { orgId } from '../../services/api';
+import { useClearSearch } from '../extensions/SearchBar/SearchBarHooks';
 
 /* Patternfly 4 table wrapper */
 const TableWrapper = ({
@@ -132,6 +133,8 @@ const TableWrapper = ({
     spawnFetch();
   }, [searchQuery, spawnFetch, additionalListeners]);
 
+  const searchBarKey = useClearSearch({ updateSearchQuery });
+
   // 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) => {
@@ -194,6 +197,7 @@ const TableWrapper = ({
               data={searchDataProp}
               initialQuery={searchQuery}
               onSearch={search => updateSearchQuery(search)}
+              key={searchBarKey}
             />
           </FlexItem>
         }

data/webpack/components/extensions/HostDetails/HostDetailsConstants.js

@@ -1,3 +1,2 @@
-export const SET_CLEAR_SEARCH = 'SET_CLEAR_SEARCH';
 const HOST_DETAILS = 'HOST_DETAILS';
 export default HOST_DETAILS;

data/webpack/components/extensions/HostDetails/HostDetailsSelectors.js

@@ -14,9 +14,3 @@ export const selectHostDetailsStatus = state =>
 
 export const selectHostDetailsError = state =>
   selectAPIError(state, HOST_DETAILS_KEY);
-
-export const selectHostDetailsState = state =>
-  state.katello.hostDetails;
-
-export const selectHostDetailsClearSearch = state =>
-  selectHostDetailsState(state).clearSearch;

data/webpack/components/extensions/HostDetails/Tabs/__tests__/moduleStreamsTab.test.js

@@ -93,6 +93,82 @@ test('Can handle no Module streams being present', async (done) => {
   act(done);
 });
 
+test('When there are no search results, can display an empty state with a clear search link that works', async (done) => {
+  // Setup autocomplete with mockForemanAutoComplete since we aren't adding /katello
+  const autocompleteScope = mockForemanAutocomplete(nockInstance, autocompleteUrl);
+  const noResults = {
+    total: 0,
+    subtotal: 0,
+    page: 1,
+    search: 'bad search',
+    per_page: 20,
+    results: [],
+  };
+
+  const initialScope = nockInstance
+    .get(hostModuleStreams)
+    .query(true)
+    .times(1)
+    .reply(200, mockModuleStreams);
+
+  const badSearchScope = nockInstance
+    .get(hostModuleStreams)
+    .query({
+      sort_by: 'name',
+      sort_order: 'asc',
+      per_page: '20',
+      page: '1',
+      search: 'bad search',
+    })
+    .reply(200, noResults);
+
+  const badAutoCompleteScope =
+    mockForemanAutocomplete(
+      nockInstance,
+      autocompleteUrl,
+      true,
+      [],
+      2, // times
+    );
+
+  const scopeWithoutSearch = nockInstance
+    .get(hostModuleStreams)
+    .query(true)
+    .reply(200, mockModuleStreams);
+
+  const { queryByText, getByRole } = renderWithRedux(<ModuleStreamsTab />, renderOptions());
+
+
+  await patientlyWaitFor(() => expect(queryByText(firstModuleStreams.name)).toBeInTheDocument());
+
+  const searchInput = getByRole('textbox', { name: 'Search input' });
+  // Foreman SearchAutocomplete doesn't run onSearchChange unless the element is focused!
+  searchInput.focus();
+
+  fireEvent.change(searchInput, { target: { value: 'bad search' } });
+  expect(searchInput.value).toBe('bad search');
+  const searchButton = getByRole('button', { name: 'Search' });
+  expect(searchButton).not.toHaveAttribute('aria-disabled', true);
+  fireEvent.click(searchButton);
+
+  await patientlyWaitFor(() => expect(queryByText('Your search returned no matching Module streams.')).toBeInTheDocument());
+  // Now click the clear search link and assert that the search is cleared and the results are back
+  const clearSearchLink = getByRole('button', { name: 'Clear search' });
+  fireEvent.click(clearSearchLink);
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(firstModuleStreams.name)).toBeInTheDocument();
+    expect(getByRole('textbox', { name: 'Search input' }).value).toBe('');
+    expect(queryByText('Clear search')).not.toBeInTheDocument();
+  });
+
+  assertNockRequest(initialScope);
+  assertNockRequest(badAutoCompleteScope);
+  assertNockRequest(badSearchScope);
+  assertNockRequest(scopeWithoutSearch);
+  assertNockRequest(autocompleteScope, done);
+});
+
 test('Can filter results based on status', async (done) => {
   const autocompleteScope = mockForemanAutocomplete(nockInstance, autocompleteUrl);
   const scope = nockInstance

data/webpack/components/extensions/SearchBar/SearchBarConstants.js

@@ -0,0 +1,3 @@
+export const SET_CLEAR_SEARCH = 'SET_CLEAR_SEARCH';
+
+export default SET_CLEAR_SEARCH;

data/webpack/components/extensions/SearchBar/SearchBarHooks.js

@@ -0,0 +1,50 @@
+import { useEffect, useCallback, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectSearchBarClearSearch } from './SearchBarSelectors';
+
+export const useClearSearch = ({
+  updateSearchQuery,
+}) => {
+  const dispatch = useDispatch();
+  // We keep the clearSearch function in Redux to avoid prop drilling and make EmptyStateMessage
+  // more reusable both with and without TableWrapper.
+  const existingClearSearch = useSelector(selectSearchBarClearSearch);
+  // In Katello we don't have access to Foreman <SearchBar /> component's internal state,
+  // so we don't have an easy way to clear the search input. We can use a counter to
+  // pass as a key prop to the <SearchBar /> component, which will force it to reset
+  // its internal state when clearSearch is called.
+  const counter = useRef(0);
+
+  const clearSearch = useCallback(() => {
+    counter.current += 1; // reset the text input
+    if (typeof updateSearchQuery !== 'function') {
+      // eslint-disable-next-line no-console
+      console.error('You must pass the updateSearchQuery function to useClearSearch');
+      return;
+    }
+    updateSearchQuery(''); // make a new API call with blank search query
+  }, [updateSearchQuery]);
+
+  useEffect(() => {
+    if (typeof existingClearSearch !== 'function') {
+      dispatch({
+        type: 'SET_CLEAR_SEARCH',
+        payload: clearSearch,
+      });
+    }
+  }, [dispatch, existingClearSearch, clearSearch]);
+
+  // eslint-disable-next-line arrow-body-style
+  useEffect(() => {
+    return function cleanupClearSearch() {
+      dispatch({
+        type: 'SET_CLEAR_SEARCH',
+        payload: {},
+      });
+    };
+  }, [dispatch]);
+
+  return `search-bar-${counter.current}`;
+};
+
+export default useClearSearch;

data/webpack/components/extensions/SearchBar/SearchBarReducer.js

@@ -0,0 +1,14 @@
+import Immutable from 'seamless-immutable';
+
+import { SET_CLEAR_SEARCH } from './SearchBarConstants';
+
+const initialState = Immutable({ clearSearch: undefined });
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+  case SET_CLEAR_SEARCH:
+    return state.set('clearSearch', action.payload);
+  default:
+    return state;
+  }
+};

data/webpack/components/extensions/SearchBar/SearchBarSelectors.js

@@ -0,0 +1,5 @@
+export const selectSearchBarState = state =>
+  state.katello.searchBar;
+
+export const selectSearchBarClearSearch = state =>
+  selectSearchBarState(state)?.clearSearch;

data/webpack/redux/reducers/index.js

@@ -4,7 +4,6 @@ import redHatRepositories from './RedHatRepositories';
 import { subscriptions } from '../../scenes/Subscriptions';
 import { upstreamSubscriptions } from '../../scenes/Subscriptions/UpstreamSubscriptions';
 import { manifestHistory } from '../../scenes/Subscriptions/Manifest';
-import settings from '../../scenes/Settings';
 import { subscriptionDetails } from '../../scenes/Subscriptions/Details';
 import { setOrganization } from '../../components/SelectOrg/SetOrganization';
 import { moduleStreams } from '../../scenes/ModuleStreams';
@@ -13,6 +12,7 @@ import { moduleStreamDetails } from '../../scenes/ModuleStreams/Details';
 import { reducers as systemStatuses } from '../../components/extensions/about';
 import { contentViewDetails } from '../../scenes/ContentViews/Details';
 import hostDetails from '../../components/extensions/HostDetails/HostDetailsReducer';
+import searchBar from '../../components/extensions/SearchBar/SearchBarReducer';
 
 export default combineReducers({
   organization,
@@ -20,13 +20,13 @@ export default combineReducers({
   subscriptions,
   upstreamSubscriptions,
   manifestHistory,
-  settings,
   subscriptionDetails,
   setOrganization,
   moduleStreams,
   moduleStreamDetails,
   contentViewDetails,
   hostDetails,
+  searchBar,
   ...organizationProductsReducers,
   ...systemStatuses,
 });

data/webpack/scenes/AlternateContentSources/Create/__tests__/acsCreate.test.js

@@ -3,7 +3,7 @@ import * as reactRedux from 'react-redux';
 import { Route } from 'react-router-dom';
 import { act, fireEvent, patientlyWaitFor, renderWithRedux } from 'react-testing-lib-wrapper';
 import api, { foremanApi } from '../../../../services/api';
-import { assertNockRequest, mockAutocomplete, mockSetting, nockInstance } from '../../../../test-utils/nockWrapper';
+import { assertNockRequest, mockAutocomplete, nockInstance } from '../../../../test-utils/nockWrapper';
 import ACSTable from '../../MainTable/ACSTable';
 import contentCredentialResult from './contentCredentials.fixtures';
 import smartProxyResult from './smartProxy.fixtures';
@@ -70,18 +70,6 @@ const renderOptions = {
   },
 };
 
-let searchDelayScope;
-let autoSearchScope;
-beforeEach(() => {
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
-});
-
-afterEach(() => {
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
-});
-
 test('Can show add ACS button if can_create is true', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const scope = nockInstance

data/webpack/scenes/AlternateContentSources/MainTable/ACSTable.js

@@ -107,6 +107,7 @@ const ACSTable = () => {
   const onBulkDelete = (ids) => {
     setDeleting(true);
     dispatch(bulkDeleteACS({ ids }, () => {
+      setDeleting(false);
       if (acsId && ids.has(Number(acsId))) {
         push('/alternate_content_sources');
       } else {

data/webpack/scenes/Content/{ContentPage.js → GenericContentPage.js}

@@ -12,7 +12,7 @@ import { getContentTypes } from './ContentActions';
 import Loading from '../../components/Loading';
 import EmptyStateMessage from '../../components/Table/EmptyStateMessage';
 
-const ContentPage = () => {
+const GenericContentPage = () => {
   const dispatch = useDispatch();
   const contentTypesResponse = useSelector(selectContentTypes);
   const contentTypesStatus = useSelector(selectContentTypesStatus);
@@ -86,4 +86,4 @@ const ContentPage = () => {
   );
 };
 
-export default ContentPage;
+export default GenericContentPage;

data/webpack/scenes/Content/__tests__/contentTable.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
 import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../test-utils/nockWrapper';
 import api from '../../../services/api';
-import ContentPage from '../ContentPage';
+import GenericContentPage from '../GenericContentPage';
 import ansibleCollectionsResponse from './ansibleCollections.fixtures';
 import contentTypesResponse from './contentTypes.fixtures.json';
 import pythonPackagesResponse from './pythonPackages.fixtures.json';
@@ -29,7 +29,7 @@ test('Can call API for Python Packages and show table on page load', async (done
     .reply(200, contentTypesResponse);
 
   const { queryByText, getAllByText } =
-    renderWithRedux(<ContentPage />);
+    renderWithRedux(<GenericContentPage />);
 
   expect(queryByText(firstPackage.name)).toBeNull();
   await patientlyWaitFor(() => {

data/webpack/scenes/Content/index.js

@@ -1,4 +1,4 @@
 import { withRouter } from 'react-router-dom';
-import ContentPage from './ContentPage';
+import GenericContentPage from './GenericContentPage';
 
-export default withRouter(ContentPage);
+export default withRouter(GenericContentPage);

data/webpack/scenes/ContentViews/Details/Filters/Rules/ContainerTag/AddEditContainerTagRuleModal.js

@@ -5,7 +5,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { Modal, ModalVariant, Form, FormGroup, ActionGroup, Button } from '@patternfly/react-core';
 import { addCVFilterRule, editCVFilterRule, getCVFilterRules } from '../../../ContentViewDetailActions';
 import { orgId } from '../../../../../../services/api';
-import Search from '../../../../../../components/Search/Search';
+import SearchText from '../../../../../../components/Search/SearchText';
 
 const AddEditContainerTagRuleModal = ({
   onClose, filterId, selectedFilterRuleData, repositoryIds,
@@ -16,7 +16,7 @@ const AddEditContainerTagRuleModal = ({
   const [saving, setSaving] = useState(false);
   const isEditing = name && id;
 
-  const autoCompleteEndpoint = '/docker_tags/auto_complete_name';
+  const autoCompleteEndpoint = '/katello/api/v2/docker_tags/auto_complete_name';
 
   const onSubmit = () => {
     setSaving(true);
@@ -36,13 +36,10 @@ const AddEditContainerTagRuleModal = ({
     onClose();
   };
 
-  const getAutoCompleteParams = term => ({
-    endpoint: autoCompleteEndpoint,
-    params: {
-      organization_id: orgId(),
-      term,
-      repoids: repositoryIds,
-    },
+  const searchDataProp = term => ({
+    organization_id: orgId(),
+    term,
+    repoids: repositoryIds,
   });
 
   return (
@@ -59,14 +56,14 @@ const AddEditContainerTagRuleModal = ({
       }}
       >
         <FormGroup label={__('Tag name')} isRequired fieldId="tag_name">
-          <Search
-            patternfly4
-            initialInputValue={tagName}
-            onSearch={() => {}}
-            getAutoCompleteParams={getAutoCompleteParams}
-            foremanApiAutoComplete={false}
-            isTextInput
-            setTextInputValue={setTagName}
+          <SearchText
+            data={{
+              autocomplete: {
+                url: autoCompleteEndpoint,
+                apiParams: tag => searchDataProp(tag),
+              },
+            }}
+            onSearchChange={setTagName}
           />
         </FormGroup>
         <ActionGroup>