Edit Array of pointers (#1771)

* show pill pointer design for array of pointers

* ctrl+c copy array of pointer value

* encoding data to avoid conversion of object to ParseObjects

* updated changelog.md

* Update CHANGELOG.md

Co-authored-by: Manuel <[email protected]>

Author: sadakchap

CHANGELOG.md

@@ -11,6 +11,7 @@
 - fix: date cell value not selected on double clicks (fn-faisal) [#1730](https://github.com/parse-community/parse-dashboard/pull/1730)
 
 ## Fixes
+- Fixed bug when editing or copying a field containing an array of pointers [#1770](https://github.com/parse-community/parse-dashboard/issues/1770) (Prerna Mehra) [#1771](https://github.com/parse-community/parse-dashboard/pull/1771)
 
 # 2.2.0
 [Full Changelog](https://github.com/parse-community/parse-dashboard/compare/2.1.0...2.2.0)

src/components/BrowserCell/BrowserCell.react.js

@@ -273,13 +273,18 @@ export default class BrowserCell extends Component {
           const object = new Parse.Object(v.className);
           object.id = v.objectId;
           array.push(
-            <a key={i} href='javascript:;' onClick={onPointerClick.bind(undefined, object)}>
-              <Pill value={v.objectId} />
-            </a>);
+            <Pill
+              key={v.objectId}
+              value={v.objectId}
+              onClick={onPointerClick.bind(undefined, object)}
+              followClick={true}
+            />
+          );
         });
-        this.copyableValue = content = <ul>
+        content = <ul>
           { array.map( a => <li>{a}</li>) }
         </ul>
+        this.copyableValue = JSON.stringify(value);
         if ( array.length > 1 ) {
           classes.push(styles.hasMore);
         }

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

@@ -15,6 +15,7 @@ import FileEditor from 'components/FileEditor/FileEditor.react';
 import ObjectPickerDialog from 'dashboard/Data/Browser/ObjectPickerDialog.react';
 import styles from 'dashboard/Data/Browser/Browser.scss';
 import getFileName from 'lib/getFileName';
+import encode from 'parse/lib/browser/encode';
 
 export default class EditRowDialog extends React.Component {
   constructor(props) {
@@ -57,7 +58,12 @@ export default class EditRowDialog extends React.Component {
     columns.forEach(column => {
       const { name, type } = column;
       if (['Array', 'Object'].indexOf(type) >= 0) {
-        const stringifyValue = JSON.stringify(currentObject[name], null, 4);
+        // This is needed to avoid unwanted conversions of objects to Parse.Objects.
+        // "Parse._encoding" is responsible to convert Parse data into raw data.
+        // Since array and object are generic types, we want to render them the way
+        // they were stored in the database.
+        let val = encode(currentObject[name], undefined, true);
+        const stringifyValue = JSON.stringify(val, null, 4);
         currentObject[name] = stringifyValue;
         const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
         expandedTextAreas[name] = { rows: rows, expanded: false };