diff --git a/web/pgadmin/static/js/sqleditor/filter_dialog.js b/web/pgadmin/static/js/sqleditor/filter_dialog.js
index 0ba9e357a..8a48c867a 100644
--- a/web/pgadmin/static/js/sqleditor/filter_dialog.js
+++ b/web/pgadmin/static/js/sqleditor/filter_dialog.js
@@ -1,243 +1,241 @@
-define([
-  'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'underscore.string',
-  'pgadmin.alertifyjs', 'sources/pgadmin', 'backbone',
-  'pgadmin.backgrid', 'pgadmin.backform', 'axios',
-  'sources/sqleditor/query_tool_actions',
-  'sources/sqleditor/filter_dialog_model',
-  //'pgadmin.browser.node.ui',
-], function(
-  gettext, url_for, $, _, S, Alertify, pgAdmin, Backbone,
-  Backgrid, Backform, axios, queryToolActions, filterDialogModel
-) {
+import gettext from 'sources/gettext';
+import url_for from 'sources/url_for';
+import $ from 'jquery';
+import Alertify from 'pgadmin.alertifyjs';
+import pgAdmin from 'sources/pgadmin';
+import Backform from 'pgadmin.backform';
+import axios from 'axios';
+import queryToolActions from 'sources/sqleditor/query_tool_actions';
+import filterDialogModel from 'sources/sqleditor/filter_dialog_model';
 
-  let FilterDialog = {
-    'dialog': function(handler) {
-      let title = gettext('Sort/Filter options');
-      axios.get(
-        url_for('sqleditor.get_filter_data', {
-          'trans_id': handler.transId,
-        }),
-        { headers: {'Cache-Control' : 'no-cache'} }
-      ).then(function (res) {
-        let response = res.data.data.result;
+let FilterDialog = {
+  'dialog': function(handler) {
+    let title = gettext('Sort/Filter options');
+    axios.get(
+      url_for('sqleditor.get_filter_data', {
+        'trans_id': handler.transId,
+      }),
+      { headers: {'Cache-Control' : 'no-cache'} }
+    ).then(function (res) {
+      let response = res.data.data.result;
 
-        // Check the alertify dialog already loaded then delete it to clear
-        // the cache
-        if (Alertify.filterDialog) {
-          delete Alertify.filterDialog;
-        }
+      // Check the alertify dialog already loaded then delete it to clear
+      // the cache
+      if (Alertify.filterDialog) {
+        delete Alertify.filterDialog;
+      }
 
-        // Create Dialog
-        Alertify.dialog('filterDialog', function factory() {
-          let $container = $('<div class=\'data_sorting_dialog\'></div>');
-          return {
-            main: function() {
-              this.set('title', gettext('Sort/Filter options'));
-            },
-            build: function() {
-              this.elements.content.appendChild($container.get(0));
-              Alertify.pgDialogBuild.apply(this);
-            },
-            setup: function() {
-              return {
-                buttons: [{
-                  text: '',
-                  key: 112,
-                  className: 'btn btn-default pull-left fa fa-lg fa-question',
-                  attrs: {
-                    name: 'dialog_help',
-                    type: 'button',
-                    label: gettext('Help'),
-                    url: url_for('help.static', {
-                      'filename': 'editgrid.html',
-                    }),
-                  },
-                }, {
-                  text: gettext('Ok'),
-                  className: 'btn btn-primary fa fa-lg fa-save pg-alertify-button',
-                  'data-btn-name': 'ok',
-                }, {
-                  text: gettext('Cancel'),
-                  key: 27,
-                  className: 'btn btn-danger fa fa-lg fa-times pg-alertify-button',
-                  'data-btn-name': 'cancel',
-                }],
-                // Set options for dialog
-                options: {
-                  title: title,
-                  //disable both padding and overflow control.
-                  padding: !1,
-                  overflow: !1,
-                  model: 0,
-                  resizable: true,
-                  maximizable: true,
-                  pinnable: false,
-                  closableByDimmer: false,
-                  modal: false,
-                  autoReset: false,
+      // Create Dialog
+      Alertify.dialog('filterDialog', function factory() {
+        let $container = $('<div class=\'data_sorting_dialog\'></div>');
+        return {
+          main: function() {
+            this.set('title', gettext('Sort/Filter options'));
+          },
+          build: function() {
+            this.elements.content.appendChild($container.get(0));
+            Alertify.pgDialogBuild.apply(this);
+          },
+          setup: function() {
+            return {
+              buttons: [{
+                text: '',
+                key: 112,
+                className: 'btn btn-default pull-left fa fa-lg fa-question',
+                attrs: {
+                  name: 'dialog_help',
+                  type: 'button',
+                  label: gettext('Help'),
+                  url: url_for('help.static', {
+                    'filename': 'editgrid.html',
+                  }),
                 },
-              };
-            },
-            hooks: {
-              // triggered when the dialog is closed
-              onclose: function() {
-                if (this.view) {
-                  this.filterCollectionModel.stopSession();
-                  this.view.model.stopSession();
-                  this.view.remove({
-                    data: true,
-                    internal: true,
-                    silent: true,
-                  });
-                }
+              }, {
+                text: gettext('Ok'),
+                className: 'btn btn-primary fa fa-lg fa-save pg-alertify-button',
+                'data-btn-name': 'ok',
+              }, {
+                text: gettext('Cancel'),
+                key: 27,
+                className: 'btn btn-danger fa fa-lg fa-times pg-alertify-button',
+                'data-btn-name': 'cancel',
+              }],
+              // Set options for dialog
+              options: {
+                title: title,
+                //disable both padding and overflow control.
+                padding: !1,
+                overflow: !1,
+                model: 0,
+                resizable: true,
+                maximizable: true,
+                pinnable: false,
+                closableByDimmer: false,
+                modal: false,
+                autoReset: false,
               },
+            };
+          },
+          hooks: {
+            // triggered when the dialog is closed
+            onclose: function() {
+              if (this.view) {
+                this.filterCollectionModel.stopSession();
+                this.view.model.stopSession();
+                this.view.remove({
+                  data: true,
+                  internal: true,
+                  silent: true,
+                });
+              }
             },
-            prepare: function() {
-              let self = this;
-              $container.html('');
-              // Disable Ok button
-              this.__internal.buttons[1].element.disabled = true;
+          },
+          prepare: function() {
+            let self = this;
+            $container.html('');
+            // Disable Ok button
+            this.__internal.buttons[1].element.disabled = true;
 
-              // Status bar
-              this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 hide\'>' +
-                '  <div class=\'media error-in-footer bg-red-1 border-red-2 font-red-3 text-14\'>' +
-                '    <div class=\'media-body media-middle\'>' +
-                '      <div class=\'alert-icon error-icon\'>' +
-                '        <i class=\'fa fa-exclamation-triangle\' aria-hidden=\'true\'></i>' +
-                '      </div>' +
-                '      <div class=\'alert-text\'>' +
-                '      </div>' +
-                '    </div>' +
-                '  </div>' +
-                '</div>', {
-                  text: '',
-                }).appendTo($container);
+            // Status bar
+            this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 hide\'>' +
+              '  <div class=\'media error-in-footer bg-red-1 border-red-2 font-red-3 text-14\'>' +
+              '    <div class=\'media-body media-middle\'>' +
+              '      <div class=\'alert-icon error-icon\'>' +
+              '        <i class=\'fa fa-exclamation-triangle\' aria-hidden=\'true\'></i>' +
+              '      </div>' +
+              '      <div class=\'alert-text\'>' +
+              '      </div>' +
+              '    </div>' +
+              '  </div>' +
+              '</div>', {
+                text: '',
+              }).appendTo($container);
 
-              // To show progress on filter Saving/Updating on AJAX
-              this.showFilterProgress = $(
-                '<div id="show_filter_progress" class="wcLoadingIconContainer busy-fetching hidden">' +
-                '<div class="wcLoadingBackground"></div>' +
-                '<span class="wcLoadingIcon fa fa-spinner fa-pulse"></span>' +
-                '<span class="busy-text wcLoadingLabel">' + gettext('Loading data...') + '</span>' +
-                '</div>').appendTo($container);
+            // To show progress on filter Saving/Updating on AJAX
+            this.showFilterProgress = $(
+              '<div id="show_filter_progress" class="wcLoadingIconContainer busy-fetching hidden">' +
+              '<div class="wcLoadingBackground"></div>' +
+              '<span class="wcLoadingIcon fa fa-spinner fa-pulse"></span>' +
+              '<span class="busy-text wcLoadingLabel">' + gettext('Loading data...') + '</span>' +
+              '</div>').appendTo($container);
 
+            $(
+              self.showFilterProgress[0]
+            ).removeClass('hidden');
+
+            self.filterCollectionModel = filterDialogModel(response);
+
+            let fields = Backform.generateViewSchema(
+                null, self.filterCollectionModel, 'create', null, null, true
+            );
+
+            let view = this.view = new Backform.Dialog({
+              el: '<div></div>',
+              model: self.filterCollectionModel,
+              schema: fields,
+            });
+
+            $(this.elements.body.childNodes[0]).addClass(
+              'alertify_tools_dialog_properties obj_properties'
+            );
+
+            $container.append(view.render().$el);
+
+            // Enable/disable save button and show/hide statusbar based on session
+            view.listenTo(view.model, 'pgadmin-session:start', function() {
+              view.listenTo(view.model, 'pgadmin-session:invalid', function(msg) {
+                self.statusBar.removeClass('hide');
+                $(self.statusBar.find('.alert-text')).html(msg);
+                // Disable Okay button
+                self.__internal.buttons[1].element.disabled = true;
+              });
+
+              view.listenTo(view.model, 'pgadmin-session:valid', function() {
+                self.statusBar.addClass('hide');
+                $(self.statusBar.find('.alert-text')).html('');
+                // Enable Okay button
+                self.__internal.buttons[1].element.disabled = false;
+              });
+            });
+
+            view.listenTo(view.model, 'pgadmin-session:stop', function() {
+              view.stopListening(view.model, 'pgadmin-session:invalid');
+              view.stopListening(view.model, 'pgadmin-session:valid');
+            });
+
+            // Starts monitoring changes to model
+            view.model.startNewSession();
+
+            // Set data in collection
+            let viewDataSortingModel = view.model.get('data_sorting');
+            viewDataSortingModel.add(response['data_sorting']);
+
+            // Hide Progress ...
+            $(
+              self.showFilterProgress[0]
+            ).addClass('hidden');
+
+          },
+          // Callback functions when click on the buttons of the Alertify dialogs
+          callback: function(e) {
+            let self = this;
+
+            if (e.button.element.name == 'dialog_help') {
+              e.cancel = true;
+              pgAdmin.Browser.showHelp(e.button.element.name, e.button.element.getAttribute('url'),
+                null, null, e.button.element.getAttribute('label'));
+              return;
+            } else if (e.button['data-btn-name'] === 'ok') {
+              e.cancel = true; // Do not close dialog
+
+              let filterCollectionModel = this.filterCollectionModel.toJSON();
+
+              // Show Progress ...
               $(
                 self.showFilterProgress[0]
               ).removeClass('hidden');
 
-              self.filterCollectionModel = filterDialogModel(response);
-
-              let fields = Backform.generateViewSchema(
-                  null, self.filterCollectionModel, 'create', null, null, true
-              );
-
-              let view = this.view = new Backform.Dialog({
-                el: '<div></div>',
-                model: self.filterCollectionModel,
-                schema: fields,
-              });
-
-              $(this.elements.body.childNodes[0]).addClass(
-                'alertify_tools_dialog_properties obj_properties'
-              );
-
-              $container.append(view.render().$el);
-
-              // Enable/disable save button and show/hide statusbar based on session
-              view.listenTo(view.model, 'pgadmin-session:start', function() {
-                view.listenTo(view.model, 'pgadmin-session:invalid', function(msg) {
-                  self.statusBar.removeClass('hide');
-                  $(self.statusBar.find('.alert-text')).html(msg);
-                  // Disable Okay button
-                  self.__internal.buttons[1].element.disabled = true;
-                });
-
-                view.listenTo(view.model, 'pgadmin-session:valid', function() {
-                  self.statusBar.addClass('hide');
-                  $(self.statusBar.find('.alert-text')).html('');
-                  // Enable Okay button
-                  self.__internal.buttons[1].element.disabled = false;
-                });
-              });
-
-              view.listenTo(view.model, 'pgadmin-session:stop', function() {
-                view.stopListening(view.model, 'pgadmin-session:invalid');
-                view.stopListening(view.model, 'pgadmin-session:valid');
-              });
-
-              // Starts monitoring changes to model
-              view.model.startNewSession();
-
-              // Set data in collection
-              let viewDataSortingModel = view.model.get('data_sorting');
-              viewDataSortingModel.add(response['data_sorting']);
-
-              // Hide Progress ...
-              $(
-                self.showFilterProgress[0]
-              ).addClass('hidden');
-
-            },
-            // Callback functions when click on the buttons of the Alertify dialogs
-            callback: function(e) {
-              let self = this;
-
-              if (e.button.element.name == 'dialog_help') {
-                e.cancel = true;
-                pgAdmin.Browser.showHelp(e.button.element.name, e.button.element.getAttribute('url'),
-                  null, null, e.button.element.getAttribute('label'));
-                return;
-              } else if (e.button['data-btn-name'] === 'ok') {
-                e.cancel = true; // Do not close dialog
-
-                let filterCollectionModel = this.filterCollectionModel.toJSON();
-
-                // Show Progress ...
+              axios.put(
+                url_for('sqleditor.set_filter_data', {
+                  'trans_id': handler.transId,
+                }),
+                filterCollectionModel
+              ).then(function () {
+                // Hide Progress ...
                 $(
                   self.showFilterProgress[0]
-                ).removeClass('hidden');
+                ).addClass('hidden');
+                setTimeout(
+                  function() {
+                    self.close(); // Close the dialog now
+                    Alertify.success(gettext('Filter updated successfully'));
+                    queryToolActions.executeQuery(handler);
+                  }, 10
+                );
 
-                axios.put(
-                  url_for('sqleditor.set_filter_data', {
-                    'trans_id': handler.transId,
-                  }),
-                  filterCollectionModel
-                ).then(function () {
-                  // Hide Progress ...
-                  $(
-                    self.showFilterProgress[0]
-                  ).addClass('hidden');
-                  setTimeout(
-                    function() {
-                      self.close(); // Close the dialog now
-                      Alertify.success(gettext('Filter updated successfully'));
-                      queryToolActions.executeQuery(handler);
-                    }, 10
-                  );
+              }).catch(function (error) {
+                // Hide Progress ...
+                $(
+                  self.showFilterProgress[0]
+                ).addClass('hidden');
+                handler.onExecuteHTTPError(error);
 
-                }).catch(function (error) {
-                  // Hide Progress ...
-                  $(
-                    self.showFilterProgress[0]
-                  ).addClass('hidden');
-                  handler.onExecuteHTTPError(error);
-
-                  setTimeout(
-                    function() {
-                      Alertify.error(error);
-                    }, 10
-                  );
-                });
-              } else {
-                self.close();
-              }
-            },
-          };
-        });
-
-        Alertify.filterDialog(title).resizeTo('65%', '60%');
+                setTimeout(
+                  function() {
+                    Alertify.error(error);
+                  }, 10
+                );
+              });
+            } else {
+              self.close();
+            }
+          },
+        };
       });
-    },
-  };
-  return FilterDialog;
-});
+
+      Alertify.filterDialog(title).resizeTo('65%', '60%');
+    });
+  },
+};
+
+module.exports = FilterDialog;
diff --git a/web/pgadmin/static/js/sqleditor/filter_dialog_model.js b/web/pgadmin/static/js/sqleditor/filter_dialog_model.js
index c3146a40a..e1b977ed1 100644
--- a/web/pgadmin/static/js/sqleditor/filter_dialog_model.js
+++ b/web/pgadmin/static/js/sqleditor/filter_dialog_model.js
@@ -1,133 +1,132 @@
-define([
-  'sources/gettext', 'underscore', 'sources/pgadmin',
-  'pgadmin.backform', 'pgadmin.backgrid',
-], function(
-  gettext, _, pgAdmin, Backform, Backgrid
-) {
+import gettext from 'sources/gettext';
+import _ from 'underscore';
+import pgAdmin from 'sources/pgadmin';
+import Backgrid from 'pgadmin.backgrid';
+import Backform from 'pgadmin.backform';
 
-  let initModel = function(response) {
+let initModel = function(response) {
 
-    let order_mapping = {
-      'asc': gettext('ASC'),
-      'desc': gettext('DESC'),
-    };
-
-    let DataSortingModel = pgAdmin.Browser.DataModel.extend({
-      idAttribute: 'name',
-      defaults: {
-        name: undefined,
-        order: 'asc',
-      },
-      schema: [{
-        id: 'name',
-        name: 'name',
-        label: gettext('Column'),
-        cell: 'select2',
-        editable: true,
-        cellHeaderClasses: 'width_percent_60',
-        headerCell: Backgrid.Extension.CustomHeaderCell,
-        disabled: false,
-        control: 'select2',
-        select2: {
-          allowClear: false,
-        },
-        options: function() {
-          return _.map(response.column_list, (obj) => {
-            return {
-              value: obj,
-              label: obj,
-            };
-          });
-        },
-      },
-      {
-        id: 'order',
-        name: 'order',
-        label: gettext('Order'),
-        control: 'select2',
-        cell: 'select2',
-        cellHeaderClasses: 'width_percent_40',
-        headerCell: Backgrid.Extension.CustomHeaderCell,
-        editable: true,
-        deps: ['type'],
-        select2: {
-          allowClear: false,
-        },
-        options: function() {
-          return _.map(order_mapping, (val, key) => {
-            return {
-              value: key,
-              label: val,
-            };
-          });
-        },
-      },
-      ],
-      validate: function() {
-        let msg = null;
-        this.errorModel.clear();
-        if (_.isUndefined(this.get('name')) ||
-          _.isNull(this.get('name')) ||
-          String(this.get('name')).replace(/^\s+|\s+$/g, '') == '') {
-          msg = gettext('Please select a column.');
-          this.errorModel.set('name', msg);
-          return msg;
-        } else if (_.isUndefined(this.get('order')) ||
-          _.isNull(this.get('order')) ||
-          String(this.get('order')).replace(/^\s+|\s+$/g, '') == '') {
-          msg = gettext('Please select the order.');
-          this.errorModel.set('order', msg);
-          return msg;
-        }
-        return null;
-      },
-    });
-
-    let FilterCollectionModel = pgAdmin.Browser.DataModel.extend({
-      idAttribute: 'sql',
-      defaults: {
-        sql: response.sql || null,
-      },
-      schema: [{
-        id: 'sql',
-        label: gettext('SQL Filter'),
-        cell: 'string',
-        type: 'text', mode: ['create'],
-        control: Backform.SqlFieldControl.extend({
-          render: function() {
-            let obj = Backform.SqlFieldControl.prototype.render.apply(this, arguments);
-            // We need to set focus on editor after the dialog renders
-            setTimeout(() => {
-              obj.sqlCtrl.focus();
-            }, 1000);
-            return obj;
-          },
-        }),
-        extraClasses:['custom_height_css_class'],
-      },{
-        id: 'data_sorting',
-        name: 'data_sorting',
-        label: gettext('Data Sorting'),
-        model: DataSortingModel,
-        editable: true,
-        type: 'collection',
-        mode: ['create'],
-        control: 'unique-col-collection',
-        uniqueCol: ['name'],
-        canAdd: true,
-        canEdit: false,
-        canDelete: true,
-        visible: true,
-        version_compatible: true,
-      }],
-      validate: function() {
-        return null;
-      },
-    });
-
-    let model = new FilterCollectionModel();
-    return model;
+  let order_mapping = {
+    'asc': gettext('ASC'),
+    'desc': gettext('DESC'),
   };
 
-  return initModel;
-});
+  let DataSortingModel = pgAdmin.Browser.DataModel.extend({
+    idAttribute: 'name',
+    defaults: {
+      name: undefined,
+      order: 'asc',
+    },
+    schema: [{
+      id: 'name',
+      name: 'name',
+      label: gettext('Column'),
+      cell: 'select2',
+      editable: true,
+      cellHeaderClasses: 'width_percent_60',
+      headerCell: Backgrid.Extension.CustomHeaderCell,
+      disabled: false,
+      control: 'select2',
+      select2: {
+        allowClear: false,
+      },
+      options: function() {
+        return _.map(response.column_list, (obj) => {
+          return {
+            value: obj,
+            label: obj,
+          };
+        });
+      },
+    },
+    {
+      id: 'order',
+      name: 'order',
+      label: gettext('Order'),
+      control: 'select2',
+      cell: 'select2',
+      cellHeaderClasses: 'width_percent_40',
+      headerCell: Backgrid.Extension.CustomHeaderCell,
+      editable: true,
+      deps: ['type'],
+      select2: {
+        allowClear: false,
+      },
+      options: function() {
+        return _.map(order_mapping, (val, key) => {
+          return {
+            value: key,
+            label: val,
+          };
+        });
+      },
+    },
+    ],
+    validate: function() {
+      let msg = null;
+      this.errorModel.clear();
+      if (_.isUndefined(this.get('name')) ||
+        _.isNull(this.get('name')) ||
+        String(this.get('name')).replace(/^\s+|\s+$/g, '') == '') {
+        msg = gettext('Please select a column.');
+        this.errorModel.set('name', msg);
+        return msg;
+      } else if (_.isUndefined(this.get('order')) ||
+        _.isNull(this.get('order')) ||
+        String(this.get('order')).replace(/^\s+|\s+$/g, '') == '') {
+        msg = gettext('Please select the order.');
+        this.errorModel.set('order', msg);
+        return msg;
+      }
+      return null;
+    },
+  });
+
+  let FilterCollectionModel = pgAdmin.Browser.DataModel.extend({
+    idAttribute: 'sql',
+    defaults: {
+      sql: response.sql || null,
+    },
+    schema: [{
+      id: 'sql',
+      label: gettext('SQL Filter'),
+      cell: 'string',
+      type: 'text', mode: ['create'],
+      control: Backform.SqlFieldControl.extend({
+        render: function() {
+          let obj = Backform.SqlFieldControl.prototype.render.apply(this, arguments);
+          // We need to set focus on editor after the dialog renders
+          setTimeout(() => {
+            obj.sqlCtrl.focus();
+          }, 1000);
+          return obj;
+        },
+      }),
+      extraClasses:['custom_height_css_class'],
+    },{
+      id: 'data_sorting',
+      name: 'data_sorting',
+      label: gettext('Data Sorting'),
+      model: DataSortingModel,
+      editable: true,
+      type: 'collection',
+      mode: ['create'],
+      control: 'unique-col-collection',
+      uniqueCol: ['name'],
+      canAdd: true,
+      canEdit: false,
+      canDelete: true,
+      visible: true,
+      version_compatible: true,
+    }],
+    validate: function() {
+      return null;
+    },
+  });
+
+  let model = new FilterCollectionModel();
+  return model;
+};
+
+
+module.exports = initModel;