SONAR-8147 Search on Users page should require 2 characters

2 files changed, 19 insertions, 3 deletions

diff --git a/server/sonar-web/src/main/js/apps/users/search-view.js b/server/sonar-web/src/main/js/apps/users/search-view.js
index 2b8c5ccd93b..a07c43dcfb2 100644
--- a/server/sonar-web/src/main/js/apps/users/search-view.js
+++ b/server/sonar-web/src/main/js/apps/users/search-view.js
@@ -24,10 +24,14 @@ import Template from './templates/users-search.hbs';
 export default Marionette.ItemView.extend({
   template: Template,
 
+  ui: {
+    hint: '.js-hint'
+  },
+
   events: {
     'submit #users-search-form': 'onFormSubmit',
-    'search #users-search-query': 'debouncedOnKeyUp',
-    'keyup #users-search-query': 'debouncedOnKeyUp'
+    'search #users-search-query': 'initialOnKeyUp',
+    'keyup #users-search-query': 'initialOnKeyUp'
   },
 
   initialize () {
@@ -44,6 +48,12 @@ export default Marionette.ItemView.extend({
     this.debouncedOnKeyUp();
   },
 
+  initialOnKeyUp () {
+    const q = this.getQuery();
+    this.ui.hint.toggleClass('hidden', q.length !== 1);
+    this.debouncedOnKeyUp();
+  },
+
   onKeyUp () {
     const q = this.getQuery();
     if (q === this._bufferedValue) {
@@ -53,7 +63,10 @@ export default Marionette.ItemView.extend({
     if (this.searchRequest != null) {
       this.searchRequest.abort();
     }
-    this.searchRequest = this.search(q);
+    this.ui.hint.toggleClass('hidden', q.length !== 1);
+    if (q.length !== 1) {
+      this.searchRequest = this.search(q);
+    }
   },
 
   getQuery () {
diff --git a/server/sonar-web/src/main/js/apps/users/templates/users-search.hbs b/server/sonar-web/src/main/js/apps/users/templates/users-search.hbs
index 38805050b80..625c81e15b9 100644
--- a/server/sonar-web/src/main/js/apps/users/templates/users-search.hbs
+++ b/server/sonar-web/src/main/js/apps/users/templates/users-search.hbs
@@ -2,5 +2,8 @@
   <form id="users-search-form" class="search-box">
     <button id="users-search-submit" class="search-box-submit button-clean"><i class="icon-search"></i></button>
     <input id="users-search-query" class="search-box-input" type="search" name="q" placeholder="Search" maxlength="100">
+    <span class="js-hint note spacer-left text-middle hidden">
+      {{tp 'select2.tooShort' 2}}
+    </span>
   </form>
 </div>