Allow form validation messages to be close in case the eclipse anything on the form. Fixes #2859

web/pgadmin/browser/static/js/node.js

@@ -265,10 +265,16 @@ define(
                     <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\
                   </div>\
                     <div class="alert-text">' + msg + '</div>\
+                    <div class="close-error-bar">\
+                      <a class="close-error">x</a>\
+                    </div>\
                 </div>\
               </div>';
             if(!_.isUndefined(that.statusBar)) {
               that.statusBar.html(alertMessage).css("visibility", "visible");
+              that.statusBar.find("a.close-error").bind("click", function(e) {
+                 this.empty().css("visibility", "hidden");
+              }.bind(that.statusBar));
             }
             callback(true);
 

web/pgadmin/browser/static/js/wizard.js

@@ -96,6 +96,9 @@ function(_, Backbone, pgAdmin, pgBrowser) {
        + "            </div>"
        + "            <div class='alert-text'>"
        + "            </div>"
+       + "            <div class='close-error-bar'>"
+       + "              <a class='close-error'>x</a>"
+       + "            </div>"
        + "          </div>"
        + "        </div>"
        + "      </div>"
@@ -128,6 +131,7 @@ function(_, Backbone, pgAdmin, pgBrowser) {
       "click button.wizard-maximize-event" : "onMaximize",
       "click button.wizard-finish" : "finishWizard",
       "click button.wizard-help" : "onDialogHelp",
+      "click a.close-error" : "closeErrorMsg",
     },
     initialize: function(options) {
       this.options = _.extend({}, this.options, options.options);
@@ -224,6 +228,10 @@ function(_, Backbone, pgAdmin, pgBrowser) {
           this.options.disable_prev = false;
         }
     },
+    closeErrorMsg: function() {
+      $(this.el).find('.pg-prop-status-bar .alert-text').empty();
+      $(this.el).find('.pg-prop-status-bar').css("visibility", "hidden");
+    },
     beforeNext: function(){
       return this.evalASFunc(this.currPage.beforeNext);
     },

web/pgadmin/static/css/bootstrap.overrides.css

@@ -1176,6 +1176,16 @@ form[name="change_password_form"] .help-block {
   overflow: hidden;
 }
 
+.close-error-bar {
+  background: #d0021b;
+  padding: 5px;
+}
+
+.close-error-bar a {
+  color: #FFFFFF;
+  cursor: pointer;
+}
+
 .user_management .search_users form {
   margin: 0;
 }

web/pgadmin/static/scss/_alert.scss

@@ -104,8 +104,6 @@
   .alert-text {
     flex-grow: 1;
     border: 1px solid $color-red-2;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
     padding: 7px 12px 6px 10px;
     border-left: none;
   }

web/pgadmin/tools/user_management/static/js/user_management.js

@@ -477,8 +477,8 @@ define([
               prepare: function() {
                 var self = this,
                   footerTpl = _.template([
-                    '<div class="pg-prop-footer">',
-                      '<div class="pg-prop-status-bar" style="visibility:hidden">',
+                    '<div class="pg-prop-footer" style="visibility:hidden;">',
+                      '<div class="pg-prop-status-bar">',
                         '<div class="media error-in-footer bg-red-1 border-red-2 font-red-3 text-14">',
                           '<div class="media-body media-middle">',
                             '<div class="alert-icon error-icon">',
@@ -486,12 +486,12 @@ define([
                             '</div>',
                             '<div class="alert-text">',
                             '</div>',
+                            '<div class="close-error-bar"><a class="close-error">x</a></div>',
                           '</div>',
                         '</div>',
                       '</div>',
                     '</div>'].join("\n")),
-                  $footer = $(footerTpl()),
-                  $statusBar = $footer.find('.pg-prop-status-bar'),
+                  $statusBar = $(footerTpl()),
                   UserRow = Backgrid.Row.extend({
                     userInvalidColor: "lightYellow",
 
@@ -643,7 +643,7 @@ define([
 
                 this.$content = $("<div class='user_management object subnode'></div>").append(
                     headerTpl(data)).append($gridBody
-                    ).append($footer);
+                    ).append($statusBar);
 
                 $(this.elements.body.childNodes[0]).addClass(
                   'alertify_tools_dialog_backgrid_properties');
@@ -656,6 +656,11 @@ define([
 
                 userCollection.fetch();
 
+                this.$content.find('a.close-error').click(function(e) {
+                  $statusBar.find('.alert-text').empty();
+                  $statusBar.css("visibility", "hidden");
+                });
+
                 this.$content.find('button.add').first().click(function(e) {
                   e.preventDefault();
                   var canAddRow = true;