SONAR-9225 Make all search bars consistent

2 files changed, 14 insertions, 26 deletions

diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
index 365ed241de1..d25651d6c6c 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
@@ -19,11 +19,12 @@
  */
 // @flow
 import React from 'react';
-import { debounce, map } from 'lodash';
+import { map } from 'lodash';
 import Avatar from '../../../components/ui/Avatar';
 import BubblePopup from '../../../components/common/BubblePopup';
 import SelectList from '../../../components/common/SelectList';
 import SelectListItem from '../../../components/common/SelectListItem';
+import SearchBox from '../../../components/controls/SearchBox';
 import getCurrentUserFromStore from '../../../app/utils/getCurrentUserFromStore';
 import { areThereCustomOrganizations } from '../../../store/organizations/utils';
 import { searchMembers } from '../../../api/organizations';
@@ -68,8 +69,6 @@ export default class SetAssigneePopup extends React.PureComponent {
   constructor(props /*: Props */) {
     super(props);
     this.organizationEnabled = areThereCustomOrganizations();
-    this.searchUsers = debounce(this.searchUsers, 250);
-    this.searchMembers = debounce(this.searchMembers, 250);
     this.defaultUsersArray = [{ login: '', name: translate('unassigned') }];
 
     const currentUser = getCurrentUserFromStore();
@@ -103,9 +102,8 @@ export default class SetAssigneePopup extends React.PureComponent {
     });
   };
 
-  handleSearchChange = (evt /*: SyntheticInputEvent */) => {
-    const query = evt.target.value;
-    if (query.length < 2) {
+  handleSearchChange = (query /*: string */) => {
+    if (query.length === 0) {
       this.setState({
         query,
         users: this.defaultUsersArray,
@@ -127,18 +125,13 @@ export default class SetAssigneePopup extends React.PureComponent {
         position={this.props.popupPosition}
         customClass="bubble-popup-menu bubble-popup-bottom">
         <div className="multi-select">
-          <div className="search-box menu-search">
-            <button className="search-box-submit button-clean">
-              <i className="icon-search-new" />
-            </button>
-            <input
-              type="search"
-              value={this.state.query}
-              className="search-box-input"
-              placeholder={translate('search_verb')}
-              onChange={this.handleSearchChange}
-              autoComplete="off"
+          <div className="menu-search">
+            <SearchBox
               autoFocus={true}
+              minLength={2}
+              onChange={this.handleSearchChange}
+              placeholder={translate('search.search_for_users')}
+              value={this.state.query}
             />
           </div>
           <SelectList
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.js b/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.js
index a9ac6e5d328..a9a3617af05 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.js
@@ -19,7 +19,7 @@
  */
 //@flow
 import React from 'react';
-import { debounce, without } from 'lodash';
+import { without } from 'lodash';
 import TagsSelector from '../../../components/tags/TagsSelector';
 import { searchIssueTags } from '../../../api/issues';
 
@@ -44,13 +44,7 @@ const LIST_SIZE = 10;
 export default class SetIssueTagsPopup extends React.PureComponent {
   /*:: mounted: boolean; */
   /*:: props: Props; */
-  /*:: state: State; */
-
-  constructor(props /*: Props */) {
-    super(props);
-    this.state = { searchResult: [] };
-    this.onSearch = debounce(this.onSearch, 250);
-  }
+  state /*: State */ = { searchResult: [] };
 
   componentDidMount() {
     this.mounted = true;
@@ -63,7 +57,7 @@ export default class SetIssueTagsPopup extends React.PureComponent {
 
   onSearch = (query /*: string */) => {
     searchIssueTags({
-      q: query || '',
+      q: query,
       ps: Math.min(this.props.selectedTags.length - 1 + LIST_SIZE, 100),
       organization: this.props.organization
     }).then((tags /*: Array<string> */) => {
@@ -83,6 +77,7 @@ export default class SetIssueTagsPopup extends React.PureComponent {
 
   render() {
     return (
+      // $FlowFixMe `this.props.popupPosition` is passed from `BabelPopupHelper`
       <TagsSelector
         position={this.props.popupPosition}
         tags={this.state.searchResult}