Arrays of Pointers dont render correctly #275 (#1727)

fn-faisal · faisal154 · web-flow · commit b7698be6be50 · 2021-07-26T10:40:44.000-07:00
* pointer array

* fix for array

Co-authored-by: Faisal Nadeem &lt;mfaisalnadeem@hotmail.com&gt;
diff --git a/Parse-Dashboard/public/index.html b/Parse-Dashboard/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+    <base href="/"/>
+    <script>
+        PARSE_DASHBOARD_PATH = "/";
+    </script>
+</head>
+<html>
+<title>Parse Dashboard</title>
+<body>
+<div id="browser_mount"></div>
+<script type="text/javascript">
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://a.back4app.com/a.js','ga');
+    ga('create', 'UA-66038885-1', 'auto');
+    ga('send', 'pageview');
+    setTimeout("ga('send','event','Profitable Engagement','time on page more than 30 seconds')",30000);
+</script>
+<!--Start of Zopim Live Chat Script-->
+<script>
+    window.zEmbed||(function(){
+      var queue = [];
+
+      window.zEmbed = function() {
+        queue.push(arguments);
+      }
+      window.zE = window.zE || window.zEmbed;
+      document.zendeskHost = "back4app.zendesk.com";
+      document.zEQueue = queue;
+    }());
+  </script>
+  <script src="https://assets.zendesk.com/embeddable_framework/main.js" data-ze-csp="true" async defer></script>
+<!--End of Zopim Live Chat Script-->
+<script src="https://survey.solucx.com.br/widget.js"></script>
+<script type="text/javascript" src="http://localhost:9000/back4app-navigation.bundle.js"></script><script type="text/javascript" src="bundles/dashboard.751689feb1b99fab176b.js"></script><script type="text/javascript" src="bundles/login.2cc31a054b35c671c417.js"></script></body>
+</html>
diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
@@ -250,7 +250,33 @@ export default class BrowserCell extends Component {
           value.id
         );
       this.copyableValue = value.id;
-    } else if (type === 'Date') {
+    }
+    else if (type === 'Array') {
+      if ( value[0] && 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') {
@@ -259,7 +285,7 @@ export default 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';
@@ -304,11 +330,11 @@ export default class BrowserCell extends Component {
     if (current) {
       classes.push(styles.current);
     }
-    
+
     if (markRequiredField && isRequired && !value) {
       classes.push(styles.required);
     }
-    
+
     return readonly ? (
       <Tooltip placement='bottom' tooltip='Read only (CTRL+C to copy)' visible={this.state.showTooltip} >
         <span
diff --git a/src/components/BrowserCell/BrowserCell.scss b/src/components/BrowserCell/BrowserCell.scss
@@ -36,6 +36,22 @@
   }
 }
 
+.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;
+}
 .required {
   position: relative;
 
@@ -49,4 +65,4 @@
     right: 0;
     bottom: 0;
   }
-}
+}
diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
@@ -102,7 +102,7 @@
   @include MonospaceFont;
   font-size: 12px;
   white-space: nowrap;
-  height: 31px;
+  height: auto;
   border-bottom: 1px solid #e3e3ea;
 
   &:nth-child(odd) {
