SONAR-6797 apply feedback

7 files changed, 102 insertions, 114 deletions

diff --git a/server/sonar-web/src/main/js/apps/global-permissions/groups-view.js b/server/sonar-web/src/main/js/apps/global-permissions/groups-view.js
index 3e515d94031..5b25ec62db2 100644
--- a/server/sonar-web/src/main/js/apps/global-permissions/groups-view.js
+++ b/server/sonar-web/src/main/js/apps/global-permissions/groups-view.js
@@ -1,43 +1,36 @@
 define([
   'components/common/modals',
-  'react',
-  'components/select-list/main',
-  '../../api/permissions',
+  'components/common/select-list',
   './templates'
-], function (Modal, React, SelectList, Permissions) {
+], function (Modal) {
 
   return Modal.extend({
     template: Templates['global-permissions-groups'],
 
     onRender: function () {
-      var that = this;
       this._super();
-      var props = {
-        loadItems: function (options, callback) {
-          var _data = { permission: that.options.permission, p: options.page, ps: 100 };
-          options.query ? _.extend(_data, { q: options.query }) : _.extend(_data, { selected: options.selection });
-          Permissions.getGroups(_data).done(function (r) {
-            var paging = _.defaults({}, r.paging, { total: 0, pageIndex: 1 });
-            callback(r.groups, paging);
-          });
+      new window.SelectList({
+        el: this.$('#global-permissions-groups'),
+        width: '100%',
+        readOnly: false,
+        focusSearch: false,
+        format: function (item) {
+          return item.name;
         },
-        renderItem: function (group) {
-          return group.name;
+        queryParam: 'q',
+        searchUrl: baseUrl + '/api/permissions/groups?ps=100&permission=' + this.options.permission,
+        selectUrl: baseUrl + '/api/permissions/add_group',
+        deselectUrl: baseUrl + '/api/permissions/remove_group',
+        extra: {
+          permission: this.options.permission
         },
-        getItemKey: function (group) {
-          return group.name;
-        },
-        selectItem: function (group, callback) {
-          Permissions.grantToGroup(that.options.permission, group.name).done(callback);
-        },
-        deselectItem: function (group, callback) {
-          Permissions.revokeFromGroup(that.options.permission, group.name).done(callback);
+        selectParameter: 'groupName',
+        selectParameterValue: 'name',
+        parse: function (r) {
+          this.more = false;
+          return r.groups;
         }
-      };
-      React.render(
-          React.createElement(SelectList, props),
-          this.$('#global-permissions-groups')[0]
-      );
+      });
     },
 
     onDestroy: function () {
diff --git a/server/sonar-web/src/main/js/apps/global-permissions/users-view.js b/server/sonar-web/src/main/js/apps/global-permissions/users-view.js
index 54c41342127..b5660c650da 100644
--- a/server/sonar-web/src/main/js/apps/global-permissions/users-view.js
+++ b/server/sonar-web/src/main/js/apps/global-permissions/users-view.js
@@ -1,43 +1,36 @@
 define([
   'components/common/modals',
-  'react',
-  'components/select-list/main',
-  '../../api/permissions',
+  'components/common/select-list',
   './templates'
-], function (Modal, React, SelectList, Permissions) {
+], function (Modal) {
 
   return Modal.extend({
     template: Templates['global-permissions-users'],
 
     onRender: function () {
-      var that = this;
       this._super();
-      var props = {
-        loadItems: function (options, callback) {
-          var data = { permission: that.options.permission, p: options.page, ps: 100 };
-          options.query ? _.extend(data, { q: options.query }) : _.extend(data, { selected: options.selection });
-          Permissions.getUsers(data).done(function (r) {
-            var paging = _.defaults({}, r.paging, { total: 0, pageIndex: 1 });
-            callback(r.users, paging);
-          });
+      new window.SelectList({
+        el: this.$('#global-permissions-users'),
+        width: '100%',
+        readOnly: false,
+        focusSearch: false,
+        format: function (item) {
+          return item.name + '<br><span class="note">' + item.login + '</span>';
         },
-        renderItem: function (user) {
-          return user.name + '<br><span class="note">' + user.login + '</span>';
+        queryParam: 'q',
+        searchUrl: baseUrl + '/api/permissions/users?ps=100&permission=' + this.options.permission,
+        selectUrl: baseUrl + '/api/permissions/add_user',
+        deselectUrl: baseUrl + '/api/permissions/remove_user',
+        extra: {
+          permission: this.options.permission
         },
-        getItemKey: function (user) {
-          return user.login;
-        },
-        selectItem: function (user, callback) {
-          Permissions.grantToUser(that.options.permission, user.login).done(callback);
-        },
-        deselectItem: function (user, callback) {
-          Permissions.revokeFromUser(that.options.permission, user.login).done(callback);
+        selectParameter: 'login',
+        selectParameterValue: 'login',
+        parse: function (r) {
+          this.more = false;
+          return r.users;
         }
-      };
-      React.render(
-          React.createElement(SelectList, props),
-          this.$('#global-permissions-users')[0]
-      );
+      });
     },
 
     onDestroy: function () {
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/groups-view.js b/server/sonar-web/src/main/js/apps/project-permissions/groups-view.js
index 0c49e3c5584..5e00efe9b86 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/groups-view.js
+++ b/server/sonar-web/src/main/js/apps/project-permissions/groups-view.js
@@ -1,48 +1,48 @@
 define([
   'components/common/modals',
-  'react',
-  'components/select-list/main',
-  '../../api/permissions',
+  'components/common/select-list',
   './templates'
-], function (Modal, React, SelectList, Permissions) {
+], function (Modal) {
 
   return Modal.extend({
     template: Templates['project-permissions-groups'],
 
     onRender: function () {
-      var that = this;
       this._super();
-      var props = {
-        loadItems: function (options, callback) {
-          var _data = { permission: that.options.permission, projectId: that.options.project, p: options.page, ps: 100 };
-          options.query ? _.extend(_data, { q: options.query }) : _.extend(_data, { selected: options.selection });
-          Permissions.getGroups(_data).done(function (r) {
-            var paging = _.defaults({}, r.paging, { total: 0, pageIndex: 1 });
-            callback(r.groups, paging);
-          });
+      new window.SelectList({
+        el: this.$('#project-permissions-groups'),
+        width: '100%',
+        readOnly: false,
+        focusSearch: false,
+        format: function (item) {
+          return item.name;
         },
-        renderItem: function (group) {
-          return group.name;
+        queryParam: 'q',
+        searchUrl: baseUrl + '/api/permissions/groups?ps=100&permission=' + this.options.permission + '&projectId=' + this.options.project,
+        selectUrl: baseUrl + '/api/permissions/add_group',
+        deselectUrl: baseUrl + '/api/permissions/remove_group',
+        extra: {
+          permission: this.options.permission,
+          projectId: this.options.project
         },
-        getItemKey: function (group) {
-          return group.name;
-        },
-        selectItem: function (group, callback) {
-          Permissions.grantToGroup(that.options.permission, group.name, that.options.project).done(callback);
-        },
-        deselectItem: function (group, callback) {
-          Permissions.revokeFromGroup(that.options.permission, group.name, that.options.project).done(callback);
+        selectParameter: 'groupName',
+        selectParameterValue: 'name',
+        parse: function (r) {
+          this.more = false;
+          return r.groups;
         }
-      };
-      React.render(
-          React.createElement(SelectList, props),
-          this.$('#project-permissions-groups')[0]
-      );
+      });
     },
 
     onDestroy: function () {
       this.options.refresh && this.options.refresh();
       this._super();
+    },
+
+    serializeData: function () {
+      return _.extend(Modal.prototype.serializeData.apply(this, arguments), {
+        projectName: this.options.projectName
+      })
     }
   });
 
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/project.jsx b/server/sonar-web/src/main/js/apps/project-permissions/project.jsx
index 31c03a1572f..9d7baf2b0a5 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/project.jsx
+++ b/server/sonar-web/src/main/js/apps/project-permissions/project.jsx
@@ -14,6 +14,7 @@ export default React.createClass({
     new GroupsView({
       permission: permission,
       project: this.props.project.uuid,
+      projectName: this.props.project.name,
       refresh: this.props.refresh
     }).render();
   },
@@ -23,6 +24,7 @@ export default React.createClass({
     new UsersView({
       permission: permission,
       project: this.props.project.uuid,
+      projectName: this.props.project.name,
       refresh: this.props.refresh
     }).render();
   },
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/templates/project-permissions-groups.hbs b/server/sonar-web/src/main/js/apps/project-permissions/templates/project-permissions-groups.hbs
index c5f551e3682..68ceacf26b0 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/templates/project-permissions-groups.hbs
+++ b/server/sonar-web/src/main/js/apps/project-permissions/templates/project-permissions-groups.hbs
@@ -1,5 +1,5 @@
 <div class="modal-head">
-  <h2>Update Groups</h2>
+  <h2>Update Groups of "{{projectName}}"</h2>
 </div>
 <div class="modal-body">
   <div class="js-modal-messages"></div>
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/templates/project-permissions-users.hbs b/server/sonar-web/src/main/js/apps/project-permissions/templates/project-permissions-users.hbs
index acfd4eaf75d..b21ac813bcc 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/templates/project-permissions-users.hbs
+++ b/server/sonar-web/src/main/js/apps/project-permissions/templates/project-permissions-users.hbs
@@ -1,5 +1,5 @@
 <div class="modal-head">
-  <h2>Update Users</h2>
+  <h2>Update Users of "{{projectName}}"</h2>
 </div>
 <div class="modal-body">
   <div class="js-modal-messages"></div>
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/users-view.js b/server/sonar-web/src/main/js/apps/project-permissions/users-view.js
index 0ed4f2cc000..5f54a1ad2a9 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/users-view.js
+++ b/server/sonar-web/src/main/js/apps/project-permissions/users-view.js
@@ -1,48 +1,48 @@
 define([
   'components/common/modals',
-  'react',
-  'components/select-list/main',
-  '../../api/permissions',
+  'components/common/select-list',
   './templates'
-], function (Modal, React, SelectList, Permissions) {
+], function (Modal) {
 
   return Modal.extend({
     template: Templates['project-permissions-users'],
 
     onRender: function () {
-      var that = this;
       this._super();
-      var props = {
-        loadItems: function (options, callback) {
-          var data = { permission: that.options.permission, projectId: that.options.project, p: options.page, ps: 100 };
-          options.query ? _.extend(data, { q: options.query }) : _.extend(data, { selected: options.selection });
-          Permissions.getUsers(data).done(function (r) {
-            var paging = _.defaults({}, r.paging, { total: 0, pageIndex: 1 });
-            callback(r.users, paging);
-          });
+      new window.SelectList({
+        el: this.$('#project-permissions-users'),
+        width: '100%',
+        readOnly: false,
+        focusSearch: false,
+        format: function (item) {
+          return item.name + '<br><span class="note">' + item.login + '</span>';
         },
-        renderItem: function (user) {
-          return user.name + '<br><span class="note">' + user.login + '</span>';
+        queryParam: 'q',
+        searchUrl: baseUrl + '/api/permissions/users?ps=100&permission=' + this.options.permission + '&projectId=' + this.options.project,
+        selectUrl: baseUrl + '/api/permissions/add_user',
+        deselectUrl: baseUrl + '/api/permissions/remove_user',
+        extra: {
+          permission: this.options.permission,
+          projectId: this.options.project
         },
-        getItemKey: function (user) {
-          return user.login;
-        },
-        selectItem: function (user, callback) {
-          Permissions.grantToUser(that.options.permission, user.login, that.options.project).done(callback);
-        },
-        deselectItem: function (user, callback) {
-          Permissions.revokeFromUser(that.options.permission, user.login, that.options.project).done(callback);
+        selectParameter: 'login',
+        selectParameterValue: 'login',
+        parse: function (r) {
+          this.more = false;
+          return r.users;
         }
-      };
-      React.render(
-          React.createElement(SelectList, props),
-          this.$('#project-permissions-users')[0]
-      );
+      });
     },
 
     onDestroy: function () {
       this.options.refresh && this.options.refresh();
       this._super();
+    },
+
+    serializeData: function () {
+      return _.extend(Modal.prototype.serializeData.apply(this, arguments), {
+        projectName: this.options.projectName
+      })
     }
   });