Optimize Webpack to improve overall performance.

Changes include:
1) Remove underscore-string and sprintf-js packages as we were using only %s. Instead, added a function to do the same. Also changed gettext to behave like sprintf directly.
2) backgrid.sizeable.columns was not used anywhere, removed. @babel/polyfill is deprecated, replaced it with core-js.
3) Moved few css to make sure they get minified and bundled.
4) Added Flask-Compress to send static files as compressed gzip. This will reduce network traffic and improve initial load time for pgAdmin.
5) Split few JS files to make code reusable.
6) Lazy load few modules like leaflet, wkx is required only if geometry viewer is opened. snapsvg loaded only when explain plan is executed. This will improve sqleditor initial opening time.

Reviewed By: Khushboo Vashi
Fixes #4701

docs/en_US/release_notes_4_14.rst

@@ -17,6 +17,7 @@ Housekeeping
 
 | `Issue #4472 <https://redmine.postgresql.org/issues/4472>`_ -  Add Reverse Engineered and Modified SQL tests for Synonyms.
 | `Issue #4628 <https://redmine.postgresql.org/issues/4628>`_ -  Add Reverse Engineered and Modified SQL tests for Unique Constraints.
+| `Issue #4701 <https://redmine.postgresql.org/issues/4701>`_ -  Optimize Webpack to improve overall performance.
 
 Bug fixes
 *********

requirements.txt

@@ -24,6 +24,7 @@ Flask-Migrate==2.4.0
 Flask-Principal==0.4.0
 Flask-SQLAlchemy==2.3.2
 Flask-WTF==0.14.2
+Flask-Compress==1.4.0
 passlib==1.7.1
 pytz==2018.9
 simplejson==3.16.0
@@ -35,10 +36,6 @@ Flask-Paranoid==0.2.0
 psutil==5.5.1
 psycopg2>=2.8
 python-dateutil>=2.8.0
-htmlmin==0.1.12
-Flask-HTMLmin==1.5.0
 SQLAlchemy>=1.2.18
 Flask-Security>=3.0.0
 sshtunnel>=0.1.4
-
-

web/config.py

@@ -180,10 +180,13 @@ PROXY_X_PREFIX_COUNT = 0
 #       longer part of the main configuration, but are stored in the
 #       configuration databases 'keys' table and are auto-generated.
 
-# Should HTML be minified on the fly when not in debug mode?
+# COMPRESSION
-# NOTE: The HTMLMIN module doesn't work with Python 2.6, so this option
+COMPRESS_MIMETYPES = [
-#       has no effect on <= Python 2.7.
+    'text/html', 'text/css', 'text/xml', 'application/json',
-MINIFY_PAGE = True
+    'application/javascript'
+]
+COMPRESS_LEVEL = 9
+COMPRESS_MIN_SIZE = 500
 
 # Set the cache control max age for static files in flask to 1 year
 SEND_FILE_MAX_AGE_DEFAULT = 31556952

web/package.json

@@ -7,11 +7,12 @@
   ],
   "license": "PostgreSQL",
   "devDependencies": {
-    "@babel/core": "~7.3.4",
+    "@babel/core": "~7.6.0",
-    "@babel/preset-env": "~7.3.4",
+    "@babel/preset-env": "~7.6.0",
-    "axios-mock-adapter": "^1.16.0",
+    "axios-mock-adapter": "^1.17.0",
     "babel-loader": "~8.0.5",
     "babel-plugin-transform-object-rest-spread": "^7.0.0-beta.3",
+    "core-js": "^3.2.1",
     "cross-env": "^5.2.0",
     "eclint": "^2.8.1",
     "eslint": "5.15.1",
@@ -40,11 +41,12 @@
     "uglifyjs-webpack-plugin": "^2.1.2",
     "url-loader": "^1.1.2",
     "webpack": "^4.29.6",
+    "webpack-bundle-analyzer": "^3.5.1",
     "webpack-cli": "^3.2.3",
+    "webpack-require-from": "^1.8.0",
     "yarn-audit-html": "^1.1.0"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.2.5",
     "acitree": "git+https://github.com/imsurinder90/jquery-aciTree.git#rc.7",
     "alertifyjs": "1.7.1",
     "axios": "^0.18.1",
@@ -53,10 +55,8 @@
     "babelify": "~10.0.0",
     "backbone": "1.4.0",
     "backform": "^0.2.0",
-    "backgrid": "^0.3.8",
     "backgrid-filter": "^0.3.7",
     "backgrid-select-all": "^0.3.5",
-    "backgrid-sizeable-columns": "^0.1.1",
     "bignumber.js": "^8.1.1",
     "bootstrap": "^4.3.1",
     "bootstrap-datepicker": "^1.8.0",
@@ -88,12 +88,10 @@
     "snapsvg": "^0.5.1",
     "spectrum-colorpicker": "^1.8.0",
     "split.js": "^1.5.10",
-    "sprintf-js": "^1.1.2",
     "tablesorter": "^2.31.1",
     "tempusdominus-bootstrap-4": "^5.1.2",
     "tempusdominus-core": "^5.0.3",
     "underscore": "^1.9.1",
-    "underscore.string": "^3.3.5",
     "watchify": "~3.11.1",
     "webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker/#c95d295382ac61159e571af9c3b8f4f8ae81746d",
     "wkx": "^0.4.6"
@@ -104,6 +102,7 @@
     "webpacker:watch": "yarn run webpack --config webpack.config.js --progress --watch",
     "bundle:watch": "yarn run linter && yarn run webpacker:watch",
     "bundle:dev": "yarn run linter && yarn run webpacker",
+    "bundle:analyze": "cross-env NODE_ENV=production ANALYZE=true yarn run bundle:dev",
     "bundle": "cross-env NODE_ENV=production yarn run bundle:dev",
     "test:karma-once": "yarn run linter && yarn run karma start --single-run",
     "test:karma": "yarn run linter && yarn run karma start",

web/pgadmin/__init__.py

@@ -705,11 +705,11 @@ def create_app(app_name=None):
             values.pop(config.APP_VERSION_PARAM)
 
     ##########################################################################
-    # Minify output
+    # Minify output. Not required in desktop mode
     ##########################################################################
-    if not config.DEBUG:
+    if not config.DEBUG and config.SERVER_MODE:
-        from flask_htmlmin import HTMLMIN
+        from flask_compress import Compress
-        HTMLMIN(app)
+        Compress(app)
 
     @app.context_processor
     def inject_blueprint():

web/pgadmin/about/static/js/about.js

@@ -8,10 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 define(
-  ['jquery', 'alertify', 'sources/pgadmin', 'underscore.string', 'sources/gettext',
+  ['jquery', 'alertify', 'sources/pgadmin', 'sources/gettext',
     'sources/url_for',
   ],
-  function($, alertify, pgAdmin, S, gettext, url_for) {
+  function($, alertify, pgAdmin, gettext, url_for) {
     pgAdmin = pgAdmin || window.pgAdmin || {};
 
     /* Return back, this has been called more than once */
@@ -53,7 +53,7 @@ define(
         $.get(url_for('about.index'),
           function(data) {
             alertify.aboutDialog(
-              S(gettext('About %s')).sprintf(pgAdmin.Browser.utils.app_name).value(), data
+              gettext('About %s', pgAdmin.Browser.utils.app_name), data
             ).resizeTo(pgAdmin.Browser.stdW.md, pgAdmin.Browser.stdH.md);
           });
       },

web/pgadmin/browser/server_groups/servers/databases/casts/static/js/cast.js

@@ -9,9 +9,9 @@
 
 define('pgadmin.node.cast', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.alertifyjs', 'pgadmin.backform', 'pgadmin.browser.collection',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, alertify, Backform) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, alertify, Backform) {
   // Extend the collection class for cast
   if (!pgBrowser.Nodes['coll-cast']) {
     pgAdmin.Browser.Nodes['coll-cast'] =

web/pgadmin/browser/server_groups/servers/databases/event_triggers/static/js/event_trigger.js

@@ -9,9 +9,9 @@
 
 define('pgadmin.node.event_trigger', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.backform', 'pgadmin.browser.collection',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, Backform) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, Backform) {
 
   // Extend the browser's collection class for event trigger collection
   if (!pgBrowser.Nodes['coll-event_trigger']) {

web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.js

@@ -9,9 +9,9 @@
 
 define('pgadmin.node.extension', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.backform', 'pgadmin.browser.collection',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, Backform) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, Backform) {
 
   /*
    * Create and Add an Extension Collection into nodes

web/pgadmin/browser/server_groups/servers/databases/foreign_data_wrappers/foreign_servers/static/js/foreign_server.js

@@ -8,10 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 define('pgadmin.node.foreign_server', [
-  'sources/gettext', 'jquery', 'underscore', 'underscore.string', 'sources/pgadmin',
+  'sources/gettext', 'jquery', 'underscore', 'sources/pgadmin',
   'pgadmin.browser', 'pgadmin.backform', 'pgadmin.browser.collection',
   'pgadmin.browser.server.privilege',
-], function(gettext, $, _, S, pgAdmin, pgBrowser, Backform) {
+], function(gettext, $, _, pgAdmin, pgBrowser, Backform) {
 
   // Extend the browser's node model class to create a Options model
   var OptionsModel = pgAdmin.Browser.Node.Model.extend({

web/pgadmin/browser/server_groups/servers/databases/foreign_data_wrappers/foreign_servers/user_mappings/static/js/user_mapping.js

@@ -9,9 +9,9 @@
 
 define('pgadmin.node.user_mapping', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.backform', 'pgadmin.browser.collection',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, Backform) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, Backform) {
 
   // Extend the browser's node model class to create a Options model
   var OptionsModel = pgAdmin.Browser.Node.Model.extend({

web/pgadmin/browser/server_groups/servers/databases/foreign_data_wrappers/static/js/foreign_data_wrapper.js

@@ -9,9 +9,9 @@
 
 define('pgadmin.node.foreign_data_wrapper', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser', 'pgadmin.backform',
+  'sources/pgadmin', 'pgadmin.browser', 'pgadmin.backform',
   'pgadmin.browser.collection', 'pgadmin.browser.server.privilege',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, Backform) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, Backform) {
 
   // Extend the browser's node model class to create a Options model
   var OptionsModel = pgBrowser.Node.Model.extend({

web/pgadmin/browser/server_groups/servers/databases/languages/static/js/language.js

@@ -9,9 +9,9 @@
 
 define('pgadmin.node.language', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser', 'pgadmin.backform',
+  'sources/pgadmin', 'pgadmin.browser', 'pgadmin.backform',
   'pgadmin.browser.collection', 'pgadmin.browser.server.privilege',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, Backform) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, Backform) {
 
   // Extend the browser's collection class for languages collection
   if (!pgBrowser.Nodes['coll-language']) {

web/pgadmin/browser/server_groups/servers/databases/schemas/catalog_objects/columns/static/js/catalog_object_column.js

@@ -8,9 +8,9 @@
 //////////////////////////////////////////////////////////////
 
 define('pgadmin.node.catalog_object_column', [
-  'sources/gettext', 'jquery', 'underscore', 'underscore.string', 'sources/pgadmin',
+  'sources/gettext', 'jquery', 'underscore', 'sources/pgadmin',
   'pgadmin.browser', 'pgadmin.browser.collection',
-], function(gettext, $, _, S, pgAdmin, pgBrowser) {
+], function(gettext, $, _, pgAdmin, pgBrowser) {
 
   if (!pgBrowser.Nodes['coll-catalog_object_column']) {
     pgAdmin.Browser.Nodes['coll-catalog_object_column'] =

web/pgadmin/browser/server_groups/servers/databases/schemas/catalog_objects/static/js/catalog_object.js

@@ -8,9 +8,9 @@
 //////////////////////////////////////////////////////////////
 
 define('pgadmin.node.catalog_object', [
-  'sources/gettext', 'jquery', 'underscore', 'underscore.string', 'sources/pgadmin',
+  'sources/gettext', 'jquery', 'underscore', 'sources/pgadmin',
   'pgadmin.browser', 'pgadmin.browser.collection',
-], function(gettext, $, _, S, pgAdmin, pgBrowser) {
+], function(gettext, $, _, pgAdmin, pgBrowser) {
 
   if (!pgBrowser.Nodes['coll-catalog_object']) {
     pgAdmin.Browser.Nodes['coll-catalog_object'] =

web/pgadmin/browser/server_groups/servers/databases/schemas/collations/static/js/collation.js

@@ -9,10 +9,10 @@
 
 define('pgadmin.node.collation', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.node.schema.dir/child', 'pgadmin.node.schema.dir/schema_child_tree_node',
   'pgadmin.browser.collection',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, schemaChild,
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, schemaChild,
   schemaChildTreeNode) {
 
   if (!pgBrowser.Nodes['coll-collation']) {

web/pgadmin/browser/server_groups/servers/databases/schemas/domains/domain_constraints/static/js/domain_constraints.js

@@ -10,9 +10,9 @@
 // Domain Constraint Module: Collection and Node
 define('pgadmin.node.domain_constraints', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.node.schema.dir/schema_child_tree_node', 'pgadmin.browser.collection',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, schemaChildTreeNode) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, schemaChildTreeNode) {
 
   // Define Domain Constraint Collection Node
   if (!pgBrowser.Nodes['coll-domain_constraints']) {

web/pgadmin/browser/server_groups/servers/databases/schemas/fts_dictionaries/static/js/fts_dictionary.js

@@ -9,11 +9,11 @@
 
 define('pgadmin.node.fts_dictionary', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser', 'pgadmin.backform',
+  'sources/pgadmin', 'pgadmin.browser', 'pgadmin.backform',
   'pgadmin.node.schema.dir/child', 'pgadmin.node.schema.dir/schema_child_tree_node',
   'pgadmin.browser.collection',
 ], function(
-  gettext, url_for, $, _, S, pgAdmin, pgBrowser, Backform, schemaChild,
+  gettext, url_for, $, _, pgAdmin, pgBrowser, Backform, schemaChild,
   schemaChildTreeNode
 ) {
 

web/pgadmin/browser/server_groups/servers/databases/schemas/functions/static/js/procedure.js

@@ -10,11 +10,11 @@
 /* Create and Register Procedure Collection and Node. */
 define('pgadmin.node.procedure', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser', 'alertify',
+  'sources/pgadmin', 'pgadmin.browser', 'alertify',
   'pgadmin.node.function', 'pgadmin.node.schema.dir/child',
   'pgadmin.node.schema.dir/schema_child_tree_node',
   'pgadmin.browser.collection', 'pgadmin.browser.server.privilege',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, alertify, Function,
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, alertify, Function,
   schemaChild, schemaChildTreeNode) {
 
   if (!pgBrowser.Nodes['coll-procedure']) {

web/pgadmin/browser/server_groups/servers/databases/schemas/sequences/static/js/sequence.js

@@ -9,11 +9,11 @@
 
 define('pgadmin.node.sequence', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser', 'pgadmin.backform',
+  'sources/pgadmin', 'pgadmin.browser', 'pgadmin.backform',
   'pgadmin.node.schema.dir/child', 'pgadmin.node.schema.dir/schema_child_tree_node',
   'pgadmin.browser.collection',
 ], function(
-  gettext, url_for, $, _, S, pgAdmin, pgBrowser, Backform, schemaChild,
+  gettext, url_for, $, _, pgAdmin, pgBrowser, Backform, schemaChild,
   schemaChildTreeNode
 ) {
 

web/pgadmin/browser/server_groups/servers/databases/schemas/synonyms/static/js/synonym.js

@@ -9,10 +9,10 @@
 
 define('pgadmin.node.synonym', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser', 'pgadmin.alertifyjs',
+  'sources/pgadmin', 'pgadmin.browser', 'pgadmin.alertifyjs',
   'pgadmin.node.schema.dir/child', 'pgadmin.node.schema.dir/schema_child_tree_node',
   'pgadmin.browser.collection',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, alertify,
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, alertify,
   schemaChild, schemaChildTreeNode) {
 
   if (!pgBrowser.Nodes['coll-synonym']) {

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/compound_triggers/static/js/compound_trigger.js

@@ -9,12 +9,12 @@
 
 define('pgadmin.node.compound_trigger', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.backform', 'pgadmin.alertifyjs',
   'pgadmin.node.schema.dir/schema_child_tree_node',
   'pgadmin.browser.collection',
 ], function(
-  gettext, url_for, $, _, S, pgAdmin, pgBrowser, Backform, alertify,
+  gettext, url_for, $, _, pgAdmin, pgBrowser, Backform, alertify,
   SchemaChildTreeNode
 ) {
 

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/check_constraint/static/js/check_constraint.js

@@ -10,9 +10,9 @@
 // Check Constraint Module: Node
 define('pgadmin.node.check_constraint', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser', 'pgadmin.alertifyjs',
+  'sources/pgadmin', 'pgadmin.browser', 'pgadmin.alertifyjs',
   'pgadmin.node.schema.dir/schema_child_tree_node', 'pgadmin.browser.collection',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, alertify, schemaChildTreeNode) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, alertify, schemaChildTreeNode) {
 
   // Check Constraint Node
   if (!pgBrowser.Nodes['check_constraint']) {

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/index_constraint/static/js/primary_key.js

@@ -640,7 +640,7 @@ define('pgadmin.node.primary_key', [
 
           if ((_.isUndefined(index) || String(index).replace(/^\s+|\s+$/g, '') == '') &&
             (_.isUndefined(columns) || _.isNull(columns) || columns.length < 1)) {
-            var msg = gettext('Please specify columns for %(node)s', {node: gettext('Primary key')});
+            var msg = gettext('Please specify columns for %s', gettext('Primary key'));
             this.errorModel.set('columns', msg);
             return msg;
           }

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/index_constraint/static/js/unique_constraint.js

@@ -629,7 +629,7 @@ define('pgadmin.node.unique_constraint', [
 
           if ((_.isUndefined(index) || String(index).replace(/^\s+|\s+$/g, '') == '') &&
             (_.isUndefined(columns) || _.isNull(columns) || columns.length < 1)) {
-            var msg = gettext('Please specify columns for %(node)s', {node: gettext('Unique constraint')});
+            var msg = gettext('Please specify columns for %s', gettext('Unique constraint'));
             this.errorModel.set('columns', msg);
             return msg;
           }

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/partitions/static/js/partition.js

@@ -9,14 +9,14 @@
 
 define([
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.alertifyjs', 'pgadmin.backform', 'pgadmin.backgrid',
-  'pgadmin.node.schema.dir/schema_child_tree_node',
+  'pgadmin.node.schema.dir/schema_child_tree_node', 'sources/utils',
   'pgadmin.browser.collection', 'pgadmin.browser.table.partition.utils',
 ],
 function(
-  gettext, url_for, $, _, S, pgAdmin, pgBrowser, Alertify, Backform, Backgrid,
+  gettext, url_for, $, _, pgAdmin, pgBrowser, Alertify, Backform, Backgrid,
-  SchemaChildTreeNode
+  SchemaChildTreeNode, pgadminUtils
 ) {
 
   if (!pgBrowser.Nodes['coll-partition']) {
@@ -107,13 +107,13 @@ function(
         info = (_.isUndefined(item) || _.isNull(item)) ?
           info || {} : this.getTreeNodeHierarchy(item);
 
-        return S('table/%s/%s/%s/%s/%s/%s').sprintf(
+        return pgadminUtils.sprintf('table/%s/%s/%s/%s/%s/%s',
           encodeURIComponent(type), encodeURIComponent(info['server_group']._id),
           encodeURIComponent(info['server']._id),
           encodeURIComponent(info['database']._id),
           encodeURIComponent(info['partition'].schema_id),
           encodeURIComponent(info['partition']._id)
-        ).value();
+        );
       },
       canDrop: SchemaChildTreeNode.isTreeItemOfChildOfSchema,
       canDropCascade: SchemaChildTreeNode.isTreeItemOfChildOfSchema,
@@ -184,7 +184,7 @@ function(
 
           Alertify.confirm(
             gettext('Truncate Table'),
-            S(gettext('Are you sure you want to truncate table %s?')).sprintf(d.label).value(),
+            gettext('Are you sure you want to truncate table %s?', d.label),
             function (e) {
               if (e) {
                 var data = d;
@@ -229,7 +229,7 @@ function(
 
           Alertify.confirm(
             gettext('Reset statistics'),
-            S(gettext('Are you sure you want to reset the statistics for table "%s"?')).sprintf(d._label).value(),
+            gettext('Are you sure you want to reset the statistics for table "%s"?', d._label),
             function (e) {
               if (e) {
                 var data = d;
@@ -273,7 +273,7 @@ function(
 
           Alertify.confirm(
             gettext('Detach Partition'),
-            S(gettext('Are you sure you want to detach the partition %s?')).sprintf(d._label).value(),
+            gettext('Are you sure you want to detach the partition %s?', d._label),
             function (e) {
               if (e) {
                 $.ajax({

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/table.js

@@ -10,7 +10,7 @@
 define('pgadmin.node.table', [
   'pgadmin.tables.js/enable_disable_triggers',
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.alertifyjs', 'pgadmin.backform', 'pgadmin.backgrid',
   'pgadmin.tables.js/show_advanced_tab',
   'pgadmin.node.schema.dir/child','pgadmin.node.schema.dir/schema_child_tree_node',
@@ -18,7 +18,7 @@ define('pgadmin.node.table', [
   'pgadmin.node.constraints', 'pgadmin.browser.table.partition.utils',
 ], function(
   tableFunctions,
-  gettext, url_for, $, _, S, pgAdmin, pgBrowser, Alertify, Backform, Backgrid,
+  gettext, url_for, $, _, pgAdmin, pgBrowser, Alertify, Backform, Backgrid,
   ShowAdvancedTab, SchemaChild, SchemaChildTreeNode
 ) {
 
@@ -165,7 +165,7 @@ define('pgadmin.node.table', [
 
           Alertify.confirm(
             gettext('Truncate Table'),
-            S(gettext('Are you sure you want to truncate table %s?')).sprintf(d.label).value(),
+            gettext('Are you sure you want to truncate table %s?', d.label),
             function (e) {
               if (e) {
                 var data = d;
@@ -210,7 +210,7 @@ define('pgadmin.node.table', [
 
           Alertify.confirm(
             gettext('Reset statistics'),
-            S(gettext('Are you sure you want to reset the statistics for table "%s"?')).sprintf(d._label).value(),
+            gettext('Are you sure you want to reset the statistics for table "%s"?', d._label),
             function (e) {
               if (e) {
                 var data = d;

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js

@@ -9,12 +9,12 @@
 
 define('pgadmin.node.trigger', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.backform', 'pgadmin.alertifyjs',
   'pgadmin.node.schema.dir/schema_child_tree_node',
   'pgadmin.browser.collection',
 ], function(
-  gettext, url_for, $, _, S, pgAdmin, pgBrowser, Backform, alertify,
+  gettext, url_for, $, _, pgAdmin, pgBrowser, Backform, alertify,
   SchemaChildTreeNode
 ) {
 

web/pgadmin/browser/server_groups/servers/databases/schemas/types/static/js/type.js

@@ -218,9 +218,9 @@ define('pgadmin.node.type', [
       else if (this.get('is_tlength')
         && !_.isUndefined(this.get('tlength'))) {
         if (this.get('tlength') < this.get('min_val'))
-          errmsg = gettext('Length/precision should not be less than %(value)s', {value: this.get('min_val')});
+          errmsg = gettext('Length/precision should not be less than %s', this.get('min_val'));
         if (this.get('tlength') > this.get('max_val') )
-          errmsg = gettext('Length/precision should not be greater than %(value)s', {value: this.get('max_val')});
+          errmsg = gettext('Length/precision should not be greater than %s', this.get('max_val'));
           // If we have any error set then throw it to user
         if(errmsg) {
           this.errorModel.set('tlength', errmsg);
@@ -231,9 +231,9 @@ define('pgadmin.node.type', [
       else if (this.get('is_precision')
         && !_.isUndefined(this.get('precision'))) {
         if (this.get('precision') < this.get('min_val'))
-          errmsg = gettext('Scale should not be less than %(value)s', {value: this.get('min_val')});
+          errmsg = gettext('Scale should not be less than %s', this.get('min_val'));
         if (this.get('precision') > this.get('max_val'))
-          errmsg = gettext('Scale should not be greater than %(value)s', {value: this.get('max_val')});
+          errmsg = gettext('Scale should not be greater than %s', this.get('max_val'));
           // If we have any error set then throw it to user
         if(errmsg) {
           this.errorModel.set('precision', errmsg);

web/pgadmin/browser/server_groups/servers/databases/static/js/database.js

@@ -9,10 +9,10 @@
 
 define('pgadmin.node.database', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser.utils',
+  'sources/utils', 'sources/pgadmin', 'pgadmin.browser.utils',
   'pgadmin.alertifyjs', 'pgadmin.backform', 'pgadmin.browser.collection',
   'pgadmin.browser.server.privilege', 'pgadmin.browser.server.variable',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, Alertify, Backform) {
+], function(gettext, url_for, $, _, pgadminUtils, pgAdmin, pgBrowser, Alertify, Backform) {
 
   if (!pgBrowser.Nodes['coll-database']) {
     pgBrowser.Nodes['coll-database'] =
@@ -190,7 +190,7 @@ define('pgadmin.node.database', [
 
           Alertify.confirm(
             gettext('Disconnect the database'),
-            S(gettext('Are you sure you want to disconnect the database - %s?')).sprintf(d.label).value(),
+            pgadminUtils.sprintf(gettext('Are you sure you want to disconnect the database - %s?'), d.label),
             function() {
               var data = d;
               $.ajax({

web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js

@@ -9,10 +9,10 @@
 
 define('pgadmin.node.pga_schedule', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'moment', 'pgadmin.browser', 'alertify',
+  'sources/pgadmin', 'moment', 'pgadmin.browser', 'alertify',
   'pgadmin.backform', 'pgadmin.backgrid',
 ], function(
-  gettext, url_for, $, _, S, pgAdmin, moment, pgBrowser, Alertify, Backform,
+  gettext, url_for, $, _, pgAdmin, moment, pgBrowser, Alertify, Backform,
   Backgrid
 ) {
 

web/pgadmin/browser/server_groups/servers/pgagent/static/js/pga_job.js

@@ -9,9 +9,9 @@
 
 define('pgadmin.node.pga_job', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser', 'pgadmin.alertifyjs',
+  'sources/pgadmin', 'pgadmin.browser', 'pgadmin.alertifyjs',
   'pgadmin.node.pga_jobstep', 'pgadmin.node.pga_schedule',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, alertify) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, alertify) {
 
   if (!pgBrowser.Nodes['coll-pga_job']) {
     pgBrowser.Nodes['coll-pga_job'] =

web/pgadmin/browser/server_groups/servers/pgagent/steps/static/js/pga_jobstep.js

@@ -9,9 +9,9 @@
 
 define('pgadmin.node.pga_jobstep', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser', 'alertify', 'backform',
+  'sources/pgadmin', 'pgadmin.browser', 'alertify', 'backform',
   'backgrid', 'pgadmin.backform', 'pgadmin.backgrid',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, Alertify, Backform, Backgrid) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, Alertify, Backform, Backgrid) {
 
   if (!pgBrowser.Nodes['coll-pga_jobstep']) {
     pgBrowser.Nodes['coll-pga_jobstep'] =
@@ -190,11 +190,9 @@ define('pgadmin.node.pga_jobstep', [
           id: 'jstconnstr', label: gettext('Connection string'), type: 'text',
           deps: ['jstkind', 'jstconntype'], disabled: function(m) {
             return !m.get('jstkind') || m.get('jstconntype');
-          }, helpMessage: S(
+          }, helpMessage: gettext('Please specify the connection string for the remote database server. Each parameter setting is in the form keyword = value. Spaces around the equal sign are optional. To write an empty value, or a value containing spaces, surround it with single quotes, e.g., keyword = \'a value\'. Single quotes and backslashes within the value must be escaped with a backslash, i.e., \' and \\.<br>For more information, please see the documentation on %s',
-            gettext('Please specify the connection string for the remote database server. Each parameter setting is in the form keyword = value. Spaces around the equal sign are optional. To write an empty value, or a value containing spaces, surround it with single quotes, e.g., keyword = \'a value\'. Single quotes and backslashes within the value must be escaped with a backslash, i.e., \' and \\.<br>For more information, please see the documentation on %s')
-          ).sprintf(
             '<a href="https://www.postgresql.org/docs/current/libpq-connect.html#LIBPQ-CONNSTRING" target="_blank">libpq connection strings</a>'
-          ).value(), mode: ['create', 'edit'],
+          ), mode: ['create', 'edit'],
         },{
           id: 'jstonerror', label: gettext('On error'), cell: 'select2',
           control: 'select2', options: [
@@ -273,9 +271,7 @@ define('pgadmin.node.pga_jobstep', [
                     break;
                   }
 
-                  msg = S(
+                  msg = gettext('Invalid parameter in the connection string - %s.', m[1]);
-                    gettext('Invalid parameter in the connection string - %s.')
-                  ).sprintf(m[1]).value();
                   break;
                 }
               }

web/pgadmin/browser/server_groups/servers/roles/static/js/role.js

@@ -9,10 +9,10 @@
 
 define('pgadmin.node.role', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser', 'alertify',
+  'sources/pgadmin', 'pgadmin.browser', 'alertify',
   'pgadmin.backform', 'select2', 'pgadmin.browser.collection',
   'pgadmin.browser.node.ui', 'pgadmin.browser.server.variable',
-], function(gettext, url_for, $, _, S, pgAdmin, pgBrowser, alertify, Backform) {
+], function(gettext, url_for, $, _, pgAdmin, pgBrowser, alertify, Backform) {
 
   if (!pgBrowser.Nodes['coll-role']) {
     pgAdmin.Browser.Nodes['coll-role'] =

web/pgadmin/browser/server_groups/servers/static/js/server.js

@@ -9,13 +9,13 @@
 
 define('pgadmin.node.server', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'backbone',
-  'underscore.string', 'sources/pgadmin', 'pgadmin.browser',
+  'sources/pgadmin', 'pgadmin.browser',
   'pgadmin.server.supported_servers', 'pgadmin.user_management.current_user',
   'pgadmin.alertifyjs', 'pgadmin.backform',
   'sources/browser/server_groups/servers/model_validation',
   'pgadmin.browser.server.privilege',
 ], function(
-  gettext, url_for, $, _, Backbone, S, pgAdmin, pgBrowser,
+  gettext, url_for, $, _, Backbone, pgAdmin, pgBrowser,
   supported_servers, current_user, Alertify, Backform,
   modelValidation
 ) {
@@ -260,10 +260,7 @@ define('pgadmin.node.server', [
           if (notify) {
             Alertify.confirm(
               gettext('Disconnect server'),
-              gettext(
+              gettext('Are you sure you want to disconnect the server %s?', d.label),
-                'Are you sure you want to disconnect the server %(server)s?',
-                {server: d.label}
-              ),
               function() { disconnect(); },
               function() { return true;}
             );
@@ -310,9 +307,7 @@ define('pgadmin.node.server', [
 
           Alertify.confirm(
             gettext('Reload server configuration'),
-            S(
+            gettext('Are you sure you want to reload the server configuration on %s?', d.label),
-              gettext('Are you sure you want to reload the server configuration on %s?')
-            ).sprintf(d.label).value(),
             function() {
               $.ajax({
                 url: obj.generate_url(i, 'reload', d, true),
@@ -643,9 +638,7 @@ define('pgadmin.node.server', [
 
           Alertify.confirm(
             gettext('Clear saved password'),
-            S(
+            gettext('Are you sure you want to clear the saved password for server %s?', d.label),
-              gettext('Are you sure you want to clear the saved password for server %s?')
-            ).sprintf(d.label).value(),
             function() {
               $.ajax({
                 url: obj.generate_url(i, 'clear_saved_password', d, true),
@@ -683,9 +676,7 @@ define('pgadmin.node.server', [
 
           Alertify.confirm(
             gettext('Clear SSH Tunnel password'),
-            S(
+            gettext('Are you sure you want to clear the saved password of SSH Tunnel for server %s?', d.label),
-              gettext('Are you sure you want to clear the saved password of SSH Tunnel for server %s?')
-            ).sprintf(d.label).value(),
             function() {
               $.ajax({
                 url: obj.generate_url(i, 'clear_sshtunnel_password', d, true),

web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js

@@ -281,8 +281,8 @@ define('pgadmin.node.tablespace', [
                     Alertify.confirm(
                       gettext('Move objects...'),
                       gettext(
-                        'Are you sure you wish to move the objects from %(old_tablespace)s to %(new_tablespace)s?',
+                        'Are you sure you wish to move the objects from %s to %s?',
-                        {old_tablespace: args.old_tblspc, new_tablespace: args.tblspc}
+                        args.old_tblspc, args.tblspc
                       ),
                       function() {
                         $.ajax({

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

@@ -9,7 +9,7 @@
 
 define('pgadmin.browser', [
   'sources/tree/tree',
-  'sources/gettext', 'sources/url_for', 'require', 'jquery', 'underscore', 'underscore.string',
+  'sources/gettext', 'sources/url_for', 'require', 'jquery', 'underscore',
   'bootstrap', 'sources/pgadmin', 'pgadmin.alertifyjs', 'bundled_codemirror',
   'sources/check_node_visibility', './toolbar', 'pgadmin.help',
   'sources/csrf', 'sources/utils', 'sources/window', 'pgadmin.browser.utils',
@@ -22,7 +22,7 @@ define('pgadmin.browser', [
   'pgadmin.browser.keyboard', 'sources/tree/pgadmin_tree_save_state',
 ], function(
   tree,
-  gettext, url_for, require, $, _, S,
+  gettext, url_for, require, $, _,
   Bootstrap, pgAdmin, Alertify, codemirror,
   checkNodeVisibility, toolBar, help, csrfToken, pgadminUtils, pgWindow
 ) {
@@ -724,7 +724,7 @@ define('pgadmin.browser', [
 
         if(!_.isUndefined(confirm_on_refresh_close) && confirm_on_refresh_close.value) {
           /* This message will not be displayed in Chrome, Firefox, Safari as they have disabled it*/
-          let msg = S(gettext('Are you sure you want to close the %s browser?')).sprintf(pgBrowser.utils.app_name).value();
+          let msg = gettext('Are you sure you want to close the %s browser?', pgBrowser.utils.app_name);
           e.originalEvent.returnValue = msg;
           return msg;
         }

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

@@ -11,11 +11,11 @@
 //import Mousetrap from 'mousetrap';
 
 define([
-  'sources/gettext', 'jquery', 'underscore', 'underscore.string', 'sources/pgadmin',
+  'sources/gettext', 'jquery', 'underscore', 'sources/pgadmin',
   'backbone', 'alertify', 'backform', 'backgrid', 'sources/browser/generate_url',
   'pgadmin.backform', 'pgadmin.backgrid',
   'pgadmin.browser.node', 'backgrid.select.all',
-], function(gettext, $, _, S, pgAdmin, Backbone, Alertify, Backform, Backgrid, generateUrl) {
+], function(gettext, $, _, pgAdmin, Backbone, Alertify, Backform, Backgrid, generateUrl) {
 
   var pgBrowser = pgAdmin.Browser = pgAdmin.Browser || {};
 
@@ -315,8 +315,7 @@ define([
               info: info,
             })) {
               Alertify.pgNotifier(
-                error, xhr, S(gettext('Error retrieving properties - %s')).sprintf(
+                error, xhr, gettext('Error retrieving properties - %s', error.message || that.label),
-                  error.message || that.label).value(),
                 function(msg) {
                   if(msg === 'CRYPTKEY_SET') {
                     getAjaxHook();
@@ -383,8 +382,8 @@ define([
             }).fail(function(xhr, error) {
               Alertify.pgNotifier(
                 error, xhr,
-                S(gettext('Error dropping %s'))
+                gettext('Error dropping %s', d._label.toLowerCase()),
-                  .sprintf(d._label.toLowerCase()).value(), function(msg) {
+                function(msg) {
                   if (msg == 'CRYPTKEY_SET') {
                     onDrop(type, false);
                   } else {

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

@@ -8,8 +8,8 @@
 //////////////////////////////////////////////////////////////
 
 define([
-  'underscore', 'underscore.string', 'sources/pgadmin', 'jquery', 'backbone',
+  'underscore', 'sources/pgadmin', 'jquery', 'backbone', 'sources/utils',
-], function(_, S, pgAdmin, $, Backbone) {
+], function(_, pgAdmin, $, Backbone, pgadminUtils) {
   var pgBrowser = pgAdmin.Browser = pgAdmin.Browser || {};
 
   pgBrowser.DataModel = Backbone.Model.extend({
@@ -777,23 +777,23 @@ define([
         max_value = field.max;
 
       if (!_.isUndefined(min_value) && value < min_value) {
-        return S(pgAdmin.Browser.messages.MUST_GR_EQ).sprintf(label, min_value).value();
+        return pgadminUtils.sprintf(pgAdmin.Browser.messages.MUST_GR_EQ, label, min_value);
       } else if (!_.isUndefined(max_value) && value > max_value) {
-        return S(pgAdmin.Browser.messages.MUST_LESS_EQ).sprintf(label, max_value).value();
+        return pgadminUtils.sprintf(pgAdmin.Browser.messages.MUST_LESS_EQ, label, max_value);
       }
       return null;
     },
     number_validate: function(value, field) {
       var pattern = new RegExp('^-?[0-9]+(\.?[0-9]*)?$');
       if (!pattern.test(value)) {
-        return S(pgAdmin.Browser.messages.MUST_BE_NUM).sprintf(field.label).value();
+        return pgadminUtils.sprintf(pgAdmin.Browser.messages.MUST_BE_NUM, field.label);
       }
       return this.check_min_max(value, field);
     },
     integer_validate: function(value, field) {
       var pattern = new RegExp('^-?[0-9]*$');
       if (!pattern.test(value)) {
-        return S(pgAdmin.Browser.messages.MUST_BE_INT).sprintf(field.label).value();
+        return pgadminUtils.sprintf(pgAdmin.Browser.messages.MUST_BE_INT, field.label);
       }
       return this.check_min_max(value, field);
     },

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

@@ -8,8 +8,8 @@
 //////////////////////////////////////////////////////////////
 
 define([
-  'underscore', 'underscore.string', 'sources/pgadmin', 'jquery',
+  'underscore', 'sources/pgadmin', 'jquery', 'sources/utils',
-], function(_, S, pgAdmin, $) {
+], function(_, pgAdmin, $, pgadminUtils) {
   'use strict';
 
   pgAdmin.Browser = pgAdmin.Browser || {};
@@ -141,7 +141,7 @@ define([
         cb.apply(o.module, [o.data, item]);
       } else {
         pgAdmin.Browser.report_error(
-          S('Developer Warning: Callback - "%s" not found!').sprintf(o.cb).value()
+          pgadminUtils.sprintf('Developer Warning: Callback - "%s" not found!', o.cb)
         );
       }
     },

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

@@ -9,13 +9,13 @@
 
 define('pgadmin.browser.node', [
   'sources/tree/pgadmin_tree_node', 'sources/url_for',
-  'sources/gettext', 'jquery', 'underscore', 'underscore.string', 'sources/pgadmin',
+  'sources/gettext', 'jquery', 'underscore', 'sources/pgadmin',
   'pgadmin.browser.menu', 'backbone', 'pgadmin.alertifyjs', 'pgadmin.browser.datamodel',
   'backform', 'sources/browser/generate_url', 'pgadmin.help', 'sources/utils',
   'pgadmin.browser.utils', 'pgadmin.backform',
 ], function(
   pgadminTreeNode, url_for,
-  gettext, $, _, S, pgAdmin,
+  gettext, $, _, pgAdmin,
   Menu, Backbone, Alertify, pgBrowser,
   Backform, generateUrl, help,
   commonUtils
@@ -203,9 +203,7 @@ define('pgadmin.browser.node', [
         // For each script type create menu
         _.each(self.hasScriptTypes, function(stype) {
 
-          var type_label = S(
+          var type_label = gettext('%s Script',stype.toUpperCase());
-            gettext('%s Script')
-          ).sprintf(stype.toUpperCase()).value();
 
           stype = stype.toLowerCase();
 
@@ -435,9 +433,8 @@ define('pgadmin.browser.node', [
                   )) {
                     Alertify.pgNotifier(
                       options.textStatus, xhr,
-                      S(
+                      gettext('Error retrieving properties - %s', options.errorThrown || _label),
-                        gettext('Error retrieving properties - %s')
+                      function(msg) {
-                      ).sprintf(options.errorThrown || _label).value(), function(msg) {
                         if(msg === 'CRYPTKEY_SET') {
                           fetchAjaxHook();
                         } else {
@@ -672,8 +669,7 @@ define('pgadmin.browser.node', [
           if (!d)
             return;
 
-          l = S(gettext('Create - %s')).sprintf(
+          l = gettext('Create - %s', this.label);
-            [this.label]).value();
           p = addPanel();
 
           setTimeout(function() {
@@ -696,7 +692,7 @@ define('pgadmin.browser.node', [
 
               Alertify.confirm(
                 gettext('Edit in progress?'),
-                S(msg).sprintf(o.label.toLowerCase(), d.label).value(),
+                commonUtils.sprintf(msg, o.label.toLowerCase(), d.label),
                 function() {
                   setTimeout(function() {
                     o.showProperties(i, d, p, args.action);
@@ -746,29 +742,26 @@ define('pgadmin.browser.node', [
         var msg, title;
         if (input.url == 'delete') {
 
-          msg = S(gettext('Are you sure you want to drop %s "%s" and all the objects that depend on it?'))
+          msg = gettext('Are you sure you want to drop %s "%s" and all the objects that depend on it?',
-            .sprintf(obj.label.toLowerCase(), d.label).value();
+            obj.label.toLowerCase(), d.label);
-          title = S(gettext('DROP CASCADE %s?')).sprintf(obj.label).value();
+          title = gettext('DROP CASCADE %s?', obj.label);
 
           if (!(_.isFunction(obj.canDropCascade) ?
             obj.canDropCascade.apply(obj, [d, i]) : obj.canDropCascade)) {
             Alertify.error(
-              S(gettext('The %s "%s" cannot be dropped.'))
+              gettext('The %s "%s" cannot be dropped.', obj.label, d.label),
-                .sprintf(obj.label, d.label).value(),
               10
             );
             return;
           }
         } else {
-          msg = S(gettext('Are you sure you want to drop %s "%s"?'))
+          msg = gettext('Are you sure you want to drop %s "%s"?', obj.label.toLowerCase(), d.label);
-            .sprintf(obj.label.toLowerCase(), d.label).value();
+          title = gettext('DROP %s?', obj.label);
-          title = S(gettext('DROP %s?')).sprintf(obj.label).value();
 
           if (!(_.isFunction(obj.canDrop) ?
             obj.canDrop.apply(obj, [d, i]) : obj.canDrop)) {
             Alertify.error(
-              S(gettext('The %s "%s" cannot be dropped.'))
+              gettext('The %s "%s" cannot be dropped.', obj.label, d.label),
-                .sprintf(obj.label, d.label).value(),
               10
             );
             return;
@@ -800,9 +793,7 @@ define('pgadmin.browser.node', [
                   }
                 }
                 pgBrowser.report_error(
-                  S(gettext('Error dropping %s: "%s"'))
+                  gettext('Error dropping %s: "%s"', obj.label, objName), msg);
-                    .sprintf(obj.label, objName)
-                    .value(), msg);
               });
           },
           null).show();
@@ -1659,7 +1650,7 @@ define('pgadmin.browser.node', [
         )), function(o) {
           return o.priority;
         }), function(o) {
-          hash = S('%s/%s').sprintf(hash, encodeURI(o._id)).value();
+          hash = commonUtils.sprintf('%s/%s', hash, encodeURI(o._id));
         });
       }
 

web/pgadmin/browser/static/scss/_browser.scss

@@ -9,7 +9,7 @@ kbd,
 pre,
 samp,
 .CodeMirror pre {
-  font-family: $font-family-editor;
+  font-family: $font-family-editor !important;
 }
 
 .sql-editor-grid-container {
@@ -50,4 +50,4 @@ samp,
 .pg-toolbar-btn {
   margin-left: 0.25rem;
   border: $input-btn-border-width solid $btn-secondary-border;
-}
+}

web/pgadmin/browser/templates/browser/index.html

@@ -11,7 +11,7 @@
 {% block init_script %}
 try {
 require(
-['sources/generated/app.bundle'],
+['sources/generated/app.bundle', 'sources/generated/codemirror', 'sources/generated/browser_nodes'],
 function() {
 },
 function() {

web/pgadmin/dashboard/static/js/charting.js

@@ -7,11 +7,16 @@
 //
 //////////////////////////////////////////////////////////////
 
-import Flotr from 'flotr2';
-
 export class Chart {
   constructor(container, options) {
-    this.chartApi = Flotr;
+    let self = this;
+
+    require.ensure(['flotr2'], function(require) {
+      self.chartApi = require('flotr2');
+    }, function(error){
+      throw(error);
+    }, 'chart');
+
     /* Html Node where the graph goes */
     this._container = container;
     /* Graph library options */
@@ -104,7 +109,9 @@ export class Chart {
   draw(dataset) {
     this._dataset = dataset;
     if(this._container) {
-      Flotr.draw(this._container, this._dataset, this._options);
+      if(this.chartApi) {
+        this.chartApi.draw(this._container, this._dataset, this._options);
+      }
     }
   }
 }

web/pgadmin/misc/bgprocess/static/js/bgprocess.js

@@ -9,9 +9,9 @@
 
 define('misc.bgprocess', [
   'sources/pgadmin', 'sources/gettext', 'sources/url_for', 'underscore',
-  'underscore.string', 'jquery', 'pgadmin.browser', 'alertify',
+  'jquery', 'pgadmin.browser', 'alertify',
 ], function(
-  pgAdmin, gettext, url_for, _, S, $, pgBrowser, Alertify
+  pgAdmin, gettext, url_for, _, $, pgBrowser, Alertify
 ) {
 
   pgBrowser.BackgroundProcessObsorver = pgBrowser.BackgroundProcessObsorver || {};
@@ -226,7 +226,7 @@ define('misc.bgprocess', [
               self.curr_status = self.success_status_tpl({status_text:gettext('Successfully completed.')});
             } else {
               self.curr_status = self.failed_status_tpl(
-                {status_text:S(gettext('Failed (exit code: %s).')).sprintf(String(self.exit_code)).value()}
+                {status_text:gettext('Failed (exit code: %s).', String(self.exit_code))}
               );
             }
           }

web/pgadmin/misc/dependencies/static/js/dependencies.js

@@ -8,9 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 define('misc.dependencies', [
-  'sources/gettext', 'underscore', 'underscore.string', 'jquery', 'backbone',
+  'sources/gettext', 'underscore', 'jquery', 'backbone',
   'pgadmin', 'pgadmin.browser', 'pgadmin.alertifyjs', 'pgadmin.backgrid',
-], function(gettext, _, S, $, Backbone, pgAdmin, pgBrowser, Alertify, Backgrid) {
+  'sources/utils',
+], function(gettext, _, $, Backbone, pgAdmin, pgBrowser, Alertify, Backgrid, pgadminUtils) {
 
   if (pgBrowser.NodeDependencies)
     return pgBrowser.NodeDependencies;
@@ -52,7 +53,7 @@ define('misc.dependencies', [
               (node['node_image'] || ('icon-' + res.type))) :
               ('icon-' + res.type);
           }
-          res.type = S.titleize(res.type.replace(/_/g, ' '), true);
+          res.type = pgadminUtils.titleize(res.type.replace(/_/g, ' '), true);
           return res;
         },
       });
@@ -216,8 +217,7 @@ define('misc.dependencies', [
               })) {
                 Alertify.pgNotifier(
                   error, xhr,
-                  S(gettext('Error retrieving data from the server: %s')).sprintf(
+                  gettext('Error retrieving data from the server: %s', message || _label),
-                    message || _label).value(),
                   function(msg) {
                     if(msg === 'CRYPTKEY_SET') {
                       self.showDependencies(item, data, node);

web/pgadmin/misc/dependents/static/js/dependents.js

@@ -8,9 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 define('misc.dependents', [
-  'sources/gettext', 'underscore', 'underscore.string', 'jquery', 'backbone',
+  'sources/gettext', 'underscore', 'jquery', 'backbone',
   'sources/pgadmin', 'pgadmin.browser', 'pgadmin.alertifyjs', 'pgadmin.backgrid',
-], function(gettext, _, S, $, Backbone, pgAdmin, pgBrowser, Alertify, Backgrid) {
+  'sources/utils',
+], function(gettext, _, $, Backbone, pgAdmin, pgBrowser, Alertify, Backgrid, pgadminUtils) {
 
   if (pgBrowser.NodeDependents)
     return pgBrowser.NodeDependents;
@@ -52,7 +53,7 @@ define('misc.dependents', [
               (node['node_image'] || ('icon-' + res.type))) :
               ('icon-' + res.type);
           }
-          res.type = S.titleize(res.type.replace(/_/g, ' '), true);
+          res.type = pgadminUtils.titleize(res.type.replace(/_/g, ' '), true);
           return res;
         },
       });
@@ -222,8 +223,7 @@ define('misc.dependents', [
               })) {
                 Alertify.pgNotifier(
                   error, xhr,
-                  S(gettext('Error retrieving data from the server: %s')).sprintf(
+                  gettext('Error retrieving data from the server: %s', message || _label),
-                    message || _label).value(),
                   function(msg) {
                     if(msg === 'CRYPTKEY_SET') {
                       self.showDependents(item, data, node);

web/pgadmin/misc/file_manager/static/js/utility.js

@@ -18,10 +18,10 @@
  *  @copyright  Authors
  */
 define([
-  'jquery', 'underscore', 'underscore.string', 'pgadmin.alertifyjs',
+  'jquery', 'underscore', 'pgadmin.alertifyjs',
   'sources/gettext', 'sources/url_for', 'dropzone', 'sources/pgadmin',
   'sources/csrf', 'tablesorter',
-], function($, _, S, Alertify, gettext, url_for, Dropzone, pgAdmin, csrfToken) {
+], function($, _, Alertify, gettext, url_for, Dropzone, pgAdmin, csrfToken) {
 
   /*---------------------------------------------------------
     Define functions used for various operations
@@ -1394,7 +1394,7 @@ define([
                 path = path.replace(/\//g, '\\');
               } else {
                 path = path.replace(/\\/g, '/');
-                if (!S.startsWith(path, '/')) {
+                if (!path.startsWith('/')) {
                   path = '/' + path;
                 }
               }
@@ -1554,7 +1554,7 @@ define([
           $('.storage_dialog #uploader .input-path').val(path);
         }
       } else if (!(config.options.platform_type === 'win32') &&
-        (path == '' || !S.startsWith(path, '/'))) {
+        (path == '' || !path.startsWith('/'))) {
         path = '/' + path;
         $('.storage_dialog #uploader .input-path').val(path);
       } else {

web/pgadmin/misc/sql/static/js/sql.js

@@ -8,9 +8,9 @@
 //////////////////////////////////////////////////////////////
 
 define('misc.sql', [
-  'sources/gettext', 'underscore', 'underscore.string', 'jquery',
+  'sources/gettext', 'underscore', 'jquery',
   'sources/pgadmin', 'pgadmin.browser', 'pgadmin.alertifyjs',
-], function(gettext, _, S, $, pgAdmin, pgBrowser, Alertify) {
+], function(gettext, _, $, pgAdmin, pgBrowser, Alertify) {
 
   pgBrowser.ShowNodeSQL = pgBrowser.ShowNodeSQL || {};
 
@@ -151,9 +151,8 @@ define('misc.sql', [
                   })) {
                     Alertify.pgNotifier(
                       error, xhr,
-                      S(gettext('Error retrieving the information - %s')).sprintf(
+                      gettext('Error retrieving the information - %s', message || _label),
-                        message || _label
+                      function(msg) {
-                      ).value(), function(msg) {
                         if(msg === 'CRYPTKEY_SET') {
                           ajaxHook();
                         } else {

web/pgadmin/misc/static/explain/js/explain.js

@@ -8,91 +8,95 @@
 //////////////////////////////////////////////////////////////
 
 define('pgadmin.misc.explain', [
-  'sources/url_for', 'jquery', 'underscore', 'underscore.string',
+  'sources/url_for', 'jquery', 'underscore',
-  'sources/pgadmin', 'backbone', 'snapsvg', 'explain_statistics',
+  'sources/pgadmin', 'backbone', 'explain_statistics',
   'svg_downloader', 'image_maper', 'sources/gettext', 'bootstrap',
 ], function(
-  url_for, $, _, S, pgAdmin, Backbone, Snap, StatisticsModel,
+  url_for, $, _, pgAdmin, Backbone, StatisticsModel,
   svgDownloader, imageMapper, gettext
 ) {
 
   pgAdmin = pgAdmin || window.pgAdmin || {};
   svgDownloader = svgDownloader.default;
+  var Snap = null;
 
-  // Snap.svg plug-in to write multitext as image name
+  var initSnap = function(snapModule) {
-  Snap.plugin(function(Snap, Element, Paper) {
+    Snap = snapModule;
-    Paper.prototype.multitext = function(x, y, txt, max_width, attributes) {
+    // Snap.svg plug-in to write multitext as image name
-      var svg = Snap(),
+    Snap.plugin(function(Snap, Element, Paper) {
-        abc = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+      Paper.prototype.multitext = function(x, y, txt, max_width, attributes) {
-        temp = svg.text(0, 0, abc);
+        var svg = Snap(),
+          abc = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+          temp = svg.text(0, 0, abc);
 
-      temp.attr(attributes);
+        temp.attr(attributes);
 
-      /*
-       * Find letter width in pixels and
-       * index from where the text should be broken
-       */
-      var letter_width = temp.getBBox().width / abc.length,
-        word_break_index = Math.round((max_width / letter_width)) - 1;
-
-      svg.remove();
-
-      var words = txt.split(' '),
-        width_so_far = 0,
-        lines = [],
-        curr_line = '',
         /*
-         * Function to divide string into multiple lines
+         * Find letter width in pixels and
-         * and store them in an array if it size crosses
+         * index from where the text should be broken
-         * the max-width boundary.
          */
-        splitTextInMultiLine = function(leading, so_far, line) {
+        var letter_width = temp.getBBox().width / abc.length,
-          var l = line.length,
+          word_break_index = Math.round((max_width / letter_width)) - 1;
-            res = [];
 
-          if (l == 0)
+        svg.remove();
-            return res;
 
-          if (so_far && (so_far + (l * letter_width) > max_width)) {
+        var words = txt.split(' '),
-            res.push(leading);
+          width_so_far = 0,
-            res = res.concat(splitTextInMultiLine('', 0, line));
+          lines = [],
-          } else if (so_far) {
+          curr_line = '',
-            res.push(leading + ' ' + line);
+          /*
-          } else {
+           * Function to divide string into multiple lines
-            if (leading)
+           * and store them in an array if it size crosses
+           * the max-width boundary.
+           */
+          splitTextInMultiLine = function(leading, so_far, line) {
+            var l = line.length,
+              res = [];
+
+            if (l == 0)
+              return res;
+
+            if (so_far && (so_far + (l * letter_width) > max_width)) {
               res.push(leading);
-            if (line.length > word_break_index + 1)
+              res = res.concat(splitTextInMultiLine('', 0, line));
-              res.push(line.slice(0, word_break_index) + '-');
+            } else if (so_far) {
-            else
+              res.push(leading + ' ' + line);
-              res.push(line);
+            } else {
-            res = res.concat(splitTextInMultiLine('', 0, line.slice(word_break_index)));
+              if (leading)
+                res.push(leading);
+              if (line.length > word_break_index + 1)
+                res.push(line.slice(0, word_break_index) + '-');
+              else
+                res.push(line);
+              res = res.concat(splitTextInMultiLine('', 0, line.slice(word_break_index)));
+            }
+
+            return res;
+          };
+
+        for (var i = 0; i < words.length; i++) {
+          var tmpArr = splitTextInMultiLine(
+            curr_line, width_so_far, words[i]
+          );
+
+          if (curr_line) {
+            lines = lines.slice(0, lines.length - 1);
           }
-
+          lines = lines.concat(tmpArr);
-          return res;
+          curr_line = lines[lines.length - 1];
-        };
+          width_so_far = (curr_line.length * letter_width);
-
-      for (var i = 0; i < words.length; i++) {
-        var tmpArr = splitTextInMultiLine(
-          curr_line, width_so_far, words[i]
-        );
-
-        if (curr_line) {
-          lines = lines.slice(0, lines.length - 1);
         }
-        lines = lines.concat(tmpArr);
-        curr_line = lines[lines.length - 1];
-        width_so_far = (curr_line.length * letter_width);
-      }
 
-      // Create multiple tspan for each string in array
+        // Create multiple tspan for each string in array
-      var t = this.text(x, y, lines).attr(attributes);
+        var t = this.text(x, y, lines).attr(attributes);
-      t.selectAll('tspan:nth-child(n+2)').attr({
+        t.selectAll('tspan:nth-child(n+2)').attr({
-        dy: '1.2em',
+          dy: '1.2em',
-        x: x,
+          x: x,
-      });
+        });
-      return t;
+        return t;
-    };
+      };
-  });
+    });
+  };
 
   if (pgAdmin.Explain)
     return pgAdmin.Explain;
@@ -639,7 +643,7 @@ define('pgadmin.misc.explain', [
         ypos += yMargin;
       }
 
-      if (S.startsWith(node_type, '(slice'))
+      if (node_type.startsWith('(slice'))
         node_type = node_type.substring(0, 7);
 
       // Get the image information for current node
@@ -1229,6 +1233,18 @@ define('pgadmin.misc.explain', [
   _.extend(pgExplain, {
     // Assumption container is a jQuery object
     DrawJSONPlan: function(container, plan, isDownload, _ctx) {
+      let self = this;
+      require.ensure(['snapsvg'], function(require) {
+        var module = require('snapsvg');
+        initSnap(module);
+        self.goForDraw(container, plan, isDownload, _ctx);
+      }, function(error){
+        throw(error);
+      }, 'snapsvg');
+    },
+
+    // Assumption container is a jQuery object
+    goForDraw: function(container, plan, isDownload, _ctx) {
       var ctx = _.extend(_ctx || {}, {
         totalNodes: 0,
         totalDownloadedNodes: 0,
@@ -1262,11 +1278,11 @@ define('pgadmin.misc.explain', [
       var curr_zoom_factor = 1.0;
 
       var zoomArea = $('<div></div>', {
-          class: 'pg-explain-zoom-area btn-group',
+          class: 'pg-explain-zoom-area btn-group btn-group-sm',
           role: 'group',
         }).appendTo(graphicalContainer),
         zoomInBtn = $('<button></button>', {
-          class: 'btn btn-secondary pg-explain-zoom-btn badge',
+          class: 'btn btn-secondary pg-explain-zoom-btn',
           title: 'Zoom in',
           tabindex: 0,
         }).appendTo(zoomArea).append(
@@ -1274,7 +1290,7 @@ define('pgadmin.misc.explain', [
             class: 'fa fa-search-plus',
           })),
         zoomToNormal = $('<button></button>', {
-          class: 'btn btn-secondary pg-explain-zoom-btn badge',
+          class: 'btn btn-secondary pg-explain-zoom-btn',
           title: 'Zoom to original',
           tabindex: 0,
         }).appendTo(zoomArea).append(
@@ -1282,7 +1298,7 @@ define('pgadmin.misc.explain', [
             class: 'fa fa-arrows-alt',
           })),
         zoomOutBtn = $('<button></button>', {
-          class: 'btn btn-secondary pg-explain-zoom-btn badge',
+          class: 'btn btn-secondary pg-explain-zoom-btn',
           title: 'Zoom out',
           tabindex: 0,
         }).appendTo(zoomArea).append(
@@ -1291,12 +1307,12 @@ define('pgadmin.misc.explain', [
           }));
 
       var downloadArea = $('<div></div>', {
-          class: 'pg-explain-download-area btn-group',
+          class: 'pg-explain-download-area btn-group btn-group-sm',
           role: 'group',
         }).appendTo(graphicalContainer),
         downloadBtn = $('<button></button>', {
           id: 'btn-explain-download',
-          class: 'btn btn-secondary pg-explain-download-btn badge',
+          class: 'btn btn-secondary pg-explain-download-btn',
           title: 'Download',
           tabindex: 0,
           disabled: function() {
@@ -1318,13 +1334,13 @@ define('pgadmin.misc.explain', [
           }));
 
       var statsArea = $('<div></div>', {
-        class: 'pg-explain-stats-area btn-group d-none',
+        class: 'pg-explain-stats-area btn-group btn-group-sm d-none',
         role: 'group',
       }).appendTo(graphicalContainer);
 
       $('<button></button>', {
         id: 'btn-explain-stats',
-        class: 'btn btn-secondary pg-explain-stats-btn badge',
+        class: 'btn btn-secondary pg-explain-stats-btn',
         title: 'Statistics',
         tabindex: 0,
       }).appendTo(statsArea).append(

web/pgadmin/misc/static/explain/js/image_maper.js

@@ -7,7 +7,6 @@
 //
 //////////////////////////////////////////////////////////////
 
-import S from 'underscore.string';
 /*
  * A map which is used to fetch the image to be drawn and
  * text which will appear below it
@@ -223,7 +222,7 @@ let imageMapper = {
       command = data['Command'];
 
     if (strategy == 'Hashed') {
-      if (S.startsWith(command, 'Intersect')) {
+      if (command.startsWith('Intersect')) {
         if (command == 'Intersect All')
           return {
             'image': 'ex_hash_setop_intersect_all.svg',
@@ -233,7 +232,7 @@ let imageMapper = {
           'image': 'ex_hash_setop_intersect.svg',
           'image_text': 'Hashed Intersect',
         };
-      } else if (S.startsWith(command, 'Except')) {
+      } else if (command.startsWith('Except')) {
         if (command == 'Except All')
           return {
             'image': 'ex_hash_setop_except_all.svg',

web/pgadmin/misc/static/explain/scss/_explain.scss

@@ -25,7 +25,7 @@ $explain-fg-color-4: #FFFFFF;
           opacity: 0.5;
 
           &.pg-explain-download-area.btn-group {
-            left: 85px;
+            left: 90px;
           }
 
           &.pg-explain-stats-area {

web/pgadmin/misc/statistics/static/js/statistics.js

@@ -8,11 +8,11 @@
 //////////////////////////////////////////////////////////////
 
 define('misc.statistics', [
-  'sources/gettext', 'underscore', 'underscore.string', 'jquery', 'backbone',
+  'sources/gettext', 'underscore', 'jquery', 'backbone',
   'sources/pgadmin', 'pgadmin.browser', 'pgadmin.backgrid', 'alertify', 'sources/size_prettify',
   'sources/misc/statistics/statistics',
 ], function(
-  gettext, _, S, $, Backbone, pgAdmin, pgBrowser, Backgrid, Alertify, sizePrettify,
+  gettext, _, $, Backbone, pgAdmin, pgBrowser, Backgrid, Alertify, sizePrettify,
   statisticsHelper
 ) {
 
@@ -315,9 +315,8 @@ define('misc.statistics', [
                 })) {
                   Alertify.pgNotifier(
                     error, xhr,
-                    S(gettext('Error retrieving the information - %s')).sprintf(
+                    gettext('Error retrieving the information - %s', message || _label),
-                      message || _label
+                    function(msg) {
-                    ).value(), function(msg) {
                       if(msg === 'CRYPTKEY_SET') {
                         ajaxHook();
                       } else {

web/pgadmin/static/bundle/app.js

@@ -8,8 +8,8 @@
 //////////////////////////////////////////////////////////////
 
 define('app', [
-  'babel-polyfill', 'sources/pgadmin', 'bundled_browser', 'pgadmin.datagrid',
+  'sources/pgadmin', 'bundled_browser', 'pgadmin.datagrid',
-], function(babelPolyFill, pgAdmin) {
+], function(pgAdmin) {
   var initializeModules = function(Object) {
     for (var key in Object) {
       var module = Object[key];

web/pgadmin/static/bundle/slickgrid.js

@@ -20,4 +20,3 @@ import 'slickgrid/plugins/slick.cellrangeselector';
 import 'sources/slickgrid/custom_header_buttons';
 
 export default window.Slick;
-

web/pgadmin/static/css/alertify.noanimation.css

@@ -1,41 +0,0 @@
-.alertify .ajs-dimmer,
-.alertify .ajs-modal,
-.alertify-notifier,
-.alertify-notifier .ajs-message.ajs-visible,
-.alertify-notifier .ajs-message,
-.alertify-notifier.ajs-center .ajs-message.ajs-visible,
-.alertify-notifier.ajs-center .ajs-message
-{
-  -moz-transition: none;
-  -webkit-transition: none;
-  -o-transition: none;
-  transition: none;
-  -webkit-transform: none;
-  transform: none;
-}
-
-.alertify.ajs-zoom.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: ajs-zoomIn;
-  animation-name: ajs-zoomIn;
-}
-.alertify.ajs-zoom.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: ajs-zoomOut;
-  animation-name: ajs-zoomOut;
-}
-
-@-webkit-keyframes ajs-zoomIn {
-  -webkit-transform: none;
-  transform: none;
-}
-@keyframes ajs-zoomIn {
-  -webkit-transform: none;
-  transform: none;
-}
-@-webkit-keyframes ajs-zoomOut {
-  -webkit-transform: none;
-  transform: none;
-}
-@keyframes ajs-zoomeOut {
-  -webkit-transform: none;
-  transform: none;
-}

web/pgadmin/static/css/pgadmin.css

@@ -1,39 +1,3 @@
-@font-face {
-  font-family: "Open Sans";
-  src: url("~top/static/fonts/OpenSans-Regular.ttf") format("truetype");
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-
-@font-face {
-  font-family: "Open Sans Semibold";
-  src: url("~top/static/fonts/OpenSans-SemiBold.ttf") format("truetype");
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-
-@font-face {
-  font-family: "Open Sans Bold";
-  src: url("~top/static/fonts/OpenSans-Bold.ttf") format("truetype");
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-
 @font-face {
   font-family: "Source Code Pro";
   src: url("~top/static/fonts/SourceCodePro-Regular.ttf") format("truetype");

web/pgadmin/static/css/style.css

@@ -6,7 +6,6 @@
 @import '~bootstrap4-toggle/css/bootstrap4-toggle.css';
 @import '~backgrid-select-all/backgrid-select-all.css';
 @import '~backgrid-filter/backgrid-filter.css';
-@import '~backgrid-sizeable-columns/backgrid-sizeable-columns.css';
 @import '~slickgrid/css/select2.css';
 @import '~jquery-contextmenu/dist/jquery.contextMenu.css';
 @import '~webcabin-docker/Build/wcDocker.css';
@@ -21,3 +20,5 @@
 @import '~slickgrid/slick.grid.css';
 @import '~slickgrid/slick-default-theme.css';
 @import '~slickgrid/css/smoothness/jquery-ui-1.11.3.custom.css';
+
+@import '../vendor/backgrid/backgrid.css';

web/pgadmin/static/js/alertify/dialog.js

@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import gettext from '../gettext';
-import {sprintf} from 'sprintf-js';
+import {sprintf} from 'sources/utils';
 import {DialogFactory} from './dialog_factory';
 import Backform from '../backform.pgadmin';
 import {getTreeNodeHierarchyFromIdentifier} from '../tree/pgadmin_tree_node';

web/pgadmin/static/js/backform.pgadmin.js

@@ -8,11 +8,11 @@
 //////////////////////////////////////////////////////////////
 
 define([
-  'sources/gettext', 'underscore', 'underscore.string', 'jquery',
+  'sources/gettext', 'underscore', 'jquery',
   'backbone', 'backform', 'backgrid', 'codemirror', 'sources/sqleditor_utils',
   'sources/keyboard_shortcuts', 'sources/window',
   'spectrum', 'pgadmin.backgrid', 'select2', 'bootstrap.toggle',
-], function(gettext, _, S, $, Backbone, Backform, Backgrid, CodeMirror,
+], function(gettext, _, $, Backbone, Backform, Backgrid, CodeMirror,
   SqlEditorUtils, keyboardShortcuts, pgWindow) {
 
   var pgAdmin = (window.pgAdmin = window.pgAdmin || {}),

web/pgadmin/static/js/check_node_visibility.js

@@ -7,8 +7,8 @@
 //
 //////////////////////////////////////////////////////////////////////////
 
-define(['jquery', 'underscore', 'underscore.string'],
+define(['jquery', 'underscore'],
-  function ($, _, S) {
+  function ($, _) {
 
     var check_node_visibility = function (pgBrowser, node_type) {
       if(_.isUndefined(node_type) || _.isNull(node_type)) {
@@ -18,7 +18,7 @@ define(['jquery', 'underscore', 'underscore.string'],
       // Target actual node instead of collection.
       // If node is disabled then there is no meaning of
       // adding collection node menu
-      if(S.startsWith(node_type, 'coll-')) {
+      if(node_type.startsWith('coll-')) {
         node_type = node_type.replace('coll-', '');
       }
 

web/pgadmin/static/js/gettext.js

@@ -12,30 +12,37 @@ define(['translations'], function (translations) {
   /***
    * This method behaves as a drop-in replacement for flask translation rendering.
    * It uses the same translation file under the hood and uses flask to determine the language.
-   *
+   * It is slightly tweaked to work like sprintf
-   * ex. translate("some %(adjective)s text", {adjective: "cool"})
+   * ex. translate("some %s text", "cool")
    *
    * @param {String} text
-   * @param {Object} substitutions
    */
-  return function gettext(text, substitutions) {
+  return function gettext(text) {
 
     var rawTranslation = translations[text] ? translations[text] : text;
 
-    // captures things of the form %(substitutionName)s
+    if(arguments.length == 1) {
-    var substitutionGroupsRegExp = /([^%]*)%\(([^\)]+)\)s(.*)/;
+      return rawTranslation;
-    var matchFound;
+    }
 
-    var interpolated = rawTranslation;
+    try {
-    do {
+      let replaceArgs = arguments;
-      matchFound = false;
+      return rawTranslation.split('%s')
-      interpolated = interpolated.replace(substitutionGroupsRegExp, function (_, textBeginning, substitutionName, textEnd) {
+        .map(function(w, i) {
-        matchFound = true;
+          if(i > 0) {
-        return textBeginning + substitutions[substitutionName] + textEnd;
+            if(i < replaceArgs.length) {
-      });
+              return [replaceArgs[i], w].join('');
-    } while (matchFound);
+            } else {
-
+              return ['%s', w].join('');
-    return interpolated;
+            }
+          } else {
+            return w;
+          }
+        })
+        .join('');
+    } catch(e) {
+      console.error(e);
+      return rawTranslation;
+    }
   };
-
+});
-});

web/pgadmin/static/js/keyboard_shortcuts.js

@@ -80,20 +80,14 @@ function shortcut_title(title, shortcut) {
   }
   text_representation += shortcut_key(shortcut);
 
-  return gettext('%(title)s (%(text_representation)s)',{
+  return `${title} (${text_representation})`;
-    'title': title,
-    'text_representation': text_representation,
-  });
 }
 
 /* Returns the key char of shortcut
  * shortcut object is browser.get_preference().value
  */
 function shortcut_accesskey_title(title, shortcut) {
-  return gettext('%(title)s (accesskey + %(key)s)',{
+  return `${title} (${gettext('accesskey')} + ${shortcut_key(shortcut)})`;
-    'title': title,
-    'key': shortcut_key(shortcut),
-  });
 }
 
 

web/pgadmin/static/js/modify_animation.js

@@ -53,18 +53,14 @@ function modifyAlertifyAnimation(pgBrowser) {
   ).value;
 
   if(enableAcitreeAnimation) {
-    $(document).find('link#alertify-no-animation')
+    $(document).find('body').removeClass('alertify-no-animation');
-      .attr('disabled', 'disabled');
     _.each(document.getElementsByTagName('iframe'), function(frame) {
-      $(frame.contentDocument).find('link#alertify-no-animation')
+      $(frame.contentDocument).find('body').removeClass('alertify-no-animation');
-        .attr('disabled', 'disabled');
     });
   } else {
-    $(document).find('link#alertify-no-animation')
+    $(document).find('body').addClass('alertify-no-animation');
-      .removeAttr('disabled', 'disabled');
     _.each(document.getElementsByTagName('iframe'), function(frame) {
-      $(frame.contentDocument).find('link#alertify-no-animation')
+      $(frame.contentDocument).find('body').addClass('alertify-no-animation');
-        .removeAttr('disabled', 'disabled');
     });
   }
 }

web/pgadmin/static/js/sqleditor/call_render_after_poll.js

@@ -9,7 +9,7 @@
 
 import {calculateQueryRunTime} from './calculate_query_run_time';
 import gettext from '../gettext';
-import {sprintf} from 'sprintf-js';
+import {sprintf} from 'sources/utils';
 
 function hasResultsToDisplay(res) {
   return res.colinfo != null;

web/pgadmin/static/js/sqleditor/geometry_viewer.js

@@ -8,16 +8,17 @@
 //////////////////////////////////////////////////////////////
 
 import gettext from 'sources/gettext';
-import {Geometry} from 'wkx';
 import {Buffer} from 'buffer';
-import L from 'leaflet';
 import $ from 'jquery';
 
+var L = null;
+var Geometry = null;
 let GeometryViewer = {
   panel_closed: true,
 
-  render_geometries: function (handler, items, columns, columnIndex) {
+  go_for_render: function(handler, items, columns, columnIndex) {
     let self = this;
+
     if (!self.map_component) {
       self.map_component = initMapComponent();
     }
@@ -53,10 +54,21 @@ let GeometryViewer = {
 
     handler.gridView.geometry_viewer.focus();
     self.map_component.clearMap();
-    let dataObj = parseData(items, columns, columnIndex);
+    let dataObj = parseData(items, columns, columnIndex, Geometry);
     self.map_component.renderMap(dataObj);
   },
 
+  render_geometries: function (handler, items, columns, columnIndex) {
+    let self = this;
+    require.ensure(['leaflet', 'wkx'], function(require) {
+      L = require('leaflet');
+      Geometry = require('wkx').Geometry;
+      self.go_for_render(handler, items, columns, columnIndex);
+    }, function(error){
+      throw(error);
+    }, 'geometry');
+  },
+
   add_header_button: function (columnDefinition) {
     columnDefinition.header = {
       buttons: [
@@ -275,7 +287,7 @@ function initMapComponent() {
   };
 }
 
-function parseData(items, columns, columnIndex) {
+function parseData(items, columns, columnIndex, GeometryLib) {
   const maxRenderByteLength = 20 * 1024 * 1024; //render geometry data up to 20MB
   const maxRenderGeometries = 100000; // render geometries up to 100000
   let field = columns[columnIndex].field;
@@ -304,7 +316,7 @@ function parseData(items, columns, columnIndex) {
     try {
       let value = item[field];
       let buffer = Buffer.from(value, 'hex');
-      let geometry = Geometry.parse(buffer);
+      let geometry = GeometryLib.parse(buffer);
       if (geometry.hasZ) {
         geometries3D.push(geometry);
       } else {

web/pgadmin/static/js/utils.js

@@ -205,3 +205,31 @@ export function getRandomInt(min, max) {
   max = Math.floor(max);
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
+
+export function titleize(i_str) {
+  return i_str.split(' ')
+    .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
+    .join(' ');
+}
+
+export function sprintf(i_str) {
+  try {
+    let replaceArgs = arguments;
+    return i_str.split('%s')
+      .map(function(w, i) {
+        if(i > 0) {
+          if(i < replaceArgs.length) {
+            return [replaceArgs[i], w].join('');
+          } else {
+            return ['%s', w].join('');
+          }
+        } else {
+          return w;
+        }
+      })
+      .join('');
+  } catch(e) {
+    console.error(e);
+    return i_str;
+  }
+}

web/pgadmin/static/scss/_alertify.overrides.scss

@@ -234,3 +234,39 @@
 .alertify .ajs-dialog.ajs-capture:before {
   display: none;
 }
+
+.alertify-no-animation {
+  .alertify .ajs-dimmer,
+  .alertify .ajs-modal,
+  .alertify-notifier,
+  .alertify-notifier .ajs-message.ajs-visible,
+  .alertify-notifier .ajs-message,
+  .alertify-notifier.ajs-center .ajs-message.ajs-visible,
+  .alertify-notifier.ajs-center .ajs-message
+  {
+    -moz-transition: none;
+    -webkit-transition: none;
+    -o-transition: none;
+    transition: none;
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  .alertify.ajs-zoom.ajs-in:not(.ajs-hidden) .ajs-dialog {
+    -webkit-animation-name: ajs-noanimate;
+    animation-name: ajs-noanimate;
+  }
+  .alertify.ajs-zoom.ajs-out.ajs-hidden .ajs-dialog {
+    -webkit-animation-name: ajs-noanimate;
+    animation-name: ajs-noanimate;
+  }
+
+  @-webkit-keyframes ajs-noanimate {
+    -webkit-transform: none;
+    transform: none;
+  }
+  @keyframes ajs-noanimate {
+    -webkit-transform: none;
+    transform: none;
+  }
+}

web/pgadmin/static/scss/_codemirror.overrides.scss

@@ -138,7 +138,7 @@
 
   background: $sql-hint-bg;
   font-size: 90%;
-  font-family: $font-family-editor;
+  font-family: $font-family-editor !important;
 
   max-height: 20em;
   overflow-y: auto;

web/pgadmin/static/scss/_pgadmin.style.scss

@@ -372,21 +372,6 @@
     border-radius: $card-border-radius;
   }
 }
-
-.obj_properties {
-  .btn-group {
-    .btn {
-      @extend .rounded;
-      :not(:first-child) {
-        @extend .rounded-left;
-      }
-      :not(:last-child) {
-        @extend .rounded-right;
-      }
-    }
-  }
-}
-
 .obj_properties .badge .caret {
   display: inline-block;
   margin-left: 2px;

web/pgadmin/static/vendor/backgrid/backgrid.css

@@ -1,8 +1,8 @@
 /*
   backgrid
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
   Licensed under the MIT license.
 */
 
@@ -233,4 +233,4 @@
 .backgrid .select-cell.editor optgroup::-o-focus-inner,
 .backgrid .select-cell.editor option::-o-focus-inner {
   border: 0;
-}
+}

web/pgadmin/static/vendor/backgrid/backgrid.js

@@ -1,39 +1,33 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2019, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
 /*!
-  backgrid
+  backgrid 0.3.8
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2014 Jimmy Yuen Ho Wong and contributors <wyuenho@gmail.com>
+  Copyright (c) 2017 Cloudflare, Inc. and contributors <jwong@cloudflare.com>
   Licensed under the MIT license.
 */
 
-(function (factory) {
+(function (root, factory) {
 
-  // CommonJS
+  if (typeof define === "function" && define.amd) {
-  if (typeof exports == "object") {
+    // AMD (+ global for extensions)
-    module.exports = factory(module.exports,
+    define(["underscore", "backbone"], function (_, Backbone) {
-                             require("underscore"),
+      return (root.Backgrid = factory(_, Backbone));
-                             require("backbone"));
+    });
-  }
+  } else if (typeof exports === "object") {
-  // Browser
+    // CommonJS
-  else factory(this, this._, this.Backbone);
+    module.exports = factory(require("underscore"), require("backbone"));
-}(function (root, _, Backbone) {
+  } else {
+    // Browser
+    root.Backgrid = factory(root._, root.Backbone);
+  }}(this, function (_, Backbone) {
 
   "use strict";
 
 /*
   backgrid
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
   Licensed under the MIT license.
 */
 
@@ -72,7 +66,7 @@ function lpad(str, length, padstr) {
 
 var $ = Backbone.$;
 
-var Backgrid = root.Backgrid = {
+var Backgrid = {
 
   Extension: {},
 
@@ -180,9 +174,9 @@ _.extend(Command.prototype, {
 
 /*
   backgrid
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
   Licensed under the MIT license.
 */
 
@@ -285,7 +279,7 @@ _.extend(NumberFormatter.prototype, {
   fromRaw: function (number, model) {
     if (_.isNull(number) || _.isUndefined(number)) return '';
 
-    number = number.toFixed(~~this.decimals);
+    number = parseFloat(number).toFixed(~~this.decimals);
 
     var parts = number.split('.');
     var integerPart = parts[0];
@@ -625,9 +619,9 @@ _.extend(SelectFormatter.prototype, {
 
 /*
   backgrid
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
   Licensed under the MIT license.
 */
 
@@ -873,9 +867,16 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
                     }
                   });
 
-    if (Backgrid.callByNeed(column.editable(), column, model)) $el.addClass("editable");
+    this.updateStateClassesMaybe();
-    if (Backgrid.callByNeed(column.sortable(), column, model)) $el.addClass("sortable");
+  },
-    if (Backgrid.callByNeed(column.renderable(), column, model)) $el.addClass("renderable");
+
+  updateStateClassesMaybe: function () {
+    var model = this.model;
+    var column = this.column;
+    var $el = this.$el;
+    $el.toggleClass("editable", Backgrid.callByNeed(column.editable(), column, model));
+    $el.toggleClass("sortable", Backgrid.callByNeed(column.sortable(), column, model));
+    $el.toggleClass("renderable", Backgrid.callByNeed(column.renderable(), column, model));
   },
 
   /**
@@ -883,9 +884,13 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
      model's raw value for this cell's column.
   */
   render: function () {
-    this.$el.empty();
+    var $el = this.$el;
+    $el.empty();
     var model = this.model;
-    this.$el.text(this.formatter.fromRaw(model.get(this.column.get("name")), model));
+    var columnName = this.column.get("name");
+    $el.text(this.formatter.fromRaw(model.get(columnName), model));
+    $el.addClass(columnName);
+    this.updateStateClassesMaybe();
     this.delegateEvents();
     return this;
   },
@@ -1408,7 +1413,15 @@ var SelectCellEditor = Backgrid.SelectCellEditor = CellEditor.extend({
   },
 
   /** @property {function(Object, ?Object=): string} template */
-  template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>', null, {variable: null}),
+  template: _.template(
+    '<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>',
+    null,
+    {
+        variable    : null,
+        evaluate    : /<%([\s\S]+?)%>/g,
+        interpolate : /<%=([\s\S]+?)%>/g,
+        escape      : /<%-([\s\S]+?)%>/g
+    }),
 
   setOptionValues: function (optionValues) {
     this.optionValues = optionValues;
@@ -1651,9 +1664,9 @@ var SelectCell = Backgrid.SelectCell = Cell.extend({
 
 /*
   backgrid
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
   Licensed under the MIT license.
 */
 
@@ -1706,19 +1719,20 @@ var Column = Backgrid.Column = Backbone.Model.extend({
      this column is sortable. If the value is a string, a method will the same
      name will be looked up from the column instance to determine whether the
      column should be sortable. The method's signature must be `function
-     (Backgrid.Column, Backbone.Model): boolean`.
+     (Backbone.Model): boolean`. The function's context is the column instance.
 
      @cfg {boolean|string|function(): boolean} [defaults.editable=true] Whether
      this column is editable. If the value is a string, a method will the same
      name will be looked up from the column instance to determine whether the
      column should be editable. The method's signature must be `function
-     (Backgrid.Column, Backbone.Model): boolean`.
+     (Backbone.Model): boolean`. The function's context is the column instance.
 
      @cfg {boolean|string|function(): boolean} [defaults.renderable=true]
      Whether this column is renderable. If the value is a string, a method will
      the same name will be looked up from the column instance to determine
      whether the column should be renderable. The method's signature must be
-     `function (Backrid.Column, Backbone.Model): boolean`.
+     `function (Backbone.Model): boolean`. The function's context is the column
+     instance.
 
      @cfg {Backgrid.CellFormatter | Object | string} [defaults.formatter] The
      formatter to use to convert between raw model values and user input.
@@ -1824,24 +1838,33 @@ var Column = Backgrid.Column = Backbone.Model.extend({
   }
 
   /**
+     If you cannot always determine whether a column should be sortable before
+     the grid get initialized, you can override this method.
+
      @member Backgrid.Column
      @protected
      @method sortable
-     @return {function(Backgrid.Column, Backbone.Model): boolean | boolean}
+     @return {function(Backbone.Model): boolean | boolean}
   */
 
   /**
+     If you cannot always determine whether a column should be editable before
+     the grid get initialized, you can override this method.
+
      @member Backgrid.Column
      @protected
      @method editable
-     @return {function(Backgrid.Column, Backbone.Model): boolean | boolean}
+     @return {function(Backbone.Model): boolean | boolean}
   */
 
   /**
+     If you cannot always determine whether a column should be renderable before
+     the grid get initialized, you can override this method.
+
      @member Backgrid.Column
      @protected
      @method renderable
-     @return {function(Backgrid.Column, Backbone.Model): boolean | boolean}
+     @return {function(Backbone.Model): boolean | boolean}
   */
 });
 
@@ -1871,9 +1894,9 @@ var Columns = Backgrid.Columns = Backbone.Collection.extend({
 
 /*
   backgrid
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
   Licensed under the MIT license.
 */
 
@@ -2020,7 +2043,9 @@ var EmptyRow = Backgrid.EmptyRow = Backbone.View.extend({
 
     var td = document.createElement("td");
     td.setAttribute("colspan", this.columns.length);
-    td.appendChild(document.createTextNode(_.result(this, "emptyText")));
+    var span = document.createElement("span");
+    span.innerHTML = _.result(this, "emptyText");
+    td.appendChild(span);
 
     this.el.className = "empty";
     this.el.appendChild(td);
@@ -2031,9 +2056,9 @@ var EmptyRow = Backgrid.EmptyRow = Backbone.View.extend({
 
 /*
   backgrid
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
   Licensed under the MIT license.
 */
 
@@ -2052,7 +2077,7 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
 
   /** @property */
   events: {
-    "click a": "onClick"
+    "click button": "onClick"
   },
 
   /**
@@ -2087,12 +2112,12 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
     if (Backgrid.callByNeed(column.sortable(), column, collection)) $el.addClass("sortable");
     if (Backgrid.callByNeed(column.renderable(), column, collection)) $el.addClass("renderable");
 
-    this.listenTo(collection.fullCollection || collection, "sort", this.removeCellDirection);
+    this.listenTo(collection.fullCollection || collection, "backgrid:sorted", this.removeCellDirection);
   },
 
   /**
-     Event handler for the collection's `sort` event. Removes all the CSS
+     Event handler for the collection's `backgrid:sorted` event. Removes
-     direction classes.
+     all the CSS direction classes.
    */
   removeCellDirection: function () {
     this.$el.removeClass("ascending").removeClass("descending");
@@ -2151,7 +2176,7 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
     var sortable = Backgrid.callByNeed(column.sortable(), column, this.collection);
     var label;
     if(sortable){
-      label = $("<a>").text(column.get("label")).append("<b class='sort-caret'></b>");
+      label = $("<button>").text(column.get("label")).append("<span class='sort-caret' aria-hidden='true'></span>");
     } else {
       label = document.createTextNode(column.get("label"));
     }
@@ -2173,8 +2198,6 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
  */
 var HeaderRow = Backgrid.HeaderRow = Backgrid.Row.extend({
 
-  requiredOptions: ["columns", "collection"],
-
   /**
      Initializer.
 
@@ -2259,9 +2282,9 @@ var Header = Backgrid.Header = Backbone.View.extend({
 
 /*
   backgrid
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
   Licensed under the MIT license.
 */
 
@@ -2298,7 +2321,7 @@ var Body = Backgrid.Body = Backbone.View.extend({
       this.columns = new Columns(this.columns);
     }
 
-    this.row = options.row || Row;
+    this.row = options.row || this.row || Row;
     this.rows = this.collection.map(function (model) {
       var row = new this.row({
         columns: this.columns,
@@ -2318,14 +2341,19 @@ var Body = Backgrid.Body = Backbone.View.extend({
     this.listenTo(collection, "reset", this.refresh);
     this.listenTo(collection, "backgrid:sort", this.sort);
     this.listenTo(collection, "backgrid:edited", this.moveToNextCell);
+
+    this.listenTo(this.columns, "add remove", this.updateEmptyRow);
   },
 
   _unshiftEmptyRowMayBe: function () {
     if (this.rows.length === 0 && this.emptyText != null) {
-      this.rows.unshift(new EmptyRow({
+      this.emptyRow = new EmptyRow({
         emptyText: this.emptyText,
         columns: this.columns
-      }));
+      });
+
+      this.rows.unshift(this.emptyRow);
+      return true
     }
   },
 
@@ -2413,7 +2441,9 @@ var Body = Backgrid.Body = Backbone.View.extend({
     // removeRow() is called directly
     if (!options) {
       this.collection.remove(model, (options = collection));
-      this._unshiftEmptyRowMayBe();
+      if (this._unshiftEmptyRowMayBe()) {
+        this.render();
+      }
       return;
     }
 
@@ -2422,11 +2452,24 @@ var Body = Backgrid.Body = Backbone.View.extend({
     }
 
     this.rows.splice(options.index, 1);
-    this._unshiftEmptyRowMayBe();
+    if (this._unshiftEmptyRowMayBe()) {
+      this.render();
+    }
 
     return this;
   },
 
+  /**
+     Rerender the EmptyRow which empties the DOM element, creates the td with the
+     updated colspan, and appends it back into the DOM
+  */
+
+  updateEmptyRow: function () {
+    if (this.emptyRow != null) {
+      this.emptyRow.render();
+    }
+  },
+
   /**
      Reinitialize all the rows inside the body and re-render them. Triggers a
      Backbone `backgrid:refresh` event from the collection along with the body
@@ -2503,7 +2546,7 @@ var Body = Backgrid.Body = Backbone.View.extend({
      Triggers a Backbone `backgrid:sorted` event from the collection when done
      with the column, direction and a reference to the collection.
 
-     @param {Backgrid.Column} column
+     @param {Backgrid.Column|string} column
      @param {null|"ascending"|"descending"} direction
 
      See [Backbone.Collection#comparator](http://backbonejs.org/#Collection-comparator)
@@ -2545,19 +2588,20 @@ var Body = Backgrid.Body = Backbone.View.extend({
         }
         collection.fullCollection.sort();
         collection.trigger("backgrid:sorted", column, direction, collection);
+        column.set("direction", direction);
       }
       else collection.fetch({reset: true, success: function () {
         collection.trigger("backgrid:sorted", column, direction, collection);
+        column.set("direction", direction);
       }});
     }
     else {
       collection.comparator = comparator;
       collection.sort();
       collection.trigger("backgrid:sorted", column, direction, collection);
+      column.set("direction", direction);
     }
 
-    column.set("direction", direction);
-
     return this;
   },
 
@@ -2596,6 +2640,9 @@ var Body = Backgrid.Body = Backbone.View.extend({
     var j = this.columns.indexOf(column);
     var cell, renderable, editable, m, n;
 
+    // return if model being edited in a different grid
+    if (j === -1) return this;
+
     this.rows[i].cells[j].exitEditMode();
 
     if (command.moveUp() || command.moveDown() || command.moveLeft() ||
@@ -2644,9 +2691,9 @@ var Body = Backgrid.Body = Backbone.View.extend({
 
 /*
   backgrid
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
   Licensed under the MIT license.
 */
 
@@ -2684,9 +2731,9 @@ var Footer = Backgrid.Footer = Backbone.View.extend({
 
 /*
   backgrid
-  http://github.com/wyuenho/backgrid
+  http://github.com/cloudflare/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
   Licensed under the MIT license.
 */
 
@@ -2760,6 +2807,7 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
      @param {Object} options
      @param {Backbone.Collection.<Backgrid.Columns>|Array.<Backgrid.Column>|Array.<Object>} options.columns Column metadata.
      @param {Backbone.Collection} options.collection The collection of tabular model data to display.
+     @param {string} [options.caption=string] An optional caption to be added to the table.
      @param {Backgrid.Header} [options.header=Backgrid.Header] An optional Header class to override the default.
      @param {Backgrid.Body} [options.body=Backgrid.Body] An optional Body class to override the default.
      @param {Backgrid.Row} [options.row=Backgrid.Row] An optional Row class to override the default.
@@ -2769,10 +2817,12 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
     // Convert the list of column objects here first so the subviews don't have
     // to.
     if (!(options.columns instanceof Backbone.Collection)) {
-      options.columns = new Columns(options.columns);
+      options.columns = new Columns(options.columns || this.columns);
     }
     this.columns = options.columns;
 
+    this.caption = options.caption;
+
     var filteredOptions = _.omit(options, ["el", "id", "attributes",
                                            "className", "tagName", "events"]);
 
@@ -2851,13 +2901,17 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
   },
 
   /**
-     Renders the grid's header, then footer, then finally the body. Triggers a
+     Renders the grid's caption, then header, then footer, then finally the body. Triggers a
      Backbone `backgrid:rendered` event along with a reference to the grid when
      the it has successfully been rendered.
    */
   render: function () {
     this.$el.empty();
 
+    if (this.caption) {
+      this.$el.append($("<caption>").text(this.caption));
+    }
+
     if (this.header) {
       this.$el.append(this.header.render().$el);
     }
@@ -2888,5 +2942,5 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
   }
 
 });
-return Backgrid;
+  return Backgrid;
 }));

web/pgadmin/templates/base.html

@@ -19,14 +19,18 @@
     <link rel="shortcut icon" href="{{ url_for('redirects.favicon') }}"/>
 
     <!-- Base template stylesheets -->
-    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='vendor/backgrid/backgrid.css')}}"/>
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='js/generated/style.css')}}"/>
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='js/generated/pgadmin.css')}}"/>
-    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/alertify.noanimation.css')}}" id="alertify-no-animation"/>
 
      <!--View specified stylesheets-->
     {% block css_link %}{% endblock %}
 
+    <script>
+        /* This is used to change publicPath of webpack at runtime */
+        window.getChunkURL = function() {
+            return "{{ url_for('static', filename='js') }}/generated/";
+        };
+    </script>
     <!-- Base template scripts -->
     <script type="text/javascript"
             src="{{ url_for('static', filename='vendor/require/require.js' if config.DEBUG else 'vendor/require/require.min.js') }}"></script>
@@ -40,8 +44,6 @@
                 shim: {},
                 paths: {
                     sources: "{{ url_for('static', filename='js') }}",
-                    slickgrid: "{{ url_for('static', filename='js/generated/slickgrid') }}",
-                    codemirror: "{{ url_for('static', filename='js/generated/codemirror') }}",
                     datagrid: "{{ url_for('static', filename='js/generated/datagrid') }}",
                     sqleditor: "{{ url_for('static', filename='js/generated/sqleditor') }}",
                     'pgadmin.browser.utils': "{{ url_for('browser.index') }}" + "js/utils",
@@ -54,10 +56,11 @@
             });
 
     </script>
-    <!-- View specified scripts -->
-    <script type="text/javascript" src="{{ url_for('static', filename='js/generated/vendor.js') }}" ></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='js/generated/pgadmin_commons.js') }}" ></script>
 
+    <!-- View specified scripts -->
+    <script type="text/javascript" src="{{ url_for('static', filename='js/generated/vendor.main.js') }}" ></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/generated/vendor.others.js') }}" ></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/generated/pgadmin_commons.js') }}" ></script>
 
 </head>
 <body>

web/pgadmin/tools/backup/static/js/backup.js

@@ -10,13 +10,13 @@
 // Backup dialog
 define([
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'pgadmin.alertifyjs', 'backbone', 'pgadmin.backgrid',
+  'pgadmin.alertifyjs', 'backbone', 'pgadmin.backgrid',
   'pgadmin.backform', 'pgadmin.browser', 'sources/utils',
   'tools/backup/static/js/menu_utils',
   'tools/backup/static/js/backup_dialog',
   'sources/nodes/supported_database_node',
 ], function(
-  gettext, url_for, $, _, S, alertify, Backbone, Backgrid, Backform, pgBrowser,
+  gettext, url_for, $, _, alertify, Backbone, Backgrid, Backform, pgBrowser,
   commonUtils, menuUtils, globalBackupDialog, supportedNodes
 ) {
 

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -392,7 +392,7 @@
 {% endblock %}
 
 {% block init_script %}
-	require(['sources/generated/sqleditor'], function(ctx) {
+	require(['sources/generated/sqleditor', 'sources/generated/browser_nodes', 'sources/generated/codemirror', 'sources/generated/slickgrid'], function(ctx) {
     var $ = pgAdmin.SqlEditor.jquery,
         S = pgAdmin.SqlEditor.S,
         editorPanel = $('.sql-editor'),

web/pgadmin/tools/debugger/static/js/debugger.js

@@ -9,13 +9,13 @@
 
 define([
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'alertify', 'sources/pgadmin', 'pgadmin.browser',
+  'alertify', 'sources/pgadmin', 'pgadmin.browser',
   'backbone', 'pgadmin.backgrid', 'codemirror', 'pgadmin.backform',
-  'pgadmin.tools.debugger.ui', 'pgadmin.tools.debugger.utils',
+  'pgadmin.tools.debugger.ui', 'pgadmin.tools.debugger.utils', 'sources/utils',
   'wcdocker', 'pgadmin.browser.frame',
 ], function(
-  gettext, url_for, $, _, S, Alertify, pgAdmin, pgBrowser, Backbone, Backgrid,
+  gettext, url_for, $, _, Alertify, pgAdmin, pgBrowser, Backbone, Backgrid,
-  CodeMirror, Backform, get_function_arguments, debuggerUtils
+  CodeMirror, Backform, get_function_arguments, debuggerUtils, pgadminUtils,
 ) {
   var pgTools = pgAdmin.Tools = pgAdmin.Tools || {},
     wcDocker = window.wcDocker;
@@ -281,7 +281,7 @@ define([
           }
         ),
         function(o) {
-          ref = S('%s/%s').sprintf(ref, encodeURI(o._id)).value();
+          ref = pgadminUtils.sprintf('%s/%s', ref, encodeURI(o._id));
         });
 
       var args = {

web/pgadmin/tools/debugger/templates/debugger/direct.html

@@ -4,7 +4,7 @@
 
 try {
   require(
-    ['sources/generated/debugger_direct'],
+    ['sources/generated/debugger_direct', 'sources/generated/browser_nodes', 'sources/generated/codemirror'],
     function(pgDirectDebug) {
       var pgDirectDebug = pgDirectDebug || pgAdmin.Tools.DirectDebug;
       var $ = pgDirectDebug.jquery;

web/pgadmin/tools/import_export/static/js/import_export.js

@@ -8,13 +8,13 @@
 //////////////////////////////////////////////////////////////
 
 define([
-  'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'underscore.string', 'pgadmin.alertifyjs',
+  'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'pgadmin.alertifyjs',
   'sources/pgadmin', 'pgadmin.browser', 'backbone', 'backgrid', 'backform',
   'sources/utils',
   'sources/nodes/supported_database_node',
   'pgadmin.backform', 'pgadmin.backgrid', 'pgadmin.browser.node.ui',
 ], function(
-  gettext, url_for, $, _, S, Alertify, pgAdmin, pgBrowser, Backbone, Backgrid,
+  gettext, url_for, $, _, Alertify, pgAdmin, pgBrowser, Backbone, Backgrid,
   Backform, commonUtils, supportedNodes
 ) {
 
@@ -460,7 +460,7 @@ define([
           return;
         }
       } else {
-        Alertify.alert(S(gettext('Failed to load preference %s of module %s')).sprintf(preference_name, module).value());
+        Alertify.alert(gettext('Failed to load preference %s of module %s', preference_name, module));
         return;
       }
 
@@ -690,9 +690,8 @@ define([
 
           // Open the Alertify dialog for the import/export module
           Alertify.ImportDialog(
-            S(
+            gettext('Import/Export data - table \'%s\'', treeInfo.table.label),
-              gettext('Import/Export data - table \'%s\'')
+            node, i, d
-            ).sprintf(treeInfo.table.label).value(), node, i, d
           ).set('resizable', true).resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.lg);
         })
         .fail(function() {

web/pgadmin/tools/maintenance/static/js/maintenance.js

@@ -9,14 +9,14 @@
 
 define([
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'underscore.string', 'pgadmin.alertifyjs', 'sources/pgadmin', 'pgadmin.browser', 'backbone',
+  'pgadmin.alertifyjs', 'sources/pgadmin', 'pgadmin.browser', 'backbone',
   'backgrid', 'backform', 'sources/utils',
   'tools/maintenance/static/js/menu_utils',
   'sources/nodes/supported_database_node',
   'pgadmin.backform', 'pgadmin.backgrid',
   'pgadmin.browser.node.ui',
 ], function(
-  gettext, url_for, $, _, S, Alertify, pgAdmin, pgBrowser, Backbone, Backgrid,
+  gettext, url_for, $, _, Alertify, pgAdmin, pgBrowser, Backbone, Backgrid,
   Backform, commonUtils,
   menuUtils, supportedNodes
 ) {
@@ -234,7 +234,7 @@ define([
           return;
         }
       } else {
-        Alertify.alert(S(gettext('Failed to load preference %s of module %s')).sprintf(preference_name, module).value());
+        Alertify.alert(gettext('Failed to load preference %s of module %s', preference_name, module));
         return;
       }
 

web/pgadmin/tools/restore/static/js/restore.js

@@ -9,13 +9,13 @@
 
 define('tools.restore', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'backbone',
-  'underscore.string', 'pgadmin.alertifyjs', 'pgadmin.browser',
+  'pgadmin.alertifyjs', 'pgadmin.browser',
   'pgadmin.backgrid', 'pgadmin.backform', 'sources/utils',
   'tools/restore/static/js/menu_utils',
   'sources/nodes/supported_database_node',
   'tools/restore/static/js/restore_dialog',
 ], function(
-  gettext, url_for, $, _, Backbone, S, alertify, pgBrowser, Backgrid, Backform,
+  gettext, url_for, $, _, Backbone, alertify, pgBrowser, Backgrid, Backform,
   commonUtils, menuUtils, supportedNodes, restoreDialog
 ) {
 

web/pgadmin/tools/restore/static/js/restore_dialog.js

@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import gettext from '../../../../static/js/gettext';
-import {sprintf} from 'sprintf-js';
+import {sprintf} from 'sources/utils';
 import Backform from '../../../../static/js/backform.pgadmin';
 import {Dialog} from '../../../../static/js/alertify/dialog';
 import url_for from 'sources/url_for';

web/pgadmin/tools/sqleditor/static/js/sqleditor.js

@@ -8,9 +8,9 @@
 //////////////////////////////////////////////////////////////
 
 define('tools.querytool', [
-  'babel-polyfill', 'sources/gettext', 'sources/url_for', 'jquery', 'jquery.ui',
+  'sources/gettext', 'sources/url_for', 'jquery', 'jquery.ui',
-  'jqueryui.position', 'underscore', 'underscore.string', 'pgadmin.alertifyjs',
+  'jqueryui.position', 'underscore', 'pgadmin.alertifyjs',
-  'sources/pgadmin', 'backbone', 'sources/../bundle/codemirror',
+  'sources/pgadmin', 'backbone', 'bundled_codemirror',
   'pgadmin.misc.explain',
   'sources/selection/grid_selector',
   'sources/selection/active_cell_capture',
@@ -41,14 +41,13 @@ define('tools.querytool', [
   'sources/window',
   'sources/../bundle/slickgrid',
   'pgadmin.file_manager',
-  'backgrid.sizeable.columns',
   'slick.pgadmin.formatters',
   'slick.pgadmin.editors',
   'slick.pgadmin.plugins/slick.autocolumnsize',
   'pgadmin.browser',
   'pgadmin.tools.user_management',
 ], function(
-  babelPollyfill, gettext, url_for, $, jqueryui, jqueryui_position, _, S, alertify, pgAdmin, Backbone, codemirror,
+  gettext, url_for, $, jqueryui, jqueryui_position, _, alertify, pgAdmin, Backbone, codemirror,
   pgExplain, GridSelector, ActiveCellCapture, clipboard, copyData, RangeSelectionHelper, handleQueryOutputKeyboardEvent,
   XCellSelectionModel, setStagedRows, SqlEditorUtils, ExecuteQuery, httpErrorHandler, FilterHandler,
   GeometryViewer, historyColl, queryHist, querySources,
@@ -1366,9 +1365,7 @@ define('tools.querytool', [
       /* history fetch fail should not affect query tool */
       });
     },
-    /* This function is responsible to create and render the
+    /* This function is responsible to create and render the the history tab. */
-     * new backgrid for the history tab.
-     */
     render_history_grid: function() {
       var self = this;
 
@@ -2185,7 +2182,7 @@ define('tools.querytool', [
           });
       },
       /* This function is used to create instance of SQLEditorView,
-       * call the render method of the grid view to render the backgrid
+       * call the render method of the grid view to render the slickgrid
        * header and loading icon and start execution of the sql query.
        */
       start: function(transId, url_params, layout) {
@@ -2287,7 +2284,7 @@ define('tools.querytool', [
                 );
 
                 pgBrowser.report_error(
-                  S(gettext('Error fetching SQL for script: %s.')).sprintf(msg).value()
+                  gettext('Error fetching SQL for script: %s.', msg)
                 );
               });
           } else {
@@ -2512,9 +2509,8 @@ define('tools.querytool', [
         executeQuery.delayedPoll(this);
       },
 
-      /* This function is used to create the backgrid columns,
+      /* This function is used to create the slickgrid columns
-       * create the Backbone PageableCollection and finally render
+       * and render the data in the slickgrid.
-       * the data in the backgrid.
        */
       _render: function(data) {
         var self = this;
@@ -2577,8 +2573,8 @@ define('tools.querytool', [
               self.query_start_time,
               self.query_end_time
             );
-            var msg1 = S(gettext('Successfully run. Total query runtime: %s.')).sprintf(self.total_time).value();
+            var msg1 = gettext('Successfully run. Total query runtime: %s.',self.total_time);
-            var msg2 = S(gettext('%s rows affected.')).sprintf(self.rows_affected).value();
+            var msg2 = gettext('%s rows affected.',self.rows_affected);
 
             // Display the notifier if the timeout is set to >= 0
             if (self.info_notifier_timeout >= 0) {
@@ -3154,7 +3150,7 @@ define('tools.querytool', [
             } else {
             // Something went wrong while saving data on the db server
               self.set_sql_message(res.data.result);
-              var err_msg = S(gettext('%s.')).sprintf(res.data.result).value();
+              var err_msg = gettext('%s.', res.data.result);
               alertify.error(err_msg, 20);
               // If the transaction is not idle, notify the user that previous queries are not rolled back,
               // only the failed save queries.
@@ -4358,7 +4354,6 @@ define('tools.querytool', [
       return new SqlEditorController(container);
     },
     jquery: $,
-    S: S,
   };
 
   return pgAdmin.SqlEditor;

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

@@ -8,12 +8,12 @@
 //////////////////////////////////////////////////////////////
 
 define([
-  'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'underscore.string', 'pgadmin.alertifyjs',
+  'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'pgadmin.alertifyjs',
   'pgadmin.browser', 'backbone', 'backgrid', 'backform', 'pgadmin.browser.node',
   'pgadmin.user_management.current_user',
   'backgrid.select.all', 'backgrid.filter',
 ], function(
-  gettext, url_for, $, _, S, alertify, pgBrowser, Backbone, Backgrid, Backform,
+  gettext, url_for, $, _, alertify, pgBrowser, Backbone, Backgrid, Backform,
   pgNode, userInfo
 ) {
 
@@ -352,18 +352,18 @@ define([
               return errmsg;
             } else if (!!this.get('email') && !email_filter.test(this.get('email'))) {
 
-              errmsg = S(gettext('Invalid email address: %s.')).sprintf(
+              errmsg = gettext('Invalid email address: %s.',
                 this.get('email')
-              ).value();
+              );
               this.errorModel.set('email', errmsg);
               return errmsg;
             } else if (!!this.get('email') && this.collection.where({
               'email': this.get('email'),
             }).length > 1) {
 
-              errmsg = S(gettext('The email address %s already exists.')).sprintf(
+              errmsg = gettext('The email address %s already exists.',
                 this.get('email')
-              ).value();
+              );
 
               this.errorModel.set('email', errmsg);
               return errmsg;
@@ -375,9 +375,9 @@ define([
                 _.isNull(this.get('role')) ||
                 String(this.get('role')).replace(/^\s+|\s+$/g, '') == '')) {
 
-              errmsg = S(gettext('Role cannot be empty for user %s.')).sprintf(
+              errmsg = gettext('Role cannot be empty for user %s.',
                 (this.get('email') || '')
-              ).value();
+              );
 
               this.errorModel.set('role', errmsg);
               return errmsg;
@@ -391,9 +391,9 @@ define([
                   _.isNull(this.get('newPassword')) ||
                   this.get('newPassword') == '')) {
 
-                errmsg = S(gettext('Password cannot be empty for user %s.')).sprintf(
+                errmsg = gettext('Password cannot be empty for user %s.',
                   (this.get('email') || '')
-                ).value();
+                );
 
                 this.errorModel.set('newPassword', errmsg);
                 return errmsg;
@@ -401,9 +401,9 @@ define([
                 !_.isNull(this.get('newPassword')) &&
                 this.get('newPassword').length < 6) {
 
-                errmsg = S(gettext('Password must be at least 6 characters for user %s.')).sprintf(
+                errmsg = gettext('Password must be at least 6 characters for user %s.',
                   (this.get('email') || '')
-                ).value();
+                );
 
                 this.errorModel.set('newPassword', errmsg);
                 return errmsg;
@@ -415,9 +415,9 @@ define([
                   _.isNull(this.get('confirmPassword')) ||
                   this.get('confirmPassword') == '')) {
 
-                errmsg = S(gettext('Confirm Password cannot be empty for user %s.')).sprintf(
+                errmsg = gettext('Confirm Password cannot be empty for user %s.',
                   (this.get('email') || '')
-                ).value();
+                );
 
                 this.errorModel.set('confirmPassword', errmsg);
                 return errmsg;
@@ -428,9 +428,9 @@ define([
               if (!!this.get('newPassword') && !!this.get('confirmPassword') &&
                 this.get('newPassword') != this.get('confirmPassword')) {
 
-                errmsg = S(gettext('Passwords do not match for user %s.')).sprintf(
+                errmsg = gettext('Passwords do not match for user %s.',
                   (this.get('email') || '')
-                ).value();
+                );
 
                 this.errorModel.set('confirmPassword', errmsg);
                 return errmsg;
@@ -462,9 +462,9 @@ define([
                 !this.get('newPassword') == '' &&
                 this.get('newPassword').length < 6) {
 
-                errmsg = S(gettext('Password must be at least 6 characters for user %s.')).sprintf(
+                errmsg = gettext('Password must be at least 6 characters for user %s.',
                   (this.get('email') || '')
-                ).value();
+                );
 
                 this.errorModel.set('newPassword', errmsg);
                 return errmsg;
@@ -472,18 +472,18 @@ define([
                 _.isNull(this.get('confirmPassword')) ||
                 this.get('confirmPassword') == '') {
 
-                errmsg = S(gettext('Confirm Password cannot be empty for user %s.')).sprintf(
+                errmsg = gettext('Confirm Password cannot be empty for user %s.',
                   (this.get('email') || '')
-                ).value();
+                );
 
                 this.errorModel.set('confirmPassword', errmsg);
                 return errmsg;
               } else if (!!this.get('newPassword') && !!this.get('confirmPassword') &&
                 this.get('newPassword') != this.get('confirmPassword')) {
 
-                errmsg = S(gettext('Passwords do not match for user %s.')).sprintf(
+                errmsg = gettext('Passwords do not match for user %s.',
                   (this.get('email') || '')
-                ).value();
+                );
 
                 this.errorModel.set('confirmPassword', errmsg);
                 return errmsg;
@@ -740,16 +740,16 @@ define([
                           });
 
                           m.startNewSession();
-                          alertify.success(S(gettext('User \'%s\' saved.')).sprintf(
+                          alertify.success(gettext('User \'%s\' saved.',
                             m.get('email')
-                          ).value());
+                          ));
                         },
                         error: function(res, jqxhr) {
                           m.startNewSession();
                           alertify.error(
-                            S(gettext('Error saving user: \'%s\'')).sprintf(
+                            gettext('Error saving user: \'%s\'',
                               jqxhr.responseJSON.errormsg
-                            ).value()
+                            )
                           );
                         },
                       });

web/regression/javascript/alerts/alertify_wrapper_spec.js

@@ -40,7 +40,7 @@ describe('alertify_wrapper', function () {
   });
 
   describe('alertify_error calls pgRespErrorNotify notifier', function() {
-    it('which alertifies response error for ajax calls', () => {
+    it('which alertifies response error for ajax calls', (done) => {
       $.ajax({
         url: 'http://some/dummy/url',
         dataType: 'json',
@@ -107,6 +107,8 @@ describe('alertify_wrapper', function () {
           expect(spyOrigError.calls.mostRecent().args[0]).toContain(
             gettext('Some prefix message')
           );
+
+          done();
         },
       });
     });

web/regression/javascript/browser/modify_animation_spec.js

@@ -25,8 +25,8 @@ describe('modifyAnimation', function () {
     });
     dummyElement = document.createElement('link');
     spyOn($.fn, 'find').and.returnValue($(dummyElement));
-    spyOn($.fn, 'removeAttr');
+    spyOn($.fn, 'removeClass');
-    spyOn($.fn, 'attr');
+    spyOn($.fn, 'addClass');
   });
 
   describe('When browser tree animation is disabled', () => {
@@ -74,7 +74,7 @@ describe('modifyAnimation', function () {
     it('alertify disalogue/notification animation should be disabled', function() {
       expect(pgBrowser.get_preference).toHaveBeenCalled();
       expect($.fn.find).toHaveBeenCalled();
-      expect($.fn.removeAttr).toHaveBeenCalledWith('disabled', 'disabled');
+      expect($.fn.addClass).toHaveBeenCalledWith('alertify-no-animation');
     });
   });
 
@@ -86,7 +86,7 @@ describe('modifyAnimation', function () {
     it('alertify disalogue/notification animation should be enabled', function() {
       expect(pgBrowser.get_preference).toHaveBeenCalled();
       expect($.fn.find).toHaveBeenCalled();
-      expect($.fn.attr).toHaveBeenCalledWith('disabled', 'disabled');
+      expect($.fn.removeClass).toHaveBeenCalledWith('alertify-no-animation');
     });
   });
 

web/regression/javascript/dashboard/charting_spec.js

@@ -23,10 +23,6 @@ describe('In charting related testcases', ()=> {
     chartObj = new Chart(chartDiv, options);
   });
 
-  it('Chart api should be defined', ()=>{
-    expect(chartObj.chartApi).toBeDefined();
-  });
-
   it('Return the correct container', ()=>{
     expect(chartObj.getContainer()).toEqual(chartDiv);
   });

web/regression/javascript/geometry_viewer/geometry_viewer_spec.js

@@ -8,6 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import GeometryViewer from 'sources/sqleditor/geometry_viewer';
+import {Geometry} from 'wkx';
 
 describe('geometry viewer test', function () {
 
@@ -54,7 +55,7 @@ describe('geometry viewer test', function () {
         },
       ];
       let columnIndex = 0;
-      let result = GeometryViewer.parse_data(items, columns, columnIndex);
+      let result = GeometryViewer.parse_data(items, columns, columnIndex, Geometry);
       expect(result.geoJSONs.length).toEqual(2);
     });
 
@@ -75,7 +76,7 @@ describe('geometry viewer test', function () {
         },
       ];
       let columnIndex = 0;
-      let result = GeometryViewer.parse_data(items, columns, columnIndex);
+      let result = GeometryViewer.parse_data(items, columns, columnIndex, Geometry);
       expect(result.geoJSONs.length).toEqual(1);
     });
 
@@ -95,7 +96,7 @@ describe('geometry viewer test', function () {
         },
       ];
       let columnIndex = 0;
-      let result = GeometryViewer.parse_data(items, columns, columnIndex);
+      let result = GeometryViewer.parse_data(items, columns, columnIndex, Geometry);
       expect(result.geoJSONs.length).toEqual(1);
     });
 
@@ -113,7 +114,7 @@ describe('geometry viewer test', function () {
         },
       ];
       let columnIndex = 0;
-      let result = GeometryViewer.parse_data(items, columns, columnIndex);
+      let result = GeometryViewer.parse_data(items, columns, columnIndex, Geometry);
       expect(result.geoJSONs.length).toEqual(1);
     });
 
@@ -144,7 +145,7 @@ describe('geometry viewer test', function () {
         },
       ];
       let columnIndex = 0;
-      let result = GeometryViewer.parse_data(items, columns, columnIndex);
+      let result = GeometryViewer.parse_data(items, columns, columnIndex, Geometry);
       expect(result.geoJSONs.length).toEqual(2);
     });
 
@@ -163,7 +164,7 @@ describe('geometry viewer test', function () {
         },
       ];
       let columnIndex = 0;
-      let result = GeometryViewer.parse_data(items, columns, columnIndex);
+      let result = GeometryViewer.parse_data(items, columns, columnIndex, Geometry);
       expect(result.geoJSONs.length).toEqual(0);
     });
 
@@ -182,7 +183,7 @@ describe('geometry viewer test', function () {
         },
       ];
       let columnIndex = 0;
-      let result = GeometryViewer.parse_data(items, columns, columnIndex);
+      let result = GeometryViewer.parse_data(items, columns, columnIndex, Geometry);
       expect(result.geoJSONs.length).toEqual(0);
     });
 
@@ -202,7 +203,7 @@ describe('geometry viewer test', function () {
         },
       ];
       let columnIndex = 0;
-      let result = GeometryViewer.parse_data(items, columns, columnIndex);
+      let result = GeometryViewer.parse_data(items, columns, columnIndex, Geometry);
       expect(result.geoJSONs.length).toEqual(0);
     });
 
@@ -224,7 +225,7 @@ describe('geometry viewer test', function () {
         },
       ];
       let columnIndex = 0;
-      let result = GeometryViewer.parse_data(items, columns, columnIndex);
+      let result = GeometryViewer.parse_data(items, columns, columnIndex, Geometry);
       expect(result.geoJSONs.length).toBeLessThan(600000);
     });
   });

web/regression/javascript/gettext_spec.js

@@ -19,16 +19,13 @@ describe('translate', function () {
 
     describe('when there are substitutions', function () {
       it('interpolates a substitution', function () {
-        expect(gettext('translate text for %(person)s', {'person': 'Sarah'})).toEqual('translate text for Sarah');
+        expect(gettext('translate text for %s', 'Sarah')).toEqual('translate text for Sarah');
       });
 
       it('interpolates multiple substitutions', function () {
-        expect(gettext('translate \'%(text)s\' for %(person)s',
+        expect(
-          {
+          gettext('translate \'%s\' for %s', 'constitution', 'Sarah')
-            'text': 'constitution',
+        ).toEqual('translate \'constitution\' for Sarah');
-            'person': 'Sarah',
-          }
-        )).toEqual('translate \'constitution\' for Sarah');
       });
     });
 
@@ -37,7 +34,7 @@ describe('translate', function () {
   describe('when there is a translation', function () {
     beforeEach(function () {
       translations['something to be translated'] = 'etwas zum uebersetzen';
-      translations['another translation for %(person)s'] = 'eine weitere Uebersetzung fuer %(person)s';
+      translations['another translation for %s'] = 'eine weitere Uebersetzung fuer %s';
     });
 
     it('returns the translation', function () {
@@ -46,7 +43,7 @@ describe('translate', function () {
 
     describe('when there is a substitution', function () {
       it('interpolates the substitution', function () {
-        expect(gettext('another translation for %(person)s', {'person': 'Sarah'}))
+        expect(gettext('another translation for %s', 'Sarah'))
           .toEqual('eine weitere Uebersetzung fuer Sarah');
       });
     });

web/regression/javascript/pgadmin_utils_spec.js

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import { getEpoch, getGCD, getMod, quote_ident, parseFuncParams, getRandomInt } from 'sources/utils';
+import { getEpoch, getGCD, getMod, quote_ident, parseFuncParams, getRandomInt, sprintf } from 'sources/utils';
 
 describe('getEpoch', function () {
   it('should return non zero', function () {
@@ -142,3 +142,29 @@ describe('getRandomInt', function () {
     expect(1 <= id && id <= 9999999).toBeTruthy();
   });
 });
+
+describe('sprintf', function () {
+  it('single replace', function () {
+    expect(
+      sprintf('This is normal %s for testing.', 'replace')
+    ).toBe(
+      'This is normal replace for testing.'
+    );
+  });
+
+  it('multi replace', function () {
+    expect(
+      sprintf('This is multi %s for %s testing.', 'positions', 'replace')
+    ).toBe(
+      'This is multi positions for replace testing.'
+    );
+  });
+
+  it('text, numbers, empty replace', function () {
+    expect(
+      sprintf('This is a number - %s, text - %s, and not repalce - %s.', 4321, 'replace')
+    ).toBe(
+      'This is a number - 4321, text - replace, and not repalce - %s.'
+    );
+  });
+});

web/regression/javascript/sqleditor/execute_query_spec.js

@@ -1388,15 +1388,17 @@ describe('ExecuteQuery', () => {
               }, 0);
           });
 
-          it('should not save the state', () => {
+          it('should not save the state', (done) => {
             setTimeout(() => {
               expect(sqlEditorMock.saveState).not.toHaveBeenCalled();
+              done();
             }, 0);
           });
 
-          it('should not display pga login', () => {
+          it('should not display pga login', (done) => {
             setTimeout(() => {
               expect(userManagementMock.pgaLogin).not.toHaveBeenCalled();
+              done();
             }, 0);
           });
         });
@@ -1446,18 +1448,20 @@ describe('ExecuteQuery', () => {
               }, 0);
           });
 
-          it('should save the state', () => {
+          it('should save the state', (done) => {
             setTimeout(() => {
               expect(sqlEditorMock.saveState).toHaveBeenCalledWith(
                 'check_data_changes_to_execute_query',
                 ['']
               );
+              done();
             }, 0);
           });
 
-          it('should display pga login', () => {
+          it('should display pga login', (done) => {
             setTimeout(() => {
               expect(userManagementMock.pgaLogin).toHaveBeenCalled();
+              done();
             }, 0);
           });
         });
@@ -1507,21 +1511,24 @@ describe('ExecuteQuery', () => {
               }, 0);
           });
 
-          it('should not save the state', () => {
+          it('should not save the state', (done) => {
             setTimeout(() => {
               expect(sqlEditorMock.saveState).not.toHaveBeenCalled();
+              done();
             }, 0);
           });
 
-          it('should not display pga login', () => {
+          it('should not display pga login', (done) => {
             setTimeout(() => {
               expect(userManagementMock.pgaLogin).not.toHaveBeenCalled();
+              done();
             }, 0);
           });
 
-          it('should not initialize a new transaction', () => {
+          it('should not initialize a new transaction', (done) => {
             setTimeout(() => {
               expect(sqlEditorMock.initTransaction).not.toHaveBeenCalled();
+              done();
             }, 0);
           });
         });
@@ -1571,24 +1578,27 @@ describe('ExecuteQuery', () => {
               }, 0);
           });
 
-          it('should save the state', () => {
+          it('should save the state', (done) => {
             setTimeout(() => {
               expect(sqlEditorMock.saveState).toHaveBeenCalledWith(
                 'check_data_changes_to_execute_query',
                 ['']
               );
+              done();
             }, 0);
           });
 
-          it('should not display pga login', () => {
+          it('should not display pga login', (done) => {
             setTimeout(() => {
               expect(userManagementMock.pgaLogin).not.toHaveBeenCalled();
+              done();
             }, 0);
           });
 
-          it('should initialize a new transaction', () => {
+          it('should initialize a new transaction', (done) => {
             setTimeout(() => {
               expect(sqlEditorMock.initTransaction).toHaveBeenCalled();
+              done();
             }, 0);
           });
         });
@@ -1601,18 +1611,20 @@ describe('ExecuteQuery', () => {
             executeQuery.execute('some sql query', '');
           });
 
-          it('saves state', () => {
+          it('saves state', (done) => {
             setTimeout(() => {
               expect(sqlEditorMock.saveState).toHaveBeenCalledWith(
                 'check_data_changes_to_execute_query',
                 ['']
               );
+              done();
             }, 0);
           });
 
-          it('calls handle_connection_lost', () => {
+          it('calls handle_connection_lost', (done) => {
             setTimeout(() => {
               expect(sqlEditorMock.handle_connection_lost).toHaveBeenCalled();
+              done();
             }, 0);
           });
         });

web/regression/javascript/table/enable_disable_triggers_spec.js

@@ -59,7 +59,7 @@ describe('#enableTriggers', () => {
 
   describe('a node is selected', () => {
     describe('node as no data', () => {
-      it('does not send the request to the backend', () => {
+      it('does not send the request to the backend', (done) => {
         tree.selectNode([{id: 'table-no-data'}]);
 
         networkMock.onAny('.*').reply(200, () => {
@@ -67,6 +67,7 @@ describe('#enableTriggers', () => {
 
         setTimeout(() => {
           expect(enableTriggers(tree, alertify, generateUrlSpy, {})).toEqual(false);
+          done();
         }, 0);
       });
     });
@@ -186,7 +187,7 @@ describe('#disableTriggers', () => {
 
   describe('a node is selected', () => {
     describe('node as no data', () => {
-      it('does not send the request to the backend', () => {
+      it('does not send the request to the backend', (done) => {
         tree.selectNode([{id: 'table-no-data'}]);
 
         networkMock.onAny('.*').reply(200, () => {
@@ -194,6 +195,7 @@ describe('#disableTriggers', () => {
 
         setTimeout(() => {
           expect(disableTriggers(tree, alertify, generateUrlSpy, {})).toEqual(false);
+          done();
         }, 0);
       });
     });

web/regression/javascript/tree/tree_fake.js

@@ -40,7 +40,7 @@ export class TreeFake extends Tree {
     super();
     this.aciTreeToOurTreeTranslator = {};
     this.aciTreeApi = jasmine.createSpyObj(
-      ['ACITreeApi'], ['setInode', 'unload', 'deselect', 'select']);
+      'ACITreeApi', ['setInode', 'unload', 'deselect', 'select']);
   }
 
   addNewNode(id, data, domNode, path) {

web/webpack.config.js

@@ -24,8 +24,12 @@ const extractStyle = new MiniCssExtractPlugin({
   filename: '[name].css',
   allChunks: true,
 });
+const WebpackRequireFromPlugin = require('webpack-require-from');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
 const envType = PRODUCTION ? 'production': 'development';
 const devToolVal = PRODUCTION ? false : 'eval';
+const analyzerMode = process.env.ANALYZE=='true' ? 'static' : 'disabled';
 
 // Expose libraries in app context so they need not to
 // require('libname') when used in a module
@@ -34,7 +38,6 @@ const providePlugin = new webpack.ProvidePlugin({
   jQuery: 'jquery',
   'window.jQuery': 'jquery',
   _: 'underscore',
-  S: 'underscore.string',
   Backbone: 'backbone',
   Backgrid: 'backgrid',
   pgAdmin: 'pgadmin',
@@ -46,7 +49,11 @@ const providePlugin = new webpack.ProvidePlugin({
 const optimizeAssetsPlugin = new OptimizeCssAssetsPlugin({
   assetNameRegExp: /\.css$/g,
   cssProcessor: require('cssnano'),
-  cssProcessorOptions: { discardComments: {removeAll: true } },
+  cssProcessorOptions: {
+    discardComments: {
+      removeAll: true,
+    },
+  },
   canPrint: true,
 });
 
@@ -55,11 +62,22 @@ const optimizeAssetsPlugin = new OptimizeCssAssetsPlugin({
 // Reference: https://webpack.js.org/plugins/source-map-dev-tool-plugin/#components/sidebar/sidebar.jsx
 const sourceMapDevToolPlugin = new webpack.SourceMapDevToolPlugin({
   filename: '[name].js.map',
-  exclude: ['vendor.js', 'codemirror.js', 'popper.js'],
+  exclude: /(vendor|codemirror|slickgrid|pgadmin\.js|style\.js|popper)/,
   columns: false,
 });
 
+// Supress errors while compiling as the getChunkURL method will be available
+// on runtime. window.getChunkURL is defined in base.html
+const webpackRequireFrom = new WebpackRequireFromPlugin({
+  methodName: 'getChunkURL',
+  supressErrors: true,
+});
 
+// can be enabled using bundle:analyze
+const bundleAnalyzer = new BundleAnalyzerPlugin({
+  analyzerMode: analyzerMode,
+  reportFilename: 'analyze_report.html',
+});
 
 function cssToBeSkiped(curr_path) {
   /** Skip all templates **/
@@ -119,6 +137,7 @@ module.exports = {
   entry: {
     'app.bundle': sourceDir + '/bundle/app.js',
     codemirror: sourceDir + '/bundle/codemirror.js',
+    slickgrid: sourceDir + '/bundle/slickgrid.js',
     sqleditor: './pgadmin/tools/sqleditor/static/js/sqleditor.js',
     debugger_direct: './pgadmin/tools/debugger/static/js/direct.js',
     file_utils: './pgadmin/misc/file_manager/static/js/utility.js',
@@ -131,6 +150,7 @@ module.exports = {
     libraryTarget: 'amd',
     path: __dirname + '/pgadmin/static/js/generated',
     filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
     libraryExport: 'default',
   },
   // Templates files which contains python code needs to load dynamically
@@ -153,7 +173,7 @@ module.exports = {
       use: {
         loader: 'babel-loader',
         options: {
-          presets: [['@babel/preset-env', {'modules': 'commonjs'}]],
+          presets: [['@babel/preset-env', {'modules': 'commonjs', 'useBuiltIns': 'usage', 'corejs': 3}]],
         },
       },
     }, {
@@ -161,7 +181,7 @@ module.exports = {
       use: {
         loader: 'babel-loader',
         options: {
-          presets: [['@babel/preset-env', {'modules': 'commonjs'}]],
+          presets: [['@babel/preset-env', {'modules': 'commonjs', 'useBuiltIns': 'usage', 'corejs': 3}]],
         },
       },
     }, {
@@ -354,18 +374,58 @@ module.exports = {
         parallel: true,
         cache: true,
         uglifyOptions: {
-          compress: false,
+          compress: true,
+          extractComments: true,
+          output: {
+            comments: false,
+          },
         },
       }),
     ],
     splitChunks: {
       cacheGroups: {
-        vendors: {
+        slickgrid: {
-          name: 'vendors',
+          name: 'slickgrid',
-          filename: 'vendor.js',
+          filename: 'slickgrid.js',
           chunks: 'all',
           reuseExistingChunk: true,
-          priority: 1,
+          priority: 9,
+          minChunks: 2,
+          enforce: true,
+          test(module) {
+            return webpackShimConfig.matchModules(module, 'slickgrid');
+          },
+        },
+        codemirror: {
+          name: 'codemirror',
+          filename: 'codemirror.js',
+          chunks: 'all',
+          reuseExistingChunk: true,
+          priority: 8,
+          minChunks: 2,
+          enforce: true,
+          test(module) {
+            return webpackShimConfig.matchModules(module, 'codemirror');
+          },
+        },
+        vendor_main: {
+          name: 'vendor_main',
+          filename: 'vendor.main.js',
+          chunks: 'all',
+          reuseExistingChunk: true,
+          priority: 7,
+          minChunks: 2,
+          enforce: true,
+          test(module) {
+            return webpackShimConfig.matchModules(module, ['wcdocker', 'backbone', 'jquery', 'bootstrap', 'popper']);
+          },
+        },
+        vendor_others: {
+          name: 'vendor_others',
+          filename: 'vendor.others.js',
+          chunks: 'all',
+          reuseExistingChunk: true,
+          priority: 6,
           minChunks: 2,
           enforce: true,
           test(module) {
@@ -376,13 +436,24 @@ module.exports = {
           name: 'pgadmin_commons',
           filename: 'pgadmin_commons.js',
           chunks: 'all',
-          priority: 2,
+          priority: 5,
           minChunks: 2,
           enforce: true,
           test(module) {
             return webpackShimConfig.isPgAdminLib(module);
           },
         },
+        browser_nodes: {
+          name: 'browser_nodes',
+          filename: 'browser_nodes.js',
+          chunks: 'all',
+          priority: 4,
+          minChunks: 2,
+          enforce: true,
+          test(module) {
+            return webpackShimConfig.isBrowserNode(module);
+          },
+        },
       },
     },
   },
@@ -393,9 +464,12 @@ module.exports = {
     providePlugin,
     optimizeAssetsPlugin,
     sourceMapDevToolPlugin,
+    webpackRequireFrom,
+    bundleAnalyzer,
   ]: [
     extractStyle,
     providePlugin,
     sourceMapDevToolPlugin,
+    webpackRequireFrom,
   ],
 };

web/webpack.shim.js

@@ -68,9 +68,6 @@ var webpackShimConfig = {
     'backgrid.filter': {
       'deps': ['backgrid'],
     },
-    'backgrid.sizeable.columns': {
-      'deps': ['backgrid'],
-    },
     'jquery.event.drag': {
       'deps': ['jquery'], 'exports': 'jQuery.fn.drag',
     },
@@ -138,13 +135,12 @@ var webpackShimConfig = {
     'translations': path.join(__dirname, './pgadmin/tools/templates/js/translations'),
     'sources/gettext': path.join(__dirname, './pgadmin/static/js/gettext'),
     'sources/utils': path.join(__dirname, './pgadmin/static/js/utils'),
-    'babel-polyfill': path.join(__dirname, './node_modules/@babel/polyfill/dist/polyfill'),
     'tools': path.join(__dirname, './pgadmin/tools/'),
     'pgbrowser': path.join(__dirname, './pgadmin/browser/static/js/'),
 
     // Vendor JS
     'jquery': path.join(__dirname, './node_modules/jquery/dist/jquery'),
-    'wcdocker': path.join(__dirname, './node_modules/webcabin-docker/Build/wcDocker'),
+    'wcdocker': path.join(__dirname, './node_modules/webcabin-docker/Build/wcDocker.min'),
     'alertify': path.join(__dirname, './node_modules/alertifyjs/build/alertify'),
     'moment': path.join(__dirname, './node_modules/moment/moment'),
     'jquery.event.drag': path.join(__dirname, './node_modules/slickgrid/lib/jquery.event.drag-2.3.0'),
@@ -156,7 +152,7 @@ var webpackShimConfig = {
     'dropzone': path.join(__dirname, './node_modules/dropzone/dist/dropzone'),
     'bignumber': path.join(__dirname, './node_modules/bignumber.js/bignumber'),
     'json-bignumber': path.join(__dirname, './node_modules/json-bignumber/dist/JSONBigNumber.min'),
-    'snap.svg': path.join(__dirname, './node_modules/snapsvg/dist/snap.svg'),
+    'snap.svg': path.join(__dirname, './node_modules/snapsvg/dist/snap.svg-min'),
     'spectrum': path.join(__dirname, './node_modules/spectrum-colorpicker/spectrum'),
     'mousetrap': path.join(__dirname, './node_modules/mousetrap'),
 
@@ -170,12 +166,11 @@ var webpackShimConfig = {
     'backbone': path.join(__dirname, './node_modules/backbone/backbone'),
     'backbone.undo': path.join(__dirname, './node_modules/backbone-undo/Backbone.Undo'),
     'backform': path.join(__dirname, './pgadmin/static/vendor/backform/backform'),
-    'backgrid': path.join(__dirname, './node_modules/backgrid/lib/backgrid'),
+    'backgrid': path.join(__dirname, './pgadmin/static/vendor/backgrid/backgrid'),
     'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
     'bootstrap.toggle': path.join(__dirname, './node_modules/bootstrap4-toggle/js/bootstrap4-toggle'),
     'select2': path.join(__dirname, './node_modules/select2/dist/js/select2.full'),
     'backgrid.filter': path.join(__dirname, './node_modules/backgrid-filter/backgrid-filter'),
-    'backgrid.sizeable.columns': path.join(__dirname, './node_modules/backgrid-sizeable-columns/backgrid-sizeable-columns'),
     'backgrid.select.all': path.join(__dirname, './node_modules/backgrid-select-all/backgrid-select-all'),
     'pgadmin.alertifyjs': path.join(__dirname, './pgadmin/static/js/alertify.pgadmin.defaults'),
     'pgadmin.backform': path.join(__dirname, './pgadmin/static/js/backform.pgadmin'),
@@ -311,13 +306,36 @@ var webpackShimConfig = {
   isExternal: function(module) {
     var context = module.context;
     if (typeof context !== 'string') { return false; }
-    return context.indexOf('node_modules') !== -1;
+    return (context.indexOf('node_modules') !== -1 || context.indexOf('vendor') !== -1);
   },
   // Checks whether module is in pgLibs or not. Returns true if exists
   isPgAdminLib: function (module) {
     if (module.rawRequest === undefined) { return false; }
     return this.pgLibs.indexOf(module.rawRequest) !== -1;
   },
+  isBrowserNode: function(module) {
+    if (module.rawRequest === undefined) { return false; }
+    if(module.rawRequest.startsWith('pgadmin.node')) {
+      return true;
+    }
+    return false;
+  },
+  matchModules: function(module, match_modules) {
+    if (module.rawRequest === undefined) { return false; }
+    if(typeof match_modules === 'string') {
+      if(module.rawRequest.indexOf(match_modules) >= 0) {
+        return true;
+      }
+    } else {
+      for(let i=0; i<match_modules.length; i++) {
+        if(module.rawRequest.indexOf(match_modules[i]) >= 0) {
+          return true;
+        }
+      }
+    }
+    return false;
+  },
+
   /* These will be skipped when webpack picks css/scss files recursively to bundle */
   css_bundle_skip: [
     './pgadmin/static',

web/webpack.test.config.js

@@ -21,7 +21,6 @@ module.exports = {
     new webpack.ProvidePlugin({
       jQuery: 'jquery',
       _: 'underscore',
-      'underscore.string': 'underscore.string',
       'window.jQuery': 'jquery',
       'moment': 'moment',
       'window.moment':'moment',
@@ -36,7 +35,7 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: [['@babel/preset-env', {'modules': 'commonjs'}]],
+            presets: [['@babel/preset-env', {'modules': 'commonjs', 'useBuiltIns': 'usage', 'corejs': 3}]],
             sourceMap: 'inline',
           },
         },
@@ -82,7 +81,7 @@ module.exports = {
       'bootstrap.toggle': path.join(__dirname, './node_modules/bootstrap4-toggle/js/bootstrap4-toggle'),
       'backbone': path.join(__dirname, './node_modules/backbone/backbone'),
       'backform': path.join(__dirname, './node_modules/backform/src/backform'),
-      'backgrid': path.join(__dirname, './node_modules/backgrid/lib/backgrid'),
+      'backgrid': path.join(__dirname, './pgadmin/static/vendor/backgrid/backgrid'),
       'backgrid.filter': path.join(__dirname, './node_modules/backgrid-filter/backgrid-filter'),
       'sources': sourcesDir + '/js',
       'translations': regressionDir + '/javascript/fake_translations',