From d5d78a56abdfee3142125c2df26a1665deafc5fb Mon Sep 17 00:00:00 2001
From: Praveen D <praveen@hasura.io>
Date: Fri, 14 Sep 2018 13:10:42 +0530
Subject: [PATCH] console: fix add manual relationships state

---
 .../Services/Data/TableCommon/TableReducer.js |  4 +--
 .../Data/TableRelationships/Relationships.js  | 34 +++++++++++++++----
 .../TableRelationships/RelationshipsView.js   | 16 +++++----
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/console/src/components/Services/Data/TableCommon/TableReducer.js b/console/src/components/Services/Data/TableCommon/TableReducer.js
index 40aca0dade161..83b17b3fb4dd5 100644
--- a/console/src/components/Services/Data/TableCommon/TableReducer.js
+++ b/console/src/components/Services/Data/TableCommon/TableReducer.js
@@ -118,7 +118,7 @@ const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
         ...modifyState,
         relAdd: {
           ...modifyState.relAdd,
-          isManualExpanded: true,
+          isManualExpanded: !modifyState.relAdd.isManualExpanded,
         },
       };
     case REL_NAME_CHANGED:
@@ -164,8 +164,6 @@ const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
         relAdd: {
           ...modifyState.relAdd,
           isObjRel: action.isObjRel,
-          rTable: null,
-          rcol: '',
         },
       };
     case REL_SET_RTABLE:
diff --git a/console/src/components/Services/Data/TableRelationships/Relationships.js b/console/src/components/Services/Data/TableRelationships/Relationships.js
index 33ca7d32babec..2c020fcf688d5 100644
--- a/console/src/components/Services/Data/TableRelationships/Relationships.js
+++ b/console/src/components/Services/Data/TableRelationships/Relationships.js
@@ -48,11 +48,17 @@ const getRelationshipLine = (isObjRel, lcol, rcol, rTable) => {
   const finalRTable = rTable.name ? rTable.name : rTable;
   return isObjRel ? (
     <span>
-      &nbsp;{lcol}&nbsp;&nbsp;&rarr;&nbsp;&nbsp;{rTable} :: {rcol}
+      &nbsp;
+      {lcol}
+      &nbsp;&nbsp;&rarr;&nbsp;&nbsp;
+      {rTable} :: {rcol}
     </span>
   ) : (
     <span>
-      &nbsp;{finalRTable} :: {rcol}&nbsp;&nbsp;&rarr;&nbsp;&nbsp;{lcol}
+      &nbsp;
+      {finalRTable} :: {rcol}
+      &nbsp;&nbsp;&rarr;&nbsp;&nbsp;
+      {lcol}
     </span>
   );
 };
@@ -348,7 +354,8 @@ const AddRelationship = ({
       <div className={`${styles.remove_margin_bottom} form-group`}>
         <label>
           {' '}
-          You have no new relationships that can be added. Add a foreign key{' '}
+          You have no new relationships that can be added. Add a foreign key to
+          get suggestions{' '}
         </label>
       </div>
     );
@@ -402,7 +409,9 @@ const AddRelationship = ({
               {[
                 'Suggested object relationships',
                 'Suggested Array relationships',
-              ].map((s, i) => <th key={i}>{s}</th>)}
+              ].map((s, i) => (
+                <th key={i}>{s}</th>
+              ))}
             </tr>
           </thead>
           <tbody>
@@ -485,9 +494,15 @@ const AddManualRelationship = ({
   const onAddRelClicked = () => {
     dispatch(addRelViewMigrate(tableName));
   };
+  const onCloseClicked = () => {
+    dispatch(relManualAddClicked());
+  };
   return (
     <div>
-      <div className={styles.subheading_text}> Add a Manual Relationship </div>
+      <div className={styles.subheading_text}>
+        {' '}
+        Add a relationship manually{' '}
+      </div>
       <div className="form-group">
         <div className={`${styles.relBlockInline} ${styles.relBlockLeft}`}>
           Relationship Type
@@ -577,6 +592,13 @@ const AddManualRelationship = ({
       >
         Add
       </button>
+      <button
+        className={styles.add_mar_left + ' btn btn-default btn-sm'}
+        onClick={onCloseClicked}
+        data-test="table-close-manual-relationship"
+      >
+        Close
+      </button>
     </div>
   );
 };
@@ -751,7 +773,7 @@ class Relationships extends Component {
                 }}
                 data-test="add-manual-relationship"
               >
-                + Add a manual relationship
+                + Add a relationship manually
               </button>
             )}
             <hr />
diff --git a/console/src/components/Services/Data/TableRelationships/RelationshipsView.js b/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
index 17bfb9496373a..c9fdfdecdca0d 100644
--- a/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
+++ b/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
@@ -42,13 +42,17 @@ const getRelationshipLine = (isObjRel, lcol, rcol, rTable) => {
   const getGrayText = value => <i>{value}</i>;
   return isObjRel ? (
     <span>
-      &nbsp;{getGrayText(lcol)}&nbsp;&nbsp;&rarr;&nbsp;&nbsp;{rTable} :: {rcol}
+      &nbsp;
+      {getGrayText(lcol)}
+      &nbsp;&nbsp;&rarr;&nbsp;&nbsp;
+      {rTable} :: {rcol}
     </span>
   ) : (
     <span>
-      &nbsp;{rTable.name} :: {rcol}&nbsp;&nbsp;&rarr;&nbsp;&nbsp;{getGrayText(
-        lcol
-      )}
+      &nbsp;
+      {rTable.name} :: {rcol}
+      &nbsp;&nbsp;&rarr;&nbsp;&nbsp;
+      {getGrayText(lcol)}
     </span>
   );
 };
@@ -120,7 +124,7 @@ const AddRelationship = ({
   return (
     <div>
       <div>
-        <div className={styles.subheading_text}> Add New Relationship </div>
+        <div className={styles.subheading_text}> Add new relationship </div>
         <div className="form-group">
           <div className={`${styles.relBlockInline} ${styles.relBlockLeft}`}>
             Relationship Type
@@ -209,7 +213,7 @@ const AddRelationship = ({
           onClick={onAddRelClicked}
           data-test="view-add-relationship"
         >
-          Add Relationship
+          Add
         </button>
       </div>
     </div>