Fixed the dynamic column updation in the Unique & Primary Keys while creating a table.

* Updated the columns for the unique and primary keys while creating a table.
Use the 'editable' option for a Cell instead of 'disabled'.

* Don't need to define the hidden member as fields in GridHeaderSchema

* Updated the columns for the exclusion constraints while creating a
 table.

* Signaled the relevant field, when column options have changed, for all
the children of a table.

* Use current snapshot of data for the GrigFormHeadeer

* Fixed the styling for the search input box

* Don't check for the 'colOptions.editable' flag, as it could be
indirect call as well.

web/pgadmin/browser/server_groups/servers/databases/publications/static/js/publication.ui.js

@@ -43,14 +43,14 @@ export class DefaultWithSchema extends BaseUISchema {
 }
 
 export class PublicationTableSchema extends BaseUISchema {
-  constructor(allTables,getColumns) {
+  constructor(allTables, getColumns) {
     super({
       table_name: undefined,
       where: undefined,
-      columns:undefined,
+      columns: [],
     });
     this.allTables = allTables;
-    this.getColumns=getColumns;
+    this.getColumns = getColumns;
     this.allTablesOptions = [];
     this.varTypes = {};
     this.allReadOnly = false;
@@ -104,7 +104,7 @@ export class PublicationTableSchema extends BaseUISchema {
           cell: 'select',
           options: this.allTables,
           optionsLoaded: (options) => {
-            obj.allTablesOptions=options;
+            obj.allTablesOptions = options;
           },
           controlProps: { allowClear: false },
         }),
@@ -118,7 +118,7 @@ export class PublicationTableSchema extends BaseUISchema {
         depChange: (state) => {
           if(!state.table_name) {
             return {
-              columns: null,
+              columns: [],
             };
           }
         },
@@ -127,9 +127,10 @@ export class PublicationTableSchema extends BaseUISchema {
         },
         cell: (state) => {
           let tid = obj.getTableOid(state.table_name);
-          return{
+
+          return {
             cell: 'select',
-            options: (state.table_name && tid) ? ()=>obj.getColumns({tid: tid}) : [],
+            options: (state.table_name && tid) ? () => obj.getColumns({tid: tid}) : [],
             optionsReloadBasis: tid,
             controlProps: { allowClear: true, multiple: true},
           };

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.ui.js

@@ -49,6 +49,7 @@ class ExclusionColHeaderSchema extends BaseUISchema {
       is_exp: undefined,
       column: undefined,
       expression: undefined,
+      columns_updated_at: 0,
     });
 
     this.columns = columns;
@@ -56,6 +57,8 @@ class ExclusionColHeaderSchema extends BaseUISchema {
 
   changeColumnOptions(columns) {
     this.columns = columns;
+    if (this.state)
+      this.state.data = {...this.state.data, columns_updated_at: Date.now()};
   }
 
   addDisabled(state) {
@@ -76,10 +79,14 @@ class ExclusionColHeaderSchema extends BaseUISchema {
     return [{
       id: 'is_exp', label: gettext('Is expression'), type:'switch', editable: false,
     },{
-      id: 'column', label: gettext('Column'), type: 'select', editable: false,
-      options: this.columns, deps: ['is_exp'],
-      optionsReloadBasis: this.columns?.map ? _.join(this.columns.map((c)=>c.label), ',') : null,
-      optionsLoaded: (res)=>this.columnOptions=res,
+      id: 'column', label: gettext('Column'), editable: false,
+      options: this.columns, deps: ['is_exp', 'columns_updated_at'],
+      type: () => ({
+        type: 'select',
+        optionsReloadBasis: this.columns?.map ?
+          _.join(this.columns.map((c)=>c.label), ',') : null,
+        optionsLoaded: (res)=>this.columnOptions=res,
+      }),
       disabled: (state)=>state.is_exp,
     },{
       id: 'expression', label: gettext('Expression'), editable: false, deps: ['is_exp'],
@@ -205,6 +212,7 @@ export default class ExclusionConstraintSchema extends BaseUISchema {
       condeferred: undefined,
       columns: [],
       include: [],
+      columns_updated_at: 0,
     });
 
     this.nodeInfo = nodeInfo;
@@ -233,6 +241,8 @@ export default class ExclusionConstraintSchema extends BaseUISchema {
   changeColumnOptions(columns) {
     this.exHeaderSchema.changeColumnOptions(columns);
     this.fieldOptions.columns = columns;
+    if (this.state)
+      this.state.data = {...this.state.data, columns_updated_at: Date.now()};
   }
 
   isReadonly(state) {
@@ -406,7 +416,7 @@ export default class ExclusionConstraintSchema extends BaseUISchema {
       editable: false,
       canDelete: true, canAdd: true,
       mode: ['properties', 'create', 'edit'], min_version: 110000,
-      deps: ['index'],
+      deps: ['index', 'columns_updated_at'],
       readonly: function() {
         if(!obj.isNew()) {
           return true;
@@ -423,6 +433,9 @@ export default class ExclusionConstraintSchema extends BaseUISchema {
           return {include: []};
         }
       }
+    }, {
+      // Don't include this in the data.
+      id: 'columns_updated_at', exclude: true, type: 'text', visible: false,
     }];
   }
 

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.ui.js

@@ -48,6 +48,7 @@ class ForeignKeyHeaderSchema extends BaseUISchema {
       references: undefined,
       referenced: undefined,
       _disable_references: false,
+      columns_updated_at: 0,
     });
 
     this.fieldOptions = fieldOptions;
@@ -56,6 +57,8 @@ class ForeignKeyHeaderSchema extends BaseUISchema {
 
   changeColumnOptions(columns) {
     this.fieldOptions.local_column = columns;
+    if (this.state)
+      this.state.data = {...this.state.data, columns_updated_at: Date.now()};
   }
 
   addDisabled(state) {
@@ -84,9 +87,15 @@ class ForeignKeyHeaderSchema extends BaseUISchema {
   get baseFields() {
     let obj = this;
     return [{
-      id: 'local_column', label: gettext('Local column'), type:'select', editable: false,
-      options: this.fieldOptions.local_column,
-      optionsReloadBasis: this.fieldOptions.local_column?.map ? _.join(this.fieldOptions.local_column.map((c)=>c.label), ',') : null,
+      id: 'local_column', label: gettext('Local column'), editable: false,
+      deps: ['columns_updated_at'],
+      type: () => ({
+        type: 'select',
+        options: this.fieldOptions.local_column,
+        optionsReloadBasis: this.fieldOptions.local_column?.map ?
+          _.join(this.fieldOptions.local_column.map((c) => c.label), ',') :
+          null
+      }),
     },{
       id: 'references', label: gettext('References'), type: 'select', editable: false,
       options: this.fieldOptions.references,

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/index_constraint/static/js/primary_key.ui.js

@@ -12,6 +12,8 @@ import _ from 'lodash';
 import { isEmptyString } from 'sources/validators';
 import { SCHEMA_STATE_ACTIONS } from '../../../../../../../../../../static/js/SchemaView';
 import TableSchema from '../../../../static/js/table.ui';
+
+
 export default class PrimaryKeySchema extends BaseUISchema {
   constructor(fieldOptions={}, nodeInfo={}) {
     super({
@@ -26,6 +28,7 @@ export default class PrimaryKeySchema extends BaseUISchema {
       condeferred: undefined,
       columns: [],
       include: [],
+      columns_updated_at: 0,
     });
 
     this.fieldOptions = fieldOptions;
@@ -42,6 +45,8 @@ export default class PrimaryKeySchema extends BaseUISchema {
 
   changeColumnOptions(columns) {
     this.fieldOptions.columns = columns;
+    if (this.state)
+      this.state.data = {...this.state.data, columns_updated_at: Date.now()};
   }
 
   get baseFields() {
@@ -69,14 +74,14 @@ export default class PrimaryKeySchema extends BaseUISchema {
       }
     },{
       id: 'columns', label: gettext('Columns'),
-      deps: ()=>{
-        let ret = ['index'];
+      deps: () => {
+        let ret = ['index', 'columns_updated_at'];
         if(obj.inTable) {
           ret.push(['columns']);
         }
         return ret;
       },
-      depChange: (state, source, topState, actionObj)=>{
+      depChange: (state, source, topState, actionObj) => {
         /* If in table, sync up value with columns in table */
         if(obj.inTable && !state) {
           /* the FK is removed by some other dep, this can be a no-op */
@@ -99,7 +104,8 @@ export default class PrimaryKeySchema extends BaseUISchema {
         }
         return {columns: currColumns};
       },
-      cell: ()=>({
+      editable: false,
+      cell: () => ({
         cell: '',
         controlProps: {
           formatter: {
@@ -110,7 +116,7 @@ export default class PrimaryKeySchema extends BaseUISchema {
           },
         }
       }),
-      type: ()=>({
+      type: () => ({
         type: 'select',
         optionsReloadBasis: obj.fieldOptions.columns?.map ? _.join(obj.fieldOptions.columns.map((c)=>c.label), ',') : null,
         options: obj.fieldOptions.columns,
@@ -130,16 +136,8 @@ export default class PrimaryKeySchema extends BaseUISchema {
           },
         },
       }), group: gettext('Definition'),
-      editable: false,
-      readonly: function(state) {
-        if(!obj.isNew(state)) {
-          return true;
-        }
-      },
-      disabled: function(state) {
-        // Disable if index is selected.
-        return !(_.isUndefined(state.index) || state.index == '');
-      },
+      readonly: (state) => !obj.isNew(state),
+      disabled: (state) => !(_.isUndefined(state.index) || state.index == ''),
     },{
       id: 'include', label: gettext('Include columns'),
       type: ()=>({

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/index_constraint/static/js/unique_constraint.ui.js

@@ -28,6 +28,7 @@ export default class UniqueConstraintSchema extends BaseUISchema {
       indnullsnotdistinct: undefined,
       columns: [],
       include: [],
+      columns_updated_at: 0,
     });
 
     this.fieldOptions = fieldOptions;
@@ -44,6 +45,8 @@ export default class UniqueConstraintSchema extends BaseUISchema {
 
   changeColumnOptions(columns) {
     this.fieldOptions.columns = columns;
+    if (this.state)
+      this.state.data = {...this.state.data, columns_updated_at: Date.now()};
   }
 
   get baseFields() {
@@ -71,20 +74,21 @@ export default class UniqueConstraintSchema extends BaseUISchema {
       }
     },{
       id: 'columns', label: gettext('Columns'),
-      deps: ()=>{
-        let ret = ['index'];
+      deps: () => {
+        let ret = ['index', 'columns_updated_at'];
         if(obj.inTable) {
           ret.push(['columns']);
         }
         return ret;
       },
-      depChange: (state, source, topState, actionObj)=>{
+      depChange: (state, source, topState, actionObj) => {
         /* If in table, sync up value with columns in table */
         if(obj.inTable && !state) {
           /* the FK is removed by some other dep, this can be a no-op */
           return;
         }
         let currColumns = state.columns || [];
+
         if(obj.inTable && source[0] == 'columns') {
           if(actionObj.type == SCHEMA_STATE_ACTIONS.DELETE_ROW) {
             let oldColumn = _.get(actionObj.oldState, actionObj.path.concat(actionObj.value));
@@ -100,7 +104,8 @@ export default class UniqueConstraintSchema extends BaseUISchema {
         }
         return {columns: currColumns};
       },
-      cell: ()=>({
+      editable: false,
+      cell: () => ({
         cell: '',
         controlProps: {
           formatter: {
@@ -111,7 +116,7 @@ export default class UniqueConstraintSchema extends BaseUISchema {
           },
         }
       }),
-      type: ()=>({
+      type: () => ({
         type: 'select',
         optionsReloadBasis: obj.fieldOptions.columns?.map ? _.join(obj.fieldOptions.columns.map((c)=>c.label), ',') : null,
         options: obj.fieldOptions.columns,
@@ -119,26 +124,20 @@ export default class UniqueConstraintSchema extends BaseUISchema {
           allowClear:false,
           multiple: true,
           formatter: {
-            fromRaw: (backendVal, allOptions)=>{
+            fromRaw: (backendVal, allOptions) => {
               /* remove the column key and pass as array */
-              let optValues = (backendVal||[]).map((singleVal)=>singleVal.column);
-              return _.filter(allOptions, (opt)=>optValues.indexOf(opt.value)>-1);
+              let optValues = (backendVal||[]).map((singleVal) => singleVal.column);
+              return _.filter(allOptions, (opt) => optValues.indexOf(opt.value)>-1);
             },
             toRaw: (value)=>{
               /* take the array and convert to column key collection */
-              return (value||[]).map((singleVal)=>({column: singleVal.value}));
+              return (value||[]).map((singleVal) => ({column: singleVal.value}));
             },
           },
         },
       }), group: gettext('Definition'),
-      editable: false,
-      readonly: function(state) {
-        return obj.isReadOnly(state);
-      },
-      disabled: function(state) {
-        // Disable if index is selected.
-        return !(_.isUndefined(state.index) || state.index == '');
-      },
+      readonly: (state) => obj.isReadOnly(state),
+      disabled: (state) => !(_.isUndefined(state.index) || state.index == ''),
     },{
       id: 'include', label: gettext('Include columns'),
       type: ()=>({

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/indexes/static/js/index.ui.js

@@ -26,6 +26,7 @@ class IndexColHeaderSchema extends BaseUISchema {
       is_exp: true,
       colname: '',
       expression: '',
+      columns_updated_at: 0,
     });
 
     this.columns = columns;
@@ -33,6 +34,8 @@ class IndexColHeaderSchema extends BaseUISchema {
 
   changeColumnOptions(columns) {
     this.columns = columns;
+    if (this.state)
+      this.state.data = {...this.state.data, columns_updated_at: Date.now()};
   }
 
   addDisabled(state) {
@@ -51,14 +54,18 @@ class IndexColHeaderSchema extends BaseUISchema {
     return [{
       id: 'is_exp', label: gettext('Is expression'), type:'switch', editable: false,
     },{
-      id: 'colname', label: gettext('Column'), type: 'select', editable: false,
-      options: this.columns, deps: ['is_exp'],
-      optionsReloadBasis: this.columns?.map ? _.join(this.columns.map((c)=>c.label), ',') : null,
-      optionsLoaded: (res)=>this.columnOptions=res,
-      disabled: (state)=>state.is_exp, node: 'column',
+      id: 'colname', label: gettext('Column'), editable: false,
+      deps: ['is_exp', 'columns_updated_at'],
+      type: () => ({
+        type: 'select', options: this.columns,
+        optionsReloadBasis: this.columns?.map ?
+          _.join(this.columns.map((c)=>c.label), ',') : null,
+        optionsLoaded: (res) => this.columnOptions = res,
+      }),
+      disabled: (state) => state.is_exp, node: 'column',
     },{
-      id: 'expression', label: gettext('Expression'), editable: false, deps: ['is_exp'],
-      type: 'sql', disabled: (state)=>!state.is_exp,
+      id: 'expression', label: gettext('Expression'), editable: false,
+      deps: ['is_exp'], type: 'sql', disabled: (state)=>!state.is_exp,
     }];
   }
 }

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.ui.js

@@ -15,6 +15,7 @@ export class PartitionKeysSchema extends BaseUISchema {
   constructor(columns=[], getCollations=[], getOperatorClass=[]) {
     super({
       key_type: 'column',
+      columns_updated_at: 0,
     });
     this.columns = columns;
     this.columnsReloadBasis = false;
@@ -24,6 +25,8 @@ export class PartitionKeysSchema extends BaseUISchema {
 
   changeColumnOptions(columns) {
     this.columns = columns;
+    if (this.state)
+      this.state.data = {...this.state.data, columns_updated_at: Date.now()};
   }
 
   isEditable(state) {
@@ -40,9 +43,9 @@ export class PartitionKeysSchema extends BaseUISchema {
       },{
         label: gettext('Expression'), value: 'expression',
       }],
-    },{
+    }, {
       id: 'pt_column', label: gettext('Column'), type:'select',
-      deps: ['key_type', ['columns']],
+      deps: ['key_type', 'columns_updated_at'],
       depChange: (state, source)=>{
         if(state.key_type == 'expression' || source[0] == 'columns') {
           return {
@@ -50,9 +53,9 @@ export class PartitionKeysSchema extends BaseUISchema {
           };
         }
       },
-      cell: ()=>({
+      cell: () => ({
         cell: 'select',
-        optionsReloadBasis: _.join(obj.columns.map((c)=>c.label), ','),//obj.columnsReloadBasis,
+        optionsReloadBasis: _.join(obj.columns.map((c) => c.label), ','),
         options: obj.columns,
         controlProps: {
           allowClear: false,

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/table.ui.js

@@ -451,7 +451,9 @@ export default class TableSchema extends BaseUISchema {
   }
 
   changeColumnOptions(columns) {
-    let colOptions = (columns||[]).map((c)=>({label: c.name, value: c.name, image:'icon-column'}));
+    let colOptions = (columns||[]).map(
+      (c) => ({label: c.name, value: c.name, image:'icon-column'})
+    );
     this.constraintsObj.changeColumnOptions(colOptions);
     this.partitionKeysObj.changeColumnOptions(colOptions);
     this.partitionsObj.changeColumnOptions(colOptions);
@@ -749,7 +751,7 @@ export default class TableSchema extends BaseUISchema {
             let typeTable = _.find(obj.ofTypeTables||[], (t)=>t.label==state.typname);
             finalCols = typeTable.oftype_columns;
           }
-          resolve(()=>{
+          resolve(() => {
             obj.changeColumnOptions(finalCols);
             return {
               columns: finalCols,