Improved the extendability of the SchemaView and DataGridView. (pgadm…

…in-org#7876) Restructured these modules for ease of maintenance and apply the single responsibility principle (wherever applicable). * SchemaView - Split the code based on the functionality and responsibility. - Introduced a new View 'InlineView' instead of using the 'nextInline' configuration of the fields to have a better, and manageable view. - Using the separate class 'SchemaState' for managing the data and states of the SchemaView (separated from the 'useSchemaState' custom hook). - Introduced three new custom hooks 'useFieldValue', 'useFieldOptions', 'useFieldError' for the individual control to use for each Schema Field. - Don't pass value as the parameter props, and let the 'useFieldValue' and other custom hooks to decide, whether to rerender the control itself or the whole dialog/view. (single responsibility principle) - Introduced a new data store with a subscription facility. - Moving the field metadata (option) evaluation to a separate place for better management, and each option can be defined for a particular kind of field (for example - collection, row, cell, general, etc). - Allow to provide custom control for all kind of Schema field. * DataGridView - Same as SchemaView, split the DataGridView call into smaller, manageable chunks. (For example - grid, row, mappedCell, etc). - Use context based approach for providing the row and table data instead of passing them as parameters to every component separately. - Have a facility to extend this feature separately in future. (for example - selectable cell, column grouping, etc.) - Separated the features like deletable, editable, reorder, expandable etc. cells using the above feature support. - Added ability to provide the CustomHeader, and CustomRow through the Schema field, which will extend the ability to customize better. - Removed the 'DataGridViewWithHeaderForm' as it has been achieved through providing 'CustomHeader', and also introduced 'DataGridFormHeader' (a custom header) to achieve the same feature as 'DataGridViewWithHeaderForm'.
akshay-joshi · Sep 9, 2024 · e9af0c3 · e9af0c3
1 parent e5012ea
commit e9af0c3
Show file tree

Hide file tree

Showing 154 changed files with 5,429 additions and 3,058 deletions.
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
@@ -80,7 +80,7 @@ module.exports = [
         'error',
         'only-multiline',
       ],
-      'no-console': ['error', { allow: ['warn', 'error'] }],
+      'no-console': ['error', { allow: ['warn', 'error', 'trace'] }],
       // We need to exclude below for RegEx case
       'no-useless-escape': 'off',
       'no-prototype-builtins': 'off',

diff --git a/web/package.json b/web/package.json
@@ -140,7 +140,7 @@
     "react-leaflet": "^4.2.1",
     "react-new-window": "^1.0.1",
     "react-resize-detector": "^11.0.1",
-    "react-rnd": "^10.3.5",
+    "react-rnd": "^10.4.12",
     "react-select": "^5.7.2",
     "react-timer-hook": "^3.0.5",
     "react-virtualized-auto-sizer": "^1.0.6",
@@ -152,7 +152,7 @@
     "uplot-react": "^1.1.4",
     "valid-filename": "^2.0.1",
     "wkx": "^0.5.0",
-    "zustand": "^4.4.1"
+    "zustand": "^4.5.4"
   },
   "scripts": {
     "linter": "yarn run eslint -c .eslintrc.js .",

diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/domains/static/js/domain.ui.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/domains/static/js/domain.ui.js
@@ -39,7 +39,9 @@ export class DomainConstSchema extends BaseUISchema {
         id: 'convalidated', label: gettext('Validate?'), cell: 'checkbox',
         type: 'checkbox',
         readonly: function(state) {
-          let currCon = _.find(obj.top.origData.constraints, (con)=>con.conoid == state.conoid);
+          let currCon = _.find(
+            obj.top.origData.constraints, (con) => con.conoid == state.conoid
+          );
           return !obj.isNew(state) && currCon.convalidated;
         },
       }

diff --git a/...ver_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.ui.js b/...ver_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.ui.js
@@ -9,7 +9,7 @@
 
 import gettext from 'sources/gettext';
 import BaseUISchema from 'sources/SchemaView/base_schema.ui';
-import DataGridViewWithHeaderForm from 'sources/helpers/DataGridViewWithHeaderForm';
+import { DataGridFormHeader } from 'sources/SchemaView/DataGridView';
 import { isEmptyString } from '../../../../../../../../static/js/validators';
 
 class TokenHeaderSchema extends BaseUISchema {
@@ -155,8 +155,8 @@ export default class FTSConfigurationSchema extends BaseUISchema {
         group: gettext('Tokens'), mode: ['create','edit'],
         editable: false, schema: this.tokColumnSchema,
         headerSchema: this.tokHeaderSchema,
-        headerVisible: function() { return true;},
-        CustomControl: DataGridViewWithHeaderForm,
+        headerFormVisible: true,
+        GridHeader: DataGridFormHeader,
         uniqueCol : ['token'],
         canAdd: true, canEdit: false, canDelete: true,
       }

diff --git a/...ases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.ui.js b/...ases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.ui.js
@@ -10,8 +10,8 @@ import gettext from 'sources/gettext';
 import BaseUISchema from 'sources/SchemaView/base_schema.ui';
 import _ from 'lodash';
 import { isEmptyString } from 'sources/validators';
-import { SCHEMA_STATE_ACTIONS } from '../../../../../../../../../../static/js/SchemaView';
-import DataGridViewWithHeaderForm from '../../../../../../../../../../static/js/helpers/DataGridViewWithHeaderForm';
+import { SCHEMA_STATE_ACTIONS } from 'sources/SchemaView';
+import { DataGridFormHeader } from 'sources/SchemaView/DataGridView';
 import { getNodeAjaxOptions, getNodeListByName } from '../../../../../../../../../static/js/node_ajax';
 import TableSchema from '../../../../static/js/table.ui';
 import pgAdmin from 'sources/pgadmin';
@@ -342,10 +342,12 @@ export default class ExclusionConstraintSchema extends BaseUISchema {
       group: gettext('Columns'), type: 'collection',
       mode: ['create', 'edit', 'properties'],
       editable: false, schema: this.exColumnSchema,
-      headerSchema: this.exHeaderSchema, headerVisible: (state)=>obj.isNew(state),
-      CustomControl: DataGridViewWithHeaderForm,
+      headerSchema: this.exHeaderSchema,
+      headerFormVisible: (state)=>obj.isNew(state),
+      GridHeader: DataGridFormHeader,
       uniqueCol: ['column'],
-      canAdd: false, canDelete: function(state) {
+      canAdd: (state)=>obj.isNew(state),
+      canDelete: function(state) {
         // We can't update columns of existing
         return obj.isNew(state);
       },

diff --git a/...oups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.ui.js b/...oups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.ui.js
@@ -11,11 +11,12 @@ import gettext from 'sources/gettext';
 import BaseUISchema from 'sources/SchemaView/base_schema.ui';
 import _ from 'lodash';
 import { isEmptyString } from 'sources/validators';
-import { SCHEMA_STATE_ACTIONS } from '../../../../../../../../../../static/js/SchemaView';
-import DataGridViewWithHeaderForm from '../../../../../../../../../../static/js/helpers/DataGridViewWithHeaderForm';
+import { SCHEMA_STATE_ACTIONS } from 'sources/SchemaView';
+import { DataGridFormHeader } from 'sources/SchemaView/DataGridView';
 import { getNodeAjaxOptions, getNodeListByName } from '../../../../../../../../../static/js/node_ajax';
 import TableSchema from '../../../../static/js/table.ui';
 
+
 export function getNodeForeignKeySchema(treeNodeInfo, itemNodeData, pgBrowser, noColumns=false, initData={}) {
   return new ForeignKeySchema({
     local_column: noColumns ? [] : ()=>getNodeListByName('column', treeNodeInfo, itemNodeData),
@@ -58,12 +59,20 @@ class ForeignKeyHeaderSchema extends BaseUISchema {
   }
 
   addDisabled(state) {
-    return !(state.local_column && (state.references || this.origData.references) && state.referenced);
+    return !(
+      state.local_column && (
+        state.references || this.origData.references
+      ) && state.referenced
+    );
   }
 
   /* Data to ForeignKeyColumnSchema will added using the header form */
   getNewData(data) {
-    let references_table_name = _.find(this.refTables, (t)=>t.value==data.references || t.value == this.origData.references)?.label;
+    let references_table_name = _.find(
+      this.refTables,
+      (t) => t.value == data.references || t.value == this.origData.references
+    )?.label;
+
     return {
       local_column: data.local_column,
       referenced: data.referenced,
@@ -229,7 +238,10 @@ export default class ForeignKeySchema extends BaseUISchema {
         if(!obj.isNew(state)) {
           let origData = {};
           if(obj.inTable && obj.top) {
-            origData = _.find(obj.top.origData['foreign_key'], (r)=>r.cid == state.cid);
+            origData = _.find(
+              obj.top.origData['foreign_key'],
+              (r) => r.cid == state.cid
+            );
           } else {
             origData = obj.origData;
           }
@@ -304,14 +316,14 @@ export default class ForeignKeySchema extends BaseUISchema {
       group: gettext('Columns'), type: 'collection',
       mode: ['create', 'edit', 'properties'],
       editable: false, schema: this.fkColumnSchema,
-      headerSchema: this.fkHeaderSchema, headerVisible: (state)=>obj.isNew(state),
-      CustomControl: DataGridViewWithHeaderForm,
+      headerSchema: this.fkHeaderSchema,
+      headerFormVisible: (state)=>obj.isNew(state),
+      GridHeader: DataGridFormHeader,
       uniqueCol: ['local_column', 'references', 'referenced'],
-      canAdd: false, canDelete: function(state) {
-        // We can't update columns of existing foreign key.
-        return obj.isNew(state);
-      },
-      readonly: obj.isReadonly, cell: ()=>({
+      canAdd: (state)=>obj.isNew(state),
+      canDelete: (state)=>obj.isNew(state),
+      readonly: obj.isReadonly,
+      cell: () => ({
         cell: '',
         controlProps: {
           formatter: {
@@ -358,9 +370,10 @@ export default class ForeignKeySchema extends BaseUISchema {
           }
         }
         if(actionObj.type == SCHEMA_STATE_ACTIONS.ADD_ROW) {
-          obj.fkHeaderSchema.origData.references = null;
           // Set references value.
-          obj.fkHeaderSchema.origData.references = obj.fkHeaderSchema.sessData.references;
+          obj.fkHeaderSchema.origData.references = null;
+          obj.fkHeaderSchema.origData.references =
+            obj.fkHeaderSchema.sessData.references;
           obj.fkHeaderSchema.origData._disable_references = true;
         }
         return {columns: currColumns};

diff --git a/...dmin/browser/server_groups/servers/databases/schemas/tables/indexes/static/js/index.ui.js b/...dmin/browser/server_groups/servers/databases/schemas/tables/indexes/static/js/index.ui.js
@@ -7,12 +7,13 @@
 //
 //////////////////////////////////////////////////////////////
 
-import gettext from 'sources/gettext';
-import BaseUISchema from 'sources/SchemaView/base_schema.ui';
-import DataGridViewWithHeaderForm from '../../../../../../../../../static/js/helpers/DataGridViewWithHeaderForm';
 import _ from 'lodash';
-import { isEmptyString } from 'sources/validators';
+
+import { DataGridFormHeader } from 'sources/SchemaView/DataGridView';
+import BaseUISchema from 'sources/SchemaView/base_schema.ui';
+import gettext from 'sources/gettext';
 import pgAdmin from 'sources/pgadmin';
+import { isEmptyString } from 'sources/validators';
 
 
 function inSchema(node_info) {
@@ -23,8 +24,8 @@ class IndexColHeaderSchema extends BaseUISchema {
   constructor(columns) {
     super({
       is_exp: true,
-      colname: undefined,
-      expression: undefined,
+      colname: '',
+      expression: '',
     });
 
     this.columns = columns;
@@ -90,10 +91,10 @@ class IndexColumnSchema extends BaseUISchema {
   }
 
   isEditable(state) {
-    let topObj = this._top;
+    let topObj = this.top;
     if(this.inSchemaWithModelCheck(state)) {
       return false;
-    } else if (topObj._sessData && topObj._sessData.amname === 'btree') {
+    } else if (topObj.sessData && topObj.sessData.amname === 'btree') {
       state.is_sort_nulls_applicable = true;
       return true;
     } else {
@@ -155,9 +156,8 @@ class IndexColumnSchema extends BaseUISchema {
                   * to access method selected by user if not selected
                   * send btree related op_class options
                   */
-                let amname = obj._top?._sessData ?
-                  obj._top?._sessData.amname :
-                  obj._top?.origData.amname;
+                let amname = obj.top?.sessData.amname ||
+                  obj.top?.origData.amname;
 
                 if(_.isUndefined(amname))
                   return options;
@@ -573,10 +573,12 @@ export default class IndexSchema extends BaseUISchema {
         group: gettext('Columns'), type: 'collection',
         mode: ['create', 'edit', 'properties'],
         editable: false, schema: this.indexColumnSchema,
-        headerSchema: this.indexHeaderSchema, headerVisible: (state)=>indexSchemaObj.isNew(state),
-        CustomControl: DataGridViewWithHeaderForm,
+        headerSchema: this.indexHeaderSchema,
+        headerFormVisible: (state)=>indexSchemaObj.isNew(state),
+        GridHeader: DataGridFormHeader,
         uniqueCol: ['colname'],
-        canAdd: false, canDelete: function(state) {
+        canAdd: (state)=>indexSchemaObj.isNew(state),
+        canDelete: function(state) {
           // We can't update columns of existing
           return indexSchemaObj.isNew(state);
         }, cell: ()=>({