From 7b4b22377d64ba72f0df5af9f5865afe1141e0be Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 19 Feb 2021 12:00:06 +0000
Subject: [PATCH] Display enriched relationship info in grids and bindings

---
 .../builder/src/builderStore/dataBinding.js   |  4 ++--
 packages/client/src/api/rows.js               |  4 ++--
 .../Relationship/RelationshipCount.svelte     | 20 ++++++++++++++-----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 55a6328ca3..b2eb30c55a 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -136,7 +136,7 @@ const getContextBindings = (asset, componentId) => {
       // Replace certain bindings with a new property to help display components
       let runtimeBoundKey = key
       if (fieldSchema.type === "link") {
-        runtimeBoundKey = `${key}_count`
+        runtimeBoundKey = `${key}_text`
       } else if (fieldSchema.type === "attachment") {
         runtimeBoundKey = `${key}_first`
       }
@@ -176,7 +176,7 @@ const getUserBindings = () => {
     // Replace certain bindings with a new property to help display components
     let runtimeBoundKey = key
     if (fieldSchema.type === "link") {
-      runtimeBoundKey = `${key}_count`
+      runtimeBoundKey = `${key}_text`
     } else if (fieldSchema.type === "attachment") {
       runtimeBoundKey = `${key}_first`
     }
diff --git a/packages/client/src/api/rows.js b/packages/client/src/api/rows.js
index e6dc8879fa..54c0179cc8 100644
--- a/packages/client/src/api/rows.js
+++ b/packages/client/src/api/rows.js
@@ -119,8 +119,8 @@ export const enrichRows = async (rows, tableId) => {
         for (let key of keys) {
           const type = schema[key].type
           if (type === "link") {
-            // Enrich row with the count of any relationship fields
-            row[`${key}_count`] = Array.isArray(row[key]) ? row[key].length : 0
+            // Enrich row a string join of relationship fields
+            row[`${key}_text`] = row[key]?.join(", ") || ""
           } else if (type === "attachment") {
             // Enrich row with the first image URL for any attachment fields
             let url = null
diff --git a/packages/standard-components/src/grid/Relationship/RelationshipCount.svelte b/packages/standard-components/src/grid/Relationship/RelationshipCount.svelte
index dfc10295f0..ad45e25c3d 100644
--- a/packages/standard-components/src/grid/Relationship/RelationshipCount.svelte
+++ b/packages/standard-components/src/grid/Relationship/RelationshipCount.svelte
@@ -2,13 +2,14 @@
   export let columnName
   export let row
 
-  $: count =
-    row && columnName && Array.isArray(row[columnName])
-      ? row[columnName].length
-      : 0
+  $: items = row?.[columnName] || []
 </script>
 
-<div class="container">{count} related row(s)</div>
+<div class="container">
+  {#each items as item}
+    <div class="item">{item}</div>
+  {/each}
+</div>
 
 <style>
   .container {
@@ -19,4 +20,13 @@
     gap: var(--spacing-xs);
     width: 100%;
   }
+
+  .item {
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-xs) var(--spacing-s);
+    border: 1px solid #888;
+    color: #666;
+    line-height: normal;
+    border-radius: 4px;
+  }
 </style>