From 237165dcd918bd2d6ea07978c228143092cf908e Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 19 Jun 2020 09:14:03 +0200
Subject: [PATCH 01/54] Sets up tabbed modal for settings

---
 packages/builder/package.json                 |   2 +-
 .../src/components/settings/Link.svelte       |  48 +++++++++
 .../src/components/settings/Modal.svelte      | 102 ++++++++++++++++++
 .../settings/tabs/DangerZone.svelte           |   1 +
 .../components/settings/tabs/General.svelte   |   1 +
 .../settings/tabs/Integrations.svelte         |   1 +
 .../settings/tabs/Permissions.svelte          |   1 +
 .../src/components/settings/tabs/Users.svelte |   1 +
 .../src/components/settings/tabs/index.js     |   5 +
 .../src/pages/[application]/_reset.svelte     |  10 +-
 10 files changed, 164 insertions(+), 8 deletions(-)
 create mode 100644 packages/builder/src/components/settings/Link.svelte
 create mode 100644 packages/builder/src/components/settings/Modal.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/DangerZone.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/General.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/Integrations.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/Permissions.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/Users.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/index.js

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 8fe9ffd494..b5b71eab0a 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.1.1",
+    "@budibase/bbui": "^1.5.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
new file mode 100644
index 0000000000..fe2ec26752
--- /dev/null
+++ b/packages/builder/src/components/settings/Link.svelte
@@ -0,0 +1,48 @@
+<script>
+  import Modal from "./Modal.svelte"
+  import { SettingsIcon } from "components/common/Icons/"
+  import { getContext } from "svelte"
+  import { isActive, goto, layout } from "@sveltech/routify"
+
+  // Handle create app modal
+  const { open } = getContext("simple-modal")
+
+  const showSettingsModal = () => {
+    open(
+      Modal,
+      {
+        name: "Placeholder App Name",
+        description: "This is a hardcoded description that needs to change",
+      },
+      {
+        closeButton: false,
+        closeOnEsc: true,
+        styleContent: { padding: 0 },
+        closeOnOuterClick: true,
+      }
+    )
+  }
+</script>
+
+<span class="topnavitemright" on:click={showSettingsModal}>
+  <SettingsIcon />
+</span>
+
+<style>
+  span:first-letter {
+    text-transform: capitalize;
+  }
+  .topnavitemright {
+    cursor: pointer;
+    color: var(--ink-light);
+    margin: 0px 20px 0px 0px;
+    padding-top: 4px;
+    font-weight: 500;
+    font-size: 1rem;
+    height: 100%;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/packages/builder/src/components/settings/Modal.svelte b/packages/builder/src/components/settings/Modal.svelte
new file mode 100644
index 0000000000..bc7898442f
--- /dev/null
+++ b/packages/builder/src/components/settings/Modal.svelte
@@ -0,0 +1,102 @@
+<script>
+  import { General, Permissions, Users, Integrations, DangerZone } from "./tabs"
+
+  import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
+  import { SettingsIcon, CloseIcon } from "components/common/Icons/"
+  import { getContext } from "svelte"
+  import { post } from "builderStore/api"
+
+  const { open, close } = getContext("simple-modal")
+  export let name = ""
+  export let description = ""
+  const tabs = [
+    {
+      title: "General",
+      key: "GENERAL",
+      component: General,
+    },
+    {
+      title: "Permissions",
+      key: "PERMISSIONS",
+      component: Permissions,
+    },
+    {
+      title: "Users",
+      key: "USERS",
+      component: Users,
+    },
+    {
+      title: "Integrations",
+      key: "INTEGRATIONS",
+      component: Integrations,
+    },
+    {
+      title: "Danger Zone",
+      key: "DANGERZONE",
+      component: DangerZone,
+    },
+  ]
+  let value = "GENERAL"
+  $: selectedTab = tabs.find(tab => tab.key === value).component
+</script>
+
+<div class="container">
+  <div class="body">
+    <div class="heading">
+      <span class="icon">
+        <SettingsIcon />
+      </span>
+      <h3>Settings</h3>
+    </div>
+    <Switcher headings={tabs} bind:value>
+      <svelte:component this={selectedTab} />
+    </Switcher>
+  </div>
+  <div class="close-button" on:click={close}>
+    <CloseIcon />
+  </div>
+</div>
+
+<style>
+  .container {
+    position: relative;
+  }
+
+  .close-button {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+  .close-button :global(svg) {
+    width: 24px;
+    height: 24px;
+  }
+  .heading {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  h3 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .icon {
+    display: grid;
+    border-radius: 3px;
+    align-content: center;
+    justify-content: center;
+    margin-right: 12px;
+    height: 20px;
+    width: 20px;
+    padding: 10px;
+    background-color: var(--blue-light);
+  }
+  .body {
+    padding: 40px 40px 80px 40px;
+    display: grid;
+    grid-gap: 20px;
+  }
+</style>
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
new file mode 100644
index 0000000000..5766d97588
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@@ -0,0 +1 @@
+Danger
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
new file mode 100644
index 0000000000..7cc1079673
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -0,0 +1 @@
+General
diff --git a/packages/builder/src/components/settings/tabs/Integrations.svelte b/packages/builder/src/components/settings/tabs/Integrations.svelte
new file mode 100644
index 0000000000..9e932e2e89
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/Integrations.svelte
@@ -0,0 +1 @@
+Integrations
diff --git a/packages/builder/src/components/settings/tabs/Permissions.svelte b/packages/builder/src/components/settings/tabs/Permissions.svelte
new file mode 100644
index 0000000000..ca206fbdda
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/Permissions.svelte
@@ -0,0 +1 @@
+Permissions
diff --git a/packages/builder/src/components/settings/tabs/Users.svelte b/packages/builder/src/components/settings/tabs/Users.svelte
new file mode 100644
index 0000000000..f3d929a074
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/Users.svelte
@@ -0,0 +1 @@
+Users
diff --git a/packages/builder/src/components/settings/tabs/index.js b/packages/builder/src/components/settings/tabs/index.js
new file mode 100644
index 0000000000..b723ca68d3
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/index.js
@@ -0,0 +1,5 @@
+export { default as General } from './General.svelte';
+export { default as Integrations } from './Integrations.svelte';
+export { default as Permissions } from './Permissions.svelte';
+export { default as Users } from './Users.svelte';
+export { default as DangerZone } from './DangerZone.svelte';
\ No newline at end of file
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 4d2a708f1e..071eeabcd0 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -1,6 +1,7 @@
 <script>
   import Modal from "svelte-simple-modal"
   import { store } from "builderStore"
+  import { getContext } from "svelte"
   import { get } from "builderStore/api"
 
   import { fade } from "svelte/transition"
@@ -8,6 +9,7 @@
 
   import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
   import IconButton from "components/common/IconButton.svelte"
+  import SettingsLink from "components/settings/Link.svelte"
 
   // Get Package and set store
   export let application
@@ -29,7 +31,6 @@
 
 <Modal>
   <div class="root">
-
     <div class="top-nav">
       <div class="topleftnav">
         <button class="home-logo">
@@ -53,12 +54,7 @@
                       hoverColor="var(--secondary75)"/> -->
       </div>
       <div class="toprightnav">
-        <span
-          class:active={$isActive(`/settings`)}
-          class="topnavitemright"
-          on:click={() => $goto(`/settings`)}>
-          <SettingsIcon />
-        </span>
+        <SettingsLink />
         <span
           class:active={false}
           class="topnavitemright"

From be45e180dd9082f7a6099f95d882f11de8ee0b11 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 19 Jun 2020 12:09:27 +0200
Subject: [PATCH 02/54] adds General tab design and updates bbui

---
 packages/builder/package.json                 |  2 +-
 .../components/settings/tabs/General.svelte   | 25 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index b5b71eab0a..ca5ddc92b1 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.5.0",
+    "@budibase/bbui": "^1.7.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index 7cc1079673..3128738cf1 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -1 +1,24 @@
-General
+<script>
+  import { Input, TextArea, Button } from "@budibase/bbui"
+</script>
+
+<div class="container">
+  <div class="background">
+    <Input thin edit placeholder="Enter your name" label="Name" />
+  </div>
+  <div class="background">
+    <TextArea thin edit placeholder="Enter your name" label="Name" />
+  </div>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: 16px;
+  }
+  .background {
+    border-radius: 5px;
+    background-color: var(--light-grey);
+    padding: 12px 12px 18px 12px;
+  }
+</style>

From dc084554895e2f665bb7006a5c92d0770e1bb235 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 19 Jun 2020 12:20:02 +0200
Subject: [PATCH 03/54] bump bbui

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

diff --git a/packages/builder/package.json b/packages/builder/package.json
index ca5ddc92b1..764ec0e687 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.7.0",
+    "@budibase/bbui": "^1.7.1",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",

From 1c524f1f684da7846aae7720d0c78aef755c8ba7 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 19 Jun 2020 12:51:02 +0200
Subject: [PATCH 04/54] bump bbui and add DangerZone design

---
 packages/builder/package.json                 |  2 +-
 .../settings/tabs/DangerZone.svelte           | 44 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 764ec0e687..22a25ad931 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.7.1",
+    "@budibase/bbui": "^1.7.2",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
index 5766d97588..4cfa6cbb1e 100644
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@@ -1 +1,43 @@
-Danger
+<script>
+  import { Input, TextArea, Button } from "@budibase/bbui"
+  let value = ""
+  let loading = false
+
+  const deleteApp = () => {
+    loading = true
+    // Do stuff here to delete app!
+    // Navigate to start
+  }
+</script>
+
+<div class="background">
+  <Input
+    on:change={e => (value = e.target.value)}
+    on:input={e => (value = e.target.value)}
+    thin
+    disabled={loading}
+    placeholder="Enter your name"
+    label="Type DELETE into the textbox, then click the following button to
+    delete your web app:" />
+
+  <Button
+    disabled={value !== 'DELETE' || loading}
+    primary
+    wide
+    on:click={deleteApp}>
+    Delete Entire Web App
+  </Button>
+</div>
+
+<style>
+  .background {
+    display: grid;
+    grid-gap: 16px;
+    border-radius: 5px;
+    background-color: var(--light-grey);
+    padding: 12px 12px 18px 12px;
+  }
+  .background :global(button) {
+    max-width: 100%;
+  }
+</style>

From d0648bd30d9c244c9a0fd41203c4a5061dd3c1de Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 19 Jun 2020 14:32:48 +0200
Subject: [PATCH 05/54] bump bbui

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

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 854bcd3caf..3ae31df2d7 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.8.0",
+    "@budibase/bbui": "^1.8.1",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",

From ed6f7699f028a7a427511fd4ac1ac70f76efd62b Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 19 Jun 2020 15:50:39 +0200
Subject: [PATCH 06/54] adds integration design

---
 .../components/settings/Integration.svelte    | 56 +++++++++++++++++++
 .../settings/tabs/Integrations.svelte         | 46 ++++++++++++++-
 2 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/components/settings/Integration.svelte

diff --git a/packages/builder/src/components/settings/Integration.svelte b/packages/builder/src/components/settings/Integration.svelte
new file mode 100644
index 0000000000..69cfe6241f
--- /dev/null
+++ b/packages/builder/src/components/settings/Integration.svelte
@@ -0,0 +1,56 @@
+<script>
+  import { Button } from "@budibase/bbui"
+  export let remove = false
+</script>
+
+<div class="container">
+  <div class="content">
+    <div class="img">
+      <img src="https://picsum.photos/60/60" alt="zoom" />
+    </div>
+    <div class="body">
+      <div class="title">Zoom</div>
+      <div class="description">
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit
+      </div>
+    </div>
+  </div>
+  <div class="footer">
+    <Button wide error={remove} secondary={!remove} on:click>
+      <span>{remove ? 'Remove' : 'Add'}</span>
+    </Button>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    padding: 12px;
+    background: var(--light-grey);
+    grid-gap: 20px;
+  }
+  span {
+    font-size: 12px;
+    font-weight: bold;
+  }
+  .content {
+    display: grid;
+    grid-gap: 12px;
+    grid-template-columns: 60px auto;
+  }
+  .title {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .description {
+    font-size: 12px;
+  }
+  .img {
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  img {
+    height: 60px;
+    width: 60px;
+  }
+</style>
diff --git a/packages/builder/src/components/settings/tabs/Integrations.svelte b/packages/builder/src/components/settings/tabs/Integrations.svelte
index 9e932e2e89..419aed17ef 100644
--- a/packages/builder/src/components/settings/tabs/Integrations.svelte
+++ b/packages/builder/src/components/settings/tabs/Integrations.svelte
@@ -1 +1,45 @@
-Integrations
+<script>
+  import Integration from "../Integration.svelte"
+</script>
+
+<div class="container">
+  <div class="title">Your Integrations</div>
+  <div class="integrations">
+    <Integration remove />
+    <Integration remove />
+    <Integration remove />
+    <Integration remove />
+  </div>
+  <div class="apps">Recommended apps</div>
+  <div class="integrations">
+    <Integration />
+    <Integration />
+    <Integration />
+    <Integration />
+  </div>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: 16px;
+  }
+  .integrations {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
+  }
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .apps {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .background {
+    border-radius: 5px;
+    background-color: var(--light-grey);
+    padding: 12px 12px 18px 12px;
+  }
+</style>

From 1c63a93234b541d1bac524e7f8c31680f7d8166a Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 24 Jun 2020 15:04:01 +0200
Subject: [PATCH 07/54] more work on settings modal

---
 packages/builder/package.json                 |  2 +-
 .../src/components/settings/Modal.svelte      | 12 +---
 .../src/components/settings/TabTitle.svelte   | 13 ++++
 .../settings/tabs/DangerZone.svelte           |  5 +-
 .../components/settings/tabs/General.svelte   |  4 +-
 .../src/components/settings/tabs/Users.svelte | 65 ++++++++++++++++++-
 6 files changed, 86 insertions(+), 15 deletions(-)
 create mode 100644 packages/builder/src/components/settings/TabTitle.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 7067bafcba..cafbe6fa44 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.8.1",
+    "@budibase/bbui": "^1.10.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/components/settings/Modal.svelte b/packages/builder/src/components/settings/Modal.svelte
index bc7898442f..2d832481c3 100644
--- a/packages/builder/src/components/settings/Modal.svelte
+++ b/packages/builder/src/components/settings/Modal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { General, Permissions, Users, Integrations, DangerZone } from "./tabs"
+  import { General, Users, DangerZone } from "./tabs"
 
   import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
   import { SettingsIcon, CloseIcon } from "components/common/Icons/"
@@ -15,21 +15,11 @@
       key: "GENERAL",
       component: General,
     },
-    {
-      title: "Permissions",
-      key: "PERMISSIONS",
-      component: Permissions,
-    },
     {
       title: "Users",
       key: "USERS",
       component: Users,
     },
-    {
-      title: "Integrations",
-      key: "INTEGRATIONS",
-      component: Integrations,
-    },
     {
       title: "Danger Zone",
       key: "DANGERZONE",
diff --git a/packages/builder/src/components/settings/TabTitle.svelte b/packages/builder/src/components/settings/TabTitle.svelte
new file mode 100644
index 0000000000..e4d4aba217
--- /dev/null
+++ b/packages/builder/src/components/settings/TabTitle.svelte
@@ -0,0 +1,13 @@
+<h3>
+  <slot />
+</h3>
+
+<style>
+  h3 {
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--ink);
+    margin-top: var(--space-lg);
+    margin-bottom: var(--space-md);
+  }
+</style>
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
index 4cfa6cbb1e..ad243527ce 100644
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@@ -1,5 +1,7 @@
 <script>
   import { Input, TextArea, Button } from "@budibase/bbui"
+  import Title from "../TabTitle.svelte"
+
   let value = ""
   let loading = false
 
@@ -10,6 +12,7 @@
   }
 </script>
 
+<Title>Danger Zone</Title>
 <div class="background">
   <Input
     on:change={e => (value = e.target.value)}
@@ -32,7 +35,7 @@
 <style>
   .background {
     display: grid;
-    grid-gap: 16px;
+    grid-gap: var(--space);
     border-radius: 5px;
     background-color: var(--light-grey);
     padding: 12px 12px 18px 12px;
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index 3128738cf1..bc0c17bc81 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -1,7 +1,9 @@
 <script>
   import { Input, TextArea, Button } from "@budibase/bbui"
+  import Title from "../TabTitle.svelte"
 </script>
 
+<Title>General</Title>
 <div class="container">
   <div class="background">
     <Input thin edit placeholder="Enter your name" label="Name" />
@@ -14,7 +16,7 @@
 <style>
   .container {
     display: grid;
-    grid-gap: 16px;
+    grid-gap: var(--space);
   }
   .background {
     border-radius: 5px;
diff --git a/packages/builder/src/components/settings/tabs/Users.svelte b/packages/builder/src/components/settings/tabs/Users.svelte
index f3d929a074..2bc175a6b1 100644
--- a/packages/builder/src/components/settings/tabs/Users.svelte
+++ b/packages/builder/src/components/settings/tabs/Users.svelte
@@ -1 +1,64 @@
-Users
+<script>
+  import { Input, Select, Button } from "@budibase/bbui"
+  import Title from "../TabTitle.svelte"
+</script>
+
+<Title>Users</Title>
+<div class="container">
+  <div class="background">
+    <div class="title">Create new user</div>
+    <Input thin placeholder="Enter name" label="Name" />
+    <Input thin placeholder="Enter Password" label="Password" />
+    <div>
+      <label>Access Level</label>
+      <Select>
+        <option value="admin">Admin</option>
+        <option value="poweruser">Power User</option>
+      </Select>
+    </div>
+    <div class="create-button">
+      <Button attention>Create</Button>
+    </div>
+  </div>
+</div>
+
+<style>
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.17;
+    font: var(--ink);
+    margin-bottom: 12px;
+  }
+  .container {
+    display: grid;
+    grid-gap: var(--space);
+  }
+  .background {
+    display: grid;
+    grid-gap: var(--space-md);
+    position: relative;
+    border-radius: 5px;
+    background-color: var(--light-grey);
+    padding: 12px 12px 18px 12px;
+  }
+  .background :global(select) {
+    min-width: 100%;
+    padding: 12px 9px;
+    height: initial;
+  }
+  .create-button {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .title {
+    font-size: 14px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.14;
+    letter-spacing: 0.14px;
+    text-align: left;
+    color: var(--font);
+  }
+</style>

From 4315d25d66eb48774d425b6d9a8ec80cb8408728 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 25 Jun 2020 10:41:00 +0100
Subject: [PATCH 08/54] bugfix: duplicate model created when we click save
 twice

---
 packages/builder/src/builderStore/store/backend.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index e5e5413111..b7fbd04f4b 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -60,6 +60,10 @@ export const getBackendUiStore = () => {
       },
       select: model =>
         store.update(state => {
+          model =
+            typeof model === "string"
+              ? state.models.find(m => m._id === model)
+              : model
           state.selectedModel = model
           state.draftModel = cloneDeep(model)
           state.selectedField = ""
@@ -69,10 +73,10 @@ export const getBackendUiStore = () => {
         }),
       save: async ({ model }) => {
         const updatedModel = cloneDeep(model)
-
         const SAVE_MODEL_URL = `/api/models`
-        await api.post(SAVE_MODEL_URL, updatedModel)
+        const response = await api.post(SAVE_MODEL_URL, updatedModel)
         await store.actions.models.fetch()
+        store.actions.models.select((await response.json())._id)
       },
       addField: field => {
         store.update(state => {

From 4836092c208d1efaa3e7feaa62c8ed0277c70cbb Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 25 Jun 2020 10:41:07 +0100
Subject: [PATCH 09/54] yarn lock

---
 packages/server/yarn.lock | 221 +-------------------------------------
 1 file changed, 3 insertions(+), 218 deletions(-)

diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index bf15f722d2..7ed027b1d1 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -194,20 +194,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/client@^0.0.32":
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496"
-  integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A==
-  dependencies:
-    "@nx-js/compiler-util" "^2.0.0"
-    bcryptjs "^2.4.3"
-    deep-equal "^2.0.1"
-    lodash "^4.17.15"
-    lunr "^2.3.5"
-    regexparam "^1.3.0"
-    shortid "^2.2.8"
-    svelte "^3.9.2"
-
 "@budibase/core@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa"
@@ -863,11 +849,6 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -940,13 +921,6 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
-available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1669,26 +1643,6 @@ decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
-deep-equal@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
-  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
-  dependencies:
-    es-abstract "^1.17.5"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.0.5"
-    isarray "^2.0.5"
-    object-is "^1.1.2"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.2"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2064,36 +2018,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
-es-abstract@^1.17.4:
-  version "1.17.6"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
-  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.0"
-    is-regex "^1.1.0"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
-es-get-iterator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3086,21 +3010,11 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-bigint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -3108,11 +3022,6 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3123,11 +3032,6 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
   integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
-is-callable@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
-  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
-
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -3154,7 +3058,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -3229,21 +3133,11 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-npm@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
-is-number-object@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3280,28 +3174,11 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-is-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
-  integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
-  dependencies:
-    has-symbols "^1.0.1"
-
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -3318,31 +3195,11 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
-is-typed-array@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
-  dependencies:
-    available-typed-arrays "^1.0.0"
-    es-abstract "^1.17.4"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -3368,11 +3225,6 @@ isarray@1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -4785,14 +4637,6 @@ object-inspect@^1.7.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
   integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
 
-object-is@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
-  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5514,19 +5358,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -5855,14 +5686,6 @@ shortid@^2.2.8:
   dependencies:
     nanoid "^2.1.0"
 
-side-channel@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
-  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    object-inspect "^1.7.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -6115,7 +5938,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
+string.prototype.trimend@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
@@ -6141,7 +5964,7 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
+string.prototype.trimstart@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
@@ -6271,11 +6094,6 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte@^3.9.2:
-  version "3.23.2"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.23.2.tgz#f3e500384261a2e77b29681ee744c3c790fbcdc3"
-  integrity sha512-hE8GeTM83YVR4GY6/6PeDEcGct4JS5aCi+IYbCAa76oaPSfuF7L85DQYULQxlTK/KPWzw3L1GRGmC3oPG/PQoA==
-
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -6761,44 +6579,11 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
-which-boxed-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
-  dependencies:
-    is-bigint "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-number-object "^1.0.3"
-    is-string "^1.0.4"
-    is-symbol "^1.0.2"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which-typed-array@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    es-abstract "^1.17.5"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"

From dbbed0c0796f6cca088b485c407528146e7660ec Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 25 Jun 2020 12:41:22 +0200
Subject: [PATCH 10/54] change spacing var to be hardcoded

---
 packages/builder/src/components/settings/TabTitle.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/settings/TabTitle.svelte b/packages/builder/src/components/settings/TabTitle.svelte
index e4d4aba217..8e2a2d6c13 100644
--- a/packages/builder/src/components/settings/TabTitle.svelte
+++ b/packages/builder/src/components/settings/TabTitle.svelte
@@ -7,7 +7,7 @@
     font-size: 18px;
     font-weight: bold;
     color: var(--ink);
-    margin-top: var(--space-lg);
-    margin-bottom: var(--space-md);
+    margin-top: 40px;
+    margin-bottom: 20px;
   }
 </style>

From c4cbfd0c0c3bd7a15b1a332b871b0d7e4f979025 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 25 Jun 2020 12:41:27 +0200
Subject: [PATCH 11/54] bump bbui

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

diff --git a/packages/builder/package.json b/packages/builder/package.json
index cafbe6fa44..50ee90e328 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.10.0",
+    "@budibase/bbui": "^1.12.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",

From 5fe8b523bf8804a9a885317fc46127012a1d24d4 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 25 Jun 2020 14:25:17 +0200
Subject: [PATCH 12/54] adds functionality to check list of users and add users
 in settings modal

---
 .../src/components/settings/UserRow.svelte    |  22 ++++
 .../src/components/settings/tabs/Users.svelte | 116 +++++++++++++-----
 2 files changed, 109 insertions(+), 29 deletions(-)
 create mode 100644 packages/builder/src/components/settings/UserRow.svelte

diff --git a/packages/builder/src/components/settings/UserRow.svelte b/packages/builder/src/components/settings/UserRow.svelte
new file mode 100644
index 0000000000..8e70df0bbf
--- /dev/null
+++ b/packages/builder/src/components/settings/UserRow.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { Input, Select, Button } from "@budibase/bbui"
+  export let user
+</script>
+
+<div class="inputs">
+  <Input thin bind:value={user.username} name="Name" placeholder="Username" />
+  <Select bind:value={user.accessLevelId} thin>
+    <option value="ADMIN">Admin</option>
+    <option value="POWER_USER">Power User</option>
+  </Select>
+  <Button on:click>Edit</Button>
+</div>
+
+<style>
+  .inputs {
+    display: grid;
+    justify-items: stretch;
+    grid-gap: 18px;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+</style>
diff --git a/packages/builder/src/components/settings/tabs/Users.svelte b/packages/builder/src/components/settings/tabs/Users.svelte
index 2bc175a6b1..3be9a38cd7 100644
--- a/packages/builder/src/components/settings/tabs/Users.svelte
+++ b/packages/builder/src/components/settings/tabs/Users.svelte
@@ -1,64 +1,122 @@
 <script>
   import { Input, Select, Button } from "@budibase/bbui"
   import Title from "../TabTitle.svelte"
+  import UserRow from "../UserRow.svelte"
+
+  import { store, backendUiStore } from "builderStore"
+  import api from "builderStore/api"
+  // import * as api from "../api"
+
+  let username = ""
+  let password = ""
+  let accessLevelId
+
+  $: valid = username && password && accessLevelId
+  $: appId = $store.appId
+
+  // Create user!
+  async function createUser() {
+    if (valid) {
+      const user = { name: username, username, password, accessLevelId }
+      const response = await api.post(`/api/users`, user)
+      const json = await response.json()
+      backendUiStore.actions.users.create(json)
+      fetchUsersPromise = fetchUsers()
+    }
+  }
+
+  // Get users
+  async function fetchUsers() {
+    const response = await api.get(`/api/users`)
+    const users = await response.json()
+    backendUiStore.update(state => {
+      state.users = users
+      return state
+    })
+    return users
+  }
+
+  let fetchUsersPromise = fetchUsers()
 </script>
 
 <Title>Users</Title>
 <div class="container">
-  <div class="background">
+  <div class="background create">
     <div class="title">Create new user</div>
-    <Input thin placeholder="Enter name" label="Name" />
-    <Input thin placeholder="Enter Password" label="Password" />
-    <div>
-      <label>Access Level</label>
-      <Select>
-        <option value="admin">Admin</option>
-        <option value="poweruser">Power User</option>
+    <div class="inputs">
+      <Input thin bind:value={username} name="Name" placeholder="Username" />
+      <Input
+        thin
+        bind:value={password}
+        name="Password"
+        placeholder="Password" />
+      <Select bind:value={accessLevelId} thin>
+        <option value="ADMIN">Admin</option>
+        <option value="POWER_USER">Power User</option>
       </Select>
     </div>
     <div class="create-button">
-      <Button attention>Create</Button>
+      <Button on:click={createUser} small blue>Create</Button>
     </div>
   </div>
+  <div class="background">
+    <div class="title">Current Users</div>
+    {#await fetchUsersPromise}
+      Loading state!
+    {:then users}
+      <ul>
+        {#each users as user}
+          <li>
+            <UserRow {user} />
+          </li>
+        {:else}
+          <li>No Users found</li>
+        {/each}
+      </ul>
+    {:catch error}
+      err0r
+    {/await}
+  </div>
 </div>
 
 <style>
-  label {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 1.17;
-    font: var(--ink);
-    margin-bottom: 12px;
-  }
   .container {
     display: grid;
-    grid-gap: var(--space);
+    grid-gap: 14px;
   }
   .background {
-    display: grid;
-    grid-gap: var(--space-md);
     position: relative;
+    display: grid;
+    grid-gap: 12px;
     border-radius: 5px;
     background-color: var(--light-grey);
     padding: 12px 12px 18px 12px;
   }
-  .background :global(select) {
-    min-width: 100%;
+  .background.create {
+    background-color: var(--blue-light);
+  }
+  .inputs :global(select) {
     padding: 12px 9px;
     height: initial;
   }
   .create-button {
-    display: flex;
-    justify-content: flex-end;
+    position: absolute;
+    top: 12px;
+    right: 12px;
   }
   .title {
     font-size: 14px;
     font-weight: 500;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: 1.14;
-    letter-spacing: 0.14px;
-    text-align: left;
-    color: var(--font);
+  }
+  .inputs {
+    display: grid;
+    grid-gap: 18px;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  ul {
+    list-style: none;
+    padding: 0;
+    display: grid;
+    grid-gap: 8px;
   }
 </style>

From 3dfcf56a14ee3202031ec2ca6d24cee8fcd171d5 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 25 Jun 2020 16:58:53 +0100
Subject: [PATCH 13/54] bugfix: duplicate controls inside colorpicker

---
 .../Colorpicker/Colorpicker.svelte            | 33 -------------------
 .../userInterface/Colorpicker/Input.svelte    |  3 --
 .../userInterface/Colorpicker/Slider.svelte   | 13 --------
 3 files changed, 49 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index c50b119e53..2ae31385aa 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -149,39 +149,6 @@
   $: shrink = swatches.length > 0
 </script>
 
-<div class="colorpicker-container">
-
-  <div class="palette-panel">
-    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-  </div>
-
-  <div class="control-panel">
-    <div class="alpha-hue-panel">
-      <div>
-        <CheckedBackground borderRadius="50%" backgroundSize="8px">
-          <div class="selected-color" {style} />
-        </CheckedBackground>
-      </div>
-      <div>
-        <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
-
-        <CheckedBackground borderRadius="10px" backgroundSize="7px">
-          <Slider
-            type="alpha"
-            value={a}
-            on:change={alpha => setAlpha(alpha.detail)} />
-        </CheckedBackground>
-
-      </div>
-    </div>
-
-    <div class="format-input-panel">
-      <ButtonGroup {format} onclick={changeFormatAndConvert} />
-      <Input {value} on:input={event => handleColorInput(event.target.value)} />
-    </div>
-  </div>
-
-</div>
 <div
   class="colorpicker-container"
   bind:clientHeight={pickerHeight}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
index c148d6bf30..b7a6f94ff7 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
@@ -2,9 +2,6 @@
   export let value = ""
 </script>
 
-<div>
-  <input on:input type="text" {value} maxlength="25" />
-</div>
 <div>
   <input on:input on:change type="text" {value} maxlength="25" />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
index 906f5f0d6a..a6abab6ca1 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -29,19 +29,6 @@
   $: style = `transform: translateX(${thumbPosition - 6}px);`
 </script>
 
-<div
-  bind:this={slider}
-  bind:clientWidth={sliderWidth}
-  on:click={event => handleClick(event.clientX)}
-  class="color-format-slider"
-  class:hue={type === 'hue'}
-  class:alpha={type === 'alpha'}>
-  <div
-    use:dragable
-    on:drag={e => handleClick(e.detail)}
-    class="slider-thumb"
-    {style} />
-</div>
 <div
   bind:this={slider}
   bind:clientWidth={sliderWidth}

From 3eedff15a64112aea4cd1157139b3da8cffbe2d9 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 25 Jun 2020 17:24:31 +0100
Subject: [PATCH 14/54] bugfix: margin-bottom not set correctly

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

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index f0228d5f04..17c163ae69 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -123,7 +123,7 @@ export const margin = [
   },
   {
     label: "Bottom",
-    key: "padding-bottom",
+    key: "margin-bottom",
     control: OptionSelect,
     options: [
       { label: "None", value: "0px" },

From 659215752739499af5fc0a536f96668a3b0214c8 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 25 Jun 2020 17:46:43 +0100
Subject: [PATCH 15/54] bugfix: master screen not styleable

---
 .../src/utilities/appDirectoryTemplate/pages/main/page.json     | 2 +-
 .../appDirectoryTemplate/pages/unauthenticated/page.json        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
index 392496988f..a86d485fe5 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@@ -4,6 +4,7 @@
 	"stylesheets": [],
 	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
 	"props" : {
+		"_id": "private-master-root",
 		"_component": "@budibase/standard-components/container",
 		"_children": [
       {
@@ -19,7 +20,6 @@
         "_children": []
       }
     ],
-		"_id": 0,
 		"type": "div",
 		"_styles": {
 			"active": {},
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
index 6ff1bfcd98..0ce6333f13 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
@@ -7,6 +7,7 @@
   "favicon": "./_shared/favicon.png",
   "stylesheets": [],
   "props": {
+    "_id": "public-master-root",
     "_component": "@budibase/standard-components/container",
     "_children": [
       {
@@ -30,7 +31,6 @@
         "logo": ""
       }
     ],
-    "_id": 1,
     "type": "div",
     "_styles": {
       "layout": {},

From 42e23b05e68aac1f9f8d9603d45c393c5f2ad447 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 26 Jun 2020 09:19:37 +0200
Subject: [PATCH 16/54] add back settingslink that was accidently removed

---
 packages/builder/src/pages/[application]/_reset.svelte | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index a0c6897e54..d5c0ee5576 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -1,6 +1,7 @@
 <script>
   import Modal from "svelte-simple-modal"
   import { store, workflowStore } from "builderStore"
+  import SettingsLink from "components/settings/Link.svelte"
   import { get } from "builderStore/api"
 
   import { fade } from "svelte/transition"
@@ -54,12 +55,7 @@
                       hoverColor="var(--secondary75)"/> -->
       </div>
       <div class="toprightnav">
-        <span
-          class:active={$isActive(`/settings`)}
-          class="topnavitemright"
-          on:click={() => $goto(`/settings`)}>
-          <SettingsIcon />
-        </span>
+        <SettingsLink />
         <span
           class:active={false}
           class="topnavitemright"

From 1d9a0b9b0dfb3f0009e9eb636cb03365730a31fe Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 26 Jun 2020 11:04:50 +0200
Subject: [PATCH 17/54] sets up frontend side of updating users

---
 .../src/components/settings/UserRow.svelte        |  4 +++-
 .../src/components/settings/tabs/Users.svelte     | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/settings/UserRow.svelte b/packages/builder/src/components/settings/UserRow.svelte
index 8e70df0bbf..560b72c125 100644
--- a/packages/builder/src/components/settings/UserRow.svelte
+++ b/packages/builder/src/components/settings/UserRow.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { createEventDispatcher } from "svelte"
+  const dispatch = createEventDispatcher()
   import { Input, Select, Button } from "@budibase/bbui"
   export let user
 </script>
@@ -9,7 +11,7 @@
     <option value="ADMIN">Admin</option>
     <option value="POWER_USER">Power User</option>
   </Select>
-  <Button on:click>Edit</Button>
+  <Button on:click={() => dispatch('save', user)}>Edit</Button>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/settings/tabs/Users.svelte b/packages/builder/src/components/settings/tabs/Users.svelte
index 3be9a38cd7..3e54df6597 100644
--- a/packages/builder/src/components/settings/tabs/Users.svelte
+++ b/packages/builder/src/components/settings/tabs/Users.svelte
@@ -25,6 +25,17 @@
     }
   }
 
+  // Update user!
+  async function updateUser(event) {
+    const response = await api.put(`/api/users`, event.detail)
+    const users = await response.json()
+    backendUiStore.update(state => {
+      state.users = users
+      return state
+    })
+    fetchUsersPromise = fetchUsers()
+  }
+
   // Get users
   async function fetchUsers() {
     const response = await api.get(`/api/users`)
@@ -67,7 +78,7 @@
       <ul>
         {#each users as user}
           <li>
-            <UserRow {user} />
+            <UserRow {user} on:save={updateUser} />
           </li>
         {:else}
           <li>No Users found</li>
@@ -89,7 +100,7 @@
     display: grid;
     grid-gap: 12px;
     border-radius: 5px;
-    background-color: var(--light-grey);
+    background-color: var(--grey-2);
     padding: 12px 12px 18px 12px;
   }
   .background.create {

From 1440ed9fdd590656ab53e97c323eb6ea9f96a4f2 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 26 Jun 2020 11:05:09 +0200
Subject: [PATCH 18/54] adds update functionality to users

---
 packages/server/src/api/controllers/user.js | 26 +++++++++++++++++----
 packages/server/src/api/routes/user.js      |  1 +
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index 7805ad251d..bba4376185 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -7,7 +7,7 @@ const {
   ADMIN_LEVEL_ID,
 } = require("../../utilities/accessLevels")
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const data = await database.query("database/by_type", {
     include_docs: true,
@@ -17,7 +17,7 @@ exports.fetch = async function(ctx) {
   ctx.body = data.rows.map(row => row.doc)
 }
 
-exports.create = async function(ctx) {
+exports.create = async function (ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const appId = (await database.get("_design/database")).metadata.applicationId
   const { username, password, name, accessLevelId } = ctx.request.body
@@ -63,16 +63,32 @@ exports.create = async function(ctx) {
   }
 }
 
-exports.update = async function() {}
+exports.update = async function (ctx) {
+  const db = new CouchDB(ctx.user.instanceId)
+  const user = ctx.request.body
 
-exports.destroy = async function(ctx) {
+  const response = await db.put(user)
+  user._rev = response.rev
+
+  ctx.status = 200
+  ctx.body = {
+    message: `User ${ctx.request.body.username} updated successfully.`,
+    user: {
+      ...user,
+      _rev: response.rev,
+      _id: response.id,
+    },
+  }
+}
+
+exports.destroy = async function (ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   await database.destroy(getUserId(ctx.params.username))
   ctx.message = `User ${ctx.params.username} deleted.`
   ctx.status = 200
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const user = await database.get(getUserId(ctx.params.username))
   ctx.body = {
diff --git a/packages/server/src/api/routes/user.js b/packages/server/src/api/routes/user.js
index 3c560d3f80..532943ea62 100644
--- a/packages/server/src/api/routes/user.js
+++ b/packages/server/src/api/routes/user.js
@@ -8,6 +8,7 @@ const router = Router()
 router
   .get("/api/users", authorized(LIST_USERS), controller.fetch)
   .get("/api/users/:username", authorized(USER_MANAGEMENT), controller.find)
+  .put("/api/users/", authorized(USER_MANAGEMENT), controller.update)
   .post("/api/users", authorized(USER_MANAGEMENT), controller.create)
   .delete(
     "/api/users/:username",

From 4a6c7e5a06121c8e12e268d8faea2c8ef2de1d16 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 26 Jun 2020 14:32:45 +0100
Subject: [PATCH 19/54] UI Update

Button color changed
Background color in the settings panel removed
Workflow items font color fixed
Spacing improved
---
 .../workflow/SetupPanel/SetupPanel.svelte     | 91 +++++--------------
 .../SetupPanel/WorkflowBlockSetup.svelte      | 42 +++++----
 .../WorkflowBuilder/WorkflowBuilder.svelte    |  2 +-
 .../WorkflowBuilder/flowchart/FlowItem.svelte |  4 +
 .../WorkflowList/WorkflowList.svelte          | 10 +-
 5 files changed, 58 insertions(+), 91 deletions(-)

diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index fb18a20e63..f68e74311d 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -5,6 +5,7 @@
   import { notifier } from "builderStore/store/notifications"
   import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
   import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
+  import { Button } from "@budibase/bbui"
 
   const { open, close } = getContext("simple-modal")
 
@@ -90,26 +91,26 @@
           {testResult}
         </button>
       {/if}
-      <button class="workflow-button hoverable" on:click={testWorkflow}>
-        Test
-      </button>
+      <Button secondary wide on:click={testWorkflow}>
+        Test Workflow
+      </Button>
     </div>
   {/if}
   {#if selectedTab === 'SETUP'}
     {#if workflowBlock}
       <WorkflowBlockSetup {workflowBlock} />
       <div class="buttons">
-        <button
+        <Button
+          green wide
           data-cy="save-workflow-setup"
-          class="workflow-button hoverable"
           on:click={saveWorkflow}>
           Save Workflow
-        </button>
-        <button
-          class="delete-workflow-button hoverable"
+        </Button>
+        <Button
+          red wide
           on:click={deleteWorkflowBlock}>
           Delete Block
-        </button>
+        </Button>
       </div>
     {:else if $workflowStore.currentWorkflow}
       <div class="panel">
@@ -141,15 +142,14 @@
           </div>
         </div>
         <div class="buttons">
-          <button
+          <Button green wide
             data-cy="save-workflow-setup"
-            class="workflow-button hoverable"
             on:click={saveWorkflow}>
             Save Workflow
-          </button>
-          <button class="delete-workflow-button" on:click={deleteWorkflow}>
+          </Button>
+          <Button red wide on:click={deleteWorkflow}>
             Delete Workflow
-          </button>
+          </Button>
         </div>
       </div>
     {/if}
@@ -175,11 +175,12 @@
   }
 
   header {
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 600;
+    font-family: inter;
     display: flex;
     align-items: center;
-    margin-bottom: 18px;
+    margin-bottom: 20px;
     color: var(--ink);
   }
 
@@ -190,13 +191,12 @@
   .block-label {
     font-weight: 500;
     font-size: 14px;
-    color: var(--ink);
-    margin: 0px 0px 16px 0px;
+    color: var(--grey-7);
+    margin-bottom: 20px;
   }
 
   .config-item {
-    margin: 0px 0px 4px 0px;
-    padding: 12px 0px;
+    margin-bottom: 20px;
   }
 
   .budibase_input {
@@ -214,6 +214,7 @@
   header > span {
     color: var(--grey-5);
     margin-right: 20px;
+    cursor: pointer;
   }
 
   .form {
@@ -228,52 +229,10 @@
 
   .buttons {
     position: absolute;
-    bottom: 10px;
-  }
-
-  .delete-workflow-button {
-    cursor: pointer;
-    border: 1px solid var(--red);
-    border-radius: 3px;
-    width: 260px;
-    padding: 8px 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--white);
-    color: var(--red);
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 2ms;
-    align-self: flex-end;
-    margin-bottom: 10px;
-  }
-
-  .delete-workflow-button:hover {
-    background: var(--red);
-    border: 1px solid var(--red);
-    color: var(--white);
-  }
-
-  .workflow-button {
-    cursor: pointer;
-    border: 1px solid var(--grey-4);
-    border-radius: 3px;
+    bottom: 20px;
+    display: grid;
     width: 100%;
-    padding: 8px 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: white;
-    color: var(--ink);
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 2ms;
-    margin-bottom: 10px;
-  }
-
-  .workflow-button:hover {
-    background: var(--grey-1);
+    gap: 12px;
   }
 
   .access-level {
@@ -301,7 +260,7 @@
   }
 
   .passed {
-    background: #84c991;
+    background: var(--green);
   }
 
   .failed {
diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
index 20ab71c23a..b950d1dacb 100644
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@@ -13,11 +13,10 @@
     : []
 </script>
 
-<label class="uk-form-label">{workflowBlock.type}: {workflowBlock.name}</label>
+<label class="selected-label">{workflowBlock.type}: {workflowBlock.name}</label>
 {#each workflowParams as [parameter, type]}
   <div class="block-field">
-    <label class="uk-form-label">{parameter}</label>
-    <div class="uk-form-controls">
+    <label class="label">{parameter}</label>
       {#if Array.isArray(type)}
         <select
           class="budibase_input"
@@ -30,7 +29,7 @@
         <ComponentSelector bind:value={workflowBlock.args[parameter]} />
       {:else if type === 'accessLevel'}
         <select
-          class="budibase__input"
+          class="budibase_input"
           bind:value={workflowBlock.args[parameter]}>
           <option value="ADMIN">Admin</option>
           <option value="POWER_USER">Power User</option>
@@ -38,17 +37,17 @@
       {:else if type === 'password'}
         <input
           type="password"
-          class="budibase__input"
+          class="budibase_input"
           bind:value={workflowBlock.args[parameter]} />
       {:else if type === 'number'}
         <input
           type="number"
-          class="budibase__input"
+          class="budibase_input"
           bind:value={workflowBlock.args[parameter]} />
       {:else if type === 'longText'}
         <textarea
           type="text"
-          class="budibase__input"
+          class="budibase_input"
           bind:value={workflowBlock.args[parameter]} />
       {:else if type === 'model'}
         <ModelSelector bind:value={workflowBlock.args[parameter]} />
@@ -57,41 +56,46 @@
       {:else if type === 'string'}
         <input
           type="text"
-          class="budibase__input"
+          class="budibase_input"
           bind:value={workflowBlock.args[parameter]} />
       {/if}
     </div>
-  </div>
 {/each}
 
 <style>
-  .block-field {
-    border-radius: 3px;
-    background: var(--grey-1);
-    padding: 12px;
-    margin: 0px 0px 4px 0px;
-  }
 
+  .block-field {
+    display: grid;
+  }
   .budibase_input {
     height: 36px;
-    width: 220px;
-    border-radius: 3px;
-    border: 1px solid var(--grey-4);
+    border-radius: 5px;
+    background-color: var(--grey-2);
+    border: 1px solid var(--grey-2);
     text-align: left;
     color: var(--ink);
     font-size: 14px;
     padding-left: 12px;
+    margin-top: 8px;
   }
 
   label {
     text-transform: capitalize;
     font-size: 14px;
     font-weight: 500;
+    margin-top: 20px;
+  }
+
+  .selected-label {
+    text-transform: capitalize;
+    font-size: 14px;
+    font-weight: 500;
   }
 
   textarea {
     min-height: 150px;
     font-family: inherit;
-    padding: 5px;
+    padding: 12px;
+    margin-top: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
index ff294b40c7..86f873b719 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
@@ -81,7 +81,7 @@
   }
 
   .play-button.highlighted {
-    background: var(--primary);
+    background: var(--purple);
   }
 
   .stop-button.highlighted {
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
index 05a97af519..e680375833 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
@@ -67,6 +67,10 @@
     color: var(--ink);
   }
 
+  p {
+    color: inherit;
+  }
+
   div:hover {
     transform: scale(1.05);
   }
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
index 1d46bba4c1..7217aab560 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@@ -4,6 +4,7 @@
   import { onMount, getContext } from "svelte"
   import { backendUiStore, workflowStore } from "builderStore"
   import CreateWorkflowModal from "./CreateWorkflowModal.svelte"
+  import { Button } from "@budibase/bbui"
 
   const { open, close } = getContext("simple-modal")
 
@@ -27,10 +28,9 @@
 </script>
 
 <section>
-  <button class="new-workflow-button hoverable" on:click={newWorkflow}>
-    <i class="icon ri-add-circle-fill" />
+  <Button purple wide on:click{newWorkflow}>
     Create New Workflow
-  </button>
+  </Button>
   <ul>
     {#each $workflowStore.workflows as workflow}
       <li
@@ -74,10 +74,10 @@
 
   .workflow-item {
     display: flex;
-    border-radius: 3px;
+    border-radius: 5px;
     padding-left: 12px;
     align-items: center;
-    height: 40px;
+    height: 36px;
     margin-bottom: 4px;
     color: var(--ink);
   }

From 9d43d0295b123cebd697250ea35c1b037af3b948 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 26 Jun 2020 14:38:29 +0100
Subject: [PATCH 20/54] formatting and linting

---
 .../workflow/SetupPanel/SetupPanel.svelte     | 21 ++---
 .../SetupPanel/WorkflowBlockSetup.svelte      | 83 +++++++++----------
 .../WorkflowList/WorkflowList.svelte          |  4 +-
 3 files changed, 48 insertions(+), 60 deletions(-)

diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index f68e74311d..fca0738e9d 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -91,9 +91,7 @@
           {testResult}
         </button>
       {/if}
-      <Button secondary wide on:click={testWorkflow}>
-        Test Workflow
-      </Button>
+      <Button secondary wide on:click={testWorkflow}>Test Workflow</Button>
     </div>
   {/if}
   {#if selectedTab === 'SETUP'}
@@ -101,16 +99,13 @@
       <WorkflowBlockSetup {workflowBlock} />
       <div class="buttons">
         <Button
-          green wide
+          green
+          wide
           data-cy="save-workflow-setup"
           on:click={saveWorkflow}>
           Save Workflow
         </Button>
-        <Button
-          red wide
-          on:click={deleteWorkflowBlock}>
-          Delete Block
-        </Button>
+        <Button red wide on:click={deleteWorkflowBlock}>Delete Block</Button>
       </div>
     {:else if $workflowStore.currentWorkflow}
       <div class="panel">
@@ -142,14 +137,14 @@
           </div>
         </div>
         <div class="buttons">
-          <Button green wide
+          <Button
+            green
+            wide
             data-cy="save-workflow-setup"
             on:click={saveWorkflow}>
             Save Workflow
           </Button>
-          <Button red wide on:click={deleteWorkflow}>
-            Delete Workflow
-          </Button>
+          <Button red wide on:click={deleteWorkflow}>Delete Workflow</Button>
         </div>
       </div>
     {/if}
diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
index b950d1dacb..0c527d8b4b 100644
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@@ -17,53 +17,48 @@
 {#each workflowParams as [parameter, type]}
   <div class="block-field">
     <label class="label">{parameter}</label>
-      {#if Array.isArray(type)}
-        <select
-          class="budibase_input"
-          bind:value={workflowBlock.args[parameter]}>
-          {#each type as option}
-            <option value={option}>{option}</option>
-          {/each}
-        </select>
-      {:else if type === 'component'}
-        <ComponentSelector bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'accessLevel'}
-        <select
-          class="budibase_input"
-          bind:value={workflowBlock.args[parameter]}>
-          <option value="ADMIN">Admin</option>
-          <option value="POWER_USER">Power User</option>
-        </select>
-      {:else if type === 'password'}
-        <input
-          type="password"
-          class="budibase_input"
-          bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'number'}
-        <input
-          type="number"
-          class="budibase_input"
-          bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'longText'}
-        <textarea
-          type="text"
-          class="budibase_input"
-          bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'model'}
-        <ModelSelector bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'record'}
-        <RecordSelector bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'string'}
-        <input
-          type="text"
-          class="budibase_input"
-          bind:value={workflowBlock.args[parameter]} />
-      {/if}
-    </div>
+    {#if Array.isArray(type)}
+      <select class="budibase_input" bind:value={workflowBlock.args[parameter]}>
+        {#each type as option}
+          <option value={option}>{option}</option>
+        {/each}
+      </select>
+    {:else if type === 'component'}
+      <ComponentSelector bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'accessLevel'}
+      <select class="budibase_input" bind:value={workflowBlock.args[parameter]}>
+        <option value="ADMIN">Admin</option>
+        <option value="POWER_USER">Power User</option>
+      </select>
+    {:else if type === 'password'}
+      <input
+        type="password"
+        class="budibase_input"
+        bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'number'}
+      <input
+        type="number"
+        class="budibase_input"
+        bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'longText'}
+      <textarea
+        type="text"
+        class="budibase_input"
+        bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'model'}
+      <ModelSelector bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'record'}
+      <RecordSelector bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'string'}
+      <input
+        type="text"
+        class="budibase_input"
+        bind:value={workflowBlock.args[parameter]} />
+    {/if}
+  </div>
 {/each}
 
 <style>
-
   .block-field {
     display: grid;
   }
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
index 7217aab560..b9f0da657b 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@@ -28,9 +28,7 @@
 </script>
 
 <section>
-  <Button purple wide on:click{newWorkflow}>
-    Create New Workflow
-  </Button>
+  <Button purple wide on:click{newWorkflow}>Create New Workflow</Button>
   <ul>
     {#each $workflowStore.workflows as workflow}
       <li

From 638e7afcc6d9815fa2b2a536a3990f9b42a54efa Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Sat, 27 Jun 2020 16:56:01 +0100
Subject: [PATCH 21/54] WIP: Select Scroll - Problems on scroll

---
 packages/builder/package.json                 |   1 +
 .../userInterface/DesignView.svelte           |  13 +-
 .../userInterface/OptionSelect.svelte         | 113 +++++++++++-------
 3 files changed, 80 insertions(+), 47 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index dd449b2256..7fe768be6b 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -70,6 +70,7 @@
     "safe-buffer": "^5.1.2",
     "shortid": "^2.2.8",
     "string_decoder": "^1.2.0",
+    "svelte-portal": "^0.1.0",
     "svelte-simple-modal": "^0.4.2",
     "uikit": "^3.1.7"
   },
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 7bca352bd1..5cc65ec214 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -1,16 +1,27 @@
 <script>
+  import {onMount} from "svelte"
   import PropertyGroup from "./PropertyGroup.svelte"
   import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
+
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
   export let onStyleChanged = () => {}
 
   let selectedCategory = "normal"
+  let propGroup = null
 
   const getProperties = name => panelDefinition[name]
 
+  onMount(() => {
+    // if(propGroup) {
+    //   propGroup.addEventListener("scroll", function(e){
+    //     console.log("I SCROLLED", e.target.scrollTop)
+    //   })
+    // }
+  })
+
   function onChange(category) {
     selectedCategory = category
   }
@@ -31,7 +42,7 @@
   </div>
 
   <div class="positioned-wrapper">
-    <div class="design-view-property-groups">
+    <div bind:this={propGroup} class="design-view-property-groups">
       {#if propertyGroupNames.length > 0}
         {#each propertyGroupNames as groupName}
           <PropertyGroup
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 1c85a06392..202cd10a19 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { onMount, beforeUpdate } from "svelte"
+  import { onMount, beforeUpdate, afterUpdate } from "svelte"
+  import Portal from "svelte-portal"
   import { buildStyle } from "../../helpers.js"
   export let options = []
   export let value = ""
@@ -12,12 +13,13 @@
   let selectMenu
   let icon
 
-  let selectYPosition = null
-  let availableSpace = 0
+  let selectAnchor = null;
+  let dimensions = {top: 0, bottom: 0, left: 0}
 
   let positionSide = "top"
-  let maxHeight = null
-  let menuHeight
+  let maxHeight = 0
+  let scrollTop = 0;
+  let containerEl = null;
 
   const handleStyleBind = value =>
     !!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
@@ -26,22 +28,37 @@
     if (select) {
       select.addEventListener("keydown", addSelectKeyEvents)
     }
+
+    containerEl = document.querySelector(".design-view-property-groups")
+
     return () => {
       select.removeEventListener("keydown", addSelectKeyEvents)
+      containerEl.removeEventListener("scroll", disableScroll)
     }
+
   })
 
-  function checkPosition() {
-    const { bottom, top: spaceAbove } = select.getBoundingClientRect()
+  function disableScroll(e) {
+    containerEl.scrollTop = scrollTop 
+  }
+
+  function getDimensions() {
+    const { bottom, top: spaceAbove, left } = selectAnchor.getBoundingClientRect()
     const spaceBelow = window.innerHeight - bottom
 
+    let y;
+
     if (spaceAbove > spaceBelow) {
       positionSide = "bottom"
-      maxHeight = `${spaceAbove.toFixed(0) - 20}px`
+      maxHeight = spaceAbove - 20  
+      y = (window.innerHeight - spaceAbove)
     } else {
       positionSide = "top"
-      maxHeight = `${spaceBelow.toFixed(0) - 20}px`
+      y = bottom
+      maxHeight = spaceBelow - 20
     }
+
+    dimensions = {[positionSide]: y, left}
   }
 
   function addSelectKeyEvents(e) {
@@ -57,24 +74,30 @@
   }
 
   function toggleSelect(isOpen) {
-    checkPosition()
+    getDimensions()
     if (isOpen) {
       icon.style.transform = "rotate(180deg)"
+      let containerWidth = containerEl.offsetWidth
+      scrollTop = containerEl.scrollTop
+      containerEl.addEventListener("scroll", disableScroll)
     } else {
       icon.style.transform = "rotate(0deg)"
+      containerEl.removeEventListener("scroll", disableScroll)
     }
-    open = isOpen
+    open = isOpen    
   }
 
+
   function handleClick(val) {
     value = val
     onChange(value)
   }
 
   $: menuStyle = buildStyle({
-    "max-height": maxHeight,
+    "max-height": `${maxHeight.toFixed(0)}px`,
     "transform-origin": `center ${positionSide}`,
-    [positionSide]: "32px",
+    [positionSide]: `${dimensions[positionSide]}px`,
+    "left": `${dimensions.left.toFixed(0)}px`,
   })
 
   $: isOptionsObject = options.every(o => typeof o === "object")
@@ -92,37 +115,39 @@
   bind:this={select}
   class="bb-select-container"
   on:click={() => toggleSelect(!open)}>
-  <div class="bb-select-anchor selected">
+  <div bind:this={selectAnchor} class="bb-select-anchor selected">
     <span>{displayLabel}</span>
     <i bind:this={icon} class="ri-arrow-down-s-fill" />
   </div>
-  <div
-    bind:this={selectMenu}
-    style={menuStyle}
-    class="bb-select-menu"
-    class:open>
-    <ul>
-      {#if isOptionsObject}
-        {#each options as { value: v, label }}
-          <li
-            {...handleStyleBind(v)}
-            on:click|self={handleClick(v)}
-            class:selected={value === v}>
-            {label}
-          </li>
-        {/each}
-      {:else}
-        {#each options as v}
-          <li
-            {...handleStyleBind(v)}
-            on:click|self={handleClick(v)}
-            class:selected={value === v}>
-            {v}
-          </li>
-        {/each}
-      {/if}
-    </ul>
-  </div>
+  <Portal>
+    <div
+      bind:this={selectMenu}
+      style={menuStyle}
+      class="bb-select-menu"
+      class:open>
+      <ul>
+        {#if isOptionsObject}
+          {#each options as { value: v, label }}
+            <li
+              {...handleStyleBind(v)}
+              on:click|self={handleClick(v)}
+              class:selected={value === v}>
+              {label}
+            </li>
+          {/each}
+        {:else}
+          {#each options as v}
+            <li
+              {...handleStyleBind(v)}
+              on:click|self={handleClick(v)}
+              class:selected={value === v}>
+              {v}
+            </li>
+          {/each}
+        {/if}
+      </ul>
+    </div>
+  </Portal>
 </div>
 {#if open}
   <div on:click|self={() => toggleSelect(false)} class="overlay" />
@@ -130,7 +155,7 @@
 
 <style>
   .overlay {
-    position: absolute;
+    position: fixed;
     top: 0;
     bottom: 0;
     right: 0;
@@ -139,7 +164,6 @@
   }
 
   .bb-select-container {
-    position: relative;
     outline: none;
     width: 160px;
     height: 36px;
@@ -190,9 +214,6 @@
     height: fit-content !important;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px;
-    border-right: 1px solid var(--grey-4);
-    border-left: 1px solid var(--grey-4);
-    border-bottom: 1px solid var(--grey-4);
     background-color: var(--grey-2);
     transform: scale(0);
     transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);

From ae21d5c5057fe52be5a3fabf86cd3cf4c2a44982 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 29 Jun 2020 10:10:41 +0200
Subject: [PATCH 22/54] adds edit/save mode to update user list

---
 .../src/components/settings/UserRow.svelte    | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/settings/UserRow.svelte b/packages/builder/src/components/settings/UserRow.svelte
index 560b72c125..eff86f55cb 100644
--- a/packages/builder/src/components/settings/UserRow.svelte
+++ b/packages/builder/src/components/settings/UserRow.svelte
@@ -3,15 +3,33 @@
   const dispatch = createEventDispatcher()
   import { Input, Select, Button } from "@budibase/bbui"
   export let user
+
+  let editMode = false
 </script>
 
 <div class="inputs">
-  <Input thin bind:value={user.username} name="Name" placeholder="Username" />
-  <Select bind:value={user.accessLevelId} thin>
+  <Input
+    disabled={!editMode}
+    thin
+    bind:value={user.username}
+    name="Name"
+    placeholder="Username" />
+  <Select disabled={editMode} bind:value={user.accessLevelId} thin>
     <option value="ADMIN">Admin</option>
     <option value="POWER_USER">Power User</option>
   </Select>
-  <Button on:click={() => dispatch('save', user)}>Edit</Button>
+  {#if editMode}
+    <Button
+      blue
+      on:click={() => {
+        dispatch('save', user)
+        editMode = false
+      }}>
+      Save
+    </Button>
+  {:else}
+    <Button secondary on:click={() => (editMode = true)}>Edit</Button>
+  {/if}
 </div>
 
 <style>

From 96f0de3366e7a6d14284e90a73b3bc43a45967c8 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 29 Jun 2020 10:12:13 +0200
Subject: [PATCH 23/54] lint fixes

---
 packages/builder/src/components/settings/tabs/index.js | 10 +++++-----
 packages/server/src/api/controllers/user.js            | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/settings/tabs/index.js b/packages/builder/src/components/settings/tabs/index.js
index b723ca68d3..a1d1df38e4 100644
--- a/packages/builder/src/components/settings/tabs/index.js
+++ b/packages/builder/src/components/settings/tabs/index.js
@@ -1,5 +1,5 @@
-export { default as General } from './General.svelte';
-export { default as Integrations } from './Integrations.svelte';
-export { default as Permissions } from './Permissions.svelte';
-export { default as Users } from './Users.svelte';
-export { default as DangerZone } from './DangerZone.svelte';
\ No newline at end of file
+export { default as General } from "./General.svelte"
+export { default as Integrations } from "./Integrations.svelte"
+export { default as Permissions } from "./Permissions.svelte"
+export { default as Users } from "./Users.svelte"
+export { default as DangerZone } from "./DangerZone.svelte"
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index bba4376185..9c983efbbd 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -7,7 +7,7 @@ const {
   ADMIN_LEVEL_ID,
 } = require("../../utilities/accessLevels")
 
-exports.fetch = async function (ctx) {
+exports.fetch = async function(ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const data = await database.query("database/by_type", {
     include_docs: true,
@@ -17,7 +17,7 @@ exports.fetch = async function (ctx) {
   ctx.body = data.rows.map(row => row.doc)
 }
 
-exports.create = async function (ctx) {
+exports.create = async function(ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const appId = (await database.get("_design/database")).metadata.applicationId
   const { username, password, name, accessLevelId } = ctx.request.body
@@ -63,7 +63,7 @@ exports.create = async function (ctx) {
   }
 }
 
-exports.update = async function (ctx) {
+exports.update = async function(ctx) {
   const db = new CouchDB(ctx.user.instanceId)
   const user = ctx.request.body
 
@@ -81,14 +81,14 @@ exports.update = async function (ctx) {
   }
 }
 
-exports.destroy = async function (ctx) {
+exports.destroy = async function(ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   await database.destroy(getUserId(ctx.params.username))
   ctx.message = `User ${ctx.params.username} deleted.`
   ctx.status = 200
 }
 
-exports.find = async function (ctx) {
+exports.find = async function(ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const user = await database.get(getUserId(ctx.params.username))
   ctx.body = {

From bbd030db712b70cdc8a52d70a5b13f07e041bb16 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 29 Jun 2020 10:16:19 +0100
Subject: [PATCH 24/54] bugfix: add inter and roboto mono fonts

---
 .../src/components/userInterface/AppPreview/iframeTemplate.js  | 2 ++
 .../builder/src/components/userInterface/propertyCategories.js | 1 -
 packages/server/src/utilities/builder/index.template.html      | 3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index c9272dddb2..c40df27aee 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -1,5 +1,7 @@
 export default `<html>
   <head>
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
     <style>
       body, html {
         height: 100%!important;
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 17c163ae69..d3605210e9 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -352,7 +352,6 @@ export const typography = [
       "Inter",
       "Lucida Sans Unicode",
       "Open Sans",
-      "Playfair",
       "Roboto",
       "Roboto Mono",
       "Times New Roman",
diff --git a/packages/server/src/utilities/builder/index.template.html b/packages/server/src/utilities/builder/index.template.html
index 91b33cb284..33a7d104ec 100644
--- a/packages/server/src/utilities/builder/index.template.html
+++ b/packages/server/src/utilities/builder/index.template.html
@@ -31,6 +31,9 @@
     <link rel='stylesheet' href='/assets{{ pageStyle }}'>
     {{ /if }}
 
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
+
     <script src='/assets/clientFrontendDefinition.js'></script>
     <script src='/assets/budibase-client.js'></script>
 

From d284dd0b025a573d443dba120ceffa40ce5dd050 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 29 Jun 2020 13:14:15 +0200
Subject: [PATCH 25/54] fix wrong stuff coming back after updating user

---
 .../src/components/settings/tabs/Users.svelte  |  4 +++-
 packages/server/src/api/controllers/user.js    | 18 +++++++-----------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/settings/tabs/Users.svelte b/packages/builder/src/components/settings/tabs/Users.svelte
index 3e54df6597..7befa25da9 100644
--- a/packages/builder/src/components/settings/tabs/Users.svelte
+++ b/packages/builder/src/components/settings/tabs/Users.svelte
@@ -27,7 +27,9 @@
 
   // Update user!
   async function updateUser(event) {
-    const response = await api.put(`/api/users`, event.detail)
+    let data = event.detail
+    delete data.password
+    const response = await api.put(`/api/users`, data)
     const users = await response.json()
     backendUiStore.update(state => {
       state.users = users
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index 9c983efbbd..0c95923f29 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -63,32 +63,28 @@ exports.create = async function(ctx) {
   }
 }
 
-exports.update = async function(ctx) {
+exports.update = async function (ctx) {
   const db = new CouchDB(ctx.user.instanceId)
   const user = ctx.request.body
 
   const response = await db.put(user)
   user._rev = response.rev
 
+  console.log(response)
+
   ctx.status = 200
-  ctx.body = {
-    message: `User ${ctx.request.body.username} updated successfully.`,
-    user: {
-      ...user,
-      _rev: response.rev,
-      _id: response.id,
-    },
-  }
+  ctx.message = `User ${ctx.request.body.username} updated successfully.`
+  ctx.body = response
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   await database.destroy(getUserId(ctx.params.username))
   ctx.message = `User ${ctx.params.username} deleted.`
   ctx.status = 200
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const user = await database.get(getUserId(ctx.params.username))
   ctx.body = {

From ba3046a1ca4c0328f19607f7b4245872190f6541 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 29 Jun 2020 13:24:05 +0200
Subject: [PATCH 26/54] remove console log

---
 packages/server/src/api/controllers/user.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index 0c95923f29..92405c22f3 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -63,28 +63,26 @@ exports.create = async function(ctx) {
   }
 }
 
-exports.update = async function (ctx) {
+exports.update = async function(ctx) {
   const db = new CouchDB(ctx.user.instanceId)
   const user = ctx.request.body
 
   const response = await db.put(user)
   user._rev = response.rev
 
-  console.log(response)
-
   ctx.status = 200
   ctx.message = `User ${ctx.request.body.username} updated successfully.`
   ctx.body = response
 }
 
-exports.destroy = async function (ctx) {
+exports.destroy = async function(ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   await database.destroy(getUserId(ctx.params.username))
   ctx.message = `User ${ctx.params.username} deleted.`
   ctx.status = 200
 }
 
-exports.find = async function (ctx) {
+exports.find = async function(ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const user = await database.get(getUserId(ctx.params.username))
   ctx.body = {

From 7c2b5e185878ec3c22d6507b4b6870bac492f87a Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 29 Jun 2020 13:31:51 +0200
Subject: [PATCH 27/54] bump bbui version and fix disabled Select component in
 user row component

---
 packages/builder/package.json                           | 4 ++--
 packages/builder/src/components/settings/UserRow.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index dd449b2256..d0eb37220f 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -55,7 +55,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.13.0",
+    "@budibase/bbui": "^1.14.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
@@ -108,4 +108,4 @@
     "svelte-jester": "^1.0.6"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
+}
\ No newline at end of file
diff --git a/packages/builder/src/components/settings/UserRow.svelte b/packages/builder/src/components/settings/UserRow.svelte
index eff86f55cb..4602ad1709 100644
--- a/packages/builder/src/components/settings/UserRow.svelte
+++ b/packages/builder/src/components/settings/UserRow.svelte
@@ -14,7 +14,7 @@
     bind:value={user.username}
     name="Name"
     placeholder="Username" />
-  <Select disabled={editMode} bind:value={user.accessLevelId} thin>
+  <Select disabled={!editMode} bind:value={user.accessLevelId} thin>
     <option value="ADMIN">Admin</option>
     <option value="POWER_USER">Power User</option>
   </Select>

From e66f8c8ca4c81623d5dc166305d6281fdc273c09 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 29 Jun 2020 13:38:08 +0100
Subject: [PATCH 28/54] Focus menu on open and key events

---
 .../userInterface/OptionSelect.svelte         | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 202cd10a19..df987af0c3 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -26,20 +26,22 @@
 
   onMount(() => {
     if (select) {
-      select.addEventListener("keydown", addSelectKeyEvents)
+      select.addEventListener("keydown", handleEnter)
+      selectMenu.addEventListener("keydown", handleEscape)
     }
 
-    containerEl = document.querySelector(".design-view-property-groups")
 
     return () => {
-      select.removeEventListener("keydown", addSelectKeyEvents)
-      containerEl.removeEventListener("scroll", disableScroll)
+      select.removeEventListener("keydown", handleEnter)
+      selectMenu.removeEventListener("keydown", handleEscape)
     }
 
   })
 
-  function disableScroll(e) {
-    containerEl.scrollTop = scrollTop 
+  function handleEscape(e) {
+    if(open && e.key === "Escape") {
+        toggleSelect(false)
+    }
   }
 
   function getDimensions() {
@@ -61,28 +63,19 @@
     dimensions = {[positionSide]: y, left}
   }
 
-  function addSelectKeyEvents(e) {
-    if (e.key === "Enter") {
-      if (!open) {
+  function handleEnter(e) {
+    if (!open && e.key === "Enter") {
         toggleSelect(true)
-      }
-    } else if (e.key === "Escape") {
-      if (open) {
-        toggleSelect(false)
-      }
-    }
+    } 
   }
 
   function toggleSelect(isOpen) {
     getDimensions()
     if (isOpen) {
       icon.style.transform = "rotate(180deg)"
-      let containerWidth = containerEl.offsetWidth
-      scrollTop = containerEl.scrollTop
-      containerEl.addEventListener("scroll", disableScroll)
+      selectMenu.focus()
     } else {
       icon.style.transform = "rotate(0deg)"
-      containerEl.removeEventListener("scroll", disableScroll)
     }
     open = isOpen    
   }
@@ -121,6 +114,7 @@
   </div>
   <Portal>
     <div
+      tabindex="0"
       bind:this={selectMenu}
       style={menuStyle}
       class="bb-select-menu"
@@ -204,6 +198,7 @@
   .bb-select-menu {
     position: absolute;
     display: flex;
+    outline: none;
     box-sizing: border-box;
     flex-direction: column;
     opacity: 0;

From eec2c4de7cb90536f597207ba76b4027a1d240cb Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 29 Jun 2020 15:55:12 +0200
Subject: [PATCH 29/54] =?UTF-8?q?correct=20put=20call=20to=20not=20remove?=
 =?UTF-8?q?=20password=20=F0=9F=98=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../builder/src/components/settings/UserRow.svelte |  2 +-
 packages/server/src/api/controllers/user.js        | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/settings/UserRow.svelte b/packages/builder/src/components/settings/UserRow.svelte
index 4602ad1709..1d7059552b 100644
--- a/packages/builder/src/components/settings/UserRow.svelte
+++ b/packages/builder/src/components/settings/UserRow.svelte
@@ -9,7 +9,7 @@
 
 <div class="inputs">
   <Input
-    disabled={!editMode}
+    disabled
     thin
     bind:value={user.username}
     name="Name"
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index 92405c22f3..e867f45ba5 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -7,7 +7,7 @@ const {
   ADMIN_LEVEL_ID,
 } = require("../../utilities/accessLevels")
 
-exports.fetch = async function(ctx) {
+exports.fetch = async function (ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const data = await database.query("database/by_type", {
     include_docs: true,
@@ -17,7 +17,7 @@ exports.fetch = async function(ctx) {
   ctx.body = data.rows.map(row => row.doc)
 }
 
-exports.create = async function(ctx) {
+exports.create = async function (ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const appId = (await database.get("_design/database")).metadata.applicationId
   const { username, password, name, accessLevelId } = ctx.request.body
@@ -63,11 +63,13 @@ exports.create = async function(ctx) {
   }
 }
 
-exports.update = async function(ctx) {
+exports.update = async function (ctx) {
   const db = new CouchDB(ctx.user.instanceId)
   const user = ctx.request.body
+  const dbUser = db.get(ctx.request.body._id)
+  const newData = { ...dbUser, ...user }
 
-  const response = await db.put(user)
+  const response = await db.put(newData)
   user._rev = response.rev
 
   ctx.status = 200
@@ -75,14 +77,14 @@ exports.update = async function(ctx) {
   ctx.body = response
 }
 
-exports.destroy = async function(ctx) {
+exports.destroy = async function (ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   await database.destroy(getUserId(ctx.params.username))
   ctx.message = `User ${ctx.params.username} deleted.`
   ctx.status = 200
 }
 
-exports.find = async function(ctx) {
+exports.find = async function (ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const user = await database.get(getUserId(ctx.params.username))
   ctx.body = {

From 5530e8f2313e205da8cb24026c8cd3af4cb4cdd7 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 29 Jun 2020 15:56:41 +0200
Subject: [PATCH 30/54] lint fix

---
 packages/server/src/api/controllers/user.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index e867f45ba5..d4525974f9 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -7,7 +7,7 @@ const {
   ADMIN_LEVEL_ID,
 } = require("../../utilities/accessLevels")
 
-exports.fetch = async function (ctx) {
+exports.fetch = async function(ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const data = await database.query("database/by_type", {
     include_docs: true,
@@ -17,7 +17,7 @@ exports.fetch = async function (ctx) {
   ctx.body = data.rows.map(row => row.doc)
 }
 
-exports.create = async function (ctx) {
+exports.create = async function(ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const appId = (await database.get("_design/database")).metadata.applicationId
   const { username, password, name, accessLevelId } = ctx.request.body
@@ -63,7 +63,7 @@ exports.create = async function (ctx) {
   }
 }
 
-exports.update = async function (ctx) {
+exports.update = async function(ctx) {
   const db = new CouchDB(ctx.user.instanceId)
   const user = ctx.request.body
   const dbUser = db.get(ctx.request.body._id)
@@ -77,14 +77,14 @@ exports.update = async function (ctx) {
   ctx.body = response
 }
 
-exports.destroy = async function (ctx) {
+exports.destroy = async function(ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   await database.destroy(getUserId(ctx.params.username))
   ctx.message = `User ${ctx.params.username} deleted.`
   ctx.status = 200
 }
 
-exports.find = async function (ctx) {
+exports.find = async function(ctx) {
   const database = new CouchDB(ctx.user.instanceId)
   const user = await database.get(getUserId(ctx.params.username))
   ctx.body = {

From 1acb04a46763756d6e74a5936ba3ba5316b02d49 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 29 Jun 2020 15:32:37 +0100
Subject: [PATCH 31/54] Only mount portal on open

---
 .../userInterface/OptionSelect.svelte         | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index df987af0c3..26f061cb58 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -27,13 +27,10 @@
   onMount(() => {
     if (select) {
       select.addEventListener("keydown", handleEnter)
-      selectMenu.addEventListener("keydown", handleEscape)
     }
 
-
     return () => {
       select.removeEventListener("keydown", handleEnter)
-      selectMenu.removeEventListener("keydown", handleEscape)
     }
 
   })
@@ -72,12 +69,11 @@
   function toggleSelect(isOpen) {
     getDimensions()
     if (isOpen) {
-      icon.style.transform = "rotate(180deg)"
-      selectMenu.focus()
+      icon.style.transform = "rotate(180deg)"      
     } else {
       icon.style.transform = "rotate(0deg)"
     }
-    open = isOpen    
+    open = isOpen
   }
 
 
@@ -99,6 +95,10 @@
     ? options.find(o => o.value === value)
     : {}
 
+  $: if(open && selectMenu) {
+    selectMenu.focus()
+  }
+
   $: displayLabel =
     selectedOption && selectedOption.label ? selectedOption.label : value || ""
 </script>
@@ -112,13 +112,15 @@
     <span>{displayLabel}</span>
     <i bind:this={icon} class="ri-arrow-down-s-fill" />
   </div>
+  {#if open}
   <Portal>
     <div
       tabindex="0"
+      class:open
       bind:this={selectMenu}
       style={menuStyle}
-      class="bb-select-menu"
-      class:open>
+      on:keydown={handleEscape}
+      class="bb-select-menu">
       <ul>
         {#if isOptionsObject}
           {#each options as { value: v, label }}
@@ -141,11 +143,10 @@
         {/if}
       </ul>
     </div>
+   <div on:click|self={() => toggleSelect(false)} class="overlay" />
   </Portal>
+  {/if}
 </div>
-{#if open}
-  <div on:click|self={() => toggleSelect(false)} class="overlay" />
-{/if}
 
 <style>
   .overlay {

From b7285e010879ff897e9567d9982559a714f47cbb Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 29 Jun 2020 16:32:51 +0100
Subject: [PATCH 32/54] WIP Form Component Design Update

Wide form added
Boolean button fixed
---
 .../userInterface/temporaryPanelStructure.js  |  51 +++++--
 packages/standard-components/components.json  |   7 +
 .../src/DataFormWide.svelte                   | 142 ++++++++++++++++++
 packages/standard-components/src/index.js     |   1 +
 4 files changed, 189 insertions(+), 12 deletions(-)
 create mode 100644 packages/standard-components/src/DataFormWide.svelte

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index e2c4044fb6..764daef972 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -321,17 +321,44 @@ export default {
           name: "Form",
           description: "A component that generates a form from your data.",
           icon: "ri-file-edit-fill",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Model", key: "model", control: ModelSelect }],
-          },
-          _component: "@budibase/standard-components/dataform",
-          template: {
-            component: "@budibase/materialdesign-components/Form",
-            description: "Form for saving a record",
-            name: "@budibase/materialdesign-components/recordForm",
-          },
-          children: [],
+          commonProps: {},
+          children: [
+            {
+              _component: "@budibase/standard-components/dataform",
+              name: "Form Basic",
+              icon: "ri-file-edit-fill",
+              properties: {
+                design: { ...all },
+                settings: [
+                  {
+                    label: "Model",
+                    key: "model",
+                    control: ModelSelect,
+                  },
+                ],
+              },
+              template: {
+                component: "@budibase/materialdesign-components/Form",
+                description: "Form for saving a record",
+                name: "@budibase/materialdesign-components/recordForm",
+              },
+            },
+            {
+              _component: "@budibase/standard-components/dataformwide",
+              name: "Form Wide",
+              icon: "ri-file-edit-fill",
+              properties: {
+                design: { ...all },
+                settings: [
+                  {
+                    label: "Model",
+                    key: "model",
+                    control: ModelSelect,
+                  },
+                ],
+              },
+            },
+          ],
         },
         {
           name: "Chart",
@@ -431,4 +458,4 @@ export default {
       ],
     },
   ],
-}
+}
\ No newline at end of file
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index c4c0246672..8df7756499 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -209,6 +209,13 @@
 			"model": "models"
 		}
 	},
+	"dataformwide": {
+		"description": "an HTML table that fetches data from a model or view and displays it.",
+		"data": true,
+		"props": {
+			"model": "models"
+		}
+	},
 	"datalist": {
 		"description": "A configurable data list that attaches to your backend models.",
 		"data": true,
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
new file mode 100644
index 0000000000..44c7aef4e2
--- /dev/null
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -0,0 +1,142 @@
+<script>
+  import { onMount } from "svelte"
+  export let _bb
+  export let model
+
+  const TYPE_MAP = {
+    string: "text",
+    boolean: "checkbox",
+    number: "number"
+  }
+
+  let username
+  let password
+  let newModel = {
+    modelId: model,
+  }
+  let store = _bb.store
+  let schema = {}
+  let modelDef = {}
+  $: if (model && model.length !== 0) {
+    fetchModel()
+  }
+  $: fields = Object.keys(schema)
+  async function fetchModel() {
+    const FETCH_MODEL_URL = `/api/models/${model}`
+    const response = await _bb.api.get(FETCH_MODEL_URL)
+    modelDef = await response.json()
+    schema = modelDef.schema
+  }
+  async function save() {
+    const SAVE_RECORD_URL = `/api/${model}/records`
+    const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
+    const json = await response.json()
+    store.update(state => {
+      state[model] = state[model] ? [...state[model], json] : [json]
+      return state
+    })
+  }
+  const handleInput = field => event => {
+    let value
+    if (event.target.type === "checkbox") {
+      value = event.target.checked
+      newModel[field] = value
+      return
+    }
+    if (event.target.type === "number") {
+      value = parseInt(event.target.value)
+      newModel[field] = value
+      return
+    }
+    value = event.target.value
+    newModel[field] = value
+  }
+</script>
+<form class="form" on:submit|preventDefault>
+  <h1>{modelDef.name} Form</h1>
+  <hr />
+  <div class="form-content">
+    {#each fields as field}
+      <div class="form-item">
+        <label class="form-label" for="form-stacked-text">{field}</label>
+        <input
+          class="input"
+          placeholder={field}
+          type={TYPE_MAP[schema[field].type]}
+          on:change={handleInput(field)} />
+      </div>
+      <hr />
+    {/each}
+    <div class="button-block">
+      <button on:click={save}>Submit Form</button>
+    </div>
+  </div>
+</form>
+<style>
+  .form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: auto;
+    padding: 40px;
+  }
+  .form-content {
+    margin-bottom: 20px;
+  }
+  .input {
+    height: 40px;
+    border-radius: 5px;
+    border: 1px solid #e6e6e6;
+    padding: 6px 12px 6px 12px;
+    font-size: 16px;
+  }
+    .input::placeholder {
+      color: #cccccc;
+    }
+  .form-item {
+    display: grid;
+    grid-template-columns: 30% 1fr;
+    margin-bottom: 16px;
+    align-items: center;
+    gap: 1em;
+  }
+
+  hr {
+    border: 1px solid #f5f5f5;
+    margin: 40px 0px;
+  }
+  hr:nth-last-child(2) {
+    border: 1px solid #f5f5f5;
+    margin: 40px 0px;
+  }
+  .button-block {
+    display: flex;
+    justify-content: flex-end;
+  }
+  button {
+    font-size: 16px;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    color: white;
+    background-color: #393c44;
+    outline: none;
+    height: 40px;
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    overflow: hidden;
+    outline: none;
+    user-select: none;
+    white-space: nowrap;
+    text-align: center;
+  }
+  button:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
+  }
+
+input[type=checkbox] {
+    transform: scale(2);
+    cursor: pointer;
+}
+
+</style> 
\ No newline at end of file
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 24342066e8..37d6abab74 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -16,6 +16,7 @@ export { default as icon } from "./Icon.svelte"
 export { default as Navigation } from "./Navigation.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"
 export { default as datalist } from "./DataList.svelte"
 export { default as list } from "./List.svelte"

From 947dd5d05f2e96d12af7099cc12e4ed39c3df523 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 29 Jun 2020 17:20:35 +0100
Subject: [PATCH 33/54] bugfix: design category closes as another opens

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

diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 5cc65ec214..408dc54d06 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -11,6 +11,7 @@
 
   let selectedCategory = "normal"
   let propGroup = null
+  let currentGroup
 
   const getProperties = name => panelDefinition[name]
 
@@ -33,6 +34,7 @@
   ]
 
   $: propertyGroupNames = Object.keys(panelDefinition)
+  
 </script>
 
 <div class="design-view-container">
@@ -51,7 +53,9 @@
             styleCategory={selectedCategory}
             {onStyleChanged}
             {componentDefinition}
-            {componentInstance} />
+            {componentInstance}
+            open={currentGroup === groupName}
+            on:open={() => currentGroup = groupName} />
         {/each}
       {:else}
         <div class="no-design">
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index b181b406a7..511807b2e6 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -8,11 +8,12 @@
   export let properties = []
   export let componentInstance = {}
   export let onStyleChanged = () => {}
+  export let open = false
 
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
-<DetailSummary {name}>
+<DetailSummary {name} on:open show={open} >
   {#each properties as props}
     <PropertyControl
       label={props.label}

From 6cdfd547c66e0d89dfb686c33b99ff79671a10e7 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 29 Jun 2020 17:22:00 +0100
Subject: [PATCH 34/54] rollup: added relative path to bbui (assumes same root
 folder as budibase)

---
 packages/builder/rollup.config.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js
index 08973e6195..575939ac19 100644
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@@ -185,7 +185,11 @@ export default {
     svelte({
       // enable run-time checks when not in production
       dev: !production,
-      include: ["src/**/*.svelte", "node_modules/**/*.svelte"],
+      include: [
+        "src/**/*.svelte",
+        "node_modules/**/*.svelte",
+        "../../../bbui/src/**/*.svelte",
+      ],
       // we'll extract any component CSS out into
       // a separate file — better for performance
       css: css => {

From c015544959fe2b5e62c2716945b1411556e72098 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 29 Jun 2020 19:54:30 +0100
Subject: [PATCH 35/54] Updated the basic form with boolean and select fix

---
 .../standard-components/src/DataForm.svelte   | 70 ++++++++++++++++---
 .../src/DataFormWide.svelte                   | 57 +++++++++++----
 2 files changed, 103 insertions(+), 24 deletions(-)

diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 1510110ba9..938077371b 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -4,6 +4,12 @@
   export let _bb
   export let model
 
+  const TYPE_MAP = {
+    string: "text",
+    boolean: "checkbox",
+    number: "number"
+  }
+
   let username
   let password
   let newModel = {
@@ -59,15 +65,23 @@
 
 <form class="form" on:submit|preventDefault>
   <h1>{modelDef.name} Form</h1>
+  <hr />
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
-        <input
-          class="input"
-          placeholder={field}
-          type={schema[field].type === 'string' ? 'text' : schema[field].type}
-          on:change={handleInput(field)} />
+        {#if schema[field].type === "string" && schema[field].constraints.inclusion}
+          <select on:blur={handleInput(field)}>
+            {#each schema[field].constraints.inclusion as opt}
+            <option>{opt}</option>
+            {/each}
+          </select>
+        {:else}
+          <input
+            class="input"
+            type={TYPE_MAP[schema[field].type]}
+            on:change={handleInput(field)} />
+        {/if}
       </div>
       <hr />
     {/each}
@@ -142,9 +156,45 @@
     text-align: center;
   }
 
-  button:hover {
-    background-color: white;
-    border-color: #393c44;
-    color: #393c44;
-  }
+  
+button:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
+}
+
+input[type=checkbox] {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  margin: 0;
+  vertical-align: bottom;
+  position: relative;
+  top: -1px;
+  *overflow: hidden;
+
+}
+
+select::-ms-expand {
+  display: none;
+}
+select {
+  display: inline-block;
+  cursor: pointer;
+  align-items: baseline;
+  box-sizing: border-box;
+  padding: 1em 1em;
+  border: 1px solid #eaeaea;
+  border-radius: 5px;
+  font: inherit;
+  line-height: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: right 17px top 1.5em, right 10px top 1.5em;
+  background-size: 7px 7px, 7px 7px;
+}
+
+
 </style>
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 44c7aef4e2..78cc1f4dc2 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -59,11 +59,18 @@
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
-        <input
-          class="input"
-          placeholder={field}
-          type={TYPE_MAP[schema[field].type]}
-          on:change={handleInput(field)} />
+        {#if schema[field].type === "string" && schema[field].constraints.inclusion}
+          <select on:blur={handleInput(field)}>
+            {#each schema[field].constraints.inclusion as opt}
+            <option>{opt}</option>
+            {/each}
+          </select>
+        {:else}
+          <input
+            class="input"
+            type={TYPE_MAP[schema[field].type]}
+            on:change={handleInput(field)} />
+        {/if}
       </div>
       <hr />
     {/each}
@@ -84,15 +91,12 @@
     margin-bottom: 20px;
   }
   .input {
-    height: 40px;
     border-radius: 5px;
     border: 1px solid #e6e6e6;
-    padding: 6px 12px 6px 12px;
+    padding: 1em;
     font-size: 16px;
   }
-    .input::placeholder {
-      color: #cccccc;
-    }
+
   .form-item {
     display: grid;
     grid-template-columns: 30% 1fr;
@@ -119,7 +123,7 @@
     box-sizing: border-box;
     border-radius: 4px;
     color: white;
-    background-color: #393c44;
+    background-color: black;
     outline: none;
     height: 40px;
     cursor: pointer;
@@ -130,13 +134,38 @@
     white-space: nowrap;
     text-align: center;
   }
-  button:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
-  }
+
+button:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
+}
 
 input[type=checkbox] {
     transform: scale(2);
     cursor: pointer;
 }
 
+select::-ms-expand {
+  display: none;
+}
+select {
+  cursor: pointer;
+  display: inline-block;
+  align-items: baseline;
+  box-sizing: border-box;
+  padding: 1em 1em;
+  border: 1px solid #eaeaea;
+  border-radius: 5px;
+  font: inherit;
+  line-height: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: right 17px top 1.5em, right 10px top 1.5em;
+  background-size: 7px 7px, 7px 7px;
+}
+
+
 </style> 
\ No newline at end of file

From 66a7d24ea2f36e5e8d8b38a4e71c5f6dc269b2ff Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 29 Jun 2020 19:55:27 +0100
Subject: [PATCH 36/54] Formatting and linting done

---
 .../userInterface/temporaryPanelStructure.js  |  2 +-
 .../standard-components/src/DataForm.svelte   | 82 +++++++++----------
 .../src/DataFormWide.svelte                   | 68 +++++++--------
 3 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 764daef972..ae39ce3ee2 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -458,4 +458,4 @@ export default {
       ],
     },
   ],
-}
\ No newline at end of file
+}
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 938077371b..389ce0ecd2 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -7,7 +7,7 @@
   const TYPE_MAP = {
     string: "text",
     boolean: "checkbox",
-    number: "number"
+    number: "number",
   }
 
   let username
@@ -70,10 +70,10 @@
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
-        {#if schema[field].type === "string" && schema[field].constraints.inclusion}
+        {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
           <select on:blur={handleInput(field)}>
             {#each schema[field].constraints.inclusion as opt}
-            <option>{opt}</option>
+              <option>{opt}</option>
             {/each}
           </select>
         {:else}
@@ -156,45 +156,43 @@
     text-align: center;
   }
 
-  
-button:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
-}
-
-input[type=checkbox] {
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  margin: 0;
-  vertical-align: bottom;
-  position: relative;
-  top: -1px;
-  *overflow: hidden;
-
-}
-
-select::-ms-expand {
-  display: none;
-}
-select {
-  display: inline-block;
-  cursor: pointer;
-  align-items: baseline;
-  box-sizing: border-box;
-  padding: 1em 1em;
-  border: 1px solid #eaeaea;
-  border-radius: 5px;
-  font: inherit;
-  line-height: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: right 17px top 1.5em, right 10px top 1.5em;
-  background-size: 7px 7px, 7px 7px;
-}
+  button:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
 
+  input[type="checkbox"] {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    margin: 0;
+    vertical-align: bottom;
+    position: relative;
+    top: -1px;
+    *overflow: hidden;
+  }
 
+  select::-ms-expand {
+    display: none;
+  }
+  select {
+    display: inline-block;
+    cursor: pointer;
+    align-items: baseline;
+    box-sizing: border-box;
+    padding: 1em 1em;
+    border: 1px solid #eaeaea;
+    border-radius: 5px;
+    font: inherit;
+    line-height: inherit;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+      linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: right 17px top 1.5em, right 10px top 1.5em;
+    background-size: 7px 7px, 7px 7px;
+  }
 </style>
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 78cc1f4dc2..f712c787de 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -6,7 +6,7 @@
   const TYPE_MAP = {
     string: "text",
     boolean: "checkbox",
-    number: "number"
+    number: "number",
   }
 
   let username
@@ -52,6 +52,7 @@
     newModel[field] = value
   }
 </script>
+
 <form class="form" on:submit|preventDefault>
   <h1>{modelDef.name} Form</h1>
   <hr />
@@ -59,10 +60,10 @@
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
-        {#if schema[field].type === "string" && schema[field].constraints.inclusion}
+        {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
           <select on:blur={handleInput(field)}>
             {#each schema[field].constraints.inclusion as opt}
-            <option>{opt}</option>
+              <option>{opt}</option>
             {/each}
           </select>
         {:else}
@@ -79,6 +80,7 @@
     </div>
   </div>
 </form>
+
 <style>
   .form {
     display: flex;
@@ -135,37 +137,37 @@
     text-align: center;
   }
 
-button:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
-}
+  button:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
 
-input[type=checkbox] {
+  input[type="checkbox"] {
     transform: scale(2);
     cursor: pointer;
-}
+  }
 
-select::-ms-expand {
-  display: none;
-}
-select {
-  cursor: pointer;
-  display: inline-block;
-  align-items: baseline;
-  box-sizing: border-box;
-  padding: 1em 1em;
-  border: 1px solid #eaeaea;
-  border-radius: 5px;
-  font: inherit;
-  line-height: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: right 17px top 1.5em, right 10px top 1.5em;
-  background-size: 7px 7px, 7px 7px;
-}
-
-
-</style> 
\ No newline at end of file
+  select::-ms-expand {
+    display: none;
+  }
+  select {
+    cursor: pointer;
+    display: inline-block;
+    align-items: baseline;
+    box-sizing: border-box;
+    padding: 1em 1em;
+    border: 1px solid #eaeaea;
+    border-radius: 5px;
+    font: inherit;
+    line-height: inherit;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+      linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: right 17px top 1.5em, right 10px top 1.5em;
+    background-size: 7px 7px, 7px 7px;
+  }
+</style>

From 281fbec596d540af344f3891e82f280f8e243b5a Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 29 Jun 2020 20:28:53 +0100
Subject: [PATCH 37/54] fix: changing screen: url gets `undefined` in path

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

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 6de3fe11c2..fbe9121623 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -24,7 +24,7 @@
 
   const changeScreen = screen => {
     store.setCurrentScreen(screen.props._instanceName)
-    $goto(`./:page/${screen.title}`)
+    $goto(`./:page/${screen.props._instanceName}`)
   }
 </script>
 

From c5c21d692926c46ef9e162d9263c98be75ffb279 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 29 Jun 2020 21:26:16 +0100
Subject: [PATCH 38/54] when navigating between fronend & backend, you return
 to the last url you worked on

---
 .../builder/src/pages/[application]/_reset.svelte | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index d5c0ee5576..9528f25557 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -5,7 +5,7 @@
   import { get } from "builderStore/api"
 
   import { fade } from "svelte/transition"
-  import { isActive, goto, layout } from "@sveltech/routify"
+  import { isActive, goto, layout, url } from "@sveltech/routify"
 
   import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
   import IconButton from "components/common/IconButton.svelte"
@@ -27,6 +27,17 @@
       throw new Error(pkg)
     }
   }
+
+  const topItemNavigate = path => () => {
+    const activeTopNav = $layout.children.find(c => $isActive(c.path))
+    if (!activeTopNav) return
+    store.update(state => {
+      if (!state.previousTopNavPath) state.previousTopNavPath = {}
+      state.previousTopNavPath[activeTopNav.path] = window.location.pathname.replace("/_builder", "")
+      $goto(state.previousTopNavPath[path] || path)
+      return state
+    })
+  }
 </script>
 
 <Modal>
@@ -46,7 +57,7 @@
           <span
             class:active={$isActive(path)}
             class="topnavitem"
-            on:click={() => $goto(path)}>
+            on:click={topItemNavigate(path)}>
             {title}
           </span>
         {/each}

From bd1f2819083e2896c130b6f194842508d2a75fc2 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 30 Jun 2020 06:27:23 +0100
Subject: [PATCH 39/54] some explanation to to confusing code

---
 packages/builder/src/pages/[application]/_reset.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 9528f25557..a75cfa0b9e 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -28,6 +28,11 @@
     }
   }
 
+  // handles navigation between frontend, backend, workflow.
+  // this remembers your last place on each of the sections
+  // e.g. if one of your screens is selected on front end, then
+  // you browse to backend, when you click fronend, you will be
+  // brought back to the same screen
   const topItemNavigate = path => () => {
     const activeTopNav = $layout.children.find(c => $isActive(c.path))
     if (!activeTopNav) return

From 69f57a211c11c72c7de2dfe599ad92231b02fdc3 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 30 Jun 2020 09:48:48 +0100
Subject: [PATCH 40/54] fix: interpolation on property binding

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

diff --git a/packages/client/src/state/stateManager.js b/packages/client/src/state/stateManager.js
index 5c5f198956..ac417f32fa 100644
--- a/packages/client/src/state/stateManager.js
+++ b/packages/client/src/state/stateManager.js
@@ -59,7 +59,7 @@ const _setup = ({ handlerTypes, getCurrentState, bb, store }) => node => {
     const propValue = props[propName]
 
     // A little bit of a hack - won't bind if the string doesn't start with {{
-    const isBound = typeof propValue === "string" && propValue.startsWith("{{")
+    const isBound = typeof propValue === "string" && propValue.includes("{{")
 
     if (isBound) {
       initialProps[propName] = mustache.render(propValue, {

From 3c17af904dcecf1244e34a18837afb29afcfb57a Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 30 Jun 2020 10:02:27 +0100
Subject: [PATCH 41/54] bump bbui version

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

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 835a9812af..ba1ff617e5 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -55,7 +55,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.14.0",
+    "@budibase/bbui": "^1.15.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",

From 94c1f16aa73c31dce653608dc872c2950ba83bb0 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 30 Jun 2020 10:39:48 +0100
Subject: [PATCH 42/54] fix: frontend not loading when naving to component

---
 .../pages/[application]/frontend/[page]/[screen]/_layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
index 8dcdc0ed41..f35626a1f5 100644
--- a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
@@ -14,7 +14,7 @@
     if ($leftover) {
       // Get the correct screen children.
       const screenChildren = $store.pages[$params.page]._screens.find(
-        screen => screen.name === $params.screen
+        screen => screen.props._instanceName === $params.screen
       ).props._children
       findComponent(componentIds, screenChildren)
     }

From 90c70e85ee33786b7158771897797173dae3741b Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 30 Jun 2020 13:08:58 +0100
Subject: [PATCH 43/54] Colorpicker - Portal and Centering

---
 .../Colorpicker/Colorpicker.svelte            | 146 ++++++++++--------
 .../Colorpicker/Colorpreview.svelte           | 116 ++++++--------
 .../userInterface/Colorpicker/Portal.svelte   |  37 +++++
 .../[application]/frontend/_layout.svelte     |   1 -
 4 files changed, 168 insertions(+), 132 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Portal.svelte

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 2ae31385aa..27b5e20b5b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -13,16 +13,18 @@
   import Palette from "./Palette.svelte"
   import ButtonGroup from "./ButtonGroup.svelte"
   import Input from "./Input.svelte"
+  import Portal from "./Portal.svelte"
 
   export let value = "#3ec1d3ff"
+  export let open = false;
   export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
   export let disableSwatches = false
   export let format = "hexa"
-  export let open = false
-
+  export let style = ""
   export let pickerHeight = 0
   export let pickerWidth = 0
 
+  let colorPicker = null
   let adder = null
 
   let h = null
@@ -38,6 +40,10 @@
       getRecentColors()
     }
 
+    if(colorPicker) {
+      colorPicker.focus()
+    }
+
     if (format) {
       convertAndSetHSVA()
     }
@@ -50,6 +56,12 @@
     }
   }
 
+  function handleEscape(e) {
+    if(open && e.key === "Escape") {
+      open = false
+    }
+  }
+
   function setRecentColor(color) {
     if (swatches.length === 12) {
       swatches.splice(0, 1)
@@ -145,85 +157,97 @@
   }
 
   $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
-  $: style = buildStyle({ background: value, border })
+  $: selectedColorStyle = buildStyle({ background: value, border })
   $: shrink = swatches.length > 0
+  
 </script>
 
-<div
-  class="colorpicker-container"
-  bind:clientHeight={pickerHeight}
-  bind:clientWidth={pickerWidth}>
 
-  <div class="palette-panel">
-    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-  </div>
+<Portal>
+  <div
+    class="colorpicker-container"
+    transition:fade
+    bind:this={colorPicker}
+    {style}
+    tabindex="0"
+    on:keydown={handleEscape}
+    bind:clientHeight={pickerHeight}
+    bind:clientWidth={pickerWidth}>
 
-  <div class="control-panel">
-    <div class="alpha-hue-panel">
-      <div>
-        <CheckedBackground borderRadius="50%" backgroundSize="8px">
-          <div class="selected-color" {style} />
-        </CheckedBackground>
-      </div>
-      <div>
-        <Slider
-          type="hue"
-          value={h}
-          on:change={hue => setHue(hue.detail)}
-          on:dragend={dispatchValue} />
+    <div class="palette-panel">
+      <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+    </div>
 
-        <CheckedBackground borderRadius="10px" backgroundSize="7px">
+    <div class="control-panel">
+      <div class="alpha-hue-panel">
+        <div>
+          <CheckedBackground borderRadius="50%" backgroundSize="8px">
+            <div class="selected-color" style={selectedColorStyle} />
+          </CheckedBackground>
+        </div>
+        <div>
           <Slider
-            type="alpha"
-            value={a}
-            on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
+            type="hue"
+            value={h}
+            on:change={hue => setHue(hue.detail)}
             on:dragend={dispatchValue} />
-        </CheckedBackground>
 
+          <CheckedBackground borderRadius="10px" backgroundSize="7px">
+            <Slider
+              type="alpha"
+              value={a}
+              on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
+              on:dragend={dispatchValue} />
+          </CheckedBackground>
+
+        </div>
+      </div>
+
+      {#if !disableSwatches}
+        <div transition:fade class="swatch-panel">
+          {#if swatches.length > 0}
+            {#each swatches as color, idx}
+              <Swatch
+                {color}
+                on:click={() => applySwatch(color)}
+                on:removeswatch={() => removeSwatch(idx)} />
+            {/each}
+          {/if}
+          {#if swatches.length !== 12}
+            <div
+              bind:this={adder}
+              transition:fade
+              class="adder"
+              on:click={addSwatch}
+              class:shrink>
+              <span>&plus;</span>
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      <div class="format-input-panel">
+        <ButtonGroup {format} onclick={changeFormatAndConvert} />
+        <Input
+          {value}
+          on:input={event => handleColorInput(event.target.value)}
+          on:change={dispatchInputChange} />
       </div>
     </div>
 
-    {#if !disableSwatches}
-      <div transition:fade class="swatch-panel">
-        {#if swatches.length > 0}
-          {#each swatches as color, idx}
-            <Swatch
-              {color}
-              on:click={() => applySwatch(color)}
-              on:removeswatch={() => removeSwatch(idx)} />
-          {/each}
-        {/if}
-        {#if swatches.length !== 12}
-          <div
-            bind:this={adder}
-            transition:fade
-            class="adder"
-            on:click={addSwatch}
-            class:shrink>
-            <span>&plus;</span>
-          </div>
-        {/if}
-      </div>
-    {/if}
-
-    <div class="format-input-panel">
-      <ButtonGroup {format} onclick={changeFormatAndConvert} />
-      <Input
-        {value}
-        on:input={event => handleColorInput(event.target.value)}
-        on:change={dispatchInputChange} />
-    </div>
   </div>
-
-</div>
+</Portal>
 
 <style>
   .colorpicker-container {
+    position: absolute;
+    outline: none;
+    z-index: 3;
     display: flex;
     font-size: 11px;
     font-weight: 400;
     flex-direction: column;
-    /* height: 265px; */
+    margin: 5px 0px;
     height: auto;
     width: 220px;
     background: #ffffff;
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
index 72da43181e..fc85b12f30 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -1,7 +1,7 @@
 <script>
   import Colorpicker from "./Colorpicker.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"
+  import { createEventDispatcher, beforeUpdate } from "svelte"
 
   import { buildStyle } from "./helpers.js"
   import { fade } from "svelte/transition"
@@ -15,7 +15,8 @@
   export let height = "25px"
 
   let format = "hexa"
-  let dimensions = { top: 0, left: 0 }
+  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
+  let positionSide = "top"
   let colorPreview = null
 
   let previewHeight = null
@@ -23,17 +24,8 @@
   let pickerWidth = 0
   let pickerHeight = 0
 
-  let anchorEl = null
-  let parentNodes = []
   let errorMsg = null
 
-  $: previewStyle = buildStyle({ width, height, background: value })
-  $: errorPreviewStyle = buildStyle({ width, height })
-  $: pickerStyle = buildStyle({
-    top: `${dimensions.top}px`,
-    left: `${dimensions.left}px`,
-  })
-
   const dispatch = createEventDispatcher()
 
   beforeUpdate(() => {
@@ -46,25 +38,6 @@
     }
   })
 
-  afterUpdate(() => {
-    if (colorPreview && colorPreview.offsetParent && !anchorEl) {
-      //Anchor relative to closest positioned ancestor element. If none, then anchor to body
-      anchorEl = colorPreview.offsetParent
-      let curEl = colorPreview
-      let els = []
-      //Travel up dom tree from preview element to find parent elements that scroll
-      while (!anchorEl.isSameNode(curEl)) {
-        curEl = curEl.parentNode
-        let elOverflow = window
-          .getComputedStyle(curEl)
-          .getPropertyValue("overflow")
-        if (/scroll|auto/.test(elOverflow)) {
-          els.push(curEl)
-        }
-      }
-      parentNodes = els
-    }
-  })
 
   function openColorpicker(event) {
     if (colorPreview) {
@@ -72,43 +45,45 @@
     }
   }
 
-  $: if (open && colorPreview) {
+  function onColorChange(color) {
+    value = color.detail
+    dispatch("change", color.detail)
+  }
+
+  $: if(open && colorPreview) {
     const {
       top: spaceAbove,
       width,
       bottom,
       right,
-      left: spaceLeft,
+      left,
     } = colorPreview.getBoundingClientRect()
-    const { innerHeight, innerWidth } = window
 
-    const { offsetLeft, offsetTop } = colorPreview
-    //get the scrollTop value for all scrollable parent elements
-    let scrollTop = parentNodes.reduce(
-      (scrollAcc, el) => (scrollAcc += el.scrollTop),
-      0
-    )
+    const spaceBelow = window.innerHeight - bottom
+    const previewCenter = previewWidth / 2
 
-    const spaceBelow = innerHeight - spaceAbove - previewHeight
-    const top =
-      spaceAbove > spaceBelow
-        ? offsetTop - pickerHeight - scrollTop
-        : offsetTop + previewHeight - scrollTop
+    let y, x;
 
-    //TOO: Testing and Scroll Awareness for x Scroll
-    const spaceRight = innerWidth - spaceLeft + previewWidth
-    const left =
-      spaceRight > spaceLeft
-        ? offsetLeft + previewWidth
-        : offsetLeft - pickerWidth
+    if(spaceAbove > spaceBelow) {
+      positionSide = "bottom"
+      y = (window.innerHeight - spaceAbove)
+    }else{
+      positionSide = "top"
+      y = bottom
+    }
 
-    dimensions = { top, left }
+    x = (left + previewCenter) - (pickerWidth / 2)
+
+    dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
   }
 
-  function onColorChange(color) {
-    value = color.detail
-    dispatch("change", color.detail)
-  }
+  $: previewStyle = buildStyle({ width, height, background: value })
+  $: errorPreviewStyle = buildStyle({ width, height })
+  $: pickerStyle = buildStyle({
+    [positionSide]: `${dimensions[positionSide]}px`,
+    left: `${dimensions.left}px`,
+  })
+  
 </script>
 
 <div class="color-preview-container">
@@ -124,19 +99,19 @@
     </CheckedBackground>
 
     {#if open}
-      <div transition:fade class="picker-container" style={pickerStyle}>
-        <Colorpicker
-          on:change={onColorChange}
-          on:addswatch
-          on:removeswatch
-          bind:format
-          bind:value
-          bind:pickerHeight
-          bind:pickerWidth
-          {swatches}
-          {disableSwatches}
-          {open} />
-      </div>
+    <Colorpicker
+      style={pickerStyle}
+      on:change={onColorChange}
+      on:addswatch
+      on:removeswatch
+      bind:format
+      bind:value
+      bind:pickerHeight
+      bind:pickerWidth
+      bind:open
+      {swatches}
+      {disableSwatches}
+       />
       <div on:click|self={() => (open = false)} class="overlay" />
     {/if}
   {:else}
@@ -154,6 +129,7 @@
   }
 
   .color-preview {
+    cursor: pointer;
     border-radius: 3px;
     border: 1px solid #dedada;
   }
@@ -166,12 +142,12 @@
     cursor: not-allowed;
   }
 
-  .picker-container {
+  /* .picker-container {
     position: absolute;
     z-index: 3;
     width: fit-content;
     height: fit-content;
-  }
+  } */
 
   .overlay {
     position: fixed;
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte b/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte
new file mode 100644
index 0000000000..9af289175a
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { onMount } from "svelte";
+
+  export let target = document.body;
+
+  let targetEl;
+  let portal;
+  let componentInstance;
+
+  onMount(() => {
+    if (typeof target === "string") {
+      targetEl = document.querySelector(target);
+      // Force exit
+      if (targetEl === null) {
+        return () => {};
+      }
+    } else if (target instanceof HTMLElement) {
+      targetEl = target;
+    } else {
+      throw new TypeError(
+        `Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.`
+      );
+    }
+
+    portal = document.createElement("div");
+    targetEl.appendChild(portal);
+    portal.appendChild(componentInstance);
+
+    return () => {
+      targetEl.removeChild(portal);
+    };
+  });
+</script>
+
+<div bind:this={componentInstance}>
+  <slot />
+</div>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 87b064addf..d0569fc7c8 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -88,7 +88,6 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    z-index: 5;
   }
 
   .preview-pane {

From 85fe1cdcfe68fec5b8660ef4e0e395649e05a709 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 30 Jun 2020 14:12:37 +0100
Subject: [PATCH 44/54] backend - routing based on models

---
 .../builder/src/builderStore/store/backend.js |  3 --
 .../builder/src/builderStore/store/index.js   |  2 +-
 .../nav/ModelNavigator/ModelNavigator.svelte  |  2 +-
 .../[selectedDatabase]/_layout.svelte         |  1 -
 .../backend/database/_layout.svelte           | 36 -------------------
 .../backend/database/index.svelte             | 20 -----------
 .../pages/[application]/backend/index.svelte  |  2 +-
 .../model/[selectedModel]/_layout.svelte      | 14 ++++++++
 .../[selectedModel]}/index.svelte             |  2 +-
 .../backend/model/_layout.svelte              | 33 +++++++++++++++++
 .../[application]/backend/model/index.svelte  | 21 +++++++++++
 11 files changed, 72 insertions(+), 64 deletions(-)
 delete mode 100644 packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte
 delete mode 100644 packages/builder/src/pages/[application]/backend/database/_layout.svelte
 delete mode 100644 packages/builder/src/pages/[application]/backend/database/index.svelte
 create mode 100644 packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte
 rename packages/builder/src/pages/[application]/backend/{database/[selectedDatabase] => model/[selectedModel]}/index.svelte (95%)
 create mode 100644 packages/builder/src/pages/[application]/backend/model/_layout.svelte
 create mode 100644 packages/builder/src/pages/[application]/backend/model/index.svelte

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 7f156e8c39..12e94aea60 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -27,9 +27,6 @@ export const getBackendUiStore = () => {
         const views = await viewsResponse.json()
         store.update(state => {
           state.selectedDatabase = db
-          if (models && models.length > 0) {
-            store.actions.models.select(models[0])
-          }
           state.models = models
           state.views = views
           return state
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 11f2ed365e..a6386c29c2 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -109,8 +109,8 @@ const setPackage = (store, initial) => async pkg => {
   initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.appInstances = pkg.application.instances
   initial.appId = pkg.application._id
-
   store.set(initial)
+  await backendUiStore.actions.database.select(initial.appInstances[0])
   return initial
 }
 
diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
index 55a6610243..abb1ad7906 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
@@ -25,7 +25,7 @@
 
   function selectModel(model, fieldId) {
     backendUiStore.actions.models.select(model)
-
+    $goto(`./model/${model._id}`)
     if (fieldId) {
       backendUiStore.update(state => {
         state.selectedField = fieldId
diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte
deleted file mode 100644
index 4fa864ce7a..0000000000
--- a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<slot />
diff --git a/packages/builder/src/pages/[application]/backend/database/_layout.svelte b/packages/builder/src/pages/[application]/backend/database/_layout.svelte
deleted file mode 100644
index 94453e3943..0000000000
--- a/packages/builder/src/pages/[application]/backend/database/_layout.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  import { store, backendUiStore } from "builderStore"
-  import { goto } from "@sveltech/routify"
-  import { onMount } from "svelte"
-
-  $: instances = $store.appInstances
-
-  async function selectDatabase(database) {
-    backendUiStore.actions.database.select(database)
-  }
-
-  onMount(async () => {
-    if ($store.appInstances.length > 0) {
-      await selectDatabase($store.appInstances[0])
-      $goto(`./${$backendUiStore.selectedDatabase._id}`)
-    }
-  })
-</script>
-
-<div class="root">
-  <div class="node-view">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    position: relative;
-  }
-
-  .node-view {
-    overflow-y: auto;
-    flex: 1 1 auto;
-  }
-</style>
diff --git a/packages/builder/src/pages/[application]/backend/database/index.svelte b/packages/builder/src/pages/[application]/backend/database/index.svelte
deleted file mode 100644
index 09c7c773f8..0000000000
--- a/packages/builder/src/pages/[application]/backend/database/index.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { store, backendUiStore } from "builderStore"
-  import { goto } from "@sveltech/routify"
-  import { onMount } from "svelte"
-
-  $: instances = $store.appInstances
-
-  async function selectDatabase(database) {
-    backendUiStore.actions.database.select(database)
-  }
-
-  onMount(async () => {
-    if ($store.appInstances.length > 0) {
-      await selectDatabase($store.appInstances[0])
-      $goto(`../${$backendUiStore.selectedDatabase._id}`)
-    }
-  })
-</script>
-
-Please select a database
diff --git a/packages/builder/src/pages/[application]/backend/index.svelte b/packages/builder/src/pages/[application]/backend/index.svelte
index 82c0f9e069..488c67ff0e 100644
--- a/packages/builder/src/pages/[application]/backend/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  $goto("../database")
+  $goto("../model")
 </script>
 
 <!-- routify:options index=false -->
diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte
new file mode 100644
index 0000000000..a3ce7c6bf9
--- /dev/null
+++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte
@@ -0,0 +1,14 @@
+<script>
+import { params } from "@sveltech/routify"
+import { backendUiStore } from "builderStore"
+
+if ($params.selectedModel) {
+  const model = $backendUiStore.models.find(m => m._id === $params.selectedModel)
+  if (model) {
+    backendUiStore.actions.models.select(model)
+  }
+}
+
+</script>
+
+<slot />
diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
similarity index 95%
rename from packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
rename to packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
index a9f5589caf..232a569caa 100644
--- a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
@@ -3,7 +3,7 @@
   import { Button } from "@budibase/bbui"
   import EmptyModel from "components/nav/ModelNavigator/EmptyModel.svelte"
   import ModelDataTable from "components/database/ModelDataTable"
-  import { store, backendUiStore } from "builderStore"
+  import { backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "components/database/ModelDataTable/api"
   import { CreateEditRecordModal } from "components/database/ModelDataTable/modals"
diff --git a/packages/builder/src/pages/[application]/backend/model/_layout.svelte b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
new file mode 100644
index 0000000000..7f36f26d22
--- /dev/null
+++ b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
@@ -0,0 +1,33 @@
+<script>
+  import { backendUiStore } from "builderStore"
+  import { goto, leftover } from "@sveltech/routify"
+  import { onMount } from "svelte"
+
+  async function selectModel(model) {
+    backendUiStore.actions.models.select(model)
+  }
+
+  onMount(async () => {
+    if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+      $goto(`./${$backendUiStore.models[0]._id}`)
+    }
+  })
+</script>
+
+<div class="root">
+  <div class="node-view">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .root {
+    height: 100%;
+    position: relative;
+  }
+
+  .node-view {
+    overflow-y: auto;
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/packages/builder/src/pages/[application]/backend/model/index.svelte b/packages/builder/src/pages/[application]/backend/model/index.svelte
new file mode 100644
index 0000000000..da83f587f5
--- /dev/null
+++ b/packages/builder/src/pages/[application]/backend/model/index.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { store, backendUiStore } from "builderStore"
+  import { goto, leftover } from "@sveltech/routify"
+  import { onMount } from "svelte"
+
+  async function selectModel(model) {
+    backendUiStore.actions.models.select(model)
+  }
+
+  onMount(async () => {
+    if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+      $goto(`../${$backendUiStore.models[0]._id}`)
+    }
+  })
+</script>
+
+{#if $backendUiStore.models.length === 0}
+Please create a model
+{:else}
+Please select a model
+{/if}

From 592140158b6009613470b8faf682558e74765e84 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 30 Jun 2020 14:18:51 +0100
Subject: [PATCH 45/54] some comments..

---
 .../src/pages/[application]/backend/model/_layout.svelte       | 2 ++
 .../builder/src/pages/[application]/backend/model/index.svelte | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/packages/builder/src/pages/[application]/backend/model/_layout.svelte b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
index 7f36f26d22..ee17644f3a 100644
--- a/packages/builder/src/pages/[application]/backend/model/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
@@ -8,6 +8,8 @@
   }
 
   onMount(async () => {
+    // navigate to first model in list, if not already selected
+    // and this is the final url (i.e. no selectedModel)
     if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
       $goto(`./${$backendUiStore.models[0]._id}`)
     }
diff --git a/packages/builder/src/pages/[application]/backend/model/index.svelte b/packages/builder/src/pages/[application]/backend/model/index.svelte
index da83f587f5..15a08b1d09 100644
--- a/packages/builder/src/pages/[application]/backend/model/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/index.svelte
@@ -8,7 +8,10 @@
   }
 
   onMount(async () => {
+     // navigate to first model in list, if not already selected
+    // and this is the final url (i.e. no selectedModel)
     if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+      // this file routes as .../models/index, so, go up one.
       $goto(`../${$backendUiStore.models[0]._id}`)
     }
   })

From fc5d8b04e7c62ea8265b0c0ab72d02cb348103df Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 1 Jul 2020 09:48:53 +0100
Subject: [PATCH 46/54] blank select option on create record

---
 .../database/ModelDataTable/modals/RecordFieldControl.svelte     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
index a77e2146fa..c566e895d7 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
@@ -36,6 +36,7 @@
     class={determineClassName(type)}
     bind:value
     class:uk-form-danger={errors.length > 0}>
+    <option></option>
     {#each options as opt}
       <option value={opt}>{opt}</option>
     {/each}

From 90cb16bac08d24c204419fd0488f2ad96ed8607c Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 1 Jul 2020 09:49:09 +0100
Subject: [PATCH 47/54] nicer screen placeholder in preview

---
 .../AppPreview/CurrentItemPreview.svelte      | 91 +++++++++++++------
 1 file changed, 61 insertions(+), 30 deletions(-)

diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 523ed25031..abf226048b 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -25,38 +25,69 @@
     name: "Screen Placeholder",
     route: "*",
     props: {
-      _component: "@budibase/standard-components/container",
-      type: "div",
-      _children: [
-        {
-          _component: "@budibase/standard-components/container",
-          _styles: { normal: {}, hover: {}, active: {}, selected: {} },
-          _id: "__screenslot__text",
-          _code: "",
-          className: "",
-          onLoad: [],
-          type: "div",
-          _children: [
-            {
-              _component: "@budibase/standard-components/text",
-              _styles: {
-                normal: {},
-                hover: {},
-                active: {},
-                selected: {},
-              },
-              _id: "__screenslot__text_2",
-              _code: "",
-              text: "content",
-              font: "",
-              color: "",
-              textAlign: "inline",
-              verticalAlign: "inline",
-              formattingTag: "none",
-            },
-          ],
+      "_id": "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
+      "_component": "@budibase/standard-components/container",
+      "_styles": {
+        "normal": {
+          "padding": "0px",
+          "font-family": "Roboto",
+          "border-width": "0",
+          "border-style": "None",
+          "text-align": "center"
         },
+        "hover": {},
+        "active": {},
+        "selected": {}
+      },
+      "_code": "",
+      "className": "",
+      "onLoad": [],
+      "type": "div",
+      "_children": [
+        {
+          "_id": "335428f7-f9ca-4acd-9e76-71bc8ad27324",
+          "_component": "@budibase/standard-components/container",
+          "_styles": {
+            "normal": {
+              "padding": "16px",
+              "border-style": "Dashed",
+              "border-width": "2px",
+              "border-color": "#8a8989fa"
+            },
+            "hover": {},
+            "active": {},
+            "selected": {}
+          },
+          "_code": "",
+          "className": "",
+          "onLoad": [],
+          "type": "div",
+          "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
+          "_instanceName": "Container",
+          "_children": [
+            {
+              "_id": "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
+              "_component": "@budibase/standard-components/heading",
+              "_styles": {
+                "normal": {
+                  "font-family": "Roboto"
+                },
+                "hover": {},
+                "active": {},
+                "selected": {}
+              },
+              "_code": "",
+              "className": "",
+              "text": "Your screens go here",
+              "type": "h1",
+              "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
+              "_instanceName": "Heading",
+              "_children": []
+            }
+          ]
+        }
       ],
+      "_instanceName": "Content Placeholder"
     },
   }
 

From 46c8c558a01d983c18d0aef9de6a547464be0e20 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 1 Jul 2020 11:28:41 +0100
Subject: [PATCH 48/54] apply border-box globally

---
 .../src/components/userInterface/AppPreview/iframeTemplate.js  | 3 +++
 packages/server/src/utilities/builder/index.template.html      | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index c40df27aee..b78f882fe1 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -7,6 +7,9 @@ export default `<html>
         height: 100%!important;
         font-family: Roboto !important;
       }
+      *, *:before, *:after {
+        box-sizing: border-box;
+      }
       .lay-__screenslot__text {
           width: 100%;
           height: 100%;
diff --git a/packages/server/src/utilities/builder/index.template.html b/packages/server/src/utilities/builder/index.template.html
index 33a7d104ec..58faca7da6 100644
--- a/packages/server/src/utilities/builder/index.template.html
+++ b/packages/server/src/utilities/builder/index.template.html
@@ -17,6 +17,9 @@
             margin: 0px;
             padding: 0px;
         }
+        *, *:before, *:after {
+            box-sizing: border-box;
+        }
     </style>
 
     {{ each(options.stylesheets) }}

From ce99054f91aeccf0dbcfdb988fb81a7746fb3e6f Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 1 Jul 2020 13:19:14 +0100
Subject: [PATCH 49/54] Added recordDetail component

---
 .../userInterface/temporaryPanelStructure.js  | 13 ++++-
 packages/client/src/render/screenRouter.js    |  4 +-
 packages/standard-components/components.json  | 17 +++---
 .../src/RecordDetail.svelte                   | 52 +++++++++++++++++++
 packages/standard-components/src/index.js     |  1 +
 5 files changed, 75 insertions(+), 12 deletions(-)
 create mode 100644 packages/standard-components/src/RecordDetail.svelte

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index ae39ce3ee2..7a8b336563 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -406,7 +406,7 @@ export default {
         {
           name: "List",
           _component: "@budibase/standard-components/list",
-          description: "Shiny list",
+          description: "Renders all children once per record, of a given model",
           icon: "ri-file-list-fill",
           properties: {
             design: { ...all },
@@ -414,6 +414,17 @@ export default {
           },
           children: [],
         },
+        {
+          name: "Record Detail",
+          _component: "@budibase/standard-components/recorddetail",
+          description: "Loads a record, using an id from the URL, which can be used with {{ context }}, in children",
+          icon: "ri-profile-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
+          children: [],
+        },
         {
           name: "Map",
           _component: "@budibase/standard-components/datamap",
diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index fb0b005096..4f4256f9fe 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -56,13 +56,13 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
 
     const screenIndex = current !== -1 ? current : fallback
 
-    onScreenSelected(screens[screenIndex], _url)
-
     try {
       !url.state && history.pushState(_url, null, _url)
     } catch (_) {
       // ignoring an exception here as the builder runs an iframe, which does not like this
     }
+
+    onScreenSelected(screens[screenIndex], _url)
   }
 
   function click(e) {
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 8df7756499..2c24c02615 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -235,15 +235,14 @@
 		"description": "A configurable data list that attaches to your backend models.",
 		"data": true,
 		"props": {
-			"model": "models",
-			"layout": {
-				"type": "options",
-				"default": "list",
-				"options": [
-					"list",
-					"grid"
-				]
-			}
+			"model": "models"
+		}
+	},
+	"recorddetail": {
+		"description": "Loads a record, using an ID in the url",
+		"data": true,
+		"props": {
+			"model": "models"
 		}
 	},
 	"datamap": {
diff --git a/packages/standard-components/src/RecordDetail.svelte b/packages/standard-components/src/RecordDetail.svelte
new file mode 100644
index 0000000000..1ebd89e6f0
--- /dev/null
+++ b/packages/standard-components/src/RecordDetail.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { onMount } from "svelte"
+
+  export let _bb
+  export let model
+
+  let headers = []
+  let store = _bb.store
+  let target
+
+  async function fetchFirstRecord() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const allRecords = await response.json()
+      if (allRecords.length > 0) return allRecords[0]
+    }
+  }
+
+  async function fetchData() {
+    const pathParts = window.location.pathname.split("/")
+
+    let record
+    // if srcdoc, then we assume this is the builder preview
+    if(pathParts.length === 0 || pathParts[0] === "srcdoc") {
+      record = await fetchFirstRecord()
+    } else {
+      const id = pathParts[pathParts.length - 1]
+      const GET_RECORD_URL = `/api/${model}/records/${id}`
+      const response = await _bb.api.get(GET_RECORD_URL)
+      if (response.status === 200) {
+        record = await response.json()
+      }
+    }
+
+    if (record) {
+      _bb.attachChildren(target, {
+        hydrate: false,
+        context: record,
+      })
+    } else {
+      throw new Error("Failed to fetch record.", response)
+    }
+  }
+
+  onMount(async () => {
+    await fetchData()
+  })
+</script>
+
+<section bind:this={target}>
+</section>
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 37d6abab74..a0c6ee025d 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -23,3 +23,4 @@ export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
 export { default as datamap } from "./DataMap.svelte"
 export { default as embed } from "./Embed.svelte"
+export { default as recorddetail } from "./RecordDetail.svelte"

From 8e4f69ff157930c5af3196a758a1841e6f4841a8 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 1 Jul 2020 13:20:05 +0100
Subject: [PATCH 50/54] removed unecessar styling from List

---
 packages/standard-components/src/List.svelte | 37 +-------------------
 1 file changed, 1 insertion(+), 36 deletions(-)

diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 8207ef47ee..ec086cbace 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -3,7 +3,6 @@
 
   export let _bb
   export let model
-  export let layout = "list"
 
   let headers = []
   let store = _bb.store
@@ -33,39 +32,5 @@
   })
 </script>
 
-<section class:grid={layout === 'grid'} class:list={layout === 'list'}>
-  <div class="data-card" bind:this={target} />
+<section bind:this={target}>
 </section>
-
-<style>
-  .list {
-    display: flex;
-    flex-direction: column;
-    font-family: Inter;
-  }
-
-  .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  ul {
-    list-style-type: none;
-  }
-
-  li {
-    margin: 5px 0 5px 0;
-  }
-
-  .data-card {
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 10px;
-  }
-
-  .data-key {
-    font-weight: bold;
-    font-size: 20px;
-    text-transform: capitalize;
-  }
-</style>

From b0128dcfd0d8567215ea8e4c569068c3911d8054 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 1 Jul 2020 13:27:12 +0100
Subject: [PATCH 51/54] lint fix

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

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 7a8b336563..99692d2827 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -417,7 +417,8 @@ export default {
         {
           name: "Record Detail",
           _component: "@budibase/standard-components/recorddetail",
-          description: "Loads a record, using an id from the URL, which can be used with {{ context }}, in children",
+          description:
+            "Loads a record, using an id from the URL, which can be used with {{ context }}, in children",
           icon: "ri-profile-line",
           properties: {
             design: { ...all },

From a6b333fa6d6b6e327d38f19a198fd6862c47c734 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 1 Jul 2020 17:12:55 +0100
Subject: [PATCH 52/54] Key Events, Folder Tidyup, Bugs

---
 .../Colorpicker/{ => actions}/drag.js         |  0
 .../Colorpicker/actions/index.js              |  2 +
 .../Colorpicker/actions/key-events.js         | 41 +++++++++++++++++++
 .../{ => components}/ButtonGroup.svelte       |  0
 .../{ => components}/CheckedBackground.svelte |  2 +-
 .../{ => components}/Colorpicker.svelte       | 35 +++++++++-------
 .../{ => components}/Colorpreview.svelte      | 20 +++++----
 .../{ => components}/FlatButton.svelte        | 10 ++++-
 .../Colorpicker/{ => components}/Input.svelte |  0
 .../{ => components}/Palette.svelte           |  0
 .../{ => components}/Portal.svelte            |  0
 .../{ => components}/Slider.svelte            | 31 ++++++++++++--
 .../{ => components}/Swatch.svelte            |  5 +++
 .../userInterface/Colorpicker/helpers.js      |  8 +++-
 .../userInterface/Colorpicker/index.js        |  2 +-
 .../userInterface/Colorpicker/utils.js        | 14 ++++---
 .../userInterface/Colorpicker/utils.test.js   |  2 +-
 .../userInterface/propertyCategories.js       |  1 +
 18 files changed, 137 insertions(+), 36 deletions(-)
 rename packages/builder/src/components/userInterface/Colorpicker/{ => actions}/drag.js (100%)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/actions/index.js
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js
 rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/ButtonGroup.svelte (100%)
 rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/CheckedBackground.svelte (93%)
 rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Colorpicker.svelte (92%)
 rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Colorpreview.svelte (90%)
 rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/FlatButton.svelte (59%)
 rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Input.svelte (100%)
 rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Palette.svelte (100%)
 rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Portal.svelte (100%)
 rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Slider.svelte (73%)
 rename packages/builder/src/components/userInterface/Colorpicker/{ => components}/Swatch.svelte (88%)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/actions/drag.js
similarity index 100%
rename from packages/builder/src/components/userInterface/Colorpicker/drag.js
rename to packages/builder/src/components/userInterface/Colorpicker/actions/drag.js
diff --git a/packages/builder/src/components/userInterface/Colorpicker/actions/index.js b/packages/builder/src/components/userInterface/Colorpicker/actions/index.js
new file mode 100644
index 0000000000..c89a4b95c5
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/actions/index.js
@@ -0,0 +1,2 @@
+export { default as drag } from "./drag.js"
+export { default as keyevents } from "./key-events.js"
diff --git a/packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js b/packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js
new file mode 100644
index 0000000000..90acfb089b
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js
@@ -0,0 +1,41 @@
+//events: Array<{trigger: fn}>
+export default function(node, events = []) {
+  const ev = Object.entries(events)
+  let fns = []
+
+  for (let [trigger, fn] of ev) {
+    let f = addEvent(trigger, fn)
+    fns = [...fns, f]
+  }
+
+  function _scaffold(trigger, fn) {
+    return () => {
+      let trig = parseInt(trigger)
+      if (trig) {
+        if (event.keyCode === trig) {
+          fn(event)
+        }
+      } else {
+        if (event.key === trigger) {
+          fn(event)
+        }
+      }
+    }
+  }
+
+  function addEvent(trigger, fn) {
+    let f = _scaffold(trigger, fn)
+    node.addEventListener("keydown", f)
+    return f
+  }
+
+  function removeEvents() {
+    fns.forEach(f => node.removeEventListener("keypress", f))
+  }
+
+  return {
+    destroy() {
+      removeEvents()
+    },
+  }
+}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/ButtonGroup.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
rename to packages/builder/src/components/userInterface/Colorpicker/components/ButtonGroup.svelte
diff --git a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
similarity index 93%
rename from packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
rename to packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
index e612fb5393..2baa6b466e 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { buildStyle } from "./helpers.js"
+  import {buildStyle} from "../helpers.js"
   import { fade } from "svelte/transition"
 
   export let backgroundSize = "10px"
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
similarity index 92%
rename from packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
rename to packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
index 27b5e20b5b..f96852e614 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
@@ -3,17 +3,18 @@
   import { fade } from "svelte/transition"
   import Swatch from "./Swatch.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import { buildStyle } from "./helpers.js"
+  import {buildStyle} from "../helpers.js"
   import {
     getColorFormat,
     convertToHSVA,
     convertHsvaToFormat,
-  } from "./utils.js"
+  } from "../utils.js"
   import Slider from "./Slider.svelte"
   import Palette from "./Palette.svelte"
   import ButtonGroup from "./ButtonGroup.svelte"
   import Input from "./Input.svelte"
   import Portal from "./Portal.svelte"
+  import {keyevents} from "../actions"
 
   export let value = "#3ec1d3ff"
   export let open = false;
@@ -27,10 +28,10 @@
   let colorPicker = null
   let adder = null
 
-  let h = null
-  let s = null
-  let v = null
-  let a = null
+  let h = 0
+  let s = 0
+  let v = 0
+  let a = 0
 
   const dispatch = createEventDispatcher()
 
@@ -56,9 +57,9 @@
     }
   }
 
-  function handleEscape(e) {
-    if(open && e.key === "Escape") {
-      open = false
+  function handleEscape() {
+    if(open) {
+      open = false;
     }
   }
 
@@ -159,18 +160,17 @@
   $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
   $: selectedColorStyle = buildStyle({ background: value, border })
   $: shrink = swatches.length > 0
-  
+    
 </script>
 
-
 <Portal>
   <div
     class="colorpicker-container"
+    use:keyevents={{"Escape": handleEscape}}
     transition:fade
     bind:this={colorPicker}
     {style}
     tabindex="0"
-    on:keydown={handleEscape}
     bind:clientHeight={pickerHeight}
     bind:clientWidth={pickerWidth}>
 
@@ -215,11 +215,13 @@
           {/if}
           {#if swatches.length !== 12}
             <div
+              tabindex="0"
+              use:keyevents={{"Enter": addSwatch}}
               bind:this={adder}
               transition:fade
               class="adder"
-              on:click={addSwatch}
-              class:shrink>
+              class:shrink
+              on:click={addSwatch}>
               <span>&plus;</span>
             </div>
           {/if}
@@ -246,6 +248,7 @@
     display: flex;
     font-size: 11px;
     font-weight: 400;
+    transition: top 0.1s, left 0.1s;
     flex-direction: column;
     margin: 5px 0px;
     height: auto;
@@ -297,7 +300,7 @@
     flex: 1;
     height: 20px;
     display: flex;
-    transition: flex 0.5s;
+    transition: flex 0.3s;
     justify-content: center;
     align-items: center;
     background: #f1f3f4;
@@ -307,6 +310,8 @@
     margin-left: 5px;
     margin-top: 3px;
     font-weight: 500;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .shrink {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
similarity index 90%
rename from packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
rename to packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
index fc85b12f30..8c4d193a00 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
@@ -1,11 +1,11 @@
 <script>
   import Colorpicker from "./Colorpicker.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import { createEventDispatcher, beforeUpdate } from "svelte"
+  import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
 
-  import { buildStyle } from "./helpers.js"
+  import {buildStyle, debounce} from "../helpers.js"
   import { fade } from "svelte/transition"
-  import { getColorFormat } from "./utils.js"
+  import { getColorFormat } from "../utils.js"
 
   export let value = "#3ec1d3ff"
   export let swatches = []
@@ -50,8 +50,8 @@
     dispatch("change", color.detail)
   }
 
-  $: if(open && colorPreview) {
-    const {
+  function calculateDimensions() {
+   const {
       top: spaceAbove,
       width,
       bottom,
@@ -72,9 +72,13 @@
       y = bottom
     }
 
-    x = (left + previewCenter) - (pickerWidth / 2)
+    x = (left + previewCenter) - (220 / 2)
 
-    dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
+    dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) } 
+  }
+
+  $: if(open && colorPreview) {
+    calculateDimensions()
   }
 
   $: previewStyle = buildStyle({ width, height, background: value })
@@ -86,6 +90,8 @@
   
 </script>
 
+<svelte:window on:resize={debounce(calculateDimensions, 200)} />
+
 <div class="color-preview-container">
   {#if !errorMsg}
     <CheckedBackground borderRadius="3px" backgroundSize="8px">
diff --git a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte
similarity index 59%
rename from packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
rename to packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte
index 15bc72fe3c..a8da25706a 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte
@@ -1,9 +1,14 @@
 <script>
+  import {createEventDispatcher} from "svelte"
+  import {keyevents} from "../actions"
+
   export let text = ""
   export let selected = false
+
+  const dispatch = createEventDispatcher()
 </script>
 
-<div class="flatbutton" class:selected on:click>{text}</div>
+<div class="flatbutton" tabindex="0" use:keyevents={{"Enter": () => dispatch("click")}}  class:selected on:click>{text}</div>
 
 <style>
   .flatbutton {
@@ -19,11 +24,14 @@
     justify-content: center;
     align-items: center;
     background: #f1f3f4;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .selected {
     color: #ffffff;
     background-color: #003cb0;
     border: none;
+    outline: none;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Input.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/Colorpicker/Input.svelte
rename to packages/builder/src/components/userInterface/Colorpicker/components/Input.svelte
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
rename to packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Portal.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Portal.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/Colorpicker/Portal.svelte
rename to packages/builder/src/components/userInterface/Colorpicker/components/Portal.svelte
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte
similarity index 73%
rename from packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
rename to packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte
index a6abab6ca1..7ccde884d9 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte"
-  import dragable from "./drag.js"
+  import {drag, keyevents} from "../actions"
 
   export let value = 1
   export let type = "hue"
@@ -9,6 +9,10 @@
 
   let slider
   let sliderWidth = 0
+  let upperLimit = type === "hue" ? 360 : 1
+  let incrementFactor = type === "hue" ? 1 : 0.01
+
+  const isWithinLimit = value => value >= 0 && value <= upperLimit
 
   function onSliderChange(mouseX, isDrag = false) {
     const { left, width } = slider.getBoundingClientRect()
@@ -17,12 +21,29 @@
     let percentageClick = (clickPosition / sliderWidth).toFixed(2)
 
     if (percentageClick >= 0 && percentageClick <= 1) {
+      
       let value = type === "hue" ? 360 * percentageClick : percentageClick
-
       dispatch("change", { color: value, isDrag })
     }
   }
+  
+  function handleLeftKey() {
+    let v = value - incrementFactor
+    if(isWithinLimit(v)) {
+      value = v
+      dispatch("change", { color: value })
+    }
+  }
 
+  function handleRightKey() {
+    let v = value + incrementFactor
+    if(isWithinLimit(v)) {
+      value = v
+      dispatch("change", { color: value })
+
+    }
+  }
+  
   $: thumbPosition =
     type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
 
@@ -30,14 +51,16 @@
 </script>
 
 <div
+  tabindex="0"
   bind:this={slider}
+  use:keyevents={{37: handleLeftKey, 39: handleRightKey}}
   bind:clientWidth={sliderWidth}
   on:click={event => onSliderChange(event.clientX)}
   class="color-format-slider"
   class:hue={type === 'hue'}
   class:alpha={type === 'alpha'}>
   <div
-    use:dragable
+    use:drag
     on:drag={e => onSliderChange(e.detail, true)}
     on:dragend
     class="slider-thumb"
@@ -54,6 +77,8 @@
     margin: 10px 0px;
     border: 1px solid #e8e8ef;
     cursor: pointer;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .hue {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
similarity index 88%
rename from packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
rename to packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
index 2424df2003..066178677c 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
@@ -2,6 +2,7 @@
   import { createEventDispatcher } from "svelte"
   import { fade } from "svelte/transition"
   import CheckedBackground from "./CheckedBackground.svelte"
+  import {keyevents} from "../actions"
 
   export let hovered = false
   export let color = "#fff"
@@ -12,6 +13,8 @@
 <div class="space">
   <CheckedBackground borderRadius="6px">
     <div
+      tabindex="0"
+      use:keyevents={{"Enter": () => dispatch("click")}}
       in:fade
       class="swatch"
       style={`background: ${color};`}
@@ -38,6 +41,8 @@
     border: 1px solid #dedada;
     height: 20px;
     width: 20px;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .space {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/helpers.js b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
index 5d9ff750af..bd4d666bc1 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/helpers.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
@@ -1,4 +1,4 @@
-export const buildStyle = styles => {
+export function buildStyle(styles) {
   let str = ""
   for (let s in styles) {
     if (styles[s]) {
@@ -12,3 +12,9 @@ export const buildStyle = styles => {
 export const convertCamel = str => {
   return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
 }
+
+export const debounce = (fn, milliseconds) => {
+  return () => {
+    setTimeout(fn, milliseconds)
+  }
+}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js
index 21e19acc9b..80a44b8a85 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/index.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/index.js
@@ -1,2 +1,2 @@
-import Colorpreview from "./Colorpreview.svelte"
+import Colorpreview from "./components/Colorpreview.svelte"
 export default Colorpreview
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index e14c8711ab..6049046e60 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -144,13 +144,15 @@ export const hslaToHSVA = ([h, s, l, a = 1]) => {
 
 export const hsvaToHexa = (hsva, asString = false) => {
   const [r, g, b, a] = hsvaToRgba(hsva)
+  const padSingle = hex => (hex.length === 1 ? `0${hex}` : hex)
 
-  const hexa = [r, g, b]
-    .map(v => {
-      let hex = Math.round(v).toString(16)
-      return hex.length === 1 ? `0${hex}` : hex
-    })
-    .concat(Math.round(a * 255).toString(16))
+  let hexa = [r, g, b].map(v => {
+    let hex = Math.round(v).toString(16)
+    return padSingle(hex)
+  })
+
+  let alpha = padSingle(Math.round(a * 255).toString(16))
+  hexa = [...hexa, alpha]
   return asString ? `#${hexa.join("")}` : hexa
 }
 
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
index c47d54ed1b..e86be71885 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
@@ -1,4 +1,4 @@
-import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./utils"
+import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./../utils"
 
 describe("convertToHSVA - convert to hsva from format", () => {
   test("convert from hexa", () => {
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index d3605210e9..9824c846d6 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -395,6 +395,7 @@ export const typography = [
     label: "Color",
     key: "color",
     control: Colorpicker,
+    swatches: ["#fff", "#000", "#111", "#ccc", "ede"],
     defaultValue: "#000",
   },
   {

From 30323ecc3568afe9737bb359fc7bbac444169989 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 1 Jul 2020 17:18:29 +0100
Subject: [PATCH 53/54] Remove swatch prop test

---
 .../builder/src/components/userInterface/propertyCategories.js   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 9824c846d6..d3605210e9 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -395,7 +395,6 @@ export const typography = [
     label: "Color",
     key: "color",
     control: Colorpicker,
-    swatches: ["#fff", "#000", "#111", "#ccc", "ede"],
     defaultValue: "#000",
   },
   {

From e40ce475b65e43b415e1048d08b7374e780d081b Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 1 Jul 2020 17:29:18 +0100
Subject: [PATCH 54/54] Lint

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

diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
index e86be71885..c47d54ed1b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
@@ -1,4 +1,4 @@
-import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./../utils"
+import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./utils"
 
 describe("convertToHSVA - convert to hsva from format", () => {
   test("convert from hexa", () => {