From c895e9887bee9972992585c248b4e9efb0d95718 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 21 Oct 2020 09:19:26 +0100
Subject: [PATCH 01/52] Add initial work on dropdown components

---
 packages/builder/src/budibase.css             |   8 --
 .../ComponentSelectionList.svelte             | 107 ++++++++++++++----
 .../userInterface/FrontendNavigatePane.svelte |   8 +-
 .../userInterface/ItemTab/Item.svelte         |   4 +-
 .../userInterface/ItemTab/Tab.svelte          |  22 +++-
 .../[application]/frontend/_layout.svelte     |  44 +++----
 6 files changed, 129 insertions(+), 64 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 6dc786f522..1426a7beed 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -85,14 +85,6 @@
      box-sizing: border-box; 
 }
 
-.preview-pane {
-    grid-column: 2;
-    margin: 80px 60px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
-}
-
 .budibase__table {
     border: 1px solid var(--grey-4);
     background: #fff;
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 00ce42cf61..404cfa102b 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -3,46 +3,111 @@
   import { store } from "builderStore"
   import components from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
+  import { Popover } from "@budibase/bbui"
+  import { fade, fly } from "svelte/transition"
 
   import Tab from "./ItemTab/Tab.svelte"
 
-  export let toggleTab
-
   const categories = components.categories
-  let selectedCategory = categories[0]
+  let selectedIndex
+  let width
+  $: selectedCategory = selectedIndex == null ? null : categories[selectedIndex]
+
+  const close = () => {
+    selectedIndex = null
+  }
 
   const onComponentChosen = component => {
     store.addChildComponent(component._component, component.presetProps)
 
-    toggleTab("Navigate")
-
     // Get ID path
     const path = store.getPathToComponent($store.currentComponentInfo)
 
     // Go to correct URL
     $goto(`./:page/:screen/${path}`)
+    close()
   }
 </script>
 
-<div class="root">
-  <CategoryTab
-    onClick={category => (selectedCategory = category)}
-    {selectedCategory}
-    {categories} />
-
-  <div class="panel">
-    <Tab
-      list={selectedCategory}
-      on:selectItem={e => onComponentChosen(e.detail)}
-      {toggleTab} />
+<div class="wrapper">
+  <div
+    class="container"
+    bind:clientWidth={width}
+    class:border={selectedCategory == null}>
+    {#each categories as category, idx}
+      <div
+        class="category"
+        on:click={() => (selectedIndex = idx)}
+        class:active={selectedCategory === category}>
+        {category.name}
+        <i class="ri-arrow-down-s-line" />
+      </div>
+    {/each}
   </div>
+  {#if selectedCategory != null}
+    <div class="overlay" on:click={close} />
+    <div class="dropdown" transition:fly={{ y: -120 }}>
+      <Tab
+        list={selectedCategory}
+        on:selectItem={e => onComponentChosen(e.detail)} />
+    </div>
+  {/if}
 </div>
 
 <style>
-  .panel {
-    margin-top: 20px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 20px;
+  .wrapper {
+    position: relative;
+    z-index: 1;
+  }
+
+  .container {
+    padding: var(--spacing-xl) 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    background-color: white;
+    z-index: 1;
+  }
+  .container.border {
+    border-bottom: 1px solid var(--grey-2);
+  }
+
+  .category {
+    color: var(--ink);
+    cursor: pointer;
+    margin-right: var(--spacing-xl);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    font-size: var(--font-size-s);
+    font-weight: 500;
+  }
+  .category.active,
+  .category:hover {
+    color: var(--blue);
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -2;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .dropdown {
+    position: absolute;
+    z-index: -1;
+    top: calc(100% - var(--spacing-xl));
+    left: 0;
+    width: calc(100% - 80px);
+    background-color: white;
+    padding: var(--spacing-xl) 40px;
+    border-bottom: 1px solid var(--grey-2);
+    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 64c3ee45f4..651cc5c6ac 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -4,19 +4,17 @@
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
-  import { Button, Spacer, Modal } from "@budibase/bbui"
+  import { Button, Spacer, Modal, Heading } from "@budibase/bbui"
 
   let modal
 </script>
 
+<Heading small>Screens</Heading>
 <PagesList />
 
-<Spacer medium />
 <Button primary wide on:click={modal.show}>Create New Screen</Button>
-<Spacer medium />
-<PageLayout layout={$store.pages[$store.currentPageName]} />
-
 <div class="nav-items-container">
+  <PageLayout layout={$store.pages[$store.currentPageName]} />
   <ComponentsHierarchy screens={$store.screens} />
 </div>
 
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index 7d118afe61..de04bc5208 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -14,12 +14,12 @@
     display: flex;
     flex-direction: column;
     cursor: pointer;
-    padding: 12px 16px 16px 16px;
-    height: 80px;
     justify-content: center;
     align-items: center;
     background-color: var(--grey-1);
     border-radius: 5px;
+    width: 120px;
+    height: 80px;
   }
 
   .item-item:hover {
diff --git a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
index 090fad1dc1..db16acf3d6 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
@@ -25,11 +25,13 @@
 {#if !list.isCategory}
   <button class="back-button" on:click={goBack}>Back</button>
 {/if}
-{#each list.children as item}
-  {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
-    <Item {item} on:click={() => handleClick(item)} />
-  {/if}
-{/each}
+<div class="list">
+  {#each list.children as item}
+    {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
+      <Item {item} on:click={() => handleClick(item)} />
+    {/if}
+  {/each}
+</div>
 
 <style>
   .back-button {
@@ -45,8 +47,16 @@
     font-family: Inter;
     transition: all 0.3ms;
   }
-
   .back-button:hover {
     background: var(--grey-1);
   }
+
+  .list {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+    flex-wrap: wrap;
+  }
 </style>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 0aae313ccd..420a1bd2ea 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -32,8 +32,6 @@
     settingsView.show()
   }
 
-  let leftNavSwitcher
-
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
 </script>
 
@@ -41,21 +39,15 @@
 <div class="root">
 
   <div class="ui-nav">
-
-    <Switcher bind:this={leftNavSwitcher} tabs={['Navigate', 'Add']}>
-      <div slot="0">
-        <FrontendNavigatePane />
-      </div>
-      <div slot="1">
-        <ComponentSelectionList toggleTab={leftNavSwitcher.selectTab} />
-      </div>
-    </Switcher>
-
+    <FrontendNavigatePane />
   </div>
 
   <div class="preview-pane">
     {#if $store.currentPageName && $store.currentPageName.length > 0}
-      <CurrentItemPreview />
+      <ComponentSelectionList/>
+      <div class="preview-content">
+        <CurrentItemPreview />
+      </div>
     {/if}
   </div>
 
@@ -73,34 +65,42 @@
   .root {
     display: grid;
     grid-template-columns: 300px 1fr 300px;
-    width: 100%;
     background: var(--grey-1);
-    flex: 1;
-    min-height: 0;
     align-items: stretch;
+    height: calc(100vh - 60px);
   }
 
   .ui-nav {
     grid-column: 1;
     background-color: var(--white);
-    height: calc(100vh - 69px);
-    padding: 0;
     display: flex;
     flex-direction: column;
+    gap: var(--spacing-m);
+    padding: var(--spacing-xl);
+    overflow-y: auto;
+    border-right: 1px solid var(--grey-2);
   }
 
   .preview-pane {
     grid-column: 2;
-    margin: 40px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+  .preview-content {
     background: #fff;
-    border-radius: 5px;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
+    flex: 1 1 auto;
+    margin: var(--spacing-xl) 40px;
   }
 
   .components-pane {
     grid-column: 3;
     background-color: var(--white);
-    min-height: 0px;
-    height: calc(100vh - 69px);
+    border-left: 1px solid var(--grey-2);
   }
 
   .nav-group-header > div:nth-child(1) {

From e1c70f43db96415568f44b28b345003cd0641a8e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 15:11:22 +0100
Subject: [PATCH 02/52] Rename backend to data and frontend to design

---
 .../src/pages/[application]/{backend => data}/_layout.svelte      | 0
 .../src/pages/[application]/{backend => data}/index.svelte        | 0
 .../{backend => data}/table/[selectedTable]/_layout.svelte        | 0
 .../{backend => data}/table/[selectedTable]/index.svelte          | 0
 .../relationship/[selectedRow]/[selectedField]/index.svelte       | 0
 .../table/[selectedTable]/relationship/[selectedRow]/index.svelte | 0
 .../table/[selectedTable]/relationship/index.svelte               | 0
 .../pages/[application]/{backend => data}/table/_layout.svelte    | 0
 .../src/pages/[application]/{backend => data}/table/index.svelte  | 0
 .../{backend => data}/view/[selectedView]/_layout.svelte          | 0
 .../{backend => data}/view/[selectedView]/index.svelte            | 0
 .../{frontend => design}/[page]/[screen]/_fallback.svelte         | 0
 .../{frontend => design}/[page]/[screen]/_layout.svelte           | 0
 .../[application]/{frontend => design}/[page]/_layout.svelte      | 0
 .../pages/[application]/{frontend => design}/[page]/index.svelte  | 0
 .../src/pages/[application]/{frontend => design}/_layout.svelte   | 0
 .../src/pages/[application]/{frontend => design}/index.svelte     | 0
 17 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/builder/src/pages/[application]/{backend => data}/_layout.svelte (100%)
 rename packages/builder/src/pages/[application]/{backend => data}/index.svelte (100%)
 rename packages/builder/src/pages/[application]/{backend => data}/table/[selectedTable]/_layout.svelte (100%)
 rename packages/builder/src/pages/[application]/{backend => data}/table/[selectedTable]/index.svelte (100%)
 rename packages/builder/src/pages/[application]/{backend => data}/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte (100%)
 rename packages/builder/src/pages/[application]/{backend => data}/table/[selectedTable]/relationship/[selectedRow]/index.svelte (100%)
 rename packages/builder/src/pages/[application]/{backend => data}/table/[selectedTable]/relationship/index.svelte (100%)
 rename packages/builder/src/pages/[application]/{backend => data}/table/_layout.svelte (100%)
 rename packages/builder/src/pages/[application]/{backend => data}/table/index.svelte (100%)
 rename packages/builder/src/pages/[application]/{backend => data}/view/[selectedView]/_layout.svelte (100%)
 rename packages/builder/src/pages/[application]/{backend => data}/view/[selectedView]/index.svelte (100%)
 rename packages/builder/src/pages/[application]/{frontend => design}/[page]/[screen]/_fallback.svelte (100%)
 rename packages/builder/src/pages/[application]/{frontend => design}/[page]/[screen]/_layout.svelte (100%)
 rename packages/builder/src/pages/[application]/{frontend => design}/[page]/_layout.svelte (100%)
 rename packages/builder/src/pages/[application]/{frontend => design}/[page]/index.svelte (100%)
 rename packages/builder/src/pages/[application]/{frontend => design}/_layout.svelte (100%)
 rename packages/builder/src/pages/[application]/{frontend => design}/index.svelte (100%)

diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/_layout.svelte
rename to packages/builder/src/pages/[application]/data/_layout.svelte
diff --git a/packages/builder/src/pages/[application]/backend/index.svelte b/packages/builder/src/pages/[application]/data/index.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/index.svelte
rename to packages/builder/src/pages/[application]/data/index.svelte
diff --git a/packages/builder/src/pages/[application]/backend/table/[selectedTable]/_layout.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/table/[selectedTable]/_layout.svelte
rename to packages/builder/src/pages/[application]/data/table/[selectedTable]/_layout.svelte
diff --git a/packages/builder/src/pages/[application]/backend/table/[selectedTable]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/table/[selectedTable]/index.svelte
rename to packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
diff --git a/packages/builder/src/pages/[application]/backend/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte
rename to packages/builder/src/pages/[application]/data/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte
diff --git a/packages/builder/src/pages/[application]/backend/table/[selectedTable]/relationship/[selectedRow]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/relationship/[selectedRow]/index.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/table/[selectedTable]/relationship/[selectedRow]/index.svelte
rename to packages/builder/src/pages/[application]/data/table/[selectedTable]/relationship/[selectedRow]/index.svelte
diff --git a/packages/builder/src/pages/[application]/backend/table/[selectedTable]/relationship/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/relationship/index.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/table/[selectedTable]/relationship/index.svelte
rename to packages/builder/src/pages/[application]/data/table/[selectedTable]/relationship/index.svelte
diff --git a/packages/builder/src/pages/[application]/backend/table/_layout.svelte b/packages/builder/src/pages/[application]/data/table/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/table/_layout.svelte
rename to packages/builder/src/pages/[application]/data/table/_layout.svelte
diff --git a/packages/builder/src/pages/[application]/backend/table/index.svelte b/packages/builder/src/pages/[application]/data/table/index.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/table/index.svelte
rename to packages/builder/src/pages/[application]/data/table/index.svelte
diff --git a/packages/builder/src/pages/[application]/backend/view/[selectedView]/_layout.svelte b/packages/builder/src/pages/[application]/data/view/[selectedView]/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/view/[selectedView]/_layout.svelte
rename to packages/builder/src/pages/[application]/data/view/[selectedView]/_layout.svelte
diff --git a/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
rename to packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte b/packages/builder/src/pages/[application]/design/[page]/[screen]/_fallback.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
rename to packages/builder/src/pages/[application]/design/[page]/[screen]/_fallback.svelte
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
rename to packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte b/packages/builder/src/pages/[application]/design/[page]/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
rename to packages/builder/src/pages/[application]/design/[page]/_layout.svelte
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/index.svelte b/packages/builder/src/pages/[application]/design/[page]/index.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/frontend/[page]/index.svelte
rename to packages/builder/src/pages/[application]/design/[page]/index.svelte
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/frontend/_layout.svelte
rename to packages/builder/src/pages/[application]/design/_layout.svelte
diff --git a/packages/builder/src/pages/[application]/frontend/index.svelte b/packages/builder/src/pages/[application]/design/index.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/frontend/index.svelte
rename to packages/builder/src/pages/[application]/design/index.svelte

From d3714ea9ee6f75c89d5ccf6d2ffc11fdac2ea6a6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 15:11:46 +0100
Subject: [PATCH 03/52] Update top nav border style

---
 .../src/pages/[application]/_reset.svelte     | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 87759aef97..a39fd0ce62 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -30,10 +30,10 @@
   // e.g. if one of your screens is selected on front end, then
   // you browse to backend, when you click frontend, you will be
   // brought back to the same screen
-  const topItemNavigate = path => () => {
-    const activeTopNav = $layout.children.find(c => $isActive(c.path))
+  const topItemNavigate = (path) => () => {
+    const activeTopNav = $layout.children.find((c) => $isActive(c.path))
     if (!activeTopNav) return
-    store.update(state => {
+    store.update((state) => {
       if (!state.previousTopNavPath) state.previousTopNavPath = {}
       state.previousTopNavPath[
         activeTopNav.path
@@ -66,22 +66,26 @@
     </div>
     <div class="toprightnav">
       <SettingsLink />
-      <span
-        class:active={false}
-        class="topnavitemright"
+      <div class="topnavitemright">
+        <a target="_blank" href="https://docs.budibase.com">
+          <i class="ri-question-line" />
+        </a>
+      </div>
+      <div class="topnavitemright">
+        <a
+          target="_blank"
+          href="https://github.com/Budibase/budibase/discussions">
+          <i class="ri-discuss-line" />
+        </a>
+      </div>
+      <Button
+        secondary
         on:click={() => {
           document.cookie = 'budibase:token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
           window.open(`/${application}`)
         }}>
-        <PreviewIcon />
-      </span>
-      <span class="topnavitemright">
-        <a
-          target="_blank"
-          href="https://github.com/Budibase/budibase/discussions">
-          <i class="ri-question-fill help" />
-        </a>
-      </span>
+        Preview
+      </Button>
     </div>
   </div>
   <div class="beta">
@@ -120,7 +124,7 @@
     flex: 0 0 auto;
     height: 60px;
     background: #fff;
-    padding: 0px 20px 0 20px;
+    padding: 0 20px;
     display: flex;
     box-sizing: border-box;
     justify-content: space-between;
@@ -166,20 +170,19 @@
     font-weight: 500;
   }
 
-  .topnavitemright {
+  .topnavitemright a {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0 20px 0 0;
-    font-weight: 500;
-    font-size: 1rem;
-    height: 100%;
+    margin: 0 12px 0 0;
     display: flex;
-    flex: 1;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
   }
 
-  .topnavitemright:hover {
+  .topnavitemright a:hover {
     color: var(--ink);
     font-weight: 500;
   }
@@ -205,10 +208,13 @@
     text-transform: capitalize;
   }
 
-  .help {
-    font-size: 24px;
+  i {
+    font-size: 18px;
     color: var(--grey-7);
   }
+  i:hover {
+    color: var(--ink);
+  }
 
   .beta {
     position: absolute;

From 6bead1126483dfebb530e2265729b0737df967af Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 17:39:50 +0100
Subject: [PATCH 04/52] Update remix icons version to fix line chart icon

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

diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index 150d9e23b9..b4073c2d7e 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -7,7 +7,7 @@
 
 	<title>Budibase Builder</title>
 
-	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
+	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
   
 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
 	<link rel='stylesheet' href='/_builder/bundle.css'>

From 29dd32320d77db5bec6eaa71e66027f0b074a69a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 17:42:03 +0100
Subject: [PATCH 05/52] Update screen components hierarchy to use new common
 component styles

---
 .../src/components/common/NavItem.svelte      | 108 ++++++++++++++++++
 .../userInterface/ComponentsHierarchy.svelte  |  94 +++------------
 .../ComponentsHierarchyChildren.svelte        | 103 +++++------------
 .../userInterface/PageLayout.svelte           |  67 ++---------
 4 files changed, 159 insertions(+), 213 deletions(-)
 create mode 100644 packages/builder/src/components/common/NavItem.svelte

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
new file mode 100644
index 0000000000..7e21689c3f
--- /dev/null
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -0,0 +1,108 @@
+<script>
+  export let icon
+  export let withArrow = false
+  export let withActions = true
+  export let indentLevel = 0
+  export let text
+  export let border = true
+  export let selected = false
+  export let opened = false
+  export let draggable = false
+</script>
+
+<div
+  class="container"
+  class:border
+  class:selected
+  style={`padding-left: ${indentLevel * 18}px`}
+  {draggable}
+  on:dragend
+  on:dragstart
+  on:dragover
+  on:drop
+  on:click
+  ondragover="return false"
+  ondragenter="return false">
+  <div class="content">
+    {#if withArrow}
+      <div class:opened class="icon arrow">
+        <i class="ri-arrow-right-s-fill" />
+      </div>
+    {/if}
+    {#if icon}
+      <div class="icon"><i class={icon} /></div>
+    {/if}
+    <div class="text">{text}</div>
+    {#if withActions}
+      <div class="actions">
+        <slot />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .container {
+    border-radius: var(--border-radius-m);
+    cursor: pointer;
+    color: var(--grey-7);
+  }
+  .container.border {
+    border-top: 1px solid var(--grey-1);
+  }
+  .container.selected {
+    background-color: var(--grey-2);
+    color: var(--ink);
+  }
+  .container:hover {
+    background-color: var(--grey-1);
+  }
+  .container:hover .actions {
+    display: flex;
+  }
+
+  .content {
+    padding: 0 var(--spacing-m);
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
+  .icon {
+    font-size: 16px;
+    flex: 0 0 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .icon.arrow {
+    margin: 0 -2px 0 -6px;
+  }
+  .icon.arrow.opened {
+    transform: rotate(90deg);
+  }
+  .icon + .icon {
+    margin-left: -4px;
+  }
+
+  .text {
+    flex: 1 1 auto;
+    font-weight: 500;
+    font-size: var(--font-size-xs);
+  }
+
+  .actions {
+    display: none;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: relative;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index add2a99d6a..43a2c07bd9 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -1,13 +1,12 @@
 <script>
-  import { params, goto } from "@sveltech/routify"
+  import { goto } from "@sveltech/routify"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { trimCharsStart, trimChars } from "lodash/fp"
   import { pipe } from "components/common/core"
   import { store } from "builderStore"
-  import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
   import { writable } from "svelte/store"
+  import NavItem from "components/common/NavItem.svelte"
 
   export let screens = []
 
@@ -24,9 +23,7 @@
   let confirmDeleteDialog
   let componentToDelete = ""
 
-  const joinPath = join("/")
-
-  const normalizedName = name =>
+  const normalizedName = (name) =>
     pipe(name, [
       trimCharsStart("./"),
       trimCharsStart("~/"),
@@ -34,7 +31,7 @@
       trimChars(" "),
     ])
 
-  const changeScreen = screen => {
+  const changeScreen = (screen) => {
     store.setCurrentScreen(screen.props._instanceName)
     $goto(`./:page/${screen.props._instanceName}`)
   }
@@ -42,26 +39,15 @@
 
 <div class="root">
   {#each sortedScreens as screen}
-    <div
-      class="budibase__nav-item screen-header-row"
-      class:selected={$store.currentComponentInfo._id === screen.props._id}
-      on:click|stopPropagation={() => changeScreen(screen)}>
-      <span
-        class="icon"
-        class:rotate={$store.currentPreviewItem.name !== screen.props._instanceName}>
-        {#if screen.props._children.length}
-          <ArrowDownIcon />
-        {/if}
-      </span>
-
-      <i class="ri-artboard-2-fill icon" />
-
-      <span class="title">{screen.props._instanceName}</span>
-
-      <div class="dropdown-menu">
-        <ScreenDropdownMenu {screen} />
-      </div>
-    </div>
+    <NavItem
+      icon="ri-artboard-2-line"
+      text={screen.props._instanceName}
+      withArrow={screen.props._children.length}
+      selected={$store.currentComponentInfo._id === screen.props._id}
+      opened={$store.currentPreviewItem.name !== screen.props._id}
+      on:click={() => changeScreen(screen)}>
+      <ScreenDropdownMenu {screen} />
+    </NavItem>
 
     {#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children}
       <ComponentsHierarchyChildren
@@ -71,55 +57,3 @@
     {/if}
   {/each}
 </div>
-
-<style>
-  .root {
-    font-weight: 400;
-    color: var(--ink);
-  }
-
-  .screen-header-row {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .title {
-    margin-left: 14px;
-    font-size: 14px;
-    font-weight: 400;
-    flex: 1;
-  }
-
-  .icon {
-    display: inline-block;
-    transition: 0.2s;
-    font-size: 24px;
-    width: 18px;
-    color: var(--grey-7);
-  }
-
-  .icon:nth-of-type(2) {
-    width: 14px;
-    margin: 0 0 0 5px;
-  }
-
-  .rotate :global(svg) {
-    transform: rotate(-90deg);
-  }
-
-  .dropdown-menu {
-    display: none;
-    color: var(--ink);
-    padding: 0 5px;
-    width: 24px;
-    height: 24px;
-    border-style: none;
-    background: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    position: relative;
-  }
-
-  .budibase__nav-item:hover .dropdown-menu {
-    display: block;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 5f3a29d515..fce8b26512 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -4,12 +4,7 @@
   import { last } from "lodash/fp"
   import { pipe } from "components/common/core"
   import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
-  import {
-    XCircleIcon,
-    ChevronUpIcon,
-    ChevronDownIcon,
-    CopyIcon,
-  } from "../common/Icons"
+  import NavItem from "components/common/NavItem.svelte"
   import { getComponentDefinition } from "builderStore/storeUtils"
 
   export let components = []
@@ -38,13 +33,12 @@
   let dropUnderComponent
   let componentToDrop
 
-  const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
-  const get_name = s => (!s ? "" : last(s.split("/")))
+  const capitalise = (s) => s.substring(0, 1).toUpperCase() + s.substring(1)
+  const get_name = (s) => (!s ? "" : last(s.split("/")))
+  const get_capitalised_name = (name) => pipe(name, [get_name, capitalise])
+  const isScreenslot = (name) => name === "##builtin/screenslot"
 
-  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
-  const isScreenslot = name => name === "##builtin/screenslot"
-
-  const selectComponent = component => {
+  const selectComponent = (component) => {
     // Set current component
     store.selectComponent(component)
 
@@ -55,21 +49,21 @@
     $goto(`./:page/:screen/${path}`)
   }
 
-  const dragstart = component => e => {
+  const dragstart = (component) => (e) => {
     e.dataTransfer.dropEffect = "move"
-    dragDropStore.update(s => {
+    dragDropStore.update((s) => {
       s.componentToDrop = component
       return s
     })
   }
 
-  const dragover = (component, index) => e => {
+  const dragover = (component, index) => (e) => {
     const canHaveChildrenButIsEmpty =
       getComponentDefinition($store, component._component).children &&
       component._children.length === 0
 
     e.dataTransfer.dropEffect = "copy"
-    dragDropStore.update(s => {
+    dragDropStore.update((s) => {
       const isBottomHalf = e.offsetY > e.currentTarget.offsetHeight / 2
       s.targetComponent = component
       // only allow dropping inside when container type
@@ -108,7 +102,7 @@
         $dragDropStore.dropPosition
       )
     }
-    dragDropStore.update(s => {
+    dragDropStore.update((s) => {
       s.dropPosition = ""
       s.targetComponent = null
       s.componentToDrop = null
@@ -117,7 +111,7 @@
   }
 
   const dragend = () => {
-    dragDropStore.update(s => {
+    dragDropStore.update((s) => {
       s.dropPosition = ""
       s.targetComponent = null
       s.componentToDrop = null
@@ -134,29 +128,22 @@
           on:drop={drop}
           ondragover="return false"
           ondragenter="return false"
-          class="budibase__nav-item item drop-item"
-          style="margin-left: {level * 20 + 40}px" />
+          class="drop-item"
+          style="margin-left: {(level + 1) * 18}px" />
       {/if}
 
-      <div
-        class="budibase__nav-item item"
-        class:selected={currentComponent === component}
-        style="padding-left: {level * 20 + 40}px"
-        draggable={true}
+      <NavItem
+        draggable
         on:dragend={dragend}
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
         on:drop={drop}
-        ondragover="return false"
-        ondragenter="return false">
-        <div class="nav-item">
-          <i class="icon ri-arrow-right-circle-line" />
-          {isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
-        </div>
-        <div class="actions">
-          <ComponentDropdownMenu {component} />
-        </div>
-      </div>
+        text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
+        withArrow
+        indentLevel={level + 1}
+        selected={currentComponent === component}>
+        <ComponentDropdownMenu {component} />
+      </NavItem>
 
       {#if component._children}
         <svelte:self
@@ -172,8 +159,8 @@
           on:drop={drop}
           ondragover="return false"
           ondragenter="return false"
-          class="budibase__nav-item item drop-item"
-          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 2 : 0)) * 20 + 40}px" />
+          class="drop-item"
+          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 3 : 1)) * 18}px" />
       {/if}
     </li>
   {/each}
@@ -186,47 +173,9 @@
     margin: 0;
   }
 
-  .item {
-    display: grid;
-    grid-template-columns: 1fr auto auto auto;
-    padding: 0 var(--spacing-m);
-    margin: 0;
-    border-radius: var(--border-radius-m);
-    height: 36px;
-    align-items: center;
-  }
-
   .drop-item {
+    border-radius: var(--border-radius-m);
+    height: 32px;
     background: var(--blue-light);
-    height: 36px;
-  }
-
-  .actions {
-    display: none;
-    color: var(--ink);
-    border-style: none;
-    background: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    position: relative;
-  }
-
-  .item:hover {
-    background: var(--grey-1);
-    cursor: pointer;
-  }
-  .item:hover .actions {
-    display: block;
-  }
-
-  .nav-item {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    color: var(--ink);
-  }
-
-  .icon {
-    color: var(--grey-7);
-    margin-right: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index cebd445ce7..a8e36aa1ff 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -1,21 +1,9 @@
 <script>
   import { goto } from "@sveltech/routify"
-  // import { tick } from "svelte"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-
-  import {
-    last,
-    sortBy,
-    map,
-    trimCharsStart,
-    trimChars,
-    join,
-    compose,
-  } from "lodash/fp"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { pipe } from "components/common/core"
+  import NavItem from "components/common/NavItem.svelte"
+  import { last } from "lodash/fp"
   import { store } from "builderStore"
-  import { ArrowDownIcon, GridIcon } from "components/common/Icons/"
   import { writable } from "svelte/store"
 
   export let layout
@@ -24,13 +12,10 @@
   let componentToDelete = ""
 
   const dragDropStore = writable({})
-  const joinPath = join("/")
 
-  const lastPartOfName = c =>
+  const lastPartOfName = (c) =>
     c && last(c.name ? c.name.split("/") : c._component.split("/"))
 
-  const isComponentSelected = (current, comp) => current === comp
-
   $: _layout = {
     component: layout,
     title: lastPartOfName(layout),
@@ -42,18 +27,14 @@
   }
 </script>
 
-<div
-  class="budibase__nav-item root"
-  class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
-  on:click|stopPropagation={setCurrentScreenToLayout}>
-  <span
-    class="icon"
-    class:rotate={$store.currentPreviewItem.name !== _layout.title}>
-    <ArrowDownIcon />
-  </span>
-  <i class="ri-layout-3-fill icon-big" />
-  <span class="title">Master Screen</span>
-</div>
+<NavItem
+  border={false}
+  icon="ri-layout-3-line"
+  text="Master Screen"
+  withArrow
+  selected={$store.currentComponentInfo._id === _layout.component.props._id}
+  opened={$store.currentPreviewItem.name === _layout.title}
+  on:click={setCurrentScreenToLayout} />
 
 {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
   <ComponentsHierarchyChildren
@@ -62,29 +43,3 @@
     currentComponent={$store.currentComponentInfo}
     {dragDropStore} />
 {/if}
-
-<style>
-  .title {
-    margin-left: 10px;
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--ink);
-  }
-
-  .icon {
-    width: 24px;
-    display: inline-block;
-    transition: 0.2s;
-    width: 20px;
-    color: var(--grey-7);
-  }
-
-  .icon-big {
-    font-size: 20px;
-    color: var(--grey-7);
-  }
-
-  .rotate :global(svg) {
-    transform: rotate(-90deg);
-  }
-</style>

From 80e71bff91d0e73c0bbf613f55f798cc5845dd11 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 17:43:27 +0100
Subject: [PATCH 06/52] Update routing to use new page names

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

diff --git a/packages/builder/src/pages/[application]/index.svelte b/packages/builder/src/pages/[application]/index.svelte
index 4b5dbb6a3e..553908cb2e 100644
--- a/packages/builder/src/pages/[application]/index.svelte
+++ b/packages/builder/src/pages/[application]/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  $goto("../backend")
+  $goto("../data")
 </script>
 
 <!-- routify:options index=false -->

From 45b86353d2a247bed8c41fa4f55721e159b17646 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 17:43:52 +0100
Subject: [PATCH 07/52] Improve styles of frontend component blocks

---
 .../src/components/userInterface/ItemTab/Item.svelte       | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index de04bc5208..ce4f602f03 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -20,6 +20,7 @@
     border-radius: 5px;
     width: 120px;
     height: 80px;
+    color: var(--grey-7);
   }
 
   .item-item:hover {
@@ -35,16 +36,16 @@
   .item-text {
     display: flex;
     flex-direction: column;
+    margin-top: 5px;
   }
 
   .item-name {
-    font-size: 14px;
-    font-weight: 400;
+    font-size: 12px;
+    font-weight: 500;
     text-align: center;
   }
 
   i {
     font-size: 24px;
-    color: var(--grey-7);
   }
 </style>

From 664aacd402cc6f2be9fa6d210a62cbdc7240ca08 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 17:44:17 +0100
Subject: [PATCH 08/52] Fix top right settings icon styles

---
 .../src/components/settings/Link.svelte       | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index 3bb6d6e40d..f28dbae038 100644
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@@ -1,32 +1,36 @@
 <script>
   import SettingsModal from "./SettingsModal.svelte"
-  import { SettingsIcon } from "components/common/Icons/"
   import { Modal } from "@budibase/bbui"
 
   let modal
 </script>
 
-<span class="topnavitemright settings" on:click={modal.show}>
-  <SettingsIcon />
-</span>
+<div class="topnavitemright settings" on:click={modal.show}>
+  <i class="ri-settings-3-line" />
+</div>
 <Modal bind:this={modal} width="600px">
   <SettingsModal />
 </Modal>
 
 <style>
-  span:first-letter {
-    text-transform: capitalize;
+  i {
+    font-size: 18px;
+    color: var(--grey-7);
   }
   .topnavitemright {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0 20px 0 0;
+    margin: 0 12px 0 0;
     font-weight: 500;
     font-size: 1rem;
-    height: 100%;
     display: flex;
-    flex: 1;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
+  }
+  .topnavitemright:hover i {
+    color: var(--ink);
   }
 </style>

From 79cca1956abace23b46760994703b3d58ed17b38 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 17:44:45 +0100
Subject: [PATCH 09/52] Make OptionSelect styles in line with other components

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

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index aac5c44c07..1c3ee89213 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -6,13 +6,14 @@
   export let options = []
   export let value = ""
   export let styleBindingProperty
-  export let onChange = value => {}
+  export let onChange = (value) => {}
 
   let open = null
   let rotate = ""
   let select
   let selectMenu
   let icon
+  let width = 0
 
   let selectAnchor = null
   let dimensions = { top: 0, bottom: 0, left: 0 }
@@ -22,7 +23,7 @@
   let scrollTop = 0
   let containerEl = null
 
-  const handleStyleBind = value =>
+  const handleStyleBind = (value) =>
     !!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
 
   onMount(() => {
@@ -91,12 +92,13 @@
     "transform-origin": `center ${positionSide}`,
     [positionSide]: `${dimensions[positionSide]}px`,
     left: `${dimensions.left.toFixed(0)}px`,
+    width: `${width}px`,
   })
 
-  $: isOptionsObject = options.every(o => typeof o === "object")
+  $: isOptionsObject = options.every((o) => typeof o === "object")
 
   $: selectedOption = isOptionsObject
-    ? options.find(o => o.value === value)
+    ? options.find((o) => o.value === value)
     : {}
 
   $: if (open && selectMenu) {
@@ -108,6 +110,7 @@
 </script>
 
 <div
+  bind:clientWidth={width}
   tabindex="0"
   bind:this={select}
   class="bb-select-container"
@@ -164,19 +167,17 @@
 
   .bb-select-container {
     outline: none;
-    height: 36px;
     cursor: pointer;
-    font-size: 14px;
     overflow: hidden;
+    flex: 1 1 auto;
   }
 
   .bb-select-anchor {
     cursor: pointer;
     display: flex;
-    padding: 0px 12px;
-    height: 36px;
+    padding: var(--spacing-m);
     background-color: var(--grey-2);
-    border-radius: 5px;
+    border-radius: var(--border-radius-m);
     align-items: center;
     white-space: nowrap;
   }
@@ -184,8 +185,11 @@
   .bb-select-anchor > span {
     color: var(--ink);
     font-weight: 400;
-    width: 140px;
     overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--font-size-xs);
+    flex: 1 1 auto;
   }
 
   .bb-select-anchor > i {
@@ -208,7 +212,6 @@
     box-sizing: border-box;
     flex-direction: column;
     opacity: 0;
-    width: 160px;
     z-index: 2;
     color: var(--ink);
     font-weight: 400;
@@ -237,7 +240,7 @@
     padding: 5px 0px;
     cursor: pointer;
     padding-left: 10px;
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-xs);
   }
 
   li:hover {

From 1fac774521470ee0ed21e8f41b19cdbda1626134 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 17:46:21 +0100
Subject: [PATCH 10/52] Move components to above app preview

---
 .../ComponentSelectionList.svelte             | 48 ++++++++++++-------
 .../pages/[application]/design/_layout.svelte | 17 ++++---
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 404cfa102b..463c8ea448 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -9,15 +9,22 @@
   import Tab from "./ItemTab/Tab.svelte"
 
   const categories = components.categories
-  let selectedIndex
+  let selectedCategory
   let width
-  $: selectedCategory = selectedIndex == null ? null : categories[selectedIndex]
 
   const close = () => {
-    selectedIndex = null
+    selectedCategory = null
   }
 
-  const onComponentChosen = component => {
+  const onCategoryChosen = (category) => {
+    if (category.isCategory) {
+      selectedCategory = selectedCategory === category ? null : category
+    } else {
+      onComponentChosen(category)
+    }
+  }
+
+  const onComponentChosen = (component) => {
     store.addChildComponent(component._component, component.presetProps)
 
     // Get ID path
@@ -33,14 +40,15 @@
   <div
     class="container"
     bind:clientWidth={width}
-    class:border={selectedCategory == null}>
+    class:open={selectedCategory != null}>
     {#each categories as category, idx}
       <div
         class="category"
-        on:click={() => (selectedIndex = idx)}
+        on:click={() => onCategoryChosen(category)}
         class:active={selectedCategory === category}>
-        {category.name}
-        <i class="ri-arrow-down-s-line" />
+        {#if category.icon}<i class={category.icon} />{/if}
+        <span>{category.name}</span>
+        {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
       </div>
     {/each}
   </div>
@@ -49,7 +57,7 @@
     <div class="dropdown" transition:fly={{ y: -120 }}>
       <Tab
         list={selectedCategory}
-        on:selectItem={e => onComponentChosen(e.detail)} />
+        on:selectItem={(e) => onComponentChosen(e.detail)} />
     </div>
   {/if}
 </div>
@@ -61,33 +69,40 @@
   }
 
   .container {
-    padding: var(--spacing-xl) 40px;
+    padding: var(--spacing-l) 40px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     background-color: white;
     z-index: 1;
+    width: calc(100% - 80px);
+    overflow: hidden;
   }
-  .container.border {
-    border-bottom: 1px solid var(--grey-2);
+  .container.open {
   }
 
   .category {
-    color: var(--ink);
+    color: var(--grey-7);
     cursor: pointer;
-    margin-right: var(--spacing-xl);
+    margin-right: var(--spacing-l);
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-xs);
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-xs);
+  }
+  .category span {
     font-weight: 500;
+    user-select: none;
   }
   .category.active,
   .category:hover {
-    color: var(--blue);
+    color: var(--ink);
+  }
+  .category i:not(:last-child) {
+    font-size: 16px;
   }
 
   .overlay {
@@ -107,7 +122,6 @@
     width: calc(100% - 80px);
     background-color: white;
     padding: var(--spacing-xl) 40px;
-    border-bottom: 1px solid var(--grey-2);
     box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index 420a1bd2ea..34126e3687 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -32,19 +32,18 @@
     settingsView.show()
   }
 
-  const lastPartOfName = c => (c ? last(c.split("/")) : "")
+  const lastPartOfName = (c) => (c ? last(c.split("/")) : "")
 </script>
 
 <!-- routify:options index=1 -->
 <div class="root">
-
   <div class="ui-nav">
     <FrontendNavigatePane />
   </div>
 
   <div class="preview-pane">
     {#if $store.currentPageName && $store.currentPageName.length > 0}
-      <ComponentSelectionList/>
+      <ComponentSelectionList />
       <div class="preview-content">
         <CurrentItemPreview />
       </div>
@@ -56,7 +55,6 @@
       <ComponentPropertiesPanel />
     </div>
   {/if}
-
 </div>
 
 <slot />
@@ -64,8 +62,8 @@
 <style>
   .root {
     display: grid;
-    grid-template-columns: 300px 1fr 300px;
-    background: var(--grey-1);
+    grid-template-columns: 260px 1fr 260px;
+    background: var(--grey-2);
     align-items: stretch;
     height: calc(100vh - 60px);
   }
@@ -101,6 +99,13 @@
     grid-column: 3;
     background-color: var(--white);
     border-left: 1px solid var(--grey-2);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    padding: var(--spacing-xl);
   }
 
   .nav-group-header > div:nth-child(1) {

From 7271662cc80f29e7ee42a7fe849f20e3c361a2ac Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 17:46:44 +0100
Subject: [PATCH 11/52] Update routing to use new page names

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

diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 3fa42aeb7c..7bb5ac6a18 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -46,7 +46,7 @@
       return
     }
     $goto(
-      `/${$params.application}/backend/table/${tableId}/relationship/${row._id}/${fieldName}`
+      `/${$params.application}/data/table/${tableId}/relationship/${row._id}/${fieldName}`
     )
   }
 </script>

From e45f368de7f9082d9f21d19fec21d30109cf84b2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 17:47:07 +0100
Subject: [PATCH 12/52] Update component definition structure for new layout

---
 .../userInterface/temporaryPanelStructure.js  | 1935 ++++++++---------
 1 file changed, 955 insertions(+), 980 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index db1079b8ee..78258e99f3 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -20,118 +20,154 @@ import { all } from "./propertyCategories.js"
 export default {
   categories: [
     {
-      name: "Basic",
+      _component: "@budibase/standard-components/container",
+      name: "Container",
+      description: "This component contains things within itself",
+      icon: "ri-layout-column-line",
+      commonProps: {},
+      children: [],
+      properties: {
+        design: { ...all },
+        settings: [
+          {
+            key: "type",
+            label: "Type",
+            control: OptionSelect,
+            options: [
+              "article",
+              "aside",
+              "details",
+              "div",
+              "figure",
+              "figcaption",
+              "footer",
+              "header",
+              "main",
+              "mark",
+              "nav",
+              "paragraph",
+              "summary",
+            ],
+          },
+        ],
+      },
+    },
+    {
+      name: "Grid",
+      _component: "@budibase/standard-components/datagrid",
+      description:
+        "a datagrid component with functionality to add, remove and edit rows.",
+      icon: "ri-grid-line",
+      properties: {
+        design: { ...all },
+        settings: [
+          {
+            label: "Source",
+            key: "datasource",
+            control: TableViewSelect,
+          },
+          {
+            label: "Detail URL",
+            key: "detailUrl",
+            control: DetailScreenSelect,
+          },
+          {
+            label: "Editable",
+            key: "editable",
+            valueKey: "checked",
+            control: Checkbox,
+          },
+          {
+            label: "Theme",
+            key: "theme",
+            control: OptionSelect,
+            options: [
+              "alpine",
+              "alpine-dark",
+              "balham",
+              "balham-dark",
+              "material",
+            ],
+            placeholder: "alpine",
+          },
+          {
+            label: "Height",
+            key: "height",
+            defaultValue: "500",
+            control: Input,
+          },
+          {
+            label: "Pagination",
+            key: "pagination",
+            valueKey: "checked",
+            control: Checkbox,
+          },
+        ],
+      },
+      children: [],
+    },
+    {
+      name: "Repeater",
+      _component: "@budibase/standard-components/list",
+      description: "Renders all children once per row, of a given table",
+      icon: "ri-list-check-2",
+      properties: {
+        design: { ...all },
+        settings: [
+          {
+            label: "Data",
+            key: "datasource",
+            control: TableViewSelect,
+          },
+        ],
+      },
+      children: [],
+    },
+    {
+      _component: "@budibase/standard-components/button",
+      name: "Button",
+      description: "A basic html button that is ready for styling",
+      icon: "ri-share-box-line",
+      children: [],
+      properties: {
+        design: {
+          ...all,
+        },
+        settings: [
+          { label: "Text", key: "text", control: Input },
+          {
+            label: "Disabled",
+            key: "disabled",
+            valueKey: "checked",
+            control: Checkbox,
+          },
+          { label: "On Click", key: "onClick", control: Event },
+        ],
+      },
+    },
+    {
+      name: "Form",
+      icon: "ri-file-edit-line",
       isCategory: true,
       children: [
         {
-          _component: "@budibase/standard-components/container",
-          name: "Container",
-          description: "This component contains things within itself",
-          icon: "ri-layout-row-line",
-          commonProps: {},
-          children: [],
+          _component: "@budibase/standard-components/dataform",
+          name: "Form Basic",
+          icon: "ri-file-edit-line",
           properties: {
             design: { ...all },
-            settings: [
-              {
-                key: "type",
-                label: "Type",
-                control: OptionSelect,
-                options: [
-                  "article",
-                  "aside",
-                  "details",
-                  "div",
-                  "figure",
-                  "figcaption",
-                  "footer",
-                  "header",
-                  "main",
-                  "mark",
-                  "nav",
-                  "paragraph",
-                  "summary",
-                ],
-              },
-            ],
+            settings: [],
           },
         },
         {
-          _component: "@budibase/standard-components/embed",
-          icon: "ri-code-line",
-          name: "Embed",
-          description: "Embed content from 3rd party sources",
+          _component: "@budibase/standard-components/dataformwide",
+          name: "Form Wide",
+          icon: "ri-file-edit-line",
           properties: {
-            design: {
-              ...all,
-            },
-            settings: [{ label: "Embed", key: "embed", control: Input }],
+            design: { ...all },
+            settings: [],
           },
         },
-        {
-          name: "Text",
-          description: "This is a simple text component",
-          icon: "ri-t-box-line",
-          commonProps: {},
-          children: [
-            {
-              _component: "@budibase/standard-components/heading",
-              name: "Headline",
-              description: "A component for displaying heading text",
-              icon: "ri-heading",
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    key: "text",
-                    label: "Text",
-                    control: Input,
-                  },
-                  {
-                    key: "type",
-                    label: "Type",
-                    control: OptionSelect,
-                    options: ["h1", "h2", "h3", "h4", "h5", "h6"],
-                  },
-                ],
-              },
-            },
-            {
-              _component: "@budibase/standard-components/text",
-              name: "Paragraph",
-              description: "A component for displaying paragraph text.",
-              icon: "ri-paragraph",
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    label: "Text",
-                    key: "text",
-                    control: Input,
-                  },
-                  {
-                    label: "Type",
-                    key: "type",
-                    control: OptionSelect,
-                    options: [
-                      "none",
-                      "bold",
-                      "strong",
-                      "italic",
-                      "emphasis",
-                      "mark",
-                      "small",
-                      "del",
-                      "ins",
-                      "sub",
-                      "sup",
-                    ],
-                  },
-                ],
-              },
-            },
-          ],
-        },
         {
           _component: "@budibase/standard-components/input",
           name: "Textfield",
@@ -152,24 +188,777 @@ export default {
           },
         },
         {
-          _component: "@budibase/standard-components/button",
-          name: "Button",
-          description: "A basic html button that is ready for styling",
-          icon: "ri-share-box-line",
+          _component: "@budibase/standard-components/datepicker",
+          name: "Date Picker",
+          description: "A basic date picker component",
+          icon: "ri-calendar-line",
           children: [],
           properties: {
-            design: {
-              ...all,
-            },
+            design: { ...all },
+            settings: [
+              { label: "Placeholder", key: "placeholder", control: Input },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "Card",
+      icon: "ri-archive-drawer-line",
+      isCategory: true,
+      children: [
+        {
+          _component: "@budibase/standard-components/stackedlist",
+          name: "Stacked List",
+          icon: "ri-archive-drawer-line",
+          description:
+            "A basic card component that can contain content and actions.",
+          children: [],
+          properties: {
+            design: { ...all },
             settings: [
-              { label: "Text", key: "text", control: Input },
               {
-                label: "Disabled",
-                key: "disabled",
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "{{{context.Image}}}",
+              },
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "{{context.Heading}}",
+              },
+              {
+                label: "Text 1",
+                key: "text1",
+                control: Input,
+                placeholder: "{{context.Text 1}}",
+              },
+              {
+                label: "Text 2",
+                key: "text2",
+                control: Input,
+                placeholder: "{{context.Text 2}}",
+              },
+              {
+                label: "Text 3",
+                key: "text3",
+                control: Input,
+                placeholder: "{{context.Text 3}}",
+              },
+              {
+                label: "Link URL",
+                key: "destinationUrl",
+                control: ScreenSelect,
+                placeholder: "/table/_id",
+              },
+            ],
+          },
+        },
+        {
+          _component: "@budibase/standard-components/card",
+          name: "Vertical",
+          description:
+            "A basic card component that can contain content and actions.",
+          icon: "ri-layout-column-line",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "Image",
+              },
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "Heading",
+              },
+              {
+                label: "Description",
+                key: "description",
+                control: Input,
+                placeholder: "Description",
+              },
+              {
+                label: "Link Text",
+                key: "linkText",
+                control: Input,
+                placeholder: "Link Text",
+              },
+              {
+                label: "Link Url",
+                key: "linkUrl",
+                control: ScreenSelect,
+                placeholder: "Link URL",
+              },
+              {
+                label: "Link Color",
+                key: "color",
+                control: Input,
+                placeholder: "Link Color",
+              },
+              {
+                label: "Hover Color",
+                key: "linkHoverColor",
+                control: Input,
+                placeholder: "Hover Color",
+              },
+              {
+                label: "Image Height",
+                key: "imageHeight",
+                control: OptionSelect,
+                options: ["12rem", "16rem", "20rem", "24rem"],
+                placeholder: "Image Height",
+              },
+              {
+                label: "Card Width",
+                key: "cardWidth",
+                control: OptionSelect,
+                options: ["16rem", "20rem", "24rem"],
+                placeholder: "Card Width",
+              },
+            ],
+          },
+        },
+        {
+          _component: "@budibase/standard-components/cardhorizontal",
+          name: "Horizontal",
+          description:
+            "A basic card component that can contain content and actions.",
+          icon: "ri-layout-row-line",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "Image",
+              },
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "Heading",
+              },
+              {
+                label: "Description",
+                key: "description",
+                control: Input,
+                placeholder: "Description",
+              },
+              {
+                label: "Subtext",
+                key: "subtext",
+                control: Input,
+                placeholder: "Subtext",
+              },
+              {
+                label: "Link Text",
+                key: "linkText",
+                control: Input,
+                placeholder: "Link Text",
+              },
+              {
+                label: "Link Url",
+                key: "linkUrl",
+                control: ScreenSelect,
+                placeholder: "Link URL",
+              },
+              {
+                label: "Link Color",
+                key: "color",
+                control: Input,
+                placeholder: "Link Color",
+              },
+              {
+                label: "Hover Color",
+                key: "linkHoverColor",
+                control: Input,
+                placeholder: "Hover Color",
+              },
+              {
+                label: "Card Width",
+                key: "cardWidth",
+                control: OptionSelect,
+                options: [
+                  "24rem",
+                  "28rem",
+                  "32rem",
+                  "40rem",
+                  "48rem",
+                  "60rem",
+                  "100%",
+                ],
+                placeholder: "Card Height",
+              },
+              {
+                label: "Image Width",
+                key: "imageWidth",
+                control: OptionSelect,
+                options: ["8rem", "12rem", "16rem"],
+                placeholder: "Image Width",
+              },
+              {
+                label: "Image Height",
+                key: "imageHeight",
+                control: OptionSelect,
+                options: ["8rem", "12rem", "16rem", "auto"],
+                placeholder: "Image Height",
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "Chart",
+      icon: "ri-bar-chart-2-line",
+      isCategory: true,
+      children: [
+        {
+          name: "Donut",
+          _component: "@budibase/standard-components/donut",
+          description: "Donut chart",
+          icon: "ri-pie-chart-fill",
+          properties: {
+            settings: [
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Name Field",
+                key: "nameKey",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Value Field",
+                key: "valueKey",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Animate Chart",
+                key: "isAnimated",
                 valueKey: "checked",
                 control: Checkbox,
               },
-              { label: "onClick", key: "onClick", control: Event },
+              {
+                label: "Hover Highlight",
+                key: "hasHoverAnimation",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Keep Last Hover",
+                key: "hasLastHoverSliceHighlighted",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Colors",
+                key: "color",
+                control: OptionSelect,
+                options: [
+                  "britecharts",
+                  "blueGreen",
+                  "green",
+                  "grey",
+                  "orange",
+                  "pink",
+                  "purple",
+                  "red",
+                  "teal",
+                  "yellow",
+                ],
+              },
+              {
+                label: "External Radius",
+                key: "externalRadius",
+                control: Input,
+              },
+              {
+                label: "Internal Radius",
+                key: "internalRadius",
+                control: Input,
+              },
+              {
+                label: "Radius Offset",
+                key: "radiusHoverOffset ",
+                control: Input,
+              },
+              {
+                label: "Show Legend",
+                key: "useLegend ",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Horizontal Legend",
+                key: "horizontalLegend",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Legend Width",
+                key: "legendWidth",
+                control: Input,
+              },
+            ],
+          },
+        },
+        {
+          name: "Bar",
+          _component: "@budibase/standard-components/bar",
+          description: "Bar chart",
+          icon: "ri-bar-chart-fill",
+          properties: {
+            settings: [
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Name Label",
+                key: "nameLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Y Axis Label",
+                key: "yAxisLabel",
+                control: Input,
+              },
+              {
+                label: "X Axis Label",
+                key: "xAxisLabel",
+                control: Input,
+              },
+              {
+                label: "X Axis Label Offset",
+                key: "xAxisLabelOffset",
+                control: Input,
+              },
+              {
+                label: "Y Axis Label Offset",
+                key: "yAxisLabelOffset",
+                control: Input,
+              },
+              {
+                label: "Enable Labels",
+                key: "enableLabels",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Colors",
+                key: "color",
+                control: OptionSelect,
+                options: [
+                  { label: "Normal", value: "britecharts" },
+                  { label: "Blue Green", value: "blueGreen" },
+                  { label: "Green", value: "green" },
+                  { label: "Grey", value: "grey" },
+                  { label: "Orange", value: "orange" },
+                  { label: "Pink", value: "pink" },
+                  { label: "Purple", value: "purple" },
+                  { label: "Red", value: "red" },
+                  { label: "Teal", value: "teal" },
+                  { label: "Yellow", value: "yellow" },
+                ],
+              },
+              {
+                label: "Gradients",
+                key: "gradient",
+                control: OptionSelect,
+                options: [
+                  { value: "", label: "None" },
+                  { value: "bluePurple", label: "Blue Purple" },
+                  { value: "greenBlue", label: "Green Blue" },
+                  { value: "orangePink", label: "Orange Pink" },
+                ],
+              },
+              {
+                label: "Highlight Single Bar",
+                key: "hasSingleBarHighlight",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+              },
+              {
+                label: "Animate",
+                key: "isAnimate",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Horizontal",
+                key: "isHorizontal",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Label Number Format",
+                key: "labelsNumberFormat",
+                control: Input,
+              },
+            ],
+          },
+        },
+        {
+          name: "Groupedbar",
+          _component: "@budibase/standard-components/groupedbar",
+          description: "Groupedbar chart",
+          icon: "ri-bar-chart-grouped-fill",
+          properties: {
+            settings: [
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Name Label",
+                key: "nameLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Group Label",
+                key: "groupLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Color",
+                key: "color",
+                control: OptionSelect,
+                options: [
+                  "britecharts",
+                  "blueGreen",
+                  "green",
+                  "grey",
+                  "orange",
+                  "pink",
+                  "purple",
+                  "red",
+                  "teal",
+                  "yellow",
+                ],
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+              },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Aspect Ratio",
+                key: "aspectRatio",
+                control: Input,
+              },
+              {
+                label: "Grid",
+                key: "grid",
+                control: OptionSelect,
+                options: ["vertical", "horizontal", "full"],
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                control: Input,
+              },
+              {
+                label: "Y Ticks",
+                key: "yTicks",
+                control: Input,
+              },
+              {
+                label: "Y Tick Text Offset",
+                key: "yTickTextOffset",
+                control: Input,
+              },
+              {
+                label: "Is Animated",
+                key: "isAnimated",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Is Horizontal",
+                key: "isHorizontal",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Tooltip Title",
+                key: "tooltipTitle",
+                control: Input,
+              },
+            ],
+          },
+        },
+        {
+          name: "Line",
+          _component: "@budibase/standard-components/line",
+          description: "Line chart",
+          icon: "ri-line-chart-line",
+          properties: {
+            settings: [
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Topic Label",
+                key: "topicLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Date Label",
+                key: "dateLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Colors",
+                key: "color",
+                control: OptionSelect,
+                options: [
+                  "britecharts",
+                  "blueGreen",
+                  "green",
+                  "grey",
+                  "orange",
+                  "pink",
+                  "purple",
+                  "red",
+                  "teal",
+                  "yellow",
+                ],
+              },
+              {
+                label: "Gradients",
+                key: "lineGradient",
+                control: OptionSelect,
+                options: [
+                  { value: "", label: "None" },
+                  { value: "bluePurple", label: "Blue Purple" },
+                  { value: "greenBlue", label: "Green Blue" },
+                  { value: "orangePink", label: "Orange Pink" },
+                ],
+              },
+              {
+                label: "Line Curve",
+                key: "lineCurve",
+                control: OptionSelect,
+                options: [
+                  "linear",
+                  "basis",
+                  "natural",
+                  "monotoneX",
+                  "monotoneY",
+                  "step",
+                  "stepAfter",
+                  "stepBefore",
+                  "cardinal",
+                  "catmullRom",
+                ],
+              },
+              {
+                label: "X Axis Value Type",
+                key: "xAxisValueType",
+                control: OptionSelect,
+                options: ["date", "number"],
+              },
+              {
+                label: "Grid",
+                key: "grid",
+                control: OptionSelect,
+                options: ["vertical", "horizontal", "full"],
+              },
+              {
+                label: "X Axis Label",
+                key: "xAxisLabel",
+                control: Input,
+              },
+              {
+                label: "Y Axis Label",
+                key: "yAxisLabel",
+                control: Input,
+              },
+              {
+                label: "Show All Datapoints",
+                key: "shouldShowAllDataPoints",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+              },
+              {
+                label: "Is Animated",
+                key: "isAnimated",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Locale",
+                key: "locale",
+                control: OptionSelect,
+                options: ["en-GB", "en-US"],
+              },
+              {
+                label: "X Axis Value Type",
+                key: "xAxisValueType",
+                control: OptionSelect,
+                options: ["date", "numeric"],
+              },
+              {
+                label: "X Axis Format",
+                key: "xAxisFormat",
+                control: OptionSelect,
+                options: [
+                  "day-month",
+                  "minute-hour",
+                  "hour-daymonth",
+                  "month-year",
+                  "custom",
+                ],
+              },
+              {
+                label: "X Axis Custom Format",
+                key: "xAxisCustomFormat",
+                control: Input,
+              },
+              {
+                label: "Tooltip Title",
+                key: "tooltipTitle",
+                control: Input,
+              },
+              {
+                label: "X Ticks",
+                key: "xTicks",
+                control: Input,
+              },
+              {
+                label: "Y Ticks",
+                key: "yTicks",
+                control: Input,
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "Elements",
+      icon: "ri-paragraph",
+      isCategory: true,
+      children: [
+        {
+          _component: "@budibase/standard-components/heading",
+          name: "Headline",
+          icon: "ri-heading",
+          description: "A component for displaying heading text",
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                key: "text",
+                label: "Text",
+                control: Input,
+              },
+              {
+                key: "type",
+                label: "Type",
+                control: OptionSelect,
+                options: ["h1", "h2", "h3", "h4", "h5", "h6"],
+              },
+            ],
+          },
+        },
+        {
+          _component: "@budibase/standard-components/text",
+          name: "Paragraph",
+          description: "A component for displaying paragraph text.",
+          icon: "ri-paragraph",
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Text",
+                key: "text",
+                control: Input,
+              },
+              {
+                label: "Type",
+                key: "type",
+                control: OptionSelect,
+                options: [
+                  "none",
+                  "bold",
+                  "strong",
+                  "italic",
+                  "emphasis",
+                  "mark",
+                  "small",
+                  "del",
+                  "ins",
+                  "sub",
+                  "sup",
+                ],
+              },
             ],
           },
         },
@@ -184,6 +973,26 @@ export default {
             settings: [{ label: "URL", key: "url", control: Input }],
           },
         },
+        {
+          _component: "@budibase/standard-components/link",
+          name: "Link",
+          description: "A basic link component for internal and external links",
+          icon: "ri-link",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [
+              { label: "Text", key: "text", control: Input },
+              { label: "Url", key: "url", control: ScreenSelect },
+              {
+                label: "New Tab",
+                key: "openInNewTab",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+            ],
+          },
+        },
         {
           _component: "@budibase/standard-components/icon",
           name: "Icon",
@@ -220,880 +1029,22 @@ export default {
           },
         },
         {
-          _component: "@budibase/standard-components/link",
-          name: "Link",
-          description: "A basic link component for internal and external links",
-          icon: "ri-link",
-          children: [],
+          _component: "@budibase/standard-components/embed",
+          icon: "ri-code-line",
+          name: "Embed",
+          description: "Embed content from 3rd party sources",
           properties: {
-            design: { ...all },
-            settings: [
-              { label: "Text", key: "text", control: Input },
-              { label: "Url", key: "url", control: ScreenSelect },
-              {
-                label: "Open New Tab",
-                key: "openInNewTab",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-            ],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/datepicker",
-          name: "Date Picker",
-          description: "A basic date picker component",
-          icon: "ri-calendar-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              { label: "Placeholder", key: "placeholder", control: Input },
-            ],
+            design: {
+              ...all,
+            },
+            settings: [{ label: "Embed", key: "embed", control: Input }],
           },
         },
       ],
     },
     {
-      name: "Blocks",
-      isCategory: true,
-      children: [
-        {
-          name: "List",
-          _component: "@budibase/standard-components/list",
-          description: "Renders all children once per row, of a given table",
-          icon: "ri-file-list-line",
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-            ],
-          },
-          children: [],
-        },
-        {
-          name: "Grid",
-          _component: "@budibase/standard-components/datagrid",
-          description:
-            "a datagrid component with functionality to add, remove and edit rows.",
-          icon: "ri-file-list-line",
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Source",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Detail URL",
-                key: "detailUrl",
-                control: DetailScreenSelect,
-              },
-              {
-                label: "Editable",
-                key: "editable",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-              {
-                label: "Theme",
-                key: "theme",
-                control: OptionSelect,
-                options: [
-                  "alpine",
-                  "alpine-dark",
-                  "balham",
-                  "balham-dark",
-                  "material",
-                ],
-                placeholder: "alpine",
-              },
-              {
-                label: "Height",
-                key: "height",
-                defaultValue: "500",
-                control: Input,
-              },
-              {
-                label: "Pagination",
-                key: "pagination",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-            ],
-          },
-          children: [],
-        },
-        {
-          _component: "@budibase/standard-components/stackedlist",
-          name: "Stacked List",
-          description:
-            "A basic card component that can contain content and actions.",
-          icon: "ri-archive-drawer-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Image",
-                key: "imageUrl",
-                control: Input,
-                placeholder: "{{{context.Image}}}",
-              },
-              {
-                label: "Heading",
-                key: "heading",
-                control: Input,
-                placeholder: "{{context.Heading}}",
-              },
-              {
-                label: "Text 1",
-                key: "text1",
-                control: Input,
-                placeholder: "{{context.Text 1}}",
-              },
-              {
-                label: "Text 2",
-                key: "text2",
-                control: Input,
-                placeholder: "{{context.Text 2}}",
-              },
-              {
-                label: "Text 3",
-                key: "text3",
-                control: Input,
-                placeholder: "{{context.Text 3}}",
-              },
-              {
-                label: "destinationUrl",
-                key: "destinationUrl",
-                control: ScreenSelect,
-                placeholder: "/table/_id",
-              },
-            ],
-          },
-        },
-        {
-          name: "Card",
-          description: "Card components",
-          icon: "ri-layout-bottom-line",
-          commonProps: {},
-          children: [
-            {
-              _component: "@budibase/standard-components/card",
-              name: "Vertical",
-              description:
-                "A basic card component that can contain content and actions.",
-              icon: "ri-layout-column-line",
-              children: [],
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    label: "Image",
-                    key: "imageUrl",
-                    control: Input,
-                    placeholder: "Image",
-                  },
-                  {
-                    label: "Heading",
-                    key: "heading",
-                    control: Input,
-                    placeholder: "Heading",
-                  },
-                  {
-                    label: "Description",
-                    key: "description",
-                    control: Input,
-                    placeholder: "Description",
-                  },
-                  {
-                    label: "Link Text",
-                    key: "linkText",
-                    control: Input,
-                    placeholder: "Link Text",
-                  },
-                  {
-                    label: "Link Url",
-                    key: "linkUrl",
-                    control: ScreenSelect,
-                    placeholder: "Link URL",
-                  },
-                  {
-                    label: "Link Color",
-                    key: "color",
-                    control: Input,
-                    placeholder: "Link Color",
-                  },
-                  {
-                    label: "Hover Color",
-                    key: "linkHoverColor",
-                    control: Input,
-                    placeholder: "Hover Color",
-                  },
-                  {
-                    label: "Image Height",
-                    key: "imageHeight",
-                    control: OptionSelect,
-                    options: ["12rem", "16rem", "20rem", "24rem"],
-                    placeholder: "Image Height",
-                  },
-                  {
-                    label: "Card Width",
-                    key: "cardWidth",
-                    control: OptionSelect,
-                    options: ["16rem", "20rem", "24rem"],
-                    placeholder: "Card Width",
-                  },
-                ],
-              },
-            },
-            {
-              _component: "@budibase/standard-components/cardhorizontal",
-              name: "Horizontal",
-              description:
-                "A basic card component that can contain content and actions.",
-              icon: "ri-layout-row-line",
-              children: [],
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    label: "Image",
-                    key: "imageUrl",
-                    control: Input,
-                    placeholder: "Image",
-                  },
-                  {
-                    label: "Heading",
-                    key: "heading",
-                    control: Input,
-                    placeholder: "Heading",
-                  },
-                  {
-                    label: "Description",
-                    key: "description",
-                    control: Input,
-                    placeholder: "Description",
-                  },
-                  {
-                    label: "Subtext",
-                    key: "subtext",
-                    control: Input,
-                    placeholder: "Subtext",
-                  },
-                  {
-                    label: "Link Text",
-                    key: "linkText",
-                    control: Input,
-                    placeholder: "Link Text",
-                  },
-                  {
-                    label: "Link Url",
-                    key: "linkUrl",
-                    control: ScreenSelect,
-                    placeholder: "Link URL",
-                  },
-                  {
-                    label: "Link Color",
-                    key: "color",
-                    control: Input,
-                    placeholder: "Link Color",
-                  },
-                  {
-                    label: "Hover Color",
-                    key: "linkHoverColor",
-                    control: Input,
-                    placeholder: "Hover Color",
-                  },
-                  {
-                    label: "Card Width",
-                    key: "cardWidth",
-                    control: OptionSelect,
-                    options: [
-                      "24rem",
-                      "28rem",
-                      "32rem",
-                      "40rem",
-                      "48rem",
-                      "60rem",
-                      "100%",
-                    ],
-                    placeholder: "Card Height",
-                  },
-                  {
-                    label: "Image Width",
-                    key: "imageWidth",
-                    control: OptionSelect,
-                    options: ["8rem", "12rem", "16rem"],
-                    placeholder: "Image Width",
-                  },
-                  {
-                    label: "Image Height",
-                    key: "imageHeight",
-                    control: OptionSelect,
-                    options: ["8rem", "12rem", "16rem", "auto"],
-                    placeholder: "Image Height",
-                  },
-                ],
-              },
-            },
-          ],
-        },
-        {
-          name: "Form",
-          description: "A component that generates a form from your data.",
-          icon: "ri-file-edit-line",
-          commonProps: {},
-          children: [
-            {
-              _component: "@budibase/standard-components/dataform",
-              name: "Form Basic",
-              icon: "ri-file-edit-line",
-              properties: {
-                design: { ...all },
-                settings: [],
-              },
-            },
-            {
-              _component: "@budibase/standard-components/dataformwide",
-              name: "Form Wide",
-              icon: "ri-file-edit-line",
-              properties: {
-                design: { ...all },
-                settings: [],
-              },
-            },
-          ],
-        },
-        {
-          name: "Chart",
-          description: "Shiny chart",
-          icon: "ri-bar-chart-fill",
-          children: [
-            {
-              name: "Donut",
-              _component: "@budibase/standard-components/donut",
-              description: "Donut chart",
-              icon: "ri-pie-chart-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Name Field",
-                    key: "nameKey",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Value Field",
-                    key: "valueKey",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Animate Chart",
-                    key: "isAnimated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Hover Highlight",
-                    key: "hasHoverAnimation",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Keep Last Hover",
-                    key: "hasLastHoverSliceHighlighted",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "External Radius",
-                    key: "externalRadius",
-                    control: Input,
-                  },
-                  {
-                    label: "Internal Radius",
-                    key: "internalRadius",
-                    control: Input,
-                  },
-                  {
-                    label: "Radius Offset",
-                    key: "radiusHoverOffset ",
-                    control: Input,
-                  },
-                  {
-                    label: "Show Legend",
-                    key: "useLegend ",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Horizontal Legend",
-                    key: "horizontalLegend",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Legend Width",
-                    key: "legendWidth",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Bar",
-              _component: "@budibase/standard-components/bar",
-              description: "Bar chart",
-              icon: "ri-bar-chart-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Enable Labels",
-                    key: "enableLabels",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      { label: "Normal", value: "britecharts" },
-                      { label: "Blue Green", value: "blueGreen" },
-                      { label: "Green", value: "green" },
-                      { label: "Grey", value: "grey" },
-                      { label: "Orange", value: "orange" },
-                      { label: "Pink", value: "pink" },
-                      { label: "Purple", value: "purple" },
-                      { label: "Red", value: "red" },
-                      { label: "Teal", value: "teal" },
-                      { label: "Yellow", value: "yellow" },
-                    ],
-                  },
-                  {
-                    label: "Gradients",
-                    key: "gradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Highlight Single Bar",
-                    key: "hasSingleBarHighlight",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Animate",
-                    key: "isAnimate",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Horizontal",
-                    key: "isHorizontal",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Label Number Format",
-                    key: "labelsNumberFormat",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Groupedbar",
-              _component: "@budibase/standard-components/groupedbar",
-              description: "Groupedbar chart",
-              icon: "ri-bar-chart-grouped-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Group Label",
-                    key: "groupLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Color",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Tick Text Offset",
-                    key: "yTickTextOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Is Horizontal",
-                    key: "isHorizontal",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Tooltip Title",
-                    key: "tooltipTitle",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Line",
-              _component: "@budibase/standard-components/line",
-              description: "Line chart",
-              icon: "ri-line-chart-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Topic Label",
-                    key: "topicLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Date Label",
-                    key: "dateLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Gradients",
-                    key: "lineGradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Line Curve",
-                    key: "lineCurve",
-                    control: OptionSelect,
-                    options: [
-                      "linear",
-                      "basis",
-                      "natural",
-                      "monotoneX",
-                      "monotoneY",
-                      "step",
-                      "stepAfter",
-                      "stepBefore",
-                      "cardinal",
-                      "catmullRom",
-                    ],
-                  },
-                  {
-                    label: "X Axis Value Type",
-                    key: "xAxisValueType",
-                    control: OptionSelect,
-                    options: ["date", "number"],
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Show All Datapoints",
-                    key: "shouldShowAllDataPoints",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: OptionSelect,
-                    options: ["en-GB", "en-US"],
-                  },
-                  {
-                    label: "X Axis Value Type",
-                    key: "xAxisValueType",
-                    control: OptionSelect,
-                    options: ["date", "numeric"],
-                  },
-                  {
-                    label: "X Axis Format",
-                    key: "xAxisFormat",
-                    control: OptionSelect,
-                    options: [
-                      "day-month",
-                      "minute-hour",
-                      "hour-daymonth",
-                      "month-year",
-                      "custom",
-                    ],
-                  },
-                  {
-                    label: "X Axis Custom Format",
-                    key: "xAxisCustomFormat",
-                    control: Input,
-                  },
-                  {
-                    label: "Tooltip Title",
-                    key: "tooltipTitle",
-                    control: Input,
-                  },
-                  {
-                    label: "X Ticks",
-                    key: "xTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-          ],
-        },
-        // {
-        //  name: "Data List",
-        //  _component: "@budibase/standard-components/datalist",
-        //  description: "Shiny list",
-        //  icon: "ri-file-list-line",
-        //  properties: {
-        //   design: { ...all },
-        //   settings: [{ label: "Table", key: "table", control: TableSelect }],
-        //  },
-        //  children: [],
-        // },
-        {
-          name: "Row Detail",
-          _component: "@budibase/standard-components/rowdetail",
-          description:
-            "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
-          icon: "ri-profile-line",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "table", control: TableSelect }],
-          },
-          children: [],
-        },
-        {
-          name: "New Row",
-          _component: "@budibase/standard-components/newrow",
-          description:
-            "Sets up a new row for creation, which can be used with {{ context }}, in children",
-          icon: "ri-profile-line",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "table", control: TableSelect }],
-          },
-          children: [],
-        },
-      ],
-    },
-    {
-      name: "Layouts",
+      name: "Other",
+      icon: "ri-more-2-line",
       isCategory: true,
       children: [
         {
@@ -1152,6 +1103,30 @@ export default {
             ],
           },
         },
+        {
+          name: "Row Detail",
+          _component: "@budibase/standard-components/rowdetail",
+          description:
+            "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
+          icon: "ri-profile-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Table", key: "table", control: TableSelect }],
+          },
+          children: [],
+        },
+        {
+          name: "New Row",
+          _component: "@budibase/standard-components/newrow",
+          description:
+            "Sets up a new row for creation, which can be used with {{ context }}, in children",
+          icon: "ri-profile-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Table", key: "table", control: TableSelect }],
+          },
+          children: [],
+        },
       ],
     },
   ],

From 9ab3d9ff2ad5cfa12cf16f56be4db0f6db35b3ea Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 17:47:49 +0100
Subject: [PATCH 13/52] Update front end column structure layout and width to
 increase preview space

---
 .../ComponentPropertiesPanel.svelte           | 58 +++++------
 .../userInterface/DesignView.svelte           |  4 +-
 .../userInterface/PropertyControl.svelte      | 12 +--
 .../userInterface/PropertyGroup.svelte        | 31 ++++--
 .../userInterface/SettingsView.svelte         | 96 ++++++++++---------
 5 files changed, 105 insertions(+), 96 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 1331ce0bdb..dead297956 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -20,7 +20,7 @@
   $: componentPropDefinition =
     flattenedPanel.find(
       //use for getting controls for each component property
-      c => c._component === componentInstance._component
+      (c) => c._component === componentInstance._component
     ) || {}
 
   $: panelDefinition =
@@ -48,8 +48,8 @@
 
   function flattenComponents(props) {
     const components = []
-    props.forEach(comp =>
-      walkProps(comp, c => {
+    props.forEach((comp) =>
+      walkProps(comp, (c) => {
         if ("_component" in c) {
           components.push(c)
         }
@@ -63,41 +63,31 @@
   }
 </script>
 
-<div class="root">
-  <CategoryTab
-    onClick={category => (selectedCategory = category)}
-    {categories}
-    {selectedCategory} />
+<CategoryTab
+  onClick={(category) => (selectedCategory = category)}
+  {categories}
+  {selectedCategory} />
 
-  {#if displayName}
-    <div class="instance-name">{componentInstance._instanceName}</div>
+{#if displayName}
+  <div class="instance-name">{componentInstance._instanceName}</div>
+{/if}
+
+<div class="component-props-container">
+  {#if selectedCategory.value === 'design'}
+    <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
+  {:else if selectedCategory.value === 'settings'}
+    <SettingsView
+      {componentInstance}
+      {componentDefinition}
+      {panelDefinition}
+      displayNameField={displayName}
+      onChange={store.setComponentProp}
+      onScreenPropChange={store.setPageOrScreenProp}
+      screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
   {/if}
-
-  <div class="component-props-container">
-    {#if selectedCategory.value === 'design'}
-      <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
-    {:else if selectedCategory.value === 'settings'}
-      <SettingsView
-        {componentInstance}
-        {componentDefinition}
-        {panelDefinition}
-        displayNameField={displayName}
-        onChange={store.setComponentProp}
-        onScreenPropChange={store.setPageOrScreenProp}
-        screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
-    {/if}
-  </div>
 </div>
 
 <style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    box-sizing: border-box;
-  }
-
   .title > div:nth-child(1) {
     grid-column-start: name;
     color: var(--ink);
@@ -108,7 +98,6 @@
   }
 
   .component-props-container {
-    margin-top: 16px;
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
@@ -118,7 +107,6 @@
   }
 
   .instance-name {
-    margin-top: 20px;
     font-size: 14px;
     font-weight: 500;
     color: var(--grey-7);
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index b783b38481..34f734ced9 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -12,7 +12,7 @@
   let propGroup = null
   let currentGroup
 
-  const getProperties = name => panelDefinition[name]
+  const getProperties = (name) => panelDefinition[name]
 
   function onChange(category) {
     selectedCategory = category
@@ -61,10 +61,10 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
+    gap: var(--spacing-m);
   }
 
   .design-view-state-categories {
-    flex: 0 0 50px;
   }
 
   .positioned-wrapper {
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 8d21e6fc82..c11ec6a0cb 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -78,7 +78,7 @@
   }
 
   //Incase the component has a different value key name
-  const handlevalueKey = value =>
+  const handlevalueKey = (value) =>
     props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>
 
@@ -89,8 +89,8 @@
       this={control}
       {componentInstance}
       {...handlevalueKey(value)}
-      on:change={val => handleChange(key, val)}
-      onChange={val => handleChange(key, val)}
+      on:change={(val) => handleChange(key, val)}
+      onChange={(val) => handleChange(key, val)}
       {...props}
       name={key} />
   </div>
@@ -109,7 +109,7 @@
     <BindingDropdown
       {...handlevalueKey(value)}
       close={dropdown.hide}
-      on:update={e => (temporaryBindableValue = e.detail)}
+      on:update={(e) => (temporaryBindableValue = e.detail)}
       {bindableProperties} />
   </DropdownMenu>
 {/if}
@@ -119,16 +119,14 @@
     position: relative;
     display: flex;
     flex-flow: row;
-    margin: 8px 0;
     align-items: center;
   }
-
   .label {
     display: flex;
     align-items: center;
     font-size: 12px;
     font-weight: 400;
-    flex: 0 0 100px;
+    flex: 0 0 80px;
     text-align: left;
     color: var(--ink);
     margin-right: auto;
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 0da68c51d0..37b7a11ea2 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -14,13 +14,26 @@
 </script>
 
 <DetailSummary {name} on:open show={open}>
-  {#each properties as props}
-    <PropertyControl
-      label={props.label}
-      control={props.control}
-      key={props.key}
-      value={style[props.key]}
-      onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-      props={{ ...excludeProps(props, ['control', 'label']) }} />
-  {/each}
+  <div>
+    {#each properties as props}
+      <PropertyControl
+        label={props.label}
+        control={props.control}
+        key={props.key}
+        value={style[props.key]}
+        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
+        props={{ ...excludeProps(props, ['control', 'label']) }} />
+    {/each}
+  </div>
 </DetailSummary>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-s);
+    margin-top: var(--spacing-m);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index d821f1f2e2..fd4733c24e 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -18,7 +18,7 @@
   let pageScreenProps = ["title", "favicon", "description", "route"]
   let duplicateName = false
 
-  const propExistsOnComponentDef = prop =>
+  const propExistsOnComponentDef = (prop) =>
     pageScreenProps.includes(prop) || prop in componentDefinition.props
 
   function handleChange(key, data) {
@@ -47,10 +47,10 @@
   $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
   $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
 
-  const isDuplicateName = name => {
+  const isDuplicateName = (name) => {
     let duplicate = false
 
-    const lookForDuplicate = rootPops => {
+    const lookForDuplicate = (rootPops) => {
       walkProps(rootPops, (inst, cancel) => {
         if (inst._instanceName === name && inst._id !== componentInstance._id) {
           duplicate = true
@@ -85,50 +85,60 @@
   }
 </script>
 
-{#if screenOrPageInstance}
-  {#each screenOrPageDefinition as def}
-    <PropertyControl
-      bindable={false}
-      control={def.control}
-      label={def.label}
-      key={def.key}
-      value={screenOrPageInstance[def.key]}
-      onChange={onScreenPropChange}
-      props={{ ...excludeProps(def, ['control', 'label']) }} />
-  {/each}
-{/if}
-
-{#if displayNameField}
-  <PropertyControl
-    control={Input}
-    label="Name"
-    key="_instanceName"
-    value={componentInstance._instanceName}
-    onChange={onInstanceNameChange} />
-  {#if duplicateName}
-    <span class="duplicate-name">Name must be unique</span>
-  {/if}
-{/if}
-
-{#if panelDefinition && panelDefinition.length > 0}
-  {#each panelDefinition as definition}
-    {#if canRenderControl(definition.key, definition.dependsOn)}
+<div class="settings-view-container">
+  {#if screenOrPageInstance}
+    {#each screenOrPageDefinition as def}
       <PropertyControl
-        control={definition.control}
-        label={definition.label}
-        key={definition.key}
-        value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
-        {componentInstance}
-        {onChange}
-        props={{ ...excludeProps(definition, ['control', 'label']) }} />
+        bindable={false}
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={screenOrPageInstance[def.key]}
+        onChange={onScreenPropChange}
+        props={{ ...excludeProps(def, ['control', 'label']) }} />
+    {/each}
+  {/if}
+
+  {#if displayNameField}
+    <PropertyControl
+      control={Input}
+      label="Name"
+      key="_instanceName"
+      value={componentInstance._instanceName}
+      onChange={onInstanceNameChange} />
+    {#if duplicateName}
+      <span class="duplicate-name">Name must be unique</span>
     {/if}
-  {/each}
-{:else}
-  <div>This component does not have any settings.</div>
-{/if}
+  {/if}
+
+  {#if panelDefinition && panelDefinition.length > 0}
+    {#each panelDefinition as definition}
+      {#if canRenderControl(definition.key, definition.dependsOn)}
+        <PropertyControl
+          control={definition.control}
+          label={definition.label}
+          key={definition.key}
+          value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
+          {componentInstance}
+          {onChange}
+          props={{ ...excludeProps(definition, ['control', 'label']) }} />
+      {/if}
+    {/each}
+  {:else}
+    <div class="empty">This component does not have any settings.</div>
+  {/if}
+</div>
 
 <style>
-  div {
+  .settings-view-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    gap: var(--spacing-s);
+  }
+
+  .empty {
     font-size: var(--font-size-s);
     margin-top: var(--spacing-m);
     color: var(--grey-6);

From 3b11fe6ab0f2f3837a6f565dcfed3cb9276f89a7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 18:11:33 +0100
Subject: [PATCH 14/52] Update page button styles

---
 .../components/userInterface/PagesList.svelte |  13 +-
 .../userInterface/UserInterfaceRoot.svelte    | 193 ------------------
 2 files changed, 6 insertions(+), 200 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/UserInterfaceRoot.svelte

diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index df8bdf7d99..4cb1f7781b 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -21,7 +21,7 @@
   if (!$store.currentPageName)
     store.setCurrentPage($params.page ? $params.page : "main")
 
-  const changePage = id => {
+  const changePage = (id) => {
     store.setCurrentPage(id)
     $goto(`./${id}/page-layout`)
   }
@@ -43,20 +43,19 @@
 
   button {
     cursor: pointer;
-    padding: 0px 16px;
-    height: 36px;
+    padding: 0 var(--spacing-m);
+    height: 32px;
     text-align: center;
     background: #ffffff;
     color: var(--grey-7);
     border-radius: 5px;
-    font-family: inter;
-    font-size: 14px;
-    font-weight: 400;
+    font-size: var(--font-size-xs);
+    font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
     border: none !important;
-    transition: 0.2s;
     outline: none;
+    font-family: var(--font-sans);
   }
 
   .active {
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
deleted file mode 100644
index 0bf8095e41..0000000000
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ /dev/null
@@ -1,193 +0,0 @@
-<script>
-  import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
-  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import PageLayout from "./PageLayout.svelte"
-  import PagesList from "./PagesList.svelte"
-  import { store } from "builderStore"
-  import NewScreenModal from "./NewScreenModal.svelte"
-  import CurrentItemPreview from "./AppPreview/CurrentItemPreview.svelte"
-  import SettingsView from "./SettingsView.svelte"
-  import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { last } from "lodash/fp"
-  import { AddIcon } from "components/common/Icons"
-  import { Modal } from "@budibase/bbui"
-
-  let newScreenPicker
-  let confirmDeleteDialog
-  let componentToDelete = ""
-  let settingsView
-  let modal
-
-  const settings = () => {
-    settingsView.show()
-  }
-
-  const lastPartOfName = c => (c ? last(c.split("/")) : "")
-</script>
-
-<div class="root">
-  <div class="ui-nav">
-    <div class="pages-list-container">
-      <div class="nav-header">
-        <span class="navigator-title">Navigator</span>
-        <span class="components-nav-page">Pages</span>
-      </div>
-      <div class="nav-items-container">
-        <PagesList />
-      </div>
-    </div>
-    <PageLayout layout={$store.pages[$store.currentPageName]} />
-    <div class="components-list-container">
-      <div class="nav-group-header">
-        <span class="components-nav-header" style="margin-top: 0;">
-          Screens
-        </span>
-        <div>
-          <button on:click={modal.show}>
-            <AddIcon />
-          </button>
-        </div>
-      </div>
-      <div class="nav-items-container">
-        <ComponentsHierarchy screens={$store.screens} />
-      </div>
-    </div>
-  </div>
-  <div class="preview-pane">
-    <CurrentItemPreview />
-  </div>
-  {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
-    <div class="components-pane">
-      <ComponentsPaneSwitcher />
-    </div>
-  {/if}
-</div>
-
-<Modal bind:this={modal}>
-  <NewScreenModal />
-</Modal>
-
-<SettingsView bind:this={settingsView} />
-
-<style>
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    width: 20px;
-    padding-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-  }
-
-  .root {
-    display: grid;
-    grid-template-columns: 300px 1fr 300px;
-    height: 100%;
-    width: 100%;
-    background: var(--grey-1);
-  }
-
-  .ui-nav {
-    grid-column: 1;
-    background-color: var(--white);
-    height: calc(100vh - 49px);
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .preview-pane {
-    grid-column: 2;
-    margin: 40px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
-  }
-
-  .components-pane {
-    grid-column: 3;
-    background-color: var(--white);
-    height: calc(100vh - 49px);
-  }
-
-  .components-nav-page {
-    font-size: 13px;
-    color: var(--ink);
-    text-transform: uppercase;
-    padding-left: 20px;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-  }
-
-  .components-nav-header {
-    font-size: 13px;
-    color: var(--ink);
-    text-transform: uppercase;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-  }
-
-  .nav-header {
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-  }
-
-  .nav-items-container {
-    padding: 1rem 0rem 0rem 0rem;
-  }
-
-  .nav-group-header {
-    display: flex;
-    padding: 0px 20px 0px 20px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .nav-group-header > div:nth-child(1) {
-    padding: 0rem 0.5rem 0rem 0rem;
-    vertical-align: bottom;
-    grid-column-start: icon;
-    margin-right: 5px;
-  }
-
-  .nav-group-header > span:nth-child(3) {
-    margin-left: 5px;
-    vertical-align: bottom;
-    grid-column-start: title;
-    margin-top: auto;
-  }
-
-  .nav-group-header > div:nth-child(3) {
-    vertical-align: bottom;
-    grid-column-start: button;
-    cursor: pointer;
-    color: var(--blue);
-  }
-
-  .nav-group-header > div:nth-child(3):hover {
-    color: var(--blue);
-  }
-
-  .navigator-title {
-    font-size: 14px;
-    color: var(--ink);
-    font-weight: 600;
-    text-transform: uppercase;
-    padding: 0 20px 20px 20px;
-    line-height: 1rem !important;
-  }
-
-  .components-list-container {
-    padding: 10px 0px 0 0;
-  }
-</style>

From 62da83e27f6b873d851c5ecc5900017f37822ad4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 18:12:15 +0100
Subject: [PATCH 15/52] Adjust screen list column padding to line up with top
 components bar

---
 packages/builder/src/pages/[application]/design/_layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index 34126e3687..132aa5552d 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -74,7 +74,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-m);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
     overflow-y: auto;
     border-right: 1px solid var(--grey-2);
   }

From 1c149d7d5c1b11152e668b661023e04886dcfe4e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 18:12:40 +0100
Subject: [PATCH 16/52] Move large create screen button to icon

---
 .../userInterface/FrontendNavigatePane.svelte | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 651cc5c6ac..cf53af2dd5 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -4,20 +4,41 @@
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
-  import { Button, Spacer, Modal, Heading } from "@budibase/bbui"
+  import { Modal } from "@budibase/bbui"
 
   let modal
 </script>
 
-<Heading small>Screens</Heading>
+<div class="title">
+  <h1>Screens</h1>
+  <i on:click={modal.show} class="ri-add-circle-fill" />
+</div>
 <PagesList />
-
-<Button primary wide on:click={modal.show}>Create New Screen</Button>
 <div class="nav-items-container">
   <PageLayout layout={$store.pages[$store.currentPageName]} />
   <ComponentsHierarchy screens={$store.screens} />
 </div>
-
 <Modal bind:this={modal}>
   <NewScreenModal />
 </Modal>
+
+<style>
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
+  }
+</style>

From 5d266c5877461dd0001e3180455c717aba201ce8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 18:14:29 +0100
Subject: [PATCH 17/52] Fix issue displaying opened status of screens

---
 .../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 43a2c07bd9..dae80cf1e7 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -44,7 +44,7 @@
       text={screen.props._instanceName}
       withArrow={screen.props._children.length}
       selected={$store.currentComponentInfo._id === screen.props._id}
-      opened={$store.currentPreviewItem.name !== screen.props._id}
+      opened={$store.currentPreviewItem.name === screen.props._id}
       on:click={() => changeScreen(screen)}>
       <ScreenDropdownMenu {screen} />
     </NavItem>

From af19158fb64e870b377fca3f9439cdb569fac931 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 18:14:44 +0100
Subject: [PATCH 18/52] Adjust page button background to be consistent

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

diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 4cb1f7781b..13351c94e4 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -59,7 +59,7 @@
   }
 
   .active {
-    background: var(--grey-3);
+    background: var(--grey-2);
     color: var(--ink);
   }
 </style>

From f56662dac4de22613b60253031a3b44ae38f570b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 18:23:11 +0100
Subject: [PATCH 19/52] Update FlatButton and CategoryTab styles

---
 .../components/userInterface/CategoryTab.svelte   |  6 +++---
 .../userInterface/ComponentPropertiesPanel.svelte |  2 +-
 .../components/userInterface/FlatButton.svelte    | 15 +++++++--------
 .../src/pages/[application]/design/_layout.svelte |  2 +-
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte
index 15335cbb87..3b5dce84e0 100644
--- a/packages/builder/src/components/userInterface/CategoryTab.svelte
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@@ -1,7 +1,7 @@
 <script>
   export let categories = []
   export let selectedCategory = {}
-  export let onClick = category => {}
+  export let onClick = (category) => {}
 </script>
 
 <div class="tabs">
@@ -19,8 +19,8 @@
   .tabs {
     display: flex;
     list-style: none;
-    font-size: 18px;
-    font-weight: 600;
+    font-size: var(--font-size-m);
+    font-weight: 500;
   }
 
   li {
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index dead297956..7b1c794610 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -107,7 +107,7 @@
   }
 
   .instance-name {
-    font-size: 14px;
+    font-size: var(--font-size-xs);
     font-weight: 500;
     color: var(--grey-7);
   }
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index f27a2902ee..3ae8eebca3 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -3,7 +3,7 @@
   export let value = ""
   export let text = ""
   export let icon = ""
-  export let onClick = value => {}
+  export let onClick = (value) => {}
   export let selected = false
 
   $: useIcon = !!icon
@@ -22,23 +22,22 @@
 <style>
   .flatbutton {
     cursor: pointer;
-    max-height: 36px;
-    padding: 8px 2px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
-    background: #ffffff;
+    background: white;
     color: var(--grey-7);
-    border-radius: 5px;
-    font-size: 14px;
-    font-weight: 400;
+    border-radius: var(--border-radius-m);
+    font-size: var(--font-size-xs);
+    font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
   }
 
   .selected {
-    background: var(--grey-3);
+    background: var(--grey-2);
     color: var(--ink);
   }
 
diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index 132aa5552d..7bd37902ad 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -105,7 +105,7 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
   }
 
   .nav-group-header > div:nth-child(1) {

From e5742dc7f647c8775df2fda19242e7b992c3cb01 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 20:22:09 +0100
Subject: [PATCH 20/52] Change component bar to popovers and adjust page layout
 to match

---
 .../src/components/common/NavItem.svelte      |  3 +-
 .../userInterface/CategoryTab.svelte          |  4 +
 .../ComponentSelectionList.svelte             | 94 +++++--------------
 .../userInterface/ItemTab/Item.svelte         | 16 ++--
 .../userInterface/ItemTab/Tab.svelte          | 10 +-
 .../userInterface/temporaryPanelStructure.js  |  2 +-
 .../pages/[application]/design/_layout.svelte |  6 +-
 7 files changed, 48 insertions(+), 87 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 7e21689c3f..8cbfa63499 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -26,7 +26,7 @@
   <div class="content">
     {#if withArrow}
       <div class:opened class="icon arrow">
-        <i class="ri-arrow-right-s-fill" />
+        <i class="ri-arrow-right-s-line" />
       </div>
     {/if}
     {#if icon}
@@ -81,6 +81,7 @@
   }
   .icon.arrow {
     margin: 0 -2px 0 -6px;
+    font-size: 12px;
   }
   .icon.arrow.opened {
     transform: rotate(90deg);
diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte
index 3b5dce84e0..00ed5e82ab 100644
--- a/packages/builder/src/components/userInterface/CategoryTab.svelte
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@@ -18,9 +18,13 @@
 <style>
   .tabs {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
     list-style: none;
     font-size: var(--font-size-m);
     font-weight: 500;
+    height: 24px;
   }
 
   li {
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 463c8ea448..617b90edcc 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -2,23 +2,24 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import components from "./temporaryPanelStructure.js"
-  import CategoryTab from "./CategoryTab.svelte"
-  import { Popover } from "@budibase/bbui"
-  import { fade, fly } from "svelte/transition"
-
+  import { DropdownMenu } from "@budibase/bbui"
   import Tab from "./ItemTab/Tab.svelte"
 
   const categories = components.categories
-  let selectedCategory
-  let width
+  let selectedIndex
+  let anchors = []
+  let popover
+  $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
 
   const close = () => {
-    selectedCategory = null
+    selectedIndex = null
+    popover.hide()
   }
 
-  const onCategoryChosen = (category) => {
+  const onCategoryChosen = (category, idx) => {
     if (category.isCategory) {
-      selectedCategory = selectedCategory === category ? null : category
+      selectedIndex = idx
+      popover.show()
     } else {
       onComponentChosen(category)
     }
@@ -26,60 +27,38 @@
 
   const onComponentChosen = (component) => {
     store.addChildComponent(component._component, component.presetProps)
-
-    // Get ID path
     const path = store.getPathToComponent($store.currentComponentInfo)
-
-    // Go to correct URL
     $goto(`./:page/:screen/${path}`)
     close()
   }
 </script>
 
-<div class="wrapper">
-  <div
-    class="container"
-    bind:clientWidth={width}
-    class:open={selectedCategory != null}>
-    {#each categories as category, idx}
-      <div
-        class="category"
-        on:click={() => onCategoryChosen(category)}
-        class:active={selectedCategory === category}>
-        {#if category.icon}<i class={category.icon} />{/if}
-        <span>{category.name}</span>
-        {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
-      </div>
-    {/each}
-  </div>
-  {#if selectedCategory != null}
-    <div class="overlay" on:click={close} />
-    <div class="dropdown" transition:fly={{ y: -120 }}>
-      <Tab
-        list={selectedCategory}
-        on:selectItem={(e) => onComponentChosen(e.detail)} />
+<div class="container">
+  {#each categories as category, idx}
+    <div
+      bind:this={anchors[idx]}
+      class="category"
+      on:click={() => onCategoryChosen(category, idx)}>
+      {#if category.icon}<i class={category.icon} />{/if}
+      <span>{category.name}</span>
+      {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
     </div>
-  {/if}
+  {/each}
 </div>
+<DropdownMenu bind:this={popover} {anchor} align="left">
+  <Tab
+    list={categories[selectedIndex]}
+    on:selectItem={(e) => onComponentChosen(e.detail)} />
+</DropdownMenu>
 
 <style>
-  .wrapper {
-    position: relative;
-    z-index: 1;
-  }
-
   .container {
-    padding: var(--spacing-l) 40px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    background-color: white;
     z-index: 1;
-    width: calc(100% - 80px);
-    overflow: hidden;
-  }
-  .container.open {
+    height: 24px;
   }
 
   .category {
@@ -97,31 +76,10 @@
     font-weight: 500;
     user-select: none;
   }
-  .category.active,
   .category:hover {
     color: var(--ink);
   }
   .category i:not(:last-child) {
     font-size: 16px;
   }
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: -2;
-    width: 100vw;
-    height: 100vh;
-  }
-
-  .dropdown {
-    position: absolute;
-    z-index: -1;
-    top: calc(100% - var(--spacing-xl));
-    left: 0;
-    width: calc(100% - 80px);
-    background-color: white;
-    padding: var(--spacing-xl) 40px;
-    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05);
-  }
 </style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index ce4f602f03..e5a67118e9 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -12,20 +12,16 @@
 <style>
   .item-item {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     cursor: pointer;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
-    background-color: var(--grey-1);
     border-radius: 5px;
-    width: 120px;
-    height: 80px;
     color: var(--grey-7);
   }
 
   .item-item:hover {
-    background: var(--grey-2);
-    transition: all 0.3s;
+    color: var(--ink);
   }
 
   .item-icon {
@@ -36,16 +32,16 @@
   .item-text {
     display: flex;
     flex-direction: column;
-    margin-top: 5px;
   }
 
   .item-name {
-    font-size: 12px;
+    font-size: var(--font-size-xs);
     font-weight: 500;
     text-align: center;
   }
 
   i {
-    font-size: 24px;
+    font-size: 16px;
+    margin-right: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
index db16acf3d6..4e3aacb9c4 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
@@ -9,7 +9,7 @@
 
   let category = list
 
-  const handleClick = item => {
+  const handleClick = (item) => {
     if (item.children && item.children.length > 0) {
       list = item
     } else {
@@ -53,10 +53,12 @@
 
   .list {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-m);
+    align-items: stretch;
+    gap: var(--spacing-s);
     flex-wrap: wrap;
+    padding: var(--spacing-l);
+    min-width: 120px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 78258e99f3..1c4bc632a6 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -631,7 +631,7 @@ export default {
           },
         },
         {
-          name: "Groupedbar",
+          name: "Grouped Bar",
           _component: "@budibase/standard-components/groupedbar",
           description: "Groupedbar chart",
           icon: "ri-bar-chart-grouped-fill",
diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index 7bd37902ad..529d97949c 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -73,7 +73,7 @@
     background-color: var(--white);
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-m);
+    gap: var(--spacing-l);
     padding: var(--spacing-l) var(--spacing-xl);
     overflow-y: auto;
     border-right: 1px solid var(--grey-2);
@@ -86,13 +86,13 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-m);
+    gap: var(--spacing-l);
+    padding: var(--spacing-l) 40px var(--spacing-xl) 40px;
   }
   .preview-content {
     background: #fff;
     box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
     flex: 1 1 auto;
-    margin: var(--spacing-xl) 40px;
   }
 
   .components-pane {

From 5077f4f435862e5274d129cd2922bacef8daa695 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 20:48:46 +0100
Subject: [PATCH 21/52] Fix property group name font size until a proper fix in
 BBUI

---
 .../builder/src/components/userInterface/DesignView.svelte  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 34f734ced9..3449ef4816 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -63,6 +63,12 @@
     height: 100%;
     gap: var(--spacing-m);
   }
+  .design-view-container :global(.property-group-name .name) {
+    font-size: var(--font-size-xs);
+  }
+  .design-view-container :global(.property-group-container) {
+    padding: 4px 0;
+  }
 
   .design-view-state-categories {
   }

From 3b869d2ff43e397aa77d417f7c6c95416fc0a9a2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 23 Oct 2020 10:33:43 +0100
Subject: [PATCH 22/52] Bump BBUI version

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

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 12067716e9..25c0f9aa4a 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.44.1",
+    "@budibase/bbui": "^1.46.0",
     "@budibase/client": "^0.2.6",
     "@budibase/colorpicker": "^1.0.1",
     "@fortawesome/fontawesome-free": "^5.14.0",
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 5eca5c2364..46c15a2aa3 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -709,24 +709,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.44.1":
-  version "1.44.1"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.44.1.tgz#1bfca2d3a40a14eb0ba136e24afb7139694b4970"
-  integrity sha512-joFH++mzFJZkMR3ZSv8Q8cE/qNn8o8aZGbHeO57Smiai3h2tjeTyVLuJ+yt3P1XQ8SE13epAp38kvsPosUpbkQ==
+"@budibase/bbui@^1.46.0":
+  version "1.46.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.46.0.tgz#cfff5ec545a81582e16555c45987f86536b5cc99"
+  integrity sha512-seuaLSA6iDOzJ3eO0oHzSCTdS1otyNz+8eD5vTLW4bwRH9MZ/xl363acMQDdiCqZk619+WeSqb85fmFTTSJHNQ==
   dependencies:
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
     svelte-portal "^1.0.0"
 
-"@budibase/client@^0.2.4":
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.2.4.tgz#da958faa50c59f6a9c41c692b7a19d6a6ea98bc1"
-  integrity sha512-MsFbWcsh3t1lyLgTb4UMccjshy6jd3A77lqs1CpXjHr+2LmXwvIriLgruycAvFrtqZzYG+dGe0rWwX0auwaaZw==
-  dependencies:
-    deep-equal "^2.0.1"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -1403,11 +1394,6 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
-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-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1462,13 +1448,6 @@ atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
-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"
@@ -2418,26 +2397,6 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
-deep-equal@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.4.tgz#6b0b407a074666033169df3acaf128e1c6f3eab6"
-  integrity sha512-BUfaXrVoCfgkOQY/b09QdO9L3XNoF2XH0A3aY9IQwQL/ZjLOe8FQgCNVl1wiolhsFo8kFdO9zdPViCPbmaJA5w==
-  dependencies:
-    es-abstract "^1.18.0-next.1"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
-    isarray "^2.0.5"
-    object-is "^1.1.3"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2607,54 +2566,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.7"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
-  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
-  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.2"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
-es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
-  version "1.18.0-next.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
-  integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
-  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.2"
-    is-negative-zero "^2.0.0"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    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"
@@ -2961,7 +2872,7 @@ for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-foreach@^2.0.5, foreach@~2.0.1:
+foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3335,31 +3246,16 @@ 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"
 
-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"
   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"
@@ -3368,11 +3264,6 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
 
-is-callable@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
-  integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
-
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -3391,7 +3282,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"
 
@@ -3456,25 +3347,10 @@ is-installed-globally@^0.3.2:
     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-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
 
-is-negative-zero@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
-  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
-
-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"
@@ -3531,18 +3407,6 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-is-regex@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
-  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
-  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"
@@ -3551,41 +3415,16 @@ is-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
 
-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"
   dependencies:
     has-symbols "^1.0.1"
 
-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:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
 
-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"
@@ -3606,11 +3445,6 @@ isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
-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==
-
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -4730,19 +4564,6 @@ object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
 
-object-inspect@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
-  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
-
-object-is@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
-  integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -4774,16 +4595,6 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
-object.assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd"
-  integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.0"
-    has-symbols "^1.0.1"
-    object-keys "^1.1.1"
-
 object.getownpropertydescriptors@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
@@ -5264,19 +5075,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==
-
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -5684,14 +5482,6 @@ shortid@^2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
-side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
-  dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.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"
@@ -5918,7 +5708,7 @@ 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"
   dependencies:
@@ -5941,7 +5731,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"
   dependencies:
@@ -6397,43 +6187,10 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.0.0"
 
-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"
 
-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"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index c7261f319f..13f3e167a9 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -36,7 +36,7 @@
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.44.1",
+    "@budibase/bbui": "^1.46.0",
     "@budibase/svelte-ag-grid": "^0.0.13",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@svelteschool/svelte-forms": "^0.7.0",

From 4e4aa5c525282051f8451f27658231e9a49a344c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 23 Oct 2020 10:34:14 +0100
Subject: [PATCH 23/52] Standardise sizing of all settings and design
 properties

---
 .../userInterface/DesignView.svelte           |  19 +-
 .../userInterface/DetailScreenSelect.svelte   |  12 +-
 .../IconSelect/IconSelect.svelte              | 582 +++++++++---------
 .../userInterface/OptionSelect.svelte         |   2 +-
 .../userInterface/PropertyControl.svelte      |   2 +-
 .../userInterface/PropertyGroup.svelte        |   3 +-
 .../PropertyPanelControls/Input.svelte        |   2 +-
 .../userInterface/ScreenSelect.svelte         | 182 +++---
 .../userInterface/SettingsView.svelte         |   8 +-
 .../userInterface/TableSelect.svelte          |   2 +-
 .../userInterface/TableViewSelect.svelte      | 326 +++++-----
 11 files changed, 576 insertions(+), 564 deletions(-)

diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 3449ef4816..989eaef53b 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -48,7 +48,7 @@
         {/each}
       {:else}
         <div class="no-design">
-          This component does not have any design properties.
+          This component doesn't have any design properties.
         </div>
       {/if}
     </div>
@@ -61,13 +61,7 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
-    gap: var(--spacing-m);
-  }
-  .design-view-container :global(.property-group-name .name) {
-    font-size: var(--font-size-xs);
-  }
-  .design-view-container :global(.property-group-container) {
-    padding: 4px 0;
+    gap: var(--spacing-l);
   }
 
   .design-view-state-categories {
@@ -85,10 +79,15 @@
     min-height: 0;
     margin: 0 -20px;
     padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
   }
 
   .no-design {
-    font-size: var(--font-size-s);
-    color: var(--grey-6);
+    font-size: var(--font-size-xs);
+    color: var(--grey-5);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
index 1e2908ab54..6928a72e9d 100644
--- a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
@@ -15,11 +15,11 @@
     return [
       ...$store.screens
         .filter(
-          screen =>
+          (screen) =>
             screen.props._component.endsWith("/rowdetail") ||
             screen.route.endsWith(":id")
         )
-        .map(screen => ({
+        .map((screen) => ({
           name: screen.props._instanceName,
           url: screen.route,
           sort: screen.props._component,
@@ -29,7 +29,13 @@
 </script>
 
 <div>
-  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
     <option value="" />
     {#each urls as url}
       <option value={url.url}>{url.name}</option>
diff --git a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
index 6141702439..9fac2642d7 100644
--- a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
@@ -1,291 +1,291 @@
-<script>
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
-  import { createEventDispatcher, tick } from "svelte"
-
-  import icons from "./icons.js"
-
-  const dispatch = createEventDispatcher()
-
-  export let value = ""
-  export let maxIconsPerPage = 30
-
-  let searchTerm = ""
-  let selectedLetter = "A"
-
-  let currentPage = 1
-  let filteredIcons = findIconByTerm(selectedLetter)
-
-  $: dispatch("change", value)
-
-  const alphabet = [
-    "A",
-    "B",
-    "C",
-    "D",
-    "E",
-    "F",
-    "G",
-    "H",
-    "I",
-    "J",
-    "K",
-    "L",
-    "M",
-    "N",
-    "O",
-    "P",
-    "Q",
-    "R",
-    "S",
-    "T",
-    "U",
-    "V",
-    "W",
-    "X",
-    "Y",
-    "Z",
-  ]
-  let buttonAnchor, dropdown
-  let loading = false
-
-  function findIconByTerm(term) {
-    const r = new RegExp(`\^${term}`, "i")
-    return icons.filter(i => r.test(i.label))
-  }
-
-  async function switchLetter(letter) {
-    currentPage = 1
-    searchTerm = ""
-    loading = true
-    selectedLetter = letter
-    filteredIcons = findIconByTerm(letter)
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  async function findIconOnPage() {
-    loading = true
-    const iconIdx = filteredIcons.findIndex(i => i.value === value)
-    if (iconIdx !== -1) {
-      currentPage = Math.ceil(iconIdx / maxIconsPerPage)
-    }
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  async function setSelectedUI() {
-    if (value) {
-      const letter = displayValue.substring(0, 1)
-      await switchLetter(letter)
-      await findIconOnPage()
-    }
-  }
-
-  async function pageClick(next) {
-    loading = true
-    if (next && currentPage < totalPages) {
-      currentPage++
-    } else if (!next && currentPage > 1) {
-      currentPage--
-    }
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  async function searchForIcon(e) {
-    currentPage = 1
-    loading = true
-    filteredIcons = findIconByTerm(searchTerm)
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  $: displayValue = value ? value.substring(7) : "Pick Icon"
-
-  $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
-  $: pageEndIdx = maxIconsPerPage * currentPage
-  $: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
-
-  $: pagerText = `Page ${currentPage} of ${totalPages}`
-</script>
-
-<div bind:this={buttonAnchor}>
-  <Button secondary on:click={dropdown.show}>{displayValue}</Button>
-</div>
-<DropdownMenu
-  bind:this={dropdown}
-  on:open={setSelectedUI}
-  anchor={buttonAnchor}>
-  <div class="container">
-    <div class="search-area">
-      <div class="alphabet-area">
-        {#each alphabet as letter, idx}
-          <span
-            class="letter"
-            class:letter-selected={letter === selectedLetter}
-            on:click={() => switchLetter(letter)}>
-            {letter}
-          </span>
-          {#if idx !== alphabet.length - 1}<span>-</span>{/if}
-        {/each}
-      </div>
-      <div class="search-input">
-        <div class="input-wrapper">
-          <Input bind:value={searchTerm} thin placeholder="Search Icon" />
-        </div>
-        <Button secondary on:click={searchForIcon}>Search</Button>
-      </div>
-      <div class="page-area">
-        <div class="pager">
-          <span on:click={() => pageClick(false)}>
-            <i class="page-btn fas fa-chevron-left" />
-          </span>
-          <span>{pagerText}</span>
-          <span on:click={() => pageClick(true)}>
-            <i class="page-btn fas fa-chevron-right" />
-          </span>
-        </div>
-      </div>
-    </div>
-    {#if pagedIcons.length > 0}
-      <div class="icon-area">
-        {#if !loading}
-          {#each pagedIcons as icon}
-            <div
-              class="icon-container"
-              class:selected={value === icon.value}
-              on:click={() => (value = icon.value)}>
-              <div class="icon-preview">
-                <i class={`${icon.value} fa-3x`} />
-              </div>
-              <div class="icon-label">{icon.label}</div>
-            </div>
-          {/each}
-        {/if}
-      </div>
-    {:else}
-      <div class="no-icons">
-        <h5>
-          {`There is no icons for this ${searchTerm ? 'search' : 'page'}`}
-        </h5>
-      </div>
-    {/if}
-  </div>
-</DropdownMenu>
-
-<style>
-  .container {
-    width: 610px;
-    height: 350px;
-    display: flex;
-    flex-direction: column;
-    padding: 10px 0px 10px 15px;
-    overflow-x: hidden;
-  }
-
-  .search-area {
-    flex: 0 0 80px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .icon-area {
-    flex: 1;
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    grid-gap: 5px;
-    justify-content: flex-start;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-right: 10px;
-  }
-
-  .no-icons {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .alphabet-area {
-    display: flex;
-    flex-flow: row wrap;
-    padding-bottom: 10px;
-    padding-right: 15px;
-    justify-content: space-around;
-  }
-
-  .loading-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .search-input {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 100%;
-    padding-right: 15px;
-  }
-
-  .input-wrapper {
-    width: 510px;
-    margin-right: 5px;
-  }
-
-  .page-area {
-    padding: 10px;
-    display: flex;
-    justify-content: center;
-  }
-
-  .letter {
-    color: var(--blue);
-  }
-
-  .letter:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-
-  .letter-selected {
-    text-decoration: underline;
-  }
-
-  .icon-container {
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    border: var(--border-dark);
-  }
-
-  .icon-container:hover {
-    cursor: pointer;
-    background: var(--grey-2);
-  }
-
-  .selected {
-    background: var(--grey-3);
-  }
-
-  .icon-preview {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .icon-label {
-    flex: 0 0 20px;
-    text-align: center;
-    font-size: 12px;
-  }
-
-  .page-btn {
-    color: var(--blue);
-  }
-
-  .page-btn:hover {
-    cursor: pointer;
-  }
-</style>
+<script>
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { createEventDispatcher, tick } from "svelte"
+
+  import icons from "./icons.js"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+  export let maxIconsPerPage = 30
+
+  let searchTerm = ""
+  let selectedLetter = "A"
+
+  let currentPage = 1
+  let filteredIcons = findIconByTerm(selectedLetter)
+
+  $: dispatch("change", value)
+
+  const alphabet = [
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "I",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z",
+  ]
+  let buttonAnchor, dropdown
+  let loading = false
+
+  function findIconByTerm(term) {
+    const r = new RegExp(`\^${term}`, "i")
+    return icons.filter((i) => r.test(i.label))
+  }
+
+  async function switchLetter(letter) {
+    currentPage = 1
+    searchTerm = ""
+    loading = true
+    selectedLetter = letter
+    filteredIcons = findIconByTerm(letter)
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function findIconOnPage() {
+    loading = true
+    const iconIdx = filteredIcons.findIndex((i) => i.value === value)
+    if (iconIdx !== -1) {
+      currentPage = Math.ceil(iconIdx / maxIconsPerPage)
+    }
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function setSelectedUI() {
+    if (value) {
+      const letter = displayValue.substring(0, 1)
+      await switchLetter(letter)
+      await findIconOnPage()
+    }
+  }
+
+  async function pageClick(next) {
+    loading = true
+    if (next && currentPage < totalPages) {
+      currentPage++
+    } else if (!next && currentPage > 1) {
+      currentPage--
+    }
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function searchForIcon(e) {
+    currentPage = 1
+    loading = true
+    filteredIcons = findIconByTerm(searchTerm)
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  $: displayValue = value ? value.substring(7) : "Pick Icon"
+
+  $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
+  $: pageEndIdx = maxIconsPerPage * currentPage
+  $: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
+
+  $: pagerText = `Page ${currentPage} of ${totalPages}`
+</script>
+
+<div bind:this={buttonAnchor}>
+  <Button secondary small on:click={dropdown.show}>{displayValue}</Button>
+</div>
+<DropdownMenu
+  bind:this={dropdown}
+  on:open={setSelectedUI}
+  anchor={buttonAnchor}>
+  <div class="container">
+    <div class="search-area">
+      <div class="alphabet-area">
+        {#each alphabet as letter, idx}
+          <span
+            class="letter"
+            class:letter-selected={letter === selectedLetter}
+            on:click={() => switchLetter(letter)}>
+            {letter}
+          </span>
+          {#if idx !== alphabet.length - 1}<span>-</span>{/if}
+        {/each}
+      </div>
+      <div class="search-input">
+        <div class="input-wrapper">
+          <Input bind:value={searchTerm} thin placeholder="Search Icon" />
+        </div>
+        <Button secondary on:click={searchForIcon}>Search</Button>
+      </div>
+      <div class="page-area">
+        <div class="pager">
+          <span on:click={() => pageClick(false)}>
+            <i class="page-btn fas fa-chevron-left" />
+          </span>
+          <span>{pagerText}</span>
+          <span on:click={() => pageClick(true)}>
+            <i class="page-btn fas fa-chevron-right" />
+          </span>
+        </div>
+      </div>
+    </div>
+    {#if pagedIcons.length > 0}
+      <div class="icon-area">
+        {#if !loading}
+          {#each pagedIcons as icon}
+            <div
+              class="icon-container"
+              class:selected={value === icon.value}
+              on:click={() => (value = icon.value)}>
+              <div class="icon-preview">
+                <i class={`${icon.value} fa-3x`} />
+              </div>
+              <div class="icon-label">{icon.label}</div>
+            </div>
+          {/each}
+        {/if}
+      </div>
+    {:else}
+      <div class="no-icons">
+        <h5>
+          {`There is no icons for this ${searchTerm ? 'search' : 'page'}`}
+        </h5>
+      </div>
+    {/if}
+  </div>
+</DropdownMenu>
+
+<style>
+  .container {
+    width: 610px;
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0px 10px 15px;
+    overflow-x: hidden;
+  }
+
+  .search-area {
+    flex: 0 0 80px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .icon-area {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 5px;
+    justify-content: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 10px;
+  }
+
+  .no-icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .alphabet-area {
+    display: flex;
+    flex-flow: row wrap;
+    padding-bottom: 10px;
+    padding-right: 15px;
+    justify-content: space-around;
+  }
+
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .search-input {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    padding-right: 15px;
+  }
+
+  .input-wrapper {
+    width: 510px;
+    margin-right: 5px;
+  }
+
+  .page-area {
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .letter {
+    color: var(--blue);
+  }
+
+  .letter:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .letter-selected {
+    text-decoration: underline;
+  }
+
+  .icon-container {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border: var(--border-dark);
+  }
+
+  .icon-container:hover {
+    cursor: pointer;
+    background: var(--grey-2);
+  }
+
+  .selected {
+    background: var(--grey-3);
+  }
+
+  .icon-preview {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .icon-label {
+    flex: 0 0 20px;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  .page-btn {
+    color: var(--blue);
+  }
+
+  .page-btn:hover {
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 1c3ee89213..d1fbfecff7 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -175,7 +175,7 @@
   .bb-select-anchor {
     cursor: pointer;
     display: flex;
-    padding: var(--spacing-m);
+    padding: var(--spacing-s) var(--spacing-m);
     background-color: var(--grey-2);
     border-radius: var(--border-radius-m);
     align-items: center;
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index c11ec6a0cb..e47d5e17a3 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -147,7 +147,7 @@
     height: 90%;
     width: 2rem;
     background: var(--grey-2);
-    right: 10px;
+    right: 4px;
     --spacing-s: 0;
     border-left: 0.5px solid var(--grey-3);
     outline-color: var(--blue);
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 37b7a11ea2..2fb304f5c8 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -13,7 +13,7 @@
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
-<DetailSummary {name} on:open show={open}>
+<DetailSummary {name} on:open show={open} thin>
   <div>
     {#each properties as props}
       <PropertyControl
@@ -34,6 +34,5 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-s);
-    margin-top: var(--spacing-m);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte b/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
index 1721c1bbb2..3abdb3ecd3 100644
--- a/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
+++ b/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
@@ -8,4 +8,4 @@
   export let name, value, placeholder, type
 </script>
 
-<Input {name} {value} {placeholder} {type} thin on:change />
+<Input {name} {value} {placeholder} {type} extraThin on:change />
diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
index 33174355bb..fb2a24a94e 100644
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@@ -1,88 +1,94 @@
-<script>
-  import { DataList } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { store, backendUiStore } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-
-  const dispatch = createEventDispatcher()
-
-  export let value = ""
-
-  $: urls = getUrls()
-
-  const handleBlur = () => dispatch("change", value)
-
-  // this will get urls of all screens, but only
-  // choose detail screens that are usable in the current context
-  // and substitute the :id param for the actual {{ ._id }} binding
-  const getUrls = () => {
-    const urls = [
-      ...$store.screens
-        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
-        .map(screen => ({
-          name: screen.props._instanceName,
-          url: screen.route,
-          sort: screen.props._component,
-        })),
-    ]
-
-    const bindableProperties = fetchBindableProperties({
-      componentInstanceId: $store.currentComponentInfo._id,
-      components: $store.components,
-      screen: $store.currentPreviewItem,
-      tables: $backendUiStore.tables,
-    })
-
-    const detailScreens = $store.screens.filter(screen =>
-      screen.props._component.endsWith("/rowdetail")
-    )
-
-    for (let detailScreen of detailScreens) {
-      const idBinding = bindableProperties.find(p => {
-        if (
-          p.type === "context" &&
-          p.runtimeBinding.endsWith("._id") &&
-          p.table
-        ) {
-          const tableId =
-            typeof p.table === "string" ? p.table : p.table.tableId
-          return tableId === detailScreen.props.table
-        }
-        return false
-      })
-
-      if (idBinding) {
-        urls.push({
-          name: detailScreen.props._instanceName,
-          url: detailScreen.route.replace(
-            ":id",
-            `{{ ${idBinding.runtimeBinding} }}`
-          ),
-          sort: detailScreen.props._component,
-        })
-      }
-    }
-
-    return urls
-  }
-</script>
-
-<div>
-  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
-    <option value="" />
-    {#each urls as url}
-      <option value={url.url}>{url.name}</option>
-    {/each}
-  </DataList>
-</div>
-
-<style>
-  div {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-  }
-  div :global(> div) {
-    flex: 1 1 auto;
-  }
-</style>
+<script>
+  import { DataList } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+
+  $: urls = getUrls()
+
+  const handleBlur = () => dispatch("change", value)
+
+  // this will get urls of all screens, but only
+  // choose detail screens that are usable in the current context
+  // and substitute the :id param for the actual {{ ._id }} binding
+  const getUrls = () => {
+    const urls = [
+      ...$store.screens
+        .filter((screen) => !screen.props._component.endsWith("/rowdetail"))
+        .map((screen) => ({
+          name: screen.props._instanceName,
+          url: screen.route,
+          sort: screen.props._component,
+        })),
+    ]
+
+    const bindableProperties = fetchBindableProperties({
+      componentInstanceId: $store.currentComponentInfo._id,
+      components: $store.components,
+      screen: $store.currentPreviewItem,
+      tables: $backendUiStore.tables,
+    })
+
+    const detailScreens = $store.screens.filter((screen) =>
+      screen.props._component.endsWith("/rowdetail")
+    )
+
+    for (let detailScreen of detailScreens) {
+      const idBinding = bindableProperties.find((p) => {
+        if (
+          p.type === "context" &&
+          p.runtimeBinding.endsWith("._id") &&
+          p.table
+        ) {
+          const tableId =
+            typeof p.table === "string" ? p.table : p.table.tableId
+          return tableId === detailScreen.props.table
+        }
+        return false
+      })
+
+      if (idBinding) {
+        urls.push({
+          name: detailScreen.props._instanceName,
+          url: detailScreen.route.replace(
+            ":id",
+            `{{ ${idBinding.runtimeBinding} }}`
+          ),
+          sort: detailScreen.props._component,
+        })
+      }
+    }
+
+    return urls
+  }
+</script>
+
+<div>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
+    <option value="" />
+    {#each urls as url}
+      <option value={url.url}>{url.name}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index fd4733c24e..be07eebcea 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -125,7 +125,9 @@
       {/if}
     {/each}
   {:else}
-    <div class="empty">This component does not have any settings.</div>
+    <div class="empty">
+      This component doesn't have any additional settings.
+    </div>
   {/if}
 </div>
 
@@ -139,9 +141,9 @@
   }
 
   .empty {
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-xs);
     margin-top: var(--spacing-m);
-    color: var(--grey-6);
+    color: var(--grey-5);
   }
 
   .duplicate-name {
diff --git a/packages/builder/src/components/userInterface/TableSelect.svelte b/packages/builder/src/components/userInterface/TableSelect.svelte
index 6300aa2d61..d72b6031f1 100644
--- a/packages/builder/src/components/userInterface/TableSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableSelect.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div>
-  <Select thin secondary wide on:change {value}>
+  <Select extraThin secondary wide on:change {value}>
     <option value="">Choose a table</option>
     {#each $backendUiStore.tables as table}
       <option value={table._id}>{table.name}</option>
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index f38fcc0a72..8adfaaf2a0 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -1,163 +1,163 @@
-<script>
-  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { store, backendUiStore } from "builderStore"
-  import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
-
-  const dispatch = createEventDispatcher()
-  let anchorRight, dropdownRight
-
-  export let value = {}
-
-  function handleSelected(selected) {
-    dispatch("change", selected)
-    dropdownRight.hide()
-  }
-
-  $: tables = $backendUiStore.tables.map(m => ({
-    label: m.name,
-    name: `all_${m._id}`,
-    tableId: m._id,
-    type: "table",
-  }))
-
-  $: views = $backendUiStore.tables.reduce((acc, cur) => {
-    let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
-      label: key,
-      name: key,
-      ...value,
-      type: "view",
-    }))
-    return [...acc, ...viewsArr]
-  }, [])
-
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.currentComponentInfo._id,
-    components: $store.components,
-    screen: $store.currentPreviewItem,
-    tables: $backendUiStore.tables,
-  })
-
-  $: links = bindableProperties
-    .filter(x => x.fieldSchema.type === "link")
-    .map(property => ({
-      label: property.readableBinding,
-      fieldName: property.fieldSchema.name,
-      name: `all_${property.fieldSchema.tableId}`,
-      tableId: property.fieldSchema.tableId,
-      type: "link",
-    }))
-</script>
-
-<div
-  class="dropdownbutton"
-  bind:this={anchorRight}
-  on:click={dropdownRight.show}>
-  <span>{value.label ? value.label : 'Table / View'}</span>
-  <Icon name="arrowdown" />
-</div>
-<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
-  <div class="dropdown">
-    <div class="title">
-      <Heading extraSmall>Tables</Heading>
-    </div>
-    <ul>
-      {#each tables as table}
-        <li
-          class:selected={value === table}
-          on:click={() => handleSelected(table)}>
-          {table.label}
-        </li>
-      {/each}
-    </ul>
-    <hr />
-    <div class="title">
-      <Heading extraSmall>Views</Heading>
-    </div>
-    <ul>
-      {#each views as view}
-        <li
-          class:selected={value === view}
-          on:click={() => handleSelected(view)}>
-          {view.label}
-        </li>
-      {/each}
-    </ul>
-    <hr />
-    <div class="title">
-      <Heading extraSmall>Relationships</Heading>
-    </div>
-    <ul>
-      {#each links as link}
-        <li
-          class:selected={value === link}
-          on:click={() => handleSelected(link)}>
-          {link.label}
-        </li>
-      {/each}
-    </ul>
-  </div>
-</DropdownMenu>
-
-<style>
-  .dropdownbutton {
-    background-color: var(--grey-2);
-    border: var(--border-transparent);
-    padding: var(--spacing-m);
-    border-radius: var(--border-radius-m);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    overflow: hidden;
-    flex: 1 1 auto;
-  }
-  .dropdownbutton:hover {
-    cursor: pointer;
-    background-color: var(--grey-3);
-  }
-  .dropdownbutton span {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex: 1 1 auto;
-    text-align: left;
-    font-size: var(--font-size-xs);
-  }
-  .dropdownbutton :global(svg) {
-    margin: -4px 0;
-  }
-
-  .dropdown {
-    padding: var(--spacing-m) 0;
-    z-index: 99999999;
-  }
-  .title {
-    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
-  }
-
-  hr {
-    margin: var(--spacing-m) 0 var(--spacing-xl) 0;
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0px;
-    margin: 0px;
-  }
-
-  li {
-    cursor: pointer;
-    margin: 0px;
-    padding: var(--spacing-s) var(--spacing-m);
-    font-size: var(--font-size-xs);
-  }
-
-  .selected {
-    background-color: var(--grey-4);
-  }
-
-  li:hover {
-    background-color: var(--grey-4);
-  }
-</style>
+<script>
+  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
+
+  const dispatch = createEventDispatcher()
+  let anchorRight, dropdownRight
+
+  export let value = {}
+
+  function handleSelected(selected) {
+    dispatch("change", selected)
+    dropdownRight.hide()
+  }
+
+  $: tables = $backendUiStore.tables.map((m) => ({
+    label: m.name,
+    name: `all_${m._id}`,
+    tableId: m._id,
+    type: "table",
+  }))
+
+  $: views = $backendUiStore.tables.reduce((acc, cur) => {
+    let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
+      label: key,
+      name: key,
+      ...value,
+      type: "view",
+    }))
+    return [...acc, ...viewsArr]
+  }, [])
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    tables: $backendUiStore.tables,
+  })
+
+  $: links = bindableProperties
+    .filter((x) => x.fieldSchema.type === "link")
+    .map((property) => ({
+      label: property.readableBinding,
+      fieldName: property.fieldSchema.name,
+      name: `all_${property.fieldSchema.tableId}`,
+      tableId: property.fieldSchema.tableId,
+      type: "link",
+    }))
+</script>
+
+<div
+  class="dropdownbutton"
+  bind:this={anchorRight}
+  on:click={dropdownRight.show}>
+  <span>{value.label ? value.label : 'Table / View'}</span>
+  <Icon name="arrowdown" />
+</div>
+<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
+  <div class="dropdown">
+    <div class="title">
+      <Heading extraSmall>Tables</Heading>
+    </div>
+    <ul>
+      {#each tables as table}
+        <li
+          class:selected={value === table}
+          on:click={() => handleSelected(table)}>
+          {table.label}
+        </li>
+      {/each}
+    </ul>
+    <hr />
+    <div class="title">
+      <Heading extraSmall>Views</Heading>
+    </div>
+    <ul>
+      {#each views as view}
+        <li
+          class:selected={value === view}
+          on:click={() => handleSelected(view)}>
+          {view.label}
+        </li>
+      {/each}
+    </ul>
+    <hr />
+    <div class="title">
+      <Heading extraSmall>Relationships</Heading>
+    </div>
+    <ul>
+      {#each links as link}
+        <li
+          class:selected={value === link}
+          on:click={() => handleSelected(link)}>
+          {link.label}
+        </li>
+      {/each}
+    </ul>
+  </div>
+</DropdownMenu>
+
+<style>
+  .dropdownbutton {
+    background-color: var(--grey-2);
+    border: var(--border-transparent);
+    padding: var(--spacing-s) var(--spacing-m);
+    border-radius: var(--border-radius-m);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+    flex: 1 1 auto;
+  }
+  .dropdownbutton:hover {
+    cursor: pointer;
+    background-color: var(--grey-3);
+  }
+  .dropdownbutton span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 1 1 auto;
+    text-align: left;
+    font-size: var(--font-size-xs);
+  }
+  .dropdownbutton :global(svg) {
+    margin: -4px 0;
+  }
+
+  .dropdown {
+    padding: var(--spacing-m) 0;
+    z-index: 99999999;
+  }
+  .title {
+    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
+  }
+
+  hr {
+    margin: var(--spacing-m) 0 var(--spacing-xl) 0;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+  }
+
+  li {
+    cursor: pointer;
+    margin: 0px;
+    padding: var(--spacing-s) var(--spacing-m);
+    font-size: var(--font-size-xs);
+  }
+
+  .selected {
+    background-color: var(--grey-4);
+  }
+
+  li:hover {
+    background-color: var(--grey-4);
+  }
+</style>

From 767846e4c492858c89ea469deae5af81586c0099 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 23 Oct 2020 10:37:28 +0100
Subject: [PATCH 24/52] Add selected styles to component dropdowns

---
 .../userInterface/ComponentSelectionList.svelte       | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 617b90edcc..59bf7548e1 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -12,7 +12,6 @@
   $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
 
   const close = () => {
-    selectedIndex = null
     popover.hide()
   }
 
@@ -38,14 +37,19 @@
     <div
       bind:this={anchors[idx]}
       class="category"
-      on:click={() => onCategoryChosen(category, idx)}>
+      on:click={() => onCategoryChosen(category, idx)}
+      class:active={idx === selectedIndex}>
       {#if category.icon}<i class={category.icon} />{/if}
       <span>{category.name}</span>
       {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
     </div>
   {/each}
 </div>
-<DropdownMenu bind:this={popover} {anchor} align="left">
+<DropdownMenu
+  on:close={() => (selectedIndex = null)}
+  bind:this={popover}
+  {anchor}
+  align="left">
   <Tab
     list={categories[selectedIndex]}
     on:selectItem={(e) => onComponentChosen(e.detail)} />
@@ -76,6 +80,7 @@
     font-weight: 500;
     user-select: none;
   }
+  .category.active,
   .category:hover {
     color: var(--ink);
   }

From 5009a3975c2a1c1ce15d8982095c2e364248f15a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 23 Oct 2020 10:55:12 +0100
Subject: [PATCH 25/52] Improve component dropdown responsiveness

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

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 59bf7548e1..6f9931f0b0 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -62,13 +62,14 @@
     justify-content: flex-start;
     align-items: center;
     z-index: 1;
-    height: 24px;
+    min-height: 24px;
+    flex-wrap: wrap;
+    gap: var(--spacing-l);
   }
 
   .category {
     color: var(--grey-7);
     cursor: pointer;
-    margin-right: var(--spacing-l);
     display: flex;
     flex-direction: row;
     justify-content: flex-start;

From ea946940383855ee8149ee096adf32dc26a1a35f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 23 Oct 2020 12:25:12 +0100
Subject: [PATCH 26/52] Remove deprecated borders on design page

---
 packages/builder/src/pages/[application]/design/_layout.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index 529d97949c..dcf1c9b771 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -76,7 +76,6 @@
     gap: var(--spacing-l);
     padding: var(--spacing-l) var(--spacing-xl);
     overflow-y: auto;
-    border-right: 1px solid var(--grey-2);
   }
 
   .preview-pane {
@@ -98,7 +97,6 @@
   .components-pane {
     grid-column: 3;
     background-color: var(--white);
-    border-left: 1px solid var(--grey-2);
     overflow-y: auto;
     display: flex;
     flex-direction: column;

From 14b13c7c52caf00ba89e13810a9bc9f3ea9e8a22 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 23 Oct 2020 12:25:22 +0100
Subject: [PATCH 27/52] Update data page to use new styles

---
 .../components/backend/DataTable/Table.svelte |  73 +++++++------
 .../TableNavigator/TableNavigator.svelte      | 103 ++++++++++--------
 .../modals/CreateTableModal.svelte            |  54 ++++-----
 .../pages/[application]/data/_layout.svelte   |   9 +-
 4 files changed, 124 insertions(+), 115 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 7bb5ac6a18..e26b68d537 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -51,19 +51,17 @@
   }
 </script>
 
-<section>
-  <div class="table-controls">
-    <h2 class="title">
-      <span>{title}</span>
-      {#if loading}
-        <div transition:fade>
-          <Spinner size="10" />
-        </div>
-      {/if}
-    </h2>
-    <div class="popovers">
-      <slot />
-    </div>
+<div class="table-container">
+  <div class="title">
+    <h1>{title}</h1>
+    {#if loading}
+      <div transition:fade>
+        <Spinner size="10" />
+      </div>
+    {/if}
+  </div>
+  <div class="popovers">
+    <slot />
   </div>
   <table class="bb-table">
     <thead>
@@ -125,20 +123,44 @@
     bind:currentPage
     pageItemCount={paginatedData.length}
     {ITEMS_PER_PAGE} />
-</section>
+</div>
 
 <style>
+  .table-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
+
   .title {
-    font-size: 24px;
-    font-weight: 600;
-    text-rendering: optimizeLegibility;
-    margin-top: 0;
+    height: 24px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
   }
-  .title > span {
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title > div {
+    margin-left: var(--spacing-xs);
+  }
+
+  .popovers {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-l);
+  }
+  .popovers :global(button) {
+    font-weight: 500;
+  }
+  .popovers :global(button svg) {
     margin-right: var(--spacing-xs);
   }
 
@@ -200,19 +222,6 @@
     background: var(--grey-1);
   }
 
-  .table-controls {
-    width: 100%;
-  }
-
-  .popovers {
-    display: flex;
-  }
-
-  :global(.popovers > div) {
-    margin-right: var(--spacing-m);
-    margin-bottom: var(--spacing-xl);
-  }
-
   .edit-header {
     width: 60px;
   }
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index b8683d3dba..e521a1dfc6 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -5,9 +5,10 @@
   import CreateTableModal from "./modals/CreateTableModal.svelte"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
-  import { Heading } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
+  import { Modal } from "@budibase/bbui"
+  import NavItem from "components/common/NavItem.svelte"
 
+  let modal
   $: selectedView =
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
 
@@ -20,67 +21,77 @@
     backendUiStore.actions.views.select(view)
     $goto(`./view/${view.name}`)
   }
+
+  function onClickView(table, viewName) {
+    if (selectedView === viewName) {
+      return
+    }
+    selectView({
+      name: viewName,
+      ...table.views[viewName],
+    })
+  }
 </script>
 
 <div class="items-root">
   {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
-    <div class="hierarchy">
-      <div class="components-list-container">
-        <Heading small>Tables</Heading>
-        <Spacer medium />
-        <CreateTableModal />
-        <div class="hierarchy-items-container">
-          {#each $backendUiStore.tables as table}
-            <ListItem
-              selected={selectedView === `all_${table._id}`}
-              title={table.name}
-              icon="ri-table-fill"
-              on:click={() => selectTable(table)}>
-              <EditTablePopover {table} />
-            </ListItem>
-            {#each Object.keys(table.views || {}) as viewName}
-              <ListItem
-                indented
-                selected={selectedView === viewName}
-                title={viewName}
-                icon="ri-eye-line"
-                on:click={() => (selectedView === viewName ? {} : selectView({
-                        name: viewName,
-                        ...table.views[viewName],
-                      }))}>
-                <EditViewPopover
-                  view={{ name: viewName, ...table.views[viewName] }} />
-              </ListItem>
-            {/each}
-          {/each}
-        </div>
-      </div>
+    <div class="title">
+      <h1>Tables</h1>
+      <i on:click={modal.show} class="ri-add-circle-fill" />
+    </div>
+    <div class="hierarchy-items-container">
+      {#each $backendUiStore.tables as table}
+        <NavItem
+          icon="ri-table-line"
+          text={table.name}
+          selected={selectedView === `all_${table._id}`}
+          on:click={() => selectTable(table)}>
+          <EditTablePopover {table} />
+        </NavItem>
+        {#each Object.keys(table.views || {}) as viewName}
+          <NavItem
+            indentLevel={1}
+            icon="ri-eye-line"
+            text={viewName}
+            selected={selectedView === viewName}
+            on:click={() => onClickView(table, viewName)}>
+            <EditViewPopover
+              view={{ name: viewName, ...table.views[viewName] }} />
+          </NavItem>
+        {/each}
+      {/each}
     </div>
   {/if}
 </div>
+<Modal bind:this={modal}>
+  <CreateTableModal />
+</Modal>
 
 <style>
-  h5 {
-    font-size: 18px;
-    font-weight: 600;
-    margin-top: 0;
-    margin-bottom: var(--spacing-xl);
-  }
-
   .items-root {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    gap: var(--spacing-l);
   }
 
-  .hierarchy {
+  .title {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
   }
-
-  .hierarchy-items-container {
-    margin-top: var(--spacing-xl);
-    flex: 1 1 auto;
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
   }
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index dd691e9e80..e77fec709f 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -2,8 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { Button, Input, Label, ModalContent, Modal } from "@budibase/bbui"
-  import Spinner from "components/common/Spinner.svelte"
+  import { Input, Label, ModalContent } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics from "analytics"
   import screenTemplates from "builderStore/store/screenTemplates"
@@ -22,15 +21,9 @@
   let dataImport
   let error = ""
 
-  function resetState() {
-    name = ""
-    dataImport = undefined
-    error = ""
-  }
-
   function checkValid(evt) {
     const tableName = evt.target.value
-    if ($backendUiStore.models?.some(model => model.name === tableName)) {
+    if ($backendUiStore.models?.some((model) => model.name === tableName)) {
       error = `Table with name ${tableName} already exists. Please choose another name.`
       return
     }
@@ -56,8 +49,8 @@
 
     // Create auto screens
     const screens = screenTemplates($store, [table])
-      .filter(template => defaultScreens.includes(template.id))
-      .map(template => template.create())
+      .filter((template) => defaultScreens.includes(template.id))
+      .map((template) => template.create())
     for (let screen of screens) {
       // Record the table that created this screen so we can link it later
       screen.autoTableId = table._id
@@ -74,7 +67,7 @@
     }
 
     // Create autolink to newly created list page
-    const listPage = screens.find(screen =>
+    const listPage = screens.find((screen) =>
       screen.props._instanceName.endsWith("List")
     )
     await store.createLink(listPage.route, table.name)
@@ -84,23 +77,20 @@
   }
 </script>
 
-<Button primary wide on:click={modal.show}>Create New Table</Button>
-<Modal bind:this={modal} on:hide={resetState}>
-  <ModalContent
-    title="Create Table"
-    confirmText="Create"
-    onConfirm={saveTable}
-    disabled={error || !name || (dataImport && !dataImport.valid)}>
-    <Input
-      data-cy="table-name-input"
-      thin
-      label="Table Name"
-      on:input={checkValid}
-      bind:value={name}
-      {error} />
-    <div>
-      <Label grey extraSmall>Create Table from CSV (Optional)</Label>
-      <TableDataImport bind:dataImport />
-    </div>
-  </ModalContent>
-</Modal>
+<ModalContent
+  title="Create Table"
+  confirmText="Create"
+  onConfirm={saveTable}
+  disabled={error || !name || (dataImport && !dataImport.valid)}>
+  <Input
+    data-cy="table-name-input"
+    thin
+    label="Table Name"
+    on:input={checkValid}
+    bind:value={name}
+    {error} />
+  <div>
+    <Label grey extraSmall>Create Table from CSV (Optional)</Label>
+    <TableDataImport bind:dataImport />
+  </div>
+</ModalContent>
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index 1ac92b84c9..d52fdffade 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@@ -18,18 +18,17 @@
   .root {
     height: calc(100vh - 60px);
     display: grid;
-    grid-template-columns: 300px minmax(0, 1fr);
-    background: var(--grey-1);
-    line-height: 1;
+    grid-template-columns: 260px minmax(0, 1fr);
+    background: var(--grey-2);
   }
   .content {
     flex: 1 1 auto;
-    padding: var(--spacing-xl) 40px;
+    padding: var(--spacing-l) 40px;
     overflow-y: auto;
   }
   .nav {
     overflow-y: auto;
     background: var(--white);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
   }
 </style>

From 9a32997591f3bde454aaa7f5fdab6e2894d84ede Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 23 Oct 2020 12:57:35 +0100
Subject: [PATCH 28/52] Reduce unecessary div layers

---
 .../CreateAutomationModal.svelte              |  0
 .../TableNavigator/TableNavigator.svelte      | 61 ++++++++-----------
 .../pages/[application]/data/_layout.svelte   |  5 ++
 3 files changed, 31 insertions(+), 35 deletions(-)
 rename packages/builder/src/components/automation/AutomationPanel/{AutomationList => }/CreateAutomationModal.svelte (100%)

diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
similarity index 100%
rename from packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
rename to packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index e521a1dfc6..0b73074e10 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -33,49 +33,40 @@
   }
 </script>
 
-<div class="items-root">
-  {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
-    <div class="title">
-      <h1>Tables</h1>
-      <i on:click={modal.show} class="ri-add-circle-fill" />
-    </div>
-    <div class="hierarchy-items-container">
-      {#each $backendUiStore.tables as table}
+{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
+  <div class="title">
+    <h1>Tables</h1>
+    <i on:click={modal.show} class="ri-add-circle-fill" />
+  </div>
+  <div class="hierarchy-items-container">
+    {#each $backendUiStore.tables as table, idx}
+      <NavItem
+        border={idx > 0}
+        icon="ri-table-line"
+        text={table.name}
+        selected={selectedView === `all_${table._id}`}
+        on:click={() => selectTable(table)}>
+        <EditTablePopover {table} />
+      </NavItem>
+      {#each Object.keys(table.views || {}) as viewName}
         <NavItem
-          icon="ri-table-line"
-          text={table.name}
-          selected={selectedView === `all_${table._id}`}
-          on:click={() => selectTable(table)}>
-          <EditTablePopover {table} />
+          indentLevel={1}
+          icon="ri-eye-line"
+          text={viewName}
+          selected={selectedView === viewName}
+          on:click={() => onClickView(table, viewName)}>
+          <EditViewPopover
+            view={{ name: viewName, ...table.views[viewName] }} />
         </NavItem>
-        {#each Object.keys(table.views || {}) as viewName}
-          <NavItem
-            indentLevel={1}
-            icon="ri-eye-line"
-            text={viewName}
-            selected={selectedView === viewName}
-            on:click={() => onClickView(table, viewName)}>
-            <EditViewPopover
-              view={{ name: viewName, ...table.views[viewName] }} />
-          </NavItem>
-        {/each}
       {/each}
-    </div>
-  {/if}
-</div>
+    {/each}
+  </div>
+{/if}
 <Modal bind:this={modal}>
   <CreateTableModal />
 </Modal>
 
 <style>
-  .items-root {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-l);
-  }
-
   .title {
     display: flex;
     flex-direction: row;
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index d52fdffade..fa6b40a91d 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@@ -30,5 +30,10 @@
     overflow-y: auto;
     background: var(--white);
     padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
   }
 </style>

From 16de23eea905c33f59ae88981a53cc3c8682f985 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Oct 2020 11:00:34 +0000
Subject: [PATCH 29/52] Add new common components for dropdown styles

---
 .../common/Dropdowns/DropdownContainer.svelte | 13 +++++
 .../common/Dropdowns/DropdownItem.svelte      | 57 +++++++++++++++++++
 .../src/components/common/Dropdowns/index.js  |  2 +
 3 files changed, 72 insertions(+)
 create mode 100644 packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
 create mode 100644 packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
 create mode 100644 packages/builder/src/components/common/Dropdowns/index.js

diff --git a/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte b/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
new file mode 100644
index 0000000000..f3cea99d7b
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
@@ -0,0 +1,13 @@
+<div class="dropdown-container">
+  <slot />
+</div>
+
+<style>
+  .dropdown-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: var(--spacing-s) 0;
+  }
+</style>
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
new file mode 100644
index 0000000000..a94cc66e12
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -0,0 +1,57 @@
+<script>
+  export let icon
+  export let title
+  export let subtitle
+</script>
+
+<div class="dropdown-item" on:click>
+  {#if icon}<i class={icon} />{/if}
+  <div class="content">
+    <div class="title">{title}</div>
+    {#if subtitle}
+      <div class="subtitle">{subtitle}</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .dropdown-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+    padding: var(--spacing-s) var(--spacing-l);
+  }
+  .dropdown-item:hover {
+    background-color: var(--grey-2);
+    cursor: pointer;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .title,
+  .subtitle {
+    font-size: var(--font-size-xs);
+  }
+
+  .title {
+    font-weight: 500;
+    color: var(--ink);
+  }
+
+  .subtitle {
+    color: var(--grey-7);
+    font-weight: 400;
+  }
+
+  i {
+    font-size: 16px;
+    color: var(--ink);
+  }
+</style>
diff --git a/packages/builder/src/components/common/Dropdowns/index.js b/packages/builder/src/components/common/Dropdowns/index.js
new file mode 100644
index 0000000000..a95e303ec7
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/index.js
@@ -0,0 +1,2 @@
+export { default as DropdownContainer } from "./DropdownContainer.svelte"
+export { default as DropdownItem } from "./DropdownItem.svelte"

From 4ff7499d2660ae31b7bb07eeeed844ebb2877518 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Oct 2020 12:18:34 +0000
Subject: [PATCH 30/52] Update styles across entire automations page

---
 .../builderStore/store/automation/index.js    |  30 ++--
 .../AutomationBuilder.svelte                  |  84 ++-------
 .../AutomationBuilder/BlockList.svelte        | 129 ++++++++++++++
 .../{flowchart => FlowChart}/Arrow.svelte     |   0
 .../AutomationBlockTagline.svelte             |   0
 .../{flowchart => FlowChart}/FlowChart.svelte |  31 ++--
 .../{flowchart => FlowChart}/FlowItem.svelte  |  19 +-
 .../AutomationBuilder/flowchart/api.js        |   0
 .../AutomationBuilder/flowchart/index.js      |   0
 .../AutomationPanel/AutomationList.svelte     |  34 ++++
 .../AutomationList/AutomationList.svelte      |  79 ---------
 .../AutomationPanel/AutomationPanel.svelte    |  65 +++----
 .../BlockList/AutomationBlock.svelte          |  68 --------
 .../BlockList/BlockList.svelte                |  48 ------
 .../EditAutomationPopover.svelte              |  86 ++++++++++
 .../automation/AutomationPanel/index.js       |   3 -
 .../SetupPanel/AutomationBlockSetup.svelte    |  66 ++++---
 .../{ParamInputs => }/RowSelector.svelte      |  12 +-
 .../automation/SetupPanel/SetupPanel.svelte   | 162 +++++++-----------
 .../{ParamInputs => }/TableSelector.svelte    |   2 +-
 .../components/automation/SetupPanel/index.js |   1 -
 .../userInterface/BindableInput.svelte        |   2 +-
 .../[application]/automate/_layout.svelte     |  30 +++-
 .../pages/[application]/automate/index.svelte |   2 +-
 .../data/table/[selectedTable]/index.svelte   |   4 +-
 .../[application]/data/table/index.svelte     |   4 +-
 .../data/view/[selectedView]/index.svelte     |   2 +-
 27 files changed, 467 insertions(+), 496 deletions(-)
 create mode 100644 packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
 rename packages/builder/src/components/automation/AutomationBuilder/{flowchart => FlowChart}/Arrow.svelte (100%)
 rename packages/builder/src/components/automation/AutomationBuilder/{flowchart => FlowChart}/AutomationBlockTagline.svelte (100%)
 rename packages/builder/src/components/automation/AutomationBuilder/{flowchart => FlowChart}/FlowChart.svelte (69%)
 rename packages/builder/src/components/automation/AutomationBuilder/{flowchart => FlowChart}/FlowItem.svelte (82%)
 delete mode 100644 packages/builder/src/components/automation/AutomationBuilder/flowchart/api.js
 delete mode 100644 packages/builder/src/components/automation/AutomationBuilder/flowchart/index.js
 create mode 100644 packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
 delete mode 100644 packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
 delete mode 100644 packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
 delete mode 100644 packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte
 create mode 100644 packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
 delete mode 100644 packages/builder/src/components/automation/AutomationPanel/index.js
 rename packages/builder/src/components/automation/SetupPanel/{ParamInputs => }/RowSelector.svelte (82%)
 rename packages/builder/src/components/automation/SetupPanel/{ParamInputs => }/TableSelector.svelte (88%)
 delete mode 100644 packages/builder/src/components/automation/SetupPanel/index.js

diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index e1db07053e..2c1636b359 100644
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@@ -3,14 +3,14 @@ import api from "../../api"
 import Automation from "./Automation"
 import { cloneDeep } from "lodash/fp"
 
-const automationActions = store => ({
+const automationActions = (store) => ({
   fetch: async () => {
     const responses = await Promise.all([
       api.get(`/api/automations`),
       api.get(`/api/automations/definitions/list`),
     ])
-    const jsonResponses = await Promise.all(responses.map(x => x.json()))
-    store.update(state => {
+    const jsonResponses = await Promise.all(responses.map((x) => x.json()))
+    store.update((state) => {
       state.automations = jsonResponses[0]
       state.blockDefinitions = {
         TRIGGER: jsonResponses[1].trigger,
@@ -31,7 +31,7 @@ const automationActions = store => ({
     const CREATE_AUTOMATION_URL = `/api/automations`
     const response = await api.post(CREATE_AUTOMATION_URL, automation)
     const json = await response.json()
-    store.update(state => {
+    store.update((state) => {
       state.automations = [...state.automations, json.automation]
       store.actions.select(json.automation)
       return state
@@ -41,9 +41,9 @@ const automationActions = store => ({
     const UPDATE_AUTOMATION_URL = `/api/automations`
     const response = await api.put(UPDATE_AUTOMATION_URL, automation)
     const json = await response.json()
-    store.update(state => {
+    store.update((state) => {
       const existingIdx = state.automations.findIndex(
-        existing => existing._id === automation._id
+        (existing) => existing._id === automation._id
       )
       state.automations.splice(existingIdx, 1, json.automation)
       state.automations = state.automations
@@ -56,9 +56,9 @@ const automationActions = store => ({
     const DELETE_AUTOMATION_URL = `/api/automations/${_id}/${_rev}`
     await api.delete(DELETE_AUTOMATION_URL)
 
-    store.update(state => {
+    store.update((state) => {
       const existingIdx = state.automations.findIndex(
-        existing => existing._id === _id
+        (existing) => existing._id === _id
       )
       state.automations.splice(existingIdx, 1)
       state.automations = state.automations
@@ -72,24 +72,24 @@ const automationActions = store => ({
     const TRIGGER_AUTOMATION_URL = `/api/automations/${_id}/trigger`
     return await api.post(TRIGGER_AUTOMATION_URL)
   },
-  select: automation => {
-    store.update(state => {
+  select: (automation) => {
+    store.update((state) => {
       state.selectedAutomation = new Automation(cloneDeep(automation))
       state.selectedBlock = null
       return state
     })
   },
-  addBlockToAutomation: block => {
-    store.update(state => {
+  addBlockToAutomation: (block) => {
+    store.update((state) => {
       const newBlock = state.selectedAutomation.addBlock(cloneDeep(block))
       state.selectedBlock = newBlock
       return state
     })
   },
-  deleteAutomationBlock: block => {
-    store.update(state => {
+  deleteAutomationBlock: (block) => {
+    store.update((state) => {
       const idx = state.selectedAutomation.automation.definition.steps.findIndex(
-        x => x.id === block.id
+        (x) => x.id === block.id
       )
       state.selectedAutomation.deleteBlock(block.id)
 
diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index c832ddd8bc..a598c6831e 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -1,93 +1,31 @@
 <script>
-  import { afterUpdate } from "svelte"
   import { automationStore, backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
   import Flowchart from "./flowchart/FlowChart.svelte"
+  import BlockList from "./BlockList.svelte"
 
   $: automation = $automationStore.selectedAutomation?.automation
   $: automationLive = automation?.live
   $: instanceId = $backendUiStore.selectedDatabase._id
+  $: automationCount = $automationStore.automations?.length ?? 0
 
   function onSelect(block) {
-    automationStore.update(state => {
+    automationStore.update((state) => {
       state.selectedBlock = block
       return state
     })
   }
-
-  function setAutomationLive(live) {
-    automation.live = live
-    automationStore.actions.save({ instanceId, automation })
-    if (live) {
-      notifier.info(`Automation ${automation.name} enabled.`)
-    } else {
-      notifier.danger(`Automation ${automation.name} disabled.`)
-    }
-  }
 </script>
 
-<section>
+{#if automation}
+  <BlockList />
   <Flowchart {automation} {onSelect} />
-</section>
-<footer>
-  {#if automation}
-    <button
-      class:highlighted={automationLive}
-      class:hoverable={automationLive}
-      class="stop-button hoverable">
-      <i class="ri-stop-fill" on:click={() => setAutomationLive(false)} />
-    </button>
-    <button
-      class:highlighted={!automationLive}
-      class:hoverable={!automationLive}
-      class="play-button hoverable"
-      data-cy="activate-automation"
-      on:click={() => setAutomationLive(true)}>
-      <i class="ri-play-fill" />
-    </button>
-  {/if}
-</footer>
+{:else if automationCount === 0}
+  <i>Create your first automation to get started</i>
+{:else}<i>Select an automation to edit</i>{/if}
 
 <style>
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    overflow: auto;
-    height: 100%;
-    position: relative;
-  }
-
-  footer {
-    position: absolute;
-    bottom: var(--spacing-xl);
-    right: 30px;
-    display: flex;
-    align-items: flex-end;
-  }
-
-  footer > button {
-    border-radius: 100%;
-    color: var(--white);
-    width: 76px;
-    height: 76px;
-    border: none;
-    background: #adaec4;
-    font-size: 45px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  footer > button:first-child {
-    margin-right: var(--spacing-m);
-  }
-
-  .play-button.highlighted {
-    background: var(--purple);
-  }
-
-  .stop-button.highlighted {
-    background: var(--red);
+  i {
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
new file mode 100644
index 0000000000..d791f7f98a
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -0,0 +1,129 @@
+<script>
+  import { sortBy } from "lodash/fp"
+  import { automationStore } from "builderStore"
+  import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "../../common/Dropdowns"
+  import analytics from "analytics"
+
+  $: hasTrigger = $automationStore.selectedAutomation.hasTrigger()
+  $: tabs = [
+    {
+      label: "Trigger",
+      value: "TRIGGER",
+      icon: "ri-organization-chart",
+      disabled: hasTrigger,
+    },
+    {
+      label: "Action",
+      value: "ACTION",
+      icon: "ri-flow-chart",
+      disabled: !hasTrigger,
+    },
+    {
+      label: "Logic",
+      value: "LOGIC",
+      icon: "ri-filter-line",
+      disabled: !hasTrigger,
+    },
+  ]
+
+  let buttonProps = []
+  let selectedIndex
+  let anchors = []
+  let popover
+  $: selectedTab = selectedIndex == null ? null : tabs[selectedIndex].value
+  $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
+  $: blocks = sortBy((entry) => entry[1].name)(
+    Object.entries($automationStore.blockDefinitions[selectedTab] ?? {})
+  )
+
+  function onChangeTab(idx) {
+    selectedIndex = idx
+    popover.show()
+  }
+
+  function closePopover() {
+    selectedIndex = null
+    popover.hide()
+  }
+
+  function addBlockToAutomation(stepId, blockDefinition) {
+    const newBlock = {
+      ...blockDefinition,
+      inputs: blockDefinition.inputs || {},
+      stepId,
+      type: selectedTab,
+    }
+    automationStore.actions.addBlockToAutomation(newBlock)
+    analytics.captureEvent("Added Automation Block", {
+      name: blockDefinition.name,
+    })
+    closePopover()
+  }
+</script>
+
+<div class="tab-container">
+  {#each tabs as tab, idx}
+    <div
+      bind:this={anchors[idx]}
+      class="tab"
+      class:disabled={tab.disabled}
+      on:click={tab.disabled ? null : () => onChangeTab(idx)}
+      class:active={idx === selectedIndex}>
+      {#if tab.icon}<i class={tab.icon} />{/if}
+      <span>{tab.label}</span>
+      <i class="ri-arrow-down-s-line arrow" />
+    </div>
+  {/each}
+</div>
+<DropdownMenu
+  on:close={() => (selectedIndex = null)}
+  bind:this={popover}
+  {anchor}
+  align="left">
+  <DropdownContainer>
+    {#each blocks as [stepId, blockDefinition]}
+      <DropdownItem
+        icon={blockDefinition.icon}
+        title={blockDefinition.name}
+        subtitle={blockDefinition.description}
+        on:click={() => addBlockToAutomation(stepId, blockDefinition)} />
+    {/each}
+  </DropdownContainer>
+</DropdownMenu>
+
+<style>
+  .tab-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-l);
+    min-height: 24px;
+  }
+
+  .tab {
+    color: var(--grey-7);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    font-size: var(--font-size-xs);
+  }
+  .tab span {
+    font-weight: 500;
+    user-select: none;
+  }
+  .tab.active,
+  .tab:not(.disabled):hover {
+    color: var(--ink);
+    cursor: pointer;
+  }
+  .tab.disabled {
+    color: var(--grey-5);
+  }
+  .tab i:not(:last-child) {
+    font-size: 16px;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
similarity index 100%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
similarity index 100%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
similarity index 69%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 09a0d097de..b7e3f11bcf 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -18,16 +18,9 @@
       blocks = blocks.concat(automation.definition.steps || [])
     }
   }
-  $: automationCount = $automationStore.automations?.length ?? 0
 </script>
 
-{#if automationCount === 0}
-  <i>Create your first automation to get started</i>
-{:else if automation == null}
-  <i>Select an automation to edit</i>
-{:else if !blocks.length}
-  <i>Add some steps to your automation to get started</i>
-{/if}
+{#if !blocks.length}<i>Add a trigger to your automation to get started</i>{/if}
 <section class="canvas">
   {#each blocks as block, idx (block.id)}
     <div
@@ -44,19 +37,18 @@
 </section>
 
 <style>
-  i {
-    font-size: var(--font-size-xl);
-    color: var(--grey-4);
-    padding: var(--spacing-xl) 40px;
-    align-self: flex-start;
-  }
-
   section {
-    position: absolute;
-    padding: 40px;
+    margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
+    padding: var(--spacing-l) 40px 0 40px;
     display: flex;
     align-items: center;
     flex-direction: column;
+    overflow-y: auto;
+    flex: 1 1 auto;
+  }
+  /* Fix for firefox not respecting bottom padding in scrolling containers */
+  section > *:last-child {
+    padding-bottom: 40px;
   }
 
   .block {
@@ -65,4 +57,9 @@
     justify-content: flex-start;
     align-items: center;
   }
+
+  i {
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
similarity index 82%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 2c78875eb1..85fdcf1a1d 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -9,7 +9,12 @@
   $: selected = $automationStore.selectedBlock?.id === block.id
   $: steps =
     $automationStore.selectedAutomation?.automation?.definition?.steps ?? []
-  $: blockIdx = steps.findIndex(step => step.id === block.id)
+  $: blockIdx = steps.findIndex((step) => step.id === block.id)
+  $: allowDeleteTrigger = !steps.length
+
+  function deleteStep() {
+    automationStore.actions.deleteAutomationBlock(block)
+  }
 </script>
 
 <div
@@ -30,6 +35,9 @@
     <div class="label">
       {#if block.type === 'TRIGGER'}Trigger{:else}Step {blockIdx + 1}{/if}
     </div>
+    {#if block.type !== 'TRIGGER' || allowDeleteTrigger}
+      <i on:click|stopPropagation={deleteStep} class="delete ri-close-line" />
+    {/if}
   </header>
   <hr />
   <p>
@@ -61,6 +69,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+    gap: var(--spacing-xs);
   }
   header span {
     flex: 1 1 auto;
@@ -74,7 +83,13 @@
   }
   header i {
     font-size: 20px;
-    margin-right: 5px;
+  }
+  header i.delete {
+    opacity: 0.5;
+  }
+  header i.delete:hover {
+    cursor: pointer;
+    opacity: 1;
   }
 
   .ACTION {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/api.js b/packages/builder/src/components/automation/AutomationBuilder/flowchart/api.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/index.js b/packages/builder/src/components/automation/AutomationBuilder/flowchart/index.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
new file mode 100644
index 0000000000..c4a39d69b9
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { onMount } from "svelte"
+  import { automationStore } from "builderStore"
+  import NavItem from "components/common/NavItem.svelte"
+  import EditAutomationPopover from "./EditAutomationPopover.svelte"
+
+  $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
+
+  onMount(() => {
+    automationStore.actions.fetch()
+  })
+</script>
+
+<div class="automations-list">
+  {#each $automationStore.automations as automation, idx}
+    <NavItem
+      border={idx > 0}
+      icon="ri-stackshare-line"
+      text={automation.name}
+      selected={automation._id === selectedAutomationId}
+      on:click={() => automationStore.actions.select(automation)}>
+      <EditAutomationPopover {automation} />
+    </NavItem>
+  {/each}
+</div>
+
+<style>
+  .automations-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
deleted file mode 100644
index 328c0d6122..0000000000
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { automationStore } from "builderStore"
-  import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Button, Modal } from "@budibase/bbui"
-
-  let modal
-
-  $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
-
-  onMount(() => {
-    automationStore.actions.fetch()
-  })
-</script>
-
-<section>
-  <Button primary wide on:click={modal.show}>Create New Automation</Button>
-  <ul>
-    {#each $automationStore.automations as automation}
-      <li
-        class="automation-item"
-        class:selected={automation._id === selectedAutomationId}
-        on:click={() => automationStore.actions.select(automation)}>
-        <i class="ri-stackshare-line" class:live={automation.live} />
-        {automation.name}
-      </li>
-    {/each}
-  </ul>
-</section>
-<Modal bind:this={modal}>
-  <CreateAutomationModal />
-</Modal>
-
-<style>
-  section {
-    display: flex;
-    flex-direction: column;
-  }
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    margin: var(--spacing-xl) 0 0 0;
-    flex: 1;
-  }
-
-  i {
-    color: var(--grey-6);
-  }
-  i.live {
-    color: var(--ink);
-  }
-
-  li {
-    font-size: 14px;
-  }
-
-  .automation-item {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    border-radius: var(--border-radius-m);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin-bottom: var(--spacing-xs);
-    color: var(--ink);
-  }
-  .automation-item i {
-    font-size: 24px;
-    margin-right: var(--spacing-m);
-  }
-  .automation-item:hover {
-    cursor: pointer;
-    background: var(--grey-1);
-  }
-  .automation-item.selected {
-    background: var(--grey-2);
-  }
-</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 9a29025d56..b6a2298a22 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -1,50 +1,41 @@
 <script>
-  import { automationStore } from "builderStore"
-  import AutomationList from "./AutomationList/AutomationList.svelte"
-  import BlockList from "./BlockList/BlockList.svelte"
-  import { Heading } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
+  import AutomationList from "./AutomationList.svelte"
+  import CreateAutomationModal from "./CreateAutomationModal.svelte"
+  import { Modal } from "@budibase/bbui"
+  import { automationStore, backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
 
   let selectedTab = "AUTOMATIONS"
+  let modal
 </script>
 
-<Heading black small>
-  <span
-    data-cy="automation-list"
-    class="hoverable automation-header"
-    class:selected={selectedTab === 'AUTOMATIONS'}
-    on:click={() => (selectedTab = 'AUTOMATIONS')}>
-    Automations
-  </span>
-  {#if $automationStore.selectedAutomation}
-    <span
-      data-cy="add-automation-component"
-      class="hoverable"
-      class:selected={selectedTab === 'ADD'}
-      on:click={() => (selectedTab = 'ADD')}>
-      Steps
-    </span>
-  {/if}
-</Heading>
-<Spacer medium />
-{#if selectedTab === 'AUTOMATIONS'}
-  <AutomationList />
-{:else if selectedTab === 'ADD'}
-  <BlockList />
-{/if}
+<div class="title">
+  <h1>Automations</h1>
+  <i on:click={modal.show} class="ri-add-circle-fill" />
+</div>
+<AutomationList />
+<Modal bind:this={modal}>
+  <CreateAutomationModal />
+</Modal>
 
 <style>
-  header {
-    font-size: 18px;
-    font-weight: 600;
-    background: none;
+  .title {
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--spacing-xl);
   }
-
-  .automation-header {
-    margin-right: var(--spacing-xl);
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
   }
 
   span:not(.selected) {
diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
deleted file mode 100644
index 2419999475..0000000000
--- a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script>
-  import { automationStore } from "builderStore"
-  import analytics from "analytics"
-
-  export let blockDefinition
-  export let stepId
-  export let blockType
-
-  function addBlockToAutomation() {
-    automationStore.actions.addBlockToAutomation({
-      ...blockDefinition,
-      inputs: blockDefinition.inputs || {},
-      stepId,
-      type: blockType,
-    })
-    analytics.captureEvent("Added Automation Block", {
-      name: blockDefinition.name,
-    })
-  }
-</script>
-
-<div
-  class="automation-block hoverable"
-  on:click={addBlockToAutomation}
-  data-cy={stepId}>
-  <div><i class={blockDefinition.icon} /></div>
-  <div class="automation-text">
-    <h4>{blockDefinition.name}</h4>
-    <p>{blockDefinition.description}</p>
-  </div>
-</div>
-
-<style>
-  .automation-block {
-    display: grid;
-    grid-template-columns: 20px auto;
-    align-items: center;
-    margin-top: var(--spacing-s);
-    padding: var(--spacing-m);
-    border-radius: var(--border-radius-m);
-  }
-  .automation-block:hover {
-    background-color: var(--grey-1);
-  }
-  .automation-block:first-child {
-    margin-top: 0;
-  }
-
-  i {
-    color: var(--grey-7);
-    font-size: 20px;
-  }
-
-  .automation-text {
-    margin-left: 16px;
-  }
-  .automation-text h4 {
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 5px;
-    margin-top: 0;
-  }
-  .automation-text p {
-    font-size: 12px;
-    color: var(--grey-7);
-    margin: 0;
-  }
-</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte
deleted file mode 100644
index 1455f60ef1..0000000000
--- a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-  import { sortBy } from "lodash/fp"
-  import { automationStore } from "builderStore"
-  import AutomationBlock from "./AutomationBlock.svelte"
-  import FlatButtonGroup from "components/userInterface/FlatButtonGroup.svelte"
-
-  let selectedTab = "TRIGGER"
-  let buttonProps = []
-  $: blocks = sortBy(entry => entry[1].name)(
-    Object.entries($automationStore.blockDefinitions[selectedTab])
-  )
-
-  $: {
-    if ($automationStore.selectedAutomation.hasTrigger()) {
-      buttonProps = [
-        { value: "ACTION", text: "Action" },
-        { value: "LOGIC", text: "Logic" },
-      ]
-      if (selectedTab === "TRIGGER") {
-        selectedTab = "ACTION"
-      }
-    } else {
-      buttonProps = [{ value: "TRIGGER", text: "Trigger" }]
-      if (selectedTab !== "TRIGGER") {
-        selectedTab = "TRIGGER"
-      }
-    }
-  }
-
-  function onChangeTab(tab) {
-    selectedTab = tab
-  }
-</script>
-
-<section>
-  <FlatButtonGroup value={selectedTab} {buttonProps} onChange={onChangeTab} />
-  <div id="blocklist">
-    {#each blocks as [stepId, blockDefinition]}
-      <AutomationBlock {blockDefinition} {stepId} blockType={selectedTab} />
-    {/each}
-  </div>
-</section>
-
-<style>
-  #blocklist {
-    margin-top: var(--spacing-xl);
-  }
-</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
new file mode 100644
index 0000000000..38cc4d0069
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@@ -0,0 +1,86 @@
+<script>
+  import { automationStore, backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+
+  export let automation
+
+  let anchor
+  let dropdown
+  let confirmDeleteDialog
+  $: instanceId = $backendUiStore.selectedDatabase._id
+
+  function showModal() {
+    dropdown.hide()
+    confirmDeleteDialog.show()
+  }
+
+  async function deleteAutomation() {
+    await automationStore.actions.delete({
+      instanceId,
+      automation,
+    })
+    notifier.success("Automation deleted.")
+  }
+</script>
+
+<div bind:this={anchor} class="icon" on:click={dropdown.show}>
+  <i class="ri-more-line" />
+</div>
+<DropdownMenu align="left" {anchor} bind:this={dropdown}>
+  <DropdownContainer>
+    <DropdownItem
+      icon="ri-delete-bin-line"
+      title="Delete"
+      on:click={showModal} />
+  </DropdownContainer>
+</DropdownMenu>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  okText="Delete Automation"
+  onOk={deleteAutomation}
+  title="Confirm Delete">
+  Are you sure you wish to delete the automation
+  <i>{automation.name}?</i>
+  This action cannot be undone.
+</ConfirmDialog>
+
+<style>
+  div.icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  div.icon i {
+    font-size: 16px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: var(--spacing-s) 0;
+  }
+
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--ink);
+    padding: var(--spacing-s) var(--spacing-m);
+    margin: auto 0;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  li:hover {
+    background-color: var(--grey-2);
+  }
+
+  li:active {
+    color: var(--blue);
+  }
+</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/index.js b/packages/builder/src/components/automation/AutomationPanel/index.js
deleted file mode 100644
index 3ba95ab3b6..0000000000
--- a/packages/builder/src/components/automation/AutomationPanel/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as AutomationPanel } from "./AutomationPanel.svelte"
-export { default as BlockList } from "./BlockList/BlockList.svelte"
-export { default as AutomationList } from "./AutomationList/AutomationList.svelte"
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 896652dbb7..9165c8411a 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -1,6 +1,6 @@
 <script>
-  import TableSelector from "./ParamInputs/TableSelector.svelte"
-  import RowSelector from "./ParamInputs/RowSelector.svelte"
+  import TableSelector from "./TableSelector.svelte"
+  import RowSelector from "./RowSelector.svelte"
   import { Input, TextArea, Select, Label } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import BindableInput from "../../userInterface/BindableInput.svelte"
@@ -22,7 +22,7 @@
     if (automation.trigger) {
       allSteps = [automation.trigger, ...allSteps]
     }
-    const blockIdx = allSteps.findIndex(step => step.id === block.id)
+    const blockIdx = allSteps.findIndex((step) => step.id === block.id)
 
     // Extract all outputs from all previous steps as available bindings
     let bindings = []
@@ -44,36 +44,34 @@
   }
 </script>
 
-<div class="container" data-cy="automation-block-setup">
-  <div class="block-label">{block.name}</div>
-  {#each inputs as [key, value]}
-    <div class="bb-margin-xl block-field">
-      <Label extraSmall grey>{value.title}</Label>
-      {#if value.type === 'string' && value.enum}
-        <Select bind:value={block.inputs[key]} thin secondary>
-          <option value="">Choose an option</option>
-          {#each value.enum as option, idx}
-            <option value={option}>
-              {value.pretty ? value.pretty[idx] : option}
-            </option>
-          {/each}
-        </Select>
-      {:else if value.customType === 'password'}
-        <Input type="password" thin bind:value={block.inputs[key]} />
-      {:else if value.customType === 'table'}
-        <TableSelector bind:value={block.inputs[key]} />
-      {:else if value.customType === 'row'}
-        <RowSelector bind:value={block.inputs[key]} {bindings} />
-      {:else if value.type === 'string' || value.type === 'number'}
-        <BindableInput
-          type="string"
-          thin
-          bind:value={block.inputs[key]}
-          {bindings} />
-      {/if}
-    </div>
-  {/each}
-</div>
+<div class="block-label">{block.name}</div>
+{#each inputs as [key, value]}
+  <div class="block-field">
+    <Label extraSmall grey>{value.title}</Label>
+    {#if value.type === 'string' && value.enum}
+      <Select bind:value={block.inputs[key]} extraThin secondary>
+        <option value="">Choose an option</option>
+        {#each value.enum as option, idx}
+          <option value={option}>
+            {value.pretty ? value.pretty[idx] : option}
+          </option>
+        {/each}
+      </Select>
+    {:else if value.customType === 'password'}
+      <Input type="password" extraThin bind:value={block.inputs[key]} />
+    {:else if value.customType === 'table'}
+      <TableSelector bind:value={block.inputs[key]} />
+    {:else if value.customType === 'row'}
+      <RowSelector bind:value={block.inputs[key]} {bindings} />
+    {:else if value.type === 'string' || value.type === 'number'}
+      <BindableInput
+        type="string"
+        extraThin
+        bind:value={block.inputs[key]}
+        {bindings} />
+    {/if}
+  </div>
+{/each}
 
 <style>
   .block-field {
@@ -82,7 +80,7 @@
 
   .block-label {
     font-weight: 500;
-    font-size: 14px;
+    font-size: var(--font-size-xs);
     color: var(--grey-7);
   }
 
diff --git a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
similarity index 82%
rename from packages/builder/src/components/automation/SetupPanel/ParamInputs/RowSelector.svelte
rename to packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index a54f54b043..6ee77a5004 100644
--- a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,12 +1,14 @@
 <script>
   import { backendUiStore } from "builderStore"
   import { Input, Select, Label } from "@budibase/bbui"
-  import BindableInput from "../../../userInterface/BindableInput.svelte"
+  import BindableInput from "../../userInterface/BindableInput.svelte"
 
   export let value
   export let bindings
 
-  $: table = $backendUiStore.tables.find(table => table._id === value?.tableId)
+  $: table = $backendUiStore.tables.find(
+    (table) => table._id === value?.tableId
+  )
   $: schemaFields = Object.entries(table?.schema ?? {})
 
   // Ensure any nullish tableId values get set to empty string so
@@ -19,7 +21,7 @@
 </script>
 
 <div class="block-field">
-  <Select bind:value={value.tableId} thin secondary>
+  <Select bind:value={value.tableId} extraThin secondary>
     <option value="">Choose an option</option>
     {#each $backendUiStore.tables as table}
       <option value={table._id}>{table.name}</option>
@@ -31,7 +33,7 @@
   <div class="schema-fields">
     {#each schemaFields as [field, schema]}
       {#if schemaHasOptions(schema)}
-        <Select label={field} thin secondary bind:value={value[field]}>
+        <Select label={field} extraThin secondary bind:value={value[field]}>
           <option value="">Choose an option</option>
           {#each schema.constraints.inclusion as option}
             <option value={option}>{option}</option>
@@ -39,7 +41,7 @@
         </Select>
       {:else if schema.type === 'string' || schema.type === 'number'}
         <BindableInput
-          thin
+          extraThin
           bind:value={value[field]}
           label={field}
           type="string"
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index 37ca1f2252..c9c3089d61 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -2,23 +2,27 @@
   import { backendUiStore, automationStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
-  import { Button, Input, Label } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { Button } from "@budibase/bbui"
 
   let selectedTab = "SETUP"
   let confirmDeleteDialog
 
   $: instanceId = $backendUiStore.selectedDatabase._id
   $: automation = $automationStore.selectedAutomation?.automation
-  $: allowDeleteBlock =
-    $automationStore.selectedBlock?.type !== "TRIGGER" ||
-    !automation?.definition?.steps?.length
   $: name = automation?.name ?? ""
+  $: automationLive = automation?.live
 
-  function deleteAutomationBlock() {
-    automationStore.actions.deleteAutomationBlock(
-      $automationStore.selectedBlock
-    )
+  function setAutomationLive(live) {
+    if (automation.live === live) {
+      return
+    }
+    automation.live = live
+    automationStore.actions.save({ instanceId, automation })
+    if (live) {
+      notifier.info(`Automation ${automation.name} enabled.`)
+    } else {
+      notifier.danger(`Automation ${automation.name} disabled.`)
+    }
   }
 
   async function testAutomation() {
@@ -39,110 +43,74 @@
     })
     notifier.success(`Automation ${automation.name} saved.`)
   }
-
-  async function deleteAutomation() {
-    await automationStore.actions.delete({
-      instanceId,
-      automation,
-    })
-    notifier.success("Automation deleted.")
-  }
 </script>
 
-<section>
-  <header>
-    <span
-      class="hoverable"
-      class:selected={selectedTab === 'SETUP'}
-      on:click={() => (selectedTab = 'SETUP')}>
-      Setup
-    </span>
-  </header>
-  <div class="content">
-    {#if $automationStore.selectedBlock}
-      <AutomationBlockSetup bind:block={$automationStore.selectedBlock} />
-    {:else if $automationStore.selectedAutomation}
-      <div class="block-label">Automation <b>{automation.name}</b></div>
-      <Button secondary wide on:click={testAutomation}>Test Automation</Button>
-    {/if}
-  </div>
-  <div class="buttons">
-    {#if $automationStore.selectedBlock}
-      <Button
-        green
-        wide
-        data-cy="save-automation-setup"
-        on:click={saveAutomation}>
-        Save Automation
-      </Button>
-      <Button
-        disabled={!allowDeleteBlock}
-        red
-        wide
-        on:click={deleteAutomationBlock}>
-        Delete Step
-      </Button>
-    {:else if $automationStore.selectedAutomation}
-      <Button
-        green
-        wide
-        data-cy="save-automation-setup"
-        on:click={saveAutomation}>
-        Save Automation
-      </Button>
-      <Button red wide on:click={() => confirmDeleteDialog.show()}>
-        Delete Automation
-      </Button>
-    {/if}
-  </div>
-</section>
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete the automation '${name}'?`}
-  okText="Delete Automation"
-  onOk={deleteAutomation} />
+<div class="title">
+  <h1>Setup</h1>
+  <i
+    class:highlighted={automationLive}
+    class:hoverable={automationLive}
+    on:click={() => setAutomationLive(false)}
+    class="ri-stop-circle-fill" />
+  <i
+    class:highlighted={!automationLive}
+    class:hoverable={!automationLive}
+    data-cy="activate-automation"
+    on:click={() => setAutomationLive(true)}
+    class="ri-play-circle-fill" />
+</div>
+
+{#if $automationStore.selectedBlock}
+  <AutomationBlockSetup bind:block={$automationStore.selectedBlock} />
+{:else if $automationStore.selectedAutomation}
+  <div class="block-label">{automation.name}</div>
+  <Button secondary wide on:click={testAutomation}>Test Automation</Button>
+{/if}
+<Button
+  secondary
+  wide
+  data-cy="save-automation-setup"
+  on:click={saveAutomation}>
+  Save Automation
+</Button>
 
 <style>
-  section {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-
-  header {
-    font-size: 18px;
-    font-weight: 600;
-    font-family: inter, sans-serif;
+  .title {
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--spacing-xl);
-    color: var(--ink);
+    gap: var(--spacing-xs);
   }
-  header > span {
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+    flex: 1 1 auto;
+  }
+  .title i {
+    font-size: 20px;
     color: var(--grey-5);
-    margin-right: var(--spacing-xl);
-    cursor: pointer;
   }
-  .selected {
+  .title i.highlighted {
     color: var(--ink);
   }
+  .title i.hoverable:hover {
+    cursor: pointer;
+    color: var(--blue);
+  }
 
   .block-label {
+    font-size: var(--font-size-xs);
     font-weight: 500;
-    font-size: 14px;
     color: var(--grey-7);
-    margin-bottom: var(--spacing-xl);
   }
 
-  .content {
-    flex: 1 0 auto;
-  }
-
-  .buttons {
-    display: grid;
-    gap: var(--spacing-m);
+  .footer {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: stretch;
   }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
similarity index 88%
rename from packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte
rename to packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
index ba0b55cc85..9727fa1d51 100644
--- a/packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class="block-field">
-  <Select bind:value secondary thin>
+  <Select bind:value secondary extraThin>
     <option value="">Choose an option</option>
     {#each $backendUiStore.tables as table}
       <option value={table._id}>{table.name}</option>
diff --git a/packages/builder/src/components/automation/SetupPanel/index.js b/packages/builder/src/components/automation/SetupPanel/index.js
deleted file mode 100644
index ccfbddaf1c..0000000000
--- a/packages/builder/src/components/automation/SetupPanel/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SetupPanel } from "./SetupPanel.svelte"
diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte
index 5ba0798718..bb73dfd80d 100644
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@@ -43,7 +43,7 @@
     width: 24px;
     background: var(--grey-4);
     right: var(--spacing-s);
-    bottom: 9px;
+    bottom: 5px;
   }
   button:hover {
     background: var(--grey-5);
diff --git a/packages/builder/src/pages/[application]/automate/_layout.svelte b/packages/builder/src/pages/[application]/automate/_layout.svelte
index 95cf31e2c8..29915e7bd2 100644
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@@ -1,6 +1,7 @@
 <script>
   import { automationStore } from "builderStore"
-  import { AutomationPanel, SetupPanel } from "components/automation"
+  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
+  import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte"
 </script>
 
 <!-- routify:options index=3 -->
@@ -19,21 +20,32 @@
 </div>
 
 <style>
-  .content {
-    position: relative;
-  }
-
   .root {
     height: calc(100% - 60px);
     display: grid;
-    grid-template-columns: 300px minmax(510px, 1fr) 300px;
-    background: var(--grey-1);
-    line-height: 1;
+    grid-template-columns: 260px minmax(510px, 1fr) 260px;
+    background: var(--grey-2);
   }
 
   .nav {
     overflow-y: auto;
     background: var(--white);
-    padding: var(--spacing-xl) var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
+
+  .content {
+    position: relative;
+    padding: var(--spacing-l) 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    overflow: hidden;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/automate/index.svelte b/packages/builder/src/pages/[application]/automate/index.svelte
index 36d04677cd..1a15ed48c6 100644
--- a/packages/builder/src/pages/[application]/automate/index.svelte
+++ b/packages/builder/src/pages/[application]/automate/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { AutomationBuilder } from "components/automation"
+  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
 </script>
 
 <AutomationBuilder />
diff --git a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
index b7ee09a4f3..5491f7b884 100644
--- a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
@@ -11,7 +11,7 @@
 
 <style>
   i {
-    font-size: var(--font-size-xl);
-    color: var(--grey-4);
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/table/index.svelte b/packages/builder/src/pages/[application]/data/table/index.svelte
index 15ed1e299b..d1e2062f5c 100644
--- a/packages/builder/src/pages/[application]/data/table/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/index.svelte
@@ -27,7 +27,7 @@
 
 <style>
   i {
-    font-size: var(--font-size-xl);
-    color: var(--grey-4);
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
index 3f592e6148..c1f7abc014 100644
--- a/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
@@ -11,7 +11,7 @@
 
 <style>
   i {
-    font-size: var(--font-size-xl);
+    font-size: var(--font-size-m);
     color: var(--grey-4);
   }
 </style>

From 2114822c90f47f7e9d8b1803f35718dff54655ff Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Oct 2020 12:25:26 +0000
Subject: [PATCH 31/52] Fix automation component paths

---
 .../automation/AutomationBuilder/AutomationBuilder.svelte       | 2 +-
 .../components/automation/AutomationBuilder/BlockList.svelte    | 2 +-
 .../automation/AutomationBuilder/FlowChart/FlowChart.svelte     | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index a598c6831e..ddb86174e2 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -1,6 +1,6 @@
 <script>
   import { automationStore, backendUiStore } from "builderStore"
-  import Flowchart from "./flowchart/FlowChart.svelte"
+  import Flowchart from "./FlowChart/FlowChart.svelte"
   import BlockList from "./BlockList.svelte"
 
   $: automation = $automationStore.selectedAutomation?.automation
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
index d791f7f98a..7f477d7105 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -2,7 +2,7 @@
   import { sortBy } from "lodash/fp"
   import { automationStore } from "builderStore"
   import { DropdownMenu } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "../../common/Dropdowns"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
   import analytics from "analytics"
 
   $: hasTrigger = $automationStore.selectedAutomation.hasTrigger()
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index b7e3f11bcf..48bafb8cd3 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -3,7 +3,6 @@
   import Arrow from "./Arrow.svelte"
   import { flip } from "svelte/animate"
   import { fade, fly } from "svelte/transition"
-  import { automationStore } from "builderStore"
 
   export let automation
   export let onSelect

From 748955e3d93b372f6a593fa270312049ebfc4b80 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Oct 2020 14:03:07 +0000
Subject: [PATCH 32/52] Use common dropdown components in more places to reduce
 duplication

---
 .../common/Dropdowns/DropdownItem.svelte      |  7 +-
 .../ComponentSelectionList.svelte             | 15 +++-
 .../userInterface/ItemTab/Item.svelte         | 47 ------------
 .../userInterface/ItemTab/Tab.svelte          | 64 ----------------
 .../userInterface/ScreenDropdownMenu.svelte   | 75 +++----------------
 5 files changed, 25 insertions(+), 183 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/ItemTab/Item.svelte
 delete mode 100644 packages/builder/src/components/userInterface/ItemTab/Tab.svelte

diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
index a94cc66e12..e1b4cd4035 100644
--- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -4,11 +4,11 @@
   export let subtitle
 </script>
 
-<div class="dropdown-item" on:click>
+<div class="dropdown-item" on:click class:big={subtitle != null}>
   {#if icon}<i class={icon} />{/if}
   <div class="content">
     <div class="title">{title}</div>
-    {#if subtitle}
+    {#if subtitle != null}
       <div class="subtitle">{subtitle}</div>
     {/if}
   </div>
@@ -21,6 +21,9 @@
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-m);
+    padding: var(--spacing-xs) var(--spacing-l);
+  }
+  .dropdown-item.big {
     padding: var(--spacing-s) var(--spacing-l);
   }
   .dropdown-item:hover {
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 6f9931f0b0..8ed8917495 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -3,7 +3,7 @@
   import { store } from "builderStore"
   import components from "./temporaryPanelStructure.js"
   import { DropdownMenu } from "@budibase/bbui"
-  import Tab from "./ItemTab/Tab.svelte"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   const categories = components.categories
   let selectedIndex
@@ -50,9 +50,16 @@
   bind:this={popover}
   {anchor}
   align="left">
-  <Tab
-    list={categories[selectedIndex]}
-    on:selectItem={(e) => onComponentChosen(e.detail)} />
+  <DropdownContainer>
+    {#each categories[selectedIndex].children as item}
+      {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
+        <DropdownItem
+          icon={item.icon}
+          title={item.name}
+          on:click={() => onComponentChosen(item)} />
+      {/if}
+    {/each}
+  </DropdownContainer>
 </DropdownMenu>
 
 <style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
deleted file mode 100644
index e5a67118e9..0000000000
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-  export let item
-</script>
-
-<div data-cy={item.name} class="item-item" on:click>
-  <div class="item-icon"><i class={item.icon} /></div>
-  <div class="item-text">
-    <div class="item-name">{item.name}</div>
-  </div>
-</div>
-
-<style>
-  .item-item {
-    display: flex;
-    flex-direction: row;
-    cursor: pointer;
-    justify-content: flex-start;
-    align-items: center;
-    border-radius: 5px;
-    color: var(--grey-7);
-  }
-
-  .item-item:hover {
-    color: var(--ink);
-  }
-
-  .item-icon {
-    border-radius: 3px;
-    display: flex;
-  }
-
-  .item-text {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .item-name {
-    font-size: var(--font-size-xs);
-    font-weight: 500;
-    text-align: center;
-  }
-
-  i {
-    font-size: 16px;
-    margin-right: 8px;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
deleted file mode 100644
index 4e3aacb9c4..0000000000
--- a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
-  import Item from "./Item.svelte"
-
-  const dispatch = createEventDispatcher()
-
-  export let list
-
-  let category = list
-
-  const handleClick = (item) => {
-    if (item.children && item.children.length > 0) {
-      list = item
-    } else {
-      dispatch("selectItem", item)
-    }
-  }
-
-  const goBack = () => {
-    list = category
-  }
-</script>
-
-{#if !list.isCategory}
-  <button class="back-button" on:click={goBack}>Back</button>
-{/if}
-<div class="list">
-  {#each list.children as item}
-    {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
-      <Item {item} on:click={() => handleClick(item)} />
-    {/if}
-  {/each}
-</div>
-
-<style>
-  .back-button {
-    grid-column: 1 / span 2;
-    font-size: 14px;
-    text-align: center;
-    height: 36px;
-    border-radius: 5px;
-    border: solid 1px var(--grey-3);
-    background: white;
-    cursor: pointer;
-    font-weight: 500;
-    font-family: Inter;
-    transition: all 0.3ms;
-  }
-  .back-button:hover {
-    background: var(--grey-1);
-  }
-
-  .list {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-s);
-    flex-wrap: wrap;
-    padding: var(--spacing-l);
-    min-width: 120px;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index 7ae8bbf432..fafedeba86 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -2,9 +2,8 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import api from "builderStore/api"
-  import Portal from "svelte-portal"
   import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let screen
 
@@ -12,14 +11,10 @@
   let dropdown
   let anchor
 
-  const hideDropdown = () => {
-    dropdown.hide()
-  }
-
   const deleteScreen = () => {
     store.deleteScreens(screen, $store.currentPageName)
     // update the page if required
-    store.update(state => {
+    store.update((state) => {
       if (state.currentPreviewItem.name === screen.name) {
         store.setCurrentPage($store.currentPageName)
         $goto(`./:page/page-layout`)
@@ -29,23 +24,19 @@
   }
 </script>
 
-<div
-  bind:this={anchor}
-  class="root boundary"
-  on:click|stopPropagation={() => {}}>
+<div bind:this={anchor} on:click|stopPropagation={() => {}}>
   <div class="icon" on:click={() => dropdown.show()}>
     <i class="ri-more-line" />
   </div>
   <DropdownMenu bind:this={dropdown} {anchor} align="left">
-    <ul on:click={hideDropdown}>
-      <li on:click={() => confirmDeleteDialog.show()}>
-        <i class="ri-delete-bin-2-line" />
-        Delete
-      </li>
-    </ul>
+    <DropdownContainer>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={() => confirmDeleteDialog.show()} />
+    </DropdownContainer>
   </DropdownMenu>
 </div>
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Delete"
@@ -54,54 +45,6 @@
   onOk={deleteScreen} />
 
 <style>
-  .root {
-    overflow: hidden;
-    z-index: 9;
-  }
-
-  .root button {
-    border-style: none;
-    border-radius: 2px;
-    padding: 0;
-    background: transparent;
-    cursor: pointer;
-    color: var(--ink);
-    outline: none;
-  }
-
-  ul {
-    z-index: 100000;
-    overflow: visible;
-    margin: var(--spacing-s) 0;
-    border-radius: var(--border-radius-s);
-    padding: 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0;
-    align-items: center;
-    cursor: pointer;
-  }
-  li:not(.disabled):hover {
-    background-color: var(--grey-2);
-  }
-  li:active {
-    color: var(--blue);
-  }
-  li i {
-    margin-right: 8px;
-    font-size: var(--font-size-s);
-  }
-  li.disabled {
-    color: var(--grey-4);
-    cursor: default;
-  }
-
   .icon i {
     font-size: 16px;
   }

From 48563e892ba5d7078d3993f4643db9e35dcbdc7f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Oct 2020 14:23:08 +0000
Subject: [PATCH 33/52] Replace component dropdown menu with new common
 components

---
 .../common/Dropdowns/DropdownContainer.svelte |   2 +-
 .../common/Dropdowns/DropdownItem.svelte      |  13 +-
 .../ComponentDropdownMenu.svelte              | 163 +++++++-----------
 3 files changed, 69 insertions(+), 109 deletions(-)

diff --git a/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte b/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
index f3cea99d7b..0e881a4795 100644
--- a/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
@@ -1,4 +1,4 @@
-<div class="dropdown-container">
+<div class="dropdown-container" on:click>
   <slot />
 </div>
 
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
index e1b4cd4035..82a9704bba 100644
--- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -2,9 +2,10 @@
   export let icon
   export let title
   export let subtitle
+  export let disabled
 </script>
 
-<div class="dropdown-item" on:click class:big={subtitle != null}>
+<div class="dropdown-item" class:disabled on:click class:big={subtitle != null}>
   {#if icon}<i class={icon} />{/if}
   <div class="content">
     <div class="title">{title}</div>
@@ -22,11 +23,17 @@
     align-items: center;
     gap: var(--spacing-m);
     padding: var(--spacing-xs) var(--spacing-l);
+    color: var(--ink);
+  }
+  .dropdown-item.disabled,
+  .dropdown-item.disabled .subtitle {
+    pointer-events: none;
+    color: var(--grey-5);
   }
   .dropdown-item.big {
     padding: var(--spacing-s) var(--spacing-l);
   }
-  .dropdown-item:hover {
+  .dropdown-item:not(.disabled):hover {
     background-color: var(--grey-2);
     cursor: pointer;
   }
@@ -45,7 +52,6 @@
 
   .title {
     font-weight: 500;
-    color: var(--ink);
   }
 
   .subtitle {
@@ -55,6 +61,5 @@
 
   i {
     font-size: 16px;
-    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 59a8e4e1ed..7567bc5366 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -3,10 +3,10 @@
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/storeUtils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { last, cloneDeep } from "lodash/fp"
+  import { last } from "lodash/fp"
   import { getParent, saveCurrentPreviewItem } from "builderStore/storeUtils"
-  import { uuid } from "builderStore/uuid"
   import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let component
 
@@ -18,27 +18,27 @@
     !component || !getComponentDefinition($store, component._component).children
   $: noPaste = !$store.componentToPaste
 
-  const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
+  const lastPartOfName = (c) => (c ? last(c._component.split("/")) : "")
 
   const hideDropdown = () => {
     dropdown.hide()
   }
 
-  const selectComponent = component => {
+  const selectComponent = (component) => {
     store.selectComponent(component)
     const path = store.getPathToComponent(component)
     $goto(`./:page/:screen/${path}`)
   }
 
   const moveUpComponent = () => {
-    store.update(s => {
+    store.update((s) => {
       const parent = getParent(s.currentPreviewItem.props, component)
 
       if (parent) {
         const currentIndex = parent._children.indexOf(component)
         if (currentIndex === 0) return s
 
-        const newChildren = parent._children.filter(c => c !== component)
+        const newChildren = parent._children.filter((c) => c !== component)
         newChildren.splice(currentIndex - 1, 0, component)
         parent._children = newChildren
       }
@@ -50,14 +50,14 @@
   }
 
   const moveDownComponent = () => {
-    store.update(s => {
+    store.update((s) => {
       const parent = getParent(s.currentPreviewItem.props, component)
 
       if (parent) {
         const currentIndex = parent._children.indexOf(component)
         if (currentIndex === parent._children.length - 1) return s
 
-        const newChildren = parent._children.filter(c => c !== component)
+        const newChildren = parent._children.filter((c) => c !== component)
         newChildren.splice(currentIndex + 1, 0, component)
         parent._children = newChildren
       }
@@ -74,11 +74,11 @@
   }
 
   const deleteComponent = () => {
-    store.update(state => {
+    store.update((state) => {
       const parent = getParent(state.currentPreviewItem.props, component)
 
       if (parent) {
-        parent._children = parent._children.filter(c => c !== component)
+        parent._children = parent._children.filter((c) => c !== component)
         selectComponent(parent)
       }
 
@@ -92,7 +92,7 @@
     store.storeComponentForCopy(component, cut)
   }
 
-  const pasteComponent = mode => {
+  const pasteComponent = (mode) => {
     // lives in store - also used by drag drop
     store.pasteComponent(component, mode)
   }
@@ -100,63 +100,51 @@
 
 <div bind:this={anchor} on:click|stopPropagation={() => {}}>
   <div class="icon" on:click={dropdown.show}><i class="ri-more-line" /></div>
+  <DropdownMenu bind:this={dropdown} width="170px" {anchor} align="left">
+    <DropdownContainer on:click={hideDropdown}>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={() => confirmDeleteDialog.show()} />
+      <DropdownItem
+        icon="ri-arrow-up-line"
+        title="Move up"
+        on:click={moveUpComponent} />
+      <DropdownItem
+        icon="ri-arrow-down-line"
+        title="Move down"
+        on:click={moveDownComponent} />
+      <DropdownItem
+        icon="ri-repeat-one-line"
+        title="Duplicate"
+        on:click={copyComponent} />
+      <DropdownItem
+        icon="ri-scissors-cut-line"
+        title="Cut"
+        on:click={() => storeComponentForCopy(true)} />
+      <DropdownItem
+        icon="ri-file-copy-line"
+        title="Copy"
+        on:click={() => storeComponentForCopy(false)} />
+      <hr class="hr-style" />
+      <DropdownItem
+        icon="ri-insert-row-top"
+        title="Paste above"
+        disabled={noPaste}
+        on:click={() => pasteComponent('above')} />
+      <DropdownItem
+        icon="ri-insert-row-bottom"
+        title="Paste below"
+        disabled={noPaste}
+        on:click={() => pasteComponent('below')} />
+      <DropdownItem
+        icon="ri-insert-column-right"
+        title="Paste inside"
+        disabled={noPaste || noChildrenAllowed}
+        on:click={() => pasteComponent('inside')} />
+    </DropdownContainer>
+  </DropdownMenu>
 </div>
-<DropdownMenu
-  bind:this={dropdown}
-  on:click={hideDropdown}
-  width="170px"
-  {anchor}
-  align="left">
-  <ul>
-    <li class="item" on:click={() => confirmDeleteDialog.show()}>
-      <i class="ri-delete-bin-2-line" />
-      Delete
-    </li>
-    <li class="item" on:click={moveUpComponent}>
-      <i class="ri-arrow-up-line" />
-      Move up
-    </li>
-    <li class="item" on:click={moveDownComponent}>
-      <i class="ri-arrow-down-line" />
-      Move down
-    </li>
-    <li class="item" on:click={copyComponent}>
-      <i class="ri-repeat-one-line" />
-      Duplicate
-    </li>
-    <li class="item" on:click={() => storeComponentForCopy(true)}>
-      <i class="ri-scissors-cut-line" />
-      Cut
-    </li>
-    <li class="item" on:click={() => storeComponentForCopy(false)}>
-      <i class="ri-file-copy-line" />
-      Copy
-    </li>
-    <hr class="hr-style" />
-    <li
-      class="item"
-      class:disabled={noPaste}
-      on:click={() => pasteComponent('above')}>
-      <i class="ri-insert-row-top" />
-      Paste above
-    </li>
-    <li
-      class="item"
-      class:disabled={noPaste}
-      on:click={() => pasteComponent('below')}>
-      <i class="ri-insert-row-bottom" />
-      Paste below
-    </li>
-    <li
-      class="item"
-      class:disabled={noPaste || noChildrenAllowed}
-      on:click={() => pasteComponent('inside')}>
-      <i class="ri-insert-column-right" />
-      Paste inside
-    </li>
-  </ul>
-</DropdownMenu>
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Delete"
@@ -165,43 +153,10 @@
   onOk={deleteComponent} />
 
 <style>
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0;
-    align-items: center;
-    cursor: pointer;
-  }
-  li:not(.disabled):hover {
-    background-color: var(--grey-2);
-  }
-  li:active {
-    color: var(--blue);
-  }
-  li i {
-    margin-right: 8px;
-    font-size: var(--font-size-s);
-  }
-  li.disabled {
-    color: var(--grey-4);
-    cursor: default;
-  }
-
-  .icon i {
-    font-size: 16px;
-  }
-
-  .hr-style {
+  hr {
     margin: 8px 0;
-    color: var(--grey-4);
+    background-color: var(--grey-4);
+    height: 1px;
+    border: none;
   }
 </style>

From 3626d8da2b26ea5e3546e78995f3cf2bd14fcf12 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Oct 2020 14:34:52 +0000
Subject: [PATCH 34/52] Replace backend usages of dropdown menus with common
 components

---
 .../DataTable/popovers/RowPopover.svelte      | 52 ++--------
 .../popovers/EditTablePopover.svelte          | 98 +++++++------------
 .../popovers/EditViewPopover.svelte           | 78 +++++----------
 3 files changed, 71 insertions(+), 157 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
index ec1e2bb783..b20af655a1 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
@@ -1,10 +1,11 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Icon, Modal } from "@budibase/bbui"
+  import { DropdownMenu, Modal } from "@budibase/bbui"
   import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
   import * as api from "../api"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let row
 
@@ -34,16 +35,13 @@
   <i class="ri-more-line" />
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
-  <ul>
-    <li data-cy="edit-row" on:click={showModal}>
-      <Icon name="edit" />
-      <span>Edit</span>
-    </li>
-    <li data-cy="delete-row" on:click={showDelete}>
-      <Icon name="delete" />
-      <span>Delete</span>
-    </li>
-  </ul>
+  <DropdownContainer>
+    <DropdownItem icon="ri-edit-line" title="Edit" on:click={showModal} />
+    <DropdownItem
+      icon="ri-delete-bin-line"
+      title="Delete"
+      on:click={showDelete} />
+  </DropdownContainer>
 </DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
@@ -59,36 +57,4 @@
   .ri-more-line:hover {
     cursor: pointer;
   }
-
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-    font-size: var(--font-size-xs);
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 25f74671fd..d5a88d85d7 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -1,11 +1,9 @@
 <script>
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import screenTemplates from "builderStore/store/screenTemplates"
-  import api from "builderStore/api"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let table
 
@@ -31,9 +29,11 @@
 
   function showModal() {
     const screens = $store.screens
-    templateScreens = screens.filter(screen => screen.autoTableId === table._id)
+    templateScreens = screens.filter(
+      (screen) => screen.autoTableId === table._id
+    )
     willBeDeleted = ["All table data"].concat(
-      templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
+      templateScreens.map((screen) => `Screen ${screen.props._instanceName}`)
     )
     hideEditor()
     confirmDeleteDialog.show()
@@ -57,7 +57,7 @@
     const tableName = evt.target.value
     if (
       originalName !== tableName &&
-      $backendUiStore.models?.some(model => model.name === tableName)
+      $backendUiStore.models?.some((model) => model.name === tableName)
     ) {
       error = `Table with name ${tableName} already exists. Please choose another name.`
       return
@@ -66,37 +66,36 @@
   }
 </script>
 
-<div bind:this={anchor} class="icon" on:click={dropdown.show}>
-  <i class="ri-more-line" />
+<div on:click|stopPropagation>
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    {#if editing}
+      <div class="actions">
+        <h5>Edit Table</h5>
+        <Input
+          label="Table Name"
+          thin
+          bind:value={table.name}
+          on:input={checkValid}
+          {error} />
+        <footer>
+          <Button secondary on:click={hideEditor}>Cancel</Button>
+          <Button primary disabled={error} on:click={save}>Save</Button>
+        </footer>
+      </div>
+    {:else}
+      <DropdownContainer>
+        <DropdownItem icon="ri-edit-line" title="Edit" on:click={showEditor} />
+        <DropdownItem
+          icon="ri-delete-bin-line"
+          title="Delete"
+          on:click={showModal} />
+      </DropdownContainer>
+    {/if}
+  </DropdownMenu>
 </div>
-<DropdownMenu align="left" {anchor} bind:this={dropdown}>
-  {#if editing}
-    <div class="actions">
-      <h5>Edit Table</h5>
-      <Input
-        label="Table Name"
-        thin
-        bind:value={table.name}
-        on:input={checkValid}
-        {error} />
-      <footer>
-        <Button secondary on:click={hideEditor}>Cancel</Button>
-        <Button primary disabled={error} on:click={save}>Save</Button>
-      </footer>
-    </div>
-  {:else}
-    <ul>
-      <li on:click={showEditor}>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li data-cy="delete-table" on:click={showModal}>
-        <Icon name="delete" />
-        Delete
-      </li>
-    </ul>
-  {/if}
-</DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Table"
@@ -155,29 +154,4 @@
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 9c165355d2..347f03ac22 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -2,9 +2,9 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let view
 
@@ -46,32 +46,31 @@
   }
 </script>
 
-<div bind:this={anchor} class="icon" on:click={dropdown.show}>
-  <i class="ri-more-line" />
+<div on:click|stopPropagation>
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    {#if editing}
+      <div class="actions">
+        <h5>Edit View</h5>
+        <Input label="View Name" thin bind:value={view.name} />
+        <footer>
+          <Button secondary on:click={hideEditor}>Cancel</Button>
+          <Button primary on:click={save}>Save</Button>
+        </footer>
+      </div>
+    {:else}
+      <DropdownContainer>
+        <DropdownItem icon="ri-edit-line" title="Edit" on:click={showEditor} />
+        <DropdownItem
+          icon="ri-delete-bin-line"
+          title="Delete"
+          on:click={showDelete} />
+      </DropdownContainer>
+    {/if}
+  </DropdownMenu>
 </div>
-<DropdownMenu align="left" {anchor} bind:this={dropdown}>
-  {#if editing}
-    <div class="actions">
-      <h5>Edit View</h5>
-      <Input label="View Name" thin bind:value={view.name} />
-      <footer>
-        <Button secondary on:click={hideEditor}>Cancel</Button>
-        <Button primary on:click={save}>Save</Button>
-      </footer>
-    </div>
-  {:else}
-    <ul>
-      <li on:click={showEditor}>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li data-cy="delete-view" on:click={showDelete}>
-        <Icon name="delete" />
-        Delete
-      </li>
-    </ul>
-  {/if}
-</DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
@@ -108,29 +107,4 @@
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
 </style>

From 88d268afbf7116e7d438c80b52c2952cd9b3848d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Oct 2020 15:14:51 +0000
Subject: [PATCH 35/52] Change default font-weight of dropdown options to 400

---
 .../builder/src/components/common/Dropdowns/DropdownItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
index 82a9704bba..459c318349 100644
--- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -51,7 +51,7 @@
   }
 
   .title {
-    font-weight: 500;
+    font-weight: 400;
   }
 
   .subtitle {

From 990777c601c8ce18ee47341458ae063bc63cc68f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Oct 2020 15:17:18 +0000
Subject: [PATCH 36/52] Stop propagation in context menu clicks

---
 .../EditAutomationPopover.svelte              | 22 ++++++++++---------
 .../ComponentDropdownMenu.svelte              |  2 +-
 .../userInterface/ScreenDropdownMenu.svelte   |  2 +-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
index 38cc4d0069..7868d8d2c6 100644
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@@ -26,17 +26,19 @@
   }
 </script>
 
-<div bind:this={anchor} class="icon" on:click={dropdown.show}>
-  <i class="ri-more-line" />
+<div on:click|stopPropagation>
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    <DropdownContainer>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={showModal} />
+    </DropdownContainer>
+  </DropdownMenu>
 </div>
-<DropdownMenu align="left" {anchor} bind:this={dropdown}>
-  <DropdownContainer>
-    <DropdownItem
-      icon="ri-delete-bin-line"
-      title="Delete"
-      on:click={showModal} />
-  </DropdownContainer>
-</DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Automation"
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 7567bc5366..033eaa27d4 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -98,7 +98,7 @@
   }
 </script>
 
-<div bind:this={anchor} on:click|stopPropagation={() => {}}>
+<div bind:this={anchor} on:click|stopPropagation>
   <div class="icon" on:click={dropdown.show}><i class="ri-more-line" /></div>
   <DropdownMenu bind:this={dropdown} width="170px" {anchor} align="left">
     <DropdownContainer on:click={hideDropdown}>
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index fafedeba86..b288c4ee75 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -24,7 +24,7 @@
   }
 </script>
 
-<div bind:this={anchor} on:click|stopPropagation={() => {}}>
+<div bind:this={anchor} on:click|stopPropagation>
   <div class="icon" on:click={() => dropdown.show()}>
     <i class="ri-more-line" />
   </div>

From fae4037a652a71131c56e9631ff22b2a148d5895 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 27 Oct 2020 09:10:20 +0000
Subject: [PATCH 37/52] Remove bunch of unused components and tidy up unused
 references

---
 .../components/backend/DataTable/Table.svelte |  11 +-
 .../popovers/CreateEditColumnPopover.svelte   |  26 +--
 .../src/components/common/ActionButton.svelte |  70 -------
 .../src/components/common/Button.svelte       | 171 ------------------
 .../src/components/common/ButtonGroup.svelte  |  15 --
 .../src/components/common/Dropzone.svelte     |  11 +-
 .../src/components/common/NumberBox.svelte    |  36 ----
 .../src/components/common/Switcher.svelte     |  76 --------
 .../builder/src/components/common/core.js     |   3 -
 .../src/components/common/eventHandlers.js    |  13 --
 .../AppPreview/CurrentItemPreview.svelte      |   6 +-
 .../userInterface/ComponentsHierarchy.svelte  |   2 +-
 .../ComponentsHierarchyChildren.svelte        |   2 +-
 .../EventsEditor/EventEditorModal.svelte      |  19 +-
 .../EventsEditor/StateBindingCascader.svelte  |   9 +-
 .../pagesParsing/searchComponents.js          |  16 +-
 .../pagesParsing/splitRootComponentName.js    |   4 +-
 packages/builder/src/helpers.js               |  19 +-
 .../pages/[application]/design/_layout.svelte |   5 -
 packages/builder/src/pages/index.svelte       |   4 -
 .../src/attachments/Dropzone.svelte           |   7 +-
 21 files changed, 51 insertions(+), 474 deletions(-)
 delete mode 100644 packages/builder/src/components/common/ActionButton.svelte
 delete mode 100644 packages/builder/src/components/common/Button.svelte
 delete mode 100644 packages/builder/src/components/common/ButtonGroup.svelte
 delete mode 100644 packages/builder/src/components/common/NumberBox.svelte
 delete mode 100644 packages/builder/src/components/common/Switcher.svelte
 delete mode 100644 packages/builder/src/components/common/core.js
 delete mode 100644 packages/builder/src/components/common/eventHandlers.js

diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index e26b68d537..38ef221e86 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -1,22 +1,13 @@
 <script>
   import { goto, params } from "@sveltech/routify"
-  import { onMount } from "svelte"
   import { fade } from "svelte/transition"
   import fsort from "fast-sort"
   import getOr from "lodash/fp/getOr"
-  import { store, backendUiStore } from "builderStore"
-  import api from "builderStore/api"
-  import { Button, Icon } from "@budibase/bbui"
-  import ActionButton from "components/common/ActionButton.svelte"
+  import { backendUiStore } from "builderStore"
   import AttachmentList from "./AttachmentList.svelte"
   import TablePagination from "./TablePagination.svelte"
-  import CreateEditRowModal from "./modals/CreateEditRowModal.svelte"
-  import RowPopover from "./buttons/CreateRowButton.svelte"
-  import ColumnPopover from "./buttons/CreateColumnButton.svelte"
-  import ViewPopover from "./buttons/CreateViewButton.svelte"
   import ColumnHeaderPopover from "./popovers/ColumnPopover.svelte"
   import EditRowPopover from "./popovers/RowPopover.svelte"
-  import CalculationPopover from "./buttons/CalculateButton.svelte"
   import Spinner from "components/common/Spinner.svelte"
 
   const ITEMS_PER_PAGE = 10
diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
index 9549041a18..a852707993 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
@@ -1,26 +1,10 @@
 <script>
-  import { onMount } from "svelte"
-  import {
-    Input,
-    TextArea,
-    Button,
-    Select,
-    Toggle,
-    Label,
-  } from "@budibase/bbui"
-  import { cloneDeep, merge } from "lodash/fp"
-  import { store, backendUiStore } from "builderStore"
+  import { Input, Button, Select, Toggle } from "@budibase/bbui"
+  import { cloneDeep } from "lodash/fp"
+  import { backendUiStore } from "builderStore"
   import { FIELDS } from "constants/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import ButtonGroup from "components/common/ButtonGroup.svelte"
-  import NumberBox from "components/common/NumberBox.svelte"
   import ValuesList from "components/common/ValuesList.svelte"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
-  import Checkbox from "components/common/Checkbox.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
   import DatePicker from "components/common/DatePicker.svelte"
-  import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
-  import * as api from "../api"
 
   let fieldDefinitions = cloneDeep(FIELDS)
 
@@ -38,12 +22,12 @@
     $backendUiStore.selectedTable.primaryDisplay == null ||
     $backendUiStore.selectedTable.primaryDisplay === field.name
   $: tableOptions = $backendUiStore.tables.filter(
-    table => table._id !== $backendUiStore.draftTable._id
+    (table) => table._id !== $backendUiStore.draftTable._id
   )
   $: required = !!field?.constraints?.presence || primaryDisplay
 
   async function saveColumn() {
-    backendUiStore.update(state => {
+    backendUiStore.update((state) => {
       backendUiStore.actions.tables.saveField({
         originalName,
         field,
diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
deleted file mode 100644
index 3af21e4398..0000000000
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-  export let disabled = false
-  export let hidden = false
-  export let secondary = false
-  export let primary = true
-  export let cancel = false
-  export let alert = false
-  export let warning = false
-</script>
-
-<button
-  on:click
-  class="button"
-  class:hidden
-  class:secondary
-  class:primary
-  class:alert
-  class:cancel
-  class:warning
-  {disabled}>
-  <slot />
-</button>
-
-<style>
-  .primary {
-    color: #ffffff;
-    background: var(--blue);
-    border: solid 1px var(--blue);
-  }
-
-  .alert {
-    color: white;
-    background: #e26d69;
-    border: solid 1px #e26d69;
-  }
-
-  .cancel {
-    color: var(--secondary40);
-    background: none;
-  }
-
-  .secondary {
-    color: var(--ink);
-    border: solid 1px var(--grey-4);
-    background: white;
-  }
-
-  .button {
-    font-size: 14px;
-    font-weight: 500;
-    border-radius: 3px;
-    padding: 10px 20px;
-    height: 40px;
-  }
-
-  .button:hover {
-    cursor: pointer;
-    filter: saturate(90%);
-  }
-
-  .button:disabled {
-    color: rgba(22, 48, 87, 0.2);
-    cursor: default;
-    background: transparent;
-  }
-
-  .hidden {
-    visibility: hidden;
-  }
-</style>
diff --git a/packages/builder/src/components/common/Button.svelte b/packages/builder/src/components/common/Button.svelte
deleted file mode 100644
index a5fe3752a2..0000000000
--- a/packages/builder/src/components/common/Button.svelte
+++ /dev/null
@@ -1,171 +0,0 @@
-<script>
-  export let color = "primary"
-  export let className = ""
-  export let style = ""
-  export let groupPosition = ""
-  export let grouped = false
-
-  $: borderClass = grouped ? "" : "border-normal"
-</script>
-
-<button
-  class="{color}
-  {className}
-  {borderClass}
-  {grouped ? 'grouped' : ''}"
-  {style}
-  on:click>
-  <slot />
-</button>
-
-<style>
-  .border-normal {
-    border-radius: var(--borderradiusall);
-  }
-  .border-left {
-    border-radius: var(--borderradius) 0 0 var(--borderradius);
-  }
-  .border-right {
-    border-radius: 0 var(--borderradius) var(--borderradius) 0;
-  }
-  .border-middle {
-    border-radius: 0;
-  }
-
-  button {
-    border-style: solid;
-    padding: 7.5px 15px;
-    cursor: pointer;
-    margin: 5px;
-    border-radius: 5px;
-  }
-
-  /* ---- PRIMARY ----*/
-  .primary {
-    background-color: var(--blue);
-    border-color: var(--blue);
-    color: var(--white);
-  }
-
-  .primary:hover {
-    background-color: var(--blue);
-    border-color: var(--blue);
-  }
-
-  .primary:active {
-    background-color: var(--primarydark);
-    border-color: var(--primarydark);
-  }
-
-  .primary-outline {
-    background-color: var(--white);
-    border-color: var(--blue);
-    color: var(--blue);
-  }
-
-  .primary-outline:hover {
-    background-color: var(--primary10);
-  }
-
-  .primary-outline:pressed {
-    background-color: var(--primary25);
-  }
-
-  /* ---- secondary ----*/
-
-  .secondary {
-    background-color: var(--ink);
-    border-color: var(--ink);
-    color: var(--white);
-  }
-
-  .secondary:hover {
-    background-color: var(--secondary75);
-    border-color: var(--secondary75);
-  }
-
-  .secondary:pressed {
-    background-color: var(--secondarydark);
-    border-color: var(--secondarydark);
-  }
-
-  .secondary-outline {
-    background-color: var(--white);
-    border-color: var(--ink);
-    color: var(--ink);
-  }
-
-  .secondary-outline:hover {
-    background-color: var(--secondary10);
-  }
-
-  .secondary-outline:pressed {
-    background-color: var(--secondary25);
-  }
-
-  /* ---- success ----*/
-  .success {
-    background-color: var(--success100);
-    border-color: var(--success100);
-    color: var(--white);
-  }
-
-  .success:hover {
-    background-color: var(--success75);
-    border-color: var(--success75);
-  }
-
-  .success:pressed {
-    background-color: var(--successdark);
-    border-color: var(--successdark);
-  }
-
-  .success-outline {
-    background-color: var(--white);
-    border-color: var(--success100);
-    color: var(--success100);
-  }
-
-  .success-outline:hover {
-    background-color: var(--success10);
-  }
-
-  .success-outline:pressed {
-    background-color: var(--success25);
-  }
-
-  /* ---- deletion ----*/
-  .deletion {
-    background-color: var(--red);
-    border-color: var(--red);
-    color: var(--white);
-  }
-
-  .deletion:hover {
-    background-color: var(--red-light);
-    border-color: var(--red);
-    color: var(--red);
-  }
-
-  .deletion:pressed {
-    background-color: var(--red-dark);
-    border-color: var(--red-dark);
-    color: var(--white);
-  }
-
-  .deletion-outline {
-    background-color: var(--white);
-    border-color: var(--red);
-    color: var(--red);
-  }
-
-  .deletion-outline:hover {
-    background-color: var(--red-light);
-    color: var(--red);
-  }
-
-  .deletion-outline:pressed {
-    background-color: var(--red-dark);
-    color: var(--white);
-  }
-</style>
diff --git a/packages/builder/src/components/common/ButtonGroup.svelte b/packages/builder/src/components/common/ButtonGroup.svelte
deleted file mode 100644
index 7b57ea34cc..0000000000
--- a/packages/builder/src/components/common/ButtonGroup.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  export let style = ""
-</script>
-
-<div class="root" {style}>
-  <slot />
-</div>
-
-<style>
-  .root {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-</style>
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 53cd606143..0a040f8873 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,14 +1,17 @@
 <script>
   import { notifier } from "builderStore/store/notifications"
-  import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
+  import { Dropzone } from "@budibase/bbui"
   import api from "builderStore/api"
 
   export let files = []
 
-  function handleFileTooLarge() {
+  const BYTES_IN_MB = 1000000
+
+  function handleFileTooLarge(fileSizeLimit) {
     notifier.danger(
-      `Files cannot exceed ${fileSizeLimit /
-        BYTES_IN_MB}MB. Please try again with smaller files.`
+      `Files cannot exceed ${
+        fileSizeLimit / BYTES_IN_MB
+      }MB. Please try again with smaller files.`
     )
   }
 
diff --git a/packages/builder/src/components/common/NumberBox.svelte b/packages/builder/src/components/common/NumberBox.svelte
deleted file mode 100644
index 106b9e67d2..0000000000
--- a/packages/builder/src/components/common/NumberBox.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  export let value
-  export let label
-
-  const inputChanged = ev => {
-    try {
-      value = Number(ev.target.value)
-    } catch (_) {
-      value = null
-    }
-  }
-
-  let numberText = value === null || value === undefined ? "" : value.toString()
-</script>
-
-<div class="numberbox">
-  <label>{label}</label>
-  <input
-    class="budibase__input"
-    type="number"
-    {value}
-    on:change={inputChanged} />
-</div>
-
-<style>
-  .numberbox {
-    display: grid;
-    align-items: center;
-  }
-
-  label {
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 8px;
-  }
-</style>
diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte
deleted file mode 100644
index 707bbfcc64..0000000000
--- a/packages/builder/src/components/common/Switcher.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-  export let tabs = []
-  export const selectTab = tabName => {
-    selected = tabName
-    selectedIndex = tabs.indexOf(selected)
-  }
-
-  let selected = tabs.length > 0 && tabs[0]
-  let selectedIndex = 0
-
-  const isSelected = tab => selected === tab
-</script>
-
-<div class="root">
-  <div class="switcher">
-    {#each tabs as tab}
-      <button class:selected={selected === tab} on:click={() => selectTab(tab)}>
-        {tab}
-      </button>
-    {/each}
-  </div>
-
-  <div class="panel">
-    {#if selectedIndex === 0}
-      <slot name="0" />
-    {:else if selectedIndex === 1}
-      <slot name="1" />
-    {:else if selectedIndex === 2}
-      <slot name="2" />
-    {:else if selectedIndex === 3}
-      <slot name="3" />
-    {/if}
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 20px;
-    border-left: solid 1px var(--grey-2);
-    box-sizing: border-box;
-  }
-
-  .switcher {
-    display: flex;
-    margin: 0px 20px 20px 0px;
-    box-sizing: border-box;
-  }
-
-  .switcher > button {
-    display: inline-block;
-    border: none;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--grey-5);
-    margin-right: 20px;
-    background: none;
-    outline: none;
-    font-family: Inter;
-  }
-
-  .switcher > .selected {
-    color: var(--ink);
-  }
-
-  .panel {
-    min-height: 0;
-    height: 100%;
-    overflow-y: auto;
-  }
-</style>
diff --git a/packages/builder/src/components/common/core.js b/packages/builder/src/components/common/core.js
deleted file mode 100644
index 19a3c9afed..0000000000
--- a/packages/builder/src/components/common/core.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { flow } from "lodash/fp"
-
-export const pipe = (arg, funcs) => flow(funcs)(arg)
diff --git a/packages/builder/src/components/common/eventHandlers.js b/packages/builder/src/components/common/eventHandlers.js
deleted file mode 100644
index 2e7a62ac3e..0000000000
--- a/packages/builder/src/components/common/eventHandlers.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { eventHandlers } from "../../../../client/src/state/eventHandlers"
-export { EVENT_TYPE_MEMBER_NAME } from "../../../../client/src/state/eventHandlers"
-
-export const allHandlers = () => {
-  const handlersObj = eventHandlers()
-
-  const handlers = Object.keys(handlersObj).map(name => ({
-    name,
-    ...handlersObj[name],
-  }))
-
-  return handlers
-}
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 85c50711ae..a565a925e4 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -2,7 +2,7 @@
   import { store, backendUiStore } from "builderStore"
   import { map, join } from "lodash/fp"
   import iframeTemplate from "./iframeTemplate"
-  import { pipe } from "components/common/core"
+  import { pipe } from "../../../helpers"
 
   let iframe
   let styles = ""
@@ -16,7 +16,7 @@
     return props
   }
 
-  const getComponentTypeName = component => {
+  const getComponentTypeName = (component) => {
     let [componentName] = component._component.match(/[a-z]*$/)
     return componentName || "element"
   }
@@ -144,7 +144,7 @@
   }
 
   $: stylesheetLinks = pipe($store.pages.stylesheets, [
-    map(s => `<link rel="stylesheet" href="${s}"/>`),
+    map((s) => `<link rel="stylesheet" href="${s}"/>`),
     join("\n"),
   ])
 
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index dae80cf1e7..0911a80558 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -2,7 +2,7 @@
   import { goto } from "@sveltech/routify"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
   import { trimCharsStart, trimChars } from "lodash/fp"
-  import { pipe } from "components/common/core"
+  import { pipe } from "../../helpers"
   import { store } from "builderStore"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
   import { writable } from "svelte/store"
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index fce8b26512..193ec7e49f 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -2,7 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { last } from "lodash/fp"
-  import { pipe } from "components/common/core"
+  import { pipe } from "../../helpers"
   import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import { getComponentDefinition } from "builderStore/storeUtils"
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 0e45f2fcac..e3cc645eb0 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -1,14 +1,7 @@
 <script>
-  import { store } from "builderStore"
-  import {
-    TextButton,
-    Button,
-    Body,
-    DropdownMenu,
-    ModalContent,
-  } from "@budibase/bbui"
+  import { TextButton, Body, DropdownMenu, ModalContent } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
-  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
+  import { EVENT_TYPE_MEMBER_NAME } from "../../../../../client/src/state/eventHandlers"
   import actionTypes from "./actions"
   import { createEventDispatcher } from "svelte"
 
@@ -25,19 +18,19 @@
   $: actions = event || []
   $: selectedActionComponent =
     selectedAction &&
-    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME])
+    actionTypes.find((t) => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME])
       .component
 
   const updateEventHandler = (updatedHandler, index) => {
     actions[index] = updatedHandler
   }
 
-  const deleteAction = index => {
+  const deleteAction = (index) => {
     actions.splice(index, 1)
     actions = actions
   }
 
-  const addAction = actionType => () => {
+  const addAction = (actionType) => () => {
     const newAction = {
       parameters: {},
       [EVENT_TYPE_MEMBER_NAME]: actionType.name,
@@ -48,7 +41,7 @@
     addActionDropdown.hide()
   }
 
-  const selectAction = action => () => {
+  const selectAction = (action) => () => {
     selectedAction = action
   }
 
diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
index cb1d1dd1dd..6f1cf298c6 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -1,17 +1,12 @@
 <script>
   import { Input, DataList, Select } from "@budibase/bbui"
-  import { find, map, keys, reduce, keyBy } from "lodash/fp"
-  import { pipe } from "components/common/core"
-  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
   import { store, automationStore } from "builderStore"
-  import { ArrowDownIcon } from "components/common/Icons/"
-  import { createEventDispatcher } from "svelte"
 
   export let parameter
 
   let isOpen = false
 
-  const capitalize = s => {
+  const capitalize = (s) => {
     if (typeof s !== "string") return ""
     return s.charAt(0).toUpperCase() + s.slice(1)
   }
@@ -22,7 +17,7 @@
   {#if parameter.name === 'automation'}
     <Select on:change bind:value={parameter.value}>
       <option value="" />
-      {#each $automationStore.automations.filter(wf => wf.live) as automation}
+      {#each $automationStore.automations.filter((wf) => wf.live) as automation}
         <option value={automation._id}>{automation.name}</option>
       {/each}
     </Select>
diff --git a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
index 7ac0dd20ba..a24dec7d8a 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
@@ -1,21 +1,21 @@
 import { isUndefined, filter, some, includes } from "lodash/fp"
-import { pipe } from "components/common/core"
+import { pipe } from "../../../helpers"
 
-const normalString = s => (s || "").trim().toLowerCase()
+const normalString = (s) => (s || "").trim().toLowerCase()
 
-export const isRootComponent = c =>
+export const isRootComponent = (c) =>
   isComponent(c) && isUndefined(c.props._component)
 
-export const isComponent = c => {
-  const hasProp = n => !isUndefined(c[n])
+export const isComponent = (c) => {
+  const hasProp = (n) => !isUndefined(c[n])
   return hasProp("name") && hasProp("props")
 }
 
 export const searchAllComponents = (components, phrase) => {
   const hasPhrase = (...vals) =>
-    pipe(vals, [some(v => includes(normalString(phrase))(normalString(v)))])
+    pipe(vals, [some((v) => includes(normalString(phrase))(normalString(v)))])
 
-  const componentMatches = c => {
+  const componentMatches = (c) => {
     if (hasPhrase(c._instanceName, ...(c.tags || []))) return true
 
     if (isRootComponent(c)) return false
@@ -29,7 +29,7 @@ export const searchAllComponents = (components, phrase) => {
 }
 
 export const getExactComponent = (components, name, isScreen = false) => {
-  return components.find(c =>
+  return components.find((c) =>
     isScreen ? c.props._instanceName === name : c._instanceName === name
   )
 }
diff --git a/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js b/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
index dffec1c652..c7a355405b 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
@@ -1,7 +1,7 @@
 import { split, last } from "lodash/fp"
-import { pipe } from "components/common/core"
+import { pipe } from "../../../helpers"
 
-export const splitName = fullname => {
+export const splitName = (fullname) => {
   const componentName = pipe(fullname, [split("/"), last])
 
   const libName = fullname.substring(
diff --git a/packages/builder/src/helpers.js b/packages/builder/src/helpers.js
index 9bfd48a3cd..8de210c159 100644
--- a/packages/builder/src/helpers.js
+++ b/packages/builder/src/helpers.js
@@ -1,6 +1,6 @@
-import { last } from "lodash/fp"
-import { pipe } from "components/common/core"
-export const buildStyle = styles => {
+import { last, flow } from "lodash/fp"
+
+export const buildStyle = (styles) => {
   let str = ""
   for (let s in styles) {
     if (styles[s]) {
@@ -11,12 +11,15 @@ export const buildStyle = styles => {
   return str
 }
 
-export const convertCamel = str => {
-  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+export const convertCamel = (str) => {
+  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
 }
 
-export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
+export const pipe = (arg, funcs) => flow(funcs)(arg)
 
-export const get_name = s => (!s ? "" : last(s.split("/")))
+export const capitalise = (s) =>
+  s.substring(0, 1).toUpperCase() + s.substring(1)
 
-export const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+export const get_name = (s) => (!s ? "" : last(s.split("/")))
+
+export const get_capitalised_name = (name) => pipe(name, [get_name, capitalise])
diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index dcf1c9b771..c4f4375427 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -1,15 +1,10 @@
 <script>
   import { store, backendUiStore } from "builderStore"
-  import { goto } from "@sveltech/routify"
   import { onMount } from "svelte"
-  import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
   import CurrentItemPreview from "components/userInterface/AppPreview"
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
-  import Switcher from "components/common/Switcher.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last } from "lodash/fp"
-  import { AddIcon } from "components/common/Icons"
   import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
 
   $: instances = $store.appInstances
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 43f3fd02d7..a29bf5f44d 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -1,11 +1,7 @@
 <script>
-  import { store } from "builderStore"
   import api from "builderStore/api"
   import AppList from "components/start/AppList.svelte"
-  import { onMount } from "svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
   import { get } from "builderStore/api"
-  import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { Button, Heading, Modal } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
diff --git a/packages/standard-components/src/attachments/Dropzone.svelte b/packages/standard-components/src/attachments/Dropzone.svelte
index 9d68c920c2..ffa12ab178 100644
--- a/packages/standard-components/src/attachments/Dropzone.svelte
+++ b/packages/standard-components/src/attachments/Dropzone.svelte
@@ -2,14 +2,15 @@
   import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
   import { FILE_TYPES } from "./fileTypes"
 
-  const BYTES_IN_KB = 1000
+  const BYTES_IN_MB = 1000000
 
   export let files = []
 
   function handleFileTooLarge(fileSizeLimit) {
     alert(
-      `Files cannot exceed ${fileSizeLimit /
-        BYTES_IN_MB}MB. Please try again with smaller files.`
+      `Files cannot exceed ${
+        fileSizeLimit / BYTES_IN_MB
+      }MB. Please try again with smaller files.`
     )
   }
 

From 3ed1f00e389824a7304069ab9275aaa1bb16e1b4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 27 Oct 2020 09:16:54 +0000
Subject: [PATCH 38/52] More tidy up

---
 packages/builder/src/components/automation/index.js |  3 ---
 .../builder/src/components/settings/TabTitle.svelte | 13 -------------
 2 files changed, 16 deletions(-)
 delete mode 100644 packages/builder/src/components/automation/index.js
 delete mode 100644 packages/builder/src/components/settings/TabTitle.svelte

diff --git a/packages/builder/src/components/automation/index.js b/packages/builder/src/components/automation/index.js
deleted file mode 100644
index cb5a603eae..0000000000
--- a/packages/builder/src/components/automation/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as AutomationBuilder } from "./AutomationBuilder/AutomationBuilder.svelte"
-export { default as SetupPanel } from "./SetupPanel/SetupPanel.svelte"
-export { default as AutomationPanel } from "./AutomationPanel/AutomationPanel.svelte"
diff --git a/packages/builder/src/components/settings/TabTitle.svelte b/packages/builder/src/components/settings/TabTitle.svelte
deleted file mode 100644
index 8e2a2d6c13..0000000000
--- a/packages/builder/src/components/settings/TabTitle.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<h3>
-  <slot />
-</h3>
-
-<style>
-  h3 {
-    font-size: 18px;
-    font-weight: bold;
-    color: var(--ink);
-    margin-top: 40px;
-    margin-bottom: 20px;
-  }
-</style>

From 5e6047b4f02168f903a79b424723d88764ced560 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 27 Oct 2020 09:17:27 +0000
Subject: [PATCH 39/52] More tidy up

---
 .../builder/src/components/start/CreateAppModal.svelte   | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 7ee707d490..64d84a723f 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -7,9 +7,8 @@
   import Spinner from "components/common/Spinner.svelte"
   import { API, Info, User } from "./Steps"
   import Indicator from "./Indicator.svelte"
-  import { Input, TextArea, Button } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
-  import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
   import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
   import analytics from "analytics"
@@ -23,7 +22,7 @@
   let isApiKeyValid
   let lastApiKey
   let fetchApiKeyPromise
-  const validateApiKey = async apiKey => {
+  const validateApiKey = async (apiKey) => {
     if (!apiKey) return false
 
     // make sure we only fetch once, unless API Key is changed
@@ -122,9 +121,7 @@
       const fullSchema = Object.assign({}, ...validationSchemas)
 
       // Check full form schema
-      const formIsValid = await object()
-        .shape(fullSchema)
-        .isValid(values)
+      const formIsValid = await object().shape(fullSchema).isValid(values)
       fullFormIsValid = formIsValid
     }
   }

From bf14c3045dd28454fb5e29c49f8033c023fcee3c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 27 Oct 2020 09:37:20 +0000
Subject: [PATCH 40/52] Lint

---
 .../builderStore/store/automation/index.js    | 30 +++++++++----------
 .../TableNavigator/TableNavigator.svelte      |  2 +-
 .../pagesParsing/searchComponents.js          | 14 ++++-----
 .../pagesParsing/splitRootComponentName.js    |  2 +-
 packages/builder/src/helpers.js               | 13 ++++----
 5 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index 2c1636b359..e1db07053e 100644
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@@ -3,14 +3,14 @@ import api from "../../api"
 import Automation from "./Automation"
 import { cloneDeep } from "lodash/fp"
 
-const automationActions = (store) => ({
+const automationActions = store => ({
   fetch: async () => {
     const responses = await Promise.all([
       api.get(`/api/automations`),
       api.get(`/api/automations/definitions/list`),
     ])
-    const jsonResponses = await Promise.all(responses.map((x) => x.json()))
-    store.update((state) => {
+    const jsonResponses = await Promise.all(responses.map(x => x.json()))
+    store.update(state => {
       state.automations = jsonResponses[0]
       state.blockDefinitions = {
         TRIGGER: jsonResponses[1].trigger,
@@ -31,7 +31,7 @@ const automationActions = (store) => ({
     const CREATE_AUTOMATION_URL = `/api/automations`
     const response = await api.post(CREATE_AUTOMATION_URL, automation)
     const json = await response.json()
-    store.update((state) => {
+    store.update(state => {
       state.automations = [...state.automations, json.automation]
       store.actions.select(json.automation)
       return state
@@ -41,9 +41,9 @@ const automationActions = (store) => ({
     const UPDATE_AUTOMATION_URL = `/api/automations`
     const response = await api.put(UPDATE_AUTOMATION_URL, automation)
     const json = await response.json()
-    store.update((state) => {
+    store.update(state => {
       const existingIdx = state.automations.findIndex(
-        (existing) => existing._id === automation._id
+        existing => existing._id === automation._id
       )
       state.automations.splice(existingIdx, 1, json.automation)
       state.automations = state.automations
@@ -56,9 +56,9 @@ const automationActions = (store) => ({
     const DELETE_AUTOMATION_URL = `/api/automations/${_id}/${_rev}`
     await api.delete(DELETE_AUTOMATION_URL)
 
-    store.update((state) => {
+    store.update(state => {
       const existingIdx = state.automations.findIndex(
-        (existing) => existing._id === _id
+        existing => existing._id === _id
       )
       state.automations.splice(existingIdx, 1)
       state.automations = state.automations
@@ -72,24 +72,24 @@ const automationActions = (store) => ({
     const TRIGGER_AUTOMATION_URL = `/api/automations/${_id}/trigger`
     return await api.post(TRIGGER_AUTOMATION_URL)
   },
-  select: (automation) => {
-    store.update((state) => {
+  select: automation => {
+    store.update(state => {
       state.selectedAutomation = new Automation(cloneDeep(automation))
       state.selectedBlock = null
       return state
     })
   },
-  addBlockToAutomation: (block) => {
-    store.update((state) => {
+  addBlockToAutomation: block => {
+    store.update(state => {
       const newBlock = state.selectedAutomation.addBlock(cloneDeep(block))
       state.selectedBlock = newBlock
       return state
     })
   },
-  deleteAutomationBlock: (block) => {
-    store.update((state) => {
+  deleteAutomationBlock: block => {
+    store.update(state => {
       const idx = state.selectedAutomation.automation.definition.steps.findIndex(
-        (x) => x.id === block.id
+        x => x.id === block.id
       )
       state.selectedAutomation.deleteBlock(block.id)
 
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index 0b73074e10..5a57fe6a4a 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -36,7 +36,7 @@
 {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
   <div class="title">
     <h1>Tables</h1>
-    <i on:click={modal.show} class="ri-add-circle-fill" />
+    <i data-cy="new-table" on:click={modal.show} class="ri-add-circle-fill" />
   </div>
   <div class="hierarchy-items-container">
     {#each $backendUiStore.tables as table, idx}
diff --git a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
index a24dec7d8a..9979d4dcc6 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
@@ -1,21 +1,21 @@
 import { isUndefined, filter, some, includes } from "lodash/fp"
 import { pipe } from "../../../helpers"
 
-const normalString = (s) => (s || "").trim().toLowerCase()
+const normalString = s => (s || "").trim().toLowerCase()
 
-export const isRootComponent = (c) =>
+export const isRootComponent = c =>
   isComponent(c) && isUndefined(c.props._component)
 
-export const isComponent = (c) => {
-  const hasProp = (n) => !isUndefined(c[n])
+export const isComponent = c => {
+  const hasProp = n => !isUndefined(c[n])
   return hasProp("name") && hasProp("props")
 }
 
 export const searchAllComponents = (components, phrase) => {
   const hasPhrase = (...vals) =>
-    pipe(vals, [some((v) => includes(normalString(phrase))(normalString(v)))])
+    pipe(vals, [some(v => includes(normalString(phrase))(normalString(v)))])
 
-  const componentMatches = (c) => {
+  const componentMatches = c => {
     if (hasPhrase(c._instanceName, ...(c.tags || []))) return true
 
     if (isRootComponent(c)) return false
@@ -29,7 +29,7 @@ export const searchAllComponents = (components, phrase) => {
 }
 
 export const getExactComponent = (components, name, isScreen = false) => {
-  return components.find((c) =>
+  return components.find(c =>
     isScreen ? c.props._instanceName === name : c._instanceName === name
   )
 }
diff --git a/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js b/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
index c7a355405b..1776ddf230 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
@@ -1,7 +1,7 @@
 import { split, last } from "lodash/fp"
 import { pipe } from "../../../helpers"
 
-export const splitName = (fullname) => {
+export const splitName = fullname => {
   const componentName = pipe(fullname, [split("/"), last])
 
   const libName = fullname.substring(
diff --git a/packages/builder/src/helpers.js b/packages/builder/src/helpers.js
index 8de210c159..89c7a0a6aa 100644
--- a/packages/builder/src/helpers.js
+++ b/packages/builder/src/helpers.js
@@ -1,6 +1,6 @@
 import { last, flow } from "lodash/fp"
 
-export const buildStyle = (styles) => {
+export const buildStyle = styles => {
   let str = ""
   for (let s in styles) {
     if (styles[s]) {
@@ -11,15 +11,14 @@ export const buildStyle = (styles) => {
   return str
 }
 
-export const convertCamel = (str) => {
-  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+export const convertCamel = str => {
+  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
 }
 
 export const pipe = (arg, funcs) => flow(funcs)(arg)
 
-export const capitalise = (s) =>
-  s.substring(0, 1).toUpperCase() + s.substring(1)
+export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
 
-export const get_name = (s) => (!s ? "" : last(s.split("/")))
+export const get_name = s => (!s ? "" : last(s.split("/")))
 
-export const get_capitalised_name = (name) => pipe(name, [get_name, capitalise])
+export const get_capitalised_name = name => pipe(name, [get_name, capitalise])

From a93757a8d9fab0f5d84306e26b7ac59dfd6799fb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 27 Oct 2020 15:26:07 +0000
Subject: [PATCH 41/52] Fix cypress tests

---
 .../integration/createAutomation.spec.js      | 37 +++----
 .../integration/createComponents.spec.js      | 96 ++++++++++---------
 .../cypress/integration/createTable.spec.js   | 10 +-
 .../cypress/integration/createView.spec.js    | 37 +++----
 packages/builder/cypress/support/commands.js  | 66 ++++---------
 .../AutomationPanel/AutomationPanel.svelte    |  5 +-
 .../components/backend/DataTable/Table.svelte |  8 +-
 .../DataTable/popovers/RowPopover.svelte      |  9 +-
 .../TableNavigator/TableDataImport.svelte     | 10 +-
 .../popovers/EditTablePopover.svelte          | 17 ++--
 .../popovers/EditViewPopover.svelte           |  7 +-
 .../common/Dropdowns/DropdownItem.svelte      |  7 +-
 .../src/components/common/NavItem.svelte      | 12 +--
 .../userInterface/FrontendNavigatePane.svelte |  2 +-
 .../[application]/automate/_layout.svelte     |  2 +-
 15 files changed, 150 insertions(+), 175 deletions(-)

diff --git a/packages/builder/cypress/integration/createAutomation.spec.js b/packages/builder/cypress/integration/createAutomation.spec.js
index 67132c736b..92d1f907bd 100644
--- a/packages/builder/cypress/integration/createAutomation.spec.js
+++ b/packages/builder/cypress/integration/createAutomation.spec.js
@@ -14,35 +14,26 @@ context("Create a automation", () => {
     cy.createTestTableWithData()
 
     cy.contains("automate").click()
-    cy.contains("Create New Automation").click()
+    cy.get("[data-cy=new-automation]").click()
     cy.get(".modal").within(() => {
       cy.get("input").type("Add Row")
-      cy.get(".buttons")
-        .contains("Create")
-        .click()
+      cy.get(".buttons").contains("Create").click()
     })
 
     // Add trigger
-    cy.get("[data-cy=add-automation-component]").click()
-    cy.get("[data-cy=ROW_SAVED]").click()
-    cy.get("[data-cy=automation-block-setup]").within(() => {
-      cy.get("select")
-        .first()
-        .select("dog")
+    cy.contains("Trigger").click()
+    cy.contains("Row Saved").click()
+    cy.get(".setup").within(() => {
+      cy.get("select").first().select("dog")
     })
 
     // Create action
-    cy.get("[data-cy=CREATE_ROW]").click()
-    cy.get("[data-cy=automation-block-setup]").within(() => {
-      cy.get("select")
-        .first()
-        .select("dog")
-      cy.get("input")
-        .first()
-        .type("goodboy")
-      cy.get("input")
-        .eq(1)
-        .type("11")
+    cy.contains("Action").click()
+    cy.contains("Create Row").click()
+    cy.get(".setup").within(() => {
+      cy.get("select").first().select("dog")
+      cy.get("input").first().type("goodboy")
+      cy.get("input").eq(1).type("11")
     })
 
     // Save
@@ -50,11 +41,11 @@ context("Create a automation", () => {
 
     // Activate Automation
     cy.get("[data-cy=activate-automation]").click()
-    cy.get(".stop-button.highlighted").should("be.visible")
+    cy.get(".ri-stop-circle-fill.highlighted").should("be.visible")
   })
 
   it("should add row when a new row is added", () => {
-    cy.contains("backend").click()
+    cy.contains("data").click()
     cy.addRow(["Rover", 15])
     cy.reload()
     cy.contains("goodboy").should("have.text", "goodboy")
diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js
index bf978d3e3a..6931fdb86b 100644
--- a/packages/builder/cypress/integration/createComponents.spec.js
+++ b/packages/builder/cypress/integration/createComponents.spec.js
@@ -1,54 +1,60 @@
-xcontext('Create Components', () => {
+xcontext("Create Components", () => {
+  before(() => {
+    cy.server()
+    cy.visit("localhost:4001/_builder")
+    // https://on.cypress.io/type
+    cy.createApp("Table App", "Table App Description")
+    cy.createTable("dog", "name", "age")
+    cy.addRow("bob", "15")
+  })
 
-    before(() => {
-        cy.server()
-        cy.visit('localhost:4001/_builder')
-        // https://on.cypress.io/type
-        cy.createApp('Table App', 'Table App Description')
-        cy.createTable('dog', 'name', 'age')
-        cy.addRow('bob', '15')
-    })
+  // https://on.cypress.io/interacting-with-elements
+  it("should add a container", () => {
+    cy.navigateToFrontend()
+    cy.get(".switcher > :nth-child(2)").click()
+    cy.contains("Container").click()
+  })
+  it("should add a headline", () => {
+    cy.addHeadlineComponent("An Amazing headline!")
 
-    // https://on.cypress.io/interacting-with-elements
-    it('should add a container', () => {
-        cy.contains('frontend').click()
-        cy.get('.switcher > :nth-child(2)').click()
+    getIframeBody().contains("An Amazing headline!")
+  })
+  it("change the font size of the headline", () => {
+    cy.contains("Typography").click()
+    cy.get("[data-cy=font-size-prop-control]").click()
+    cy.contains("60px").click()
+    cy.contains("Design").click()
 
-        cy.contains('Container').click()
-    })
-    it('should add a headline', () => {
-        cy.addHeadlineComponent('An Amazing headline!')
-
-        getIframeBody().contains('An Amazing headline!')
-    })
-    it('change the font size of the headline', () => {
-        cy.contains('Typography').click()
-        cy.get('[data-cy=font-size-prop-control]').click()
-        cy.contains("60px").click()
-        cy.contains('Design').click()
-
-        getIframeBody().contains('An Amazing headline!').should('have.css', 'font-size', '60px')
-    })
+    getIframeBody()
+      .contains("An Amazing headline!")
+      .should("have.css", "font-size", "60px")
+  })
 })
 
 const getIframeDocument = () => {
-    return cy
-        .get('iframe')
-        // Cypress yields jQuery element, which has the real
-        // DOM element under property "0".
-        // From the real DOM iframe element we can get
-        // the "document" element, it is stored in "contentDocument" property
-        // Cypress "its" command can access deep properties using dot notation
-        // https://on.cypress.io/its
-        .its('0.contentDocument').should('exist')
+  return (
+    cy
+      .get("iframe")
+      // Cypress yields jQuery element, which has the real
+      // DOM element under property "0".
+      // From the real DOM iframe element we can get
+      // the "document" element, it is stored in "contentDocument" property
+      // Cypress "its" command can access deep properties using dot notation
+      // https://on.cypress.io/its
+      .its("0.contentDocument")
+      .should("exist")
+  )
 }
 
 const getIframeBody = () => {
-    // get the document
-    return getIframeDocument()
-        // automatically retries until body is loaded
-        .its('body').should('not.be.undefined')
-        // wraps "body" DOM element to allow
-        // chaining more Cypress commands, like ".find(...)"
-        .then(cy.wrap)
-}
\ No newline at end of file
+  // get the document
+  return (
+    getIframeDocument()
+      // automatically retries until body is loaded
+      .its("body")
+      .should("not.be.undefined")
+      // wraps "body" DOM element to allow
+      // chaining more Cypress commands, like ".find(...)"
+      .then(cy.wrap)
+  )
+}
diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js
index 16ee67cc5b..bb812540ea 100644
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/packages/builder/cypress/integration/createTable.spec.js
@@ -8,7 +8,7 @@ context("Create a Table", () => {
     cy.createTable("dog")
 
     // Check if Table exists
-    cy.get(".title span").should("have.text", "dog")
+    cy.get(".table-title h1").should("have.text", "dog")
   })
 
   it("adds a new column to the table", () => {
@@ -24,9 +24,7 @@ context("Create a Table", () => {
   it("updates a column on the table", () => {
     cy.contains("name").click()
     cy.get("[data-cy='edit-column-header']").click()
-    cy.get(".actions input")
-      .first()
-      .type("updated")
+    cy.get(".actions input").first().type("updated")
     // Unset table display column
     cy.contains("display column").click()
     cy.contains("Save Column").click()
@@ -56,9 +54,7 @@ context("Create a Table", () => {
   })
 
   it("deletes a table", () => {
-    cy.contains("div", "dog")
-      .get(".ri-more-line")
-      .click()
+    cy.contains(".nav-item", "dog").get(".actions").invoke("show").click()
     cy.get("[data-cy=delete-table]").click()
     cy.contains("Delete Table").click()
     cy.contains("dog").should("not.exist")
diff --git a/packages/builder/cypress/integration/createView.spec.js b/packages/builder/cypress/integration/createView.spec.js
index 697bc35143..553f4c4b98 100644
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@@ -22,7 +22,7 @@ context("Create a View", () => {
       cy.get("input").type("Test View")
       cy.contains("Save View").click()
     })
-    cy.get(".title").contains("Test View")
+    cy.get(".table-title h1").contains("Test View")
     cy.get("thead th div").should($headers => {
       expect($headers).to.have.length(3)
       const headers = $headers.map((i, header) => Cypress.$(header).text())
@@ -33,14 +33,8 @@ context("Create a View", () => {
   it("filters the view by age over 10", () => {
     cy.contains("Filter").click()
     cy.contains("Add Filter").click()
-    cy.get(".menu-container")
-      .find("select")
-      .first()
-      .select("age")
-    cy.get(".menu-container")
-      .find("select")
-      .eq(1)
-      .select("More Than")
+    cy.get(".menu-container").find("select").first().select("age")
+    cy.get(".menu-container").find("select").eq(1).select("More Than")
     cy.get("input").type(18)
     cy.contains("Save").click()
     cy.get("tbody tr").should($values => {
@@ -52,15 +46,9 @@ context("Create a View", () => {
     cy.contains("Calculate").click()
     // we may reinstate this - have commented this dropdown for now as there is only one option
     //cy.get(".menu-container").find("select").first().select("Statistics")
-    cy.get(".menu-container")
-      .find("select")
-      .eq(0)
-      .select("Statistics")
+    cy.get(".menu-container").find("select").eq(0).select("Statistics")
     cy.wait(50)
-    cy.get(".menu-container")
-      .find("select")
-      .eq(1)
-      .select("age")
+    cy.get(".menu-container").find("select").eq(1).select("age")
     cy.contains("Save").click()
     cy.get("thead th div").should($headers => {
       expect($headers).to.have.length(7)
@@ -114,10 +102,11 @@ context("Create a View", () => {
   })
 
   it("renames a view", () => {
-    cy.contains("[data-cy=table-nav-item]", "Test View")
-      .find(".ri-more-line")
+    cy.contains(".nav-item", "Test View")
+      .find(".actions")
+      .invoke("show")
       .click()
-    cy.contains("Edit").click()
+    cy.get("[data-cy=edit-view]").click()
     cy.get(".menu-container").within(() => {
       cy.get("input").type(" Updated")
       cy.contains("Save").click()
@@ -126,11 +115,11 @@ context("Create a View", () => {
   })
 
   it("deletes a view", () => {
-    cy.contains("[data-cy=table-nav-item]", "Test View Updated").click()
-    cy.contains("[data-cy=table-nav-item]", "Test View Updated")
-      .find(".ri-more-line")
+    cy.contains(".nav-item", "Test View Updated")
+      .find(".actions")
+      .invoke("show")
       .click()
-    cy.contains("Delete").click()
+    cy.get("[data-cy=delete-view]").click()
     cy.contains("Delete View").click()
     cy.contains("TestView Updated").should("not.be.visible")
   })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index ece9565e18..fdc0b2f49c 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -31,9 +31,7 @@ Cypress.Commands.add("createApp", name => {
     .then($body => {
       if ($body.find("input[name=apiKey]").length) {
         // input was found, do something else here
-        cy.get("input[name=apiKey]")
-          .type(name)
-          .should("have.value", name)
+        cy.get("input[name=apiKey]").type(name).should("have.value", name)
         cy.contains("Next").click()
       }
     })
@@ -44,14 +42,10 @@ Cypress.Commands.add("createApp", name => {
 
       cy.contains("Next").click()
 
-      cy.get("input[name=username]")
-        .click()
-        .type("test")
-      cy.get("input[name=password]")
-        .click()
-        .type("test")
+      cy.get("input[name=username]").click().type("test")
+      cy.get("input[name=password]").click().type("test")
       cy.contains("Submit").click()
-      cy.contains("Create New Table", {
+      cy.get("[data-cy=new-table]", {
         timeout: 20000,
       }).should("be.visible")
     })
@@ -65,28 +59,22 @@ Cypress.Commands.add("createTestTableWithData", () => {
 
 Cypress.Commands.add("createTable", tableName => {
   // Enter table name
-  cy.contains("Create New Table").click()
+  cy.get("[data-cy=new-table]").click()
   cy.get(".modal").within(() => {
-    cy.get("input")
-      .first()
-      .type(tableName)
-    cy.get(".buttons")
-      .contains("Create")
-      .click()
+    cy.get("input").first().type(tableName)
+    cy.get(".buttons").contains("Create").click()
   })
   cy.contains(tableName).should("be.visible")
 })
 
 Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   // Select Table
-  cy.contains(tableName).click()
+  cy.contains(".nav-item", tableName).click()
   cy.contains("Create New Column").click()
 
   // Configure column
   cy.get(".menu-container").within(() => {
-    cy.get("input")
-      .first()
-      .type(columnName)
+    cy.get("input").first().type(columnName)
     // Unset table display column
     cy.contains("display column").click()
     cy.get("select").select(type)
@@ -99,15 +87,11 @@ Cypress.Commands.add("addRow", values => {
 
   cy.get(".modal").within(() => {
     for (let i = 0; i < values.length; i++) {
-      cy.get("input")
-        .eq(i)
-        .type(values[i])
+      cy.get("input").eq(i).type(values[i])
     }
 
     // Save
-    cy.get(".buttons")
-      .contains("Create")
-      .click()
+    cy.get(".buttons").contains("Create").click()
   })
 })
 
@@ -116,20 +100,12 @@ Cypress.Commands.add("createUser", (username, password, accessLevel) => {
   cy.get(".toprightnav > .settings").click()
   cy.contains("Users").click()
 
-  cy.get("[name=Name]")
-    .first()
-    .type(username)
-  cy.get("[name=Password]")
-    .first()
-    .type(password)
-  cy.get("select")
-    .first()
-    .select(accessLevel)
+  cy.get("[name=Name]").first().type(username)
+  cy.get("[name=Password]").first().type(password)
+  cy.get("select").first().select(accessLevel)
 
   // Save
-  cy.get(".inputs")
-    .contains("Create")
-    .click()
+  cy.get(".inputs").contains("Create").click()
 })
 
 Cypress.Commands.add("addHeadlineComponent", text => {
@@ -149,19 +125,15 @@ Cypress.Commands.add("addButtonComponent", () => {
 })
 
 Cypress.Commands.add("navigateToFrontend", () => {
-  cy.contains("frontend").click()
+  cy.contains("design").click()
 })
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
-  cy.contains("Create New Screen").click()
+  cy.get("[data-cy=new-screen]").click()
   cy.get(".modal").within(() => {
-    cy.get("input")
-      .eq(0)
-      .type(screenName)
+    cy.get("input").eq(0).type(screenName)
     if (route) {
-      cy.get("input")
-        .eq(1)
-        .type(route)
+      cy.get("input").eq(1).type(route)
     }
     cy.contains("Create Screen").click()
   })
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index b6a2298a22..e09803e130 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -11,7 +11,10 @@
 
 <div class="title">
   <h1>Automations</h1>
-  <i on:click={modal.show} class="ri-add-circle-fill" />
+  <i
+    on:click={modal.show}
+    data-cy="new-automation"
+    class="ri-add-circle-fill" />
 </div>
 <AutomationList />
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 38ef221e86..85a52efacb 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -43,7 +43,7 @@
 </script>
 
 <div class="table-container">
-  <div class="title">
+  <div class="table-title">
     <h1>{title}</h1>
     {#if loading}
       <div transition:fade>
@@ -125,19 +125,19 @@
     gap: var(--spacing-l);
   }
 
-  .title {
+  .table-title {
     height: 24px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
   }
-  .title h1 {
+  .table-title h1 {
     font-size: var(--font-size-m);
     font-weight: 500;
     margin: 0;
   }
-  .title > div {
+  .table-title > div {
     margin-left: var(--spacing-xs);
   }
 
diff --git a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
index b20af655a1..c1c091555e 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
@@ -36,11 +36,16 @@
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
   <DropdownContainer>
-    <DropdownItem icon="ri-edit-line" title="Edit" on:click={showModal} />
+    <DropdownItem
+      icon="ri-edit-line"
+      title="Edit"
+      on:click={showModal}
+      data-cy="edit-row" />
     <DropdownItem
       icon="ri-delete-bin-line"
       title="Delete"
-      on:click={showDelete} />
+      on:click={showDelete}
+      data-cy="delete-row" />
   </DropdownContainer>
 </DropdownMenu>
 <ConfirmDialog
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 1e766072f2..f6e4c34c3c 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -1,10 +1,9 @@
 <script>
-  import { Heading, Body, Button, Select, Label } from "@budibase/bbui"
+  import { Select, Label } from "@budibase/bbui"
   import { notifier } from "builderStore/store/notifications"
   import { FIELDS } from "constants/backend"
   import api from "builderStore/api"
 
-  const BYTES_IN_KB = 1000
   const BYTES_IN_MB = 1000000
   const FILE_SIZE_LIMIT = BYTES_IN_MB * 1
 
@@ -70,15 +69,16 @@
     const fileArray = Array.from(evt.target.files)
     if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
       notifier.danger(
-        `Files cannot exceed ${FILE_SIZE_LIMIT /
-          BYTES_IN_MB}MB. Please try again with smaller files.`
+        `Files cannot exceed ${
+          FILE_SIZE_LIMIT / BYTES_IN_MB
+        }MB. Please try again with smaller files.`
       )
       return
     }
 
     // Read CSV as plain text to upload alongside schema
     let reader = new FileReader()
-    reader.addEventListener("load", function(e) {
+    reader.addEventListener("load", function (e) {
       csvString = e.target.result
       files = fileArray
       validateCSV()
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index d5a88d85d7..3d7fee0b09 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -29,11 +29,9 @@
 
   function showModal() {
     const screens = $store.screens
-    templateScreens = screens.filter(
-      (screen) => screen.autoTableId === table._id
-    )
+    templateScreens = screens.filter(screen => screen.autoTableId === table._id)
     willBeDeleted = ["All table data"].concat(
-      templateScreens.map((screen) => `Screen ${screen.props._instanceName}`)
+      templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
     )
     hideEditor()
     confirmDeleteDialog.show()
@@ -57,7 +55,7 @@
     const tableName = evt.target.value
     if (
       originalName !== tableName &&
-      $backendUiStore.models?.some((model) => model.name === tableName)
+      $backendUiStore.models?.some(model => model.name === tableName)
     ) {
       error = `Table with name ${tableName} already exists. Please choose another name.`
       return
@@ -87,11 +85,16 @@
       </div>
     {:else}
       <DropdownContainer>
-        <DropdownItem icon="ri-edit-line" title="Edit" on:click={showEditor} />
+        <DropdownItem
+          icon="ri-edit-line"
+          data-cy="edit-table"
+          title="Edit"
+          on:click={showEditor} />
         <DropdownItem
           icon="ri-delete-bin-line"
           title="Delete"
-          on:click={showModal} />
+          on:click={showModal}
+          data-cy="delete-table" />
       </DropdownContainer>
     {/if}
   </DropdownMenu>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 347f03ac22..22fe6b4e86 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -62,10 +62,15 @@
       </div>
     {:else}
       <DropdownContainer>
-        <DropdownItem icon="ri-edit-line" title="Edit" on:click={showEditor} />
+        <DropdownItem
+          icon="ri-edit-line"
+          data-cy="edit-view"
+          title="Edit"
+          on:click={showEditor} />
         <DropdownItem
           icon="ri-delete-bin-line"
           title="Delete"
+          data-cy="delete-view"
           on:click={showDelete} />
       </DropdownContainer>
     {/if}
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
index 459c318349..66a384fc90 100644
--- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -5,7 +5,12 @@
   export let disabled
 </script>
 
-<div class="dropdown-item" class:disabled on:click class:big={subtitle != null}>
+<div
+  class="dropdown-item"
+  class:disabled
+  on:click
+  class:big={subtitle != null}
+  {...$$restProps}>
   {#if icon}<i class={icon} />{/if}
   <div class="content">
     <div class="title">{title}</div>
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 8cbfa63499..b0f90a10a9 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <div
-  class="container"
+  class="nav-item"
   class:border
   class:selected
   style={`padding-left: ${indentLevel * 18}px`}
@@ -42,22 +42,22 @@
 </div>
 
 <style>
-  .container {
+  .nav-item {
     border-radius: var(--border-radius-m);
     cursor: pointer;
     color: var(--grey-7);
   }
-  .container.border {
+  .nav-item.border {
     border-top: 1px solid var(--grey-1);
   }
-  .container.selected {
+  .nav-item.selected {
     background-color: var(--grey-2);
     color: var(--ink);
   }
-  .container:hover {
+  .nav-item:hover {
     background-color: var(--grey-1);
   }
-  .container:hover .actions {
+  .nav-item:hover .actions {
     display: flex;
   }
 
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index cf53af2dd5..94621a40e9 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -11,7 +11,7 @@
 
 <div class="title">
   <h1>Screens</h1>
-  <i on:click={modal.show} class="ri-add-circle-fill" />
+  <i on:click={modal.show} data-cy="new-screen" class="ri-add-circle-fill" />
 </div>
 <PagesList />
 <div class="nav-items-container">
diff --git a/packages/builder/src/pages/[application]/automate/_layout.svelte b/packages/builder/src/pages/[application]/automate/_layout.svelte
index 29915e7bd2..08d64474f4 100644
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@@ -13,7 +13,7 @@
     <slot />
   </div>
   {#if $automationStore.selectedAutomation}
-    <div class="nav">
+    <div class="nav setup">
       <SetupPanel />
     </div>
   {/if}

From add416200011477123fe583a1628c6ddfc548d72 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 27 Oct 2020 15:28:13 +0000
Subject: [PATCH 42/52] Format with prettier

---
 packages/builder/cypress/support/commands.js  | 56 ++++++++++++++-----
 .../AutomationBuilder.svelte                  |  2 +-
 .../AutomationBuilder/BlockList.svelte        |  2 +-
 .../FlowChart/FlowItem.svelte                 |  2 +-
 .../SetupPanel/AutomationBlockSetup.svelte    |  2 +-
 .../automation/SetupPanel/RowSelector.svelte  |  4 +-
 .../popovers/CreateEditColumnPopover.svelte   |  4 +-
 .../TableNavigator/TableDataImport.svelte     |  7 +--
 .../modals/CreateTableModal.svelte            |  8 +--
 .../src/components/common/Dropzone.svelte     |  5 +-
 .../components/start/CreateAppModal.svelte    |  6 +-
 .../AppPreview/CurrentItemPreview.svelte      |  4 +-
 .../userInterface/CategoryTab.svelte          |  2 +-
 .../ComponentDropdownMenu.svelte              | 18 +++---
 .../ComponentPropertiesPanel.svelte           |  8 +--
 .../ComponentSelectionList.svelte             |  2 +-
 .../userInterface/ComponentsHierarchy.svelte  |  4 +-
 .../ComponentsHierarchyChildren.svelte        | 22 ++++----
 .../userInterface/DesignView.svelte           |  2 +-
 .../userInterface/DetailScreenSelect.svelte   |  4 +-
 .../EventsEditor/EventEditorModal.svelte      |  8 +--
 .../EventsEditor/StateBindingCascader.svelte  |  4 +-
 .../userInterface/FlatButton.svelte           |  2 +-
 .../IconSelect/IconSelect.svelte              |  4 +-
 .../userInterface/OptionSelect.svelte         |  8 +--
 .../userInterface/PageLayout.svelte           |  2 +-
 .../components/userInterface/PagesList.svelte |  2 +-
 .../userInterface/PropertyControl.svelte      |  8 +--
 .../userInterface/ScreenDropdownMenu.svelte   |  2 +-
 .../userInterface/ScreenSelect.svelte         |  8 +--
 .../userInterface/SettingsView.svelte         |  6 +-
 .../userInterface/TableViewSelect.svelte      |  6 +-
 .../src/pages/[application]/_reset.svelte     |  6 +-
 .../pages/[application]/design/_layout.svelte |  2 +-
 .../src/attachments/Dropzone.svelte           |  5 +-
 35 files changed, 131 insertions(+), 106 deletions(-)

diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index fdc0b2f49c..2587e9475e 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -31,7 +31,9 @@ Cypress.Commands.add("createApp", name => {
     .then($body => {
       if ($body.find("input[name=apiKey]").length) {
         // input was found, do something else here
-        cy.get("input[name=apiKey]").type(name).should("have.value", name)
+        cy.get("input[name=apiKey]")
+          .type(name)
+          .should("have.value", name)
         cy.contains("Next").click()
       }
     })
@@ -42,8 +44,12 @@ Cypress.Commands.add("createApp", name => {
 
       cy.contains("Next").click()
 
-      cy.get("input[name=username]").click().type("test")
-      cy.get("input[name=password]").click().type("test")
+      cy.get("input[name=username]")
+        .click()
+        .type("test")
+      cy.get("input[name=password]")
+        .click()
+        .type("test")
       cy.contains("Submit").click()
       cy.get("[data-cy=new-table]", {
         timeout: 20000,
@@ -61,8 +67,12 @@ Cypress.Commands.add("createTable", tableName => {
   // Enter table name
   cy.get("[data-cy=new-table]").click()
   cy.get(".modal").within(() => {
-    cy.get("input").first().type(tableName)
-    cy.get(".buttons").contains("Create").click()
+    cy.get("input")
+      .first()
+      .type(tableName)
+    cy.get(".buttons")
+      .contains("Create")
+      .click()
   })
   cy.contains(tableName).should("be.visible")
 })
@@ -74,7 +84,9 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
 
   // Configure column
   cy.get(".menu-container").within(() => {
-    cy.get("input").first().type(columnName)
+    cy.get("input")
+      .first()
+      .type(columnName)
     // Unset table display column
     cy.contains("display column").click()
     cy.get("select").select(type)
@@ -87,11 +99,15 @@ Cypress.Commands.add("addRow", values => {
 
   cy.get(".modal").within(() => {
     for (let i = 0; i < values.length; i++) {
-      cy.get("input").eq(i).type(values[i])
+      cy.get("input")
+        .eq(i)
+        .type(values[i])
     }
 
     // Save
-    cy.get(".buttons").contains("Create").click()
+    cy.get(".buttons")
+      .contains("Create")
+      .click()
   })
 })
 
@@ -100,12 +116,20 @@ Cypress.Commands.add("createUser", (username, password, accessLevel) => {
   cy.get(".toprightnav > .settings").click()
   cy.contains("Users").click()
 
-  cy.get("[name=Name]").first().type(username)
-  cy.get("[name=Password]").first().type(password)
-  cy.get("select").first().select(accessLevel)
+  cy.get("[name=Name]")
+    .first()
+    .type(username)
+  cy.get("[name=Password]")
+    .first()
+    .type(password)
+  cy.get("select")
+    .first()
+    .select(accessLevel)
 
   // Save
-  cy.get(".inputs").contains("Create").click()
+  cy.get(".inputs")
+    .contains("Create")
+    .click()
 })
 
 Cypress.Commands.add("addHeadlineComponent", text => {
@@ -131,9 +155,13 @@ Cypress.Commands.add("navigateToFrontend", () => {
 Cypress.Commands.add("createScreen", (screenName, route) => {
   cy.get("[data-cy=new-screen]").click()
   cy.get(".modal").within(() => {
-    cy.get("input").eq(0).type(screenName)
+    cy.get("input")
+      .eq(0)
+      .type(screenName)
     if (route) {
-      cy.get("input").eq(1).type(route)
+      cy.get("input")
+        .eq(1)
+        .type(route)
     }
     cy.contains("Create Screen").click()
   })
diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index ddb86174e2..9f9401a738 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -9,7 +9,7 @@
   $: automationCount = $automationStore.automations?.length ?? 0
 
   function onSelect(block) {
-    automationStore.update((state) => {
+    automationStore.update(state => {
       state.selectedBlock = block
       return state
     })
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
index 7f477d7105..cc38928408 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -33,7 +33,7 @@
   let popover
   $: selectedTab = selectedIndex == null ? null : tabs[selectedIndex].value
   $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
-  $: blocks = sortBy((entry) => entry[1].name)(
+  $: blocks = sortBy(entry => entry[1].name)(
     Object.entries($automationStore.blockDefinitions[selectedTab] ?? {})
   )
 
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 85fdcf1a1d..a96e85d582 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -9,7 +9,7 @@
   $: selected = $automationStore.selectedBlock?.id === block.id
   $: steps =
     $automationStore.selectedAutomation?.automation?.definition?.steps ?? []
-  $: blockIdx = steps.findIndex((step) => step.id === block.id)
+  $: blockIdx = steps.findIndex(step => step.id === block.id)
   $: allowDeleteTrigger = !steps.length
 
   function deleteStep() {
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 9165c8411a..c2a8b10395 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -22,7 +22,7 @@
     if (automation.trigger) {
       allSteps = [automation.trigger, ...allSteps]
     }
-    const blockIdx = allSteps.findIndex((step) => step.id === block.id)
+    const blockIdx = allSteps.findIndex(step => step.id === block.id)
 
     // Extract all outputs from all previous steps as available bindings
     let bindings = []
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 6ee77a5004..117f00d1a3 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -6,9 +6,7 @@
   export let value
   export let bindings
 
-  $: table = $backendUiStore.tables.find(
-    (table) => table._id === value?.tableId
-  )
+  $: table = $backendUiStore.tables.find(table => table._id === value?.tableId)
   $: schemaFields = Object.entries(table?.schema ?? {})
 
   // Ensure any nullish tableId values get set to empty string so
diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
index a852707993..80e8df72f0 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
@@ -22,12 +22,12 @@
     $backendUiStore.selectedTable.primaryDisplay == null ||
     $backendUiStore.selectedTable.primaryDisplay === field.name
   $: tableOptions = $backendUiStore.tables.filter(
-    (table) => table._id !== $backendUiStore.draftTable._id
+    table => table._id !== $backendUiStore.draftTable._id
   )
   $: required = !!field?.constraints?.presence || primaryDisplay
 
   async function saveColumn() {
-    backendUiStore.update((state) => {
+    backendUiStore.update(state => {
       backendUiStore.actions.tables.saveField({
         originalName,
         field,
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index f6e4c34c3c..d328df4b40 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -69,16 +69,15 @@
     const fileArray = Array.from(evt.target.files)
     if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
       notifier.danger(
-        `Files cannot exceed ${
-          FILE_SIZE_LIMIT / BYTES_IN_MB
-        }MB. Please try again with smaller files.`
+        `Files cannot exceed ${FILE_SIZE_LIMIT /
+          BYTES_IN_MB}MB. Please try again with smaller files.`
       )
       return
     }
 
     // Read CSV as plain text to upload alongside schema
     let reader = new FileReader()
-    reader.addEventListener("load", function (e) {
+    reader.addEventListener("load", function(e) {
       csvString = e.target.result
       files = fileArray
       validateCSV()
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index e77fec709f..146f881b2b 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -23,7 +23,7 @@
 
   function checkValid(evt) {
     const tableName = evt.target.value
-    if ($backendUiStore.models?.some((model) => model.name === tableName)) {
+    if ($backendUiStore.models?.some(model => model.name === tableName)) {
       error = `Table with name ${tableName} already exists. Please choose another name.`
       return
     }
@@ -49,8 +49,8 @@
 
     // Create auto screens
     const screens = screenTemplates($store, [table])
-      .filter((template) => defaultScreens.includes(template.id))
-      .map((template) => template.create())
+      .filter(template => defaultScreens.includes(template.id))
+      .map(template => template.create())
     for (let screen of screens) {
       // Record the table that created this screen so we can link it later
       screen.autoTableId = table._id
@@ -67,7 +67,7 @@
     }
 
     // Create autolink to newly created list page
-    const listPage = screens.find((screen) =>
+    const listPage = screens.find(screen =>
       screen.props._instanceName.endsWith("List")
     )
     await store.createLink(listPage.route, table.name)
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 0a040f8873..be93829084 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -9,9 +9,8 @@
 
   function handleFileTooLarge(fileSizeLimit) {
     notifier.danger(
-      `Files cannot exceed ${
-        fileSizeLimit / BYTES_IN_MB
-      }MB. Please try again with smaller files.`
+      `Files cannot exceed ${fileSizeLimit /
+        BYTES_IN_MB}MB. Please try again with smaller files.`
     )
   }
 
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 64d84a723f..4118c2b9e7 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -22,7 +22,7 @@
   let isApiKeyValid
   let lastApiKey
   let fetchApiKeyPromise
-  const validateApiKey = async (apiKey) => {
+  const validateApiKey = async apiKey => {
     if (!apiKey) return false
 
     // make sure we only fetch once, unless API Key is changed
@@ -121,7 +121,9 @@
       const fullSchema = Object.assign({}, ...validationSchemas)
 
       // Check full form schema
-      const formIsValid = await object().shape(fullSchema).isValid(values)
+      const formIsValid = await object()
+        .shape(fullSchema)
+        .isValid(values)
       fullFormIsValid = formIsValid
     }
   }
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index a565a925e4..fd7270cdfa 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -16,7 +16,7 @@
     return props
   }
 
-  const getComponentTypeName = (component) => {
+  const getComponentTypeName = component => {
     let [componentName] = component._component.match(/[a-z]*$/)
     return componentName || "element"
   }
@@ -144,7 +144,7 @@
   }
 
   $: stylesheetLinks = pipe($store.pages.stylesheets, [
-    map((s) => `<link rel="stylesheet" href="${s}"/>`),
+    map(s => `<link rel="stylesheet" href="${s}"/>`),
     join("\n"),
   ])
 
diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte
index 00ed5e82ab..ba3f4e920d 100644
--- a/packages/builder/src/components/userInterface/CategoryTab.svelte
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@@ -1,7 +1,7 @@
 <script>
   export let categories = []
   export let selectedCategory = {}
-  export let onClick = (category) => {}
+  export let onClick = category => {}
 </script>
 
 <div class="tabs">
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 033eaa27d4..a15d59cc7e 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -18,27 +18,27 @@
     !component || !getComponentDefinition($store, component._component).children
   $: noPaste = !$store.componentToPaste
 
-  const lastPartOfName = (c) => (c ? last(c._component.split("/")) : "")
+  const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
 
   const hideDropdown = () => {
     dropdown.hide()
   }
 
-  const selectComponent = (component) => {
+  const selectComponent = component => {
     store.selectComponent(component)
     const path = store.getPathToComponent(component)
     $goto(`./:page/:screen/${path}`)
   }
 
   const moveUpComponent = () => {
-    store.update((s) => {
+    store.update(s => {
       const parent = getParent(s.currentPreviewItem.props, component)
 
       if (parent) {
         const currentIndex = parent._children.indexOf(component)
         if (currentIndex === 0) return s
 
-        const newChildren = parent._children.filter((c) => c !== component)
+        const newChildren = parent._children.filter(c => c !== component)
         newChildren.splice(currentIndex - 1, 0, component)
         parent._children = newChildren
       }
@@ -50,14 +50,14 @@
   }
 
   const moveDownComponent = () => {
-    store.update((s) => {
+    store.update(s => {
       const parent = getParent(s.currentPreviewItem.props, component)
 
       if (parent) {
         const currentIndex = parent._children.indexOf(component)
         if (currentIndex === parent._children.length - 1) return s
 
-        const newChildren = parent._children.filter((c) => c !== component)
+        const newChildren = parent._children.filter(c => c !== component)
         newChildren.splice(currentIndex + 1, 0, component)
         parent._children = newChildren
       }
@@ -74,11 +74,11 @@
   }
 
   const deleteComponent = () => {
-    store.update((state) => {
+    store.update(state => {
       const parent = getParent(state.currentPreviewItem.props, component)
 
       if (parent) {
-        parent._children = parent._children.filter((c) => c !== component)
+        parent._children = parent._children.filter(c => c !== component)
         selectComponent(parent)
       }
 
@@ -92,7 +92,7 @@
     store.storeComponentForCopy(component, cut)
   }
 
-  const pasteComponent = (mode) => {
+  const pasteComponent = mode => {
     // lives in store - also used by drag drop
     store.pasteComponent(component, mode)
   }
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 7b1c794610..475b864542 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -20,7 +20,7 @@
   $: componentPropDefinition =
     flattenedPanel.find(
       //use for getting controls for each component property
-      (c) => c._component === componentInstance._component
+      c => c._component === componentInstance._component
     ) || {}
 
   $: panelDefinition =
@@ -48,8 +48,8 @@
 
   function flattenComponents(props) {
     const components = []
-    props.forEach((comp) =>
-      walkProps(comp, (c) => {
+    props.forEach(comp =>
+      walkProps(comp, c => {
         if ("_component" in c) {
           components.push(c)
         }
@@ -64,7 +64,7 @@
 </script>
 
 <CategoryTab
-  onClick={(category) => (selectedCategory = category)}
+  onClick={category => (selectedCategory = category)}
   {categories}
   {selectedCategory} />
 
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 8ed8917495..f43faf033d 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -24,7 +24,7 @@
     }
   }
 
-  const onComponentChosen = (component) => {
+  const onComponentChosen = component => {
     store.addChildComponent(component._component, component.presetProps)
     const path = store.getPathToComponent($store.currentComponentInfo)
     $goto(`./:page/:screen/${path}`)
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 0911a80558..48fe72f8d6 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -23,7 +23,7 @@
   let confirmDeleteDialog
   let componentToDelete = ""
 
-  const normalizedName = (name) =>
+  const normalizedName = name =>
     pipe(name, [
       trimCharsStart("./"),
       trimCharsStart("~/"),
@@ -31,7 +31,7 @@
       trimChars(" "),
     ])
 
-  const changeScreen = (screen) => {
+  const changeScreen = screen => {
     store.setCurrentScreen(screen.props._instanceName)
     $goto(`./:page/${screen.props._instanceName}`)
   }
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 193ec7e49f..d854c9b906 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -33,12 +33,12 @@
   let dropUnderComponent
   let componentToDrop
 
-  const capitalise = (s) => s.substring(0, 1).toUpperCase() + s.substring(1)
-  const get_name = (s) => (!s ? "" : last(s.split("/")))
-  const get_capitalised_name = (name) => pipe(name, [get_name, capitalise])
-  const isScreenslot = (name) => name === "##builtin/screenslot"
+  const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
+  const get_name = s => (!s ? "" : last(s.split("/")))
+  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+  const isScreenslot = name => name === "##builtin/screenslot"
 
-  const selectComponent = (component) => {
+  const selectComponent = component => {
     // Set current component
     store.selectComponent(component)
 
@@ -49,21 +49,21 @@
     $goto(`./:page/:screen/${path}`)
   }
 
-  const dragstart = (component) => (e) => {
+  const dragstart = component => e => {
     e.dataTransfer.dropEffect = "move"
-    dragDropStore.update((s) => {
+    dragDropStore.update(s => {
       s.componentToDrop = component
       return s
     })
   }
 
-  const dragover = (component, index) => (e) => {
+  const dragover = (component, index) => e => {
     const canHaveChildrenButIsEmpty =
       getComponentDefinition($store, component._component).children &&
       component._children.length === 0
 
     e.dataTransfer.dropEffect = "copy"
-    dragDropStore.update((s) => {
+    dragDropStore.update(s => {
       const isBottomHalf = e.offsetY > e.currentTarget.offsetHeight / 2
       s.targetComponent = component
       // only allow dropping inside when container type
@@ -102,7 +102,7 @@
         $dragDropStore.dropPosition
       )
     }
-    dragDropStore.update((s) => {
+    dragDropStore.update(s => {
       s.dropPosition = ""
       s.targetComponent = null
       s.componentToDrop = null
@@ -111,7 +111,7 @@
   }
 
   const dragend = () => {
-    dragDropStore.update((s) => {
+    dragDropStore.update(s => {
       s.dropPosition = ""
       s.targetComponent = null
       s.componentToDrop = null
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 989eaef53b..cbb532fcae 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -12,7 +12,7 @@
   let propGroup = null
   let currentGroup
 
-  const getProperties = (name) => panelDefinition[name]
+  const getProperties = name => panelDefinition[name]
 
   function onChange(category) {
     selectedCategory = category
diff --git a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
index 6928a72e9d..224ba3e386 100644
--- a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
@@ -15,11 +15,11 @@
     return [
       ...$store.screens
         .filter(
-          (screen) =>
+          screen =>
             screen.props._component.endsWith("/rowdetail") ||
             screen.route.endsWith(":id")
         )
-        .map((screen) => ({
+        .map(screen => ({
           name: screen.props._instanceName,
           url: screen.route,
           sort: screen.props._component,
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index e3cc645eb0..2fc19bd6b8 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -18,19 +18,19 @@
   $: actions = event || []
   $: selectedActionComponent =
     selectedAction &&
-    actionTypes.find((t) => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME])
+    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME])
       .component
 
   const updateEventHandler = (updatedHandler, index) => {
     actions[index] = updatedHandler
   }
 
-  const deleteAction = (index) => {
+  const deleteAction = index => {
     actions.splice(index, 1)
     actions = actions
   }
 
-  const addAction = (actionType) => () => {
+  const addAction = actionType => () => {
     const newAction = {
       parameters: {},
       [EVENT_TYPE_MEMBER_NAME]: actionType.name,
@@ -41,7 +41,7 @@
     addActionDropdown.hide()
   }
 
-  const selectAction = (action) => () => {
+  const selectAction = action => () => {
     selectedAction = action
   }
 
diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
index 6f1cf298c6..483780a2c5 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -6,7 +6,7 @@
 
   let isOpen = false
 
-  const capitalize = (s) => {
+  const capitalize = s => {
     if (typeof s !== "string") return ""
     return s.charAt(0).toUpperCase() + s.slice(1)
   }
@@ -17,7 +17,7 @@
   {#if parameter.name === 'automation'}
     <Select on:change bind:value={parameter.value}>
       <option value="" />
-      {#each $automationStore.automations.filter((wf) => wf.live) as automation}
+      {#each $automationStore.automations.filter(wf => wf.live) as automation}
         <option value={automation._id}>{automation.name}</option>
       {/each}
     </Select>
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index 3ae8eebca3..0d7cd280d7 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -3,7 +3,7 @@
   export let value = ""
   export let text = ""
   export let icon = ""
-  export let onClick = (value) => {}
+  export let onClick = value => {}
   export let selected = false
 
   $: useIcon = !!icon
diff --git a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
index 9fac2642d7..fe3a029716 100644
--- a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
@@ -50,7 +50,7 @@
 
   function findIconByTerm(term) {
     const r = new RegExp(`\^${term}`, "i")
-    return icons.filter((i) => r.test(i.label))
+    return icons.filter(i => r.test(i.label))
   }
 
   async function switchLetter(letter) {
@@ -65,7 +65,7 @@
 
   async function findIconOnPage() {
     loading = true
-    const iconIdx = filteredIcons.findIndex((i) => i.value === value)
+    const iconIdx = filteredIcons.findIndex(i => i.value === value)
     if (iconIdx !== -1) {
       currentPage = Math.ceil(iconIdx / maxIconsPerPage)
     }
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index d1fbfecff7..d9f5964b30 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -6,7 +6,7 @@
   export let options = []
   export let value = ""
   export let styleBindingProperty
-  export let onChange = (value) => {}
+  export let onChange = value => {}
 
   let open = null
   let rotate = ""
@@ -23,7 +23,7 @@
   let scrollTop = 0
   let containerEl = null
 
-  const handleStyleBind = (value) =>
+  const handleStyleBind = value =>
     !!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
 
   onMount(() => {
@@ -95,10 +95,10 @@
     width: `${width}px`,
   })
 
-  $: isOptionsObject = options.every((o) => typeof o === "object")
+  $: isOptionsObject = options.every(o => typeof o === "object")
 
   $: selectedOption = isOptionsObject
-    ? options.find((o) => o.value === value)
+    ? options.find(o => o.value === value)
     : {}
 
   $: if (open && selectMenu) {
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index a8e36aa1ff..c6ac3b5290 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -13,7 +13,7 @@
 
   const dragDropStore = writable({})
 
-  const lastPartOfName = (c) =>
+  const lastPartOfName = c =>
     c && last(c.name ? c.name.split("/") : c._component.split("/"))
 
   $: _layout = {
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 13351c94e4..51fcce3889 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -21,7 +21,7 @@
   if (!$store.currentPageName)
     store.setCurrentPage($params.page ? $params.page : "main")
 
-  const changePage = (id) => {
+  const changePage = id => {
     store.setCurrentPage(id)
     $goto(`./${id}/page-layout`)
   }
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index e47d5e17a3..823dcf6183 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -78,7 +78,7 @@
   }
 
   //Incase the component has a different value key name
-  const handlevalueKey = (value) =>
+  const handlevalueKey = value =>
     props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>
 
@@ -89,8 +89,8 @@
       this={control}
       {componentInstance}
       {...handlevalueKey(value)}
-      on:change={(val) => handleChange(key, val)}
-      onChange={(val) => handleChange(key, val)}
+      on:change={val => handleChange(key, val)}
+      onChange={val => handleChange(key, val)}
       {...props}
       name={key} />
   </div>
@@ -109,7 +109,7 @@
     <BindingDropdown
       {...handlevalueKey(value)}
       close={dropdown.hide}
-      on:update={(e) => (temporaryBindableValue = e.detail)}
+      on:update={e => (temporaryBindableValue = e.detail)}
       {bindableProperties} />
   </DropdownMenu>
 {/if}
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index b288c4ee75..7fd8f9de43 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -14,7 +14,7 @@
   const deleteScreen = () => {
     store.deleteScreens(screen, $store.currentPageName)
     // update the page if required
-    store.update((state) => {
+    store.update(state => {
       if (state.currentPreviewItem.name === screen.name) {
         store.setCurrentPage($store.currentPageName)
         $goto(`./:page/page-layout`)
diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
index fb2a24a94e..748570595a 100644
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@@ -18,8 +18,8 @@
   const getUrls = () => {
     const urls = [
       ...$store.screens
-        .filter((screen) => !screen.props._component.endsWith("/rowdetail"))
-        .map((screen) => ({
+        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
+        .map(screen => ({
           name: screen.props._instanceName,
           url: screen.route,
           sort: screen.props._component,
@@ -33,12 +33,12 @@
       tables: $backendUiStore.tables,
     })
 
-    const detailScreens = $store.screens.filter((screen) =>
+    const detailScreens = $store.screens.filter(screen =>
       screen.props._component.endsWith("/rowdetail")
     )
 
     for (let detailScreen of detailScreens) {
-      const idBinding = bindableProperties.find((p) => {
+      const idBinding = bindableProperties.find(p => {
         if (
           p.type === "context" &&
           p.runtimeBinding.endsWith("._id") &&
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index be07eebcea..2aacbd261b 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -18,7 +18,7 @@
   let pageScreenProps = ["title", "favicon", "description", "route"]
   let duplicateName = false
 
-  const propExistsOnComponentDef = (prop) =>
+  const propExistsOnComponentDef = prop =>
     pageScreenProps.includes(prop) || prop in componentDefinition.props
 
   function handleChange(key, data) {
@@ -47,10 +47,10 @@
   $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
   $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
 
-  const isDuplicateName = (name) => {
+  const isDuplicateName = name => {
     let duplicate = false
 
-    const lookForDuplicate = (rootPops) => {
+    const lookForDuplicate = rootPops => {
       walkProps(rootPops, (inst, cancel) => {
         if (inst._instanceName === name && inst._id !== componentInstance._id) {
           duplicate = true
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index 8adfaaf2a0..7813a57e5e 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -14,7 +14,7 @@
     dropdownRight.hide()
   }
 
-  $: tables = $backendUiStore.tables.map((m) => ({
+  $: tables = $backendUiStore.tables.map(m => ({
     label: m.name,
     name: `all_${m._id}`,
     tableId: m._id,
@@ -39,8 +39,8 @@
   })
 
   $: links = bindableProperties
-    .filter((x) => x.fieldSchema.type === "link")
-    .map((property) => ({
+    .filter(x => x.fieldSchema.type === "link")
+    .map(property => ({
       label: property.readableBinding,
       fieldName: property.fieldSchema.name,
       name: `all_${property.fieldSchema.tableId}`,
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index a39fd0ce62..ba242769ec 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -30,10 +30,10 @@
   // e.g. if one of your screens is selected on front end, then
   // you browse to backend, when you click frontend, you will be
   // brought back to the same screen
-  const topItemNavigate = (path) => () => {
-    const activeTopNav = $layout.children.find((c) => $isActive(c.path))
+  const topItemNavigate = path => () => {
+    const activeTopNav = $layout.children.find(c => $isActive(c.path))
     if (!activeTopNav) return
-    store.update((state) => {
+    store.update(state => {
       if (!state.previousTopNavPath) state.previousTopNavPath = {}
       state.previousTopNavPath[
         activeTopNav.path
diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index c4f4375427..13f2b4ee53 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -27,7 +27,7 @@
     settingsView.show()
   }
 
-  const lastPartOfName = (c) => (c ? last(c.split("/")) : "")
+  const lastPartOfName = c => (c ? last(c.split("/")) : "")
 </script>
 
 <!-- routify:options index=1 -->
diff --git a/packages/standard-components/src/attachments/Dropzone.svelte b/packages/standard-components/src/attachments/Dropzone.svelte
index ffa12ab178..5f6e8056b7 100644
--- a/packages/standard-components/src/attachments/Dropzone.svelte
+++ b/packages/standard-components/src/attachments/Dropzone.svelte
@@ -8,9 +8,8 @@
 
   function handleFileTooLarge(fileSizeLimit) {
     alert(
-      `Files cannot exceed ${
-        fileSizeLimit / BYTES_IN_MB
-      }MB. Please try again with smaller files.`
+      `Files cannot exceed ${fileSizeLimit /
+        BYTES_IN_MB}MB. Please try again with smaller files.`
     )
   }
 

From b2a2cde3034a52124715011324e906ecbbdb3f4a Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 28 Oct 2020 10:21:24 +0000
Subject: [PATCH 43/52] remove budibase cli

---
 CONTRIBUTING.md                               |  21 +-
 packages/cli/.gitignore                       |   2 -
 packages/cli/.npmignore                       |   3 -
 packages/cli/.vscode/launch.json              |  52 --
 packages/cli/LICENSE                          | 660 ------------------
 packages/cli/bin/budi                         |   3 -
 packages/cli/bin/budi.cmd                     |   7 -
 packages/cli/package.json                     |  33 -
 packages/cli/readme.md                        |  41 --
 packages/cli/src/cli.js                       |  20 -
 packages/cli/src/commands/init/index.js       |  35 -
 packages/cli/src/commands/init/initHandler.js |   7 -
 .../new/appDirectoryTemplate/.gitignore       |   1 -
 .../new/appDirectoryTemplate/package.json     |  10 -
 .../appDirectoryTemplate/pages/main/page.json |  20 -
 .../pages/main/screens/.gitkeep               |   0
 .../pages/unauthenticated/page.json           |  20 -
 .../pages/unauthenticated/screens/.gitkeep    |   0
 .../new/appDirectoryTemplate/plugins.js       |   1 -
 .../public/_shared/placeholder                |   1 -
 .../public/main/index.html                    |   0
 .../public/unauthenticated/index.html         |   0
 packages/cli/src/commands/new/index.js        |  20 -
 packages/cli/src/commands/new/newHandler.js   |  89 ---
 .../cli/src/commands/new/page.template.json   |  20 -
 packages/cli/src/commands/run/index.js        |  17 -
 packages/cli/src/commands/run/runHandler.js   |  13 -
 packages/cli/src/common.js                    |   8 -
 packages/cli/yarn.lock                        | 521 --------------
 packages/server/package.json                  |   2 -
 30 files changed, 2 insertions(+), 1625 deletions(-)
 delete mode 100644 packages/cli/.gitignore
 delete mode 100644 packages/cli/.npmignore
 delete mode 100644 packages/cli/.vscode/launch.json
 delete mode 100644 packages/cli/LICENSE
 delete mode 100755 packages/cli/bin/budi
 delete mode 100644 packages/cli/bin/budi.cmd
 delete mode 100644 packages/cli/package.json
 delete mode 100644 packages/cli/readme.md
 delete mode 100644 packages/cli/src/cli.js
 delete mode 100644 packages/cli/src/commands/init/index.js
 delete mode 100644 packages/cli/src/commands/init/initHandler.js
 delete mode 100644 packages/cli/src/commands/new/appDirectoryTemplate/.gitignore
 delete mode 100644 packages/cli/src/commands/new/appDirectoryTemplate/package.json
 delete mode 100644 packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json
 delete mode 100644 packages/cli/src/commands/new/appDirectoryTemplate/pages/main/screens/.gitkeep
 delete mode 100644 packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json
 delete mode 100644 packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep
 delete mode 100644 packages/cli/src/commands/new/appDirectoryTemplate/plugins.js
 delete mode 100644 packages/cli/src/commands/new/appDirectoryTemplate/public/_shared/placeholder
 delete mode 100644 packages/cli/src/commands/new/appDirectoryTemplate/public/main/index.html
 delete mode 100644 packages/cli/src/commands/new/appDirectoryTemplate/public/unauthenticated/index.html
 delete mode 100644 packages/cli/src/commands/new/index.js
 delete mode 100644 packages/cli/src/commands/new/newHandler.js
 delete mode 100644 packages/cli/src/commands/new/page.template.json
 delete mode 100644 packages/cli/src/commands/run/index.js
 delete mode 100644 packages/cli/src/commands/run/runHandler.js
 delete mode 100644 packages/cli/src/common.js
 delete mode 100644 packages/cli/yarn.lock

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9030158c46..72ad1fb6e9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -12,8 +12,6 @@ Budibase is a monorepo managed by [lerna](https://github.com/lerna/lerna). Lerna
 
 - **packages/client** - A module that runs in the browser responsible for reading JSON definition and creating living, breathing web apps from it.
 
-- **packages/cli** - The budibase CLI. This is the main module that gets downloaded from NPM and is responsible for creating and managing apps, as well as running the budibase server. 
-
 - **packages/server** - The budibase server. This [Koa](https://koajs.com/) app is responsible for serving the JS for the builder and budibase apps, as well as providing the API for interaction with the database and file system.
 
 
@@ -95,14 +93,9 @@ then `cd ` into your local copy.
 
 ### 4. Initialising Budibase and Creating a Budibase App
 
-`yarn initialise` will initialise your budibase installation. A Budibase apps folder will have been created in `~/.budibase`. You can also just start up the budibase electron app and it should initialise budibase for you.
+Starting up the budibase electron app should initialise budibase for you. A Budibase apps folder will have been created in `~/.budibase`.
 
-This is a blank apps folder, so you will need to create yourself an app.
-
-```
-cd packages/server
-yarn run budi new your-app-name
-```
+This is a blank apps folder, so you will need to create yourself an app, you can do this by clicking "Create New App" from the budibase builder.
 
 This will create a new budibase application in the `~/.budibase/<your-app-uuid>` directory, and NPM install the component libraries for that application. Let's start building your app with the budibase builder!
 
@@ -116,16 +109,6 @@ To run the budibase server and builder in dev mode (i.e. with live reloading):
 
 This will enable watch mode for both the builder app, server, client library and any component libraries.
 
-### Running Commands from /server Directory
-
-Notice that when inside `packages/server`, you can use any Budibase CLI command via yarn:
-
-e.g. `yarn budi new mikes_app` == `budi new mikes_app`
-
-This will use the CLI directly from `packages/cli`, rather than your globally installed `budi`
-
-
-
 ## Data Storage
 
 When you are running locally, budibase stores data on disk using [PouchDB](https://pouchdb.com/), as well as some JSON on local files. After setting up budibase, you can find all of this data in the `~/.budibase` directory.
diff --git a/packages/cli/.gitignore b/packages/cli/.gitignore
deleted file mode 100644
index d0c97ab594..0000000000
--- a/packages/cli/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-sandbox/
-node_modules/
\ No newline at end of file
diff --git a/packages/cli/.npmignore b/packages/cli/.npmignore
deleted file mode 100644
index 6e870a6399..0000000000
--- a/packages/cli/.npmignore
+++ /dev/null
@@ -1,3 +0,0 @@
-*
-!bin/*
-!src/**/*
diff --git a/packages/cli/.vscode/launch.json b/packages/cli/.vscode/launch.json
deleted file mode 100644
index d84036ad8f..0000000000
--- a/packages/cli/.vscode/launch.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "init",
-            "program": "${workspaceFolder}\\bin\\budi",
-            "args": ["init", "-b", "remote"],
-            "console": "integratedTerminal",
-            "cwd": "${workspaceFolder}/sandbox"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "new",
-            "program": "${workspaceFolder}\\bin\\budi",
-            "args": ["new", "my-app"],
-            "console": "integratedTerminal",
-            "cwd": "${workspaceFolder}/sandbox"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "run",
-            "program": "${workspaceFolder}\\bin\\budi",
-            "args": ["run"],
-            "console": "integratedTerminal",
-            "cwd": "${workspaceFolder}/sandbox"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "instance",
-            "program": "${workspaceFolder}\\bin\\budi",
-            "args": ["instance", "my-app"],
-            "console": "integratedTerminal",
-            "cwd": "${workspaceFolder}/sandbox"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "budi",
-            "program": "${workspaceFolder}\\bin\\budi",
-            "console": "integratedTerminal",
-            "cwd": "${workspaceFolder}/sandbox"
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/cli/LICENSE b/packages/cli/LICENSE
deleted file mode 100644
index cba6f6a15a..0000000000
--- a/packages/cli/LICENSE
+++ /dev/null
@@ -1,660 +0,0 @@
-### GNU AFFERO GENERAL PUBLIC LICENSE
-
-Version 3, 19 November 2007
-
-Copyright (C) 2007 Free Software Foundation, Inc.
-<https://fsf.org/>
-
-Everyone is permitted to copy and distribute verbatim copies of this
-license document, but changing it is not allowed.
-
-### Preamble
-
-The GNU Affero General Public License is a free, copyleft license for
-software and other kinds of works, specifically designed to ensure
-cooperation with the community in the case of network server software.
-
-The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works. By contrast,
-our General Public Licenses are intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains
-free software for all its users.
-
-When we speak of free software, we are referring to freedom, not
-price. Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-Developers that use our General Public Licenses protect your rights
-with two steps: (1) assert copyright on the software, and (2) offer
-you this License which gives you legal permission to copy, distribute
-and/or modify the software.
-
-A secondary benefit of defending all users' freedom is that
-improvements made in alternate versions of the program, if they
-receive widespread use, become available for other developers to
-incorporate. Many developers of free software are heartened and
-encouraged by the resulting cooperation. However, in the case of
-software used on network servers, this result may fail to come about.
-The GNU General Public License permits making a modified version and
-letting the public access it on a server without ever releasing its
-source code to the public.
-
-The GNU Affero General Public License is designed specifically to
-ensure that, in such cases, the modified source code becomes available
-to the community. It requires the operator of a network server to
-provide the source code of the modified version running there to the
-users of that server. Therefore, public use of a modified version, on
-a publicly accessible server, gives the public access to the source
-code of the modified version.
-
-An older license, called the Affero General Public License and
-published by Affero, was designed to accomplish similar goals. This is
-a different license, not a version of the Affero GPL, but Affero has
-released a new version of the Affero GPL which permits relicensing
-under this license.
-
-The precise terms and conditions for copying, distribution and
-modification follow.
-
-### TERMS AND CONDITIONS
-
-#### 0. Definitions.
-
-"This License" refers to version 3 of the GNU Affero General Public
-License.
-
-"Copyright" also means copyright-like laws that apply to other kinds
-of works, such as semiconductor masks.
-
-"The Program" refers to any copyrightable work licensed under this
-License. Each licensee is addressed as "you". "Licensees" and
-"recipients" may be individuals or organizations.
-
-To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of
-an exact copy. The resulting work is called a "modified version" of
-the earlier work or a work "based on" the earlier work.
-
-A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy. Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies. Mere interaction with a user
-through a computer network, with no transfer of a copy, is not
-conveying.
-
-An interactive user interface displays "Appropriate Legal Notices" to
-the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License. If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-#### 1. Source Code.
-
-The "source code" for a work means the preferred form of the work for
-making modifications to it. "Object code" means any non-source form of
-a work.
-
-A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form. A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities. However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work. For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-The Corresponding Source need not include anything that users can
-regenerate automatically from other parts of the Corresponding Source.
-
-The Corresponding Source for a work in source code form is that same
-work.
-
-#### 2. Basic Permissions.
-
-All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met. This License explicitly affirms your unlimited
-permission to run the unmodified Program. The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work. This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-You may make, run and propagate covered works that you do not convey,
-without conditions so long as your license otherwise remains in force.
-You may convey covered works to others for the sole purpose of having
-them make modifications exclusively for you, or provide you with
-facilities for running those works, provided that you comply with the
-terms of this License in conveying all material for which you do not
-control copyright. Those thus making or running the covered works for
-you must do so exclusively on your behalf, under your direction and
-control, on terms that prohibit them from making any copies of your
-copyrighted material outside their relationship with you.
-
-Conveying under any other circumstances is permitted solely under the
-conditions stated below. Sublicensing is not allowed; section 10 makes
-it unnecessary.
-
-#### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such
-circumvention is effected by exercising rights under this License with
-respect to the covered work, and you disclaim any intention to limit
-operation or modification of the work as a means of enforcing, against
-the work's users, your or third parties' legal rights to forbid
-circumvention of technological measures.
-
-#### 4. Conveying Verbatim Copies.
-
-You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-#### 5. Conveying Modified Source Versions.
-
-You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these
-conditions:
-
--   a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
--   b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under
-    section 7. This requirement modifies the requirement in section 4
-    to "keep intact all notices".
--   c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy. This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged. This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
--   d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit. Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-#### 6. Conveying Non-Source Forms.
-
-You may convey a covered work in object code form under the terms of
-sections 4 and 5, provided that you also convey the machine-readable
-Corresponding Source under the terms of this License, in one of these
-ways:
-
--   a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
--   b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the Corresponding
-    Source from a network server at no charge.
--   c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source. This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
--   d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge. You need not require recipients to copy the
-    Corresponding Source along with the object code. If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source. Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
--   e) Convey the object code using peer-to-peer transmission,
-    provided you inform other peers where the object code and
-    Corresponding Source of the work are being offered to the general
-    public at no charge under subsection 6d.
-
-A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal,
-family, or household purposes, or (2) anything designed or sold for
-incorporation into a dwelling. In determining whether a product is a
-consumer product, doubtful cases shall be resolved in favor of
-coverage. For a particular product received by a particular user,
-"normally used" refers to a typical or common use of that class of
-product, regardless of the status of the particular user or of the way
-in which the particular user actually uses, or expects or is expected
-to use, the product. A product is a consumer product regardless of
-whether the product has substantial commercial, industrial or
-non-consumer uses, unless such uses represent the only significant
-mode of use of the product.
-
-"Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to
-install and execute modified versions of a covered work in that User
-Product from a modified version of its Corresponding Source. The
-information must suffice to ensure that the continued functioning of
-the modified object code is in no case prevented or interfered with
-solely because modification has been made.
-
-If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information. But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or
-updates for a work that has been modified or installed by the
-recipient, or for the User Product in which it has been modified or
-installed. Access to a network may be denied when the modification
-itself materially and adversely affects the operation of the network
-or violates the rules and protocols for communication across the
-network.
-
-Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-#### 7. Additional Terms.
-
-"Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law. If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it. (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.) You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders
-of that material) supplement the terms of this License with terms:
-
--   a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
--   b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
--   c) Prohibiting misrepresentation of the origin of that material,
-    or requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
--   d) Limiting the use for publicity purposes of names of licensors
-    or authors of the material; or
--   e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
--   f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions
-    of it) with contractual assumptions of liability to the recipient,
-    for any liability that these contractual assumptions directly
-    impose on those licensors and authors.
-
-All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10. If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term. If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions; the
-above requirements apply either way.
-
-#### 8. Termination.
-
-You may not propagate or modify a covered work except as expressly
-provided under this License. Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-However, if you cease all violation of this License, then your license
-from a particular copyright holder is reinstated (a) provisionally,
-unless and until the copyright holder explicitly and finally
-terminates your license, and (b) permanently, if the copyright holder
-fails to notify you of the violation by some reasonable means prior to
-60 days after the cessation.
-
-Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License. If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-#### 9. Acceptance Not Required for Having Copies.
-
-You are not required to accept this License in order to receive or run
-a copy of the Program. Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance. However,
-nothing other than this License grants you permission to propagate or
-modify any covered work. These actions infringe copyright if you do
-not accept this License. Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-#### 10. Automatic Licensing of Downstream Recipients.
-
-Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License. You are not responsible
-for enforcing compliance by third parties with this License.
-
-An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations. If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License. For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-#### 11. Patents.
-
-A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based. The
-work thus licensed is called the contributor's "contributor version".
-
-A contributor's "essential patent claims" are all patent claims owned
-or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version. For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement). To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients. "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-A patent license is "discriminatory" if it does not include within the
-scope of its coverage, prohibits the exercise of, or is conditioned on
-the non-exercise of one or more of the rights that are specifically
-granted under this License. You may not convey a covered work if you
-are a party to an arrangement with a third party that is in the
-business of distributing software, under which you make payment to the
-third party based on the extent of your activity of conveying the
-work, and under which the third party grants, to any of the parties
-who would receive the covered work from you, a discriminatory patent
-license (a) in connection with copies of the covered work conveyed by
-you (or copies made from those copies), or (b) primarily for and in
-connection with specific products or compilations that contain the
-covered work, unless you entered into that arrangement, or that patent
-license was granted, prior to 28 March 2007.
-
-Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-#### 12. No Surrender of Others' Freedom.
-
-If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License. If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under
-this License and any other pertinent obligations, then as a
-consequence you may not convey it at all. For example, if you agree to
-terms that obligate you to collect a royalty for further conveying
-from those to whom you convey the Program, the only way you could
-satisfy both those terms and this License would be to refrain entirely
-from conveying the Program.
-
-#### 13. Remote Network Interaction; Use with the GNU General Public License.
-
-Notwithstanding any other provision of this License, if you modify the
-Program, your modified version must prominently offer all users
-interacting with it remotely through a computer network (if your
-version supports such interaction) an opportunity to receive the
-Corresponding Source of your version by providing access to the
-Corresponding Source from a network server at no charge, through some
-standard or customary means of facilitating copying of software. This
-Corresponding Source shall include the Corresponding Source for any
-work covered by version 3 of the GNU General Public License that is
-incorporated pursuant to the following paragraph.
-
-Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU General Public License into a single
-combined work, and to convey the resulting work. The terms of this
-License will continue to apply to the part which is the covered work,
-but the work with which it is combined will remain governed by version
-3 of the GNU General Public License.
-
-#### 14. Revised Versions of this License.
-
-The Free Software Foundation may publish revised and/or new versions
-of the GNU Affero General Public License from time to time. Such new
-versions will be similar in spirit to the present version, but may
-differ in detail to address new problems or concerns.
-
-Each version is given a distinguishing version number. If the Program
-specifies that a certain numbered version of the GNU Affero General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation. If the Program does not specify a version number of the
-GNU Affero General Public License, you may choose any version ever
-published by the Free Software Foundation.
-
-If the Program specifies that a proxy can decide which future versions
-of the GNU Affero General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-Later license versions may give you additional or different
-permissions. However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-#### 15. Disclaimer of Warranty.
-
-THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT
-WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT
-LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND
-PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
-DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR
-CORRECTION.
-
-#### 16. Limitation of Liability.
-
-IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR
-CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
-INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES
-ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT
-NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR
-LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM
-TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER
-PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
-
-#### 17. Interpretation of Sections 15 and 16.
-
-If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-END OF TERMS AND CONDITIONS
-
-### How to Apply These Terms to Your New Programs
-
-If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these
-terms.
-
-To do so, attach the following notices to the program. It is safest to
-attach them to the start of each source file to most effectively state
-the exclusion of warranty; and each file should have at least the
-"copyright" line and a pointer to where the full notice is found.
-
-        <one line to give the program's name and a brief idea of what it does.>
-        Copyright (C) <year>  <name of author>
-
-        This program is free software: you can redistribute it and/or modify
-        it under the terms of the GNU Affero General Public License as
-        published by the Free Software Foundation, either version 3 of the
-        License, or (at your option) any later version.
-
-        This program is distributed in the hope that it will be useful,
-        but WITHOUT ANY WARRANTY; without even the implied warranty of
-        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-        GNU Affero General Public License for more details.
-
-        You should have received a copy of the GNU Affero General Public License
-        along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper
-mail.
-
-If your software can interact with users remotely through a computer
-network, you should also make sure that it provides a way for users to
-get its source. For example, if your program is a web application, its
-interface could display a "Source" link that leads users to an archive
-of the code. There are many ways you could offer source, and different
-solutions will be better for different programs; see section 13 for
-the specific requirements.
-
-You should also get your employer (if you work as a programmer) or
-school, if any, to sign a "copyright disclaimer" for the program, if
-necessary. For more information on this, and how to apply and follow
-the GNU AGPL, see <https://www.gnu.org/licenses/>.
diff --git a/packages/cli/bin/budi b/packages/cli/bin/budi
deleted file mode 100755
index 2a5702c383..0000000000
--- a/packages/cli/bin/budi
+++ /dev/null
@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require("../src/cli")()
diff --git a/packages/cli/bin/budi.cmd b/packages/cli/bin/budi.cmd
deleted file mode 100644
index 3a577ce739..0000000000
--- a/packages/cli/bin/budi.cmd
+++ /dev/null
@@ -1,7 +0,0 @@
-@IF EXIST "%~dp0\node.exe" (
-  "%~dp0\node.exe"  "%~dp0\node_modules\budibase\src\cli.js" %*
-) ELSE (
-  @SETLOCAL
-  @SET PATHEXT=%PATHEXT:;.JS;=;%
-  node  "%~dp0\..\src\cli.js" %*
-)
\ No newline at end of file
diff --git a/packages/cli/package.json b/packages/cli/package.json
deleted file mode 100644
index dadb0074cc..0000000000
--- a/packages/cli/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "budibase",
-  "version": "0.2.6",
-  "description": "Budibase CLI",
-  "repository": "https://github.com/Budibase/Budibase",
-  "homepage": "https://www.budibase.com",
-  "main": "src/cli.js",
-  "bin": {
-    "budi": "bin/budi"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [
-    "budibase"
-  ],
-  "author": "Budibase",
-  "license": "AGPL-3.0-or-later",
-  "dependencies": {
-    "@budibase/server": "^0.2.6",
-    "@inquirer/password": "^0.0.6-alpha.0",
-    "chalk": "^2.4.2",
-    "dotenv": "^8.2.0",
-    "fs-extra": "^8.1.0",
-    "glob": "^7.1.6",
-    "inquirer": "^7.0.0",
-    "lodash": "^4.17.15",
-    "squirrelly": "7",
-    "uuid": "^7.0.3",
-    "yargs": "^14.2.0"
-  },
-  "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691"
-}
diff --git a/packages/cli/readme.md b/packages/cli/readme.md
deleted file mode 100644
index 59e9a3052f..0000000000
--- a/packages/cli/readme.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Getting Started with Budibase
-
-(For contributors - scroll down)
-
-### 1. Global install budibase
-
-`npm install -g budibase`
-
-### 2. Start using Budibase
-
-Create a directory to store your Budibase apps
-
-`mkdir my-budibase`
-
-`cd my-budibase`
-
-Initialise Budibase in current directory
-
-`budi init`
-
-Create a new Budibase app
-
-`budi new my-app`
-
-Run Budibase
-
-`budi`
-
-You can now access the Budibase builder on http://localhost:4001/_builder
-
-Start building!
-
-Once you have created your app, you need to create yourself an instance of your app (i.e. a database)
-
-`budi instance my-app`
-
-## Running the cli on dev
-
-If you want to test this on dev, from the mono repo, run `npm link` from here first.
-
-If you use VS Code, open it in this directory, and you will find launch configurations for each command - debugging, yay!
\ No newline at end of file
diff --git a/packages/cli/src/cli.js b/packages/cli/src/cli.js
deleted file mode 100644
index 33fea0ca76..0000000000
--- a/packages/cli/src/cli.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const yargs = require("yargs")
-const chalk = require("chalk")
-
-module.exports = () => {
-  yargs
-    .scriptName("budi")
-    .usage("$0 <cmd> [args]")
-    .command(require("./commands/init"))
-    .command(require("./commands/new"))
-    .command(require("./commands/run"))
-    .fail((msg, err) => {
-      if (err) {
-        console.log(chalk.red(err.message))
-        console.log(chalk.gray(err.toString()))
-      } else {
-        console.log(chalk.red(msg))
-      }
-    })
-    .help().argv
-}
diff --git a/packages/cli/src/commands/init/index.js b/packages/cli/src/commands/init/index.js
deleted file mode 100644
index f387a8d203..0000000000
--- a/packages/cli/src/commands/init/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const handler = require("./initHandler")
-
-module.exports = {
-  command: "init [dir] [database] [clientId] [couchDbUrl]",
-  desc: "Initialise Budibase. Run this first to setup your local Budibase",
-  builder: yargs => {
-    yargs.positional("dir", {
-      type: "string",
-      describe:
-        "your apps directory - directory will be created if it does not exist",
-      default: "~/.budibase",
-      alias: "d",
-    })
-    yargs.positional("clientId", {
-      type: "string",
-      describe: "used to determine the name of the global databse",
-      alias: "c",
-      default: "new",
-    })
-    yargs.positional("couchDbUrl", {
-      type: "string",
-      describe:
-        "connection string for couch db, format: https://username:password@localhost:5984",
-      alias: "u",
-      default: "",
-    })
-    yargs.positional("quiet", {
-      type: "boolean",
-      describe: "flag - if set, then run in quiet mode - use all defaults",
-      alias: "q",
-      default: false,
-    })
-  },
-  handler,
-}
diff --git a/packages/cli/src/commands/init/initHandler.js b/packages/cli/src/commands/init/initHandler.js
deleted file mode 100644
index eadc74f815..0000000000
--- a/packages/cli/src/commands/init/initHandler.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const { xPlatHomeDir } = require("../../common")
-const initialiseBudibase = require("@budibase/server/src/utilities/initialiseBudibase")
-
-module.exports = opts => {
-  opts.dir = xPlatHomeDir(opts.dir)
-  return initialiseBudibase(opts)
-}
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/.gitignore b/packages/cli/src/commands/new/appDirectoryTemplate/.gitignore
deleted file mode 100644
index 77738287f0..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-dist/
\ No newline at end of file
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/package.json b/packages/cli/src/commands/new/appDirectoryTemplate/package.json
deleted file mode 100644
index e04b9debc8..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/package.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "name": "name",
-  "version": "1.0.0",
-  "description": "",
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@budibase/standard-components": "0.x"
-  }
-}
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json
deleted file mode 100644
index 2a106fbb3d..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	"title": "Test App",
-	"favicon": "./_shared/favicon.png",
-	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
-	"props" : {
-		"_component": "@budibase/standard-components/container",
-		"_children": [],
-		"_id": 0,
-		"type": "div",
-		"_styles": {
-			"normal": {},
-			"hover": {},
-			"active": {},
-			"selected": {}
-		},
-		"_code": ""
-	},
-	"_css": ""
-}
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/screens/.gitkeep b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/screens/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json
deleted file mode 100644
index 335f9cd343..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	"title": "Test App",
-	"favicon": "./_shared/favicon.png",
-	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
-	"props" : {
-		"_component": "@budibase/standard-components/container",
-		"_children": [],
-		"_id": 1,
-		"type": "div",
-		"_styles": {
-			"normal": {},
-			"hover": {},
-			"active": {},
-			"selected": {}
-		},
-		"_code": ""
-	},
-	"_css": ""
-}
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/plugins.js b/packages/cli/src/commands/new/appDirectoryTemplate/plugins.js
deleted file mode 100644
index 44368bf6ec..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/plugins.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = () => ({})
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/public/_shared/placeholder b/packages/cli/src/commands/new/appDirectoryTemplate/public/_shared/placeholder
deleted file mode 100644
index 4a61114f5d..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/public/_shared/placeholder
+++ /dev/null
@@ -1 +0,0 @@
-whats the craic big lawd ?
\ No newline at end of file
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/public/main/index.html b/packages/cli/src/commands/new/appDirectoryTemplate/public/main/index.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/public/unauthenticated/index.html b/packages/cli/src/commands/new/appDirectoryTemplate/public/unauthenticated/index.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/cli/src/commands/new/index.js b/packages/cli/src/commands/new/index.js
deleted file mode 100644
index cf67e78b08..0000000000
--- a/packages/cli/src/commands/new/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const handler = require("./newHandler")
-
-module.exports = {
-  command: "new <name> [dir]",
-  desc: "Create a new Budibase app",
-  builder: yargs => {
-    yargs.positional("name", {
-      type: "string",
-      describe: "the name of your app",
-      alias: "n",
-    })
-    yargs.positional("dir", {
-      type: "string",
-      describe: "budibase apps directory",
-      alias: "d",
-      default: "~/.budibase",
-    })
-  },
-  handler,
-}
diff --git a/packages/cli/src/commands/new/newHandler.js b/packages/cli/src/commands/new/newHandler.js
deleted file mode 100644
index 92e6641184..0000000000
--- a/packages/cli/src/commands/new/newHandler.js
+++ /dev/null
@@ -1,89 +0,0 @@
-const { xPlatHomeDir } = require("../../common")
-const dotenv = require("dotenv")
-const { copy, readJSON, writeJSON, exists } = require("fs-extra")
-const { resolve, join } = require("path")
-const chalk = require("chalk")
-const { exec } = require("child_process")
-
-module.exports = opts => {
-  run(opts)
-}
-
-const run = async opts => {
-  try {
-    setup(opts)
-    await createAppInstance(opts)
-    await createEmptyAppPackage(opts)
-    exec(`cd ${join(opts.dir, opts.applicationId)} && npm install`)
-    console.log(chalk.green(`Budibase app ${opts.name} created!`))
-    process.exit()
-  } catch (error) {
-    console.error(chalk.red("Error creating new app", error))
-    process.exit(1)
-  }
-}
-
-const setup = opts => {
-  opts.dir = xPlatHomeDir(opts.dir)
-  process.env.BUDIBASE_DIR = opts.dir
-  const bbconfig = dotenv.config({ path: resolve(opts.dir, ".env") })
-  console.log(JSON.stringify(bbconfig))
-}
-
-const createAppInstance = async opts => {
-  const createAppCtx = {
-    params: { clientId: process.env.CLIENT_ID },
-    request: {
-      body: { name: opts.name },
-    },
-    body: {},
-  }
-
-  // this cannot be a top level require as it will cause
-  // the environment module to be loaded prematurely
-  const appController = require("@budibase/server/src/api/controllers/application")
-  await appController.create(createAppCtx)
-
-  opts.applicationId = createAppCtx.body._id
-  console.log(chalk.green(`Application Created: ${createAppCtx.body._id}`))
-
-  // this cannot be a top level require as it will cause
-  // the environment module to be loaded prematurely
-  const instanceController = require("@budibase/server/src/api/controllers/instance")
-  const createInstCtx = {
-    params: {
-      clientId: process.env.CLIENT_ID,
-    },
-    user: {
-      appId: opts.applicationId,
-    },
-    request: {
-      body: { name: `dev-${process.env.CLIENT_ID}` },
-    },
-  }
-  await instanceController.create(createInstCtx)
-
-  console.log(chalk.green(`Default Instance Created`))
-  console.log(JSON.stringify(createInstCtx.body))
-}
-
-const createEmptyAppPackage = async opts => {
-  const templateFolder = resolve(__dirname, "appDirectoryTemplate")
-
-  const appsFolder = opts.dir
-  const newAppFolder = resolve(appsFolder, opts.applicationId)
-
-  if (await exists(newAppFolder)) {
-    console.log(chalk.red(`App ${opts.name} already exists.`))
-    return
-  }
-
-  await copy(templateFolder, newAppFolder)
-
-  const packageJsonPath = join(appsFolder, opts.applicationId, "package.json")
-  const packageJson = await readJSON(packageJsonPath)
-
-  packageJson.name = opts.name
-
-  await writeJSON(packageJsonPath, packageJson)
-}
diff --git a/packages/cli/src/commands/new/page.template.json b/packages/cli/src/commands/new/page.template.json
deleted file mode 100644
index d6aaa5a7f3..0000000000
--- a/packages/cli/src/commands/new/page.template.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	"title": "Test App",
-	"favicon": "./_shared/favicon.png",
-	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components" ],
-	"props" : {
-		"_component": "@budibase/standard-components/container",
-		"_children": [],
-		"_id": 0,
-		"type": "div",
-		"_styles": {
-			"normal": {},
-			"hover": {},
-			"active": {},
-			"selected": {}
-		},
-		"_code": ""
-	},
-	"_css": ""
-}
diff --git a/packages/cli/src/commands/run/index.js b/packages/cli/src/commands/run/index.js
deleted file mode 100644
index 3499f36e5a..0000000000
--- a/packages/cli/src/commands/run/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const handler = require("./runHandler")
-
-module.exports = {
-  command: "run [dir]",
-  aliases: ["$0"],
-  desc:
-    "Start budibase Server. You can access your apps and the builder from here if you have dev=true in your config",
-  builder: yargs => {
-    yargs.positional("dir", {
-      type: "string",
-      describe: "your budibase apps directory",
-      alias: "d",
-      default: "~/.budibase",
-    })
-  },
-  handler,
-}
diff --git a/packages/cli/src/commands/run/runHandler.js b/packages/cli/src/commands/run/runHandler.js
deleted file mode 100644
index 0305436664..0000000000
--- a/packages/cli/src/commands/run/runHandler.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const { xPlatHomeDir } = require("../../common")
-const { resolve } = require("path")
-
-module.exports = async ({ dir }) => {
-  dir = xPlatHomeDir(dir)
-  process.env.BUDIBASE_DIR = resolve(dir)
-  require("dotenv").config({ path: resolve(dir, ".env") })
-
-  // dont make this a variable or top level require
-  // it will cause environment module to be loaded prematurely
-  const server = require("@budibase/server/src/app")
-  server.on("close", () => console.log("Server Closed"))
-}
diff --git a/packages/cli/src/common.js b/packages/cli/src/common.js
deleted file mode 100644
index b922a5d8b8..0000000000
--- a/packages/cli/src/common.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const { resolve, join } = require("path")
-const { homedir } = require("os")
-
-module.exports.serverFileName = relativePath =>
-  resolve(__dirname, "..", "node_modules", "@budibase", "server", relativePath)
-
-module.exports.xPlatHomeDir = dir =>
-  dir.startsWith("~") ? join(homedir(), dir.substring(1)) : dir
diff --git a/packages/cli/yarn.lock b/packages/cli/yarn.lock
deleted file mode 100644
index 25db53d3b9..0000000000
--- a/packages/cli/yarn.lock
+++ /dev/null
@@ -1,521 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@inquirer/core@^0.0.7-alpha.0":
-  version "0.0.7-alpha.0"
-  resolved "https://registry.yarnpkg.com/@inquirer/core/-/core-0.0.7-alpha.0.tgz#20d2a5376508f09e7d7ec2bd47ac6849d42e3be5"
-  integrity sha512-ixf0s2kgvZqOCZ15GqTG5r+1faAtfHRJMZmLPFll0JGka+go0iX9byw0WrXkTVkdBK6Bg4Cr8A6R+CsFjUNC3A==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^2.4.2"
-    cli-spinners "^2.2.0"
-    cli-width "^2.2.0"
-    lodash "^4.17.12"
-    mute-stream "^0.0.8"
-    run-async "^2.3.0"
-    string-width "^4.1.0"
-    strip-ansi "^5.2.0"
-
-"@inquirer/input@^0.0.7-alpha.0":
-  version "0.0.7-alpha.0"
-  resolved "https://registry.yarnpkg.com/@inquirer/input/-/input-0.0.7-alpha.0.tgz#d5fc70050a3de56fa940699491ca7a7d8211431c"
-  integrity sha512-cFmWRpptVygvu4G2NlW+q5gZIa39cNft9IT6X5CSCuugUQpPPuwoODFFOn+wriblWOxRisUT7wONKtuhxz3clQ==
-  dependencies:
-    "@inquirer/core" "^0.0.7-alpha.0"
-    chalk "^2.4.1"
-
-"@inquirer/password@^0.0.6-alpha.0":
-  version "0.0.6-alpha.0"
-  resolved "https://registry.yarnpkg.com/@inquirer/password/-/password-0.0.6-alpha.0.tgz#4ba92ab85e9c08e25b8995c2e055b2ad12db490a"
-  integrity sha512-7GkMkDa4thQuRNFpFup0lapFAckU5ZW9k7O8A+wwJj7EItlNSJaJM/HKkXWlXAxB2Ce0nDdymfYSw4WLmHwPEg==
-  dependencies:
-    "@inquirer/input" "^0.0.7-alpha.0"
-    chalk "^2.4.1"
-
-ansi-escapes@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.2.1.tgz#4dccdb846c3eee10f6d64dea66273eab90c37228"
-  integrity sha512-Cg3ymMAdN10wOk/VYfLV7KCQyv7EDirJ64500sU7n9UlmioEtDuU5Gd+hj73hXSU/ex7tHJSssmyftDdkMLO8Q==
-  dependencies:
-    type-fest "^0.5.2"
-
-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-camelcase@^5.0.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
-chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chardet@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
-  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
-
-cli-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
-  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
-  dependencies:
-    restore-cursor "^3.1.0"
-
-cli-spinners@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.2.0.tgz#e8b988d9206c692302d8ee834e7a85c0144d8f77"
-  integrity sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==
-
-cli-width@^2.0.0, cli-width@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
-  integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
-
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-decamelize@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
-
-dotenv@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
-  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
-
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
-  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
-
-escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-external-editor@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
-  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
-  dependencies:
-    chardet "^0.7.0"
-    iconv-lite "^0.4.24"
-    tmp "^0.0.33"
-
-figures@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.0.0.tgz#756275c964646163cc6f9197c7a0295dbfd04de9"
-  integrity sha512-HKri+WoWoUgr83pehn/SIgLOMZ9nAWC6dcGj26RY2R4F50u4+RTUz0RCrUlOV3nKRAICW1UGzyb+kcX2qK1S/g==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
-  dependencies:
-    locate-path "^3.0.0"
-
-fs-extra@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
-  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-get-caller-file@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-
-glob@^7.1.6:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-graceful-fs@^4.1.6, graceful-fs@^4.2.0:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
-  integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-iconv-lite@^0.4.24:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-inquirer@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.0.tgz#9e2b032dde77da1db5db804758b8fea3a970519a"
-  integrity sha512-rSdC7zelHdRQFkWnhsMu2+2SO41mpv2oF2zy4tMhmiLWkcKbOAs87fWAJhVXttKVwhdZvymvnuM95EyEXg2/tQ==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^2.4.2"
-    cli-cursor "^3.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.15"
-    mute-stream "0.0.8"
-    run-async "^2.2.0"
-    rxjs "^6.4.0"
-    string-width "^4.1.0"
-    strip-ansi "^5.1.0"
-    through "^2.3.6"
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
-
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
-  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-
-is-promise@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
-  integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
-
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
-  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
-
-lodash@^4.17.12, lodash@^4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-mimic-fn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-mute-stream@0.0.8, mute-stream@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
-  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
-
-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-onetime@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
-  integrity sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==
-  dependencies:
-    mimic-fn "^2.1.0"
-
-os-tmpdir@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
-p-limit@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
-  integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==
-  dependencies:
-    p-try "^2.0.0"
-
-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
-  dependencies:
-    p-limit "^2.0.0"
-
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
-
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
-  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-
-restore-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
-  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
-  dependencies:
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-
-run-async@^2.2.0, run-async@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
-  integrity sha1-A3GrSuC91yDUFm19/aZP96RFpsA=
-  dependencies:
-    is-promise "^2.1.0"
-
-rxjs@^6.4.0:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
-  integrity sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==
-  dependencies:
-    tslib "^1.9.0"
-
-"safer-buffer@>= 2.1.2 < 3":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-
-set-blocking@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-
-signal-exit@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
-  integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
-
-squirrelly@7:
-  version "7.9.2"
-  resolved "https://registry.yarnpkg.com/squirrelly/-/squirrelly-7.9.2.tgz#f8b0a08201b73653351afe9f7f24878237d2751a"
-  integrity sha512-QsLQ43p7/p5LfhqMsUM1PP0DU/YuirA/pZ1RQKU8/qZjWHD8uTblpfPoCVkD9VLrS1jCJ+2gqECv3amlPgrLCA==
-
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-string-width@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff"
-  integrity sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^5.2.0"
-
-strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-through@^2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-
-tmp@^0.0.33:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
-  dependencies:
-    os-tmpdir "~1.0.2"
-
-tslib@^1.9.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
-  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
-
-type-fest@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
-  integrity sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==
-
-universalify@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
-uuid@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
-  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
-
-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=
-
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-y18n@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
-  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
-
-yargs-parser@^15.0.0:
-  version "15.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.0.tgz#cdd7a97490ec836195f59f3f4dbe5ea9e8f75f08"
-  integrity sha512-xLTUnCMc4JhxrPEPUYD5IBR1mWCK/aT6+RJ/K29JY2y1vD+FhtgKK0AXRWvI262q3QSffAQuTouFIKUuHX89wQ==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs@^14.2.0:
-  version "14.2.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.0.tgz#f116a9242c4ed8668790b40759b4906c276e76c3"
-  integrity sha512-/is78VKbKs70bVZH7w4YaZea6xcJWOAwkhbR0CFuZBmYtfTYF0xjGJF43AYd8g2Uii1yJwmS5GR2vBmrc32sbg==
-  dependencies:
-    cliui "^5.0.0"
-    decamelize "^1.2.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^15.0.0"
diff --git a/packages/server/package.json b/packages/server/package.json
index e1853c38d5..b7a9aed9da 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -26,9 +26,7 @@
     "test": "jest --testPathIgnorePatterns=routes && npm run test:integration",
     "test:integration": "jest routes --runInBand",
     "test:watch": "jest --watch",
-    "initialise": "node ../cli/bin/budi init -q",
     "run:docker": "node src/index",
-    "budi": "node ../cli/bin/budi",
     "dev:builder": "nodemon src/index.js",
     "electron": "electron src/electron.js",
     "build:electron": "electron-builder --dir",

From e61f3eb8cdcae61f641a62b1c1cca2d5313e573c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Oct 2020 10:59:43 +0000
Subject: [PATCH 44/52] Update feedback icon to be in line with new UI

---
 .../Feedback/FeedbackNavLink.svelte           | 41 ++++++++-----------
 .../src/pages/[application]/_reset.svelte     |  2 +-
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
index 5299e7d5c0..62429bf554 100644
--- a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
+++ b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { FeedbackIcon } from "components/common/Icons/"
   import { Popover } from "@budibase/bbui"
   import { store } from "builderStore"
 
@@ -16,41 +15,37 @@
   }, FIVE_MINUTES)
 </script>
 
-<span
-  class="container"
-  bind:this={iconContainer}
-  on:click={popover.show}
-  class:highlight={$store.highlightFeedbackIcon}>
-  <FeedbackIcon />
-</span>
+<div class="container" bind:this={iconContainer} on:click={popover.show}>
+  <i class="ri-feedback-line" class:highlight={$store.highlightFeedbackIcon} />
+</div>
 <Popover bind:this={popover} anchor={iconContainer} align="right">
   <FeedbackIframe on:finished={popover.hide} />
 </Popover>
 
 <style>
+  i {
+    font-size: 18px;
+    color: var(--grey-7);
+  }
+  i.highlight {
+    color: var(--blue);
+    filter: drop-shadow(0 0 20px var(--blue));
+  }
+
   .container {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0 20px 0 0;
+    margin: 0 12px 0 0;
     font-weight: 500;
     font-size: 1rem;
-    height: 100%;
     display: flex;
-    flex: 1;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
   }
-
-  .container:hover {
+  .container:hover i {
     color: var(--ink);
-    font-weight: 500;
-  }
-
-  .highlight {
-    color: var(--blue);
-  }
-
-  .highlight > :global(svg) {
-    filter: drop-shadow(0 0 20px var(--blue));
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 3ae93449be..7d0724facd 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -67,7 +67,6 @@
     </div>
     <div class="toprightnav">
       <FeedbackNavLink />
-      <SettingsLink />
       <div class="topnavitemright">
         <a target="_blank" href="https://docs.budibase.com">
           <i class="ri-question-line" />
@@ -80,6 +79,7 @@
           <i class="ri-discuss-line" />
         </a>
       </div>
+      <SettingsLink />
       <Button
         secondary
         on:click={() => {

From ee7a4215b4f19627b726a7c27e6f4a2f87e81bd1 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 28 Oct 2020 11:23:26 +0000
Subject: [PATCH 45/52] move run command into cypress setup

---
 packages/builder/cypress/setup.js |  19 ++-
 packages/builder/yarn.lock        | 263 +-----------------------------
 packages/server/yarn.lock         | 194 +---------------------
 3 files changed, 21 insertions(+), 455 deletions(-)

diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js
index a6dab69583..f56374ea35 100644
--- a/packages/builder/cypress/setup.js
+++ b/packages/builder/cypress/setup.js
@@ -4,8 +4,8 @@
 // 3. Runs the server using said folder
 
 const rimraf = require("rimraf")
-const { join } = require("path")
-const run = require("../../cli/src/commands/run/runHandler")
+const { join, resolve } = require("path")
+// const run = require("../../cli/src/commands/run/runHandler")
 const initialiseBudibase = require("../../server/src/utilities/initialiseBudibase")
 
 const homedir = join(require("os").homedir(), ".budibase")
@@ -16,9 +16,22 @@ process.env.BUDIBASE_API_KEY = "6BE826CB-6B30-4AEC-8777-2E90464633DE"
 process.env.NODE_ENV = "cypress"
 process.env.ENABLE_ANALYTICS = "false"
 
+async function run(dir) {
+  process.env.BUDIBASE_DIR = resolve(dir)
+  require("dotenv").config({ path: resolve(dir, ".env") })
+
+  // dont make this a variable or top level require
+  // it will cause environment module to be loaded prematurely
+  const server = require("../../server/src/app")
+  server.on("close", () => console.log("Server Closed"))
+}
+
 initialiseBudibase({ dir: homedir, clientId: "cypress-test" })
   .then(() => {
     delete require.cache[require.resolve("../../server/src/environment")]
-    run({ dir: homedir })
+    const xPlatHomeDir = homedir.startsWith("~")
+      ? join(homedir(), homedir.substring(1))
+      : homedir
+    run(xPlatHomeDir)
   })
   .catch(e => console.error(e))
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 6a195f4a21..21eac0c67a 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -718,15 +718,6 @@
     svelte-flatpickr "^2.4.0"
     svelte-portal "^1.0.0"
 
-"@budibase/client@^0.2.6":
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.2.6.tgz#de1b4872c7956d386a3b08969eda509bd39d1a64"
-  integrity sha512-sSoGN0k2Tcc5GewBjFMN+G3h21O9JvakYI33kBKgEVGrdEQLBbry7vRKb+lALeW2Bz65gafZL2joZzL8vnH0lw==
-  dependencies:
-    deep-equal "^2.0.1"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -1415,11 +1406,6 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
-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-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1474,13 +1460,6 @@ atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
-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"
@@ -2430,26 +2409,6 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
-deep-equal@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.4.tgz#6b0b407a074666033169df3acaf128e1c6f3eab6"
-  integrity sha512-BUfaXrVoCfgkOQY/b09QdO9L3XNoF2XH0A3aY9IQwQL/ZjLOe8FQgCNVl1wiolhsFo8kFdO9zdPViCPbmaJA5w==
-  dependencies:
-    es-abstract "^1.18.0-next.1"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
-    isarray "^2.0.5"
-    object-is "^1.1.3"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2619,54 +2578,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.7"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
-  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
-  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.2"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
-es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
-  version "1.18.0-next.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
-  integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
-  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.2"
-    is-negative-zero "^2.0.0"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    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"
@@ -2973,7 +2884,7 @@ for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-foreach@^2.0.5, foreach@~2.0.1:
+foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3347,31 +3258,16 @@ 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"
 
-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"
   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"
@@ -3380,11 +3276,6 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
 
-is-callable@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
-  integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
-
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -3403,7 +3294,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"
 
@@ -3468,25 +3359,10 @@ is-installed-globally@^0.3.2:
     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-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
 
-is-negative-zero@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
-  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
-
-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"
@@ -3543,18 +3419,6 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-is-regex@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
-  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
-  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"
@@ -3563,41 +3427,16 @@ is-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
 
-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"
   dependencies:
     has-symbols "^1.0.1"
 
-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:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
 
-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"
@@ -3618,11 +3457,6 @@ isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
-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==
-
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -4742,19 +4576,6 @@ object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
 
-object-inspect@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
-  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
-
-object-is@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
-  integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -4786,16 +4607,6 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
-object.assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd"
-  integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.0"
-    has-symbols "^1.0.1"
-    object-keys "^1.1.1"
-
 object.getownpropertydescriptors@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
@@ -5276,19 +5087,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==
-
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -5701,14 +5499,6 @@ shortid@^2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
-side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
-  dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.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"
@@ -5942,14 +5732,6 @@ string.prototype.trimend@^1.0.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
-string.prototype.trimend@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.2.tgz#6ddd9a8796bc714b489a3ae22246a208f37bfa46"
-  integrity sha512-8oAG/hi14Z4nOVP0z6mdiVZ/wqjDtWSLygMigTzAb+7aPEDTleeFf+WrF+alzecxIRkckkJVn+dTlwzJXORATw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
 string.prototype.trimleft@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz#4408aa2e5d6ddd0c9a80739b087fbc067c03b3cc"
@@ -5973,14 +5755,6 @@ string.prototype.trimstart@^1.0.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
-string.prototype.trimstart@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.2.tgz#22d45da81015309cd0cdd79787e8919fc5c613e7"
-  integrity sha512-7F6CdBTl5zyu30BJFdzSTlSlLPwODC23Od+iLoVH8X6+3fvDPPuBVVj9iaB1GOsSTSIgVfsfm27R2FGrAPznWg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
 string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@@ -6430,43 +6204,10 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.0.0"
 
-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"
 
-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"
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 1e28e09ece..739154e961 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -200,15 +200,6 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/client@^0.2.6":
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.2.6.tgz#de1b4872c7956d386a3b08969eda509bd39d1a64"
-  integrity sha512-sSoGN0k2Tcc5GewBjFMN+G3h21O9JvakYI33kBKgEVGrdEQLBbry7vRKb+lALeW2Bz65gafZL2joZzL8vnH0lw==
-  dependencies:
-    deep-equal "^2.0.1"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1236,11 +1227,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"
@@ -1313,13 +1299,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-sdk@^2.767.0:
   version "2.771.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.771.0.tgz#ff4beb0a04d6ab1ae962c85dfb42e3e9bfe2b93b"
@@ -1352,13 +1331,6 @@ axios@^0.19.2:
   dependencies:
     follow-redirects "1.5.10"
 
-axios@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.0.tgz#26df088803a2350dff2c27f96fef99fe49442aca"
-  integrity sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==
-  dependencies:
-    follow-redirects "^1.10.0"
-
 babel-jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
@@ -2192,26 +2164,6 @@ decompress@^4.2.1:
     pify "^2.3.0"
     strip-dirs "^2.0.0"
 
-deep-equal@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.4.tgz#6b0b407a074666033169df3acaf128e1c6f3eab6"
-  integrity sha512-BUfaXrVoCfgkOQY/b09QdO9L3XNoF2XH0A3aY9IQwQL/ZjLOe8FQgCNVl1wiolhsFo8kFdO9zdPViCPbmaJA5w==
-  dependencies:
-    es-abstract "^1.18.0-next.1"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
-    isarray "^2.0.5"
-    object-is "^1.1.3"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    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"
@@ -2585,7 +2537,7 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
   version "1.17.7"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
   integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
@@ -2602,7 +2554,7 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstrac
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
+es-abstract@^1.18.0-next.0:
   version "1.18.0-next.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
   integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
@@ -2620,19 +2572,6 @@ es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
     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"
@@ -3185,11 +3124,6 @@ follow-redirects@1.5.10:
   dependencies:
     debug "=3.1.0"
 
-follow-redirects@^1.10.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
-  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3834,21 +3768,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"
@@ -3856,11 +3780,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"
@@ -3897,7 +3816,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==
@@ -3977,11 +3896,6 @@ 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-natural-number@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-natural-number/-/is-natural-number-4.0.1.tgz#ab9d76e1db4ced51e35de0c72ebecf09f734cde8"
@@ -3997,11 +3911,6 @@ is-npm@^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"
@@ -4053,21 +3962,11 @@ is-retry-allowed@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
   integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
 
-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"
@@ -4084,16 +3983,6 @@ 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"
@@ -4104,16 +3993,6 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
-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"
@@ -4139,11 +4018,6 @@ isarray@1.0.0, 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"
@@ -5677,14 +5551,6 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
-object-is@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
-  integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
 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"
@@ -6554,19 +6420,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"
@@ -6926,14 +6779,6 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
-  dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.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"
@@ -7961,44 +7806,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 1e41461a9068a9bf6bff69e3a75f3403523be78f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Oct 2020 16:05:19 +0000
Subject: [PATCH 46/52] Rename deletion modal titles and fixing cypress tests

---
 packages/builder/cypress/integration/createTable.spec.js       | 3 ++-
 .../automation/AutomationPanel/EditAutomationPopover.svelte    | 2 +-
 .../backend/DataTable/buttons/DeleteRowsButton.svelte          | 2 +-
 .../backend/DataTable/modals/CreateEditColumn.svelte           | 2 +-
 .../src/components/backend/DataTable/modals/DeleteRow.svelte   | 2 +-
 .../src/components/backend/DataTable/modals/EditRow.svelte     | 2 +-
 .../backend/TableNavigator/popovers/EditTablePopover.svelte    | 2 +-
 .../backend/TableNavigator/popovers/EditViewPopover.svelte     | 2 +-
 .../src/components/userInterface/ComponentDropdownMenu.svelte  | 2 +-
 .../src/components/userInterface/ScreenDropdownMenu.svelte     | 2 +-
 10 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js
index 266e31ba58..fdad39b956 100644
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/packages/builder/cypress/integration/createTable.spec.js
@@ -34,7 +34,8 @@ context("Create a Table", () => {
   })
 
   it("edits a row", () => {
-    cy.get("button").contains("Edit").click()
+    cy.contains("button", "Edit").click({ force: true })
+    cy.wait(1000)
     cy.get(".modal input").type("Updated")
     cy.contains("Save").click()
     cy.contains("RoverUpdated").should("have.text", "RoverUpdated")
diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
index 7868d8d2c6..a3ec5b2ae5 100644
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@@ -43,7 +43,7 @@
   bind:this={confirmDeleteDialog}
   okText="Delete Automation"
   onOk={deleteAutomation}
-  title="Confirm Delete">
+  title="Confirm Deletion">
   Are you sure you wish to delete the automation
   <i>{automation.name}?</i>
   This action cannot be undone.
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index 5690e4f76d..f55969087f 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -25,7 +25,7 @@
   bind:this={modal}
   okText="Delete"
   onOk={confirmDeletion}
-  title="Confirm Delete">
+  title="Confirm Deletion">
   Are you sure you want to delete
   {selectedRows.length}
   row{selectedRows.length > 1 ? 's' : ''}?
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index c831ef8193..866e574bca 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -170,7 +170,7 @@
   okText="Delete Column"
   onOk={deleteColumn}
   onCancel={hideDeleteDialog}
-  title="Confirm Delete" />
+  title="Confirm Deletion" />
 
 <style>
   .actions {
diff --git a/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte b/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
index 7c8f7ff8c0..b9f9cf32e1 100644
--- a/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
@@ -25,7 +25,7 @@
   body={`Are you sure you wish to delete this row? Your data will be deleted and this action cannot be undone.`}
   okText="Delete Row"
   onOk={deleteRow}
-  title="Confirm Delete" />
+  title="Confirm Deletion" />
 
 <style>
   .ri-delete-bin-line:hover {
diff --git a/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
index 2a03400dec..d5b3b63e0f 100644
--- a/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
@@ -12,7 +12,7 @@
   }
 </script>
 
-<Button translucent small on:click={showModal}>Edit</Button>
+<Button data-cy="edit-row" translucent small on:click={showModal}>Edit</Button>
 <Modal bind:this={modal}>
   <CreateEditRowModal {row} />
 </Modal>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 3d7fee0b09..c794999ac7 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -103,7 +103,7 @@
   bind:this={confirmDeleteDialog}
   okText="Delete Table"
   onOk={deleteTable}
-  title="Confirm Delete">
+  title="Confirm Deletion">
   Are you sure you wish to delete the table
   <i>{table.name}?</i>
   The following will also be deleted:
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 22fe6b4e86..331f336d4e 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -81,7 +81,7 @@
   body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
   okText="Delete View"
   onOk={deleteView}
-  title="Confirm Delete" />
+  title="Confirm Deletion" />
 
 <style>
   div.icon {
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index a15d59cc7e..62eb49145d 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -147,7 +147,7 @@
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
+  title="Confirm Deletion"
   body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`}
   okText="Delete Component"
   onOk={deleteComponent} />
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index 7fd8f9de43..75e2483f31 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -39,7 +39,7 @@
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
+  title="Confirm Deletion"
   body={`Are you sure you wish to delete the screen '${screen.props._instanceName}' ?`}
   okText="Delete Screen"
   onOk={deleteScreen} />

From 7d632445a9fae06da080e7dd017e4374d8adb4c2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Oct 2020 17:09:10 +0000
Subject: [PATCH 47/52] Add slight margin to perfectly align empty state text

---
 .../automation/AutomationBuilder/AutomationBuilder.svelte        | 1 +
 .../pages/[application]/data/table/[selectedTable]/index.svelte  | 1 +
 packages/builder/src/pages/[application]/data/table/index.svelte | 1 +
 .../pages/[application]/data/view/[selectedView]/index.svelte    | 1 +
 4 files changed, 4 insertions(+)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index 9f9401a738..f8a3699f4d 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -27,5 +27,6 @@
   i {
     font-size: var(--font-size-m);
     color: var(--grey-5);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
index 5491f7b884..c71edee2df 100644
--- a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
@@ -13,5 +13,6 @@
   i {
     font-size: var(--font-size-m);
     color: var(--grey-5);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/table/index.svelte b/packages/builder/src/pages/[application]/data/table/index.svelte
index d1e2062f5c..6c661bca59 100644
--- a/packages/builder/src/pages/[application]/data/table/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/index.svelte
@@ -29,5 +29,6 @@
   i {
     font-size: var(--font-size-m);
     color: var(--grey-5);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
index c1f7abc014..312e799005 100644
--- a/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
@@ -13,5 +13,6 @@
   i {
     font-size: var(--font-size-m);
     color: var(--grey-4);
+    margin-top: 2px;
   }
 </style>

From 3a9f6b8337201b5b3f7bc77b2f612d1e91c928f6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Oct 2020 17:40:14 +0000
Subject: [PATCH 48/52] Lint

---
 packages/builder/cypress/support/commands.js | 56 +++++++++++++++-----
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 015efdb187..f82ff30827 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -31,7 +31,9 @@ Cypress.Commands.add("createApp", name => {
     .then($body => {
       if ($body.find("input[name=apiKey]").length) {
         // input was found, do something else here
-        cy.get("input[name=apiKey]").type(name).should("have.value", name)
+        cy.get("input[name=apiKey]")
+          .type(name)
+          .should("have.value", name)
         cy.contains("Next").click()
       }
     })
@@ -42,8 +44,12 @@ Cypress.Commands.add("createApp", name => {
 
       cy.contains("Next").click()
 
-      cy.get("input[name=username]").click().type("test")
-      cy.get("input[name=password]").click().type("test")
+      cy.get("input[name=username]")
+        .click()
+        .type("test")
+      cy.get("input[name=password]")
+        .click()
+        .type("test")
       cy.contains("Submit").click()
       cy.get("[data-cy=new-table]", {
         timeout: 20000,
@@ -61,8 +67,12 @@ Cypress.Commands.add("createTable", tableName => {
   // Enter table name
   cy.get("[data-cy=new-table]").click()
   cy.get(".modal").within(() => {
-    cy.get("input").first().type(tableName)
-    cy.get(".buttons").contains("Create").click()
+    cy.get("input")
+      .first()
+      .type(tableName)
+    cy.get(".buttons")
+      .contains("Create")
+      .click()
   })
   cy.contains(tableName).should("be.visible")
 })
@@ -74,7 +84,9 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
 
   // Configure column
   cy.get(".actions").within(() => {
-    cy.get("input").first().type(columnName)
+    cy.get("input")
+      .first()
+      .type(columnName)
     // Unset table display column
     cy.contains("display column").click()
     cy.get("select").select(type)
@@ -87,11 +99,15 @@ Cypress.Commands.add("addRow", values => {
 
   cy.get(".modal").within(() => {
     for (let i = 0; i < values.length; i++) {
-      cy.get("input").eq(i).type(values[i])
+      cy.get("input")
+        .eq(i)
+        .type(values[i])
     }
 
     // Save
-    cy.get(".buttons").contains("Create").click()
+    cy.get(".buttons")
+      .contains("Create")
+      .click()
   })
 })
 
@@ -100,12 +116,20 @@ Cypress.Commands.add("createUser", (username, password, accessLevel) => {
   cy.get(".toprightnav > .settings").click()
   cy.contains("Users").click()
 
-  cy.get("[name=Name]").first().type(username)
-  cy.get("[name=Password]").first().type(password)
-  cy.get("select").first().select(accessLevel)
+  cy.get("[name=Name]")
+    .first()
+    .type(username)
+  cy.get("[name=Password]")
+    .first()
+    .type(password)
+  cy.get("select")
+    .first()
+    .select(accessLevel)
 
   // Save
-  cy.get(".inputs").contains("Create").click()
+  cy.get(".inputs")
+    .contains("Create")
+    .click()
 })
 
 Cypress.Commands.add("addHeadlineComponent", text => {
@@ -131,9 +155,13 @@ Cypress.Commands.add("navigateToFrontend", () => {
 Cypress.Commands.add("createScreen", (screenName, route) => {
   cy.get("[data-cy=new-screen]").click()
   cy.get(".modal").within(() => {
-    cy.get("input").eq(0).type(screenName)
+    cy.get("input")
+      .eq(0)
+      .type(screenName)
     if (route) {
-      cy.get("input").eq(1).type(route)
+      cy.get("input")
+        .eq(1)
+        .type(route)
     }
     cy.contains("Create Screen").click()
   })

From 52368b34aecdce31b951831e3dd2ace781be857b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Oct 2020 19:32:46 +0000
Subject: [PATCH 49/52] Fix crash when an Input exists as a possible datasource

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

diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index 7813a57e5e..4fdb477cbf 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -39,7 +39,7 @@
   })
 
   $: links = bindableProperties
-    .filter(x => x.fieldSchema.type === "link")
+    .filter(x => x.fieldSchema?.type === "link")
     .map(property => ({
       label: property.readableBinding,
       fieldName: property.fieldSchema.name,

From 214bd75ff75b0afbd346ef2526ff88d769e5d997 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Oct 2020 19:37:53 +0000
Subject: [PATCH 50/52] Fix bad schema type when fetching bindable properties

---
 .../builder/src/builderStore/fetchBindableProperties.js     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
index 64755606c3..9a193112fb 100644
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ b/packages/builder/src/builderStore/fetchBindableProperties.js
@@ -106,11 +106,15 @@ const contextToBindables = (tables, walkResult) => context => {
     }
   }
 
+  const stringType = { type: "string" }
   return (
     Object.entries(schema)
       .map(newBindable)
       // add _id and _rev fields - not part of schema, but always valid
-      .concat([newBindable(["_id", "string"]), newBindable(["_rev", "string"])])
+      .concat([
+        newBindable(["_id", stringType]),
+        newBindable(["_rev", stringType]),
+      ])
   )
 }
 

From 649cf18e450a40cc4ce9ee48a373a924bc88e732 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Oct 2020 19:38:11 +0000
Subject: [PATCH 51/52] Add proper names for all components and use these names
 when adding components

---
 .../src/builderStore/getNewComponentName.js        |  4 +++-
 packages/builder/src/builderStore/store/index.js   |  2 +-
 packages/standard-components/components.json       | 14 +++++++++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/builderStore/getNewComponentName.js b/packages/builder/src/builderStore/getNewComponentName.js
index 9ab8ef16dc..a4565c2296 100644
--- a/packages/builder/src/builderStore/getNewComponentName.js
+++ b/packages/builder/src/builderStore/getNewComponentName.js
@@ -2,7 +2,9 @@ import { walkProps } from "./storeUtils"
 import { get_capitalised_name } from "../helpers"
 
 export default function(component, state) {
-  const capitalised = get_capitalised_name(component)
+  const capitalised = get_capitalised_name(
+    component.name || component._component
+  )
 
   const matchingComponents = []
 
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 4e7b089f5e..9069682304 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -371,7 +371,7 @@ const addChildComponent = store => (componentToAdd, presetProps = {}) => {
     const component = getComponentDefinition(state, componentToAdd)
 
     const instanceId = get(backendUiStore).selectedDatabase._id
-    const instanceName = getNewComponentName(componentToAdd, state)
+    const instanceName = getNewComponentName(component, state)
 
     const newComponent = createProps(
       component,
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index d19b2ad85f..9adb3c02cf 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -92,7 +92,7 @@
 		]
 	},
 	"input": {
-		"name": "Input",
+		"name": "Textfield",
 		"bindable": "value",
 		"description": "An HTML input",
 		"props": {
@@ -222,6 +222,7 @@
 		}
 	},
 	"datagrid": {
+		"name": "Grid",
 		"description": "a datagrid component with functionality to add, remove and edit rows.",
 		"data": true,
 		"props": {
@@ -250,11 +251,13 @@
 		}
 	},
 	"dataform": {
+		"name": "Form",
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {}
 	},
 	"dataformwide": {
+		"name": "Form Wide",
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {}
@@ -275,6 +278,7 @@
 		}
 	},
 	"list": {
+		"name": "Repeater",
 		"description": "A configurable data list that attaches to your backend tables.",
 		"context": "datasource",
 		"children": true,
@@ -296,6 +300,7 @@
 		}
 	},
 	"rowdetail": {
+		"name": "Row Detail",
 		"description": "Loads a row, using an ID in the url",
 		"context": "table",
 		"children": true,
@@ -306,6 +311,7 @@
 		}
 	},
 	"newrow": {
+		"name": "New Row",
 		"description": "Prepares a new row for creation",
 		"context": "table",
 		"children": true,
@@ -673,6 +679,7 @@
 		}
 	},
 	"datepicker": {
+		"name": "Date Picker",
 		"description": "Date Picker",
 		"bindable": "value",
 		"props": {
@@ -704,6 +711,7 @@
 		}
 	},
 	"link": {
+		"name": "Link",
 		"description": "an HTML anchor <a> tag",
 		"props": {
 			"url": "string",
@@ -796,14 +804,14 @@
 		"tags": []
 	},
 	"thead": {
-		"name": "TableHead",
+		"name": "Table Head",
 		"description": "an HTML <thead> tab",
 		"props": {
 			"className": "string"
 		}
 	},
 	"tbody": {
-		"name": "TableBody",
+		"name": "Table Body",
 		"description": "an HTML <tbody> tab",
 		"props": {
 			"className": "string"

From caab43a312abf04cd812cd0c1f7c2935e3c4443c Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@budibase.com>
Date: Wed, 28 Oct 2020 20:28:00 +0000
Subject: [PATCH 52/52] v0.3.0

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

diff --git a/lerna.json b/lerna.json
index 9d0f9c2a80..df346f7cb9 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.2.6",
+  "version": "0.3.0",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 671aaaa5c8..20c2360ae2 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@budibase/bbui": "^1.47.0",
-    "@budibase/client": "^0.2.6",
+    "@budibase/client": "^0.3.0",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@fortawesome/fontawesome-free": "^5.14.0",
diff --git a/packages/client/package.json b/packages/client/package.json
index dd5e48b905..ba8ac5d811 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "license": "MPL-2.0",
   "main": "dist/budibase-client.js",
   "module": "dist/budibase-client.esm.mjs",
diff --git a/packages/server/package.json b/packages/server/package.json
index b7a9aed9da..c7909e5e28 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/server",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "Budibase Web Server",
   "main": "src/electron.js",
   "repository": {
@@ -40,7 +40,7 @@
   "author": "Michael Shanks",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/client": "^0.2.6",
+    "@budibase/client": "^0.3.0",
     "@koa/router": "^8.0.0",
     "@sendgrid/mail": "^7.1.1",
     "@sentry/node": "^5.19.2",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 13f3e167a9..1888fa334e 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -13,7 +13,7 @@
     "dev:builder": "rollup -cw"
   },
   "devDependencies": {
-    "@budibase/client": "^0.2.6",
+    "@budibase/client": "^0.3.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "lodash": "^4.17.15",
     "rollup": "^2.11.2",
@@ -31,7 +31,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.2.6",
+  "version": "0.3.0",
   "license": "MIT",
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {