console: action relationship page improvements (fix #4062, #4130) (#4133)

CHANGELOG.md

@@ -25,7 +25,6 @@
   
 ### Other changes
 
-- console: disable editing action relationships
 - cli: fix typo in cli example for squash (fix #4047) (#4049)
 - console: fix run_sql migration modal messaging (close #4020) (#4060)
 - docs: add note on pg versions for actions (#4034)

console/src/components/Services/Actions/Relationships/Components/TypeRelationship.js

@@ -138,7 +138,6 @@ const RelationshipEditor = ({
           className={`${styles.select} form-control ${styles.add_pad_left}`}
           placeholder="Enter relationship name"
           data-test="rel-name"
-          disabled={isDisabled}
           title={relNameInputTitle}
           value={name}
         />
@@ -371,7 +370,7 @@ const RelationshipEditor = ({
 };
 
 const RelEditor = props => {
-  const { dispatch, relConfig, objectType } = props;
+  const { dispatch, relConfig, objectType, isNew } = props;
 
   const [relConfigState, setRelConfigState] = React.useState(null);
 
@@ -382,7 +381,7 @@ const RelEditor = props => {
       <div>
         <b>{relConfig.name}</b>
         <div className={tableStyles.relationshipTopPadding}>
-          {getRelDef(relConfig)}
+          {getRelDef({ ...relConfig, typename: objectType.name })}
         </div>
       </div>
     );
@@ -418,20 +417,24 @@ const RelEditor = props => {
       );
     }
     dispatch(
-      addActionRel({ ...relConfigState, typename: objectType.name }, toggle)
+      addActionRel(
+        { ...relConfigState, typename: objectType.name },
+        toggle,
+        isNew ? null : relConfig
+      )
     );
   };
 
   // function to remove the relationship
   let removeFunc;
-  if (relConfig) {
+  if (!isNew) {
     removeFunc = toggle => {
       dispatch(removeActionRel(relConfig.name, objectType.name, toggle));
     };
   }
 
-  const expandButtonText = relConfig ? 'Edit' : 'Add a relationship';
+  const expandButtonText = isNew ? 'Add a relationship' : 'Edit';
-  const collapseButtonText = relConfig ? 'Close' : 'Cancel';
+  const collapseButtonText = isNew ? 'Cancel' : 'Close';
 
   return (
     <ExpandableEditor

console/src/components/Services/Actions/Relationships/Relationships.js

@@ -34,6 +34,7 @@ const Relationships = ({
         typename={objectType.name}
         allTables={allTables}
         schemaList={schemaList}
+        isNew
       />
     </div>
   );

console/src/components/Services/Actions/Relationships/utils.js

@@ -76,7 +76,7 @@ export const getRelDef = relMeta => {
     ? `${relMeta.remote_table.schema}.${relMeta.remote_table.name}`
     : relMeta.remote_table;
 
-  return `${lcol} → ${tableLabel} . ${rcol}`;
+  return `${relMeta.typename} . ${lcol} → ${tableLabel} . ${rcol}`;
 };
 
 export const removeTypeRelationship = (types, typename, relName) => {
@@ -90,3 +90,15 @@ export const removeTypeRelationship = (types, typename, relName) => {
     return t;
   });
 };
+
+export const validateRelTypename = (types, typename, relname) => {
+  for (let i = types.length - 1; i >= 0; i--) {
+    const type = types[i];
+    if (type.kind === 'object' && type.name === typename) {
+      if ((type.relationships || []).some(r => r.name === relname)) {
+        return `Relationship with name "${relname}" already exists.`;
+      }
+    }
+  }
+  return null;
+};

console/src/components/Services/Actions/ServerIO.js

@@ -22,6 +22,7 @@ import {
 import {
   injectTypeRelationship,
   removeTypeRelationship,
+  validateRelTypename,
 } from './Relationships/utils';
 import { getConfirmation } from '../../Common/utils/jsUtils';
 import {
@@ -406,11 +407,52 @@ export const deleteAction = currentAction => (dispatch, getState) => {
   );
 };
 
-export const addActionRel = (relConfig, successCb) => (dispatch, getState) => {
+export const addActionRel = (relConfig, successCb, existingRelConfig) => (
+  dispatch,
+  getState
+) => {
   const { types: existingTypes } = getState().types;
 
-  const typesWithRels = injectTypeRelationship(
+  let typesWithRels = [...existingTypes];
-    existingTypes,
+
+  let validationError;
+
+  if (existingRelConfig) {
+    // modifying existing relationship
+    // if the relationship is being renamed
+    if (existingRelConfig.name !== relConfig.name) {
+      // validate the new name
+      validationError = validateRelTypename(
+        existingTypes,
+        relConfig.typename,
+        relConfig.name
+      );
+      // remove old relationship from types
+      typesWithRels = removeTypeRelationship(
+        existingTypes,
+        relConfig.typename,
+        existingRelConfig.name
+      );
+    }
+  } else {
+    // creating a new relationship
+
+    // validate the relationship name
+    validationError = validateRelTypename(
+      existingTypes,
+      relConfig.typename,
+      relConfig.name
+    );
+  }
+
+  const errorMsg = 'Saving relationship failed';
+  if (validationError) {
+    return dispatch(showErrorNotification(errorMsg, validationError));
+  }
+
+  // add modified relationship to types
+  typesWithRels = injectTypeRelationship(
+    typesWithRels,
     relConfig.typename,
     relConfig
   );
@@ -426,10 +468,9 @@ export const addActionRel = (relConfig, successCb) => (dispatch, getState) => {
   const upQueries = [customTypesQueryUp];
   const downQueries = [customTypesQueryDown];
 
-  const migrationName = 'add_action_rel'; // TODO: better migration name
+  const migrationName = `save_rel_${relConfig.name}_on_${relConfig.typename}`;
-  const requestMsg = 'Adding relationship...';
+  const requestMsg = 'Saving relationship...';
-  const successMsg = 'Relationship added successfully';
+  const successMsg = 'Relationship saved successfully';
-  const errorMsg = 'Adding relationship failed';
   const customOnSuccess = () => {
     // dispatch(createActionRequestComplete());
     dispatch(fetchCustomTypes());