From 295b65c9e3ceca541ad4ba3ab0c7b537b256ea49 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 15 Oct 2020 09:04:39 +0100
Subject: [PATCH 1/8] Change create new web app button to black

---
 packages/builder/src/pages/index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index a5a799f825..09fa40d1c7 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -56,7 +56,7 @@
 <div class="container">
   <div class="header">
     <Heading medium black>Welcome to the Budibase Beta</Heading>
-    <Button primary purple on:click={modal.show}>Create New Web App</Button>
+    <Button primary on:click={modal.show}>Create New Web App</Button>
   </div>
 
   <div class="banner">

From 4732c55242f82e22e8757d6a7b7575ccd37b8ff2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 15 Oct 2020 09:04:57 +0100
Subject: [PATCH 2/8] Don't run terser in standard components in dev mode

---
 packages/standard-components/rollup.config.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/rollup.config.js b/packages/standard-components/rollup.config.js
index 2b5aa7ce3d..202adde702 100644
--- a/packages/standard-components/rollup.config.js
+++ b/packages/standard-components/rollup.config.js
@@ -4,6 +4,7 @@ import commonjs from "@rollup/plugin-commonjs"
 import postcss from "rollup-plugin-postcss"
 import { terser } from "rollup-plugin-terser"
 
+const production = !process.env.ROLLUP_WATCH
 const lodash_fp_exports = ["isEmpty"]
 
 export default {
@@ -17,7 +18,8 @@ export default {
     },
   ],
   plugins: [
-    terser(),
+    // Only run terser in production environments
+    production && terser(),
     postcss({
       plugins: [],
     }),

From a1543e0b4f25f03f1536eba2256c8be34df911fd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 15 Oct 2020 11:08:56 +0100
Subject: [PATCH 3/8] Add support for rendering real relationships inside grid

---
 .../Relationship/RelationshipDisplay.svelte   | 58 +++++++++++++++++++
 .../src/DataGrid/Relationship/tableCache.js   | 21 +++++++
 .../src/DataGrid/customRenderer.js            | 11 +++-
 3 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
 create mode 100644 packages/standard-components/src/DataGrid/Relationship/tableCache.js

diff --git a/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte b/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
new file mode 100644
index 0000000000..d18d6f3be8
--- /dev/null
+++ b/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
@@ -0,0 +1,58 @@
+<script>
+  import { onMount } from "svelte"
+  import api from "../../api"
+  import getTable from "./tableCache"
+
+  export let columnName
+  export let row
+
+  let linkedRows = []
+  let displayColumn
+
+  onMount(async () => {
+    linkedRows = await fetchLinkedRowsData(row, columnName)
+    if (linkedRows && linkedRows.length) {
+      const table = await getTable(linkedRows[0].tableId)
+      if (table && table.primaryDisplay) {
+        displayColumn = table.primaryDisplay
+      }
+    }
+  })
+
+  async function fetchLinkedRowsData(row, columnName) {
+    if (!row || !row._id) {
+      return []
+    }
+    const QUERY_URL = `/api/${row.tableId}/${row._id}/enrich`
+    const response = await api.get(QUERY_URL)
+    const enrichedRow = await response.json()
+    return enrichedRow[columnName]
+  }
+</script>
+
+<div class="container">
+  {#if linkedRows && linkedRows.length && displayColumn}
+    {#each linkedRows as linkedRow}
+      <div class="linked-row">{linkedRow[displayColumn]}</div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    width: 100%;
+  }
+  .linked-row {
+    color: white;
+    background-color: var(--ink);
+    border-radius: var(--border-radius-l);
+    padding: var(--spacing-xs) var(--spacing-s) calc(var(--spacing-xs) + 1px)
+      var(--spacing-s);
+    line-height: 1;
+  }
+</style>
diff --git a/packages/standard-components/src/DataGrid/Relationship/tableCache.js b/packages/standard-components/src/DataGrid/Relationship/tableCache.js
new file mode 100644
index 0000000000..a87f12969c
--- /dev/null
+++ b/packages/standard-components/src/DataGrid/Relationship/tableCache.js
@@ -0,0 +1,21 @@
+import api from "../../api"
+
+let cache = {}
+
+async function fetchTable(id) {
+  const FETCH_TABLE_URL = `/api/tables/${id}`
+  const response = await api.get(FETCH_TABLE_URL)
+  return await response.json()
+}
+
+export default async function getTable(tableId) {
+  if (!tableId) {
+    return null
+  }
+  if (!cache[tableId]) {
+    console.log("cache miss for " + tableId)
+    cache[tableId] = fetchTable(tableId)
+    cache[tableId] = await cache[tableId]
+  }
+  return await cache[tableId]
+}
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index e3f07eda47..367841b681 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -4,6 +4,7 @@
 import AttachmentCell from "./AttachmentCell/Button.svelte"
 import Select from "./Select/Wrapper.svelte"
 import DatePicker from "./DateTime/Wrapper.svelte"
+import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte"
 
 const renderers = new Map([
   ["boolean", booleanRenderer],
@@ -103,14 +104,20 @@ function optionsRenderer({ inclusion }, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function linkedRowRenderer(constraints, editable) {
+function linkedRowRenderer(constraints, editable, schema) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
     container.style.placeItems = "center"
     container.style.height = "100%"
 
-    container.innerText = params.value ? params.value.length : 0
+    new RelationshipDisplay({
+      target: container,
+      props: {
+        row: params.data,
+        columnName: params.column.colId,
+      },
+    })
 
     return container
   }

From 754ccf0e79cf68060c3bd8ee58e25285841630d7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 15 Oct 2020 11:54:34 +0100
Subject: [PATCH 4/8] Add more opinionated styling to relationship display in
 grid

---
 .../src/DataGrid/Relationship/RelationshipDisplay.svelte | 9 +++++++--
 .../src/DataGrid/Relationship/tableCache.js              | 1 -
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte b/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
index d18d6f3be8..858df171c8 100644
--- a/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
+++ b/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
@@ -47,12 +47,17 @@
     gap: var(--spacing-xs);
     width: 100%;
   }
+
+  /* This styling is opinionated to ensure these always look consistent */
   .linked-row {
     color: white;
-    background-color: var(--ink);
-    border-radius: var(--border-radius-l);
+    background-color: #616161;
+    border-radius: var(--border-radius-xs);
     padding: var(--spacing-xs) var(--spacing-s) calc(var(--spacing-xs) + 1px)
       var(--spacing-s);
     line-height: 1;
+    font-size: 0.8em;
+    font-family: var(--font-sans);
+    font-weight: 500;
   }
 </style>
diff --git a/packages/standard-components/src/DataGrid/Relationship/tableCache.js b/packages/standard-components/src/DataGrid/Relationship/tableCache.js
index a87f12969c..7da6855da3 100644
--- a/packages/standard-components/src/DataGrid/Relationship/tableCache.js
+++ b/packages/standard-components/src/DataGrid/Relationship/tableCache.js
@@ -13,7 +13,6 @@ export default async function getTable(tableId) {
     return null
   }
   if (!cache[tableId]) {
-    console.log("cache miss for " + tableId)
     cache[tableId] = fetchTable(tableId)
     cache[tableId] = await cache[tableId]
   }

From 2c611574e300a8e3143c244d9c0e6fb9a3a8a024 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 15 Oct 2020 11:55:06 +0100
Subject: [PATCH 5/8] Prevent editing relationship columns

---
 packages/standard-components/src/DataGrid/Component.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 471d02cc68..050c4eae42 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -68,7 +68,7 @@
           field: key,
           hide: shouldHideField(key),
           sortable: true,
-          editable: canEdit,
+          editable: canEdit && schema[key].type !== "link",
           cellRenderer: getRenderer(schema[key], canEdit),
           autoHeight: true,
         }

From 81ca0fdd1c040e15f0ad8969471765a1dceaa527 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 15 Oct 2020 12:16:32 +0100
Subject: [PATCH 6/8] Improve grid relationship handling of null or empty
 values

---
 .../DataGrid/Relationship/RelationshipDisplay.svelte   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte b/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
index 858df171c8..f6d1cd14ec 100644
--- a/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
+++ b/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
@@ -6,6 +6,10 @@
   export let columnName
   export let row
 
+  $: count =
+    row && columnName && Array.isArray(row[columnName])
+      ? row[columnName].length
+      : 0
   let linkedRows = []
   let displayColumn
 
@@ -33,9 +37,11 @@
 <div class="container">
   {#if linkedRows && linkedRows.length && displayColumn}
     {#each linkedRows as linkedRow}
-      <div class="linked-row">{linkedRow[displayColumn]}</div>
+      {#if linkedRow[displayColumn] != null && linkedRow[displayColumn] !== ''}
+        <div class="linked-row">{linkedRow[displayColumn]}</div>
+      {/if}
     {/each}
-  {/if}
+  {:else}{count} related row(s){/if}
 </div>
 
 <style>

From f058fd9f7cd810eaf64706548a83fd856e13620c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 15 Oct 2020 12:21:30 +0100
Subject: [PATCH 7/8] Use named export for tableCache

---
 .../src/DataGrid/Relationship/RelationshipDisplay.svelte        | 2 +-
 .../standard-components/src/DataGrid/Relationship/tableCache.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte b/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
index f6d1cd14ec..219b7f761f 100644
--- a/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
+++ b/packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import api from "../../api"
-  import getTable from "./tableCache"
+  import { getTable } from "./tableCache"
 
   export let columnName
   export let row
diff --git a/packages/standard-components/src/DataGrid/Relationship/tableCache.js b/packages/standard-components/src/DataGrid/Relationship/tableCache.js
index 7da6855da3..850bdd212a 100644
--- a/packages/standard-components/src/DataGrid/Relationship/tableCache.js
+++ b/packages/standard-components/src/DataGrid/Relationship/tableCache.js
@@ -8,7 +8,7 @@ async function fetchTable(id) {
   return await response.json()
 }
 
-export default async function getTable(tableId) {
+export async function getTable(tableId) {
   if (!tableId) {
     return null
   }

From 0c78b4cd43b890138eca4af8b535e60aae89971d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 15 Oct 2020 12:22:34 +0100
Subject: [PATCH 8/8] Remove old param

---
 packages/standard-components/src/DataGrid/customRenderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 367841b681..7ed81d694b 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -104,7 +104,7 @@ function optionsRenderer({ inclusion }, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function linkedRowRenderer(constraints, editable, schema) {
+function linkedRowRenderer(constraints, editable) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"