SONAR-6834 add search form

3 files changed, 68 insertions, 14 deletions

diff --git a/server/sonar-web/src/main/js/apps/background-tasks/constants.js b/server/sonar-web/src/main/js/apps/background-tasks/constants.js
index 68c14edb5b0..9988ee344fd 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/constants.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/constants.js
@@ -22,3 +22,6 @@ export const DATE = {
 
 
 export const DATE_FORMAT = 'YYYY-MM-DD';
+
+
+export const DEBOUNCE_DELAY = 250;
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/main.js b/server/sonar-web/src/main/js/apps/background-tasks/main.js
index ddffd8d8831..b9b7ced5138 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/main.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/main.js
@@ -19,7 +19,8 @@ export default React.createClass({
       activityPage: 1,
       statusFilter: STATUSES.ALL,
       currentsFilter: CURRENTS.ALL,
-      dateFilter: DATE.ANY
+      dateFilter: DATE.ANY,
+      searchQuery: ''
     };
   },
 
@@ -77,6 +78,9 @@ export default React.createClass({
     if (this.state.dateFilter !== DATE.ANY) {
       _.extend(filters, this.getDateFilter());
     }
+    if (this.state.searchQuery) {
+      _.extend(filters, { componentQuery: this.state.searchQuery });
+    }
     return filters;
   },
 
@@ -158,6 +162,10 @@ export default React.createClass({
     }, this.requestData);
   },
 
+  onSearch(query) {
+    this.setState({ searchQuery: query }, this.requestData);
+  },
+
   loadMore() {
     this.setState({ activityPage: this.state.activityPage + 1 }, this.requestActivity);
   },
@@ -186,9 +194,17 @@ export default React.createClass({
     return (
         <div className="page">
           <Header/>
+
           <Stats {...this.state} cancelPending={this.cancelPending} showFailures={this.showFailures}/>
-          <Search {...this.state} onStatusChange={this.onStatusChange} onCurrentsChange={this.onCurrentsChange} onDateChange={this.onDateChange}/>
+
+          <Search {...this.props} {...this.state}
+              onStatusChange={this.onStatusChange}
+              onCurrentsChange={this.onCurrentsChange}
+              onDateChange={this.onDateChange}
+              onSearch={this.onSearch}/>
+
           <Tasks tasks={[].concat(this.state.queue, this.state.activity)} onTaskCanceled={this.onTaskCanceled}/>
+
           <ListFooter count={this.state.queue.length + this.state.activity.length}
                       total={this.state.queue.length + this.state.activityTotal}
                       loadMore={this.loadMore}/>
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/search.js b/server/sonar-web/src/main/js/apps/background-tasks/search.js
index 994a035a9be..d70ab5e1337 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/search.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/search.js
@@ -1,7 +1,8 @@
 import $ from 'jquery';
+import _ from 'underscore';
 import React from 'react';
 import RadioToggle from '../../components/shared/radio-toggle';
-import {STATUSES, CURRENTS, DATE, DATE_FORMAT} from './constants';
+import {STATUSES, CURRENTS, DATE, DATE_FORMAT, DEBOUNCE_DELAY} from './constants';
 
 export default React.createClass({
   componentDidUpdate() {
@@ -12,6 +13,10 @@ export default React.createClass({
     this.attachDatePicker();
   },
 
+  componentWillMount() {
+    this.onSearch = _.debounce(this.onSearch, DEBOUNCE_DELAY);
+  },
+
   getCurrentsOptions() {
     return [
       { value: CURRENTS.ALL, label: 'All' },
@@ -36,17 +41,6 @@ export default React.createClass({
     ];
   },
 
-  attachDatePicker() {
-    let opts = {
-      dateFormat: 'yy-mm-dd',
-      changeMonth: true,
-      changeYear: true,
-      onSelect: this.onDateInputChange
-    };
-    $(React.findDOMNode(this.refs.minDate)).datepicker(opts);
-    $(React.findDOMNode(this.refs.maxDate)).datepicker(opts);
-  },
-
   onDateChange(newDate) {
     if (newDate === DATE.CUSTOM) {
       let minDateRaw = React.findDOMNode(this.refs.minDate).value,
@@ -65,6 +59,19 @@ export default React.createClass({
     this.onDateChange(DATE.CUSTOM);
   },
 
+  attachDatePicker() {
+    let opts = {
+      dateFormat: 'yy-mm-dd',
+      changeMonth: true,
+      changeYear: true,
+      onSelect: this.onDateInputChange
+    };
+    if ($.fn.datepicker) {
+      $(React.findDOMNode(this.refs.minDate)).datepicker(opts);
+      $(React.findDOMNode(this.refs.maxDate)).datepicker(opts);
+    }
+  },
+
   renderCustomDateInput() {
     let shouldBeVisible = this.props.dateFilter === DATE.CUSTOM,
         className = shouldBeVisible ? 'spacer-top' : 'spacer-top hidden';
@@ -78,6 +85,33 @@ export default React.createClass({
     );
   },
 
+  onSearchFormSubmit(e) {
+    e.preventDefault();
+    this.onSearch();
+  },
+
+  onSearch() {
+    let searchInput = React.findDOMNode(this.refs.searchInput),
+        query = searchInput.value;
+    this.props.onSearch(query);
+  },
+
+  renderSearchBox() {
+    if (this.props.options.componentId) {
+      // do not render search form on the project-level page
+      return null;
+    }
+    return (
+        <form onSubmit={this.onSearchFormSubmit} className="search-box">
+          <button className="search-box-submit button-clean">
+            <i className="icon-search"></i>
+          </button>
+          <input onChange={this.onSearch} ref="searchInput" className="search-box-input" type="search"
+                 placeholder="Search"/>
+        </form>
+    );
+  },
+
   render() {
     return (
         <section className="big-spacer-top big-spacer-bottom">
@@ -95,6 +129,7 @@ export default React.createClass({
                            name="background-task-date" onCheck={this.onDateChange}/>
               {this.renderCustomDateInput()}
             </li>
+            <li>{this.renderSearchBox()}</li>
           </ul>
         </section>
     );