Additional Bootstrap 4 fixes:

- Calendar control
- Query Tool's Sort/Filter drop down
- Backform hidden controls
- Debugger toolbar

web/package.json

@@ -66,7 +66,6 @@
     "css-loader": "0.14.0",
     "cssnano": "^3.10.0",
     "dropzone": "^5.1.1",
-    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
     "exports-loader": "~0.6.4",
     "flotr2": "git+https://github.com/EnterpriseDB/Flotr2.git",
     "font-awesome": "^4.7.0",
@@ -79,6 +78,7 @@
     "jquery-ui": "^1.12.1",
     "leaflet": "^1.3.3",
     "moment": "^2.20.1",
+    "moment-timezone": "^0.5.21",
     "mousetrap": "^1.6.1",
     "prop-types": "^15.5.10",
     "react": "^16.2.0",
@@ -92,6 +92,8 @@
     "spectrum-colorpicker": "^1.8.0",
     "sprintf-js": "^1.1.1",
     "tablesorter": "^2.30.6",
+    "tempusdominus-bootstrap-4": "^5.1.2",
+    "tempusdominus-core": "^5.0.3",
     "underscore": "^1.8.3",
     "underscore.string": "^3.3.4",
     "watchify": "~3.9.0",

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

@@ -132,7 +132,7 @@ define('pgadmin.browser', [
         isCloseable: false,
         isPrivate: true,
         elContainer: true,
-        content: '<div class="obj_properties"><div class="alert alert-info pg-panel-message">' + select_object_msg + '</div></div>',
+        content: '<div class="obj_properties container-fluid"><div class="alert alert-info pg-panel-message">' + select_object_msg + '</div></div>',
         events: panelEvents,
         onCreate: function(myPanel, $container) {
           $container.addClass('pg-no-overflow');

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

@@ -395,7 +395,7 @@ define('pgadmin.browser.node', [
               success: function() {
                 // Clear timeout and remove message
                 clearTimeout(timer);
-                $msgDiv.addClass('hidden');
+                $msgDiv.addClass('d-none');
 
                 // We got the latest attributes of the object. Render the view
                 // now.
@@ -479,7 +479,7 @@ define('pgadmin.browser.node', [
         isCloseable: true,
         isPrivate: true,
         elContainer: true,
-        content: '<div class="obj_properties"><div class="alert alert-info pg-panel-message">' + gettext('Please wait while we fetch information about the node from the server...') + '</div></div>',
+        content: '<div class="obj_properties container-fluid"><div class="alert alert-info pg-panel-message">' + gettext('Please wait while we fetch information about the node from the server...') + '</div></div>',
         onCreate: function(myPanel, $container) {
           $container.addClass('pg-no-overflow');
         },

web/pgadmin/static/css/style.css

@@ -2,7 +2,7 @@
 @import '~alertifyjs/build/css/themes/bootstrap.css';
 @import '~font-awesome/css/font-awesome.css';
 @import '~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
-@import '~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
+@import '~tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css';
 @import '~bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css';
 @import '~backgrid-select-all/backgrid-select-all.css';
 @import '~backgrid-filter/backgrid-filter.css';

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

@@ -28,6 +28,7 @@ define([
     setGroupClassName: 'set-group pg-el-xs-12',
     tabClassName: 'backform-tab pg-el-xs-12',
     setGroupContentClassName: 'fieldset-content pg-el-xs-12',
+    hiddenClassName: 'd-none',
   });
 
   Backform.controlMapper = {
@@ -2340,13 +2341,19 @@ define([
         label: '',
         options: {
           format: 'YYYY-MM-DD HH:mm:ss Z',
+          icons: {
+            clear: 'fa fa-trash',
+          },
+          buttons: {
             showClear: true,
-          showTodayButton: true,
+            showToday: true,
+          },
           toolbarPlacement: 'top',
           widgetPositioning: {
             horizontal: 'auto',
             vertical: 'bottom',
           },
+          keepOpen: false,
         },
         placeholder: 'YYYY-MM-DD HH:mm:ss Z',
         extraClasses: [],
@@ -2362,16 +2369,16 @@ define([
       },
       openPicker: function() {
         if (this.has_datepicker) {
-          this.$el.find('input').datetimepicker('show');
+          this.$el.find('input').datetimepicker('toggle');
         }
       },
       template: _.template([
         '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
         '<div class="input-group  <%=Backform.controlsClassName%>">',
-        ' <input type="text" class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
+        ' <input type="text" class="<%=Backform.controlClassName%> datetimepicker-input <%=extraClasses.join(\' \')%>" name="<%=name%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> data-toggle="datetimepicker"/>',
-        ' <span class="input-group-addon">',
+        ' <div class="input-group-append">',
-        '  <span class="fa fa-calendar"></span>',
+        '   <span class="input-group-text fa fa-calendar"></span>',
-        ' </span>',
+        ' </div>',
         '</div>',
         '<% if (helpMessage && helpMessage.length) { %>',
         ' <div class="<%=Backform.controlsClassName%>">',
@@ -2464,7 +2471,6 @@ define([
           );
         }
         this.updateInvalid();
-
         return this;
       },
       clearInvalid: function() {

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

@@ -1348,9 +1348,15 @@ define([
         },
         options = _.extend({
           format: 'YYYY-MM-DD HH:mm:ss Z',
+          icons: {
+            clear: 'fa fa-trash',
+          },
+          buttons: {
             showClear: true,
-          showTodayButton: true,
+            showToday: true,
+          },
           toolbarPlacement: 'top',
+          keepOpen: false,
         }, evalF(this.column.get('options')), {
           keyBinds: {
             'shift tab': function(widget) {

web/pgadmin/static/scss/_bootstrap.overrides.scss

@@ -250,3 +250,8 @@ td.switch-cell > div.bootstrap-switch {
   background-color: $input-disabled-bg !important;
   opacity: 1;
 }
+
+
+.btn-toolbar {
+  min-width: 100%;
+}

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

@@ -935,6 +935,7 @@ lgg-el-container[el=md] .pg-el-lg-8,
 }
 
 .pg-prop-btn-group {
+  min-width: 100%;
   left: 0px;
   right: 0px;
   padding: 2px;
@@ -1051,6 +1052,7 @@ lgg-el-container[el=md] .pg-el-lg-8,
 .obj_properties .backform-tab > .tab-content {
     padding: 0px;
     overflow-y: auto;
+    min-height: 100%;
     max-height: 100%;
 }
 

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

@@ -186,7 +186,7 @@
                         tabindex="0" disabled>
                     <i class="fa fa-filter" aria-hidden="true"></i>
                 </button>
-                <button id="btn-filter-dropdown" type="button" class="btn btn-default dropdown-toggle"
+                <button id="btn-filter-dropdown" type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         title=""
                         accesskey=""
@@ -195,10 +195,16 @@
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right">
                     <li>
-                        <a id="btn-filter-menu" href="#" tabindex="0">{{ _('Sort/Filter') }}</a>
+                        <a id="btn-filter-menu" class="dropdown-item" href="#" tabindex="0">{{ _('Sort/Filter') }}</a>
-                        <a id="btn-include-filter" href="#" tabindex="0">{{ _('Filter by Selection') }}</a>
+                    </li>
-                        <a id="btn-exclude-filter" href="#" tabindex="0">{{ _('Exclude by Selection') }}</a>
+                    <li>
-                        <a id="btn-remove-filter" href="#" tabindex="0">{{ _('Remove Sort/Filter') }}</a>
+                        <a id="btn-include-filter" class="dropdown-item" href="#" tabindex="0">{{ _('Filter by Selection') }}</a>
+                    </li>
+                    <li>
+                        <a id="btn-exclude-filter" class="dropdown-item" href="#" tabindex="0">{{ _('Exclude by Selection') }}</a>
+                    </li>
+                    <li>
+                        <a id="btn-remove-filter" class="dropdown-item" href="#" tabindex="0">{{ _('Remove Sort/Filter') }}</a>
                     </li>
                 </ul>
             </div>

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

@@ -36,8 +36,8 @@ try {
 </style>
 {% endif %}
 <div class="debugger_main_container" tabindex="0">
-    <nav class="navbar-inverse navbar-fixed-top">
+    <nav class="navbar navbar-expand-lg fixed-top">
-        <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-lighter border-gray-light" role="toolbar" aria-label="">
+        <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-lighter border-gray-light" role="toolbar" aria-label="">
             <div class="btn-group" role="group" aria-label="">
                 <button type="button" class="btn btn-default btn-step-into" id="btn-step-into"
                         title=""

web/webpack.config.js

@@ -48,6 +48,8 @@ const providePlugin = new webpack.ProvidePlugin({
   Backbone: 'backbone',
   Backgrid: 'backgrid',
   pgAdmin: 'pgadmin',
+  'moment': 'moment',
+  'window.moment':'moment',
 });
 
 // Minify and omptimize JS/CSS to reduce bundle size. It is used in production

web/webpack.shim.js

@@ -25,6 +25,7 @@ var webpackShimConfig = {
       'exports': 'jQuery.fn.datepicker',
     },
     'bootstrap.datetimepicker': {
+      'deps': ['moment'],
       'exports': 'jQuery.fn.datetimepicker',
     },
     'bootstrap.switch': {
@@ -161,7 +162,7 @@ var webpackShimConfig = {
     'backbone.undo': path.join(__dirname, './node_modules/backbone-undo/Backbone.Undo'),
     'backform': path.join(__dirname, './node_modules/backform/src/backform'),
     'backgrid': path.join(__dirname, './node_modules/backgrid/lib/backgrid'),
-    'bootstrap.datetimepicker': path.join(__dirname, './node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min'),
+    'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
     'bootstrap.switch': path.join(__dirname, './node_modules/bootstrap-switch/dist/js/bootstrap-switch'),
     'select2': path.join(__dirname, './node_modules/select2/dist/js/select2.full'),
     'backgrid.filter': path.join(__dirname, './node_modules/backgrid-filter/backgrid-filter'),

web/webpack.test.config.js

@@ -14,6 +14,8 @@ module.exports = {
       _: 'underscore',
       'underscore.string': 'underscore.string',
       'window.jQuery': 'jquery',
+      'moment': 'moment',
+      'window.moment':'moment',
     }),
   ],
 
@@ -65,7 +67,7 @@ module.exports = {
       'jquery.ui': path.join(__dirname, './node_modules/slickgrid/lib/jquery-ui-1.11.3'),
       'spectrum': path.join(__dirname, './node_modules/spectrum-colorpicker/spectrum'),
       'bignumber': path.join(__dirname, './node_modules/bignumber.js/bignumber'),
-      'bootstrap.datetimepicker': path.join(__dirname, './node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min'),
+      'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
       'bootstrap.switch': path.join(__dirname, './node_modules/bootstrap-switch/dist/js/bootstrap-switch'),
       'backbone': path.join(__dirname, './node_modules/backbone/backbone'),
       'backform': path.join(__dirname, './node_modules/backform/src/backform'),
@@ -78,6 +80,7 @@ module.exports = {
       'slickgrid.grid': nodeModulesDir + '/slickgrid/slick.grid',
       'bean': path.join(__dirname, './node_modules/flotr2/lib/bean'),
       'flotr2': path.join(__dirname, './node_modules/flotr2/flotr2.amd'),
+      'moment': path.join(__dirname, './node_modules/moment/moment'),
       'browser': path.resolve(__dirname, 'pgadmin/browser/static/js'),
       'pgadmin': sourcesDir + '/js/pgadmin',
       'pgadmin.sqlfoldcode': sourcesDir + '/js/codemirror/addon/fold/pgadmin-sqlfoldcode',

web/yarn.lock

@@ -1412,11 +1412,7 @@ bootstrap-switch@3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/bootstrap-switch/-/bootstrap-switch-3.3.4.tgz#70e0aeb2a877c0dc766991de108e2170fc29a2ff"
 
-bootstrap@^3.3:
+bootstrap@>=4.1.2, bootstrap@^4.1.3:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
-
-bootstrap@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
 
@@ -3156,15 +3152,6 @@ enzyme@^3.3.0:
     raf "^3.4.0"
     rst-selector-parser "^2.2.3"
 
-eonasdan-bootstrap-datetimepicker@^4.17.47:
-  version "4.17.47"
-  resolved "https://registry.yarnpkg.com/eonasdan-bootstrap-datetimepicker/-/eonasdan-bootstrap-datetimepicker-4.17.47.tgz#7a49970044065276e7965efd16f822735219e735"
-  dependencies:
-    bootstrap "^3.3"
-    jquery "^1.8.3 || ^2.0 || ^3.0"
-    moment "^2.10"
-    moment-timezone "^0.4.0"
-
 errno@^0.1.3:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -5343,7 +5330,7 @@ jquery-ui@>=1.8.0, jquery-ui@^1.12.1:
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.12.1.tgz#bcb4045c8dd0539c134bc1488cdd3e768a7a9e51"
 
-jquery@3.3.1, jquery@>=1.2.6, "jquery@>=1.7.1 <4.0.0", jquery@>=1.8.0, "jquery@^1.8.3 || ^2.0 || ^3.0", jquery@^3.3.1:
+jquery@3.3.1, jquery@>=1.2.6, "jquery@>=1.7.1 <4.0.0", jquery@>=1.8.0, jquery@^3.0, jquery@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
 
@@ -6248,10 +6235,20 @@ moment-timezone@^0.4.0:
   dependencies:
     moment ">= 2.6.0"
 
-"moment@>= 2.6.0", moment@^2.10, moment@^2.20.1:
+moment-timezone@^0.5.11, moment-timezone@^0.5.21:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.21.tgz#3cba247d84492174dbf71de2a9848fa13207b845"
+  dependencies:
+    moment ">= 2.9.0"
+
+"moment@>= 2.6.0", moment@^2.20.1:
   version "2.22.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.1.tgz#529a2e9bf973f259c9643d237fda84de3a26e8ad"
 
+"moment@>= 2.9.0", moment@^2.22.2:
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+
 mousetrap@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"
@@ -7132,7 +7129,7 @@ pngquant-bin@^4.0.0:
     execa "^0.10.0"
     logalot "^2.0.0"
 
-popper.js@^1.14.4:
+popper.js@^1.14.3, popper.js@^1.14.4:
   version "1.14.4"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
 
@@ -8880,6 +8877,24 @@ tempfile@^2.0.0:
     temp-dir "^1.0.0"
     uuid "^3.0.1"
 
+tempusdominus-bootstrap-4@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/tempusdominus-bootstrap-4/-/tempusdominus-bootstrap-4-5.1.2.tgz#3c9906ca6e5d563faa0b81b2fdc6aa79cad9c0be"
+  dependencies:
+    bootstrap ">=4.1.2"
+    jquery "^3.0"
+    moment "^2.22.2"
+    moment-timezone "^0.5.11"
+    popper.js "^1.14.3"
+
+tempusdominus-core@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/tempusdominus-core/-/tempusdominus-core-5.0.3.tgz#808642e47a83f45d7ef18c1597fd7b1d413d69e5"
+  dependencies:
+    jquery "^3.0"
+    moment "^2.22.2"
+    moment-timezone "^0.4.0"
+
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"