From d22f6f911f154199bdf525c80647d2cbdbae9ec9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 11:11:59 +0100
Subject: [PATCH 01/17] Fix crashing when rendering any components settings
 that uses a ScreenSelect

---
 .../builder/src/components/userInterface/ScreenSelect.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
index 6c999a5b01..9c80e54b00 100644
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@@ -9,6 +9,7 @@
   export let value = ""
 
   $: urls = getUrls()
+  $: console.log(urls)
 
   const handleBlur = () => dispatch("change", value)
 
@@ -61,9 +62,9 @@
           sort: detailScreen.props._component,
         })
       }
-
-      return urls
     }
+
+    return urls
   }
 </script>
 

From 51c407c2f929de458c0c5ccd52a42bb5ca3fd72d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 11:27:18 +0100
Subject: [PATCH 02/17] Update all old references in datasources from isModel
 to type=model

---
 .../store/screenTemplates/recordListScreen.js |   2 +-
 .../tests/fetchBindableProperties.spec.js     | 176 +++++++++++-------
 2 files changed, 110 insertions(+), 68 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/recordListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/recordListScreen.js
index 0210e7a85e..9246def7f7 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/recordListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/recordListScreen.js
@@ -98,7 +98,7 @@ const createScreen = model => ({
           label: "Deals",
           name: `all_${model._id}`,
           modelId: model._id,
-          isModel: true,
+          type: "model",
         },
         _instanceName: `${model.name} Table`,
         _children: [],
diff --git a/packages/builder/tests/fetchBindableProperties.spec.js b/packages/builder/tests/fetchBindableProperties.spec.js
index 76e8e33f05..79d4a272fe 100644
--- a/packages/builder/tests/fetchBindableProperties.spec.js
+++ b/packages/builder/tests/fetchBindableProperties.spec.js
@@ -1,13 +1,14 @@
 import fetchBindableProperties from "../src/builderStore/fetchBindableProperties"
 
 describe("fetch bindable properties", () => {
-
   it("should return bindable properties from screen components", () => {
     const result = fetchBindableProperties({
       componentInstanceId: "heading-id",
-      ...testData()
+      ...testData(),
     })
-    const componentBinding = result.find(r => r.instance._id === "search-input-id" && r.type === "instance")
+    const componentBinding = result.find(
+      r => r.instance._id === "search-input-id" && r.type === "instance"
+    )
     expect(componentBinding).toBeDefined()
     expect(componentBinding.type).toBe("instance")
     expect(componentBinding.runtimeBinding).toBe("search-input-id.value")
@@ -16,29 +17,39 @@ describe("fetch bindable properties", () => {
   it("should not return bindable components when not in their context", () => {
     const result = fetchBindableProperties({
       componentInstanceId: "heading-id",
-      ...testData()
+      ...testData(),
     })
-    const componentBinding = result.find(r => r.instance._id === "list-item-input-id")
+    const componentBinding = result.find(
+      r => r.instance._id === "list-item-input-id"
+    )
     expect(componentBinding).not.toBeDefined()
   })
 
   it("should return model schema, when inside a context", () => {
     const result = fetchBindableProperties({
       componentInstanceId: "list-item-input-id",
-      ...testData()
+      ...testData(),
     })
-    const contextBindings = result.filter(r => r.instance._id === "list-id" && r.type==="context")
-    // 2 fields + _id + _rev 
+    const contextBindings = result.filter(
+      r => r.instance._id === "list-id" && r.type === "context"
+    )
+    // 2 fields + _id + _rev
     expect(contextBindings.length).toBe(4)
-    
-    const namebinding = contextBindings.find(b => b.runtimeBinding === "data.name")
+
+    const namebinding = contextBindings.find(
+      b => b.runtimeBinding === "data.name"
+    )
     expect(namebinding).toBeDefined()
     expect(namebinding.readableBinding).toBe("list-name.Test Model.name")
-    
-    const descriptionbinding = contextBindings.find(b => b.runtimeBinding === "data.description")
+
+    const descriptionbinding = contextBindings.find(
+      b => b.runtimeBinding === "data.description"
+    )
     expect(descriptionbinding).toBeDefined()
-    expect(descriptionbinding.readableBinding).toBe("list-name.Test Model.description")
-    
+    expect(descriptionbinding.readableBinding).toBe(
+      "list-name.Test Model.description"
+    )
+
     const idbinding = contextBindings.find(b => b.runtimeBinding === "data._id")
     expect(idbinding).toBeDefined()
     expect(idbinding.readableBinding).toBe("list-name.Test Model._id")
@@ -47,35 +58,51 @@ describe("fetch bindable properties", () => {
   it("should return model schema, for grantparent context", () => {
     const result = fetchBindableProperties({
       componentInstanceId: "child-list-item-input-id",
-      ...testData()
+      ...testData(),
     })
-    const contextBindings = result.filter(r => r.type==="context")
+    const contextBindings = result.filter(r => r.type === "context")
     // 2 fields + _id + _rev ... x 2 models
     expect(contextBindings.length).toBe(8)
-    
-    const namebinding_parent = contextBindings.find(b => b.runtimeBinding === "parent.data.name")
+
+    const namebinding_parent = contextBindings.find(
+      b => b.runtimeBinding === "parent.data.name"
+    )
     expect(namebinding_parent).toBeDefined()
     expect(namebinding_parent.readableBinding).toBe("list-name.Test Model.name")
-    
-    const descriptionbinding_parent = contextBindings.find(b => b.runtimeBinding === "parent.data.description")
+
+    const descriptionbinding_parent = contextBindings.find(
+      b => b.runtimeBinding === "parent.data.description"
+    )
     expect(descriptionbinding_parent).toBeDefined()
-    expect(descriptionbinding_parent.readableBinding).toBe("list-name.Test Model.description")
-    
-    const namebinding_own = contextBindings.find(b => b.runtimeBinding === "data.name")
+    expect(descriptionbinding_parent.readableBinding).toBe(
+      "list-name.Test Model.description"
+    )
+
+    const namebinding_own = contextBindings.find(
+      b => b.runtimeBinding === "data.name"
+    )
     expect(namebinding_own).toBeDefined()
-    expect(namebinding_own.readableBinding).toBe("child-list-name.Test Model.name")
-    
-    const descriptionbinding_own = contextBindings.find(b => b.runtimeBinding === "data.description")
+    expect(namebinding_own.readableBinding).toBe(
+      "child-list-name.Test Model.name"
+    )
+
+    const descriptionbinding_own = contextBindings.find(
+      b => b.runtimeBinding === "data.description"
+    )
     expect(descriptionbinding_own).toBeDefined()
-    expect(descriptionbinding_own.readableBinding).toBe("child-list-name.Test Model.description")
+    expect(descriptionbinding_own.readableBinding).toBe(
+      "child-list-name.Test Model.description"
+    )
   })
 
   it("should return bindable component props, from components in same context", () => {
     const result = fetchBindableProperties({
       componentInstanceId: "list-item-heading-id",
-      ...testData()
+      ...testData(),
     })
-    const componentBinding = result.find(r => r.instance._id === "list-item-input-id" && r.type === "instance")
+    const componentBinding = result.find(
+      r => r.instance._id === "list-item-input-id" && r.type === "instance"
+    )
     expect(componentBinding).toBeDefined()
     expect(componentBinding.runtimeBinding).toBe("list-item-input-id.value")
   })
@@ -83,125 +110,140 @@ describe("fetch bindable properties", () => {
   it("should not return components from child context", () => {
     const result = fetchBindableProperties({
       componentInstanceId: "list-item-heading-id",
-      ...testData()
+      ...testData(),
     })
-    const componentBinding = result.find(r => r.instance._id === "child-list-item-input-id" && r.type === "instance")
+    const componentBinding = result.find(
+      r =>
+        r.instance._id === "child-list-item-input-id" && r.type === "instance"
+    )
     expect(componentBinding).not.toBeDefined()
   })
-  
+
   it("should return bindable component props, from components in same context (when nested context)", () => {
     const result = fetchBindableProperties({
       componentInstanceId: "child-list-item-heading-id",
-      ...testData()
+      ...testData(),
     })
-    const componentBinding = result.find(r => r.instance._id === "child-list-item-input-id" && r.type === "instance")
+    const componentBinding = result.find(
+      r =>
+        r.instance._id === "child-list-item-input-id" && r.type === "instance"
+    )
     expect(componentBinding).toBeDefined()
-  }) 
-
+  })
 })
 
 const testData = () => {
-
   const screen = {
     instanceName: "test screen",
     name: "screen-id",
     route: "/",
     props: {
-      _id:"screent-root-id", 
+      _id: "screent-root-id",
       _component: "@budibase/standard-components/container",
       _children: [
         {
           _id: "heading-id",
           _instanceName: "list item heading",
           _component: "@budibase/standard-components/heading",
-          text: "Screen Title"
+          text: "Screen Title",
         },
         {
           _id: "search-input-id",
           _instanceName: "Search Input",
           _component: "@budibase/standard-components/input",
-          value: "search phrase"
+          value: "search phrase",
         },
         {
           _id: "list-id",
           _component: "@budibase/standard-components/list",
           _instanceName: "list-name",
-          model: { isModel: true, modelId: "test-model-id", label: "Test Model", name: "all_test-model-id" },
+          model: {
+            type: "model",
+            modelId: "test-model-id",
+            label: "Test Model",
+            name: "all_test-model-id",
+          },
           _children: [
             {
               _id: "list-item-heading-id",
               _instanceName: "list item heading",
               _component: "@budibase/standard-components/heading",
-              text: "hello"
+              text: "hello",
             },
             {
               _id: "list-item-input-id",
               _instanceName: "List Item Input",
               _component: "@budibase/standard-components/input",
-              value: "list item"
+              value: "list item",
             },
             {
               _id: "child-list-id",
               _component: "@budibase/standard-components/list",
               _instanceName: "child-list-name",
-              model: { isModel: true, modelId: "test-model-id", label: "Test Model", name: "all_test-model-id"},
+              model: {
+                type: "model",
+                modelId: "test-model-id",
+                label: "Test Model",
+                name: "all_test-model-id",
+              },
               _children: [
                 {
                   _id: "child-list-item-heading-id",
                   _instanceName: "child list item heading",
                   _component: "@budibase/standard-components/heading",
-                  text: "hello"
+                  text: "hello",
                 },
                 {
                   _id: "child-list-item-input-id",
                   _instanceName: "Child List Item Input",
                   _component: "@budibase/standard-components/input",
-                  value: "child list item"
+                  value: "child list item",
                 },
-              ]
+              ],
             },
-          ]
+          ],
         },
-      ]
-    }
+      ],
+    },
   }
 
-  const models = [{
-    _id: "test-model-id",
-    name: "Test Model",
+  const models = [
+    {
+      _id: "test-model-id",
+      name: "Test Model",
       schema: {
         name: {
-          type: "string"
+          type: "string",
         },
         description: {
-          type: "string"
-        }
-    }
-  }]
+          type: "string",
+        },
+      },
+    },
+  ]
 
   const components = {
-    "@budibase/standard-components/container" : {
+    "@budibase/standard-components/container": {
       props: {},
     },
-    "@budibase/standard-components/list" : {
+    "@budibase/standard-components/list": {
       context: "model",
       props: {
-        model: "string"
+        model: "string",
       },
     },
-    "@budibase/standard-components/input" : {
+    "@budibase/standard-components/input": {
       bindable: "value",
       props: {
-        value: "string"
+        value: "string",
       },
     },
-    "@budibase/standard-components/heading" : {
+    "@budibase/standard-components/heading": {
       props: {
-        text: "string"
+        text: "string",
       },
     },
   }
 
   return { screen, models, components }
-
-}
\ No newline at end of file
+}

From 9929d12c6fc7ccdc5654f329d56452594cc5763c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 14:29:32 +0100
Subject: [PATCH 03/17] Fix checkbox depth in frontend settings

---
 packages/builder/src/components/common/Checkbox.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte
index 3c5888d7c8..45e4947da6 100644
--- a/packages/builder/src/components/common/Checkbox.svelte
+++ b/packages/builder/src/components/common/Checkbox.svelte
@@ -12,13 +12,18 @@
 </script>
 
 <input type="checkbox" class="checkbox" id="_checkbox" />
-<div on:click={handleChange}>
+<div class="checkbox-container" on:click={handleChange}>
   <div class="check-div" class:checked>
     <div class="tick_mark" />
   </div>
 </div>
 
 <style>
+  .checkbox-container {
+    position: relative;
+    z-index: 0;
+  }
+
   .checkbox {
     display: none;
   }

From 407d7606e9271bc07023d74871bc1418a60cae1e Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 13 Oct 2020 16:31:14 +0100
Subject: [PATCH 04/17] Destroying instance DBs for an app before it is
 deleted.

---
 packages/server/src/api/controllers/application.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index 53b8792f49..28e389b1d2 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -116,6 +116,12 @@ exports.delete = async function(ctx) {
   const db = new CouchDB(ClientDb.name(getClientId(ctx)))
   const app = await db.get(ctx.params.applicationId)
   const result = await db.remove(app)
+  for (let instance of app.instances) {
+    const instanceDb = new CouchDB(instance._id)
+    await instanceDb.destroy()
+  }
+
+  // remove top level directory
   await fs.rmdir(join(budibaseAppsDir(), ctx.params.applicationId), {
     recursive: true,
   })

From 3fd5e7e57894fd5a155d1104bf853b813e5e679d Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 13 Oct 2020 17:02:59 +0100
Subject: [PATCH 05/17] Removing deprecated function - exists.

---
 packages/server/src/api/controllers/application.js  | 4 ++--
 packages/server/src/utilities/initialiseBudibase.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index 28e389b1d2..0d8fe021be 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -3,7 +3,7 @@ const ClientDb = require("../../db/clientDb")
 const { getPackageForBuilder, buildPage } = require("../../utilities/builder")
 const env = require("../../environment")
 const instanceController = require("./instance")
-const { copy, exists, readFile, writeFile } = require("fs-extra")
+const { copy, existsSync, readFile, writeFile } = require("fs-extra")
 const { budibaseAppsDir } = require("../../utilities/budibaseDir")
 const sqrl = require("squirrelly")
 const setBuilderToken = require("../../utilities/builder/setBuilderToken")
@@ -143,7 +143,7 @@ const createEmptyAppPackage = async (ctx, app) => {
   const appsFolder = budibaseAppsDir()
   const newAppFolder = resolve(appsFolder, app._id)
 
-  if (await exists(newAppFolder)) {
+  if (existsSync(newAppFolder)) {
     ctx.throw(400, "App folder already exists for this application")
   }
 
diff --git a/packages/server/src/utilities/initialiseBudibase.js b/packages/server/src/utilities/initialiseBudibase.js
index c86b6083e9..be3253117c 100644
--- a/packages/server/src/utilities/initialiseBudibase.js
+++ b/packages/server/src/utilities/initialiseBudibase.js
@@ -1,4 +1,4 @@
-const { exists, readFile, writeFile, ensureDir } = require("fs-extra")
+const { existsSync, readFile, writeFile, ensureDir } = require("fs-extra")
 const { join, resolve } = require("./centralPath")
 const Sqrl = require("squirrelly")
 const uuid = require("uuid")
@@ -28,7 +28,7 @@ const setCouchDbUrl = async opts => {
 
 const createDevEnvFile = async opts => {
   const destConfigFile = join(opts.dir, "./.env")
-  let createConfig = !(await exists(destConfigFile)) || opts.quiet
+  let createConfig = !existsSync(destConfigFile) || opts.quiet
   if (createConfig) {
     const template = await readFile(
       resolve(__dirname, "..", "..", ".env.template"),

From 686d85f07e6c7b1511c38eee0e5e915f6b42b03b Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 13 Oct 2020 17:40:28 +0100
Subject: [PATCH 06/17] Adding 501 not implemented errors to screen API which
 did not have a controller previously.

---
 packages/server/src/api/controllers/page.js   |  0
 packages/server/src/api/controllers/screen.js | 17 +++++++++++++++++
 2 files changed, 17 insertions(+)
 delete mode 100644 packages/server/src/api/controllers/page.js

diff --git a/packages/server/src/api/controllers/page.js b/packages/server/src/api/controllers/page.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/server/src/api/controllers/screen.js b/packages/server/src/api/controllers/screen.js
index e69de29bb2..91c3c83dd5 100644
--- a/packages/server/src/api/controllers/screen.js
+++ b/packages/server/src/api/controllers/screen.js
@@ -0,0 +1,17 @@
+/**
+ * This controller is not currently fully implemented. Screens are
+ * currently managed as part of the pages API, please look in api/routes/page.js
+ * for routes and controllers.
+ */
+
+exports.fetch = async ctx => {
+  ctx.throw(501)
+}
+
+exports.save = async ctx => {
+  ctx.throw(501)
+}
+
+exports.destroy = async ctx => {
+  ctx.throw(501)
+}

From 650ace2f9e5eff2c5062754c2864ab8b8e7080bb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 17:46:18 +0100
Subject: [PATCH 07/17] Add flex design property and fix existing default
 layout

---
 .../AppPreview/CurrentItemPreview.svelte      |  5 +-
 .../AppPreview/iframeTemplate.js              | 48 +++++++------------
 .../userInterface/propertyCategories.js       | 10 ++++
 .../appDirectoryTemplate/pages/main/page.json | 28 +++++------
 4 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index c4cdae4bfa..85c50711ae 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -28,7 +28,9 @@
       _id: "screenslot-placeholder",
       _component: "@budibase/standard-components/container",
       _styles: {
-        normal: {},
+        normal: {
+          flex: "1 1 auto",
+        },
         hover: {},
         active: {},
         selected: {},
@@ -46,6 +48,7 @@
               display: "flex",
               "flex-direction": "column",
               "align-items": "center",
+              flex: "1 1 auto",
             },
             hover: {},
             active: {},
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index edb35bb668..4ef5fbff8e 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -11,38 +11,22 @@ export default `<html>
       *, *:before, *:after {
         box-sizing: border-box;
       }
-      .lay-__screenslot__text {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 20px 0;
-          border: dashed 2px #ccc;
-          font-family: sans-serif;
-          font-size: 1.2rem;
-          color: #999;
-          text-transform: uppercase;
-          font-weight: bold;
-        }
-
-        .container-screenslot-placeholder {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 20px;
-          text-align: center;
-          border-style: dashed !important;
-          border-width: 1px;
-          color: #000000;
-          background: #fafafa;
-          height: 94%;
-        }
-
-        .container-screenslot-placeholder span {
-          display: block;
-          margin-bottom: 10px;
-        }
+      .container-screenslot-placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        text-align: center;
+        border-style: dashed !important;
+        border-width: 1px;
+        color: #000000;
+        background: #fafafa;
+        flex: 1 1 auto;
+      }
+      .container-screenslot-placeholder span {
+        display: block;
+        margin-bottom: 10px;
+      }
     </style>
     <script src='/assets/budibase-client.js'></script>
     <script>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index bae44df7f5..efaa8fbd33 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -261,6 +261,16 @@ export const padding = [
 ]
 
 export const size = [
+  {
+    label: "Flex",
+    key: "flex",
+    control: OptionSelect,
+    defaultValue: "0 1 auto",
+    options: [
+      { label: "Shrink", value: "0 1 auto" },
+      { label: "Grow", value: "1 1 auto" },
+    ],
+  },
   {
     label: "Width",
     key: "width",
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
index 916ad5d224..037c385f5c 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@@ -1,9 +1,9 @@
 {
-	"title": "{{ name }}",
-	"favicon": "./_shared/favicon.png",
-	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
-	"props": {
+  "title": "{{ name }}",
+  "favicon": "./_shared/favicon.png",
+  "stylesheets": [],
+  "componentLibraries": ["@budibase/standard-components"],
+  "props": {
     "_id": "private-master-root",
     "_component": "@budibase/standard-components/container",
     "_children": [
@@ -62,10 +62,11 @@
         "_component": "##builtin/screenslot",
         "_styles": {
           "normal": {
-            "padding": "0px",
-            "align-items": "flex-start",
-            "height": "100vh",
-            "background-image": "None"
+            "flex": "1 1 auto",
+            "display": "flex",
+            "flex-direction": "column",
+            "justify-content": "flex-start",
+            "align-items": "stretch"
           },
           "hover": {},
           "active": {},
@@ -84,10 +85,9 @@
         "flex-direction": "column",
         "align-items": "stretch",
         "justify-content": "flex-start",
-        "height": "",
-        "max-width": "",
         "margin-right": "auto",
-        "margin-left": "auto"
+        "margin-left": "auto",
+        "min-height": "100%"
       },
       "selected": {}
     },
@@ -95,6 +95,6 @@
     "className": "",
     "onLoad": []
   },
-	"_css": "",
-	"uiFunctions": ""
+  "_css": "",
+  "uiFunctions": ""
 }

From 7e70eb0f2051f26d971ca26efb228429cb011bab Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 13 Oct 2020 19:37:52 +0100
Subject: [PATCH 08/17] Adding info to the table deletion about screens that
 will be deleted and deleted template screens when table deleted.

---
 .../popovers/EditTablePopover.svelte          | 49 +++++++++++++++++--
 .../components/common/ConfirmDialog.svelte    |  2 +-
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 9df5f36993..d9e7e6867b 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -1,9 +1,11 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import screenTemplates from "builderStore/store/screenTemplates"
+  import api from "builderStore/api"
 
   export let table
 
@@ -11,6 +13,8 @@
   let dropdown
   let editing
   let confirmDeleteDialog
+  let templateScreens
+  let willBeDeleted
 
   $: fields = Object.keys(table.schema)
 
@@ -24,12 +28,31 @@
   }
 
   function showModal() {
+    const screens = $store.allScreens
+    templateScreens = screens.filter(screen => screen.props.table === table._id)
+    willBeDeleted = ["All table data"].concat(templateScreens.map(screen => `Screen ${screen.props._instanceName}`))
     hideEditor()
     confirmDeleteDialog.show()
   }
 
+  function deleteTemplateScreens() {
+    store.update(state => {
+      for (let screen of templateScreens) {
+        const mainPageName = state.pages.main.name
+        state.screens = state.screens.filter(c => c.name !== screen.name)
+        // Remove screen from current page as well
+        state.pages[state.currentPageName]._screens = state.pages[mainPageName]._screens.filter(
+          scr => scr.name !== screen.name
+        )
+        api.delete(`/_builder/api/pages/${mainPageName}/screens/${screen.name}`)
+      }
+      return state
+    })
+  }
+
   async function deleteTable() {
     await backendUiStore.actions.tables.delete(table)
+    deleteTemplateScreens()
     notifier.success("Table deleted")
     hideEditor()
   }
@@ -79,10 +102,20 @@
 </DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
-  body={`Are you sure you wish to delete the table '${table.name}'? Your data will be deleted and this action cannot be undone.`}
+  body={`Are you sure you wish to delete the table '${table.name}'?`}
   okText="Delete Table"
   onOk={deleteTable}
-  title="Confirm Delete" />
+  title="Confirm Delete">
+  The following will also be deleted:
+  <b>
+  <div class="delete-items">
+    {#each willBeDeleted as item}
+      <div>{item}</div>
+    {/each}
+  </div>
+  </b>
+  This action cannot be undone.
+</ConfirmDialog>
 
 <style>
   div.icon {
@@ -96,6 +129,16 @@
     font-size: 16px;
   }
 
+  div.delete-items {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+  }
+
+  div.delete-items div {
+    margin-top: 4px;
+  }
+
   .actions {
     padding: var(--spacing-xl);
     display: grid;
diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index 2cd27573f4..7d4c3ff0e2 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -20,7 +20,7 @@
 
 <Modal bind:this={modal} on:hide={onCancel}>
   <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
-    <div class="body">{body}</div>
+    <div class="body">{body}<slot/></div>
   </ModalContent>
 </Modal>
 

From 8a10ea899c06fed1eba74b22c61e59d90bbbf618 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Oct 2020 19:58:36 +0100
Subject: [PATCH 09/17] Fix data table and grid rendering views

---
 .../src/DataGrid/Component.svelte             | 66 ++++++++++++-------
 .../standard-components/src/DataTable.svelte  | 18 +++--
 packages/standard-components/src/fetchData.js | 15 +++--
 3 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index b7a277435d..c6522f56b4 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -21,6 +21,11 @@
   export let height = 500
   export let pagination
 
+  // These can never change at runtime so don't need to be reactive
+  let canEdit = editable && datasource && datasource.type !== "view"
+  let canAddDelete = editable && datasource && datasource.type === "model"
+
+  let store = _bb.store
   let dataLoaded = false
   let data
   let columnDefs
@@ -32,35 +37,50 @@
       minWidth: 150,
       filter: true,
     },
-    rowSelection: editable ? "multiple" : false,
-    suppressRowClickSelection: !editable,
+    rowSelection: canEdit ? "multiple" : false,
+    suppressRowClickSelection: !canEdit,
     paginationAutoPageSize: true,
     pagination,
   }
-  let store = _bb.store
 
   onMount(async () => {
-    if (datasource.tableId) {
-      const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`)
-      table = await jsonTable.json()
-      const { schema } = table
-      if (!isEmpty(datasource)) {
-        data = await fetchData(datasource, $store)
-        columnDefs = Object.keys(schema).map((key, i) => {
-          return {
-            headerCheckboxSelection: i === 0 && editable,
-            checkboxSelection: i === 0 && editable,
-            valueSetter: setters.get(schema[key].type),
-            headerName: key.charAt(0).toUpperCase() + key.slice(1),
-            field: key,
-            hide: shouldHideField(key),
-            sortable: true,
-            editable: editable,
-            cellRenderer: getRenderer(schema[key], editable),
-            autoHeight: true,
-          }
+    if (datasource != null) {
+      data = await fetchData(datasource, $store)
+      let schemaKeys = []
+      let schema = {}
+
+      // Get schema for datasource
+      if (datasource.type === "view") {
+        // For views, use the first object as the schema and pretend it's all strings
+        if (data && data.length) {
+          schemaKeys = Object.keys(data[0])
+        }
+        schema = {}
+        schemaKeys.forEach(key => {
+          schema[key] = "string"
         })
+      } else {
+        // Fetch the real schema for the table or relationship
+        const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`)
+        table = await jsonTable.json()
+        schema = table.schema
+        schemaKeys = Object.keys(schema)
       }
+
+      columnDefs = schemaKeys.map((key, i) => {
+        return {
+          headerCheckboxSelection: i === 0 && canEdit,
+          checkboxSelection: i === 0 && canEdit,
+          valueSetter: setters.get(schema[key].type),
+          headerName: key.charAt(0).toUpperCase() + key.slice(1),
+          field: key,
+          hide: shouldHideField(key),
+          sortable: true,
+          editable: canEdit,
+          cellRenderer: getRenderer(schema[key], canEdit),
+          autoHeight: true,
+        }
+      })
       dataLoaded = true
     }
   })
@@ -117,7 +137,7 @@
 
 <div style="--grid-height: {height}px">
   {#if dataLoaded}
-    {#if editable}
+    {#if canAddDelete}
       <div class="controls">
         <CreateRowButton {_bb} {table} on:newRow={handleNewRow} />
         {#if selectedRows.length > 0}
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 896ca6a5ca..3344de1258 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -35,15 +35,20 @@
     const FETCH_TABLE_URL = `/api/tables/${tableId}`
     const response = await _bb.api.get(FETCH_TABLE_URL)
     const table = await response.json()
-    schema = table.schema
+    return table.schema
   }
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
       data = await fetchData(datasource, $store)
       if (data && data.length) {
-        await fetchTable(data[0].tableId)
-        headers = Object.keys(schema).filter(shouldDisplayField)
+        if (datasource.type === "view") {
+          schema = data[0]
+          headers = Object.keys(schema).filter(shouldDisplayField)
+        } else {
+          schema = await fetchTable(datasource.tableId)
+          headers = Object.keys(schema)
+        }
       }
     }
   })
@@ -54,7 +59,6 @@
     if (name === "type") return false
     // tables are always tied to a single tableId, this is irrelevant
     if (name === "tableId") return false
-
     return true
   }
 
@@ -95,11 +99,11 @@
     {#each sorted as row (row._id)}
       <tr>
         {#each headers as header}
-          {#if schema[header]}
+          {#if schema[header] !== undefined}
             <!-- Rudimentary solution for attachments on array given this entire table will be replaced by AG Grid -->
-            {#if schema[header].type === 'attachment'}
+            {#if schema[header] && schema[header].type === 'attachment'}
               <AttachmentList files={row[header]} />
-            {:else if schema[header].type === 'link'}
+            {:else if schema[header] && schema[header].type === 'link'}
               <td>{row[header] ? row[header].length : 0} related row(s)</td>
             {:else}
               <td>{row[header] == null ? '' : row[header]}</td>
diff --git a/packages/standard-components/src/fetchData.js b/packages/standard-components/src/fetchData.js
index 27f3fb9e12..a9fc45bcf4 100644
--- a/packages/standard-components/src/fetchData.js
+++ b/packages/standard-components/src/fetchData.js
@@ -6,16 +6,16 @@ export default async function fetchData(datasource, store) {
   if (name) {
     let rows = []
     if (type === "table") {
-      rows = await fetchTableData()
+      rows = fetchTableData()
     } else if (type === "view") {
-      rows = await fetchViewData()
+      rows = fetchViewData()
     } else if (type === "link") {
-      rows = await fetchLinkedRowsData()
+      rows = fetchLinkedRowsData()
     }
 
     // Fetch table schema so we can check for linked rows
     if (rows && rows.length) {
-      const table = await fetchTable(rows[0].tableId)
+      const table = await fetchTable()
       const keys = Object.keys(table.schema)
       rows.forEach(row => {
         for (let key of keys) {
@@ -27,10 +27,12 @@ export default async function fetchData(datasource, store) {
     }
 
     return rows
+  } else {
+    return []
   }
 
-  async function fetchTable(id) {
-    const FETCH_TABLE_URL = `/api/tables/${id}`
+  async function fetchTable() {
+    const FETCH_TABLE_URL = `/api/tables/${datasource.tableId}`
     const response = await api.get(FETCH_TABLE_URL)
     return await response.json()
   }
@@ -44,6 +46,7 @@ export default async function fetchData(datasource, store) {
   }
 
   async function fetchViewData() {
+    console.log("fetching view")
     const { field, groupBy } = datasource
     const params = new URLSearchParams()
 

From 59174c4c1af25c4017a0fa6a4e767b37d005ddb7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 14 Oct 2020 09:23:20 +0100
Subject: [PATCH 10/17] Improve grid and table rendering of any type of
 datasource

---
 .../src/DataGrid/Component.svelte             | 18 +++++-------------
 .../standard-components/src/DataTable.svelte  | 19 +++++++++++--------
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index c6522f56b4..6ec91558e5 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -46,28 +46,20 @@
   onMount(async () => {
     if (datasource != null) {
       data = await fetchData(datasource, $store)
-      let schemaKeys = []
       let schema = {}
 
       // Get schema for datasource
-      if (datasource.type === "view") {
-        // For views, use the first object as the schema and pretend it's all strings
-        if (data && data.length) {
-          schemaKeys = Object.keys(data[0])
-        }
-        schema = {}
-        schemaKeys.forEach(key => {
-          schema[key] = "string"
-        })
+      // Views with "Calculate" applied provide their own schema.
+      // For everything else, use the tableId property to pull to table schema
+      if (datasource.schema) {
+        schema = datasource.schema
       } else {
-        // Fetch the real schema for the table or relationship
         const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`)
         table = await jsonTable.json()
         schema = table.schema
-        schemaKeys = Object.keys(schema)
       }
 
-      columnDefs = schemaKeys.map((key, i) => {
+      columnDefs = Object.keys(schema).map((key, i) => {
         return {
           headerCheckboxSelection: i === 0 && canEdit,
           checkboxSelection: i === 0 && canEdit,
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 3344de1258..80f2b306a2 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -40,15 +40,18 @@
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
+      console.log(datasource)
       data = await fetchData(datasource, $store)
-      if (data && data.length) {
-        if (datasource.type === "view") {
-          schema = data[0]
-          headers = Object.keys(schema).filter(shouldDisplayField)
-        } else {
-          schema = await fetchTable(datasource.tableId)
-          headers = Object.keys(schema)
-        }
+
+      // Get schema for datasource
+      // Views with "Calculate" applied provide their own schema.
+      // For everything else, use the tableId property to pull to table schema
+      if (datasource.schema) {
+        schema = datasource.schema
+        headers = Object.keys(schema).filter(shouldDisplayField)
+      } else {
+        schema = await fetchTable(datasource.tableId)
+        headers = Object.keys(schema).filter(shouldDisplayField)
       }
     }
   })

From 53bbbd2b04f1a0b817c5a90d7f7f8be1c7ba52c8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 14 Oct 2020 09:34:23 +0100
Subject: [PATCH 11/17] Fix errors being thrown by grid and table

---
 packages/standard-components/src/DataGrid/Component.svelte | 2 +-
 packages/standard-components/src/DataTable.svelte          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 6ec91558e5..a292104bd1 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -44,7 +44,7 @@
   }
 
   onMount(async () => {
-    if (datasource != null) {
+    if (!isEmpty(datasource)) {
       data = await fetchData(datasource, $store)
       let schema = {}
 
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 80f2b306a2..eabd48c4c6 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -12,7 +12,7 @@
   export let color
   export let stripeColor
   export let borderColor
-  export let datasource = {}
+  export let datasource
   export let _bb
 
   let data = []

From f6a388b38a1abcc7075cc89b2f561483b88944af Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 14 Oct 2020 09:39:49 +0100
Subject: [PATCH 12/17] Fix errors being thrown when nesting certain components
 without picking a datasource

---
 packages/standard-components/src/Form.svelte   | 2 +-
 packages/standard-components/src/NewRow.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/Form.svelte b/packages/standard-components/src/Form.svelte
index ed9a393440..29401e8ad4 100644
--- a/packages/standard-components/src/Form.svelte
+++ b/packages/standard-components/src/Form.svelte
@@ -14,7 +14,7 @@
   let rowId
   let errors = {}
 
-  $: schema = $store.data && $store.data._table.schema
+  $: schema = $store.data && $store.data._table && $store.data._table.schema
   $: fields = schema ? Object.keys(schema) : []
 </script>
 
diff --git a/packages/standard-components/src/NewRow.svelte b/packages/standard-components/src/NewRow.svelte
index 817e07e0d0..e7446f9bdc 100644
--- a/packages/standard-components/src/NewRow.svelte
+++ b/packages/standard-components/src/NewRow.svelte
@@ -19,7 +19,7 @@
   }
 
   onMount(async () => {
-    if (table) {
+    if (table && typeof table === "string") {
       const tableObj = await fetchTable(table)
       row.tableId = table
       row._table = tableObj

From 4d42e722a378a22add49b9e351a90a2fca640eff Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 14 Oct 2020 09:53:27 +0100
Subject: [PATCH 13/17] Fix grid not allowing adding rows due to model -> table
 rename

---
 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 a292104bd1..dd700c55f7 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -23,7 +23,7 @@
 
   // These can never change at runtime so don't need to be reactive
   let canEdit = editable && datasource && datasource.type !== "view"
-  let canAddDelete = editable && datasource && datasource.type === "model"
+  let canAddDelete = editable && datasource && datasource.type === "table"
 
   let store = _bb.store
   let dataLoaded = false

From 5251efd837d5ebf7c306ea8bddc99b6b644b29ac Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 14 Oct 2020 10:06:33 +0100
Subject: [PATCH 14/17] Remove console.log statements

---
 packages/standard-components/src/DataTable.svelte | 1 -
 packages/standard-components/src/fetchData.js     | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index eabd48c4c6..bdb0c76183 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -40,7 +40,6 @@
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      console.log(datasource)
       data = await fetchData(datasource, $store)
 
       // Get schema for datasource
diff --git a/packages/standard-components/src/fetchData.js b/packages/standard-components/src/fetchData.js
index a9fc45bcf4..68aca7eac6 100644
--- a/packages/standard-components/src/fetchData.js
+++ b/packages/standard-components/src/fetchData.js
@@ -46,7 +46,6 @@ export default async function fetchData(datasource, store) {
   }
 
   async function fetchViewData() {
-    console.log("fetching view")
     const { field, groupBy } = datasource
     const params = new URLSearchParams()
 

From 22331dafb6101c2b5db9aeff2f8b00917cdabbad Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 14 Oct 2020 10:10:16 +0100
Subject: [PATCH 15/17] Remove console.log statement

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

diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
index a8c4b96227..33174355bb 100644
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@@ -9,7 +9,6 @@
   export let value = ""
 
   $: urls = getUrls()
-  $: console.log(urls)
 
   const handleBlur = () => dispatch("change", value)
 

From f5ad74eaf56a24aef67f7cb2009509c0761dd130 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 14 Oct 2020 11:56:02 +0100
Subject: [PATCH 16/17] Some design changes and moving around screen deletion
 to centralise it.

---
 .../builder/src/builderStore/store/index.js   | 21 +++++++++++++++++++
 .../popovers/EditTablePopover.svelte          | 20 +++---------------
 .../userInterface/ScreenDropdownMenu.svelte   | 17 ++-------------
 3 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 4eeb2e3842..bb61712f1a 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -53,6 +53,7 @@ export const getStore = () => {
 
   store.saveScreen = saveScreen(store)
   store.setCurrentScreen = setCurrentScreen(store)
+  store.deleteScreens = deleteScreens(store)
   store.setCurrentPage = setCurrentPage(store)
   store.createScreen = createScreen(store)
   store.addStylesheet = addStylesheet(store)
@@ -185,6 +186,26 @@ const setCurrentScreen = store => screenName => {
   })
 }
 
+const deleteScreens = store => (screens, pageName = null) => {
+  if (!(screens instanceof Array)) {
+    screens = [screens]
+  }
+  store.update(state => {
+    if (pageName == null) {
+      pageName = state.pages.main.name
+    }
+    for (let screen of screens) {
+      state.screens = state.screens.filter(c => c.name !== screen.name)
+      // Remove screen from current page as well
+      state.pages[pageName]._screens = state.pages[pageName]._screens.filter(
+        scr => scr.name !== screen.name
+      )
+      api.delete(`/_builder/api/pages/${pageName}/screens/${screen.name}`)
+    }
+    return state
+  })
+}
+
 const savePage = store => async page => {
   store.update(state => {
     if (state.currentFrontEndType !== "page" || !state.currentPageName) {
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index d9e7e6867b..c4f5e2176c 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -35,24 +35,10 @@
     confirmDeleteDialog.show()
   }
 
-  function deleteTemplateScreens() {
-    store.update(state => {
-      for (let screen of templateScreens) {
-        const mainPageName = state.pages.main.name
-        state.screens = state.screens.filter(c => c.name !== screen.name)
-        // Remove screen from current page as well
-        state.pages[state.currentPageName]._screens = state.pages[mainPageName]._screens.filter(
-          scr => scr.name !== screen.name
-        )
-        api.delete(`/_builder/api/pages/${mainPageName}/screens/${screen.name}`)
-      }
-      return state
-    })
-  }
 
   async function deleteTable() {
     await backendUiStore.actions.tables.delete(table)
-    deleteTemplateScreens()
+    store.deleteScreens(templateScreens)
     notifier.success("Table deleted")
     hideEditor()
   }
@@ -102,11 +88,10 @@
 </DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
-  body={`Are you sure you wish to delete the table '${table.name}'?`}
   okText="Delete Table"
   onOk={deleteTable}
   title="Confirm Delete">
-  The following will also be deleted:
+  Are you sure you wish to delete the table <i>{table.name}?</i> The following will also be deleted:
   <b>
   <div class="delete-items">
     {#each willBeDeleted as item}
@@ -137,6 +122,7 @@
 
   div.delete-items div {
     margin-top: 4px;
+    font-weight: 500
   }
 
   .actions {
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index 69e9ea498a..7ae8bbf432 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -17,26 +17,13 @@
   }
 
   const deleteScreen = () => {
+    store.deleteScreens(screen, $store.currentPageName)
+    // update the page if required
     store.update(state => {
-      // Remove screen from screens
-      const screens = state.screens.filter(c => c.name !== screen.name)
-      state.screens = screens
-
-      // Remove screen from current page as well
-      const pageScreens = state.pages[state.currentPageName]._screens.filter(
-        scr => scr.name !== screen.name
-      )
-      state.pages[state.currentPageName]._screens = pageScreens
-
       if (state.currentPreviewItem.name === screen.name) {
         store.setCurrentPage($store.currentPageName)
         $goto(`./:page/page-layout`)
       }
-
-      api.delete(
-        `/_builder/api/pages/${state.currentPageName}/screens/${screen.name}`
-      )
-
       return state
     })
   }

From b9f69e34f1d55095bbb4d9d71f11279ad610677f Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 14 Oct 2020 12:22:43 +0100
Subject: [PATCH 17/17] Upgrading prettier svelte plugin until found a version
 that works for our formatting without breaking on some syntax.

---
 package.json                                  |  2 +-
 .../popovers/EditTablePopover.svelte          | 21 +++++++++++--------
 .../components/common/ConfirmDialog.svelte    |  5 ++++-
 yarn.lock                                     | 11 +++++-----
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 5a7d40fe1c..15d9088466 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "eslint-plugin-svelte3": "^2.7.3",
     "lerna": "3.14.1",
     "prettier": "^1.19.1",
-    "prettier-plugin-svelte": "^0.7.0",
+    "prettier-plugin-svelte": "^1.1.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-replace": "^2.2.0",
     "svelte": "^3.28.0"
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index c4f5e2176c..4e74ea163a 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -30,12 +30,13 @@
   function showModal() {
     const screens = $store.allScreens
     templateScreens = screens.filter(screen => screen.props.table === table._id)
-    willBeDeleted = ["All table data"].concat(templateScreens.map(screen => `Screen ${screen.props._instanceName}`))
+    willBeDeleted = ["All table data"].concat(
+      templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
+    )
     hideEditor()
     confirmDeleteDialog.show()
   }
 
-
   async function deleteTable() {
     await backendUiStore.actions.tables.delete(table)
     store.deleteScreens(templateScreens)
@@ -91,13 +92,15 @@
   okText="Delete Table"
   onOk={deleteTable}
   title="Confirm Delete">
-  Are you sure you wish to delete the table <i>{table.name}?</i> The following will also be deleted:
+  Are you sure you wish to delete the table
+  <i>{table.name}?</i>
+  The following will also be deleted:
   <b>
-  <div class="delete-items">
-    {#each willBeDeleted as item}
-      <div>{item}</div>
-    {/each}
-  </div>
+    <div class="delete-items">
+      {#each willBeDeleted as item}
+        <div>{item}</div>
+      {/each}
+    </div>
   </b>
   This action cannot be undone.
 </ConfirmDialog>
@@ -122,7 +125,7 @@
 
   div.delete-items div {
     margin-top: 4px;
-    font-weight: 500
+    font-weight: 500;
   }
 
   .actions {
diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index 7d4c3ff0e2..27a7517fce 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -20,7 +20,10 @@
 
 <Modal bind:this={modal} on:hide={onCancel}>
   <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
-    <div class="body">{body}<slot/></div>
+    <div class="body">
+      {body}
+      <slot />
+    </div>
   </ModalContent>
 </Modal>
 
diff --git a/yarn.lock b/yarn.lock
index 9b84e373af..076a4a90dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3690,11 +3690,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier-plugin-svelte@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-0.7.0.tgz#5ac0b9f194e0450c88ff1e167cbf3b32d2642df2"
-  dependencies:
-    tslib "^1.9.3"
+prettier-plugin-svelte@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-1.1.0.tgz#e6ec282d8457598b0c02164083b11ad8cb8ab304"
+  integrity sha512-wmIggG/ryV0wcmE9D5p+k5TwKDpS2SGKJpF6IV1aYHK7dkBJD+di1w47Ci00DRsI4RrXZRC2Ef37DSyrTb6Zqg==
 
 prettier@^1.19.1:
   version "1.19.1"
@@ -4529,7 +4528,7 @@ trim-off-newlines@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
 
-tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.9.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"