Port Resource Group node to react. Fixes #6629

web/pgadmin/browser/server_groups/servers/resource_groups/static/js/resource_group.js

@@ -7,6 +7,8 @@
 //
 //////////////////////////////////////////////////////////////
 
+import ResourceGroupSchema from './resource_group.ui';
+
 define('pgadmin.node.resource_group', [
   'sources/gettext', 'sources/url_for', 'underscore', 'pgadmin.browser',
   'pgadmin.browser.collection',
@@ -75,73 +77,24 @@ define('pgadmin.node.resource_group', [
         ]);
       },
 
+      getSchema: ()=>{
+        return new ResourceGroupSchema();
+      },
+
       // Defining model for resource group node
       model: pgBrowser.Node.Model.extend({
         idAttribute: 'oid',
-        defaults: {
-          oid: undefined,
-          name: undefined,
-          is_sys_obj: undefined,
-          cpu_rate_limit: 0.0,
-          dirty_rate_limit: 0.0,
-        },
-
         // Defining schema for the resource group node
         schema: [{
-          id: 'oid', label: gettext('OID'), type: 'text',
-          editable: false, mode:['properties'],
-        },{
           id: 'name', label: gettext('Name'), cell: 'string',
           type: 'text',
-        },{
-          id: 'is_sys_obj', label: gettext('System resource group?'),
-          cell:'boolean', type: 'switch', mode: ['properties'],
-        },{
+        }, {
           id: 'cpu_rate_limit', label: gettext('CPU rate limit (percentage)'), cell: 'string',
           type: 'numeric', min:0, max:16777216,
-        },{
+        }, {
           id: 'dirty_rate_limit', label: gettext('Dirty rate limit (KB)'), cell: 'string',
           type: 'numeric', min:0, max:16777216,
         }],
-
-        /* validate function is used to validate the input given by
-         * the user. In case of error, message will be displayed on
-         * the GUI for the respective control.
-         */
-        validate: function() {
-          var msg,
-            name = this.get('name');
-
-          if (_.isUndefined(name) || _.isNull(name) ||
-            String(name).replace(/^\s+|\s+$/g, '') == '') {
-            msg = gettext('Name cannot be empty.');
-            this.errorModel.set('name', msg);
-            return msg;
-          } else {
-            this.errorModel.unset('name');
-          }
-
-          var cpu_rate_limit = this.get('cpu_rate_limit');
-          if (_.isUndefined(cpu_rate_limit) || _.isNull(cpu_rate_limit) ||
-            String(cpu_rate_limit).replace(/^\s+|\s+$/g, '') == '') {
-            msg = gettext('CPU rate limit cannot be empty.');
-            this.errorModel.set('cpu_rate_limit', msg);
-            return msg;
-          } else {
-            this.errorModel.unset('cpu_rate_limit');
-          }
-
-          var dirty_rate_limit = this.get('dirty_rate_limit');
-          if (_.isUndefined(dirty_rate_limit) || _.isNull(dirty_rate_limit) ||
-            String(dirty_rate_limit).replace(/^\s+|\s+$/g, '') == '') {
-            msg = gettext('Dirty rate limit cannot be empty.');
-            this.errorModel.set('dirty_rate_limit', msg);
-            return msg;
-          } else {
-            this.errorModel.unset('dirty_rate_limit');
-          }
-          return null;
-        },
       }),
     });
   }

web/pgadmin/browser/server_groups/servers/resource_groups/static/js/resource_group.ui.js

@@ -0,0 +1,72 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import gettext from 'sources/gettext';
+import BaseUISchema from 'sources/SchemaView/base_schema.ui';
+import { emptyValidator } from '../../../../../../static/js/validators';
+
+export default class ResourceGroupSchema extends BaseUISchema {
+  constructor(initValues) {
+    super({
+      oid: undefined,
+      name: undefined,
+      is_sys_obj: undefined,
+      cpu_rate_limit: 0.0,
+      dirty_rate_limit: 0.0,
+      ...initValues,
+    });
+  }
+
+  get idAttribute() {
+    return 'oid';
+  }
+
+  get baseFields() {
+    return [
+      {
+        id: 'oid', label: gettext('OID'), type: 'text',
+        editable: false, mode:['properties'],
+      }, {
+        id: 'name', label: gettext('Name'), cell: 'text',
+        type: 'text', noEmpty: true
+      }, {
+        id: 'is_sys_obj', label: gettext('System resource group?'),
+        type: 'switch', mode: ['properties'],
+      }, {
+        id: 'cpu_rate_limit', label: gettext('CPU rate limit (percentage)'),
+        type: 'numeric', min:0, max:16777216,
+      }, {
+        id: 'dirty_rate_limit', label: gettext('Dirty rate limit (KB)'),
+        type: 'numeric', min:0, max:16777216,
+      }
+    ];
+  }
+
+  validate(state, setError) {
+    let errmsg = null;
+
+    errmsg = emptyValidator('CPU rate limit', state.cpu_rate_limit);
+    if (errmsg) {
+      setError('cpu_rate_limit', errmsg);
+      return true;
+    } else {
+      setError('cpu_rate_limit', errmsg);
+    }
+
+    errmsg = emptyValidator('Dirty rate limit', state.dirty_rate_limit);
+    if (errmsg) {
+      setError('dirty_rate_limit', errmsg);
+      return true;
+    } else {
+      setError('dirty_rate_limit', errmsg);
+    }
+
+    return null;
+  }
+}

web/pgadmin/static/js/SchemaView/MappedControl.jsx

@@ -130,7 +130,7 @@ function MappedCellControlBase({cell, value, id, optionsLoaded, onCellChange, vi
     if(!isNaN(parseInt(value))) {
       value = parseInt(value);
     }
-    onChange && onChange(value);
+    onCellChange && onCellChange(value);
   }, []);
 
   const onNumChange = useCallback((e) => {
@@ -141,7 +141,7 @@ function MappedCellControlBase({cell, value, id, optionsLoaded, onCellChange, vi
     if(!isNaN(parseFloat(value))) {
       value = parseFloat(value);
     }
-    onChange && onChange(value);
+    onCellChange && onCellChange(value);
   }, []);
 
   /* Some grid cells are based on options selected in other cells.

web/regression/javascript/schema_ui_files/resource_group.ui.spec.js

@@ -0,0 +1,111 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import '../helper/enzyme.helper';
+import { createMount } from '@material-ui/core/test-utils';
+import pgAdmin from 'sources/pgadmin';
+import {messages} from '../fake_messages';
+import SchemaView from '../../../pgadmin/static/js/SchemaView';
+import ResourceGroupSchema from '../../../pgadmin/browser/server_groups/servers/resource_groups/static/js/resource_group.ui';
+
+describe('ResourceGroupSchema', ()=>{
+  let mount;
+  let schemaObj = new ResourceGroupSchema();
+  let getInitData = ()=>Promise.resolve({});
+
+  /* Use createMount so that material ui components gets the required context */
+  /* https://material-ui.com/guides/testing/#api */
+  beforeAll(()=>{
+    mount = createMount();
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  beforeEach(()=>{
+    jasmineEnzyme();
+    /* messages used by validators */
+    pgAdmin.Browser = pgAdmin.Browser || {};
+    pgAdmin.Browser.messages = pgAdmin.Browser.messages || messages;
+    pgAdmin.Browser.utils = pgAdmin.Browser.utils || {};
+  });
+
+  it('create', ()=>{
+    mount(<SchemaView
+      formType='dialog'
+      schema={schemaObj}
+      viewHelperProps={{
+        mode: 'create',
+      }}
+      onSave={()=>{}}
+      onClose={()=>{}}
+      onHelp={()=>{}}
+      onEdit={()=>{}}
+      onDataChange={()=>{}}
+      confirmOnCloseReset={false}
+      hasSQL={false}
+      disableSqlHelp={false}
+    />);
+  });
+
+  it('edit', ()=>{
+    mount(<SchemaView
+      formType='dialog'
+      schema={schemaObj}
+      getInitData={getInitData}
+      viewHelperProps={{
+        mode: 'edit',
+      }}
+      onSave={()=>{}}
+      onClose={()=>{}}
+      onHelp={()=>{}}
+      onEdit={()=>{}}
+      onDataChange={()=>{}}
+      confirmOnCloseReset={false}
+      hasSQL={false}
+      disableSqlHelp={false}
+    />);
+  });
+
+  it('properties', ()=>{
+    mount(<SchemaView
+      formType='tab'
+      schema={schemaObj}
+      getInitData={getInitData}
+      viewHelperProps={{
+        mode: 'properties',
+      }}
+      onHelp={()=>{}}
+      onEdit={()=>{}}
+    />);
+  });
+
+  it('validate', ()=>{
+    let state = {};
+    let setError = jasmine.createSpy('setError');
+
+    state.cpu_rate_limit = null;
+    schemaObj.validate(state, setError);
+    expect(setError).toHaveBeenCalledWith('cpu_rate_limit', '\'CPU rate limit\' cannot be empty.');
+
+    state.cpu_rate_limit = 1;
+    state.dirty_rate_limit = null;
+    schemaObj.validate(state, setError);
+    expect(setError).toHaveBeenCalledWith('dirty_rate_limit', '\'Dirty rate limit\' cannot be empty.');
+
+    state.cpu_rate_limit = 1;
+    state.dirty_rate_limit = 1;
+    schemaObj.validate(state, setError);
+    expect(setError).toHaveBeenCalledWith('dirty_rate_limit', null);
+  });
+});
+