Add a Help button to the bottom left of the Wizard framework

web/pgadmin/browser/static/css/wizard.css

@@ -65,7 +65,8 @@
 }
 
 .wizard-right-panel_content {
-  height: calc(100% - 113px);
+  height: calc(100% - 86px);
+  padding: 0;
 }
 
 /* Wizard Footer CSS */
@@ -82,6 +83,10 @@
   padding: 0;
 }
 
+.pgadmin-wizard .footer .row {
+  margin: 0 -6px 3px -6px;
+}
+
 /* Wizard Button CSS */
 .pgadmin-wizard .wizard-buttons {
   float: right;

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

@@ -45,7 +45,8 @@ function(_, Backbone, pgAdmin, pgBrowser) {
       show_header_cancel_btn: false, /* show cancel button at wizard header */
       height: 400,
       width: 650,
-      show_left_panel: true
+      show_left_panel: true,
+      wizard_help: ''
     },
     tmpl: _.template(
        "    <div class='pgadmin-wizard' style='height: <%= this.options.height %>px;"
@@ -75,7 +76,10 @@ function(_, Backbone, pgAdmin, pgBrowser) {
        + "              <%= show_description %>"
        + "            </div>"
        + "          <% } %>"
-       + "          <div class='wizard-right-panel_content'>"
+       + "          <div class='wizard-progress-bar'><% if (show_progress_bar) { %>"
+       + "            <p class='alert alert-info col-sm-12'><%= show_progress_bar %></p><% } %>"
+       + "          </div>"
+       + "          <div class='wizard-right-panel_content col-xs-12'>"
        + "          </div>"
        + "        </div>"
        + "      </div>"
@@ -84,8 +88,9 @@ function(_, Backbone, pgAdmin, pgBrowser) {
        + "      </div>"
        + "      <div class='footer col-sm-12'>"
        + "        <div class='row'>"
-       + "          <div class='col-sm-4 wizard-progress-bar'>"
-       + "             <p><% if (show_progress_bar) { %><%= show_progress_bar %><% } %></p>"
+       + "          <div class='col-sm-4 wizard-buttons pull-left'>"
+       + "            <button title = 'Help for this dialog.' class='btn btn-default pull-left wizard-help' <%=this.options.wizard_help ? '' : 'disabled' %>>"
+       + "              <span class='fa fa-lg fa-question'></span></button>"
        + "          </div>"
        + "          <div class='col-sm-8'>"
        + "            <div class='wizard-buttons'>"
@@ -108,6 +113,7 @@ function(_, Backbone, pgAdmin, pgBrowser) {
       "click button.wizard-cancel" : "onCancel",
       "click button.wizard-cancel-event" : "onCancel",
       "click button.wizard-finish" : "finishWizard",
+      "click button.wizard-help" : "onDialogHelp",
     },
     initialize: function(options) {
       this.options = _.extend({}, this.options, options.options);
@@ -232,6 +238,22 @@ function(_, Backbone, pgAdmin, pgBrowser) {
       ctx = ctx || self.currPage;
 
       return (_.isFunction(func) ? func.apply(ctx, [self]) : func);
+    },
+    onDialogHelp: function() {
+      // See if we can find an existing panel, if not, create one
+      pnlDialogHelp = pgBrowser.docker.findPanels('pnl_online_help')[0];
+
+      if (pnlDialogHelp == null) {
+        pnlProperties = pgBrowser.docker.findPanels('properties')[0];
+        pgBrowser.docker.addPanel('pnl_online_help', wcDocker.DOCK.STACKED, pnlProperties);
+        pnlDialogHelp = pgBrowser.docker.findPanels('pnl_online_help')[0];
+      }
+
+      // Update the panel
+      iframe = $(pnlDialogHelp).data('embeddedFrame');
+
+      pnlDialogHelp.focus();
+      iframe.openURL(this.options.wizard_help);
     }
   });
 

web/pgadmin/tools/grant_wizard/static/css/grant_wizard.css

@@ -8,12 +8,14 @@
 
 .db_objects_container  {
   height: 100%;
+  padding: 0;
 }
 
 .object_type_table {
   height: 100%;
   border: 0 !important;
   display: inline;
+  padding: 0;
 }
 
 .object_type_table thead {
@@ -32,9 +34,7 @@
   overflow: auto;
   border: 1px solid #ddd;
   width: 100%;
-  min-height: 100%;
-  max-height: 66%;
-  height: 66%;
+  height: calc(100% - 25px);
 }
 
 .object_type_table tbody tr {
@@ -89,7 +89,6 @@
 
 /** Override Backgrid filter CSS **/
 .db_objects_container .backgrid-filter.form-search {
-  float: left;
   margin: 0px 5px 5px 0;
 }
 

web/pgadmin/tools/grant_wizard/templates/grant_wizard/js/grant_wizard.js

@@ -601,6 +601,7 @@ define([
                 coll.fetch({
                   success: function(collection, data) {
                     $('.wizard-progress-bar p').html('');
+                    $('.wizard-progress-bar').hide();
                   },
                   reset: true
                 }, this);
@@ -654,7 +655,7 @@ define([
 
                         // Create a grid container
                         var gridBody =
-                              $('<div class="db_objects_container"></div>');
+                              $('<div class="db_objects_container col-xs-12"></div>');
 
                         // Remove grid if exits before render
                         if (this.grid) {
@@ -665,7 +666,7 @@ define([
                         this.grid = new Backgrid.Grid({
                           columns: _.clone(columns),
                           collection: coll,
-                          className: "backgrid table-bordered object_type_table"
+                          className: "backgrid table-bordered object_type_table col-xs-12"
                           });
 
                         // Render selection Type grid and paginator
@@ -784,21 +785,25 @@ define([
                           if (privModel) {
                             data = privModel.toJSON();
                             var rolePrivs = data['acl'];
+                            if (!_.isUndefined(rolePrivs) && rolePrivs.length > 0) {
+                              for (var idx in rolePrivs) {
+                                var rolePriv = (rolePrivs[idx])['privileges'],
+                                    removeIdx = [], j;
 
-                            for (var idx in rolePrivs) {
-                              var rolePriv = (rolePrivs[idx])['privileges'],
-                                  removeIdx = [], j;
+                                for (j in rolePriv) {
+                                  var p = rolePriv[j];
+                                  if (_.indexOf(obj_priv, p['privilege_type']) == -1) {
+                                    removeIdx.push(j);
+                                  }
+                                }
 
-                              for (j in rolePriv) {
-                                var p = rolePriv[j];
-                                if (_.indexOf(obj_priv, p['privilege_type']) == -1) {
-                                  removeIdx.push(j);
+                                for (j in removeIdx) {
+                                  rolePriv.splice(j, 1);
                                 }
                               }
-
-                              for (j in removeIdx) {
-                                rolePriv.splice(j, 1);
-                              }
+                            } else {
+                              console.log('Acls are not defined');
+                              return;
                             }
                           }
 
@@ -1048,7 +1053,8 @@ define([
                     curr_page: 0,
                     show_left_panel: false,
                     show_header_cancel_btn: true,
-                    disable_finish: true
+                    disable_finish: true,
+                    wizard_help: "{{ url_for('help.static', filename='grant_wizard.html') }}"
                   },
 
                   // Callback for finish button