Improve error handling in modal form in order to let the possibility to display errors in a div and not update all the content of the modal

13 files changed, 43 insertions, 110 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_bulk_change_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_bulk_change_form.html.erb
index 8063e1d6464..28dbe20342c 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_bulk_change_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_bulk_change_form.html.erb
@@ -30,7 +30,7 @@
         <p class="notes"><%= message('issue_bulk_change.max_issues_reached', :params => issues.size) -%></p>
       <% end %>
       </div>
-      <div class="bulk-change errors error" style="display:none;"/>
+      <div class="modal-error"/>
 
       <% if unresolved_issues > 0 %>
       <div class="modal-field">
@@ -104,7 +104,7 @@
       </div>
     </div>
     <div class="modal-foot">
-      <span id="bulk-change-loading-image" class="hidden"><%= image_tag 'loading.gif' %></span>
+      <span id="bulk-change-loading-image" class="loading-image hidden"><%= image_tag 'loading.gif' %></span>
       <input type="submit" value="<%= message('apply') -%>" id="bulk-change-submit" class="bulk-change" onclick="return displayLoadingImage()" />
       <a href="#" onclick="return closeModalWindow()" id="bulk-change-cancel"><%= message('cancel') -%></a>
     </div>
@@ -114,13 +114,6 @@
   $j("#bulk-change-form").modalForm({
     success: function () {
       onBulkIssues(<%= params.to_json -%>);
-    },
-    error: function (xhr, textStatus, errorThrown) {
-      $j('#bulk-change-loading-image').addClass("hidden");
-      var htmlClass = 'bulk-change';
-      $j('input[type=submit].' + htmlClass).removeAttr('disabled');
-      $j('.' + htmlClass + '.errors').show();
-      $j('.' + htmlClass + '.errors').html(xhr.responseText);
     }
   });
 
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_copy_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_copy_form.html.erb
index 44fd2281a74..8f4d1a26f6d 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_copy_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_copy_form.html.erb
@@ -15,12 +15,6 @@
   $j("#copy-filter-form").modalForm({
     success: function (data) {
       window.location = baseUrl + '/issues/filter/' + data;
-    },
-    error: function (xhr, textStatus, errorThrown) {
-      var htmlClass = 'issue-filter';
-      $j('input[type=submit].' + htmlClass).removeAttr('disabled');
-      $j('.' + htmlClass + '.errors').show();
-      $j('.' + htmlClass + '.errors').html(xhr.responseText);
     }
   });
 </script>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_edit_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_edit_form.html.erb
index 4333ed8cdd4..f12ef26050b 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_edit_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_edit_form.html.erb
@@ -15,12 +15,6 @@
   $j("#edit-filter-form").modalForm({
     success: function (data) {
       window.location = baseUrl + '/issues/filter/' + data;
-    },
-    error: function (xhr, textStatus, errorThrown) {
-      var htmlClass = 'issue-filter';
-      $j('input[type=submit].' + htmlClass).removeAttr('disabled');
-      $j('.' + htmlClass + '.errors').show();
-      $j('.' + htmlClass + '.errors').html(xhr.responseText);
     }
   });
 </script>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_save_as_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_save_as_form.html.erb
index ccc96424583..40dcc6cd484 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_save_as_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_save_as_form.html.erb
@@ -15,12 +15,6 @@
   $j("#save-as-filter-form").modalForm({
     success: function (data) {
       window.location = baseUrl + '/issues/filter/' + data;
-    },
-    error: function (xhr, textStatus, errorThrown) {
-      var htmlClass = 'issue-filter';
-      $j('input[type=submit].' + htmlClass).removeAttr('disabled');
-      $j('.' + htmlClass + '.errors').show();
-      $j('.' + htmlClass + '.errors').html(xhr.responseText);
     }
   });
 </script>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_shared_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_shared_form.html.erb
index 5945781f885..d90b9660b73 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_shared_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_filter_shared_form.html.erb
@@ -2,7 +2,7 @@
      display_owner = false
    end %>
 <div class="modal-body">
-  <div id="issue-filter-error" class="issue-filter errors error" style="display:none;" />
+  <div class="modal-error"/>
   <div class="modal-field">
     <label for="name"><%= message('issue_filter.form.name') -%> <em class="mandatory">*</em></label>
     <input id="name" name="name" type="text" size="50" maxlength="100" value="<%= h(@filter.name) if @filter -%>" autofocus="autofocus"/>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_default_templates_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_default_templates_form.html.erb
index 825e2468e5e..950a07da449 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_default_templates_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_default_templates_form.html.erb
@@ -4,7 +4,7 @@
       <h2><%= message('permission_template.set_default_templates') -%></h2>
     </div>
     <div class="modal-body">
-      <div id="permission-template-error" class="permission-template error errors" style="display:none;" />
+      <div class="modal-error"/>
       <% @root_qualifiers.each do |qualifier| %>
         <div class="modal-field">
           <%= label_tag("default_template_#{qualifier}", " For #{message('qualifier.' + qualifier).downcase}s:") %>
@@ -23,12 +23,6 @@
   $j("#default-templates-form").modalForm({
     success: function (data) {
       window.location.reload();
-    },
-    error: function (xhr, textStatus, errorThrown) {
-      var htmlClass = 'permission-template';
-      $j('input[id^="submit-default-templates"]').removeAttr('disabled');
-      $j('.' + htmlClass + '.errors').show();
-      $j('.' + htmlClass + '.errors').html(xhr.responseText);
     }
   });
 </script>
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 98d081b3492..adc6dd84b3b 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
@@ -7,7 +7,7 @@
       <h2><%= message('permission_template.edit_permissions', :params => @permission_template.name) -%></h2>
     </div>
     <div class="modal-body">
-      <div id="permission-template-error" class="permission-template error" style="display:none;" />
+      <div class="modal-error"/>
       <table>
         <tbody>
         <tr>
@@ -50,12 +50,6 @@
   $j("#permission-template-form").modalForm({
     success: function (data) {
       window.location.reload();
-    },
-    error: function (xhr, textStatus, errorThrown) {
-      var htmlClass = 'permission-template';
-      $j('input[id="submit-permission-template-update"]').removeAttr('disabled');
-      $j('.' + htmlClass + '.error').show();
-      $j('.' + htmlClass + '.error').html(xhr.responseText);
     }
   });
 </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 38dc4fdbb67..be35ff88538 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
@@ -7,7 +7,7 @@
       <h2><%= message('permission_template.edit_permissions', :params => @permission_template.name) -%></h2>
     </div>
     <div class="modal-body">
-      <div id="permission-template-error" class="permission-template error" style="display:none;" />
+      <div class="modal-error"/>
       <table>
         <tbody>
         <tr>
@@ -51,12 +51,6 @@
   $j("#permission-template-form").modalForm({
     success: function (data) {
       window.location.reload();
-    },
-    error: function (xhr, textStatus, errorThrown) {
-      var htmlClass = 'permission-template';
-      $j('input[id="submit-permission-template-update"]').removeAttr('disabled');
-      $j('.' + htmlClass + '.error').show();
-      $j('.' + htmlClass + '.error').html(xhr.responseText);
     }
   });
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_permission_template_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_permission_template_form.html.erb
index ede87920cb3..3679f47f8d4 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_permission_template_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/permission_templates/_permission_template_form.html.erb
@@ -7,7 +7,7 @@
       <h2><%= message("permission_template.#{message_title}") -%></h2>
     </div>
     <div class="modal-body">
-      <div id="permission-template-error" class="permission-template error errors" style="display:none;" />
+      <div class="modal-error"/>
       <div class="modal-field">
         <label for="name"><%= h message('name') -%> <em class="mandatory">*</em></label>
         <input id="name" name="name" type="text" size="50" maxlength="256" value="<%= @permission_template ? @permission_template.name : '' -%>" autofocus="autofocus"/>
@@ -28,12 +28,6 @@
   $j("#permission-template-form").modalForm({
     success: function (data) {
       window.location.reload();
-    },
-    error: function (xhr, textStatus, errorThrown) {
-      var htmlClass = 'permission-template';
-      $j('input[id^="submit-permission-template"]').removeAttr('disabled');
-      $j('.' + htmlClass + '.errors').show();
-      $j('.' + htmlClass + '.errors').html(xhr.responseText);
     }
   });
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_apply_template_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_apply_template_form.html.erb
index 2889a02842f..28db709d40d 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_apply_template_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_apply_template_form.html.erb
@@ -11,7 +11,7 @@
     <% end %>
     </div>
     <div class="modal-body">
-      <div class="apply-template errors error" style="display:none;"/>
+      <div class="modal-error"/>
       <% if components.nil? %>
         <div class="info">
           <img src="<%= ApplicationController.root_context -%>/images/information.png" style="vertical-align: text-bottom"/>
@@ -29,7 +29,7 @@
     </div>
     <div class="modal-foot">
       <% unless components.nil? %>
-        <span id="apply-template-loading-image" class="hidden"><%= image_tag 'loading.gif' %></span>
+        <span id="apply-template-loading-image" class="loading-image hidden"><%= image_tag 'loading.gif' %></span>
         <input type="submit" value="<%= message('apply') -%>" id="apply-template-submit" class="apply-template" onclick="return displayLoadingImage()" />
       <% end %>
       <a href="#" onclick="return closeModalWindow()" id="apply-template-cancel"><%= message('cancel') -%></a>
@@ -37,18 +37,9 @@
   </fieldset>
 </form>
 <script>
-  $j("#apply-template-form").modalForm({
-    error: function (xhr, textStatus, errorThrown) {
-      $j('#apply-template-loading-image').addClass("hidden");
-      var htmlClass = 'apply-template';
-      $j('input[type=submit].' + htmlClass).removeAttr('disabled');
-      $j('.' + htmlClass + '.errors').show();
-      $j('.' + htmlClass + '.errors').html(xhr.responseText);
-    }
-  });
+  $j("#apply-template-form").modalForm();
 
   function displayLoadingImage() {
     $j('#apply-template-loading-image').removeClass("hidden");
   }
-
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_edit_groups.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_edit_groups.html.erb
index 44dc3efb3ee..d69c032ff0c 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_edit_groups.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_edit_groups.html.erb
@@ -11,36 +11,36 @@
       <h2><%= @project ? 'Edit permissions for: ' + h(@project.name) : "Edit system permissions: #{message("global_permissions.#{@role}")}" -%></h2>
     </div>
     <div class="modal-body">
-      <div id="permission-groups-error" class="permission-groups error" style="display:none;" />
-        <table>
-          <tbody>
-            <tr>
-              <td style="padding: 5px 0;" valign="top">
-                <h2>Add Groups</h2>
-                <select name="from" id="from" size="30" style="margin: 5px 0; width: 300px;" multiple="multiple">
-                  <% ungranted_groups.each do |group| %>
-                    <option value="<%= group ? group.id : '' -%>"><%= group_name(group) -%></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: <%= @project ? role_name(@role) : global_role_name(@role) -%></h2>
+      <div class="modal-error"/>
+      <table>
+        <tbody>
+          <tr>
+            <td style="padding: 5px 0;" valign="top">
+              <h2>Add Groups</h2>
+              <select name="from" id="from" size="30" style="margin: 5px 0; width: 300px;" multiple="multiple">
+                <% ungranted_groups.each do |group| %>
+                  <option value="<%= group ? group.id : '' -%>"><%= group_name(group) -%></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: <%= @project ? role_name(@role) : global_role_name(@role) -%></h2>
 
-                <select name="groups[]" id="to" size="30" multiple="multiple" style="margin: 5px 0pt; width: 300px;">
-                  <% granted_groups.each do |group| %>
-                    <option value="<%= group ? group.id : '' -%>"><%= group_name(group) -%></option>
-                  <% end %>
-                </select><br>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+              <select name="groups[]" id="to" size="30" multiple="multiple" style="margin: 5px 0pt; width: 300px;">
+                <% granted_groups.each do |group| %>
+                  <option value="<%= group ? group.id : '' -%>"><%= group_name(group) -%></option>
+                <% end %>
+              </select><br>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
     <div class="modal-foot">
       <input type="submit" onclick="SelectBox.select_all('to');" value="<%= h message('save') -%>" id="submit-permission-groups-update"/>
@@ -56,12 +56,6 @@
   $j("#permission-groups-form").modalForm({
     success: function (data) {
       window.location.reload();
-    },
-    error: function (xhr, textStatus, errorThrown) {
-      var htmlClass = 'permission-groups';
-      $j('input[id="submit-permission-groups-update"]').removeAttr('disabled');
-      $j('.' + htmlClass + '.error').show();
-      $j('.' + htmlClass + '.error').html(xhr.responseText);
     }
   });
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_edit_users.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_edit_users.html.erb
index 9c3cd32364e..8f55c9e7494 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_edit_users.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/roles/_edit_users.html.erb
@@ -11,7 +11,7 @@
       <h2><%= @project ? 'Edit permissions for: ' + h(@project.name) : "Edit system permissions: #{message("global_permissions.#{@role}")}" -%></h2>
     </div>
     <div class="modal-body">
-      <div id="permission-users-error" class="permission-users error" style="display:none;" />
+      <div class="modal-error"/>
       <table>
         <tbody>
           <tr>
@@ -53,12 +53,6 @@
   $j("#permission-users-form").modalForm({
     success: function (data) {
       window.location.reload();
-    },
-    error: function (xhr, textStatus, errorThrown) {
-      var htmlClass = 'permission-users';
-      $j('input[id="submit-permission-users-update"]').removeAttr('disabled');
-      $j('.' + htmlClass + '.error').show();
-      $j('.' + htmlClass + '.error').html(xhr.responseText);
     }
   });
 </script>
diff --git a/sonar-server/src/main/webapp/javascripts/application.js b/sonar-server/src/main/webapp/javascripts/application.js
index 5e8d4764b1e..857298a34da 100644
--- a/sonar-server/src/main/webapp/javascripts/application.js
+++ b/sonar-server/src/main/webapp/javascripts/application.js
@@ -314,6 +314,9 @@ function openModalWindow(url, options) {
               // If the modal window has defined a modal-error element, then returned text must be displayed in it
               var errorElt = obj.find(".modal-error");
               if (errorElt.length) {
+                // Hide all loading images
+                $j('.loading-image').addClass("hidden");
+                // Re activate submit button
                 $j('input[type=submit]', obj).removeAttr('disabled');
                 errorElt.show();
                 errorElt.html(xhr.responseText);