Display enriched relationship info in grids and bindings

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`
     }

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

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>