From e021b55704d55c50ac2be23168a4d9af9b0d49d7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 19 Feb 2021 13:05:52 +0000
Subject: [PATCH] Add relationship enrichment display to backend UI

---
 .../DataTable/cells/RelationshipCell.svelte   | 37 ++++++++++++++-----
 .../Relationship/RelationshipCount.svelte     |  4 +-
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
index 290ff0cf28..2d85a184d9 100644
--- a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
+++ b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
@@ -3,24 +3,43 @@
   export let row
   export let selectRelationship
 
-  $: count =
-    row && columnName && Array.isArray(row[columnName])
-      ? row[columnName].length
-      : 0
+  $: items = row?.[columnName] || []
 </script>
 
-<div class:link={count} on:click={() => selectRelationship(row, columnName)}>
-  {count}
-  related row(s)
+<div
+  class="container"
+  class:link={!!items.length}
+  on:click={() => selectRelationship(row, columnName)}>
+  {#each items as item}
+    <div class="item">{item}</div>
+  {/each}
 </div>
 
 <style>
-  .link {
-    text-decoration: underline;
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
   }
 
   .link:hover {
     color: var(--grey-6);
     cursor: pointer;
   }
+  .link:hover .item {
+    color: var(--ink);
+    border-color: var(--ink);
+  }
+
+  .item {
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-xs) var(--spacing-s);
+    border: 1px solid var(--grey-5);
+    color: var(--grey-7);
+    line-height: normal;
+    border-radius: 4px;
+    text-decoration: none;
+  }
 </style>
diff --git a/packages/standard-components/src/grid/Relationship/RelationshipCount.svelte b/packages/standard-components/src/grid/Relationship/RelationshipCount.svelte
index ad45e25c3d..6a96a0b90b 100644
--- a/packages/standard-components/src/grid/Relationship/RelationshipCount.svelte
+++ b/packages/standard-components/src/grid/Relationship/RelationshipCount.svelte
@@ -24,8 +24,8 @@
   .item {
     font-size: var(--font-size-xs);
     padding: var(--spacing-xs) var(--spacing-s);
-    border: 1px solid #888;
-    color: #666;
+    border: 1px solid var(--grey-5);
+    color: var(--grey-7);
     line-height: normal;
     border-radius: 4px;
   }