Add modal form view

6 files changed, 113 insertions, 61 deletions

diff --git a/server/sonar-web/src/main/coffee/common/modals.coffee b/server/sonar-web/src/main/coffee/common/modals.coffee
deleted file mode 100644
index c9e7c4adce2..00000000000
--- a/server/sonar-web/src/main/coffee/common/modals.coffee
+++ /dev/null
@@ -1,43 +0,0 @@
-define [
-  'backbone.marionette'
-], (
-  Marionette
-) ->
-
-  $ = jQuery
-  EVENT_SCOPE = 'modal'
-
-
-  class extends Marionette.ItemView
-    className: 'modal'
-    overlayClassName: 'modal-overlay'
-
-
-    events: ->
-      'click .js-modal-close': 'close'
-
-
-    onRender: ->
-      @$el.detach().appendTo $('body')
-      @renderOverlay()
-      key 'escape', (=> @close())
-
-
-    onClose: ->
-      @removeOverlay()
-
-
-    renderOverlay: ->
-      overlay = $(".#{@overlayClassName}")
-      if overlay.length == 0
-        overlay = $("<div class=\"#{@overlayClassName}\"></div>").appendTo $('body')
-
-
-    removeOverlay: ->
-      $('.modal-overlay').remove()
-
-
-    attachCloseEvents: ->
-      $('body').on "click.#{EVENT_SCOPE}", =>
-        $('body').off "click.#{EVENT_SCOPE}"
-        @close()
diff --git a/server/sonar-web/src/main/hbs/coding-rules-old/coding-rules-custom-rule-creation.hbs b/server/sonar-web/src/main/hbs/coding-rules-old/coding-rules-custom-rule-creation.hbs
index c1244ff82e6..94323fa40cf 100644
--- a/server/sonar-web/src/main/hbs/coding-rules-old/coding-rules-custom-rule-creation.hbs
+++ b/server/sonar-web/src/main/hbs/coding-rules-old/coding-rules-custom-rule-creation.hbs
@@ -8,6 +8,7 @@
   </div>
 
   <div class="modal-body">
+    <div class="js-modal-messages"></div>
     <div class="modal-error"></div>
     <div class="modal-warning">{{t 'coding_rules.reactivate.help'}}</div>
 
diff --git a/server/sonar-web/src/main/hbs/coding-rules/rule/coding-rules-custom-rule-creation.hbs b/server/sonar-web/src/main/hbs/coding-rules/rule/coding-rules-custom-rule-creation.hbs
index 24638406c30..fe89c48d2d5 100644
--- a/server/sonar-web/src/main/hbs/coding-rules/rule/coding-rules-custom-rule-creation.hbs
+++ b/server/sonar-web/src/main/hbs/coding-rules/rule/coding-rules-custom-rule-creation.hbs
@@ -8,6 +8,7 @@
   </div>
 
   <div class="modal-body">
+    <div class="js-modal-messages"></div>
     <div class="modal-error"></div>
     <div class="modal-warning">{{t 'coding_rules.reactivate.help'}}</div>
 
diff --git a/server/sonar-web/src/main/js/coding-rules/rule/custom-rule-creation-view.js b/server/sonar-web/src/main/js/coding-rules/rule/custom-rule-creation-view.js
index 0e8f6a8529a..06b3e9e3d95 100644
--- a/server/sonar-web/src/main/js/coding-rules/rule/custom-rule-creation-view.js
+++ b/server/sonar-web/src/main/js/coding-rules/rule/custom-rule-creation-view.js
@@ -1,27 +1,29 @@
 define([
-  'common/modals',
+  'common/modal-form',
   'templates/coding-rules'
-], function (Modal, Templates) {
+], function (ModalFormView, Templates) {
 
   var $ = jQuery;
 
-  return Modal.extend({
+  return ModalFormView.extend({
     template: Templates['coding-rules-custom-rule-creation'],
 
-    ui: {
-      customRuleCreationKey: '#coding-rules-custom-rule-creation-key',
-      customRuleCreationName: '#coding-rules-custom-rule-creation-name',
-      customRuleCreationHtmlDescription: '#coding-rules-custom-rule-creation-html-description',
-      customRuleCreationSeverity: '#coding-rules-custom-rule-creation-severity',
-      customRuleCreationStatus: '#coding-rules-custom-rule-creation-status',
-      customRuleCreationParameters: '[name]',
-      customRuleCreationCreate: '#coding-rules-custom-rule-creation-create',
-      customRuleCreationReactivate: '#coding-rules-custom-rule-creation-reactivate',
-      modalFoot: '.modal-foot'
+    ui: function () {
+      return _.extend(ModalFormView.prototype.ui.apply(this, arguments), {
+        customRuleCreationKey: '#coding-rules-custom-rule-creation-key',
+            customRuleCreationName: '#coding-rules-custom-rule-creation-name',
+          customRuleCreationHtmlDescription: '#coding-rules-custom-rule-creation-html-description',
+          customRuleCreationSeverity: '#coding-rules-custom-rule-creation-severity',
+          customRuleCreationStatus: '#coding-rules-custom-rule-creation-status',
+          customRuleCreationParameters: '[name]',
+          customRuleCreationCreate: '#coding-rules-custom-rule-creation-create',
+          customRuleCreationReactivate: '#coding-rules-custom-rule-creation-reactivate',
+          modalFoot: '.modal-foot'
+      });
     },
 
     events: function () {
-      return _.extend(Modal.prototype.events.apply(this, arguments), {
+      return _.extend(ModalFormView.prototype.events.apply(this, arguments), {
         'input @ui.customRuleCreationName': 'generateKey',
         'keydown @ui.customRuleCreationName': 'generateKey',
         'keyup @ui.customRuleCreationName': 'generateKey',
@@ -52,7 +54,7 @@ define([
     },
 
     onRender: function () {
-      Modal.prototype.onRender.apply(this, arguments);
+      ModalFormView.prototype.onRender.apply(this, arguments);
 
       this.keyModifiedByUser = false;
 
@@ -148,8 +150,7 @@ define([
           that.$('.modal-warning').show();
           that.ui.modalFoot.html(Templates['coding-rules-custom-rule-reactivation']());
         } else {
-          jQuery.ajaxSettings.error(jqXHR, textStatus, errorThrown);
-          that.ui.modalFoot.html(origFooter);
+          that.showErrors(jqXHR.responseJSON.errors, jqXHR.responseJSON.warnings);
         }
       });
     },
@@ -171,7 +172,7 @@ define([
         };
       });
 
-      return _.extend(Modal.prototype.serializeData.apply(this, arguments), {
+      return _.extend(ModalFormView.prototype.serializeData.apply(this, arguments), {
         change: this.model && this.model.has('key'),
         params: params,
         severities: ['BLOCKER', 'CRITICAL', 'MAJOR', 'MINOR', 'INFO'],
diff --git a/server/sonar-web/src/main/js/common/modal-form.js b/server/sonar-web/src/main/js/common/modal-form.js
new file mode 100644
index 00000000000..39fac08a706
--- /dev/null
+++ b/server/sonar-web/src/main/js/common/modal-form.js
@@ -0,0 +1,38 @@
+define(['common/modals'], function (ModalView) {
+
+  return ModalView.extend({
+
+    ui: function () {
+      return {
+        messagesContainer: '.js-modal-messages'
+      };
+    },
+
+    events: function () {
+      return _.extend(ModalView.prototype.events.apply(this, arguments), {
+        'submit form': 'onFormSubmit'
+      });
+    },
+
+    onFormSubmit: function (e) {
+      e.preventDefault();
+    },
+
+    showErrors: function (errors, warnings) {
+      var container = this.ui.messagesContainer.empty();
+      if (_.isArray(errors)) {
+        errors.forEach(function (error) {
+          var html = '<div class="message-error">' + error.msg + '</div>';
+          container.append(html);
+        });
+      }
+      if (_.isArray(warnings)) {
+        warnings.forEach(function (warn) {
+          var html = '<div class="message-alert">' + warn.msg + '</div>';
+          container.append(html);
+        });
+      }
+    }
+  });
+
+});
diff --git a/server/sonar-web/src/main/js/common/modals.js b/server/sonar-web/src/main/js/common/modals.js
new file mode 100644
index 00000000000..99917d9e090
--- /dev/null
+++ b/server/sonar-web/src/main/js/common/modals.js
@@ -0,0 +1,54 @@
+define(['backbone.marionette'], function (Marionette) {
+
+  var $ = jQuery,
+      EVENT_SCOPE = 'modal';
+
+  return Marionette.ItemView.extend({
+    className: 'modal',
+    overlayClassName: 'modal-overlay',
+
+    events: function () {
+      return {
+        'click .js-modal-close': 'close'
+      };
+    },
+
+    onRender: function () {
+      var that = this;
+      this.$el.detach().appendTo($('body'));
+      this.renderOverlay();
+      this.keyScope = key.getScope();
+      key.setScope('modal');
+      key('escape', 'modal', function () {
+        that.close();
+        return false;
+      });
+    },
+
+    onClose: function () {
+      this.removeOverlay();
+      key.deleteScope('modal');
+      key.setScope(this.keyScope);
+    },
+
+    renderOverlay: function () {
+      var overlay = $('.' + this.overlayClassName);
+      if (overlay.length === 0) {
+        $('<div class="' + this.overlayClassName + '"></div>').appendTo($('body'));
+      }
+    },
+
+    removeOverlay: function () {
+      $('.' + this.overlayClassName).remove();
+    },
+
+    attachCloseEvents: function () {
+      var that = this;
+      $('body').on('click.' + EVENT_SCOPE, function () {
+        $('body').off('click.' + EVENT_SCOPE);
+        that.close();
+      });
+    }
+  });
+
+});