Feat/275

src/components/BrowserCell/BrowserCell.react.js

@@ -248,7 +248,33 @@ class BrowserCell extends Component {
           value.id
         );
       this.copyableValue = value.id;
-    } else if (type === 'Date') {
+    }
+    else if (type === 'Array') {
+      if ( typeof value[0] === 'object' && value[0].__type === 'Pointer' ) {
+        const array = [];
+        value.map( (v, i) => {
+          if ( typeof v !== 'object' || v.__type !== 'Pointer' ) {
+            throw new Error('Invalid type found in pointer array');
+          }
+          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>);
+        });
+        this.copyableValue = content = <ul>
+          { array.map( a => <li>{a}</li>) }
+        </ul>
+        if ( array.length > 1 ) {
+          classes.push(styles.hasMore);
+        }
+      }
+      else {
+        this.copyableValue = content = JSON.stringify(value);
+      }
+    }
+    else if (type === 'Date') {
       if (typeof value === 'object' && value.__type) {
         value = new Date(value.iso);
       } else if (typeof value === 'string') {
@@ -257,7 +283,7 @@ class BrowserCell extends Component {
       this.copyableValue = content = dateStringUTC(value);
     } else if (type === 'Boolean') {
       this.copyableValue = content = value ? 'True' : 'False';
-    } else if (type === 'Object' || type === 'Bytes' || type === 'Array') {
+    } else if (type === 'Object' || type === 'Bytes') {
       this.copyableValue = content = JSON.stringify(value);
     } else if (type === 'File') {
       const fileName = value.url() ? getFileName(value) : 'Uploading\u2026';
@@ -305,7 +331,7 @@ class BrowserCell extends Component {
     if (current) {
       classes.push(styles.current);
     }
-    
+
     return readonly ? (
       <Tooltip placement='bottom' tooltip='Read only (CTRL+C to copy)' visible={this.state.showTooltip}>
         <span

src/components/BrowserCell/BrowserCell.scss

@@ -40,3 +40,20 @@
   color: #353446;
   opacity: .9;
 }
+
+.hasMore{
+  height: auto;
+  max-height: 25px;
+  overflow-y: scroll;
+}
+
+.hasMore::-webkit-scrollbar {
+  -webkit-appearance: none!important;
+  width: 7px!important;
+}
+
+.hasMore::-webkit-scrollbar-thumb {
+  border-radius: 4px!important;
+  background-color: rgba(0, 0, 0, .5)!important;
+  box-shadow: 0 0 1px rgba(255, 255, 255, .5)!important;
+}

src/components/BrowserRow/BrowserRow.react.js

@@ -98,4 +98,4 @@ export default class BrowserRow extends Component {
       </div>
     );
   }
-}
+}

src/dashboard/Data/Browser/Browser.scss

@@ -97,7 +97,7 @@ body:global(.expanded) {
   @include MonospaceFont;
   font-size: 12px;
   white-space: nowrap;
-  height: 31px;
+  height: auto;
   border-bottom: 1px solid #e3e3ea;
 
   &:nth-child(odd) {