Allow the UI layout to be fully locked or to prevent docking changes. Fixes #2653

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

@@ -15,7 +15,7 @@ define('pgadmin.browser', [
   'sources/csrf', 'sources/keyboard_shortcuts', 'pgadmin.browser.utils',
   'wcdocker', 'jquery.contextmenu', 'jquery.aciplugin', 'jquery.acitree',
   'pgadmin.browser.preferences', 'pgadmin.browser.messages',
-  'pgadmin.browser.menu', 'pgadmin.browser.panel',
+  'pgadmin.browser.menu', 'pgadmin.browser.panel', 'pgadmin.browser.layout',
   'pgadmin.browser.error', 'pgadmin.browser.frame',
   'pgadmin.browser.node', 'pgadmin.browser.collection',
   'sources/codemirror/addon/fold/pgadmin-sqlfoldcode',
@@ -282,22 +282,6 @@ define('pgadmin.browser', [
       scripts[n].push({'name': m, 'path': p, loaded: false});
     },
     masterpass_callback_queue: [],
-    // Build the default layout
-    buildDefaultLayout: function(docker) {
-      var browserPanel = docker.addPanel('browser', wcDocker.DOCK.LEFT);
-      var dashboardPanel = docker.addPanel(
-        'dashboard', wcDocker.DOCK.RIGHT, browserPanel);
-      docker.addPanel('properties', wcDocker.DOCK.STACKED, dashboardPanel, {
-        tabOrientation: wcDocker.TAB.TOP,
-      });
-      docker.addPanel('sql', wcDocker.DOCK.STACKED, dashboardPanel);
-      docker.addPanel(
-        'statistics', wcDocker.DOCK.STACKED, dashboardPanel);
-      docker.addPanel(
-        'dependencies', wcDocker.DOCK.STACKED, dashboardPanel);
-      docker.addPanel(
-        'dependents', wcDocker.DOCK.STACKED, dashboardPanel);
-    },
     // Enable/disable menu options
     enable_disable_menus: function(item) {
       // Mechanism to enable/disable menus depending on the condition.
@@ -354,35 +338,6 @@ define('pgadmin.browser', [
         $obj_mnu.append(create_submenu.$el);
       }
     },
-    save_current_layout: function(layout_id, docker) {
-      if(docker) {
-        var layout = docker.save(),
-          settings = { setting: layout_id, value: layout };
-        $.ajax({
-          type: 'POST',
-          url: url_for('settings.store_bulk'),
-          data: settings,
-        });
-      }
-    },
-    restore_layout: function(docker, layout, defaultLayoutCallback) {
-      // Try to restore the layout if there is one
-      if (layout != '') {
-        try {
-          docker.restore(layout);
-        }
-        catch(err) {
-          docker.clear();
-          if(defaultLayoutCallback) {
-            defaultLayoutCallback(docker);
-          }
-        }
-      } else {
-        if(defaultLayoutCallback) {
-          defaultLayoutCallback(docker);
-        }
-      }
-    },
     init: function() {
       var obj=this;
       if (obj.initialized) {
@@ -799,8 +754,8 @@ define('pgadmin.browser', [
               menus = pgMenu[a];
             }
 
-            if (!_.has(menus, m.name)) {
-              menus[m.name] = new MenuItem({
+            let get_menuitem_obj = function(m) {
+              return new MenuItem({
                 name: m.name, label: m.label, module: m.module,
                 category: m.category, callback: m.callback,
                 priority: m.priority, data: m.data, url: m.url || '#',
@@ -808,8 +763,21 @@ define('pgadmin.browser', [
                 enable: (m.enable == '' ? true : (_.isString(m.enable) &&
                     m.enable.toLowerCase() == 'false') ?
                   false : m.enable),
-                node: m.node,
+                node: m.node, checked: m.checked,
               });
+            };
+
+            if (!_.has(menus, m.name)) {
+              menus[m.name] = get_menuitem_obj(m);
+
+              if(m.menu_items) {
+                let sub_menu_items = [];
+
+                for(let i=0; i<m.menu_items.length; i++) {
+                  sub_menu_items.push(get_menuitem_obj(m.menu_items[i]));
+                }
+                menus[m.name]['menu_items'] = sub_menu_items;
+              }
             }
           } else  {
             console.warn(

web/pgadmin/browser/static/js/layout.js

@@ -0,0 +1,161 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2019, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import pgAdmin from 'sources/pgadmin';
+import url_for from 'sources/url_for';
+import $ from 'jquery';
+import * as Alertify from 'pgadmin.alertifyjs';
+import gettext from 'sources/gettext';
+import 'wcdocker';
+
+const pgBrowser = pgAdmin.Browser = pgAdmin.Browser || {};
+
+var wcDocker = window.wcDocker;
+
+/* Add cache related methods and properties */
+_.extend(pgBrowser, {
+  lock_layout_levels : {
+    PREVENT_DOCKING: 'docking',
+    FULL: 'full',
+    NONE: 'none',
+  },
+
+  // Build the default layout
+  buildDefaultLayout: function(docker) {
+    var browserPanel = docker.addPanel('browser', wcDocker.DOCK.LEFT);
+    var dashboardPanel = docker.addPanel(
+      'dashboard', wcDocker.DOCK.RIGHT, browserPanel);
+    docker.addPanel('properties', wcDocker.DOCK.STACKED, dashboardPanel, {
+      tabOrientation: wcDocker.TAB.TOP,
+    });
+    docker.addPanel('sql', wcDocker.DOCK.STACKED, dashboardPanel);
+    docker.addPanel(
+      'statistics', wcDocker.DOCK.STACKED, dashboardPanel);
+    docker.addPanel(
+      'dependencies', wcDocker.DOCK.STACKED, dashboardPanel);
+    docker.addPanel(
+      'dependents', wcDocker.DOCK.STACKED, dashboardPanel);
+  },
+
+  save_current_layout: function(layout_id, docker) {
+    if(docker) {
+      var layout = docker.save(),
+        settings = { setting: layout_id, value: layout };
+      $.ajax({
+        type: 'POST',
+        url: url_for('settings.store_bulk'),
+        data: settings,
+      });
+    }
+  },
+
+  restore_layout: function(docker, layout, defaultLayoutCallback) {
+    // Try to restore the layout if there is one
+    if (layout != '') {
+      try {
+        docker.restore(layout);
+      }
+      catch(err) {
+        docker.clear();
+        if(defaultLayoutCallback) {
+          defaultLayoutCallback(docker);
+        }
+      }
+    } else {
+      if(defaultLayoutCallback) {
+        defaultLayoutCallback(docker);
+      }
+    }
+
+    /* preference available only with top/opener browser. */
+    let browser = window.opener ?
+      window.opener.pgAdmin.Browser : window.top.pgAdmin.Browser;
+
+    /* interval required initially as preference load may take time */
+    let cacheIntervalId = setInterval(()=> {
+      let browserPref = browser.get_preferences_for_module('browser');
+      if(browserPref) {
+        clearInterval(cacheIntervalId);
+
+        browser.reflectLocklayoutChange(docker);
+
+        browser.onPreferencesChange('browser', function() {
+          browser.reflectLocklayoutChange(docker);
+        });
+      }
+    }, 500);
+  },
+
+  reflectLocklayoutChange: function(docker) {
+    let browser = window.opener ?
+      window.opener.pgAdmin.Browser : window.top.pgAdmin.Browser;
+
+    let browserPref = browser.get_preferences_for_module('browser');
+    browser.lock_layout(docker, browserPref.lock_layout);
+  },
+
+  lock_layout: function(docker, op) {
+    let menu_items = this.menus['file']['mnu_locklayout']['menu_items'];
+
+    switch(op) {
+    case this.lock_layout_levels.PREVENT_DOCKING:
+      docker.lockLayout(wcDocker.LOCK_LAYOUT_LEVEL.PREVENT_DOCKING);
+      break;
+    case this.lock_layout_levels.FULL:
+      docker.lockLayout(wcDocker.LOCK_LAYOUT_LEVEL.FULL);
+      break;
+    case this.lock_layout_levels.NONE:
+      docker.lockLayout(wcDocker.LOCK_LAYOUT_LEVEL.NONE);
+      break;
+    }
+
+    _.each(menu_items, function(menu_item) {
+      if(menu_item.name != ('mnu_lock_'+op)) {
+        menu_item.change_checked(false);
+      } else {
+        menu_item.change_checked(true);
+      }
+    });
+  },
+
+  save_lock_layout: function(op) {
+    let browser = window.opener ?
+      window.opener.pgAdmin.Browser : window.top.pgAdmin.Browser;
+
+    $.ajax({
+      url: url_for('browser.lock_layout'),
+      method: 'PUT',
+      contentType: 'application/json',
+      data: JSON.stringify({
+        'value': op,
+      }),
+    }).done(function() {
+      browser.cache_preferences('browser');
+    }).fail(function(xhr, error) {
+      Alertify.pgNotifier(error, xhr, gettext('Failed to save the lock layout setting.'));
+    });
+  },
+
+  mnu_lock_docking: function() {
+    this.lock_layout(this.docker, this.lock_layout_levels.PREVENT_DOCKING);
+    this.save_lock_layout(this.lock_layout_levels.PREVENT_DOCKING);
+  },
+
+  mnu_lock_full: function() {
+    this.lock_layout(this.docker, this.lock_layout_levels.FULL);
+    this.save_lock_layout(this.lock_layout_levels.FULL);
+  },
+
+  mnu_lock_none: function() {
+    this.lock_layout(this.docker, this.lock_layout_levels.NONE);
+    this.save_lock_layout(this.lock_layout_levels.NONE);
+  },
+});
+
+export {pgBrowser};

web/pgadmin/browser/static/js/menu.js

@@ -19,6 +19,7 @@ define([
     var menu_opts = [
         'name', 'label', 'priority', 'module', 'callback', 'data', 'enable',
         'category', 'target', 'url' /* Do not show icon in the menus, 'icon' */ , 'node',
+        'checked', 'menu_items',
       ],
       defaults = {
         url: '#',
@@ -55,31 +56,48 @@ define([
      * Create the jquery element for the menu-item.
      */
     create_el: function(node, item) {
-      var url = $('<a></a>', {
-        'id': this.name,
-        'href': this.url,
-        'target': this.target,
-        'data-toggle': 'pg-menu',
-      }).data('pgMenu', {
-        module: this.module || pgAdmin.Browser,
-        cb: this.callback,
-        data: this.data,
-      }).addClass('dropdown-item');
 
-      this.is_disabled = this.disabled(node, item);
-      if (this.icon) {
-        url.append($('<i></i>', {
-          'class': this.icon,
-        }));
+      if(this.menu_items) {
+        _.each(this.menu_items, function(submenu_item){
+          submenu_item.generate(node, item);
+        });
+        var create_submenu = pgAdmin.Browser.MenuGroup({
+          'label': this.label,
+          'id': this.name,
+        }, this.menu_items);
+        this.$el = create_submenu.$el;
+      } else {
+        var url = $('<a></a>', {
+          'id': this.name,
+          'href': this.url,
+          'target': this.target,
+          'data-toggle': 'pg-menu',
+        }).data('pgMenu', {
+          module: this.module || pgAdmin.Browser,
+          cb: this.callback,
+          data: this.data,
+        }).addClass('dropdown-item');
+
+        this.is_disabled = this.disabled(node, item);
+        if (this.icon) {
+          url.append($('<i></i>', {
+            'class': this.icon,
+          }));
+        } else if(!_.isUndefined(this.checked)) {
+          url.append($('<i></i>', {
+            'class': 'fa fa-check '+ (this.checked?'':'visibility-hidden'),
+          }));
+        }
+
+        url.addClass((this.is_disabled ? ' disabled' : ''));
+
+        var textSpan = $('<span data-test="menu-item-text"></span>').text('  ' + this.label);
+
+        url.append(textSpan);
+
+        this.$el = $('<li/>').append(url);
       }
 
-      url.addClass((this.is_disabled ? ' disabled' : ''));
-
-      var textSpan = $('<span data-test="menu-item-text"></span>').text('  ' + this.label);
-
-      url.append(textSpan);
-
-      this.$el = $('<li/>').append(url);
     },
     /*
      * Updates the enable/disable state of the menu-item based on the current
@@ -154,6 +172,20 @@ define([
 
       return false;
     },
+
+    /*
+     * Change the checked value and update the checked icon on the menu
+     */
+    change_checked(isChecked) {
+      if(!_.isUndefined(this.checked)) {
+        this.checked = isChecked;
+        if(this.checked) {
+          this.$el.find('.fa-check').removeClass('visibility-hidden');
+        } else {
+          this.$el.find('.fa-check').addClass('visibility-hidden');
+        }
+      }
+    },
   });
 
   /*