fix console row edit behaviour (close #3121) (#3133)

* handle unmodified fields
* handle setting default value

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

@@ -6,6 +6,12 @@ import {
   showSuccessNotification,
 } from '../../Common/Notification';
 import dataHeaders from '../Common/Headers';
+import {
+  findTable,
+  generateTableDef,
+  getColumnType,
+  getTableColumn,
+} from '../../../Common/utils/pgUtils';
 
 const E_SET_EDITITEM = 'EditItem/E_SET_EDITITEM';
 const E_ONGOING_REQ = 'EditItem/E_ONGOING_REQ';
@@ -20,59 +26,75 @@ const modalClose = () => ({ type: MODAL_CLOSE });
 /* ****************** edit action creators ************ */
 const editItem = (tableName, colValues) => {
   return (dispatch, getState) => {
-    /* Type all the values correctly */
-    const insertObject = {};
     const state = getState();
-    const { currentSchema } = state.tables;
-    const columns = state.tables.allSchemas.find(
-      t => t.table_name === tableName && t.table_schema === currentSchema
-    ).columns;
-    let error = false;
+
+    /* Type all the values correctly */
+    const { currentSchema, allSchemas } = state.tables;
+
+    const tableDef = generateTableDef(tableName, currentSchema);
+
+    const table = findTable(allSchemas, tableDef);
+
+    const _setObject = {};
+    const _defaultArray = [];
+
     let errorMessage = '';
+
+    if (!Object.keys(colValues).length) {
+      errorMessage = 'No fields modified';
+    }
+
     Object.keys(colValues).map(colName => {
-      const colSchema = columns.find(x => x.column_name === colName);
-      const colType = colSchema.data_type;
-      if (Integers.indexOf(colSchema.data_type) > 0) {
-        insertObject[colName] = parseInt(colValues[colName], 10);
-      } else if (Reals.indexOf(colSchema.data_type) > 0) {
-        insertObject[colName] = parseFloat(colValues[colName], 10);
-      } else if (colSchema.data_type === 'boolean') {
-        if (colValues[colName] === 'true') {
-          insertObject[colName] = true;
-        } else if (colValues[colName] === 'false') {
-          insertObject[colName] = false;
-        } else {
-          insertObject[colName] = null;
-        }
-      } else if (colType === 'json' || colType === 'jsonb') {
-        try {
-          const val = JSON.parse(colValues[colName]);
-          insertObject[colName] = val;
-        } catch (e) {
-          errorMessage =
-            colName +
-            ' :: could not read ' +
-            colValues[colName] +
-            ' as a valid JSON object/array';
-          error = true;
-        }
+      const colValue = colValues[colName];
+
+      const column = getTableColumn(table, colName);
+      const colType = getColumnType(column);
+
+      if (colValue && colValue.default === true) {
+        _defaultArray.push(colName);
       } else {
-        insertObject[colName] = colValues[colName];
+        if (Integers.indexOf(colType) > 0) {
+          _setObject[colName] = parseInt(colValue, 10);
+        } else if (Reals.indexOf(colType) > 0) {
+          _setObject[colName] = parseFloat(colValue);
+        } else if (colType === 'boolean') {
+          if (colValue === 'true') {
+            _setObject[colName] = true;
+          } else if (colValue === 'false') {
+            _setObject[colName] = false;
+          } else {
+            _setObject[colName] = null;
+          }
+        } else if (colType === 'json' || colType === 'jsonb') {
+          try {
+            _setObject[colName] = JSON.parse(colValue);
+          } catch (e) {
+            errorMessage =
+              colName +
+              ' :: could not read ' +
+              colValue +
+              ' as a valid JSON object/array';
+          }
+        } else {
+          _setObject[colName] = colValue;
+        }
       }
     });
-    if (error) {
+
+    if (errorMessage) {
       dispatch(showErrorNotification('Edit failed!', errorMessage));
       return dispatch({
         type: E_REQUEST_ERROR,
-        error: { message: 'Not valid JSON' },
+        error: { message: errorMessage },
       });
     }
 
     const reqBody = {
       type: 'update',
       args: {
-        table: { name: tableName, schema: getState().tables.currentSchema },
-        $set: insertObject,
+        table: tableDef,
+        $set: _setObject,
+        $default: _defaultArray,
         where: state.tables.update.pkClause,
       },
     };
@@ -83,6 +105,7 @@ const editItem = (tableName, colValues) => {
       body: JSON.stringify(reqBody),
     };
     const url = Endpoints.query;
+
     return dispatch(
       requestAction(url, options, E_REQUEST_SUCCESS, E_REQUEST_ERROR)
     ).then(

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

@@ -65,8 +65,13 @@ class EditItem extends Component {
 
       const prevValue = oldItem[colName];
 
-      refs[colName] = { valueNode: null, nullNode: null, defaultNode: null };
-      const inputRef = node => (refs[colName].valueNode = node);
+      refs[colName] = {
+        valueNode: null,
+        valueInput: null,
+        nullNode: null,
+        defaultNode: null,
+      };
+      const inputRef = node => (refs[colName].valueInput = node);
 
       const clicker = e => {
         e.target
@@ -149,7 +154,14 @@ class EditItem extends Component {
             {colName}
           </label>
           <label className={styles.radioLabel + ' radio-inline'}>
-            <input type="radio" name={colName + '-value'} value="option1" />
+            <input
+              type="radio"
+              ref={node => {
+                refs[colName].valueNode = node;
+              }}
+              name={colName + '-value'}
+              value="option1"
+            />
             {typedInput}
           </label>
           <label className={styles.radioLabel + ' radio-inline'}>
@@ -205,6 +217,30 @@ class EditItem extends Component {
       );
     }
 
+    const handleSaveClick = e => {
+      e.preventDefault();
+
+      const inputValues = {};
+      Object.keys(refs).map(colName => {
+        if (refs[colName].nullNode.checked) {
+          // null
+          inputValues[colName] = null;
+        } else if (refs[colName].defaultNode.checked) {
+          // default
+          inputValues[colName] = { default: true };
+        } else if (refs[colName].valueNode.checked) {
+          inputValues[colName] =
+            refs[colName].valueInput.props !== undefined
+              ? refs[colName].valueInput.props.value
+              : refs[colName].valueInput.value;
+        }
+      });
+
+      dispatch({ type: E_ONGOING_REQ });
+
+      dispatch(editItem(tableName, inputValues));
+    };
+
     return (
       <div className={styles.container + ' container-fluid'}>
         <TableHeader
@@ -223,26 +259,7 @@ class EditItem extends Component {
                 type="submit"
                 color="yellow"
                 size="sm"
-                onClick={e => {
-                  e.preventDefault();
-                  dispatch({ type: E_ONGOING_REQ });
-                  const inputValues = {};
-                  Object.keys(refs).map(colName => {
-                    if (refs[colName].nullNode.checked) {
-                      // null
-                      inputValues[colName] = null;
-                    } else if (refs[colName].defaultNode.checked) {
-                      // default
-                      return;
-                    } else {
-                      inputValues[colName] =
-                        refs[colName].valueNode.props !== undefined
-                          ? refs[colName].valueNode.props.value
-                          : refs[colName].valueNode.value;
-                    }
-                  });
-                  dispatch(editItem(tableName, inputValues));
-                }}
+                onClick={handleSaveClick}
                 data-test="edit-save-button"
               >
                 {buttonText}