fix console bugs (close #2030, #2032, #226) (#2044)

* fix timestamp column shown as text in modify section * fix foreign key update bug in case of capital letters in name * show column type, default value, constraint names as properties in modify section * display disabled action btns in browse rows if no primary key set * add tooltips to event trigger / remote schema try it out examples
hasura · Apr 24, 2019 · ed3e9ca · ed3e9ca
1 parent 83c3094
commit ed3e9ca
Show file tree

Hide file tree

Showing 13 changed files with 231 additions and 277 deletions.
diff --git a/console/cypress/helpers/dataHelpers.js b/console/cypress/helpers/dataHelpers.js
@@ -8,8 +8,8 @@ export const dataTypes = [
   'text',
   'numeric',
   'date',
-  'timestamptz',
-  'timetz',
+  'timestamp with time zone',
+  'time with time zone',
   'boolean',
 ];
 export const typeDefaults = {
@@ -19,8 +19,8 @@ export const typeDefaults = {
   text: 'test-text',
   numeric: '0.55555',
   date: 'now()',
-  timestamptz: 'now()',
-  timetz: 'now()',
+  'timestamp with time zone': 'now()',
+  'time with time zone': 'now()',
   boolean: 'false',
 };
 export const queryTypes = ['insert', 'select', 'update', 'delete'];

diff --git a/console/src/components/Services/CommonLanding/TryItOut.js b/console/src/components/Services/CommonLanding/TryItOut.js
@@ -72,13 +72,14 @@ class TryItOut extends React.Component {
               href={this.props.googleCloudLink}
               target={'_blank'}
               rel="noopener noreferrer"
+              title={'Google Cloud'}
             >
               <div className={styles.boxSmall}>
                 <div className={styles.logoIcon}>
                   <img
                     className={'img-responsive'}
                     src={googleCloud}
-                    alt={'googleCloud'}
+                    alt={'Google Cloud'}
                   />
                 </div>
               </div>
@@ -87,6 +88,7 @@ class TryItOut extends React.Component {
               href={this.props.MicrosoftAzureLink}
               target={'_blank'}
               rel="noopener noreferrer"
+              title={'Microsoft Azure'}
             >
               <div className={styles.boxSmall}>
                 <div className={styles.logoIcon}>
@@ -102,6 +104,7 @@ class TryItOut extends React.Component {
               href={this.props.awsLink}
               target={'_blank'}
               rel="noopener noreferrer"
+              title={'AWS'}
             >
               <div className={styles.boxSmall}>
                 <div className={styles.logoIcon}>

diff --git a/console/src/components/Services/Data/Add/AddTable.js b/console/src/components/Services/Data/Add/AddTable.js
@@ -9,8 +9,8 @@ import PrimaryKeySelector from '../Common/ReusableComponents/PrimaryKeySelector'
 import ForeignKeyWrapper from './ForeignKeyWrapper';
 
 import dataTypes from '../Common/DataTypes';
+import { TIMESTAMP, DATE, UUID } from '../utils';
 import { showErrorNotification } from '../Notification';
-import { setForeignKeys } from './AddActions';
 
 import {
   setTableName,
@@ -22,16 +22,20 @@ import {
   setColDefault,
   setColUnique,
   removeColDefault,
+  setForeignKeys,
+  validationError,
+  resetValidation,
+  setDefaults,
+  setPk,
+  createTableSql,
   addCol,
 } from './AddActions';
-import { setDefaults, setPk, createTableSql } from './AddActions';
-import { validationError, resetValidation } from './AddActions';
 
 import {
   ATLEAST_ONE_PRIMARY_KEY_MSG,
   ATLEAST_ONE_COLUMN_MSG,
+  fieldRepeatedMsg,
 } from './AddWarning';
-import { fieldRepeatedMsg } from './AddWarning';
 
 import {
   listDuplicate,
@@ -57,7 +61,6 @@ class AddTable extends Component {
     this.props.dispatch(setDefaults());
     const { columns, dispatch } = this.props;
     columns.map((column, i) => {
-      //eslint-disable-line
       let defValue = '';
       if ('default' in column) {
         defValue = column.default.value;
@@ -249,11 +252,11 @@ class AddTable extends Component {
         defValue = column.default.value;
       }
       let defPlaceholder = 'default_value';
-      if (column.type === 'timestamptz') {
+      if (column.type === TIMESTAMP) {
         defPlaceholder = 'example: now()';
-      } else if (column.type === 'date') {
+      } else if (column.type === DATE) {
         defPlaceholder = '';
-      } else if (column.type === 'uuid') {
+      } else if (column.type === UUID) {
         defPlaceholder = 'example: gen_random_uuid()';
       }
       return (

diff --git a/console/src/components/Services/Data/Common/DataTypes.js b/console/src/components/Services/Data/Common/DataTypes.js
@@ -49,13 +49,13 @@ const dataTypes = [
   },
   {
     name: 'Timestamp',
-    value: 'timestamptz',
+    value: 'timestamp with time zone',
     description: 'date and time, including time zone',
     hasuraDatatype: 'timestamp with time zone',
   },
   {
     name: 'Time',
-    value: 'timetz',
+    value: 'time with time zone',
     description: 'time of day (no time zone)',
     hasuraDatatype: 'time with time zone',
   },

diff --git a/console/src/components/Services/Data/TableBrowseRows/EditItem.js b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@@ -18,7 +18,7 @@ import {
   JSONB,
   TIMESTAMP,
   TIMETZ,
-} from '../../../../constants';
+} from '../utils';
 // import RichTextEditor from 'react-rte';
 import { replace } from 'react-router-redux';
 

diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js
@@ -170,17 +170,31 @@ const ViewRows = ({
         let deleteButton;
         let expandButton;
 
-        const getActionButton = (type, icon, title, handleClick) => {
+        const getActionButton = (
+          type,
+          icon,
+          title,
+          handleClick,
+          requirePK = false
+        ) => {
+          const disabled = requirePK && !_hasPrimaryKey;
+
+          const disabledOnClick = e => {
+            e.preventDefault();
+            e.stopPropagation();
+          };
+
           return (
             <Button
               className={
                 styles.tableActionBtn + ' ' + styles.add_mar_right_small
               }
               color="white"
               size="xs"
-              onClick={handleClick}
-              title={title}
+              onClick={disabled ? disabledOnClick : handleClick}
+              title={disabled ? 'No primary key to identify row' : title}
               data-test={`row-${type}-button-${rowIndex}`}
+              disabled={disabled}
             >
               {icon}
             </Button>
@@ -222,7 +236,13 @@ const ViewRows = ({
 
           const editTitle = 'Edit row';
 
-          return getActionButton('edit', editIcon, editTitle, handleEditClick);
+          return getActionButton(
+            'edit',
+            editIcon,
+            editTitle,
+            handleEditClick,
+            true
+          );
         };
 
         const getDeleteButton = pkClause => {
@@ -238,7 +258,8 @@ const ViewRows = ({
             'delete',
             deleteIcon,
             deleteTitle,
-            handleDeleteClick
+            handleDeleteClick,
+            true
           );
         };
 
@@ -258,13 +279,14 @@ const ViewRows = ({
             'clone',
             cloneIcon,
             cloneTitle,
-            handleCloneClick
+            handleCloneClick,
+            true
           );
         };
 
-        const allowModify = !_isSingleRow && !isView && _hasPrimaryKey;
+        const showActionBtns = !_isSingleRow && !isView;
 
-        if (allowModify) {
+        if (showActionBtns) {
           const pkClause = getPKClause();
 
           editButton = getEditButton(pkClause);

diff --git a/console/src/components/Services/Data/TableInsertItem/InsertItem.js b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@@ -5,12 +5,7 @@ import { insertItem, I_RESET } from './InsertActions';
 import { ordinalColSort } from '../utils';
 import { setTable } from '../DataActions';
 import Button from '../../../Common/Button/Button';
-import {
-  getPlaceholder,
-  BOOLEAN,
-  JSONB,
-  JSONDTYPE,
-} from '../../../../constants';
+import { getPlaceholder, BOOLEAN, JSONB, JSONDTYPE } from '../utils';
 
 class InsertItem extends Component {
   constructor() {