webpack/scenes/RedHatRepositories/components/Search.js in katello-4.7.6 vs webpack/scenes/RedHatRepositories/components/Search.js in katello-4.8.0.rc1

@@ -1,12 +1,12 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { Component } from 'react';
 import { DropdownButton, MenuItem } from 'patternfly-react';
 import PropTypes from 'prop-types';
+import SearchBar from 'foremanReact/components/SearchBar';
 import { translate as __ } from 'foremanReact/common/I18n';
 import '../index.scss';
-import Search from '../../../components/Search/index';
 import { orgId } from '../../../services/api';
 
 class RepositorySearch extends Component {
   constructor(props) {
     super(props);
@@ -27,11 +27,10 @@
         title: __('Both'),
       },
     ];
     this.state = { searchList: this.dropDownItems[0] };
     this.onSearch = this.onSearch.bind(this);
-    this.getAutoCompleteParams = this.getAutoCompleteParams.bind(this);
   }
 
   onSearch(search) {
     this.props.onSearch(search);
   }
@@ -39,29 +38,30 @@
   onSelectSearchList(searchList) {
     this.setState({ searchList });
     this.props.onSelectSearchList(searchList.key);
   }
 
-  getAutoCompleteParams(search) {
-    const params = {
-      organization_id: orgId(),
-      search,
-    };
+  getAutoCompleteEndpoint() {
     let endpoint = '';
     if (this.state.searchList.key === 'enabled') {
-      params.enabled = true;
-      endpoint = '/repositories/auto_complete_search';
+      endpoint = '/katello/api/v2/repositories/auto_complete_search';
     } else if (this.state.searchList.key === 'available') {
-      endpoint = '/repository_sets/auto_complete_search';
+      endpoint = '/katello/api/v2/repository_sets/auto_complete_search';
     }
 
-    return {
-      endpoint,
-      params,
-    };
+    return endpoint;
   }
 
+  autocompleteQueryParams() {
+    const params = { organization_id: orgId() };
+    if (this.state.searchList.key === 'enabled') {
+      params.enabled = true;
+    }
+
+    return params;
+  }
+
   render() {
     return (
       <div style={{ display: 'flex' }}>
         <DropdownButton title={this.state.searchList.title} id="search-list-select">
           {this.dropDownItems
@@ -75,12 +75,18 @@
               >
                 {title}
               </MenuItem>
             ))}
         </DropdownButton>
-        <Search
+        <SearchBar
+          data={{
+            autocomplete: {
+              url: this.getAutoCompleteEndpoint(),
+              apiParams: this.autocompleteQueryParams(),
+            },
+            bookmarks: {},
+          }}
           onSearch={this.onSearch}
-          getAutoCompleteParams={this.getAutoCompleteParams}
         />
       </div>
     );
   }
 }