Allow clicking on relationships in spectrum table

packages/bbui/src/Table/CellRenderer.svelte

@@ -5,6 +5,7 @@
   import RelationshipRenderer from "./RelationshipRenderer.svelte"
   import AttachmentRenderer from "./AttachmentRenderer.svelte"
 
+  export let row
   export let schema
   export let value
   export let customRenderers = []
@@ -16,7 +17,7 @@
 
 {#if value != null && value !== ''}
   {#if customRenderer}
-    <svelte:component this={customRenderer.component} {value} />
+    <svelte:component this={customRenderer.component} {schema} {value} />
   {:else if plainTypes.includes(type)}
     <StringRenderer {value} />
   {:else if type === 'boolean'}
@@ -24,7 +25,7 @@
   {:else if type === 'datetime'}
     <DateTimeRenderer {value} />
   {:else if type === 'link'}
-    <RelationshipRenderer {value} />
+    <RelationshipRenderer {row} {schema} {value} on:clickrelationship />
   {:else if type === 'attachment'}
     <AttachmentRenderer {value} />
   {/if}

packages/bbui/src/Table/RelationshipRenderer.svelte

@@ -1,16 +1,30 @@
 <script>
   import "@spectrum-css/label/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
 
+  export let row
   export let value
+  export let schema
 
+  const dispatch = createEventDispatcher()
   const displayLimit = 5
+
   $: relationships = value?.slice(0, displayLimit) ?? []
   $: leftover = (value?.length ?? 0) - relationships.length
+
+  const onClick = e => {
+    e.stopPropagation()
+    dispatch("clickrelationship", {
+      tableId: row.tableId,
+      rowId: row._id,
+      fieldName: schema?.name,
+    })
+  }
 </script>
 
 {#each relationships as relationship}
   {#if relationship?.primaryDisplay}
-    <span class="spectrum-Label spectrum-Label--grey">
+    <span class="spectrum-Label spectrum-Label--grey" on:click={onClick}>
       {relationship.primaryDisplay}
     </span>
   {/if}

packages/bbui/src/Table/Table.svelte

@@ -227,8 +227,10 @@
                       <div class="spectrum-Table-cell-content">
                         <CellRenderer
                           {customRenderers}
+                          {row}
                           schema={schema[field]}
-                          value={row[field]} />
+                          value={row[field]}
+                          on:clickrelationship />
                       </div>
                     </td>
                   {/each}

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -58,12 +58,9 @@
     selectedRows = []
   }
 
-  const selectRelationship = (row, fieldName) => {
+  const selectRelationship = ({ tableId, rowId, fieldName }) => {
-    if (!row?.[fieldName]?.length) {
-      return
-    }
     $goto(
-      `/${$params.application}/data/table/${row.tableId}/relationship/${row._id}/${fieldName}`
+      `/builder/${$params.application}/data/table/${tableId}/relationship/${rowId}/${fieldName}`
     )
   }
 
@@ -120,7 +117,8 @@
     allowEditColumns={allowEditing}
     showAutoColumns={!hideAutocolumns}
     on:editcolumn={e => editColumn(e.detail)}
-    on:editrow={e => editRow(e.detail)} />
+    on:editrow={e => editRow(e.detail)}
+    on:clickrelationship={e => selectRelationship(e.detail)} />
 {/key}
 
 <Modal bind:this={editRowModal}>