Port Catalog Object node to react. Fixes #6569

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

@@ -7,6 +7,8 @@
 //
 //////////////////////////////////////////////////////////////
 
+import CatalogObjectSchema from './catalog_object.ui';
+
 define('pgadmin.node.catalog_object', [
   'sources/gettext', 'jquery', 'underscore', 'sources/pgadmin',
   'pgadmin.browser', 'pgadmin.browser.collection',
@@ -40,12 +42,15 @@ define('pgadmin.node.catalog_object', [
         this.initialized = true;
 
       },
+      getSchema: ()=>new CatalogObjectSchema(),
+      /* Few fields are kept since the properties tab for collection is not
+      yet migrated to new react schema. Once the properties for collection
+      is removed, remove this model */
       model: pgAdmin.Browser.Node.Model.extend({
         defaults: {
           name: undefined,
           namespaceowner: undefined,
           nspacl: undefined,
-          is_sys_obj: undefined,
           description: undefined,
         },
         schema: [{
@@ -57,15 +62,13 @@ define('pgadmin.node.catalog_object', [
         },{
           id: 'owner', label: gettext('Owner'), cell: 'string',
           type: 'text', readonly: true,
-        },{
-          id: 'is_sys_obj', label: gettext('System catalog object?'),
-          cell:'boolean', type: 'switch', mode: ['properties'],
         },{
           id: 'description', label: gettext('Comment'), cell: 'string',
           type: 'multiline' ,  readonly: true,
         },
         ],
       }),
+
     });
 
   }

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

@@ -0,0 +1,44 @@
+/////////////////////////////////////////////////////////////
+//
+// 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';
+
+export default class CatalogObjectSchema extends BaseUISchema {
+  constructor() {
+    super({
+      name: undefined,
+      is_sys_obj: undefined,
+      description: undefined
+    });
+  }
+
+  get baseFields() {
+    return [
+      {
+        id: 'name', label: gettext('Name'), cell: 'text',
+        editable: false, type: 'text', mode: ['properties', 'edit']
+      },
+      {
+        id: 'oid', label: gettext('OID'), cell: 'text',
+        editable: false, type: 'text', mode: ['properties', 'edit']
+      },
+      {
+        id: 'owner', label: gettext('Owner'),
+        editable: false, type: 'text', mode: ['properties', 'edit']
+      },{
+        id: 'is_sys_obj', label: gettext('System database?'),
+        cell: 'switch', type: 'switch', mode: ['properties'],
+      },{
+        id: 'description', label: gettext('Comment'),
+        editable: false, type: 'multiline', mode: ['properties', 'edit']
+      }
+    ];
+  }
+}

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

@@ -0,0 +1,54 @@
+/////////////////////////////////////////////////////////////
+//
+// 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 pgAdmin from 'sources/pgadmin';
+import {messages} from '../fake_messages';
+import { createMount } from '@material-ui/core/test-utils';
+import SchemaView from '../../../pgadmin/static/js/SchemaView';
+import CatalogObjectSchema from '../../../pgadmin/browser/server_groups/servers/databases/schemas/catalog_objects/static/js/catalog_object.ui';
+
+describe('CatalogObjectSchema', ()=>{
+  let mount;
+  let schemaObj = new CatalogObjectSchema();
+  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;
+  });
+
+  it('properties', ()=>{
+    mount(<SchemaView
+      formType='tab'
+      schema={schemaObj}
+      getInitData={getInitData}
+      viewHelperProps={{
+        mode: 'properties',
+      }}
+      onHelp={()=>{}}
+      onEdit={()=>{}}
+    />);
+
+  });
+});