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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

From e70c0f32c70b9b92063ca0fb7a484b22137f9f05 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 15 Oct 2020 13:52:56 +0100
Subject: [PATCH 09/17] Some changes for authentication and getting rid of
 allScreens component of store as it was causing confusion and breakages.

---
 packages/builder/src/builderStore/store/index.js    |  5 -----
 .../TableNavigator/modals/CreateTableModal.svelte   |  2 ++
 .../TableNavigator/popovers/EditTablePopover.svelte |  4 ++--
 .../EventsEditor/StateBindingCascader.svelte        |  2 +-
 packages/server/src/api/controllers/auth.js         |  1 +
 packages/server/src/middleware/authenticated.js     |  1 +
 .../server/src/utilities/builder/setBuilderToken.js | 13 +++++++++++--
 .../src/DataGrid/AttachmentCell/Button.svelte       |  1 -
 8 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index bb61712f1a..5a6c8581aa 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -106,10 +106,6 @@ const setPackage = (store, initial) => async pkg => {
   initial.pages = pkg.pages
   initial.hasAppPackage = true
   initial.screens = values(pkg.screens)
-  initial.allScreens = [
-    ...Object.values(main_screens),
-    ...Object.values(unauth_screens),
-  ]
   initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.appInstances = pkg.application.instances
   initial.appId = pkg.application._id
@@ -139,7 +135,6 @@ const _saveScreen = async (store, s, screen) => {
         innerState.pages[pageName]._screens = screens
         innerState.screens = screens
         innerState.currentPreviewItem = screen
-        innerState.allScreens = [...innerState.allScreens, screen]
         const safeProps = makePropsSafe(
           innerState.components[screen.props._component],
           screen.props
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index 29c24a2926..a931dafb62 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -52,6 +52,8 @@
       .map(template => template.create())
 
     for (let screen of screens) {
+      // record the table that created this screen so we can link it later
+      screen.autoTableId = table._id
       try {
         await store.createScreen(screen)
       } catch (_) {
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 79d31665b8..2b74e9c288 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -30,8 +30,8 @@
   }
 
   function showModal() {
-    const screens = $store.allScreens
-    templateScreens = screens.filter(screen => screen.props.table === table._id)
+    const screens = $store.screens
+    templateScreens = screens.filter(screen => screen.autoTableId === table._id)
     willBeDeleted = ["All table data"].concat(
       templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
     )
diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
index d5e7422446..cb1d1dd1dd 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -29,7 +29,7 @@
   {:else if parameter.name === 'url'}
     <DataList on:change bind:value={parameter.value}>
       <option value="" />
-      {#each $store.allScreens as screen}
+      {#each $store.screens as screen}
         <option value={screen.route}>{screen.props._instanceName}</option>
       {/each}
     </DataList>
diff --git a/packages/server/src/api/controllers/auth.js b/packages/server/src/api/controllers/auth.js
index 0fed3337f8..a859bc43e3 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -70,6 +70,7 @@ exports.authenticate = async ctx => {
       expires,
       path: "/",
       httpOnly: false,
+      overwrite: true,
     })
 
     ctx.body = {
diff --git a/packages/server/src/middleware/authenticated.js b/packages/server/src/middleware/authenticated.js
index 33cafca17a..aebe6c6bd7 100644
--- a/packages/server/src/middleware/authenticated.js
+++ b/packages/server/src/middleware/authenticated.js
@@ -51,6 +51,7 @@ module.exports = async (ctx, next) => {
     ctx.auth.apiKey = jwtPayload.apiKey
     ctx.user = {
       ...jwtPayload,
+      instanceId: jwtPayload.instanceId,
       accessLevel: await getAccessLevel(
         jwtPayload.instanceId,
         jwtPayload.accessLevelId
diff --git a/packages/server/src/utilities/builder/setBuilderToken.js b/packages/server/src/utilities/builder/setBuilderToken.js
index d43a9543e7..6674e69d66 100644
--- a/packages/server/src/utilities/builder/setBuilderToken.js
+++ b/packages/server/src/utilities/builder/setBuilderToken.js
@@ -15,7 +15,16 @@ module.exports = (ctx, appId, instanceId) => {
     expiresIn: "30 days",
   })
 
-  var expiry = new Date()
+  const expiry = new Date()
   expiry.setDate(expiry.getDate() + 30)
-  ctx.cookies.set("builder:token", token, { expires: expiry, httpOnly: false })
+  // remove the app token
+  ctx.cookies.set("budibase:token", "", {
+    overwrite: true,
+  })
+  // set the builder token
+  ctx.cookies.set("builder:token", token, {
+    expires: expiry,
+    httpOnly: false,
+    overwrite: true,
+  })
 }
diff --git a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
index 1c7a24ea4f..90694d52c7 100644
--- a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
+++ b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
@@ -27,4 +27,3 @@
         on:newRow={() => dispatch('newRow')} />
  </DropdownMenu> -->
 
-<!--<style ✂prettier:content✂="CiAgZGl2IHsKICAgIGRpc3BsYXk6IGdyaWQ7CiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG8gYXV0bzsKICAgIHBsYWNlLWl0ZW1zOiBzdGFydCBjZW50ZXI7CiAgfQogIGg1IHsKICAgIHBhZGRpbmc6IHZhcigtLXNwYWNpbmcteGwpIDAgMCB2YXIoLS1zcGFjaW5nLXhsKTsKICAgIG1hcmdpbjogMDsKICAgIGZvbnQtd2VpZ2h0OiA1MDA7CiAgfQo=" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂=""></style>-->

From 9f33cf4e6e2f03fa3b5ac8a4cab286003a82a290 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 15:35:27 +0200
Subject: [PATCH 10/17] adds file deletion button as well as confirmation
 modals to delete rows and delete image buttons

---
 .../src/DataGrid/AttachmentCell/Button.svelte | 10 +--
 .../src/DataGrid/Component.svelte             | 15 +++--
 .../src/DataGrid/customRenderer.js            |  7 ++
 .../src/attachments/AttachmentList.svelte     | 67 +++++++++++++++++--
 4 files changed, 83 insertions(+), 16 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
index 1c7a24ea4f..96e210c57c 100644
--- a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
+++ b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
@@ -1,18 +1,18 @@
 <script>
-  import { createEventDispatcher } from "svelte"
-  import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
+  // import { createEventDispatcher } from "svelte"
+  // import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
   import AttachmentList from "../../attachments/AttachmentList.svelte"
   //   import Modal from "./Modal.svelte"
 
-  const dispatch = createEventDispatcher()
+  // const dispatch = createEventDispatcher()
 
-  let anchor
+  // let anchor
   let dropdown
 
   export let files
 </script>
 
-<AttachmentList {files} />
+<AttachmentList {files} on:delete />
 <!-- <div bind:this={anchor}>
   <Button text small on:click={dropdown.show}>
     <Icon name="edit" />
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 471d02cc68..bf2a1b9212 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -12,7 +12,7 @@
 
   import AgGrid from "@budibase/svelte-ag-grid"
   import CreateRowButton from "./CreateRow/Button.svelte"
-  import { TextButton as DeleteButton, Icon } from "@budibase/bbui"
+  import { TextButton as DeleteButton, Icon, Modal, ModalContent } from "@budibase/bbui"
 
   export let _bb
   export let datasource = {}
@@ -25,6 +25,8 @@
   let canEdit = editable && datasource && datasource.type !== "view"
   let canAddDelete = editable && datasource && datasource.type === "table"
 
+  let modal;
+
   let store = _bb.store
   let dataLoaded = false
   let data
@@ -133,7 +135,7 @@
       <div class="controls">
         <CreateRowButton {_bb} {table} on:newRow={handleNewRow} />
         {#if selectedRows.length > 0}
-          <DeleteButton text small on:click={deleteRows}>
+          <DeleteButton text small on:click={modal.show()}>
             <Icon name="addrow" />
             Delete
             {selectedRows.length}
@@ -150,13 +152,14 @@
       on:update={handleUpdate}
       on:select={({ detail }) => (selectedRows = detail)} />
   {/if}
+  <Modal bind:this={modal}>
+    <ModalContent title="Confirm Row Deletion" confirmText="Delete" onConfirm={deleteRows} >
+      <span>Are you sure you want to delete {selectedRows.length} row(s)?</span>
+    </ModalContent>
+  </Modal>
 </div>
 
 <style>
-  .container :global(form) {
-    display: grid;
-    grid-template-columns: repeat(2);
-  }
   .controls {
     margin-bottom: var(--spacing-s);
     display: grid;
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index e3f07eda47..7f6eb582b7 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -54,6 +54,13 @@ function attachmentRenderer(constraints, editable) {
       },
     })
 
+    const deleteFile = (event) => {
+      const newFilesArray = params.value.filter((file) => file !== event.detail)
+      params.setValue(newFilesArray)
+    }
+
+    attachmentInstance.$on('delete', deleteFile)
+
     return container
   }
 }
diff --git a/packages/standard-components/src/attachments/AttachmentList.svelte b/packages/standard-components/src/attachments/AttachmentList.svelte
index 52f61e2d8e..f87712409d 100644
--- a/packages/standard-components/src/attachments/AttachmentList.svelte
+++ b/packages/standard-components/src/attachments/AttachmentList.svelte
@@ -1,30 +1,53 @@
 <script>
+  import { Modal, ModalContent, Icon } from '@budibase/bbui'
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher()
   import { FILE_TYPES } from "./fileTypes"
 
   export let files = []
   export let height = "70"
   export let width = "70"
+
+  let modal;
+  let currentFile;
+
+  const openModal = (file) => {
+    currentFile = file
+    modal.show()
+  }
+
+  const handleConfirm = () => {
+    dispatch('delete', currentFile)
+  }
 </script>
 
 <div class="file-list">
   {#each files as file}
-    <a href={file.url} target="_blank">
-      <div class="file">
+    <div class="file-container">
+      <a href={file.url} target="_blank" class="file">
         {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
           <img {width} {height} src={file.url} alt="preview of {file.name}" />
         {:else}<i class="far fa-file" />{/if}
-      </div>
+      </a>
       <span>{file.name}</span>
-    </a>
+      <div class="button-placement"><button  primary on:click={() => openModal(file)}>×</button></div>
+    </div>
   {/each}
 </div>
+<Modal bind:this={modal}>
+  <ModalContent title="Confirm File Deletion" confirmText="Delete" onConfirm={handleConfirm} >
+    <span>Are you sure you want to delete this attachment?</span>
+  </ModalContent>
+</Modal>
 
 <style>
   .file-list {
     display: grid;
+    justify-content: start;
     grid-auto-flow: column;
     grid-gap: var(--spacing-m);
-    grid-template-columns: repeat(10, 1fr);
+    grid-template-columns: repeat(auto-fill, 1fr);
   }
 
   img {
@@ -40,6 +63,40 @@
     text-decoration: none;
   }
 
+  .file-container {
+    position: relative;
+  }
+
+	button {
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    font-size: var(--font-size-l);
+    z-index: 1000;
+    top: 4px;
+    left: 46px;
+    margin: 0;
+    padding: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 0;
+    color: white;
+    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);
+    -webkit-appearance: none;
+    outline: none;
+	}
+    button:hover {
+        background-color: var(--grey-8);
+        cursor: pointer;
+    }
+    button:active {
+        background-color: var(--grey-9);
+        cursor: pointer;
+    }
+
   .file {
     position: relative;
     height: 75px;

From 86bbf252b35b199358c3a548e91a20a703e70561 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 15:36:20 +0200
Subject: [PATCH 11/17] lint fix

---
 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 7f6eb582b7..74abf8a132 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -54,12 +54,12 @@ function attachmentRenderer(constraints, editable) {
       },
     })
 
-    const deleteFile = (event) => {
-      const newFilesArray = params.value.filter((file) => file !== event.detail)
+    const deleteFile = event => {
+      const newFilesArray = params.value.filter(file => file !== event.detail)
       params.setValue(newFilesArray)
     }
 
-    attachmentInstance.$on('delete', deleteFile)
+    attachmentInstance.$on("delete", deleteFile)
 
     return container
   }

From 204fb15b42e75440747d6a53151d1adaddad5255 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 15:45:12 +0200
Subject: [PATCH 12/17] sets pagination default to true in grid component

---
 packages/standard-components/components.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index dca4611923..d0475a1225 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -242,7 +242,10 @@
 				"type": "number",
 				"default": "500"
 			},
-			"pagination": "bool"
+			"pagination": {
+				"type": "bool",
+				"default": true
+			},
 		}
 	},
 	"dataform": {

From 29df40ee51670e048cfa0706f9c1963da8bd7333 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 15:46:24 +0200
Subject: [PATCH 13/17] removes commented out code

---
 .../src/DataGrid/AttachmentCell/Button.svelte | 26 +------------------
 1 file changed, 1 insertion(+), 25 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
index 96e210c57c..139ffe02aa 100644
--- a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
+++ b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
@@ -1,30 +1,6 @@
 <script>
-  // import { createEventDispatcher } from "svelte"
-  // import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
   import AttachmentList from "../../attachments/AttachmentList.svelte"
-  //   import Modal from "./Modal.svelte"
-
-  // const dispatch = createEventDispatcher()
-
-  // let anchor
-  let dropdown
-
   export let files
 </script>
 
-<AttachmentList {files} on:delete />
-<!-- <div bind:this={anchor}>
-  <Button text small on:click={dropdown.show}>
-    <Icon name="edit" />
-  </Button>
-</div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
-  <h5>Edit Attachment(s)</h5>
-   <Modal
-        {_bb}
-        {table}
-        onClosed={dropdown.hide}
-        on:newRow={() => dispatch('newRow')} />
- </DropdownMenu> -->
-
-<!--<style ✂prettier:content✂="CiAgZGl2IHsKICAgIGRpc3BsYXk6IGdyaWQ7CiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG8gYXV0bzsKICAgIHBsYWNlLWl0ZW1zOiBzdGFydCBjZW50ZXI7CiAgfQogIGg1IHsKICAgIHBhZGRpbmc6IHZhcigtLXNwYWNpbmcteGwpIDAgMCB2YXIoLS1zcGFjaW5nLXhsKTsKICAgIG1hcmdpbjogMDsKICAgIGZvbnQtd2VpZ2h0OiA1MDA7CiAgfQo=" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂=""></style>-->
+<AttachmentList {files} on:delete />
\ No newline at end of file

From f0cea0ef0eafae32dc69229167c3e2d44cfd37c6 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 15:51:50 +0200
Subject: [PATCH 14/17] adjust button size

---
 .../src/attachments/AttachmentList.svelte                | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/standard-components/src/attachments/AttachmentList.svelte b/packages/standard-components/src/attachments/AttachmentList.svelte
index f87712409d..8def009506 100644
--- a/packages/standard-components/src/attachments/AttachmentList.svelte
+++ b/packages/standard-components/src/attachments/AttachmentList.svelte
@@ -71,14 +71,15 @@
     display: block;
     box-sizing: border-box;
     position: absolute;
-    font-size: var(--font-size-l);
+    font-size: var(--font-size-m);
+    line-height: 110%;
     z-index: 1000;
     top: 4px;
-    left: 46px;
+    left: 50px;
     margin: 0;
     padding: 0;
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 1.3rem;
+    height: 1.3rem;
     border: 0;
     color: white;
     border-radius: var(--border-radius-xl);

From 7e9cf7d01e05033fd433bac12bb8a211ff6c2d85 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 15:58:21 +0200
Subject: [PATCH 15/17] adds stopPropagation modifier to delete file button

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

diff --git a/packages/standard-components/src/attachments/AttachmentList.svelte b/packages/standard-components/src/attachments/AttachmentList.svelte
index 8def009506..e52eeef5a7 100644
--- a/packages/standard-components/src/attachments/AttachmentList.svelte
+++ b/packages/standard-components/src/attachments/AttachmentList.svelte
@@ -31,7 +31,7 @@
         {:else}<i class="far fa-file" />{/if}
       </a>
       <span>{file.name}</span>
-      <div class="button-placement"><button  primary on:click={() => openModal(file)}>×</button></div>
+      <div class="button-placement"><button  primary on:click|stopPropagation={() => openModal(file)}>×</button></div>
     </div>
   {/each}
 </div>

From e9a0c1c512474049b36e869bf8657e2b9d3de28c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 15 Oct 2020 16:30:18 +0100
Subject: [PATCH 16/17] Fix issue with trailing comma

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

diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index d0475a1225..7d64f49c84 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -245,7 +245,7 @@
 			"pagination": {
 				"type": "bool",
 				"default": true
-			},
+			}
 		}
 	},
 	"dataform": {

From 0dcbf1da3df0e92e78dd4025409e8f03fbc724df Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 15 Oct 2020 16:59:57 +0100
Subject: [PATCH 17/17] fix cloudfront invalidations

---
 packages/server/src/api/controllers/deploy/aws.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/api/controllers/deploy/aws.js b/packages/server/src/api/controllers/deploy/aws.js
index 1337f23d1c..28bedb8893 100644
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@@ -2,6 +2,7 @@ const fs = require("fs")
 const { join } = require("../../../utilities/centralPath")
 const AWS = require("aws-sdk")
 const fetch = require("node-fetch")
+const uuid = require("uuid")
 const { budibaseAppsDir } = require("../../../utilities/budibaseDir")
 const PouchDB = require("../../../db")
 const environment = require("../../../environment")
@@ -13,7 +14,7 @@ async function invalidateCDN(cfDistribution, appId) {
     .createInvalidation({
       DistributionId: cfDistribution,
       InvalidationBatch: {
-        CallerReference: appId,
+        CallerReference: `${appId}-${uuid.v4()}`,
         Paths: {
           Quantity: 1,
           Items: [`/assets/${appId}/*`],