SONAR-4004 require 3 characters to search

3 files changed, 25 insertions, 3 deletions

diff --git a/server/sonar-web/src/main/js/apps/code/actions/index.js b/server/sonar-web/src/main/js/apps/code/actions/index.js
index a89e78786f5..6bca96a7b02 100644
--- a/server/sonar-web/src/main/js/apps/code/actions/index.js
+++ b/server/sonar-web/src/main/js/apps/code/actions/index.js
@@ -222,7 +222,10 @@ debouncedSearch = _.debounce(debouncedSearch, 250);
 export function search (query, baseComponent) {
   return dispatch => {
     dispatch(updateQueryAction(query));
-    debouncedSearch(query, baseComponent, dispatch);
+
+    if (query.length > 2 || !query.length) {
+      debouncedSearch(query, baseComponent, dispatch);
+    }
   };
 }
 
diff --git a/server/sonar-web/src/main/js/apps/code/components/Search.js b/server/sonar-web/src/main/js/apps/code/components/Search.js
index 60522b0f759..97cba288b03 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Search.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Search.js
@@ -19,8 +19,10 @@
  */
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import classNames from 'classnames';
 
 import { search, selectCurrent, selectNext, selectPrev } from '../actions';
+import { translateWithParameters } from '../../../helpers/l10n';
 
 
 class Search extends Component {
@@ -44,7 +46,7 @@ class Search extends Component {
         dispatch(selectNext());
         break;
       default:
-      // do nothing
+        // do nothing
     }
   }
 
@@ -57,6 +59,9 @@ class Search extends Component {
 
   render () {
     const { query } = this.props;
+    const inputClassName = classNames('search-box-input', {
+      'touched': query.length > 0 && query.length < 3
+    });
 
     return (
         <form
@@ -70,12 +75,15 @@ class Search extends Component {
               onKeyDown={this.handleKeyDown.bind(this)}
               onChange={this.handleSearch.bind(this)}
               value={query}
-              className="search-box-input"
+              className={inputClassName}
               type="search"
               name="q"
               placeholder="Search"
               maxLength="100"
               autoComplete="off"/>
+          <div className="note">
+            {translateWithParameters('select2.tooShort', 3)}
+          </div>
         </form>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/code/styles/code.css b/server/sonar-web/src/main/js/apps/code/styles/code.css
index 3577f7f341e..f5ffda5a8e0 100644
--- a/server/sonar-web/src/main/js/apps/code/styles/code.css
+++ b/server/sonar-web/src/main/js/apps/code/styles/code.css
@@ -49,3 +49,14 @@
   float: left;
   padding-right: 10px;
 }
+
+.code-search-box .note {
+  margin-top: 4px;
+  margin-left: 25px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.code-search-box input.touched ~ .note {
+  opacity: 1;
+}