From 003101af4c8942f470cd5dae047f23bf76126316 Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Fri, 6 Sep 2019 22:23:14 +0530
Subject: [PATCH 1/8] make edit insert consistent

---
 .../src/components/Common/utils/pgUtils.js    | 11 +++
 .../Services/Data/TableBrowseRows/EditItem.js | 75 ++++++-------------
 .../Data/TableInsertItem/InsertItem.js        | 59 ++++++---------
 3 files changed, 59 insertions(+), 86 deletions(-)

diff --git a/console/src/components/Common/utils/pgUtils.js b/console/src/components/Common/utils/pgUtils.js
index 7f91629e02ca6..6154d3cf9b01e 100644
--- a/console/src/components/Common/utils/pgUtils.js
+++ b/console/src/components/Common/utils/pgUtils.js
@@ -77,6 +77,17 @@ export const getTrackedTables = tables => {
   return tables.filter(t => t.is_table_tracked);
 };
 
+export const isColumnAutoIncrement = column => {
+  return (
+    column.column_default ===
+    "nextval('" +
+      column.table_name +
+      '_' +
+      column.column_name +
+      "_seq'::regclass)"
+  );
+};
+
 /*** Table/View permissions utils ***/
 export const getTablePermissions = (table, role = null, action = null) => {
   let tablePermissions = table.permissions;
diff --git a/console/src/components/Services/Data/TableBrowseRows/EditItem.js b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
index 3223175277e7a..c4997edecaf5b 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditItem.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@@ -1,31 +1,17 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import TableHeader from '../TableCommon/TableHeader';
-import { editItem, E_ONGOING_REQ } from './EditActions';
-import globals from '../../../../Globals';
-import { modalClose } from './EditActions';
 import JsonInput from '../../../Common/CustomInputTypes/JsonInput';
 import TextInput from '../../../Common/CustomInputTypes/TextInput';
 import Button from '../../../Common/Button/Button';
-
 import ReloadEnumValuesButton from '../Common/ReusableComponents/ReloadEnumValuesButton';
+import { getPlaceholder, BOOLEAN, JSONB, JSONDTYPE, TEXT } from '../utils';
+import { ordinalColSort } from '../utils';
 
-import {
-  getPlaceholder,
-  INTEGER,
-  BIGINT,
-  NUMERIC,
-  DATE,
-  BOOLEAN,
-  UUID,
-  TIMESTAMP,
-  TIMETZ,
-  JSONB,
-  JSONDTYPE,
-  TEXT,
-} from '../utils';
 // import RichTextEditor from 'react-rte';
 import { replace } from 'react-router-redux';
+import globals from '../../../../Globals';
+import { E_ONGOING_REQ, editItem } from './EditActions';
 
 class EditItem extends Component {
   constructor() {
@@ -33,19 +19,6 @@ class EditItem extends Component {
     this.state = { insertedRows: 0, editorColumnMap: {}, currentColumn: null };
   }
 
-  onTextChange = (e, colName) => {
-    this.setState({
-      editorColumnMap: {
-        ...this.state.editorColumnMap,
-        [colName]: e.target.value,
-      },
-    });
-  };
-
-  onModalClose = () => {
-    this.props.dispatch(modalClose());
-  };
-
   render() {
     const {
       tableName,
@@ -76,16 +49,17 @@ class EditItem extends Component {
       x => x.table_name === tableName && x.table_schema === currentSchema
     );
 
-    const columns = currentTable.columns;
+    const columns = currentTable.columns.sort(ordinalColSort);
 
     const refs = {};
     const elements = columns.map((col, i) => {
       const colName = col.column_name;
       const colType = col.data_type;
+      const hasDefault = col.column_default && col.column_default.trim() !== '';
+
       refs[colName] = { valueNode: null, nullNode: null, defaultNode: null };
-      const inputRef = node => {
-        refs[colName].valueNode = node;
-      };
+      const inputRef = node => (refs[colName].valueNode = node);
+
       const clicker = e => {
         e.target
           .closest('.radio-inline')
@@ -95,27 +69,22 @@ class EditItem extends Component {
 
       const standardEditProps = {
         className: `form-control ${styles.insertBox}`,
-        onClick: clicker,
-        ref: inputRef,
         'data-test': `typed-input-${i}`,
-        type: 'text',
         defaultValue: oldItem[colName],
+        ref: inputRef,
+        type: 'text',
+        onClick: clicker,
       };
 
-      // Text type
+      const placeHolder = hasDefault
+        ? col.column_default
+        : getPlaceholder(colType);
+
       let typedInput = (
-        <input {...standardEditProps} placeholder={getPlaceholder(colType)} />
+        <input {...standardEditProps} placeholder={placeHolder} />
       );
 
       switch (colType) {
-        case INTEGER:
-        case BIGINT:
-        case NUMERIC:
-        case TIMESTAMP:
-        case DATE:
-        case TIMETZ:
-        case UUID:
-          break;
         case JSONB:
         case JSONDTYPE:
           typedInput = (
@@ -139,6 +108,9 @@ class EditItem extends Component {
         case BOOLEAN:
           typedInput = (
             <select {...standardEditProps}>
+              <option value="" disabled>
+                -- bool --
+              </option>
               <option value="true">True</option>
               <option value="false">False</option>
             </select>
@@ -168,7 +140,7 @@ class EditItem extends Component {
               }}
               name={colName + '-value'}
               value="NULL"
-              defaultChecked={oldItem[colName] === null ? true : false}
+              defaultChecked={oldItem[colName] === null}
             />
             <span className={styles.radioSpan}>NULL</span>
           </label>
@@ -209,6 +181,7 @@ class EditItem extends Component {
         </div>
       );
     }
+
     return (
       <div className={styles.container + ' container-fluid'}>
         <TableHeader
@@ -221,7 +194,7 @@ class EditItem extends Component {
         <br />
         <div className={styles.insertContainer + ' container-fluid'}>
           <div className="col-xs-9">
-            <form className="form-horizontal">
+            <form id="updateForm" className="form-horizontal">
               {elements}
               <Button
                 type="submit"
@@ -247,7 +220,7 @@ class EditItem extends Component {
                   });
                   dispatch(editItem(tableName, inputValues));
                 }}
-                data-test="save-button"
+                data-test="edit-save-button"
               >
                 {buttonText}
               </Button>
diff --git a/console/src/components/Services/Data/TableInsertItem/InsertItem.js b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
index 21ff19b594360..0e40efac0ae07 100644
--- a/console/src/components/Services/Data/TableInsertItem/InsertItem.js
+++ b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@@ -1,16 +1,21 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import TableHeader from '../TableCommon/TableHeader';
-import { insertItem, I_RESET } from './InsertActions';
-import { ordinalColSort } from '../utils';
-import { setTable } from '../DataActions';
 import JsonInput from '../../../Common/CustomInputTypes/JsonInput';
 import TextInput from '../../../Common/CustomInputTypes/TextInput';
 import Button from '../../../Common/Button/Button';
 import ReloadEnumValuesButton from '../Common/ReusableComponents/ReloadEnumValuesButton';
 import { getPlaceholder, BOOLEAN, JSONB, JSONDTYPE, TEXT } from '../utils';
+import { ordinalColSort } from '../utils';
 
+import { insertItem, I_RESET } from './InsertActions';
+import { setTable } from '../DataActions';
 import { NotFoundError } from '../../../Error/PageNotFound';
+import {
+  findTable,
+  generateTableDef,
+  isColumnAutoIncrement,
+} from '../../../Common/utils/pgUtils';
 
 class InsertItem extends Component {
   constructor() {
@@ -38,47 +43,41 @@ class InsertItem extends Component {
   render() {
     const {
       tableName,
+      currentSchema,
       clone,
       schemas,
-      currentSchema,
       migrationMode,
       ongoingRequest,
       lastError,
       lastSuccess,
-      count,
       dispatch,
     } = this.props;
 
     const styles = require('../../../Common/TableCommon/Table.scss');
     // check if table exists
-    const currentTable = schemas.find(
-      s => s.table_name === tableName && s.table_schema === currentSchema
+    const currentTable = findTable(
+      schemas,
+      generateTableDef(tableName, currentSchema)
     );
     if (!currentTable) {
       // throw a 404 exception
       throw new NotFoundError();
     }
 
-    const isColumnAutoIncrement = column => {
-      return (
-        column.column_default ===
-        "nextval('" + tableName + '_' + column.column_name + "_seq'::regclass)"
-      );
-    };
+    const columns = currentTable.columns.sort(ordinalColSort);
 
-    const _columns = schemas.find(
-      x => x.table_name === tableName && x.table_schema === currentSchema
-    ).columns;
     const refs = {};
-    const columns = _columns.sort(ordinalColSort);
 
     const elements = columns.map((col, i) => {
       const colName = col.column_name;
+      const colType = col.data_type;
       const hasDefault = col.column_default && col.column_default.trim() !== '';
       const isNullable = col.is_nullable && col.is_nullable !== 'NO';
+      const isAutoIncrement = isColumnAutoIncrement(col);
 
       refs[colName] = { valueNode: null, nullNode: null, defaultNode: null };
       const inputRef = node => (refs[colName].valueNode = node);
+
       const clicker = e => {
         e.target
           .closest('.radio-inline')
@@ -86,12 +85,12 @@ class InsertItem extends Component {
         e.target.focus();
       };
 
-      const isAutoIncrement = isColumnAutoIncrement(col);
-
       const standardInputProps = {
         className: `form-control ${styles.insertBox}`,
         'data-test': `typed-input-${i}`,
         defaultValue: clone && colName in clone ? clone[colName] : '',
+        ref: inputRef,
+        type: 'text',
         onClick: clicker,
         onChange: (e, val) => {
           if (isAutoIncrement) return;
@@ -123,11 +122,8 @@ class InsertItem extends Component {
           }
         },
         placeholder: 'text',
-        ref: inputRef,
-        type: 'text',
       };
 
-      const colType = col.data_type;
       const placeHolder = hasDefault
         ? col.column_default
         : getPlaceholder(colType);
@@ -155,21 +151,14 @@ class InsertItem extends Component {
         case TEXT:
           typedInput = (
             <TextInput
-              standardProps={standardInputProps}
+              standardProps={{ ...standardInputProps }}
               placeholderProp={getPlaceholder(colType)}
             />
           );
           break;
         case BOOLEAN:
           typedInput = (
-            <select
-              {...standardInputProps}
-              onClick={e => {
-                e.target.parentNode.parentNode.click();
-                e.target.focus();
-              }}
-              defaultValue={placeHolder}
-            >
+            <select {...standardInputProps} defaultValue={placeHolder}>
               <option value="" disabled>
                 -- bool --
               </option>
@@ -236,12 +225,14 @@ class InsertItem extends Component {
     });
 
     let alert = null;
+    let buttonText = this.state.insertedRows > 0 ? 'Insert Again' : 'Save';
     if (ongoingRequest) {
       alert = (
         <div className="hidden alert alert-warning" role="alert">
           Inserting...
         </div>
       );
+      buttonText = 'Saving...';
     } else if (lastError) {
       alert = (
         <div className="hidden alert alert-danger" role="alert">
@@ -259,7 +250,6 @@ class InsertItem extends Component {
     return (
       <div className={styles.container + ' container-fluid'}>
         <TableHeader
-          count={count}
           dispatch={dispatch}
           tableName={tableName}
           tabName="insert"
@@ -298,7 +288,7 @@ class InsertItem extends Component {
                 }}
                 data-test="insert-save-button"
               >
-                {this.state.insertedRows > 0 ? 'Insert Again' : 'Save'}
+                {buttonText}
               </Button>
               <Button
                 color="white"
@@ -346,12 +336,11 @@ InsertItem.propTypes = {
   currentSchema: PropTypes.string.isRequired,
   clone: PropTypes.object,
   schemas: PropTypes.array.isRequired,
-  migrationMode: PropTypes.bool.isRequired,
   ongoingRequest: PropTypes.bool.isRequired,
   lastSuccess: PropTypes.object,
   lastError: PropTypes.object,
   isModalOpen: PropTypes.bool,
-  count: PropTypes.number,
+  migrationMode: PropTypes.bool.isRequired,
   dispatch: PropTypes.func.isRequired,
 };
 

From a27b74ac2b125cf4127aef65a69c2b9e72834b43 Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Fri, 6 Sep 2019 23:18:59 +0530
Subject: [PATCH 2/8] handle identity col + change edit page tab title

---
 .../Services/Data/TableBrowseRows/EditItem.js | 17 ++++++++++++---
 .../Services/Data/TableCommon/TableHeader.js  | 21 ++++++++++++-------
 .../Data/TableInsertItem/InsertItem.js        | 20 +++++++++++-------
 console/src/components/Services/Data/utils.js |  1 +
 4 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/console/src/components/Services/Data/TableBrowseRows/EditItem.js b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
index c4997edecaf5b..8a25aa8800751 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditItem.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@@ -12,6 +12,7 @@ import { ordinalColSort } from '../utils';
 import { replace } from 'react-router-redux';
 import globals from '../../../../Globals';
 import { E_ONGOING_REQ, editItem } from './EditActions';
+import { findTable, generateTableDef } from '../../../Common/utils/pgUtils';
 
 class EditItem extends Component {
   constructor() {
@@ -29,6 +30,7 @@ class EditItem extends Component {
       ongoingRequest,
       lastError,
       lastSuccess,
+      count,
       dispatch,
     } = this.props;
 
@@ -45,17 +47,21 @@ class EditItem extends Component {
 
     const styles = require('../../../Common/TableCommon/Table.scss');
 
-    const currentTable = schemas.find(
-      x => x.table_name === tableName && x.table_schema === currentSchema
+    const currentTable = findTable(
+      schemas,
+      generateTableDef(tableName, currentSchema)
     );
 
     const columns = currentTable.columns.sort(ordinalColSort);
 
     const refs = {};
+
     const elements = columns.map((col, i) => {
       const colName = col.column_name;
       const colType = col.data_type;
       const hasDefault = col.column_default && col.column_default.trim() !== '';
+      const isNullable = col.is_nullable && col.is_nullable !== 'NO';
+      const isIdentity = col.is_identity && col.is_identity !== 'NO';
 
       refs[colName] = { valueNode: null, nullNode: null, defaultNode: null };
       const inputRef = node => (refs[colName].valueNode = node);
@@ -138,6 +144,7 @@ class EditItem extends Component {
               ref={node => {
                 refs[colName].nullNode = node;
               }}
+              disabled={!isNullable}
               name={colName + '-value'}
               value="NULL"
               defaultChecked={oldItem[colName] === null}
@@ -152,6 +159,8 @@ class EditItem extends Component {
               }}
               name={colName + '-value'}
               value="option3"
+              disabled={!hasDefault && !isIdentity}
+              defaultChecked={isIdentity}
             />
             <span className={styles.radioSpan}>Default</span>
           </label>
@@ -185,9 +194,10 @@ class EditItem extends Component {
     return (
       <div className={styles.container + ' container-fluid'}>
         <TableHeader
+          count={count}
           dispatch={dispatch}
           tableName={tableName}
-          tabName="insert"
+          tabName="edit"
           migrationMode={migrationMode}
           currentSchema={currentSchema}
         />
@@ -248,6 +258,7 @@ EditItem.propTypes = {
   lastSuccess: PropTypes.object,
   lastError: PropTypes.object,
   migrationMode: PropTypes.bool.isRequired,
+  count: PropTypes.number,
   dispatch: PropTypes.func.isRequired,
 };
 
diff --git a/console/src/components/Services/Data/TableCommon/TableHeader.js b/console/src/components/Services/Data/TableCommon/TableHeader.js
index fa60b30781b04..8cdf3e3054855 100644
--- a/console/src/components/Services/Data/TableCommon/TableHeader.js
+++ b/console/src/components/Services/Data/TableCommon/TableHeader.js
@@ -15,11 +15,12 @@ const TableHeader = ({
   dispatch,
 }) => {
   const styles = require('../../../Common/TableCommon/Table.scss');
-  let capitalised = tabName;
-  capitalised = capitalised[0].toUpperCase() + capitalised.slice(1);
-  let showCount = '';
+
+  const capitalisedTabName = tabName[0].toUpperCase() + tabName.slice(1);
+
+  let countDisplay = '';
   if (!(count === null || count === undefined)) {
-    showCount = '(' + count + ')';
+    countDisplay = '(' + count + ')';
   }
   const activeTab = tabNameMap[tabName];
 
@@ -55,7 +56,9 @@ const TableHeader = ({
 
   return (
     <div>
-      <Helmet title={capitalised + ' - ' + tableName + ' - Data | Hasura'} />
+      <Helmet
+        title={capitalisedTabName + ' - ' + tableName + ' - Data | Hasura'}
+      />
       <div className={styles.subHeader}>
         <BreadCrumb breadCrumbs={getBreadCrumbs()} />
         <EditableHeading
@@ -82,12 +85,14 @@ const TableHeader = ({
                 }
                 data-test="table-browse-rows"
               >
-                Browse Rows {showCount}
+                Browse Rows {countDisplay}
               </Link>
             </li>
             <li
               role="presentation"
-              className={tabName === 'insert' ? styles.active : ''}
+              className={
+                tabName === 'insert' || tabName === 'edit' ? styles.active : ''
+              }
             >
               <Link
                 to={
@@ -99,7 +104,7 @@ const TableHeader = ({
                 }
                 data-test="table-insert-rows"
               >
-                Insert Row
+                {tabName === 'edit' ? 'Edit' : 'Insert'} Row
               </Link>
             </li>
             {migrationMode ? (
diff --git a/console/src/components/Services/Data/TableInsertItem/InsertItem.js b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
index 0e40efac0ae07..d2f2718852d1a 100644
--- a/console/src/components/Services/Data/TableInsertItem/InsertItem.js
+++ b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@@ -50,15 +50,18 @@ class InsertItem extends Component {
       ongoingRequest,
       lastError,
       lastSuccess,
+      count,
       dispatch,
     } = this.props;
 
     const styles = require('../../../Common/TableCommon/Table.scss');
-    // check if table exists
+
     const currentTable = findTable(
       schemas,
       generateTableDef(tableName, currentSchema)
     );
+
+    // check if table exists
     if (!currentTable) {
       // throw a 404 exception
       throw new NotFoundError();
@@ -73,6 +76,7 @@ class InsertItem extends Component {
       const colType = col.data_type;
       const hasDefault = col.column_default && col.column_default.trim() !== '';
       const isNullable = col.is_nullable && col.is_nullable !== 'NO';
+      const isIdentity = col.is_identity && col.is_identity !== 'NO';
       const isAutoIncrement = isColumnAutoIncrement(col);
 
       refs[colName] = { valueNode: null, nullNode: null, defaultNode: null };
@@ -98,9 +102,10 @@ class InsertItem extends Component {
 
           const textValue = typeof val === 'string' ? val : e.target.value;
 
-          const radioToSelectWhenEmpty = hasDefault
-            ? refs[colName].defaultNode
-            : refs[colName].nullNode;
+          const radioToSelectWhenEmpty =
+            hasDefault || isIdentity
+              ? refs[colName].defaultNode
+              : refs[colName].nullNode;
           refs[colName].insertRadioNode.checked = !!textValue.length;
           radioToSelectWhenEmpty.checked = !textValue.length;
         },
@@ -208,14 +213,14 @@ class InsertItem extends Component {
           </label>
           <label className={styles.radioLabel + ' radio-inline'}>
             <input
-              disabled={!hasDefault}
               type="radio"
               ref={node => {
                 refs[colName].defaultNode = node;
               }}
               name={colName + '-value'}
               value="option3"
-              defaultChecked={hasDefault}
+              disabled={!hasDefault && !isIdentity}
+              defaultChecked={hasDefault || isIdentity}
               data-test={`typed-input-default-${i}`}
             />
             <span className={styles.radioSpan}>Default</span>
@@ -250,6 +255,7 @@ class InsertItem extends Component {
     return (
       <div className={styles.container + ' container-fluid'}>
         <TableHeader
+          count={count}
           dispatch={dispatch}
           tableName={tableName}
           tabName="insert"
@@ -339,8 +345,8 @@ InsertItem.propTypes = {
   ongoingRequest: PropTypes.bool.isRequired,
   lastSuccess: PropTypes.object,
   lastError: PropTypes.object,
-  isModalOpen: PropTypes.bool,
   migrationMode: PropTypes.bool.isRequired,
+  count: PropTypes.number,
   dispatch: PropTypes.func.isRequired,
 };
 
diff --git a/console/src/components/Services/Data/utils.js b/console/src/components/Services/Data/utils.js
index e8f07630cd5fb..ec373d32e70a0 100644
--- a/console/src/components/Services/Data/utils.js
+++ b/console/src/components/Services/Data/utils.js
@@ -39,6 +39,7 @@ export const getPlaceholder = type => {
 export const tabNameMap = {
   browse: 'Browse Rows',
   insert: 'Insert Row',
+  edit: 'Edit Row',
   modify: 'Modify',
   relationships: 'Relationships',
   permissions: 'Permissions',

From e3c14ddb7e7a1aec2a738dbf55e309cb37eac563 Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Fri, 6 Sep 2019 23:45:55 +0530
Subject: [PATCH 3/8] handle object values on edit row

---
 .../Services/Data/TableBrowseRows/EditItem.js | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/console/src/components/Services/Data/TableBrowseRows/EditItem.js b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
index 8a25aa8800751..54aeddfffffc2 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditItem.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@@ -63,6 +63,8 @@ class EditItem extends Component {
       const isNullable = col.is_nullable && col.is_nullable !== 'NO';
       const isIdentity = col.is_identity && col.is_identity !== 'NO';
 
+      const prevValue = oldItem[colName];
+
       refs[colName] = { valueNode: null, nullNode: null, defaultNode: null };
       const inputRef = node => (refs[colName].valueNode = node);
 
@@ -76,7 +78,7 @@ class EditItem extends Component {
       const standardEditProps = {
         className: `form-control ${styles.insertBox}`,
         'data-test': `typed-input-${i}`,
-        defaultValue: oldItem[colName],
+        defaultValue: prevValue,
         ref: inputRef,
         type: 'text',
         onClick: clicker,
@@ -90,6 +92,18 @@ class EditItem extends Component {
         <input {...standardEditProps} placeholder={placeHolder} />
       );
 
+      if (typeof prevValue === 'object') {
+        typedInput = (
+          <JsonInput
+            standardProps={{
+              ...standardEditProps,
+              defaultValue: JSON.stringify(prevValue),
+            }}
+            placeholderProp={getPlaceholder(colType)}
+          />
+        );
+      }
+
       switch (colType) {
         case JSONB:
         case JSONDTYPE:
@@ -97,7 +111,7 @@ class EditItem extends Component {
             <JsonInput
               standardProps={{
                 ...standardEditProps,
-                defaultValue: JSON.stringify(oldItem[colName]),
+                defaultValue: JSON.stringify(prevValue),
               }}
               placeholderProp={getPlaceholder(colType)}
             />
@@ -147,7 +161,7 @@ class EditItem extends Component {
               disabled={!isNullable}
               name={colName + '-value'}
               value="NULL"
-              defaultChecked={oldItem[colName] === null}
+              defaultChecked={prevValue === null}
             />
             <span className={styles.radioSpan}>NULL</span>
           </label>

From 59847137bc500db5947e245212942702a9c4e3ec Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Sat, 7 Sep 2019 01:01:14 +0530
Subject: [PATCH 4/8] italicize views in untacked section

---
 console/src/components/Services/Data/Schema/Schema.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/console/src/components/Services/Data/Schema/Schema.js b/console/src/components/Services/Data/Schema/Schema.js
index 86cd627aac82b..5346b7a8450f6 100644
--- a/console/src/components/Services/Data/Schema/Schema.js
+++ b/console/src/components/Services/Data/Schema/Schema.js
@@ -37,6 +37,7 @@ import { createNewSchema, deleteCurrentSchema } from './Actions';
 import CollapsibleToggle from '../../../Common/CollapsibleToggle/CollapsibleToggle';
 import gqlPattern from '../Common/GraphQLValidation';
 import GqlCompatibilityWarning from '../../../Common/GqlCompatibilityWarning/GqlCompatibilityWarning';
+import { displayTableName } from '../../../Common/utils/pgUtils';
 
 class Schema extends Component {
   constructor(props) {
@@ -365,7 +366,7 @@ class Schema extends Component {
                   Track
                 </Button>
               </div>
-              <div className={styles.display_inline}>{table.table_name}</div>
+              <div className={styles.display_inline}>{displayTableName(table)}</div>
               {gqlCompatibilityWarning}
             </div>
           );

From f2a5a10b293febe2dd6c456c4aa091e4e08101b6 Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Mon, 9 Sep 2019 16:14:35 +0530
Subject: [PATCH 5/8] add identity property display for columns

---
 .../Data/TableBrowseRows/ViewHeader.js        | 143 ------------------
 .../Data/TableModify/ColumnEditorList.js      |   5 +
 2 files changed, 5 insertions(+), 143 deletions(-)
 delete mode 100644 console/src/components/Services/Data/TableBrowseRows/ViewHeader.js

diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewHeader.js b/console/src/components/Services/Data/TableBrowseRows/ViewHeader.js
deleted file mode 100644
index 3f15386ecc12b..0000000000000
--- a/console/src/components/Services/Data/TableBrowseRows/ViewHeader.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-import Helmet from 'react-helmet';
-import { changeTableOrViewName } from '../TableModify/ModifyActions';
-import EditableHeading from '../../../Common/EditableHeading/EditableHeading';
-import BreadCrumb from '../../../Common/Layout/BreadCrumb/BreadCrumb';
-import { tabNameMap } from '../utils';
-
-const ViewHeader = ({
-  tableName,
-  tabName,
-  currentSchema,
-  migrationMode,
-  dispatch,
-}) => {
-  const styles = require('../../../Common/TableCommon/Table.scss');
-  let capitalised = tabName;
-  capitalised = capitalised[0].toUpperCase() + capitalised.slice(1);
-  const activeTab = tabNameMap[tabName];
-
-  const saveViewNameChange = newName => {
-    dispatch(changeTableOrViewName(false, tableName, newName));
-  };
-
-  const getBreadCrumbs = () => {
-    return [
-      {
-        title: 'Data',
-        url: '/data',
-      },
-      {
-        title: 'Schema',
-        url: '/data/schema/',
-      },
-      {
-        title: currentSchema,
-        url: '/data/schema/' + currentSchema,
-      },
-      {
-        title: tableName,
-        url:
-          '/data/schema/' + currentSchema + '/views/' + tableName + '/browse',
-      },
-      {
-        title: activeTab,
-        url: null,
-      },
-    ];
-  };
-
-  return (
-    <div>
-      <Helmet title={capitalised + ' - ' + tableName + ' - Data | Hasura'} />
-      <div className={styles.subHeader}>
-        <BreadCrumb breadCrumbs={getBreadCrumbs()} />
-        <EditableHeading
-          currentValue={tableName}
-          save={saveViewNameChange}
-          loading={false}
-          editable={tabName === 'modify'}
-          dispatch={dispatch}
-          property="view"
-        />
-        <div className={styles.nav}>
-          <ul className="nav nav-pills">
-            <li
-              role="presentation"
-              className={tabName === 'browse' ? styles.active : ''}
-            >
-              <Link
-                to={
-                  '/data/schema/' +
-                  currentSchema +
-                  '/views/' +
-                  tableName +
-                  '/browse'
-                }
-                data-test="table-browse-rows"
-              >
-                Browse Rows
-              </Link>
-            </li>
-            {migrationMode ? (
-              <li
-                role="presentation"
-                className={tabName === 'modify' ? styles.active : ''}
-              >
-                <Link
-                  to={
-                    '/data/schema/' +
-                    currentSchema +
-                    '/views/' +
-                    tableName +
-                    '/modify'
-                  }
-                  data-test="table-modify"
-                >
-                  Modify
-                </Link>
-              </li>
-            ) : null}
-            <li
-              role="presentation"
-              className={tabName === 'relationships' ? styles.active : ''}
-            >
-              <Link
-                to={
-                  '/data/schema/' +
-                  currentSchema +
-                  '/views/' +
-                  tableName +
-                  '/relationships'
-                }
-                data-test="table-relationships"
-              >
-                Relationships
-              </Link>
-            </li>
-            <li
-              role="presentation"
-              className={tabName === 'permissions' ? styles.active : ''}
-            >
-              <Link
-                to={
-                  '/data/schema/' +
-                  currentSchema +
-                  '/views/' +
-                  tableName +
-                  '/permissions'
-                }
-                data-test="table-permissions"
-              >
-                Permissions
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div className="clearfix" />
-      </div>
-    </div>
-  );
-};
-export default ViewHeader;
diff --git a/console/src/components/Services/Data/TableModify/ColumnEditorList.js b/console/src/components/Services/Data/TableModify/ColumnEditorList.js
index 367689ad1c336..4cca9fc68a4eb 100644
--- a/console/src/components/Services/Data/TableModify/ColumnEditorList.js
+++ b/console/src/components/Services/Data/TableModify/ColumnEditorList.js
@@ -66,6 +66,7 @@ const ColumnEditorList = ({
         col.data_type !== 'USER-DEFINED' ? col.data_type : col.udt_name,
       type: col.udt_name,
       isNullable: col.is_nullable === 'YES',
+      isIdentity: col.is_identity === 'YES',
       pkConstraint: columnPKConstraints[colName],
       isUnique:
         (columnPKConstraints[colName] && pkLength === 1) ||
@@ -122,6 +123,10 @@ const ColumnEditorList = ({
         propertiesList.push('unique');
       }
 
+      if (columnProperties.isIdentity) {
+        propertiesList.push('identity');
+      }
+
       if (columnProperties.isNullable) {
         propertiesList.push('nullable');
       }

From 5fca5d1b5c0eb3945f2dadbb408c165b3628c2bd Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Mon, 9 Sep 2019 16:17:31 +0530
Subject: [PATCH 6/8] update utils

---
 console/src/components/Common/utils/pgUtils.js     | 12 ++++++------
 console/src/components/Common/utils/routesUtils.js |  8 ++++++++
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/console/src/components/Common/utils/pgUtils.js b/console/src/components/Common/utils/pgUtils.js
index 6154d3cf9b01e..dcecdd300c2c7 100644
--- a/console/src/components/Common/utils/pgUtils.js
+++ b/console/src/components/Common/utils/pgUtils.js
@@ -78,13 +78,13 @@ export const getTrackedTables = tables => {
 };
 
 export const isColumnAutoIncrement = column => {
+  const columnDefault = column.column_default;
+
+  const autoIncrementDefaultRegex = /^nextval\('(.*)_seq'::regclass\)$/;
+
   return (
-    column.column_default ===
-    "nextval('" +
-      column.table_name +
-      '_' +
-      column.column_name +
-      "_seq'::regclass)"
+    columnDefault &&
+    columnDefault.match(new RegExp(autoIncrementDefaultRegex, 'gi'))
   );
 };
 
diff --git a/console/src/components/Common/utils/routesUtils.js b/console/src/components/Common/utils/routesUtils.js
index fd139f2b2f45b..0052d0839ce62 100644
--- a/console/src/components/Common/utils/routesUtils.js
+++ b/console/src/components/Common/utils/routesUtils.js
@@ -32,6 +32,14 @@ export const getTableBrowseRoute = table => {
   return `${getTableBaseRoute(table)}/browse`;
 };
 
+export const getTableInsertRowRoute = table => {
+  return `${getTableBaseRoute(table)}/insert`;
+};
+
+export const getTableEditRowRoute = table => {
+  return `${getTableBaseRoute(table)}/edit`;
+};
+
 export const getTableModifyRoute = table => {
   return `${getTableBaseRoute(table)}/modify`;
 };

From 9461fa47c7ea022b4709fb63dc06b65a4e2d98e0 Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Mon, 9 Sep 2019 16:22:10 +0530
Subject: [PATCH 7/8] refactor tableheader

---
 .../Services/Data/TableBrowseRows/EditItem.js |   3 +-
 .../Data/TableBrowseRows/ViewTable.js         |  17 +-
 .../Services/Data/TableCommon/TableHeader.js  | 166 +++++++-----------
 .../Data/TableInsertItem/InsertItem.js        |   3 +-
 .../Data/TableModify/ModifyActions.js         |   4 +-
 .../Services/Data/TableModify/ModifyTable.js  |   3 +-
 .../Services/Data/TableModify/ModifyView.js   |   7 +-
 .../Data/TablePermissions/Permissions.js      |  36 +---
 .../Data/TableRelationships/Relationships.js  |   3 +-
 .../TableRelationships/RelationshipsView.js   |   7 +-
 10 files changed, 84 insertions(+), 165 deletions(-)

diff --git a/console/src/components/Services/Data/TableBrowseRows/EditItem.js b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
index 54aeddfffffc2..8249436937b14 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditItem.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@@ -210,10 +210,9 @@ class EditItem extends Component {
         <TableHeader
           count={count}
           dispatch={dispatch}
-          tableName={tableName}
+          table={currentTable}
           tabName="edit"
           migrationMode={migrationMode}
-          currentSchema={currentSchema}
         />
         <br />
         <div className={styles.insertContainer + ' container-fluid'}>
diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewTable.js b/console/src/components/Services/Data/TableBrowseRows/ViewTable.js
index ade30f6f364d3..7f341c30ef240 100644
--- a/console/src/components/Services/Data/TableBrowseRows/ViewTable.js
+++ b/console/src/components/Services/Data/TableBrowseRows/ViewTable.js
@@ -10,7 +10,6 @@ import {
 } from './ViewActions';
 import { setTable } from '../DataActions';
 import TableHeader from '../TableCommon/TableHeader';
-import ViewHeader from './ViewHeader';
 import ViewRows from './ViewRows';
 
 import { NotFoundError } from '../../../Error/PageNotFound';
@@ -142,7 +141,6 @@ class ViewTable extends Component {
   render() {
     const {
       tableName,
-      tableComment,
       schemas,
       query,
       curFilter,
@@ -207,24 +205,13 @@ class ViewTable extends Component {
     );
 
     // Choose the right nav bar header thing
-    const header = isView ? (
-      <ViewHeader
-        dispatch={dispatch}
-        tableName={tableName}
-        tabName="browse"
-        tableComment={tableComment}
-        migrationMode={migrationMode}
-        currentSchema={currentSchema}
-      />
-    ) : (
+    const header = (
       <TableHeader
         count={count}
         dispatch={dispatch}
-        tableName={tableName}
-        tableComment={tableComment}
+        table={tableSchema}
         tabName="browse"
         migrationMode={migrationMode}
-        currentSchema={currentSchema}
       />
     );
 
diff --git a/console/src/components/Services/Data/TableCommon/TableHeader.js b/console/src/components/Services/Data/TableCommon/TableHeader.js
index 8cdf3e3054855..7b0ba7892ecf6 100644
--- a/console/src/components/Services/Data/TableCommon/TableHeader.js
+++ b/console/src/components/Services/Data/TableCommon/TableHeader.js
@@ -1,23 +1,34 @@
 import React from 'react';
 import { Link } from 'react-router';
 import Helmet from 'react-helmet';
-import { changeTableOrViewName } from '../TableModify/ModifyActions';
+import { changeTableName } from '../TableModify/ModifyActions';
 import EditableHeading from '../../../Common/EditableHeading/EditableHeading';
 import BreadCrumb from '../../../Common/Layout/BreadCrumb/BreadCrumb';
 import { tabNameMap } from '../utils';
+import {
+  checkIfTable,
+  getTableName,
+  getTableSchema,
+} from '../../../Common/utils/pgUtils';
+import {
+  getSchemaBaseRoute,
+  getTableBrowseRoute,
+  getTableEditRowRoute,
+  getTableInsertRowRoute,
+  getTableModifyRoute,
+  getTablePermissionsRoute,
+  getTableRelationshipsRoute,
+} from '../../../Common/utils/routesUtils';
 
-const TableHeader = ({
-  tableName,
-  tabName,
-  count,
-  migrationMode,
-  currentSchema,
-  dispatch,
-}) => {
+const TableHeader = ({ tabName, count, table, migrationMode, dispatch }) => {
   const styles = require('../../../Common/TableCommon/Table.scss');
 
   const capitalisedTabName = tabName[0].toUpperCase() + tabName.slice(1);
 
+  const tableName = getTableName(table);
+  const tableSchema = getTableSchema(table);
+  const isTable = checkIfTable(table);
+
   let countDisplay = '';
   if (!(count === null || count === undefined)) {
     countDisplay = '(' + count + ')';
@@ -25,7 +36,7 @@ const TableHeader = ({
   const activeTab = tabNameMap[tabName];
 
   const saveTableNameChange = newName => {
-    dispatch(changeTableOrViewName(true, tableName, newName));
+    dispatch(changeTableName(tableName, newName, isTable));
   };
 
   const getBreadCrumbs = () => {
@@ -39,13 +50,12 @@ const TableHeader = ({
         url: '/data/schema/',
       },
       {
-        title: currentSchema,
-        url: '/data/schema/' + currentSchema,
+        title: tableSchema,
+        url: getSchemaBaseRoute(tableSchema),
       },
       {
         title: tableName,
-        url:
-          '/data/schema/' + currentSchema + '/tables/' + tableName + '/browse',
+        url: getTableBrowseRoute(table),
       },
       {
         title: activeTab,
@@ -54,6 +64,16 @@ const TableHeader = ({
     ];
   };
 
+  const getTab = (tab, link, title, dataTestId) => {
+    return (
+      <li role="presentation" className={tabName === tab ? styles.active : ''}>
+        <Link to={link} data-test={dataTestId || 'table-' + tab}>
+          {title}
+        </Link>
+      </li>
+    );
+  };
+
   return (
     <div>
       <Helmet
@@ -67,99 +87,37 @@ const TableHeader = ({
           loading={false}
           editable={tabName === 'modify'}
           dispatch={dispatch}
-          property="table"
+          property={isTable ? 'table' : 'view'}
         />
         <div className={styles.nav}>
           <ul className="nav nav-pills">
-            <li
-              role="presentation"
-              className={tabName === 'browse' ? styles.active : ''}
-            >
-              <Link
-                to={
-                  '/data/schema/' +
-                  currentSchema +
-                  '/tables/' +
-                  tableName +
-                  '/browse'
-                }
-                data-test="table-browse-rows"
-              >
-                Browse Rows {countDisplay}
-              </Link>
-            </li>
-            <li
-              role="presentation"
-              className={
-                tabName === 'insert' || tabName === 'edit' ? styles.active : ''
-              }
-            >
-              <Link
-                to={
-                  '/data/schema/' +
-                  currentSchema +
-                  '/tables/' +
-                  tableName +
-                  '/insert'
-                }
-                data-test="table-insert-rows"
-              >
-                {tabName === 'edit' ? 'Edit' : 'Insert'} Row
-              </Link>
-            </li>
-            {migrationMode ? (
-              <li
-                role="presentation"
-                className={tabName === 'modify' ? styles.active : ''}
-              >
-                <Link
-                  to={
-                    '/data/schema/' +
-                    currentSchema +
-                    '/tables/' +
-                    tableName +
-                    '/modify'
-                  }
-                  data-test="table-modify"
-                >
-                  Modify
-                </Link>
-              </li>
-            ) : null}
-            <li
-              role="presentation"
-              className={tabName === 'relationships' ? styles.active : ''}
-            >
-              <Link
-                to={
-                  '/data/schema/' +
-                  currentSchema +
-                  '/tables/' +
-                  tableName +
-                  '/relationships'
-                }
-                data-test="table-relationships"
-              >
-                Relationships
-              </Link>
-            </li>
-            <li
-              role="presentation"
-              className={tabName === 'permissions' ? styles.active : ''}
-            >
-              <Link
-                to={
-                  '/data/schema/' +
-                  currentSchema +
-                  '/tables/' +
-                  tableName +
-                  '/permissions'
-                }
-                data-test="table-permissions"
-              >
-                Permissions
-              </Link>
-            </li>
+            {getTab(
+              'browse',
+              getTableBrowseRoute(table),
+              `Browse Rows ${countDisplay}`,
+              'table-browse-rows'
+            )}
+            {isTable &&
+              getTab(
+                'insert',
+                getTableInsertRowRoute(table),
+                'Insert Row',
+                'table-insert-rows'
+              )}
+            {migrationMode &&
+              getTab('modify', getTableModifyRoute(table), 'Modify')}
+            {getTab(
+              'relationships',
+              getTableRelationshipsRoute(table),
+              'Relationships'
+            )}
+            {getTab(
+              'permissions',
+              getTablePermissionsRoute(table),
+              'Permissions'
+            )}
+            {tabName === 'edit' &&
+              getTab('edit', getTableEditRowRoute(table), 'Edit Row')}
           </ul>
         </div>
         <div className="clearfix" />
diff --git a/console/src/components/Services/Data/TableInsertItem/InsertItem.js b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
index d2f2718852d1a..373f09f566ece 100644
--- a/console/src/components/Services/Data/TableInsertItem/InsertItem.js
+++ b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@@ -257,10 +257,9 @@ class InsertItem extends Component {
         <TableHeader
           count={count}
           dispatch={dispatch}
-          tableName={tableName}
+          table={currentTable}
           tabName="insert"
           migrationMode={migrationMode}
-          currentSchema={currentSchema}
         />
         <br />
         <div className={styles.insertContainer + ' container-fluid'}>
diff --git a/console/src/components/Services/Data/TableModify/ModifyActions.js b/console/src/components/Services/Data/TableModify/ModifyActions.js
index ca1e4ad5c854a..505087cf098e0 100644
--- a/console/src/components/Services/Data/TableModify/ModifyActions.js
+++ b/console/src/components/Services/Data/TableModify/ModifyActions.js
@@ -487,7 +487,7 @@ const setUniqueKeys = keys => ({
   keys,
 });
 
-const changeTableOrViewName = (isTable, oldName, newName) => {
+const changeTableName = (oldName, newName, isTable) => {
   return (dispatch, getState) => {
     const property = isTable ? 'table' : 'view';
 
@@ -2285,7 +2285,7 @@ export {
   TOGGLE_ENUM,
   TOGGLE_ENUM_SUCCESS,
   TOGGLE_ENUM_FAILURE,
-  changeTableOrViewName,
+  changeTableName,
   fetchViewDefinition,
   handleMigrationErrors,
   saveColumnChangesSql,
diff --git a/console/src/components/Services/Data/TableModify/ModifyTable.js b/console/src/components/Services/Data/TableModify/ModifyTable.js
index eb9db05acc48a..f9a74cd3879e6 100644
--- a/console/src/components/Services/Data/TableModify/ModifyTable.js
+++ b/console/src/components/Services/Data/TableModify/ModifyTable.js
@@ -135,10 +135,9 @@ class ModifyTable extends React.Component {
       <div className={`${styles.container} container-fluid`}>
         <TableHeader
           dispatch={dispatch}
-          tableName={tableName}
+          table={tableSchema}
           tabName="modify"
           migrationMode={migrationMode}
-          currentSchema={currentSchema}
         />
         <br />
         <div className={`container-fluid ${styles.padd_left_remove}`}>
diff --git a/console/src/components/Services/Data/TableModify/ModifyView.js b/console/src/components/Services/Data/TableModify/ModifyView.js
index 49bc41ef37ff1..2ee024323dd8b 100644
--- a/console/src/components/Services/Data/TableModify/ModifyView.js
+++ b/console/src/components/Services/Data/TableModify/ModifyView.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import AceEditor from 'react-ace';
-import ViewHeader from '../TableBrowseRows/ViewHeader';
+import TableHeader from '../TableCommon/TableHeader';
 import {
   fetchViewDefinition,
   deleteViewSql,
@@ -150,11 +150,10 @@ class ModifyView extends Component {
 
     return (
       <div className={styles.container + ' container-fluid'}>
-        <ViewHeader
+        <TableHeader
           dispatch={dispatch}
-          tableName={tableName}
+          table={tableSchema}
           tabName="modify"
-          currentSchema={currentSchema}
           migrationMode={migrationMode}
         />
         <br />
diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.js b/console/src/components/Services/Data/TablePermissions/Permissions.js
index 04b0e3020a487..0deadba884e21 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@@ -38,7 +38,6 @@ import {
 
 import PermissionBuilder from './PermissionBuilder/PermissionBuilder';
 import TableHeader from '../TableCommon/TableHeader';
-import ViewHeader from '../TableBrowseRows/ViewHeader';
 import CollapsibleToggle from '../../../Common/CollapsibleToggle/CollapsibleToggle';
 import EnhancedInput from '../../../Common/InputChecker/InputChecker';
 
@@ -176,33 +175,14 @@ class Permissions extends Component {
     };
 
     const getHeader = tableSchema => {
-      const getViewHeader = () => {
-        return (
-          <ViewHeader
-            dispatch={dispatch}
-            tableName={tableName}
-            tabName="permissions"
-            migrationMode={migrationMode}
-            currentSchema={currentSchema}
-          />
-        );
-      };
-
-      const getTableHeader = () => {
-        return (
-          <TableHeader
-            dispatch={dispatch}
-            tableName={tableName}
-            tabName="permissions"
-            migrationMode={migrationMode}
-            currentSchema={currentSchema}
-          />
-        );
-      };
-
-      const isView = tableSchema.view_info;
-
-      return isView ? getViewHeader() : getTableHeader();
+      return (
+        <TableHeader
+          dispatch={dispatch}
+          table={tableSchema}
+          tabName="permissions"
+          migrationMode={migrationMode}
+        />
+      );
     };
 
     const getPermissionsTable = (tableSchema, queryTypes, roleList) => {
diff --git a/console/src/components/Services/Data/TableRelationships/Relationships.js b/console/src/components/Services/Data/TableRelationships/Relationships.js
index e50462478e7ca..4b5e7d4b632a3 100644
--- a/console/src/components/Services/Data/TableRelationships/Relationships.js
+++ b/console/src/components/Services/Data/TableRelationships/Relationships.js
@@ -422,9 +422,8 @@ class Relationships extends Component {
       <div className={`${styles.container} container-fluid`}>
         <TableHeader
           dispatch={dispatch}
-          tableName={tableName}
+          table={tableSchema}
           tabName="relationships"
-          currentSchema={currentSchema}
           migrationMode={migrationMode}
         />
         <br />
diff --git a/console/src/components/Services/Data/TableRelationships/RelationshipsView.js b/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
index 9d5caafbb880c..244ac03435abc 100644
--- a/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
+++ b/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ViewHeader from '../TableBrowseRows/ViewHeader';
+import TableHeader from '../TableCommon/TableHeader';
 import { RESET } from '../TableModify/ModifyActions';
 import { findAllFromRel } from '../utils';
 import { getObjArrRelList } from './utils';
@@ -135,11 +135,10 @@ class RelationshipsView extends Component {
 
     return (
       <div className={`${styles.container} container-fluid`}>
-        <ViewHeader
+        <TableHeader
           dispatch={dispatch}
-          tableName={tableName}
+          table={tableSchema}
           tabName="relationships"
-          currentSchema={currentSchema}
           migrationMode={migrationMode}
         />
         <br />

From 47aaa4ba9a577e2504dcff5c7be6f209214bf0fa Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Mon, 9 Sep 2019 18:57:46 +0530
Subject: [PATCH 8/8] fix tests

---
 console/cypress/integration/data/insert-browse/spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/console/cypress/integration/data/insert-browse/spec.js b/console/cypress/integration/data/insert-browse/spec.js
index 0e75fb55d7023..1dfa5c31d381f 100644
--- a/console/cypress/integration/data/insert-browse/spec.js
+++ b/console/cypress/integration/data/insert-browse/spec.js
@@ -413,7 +413,7 @@ export const passEditButton = () => {
     '{selectall}{del}'
   );
   cy.get(getElementFromAlias(`typed-input-${textIndex}`)).type('new-text');
-  cy.get(getElementFromAlias('save-button')).click();
+  cy.get(getElementFromAlias('edit-save-button')).click();
   // cy.get('h4').contains('Edited!', { timeout: 7000 });
   // cy.get('.notification-error');
   cy.wait(7000);