Port FTS Dictionaries node to react. Fixes #6636

web/pgadmin/browser/server_groups/servers/databases/schemas/fts_dictionaries/static/js/fts_dictionary.js

@@ -7,6 +7,9 @@
 //
 //////////////////////////////////////////////////////////////
 
+import { getNodeAjaxOptions, getNodeListByName, getNodeListById} from '../../../../../../../static/js/node_ajax';
+import FTSDictionarySchema from './fts_dictionary.ui';
+
 define('pgadmin.node.fts_dictionary', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
   'sources/pgadmin', 'pgadmin.browser', 'pgadmin.backform',
@@ -17,45 +20,6 @@ define('pgadmin.node.fts_dictionary', [
   schemaChildTreeNode
 ) {
 
-  // Extend the browser's node model class to create a option/value pair
-  var OptionLabelModel = pgAdmin.Browser.Node.Model.extend({
-    idAttribute: 'option',
-    defaults: {
-      option: undefined,
-      value: undefined,
-    },
-    // Define the schema for the Options
-    schema: [
-      {
-        id: 'option', label: gettext('Option'), type:'text', group: null,
-        cellHeaderClasses: 'width_percent_50', editable: true,
-      },{
-        id: 'value', label: gettext('Value'), type: 'text', group:null,
-        cellHeaderClasses: 'width_percent_50', editable: true,
-      },
-    ],
-    validate: function() {
-      // Clear any existing errors.
-      this.errorModel.clear();
-
-      var msg;
-
-      if (_.isUndefined(this.get('option')) ||
-                String(this.get('option')).replace(/^\s+|\s+$/g, '') == '') {
-        msg = gettext('Option cannot be empty.');
-        this.errorModel.set('option',msg);
-        return msg;
-      }
-      if (_.isUndefined(this.get('value')) ||
-                String(this.get('value')).replace(/^\s+|\s+$/g, '') == '') {
-        msg = gettext('Value cannot be empty.');
-        this.errorModel.set('value',msg);
-        return msg;
-      }
-      return msg;
-    },
-  });
-
   // Extend the collection class for FTS Dictionary
   if (!pgBrowser.Nodes['coll-fts_dictionary']) {
     pgAdmin.Browser.Nodes['coll-fts_dictionary'] =
@@ -109,18 +73,25 @@ define('pgadmin.node.fts_dictionary', [
         }]);
       },
 
+      getSchema: function(treeNodeInfo, itemNodeData) {
+        return new FTSDictionarySchema(
+          {
+            role: ()=>getNodeListByName('role', treeNodeInfo, itemNodeData),
+            schema: ()=>getNodeListById(pgBrowser.Nodes['schema'], treeNodeInfo, itemNodeData),
+            fts_template: ()=>getNodeAjaxOptions('fetch_templates', this, treeNodeInfo, itemNodeData, {
+              cacheNode: 'fts_template'
+            })
+          },
+          {
+            owner: pgBrowser.serverInfo[treeNodeInfo.server._id].user.name,
+            schema: itemNodeData._id,
+          }
+        );
+      },
+
       // Defining backform model for FTS Dictionary node
       model: pgAdmin.Browser.Node.Model.extend({
         idAttribute: 'oid',
-        defaults: {
-          name: undefined,        // FTS Dictionary name
-          owner: undefined,       // FTS Dictionary owner
-          is_sys_obj: undefined,  // Is system object
-          description: undefined, // Comment on FTS Dictionary
-          schema: undefined,      // Schema name FTS dictionary belongs to
-          template: undefined,    // Template list for FTS dictionary node
-          options: undefined,      // option/value pair list for FTS Dictionary
-        },
         initialize: function(attrs, args) {
           var isNew = (_.size(attrs) === 0);
           pgAdmin.Browser.Node.Model.prototype.initialize.apply(this, arguments);
@@ -137,72 +108,10 @@ define('pgadmin.node.fts_dictionary', [
         schema: [{
           id: 'name', label: gettext('Name'), cell: 'string',
           type: 'text', cellHeaderClasses: 'width_percent_50',
-        },{
+        }, {
-          id: 'oid', label: gettext('OID'), cell: 'string',
-          editable: false, type: 'text', mode:['properties'],
-        },{
-          id: 'owner', label: gettext('Owner'), cell: 'string',
-          type: 'text', mode: ['properties', 'edit','create'], node: 'role',
-          control: Backform.NodeListByNameControl,
-        },{
-          id: 'schema', label: gettext('Schema'), cell: 'string',
-          type: 'text', mode: ['create','edit'], node: 'schema',
-          cache_node: 'database', control: 'node-list-by-id',
-        },{
-          id: 'is_sys_obj', label: gettext('System FTS dictionary?'),
-          cell:'boolean', type: 'switch', mode: ['properties'],
-        },{
           id: 'description', label: gettext('Comment'), cell: 'string',
           type: 'multiline', cellHeaderClasses: 'width_percent_50',
-        },{
-          id: 'template', label: gettext('Template'),type: 'text',
-          readonly: function(m) { return !m.isNew(); }, url: 'fetch_templates',
-          group: gettext('Definition'), control: 'node-ajax-options',
-          cache_node: 'fts_template',
-        },{
-          id: 'options', label: gettext('Option'), type: 'collection',
-          group: gettext('Options'), control: 'unique-col-collection',
-          model: OptionLabelModel, columns: ['option', 'value'],
-          uniqueCol : ['option'], mode: ['edit', 'create'],
-          canAdd: true, canEdit: false,canDelete: true,
         }],
-
-        /*
-         * Triggers control specific error messages for dictionary name,
-         * template and schema, if any one of them is not specified
-         * while creating new fts dictionary
-         */
-        validate: function() {
-          var name = this.get('name'),
-            template = this.get('template'),
-            schema = this.get('schema'),
-            msg;
-
-          // Validate FTS Dictionary name
-          if (_.isUndefined(name) || _.isNull(name) || String(name).replace(/^\s+|\s+$/g, '') == '') {
-            msg = gettext('Name must be specified.');
-            this.errorModel.set('name', msg);
-            return msg;
-          }
-
-          // Validate template name
-          else if (_.isUndefined(template) || _.isNull(template) || String(template).replace(/^\s+|\s+$/g, '') == '') {
-            msg = gettext('Template must be selected.');
-            this.errorModel.set('template', msg);
-            return msg;
-          }
-
-          // Validate schema
-          else if (_.isUndefined(schema) || _.isNull(schema) || String(schema).replace(/^\s+|\s+$/g, '') == '') {
-            msg = gettext('Schema must be selected.');
-            this.errorModel.set('schema', msg);
-            return msg;
-          }
-          else this.errorModel.clear();
-
-          this.trigger('on-status-clear');
-          return null;
-        },
       }),
     });
   }

web/pgadmin/browser/server_groups/servers/databases/schemas/fts_dictionaries/static/js/fts_dictionary.ui.js

@@ -0,0 +1,76 @@
+/////////////////////////////////////////////////////////////
+//
+// 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 OptionsSchema from '../../../../../static/js/options.ui';
+
+export default class FTSDictionarySchema extends BaseUISchema {
+  constructor(fieldOptions={}, initValues) {
+    super({
+      name: undefined,        // FTS Dictionary name
+      owner: undefined,       // FTS Dictionary owner
+      is_sys_obj: undefined,  // Is system object
+      description: undefined, // Comment on FTS Dictionary
+      schema: undefined,      // Schema name FTS dictionary belongs to
+      template: undefined,    // Template list for FTS dictionary node
+      options: undefined,      // option/value pair list for FTS Dictionary
+      ...initValues
+    });
+    this.fieldOptions = {
+      role: [],
+      schema: [],
+      fts_template: [],
+      ...fieldOptions,
+    };
+  }
+
+  get idAttribute() {
+    return 'oid';
+  }
+
+  get baseFields() {
+    let obj = this;
+    return [
+      {
+        id: 'name', label: gettext('Name'), cell: 'text', type: 'text',
+        noEmpty: true,
+      }, {
+        id: 'oid', label: gettext('OID'), cell: 'text',
+        editable: false, type: 'text', mode:['properties'],
+      }, {
+        id: 'owner', label: gettext('Owner'), cell: 'text',
+        editable: false, type: 'select', options: this.fieldOptions.role,
+        mode: ['properties', 'edit','create'], noEmpty: true,
+      }, {
+        id: 'schema', label: gettext('Schema'),
+        editable: false, type: 'select', options: this.fieldOptions.schema,
+        mode: ['create', 'edit'], noEmpty: true,
+      }, {
+        id: 'is_sys_obj', label: gettext('System FTS dictionary?'),
+        cell:'boolean', type: 'switch', mode: ['properties'],
+      }, {
+        id: 'description', label: gettext('Comment'), cell: 'text',
+        type: 'multiline',
+      }, {
+        id: 'template', label: gettext('Template'),
+        editable: false, type: 'select', group: gettext('Definition'),
+        options: this.fieldOptions.fts_template, noEmpty: true,
+        mode: ['edit', 'create', 'properties'],
+        readonly: function(state) { return !obj.isNew(state); },
+      }, {
+        id: 'options', label: gettext('Options'), type: 'collection',
+        schema: new OptionsSchema('option', 'value'),
+        group: gettext('Options'),
+        mode: ['edit', 'create'], uniqueCol : ['option'],
+        canAdd: true, canEdit: false, canDelete: true,
+      }
+    ];
+  }
+}

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

@@ -0,0 +1,103 @@
+/////////////////////////////////////////////////////////////
+//
+// 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 FTSDictionarySchema from '../../../pgadmin/browser/server_groups/servers/databases/schemas/fts_dictionaries/static/js/fts_dictionary.ui';
+
+describe('FTSDictionarySchema', ()=>{
+  let mount;
+  let schemaObj = new FTSDictionarySchema(
+    {
+      role: ()=>[],
+      schema: ()=>[],
+      fts_template: ()=>[],
+    },
+    [],
+    {
+      owner: 'postgres',
+      schema: 'public',
+    }
+  );
+  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={()=>{}}
+    />);
+  });
+});
+