Added support for composite foreign keys in the ERD tool. Fixes #6891

docs/en_US/release_notes_6_1.rst

@@ -29,4 +29,5 @@ Bug fixes
 | `Issue #6828 <https://redmine.postgresql.org/issues/6828>`_ -  Fixed an issue where the tree is not scrolling to the object selected from the search result.
 | `Issue #6881 <https://redmine.postgresql.org/issues/6881>`_ -  Fixed an issue where the browser tree doesn't show all contents on changing resolution.
 | `Issue #6882 <https://redmine.postgresql.org/issues/6882>`_ -  Ensure that columns should be displayed in the order of creation instead of alphabetical order in the browser tree.
+| `Issue #6891 <https://redmine.postgresql.org/issues/6891>`_ -  Added support for composite foreign keys in the ERD tool.
 | `Issue #6900 <https://redmine.postgresql.org/issues/6900>`_ -  Fixed an issue where exclusion constraint cannot be created from table dialog if the access method name is changed once.

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

@@ -256,7 +256,13 @@ export default class ForeignKeySchema extends BaseUISchema {
           }
         }
 
-        let oldindex = 'fki_'+actionObj.oldState.name;
+        let oldindex;
+        if(obj.inTable) {
+          let oldFk = _.get(actionObj.oldState, _.slice(actionObj.path, 0, -1));
+          oldindex = 'fki_'+oldFk.name;
+        } else {
+          oldindex = 'fki_'+actionObj.oldState.name;
+        }
         if(state.hasindex) {
           return {};
         } else if(!state.autoindex) {

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

@@ -352,6 +352,15 @@ export default class TableSchema extends BaseUISchema {
       delete c.inheritedfromtable;
       return c;
     });
+
+    /* Make autoindex as true if there is coveringindex since ERD works in create mode */
+    newData.foreign_key = (newData.foreign_key||[]).map((fk)=>{
+      fk.autoindex = false;
+      if(fk.coveringindex) {
+        fk.autoindex = true;
+      }
+      return fk;
+    });
     return newData;
   }
 

web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx

@@ -65,8 +65,9 @@ export class TableNodeModel extends DefaultNodeModel {
   }
 
   cloneData(name) {
+    const SKIP_CLONE_KEYS = ['foreign_key'];
     let newData = {
-      ...this.getData(),
+      ..._.pickBy(this.getData(), (_v, k)=>(SKIP_CLONE_KEYS.indexOf(k) == -1)),
     };
     if(name) {
       newData['name'] = name;
@@ -148,12 +149,16 @@ export class TableNodeWidget extends React.Component {
     });
   }
 
-  generateColumn(col) {
+  generateColumn(col, tableData) {
     let port = this.props.node.getPort(this.props.node.getPortName(col.attnum));
     let icon = ColumnIcon;
+    let localFkCols = [];
+    (tableData.foreign_key||[]).forEach((fk)=>{
+      localFkCols.push(...fk.columns.map((c)=>c.local_column));
+    });
     if(col.is_primary_key) {
       icon = PrimaryKeyIcon;
-    } else if(port && port.getSubtype() == 'many') {
+    } else if(localFkCols.indexOf(col.name) > -1) {
       icon = ForeignKeyIcon;
     }
     return (
@@ -186,7 +191,7 @@ export class TableNodeWidget extends React.Component {
   }
 
   render() {
-    let node_data = this.props.node.getData();
+    let tableData = this.props.node.getData();
     return (
       <div className={'table-node ' + (this.props.node.isSelected() ? 'selected': '') } onDoubleClick={()=>{this.props.node.fireEvent({}, 'editTable');}}>
         <div className="table-toolbar">
@@ -198,14 +203,14 @@ export class TableNodeWidget extends React.Component {
         </div>
         <div className="d-flex table-schema-data">
           <RowIcon icon={SchemaIcon}/>
-          <div className="table-schema my-auto">{node_data.schema}</div>
+          <div className="table-schema my-auto">{tableData.schema}</div>
         </div>
         <div className="d-flex table-name-data">
           <RowIcon icon={TableIcon} />
-          <div className="table-name my-auto">{node_data.name}</div>
+          <div className="table-name my-auto">{tableData.name}</div>
         </div>
         <div className="table-cols">
-          {_.map(node_data.columns, (col)=>this.generateColumn(col))}
+          {_.map(tableData.columns, (col)=>this.generateColumn(col, tableData))}
         </div>
       </div>
     );

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

@@ -170,9 +170,13 @@ describe('ForeignKeySchema', ()=>{
 
   it('depChange', ()=>{
     let state = {columns: [{local_column: 'id'}]};
-    let actionObj = {oldState:{name: 'fkname'}};
+    let actionObj = {
+      path: ['name'],
+      oldState: {
+        name: 'fkname',
+      }
+    };
 
-    schemaObj.nodeInfo = {foreign_key: {}};
     state.autoindex = true;
     state.name = 'fkname';
     expect(getFieldDepChange(schemaObj, 'autoindex')(state, null, null, actionObj)).toEqual({