fix(Database Browser): Avoid Parse transformations on array and object fields (#1223)

Fixes #983

When rendering/editing `Array` or `Object` type fields on `Database Browser`, we must avoid any transformations of generic data to the `ParseObject` format. Since these fields are generic, we can't assume it will contain Parse related content.

Author: douglasmuraoka

src/components/BrowserCell/BrowserCell.react.js

@@ -52,9 +52,7 @@ let BrowserCell = ({ type, value, hidden, width, current, onSelect, onEditChange
     content = dateStringUTC(value);
   } else if (type === 'Boolean') {
     content = value ? 'True' : 'False';
-  } else if (type === 'Array') {
-    content = JSON.stringify(value.map(val => val instanceof Parse.Object ? val.toPointer() : val))
-  } else if (type === 'Object' || type === 'Bytes') {
+  } else if (type === 'Object' || type === 'Bytes' || type === 'Array') {
     content = JSON.stringify(value);
   } else if (type === 'File') {
     if (value.url()) {

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -78,7 +78,7 @@ export default class BrowserTable extends React.Component {
     });
   }
 
-  renderRow({ row, obj, rowWidth }) {
+  renderRow({ row, obj, json, rowWidth }) {
     let attributes = obj.attributes;
     let index = row - this.state.offset;
     return (
@@ -101,6 +101,12 @@ export default class BrowserTable extends React.Component {
             } else if (type === 'Relation' && !attr && obj.id) {
               attr = new Parse.Relation(obj, name);
               attr.targetClassName = this.props.columns[name].targetClass;
+            } else if (type === 'Array' || type === 'Object') {
+              // This is needed to avoid unwanted conversions of objects to Parse.Objects.
+              // When retrieving data from JSON, Parse-SDK will not try to convert any data.
+              // Since array and object are generic types, we want to render them the way
+              // they were stored in the database.
+              attr = json[name];
             }
           }
           let current = this.props.current && this.props.current.row === row && this.props.current.col === j;
@@ -161,7 +167,7 @@ export default class BrowserTable extends React.Component {
       if (this.props.newObject && this.state.offset <= 0) {
         newRow = (
           <div style={{ marginBottom: 30, borderBottom: '1px solid #169CEE' }}>
-            {this.renderRow({ row: -1, obj: this.props.newObject, rowWidth: rowWidth })}
+            {this.renderRow({ row: -1, obj: this.props.newObject, json: {}, rowWidth: rowWidth })}
           </div>
         );
       }
@@ -170,7 +176,7 @@ export default class BrowserTable extends React.Component {
       for (let i = this.state.offset; i < end; i++) {
         let index = i - this.state.offset;
         let obj = this.props.data[i];
-        rows[index] = this.renderRow({ row: i, obj: obj, rowWidth: rowWidth });
+        rows[index] = this.renderRow({ row: i, obj, json: obj.toJSON(), rowWidth: rowWidth });
       }
 
       if (this.props.editing) {
@@ -193,8 +199,20 @@ export default class BrowserTable extends React.Component {
           }
           let obj = this.props.current.row < 0 ? this.props.newObject : this.props.data[this.props.current.row];
           let value = obj;
+          let json = obj.toJSON();
           if (!this.props.isUnique) {
-            value = obj.get(name);
+            if (type === 'Array' || type === 'Object') {
+              if (!json) {
+                json = obj.toJSON();
+              }
+              // This is needed to avoid unwanted conversions of objects to Parse.Objects.
+              // When retrieving data from JSON, Parse-SDK will not try to convert any data.
+              // Since array and object are generic types, we want to edit them the way
+              // they were stored in the database.
+              value = json[name];
+            } else {
+              value = obj.get(name);
+            }
           }
           if (name === 'objectId') {
             if (!this.props.isUnique) {
@@ -204,18 +222,6 @@ export default class BrowserTable extends React.Component {
             value = new Parse.ACL({ '*': { read: true }, [obj.id]: { read: true, write: true }});
           } else if (name === 'password' && this.props.className === '_User') {
             value = '';
-          } else if (type === 'Array') {
-            if (value) {
-              value = value.map(val => {
-                  if (val instanceof Parse.Object) {
-                      return val.toPointer();
-                  } else if (val && typeof val.getMonth === 'function') {
-                      return { __type: "Date", iso: val.toISOString() };
-                  }
-
-                  return val;
-              });
-            }
           }
           let wrapTop = Math.max(0, this.props.current.row * ROW_HEIGHT);
           if (this.props.current.row > -1 && this.props.newObject) {