fix console browse rows bugs (hasura#1691)

Author: rikinsk

console/cypress/integration/data/views/spec.js

@@ -312,12 +312,14 @@ const checkOrder = order => {
         cy.wrap($el)
           .find('[role=gridcell]')
           .first()
+          .next()
           .contains(2);
       }
       if (index === 2) {
         cy.wrap($el)
           .find('[role=gridcell]')
           .first()
+          .next()
           .contains(userId);
       }
     });
@@ -327,12 +329,14 @@ const checkOrder = order => {
         cy.wrap($el)
           .find('[role=gridcell]')
           .first()
+          .next()
           .contains(2);
       }
       if (index === 1) {
         cy.wrap($el)
           .find('[role=gridcell]')
           .first()
+          .next()
           .contains(userId);
       }
     });

console/src/components/Services/Data/TableBrowseRows/ReactTableFix.css

@@ -55,6 +55,7 @@
 .ReactTable .rt-tbody .rt-td {
   padding: 8px;
   border-right: 1px solid rgba(0,0,0,0.1);
+  word-wrap: break-word;
 }
 
 .ReactTable .rt-th .ellipsis,

console/src/components/Services/Data/TableBrowseRows/ViewRows.js

@@ -83,13 +83,11 @@ const ViewRows = ({
   const getGridHeadings = (_columns, _relationships) => {
     const _gridHeadings = [];
 
-    if (!isView) {
-      _gridHeadings.push({
-        Header: '',
-        accessor: 'actions',
-        id: 'actions',
-      });
-    }
+    _gridHeadings.push({
+      Header: '',
+      accessor: 'actions',
+      id: 'actions',
+    });
 
     _columns.map(col => {
       const columnName = col.column_name;
@@ -291,26 +289,26 @@ const ViewRows = ({
         const getColCellContent = () => {
           const rowColumnValue = row[columnName];
 
-          const getCellValue = () => {
-            let cellValue = '';
-
-            if (rowColumnValue === null) {
-              cellValue = (<i>NULL</i>);
-            } else if (rowColumnValue === undefined) {
-              cellValue = 'NULL';
-            } else if (col.data_type === 'json' || col.data_type === 'jsonb') {
-              cellValue = JSON.stringify(rowColumnValue);
-            } else {
-              cellValue = rowColumnValue.toString();
-            }
-
-            return cellValue;
-          };
+          let cellValue = '';
+          let cellTitle = '';
+
+          if (rowColumnValue === null) {
+            cellValue = (<i>NULL</i>);
+            cellTitle = 'NULL';
+          } else if (rowColumnValue === undefined) {
+            cellValue = 'NULL';
+            cellTitle = cellValue;
+          } else if (col.data_type === 'json' || col.data_type === 'jsonb') {
+            cellValue = JSON.stringify(rowColumnValue);
+            cellTitle = cellValue;
+          } else {
+            cellValue = rowColumnValue.toString();
+            cellTitle = cellValue;
+          }
 
-          const cellValue = getCellValue();
 
           return (
-            <div className={isExpanded ? styles.tableCellExpanded : ''}>
+            <div className={isExpanded ? styles.tableCellExpanded : ''} title={cellTitle}>
               {cellValue}
             </div>
           );
@@ -338,9 +336,9 @@ const ViewRows = ({
             );
           };
 
-          const isExpanded = curQuery.columns.find(c => c.name === rel.rel_name) !== undefined;
+          const isRelExpanded = curQuery.columns.find(c => c.name === rel.rel_name) !== undefined;
 
-          if (isExpanded) {
+          if (isRelExpanded) {
             const handleCloseClick = e => {
               e.preventDefault();
               dispatch(vCloseRel(curPath, rel.rel_name));
@@ -491,30 +489,36 @@ const ViewRows = ({
       // Render child only if data is available
       if (curRows[0][cq.name]) {
         const rel = tableSchema.relationships.find(r => r.rel_name === cq.name);
-        let childRows = curRows[0][cq.name];
-        if (rel.rel_type === 'object') {
-          childRows = [childRows];
+
+        if (rel) {
+          let childRows = curRows[0][cq.name];
+          if (rel.rel_type === 'object') {
+            childRows = [childRows];
+          }
+          // Find the name of this childTable using the rel
+          return (
+            <ViewRows
+              key={i}
+              curTableName={findTableFromRel(schemas, tableSchema, rel).table_name}
+              currentSchema={currentSchema}
+              curQuery={cq}
+              curFilter={curFilter}
+              curPath={[...curPath, rel.rel_name]}
+              curRows={childRows}
+              parentTableName={curTableName}
+              activePath={activePath}
+              ongoingRequest={ongoingRequest}
+              lastError={lastError}
+              lastSuccess={lastSuccess}
+              schemas={schemas}
+              curDepth={curDepth + 1}
+              dispatch={dispatch}
+              expandedRow={expandedRow}
+            />
+          );
         }
-        // Find the name of this childTable using the rel
-        return (
-          <ViewRows
-            key={i}
-            curTableName={findTableFromRel(schemas, tableSchema, rel).table_name}
-            curQuery={cq}
-            curFilter={curFilter}
-            curPath={[...curPath, rel.rel_name]}
-            curRows={childRows}
-            parentTableName={curTableName}
-            activePath={activePath}
-            ongoingRequest={ongoingRequest}
-            lastError={lastError}
-            lastSuccess={lastSuccess}
-            schemas={schemas}
-            curDepth={curDepth + 1}
-            dispatch={dispatch}
-          />
-        );
       }
+
       return null;
     });
 

console/src/components/Services/Data/TableBrowseRows/foldableTable/index.jsx

@@ -20,7 +20,7 @@ const defaultFoldButtonComponent = ({ header, collapsed, icon, onClick }) => {
     cursor: 'pointer',
     position: 'absolute',
     fontSize: '14px',
-    top: 'calc(50% - 7px)',
+    top: 'calc(50% - 8px)',
     left: '8px',
     padding: '5px',
     margin: '-5px -5px -5px -5px',