Clean up the unwanted extended versions of Backform Switch controls.

The Bootstrap Switch Control was extended only for alignment in most
places. IIntroduce a configurable option to set the necessary class
on the main div and also remove the extra extended controls.

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

@@ -17,25 +17,6 @@ define('pgadmin.node.trigger', [
   gettext, url_for, $, _, S, pgAdmin, pgBrowser, Backform, alertify,
   SchemaChildTreeNode
 ) {
-  Backform.CustomSwitchControl = Backform.SwitchControl.extend({
-    defaults: {
-      label: '',
-      options: {
-        onText: gettext('Yes'),
-        offText: gettext('No'),
-        onColor: 'success',
-        offColor: 'primary',
-        size: 'mini',
-        width: null,
-        height: null,
-      },
-      controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
-      controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
-      extraClasses: [],
-      helpMessage: null,
-    },
-    className: 'pgadmin-control-group form-group col-6 row',
-  });
 
   if (!pgBrowser.Nodes['coll-trigger']) {
     pgAdmin.Browser.Nodes['coll-trigger'] =
@@ -396,7 +377,9 @@ define('pgadmin.node.trigger', [
             id: 'evnt_insert', label: gettext('INSERT'),
             type: 'switch', mode: ['create','edit', 'properties'],
             group: gettext('Events'),
-            control: Backform.CustomSwitchControl,
+            extraToggleClasses: 'pg-el-sm-6',
+            controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+            controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
             disabled: function(m) {
               var evn_insert = m.get('evnt_insert');
               if (!_.isUndefined(evn_insert) && m.node_info['server']['server_type'] == 'ppas')
@@ -407,7 +390,9 @@ define('pgadmin.node.trigger', [
             id: 'evnt_update', label: gettext('UPDATE'),
             type: 'switch', mode: ['create','edit', 'properties'],
             group: gettext('Events'),
-            control: Backform.CustomSwitchControl,
+            extraToggleClasses: 'pg-el-sm-6',
+            controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+            controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
             disabled: function(m) {
               var evn_update = m.get('evnt_update');
               if (!_.isUndefined(evn_update) && m.node_info['server']['server_type'] == 'ppas')
@@ -418,7 +403,9 @@ define('pgadmin.node.trigger', [
             id: 'evnt_delete', label: gettext('DELETE'),
             type: 'switch', mode: ['create','edit', 'properties'],
             group: gettext('Events'),
-            control: Backform.CustomSwitchControl,
+            extraToggleClasses: 'pg-el-sm-6',
+            controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+            controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
             disabled: function(m) {
               var evn_delete = m.get('evnt_delete');
               if (!_.isUndefined(evn_delete) && m.node_info['server']['server_type'] == 'ppas')
@@ -428,7 +415,9 @@ define('pgadmin.node.trigger', [
           },{
             id: 'evnt_truncate', label: gettext('TRUNCATE'),
             type: 'switch', group: gettext('Events'),
-            control: Backform.CustomSwitchControl,
+            extraToggleClasses: 'pg-el-sm-6',
+            controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+            controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
             disabled: function(m) {
               var is_constraint_trigger = m.get('is_constraint_trigger'),
                 is_row_trigger = m.get('is_row_trigger'),

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

@@ -137,7 +137,8 @@ define('pgadmin.node.pga_jobstep', [
           id: 'jstname', label: gettext('Name'), type: 'text',
           disabled: false, cellHeaderClasses: 'width_percent_60',
         },{
-          id: 'jstenabled', label: gettext('Enabled?'), type: 'switch',
+          id: 'jstenabled', label: gettext('Enabled?'),
+          type: 'switch',
           disabled: function() { return false; },
         },{
           id: 'jstkind', label: gettext('Kind'), type: 'switch',

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

@@ -70,32 +70,6 @@ define('pgadmin.node.role', [
       },
     });
 
-  var switchOptions = {
-    'onText': gettext('Yes'), 'offText': gettext('No'),
-    'size': 'mini', onColor: 'success',
-    offColor: 'primary',
-  };
-
-  var RoleCustomSwitchControl = Backform.SwitchControl.extend({
-    defaults: {
-      label: '',
-      options: {
-        onText: gettext('Yes'),
-        offText: gettext('No'),
-        onColor: 'success',
-        offColor: 'primary',
-        size: 'mini',
-        width: null,
-        height: null,
-      },
-      controlLabelClassName: 'control-label pg-el-sm-4 pg-el-12',
-      controlsClassName: 'pgadmin-controls pg-el-sm-8 pg-el-12',
-      extraClasses: [],
-      helpMessage: null,
-    },
-    className: 'pgadmin-control-group form-group pg-el-12 row',
-  });
-
   var RoleMembersControl = Backform.Control.extend({
     defaults: _.defaults(
       {extraClasses: ['col-12 col-sm-12 col-md-12']},
@@ -439,13 +413,21 @@ define('pgadmin.node.role', [
           label: gettext('Connection limit'), cell: 'integer', min : -1,
           mode: ['properties', 'edit', 'create'], disabled: 'readonly',
         },{
-          id: 'rolcanlogin', label: gettext('Can login?'), type: 'switch',
-          group: gettext('Privileges'), options: switchOptions,
-          disabled: 'readonly', control: RoleCustomSwitchControl,
+          id: 'rolcanlogin', label: gettext('Can login?'),
+          type: 'switch',
+          options: {'onText': gettext('Yes'), 'offText': gettext('No')},
+          controlLabelClassName: 'control-label pg-el-sm-4 pg-el-12',
+          controlsClassName: 'pgadmin-controls pg-el-sm-8 pg-el-12',
+          group: gettext('Privileges'),
+          disabled: 'readonly',
         },{
-          id: 'rolsuper', label: gettext('Superuser'), type: 'switch',
-          group: gettext('Privileges'), options: switchOptions,
-          control: RoleCustomSwitchControl.extend({
+          id: 'rolsuper', label: gettext('Superuser'),
+          type: 'switch',
+          options: {'onText': gettext('Yes'), 'offText': gettext('No')},
+          controlLabelClassName: 'control-label pg-el-sm-4 pg-el-12',
+          controlsClassName: 'pgadmin-controls pg-el-sm-8 pg-el-12',
+          group: gettext('Privileges'),
+          control: Backform.SwitchControl.extend({
             onChange: function() {
               Backform.SwitchControl.prototype.onChange.apply(this, arguments);
 
@@ -457,35 +439,51 @@ define('pgadmin.node.role', [
           disabled: 'readonly',
         },{
           id: 'rolcreaterole', label: gettext('Create roles?'),
-          group: gettext('Privileges'), type: 'switch',
-          options: switchOptions, disabled: 'readonly',
-          control: RoleCustomSwitchControl,
+          group: gettext('Privileges'),
+          type: 'switch',
+          options: {'onText': gettext('Yes'), 'offText': gettext('No')},
+          controlLabelClassName: 'control-label pg-el-sm-4 pg-el-12',
+          controlsClassName: 'pgadmin-controls pg-el-sm-8 pg-el-12',
+          disabled: 'readonly',
         },{
           id: 'description', label: gettext('Comments'), type: 'multiline',
           group: null, mode: ['properties', 'edit', 'create'],
-          options: switchOptions, disabled: 'readonly',
+          disabled: 'readonly',
         },{
           id: 'rolcreatedb', label: gettext('Create databases?'),
-          group: gettext('Privileges'), type: 'switch',
-          options: switchOptions, disabled: 'readonly',
-          control: RoleCustomSwitchControl,
+          group: gettext('Privileges'),
+          type: 'switch',
+          options: {'onText': gettext('Yes'), 'offText': gettext('No')},
+          controlLabelClassName: 'control-label pg-el-sm-4 pg-el-12',
+          controlsClassName: 'pgadmin-controls pg-el-sm-8 pg-el-12',
+          disabled: 'readonly',
         },{
           id: 'rolcatupdate', label: gettext('Update catalog?'),
-          type: 'switch', max_version: 90400, options: switchOptions,
-          control: RoleCustomSwitchControl,
+          type: 'switch',
+          options: {'onText': gettext('Yes'), 'offText': gettext('No')},
+          controlLabelClassName: 'control-label pg-el-sm-4 pg-el-12',
+          controlsClassName: 'pgadmin-controls pg-el-sm-8 pg-el-12',
+          max_version: 90400,
           group: gettext('Privileges'), disabled: function(m) {
             return (m.get('read_only') || (!m.get('rolsuper')));
           },
         },{
           id: 'rolinherit', group: gettext('Privileges'),
           label: gettext('Inherit rights from the parent roles?'),
-          type: 'switch', options: switchOptions, disabled: 'readonly',
-          control: RoleCustomSwitchControl,
+          type: 'switch',
+          options: {'onText': gettext('Yes'), 'offText': gettext('No')},
+          controlLabelClassName: 'control-label pg-el-sm-4 pg-el-12',
+          controlsClassName: 'pgadmin-controls pg-el-sm-8 pg-el-12',
+          disabled: 'readonly',
         },{
           id: 'rolreplication', group: gettext('Privileges'),
           label: gettext('Can initiate streaming replication and backups?'),
-          type: 'switch', min_version: 90100, options: switchOptions,
-          disabled: 'readonly', control: RoleCustomSwitchControl,
+          type: 'switch',
+          options: {'onText': gettext('Yes'), 'offText': gettext('No')},
+          controlLabelClassName: 'control-label pg-el-sm-4 pg-el-12',
+          controlsClassName: 'pgadmin-controls pg-el-sm-8 pg-el-12',
+          min_version: 90100,
+          disabled: 'readonly',
         },{
           id: 'rolmembership', label: gettext('Roles'),
           group: gettext('Membership'), type: 'collection',

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

@@ -439,10 +439,11 @@ define([
       controlsClassName: Backform.controlsClassName,
       extraClasses: [],
       helpMessage: null,
+      extraToggleClasses: null,
     },
     template: _.template([
       '<label class="<%=controlLabelClassName%>"><%=label%></label>',
-      '<div class="<%=controlsClassName%>">',
+      '<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">',
       '      <input tabindex="0" type="checkbox" data-style="quick" data-toggle="toggle"',
       '      data-size="<%=options.size%>" data-height="<%=options.height%>"  ',
       '      data-on="<%=options.onText%>" data-off="<%=options.offText%>" ',
@@ -513,6 +514,10 @@ define([
         $.fn.bootstrapToggle.defaults);
 
       this.$el.html(this.template(data)).addClass(field.name);
+
+      // Add Extra Toggle classes to render multiple toggles in a single row
+      if(!_.isNull(field.extraToggleClasses)) this.$el.addClass(field.extraToggleClasses);
+
       this.$input = this.$el.find('input[type=checkbox]').first();
       this.$input.bootstrapToggle();
       this.updateInvalid();

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

@@ -43,10 +43,6 @@ define([
      with schema.
   */
 
-  Backform.CustomSwitchControl = Backform.SwitchControl.extend({
-    className: 'pgadmin-control-group form-group pg-el-md-6 pg-el-12 row',
-  });
-
   //Backup Model (Server Node)
   var BackupModel = Backbone.Model.extend({
     idAttribute: 'id',
@@ -82,13 +78,13 @@ define([
       schema: [{
         id: 'verbose',
         label: gettext('Verbose messages'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
         disabled: false,
         group: gettext('Miscellaneous'),
       }, {
         id: 'dqoute',
         label: gettext('Force double quote on identifiers'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
         disabled: false,
         group: gettext('Miscellaneous'),
         controlLabelClassName: 'control-label pg-el-sm-6 pg-el-12',
@@ -243,7 +239,10 @@ define([
       schema: [{
         id: 'pre_data',
         label: gettext('Pre-data'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Sections'),
         deps: ['only_data', 'only_schema'],
         disabled: function(m) {
@@ -253,7 +252,10 @@ define([
       }, {
         id: 'data',
         label: gettext('Data'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Sections'),
         deps: ['only_data', 'only_schema'],
         disabled: function(m) {
@@ -263,7 +265,10 @@ define([
       }, {
         id: 'post_data',
         label: gettext('Post-data'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Sections'),
         deps: ['only_data', 'only_schema'],
         disabled: function(m) {
@@ -285,7 +290,10 @@ define([
       schema: [{
         id: 'only_data',
         label: gettext('Only data'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Type of objects'),
         deps: ['pre_data', 'data', 'post_data', 'only_schema'],
         disabled: function(m) {
@@ -297,7 +305,10 @@ define([
       }, {
         id: 'only_schema',
         label: gettext('Only schema'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Type of objects'),
         deps: ['pre_data', 'data', 'post_data', 'only_data'],
         disabled: function(m) {
@@ -309,7 +320,10 @@ define([
       }, {
         id: 'blobs',
         label: gettext('Blobs'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Type of objects'),
         visible: function(m) {
@@ -329,31 +343,46 @@ define([
       schema: [{
         id: 'dns_owner',
         label: gettext('Owner'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Do not save'),
       }, {
         id: 'dns_privilege',
         label: gettext('Privilege'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Do not save'),
       }, {
         id: 'dns_tablespace',
         label: gettext('Tablespace'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Do not save'),
       }, {
         id: 'dns_unlogged_tbl_data',
         label: gettext('Unlogged table data'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Do not save'),
       }, {
         id: 'no_comments',
         label: gettext('Comments'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Do not save'),
         visible: function() {
@@ -374,19 +403,28 @@ define([
       schema: [{
         id: 'use_column_inserts',
         label: gettext('Use Column Inserts'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Queries'),
       }, {
         id: 'use_insert_commands',
         label: gettext('Use Insert Commands'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Queries'),
       }, {
         id: 'include_create_database',
         label: gettext('Include CREATE DATABASE statement'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Queries'),
         visible: function(m) {
@@ -397,7 +435,10 @@ define([
       }, {
         id: 'include_drop_database',
         label: gettext('Include DROP DATABASE statement'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Queries'),
         deps: ['only_data'],
         disabled: function(m) {
@@ -410,7 +451,10 @@ define([
       }, {
         id: 'load_via_partition_root',
         label: gettext('Load Via Partition Root'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Queries'),
         visible: function(m) {
@@ -434,7 +478,10 @@ define([
       schema: [{
         id: 'disable_trigger',
         label: gettext('Trigger'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Disable'),
         deps: ['only_data'],
         disabled: function(m) {
@@ -443,7 +490,10 @@ define([
       }, {
         id: 'disable_quoting',
         label: gettext('$ quoting'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Disable'),
       }],
@@ -456,7 +506,10 @@ define([
       schema: [{
         id: 'with_oids',
         label: gettext('With OID(s)'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         deps: ['use_column_inserts', 'use_insert_commands'],
         group: gettext('Miscellaneous'),
         disabled: function(m) {
@@ -469,19 +522,28 @@ define([
       }, {
         id: 'verbose',
         label: gettext('Verbose messages'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Miscellaneous'),
       }, {
         id: 'dqoute',
         label: gettext('Force double quote on identifiers'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Miscellaneous'),
       }, {
         id: 'use_set_session_auth',
         label: gettext('Use SET SESSION AUTHORIZATION'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Miscellaneous'),
       }],

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

@@ -29,10 +29,6 @@ define([
   if (pgAdmin.Tools.maintenance)
     return pgAdmin.Tools.maintenance;
 
-  Backform.CustomSwitchControl = Backform.SwitchControl.extend({
-    className: 'pgadmin-control-group form-group pg-el-md-6 pg-el-12 row',
-  });
-
   // Main model for Maintenance functionality
   var MaintenanceModel = Backbone.Model.extend({
     defaults: {
@@ -103,21 +99,30 @@ define([
         id: 'vacuum_full',
         group: gettext('Vacuum'),
         disabled: 'isDisabled',
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-4',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         label: gettext('FULL'),
         deps: ['op'],
       }, {
         id: 'vacuum_freeze',
         deps: ['op'],
         disabled: 'isDisabled',
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-4',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         label: gettext('FREEZE'),
         group: gettext('Vacuum'),
       }, {
         id: 'vacuum_analyze',
         deps: ['op'],
         disabled: 'isDisabled',
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-4',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         label: gettext('ANALYZE'),
         group: gettext('Vacuum'),
       }],
@@ -126,7 +131,7 @@ define([
       id: 'verbose',
       group: gettext('Options'),
       deps: ['op'],
-      control: Backform.CustomSwitchControl,
+      type: 'switch',
       label: gettext('Verbose Messages'),
       disabled: 'isDisabled',
     },

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

@@ -24,10 +24,6 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
     return pgBrowser.Restore;
   }
 
-  Backform.CustomSwitchControl = Backform.SwitchControl.extend({
-    className: 'pgadmin-control-group form-group pg-el-md-6 row',
-  });
-
   //Restore Model (Objects like Database/Schema/Table)
   var RestoreObjectModel = Backbone.Model.extend({
     idAttribute: 'id',
@@ -146,7 +142,10 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       schema: [{
         id: 'pre_data',
         label: gettext('Pre-data'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Sections'),
         deps: ['only_data', 'only_schema'],
         disabled: function(m) {
@@ -158,7 +157,10 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       }, {
         id: 'data',
         label: gettext('Data'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Sections'),
         deps: ['only_data', 'only_schema'],
         disabled: function(m) {
@@ -170,7 +172,10 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       }, {
         id: 'post_data',
         label: gettext('Post-data'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Sections'),
         deps: ['only_data', 'only_schema'],
         disabled: function(m) {
@@ -189,7 +194,10 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       schema: [{
         id: 'only_data',
         label: gettext('Only data'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Type of objects'),
         deps: ['pre_data', 'data', 'post_data', 'only_schema'],
         disabled: function(m) {
@@ -203,7 +211,10 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       }, {
         id: 'only_schema',
         label: gettext('Only schema'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Type of objects'),
         deps: ['pre_data', 'data', 'post_data', 'only_data'],
         disabled: function(m) {
@@ -224,25 +235,37 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       schema: [{
         id: 'dns_owner',
         label: gettext('Owner'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Do not save'),
       }, {
         id: 'dns_privilege',
         label: gettext('Privilege'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Do not save'),
       }, {
         id: 'dns_tablespace',
         label: gettext('Tablespace'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Do not save'),
       }, {
         id: 'no_comments',
         label: gettext('Comments'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Do not save'),
         visible: function() {
@@ -263,13 +286,19 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       schema: [{
         id: 'include_create_database',
         label: gettext('Include CREATE DATABASE statement'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Queries'),
       }, {
         id: 'clean',
         label: gettext('Clean before restore'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Queries'),
         disabled: function() {
           return this.node.type === 'function' ||
@@ -278,7 +307,10 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       }, {
         id: 'single_transaction',
         label: gettext('Single transaction'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Queries'),
       }],
@@ -291,12 +323,18 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       schema: [{
         id: 'disable_trigger',
         label: gettext('Trigger'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         group: gettext('Disable'),
       }, {
         id: 'no_data_fail_table',
         label: gettext('No data for Failed Tables'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Disable'),
       }],
@@ -309,19 +347,28 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       schema: [{
         id: 'verbose',
         label: gettext('Verbose messages'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Miscellaneous / Behavior'),
       }, {
         id: 'use_set_session_auth',
         label: gettext('Use SET SESSION AUTHORIZATION'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Miscellaneous / Behavior'),
       }, {
         id: 'exit_on_error',
         label: gettext('Exit on error'),
-        control: Backform.CustomSwitchControl,
+        type: 'switch',
+        extraToggleClasses: 'pg-el-sm-6',
+        controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
         disabled: false,
         group: gettext('Miscellaneous / Behavior'),
       }],