hasura · rikinsk · Sep 9, 2019 · Sep 6, 2019 · Sep 6, 2019 · Sep 6, 2019
@@ -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);

@@ -77,6 +77,17 @@ export const getTrackedTables = tables => {
   return tables.filter(t => t.is_table_tracked);
 };
 
+export const isColumnAutoIncrement = column => {
+  const columnDefault = column.column_default;
+
+  const autoIncrementDefaultRegex = /^nextval\('(.*)_seq'::regclass\)$/;
+
+  return (
+    columnDefault &&
+    columnDefault.match(new RegExp(autoIncrementDefaultRegex, 'gi'))
+  );
+};
+
 /*** Table/View permissions utils ***/
 export const getTablePermissions = (table, role = null, action = null) => {
   let tablePermissions = table.permissions;

@@ -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`;
 };

@@ -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>
           );

@@ -1,51 +1,25 @@
 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';
+import { findTable, generateTableDef } from '../../../Common/utils/pgUtils';
 
 class EditItem extends Component {
   constructor() {
     super();
     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,
@@ -56,6 +30,7 @@ class EditItem extends Component {
       ongoingRequest,
       lastError,
       lastSuccess,
+      count,
       dispatch,
     } = this.props;
 
@@ -72,20 +47,27 @@ 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;
+    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';
+
+      const prevValue = oldItem[colName];
+
       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,34 +77,41 @@ class EditItem extends Component {
 
       const standardEditProps = {
         className: `form-control ${styles.insertBox}`,
-        onClick: clicker,
-        ref: inputRef,
         'data-test': `typed-input-${i}`,
+        defaultValue: prevValue,
+        ref: inputRef,
         type: 'text',
-        defaultValue: oldItem[colName],
+        onClick: clicker,
       };
 
-      // Text type
+      const placeHolder = hasDefault
+        ? col.column_default
+        : getPlaceholder(colType);
+
       let typedInput = (
-        <input {...standardEditProps} placeholder={getPlaceholder(colType)} />
+        <input {...standardEditProps} placeholder={placeHolder} />
       );
 
+      if (typeof prevValue === 'object') {
+        typedInput = (
+          <JsonInput
+            standardProps={{
+              ...standardEditProps,
+              defaultValue: JSON.stringify(prevValue),
+            }}
+            placeholderProp={getPlaceholder(colType)}
+          />
+        );
+      }
+
       switch (colType) {
-        case INTEGER:
-        case BIGINT:
-        case NUMERIC:
-        case TIMESTAMP:
-        case DATE:
-        case TIMETZ:
-        case UUID:
-          break;
         case JSONB:
         case JSONDTYPE:
           typedInput = (
             <JsonInput
               standardProps={{
                 ...standardEditProps,
-                defaultValue: JSON.stringify(oldItem[colName]),
+                defaultValue: JSON.stringify(prevValue),
               }}
               placeholderProp={getPlaceholder(colType)}
             />
@@ -139,6 +128,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>
@@ -166,9 +158,10 @@ class EditItem extends Component {
               ref={node => {
                 refs[colName].nullNode = node;
               }}
+              disabled={!isNullable}
               name={colName + '-value'}
               value="NULL"
-              defaultChecked={oldItem[colName] === null ? true : false}
+              defaultChecked={prevValue === null}
             />
             <span className={styles.radioSpan}>NULL</span>
           </label>
@@ -180,6 +173,8 @@ class EditItem extends Component {
               }}
               name={colName + '-value'}
               value="option3"
+              disabled={!hasDefault && !isIdentity}
+              defaultChecked={isIdentity}
             />
             <span className={styles.radioSpan}>Default</span>
           </label>
@@ -209,19 +204,20 @@ class EditItem extends Component {
         </div>
       );
     }
+
     return (
       <div className={styles.container + ' container-fluid'}>
         <TableHeader
+          count={count}
           dispatch={dispatch}
-          tableName={tableName}
-          tabName="insert"
+          table={currentTable}
+          tabName="edit"
           migrationMode={migrationMode}
-          currentSchema={currentSchema}
         />
         <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 +243,7 @@ class EditItem extends Component {
                   });
                   dispatch(editItem(tableName, inputValues));
                 }}
-                data-test="save-button"
+                data-test="edit-save-button"
               >
                 {buttonText}
               </Button>
@@ -275,6 +271,7 @@ EditItem.propTypes = {
   lastSuccess: PropTypes.object,
   lastError: PropTypes.object,
   migrationMode: PropTypes.bool.isRequired,
+  count: PropTypes.number,
   dispatch: PropTypes.func.isRequired,
 };