From 1bffa76194aa4d8e9c8298f3dc5a409bdbb5f35f Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 16:15:28 +0200
Subject: [PATCH 01/51] removes add row button on grid component

---
 .../src/DataGrid/Component.svelte                   | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 0d86808961..e4acdbd2ea 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -11,7 +11,6 @@
   import { onMount } from "svelte"
 
   import AgGrid from "@budibase/svelte-ag-grid"
-  import CreateRowButton from "./CreateRow/Button.svelte"
   import { TextButton as DeleteButton, Icon, Modal, ModalContent } from "@budibase/bbui"
 
   export let _bb
@@ -79,13 +78,6 @@
     }
   })
 
-  const isEditable = type =>
-    type !== "boolean" &&
-    type !== "options" &&
-    // type !== "datetime" &&
-    type !== "link" &&
-    type !== "attachment"
-
   const shouldHideField = name => {
     if (name.startsWith("_")) return true
     // always 'row'
@@ -96,10 +88,6 @@
     return false
   }
 
-  const handleNewRow = async () => {
-    data = await fetchData(datasource)
-  }
-
   const handleUpdate = ({ detail }) => {
     data[detail.row] = detail.data
     updateRow(detail.data)
@@ -133,7 +121,6 @@
   {#if dataLoaded}
     {#if canAddDelete}
       <div class="controls">
-        <CreateRowButton {_bb} {table} on:newRow={handleNewRow} />
         {#if selectedRows.length > 0}
           <DeleteButton text small on:click={modal.show()}>
             <Icon name="addrow" />

From ee4e1718d5c4eadfdfbc3ececed77f7ad4020766 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 16:24:03 +0200
Subject: [PATCH 02/51] fixes jumpy behaviour when selecting rows

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

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index e4acdbd2ea..d2743cecea 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -148,6 +148,7 @@
 
 <style>
   .controls {
+    min-height: 15px;
     margin-bottom: var(--spacing-s);
     display: grid;
     grid-gap: var(--spacing-s);

From 6ea9809b12549ba85142b365b866daff259eaf54 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 15 Oct 2020 16:37:50 +0100
Subject: [PATCH 03/51] Improve login component logo styles

---
 packages/standard-components/src/Login.svelte | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index 42db74c02e..1ddefb3f28 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -91,16 +91,20 @@
   .content {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
     justify-content: center;
   }
 
   .logo-container {
     margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
   }
 
   .logo-container > img {
-    height: 80px;
+    max-height: 80px;
     max-width: 200px;
     margin-bottom: 20px;
   }
@@ -137,7 +141,7 @@
   .form-root {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
     width: 300px;
   }
 
@@ -186,4 +190,8 @@
     border-color: #393c44;
     color: #393c44;
   }
+
+  h2 {
+    text-align: center;
+  }
 </style>

From a31b30da7d8c3a2b782d5aa381e4586d31c79833 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 18:54:08 +0200
Subject: [PATCH 04/51] starts work on adding view details link to grid
 component

---
 .../src/DataGrid/Component.svelte             |  3 +-
 .../src/DataGrid/ViewDetails/Cell.svelte      |  6 ++++
 .../src/DataGrid/customRenderer.js            | 36 +++++++++++++++----
 3 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 0d86808961..0c75b46bca 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -20,6 +20,7 @@
   export let theme = "alpine"
   export let height = 500
   export let pagination
+  export let detailUrl = 'https://someurl.com/'
 
   // These can never change at runtime so don't need to be reactive
   let canEdit = editable && datasource && datasource.type !== "view"
@@ -91,7 +92,7 @@
     // always 'row'
     if (name === "type") return true
     // tables are always tied to a single tableId, this is irrelevant
-    if (name === "tableId") return true
+    // if (name === "tableId") return true
 
     return false
   }
diff --git a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
new file mode 100644
index 0000000000..e4e79c2b89
--- /dev/null
+++ b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
@@ -0,0 +1,6 @@
+<script>
+    import { Icon } from '@budibase/bbui'
+    export let url
+</script>
+
+<a href={url}><Icon name="view" /></a>
\ No newline at end of file
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 607a4f8432..6998e27b03 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -2,6 +2,7 @@
 // https://www.ag-grid.com/javascript-grid-cell-rendering-components/
 
 import AttachmentCell from "./AttachmentCell/Button.svelte"
+import ViewDetails from "./ViewDetails/Cell.svelte"
 import Select from "./Select/Wrapper.svelte"
 import DatePicker from "./DateTime/Wrapper.svelte"
 import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte"
@@ -11,18 +12,19 @@ const renderers = new Map([
   ["attachment", attachmentRenderer],
   ["options", optionsRenderer],
   ["link", linkedRowRenderer],
+  ["tableId", viewDetailsRenderer]
 ])
 
-export function getRenderer({ type, constraints }, editable) {
-  if (renderers.get(type)) {
-    return renderers.get(type)(constraints, editable)
+export function getRenderer(schema, editable) {
+  if (renderers.get(schema.type)) {
+    return renderers.get(schema.type)(schema.options, editable)
   } else {
     return false
   }
 }
 
 /* eslint-disable no-unused-vars */
-function booleanRenderer(constraints, editable) {
+function booleanRenderer(options, editable) {
   return params => {
     const toggle = e => {
       params.value = !params.value
@@ -44,7 +46,7 @@ function booleanRenderer(constraints, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function attachmentRenderer(constraints, editable) {
+function attachmentRenderer(options, editable) {
   return params => {
     const container = document.createElement("div")
 
@@ -66,7 +68,7 @@ function attachmentRenderer(constraints, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function dateRenderer(constraints, editable) {
+function dateRenderer(options, editable) {
   return function(params) {
     const container = document.createElement("div")
     const toggle = e => {
@@ -111,7 +113,7 @@ function optionsRenderer({ inclusion }, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function linkedRowRenderer(constraints, editable) {
+function linkedRowRenderer(options, editable) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
@@ -129,3 +131,23 @@ function linkedRowRenderer(constraints, editable) {
     return container
   }
 }
+
+/* eslint-disable no-unused-vars */
+function viewDetailsRenderer(options) {
+  return params => {
+    console.log('Params: ', params)
+    let container = document.createElement("div")
+    container.style.display = "grid"
+    container.style.placeItems = "center"
+    container.style.height = "100%"
+
+    new ViewDetails({
+      target: container,
+      props: {
+        url: options.url + params.value
+      },
+    })
+
+    return container
+  }
+}
\ No newline at end of file

From 335043440d9f3427331728cbc071f8bbce16b72c Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 15 Oct 2020 18:09:19 +0100
Subject: [PATCH 05/51] Fixing issues with table columns allowing weirdness to
 happen around casing, now only one column with a particular name can be
 specified, no matter what the case, but the case will be respected.

---
 .../builder/src/builderStore/store/backend.js  | 18 ++++++++++++++++--
 .../components/backend/DataTable/Table.svelte  |  1 -
 .../DataTable/popovers/ColumnPopover.svelte    |  3 ---
 packages/server/src/api/controllers/table.js   | 16 ++++++++++++++--
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index f48b561ef0..3cdabf1ed5 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -1,4 +1,4 @@
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import api from "../api"
 
@@ -62,16 +62,30 @@ export const getBackendUiStore = () => {
         }),
       save: async table => {
         const updatedTable = cloneDeep(table)
+        const oldTable = get(store).tables.filter(t => t._id === table._id)[0]
 
+        const fieldNames = []
         // update any renamed schema keys to reflect their names
-        for (let key in updatedTable.schema) {
+        for (let key of Object.keys(updatedTable.schema)) {
+          // if field name has been seen before remove it
+          if (fieldNames.indexOf(key.toLowerCase()) !== -1) {
+            delete updatedTable.schema[key]
+            continue
+          }
           const field = updatedTable.schema[key]
+          const oldField = oldTable?.schema[key]
+          // if the type has changed then revert back to the old field
+          if (oldField != null && oldField.type !== field.type) {
+            updatedTable.schema[key] = oldField
+          }
           // field has been renamed
           if (field.name && field.name !== key) {
             updatedTable.schema[field.name] = field
             updatedTable._rename = { old: key, updated: field.name }
             delete updatedTable.schema[key]
           }
+          // finally record this field has been used
+          fieldNames.push(key.toLowerCase())
         }
 
         const SAVE_TABLE_URL = `/api/tables`
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 4c0dc06d39..8354b464c0 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -132,7 +132,6 @@
     font-size: 24px;
     font-weight: 600;
     text-rendering: optimizeLegibility;
-    text-transform: capitalize;
     margin-top: 0;
     display: flex;
     flex-direction: row;
diff --git a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
index 2857b651c3..f844cdefae 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
@@ -110,9 +110,6 @@
     align-items: center;
     gap: var(--spacing-xs);
   }
-  .container span {
-    text-transform: capitalize;
-  }
 
   h5 {
     padding: var(--spacing-xl) 0 0 var(--spacing-xl);
diff --git a/packages/server/src/api/controllers/table.js b/packages/server/src/api/controllers/table.js
index 82f981e3e6..3030274016 100644
--- a/packages/server/src/api/controllers/table.js
+++ b/packages/server/src/api/controllers/table.js
@@ -41,6 +41,18 @@ exports.save = async function(ctx) {
     oldTable = await db.get(ctx.request.body._id)
   }
 
+  // make sure that types don't change of a column, have to remove
+  // the column if you want to change the type
+  if (oldTable && oldTable.schema) {
+    for (let propKey of Object.keys(tableToSave.schema)) {
+      let column = tableToSave.schema[propKey]
+      let oldColumn = oldTable.schema[propKey]
+      if (oldColumn && oldColumn.type !== column.type) {
+        ctx.throw(400, "Cannot change the type of a column")
+      }
+    }
+  }
+
   // Don't rename if the name is the same
   let { _rename } = tableToSave
   if (_rename && _rename.old === _rename.updated) {
@@ -50,9 +62,9 @@ exports.save = async function(ctx) {
 
   // rename row fields when table column is renamed
   if (_rename && tableToSave.schema[_rename.updated].type === "link") {
-    throw "Cannot rename a linked field."
+    ctx.throw(400, "Cannot rename a linked column.")
   } else if (_rename && tableToSave.primaryDisplay === _rename.old) {
-    throw "Cannot rename the display column."
+    ctx.throw(400, "Cannot rename the display column.")
   } else if (_rename) {
     const rows = await db.allDocs(
       getRowParams(tableToSave._id, null, {

From 7d0231cb75873184994eeb7576e7a52d63391fca Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 15 Oct 2020 18:11:36 +0100
Subject: [PATCH 06/51] Formatting.

---
 .../src/DataGrid/AttachmentCell/Button.svelte |  2 +-
 .../src/DataGrid/Component.svelte             | 14 ++++--
 .../src/attachments/AttachmentList.svelte     | 45 +++++++++++--------
 3 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
index 139ffe02aa..12f3cc8e9f 100644
--- a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
+++ b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
@@ -3,4 +3,4 @@
   export let files
 </script>
 
-<AttachmentList {files} on:delete />
\ No newline at end of file
+<AttachmentList {files} on:delete />
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 0d86808961..2fb32ffcdd 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -12,7 +12,12 @@
 
   import AgGrid from "@budibase/svelte-ag-grid"
   import CreateRowButton from "./CreateRow/Button.svelte"
-  import { TextButton as DeleteButton, Icon, Modal, ModalContent } from "@budibase/bbui"
+  import {
+    TextButton as DeleteButton,
+    Icon,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
 
   export let _bb
   export let datasource = {}
@@ -25,7 +30,7 @@
   let canEdit = editable && datasource && datasource.type !== "view"
   let canAddDelete = editable && datasource && datasource.type === "table"
 
-  let modal;
+  let modal
 
   let store = _bb.store
   let dataLoaded = false
@@ -153,7 +158,10 @@
       on:select={({ detail }) => (selectedRows = detail)} />
   {/if}
   <Modal bind:this={modal}>
-    <ModalContent title="Confirm Row Deletion" confirmText="Delete" onConfirm={deleteRows} >
+    <ModalContent
+      title="Confirm Row Deletion"
+      confirmText="Delete"
+      onConfirm={deleteRows}>
       <span>Are you sure you want to delete {selectedRows.length} row(s)?</span>
     </ModalContent>
   </Modal>
diff --git a/packages/standard-components/src/attachments/AttachmentList.svelte b/packages/standard-components/src/attachments/AttachmentList.svelte
index e52eeef5a7..9d9b96246d 100644
--- a/packages/standard-components/src/attachments/AttachmentList.svelte
+++ b/packages/standard-components/src/attachments/AttachmentList.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { Modal, ModalContent, Icon } from '@budibase/bbui'
-  import { createEventDispatcher } from "svelte";
+  import { Modal, ModalContent, Icon } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
   import { FILE_TYPES } from "./fileTypes"
@@ -9,16 +9,16 @@
   export let height = "70"
   export let width = "70"
 
-  let modal;
-  let currentFile;
+  let modal
+  let currentFile
 
-  const openModal = (file) => {
+  const openModal = file => {
     currentFile = file
     modal.show()
   }
 
   const handleConfirm = () => {
-    dispatch('delete', currentFile)
+    dispatch("delete", currentFile)
   }
 </script>
 
@@ -31,12 +31,19 @@
         {:else}<i class="far fa-file" />{/if}
       </a>
       <span>{file.name}</span>
-      <div class="button-placement"><button  primary on:click|stopPropagation={() => openModal(file)}>×</button></div>
+      <div class="button-placement">
+        <button
+          primary
+          on:click|stopPropagation={() => openModal(file)}>×</button>
+      </div>
     </div>
   {/each}
 </div>
 <Modal bind:this={modal}>
-  <ModalContent title="Confirm File Deletion" confirmText="Delete" onConfirm={handleConfirm} >
+  <ModalContent
+    title="Confirm File Deletion"
+    confirmText="Delete"
+    onConfirm={handleConfirm}>
     <span>Are you sure you want to delete this attachment?</span>
   </ModalContent>
 </Modal>
@@ -67,7 +74,7 @@
     position: relative;
   }
 
-	button {
+  button {
     display: block;
     box-sizing: border-box;
     position: absolute;
@@ -85,18 +92,18 @@
     border-radius: var(--border-radius-xl);
     background: black;
     transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-                background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+      background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
     -webkit-appearance: none;
     outline: none;
-	}
-    button:hover {
-        background-color: var(--grey-8);
-        cursor: pointer;
-    }
-    button:active {
-        background-color: var(--grey-9);
-        cursor: pointer;
-    }
+  }
+  button:hover {
+    background-color: var(--grey-8);
+    cursor: pointer;
+  }
+  button:active {
+    background-color: var(--grey-9);
+    cursor: pointer;
+  }
 
   .file {
     position: relative;

From 5f83cfc9c5518d46de0625bd6e0b0a65d75a8ed4 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 19:59:46 +0200
Subject: [PATCH 07/51] adds detail link column to grid component

---
 .../userInterface/temporaryPanelStructure.js  |  6 ++++++
 packages/standard-components/components.json  |  3 ++-
 .../src/DataGrid/Component.svelte             | 20 +++++++++++++++++--
 .../src/DataGrid/customRenderer.js            |  5 ++---
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 458c35116a..9a4e91fc43 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -327,6 +327,12 @@ export default {
                 key: "datasource",
                 control: TableViewSelect,
               },
+              {
+                label: "Detail URL",
+                key: "detailUrl",
+                placeholder: "tableName/",
+                control: Input,
+              },
               {
                 label: "Editable",
                 key: "editable",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 7d64f49c84..20929de9f4 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -245,7 +245,8 @@
 			"pagination": {
 				"type": "bool",
 				"default": true
-			}
+			},
+			"detailUrl": "string"
 		}
 	},
 	"dataform": {
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 0c75b46bca..a8d6653e38 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -20,7 +20,7 @@
   export let theme = "alpine"
   export let height = 500
   export let pagination
-  export let detailUrl = 'https://someurl.com/'
+  export let detailUrl
 
   // These can never change at runtime so don't need to be reactive
   let canEdit = editable && datasource && datasource.type !== "view"
@@ -60,6 +60,10 @@
         const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`)
         table = await jsonTable.json()
         schema = table.schema
+        // schema._id = {
+        //   type: '_id',
+        //   options: detailUrl
+        // }
       }
 
       columnDefs = Object.keys(schema).map((key, i) => {
@@ -76,6 +80,18 @@
           autoHeight: true,
         }
       })
+      columnDefs = [...columnDefs, {
+          headerName: 'Details',
+          field: '_id',
+          width: 50,
+          flex: 0,
+          editable: false,
+          cellRenderer: getRenderer({
+            type: '_id',
+            options: detailUrl || 'someTableName'
+          }),
+          autoHeight: true,
+      }]
       dataLoaded = true
     }
   })
@@ -92,7 +108,7 @@
     // always 'row'
     if (name === "type") return true
     // tables are always tied to a single tableId, this is irrelevant
-    // if (name === "tableId") return true
+    if (name === "tableId") return true
 
     return false
   }
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 6998e27b03..e99ece9d84 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -12,7 +12,7 @@ const renderers = new Map([
   ["attachment", attachmentRenderer],
   ["options", optionsRenderer],
   ["link", linkedRowRenderer],
-  ["tableId", viewDetailsRenderer]
+  ["_id", viewDetailsRenderer]
 ])
 
 export function getRenderer(schema, editable) {
@@ -135,7 +135,6 @@ function linkedRowRenderer(options, editable) {
 /* eslint-disable no-unused-vars */
 function viewDetailsRenderer(options) {
   return params => {
-    console.log('Params: ', params)
     let container = document.createElement("div")
     container.style.display = "grid"
     container.style.placeItems = "center"
@@ -144,7 +143,7 @@ function viewDetailsRenderer(options) {
     new ViewDetails({
       target: container,
       props: {
-        url: options.url + params.value
+        url: `${options}${params.data._id}`
       },
     })
 

From 71acc10e9c6f68d14b070974cd4739141b8bbd20 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 20:05:55 +0200
Subject: [PATCH 08/51] minor fixes

---
 .../components/userInterface/temporaryPanelStructure.js   | 4 ++--
 .../standard-components/src/DataGrid/Component.svelte     | 8 ++------
 .../standard-components/src/DataGrid/customRenderer.js    | 2 +-
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 9a4e91fc43..ca880d3118 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -328,9 +328,9 @@ export default {
                 control: TableViewSelect,
               },
               {
-                label: "Detail URL",
+                label: "Table URL",
                 key: "detailUrl",
-                placeholder: "tableName/",
+                placeholder: "tableName",
                 control: Input,
               },
               {
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index a8d6653e38..13d52fd0a6 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -60,10 +60,6 @@
         const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`)
         table = await jsonTable.json()
         schema = table.schema
-        // schema._id = {
-        //   type: '_id',
-        //   options: detailUrl
-        // }
       }
 
       columnDefs = Object.keys(schema).map((key, i) => {
@@ -83,12 +79,12 @@
       columnDefs = [...columnDefs, {
           headerName: 'Details',
           field: '_id',
-          width: 50,
+          width: 25,
           flex: 0,
           editable: false,
           cellRenderer: getRenderer({
             type: '_id',
-            options: detailUrl || 'someTableName'
+            options: detailUrl
           }),
           autoHeight: true,
       }]
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index e99ece9d84..4e4111af77 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -143,7 +143,7 @@ function viewDetailsRenderer(options) {
     new ViewDetails({
       target: container,
       props: {
-        url: `${options}${params.data._id}`
+        url: `/${options}/${params.data._id}`
       },
     })
 

From 4d7c214a1639e518c0dfa46babb6e118027ec3d2 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 20:06:26 +0200
Subject: [PATCH 09/51] lint fixes

---
 packages/standard-components/src/DataGrid/customRenderer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 4e4111af77..d90b5c491e 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -12,7 +12,7 @@ const renderers = new Map([
   ["attachment", attachmentRenderer],
   ["options", optionsRenderer],
   ["link", linkedRowRenderer],
-  ["_id", viewDetailsRenderer]
+  ["_id", viewDetailsRenderer],
 ])
 
 export function getRenderer(schema, editable) {
@@ -143,10 +143,10 @@ function viewDetailsRenderer(options) {
     new ViewDetails({
       target: container,
       props: {
-        url: `/${options}/${params.data._id}`
+        url: `/${options}/${params.data._id}`,
       },
     })
 
     return container
   }
-}
\ No newline at end of file
+}

From 8804dc903ebfc92507d5cdc1f466700c10427616 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 20:10:06 +0200
Subject: [PATCH 10/51] url now takes the same format as in other components

---
 packages/standard-components/src/DataGrid/Component.svelte  | 1 +
 packages/standard-components/src/DataGrid/customRenderer.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 13d52fd0a6..e3fc02c74e 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -82,6 +82,7 @@
           width: 25,
           flex: 0,
           editable: false,
+          sortable: false,
           cellRenderer: getRenderer({
             type: '_id',
             options: detailUrl
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index d90b5c491e..aca4e7d39e 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -143,7 +143,7 @@ function viewDetailsRenderer(options) {
     new ViewDetails({
       target: container,
       props: {
-        url: `/${options}/${params.data._id}`,
+        url: `${options}/${params.data._id}`,
       },
     })
 

From e91d3ba283a49c225f21cb7fcad908da6eaae65a Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 20:56:58 +0200
Subject: [PATCH 11/51] change color to grey

---
 .../src/DataGrid/ViewDetails/Cell.svelte                  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
index e4e79c2b89..58cf2a5408 100644
--- a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
+++ b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
@@ -3,4 +3,10 @@
     export let url
 </script>
 
-<a href={url}><Icon name="view" /></a>
\ No newline at end of file
+<a href={url}><Icon name="view" /></a>
+
+<style>
+    a {
+        color: var(--grey-6)
+    }
+</style>
\ No newline at end of file

From e871b45a2884e778ae2542e352645cf68249c8fa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 08:34:17 +0100
Subject: [PATCH 12/51] Change Text component display to inline-block to
 text-transform works

---
 packages/standard-components/src/Text.svelte | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index 55b8fb762b..d1b5c4a567 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@@ -1,11 +1,7 @@
 <script>
-  import { buildStyle } from "./buildStyle"
-
   export let text = ""
   export let className = ""
-
   export let type = ""
-
   export let _bb
 
   const isTag = tag => type === tag
@@ -34,3 +30,9 @@
 {:else if isTag('sup')}
   <sup class={className}>{text}</sup>
 {:else}<span>{text}</span>{/if}
+
+<style>
+  span {
+    display: inline-block;
+  }
+</style>

From 7a910c6478c79074525ae777e33cd3e819671516 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 08:34:56 +0100
Subject: [PATCH 13/51] Adjust form styles in line with new designs

---
 packages/standard-components/src/Form.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/standard-components/src/Form.svelte b/packages/standard-components/src/Form.svelte
index 29401e8ad4..a95d64d35c 100644
--- a/packages/standard-components/src/Form.svelte
+++ b/packages/standard-components/src/Form.svelte
@@ -23,9 +23,7 @@
   {#each fields as field}
     <div class="form-field" class:wide>
       {#if !(schema[field].type === 'boolean' && !wide)}
-        <Label extraSmall={!wide} grey={!wide}>
-          {capitalise(schema[field].name)}
-        </Label>
+        <Label extraSmall={!wide} grey>{capitalise(schema[field].name)}</Label>
       {/if}
       {#if schema[field].type === 'options'}
         <Select secondary bind:value={$store.data[field]}>
@@ -65,7 +63,6 @@
   }
 
   .form-content {
-    margin-bottom: var(--spacing-xl);
     display: grid;
     gap: var(--spacing-xl);
     width: 100%;
@@ -76,7 +73,7 @@
   }
   .form-field.wide {
     align-items: center;
-    grid-template-columns: 30% 1fr;
+    grid-template-columns: 20% 1fr;
     gap: var(--spacing-xl);
   }
   .form-field.wide :global(label) {

From dedabb864547064ce89c453a963421f6d0f44f5b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 08:35:15 +0100
Subject: [PATCH 14/51] Adjust button styles in line with new designs

---
 packages/standard-components/src/Button.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 7441f478d1..cde82ce37e 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -25,12 +25,10 @@
 <style>
   .default {
     align-items: center;
-    font-size: 16px;
-    padding: 0px 16px;
+    padding: var(--spacing-s) var(--spacing-l);
     box-sizing: border-box;
     border-radius: 4px;
     outline: none;
-    height: 40px;
     cursor: pointer;
     transition: all 0.2s ease 0s;
     overflow: hidden;

From d517ca614deef87eb3f05d5dff95e17d876fdc44 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 08:36:01 +0100
Subject: [PATCH 15/51] Add 48px option for padding and margin design settings

---
 .../components/userInterface/propertyCategories.js    | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 00b67890fb..d13558f405 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -81,6 +81,7 @@ export const layout = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
     ],
   },
@@ -98,6 +99,7 @@ export const margin = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "128px", value: "128px" },
       { label: "256px", value: "256px" },
@@ -116,6 +118,7 @@ export const margin = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "128px", value: "128px" },
       { label: "256px", value: "256px" },
@@ -134,6 +137,7 @@ export const margin = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
@@ -150,6 +154,7 @@ export const margin = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "128px", value: "128px" },
       { label: "256px", value: "256px" },
@@ -168,6 +173,7 @@ export const margin = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "128px", value: "128px" },
       { label: "256px", value: "256px" },
@@ -189,6 +195,7 @@ export const padding = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
@@ -205,6 +212,7 @@ export const padding = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
@@ -221,6 +229,7 @@ export const padding = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
@@ -237,6 +246,7 @@ export const padding = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
@@ -253,6 +263,7 @@ export const padding = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },

From 536e1f2ab37c0d008b2a353466466af9efd69e63 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 08:37:13 +0100
Subject: [PATCH 16/51] Add new Delete Row action which can be used in client
 apps

---
 .../EventsEditor/actions/DeleteRow.svelte     | 91 +++++++++++++++++++
 .../EventsEditor/actions/index.js             |  5 +
 packages/client/src/api/index.js              |  6 ++
 packages/client/src/state/eventHandlers.js    |  1 +
 4 files changed, 103 insertions(+)
 create mode 100644 packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte

diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
new file mode 100644
index 0000000000..6e6f6b6b21
--- /dev/null
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
@@ -0,0 +1,91 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+
+  export let parameters
+
+  let idFields
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    tables: $backendUiStore.tables,
+  })
+
+  $: idFields = bindableProperties.filter(
+    bindable =>
+      bindable.type === "context" && bindable.runtimeBinding.endsWith("._id")
+  )
+
+  $: {
+    if (parameters.rowId) {
+      // Set rev ID
+      parameters.revId = parameters.rowId.replace("_id", "_rev")
+
+      // Set table ID
+      const idBinding = bindableProperties.find(
+        prop =>
+          prop.runtimeBinding ===
+          parameters.rowId
+            .replace("{{", "")
+            .replace("}}", "")
+            .trim()
+      )
+      if (idBinding) {
+        const { instance } = idBinding
+        const component = $store.components[instance._component]
+        const tableInfo = instance[component.context]
+        if (tableInfo) {
+          parameters.tableId =
+            typeof tableInfo === "string" ? tableInfo : tableInfo.tableId
+        }
+      }
+
+      console.log(parameters)
+    }
+  }
+</script>
+
+<div class="root">
+  {#if idFields.length === 0}
+    <div class="cannot-use">
+      Delete row can only be used within a component that provides data, such as
+      a List
+    </div>
+  {:else}
+    <Label size="m" color="dark">Datasource</Label>
+    <Select secondary bind:value={parameters.rowId}>
+      <option value="" />
+      {#each idFields as idField}
+        <option value={`{{ ${idField.runtimeBinding} }}`}>
+          {idField.instance._instanceName}
+        </option>
+      {/each}
+    </Select>
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-s);
+    row-gap: var(--spacing-s);
+    grid-template-columns: auto 1fr auto 1fr auto;
+    align-items: baseline;
+  }
+
+  .root :global(> div:nth-child(2)) {
+    grid-column-start: 2;
+    grid-column-end: 6;
+  }
+
+  .cannot-use {
+    color: var(--red);
+    font-size: var(--font-size-s);
+    text-align: center;
+    width: 70%;
+    margin: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/index.js b/packages/builder/src/components/userInterface/EventsEditor/actions/index.js
index 109a3104f8..1c07356ee9 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/index.js
@@ -1,5 +1,6 @@
 import NavigateTo from "./NavigateTo.svelte"
 import SaveRow from "./SaveRow.svelte"
+import DeleteRow from "./DeleteRow.svelte"
 
 // defines what actions are available, when adding a new one
 // the component is the setup panel for the action
@@ -11,6 +12,10 @@ export default [
     name: "Save Row",
     component: SaveRow,
   },
+  {
+    name: "Delete Row",
+    component: DeleteRow,
+  },
   {
     name: "Navigate To",
     component: NavigateTo,
diff --git a/packages/client/src/api/index.js b/packages/client/src/api/index.js
index 6082accb51..f5f129d9c8 100644
--- a/packages/client/src/api/index.js
+++ b/packages/client/src/api/index.js
@@ -67,6 +67,11 @@ const updateRow = async (params, state) => {
   })
 }
 
+const deleteRow = async params =>
+  await del({
+    url: `/api/${params.tableId}/rows/${params.rowId}/${params.revId}`,
+  })
+
 const makeRowRequestBody = (parameters, state) => {
   // start with the row thats currently in context
   const body = { ...(state.data || {}) }
@@ -103,4 +108,5 @@ export default {
   authenticate: authenticate(apiOpts),
   saveRow,
   updateRow,
+  deleteRow,
 }
diff --git a/packages/client/src/state/eventHandlers.js b/packages/client/src/state/eventHandlers.js
index 629631d001..7461913929 100644
--- a/packages/client/src/state/eventHandlers.js
+++ b/packages/client/src/state/eventHandlers.js
@@ -8,6 +8,7 @@ export const eventHandlers = routeTo => {
     "Navigate To": param => routeTo(param && param.url),
     "Update Row": api.updateRow,
     "Save Row": api.saveRow,
+    "Delete Row": api.deleteRow,
     "Trigger Workflow": api.triggerWorkflow,
   }
 

From 82b8e3e0ed4a534d40a97784ce6d02364d4327c8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 08:38:04 +0100
Subject: [PATCH 17/51] Add XS shadow to top nav header to act as a slight
 border

---
 .../src/utilities/appDirectoryTemplate/pages/main/page.json    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
index 436f5b32df..ea605acf34 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@@ -19,7 +19,8 @@
             "justify-content": "flex-start",
             "align-items": "flex-start",
             "background": "#fff",
-            "width": "100%"
+            "width": "100%",
+            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
           },
           "hover": {},
           "active": {},

From fbe33226c186a049799df9889d56e774c2d02288 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 08:38:27 +0100
Subject: [PATCH 18/51] Add new template for new row autoscreen

---
 .../store/screenTemplates/newRowScreen.js     | 250 +++++++++++++-----
 1 file changed, 183 insertions(+), 67 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 571007c092..0097b56dc9 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -1,10 +1,8 @@
 export default function(tables) {
   return tables.map(table => {
-    const fields = Object.keys(table.schema)
-    const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Add Row"
     return {
       name: `${table.name} - New`,
-      create: () => createScreen(table, heading),
+      create: () => createScreen(table),
       id: NEW_ROW_TEMPLATE,
     }
   })
@@ -12,10 +10,10 @@ export default function(tables) {
 
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
 
-const createScreen = (table, heading) => ({
+const createScreen = table => ({
   props: {
-    _id: "",
-    _component: "@budibase/standard-components/newrow",
+    _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
+    _component: "@budibase/standard-components/rowdetail",
     _styles: {
       normal: {},
       hover: {},
@@ -25,43 +23,22 @@ const createScreen = (table, heading) => ({
     table: table._id,
     _children: [
       {
-        _id: "",
-        _component: "@budibase/standard-components/heading",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        className: "",
-        text: heading,
-        type: "h1",
-        _instanceName: "Heading 1",
-        _children: [],
-      },
-      {
-        _id: "",
-        _component: "@budibase/standard-components/dataform",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        _instanceName: `${table.name} Form`,
-        _children: [],
-      },
-      {
-        _id: "",
+        _id: "ccad6cc135c7947a7ba9c631f655d6e0f",
         _component: "@budibase/standard-components/container",
         _styles: {
           normal: {
-            display: "flex",
-            "flex-direction": "row",
-            "align-items": "center",
-            "justify-content": "flex-end",
+            width: "700px",
+            padding: "0px",
+            background: "white",
+            "border-radius": "0.5rem",
+            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+            margin: "auto",
+            "margin-top": "20px",
+            "padding-top": "48px",
+            "padding-bottom": "48px",
+            "padding-right": "48px",
+            "padding-left": "48px",
+            "margin-bottom": "20px",
           },
           hover: {},
           active: {},
@@ -71,37 +48,187 @@ const createScreen = (table, heading) => ({
         className: "",
         onLoad: [],
         type: "div",
-        _instanceName: "Buttons Container",
+        _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+        _instanceName: "Container",
         _children: [
           {
-            _id: "",
-            _component: "@budibase/standard-components/button",
+            _id: "c6e91622ba7984f468f70bf4bf5120246",
+            _component: "@budibase/standard-components/container",
             _styles: {
               normal: {
-                "margin-right": "20px",
+                "font-size": "14px",
+                color: "#757575",
               },
               hover: {},
               active: {},
               selected: {},
             },
             _code: "",
-            text: "Back",
             className: "",
-            disabled: false,
-            onClick: [
+            onLoad: [],
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Breadcrumbs",
+            _children: [
               {
-                parameters: {
-                  url: `/${table.name.toLowerCase()}`,
+                _id: "caa33353c252c4931b2a51b48a559a7fc",
+                _component: "@budibase/standard-components/link",
+                _styles: {
+                  normal: {
+                    color: "#757575",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {
+                    color: "#4285f4",
+                  },
+                  active: {},
+                  selected: {},
                 },
-                "##eventHandlerType": "Navigate To",
+                _code: "",
+                url: `/${table.name.toLowerCase()}`,
+                openInNewTab: false,
+                text: table.name,
+                color: "",
+                hoverColor: "",
+                underline: false,
+                fontSize: "",
+                fontFamily: "initial",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Back Link",
+                _children: [],
+              },
+              {
+                _id: "c6e218170201040e7a74e2c8304fe1860",
+                _component: "@budibase/standard-components/text",
+                _styles: {
+                  normal: {
+                    "margin-right": "4px",
+                    "margin-left": "4px",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: ">",
+                type: "none",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Arrow",
+                _children: [],
+              },
+              {
+                _id: "c799da1fa3a84442e947cc9199518f64c",
+                _component: "@budibase/standard-components/text",
+                _styles: {
+                  normal: {
+                    color: "#000000",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: "New",
+                type: "none",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Identifier",
+                _children: [],
               },
             ],
-            _instanceName: "Back Button",
-            _children: [],
           },
           {
-            _id: "",
-            _component: "@budibase/standard-components/button",
+            _id: "cbd1637cd1e274287a3c28ef0bf235d08",
+            _component: "@budibase/standard-components/container",
+            _styles: {
+              normal: {
+                display: "flex",
+                "flex-direction": "row",
+                "justify-content": "space-between",
+                "align-items": "center",
+                "margin-top": "32px",
+                "margin-bottom": "32px",
+              },
+              hover: {},
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            className: "",
+            onLoad: [],
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Title Container",
+            _children: [
+              {
+                _id: "c98d3675d04114558bbf28661c5ccfb8e",
+                _component: "@budibase/standard-components/heading",
+                _styles: {
+                  normal: {
+                    margin: "0px",
+                    "margin-bottom": "0px",
+                    "margin-right": "0px",
+                    "margin-top": "0px",
+                    "margin-left": "0px",
+                    flex: "1 1 auto",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                className: "",
+                text: "New Row",
+                type: "h3",
+                _instanceName: "Title",
+                _children: [],
+              },
+              {
+                _id: "cae402bd3c6a44618a8341bf7ab9ab086",
+                _component: "@budibase/standard-components/button",
+                _styles: {
+                  normal: {
+                    background: "#000000",
+                    "border-width": "0",
+                    "border-style": "None",
+                    color: "#fff",
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    "font-size": "14px",
+                    "margin-left": "16px",
+                  },
+                  hover: {
+                    background: "#9e9e9e",
+                  },
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: "Save",
+                className: "",
+                disabled: false,
+                onClick: [
+                  {
+                    parameters: {
+                      contextPath: "data",
+                      tableId: table._id,
+                    },
+                    "##eventHandlerType": "Save Row",
+                  },
+                  {
+                    parameters: {
+                      url: `/${table.name.toLowerCase()}`,
+                    },
+                    "##eventHandlerType": "Navigate To",
+                  },
+                ],
+                _instanceName: "Save Button",
+                _children: [],
+              },
+            ],
+          },
+          {
+            _id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
+            _component: "@budibase/standard-components/dataformwide",
             _styles: {
               normal: {},
               hover: {},
@@ -109,19 +236,8 @@ const createScreen = (table, heading) => ({
               selected: {},
             },
             _code: "",
-            text: "Save",
-            className: "",
-            disabled: false,
-            onClick: [
-              {
-                parameters: {
-                  contextPath: "data",
-                  tableId: table._id,
-                },
-                "##eventHandlerType": "Save Row",
-              },
-            ],
-            _instanceName: "Save Button",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Form",
             _children: [],
           },
         ],

From cfc823557264e60c96e5fac661d245956c792714 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 08:38:40 +0100
Subject: [PATCH 19/51] Add new template for row details autoscreen

---
 .../store/screenTemplates/rowDetailScreen.js  | 293 ++++++++++++++----
 1 file changed, 229 insertions(+), 64 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 58ca2f6d05..5e30420728 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -1,7 +1,8 @@
 export default function(tables) {
   return tables.map(table => {
-    const fields = Object.keys(table.schema)
-    const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Detail"
+    const heading = table.primaryDisplay
+      ? `{{ data.${table.primaryDisplay} }}`
+      : null
     return {
       name: `${table.name} - Detail`,
       create: () => createScreen(table, heading),
@@ -14,7 +15,7 @@ export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
 
 const createScreen = (table, heading) => ({
   props: {
-    _id: "",
+    _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
     _component: "@budibase/standard-components/rowdetail",
     _styles: {
       normal: {},
@@ -25,43 +26,22 @@ const createScreen = (table, heading) => ({
     table: table._id,
     _children: [
       {
-        _id: "",
-        _component: "@budibase/standard-components/heading",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        className: "",
-        text: heading,
-        type: "h1",
-        _instanceName: "Heading 1",
-        _children: [],
-      },
-      {
-        _id: "",
-        _component: "@budibase/standard-components/dataform",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        _instanceName: `${table.name} Form`,
-        _children: [],
-      },
-      {
-        _id: "",
+        _id: "ccad6cc135c7947a7ba9c631f655d6e0f",
         _component: "@budibase/standard-components/container",
         _styles: {
           normal: {
-            display: "flex",
-            "flex-direction": "row",
-            "align-items": "center",
-            "justify-content": "flex-end",
+            width: "700px",
+            padding: "0px",
+            background: "white",
+            "border-radius": "0.5rem",
+            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+            margin: "auto",
+            "margin-top": "20px",
+            "padding-top": "48px",
+            "padding-bottom": "48px",
+            "padding-right": "48px",
+            "padding-left": "48px",
+            "margin-bottom": "20px",
           },
           hover: {},
           active: {},
@@ -71,37 +51,233 @@ const createScreen = (table, heading) => ({
         className: "",
         onLoad: [],
         type: "div",
-        _instanceName: "Buttons Container",
+        _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+        _instanceName: "Container",
         _children: [
           {
-            _id: "",
-            _component: "@budibase/standard-components/button",
+            _id: "c6e91622ba7984f468f70bf4bf5120246",
+            _component: "@budibase/standard-components/container",
             _styles: {
               normal: {
-                "margin-right": "20px",
+                "font-size": "14px",
+                color: "#757575",
               },
               hover: {},
               active: {},
               selected: {},
             },
             _code: "",
-            text: "Back",
             className: "",
-            disabled: false,
-            onClick: [
+            onLoad: [],
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Breadcrumbs",
+            _children: [
               {
-                parameters: {
-                  url: `/${table.name.toLowerCase()}`,
+                _id: "caa33353c252c4931b2a51b48a559a7fc",
+                _component: "@budibase/standard-components/link",
+                _styles: {
+                  normal: {
+                    color: "#757575",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {
+                    color: "#4285f4",
+                  },
+                  active: {},
+                  selected: {},
                 },
-                "##eventHandlerType": "Navigate To",
+                _code: "",
+                url: `/${table.name.toLowerCase()}`,
+                openInNewTab: false,
+                text: table.name,
+                color: "",
+                hoverColor: "",
+                underline: false,
+                fontSize: "",
+                fontFamily: "initial",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Back Link",
+                _children: [],
+              },
+              {
+                _id: "c6e218170201040e7a74e2c8304fe1860",
+                _component: "@budibase/standard-components/text",
+                _styles: {
+                  normal: {
+                    "margin-right": "4px",
+                    "margin-left": "4px",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: ">",
+                type: "none",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Arrow",
+                _children: [],
+              },
+              {
+                _id: "c799da1fa3a84442e947cc9199518f64c",
+                _component: "@budibase/standard-components/text",
+                _styles: {
+                  normal: {
+                    color: "#000000",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: heading || "Edit",
+                type: "none",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Identifier",
+                _children: [],
               },
             ],
-            _instanceName: "Back Button",
-            _children: [],
           },
           {
-            _id: "",
-            _component: "@budibase/standard-components/button",
+            _id: "cbd1637cd1e274287a3c28ef0bf235d08",
+            _component: "@budibase/standard-components/container",
+            _styles: {
+              normal: {
+                display: "flex",
+                "flex-direction": "row",
+                "justify-content": "space-between",
+                "align-items": "center",
+                "margin-top": "32px",
+                "margin-bottom": "32px",
+              },
+              hover: {},
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            className: "",
+            onLoad: [],
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Title Container",
+            _children: [
+              {
+                _id: "c98d3675d04114558bbf28661c5ccfb8e",
+                _component: "@budibase/standard-components/heading",
+                _styles: {
+                  normal: {
+                    margin: "0px",
+                    "margin-bottom": "0px",
+                    "margin-right": "0px",
+                    "margin-top": "0px",
+                    "margin-left": "0px",
+                    flex: "1 1 auto",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                className: "",
+                text: heading || "Edit Row",
+                type: "h3",
+                _instanceName: "Title",
+                _children: [],
+              },
+              {
+                _id: "c0a162cfb7d1c4bcfa8d24c290ccd1fd6",
+                _component: "@budibase/standard-components/button",
+                _styles: {
+                  normal: {
+                    background: "transparent",
+                    "border-width": "0",
+                    "border-style": "None",
+                    color: "#9e9e9e",
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    "font-size": "14px",
+                    "margin-right": "8px",
+                    "margin-left": "16px",
+                  },
+                  hover: {
+                    background: "transparent",
+                    color: "#000000",
+                  },
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: "Delete",
+                className: "",
+                disabled: false,
+                onClick: [
+                  {
+                    parameters: {
+                      rowId: "{{ data._id }}",
+                      revId: "{{ data._rev }}",
+                      tableId: table._id,
+                    },
+                    "##eventHandlerType": "Delete Row",
+                  },
+                  {
+                    parameters: {
+                      url: `/${table.name.toLowerCase()}`,
+                    },
+                    "##eventHandlerType": "Navigate To",
+                  },
+                ],
+                _instanceName: "Delete Button",
+                _children: [],
+              },
+              {
+                _id: "cae402bd3c6a44618a8341bf7ab9ab086",
+                _component: "@budibase/standard-components/button",
+                _styles: {
+                  normal: {
+                    background: "#000000",
+                    "border-width": "0",
+                    "border-style": "None",
+                    color: "#fff",
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    "font-size": "14px",
+                  },
+                  hover: {
+                    background: "#9e9e9e",
+                  },
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: "Save",
+                className: "",
+                disabled: false,
+                onClick: [
+                  {
+                    parameters: {
+                      contextPath: "data",
+                      tableId: table._id,
+                    },
+                    "##eventHandlerType": "Save Row",
+                  },
+                  {
+                    parameters: {
+                      url: `/${table.name.toLowerCase()}`,
+                    },
+                    "##eventHandlerType": "Navigate To",
+                  },
+                ],
+                _instanceName: "Save Button",
+                _children: [],
+              },
+            ],
+          },
+          {
+            _id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
+            _component: "@budibase/standard-components/dataformwide",
             _styles: {
               normal: {},
               hover: {},
@@ -109,19 +285,8 @@ const createScreen = (table, heading) => ({
               selected: {},
             },
             _code: "",
-            text: "Save",
-            className: "",
-            disabled: false,
-            onClick: [
-              {
-                parameters: {
-                  contextPath: "data",
-                  tableId: table._id,
-                },
-                "##eventHandlerType": "Save Row",
-              },
-            ],
-            _instanceName: "Save Button",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Form",
             _children: [],
           },
         ],

From 92a6bd1a6d70e63f45f48e476f66cf61069a3f1b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 09:16:25 +0100
Subject: [PATCH 20/51] Fix popstate client routing events

---
 packages/client/src/render/screenRouter.js | 31 +++++++++++++---------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index 14337c4319..e76c525174 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -3,21 +3,28 @@ import appStore from "../state/store"
 import { parseAppIdFromCookie } from "./getAppId"
 
 export const screenRouter = ({ screens, onScreenSelected, window }) => {
+  const isRunningLocally = () => {
+    const hostname = (window.location && window.location.hostname) || ""
+    return (
+      hostname === "localhost" ||
+      hostname === "127.0.0.1" ||
+      hostname.startsWith("192.168")
+    )
+  }
+
   const makeRootedPath = url => {
-    const hostname = window.location && window.location.hostname
-    if (hostname) {
-      if (
-        hostname === "localhost" ||
-        hostname === "127.0.0.1" ||
-        hostname.startsWith("192.168")
-      ) {
-        const appId = parseAppIdFromCookie(window.document.cookie)
-        if (url) {
-          if (url.startsWith(appId)) return url
-          return `/${appId}${url.startsWith("/") ? "" : "/"}${url}`
+    if (isRunningLocally()) {
+      const appId = parseAppIdFromCookie(window.document.cookie)
+      if (url) {
+        if (!url.startsWith("/")) {
+          url = `/${url}`
         }
-        return appId
+        if (url.startsWith(`/${appId}`)) {
+          return url
+        }
+        return `/${appId}${url}`
       }
+      return `/${appId}`
     }
     return url
   }

From 853c31594c6a73c08879618e673df7a24007349b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 09:16:36 +0100
Subject: [PATCH 21/51] Fix new row screen template

---
 .../src/builderStore/store/screenTemplates/newRowScreen.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 0097b56dc9..708c9d80ee 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -13,7 +13,7 @@ export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
 const createScreen = table => ({
   props: {
     _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
-    _component: "@budibase/standard-components/rowdetail",
+    _component: "@budibase/standard-components/newrow",
     _styles: {
       normal: {},
       hover: {},

From 906316f191aa8a1ec1eb455ba40004962be5da4a Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 16 Oct 2020 09:33:17 +0100
Subject: [PATCH 22/51] Removing the pretty function on DataGrids to match the
 backend.

---
 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 2fb32ffcdd..3ccf826711 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -71,7 +71,7 @@
           headerCheckboxSelection: i === 0 && canEdit,
           checkboxSelection: i === 0 && canEdit,
           valueSetter: setters.get(schema[key].type),
-          headerName: key.charAt(0).toUpperCase() + key.slice(1),
+          headerName: key,
           field: key,
           hide: shouldHideField(key),
           sortable: true,

From 5e44b3373c7e611580ecb7c9877ae9db13a9ceaa Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 16 Oct 2020 10:35:15 +0200
Subject: [PATCH 23/51] change from Input to ScreenSelect component for prop

---
 .../src/components/userInterface/temporaryPanelStructure.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index ca880d3118..cb35d140c4 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -331,7 +331,7 @@ export default {
                 label: "Table URL",
                 key: "detailUrl",
                 placeholder: "tableName",
-                control: Input,
+                control: ScreenSelect,
               },
               {
                 label: "Editable",

From 0c61fe60a2fc5eac3830a846576f7e4c3d2f97fb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 09:37:19 +0100
Subject: [PATCH 24/51] Fix crashing whenever hitting an API error from client
 app

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

diff --git a/packages/client/src/api/index.js b/packages/client/src/api/index.js
index f5f129d9c8..f16daea139 100644
--- a/packages/client/src/api/index.js
+++ b/packages/client/src/api/index.js
@@ -37,7 +37,7 @@ const del = apiCall("DELETE")
 const ERROR_MEMBER = "##error"
 const error = message => {
   const err = { [ERROR_MEMBER]: message }
-  appStore.update(s => s["##error_message"], message)
+  // appStore.update(s => s["##error_message"], message)
   return err
 }
 

From 79832e5d4c45d2db8d2e250d0321c4f7be38607d Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 16 Oct 2020 09:54:35 +0100
Subject: [PATCH 25/51] linting

---
 .../userInterface/ComponentsHierarchy.svelte      | 15 ++++++---------
 .../src/DataGrid/Component.svelte                 | 15 +++++++++------
 .../src/DataGrid/ViewDetails/Cell.svelte          | 12 ++++++------
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 8393299b12..add2a99d6a 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -27,15 +27,12 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(
-      name,
-      [
-        trimCharsStart("./"),
-        trimCharsStart("~/"),
-        trimCharsStart("../"),
-        trimChars(" "),
-      ]
-    )
+    pipe(name, [
+      trimCharsStart("./"),
+      trimCharsStart("~/"),
+      trimCharsStart("../"),
+      trimChars(" "),
+    ])
 
   const changeScreen = screen => {
     store.setCurrentScreen(screen.props._instanceName)
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 35b214f00f..675fb1d5b3 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -81,19 +81,22 @@
           autoHeight: true,
         }
       })
-      columnDefs = [...columnDefs, {
-          headerName: 'Details',
-          field: '_id',
+      columnDefs = [
+        ...columnDefs,
+        {
+          headerName: "Details",
+          field: "_id",
           width: 25,
           flex: 0,
           editable: false,
           sortable: false,
           cellRenderer: getRenderer({
-            type: '_id',
-            options: detailUrl
+            type: "_id",
+            options: detailUrl,
           }),
           autoHeight: true,
-      }]
+        },
+      ]
       dataLoaded = true
     }
   })
diff --git a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
index 58cf2a5408..09c9b15e6d 100644
--- a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
+++ b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
@@ -1,12 +1,12 @@
 <script>
-    import { Icon } from '@budibase/bbui'
-    export let url
+  import { Icon } from "@budibase/bbui"
+  export let url
 </script>
 
 <a href={url}><Icon name="view" /></a>
 
 <style>
-    a {
-        color: var(--grey-6)
-    }
-</style>
\ No newline at end of file
+  a {
+    color: var(--grey-6);
+  }
+</style>

From 312c5fc4376f99248d94fda431b5936b229581d0 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 16 Oct 2020 11:59:59 +0100
Subject: [PATCH 26/51] Fixing an issue whereby in some enrichment calls the
 count of links would be doubled (counting both sides).

---
 packages/server/src/db/linkedRows/index.js     | 9 +++++++--
 packages/server/src/db/linkedRows/linkUtils.js | 6 ++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/server/src/db/linkedRows/index.js b/packages/server/src/db/linkedRows/index.js
index 0932fc665f..dedb0f84a5 100644
--- a/packages/server/src/db/linkedRows/index.js
+++ b/packages/server/src/db/linkedRows/index.js
@@ -1,5 +1,5 @@
 const LinkController = require("./LinkController")
-const { IncludeDocs, getLinkDocuments, createLinkView } = require("./linkUtils")
+const { IncludeDocs, getLinkDocuments, createLinkView, getUniqueByProp } = require("./linkUtils")
 const _ = require("lodash")
 
 /**
@@ -110,7 +110,12 @@ exports.attachLinkInfo = async (instanceId, rows) => {
   // now iterate through the rows and all field information
   for (let row of rows) {
     // get all links for row, ignore fieldName for now
-    const linkVals = responses.filter(el => el.thisId === row._id)
+    // have to get unique as the previous table query can
+    // return duplicates, could be querying for both tables in a relation
+    const linkVals = getUniqueByProp(
+      responses.filter(el => el.thisId === row._id),
+      "id"
+    )
     for (let linkVal of linkVals) {
       // work out which link pertains to this row
       if (!(row[linkVal.fieldName] instanceof Array)) {
diff --git a/packages/server/src/db/linkedRows/linkUtils.js b/packages/server/src/db/linkedRows/linkUtils.js
index 8f548eed3d..5f600cc3cb 100644
--- a/packages/server/src/db/linkedRows/linkUtils.js
+++ b/packages/server/src/db/linkedRows/linkUtils.js
@@ -92,3 +92,9 @@ exports.getLinkDocuments = async function({
     }
   }
 }
+
+exports.getUniqueByProp = (array, prop) => {
+  return array.filter((obj, pos, arr) => {
+    return arr.map(mapObj => mapObj[prop]).indexOf(obj[prop]) === pos
+  })
+}

From 8e3e12f234ad42cd282b826074d270b08f665ce6 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 16 Oct 2020 12:13:27 +0100
Subject: [PATCH 27/51] Linting.

---
 packages/server/src/db/linkedRows/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/db/linkedRows/index.js b/packages/server/src/db/linkedRows/index.js
index dedb0f84a5..6f745b6e7c 100644
--- a/packages/server/src/db/linkedRows/index.js
+++ b/packages/server/src/db/linkedRows/index.js
@@ -1,5 +1,10 @@
 const LinkController = require("./LinkController")
-const { IncludeDocs, getLinkDocuments, createLinkView, getUniqueByProp } = require("./linkUtils")
+const {
+  IncludeDocs,
+  getLinkDocuments,
+  createLinkView,
+  getUniqueByProp,
+} = require("./linkUtils")
 const _ = require("lodash")
 
 /**

From 623836ca1bcbdbf252da5bf662277f20620aad07 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 12:39:26 +0100
Subject: [PATCH 28/51] Bump BBUI version

---
 packages/builder/package.json             | 2 +-
 packages/builder/yarn.lock                | 8 ++++----
 packages/standard-components/package.json | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 4ddf917bee..854c315580 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.41.0",
+    "@budibase/bbui": "^1.43.1",
     "@budibase/client": "^0.2.1",
     "@budibase/colorpicker": "^1.0.1",
     "@fortawesome/fontawesome-free": "^5.14.0",
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index dfeebc7214..32da0f0c6f 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -709,10 +709,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.41.0":
-  version "1.41.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.41.0.tgz#cb239db3071a4a6c6f0ef48ddde55f5eab9808ce"
-  integrity sha512-pT5u6HDdXcylWgSE1TBt3jETg92GwgAXpUsBVqX+OUE/2lNbmThb8egAckpemHDvm91FAL0nApQYpV7c/qLzvw==
+"@budibase/bbui@^1.43.1":
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.43.1.tgz#d3e5740c2de2bed6817a7f5f05801cbcc150024a"
+  integrity sha512-SpRoR3fdm1jmrVuKfbayG2RwzRDvZCrL/VowrCOi+S7vveijjzAlQCgYo4EsC+p/OW/r86t+DdMEPynon5XzsA==
   dependencies:
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 77e1cee746..24048888f4 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -36,7 +36,7 @@
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.41.0",
+    "@budibase/bbui": "^1.43.1",
     "@budibase/svelte-ag-grid": "^0.0.13",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@svelteschool/svelte-forms": "^0.7.0",

From ddc979dc59cae20f98322dd27b10f11580a0cf5d Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 16 Oct 2020 12:41:05 +0100
Subject: [PATCH 29/51] v0.2.2

---
 lerna.json                                | 2 +-
 packages/builder/package.json             | 4 ++--
 packages/cli/package.json                 | 4 ++--
 packages/client/package.json              | 2 +-
 packages/server/package.json              | 4 ++--
 packages/standard-components/package.json | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/lerna.json b/lerna.json
index bd38e87505..b3e7fe4677 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "0.2.2",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 4ddf917bee..52df8902c5 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@budibase/bbui": "^1.41.0",
-    "@budibase/client": "^0.2.1",
+    "@budibase/client": "^0.2.2",
     "@budibase/colorpicker": "^1.0.1",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@sentry/browser": "5.19.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index e3a1fc1f3a..0d6ab00d63 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "budibase",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Budibase CLI",
   "repository": "https://github.com/Budibase/Budibase",
   "homepage": "https://www.budibase.com",
@@ -17,7 +17,7 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/server": "^0.2.1",
+    "@budibase/server": "^0.2.2",
     "@inquirer/password": "^0.0.6-alpha.0",
     "chalk": "^2.4.2",
     "dotenv": "^8.2.0",
diff --git a/packages/client/package.json b/packages/client/package.json
index b4313a9954..e9a4e52c8f 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MPL-2.0",
   "main": "dist/budibase-client.js",
   "module": "dist/budibase-client.esm.mjs",
diff --git a/packages/server/package.json b/packages/server/package.json
index de1ccd5845..93194a1080 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/server",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Budibase Web Server",
   "main": "src/electron.js",
   "repository": {
@@ -42,7 +42,7 @@
   "author": "Michael Shanks",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/client": "^0.2.1",
+    "@budibase/client": "^0.2.2",
     "@koa/router": "^8.0.0",
     "@sendgrid/mail": "^7.1.1",
     "@sentry/node": "^5.19.2",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 77e1cee746..cd18e8d769 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -13,7 +13,7 @@
     "dev:builder": "rollup -cw"
   },
   "devDependencies": {
-    "@budibase/client": "^0.2.1",
+    "@budibase/client": "^0.2.2",
     "@rollup/plugin-commonjs": "^11.1.0",
     "lodash": "^4.17.15",
     "rollup": "^2.11.2",
@@ -31,7 +31,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {

From ccb4392a67f75231a4b12770992d44119b7e58e2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 12:55:20 +0100
Subject: [PATCH 30/51] Make detail column sticky and left orientated and fix
 crash with options inside grid

---
 packages/standard-components/components.json  |  2 +-
 .../src/DataGrid/Component.svelte             | 48 +++++++++++++------
 .../src/DataGrid/ViewDetails/Cell.svelte      | 19 +++++---
 .../src/DataGrid/customRenderer.js            | 22 +++++----
 4 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 20929de9f4..d19b2ad85f 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -240,7 +240,7 @@
 			},
 			"height": {
 				"type": "number",
-				"default": "500"
+				"default": "540"
 			},
 			"pagination": {
 				"type": "bool",
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index baaebf20aa..4d51da2b4d 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -81,19 +81,29 @@
           autoHeight: true,
         }
       })
-      columnDefs = [...columnDefs, {
-          headerName: 'Details',
-          field: '_id',
-          width: 25,
-          flex: 0,
-          editable: false,
-          sortable: false,
-          cellRenderer: getRenderer({
-            type: '_id',
-            options: detailUrl
-          }),
-          autoHeight: true,
-      }]
+
+      if (detailUrl) {
+        columnDefs = [
+          ...columnDefs,
+          {
+            headerName: "Detail",
+            field: "_id",
+            minWidth: 100,
+            width: 100,
+            flex: 0,
+            editable: false,
+            sortable: false,
+            cellRenderer: getRenderer({
+              type: "_id",
+              options: detailUrl,
+            }),
+            autoHeight: true,
+            pinned: "left",
+            filter: false,
+          },
+        ]
+      }
+
       dataLoaded = true
     }
   })
@@ -148,7 +158,7 @@
     href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
 </svelte:head>
 
-<div style="--grid-height: {height}px">
+<div class="container" style="--grid-height: {height}px">
   {#if dataLoaded}
     {#if canAddDelete}
       <div class="controls">
@@ -182,6 +192,16 @@
 </div>
 
 <style>
+  .container :global(.ag-pinned-left-header) {
+    border-right-color: #dde2eb !important;
+  }
+  .container :global(.ag-pinned-left-header .ag-header-cell-label) {
+    justify-content: center;
+  }
+  .container :global(.ag-cell-last-left-pinned) {
+    border-right-color: #dde2eb !important;
+  }
+
   .controls {
     margin-bottom: var(--spacing-s);
     display: grid;
diff --git a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
index 58cf2a5408..d17f7425a2 100644
--- a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
+++ b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
@@ -1,12 +1,17 @@
 <script>
-    import { Icon } from '@budibase/bbui'
-    export let url
+  import { createEventDispatcher } from "svelte"
+  import { Icon, Button } from "@budibase/bbui"
+  const dispatch = createEventDispatcher()
+
+  export let url
+  let link
 </script>
 
-<a href={url}><Icon name="view" /></a>
+<a href={url} bind:this={link} />
+<Button small secondary on:click={() => link.click()}>View</Button>
 
 <style>
-    a {
-        color: var(--grey-6)
-    }
-</style>
\ No newline at end of file
+  a {
+    display: none;
+  }
+</style>
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index aca4e7d39e..a399d1ae15 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -17,14 +17,18 @@ const renderers = new Map([
 
 export function getRenderer(schema, editable) {
   if (renderers.get(schema.type)) {
-    return renderers.get(schema.type)(schema.options, editable)
+    return renderers.get(schema.type)(
+      schema.options,
+      schema.constraints,
+      editable
+    )
   } else {
     return false
   }
 }
 
 /* eslint-disable no-unused-vars */
-function booleanRenderer(options, editable) {
+function booleanRenderer(options, constraints, editable) {
   return params => {
     const toggle = e => {
       params.value = !params.value
@@ -46,7 +50,7 @@ function booleanRenderer(options, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function attachmentRenderer(options, editable) {
+function attachmentRenderer(options, constraints, editable) {
   return params => {
     const container = document.createElement("div")
 
@@ -68,7 +72,7 @@ function attachmentRenderer(options, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function dateRenderer(options, editable) {
+function dateRenderer(options, constraints, editable) {
   return function(params) {
     const container = document.createElement("div")
     const toggle = e => {
@@ -88,7 +92,7 @@ function dateRenderer(options, editable) {
   }
 }
 
-function optionsRenderer({ inclusion }, editable) {
+function optionsRenderer(options, constraints, editable) {
   return params => {
     if (!editable) return params.value
     const container = document.createElement("div")
@@ -103,7 +107,7 @@ function optionsRenderer({ inclusion }, editable) {
       target: container,
       props: {
         value: params.value,
-        options: inclusion,
+        options: constraints.inclusion,
       },
     })
 
@@ -113,7 +117,7 @@ function optionsRenderer({ inclusion }, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function linkedRowRenderer(options, editable) {
+function linkedRowRenderer(options, constraints, editable) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
@@ -133,11 +137,11 @@ function linkedRowRenderer(options, editable) {
 }
 
 /* eslint-disable no-unused-vars */
-function viewDetailsRenderer(options) {
+function viewDetailsRenderer(options, constraints, editable) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
-    container.style.placeItems = "center"
+    container.style.alignItems = "center"
     container.style.height = "100%"
 
     new ViewDetails({

From ebffeeb9984e8d5489e9bc035e8cb728bb8fb0a1 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 16 Oct 2020 13:48:59 +0100
Subject: [PATCH 31/51] Fixing some issues found with deleting tables and
 relationships not getting cleaned up fully + builder not updating - also
 making sure builder store initial state of screens is accurate.

---
 packages/builder/src/builderStore/store/index.js    |  5 ++++-
 .../TableNavigator/popovers/EditTablePopover.svelte |  1 +
 packages/server/src/db/linkedRows/LinkController.js | 13 +++++++++----
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 277f57584e..e6a42ee91c 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -129,7 +129,10 @@ const setPackage = (store, initial) => async pkg => {
   initial.appId = pkg.application._id
   initial.pages = pkg.pages
   initial.hasAppPackage = true
-  initial.screens = values(pkg.screens)
+  initial.screens = [
+    ...Object.values(main_screens),
+    ...Object.values(unauth_screens),
+  ]
   initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.appInstances = pkg.application.instances
   initial.appId = pkg.application._id
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 2b74e9c288..25f74671fd 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -42,6 +42,7 @@
   async function deleteTable() {
     await backendUiStore.actions.tables.delete(table)
     store.deleteScreens(templateScreens)
+    await backendUiStore.actions.tables.fetch()
     notifier.success("Table deleted")
     hideEditor()
   }
diff --git a/packages/server/src/db/linkedRows/LinkController.js b/packages/server/src/db/linkedRows/LinkController.js
index 06e4aab1f2..5eed0bb4a8 100644
--- a/packages/server/src/db/linkedRows/LinkController.js
+++ b/packages/server/src/db/linkedRows/LinkController.js
@@ -1,6 +1,7 @@
 const CouchDB = require("../index")
 const { IncludeDocs, getLinkDocuments } = require("./linkUtils")
 const { generateLinkID } = require("../utils")
+const Sentry = require("@sentry/node")
 
 /**
  * Creates a new link document structure which can be put to the database. It is important to
@@ -289,10 +290,14 @@ class LinkController {
     const schema = table.schema
     for (let fieldName of Object.keys(schema)) {
       const field = schema[fieldName]
-      if (field.type === "link") {
-        const linkedTable = await this._db.get(field.tableId)
-        delete linkedTable.schema[table.name]
-        await this._db.put(linkedTable)
+      try {
+        if (field.type === "link") {
+          const linkedTable = await this._db.get(field.tableId)
+          delete linkedTable.schema[field.fieldName]
+          await this._db.put(linkedTable)
+        }
+      } catch (err) {
+        Sentry.captureException(err)
       }
     }
     // need to get the full link docs to delete them

From 734b9e744c90d0f98398654cf86c61a2212a7021 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 16 Oct 2020 13:50:18 +0100
Subject: [PATCH 32/51] Linting.

---
 packages/standard-components/src/DataGrid/Component.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 21d5d86c97..781ed6ccbf 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -11,7 +11,12 @@
   import { onMount } from "svelte"
 
   import AgGrid from "@budibase/svelte-ag-grid"
-  import { TextButton as DeleteButton, Icon, Modal, ModalContent } from "@budibase/bbui"
+  import {
+    TextButton as DeleteButton,
+    Icon,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
 
   export let _bb
   export let datasource = {}

From 3a9703fa6c6c97e9b43dd5f69d785c8d468b60c5 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 16 Oct 2020 14:00:08 +0100
Subject: [PATCH 33/51] Fixing linting issue.

---
 packages/builder/src/builderStore/store/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index e6a42ee91c..311d7a63a3 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -1,4 +1,4 @@
-import { values, cloneDeep } from "lodash/fp"
+import { cloneDeep } from "lodash/fp"
 import getNewComponentName from "../getNewComponentName"
 import { backendUiStore } from "builderStore"
 import { writable, get } from "svelte/store"

From 99cd1e4a5160660d21603fcf8fbe88602f56a2a3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 15:14:36 +0100
Subject: [PATCH 34/51] Bump BBUI version

---
 packages/builder/package.json             | 2 +-
 packages/builder/yarn.lock                | 8 ++++----
 packages/standard-components/package.json | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 511ab26d0e..d9a4f56ef3 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.43.1",
+    "@budibase/bbui": "^1.44.0",
     "@budibase/client": "^0.2.2",
     "@budibase/colorpicker": "^1.0.1",
     "@fortawesome/fontawesome-free": "^5.14.0",
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 32da0f0c6f..7da63d089e 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -709,10 +709,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.43.1":
-  version "1.43.1"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.43.1.tgz#d3e5740c2de2bed6817a7f5f05801cbcc150024a"
-  integrity sha512-SpRoR3fdm1jmrVuKfbayG2RwzRDvZCrL/VowrCOi+S7vveijjzAlQCgYo4EsC+p/OW/r86t+DdMEPynon5XzsA==
+"@budibase/bbui@^1.44.0":
+  version "1.44.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.44.0.tgz#0c00d98173a8b0ab757f61e349ed366bf640be4b"
+  integrity sha512-YlcRSgOZct8W07z9IaOXNFrVvG0EUWxzcfuEOfXZRviGxm9TIhe/G6T9Cai1ZgPGicnKXa0dPAT3UrzIVB5xJg==
   dependencies:
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 54f7ae4167..251f9f605c 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -36,7 +36,7 @@
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.43.1",
+    "@budibase/bbui": "^1.44.0",
     "@budibase/svelte-ag-grid": "^0.0.13",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@svelteschool/svelte-forms": "^0.7.0",

From 41d067810f881643dc81e30a153547c05d0c6eaa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 15:15:00 +0100
Subject: [PATCH 35/51] Update template auto screens

---
 .../store/screenTemplates/newRowScreen.js     |   2 +-
 .../store/screenTemplates/rowDetailScreen.js  |   4 +-
 .../store/screenTemplates/rowListScreen.js    | 158 ++++++++++++------
 3 files changed, 109 insertions(+), 55 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 708c9d80ee..94b80c824f 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -197,7 +197,7 @@ const createScreen = table => ({
                     "margin-left": "16px",
                   },
                   hover: {
-                    background: "#9e9e9e",
+                    background: "#4285f4",
                   },
                   active: {},
                   selected: {},
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 5e30420728..6173559fb9 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -204,7 +204,7 @@ const createScreen = (table, heading) => ({
                   },
                   hover: {
                     background: "transparent",
-                    color: "#000000",
+                    color: "#4285f4",
                   },
                   active: {},
                   selected: {},
@@ -246,7 +246,7 @@ const createScreen = (table, heading) => ({
                     "font-size": "14px",
                   },
                   hover: {
-                    background: "#9e9e9e",
+                    background: "#4285f4",
                   },
                   active: {},
                   selected: {},
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
index c01fc9e3ae..2935d36ce1 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@@ -12,7 +12,7 @@ export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
 
 const createScreen = table => ({
   props: {
-    _id: "",
+    _id: "c7365379815e4457dbe703a886c2da43b",
     _component: "@budibase/standard-components/container",
     _styles: {
       normal: {},
@@ -23,14 +23,23 @@ const createScreen = table => ({
     type: "div",
     _children: [
       {
-        _id: "",
+        _id: "cf51241fc063d4d87be032dd509fe0244",
         _component: "@budibase/standard-components/container",
         _styles: {
           normal: {
-            display: "flex",
-            "flex-direction": "row",
-            "justify-content": "space-between",
-            "align-items": "center",
+            background: "white",
+            "border-radius": "0.5rem",
+            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+            margin: "auto",
+            "margin-top": "20px",
+            "border-width": "2px",
+            "border-color": "rgba(0, 0, 0, 0.1)",
+            "border-style": "None",
+            "padding-top": "48px",
+            "padding-bottom": "48px",
+            "padding-right": "48px",
+            "padding-left": "48px",
+            "margin-bottom": "20px",
           },
           hover: {},
           active: {},
@@ -40,69 +49,114 @@ const createScreen = table => ({
         className: "",
         onLoad: [],
         type: "div",
-        _instanceName: "Header",
+        _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+        _instanceName: "Container",
         _children: [
           {
-            _id: "",
-            _component: "@budibase/standard-components/heading",
+            _id: "c73294c301fd145aabe9bbbbd96a150ac",
+            _component: "@budibase/standard-components/container",
             _styles: {
-              normal: {},
+              normal: {
+                display: "flex",
+                "flex-direction": "row",
+                "justify-content": "space-between",
+                "align-items": "center",
+                "margin-bottom": "32px",
+              },
               hover: {},
               active: {},
               selected: {},
             },
             _code: "",
             className: "",
-            text: `${table.name} List`,
-            type: "h1",
-            _instanceName: "Heading 1",
-            _children: [],
-          },
-          {
-            _id: "",
-            _component: "@budibase/standard-components/button",
-            _styles: {
-              normal: {},
-              hover: {},
-              active: {},
-              selected: {},
-            },
-            _code: "",
-            text: "Create New",
-            className: "",
-            disabled: false,
-            onClick: [
+            onLoad: [],
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Title Container",
+            _children: [
               {
-                parameters: {
-                  url: `/${table.name}/new`,
+                _id: "c2b77901df95a4d1ca7204c58300bc94b",
+                _component: "@budibase/standard-components/heading",
+                _styles: {
+                  normal: {
+                    margin: "0px",
+                    flex: "1 1 auto",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
                 },
-                "##eventHandlerType": "Navigate To",
+                _code: "",
+                className: "",
+                text: table.name,
+                type: "h3",
+                _instanceName: "Title",
+                _children: [],
+              },
+              {
+                _id: "c12a82d77baf24ca9922ea0af7cd4f723",
+                _component: "@budibase/standard-components/button",
+                _styles: {
+                  normal: {
+                    background: "#000000",
+                    "border-width": "0",
+                    "border-style": "None",
+                    color: "#fff",
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    "font-size": "14px",
+                  },
+                  hover: {
+                    background: "#4285f4",
+                  },
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: "Create New",
+                className: "",
+                disabled: false,
+                onClick: [
+                  {
+                    parameters: {
+                      url: `/${table.name.toLowerCase()}/new`,
+                    },
+                    "##eventHandlerType": "Navigate To",
+                  },
+                ],
+                _instanceName: "New Button",
+                _children: [],
               },
             ],
-            _instanceName: "Create New Button",
+          },
+          {
+            _id: "ca686a2ed89c943e6bafb63fa66a3ead3",
+            _component: "@budibase/standard-components/datagrid",
+            _styles: {
+              normal: {},
+              hover: {},
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            datasource: {
+              label: table.name,
+              name: `all_${table._id}`,
+              tableId: table._id,
+              type: "table",
+            },
+            editable: false,
+            theme: "alpine",
+            height: "540",
+            pagination: true,
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Grid",
             _children: [],
+            detailUrl: `${table.name.toLowerCase()}/:id`,
           },
         ],
       },
-      {
-        _id: "",
-        _component: "@budibase/standard-components/datagrid",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        datasource: {
-          label: "Deals",
-          name: `all_${table._id}`,
-          tableId: table._id,
-          type: "table",
-        },
-        _instanceName: `${table.name} Table`,
-        _children: [],
-      },
     ],
     _instanceName: `${table.name} - List`,
     _code: "",

From 4aa9e2d1790f3f22cf93ce5c14bd9cacb824d773 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 15:16:29 +0100
Subject: [PATCH 36/51] Add new DetailScreenSelect component for selecting only
 detail screens and update detail linking in grids

---
 .../userInterface/DetailScreenSelect.svelte   | 49 +++++++++++++++++++
 .../userInterface/temporaryPanelStructure.js  |  6 +--
 .../src/DataGrid/Component.svelte             |  8 +--
 .../src/DataGrid/ViewDetails/Cell.svelte      |  7 +--
 .../src/DataGrid/customRenderer.js            | 13 +++--
 5 files changed, 63 insertions(+), 20 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/DetailScreenSelect.svelte

diff --git a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
new file mode 100644
index 0000000000..1e2908ab54
--- /dev/null
+++ b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { DataList } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store } from "builderStore"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+
+  $: urls = getUrls()
+
+  const handleBlur = () => dispatch("change", value)
+
+  const getUrls = () => {
+    return [
+      ...$store.screens
+        .filter(
+          screen =>
+            screen.props._component.endsWith("/rowdetail") ||
+            screen.route.endsWith(":id")
+        )
+        .map(screen => ({
+          name: screen.props._instanceName,
+          url: screen.route,
+          sort: screen.props._component,
+        })),
+    ]
+  }
+</script>
+
+<div>
+  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+    <option value="" />
+    {#each urls as url}
+      <option value={url.url}>{url.name}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index cb35d140c4..a24d101f5d 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -6,6 +6,7 @@ import TableViewSelect from "components/userInterface/TableViewSelect.svelte"
 import TableViewFieldSelect from "components/userInterface/TableViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
+import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte"
 import { IconSelect } from "components/userInterface/IconSelect"
 import Colorpicker from "@budibase/colorpicker"
 
@@ -328,10 +329,9 @@ export default {
                 control: TableViewSelect,
               },
               {
-                label: "Table URL",
+                label: "Detail URL",
                 key: "detailUrl",
-                placeholder: "tableName",
-                control: ScreenSelect,
+                control: DetailScreenSelect,
               },
               {
                 label: "Editable",
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 9930f90aca..0d80990513 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -94,7 +94,7 @@
             sortable: false,
             cellRenderer: getRenderer({
               type: "_id",
-              options: detailUrl,
+              options: { detailUrl },
             }),
             autoHeight: true,
             pinned: "left",
@@ -179,15 +179,9 @@
 </div>
 
 <style>
-  .container :global(.ag-pinned-left-header) {
-    border-right-color: #dde2eb !important;
-  }
   .container :global(.ag-pinned-left-header .ag-header-cell-label) {
     justify-content: center;
   }
-  .container :global(.ag-cell-last-left-pinned) {
-    border-right-color: #dde2eb !important;
-  }
 
   .controls {
     min-height: 15px;
diff --git a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
index d17f7425a2..b4b1eed8b7 100644
--- a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
+++ b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
@@ -1,14 +1,11 @@
 <script>
-  import { createEventDispatcher } from "svelte"
-  import { Icon, Button } from "@budibase/bbui"
-  const dispatch = createEventDispatcher()
-
+  import { Button } from "@budibase/bbui"
   export let url
   let link
 </script>
 
 <a href={url} bind:this={link} />
-<Button small secondary on:click={() => link.click()}>View</Button>
+<Button small translucent on:click={() => link.click()}>View</Button>
 
 <style>
   a {
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index a399d1ae15..2ed2910545 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -6,6 +6,7 @@ import ViewDetails from "./ViewDetails/Cell.svelte"
 import Select from "./Select/Wrapper.svelte"
 import DatePicker from "./DateTime/Wrapper.svelte"
 import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte"
+import { detailUrl } from "./Component.svelte"
 
 const renderers = new Map([
   ["boolean", booleanRenderer],
@@ -80,8 +81,7 @@ function dateRenderer(options, constraints, editable) {
     }
 
     // Options need to be passed in with minTime and maxTime! Needs bbui update.
-
-    const datePickerInstance = new DatePicker({
+    new DatePicker({
       target: container,
       props: {
         value: params.value,
@@ -144,11 +144,14 @@ function viewDetailsRenderer(options, constraints, editable) {
     container.style.alignItems = "center"
     container.style.height = "100%"
 
+    let url = "/"
+    if (options.detailUrl) {
+      url = options.detailUrl.replace(":id", params.data._id)
+    }
+
     new ViewDetails({
       target: container,
-      props: {
-        url: `${options}/${params.data._id}`,
-      },
+      props: { url },
     })
 
     return container

From 348c94e48761f6e23c93c89b5b6d6d30013a49c3 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 16 Oct 2020 15:26:08 +0100
Subject: [PATCH 37/51] allow calculation views to be used in context
 components again

---
 packages/standard-components/src/fetchData.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/src/fetchData.js b/packages/standard-components/src/fetchData.js
index 68aca7eac6..42f07d3910 100644
--- a/packages/standard-components/src/fetchData.js
+++ b/packages/standard-components/src/fetchData.js
@@ -46,13 +46,18 @@ export default async function fetchData(datasource, store) {
   }
 
   async function fetchViewData() {
-    const { field, groupBy } = datasource
+    const { field, groupBy, calculation } = datasource
     const params = new URLSearchParams()
 
-    if (field) {
+    if (calculation) {
       params.set("field", field)
-      params.set("stats", true)
+      params.set("calculation", calculation)
     }
+
+    if (groupBy) {
+      params.set("group", groupBy)
+    }
+
     if (groupBy) params.set("group", groupBy)
 
     let QUERY_VIEW_URL = field

From dc789336b02ac5353ff520f1c63781fbf02f8ce7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 15:32:02 +0100
Subject: [PATCH 38/51] Fix login component with login app names

---
 packages/standard-components/src/Login.svelte | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index 1ddefb3f28..e125ee864b 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -65,9 +65,7 @@
           placeholder="Password"
           class={_inputClass} />
       </div>
-    </div>
 
-    <div class="login-button-container">
       <button disabled={loading} on:click={login} class={_buttonClass}>
         {buttonText || 'Log In'}
       </button>
@@ -109,11 +107,6 @@
     margin-bottom: 20px;
   }
 
-  .login-button-container {
-    margin-top: 6px;
-    max-width: 100%;
-  }
-
   .header-content {
     font-family: Inter;
     font-weight: 700;
@@ -143,10 +136,11 @@
     flex-direction: column;
     align-items: stretch;
     width: 300px;
+    margin: auto;
+    gap: 8px;
   }
 
   .control {
-    padding: 6px 0px;
     width: 100%;
   }
 
@@ -193,5 +187,6 @@
 
   h2 {
     text-align: center;
+    margin-bottom: 10px;
   }
 </style>

From a978062a02ae4f12686ebe1521e9294a2d0fd9dc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 15:32:30 +0100
Subject: [PATCH 39/51] Set default link font weight to 500

---
 .../src/utilities/appDirectoryTemplate/pages/main/page.json     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
index ea605acf34..44d30a65f1 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@@ -68,7 +68,7 @@
                 "_styles": {
                   "normal": {
                     "font-family": "Inter",
-                    "font-weight": "400",
+                    "font-weight": "500",
                     "color": "#000000",
                     "text-decoration-line": "none",
                     "font-size": "16px"

From b139144b62ba5fbd1bb8d08a6dd9d5423a86cd54 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 15:32:50 +0100
Subject: [PATCH 40/51] Fix default home page overriding detail pages

---
 .../main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json
index 7c94af517e..5afcf244f2 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json
@@ -97,6 +97,6 @@
     ],
     "_instanceName": "Home"
   },
-  "route": "/*",
+  "route": "/",
   "name": "d834fea2-1b3e-4320-ab34-f9009f5ecc59"
 }

From 0343a86671e511cfadb364a3e25b39708750f80e Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 16 Oct 2020 15:43:55 +0100
Subject: [PATCH 41/51] screen templates - convert spaces to "-" in urls

---
 .../store/screenTemplates/newRowScreen.js          | 14 ++++++++++++--
 .../store/screenTemplates/rowDetailScreen.js       |  8 ++++++--
 .../store/screenTemplates/rowListScreen.js         | 10 +++++++---
 .../store/screenTemplates/urlSanitize.js           | 11 +++++++++++
 4 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 packages/builder/src/builderStore/store/screenTemplates/urlSanitize.js

diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 571007c092..b28630346c 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -1,3 +1,6 @@
+import urlSanitize from "./urlSanitize"
+import { rowListUrl } from "./rowListScreen"
+
 export default function(tables) {
   return tables.map(table => {
     const fields = Object.keys(table.schema)
@@ -11,6 +14,7 @@ export default function(tables) {
 }
 
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
+export const newRowUrl = table => urlSanitize(`/${table.name}/new`)
 
 const createScreen = (table, heading) => ({
   props: {
@@ -91,7 +95,7 @@ const createScreen = (table, heading) => ({
             onClick: [
               {
                 parameters: {
-                  url: `/${table.name.toLowerCase()}`,
+                  url: rowListUrl(table),
                 },
                 "##eventHandlerType": "Navigate To",
               },
@@ -120,6 +124,12 @@ const createScreen = (table, heading) => ({
                 },
                 "##eventHandlerType": "Save Row",
               },
+              {
+                parameters: {
+                  url: rowListUrl(table),
+                },
+                "##eventHandlerType": "Navigate To",
+              },
             ],
             _instanceName: "Save Button",
             _children: [],
@@ -130,6 +140,6 @@ const createScreen = (table, heading) => ({
     _instanceName: `${table.name} - New`,
     _code: "",
   },
-  route: `/${table.name.toLowerCase()}/new`,
+  route: newRowUrl(table),
   name: "",
 })
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 58ca2f6d05..d901efa359 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -1,3 +1,6 @@
+import urlSanitize from "./urlSanitize"
+import { rowListUrl } from "./rowListScreen"
+
 export default function(tables) {
   return tables.map(table => {
     const fields = Object.keys(table.schema)
@@ -11,6 +14,7 @@ export default function(tables) {
 }
 
 export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
+export const editRowUrl = table => urlSanitize(`/${table.name}/:id`)
 
 const createScreen = (table, heading) => ({
   props: {
@@ -91,7 +95,7 @@ const createScreen = (table, heading) => ({
             onClick: [
               {
                 parameters: {
-                  url: `/${table.name.toLowerCase()}`,
+                  url: rowListUrl(table),
                 },
                 "##eventHandlerType": "Navigate To",
               },
@@ -130,6 +134,6 @@ const createScreen = (table, heading) => ({
     _instanceName: `${table.name} - Detail`,
     _code: "",
   },
-  route: `/${table.name.toLowerCase()}/:id`,
+  route: editRowUrl(table),
   name: "",
 })
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
index c01fc9e3ae..0ff84d9cc3 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@@ -1,3 +1,6 @@
+import urlSanitize from "./urlSanitize"
+import { newRowUrl } from "./newRowScreen"
+
 export default function(tables) {
   return tables.map(table => {
     return {
@@ -9,6 +12,7 @@ export default function(tables) {
 }
 
 export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
+export const rowListUrl = table => urlSanitize(`/${table.name}`)
 
 const createScreen = table => ({
   props: {
@@ -74,7 +78,7 @@ const createScreen = table => ({
             onClick: [
               {
                 parameters: {
-                  url: `/${table.name}/new`,
+                  url: newRowUrl(table),
                 },
                 "##eventHandlerType": "Navigate To",
               },
@@ -95,7 +99,7 @@ const createScreen = table => ({
         },
         _code: "",
         datasource: {
-          label: "Deals",
+          label: table.name,
           name: `all_${table._id}`,
           tableId: table._id,
           type: "table",
@@ -109,6 +113,6 @@ const createScreen = table => ({
     className: "",
     onLoad: [],
   },
-  route: `/${table.name.toLowerCase()}`,
+  route: rowListUrl(table),
   name: "",
 })
diff --git a/packages/builder/src/builderStore/store/screenTemplates/urlSanitize.js b/packages/builder/src/builderStore/store/screenTemplates/urlSanitize.js
new file mode 100644
index 0000000000..eab985c0a5
--- /dev/null
+++ b/packages/builder/src/builderStore/store/screenTemplates/urlSanitize.js
@@ -0,0 +1,11 @@
+export default function(url) {
+  return url
+    .split("/")
+    .map(part => {
+      // if parameter, then use as is
+      if (part.startsWith(":")) return part
+      return encodeURIComponent(part.replace(" ", "-"))
+    })
+    .join("/")
+    .toLowerCase()
+}

From ab23d02f4b93c313c50f7204f7ce071f9d720f31 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 16 Oct 2020 15:44:39 +0100
Subject: [PATCH 42/51] client - sanitize urls, so we can match routes with
 nasty chars

---
 packages/client/src/render/screenRouter.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index 6af4f5491a..a925fab198 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -3,6 +3,18 @@ import appStore from "../state/store"
 import { parseAppIdFromCookie } from "./getAppId"
 
 export const screenRouter = ({ screens, onScreenSelected, window }) => {
+  function sanitize(url) {
+    return url
+      .split("/")
+      .map(part => {
+        // if parameter, then use as is
+        if (part.startsWith(":")) return part
+        return encodeURIComponent(part)
+      })
+      .join("/")
+      .toLowerCase()
+  }
+
   const makeRootedPath = url => {
     const hostname = window.location && window.location.hostname
     if (hostname) {
@@ -13,13 +25,16 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
       ) {
         const appId = parseAppIdFromCookie(window.document.cookie)
         if (url) {
-          if (url.startsWith(appId)) return url
-          return `/${appId}${url.startsWith("/") ? "" : "/"}${url}`
+          const sanitizedUrl = sanitize(url)
+          if (sanitizedUrl.startsWith(appId)) return sanitizedUrl
+          return `/${appId}${
+            sanitizedUrl.startsWith("/") ? "" : "/"
+          }${sanitizedUrl}`
         }
         return appId
       }
     }
-    return url
+    return sanitize(url)
   }
 
   const routes = screens.map(s => makeRootedPath(s.route))

From 19bfa87859f9ca35860695eff309fd2f8eea7d2b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 16:00:26 +0100
Subject: [PATCH 43/51] Fix link

---
 packages/client/src/api/index.js                            | 2 +-
 packages/standard-components/src/DataGrid/customRenderer.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/src/api/index.js b/packages/client/src/api/index.js
index f16daea139..7d7c9b52c0 100644
--- a/packages/client/src/api/index.js
+++ b/packages/client/src/api/index.js
@@ -1,5 +1,5 @@
 import { authenticate } from "./authenticate"
-import appStore from "../state/store"
+// import appStore from "../state/store"
 
 const apiCall = method => async ({ url, body }) => {
   const response = await fetch(url, {
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 2ed2910545..d54e91f623 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -6,7 +6,6 @@ import ViewDetails from "./ViewDetails/Cell.svelte"
 import Select from "./Select/Wrapper.svelte"
 import DatePicker from "./DateTime/Wrapper.svelte"
 import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte"
-import { detailUrl } from "./Component.svelte"
 
 const renderers = new Map([
   ["boolean", booleanRenderer],

From 7382da4a60212f3ad2ba17c3380db17854cd0357 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 16 Oct 2020 16:04:49 +0100
Subject: [PATCH 44/51] removes unused components

---
 .../userInterface/temporaryPanelStructure.js  | 111 +++---------------
 packages/standard-components/src/index.js     |   6 +-
 2 files changed, 16 insertions(+), 101 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index cb35d140c4..8d9e27357b 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -132,62 +132,23 @@ export default {
           ],
         },
         {
-          name: "Input",
-          description: "These components handle user input.",
+          _component: "@budibase/standard-components/input",
+          name: "Textfield",
+          description:
+            "A textfield component that allows the user to input text.",
           icon: "ri-edit-box-line",
-          commonProps: {},
-          children: [
-            {
-              _component: "@budibase/standard-components/input",
-              name: "Textfield",
-              description:
-                "A textfield component that allows the user to input text.",
-              icon: "ri-edit-box-line",
-              properties: {
-                design: { ...all },
-                settings: [
-                  { label: "Label", key: "label", control: Input },
-                  {
-                    label: "Type",
-                    key: "type",
-                    control: OptionSelect,
-                    options: ["text", "password"],
-                  },
-                ],
+          properties: {
+            design: { ...all },
+            settings: [
+              { label: "Label", key: "label", control: Input },
+              {
+                label: "Type",
+                key: "type",
+                control: OptionSelect,
+                options: ["text", "password"],
               },
-            },
-            {
-              _component: "@budibase/standard-components/checkbox",
-              name: "Checkbox",
-              description: "A selectable checkbox component",
-              icon: "ri-checkbox-line",
-              properties: {
-                design: { ...all },
-                settings: [{ label: "Label", key: "label", control: Input }],
-              },
-            },
-            {
-              _component: "@budibase/standard-components/radiobutton",
-              name: "Radiobutton",
-              description: "A selectable radiobutton component",
-              icon: "ri-radio-button-line",
-              properties: {
-                design: { ...all },
-                settings: [{ label: "Label", key: "label", control: Input }],
-              },
-            },
-            {
-              _component: "@budibase/standard-components/select",
-              name: "Select",
-              description:
-                "A select component for choosing from different options",
-              icon: "ri-file-list-line",
-              properties: {
-                design: { ...all },
-                settings: [],
-              },
-            },
-          ],
+            ],
+          },
         },
         {
           _component: "@budibase/standard-components/button",
@@ -584,48 +545,6 @@ export default {
             },
           ],
         },
-        {
-          name: "Table",
-          _component: "@budibase/standard-components/datatable",
-          description: "A component that generates a table from your data.",
-          icon: "ri-archive-drawer-line",
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Stripe Color",
-                key: "stripeColor",
-                control: Colorpicker,
-                defaultValue: "#FFFFFF",
-              },
-              {
-                label: "Border Color",
-                key: "borderColor",
-                control: Colorpicker,
-                defaultValue: "#FFFFFF",
-              },
-              {
-                label: "TH Color",
-                key: "backgroundColor",
-                control: Colorpicker,
-                defaultValue: "#FFFFFF",
-              },
-              {
-                label: "TH Font Color",
-                key: "color",
-                control: Colorpicker,
-                defaultValue: "#FFFFFF",
-              },
-              { label: "Table", key: "table", control: TableSelect },
-            ],
-          },
-          children: [],
-        },
         {
           name: "Form",
           description: "A component that generates a form from your data.",
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index b4e87aced9..c99c2cbe56 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -4,11 +4,8 @@ export { default as container } from "./Container.svelte"
 export { default as text } from "./Text.svelte"
 export { default as heading } from "./Heading.svelte"
 export { default as input } from "./Input.svelte"
-export { default as select } from "./Select.svelte"
 export { default as textfield } from "./Textfield.svelte"
-export { default as checkbox } from "./Checkbox.svelte"
-export { default as radiobutton } from "./Radiobutton.svelte"
-export { default as option } from "./Option.svelte"
+
 export { default as button } from "./Button.svelte"
 export { default as login } from "./Login.svelte"
 export { default as saveRowButton } from "./Templates/saveRowButton"
@@ -16,7 +13,6 @@ export { default as link } from "./Link.svelte"
 export { default as image } from "./Image.svelte"
 export { default as Navigation } from "./Navigation.svelte"
 export { default as datagrid } from "./DataGrid/Component.svelte"
-export { default as datatable } from "./DataTable.svelte"
 export { default as dataform } from "./DataForm.svelte"
 export { default as dataformwide } from "./DataFormWide.svelte"
 export { default as datachart } from "./DataChart.svelte"

From c2a7510d191450273c8b1d5503a684bdcef4a219 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 16 Oct 2020 18:05:45 +0100
Subject: [PATCH 45/51] Some minor fixes, right padding wasn't the same as left
 padding and fixing 404 when deleting a view.

---
 .../components/backend/DataTable/ViewDataTable.svelte  | 10 ++++++++++
 .../src/components/userInterface/propertyCategories.js |  2 ++
 2 files changed, 12 insertions(+)

diff --git a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
index 5b56e3d125..2ace2bb338 100644
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -1,5 +1,6 @@
 <script>
   import api from "builderStore/api"
+  import { backendUiStore } from "builderStore"
   import Table from "./Table.svelte"
   import CalculateButton from "./buttons/CalculateButton.svelte"
   import GroupByButton from "./buttons/GroupByButton.svelte"
@@ -22,6 +23,15 @@
   }
 
   async function fetchViewData(name, field, groupBy, calculation) {
+    const tables = $backendUiStore.tables
+    const allTableViews = tables.map(table => table.views)
+    const thisView = allTableViews.filter(
+      views => views != null && views[name] != null
+    )[0]
+    // don't fetch view data if the view no longer exists
+    if (!thisView) {
+      return
+    }
     const params = new URLSearchParams()
     if (calculation) {
       params.set("field", field)
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 00b67890fb..2d46f95928 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -135,6 +135,8 @@ export const margin = [
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
       { label: "64px", value: "64px" },
+      { label: "128px", value: "128px" },
+      { label: "256px", value: "256px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
     ],

From 45322846c02f906fe5714c2abea2a87e89e9ae92 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 16 Oct 2020 21:50:58 +0100
Subject: [PATCH 46/51] Primary display column is always required

---
 .../popovers/CreateEditColumnPopover.svelte          | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
index e803ca21cf..9549041a18 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
@@ -40,7 +40,7 @@
   $: tableOptions = $backendUiStore.tables.filter(
     table => table._id !== $backendUiStore.draftTable._id
   )
-  $: required = !!field?.constraints?.presence
+  $: required = !!field?.constraints?.presence || primaryDisplay
 
   async function saveColumn() {
     backendUiStore.update(state => {
@@ -67,6 +67,14 @@
     field.constraints.presence = req ? { allowEmpty: false } : false
     required = req
   }
+
+  function onChangePrimaryDisplay(e) {
+    const isPrimary = e.target.checked
+    // primary display is always required
+    if (isPrimary) {
+      field.constraints.presence = { allowEmpty: false }
+    }
+  }
 </script>
 
 <div class="actions">
@@ -88,6 +96,7 @@
     <Toggle
       checked={required}
       on:change={onChangeRequired}
+      disabled={primaryDisplay}
       thin
       text="Required" />
   {/if}
@@ -95,6 +104,7 @@
   {#if field.type !== 'link'}
     <Toggle
       bind:checked={primaryDisplay}
+      on:change={onChangePrimaryDisplay}
       thin
       text="Use as table display column" />
   {/if}

From afa5418d5a97f825378df68d8af197be715ad6dc Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 16 Oct 2020 22:02:17 +0100
Subject: [PATCH 47/51] adding health check endpoint for AWS ALB

---
 packages/server/src/api/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 5d5f64459e..0a4de71135 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -51,6 +51,7 @@ router
       process.env.NODE_ENV !== "cypress"
     await next()
   })
+  .use("/health", ctx => (ctx.status = 200))
   .use(authenticated)
 
 // error handling middleware

From 4d3fb4f84738fed2494d97257e1a92addb64df04 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 16 Oct 2020 22:11:13 +0100
Subject: [PATCH 48/51] hiding templates for now

---
 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 09fa40d1c7..43f3fd02d7 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -66,7 +66,7 @@
     </div>
   </div>
 
-  <TemplateList onSelect={selectTemplate} />
+  <!-- <TemplateList onSelect={selectTemplate} /> -->
 
   <AppList />
 </div>

From 8b51742901fa2df1da26450eb36cfc889d7f1d55 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 16 Oct 2020 22:46:15 +0100
Subject: [PATCH 49/51] stop multiple creates on save record

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

diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index cde82ce37e..54f7812dc2 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -18,7 +18,7 @@
   bind:this={theButton}
   class="default"
   disabled={disabled || false}
-  on:click={clickHandler}>
+  on:click|once={clickHandler}>
   {#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
 </button>
 

From 1a8c2907ca32a086a7598013a3cbe1bbd9da3227 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 16 Oct 2020 23:36:16 +0100
Subject: [PATCH 50/51] fixes home route matching everything

---
 packages/client/src/render/screenRouter.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index 3bfc85caaf..0c045097ed 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -44,7 +44,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
   }
 
   const routes = screens.map(s => makeRootedPath(s.route))
-  let fallback = routes.findIndex(([p]) => p === "*")
+  let fallback = routes.findIndex(([p]) => p === makeRootedPath("*"))
   if (fallback < 0) fallback = 0
 
   let current
@@ -53,7 +53,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
     const _url = makeRootedPath(url.state || url)
     current = routes.findIndex(
       p =>
-        p !== "*" &&
+        p !== makeRootedPath("*") &&
         new RegExp("^" + p.toLowerCase() + "$").test(_url.toLowerCase())
     )
 
@@ -61,6 +61,8 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
 
     if (current === -1) {
       routes.forEach((p, i) => {
+        // ignore home - which matched everything
+        if (p === makeRootedPath("*")) return
         const pm = regexparam(p)
         const matches = pm.pattern.exec(_url)
 

From 580e7938ffefceacc230ff3e0d130ce49be5e65b Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 16 Oct 2020 23:41:31 +0100
Subject: [PATCH 51/51] tempaltes - sanitize url - replace spaces gloablly

---
 .../src/builderStore/store/screenTemplates/sanitizeUrl.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/sanitizeUrl.js b/packages/builder/src/builderStore/store/screenTemplates/sanitizeUrl.js
index eab985c0a5..96b7633e41 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/sanitizeUrl.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/sanitizeUrl.js
@@ -4,7 +4,7 @@ export default function(url) {
     .map(part => {
       // if parameter, then use as is
       if (part.startsWith(":")) return part
-      return encodeURIComponent(part.replace(" ", "-"))
+      return encodeURIComponent(part.replace(/ /g, "-"))
     })
     .join("/")
     .toLowerCase()