SONAR-7090 Filter project permissions by qualifier in the UI

4 files changed, 56 insertions, 6 deletions

diff --git a/server/sonar-web/src/main/js/apps/project-permissions/app.js b/server/sonar-web/src/main/js/apps/project-permissions/app.js
index b00e13b9a6d..83dee7d2feb 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/app.js
+++ b/server/sonar-web/src/main/js/apps/project-permissions/app.js
@@ -11,6 +11,8 @@ function requestPermissionTemplates () {
 window.sonarqube.appStarted.then(options => {
   requestPermissionTemplates().done(r => {
     var el = document.querySelector(options.el);
-    ReactDOM.render(<Main permissionTemplates={r.permissionTemplates} componentId={window.sonarqube.componentId}/>, el);
+    ReactDOM.render(<Main permissionTemplates={r.permissionTemplates}
+                          componentId={window.sonarqube.componentId}
+                          rootQualifiers={options.rootQualifiers}/>, el);
   });
 });
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/main.js b/server/sonar-web/src/main/js/apps/project-permissions/main.js
index 6dbc6a4c837..1bb40167bb0 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/main.js
+++ b/server/sonar-web/src/main/js/apps/project-permissions/main.js
@@ -1,20 +1,23 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import React from 'react';
+
 import Permissions from './permissions';
 import PermissionsFooter from './permissions-footer';
 import Search from './search';
 import ApplyTemplateView from './apply-template-view';
 
+
 const PERMISSIONS_ORDER = ['user', 'codeviewer', 'issueadmin', 'admin'];
 
+
 export default React.createClass({
   propTypes: {
     permissionTemplates: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
   },
 
   getInitialState() {
-    return { ready: false, permissions: [], projects: [], total: 0 };
+    return { ready: false, permissions: [], projects: [], total: 0, filter: '__ALL__' };
   },
 
   componentDidMount() {
@@ -36,9 +39,12 @@ export default React.createClass({
     });
   },
 
-  requestPermissions(page = 1, query = '') {
+  requestPermissions(page = 1, query = '', filter = this.state.filter) {
     let url = `${window.baseUrl}/api/permissions/search_project_permissions`;
     let data = { p: page, q: query };
+    if (filter !== '__ALL__') {
+      data.qualifier = filter;
+    }
     if (this.props.componentId) {
       data = { projectId: this.props.componentId };
     }
@@ -55,7 +61,8 @@ export default React.createClass({
           permissions: permissions,
           total: r.paging.total,
           page: r.paging.pageIndex,
-          query: query
+          query: query,
+          filter: filter
         });
       });
     });
@@ -69,6 +76,10 @@ export default React.createClass({
     this.requestPermissions(1, query);
   },
 
+  handleFilter(filter) {
+    this.requestPermissions(1, this.state.query, filter);
+  },
+
   refresh() {
     this.requestPermissions(1, this.state.query);
   },
@@ -111,7 +122,9 @@ export default React.createClass({
           </header>
 
           <Search {...this.props}
-              search={this.search}/>
+              filter={this.state.filter}
+              search={this.search}
+              onFilter={this.handleFilter}/>
 
           <Permissions
               ready={this.state.ready}
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/qualifier-filter.js b/server/sonar-web/src/main/js/apps/project-permissions/qualifier-filter.js
new file mode 100644
index 00000000000..3d121fe50e3
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/project-permissions/qualifier-filter.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import RadioToggle from '../../components/shared/radio-toggle';
+
+
+const rootQualifiersToOptions = (qualifiers) => {
+  return qualifiers.map(q => {
+    return {
+      value: q,
+      label: window.t('qualifiers', q)
+    }
+  });
+};
+
+
+export const QualifierFilter = ({ rootQualifiers, filter, onFilter }) => {
+  const options = [{ value: '__ALL__', label: 'All' }, ...rootQualifiersToOptions(rootQualifiers)];
+
+  return (
+      <div className="display-inline-block text-top nowrap big-spacer-right">
+        <RadioToggle value={filter}
+                     options={options}
+                     name="qualifier"
+                     onCheck={onFilter}/>
+      </div>
+  );
+};
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/search.js b/server/sonar-web/src/main/js/apps/project-permissions/search.js
index d50bf8255fd..9f6bdbf12d0 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/search.js
+++ b/server/sonar-web/src/main/js/apps/project-permissions/search.js
@@ -1,6 +1,9 @@
 import _ from 'underscore';
 import React from 'react';
 
+import { QualifierFilter } from './qualifier-filter';
+
+
 export default React.createClass({
   propTypes: {
     search: React.PropTypes.func.isRequired
@@ -26,7 +29,12 @@ export default React.createClass({
     }
     return (
         <div className="panel panel-vertical bordered-bottom spacer-bottom">
-          <form onSubmit={this.onSubmit} className="search-box">
+
+          {this.props.rootQualifiers.length > 1 && <QualifierFilter filter={this.props.filter}
+                                                                    rootQualifiers={this.props.rootQualifiers}
+                                                                    onFilter={this.props.onFilter}/>}
+
+          <form onSubmit={this.onSubmit} className="search-box display-inline-block text-top">
             <button className="search-box-submit button-clean">
               <i className="icon-search"></i>
             </button>