From 009d04a0a5489c05b75f7c0948d60e632119310a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 9 Oct 2020 12:24:18 +0100
Subject: [PATCH 01/27] Add relationships as data source

---
 .../builderStore/fetchBindableProperties.js   | 34 ++++++++++------
 .../userInterface/ModelViewFieldSelect.svelte |  8 ++--
 .../userInterface/ModelViewSelect.svelte      | 40 +++++++++++++++++--
 .../server/src/utilities/fileProcessor.js     | 18 ++++-----
 .../standard-components/src/DataTable.svelte  |  4 +-
 packages/standard-components/src/List.svelte  |  2 +-
 .../src/RecordDetail.svelte                   |  4 ++
 packages/standard-components/src/fetchData.js | 27 +++++++++++--
 8 files changed, 103 insertions(+), 34 deletions(-)

diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
index 92359ae630..d8f66af316 100644
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ b/packages/builder/src/builderStore/fetchBindableProperties.js
@@ -73,18 +73,32 @@ const componentInstanceToBindable = walkResult => i => {
 
 const contextToBindables = (models, walkResult) => context => {
   const contextParentPath = getParentPath(walkResult, context)
-  const isModel = context.model?.isModel || typeof context.model === "string"
-  const modelId =
-    typeof context.model === "string" ? context.model : context.model.modelId
-  const model = models.find(model => model._id === modelId)
+
+  let model, schema
+  if (typeof context.model === "string" || context.model.type === "model") {
+    const modelId =
+      typeof context.model === "string" ? context.model : context.model.modelId
+    model = models.find(model => model._id === modelId)
+    schema = model?.schema
+  } else if (context.model.type === "view") {
+    const modelId = context.model.modelId
+    model = models.find(model => model._id === modelId)
+    schema = model?.views?.[context.model.name]?.schema
+  } else if (context.model.type === "link") {
+    console.log(context.model)
+    const modelId = context.model.modelId
+    model = models.find(model => model._id === modelId)
+    schema = model?.schema
+  }
 
   // Avoid crashing whenever no data source has been selected
-  if (model == null) {
+  if (!schema) {
     return []
   }
 
-  const newBindable = key => ({
+  const newBindable = ([key, fieldSchema]) => ({
     type: "context",
+    fieldSchema,
     instance: context.instance,
     // how the binding expression persists, and is used in the app at runtime
     runtimeBinding: `${contextParentPath}data.${key}`,
@@ -92,15 +106,11 @@ const contextToBindables = (models, walkResult) => context => {
     readableBinding: `${context.instance._instanceName}.${model.name}.${key}`,
   })
 
-  // see ModelViewSelect.svelte for the format of context.model
-  // ... this allows us to bind to Model schemas, or View schemas
-  const schema = isModel ? model.schema : model.views[context.model.name].schema
-
   return (
-    Object.keys(schema)
+    Object.entries(schema)
       .map(newBindable)
       // add _id and _rev fields - not part of schema, but always valid
-      .concat([newBindable("_id"), newBindable("_rev")])
+      .concat([newBindable(["_id", "string"]), newBindable(["_rev", "string"])])
   )
 }
 
diff --git a/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte b/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte
index a6b3ef2224..ddc24c9a59 100644
--- a/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte
@@ -15,10 +15,12 @@
     ? models.find(m => m._id === componentInstance.datasource.modelId)
     : null
 
+  $: type = componentInstance.datasource.type
   $: if (model) {
-    options = componentInstance.datasource.isModel
-      ? Object.keys(model.schema)
-      : Object.keys(model.views[componentInstance.datasource.name].schema)
+    options =
+      type === "model" || type === "link"
+        ? Object.keys(model.schema)
+        : Object.keys(model.views[componentInstance.datasource.name].schema)
   }
 </script>
 
diff --git a/packages/builder/src/components/userInterface/ModelViewSelect.svelte b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
index 282c6c93f0..d0f0c37f3b 100644
--- a/packages/builder/src/components/userInterface/ModelViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
@@ -1,7 +1,8 @@
 <script>
   import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { backendUiStore } from "builderStore"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
   let anchorRight, dropdownRight
@@ -13,21 +14,39 @@
     dropdownRight.hide()
   }
 
-  const models = $backendUiStore.models.map(m => ({
+  $: models = $backendUiStore.models.map(m => ({
     label: m.name,
     name: `all_${m._id}`,
     modelId: m._id,
-    isModel: true,
+    type: "model",
   }))
 
-  const views = $backendUiStore.models.reduce((acc, cur) => {
+  $: views = $backendUiStore.models.reduce((acc, cur) => {
     let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
       label: key,
       name: key,
       ...value,
+      type: "view",
     }))
     return [...acc, ...viewsArr]
   }, [])
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    models: $backendUiStore.models,
+  })
+
+  $: links = bindableProperties
+    .filter(x => x.fieldSchema.type === "link")
+    .map(property => ({
+      label: property.readableBinding,
+      fieldName: property.fieldSchema.name,
+      name: `all_${property.fieldSchema.modelId}`,
+      modelId: property.fieldSchema.modelId,
+      type: "link",
+    }))
 </script>
 
 <div class="dropdownbutton" bind:this={anchorRight}>
@@ -63,6 +82,19 @@
         </li>
       {/each}
     </ul>
+    <hr />
+    <div class="title">
+      <Heading extraSmall>Relationships</Heading>
+    </div>
+    <ul>
+      {#each links as link}
+        <li
+          class:selected={value === link}
+          on:click={() => handleSelected(link)}>
+          {link.label}
+        </li>
+      {/each}
+    </ul>
   </div>
 </DropdownMenu>
 
diff --git a/packages/server/src/utilities/fileProcessor.js b/packages/server/src/utilities/fileProcessor.js
index 3e580e9e37..734209733d 100644
--- a/packages/server/src/utilities/fileProcessor.js
+++ b/packages/server/src/utilities/fileProcessor.js
@@ -1,5 +1,5 @@
 const fs = require("fs")
-const sharp = require("sharp")
+// const sharp = require("sharp")
 const fsPromises = fs.promises
 
 const FORMATS = {
@@ -7,14 +7,14 @@ const FORMATS = {
 }
 
 async function processImage(file) {
-  const imgMeta = await sharp(file.path)
-    .resize(300)
-    .toFile(file.outputPath)
-
-  return {
-    ...file,
-    ...imgMeta,
-  }
+  // const imgMeta = await sharp(file.path)
+  //   .resize(300)
+  //   .toFile(file.outputPath)
+  //
+  // return {
+  //   ...file,
+  //   ...imgMeta,
+  // }
 }
 
 async function process(file) {
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 5b950fec4b..5bbd0e42a0 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -39,7 +39,7 @@
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      data = await fetchData(datasource)
+      data = await fetchData(datasource, _bb)
       if (data && data.length) {
         await fetchModel(data[0].modelId)
         headers = Object.keys(schema).filter(shouldDisplayField)
@@ -99,7 +99,7 @@
             {#if schema[header].type === 'attachment'}
               <AttachmentList files={row[header]} />
             {:else if schema[header].type === 'link'}
-              <td>{row[header] ? row[header].length : 0} related row(s)</td>
+              <td>{row[header]} related row(s)</td>
             {:else if row[header]}
               <td>{row[header]}</td>
             {/if}
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 6b2fa2bfb7..e31d510fbf 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -10,7 +10,7 @@
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      const data = await fetchData(datasource)
+      const data = await fetchData(datasource, _bb)
       _bb.attachChildren(target, {
         hydrate: false,
         context: data,
diff --git a/packages/standard-components/src/RecordDetail.svelte b/packages/standard-components/src/RecordDetail.svelte
index aa9d39c0cc..61ac79f4e7 100644
--- a/packages/standard-components/src/RecordDetail.svelte
+++ b/packages/standard-components/src/RecordDetail.svelte
@@ -26,6 +26,10 @@
   async function fetchData() {
     const pathParts = window.location.pathname.split("/")
 
+    if (!model) {
+      return
+    }
+
     let record
     // if srcdoc, then we assume this is the builder preview
     if (pathParts.length === 0 || pathParts[0] === "srcdoc") {
diff --git a/packages/standard-components/src/fetchData.js b/packages/standard-components/src/fetchData.js
index a0c50c233a..2193010530 100644
--- a/packages/standard-components/src/fetchData.js
+++ b/packages/standard-components/src/fetchData.js
@@ -1,10 +1,17 @@
 import api from "./api"
 
-export default async function fetchData(datasource) {
-  const { isModel, name } = datasource
+export default async function fetchData(datasource, _bb) {
+  const { type, name } = datasource
 
   if (name) {
-    const records = isModel ? await fetchModelData() : await fetchViewData()
+    let records
+    if (type === "model") {
+      records = await fetchModelData()
+    } else if (type === "view") {
+      records = await fetchViewData()
+    } else if (type === "link") {
+      records = await fetchLinkedRecordsData()
+    }
 
     // Fetch model schema so we can check for linked records
     if (records && records.length) {
@@ -53,4 +60,18 @@ export default async function fetchData(datasource) {
     const response = await api.get(QUERY_VIEW_URL)
     return await response.json()
   }
+
+  async function fetchLinkedRecordsData() {
+    if (
+      !_bb.store.state ||
+      !_bb.store.state.data ||
+      !_bb.store.state.data._id
+    ) {
+      return []
+    }
+    const QUERY_URL = `/api/${_bb.store.state.data.modelId}/${_bb.store.state.data._id}/enrich`
+    const response = await api.get(QUERY_URL)
+    const record = await response.json()
+    return record[datasource.fieldName]
+  }
 }

From 339bb8b76c629563238ca619026e4dedf7b89247 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 10:49:21 +0100
Subject: [PATCH 02/27] Fix images and lots of other string escaping not
 working

---
 packages/client/src/state/renderTemplateString.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/state/renderTemplateString.js b/packages/client/src/state/renderTemplateString.js
index c872bffc63..e2d8eba859 100644
--- a/packages/client/src/state/renderTemplateString.js
+++ b/packages/client/src/state/renderTemplateString.js
@@ -11,7 +11,7 @@ const entityMap = {
 
 mustache.escape = text =>
   String(text).replace(/[&<>"'`=/]/g, function fromEntityMap(s) {
-    return entityMap[s]
+    return entityMap[s] || s
   })
 
 export default mustache.render

From d5bf44bba1cc1969e83b25abfa3b53a0166720c9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 10:50:29 +0100
Subject: [PATCH 03/27] Remove console log

---
 packages/builder/src/builderStore/fetchBindableProperties.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
index d8f66af316..9205a3cad3 100644
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ b/packages/builder/src/builderStore/fetchBindableProperties.js
@@ -85,7 +85,6 @@ const contextToBindables = (models, walkResult) => context => {
     model = models.find(model => model._id === modelId)
     schema = model?.views?.[context.model.name]?.schema
   } else if (context.model.type === "link") {
-    console.log(context.model)
     const modelId = context.model.modelId
     model = models.find(model => model._id === modelId)
     schema = model?.schema

From 55573b7e325c81872caef6f40ed35e7523811da1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 10:51:57 +0100
Subject: [PATCH 04/27] Remove console log statement

---
 .../builder/src/components/userInterface/BindingDropdown.svelte  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index 842e480b8e..10ccbd4256 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -12,7 +12,6 @@
 
   const dispatch = createEventDispatcher()
   export let bindableProperties
-  console.log("Bindable Props: ", bindableProperties)
   export let value = ""
   export let close
 

From 0f80428a23955a2685e3ca35a5baf81e413de22d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 11:02:03 +0100
Subject: [PATCH 05/27] Fix falsey table values not being rendered

---
 packages/standard-components/src/DataTable.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 5bbd0e42a0..7eca3ede3f 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -100,8 +100,8 @@
               <AttachmentList files={row[header]} />
             {:else if schema[header].type === 'link'}
               <td>{row[header]} related row(s)</td>
-            {:else if row[header]}
-              <td>{row[header]}</td>
+            {:else}
+              <td>{row[header] == null ? '' : row[header]}</td>
             {/if}
           {/if}
         {/each}

From f82161517e55f141ad7c91704dc8859bdfa28eb9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 11:25:56 +0100
Subject: [PATCH 06/27] Remove buggy transition when displaying frontend blocks

---
 .../src/components/userInterface/ItemTab/Item.svelte       | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index 6a3170eea5..86044cb617 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -1,13 +1,8 @@
 <script>
-  import { fly } from "svelte/transition"
   export let item
 </script>
 
-<div
-  data-cy={item.name}
-  class="item-item"
-  in:fly={{ y: 100, duration: 1000 }}
-  on:click>
+<div data-cy={item.name} class="item-item" on:click>
   <div class="item-icon">
     <i class={item.icon} />
   </div>

From f1f757054e229df4321e60876d483603762dd66c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 14:14:50 +0100
Subject: [PATCH 07/27] Replace bindings to link fields with new count runtime
 property

---
 .../builderStore/fetchBindableProperties.js   | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
index 9205a3cad3..5aa9e47f98 100644
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ b/packages/builder/src/builderStore/fetchBindableProperties.js
@@ -95,15 +95,23 @@ const contextToBindables = (models, walkResult) => context => {
     return []
   }
 
-  const newBindable = ([key, fieldSchema]) => ({
-    type: "context",
-    fieldSchema,
-    instance: context.instance,
-    // how the binding expression persists, and is used in the app at runtime
-    runtimeBinding: `${contextParentPath}data.${key}`,
-    // how the binding exressions looks to the user of the builder
-    readableBinding: `${context.instance._instanceName}.${model.name}.${key}`,
-  })
+  const newBindable = ([key, fieldSchema]) => {
+    // Replace link bindings with a new property representing the count
+    let runtimeBoundKey = key
+    if (fieldSchema.type === "link") {
+      runtimeBoundKey = `${key}_count`
+    }
+
+    return {
+      type: "context",
+      fieldSchema,
+      instance: context.instance,
+      // how the binding expression persists, and is used in the app at runtime
+      runtimeBinding: `${contextParentPath}data.${runtimeBoundKey}`,
+      // how the binding expressions looks to the user of the builder
+      readableBinding: `${context.instance._instanceName}.${model.name}.${key}`,
+    }
+  }
 
   return (
     Object.entries(schema)

From 959aa3ff606f42cb228e0361e9192bb971899c7a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 14:19:54 +0100
Subject: [PATCH 08/27] Fix linked record selector rendering in client apps

---
 .../src/LinkedRecordSelector.svelte           | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/standard-components/src/LinkedRecordSelector.svelte b/packages/standard-components/src/LinkedRecordSelector.svelte
index b00b5d53f3..80373a510d 100644
--- a/packages/standard-components/src/LinkedRecordSelector.svelte
+++ b/packages/standard-components/src/LinkedRecordSelector.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { onMount } from "svelte"
-  import { Select, Label, Multiselect } from "@budibase/bbui"
+  import { Label, Multiselect } from "@budibase/bbui"
   import api from "./api"
   import { capitalise } from "./helpers"
 
@@ -10,10 +9,11 @@
   export let secondary
 
   let linkedModel
+  let allRecords = []
 
   $: label = capitalise(schema.name)
   $: linkedModelId = schema.modelId
-  $: recordsPromise = fetchRecords(linkedModelId)
+  $: fetchRecords(linkedModelId)
   $: fetchModel(linkedModelId)
 
   async function fetchModel() {
@@ -31,7 +31,7 @@
     }
     const FETCH_RECORDS_URL = `/api/${linkedModelId}/records`
     const response = await api.get(FETCH_RECORDS_URL)
-    return await response.json()
+    allRecords = await response.json()
   }
 
   function getPrettyName(record) {
@@ -50,16 +50,14 @@
       table.
     </Label>
   {:else}
-    {#await recordsPromise then records}
-      <Multiselect
-        {secondary}
-        bind:value={linkedRecords}
-        label={showLabel ? label : null}
-        placeholder="Choose some options">
-        {#each records as record}
-          <option value={record._id}>{getPrettyName(record)}</option>
-        {/each}
-      </Multiselect>
-    {/await}
+    <Multiselect
+      {secondary}
+      bind:value={linkedRecords}
+      label={showLabel ? label : null}
+      placeholder="Choose some options">
+      {#each allRecords as record}
+        <option value={record._id}>{getPrettyName(record)}</option>
+      {/each}
+    </Multiselect>
   {/if}
 {/if}

From 3c8502187fbcc8dda32fb4a46c98a66318faf4fb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 14:21:15 +0100
Subject: [PATCH 09/27] Fix relational data in client apps and use count for
 link fields in client apps

---
 .../standard-components/src/DataTable.svelte     |  5 +++--
 packages/standard-components/src/List.svelte     |  3 ++-
 .../standard-components/src/RowDetail.svelte     |  4 +++-
 packages/standard-components/src/fetchData.js    | 16 +++++++---------
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 7eca3ede3f..ab99f4bebe 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -20,6 +20,7 @@
   let sort = {}
   let sorted = []
   let schema = {}
+  let store = _bb.store
 
   $: cssVariables = {
     backgroundColor,
@@ -39,7 +40,7 @@
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      data = await fetchData(datasource, _bb)
+      data = await fetchData(datasource, $store)
       if (data && data.length) {
         await fetchModel(data[0].modelId)
         headers = Object.keys(schema).filter(shouldDisplayField)
@@ -99,7 +100,7 @@
             {#if schema[header].type === 'attachment'}
               <AttachmentList files={row[header]} />
             {:else if schema[header].type === 'link'}
-              <td>{row[header]} related row(s)</td>
+              <td>{row[header].length} related row(s)</td>
             {:else}
               <td>{row[header] == null ? '' : row[header]}</td>
             {/if}
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index e31d510fbf..410e100ce5 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -7,10 +7,11 @@
   export let datasource = []
 
   let target
+  let store = _bb.store
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      const data = await fetchData(datasource, _bb)
+      const data = await fetchData(datasource, $store)
       _bb.attachChildren(target, {
         hydrate: false,
         context: data,
diff --git a/packages/standard-components/src/RowDetail.svelte b/packages/standard-components/src/RowDetail.svelte
index a974bc9d1a..f17c035b1e 100644
--- a/packages/standard-components/src/RowDetail.svelte
+++ b/packages/standard-components/src/RowDetail.svelte
@@ -52,7 +52,9 @@
       const modelObj = await fetchModel(record.modelId)
       for (let key of Object.keys(modelObj.schema)) {
         if (modelObj.schema[key].type === "link") {
-          record[key] = Array.isArray(record[key]) ? record[key].length : 0
+          record[`${key}_count`] = Array.isArray(record[key])
+            ? record[key].length
+            : 0
         }
       }
 
diff --git a/packages/standard-components/src/fetchData.js b/packages/standard-components/src/fetchData.js
index 2193010530..12f021029b 100644
--- a/packages/standard-components/src/fetchData.js
+++ b/packages/standard-components/src/fetchData.js
@@ -1,10 +1,10 @@
 import api from "./api"
 
-export default async function fetchData(datasource, _bb) {
+export default async function fetchData(datasource, store) {
   const { type, name } = datasource
 
   if (name) {
-    let records
+    let records = []
     if (type === "model") {
       records = await fetchModelData()
     } else if (type === "view") {
@@ -20,7 +20,9 @@ export default async function fetchData(datasource, _bb) {
       records.forEach(record => {
         for (let key of keys) {
           if (model.schema[key].type === "link") {
-            record[key] = Array.isArray(record[key]) ? record[key].length : 0
+            record[`${key}_count`] = Array.isArray(record[key])
+              ? record[key].length
+              : 0
           }
         }
       })
@@ -62,14 +64,10 @@ export default async function fetchData(datasource, _bb) {
   }
 
   async function fetchLinkedRecordsData() {
-    if (
-      !_bb.store.state ||
-      !_bb.store.state.data ||
-      !_bb.store.state.data._id
-    ) {
+    if (!store || !store.data || !store.data._id) {
       return []
     }
-    const QUERY_URL = `/api/${_bb.store.state.data.modelId}/${_bb.store.state.data._id}/enrich`
+    const QUERY_URL = `/api/${store.data.modelId}/${store.data._id}/enrich`
     const response = await api.get(QUERY_URL)
     const record = await response.json()
     return record[datasource.fieldName]

From 0961812b56fcba42c6b28b8ca1039a9196c64533 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 15:12:48 +0100
Subject: [PATCH 10/27] Improve frontend settings and design panel scrolling
 and panel styling

---
 .../userInterface/ComponentPropertiesPanel.svelte          | 3 +++
 .../builder/src/components/userInterface/DesignView.svelte | 7 +++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index b9bcf2fa95..3187d6f9d4 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -127,6 +127,9 @@
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding: 0 20px;
   }
 
   .instance-name {
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 742d8baa3a..8664fd1f30 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -49,7 +49,7 @@
         {/each}
       {:else}
         <div class="no-design">
-          <span>This component does not have any design properties</span>
+          This component does not have any design properties.
         </div>
       {/if}
     </div>
@@ -78,9 +78,12 @@
     flex: 1;
     overflow-y: auto;
     min-height: 0;
+    margin: 0 -20px;
+    padding: 0 20px;
   }
 
   .no-design {
-    text-align: center;
+    font-size: var(--font-size-s);
+    color: var(--grey-6);
   }
 </style>

From 50b7b475277a3e92522c3f7f32442960dc45560b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 15:13:38 +0100
Subject: [PATCH 11/27] Improve style of ModelViewSelect and fix text wrapping

---
 .../userInterface/ModelViewSelect.svelte      | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ModelViewSelect.svelte b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
index d0f0c37f3b..25abc5bce9 100644
--- a/packages/builder/src/components/userInterface/ModelViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
@@ -49,11 +49,12 @@
     }))
 </script>
 
-<div class="dropdownbutton" bind:this={anchorRight}>
-  <Button secondary wide on:click={dropdownRight.show}>
-    <span>{value.label ? value.label : 'Model / View'}</span>
-    <Icon name="arrowdown" />
-  </Button>
+<div
+  class="dropdownbutton"
+  bind:this={anchorRight}
+  on:click={dropdownRight.show}>
+  <span>{value.label ? value.label : 'Model / View'}</span>
+  <Icon name="arrowdown" />
 </div>
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
@@ -100,8 +101,33 @@
 
 <style>
   .dropdownbutton {
-    width: 100%;
+    background-color: var(--grey-2);
+    border: var(--border-transparent);
+    padding: var(--spacing-m);
+    border-radius: var(--border-radius-m);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+    flex: 1 1 auto;
   }
+  .dropdownbutton:hover {
+    cursor: pointer;
+    background-color: var(--grey-3);
+  }
+  .dropdownbutton span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 1 1 auto;
+    text-align: left;
+    font-size: var(--font-size-xs);
+  }
+  .dropdownbutton :global(svg) {
+    margin: -4px 0;
+  }
+
   .dropdown {
     padding: var(--spacing-m) 0;
     z-index: 99999999;

From 7af86f089ddb2e01b913e4c667358cbd77a46292 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 15:14:11 +0100
Subject: [PATCH 12/27] Improve style of frontend settings placeholder text

---
 .../src/components/userInterface/SettingsView.svelte      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 0460e15ad6..233fa08031 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -124,14 +124,14 @@
     {/if}
   {/each}
 {:else}
-  <div>
-    <span>This component does not have any settings.</span>
-  </div>
+  <div>This component does not have any settings.</div>
 {/if}
 
 <style>
   div {
-    text-align: center;
+    font-size: var(--font-size-s);
+    margin-top: var(--spacing-m);
+    color: var(--grey-6);
   }
 
   .duplicate-name {

From 1f7ddbfa656af79a7483e7fcf451de4f1d737151 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 15:14:34 +0100
Subject: [PATCH 13/27] Fix style and alignment of various frontend design and
 settings components

---
 .../userInterface/OptionSelect.svelte         |  3 ++-
 .../userInterface/PropertyControl.svelte      |  7 +++---
 .../userInterface/ScreenSelect.svelte         | 25 ++++++++++++++-----
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 5cb92a0e2c..aac5c44c07 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -164,10 +164,10 @@
 
   .bb-select-container {
     outline: none;
-    width: 160px;
     height: 36px;
     cursor: pointer;
     font-size: 14px;
+    overflow: hidden;
   }
 
   .bb-select-anchor {
@@ -237,6 +237,7 @@
     padding: 5px 0px;
     cursor: pointer;
     padding-left: 10px;
+    font-size: var(--font-size-s);
   }
 
   li:hover {
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 59cdbd868b..c20ab0f4bf 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -118,8 +118,7 @@
     position: relative;
     display: flex;
     flex-flow: row;
-    min-width: 260px;
-    margin: 8px 0px;
+    margin: 8px 0;
     align-items: center;
   }
 
@@ -128,7 +127,7 @@
     align-items: center;
     font-size: 12px;
     font-weight: 400;
-    width: 100px;
+    flex: 0 0 100px;
     text-align: left;
     color: var(--ink);
     margin-right: auto;
@@ -139,7 +138,7 @@
     flex: 1;
     display: flex;
     padding-left: 2px;
-    max-width: 164px;
+    overflow: hidden;
   }
   button {
     position: absolute;
diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
index 412f0719fc..b31c81d4c5 100644
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@@ -10,9 +10,22 @@
   const handleBlur = () => dispatch("change", value)
 </script>
 
-<DataList editable secondary on:blur={handleBlur} on:change bind:value>
-  <option value="" />
-  {#each $store.allScreens as screen}
-    <option value={screen.route}>{screen.props._instanceName}</option>
-  {/each}
-</DataList>
+<div>
+  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+    <option value="" />
+    {#each $store.allScreens as screen}
+      <option value={screen.route}>{screen.props._instanceName}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>

From 0ec10acc436c8fa85b12d0cc1d7907e4476d19c5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 16:33:38 +0100
Subject: [PATCH 14/27] Update pagination to handle any number of pages

---
 .../backend/DataTable/TablePagination.svelte  | 61 ++++++++++++++++---
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/TablePagination.svelte b/packages/builder/src/components/backend/DataTable/TablePagination.svelte
index 1435148ebc..840b3381e5 100644
--- a/packages/builder/src/components/backend/DataTable/TablePagination.svelte
+++ b/packages/builder/src/components/backend/DataTable/TablePagination.svelte
@@ -1,11 +1,13 @@
 <script>
   export let data
-  export let currentPage
+  export let currentPage = 0
   export let pageItemCount
   export let ITEMS_PER_PAGE
 
   let numPages = 0
   $: numPages = Math.ceil((data?.length ?? 0) / ITEMS_PER_PAGE)
+  $: displayAllPages = numPages <= 10
+  $: pagesAroundCurrent = getPagesAroundCurrent(currentPage, numPages)
 
   const next = () => {
     if (currentPage + 1 === numPages) return
@@ -20,18 +22,53 @@
   const selectPage = page => {
     currentPage = page
   }
+
+  function getPagesAroundCurrent(current, max) {
+    console.log(current)
+    const start = Math.max(current - 2, 1)
+    const end = Math.min(current + 2, max - 2)
+    let pages = []
+    for (let i = start; i <= end; i++) {
+      pages.push(i)
+    }
+    return pages
+  }
 </script>
 
 <div class="pagination">
   <div class="pagination__buttons">
     <button on:click={previous} disabled={currentPage === 0}>&lt;</button>
-    {#each Array(numPages) as _, idx}
-      <button
-        class:selected={idx === currentPage}
-        on:click={() => selectPage(idx)}>
-        {idx + 1}
+    {#if displayAllPages}
+      {#each Array(numPages) as _, idx}
+        <button
+          class:selected={idx === currentPage}
+          on:click={() => selectPage(idx)}>
+          {idx + 1}
+        </button>
+      {/each}
+    {:else}
+      <button class:selected={currentPage === 0} on:click={() => selectPage(0)}>
+        1
       </button>
-    {/each}
+      {#if currentPage > 3}
+        <button disabled>...</button>
+      {/if}
+      {#each pagesAroundCurrent as idx}
+        <button
+          class:selected={idx === currentPage}
+          on:click={() => selectPage(idx)}>
+          {idx + 1}
+        </button>
+      {/each}
+      {#if currentPage < numPages - 4}
+        <button disabled>...</button>
+      {/if}
+      <button
+        class:selected={currentPage === numPages - 1}
+        on:click={() => selectPage(numPages - 1)}>
+        {numPages}
+      </button>
+    {/if}
     <button
       on:click={next}
       disabled={currentPage === numPages - 1 || numPages === 0}>
@@ -65,7 +102,8 @@
 
   .pagination__buttons button {
     display: inline-block;
-    padding: var(--spacing-s) var(--spacing-m);
+    padding: var(--spacing-s) 0;
+    text-align: center;
     margin: 0;
     background: #fff;
     border: none;
@@ -74,6 +112,9 @@
     text-transform: capitalize;
     min-width: 20px;
     transition: 0.3s background-color;
+    font-family: var(--font-sans);
+    color: var(--grey-6);
+    width: 40px;
   }
   .pagination__buttons button:last-child {
     border-right: none;
@@ -83,11 +124,13 @@
     background-color: var(--grey-1);
   }
   .pagination__buttons button.selected {
-    background: var(--grey-2);
+    background: var(--blue);
+    color: white;
   }
 
   p {
     font-size: var(--font-size-s);
     margin: var(--spacing-xl) 0;
+    color: var(--grey-6);
   }
 </style>

From 9f3eef5b8c6abe01755b42cb27e87d3519de09ef Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 18:47:25 +0100
Subject: [PATCH 15/27] Fix crash when no linked records in DataTable

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

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index ab99f4bebe..f5b6c2b0dc 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -100,7 +100,7 @@
             {#if schema[header].type === 'attachment'}
               <AttachmentList files={row[header]} />
             {:else if schema[header].type === 'link'}
-              <td>{row[header].length} related row(s)</td>
+              <td>{row[header] ? row[header].length : 0} related row(s)</td>
             {:else}
               <td>{row[header] == null ? '' : row[header]}</td>
             {/if}

From d7ab7c6ec9c383ff5d132317388169ed7e4c8f82 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 08:12:03 +0100
Subject: [PATCH 16/27] Fix grid crash when there are no related rows in a link
 field

---
 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 0fe60e0673..5d47343846 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -110,7 +110,7 @@ function linkedRecordRenderer(constraints, editable) {
     container.style.placeItems = "center"
     container.style.height = "100%"
 
-    container.innerText = params.value.length || 0
+    container.innerText = params.value ? params.value.length : 0
 
     return container
   }

From bf7356b508fc74aea6f0f8a2f1820ac50cb1239c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 08:12:29 +0100
Subject: [PATCH 17/27] Fix another random builder crash that sometimes happens

---
 .../builder/src/components/userInterface/SettingsView.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 233fa08031..bae1b364c9 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -117,7 +117,7 @@
         control={definition.control}
         label={definition.label}
         key={definition.key}
-        value={componentInstance[definition.key] || componentInstance[definition.key].defaultValue}
+        value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
         {componentInstance}
         {onChange}
         props={{ ...excludeProps(definition, ['control', 'label']) }} />

From 42f4bcc3397b05decda6bdcddfa8c5bcc0fbad41 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 08:20:32 +0100
Subject: [PATCH 18/27] Fix crashing when adding a frontend component after
 deleting one

---
 packages/builder/src/builderStore/store/index.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 6941c74b22..4eeb2e3842 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -292,6 +292,11 @@ const addChildComponent = store => (componentToAdd, presetProps = {}) => {
       ? state.currentComponentInfo
       : getParent(state.currentPreviewItem.props, state.currentComponentInfo)
 
+    // Don't continue if there's no parent
+    if (!targetParent) {
+      return state
+    }
+
     targetParent._children = targetParent._children.concat(newComponent.props)
 
     state.currentFrontEndType === "page"

From 5af85541ecbbee028cdd7a5bcf0291e14bf71ae5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 08:26:13 +0100
Subject: [PATCH 19/27] Fix ModelSelect styles in frontend settings

---
 .../userInterface/ModelSelect.svelte          | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ModelSelect.svelte b/packages/builder/src/components/userInterface/ModelSelect.svelte
index c2010ce4af..90d7045049 100644
--- a/packages/builder/src/components/userInterface/ModelSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelSelect.svelte
@@ -5,9 +5,22 @@
   export let value
 </script>
 
-<Select thin secondary wide on:change {value}>
-  <option value="" />
-  {#each $backendUiStore.models as model}
-    <option value={model._id}>{model.name}</option>
-  {/each}
-</Select>
+<div>
+  <Select thin secondary wide on:change {value}>
+    <option value="">Choose a table</option>
+    {#each $backendUiStore.models as model}
+      <option value={model._id}>{model.name}</option>
+    {/each}
+  </Select>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> *) {
+    flex: 1 1 auto;
+  }
+</style>

From b60f86715db6c471aceacc3560ddf45b6371155a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 09:06:56 +0100
Subject: [PATCH 20/27] Fix state when deleting frontend components

---
 .../userInterface/ComponentDropdownMenu.svelte  | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 5ab9b18b59..60f6d9175d 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -1,15 +1,10 @@
 <script>
+  import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/storeUtils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last, cloneDeep } from "lodash/fp"
-  import {
-    selectComponent,
-    getParent,
-    walkProps,
-    saveCurrentPreviewItem,
-    regenerateCssForCurrentScreen,
-  } from "builderStore/storeUtils"
+  import { getParent, saveCurrentPreviewItem } from "builderStore/storeUtils"
   import { uuid } from "builderStore/uuid"
   import { DropdownMenu } from "@budibase/bbui"
 
@@ -29,6 +24,12 @@
     dropdown.hide()
   }
 
+  const selectComponent = component => {
+    store.selectComponent(component)
+    const path = store.getPathToComponent(component)
+    $goto(`./:page/:screen/${path}`)
+  }
+
   const moveUpComponent = () => {
     store.update(s => {
       const parent = getParent(s.currentPreviewItem.props, component)
@@ -78,10 +79,10 @@
 
       if (parent) {
         parent._children = parent._children.filter(c => c !== component)
+        selectComponent(parent)
       }
 
       saveCurrentPreviewItem(state)
-
       return state
     })
   }

From 6307e9028cb7704c618c80a1328af5f7df6807ea Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 09:07:09 +0100
Subject: [PATCH 21/27] Fix state when deleting frontend screens

---
 .../userInterface/ScreenDropdownMenu.svelte   | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index f0e7360ca3..69e9ea498a 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import api from "builderStore/api"
@@ -16,19 +17,27 @@
   }
 
   const deleteScreen = () => {
-    store.update(s => {
-      const screens = s.screens.filter(c => c.name !== screen.name)
-      s.screens = screens
-      if (s.currentPreviewItem.name === screen.name) {
-        s.currentPreviewItem = s.pages[s.currentPageName]
-        s.currentFrontEndType = "page"
+    store.update(state => {
+      // Remove screen from screens
+      const screens = state.screens.filter(c => c.name !== screen.name)
+      state.screens = screens
+
+      // Remove screen from current page as well
+      const pageScreens = state.pages[state.currentPageName]._screens.filter(
+        scr => scr.name !== screen.name
+      )
+      state.pages[state.currentPageName]._screens = pageScreens
+
+      if (state.currentPreviewItem.name === screen.name) {
+        store.setCurrentPage($store.currentPageName)
+        $goto(`./:page/page-layout`)
       }
 
       api.delete(
-        `/_builder/api/pages/${s.currentPageName}/screens/${screen.name}`
+        `/_builder/api/pages/${state.currentPageName}/screens/${screen.name}`
       )
 
-      return s
+      return state
     })
   }
 </script>

From 3dacff46367ca9ed0312a1676335483ec8b5a768 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 09:11:36 +0100
Subject: [PATCH 22/27] Fix create screen state by navigating to new URL when
 creating

---
 .../src/components/userInterface/NewScreenModal.svelte | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/userInterface/NewScreenModal.svelte b/packages/builder/src/components/userInterface/NewScreenModal.svelte
index 0fb31edcd3..36b7cef507 100644
--- a/packages/builder/src/components/userInterface/NewScreenModal.svelte
+++ b/packages/builder/src/components/userInterface/NewScreenModal.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@sveltech/routify"
   import { store, backendUiStore } from "builderStore"
   import { Input, Button, Spacer, Select, ModalContent } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
@@ -71,14 +72,7 @@
       })
     }
 
-    finished()
-  }
-
-  const finished = () => {
-    templateIndex = 0
-    name = ""
-    route = ""
-    baseComponent = CONTAINER
+    $goto(`./:page/${name}`)
   }
 
   const routeNameExists = route => {

From c76dccb66cb6d4e5ce1ff92700136aa59e20b39f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 09:22:47 +0100
Subject: [PATCH 23/27] Add relationships as possible datasource for grid

---
 .../standard-components/src/DataGrid/Component.svelte    | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 01ed620a5c..5d85f66da7 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -17,7 +17,7 @@
   export let _bb
   export let datasource = {}
   export let editable
-  export let theme = 'alpine'
+  export let theme = "alpine"
 
   let dataLoaded = false
   let data
@@ -33,6 +33,7 @@
     rowSelection: editable ? "multiple" : false,
     suppressRowClickSelection: !editable,
   }
+  let store = _bb.store
 
   onMount(async () => {
     if (datasource.modelId) {
@@ -40,7 +41,7 @@
       model = await jsonModel.json()
       const { schema } = model
       if (!isEmpty(datasource)) {
-        data = await fetchData(datasource)
+        data = await fetchData(datasource, $store)
         columnDefs = Object.keys(schema).map((key, i) => {
           return {
             headerCheckboxSelection: i === 0 && editable,
@@ -64,8 +65,8 @@
     type !== "boolean" &&
     type !== "options" &&
     // type !== "datetime" &&
-     type !== "link" &&
-    type !== "attachment" 
+    type !== "link" &&
+    type !== "attachment"
 
   const shouldHideField = name => {
     if (name.startsWith("_")) return true

From 0f862e3c66f79375e1a3dfd85bca1f095bfc2cee Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 09:40:07 +0100
Subject: [PATCH 24/27] Rename datasource prop from table to data for all
 components

---
 .../userInterface/temporaryPanelStructure.js         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 50799581f8..bdf2c62340 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -305,7 +305,7 @@ export default {
             design: { ...all },
             settings: [
               {
-                label: "Table",
+                label: "Data",
                 key: "datasource",
                 control: ModelViewSelect,
               },
@@ -587,7 +587,7 @@ export default {
             design: { ...all },
             settings: [
               {
-                label: "Table",
+                label: "Data",
                 key: "datasource",
                 control: ModelViewSelect,
               },
@@ -659,7 +659,7 @@ export default {
               properties: {
                 settings: [
                   {
-                    label: "Table",
+                    label: "Data",
                     key: "datasource",
                     control: ModelViewSelect,
                   },
@@ -753,7 +753,7 @@ export default {
               properties: {
                 settings: [
                   {
-                    label: "Table",
+                    label: "Data",
                     key: "datasource",
                     control: ModelViewSelect,
                   },
@@ -867,7 +867,7 @@ export default {
               properties: {
                 settings: [
                   {
-                    label: "Table",
+                    label: "Data",
                     key: "datasource",
                     control: ModelViewSelect,
                   },
@@ -970,7 +970,7 @@ export default {
               properties: {
                 settings: [
                   {
-                    label: "Table",
+                    label: "Data",
                     key: "datasource",
                     control: ModelViewSelect,
                   },

From fa59b05d74e21e0ef712eef2744619b904868e8c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 09:42:44 +0100
Subject: [PATCH 25/27] Add back in sharp reference which was commented out

---
 packages/server/src/utilities/fileProcessor.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/server/src/utilities/fileProcessor.js b/packages/server/src/utilities/fileProcessor.js
index 734209733d..3e580e9e37 100644
--- a/packages/server/src/utilities/fileProcessor.js
+++ b/packages/server/src/utilities/fileProcessor.js
@@ -1,5 +1,5 @@
 const fs = require("fs")
-// const sharp = require("sharp")
+const sharp = require("sharp")
 const fsPromises = fs.promises
 
 const FORMATS = {
@@ -7,14 +7,14 @@ const FORMATS = {
 }
 
 async function processImage(file) {
-  // const imgMeta = await sharp(file.path)
-  //   .resize(300)
-  //   .toFile(file.outputPath)
-  //
-  // return {
-  //   ...file,
-  //   ...imgMeta,
-  // }
+  const imgMeta = await sharp(file.path)
+    .resize(300)
+    .toFile(file.outputPath)
+
+  return {
+    ...file,
+    ...imgMeta,
+  }
 }
 
 async function process(file) {

From 652e3b43ed875e90f28d125b83249b50d9d7521c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 09:47:12 +0100
Subject: [PATCH 26/27] Remove console.log statement

---
 .../src/components/backend/DataTable/TablePagination.svelte    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/TablePagination.svelte b/packages/builder/src/components/backend/DataTable/TablePagination.svelte
index 840b3381e5..06916f8497 100644
--- a/packages/builder/src/components/backend/DataTable/TablePagination.svelte
+++ b/packages/builder/src/components/backend/DataTable/TablePagination.svelte
@@ -24,8 +24,7 @@
   }
 
   function getPagesAroundCurrent(current, max) {
-    console.log(current)
-    const start = Math.max(current - 2, 1)
+giat    const start = Math.max(current - 2, 1)
     const end = Math.min(current + 2, max - 2)
     let pages = []
     for (let i = start; i <= end; i++) {

From 0aeed3241ea9fd5507a0a42a32f85153bb983a81 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 09:51:43 +0100
Subject: [PATCH 27/27] Remove random text

---
 .../src/components/backend/DataTable/TablePagination.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/backend/DataTable/TablePagination.svelte b/packages/builder/src/components/backend/DataTable/TablePagination.svelte
index 06916f8497..ccb7d0fc4c 100644
--- a/packages/builder/src/components/backend/DataTable/TablePagination.svelte
+++ b/packages/builder/src/components/backend/DataTable/TablePagination.svelte
@@ -24,7 +24,7 @@
   }
 
   function getPagesAroundCurrent(current, max) {
-giat    const start = Math.max(current - 2, 1)
+    const start = Math.max(current - 2, 1)
     const end = Math.min(current + 2, max - 2)
     let pages = []
     for (let i = start; i <= end; i++) {