SONAR-4827 Use new HTML component for managing project permissions

2 files changed, 60 insertions, 97 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_edit_groups.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_edit_groups.html.erb
index dc5afb4028c..f28049e47af 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_edit_groups.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_edit_groups.html.erb
@@ -1,55 +1,37 @@
-<form id="permission-template-form" method="post" action="<%= ApplicationController.root_context -%>/permission_templates/update_groups_permissions">
-  <input type="hidden" name="id" value="<%= @permission_template.id -%>">
-  <input type="hidden" name="key" value="<%= @permission_template.key -%>">
-  <input type="hidden" name="permission" value="<%= @permission -%>"/>
-  <fieldset>
-    <div class="modal-head">
-      <h2><%= message('permission_template.edit_permissions', :params => @permission_template.name) -%></h2>
-    </div>
-    <div class="modal-body">
-      <div class="modal-error"/>
-      <table>
-        <tbody>
-        <tr>
-          <td style="padding: 5px 0;" valign="top">
-            <h2>Add Groups</h2>
+<div class="modal-head">
+  <h2><%= message('permission_template.edit_permissions', :params => @permission_template.name) -%></h2>
+</div>
 
-            <select name="from" id="from" size="30" style="margin: 5px 0; width: 300px;" multiple="multiple">
-              <% @groups_without_permission.sort.each do |group| %>
-                <option value="<%= group[1] -%>"><%= h(group[0].blank? ? 'Anyone' : group[0]) -%></option>
-              <% end %>
-            </select>
-          </td>
-          <td style="padding: 0 10px;" align="center" nowrap="nowrap">
-            <button id="select_right" onclick="SelectBox.move('from', 'to');SelectBox.sort('to');SelectBox.redisplay('to');return false;">select >></button><br>
-            <button id="select_right_all" onclick="SelectBox.move_all('from', 'to');return false;">select all >></button><br><br>
-            <button id="select_left" onclick="SelectBox.move('to', 'from');return false;"><< unselect</button><br>
-            <button id="select_left_all" onclick="SelectBox.move_all('to', 'from');return false;"><< unselect all</button>
-          </td>
-          <td class="box" style="padding: 5px 10px;" valign="top">
-            <h2>Permission: <%= role_name(@permission) -%></h2>
+<div class="modal-body">
+  <div id="select-list-group"></div>
+</div>
 
-            <select name="groups[]" id="to" size="30" multiple="multiple" style="margin: 5px 0pt; width: 300px;">
-              <%= options_for_select(@groups_with_permission) %>
-            </select><br>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="modal-foot">
-      <input type="submit" onclick="SelectBox.select_all('to');" value="<%= h message('permission_template.update_permissions') -%>" id="submit-permission-template-update"/>
-      <a href="#" onclick="return closeModalWindow()" id="cancel-update-template"><%= h message('cancel') -%></a>
-    </div>
-  </fieldset>
-</form>
+<div class="modal-foot">
+  <a href="#" onclick="window.location.reload();return false"><%= h message('close') -%></a>
+</div>
 
 <script>
-  SelectBox.init('from');
-  SelectBox.init('to');
-  $j("#permission-template-form").modalForm({
-    success: function (data) {
-      window.location.reload();
+  var selectList = new SelectList({
+    el: '#select-list-group',
+    width: '100%',
+    format: function (item) { return item.name; },
+    searchUrl: baseUrl + '/permission_templates/search_groups?permission=<%= @permission -%>&template=<%= @permission_template.key -%>',
+    selectUrl: baseUrl + '/permission_templates/add_group_permission',
+    deselectUrl: baseUrl + '/permission_templates/remove_group_permission',
+    extra: {
+      permission: '<%= @permission -%>',
+      template: '<%= @permission_template.key -%>'
+    },
+    selectParameter: 'group',
+    selectParameterValue: 'name',
+    labels: {
+      selected: 'With',
+      deselected: 'Without',
+      all: 'All'
+    },
+    tooltips: {
+      select: 'Click to grant the permission to the group',
+      deselect: 'Click to revoke the permission from the group'
     }
   });
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_edit_users.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_edit_users.html.erb
index 48f94171689..401d3ea4988 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_edit_users.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_edit_users.html.erb
@@ -1,56 +1,37 @@
-<form id="permission-template-form" method="post" action="<%= ApplicationController.root_context -%>/permission_templates/update_users_permissions">
-  <input type="hidden" name="id" value="<%= @permission_template.id -%>">
-  <input type="hidden" name="key" value="<%= @permission_template.key -%>">
-  <input type="hidden" name="permission" value="<%= @permission -%>"/>
-  <fieldset>
-    <div class="modal-head">
-      <h2><%= message('permission_template.edit_permissions', :params => @permission_template.name) -%></h2>
-    </div>
-    <div class="modal-body">
-      <div class="modal-error"/>
-      <table>
-        <tbody>
-        <tr>
-          <td style="padding: 5px 0;" valign="top">
-            <h2>Add Users</h2>
+<div class="modal-head">
+  <h2><%= message('permission_template.edit_permissions', :params => @permission_template.name) -%></h2>
+</div>
 
-            <select name="from" id="from" size="30" style="margin: 5px 0; width: 300px;" multiple="multiple">
-              <% @users_without_permission.sort.each do |user| %>
-                <option value="<%= user[1] -%>"><%= h user[0] -%></option>
-              <% end %>
-            </select>
-          </td>
-          <td style="padding: 0 10px;" align="center" nowrap="nowrap">
-            <button id="select_right" onclick="SelectBox.move('from', 'to');SelectBox.sort('to');SelectBox.redisplay('to');return false;">select >></button><br>
-            <button id="select_right_all" onclick="SelectBox.move_all('from', 'to');return false;">select all >></button><br><br>
-            <button id="select_left" onclick="SelectBox.move('to', 'from');return false;"><< unselect</button><br>
-            <button id="select_left_all" onclick="SelectBox.move_all('to', 'from');return false;"><< unselect all</button>
-          </td>
-          <td class="box" style="padding: 5px 10px;" valign="top">
-            <h2>Permission: <%= role_name(@permission) -%></h2>
+<div class="modal-body">
+  <div id="select-list-user"></div>
+</div>
 
-            <select name="users[]" id="to" size="30" multiple="multiple" style="margin: 5px 0pt; width: 300px;">
-              <%= options_for_select(@users_with_permission) %>
-            </select><br>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="modal-foot">
-      <input type="submit" onclick="SelectBox.select_all('to');" value="<%= h message('permission_template.update_permissions') -%>" id="submit-permission-template-update"/>
-      <a href="#" onclick="return closeModalWindow()" id="cancel-update-template"><%= h message('cancel') -%></a>
-    </div>
-  </fieldset>
-</form>
+<div class="modal-foot">
+  <a href="#" onclick="window.location.reload();return false"><%= h message('close') -%></a>
+</div>
 
 <script>
-  SelectBox.init('from');
-  SelectBox.init('to');
-
-  $j("#permission-template-form").modalForm({
-    success: function (data) {
-      window.location.reload();
+  var selectList = new SelectList({
+    el: '#select-list-user',
+    width: '100%',
+    format: function (item) { return item.name + ' <div class="subtitle">' + item.login + '</div>'; },
+    searchUrl: baseUrl + '/permission_templates/search_users?permission=<%= @permission -%>&template=<%= @permission_template.key -%>',
+    selectUrl: baseUrl + '/permission_templates/add_user_permission',
+    deselectUrl: baseUrl + '/permission_templates/remove_user_permission',
+    extra: {
+      permission: '<%= @permission -%>',
+      template: '<%= @permission_template.key -%>'
+    },
+    selectParameter: 'user',
+    selectParameterValue: 'login',
+    labels: {
+      selected: 'With',
+      deselected: 'Without',
+      all: 'All'
+    },
+    tooltips: {
+      select: 'Click to grant the permission to the user',
+      deselect: 'Click to revoke the permission from the user'
     }
   });
 </script>