From 4a23ddcdbd4eceaf6e28962d4094e0443a430f52 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 21 Jul 2020 09:31:16 +0000
Subject: [PATCH 01/16] Bump lodash from 4.17.15 to 4.17.19 in /packages/server

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.17.15...4.17.19)

Signed-off-by: dependabot[bot] <support@github.com>
---
 packages/server/yarn.lock | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 062563a881..2c8c430566 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -4009,14 +4009,10 @@ lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
 
-lodash@^4.17.10:
+lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.19"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
 
-lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-
 loose-envify@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"

From 99c42786bbd45c31c99a8c5a7e3dcb6d49ae821f Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 21 Jul 2020 12:16:05 +0100
Subject: [PATCH 02/16] Form: setting default values on record fields

---
 .../standard-components/src/DataForm.svelte   | 30 ++++++++++++++++---
 .../src/DataFormWide.svelte                   | 30 ++++++++++++++++---
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index f2aeaec747..e0a41a9ff7 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -32,11 +32,35 @@
 
   $: Object.values(inputElements).length && setForm(record)
 
+  const createBlankRecord = () => {
+    if (!schema) return
+    const newrecord = {
+      modelId: model,
+    }
+    for (let fieldName in schema) {
+      const field = schema[fieldName]
+      // defaulting to first one, as a blank value will fail validation
+      if (
+        field.type === "string" &&
+        field.constraints &&
+        field.constraints.inclusion &&
+        field.constraints.inclusion.length > 0
+      ) {
+        newrecord[fieldName] = field.constraints.inclusion[0]
+      } else if (field.type === "number") newrecord[fieldName] = null
+      else if (field.type === "boolean") newrecord[fieldName] = false
+      else if (field.type === "link") newrecord[fieldName] = []
+      else newrecord[fieldName] = ""
+    }
+    return newrecord
+  }
+
   async function fetchModel() {
     const FETCH_MODEL_URL = `/api/models/${model}`
     const response = await _bb.api.get(FETCH_MODEL_URL)
     modelDef = await response.json()
     schema = modelDef.schema
+    record = createBlankRecord()
   }
 
   async function save() {
@@ -81,9 +105,7 @@
         el.checked = false
       }
     }
-    record = {
-      modelId: model,
-    }
+    record = createBlankRecord()
   }
 
   const setForm = rec => {
@@ -123,7 +145,7 @@
     isNew = !recordId || recordId === "new"
 
     if (isNew) {
-      record = { modelId: model }
+      record = createBlankRecord()
     } else {
       const GET_RECORD_URL = `/api/${model}/records/${recordId}`
       _bb.api
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 3afae6f8d9..f15fabf9ea 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -32,11 +32,35 @@
 
   $: Object.values(inputElements).length && setForm(record)
 
+  const createBlankRecord = () => {
+    if (!schema) return
+    const newrecord = {
+      modelId: model,
+    }
+    for (let fieldName in schema) {
+      const field = schema[fieldName]
+      // defaulting to first one, as a blank value will fail validation
+      if (
+        field.type === "string" &&
+        field.constraints &&
+        field.constraints.inclusion &&
+        field.constraints.inclusion.length > 0
+      ) {
+        newrecord[fieldName] = field.constraints.inclusion[0]
+      } else if (field.type === "number") newrecord[fieldName] = null
+      else if (field.type === "boolean") newrecord[fieldName] = false
+      else if (field.type === "link") newrecord[fieldName] = []
+      else newrecord[fieldName] = ""
+    }
+    return newrecord
+  }
+
   async function fetchModel() {
     const FETCH_MODEL_URL = `/api/models/${model}`
     const response = await _bb.api.get(FETCH_MODEL_URL)
     modelDef = await response.json()
     schema = modelDef.schema
+    record = createBlankRecord()
   }
 
   async function save() {
@@ -81,9 +105,7 @@
         el.checked = false
       }
     }
-    record = {
-      modelId: model,
-    }
+    record = createBlankRecord()
   }
 
   const setForm = rec => {
@@ -123,7 +145,7 @@
     isNew = !recordId || recordId === "new"
 
     if (isNew) {
-      record = { modelId: model }
+      record = createBlankRecord()
     } else {
       const GET_RECORD_URL = `/api/${model}/records/${recordId}`
       _bb.api

From fe5bfd843da553e2942e0cf75cea16171fb85ce3 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 28 Jul 2020 17:43:29 +0100
Subject: [PATCH 03/16] initial table sorting algo

---
 .../standard-components/src/DataMap.svelte    | 31 -----------
 .../standard-components/src/DataTable.svelte  | 54 +++++++++++++++++--
 packages/standard-components/src/index.js     |  1 -
 3 files changed, 50 insertions(+), 36 deletions(-)
 delete mode 100644 packages/standard-components/src/DataMap.svelte

diff --git a/packages/standard-components/src/DataMap.svelte b/packages/standard-components/src/DataMap.svelte
deleted file mode 100644
index 9cbb3c97c2..0000000000
--- a/packages/standard-components/src/DataMap.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-  import { GoogleMap } from "@beyonk/svelte-googlemaps"
-
-  // export let _bb
-  // export let onLoad
-  // export let _instanceId
-  // export let model
-
-  // let mapComponent
-  // let headers = []
-  // let store = _bb.store
-
-  // $: data = $store[model._id] || []
-
-  // async function fetchData() {
-  //   const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
-  //   const response = await _bb.api.get(FETCH_RECORDS_URL)
-  //   if (response.status === 200) {
-  //     const json = await response.json()
-
-  //     store.update(state => {
-  //       state[model._id] = json
-  //       return state
-  //     });
-  //   } else {
-  //     throw new Error("Failed to fetch records.", response)
-  //   }
-  // }
-</script>
-
-<GoogleMap apiKey={'AIzaSyCPJ_eiSIbhRMmKBiVYXgh4HFHmbC4ZL5U'} />
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 0d75b1e4e8..9c9c256bb2 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -12,6 +12,8 @@
 
   let headers = []
   let store = _bb.store
+  let sort = {}
+  let sorted = []
 
   $: cssVariables = {
     backgroundColor,
@@ -20,6 +22,31 @@
     borderColor,
   }
 
+  $: data = $store[model] || []
+  $: sorted = data
+  $: {
+    let result = [...sorted]
+
+    if (!sort.column) sorted = result
+
+    console.log(sort);
+
+    if (sort.direction === "ASC") {
+      result.sort((a, b) =>  {
+        console.log(a[sort.column], b[sort.column])
+        return String(a[sort.column]).localeCompare(String(b[sort.column]))
+      }
+      )
+    }
+
+    if (sort.direction === "DESC") {
+      result.reverse()
+    }
+
+    sorted = result
+  }
+  $: if (model) fetchData()
+
   const shouldDisplayField = name => {
     if (name.startsWith("_")) return false
     // always 'record'
@@ -48,8 +75,20 @@
     }
   }
 
-  $: data = $store[model] || []
-  $: if (model) fetchData()
+  function sortColumn(column) {
+    if (column === sort.column) {
+      sort = {
+        direction: sort.direction === "ASC" ? "DESC" : null,
+        column: sort.direction === "ASC" ? sort.column : null,
+      }
+      return
+    }
+
+    sort = {
+      column,
+      direction: "ASC",
+    }
+  }
 
   onMount(async () => {
     await fetchData()
@@ -60,12 +99,15 @@
   <thead>
     <tr>
       {#each headers as header}
-        <th>{header}</th>
+        <th on:click={() => sortColumn(header)}>
+          {header}
+          {#if sort.column === header}v{/if}
+        </th>
       {/each}
     </tr>
   </thead>
   <tbody>
-    {#each data as row}
+    {#each sorted as row (row._id)}
       <tr>
         {#each headers as header}
           {#if row[header]}
@@ -120,6 +162,10 @@
       display: block;
     }
 
+    th {
+      cursor: pointer;
+    }
+
     /* Hide table headers (but not display: none;, for accessibility) */
     thead tr {
       position: absolute;
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index a0c6ee025d..067b1e9896 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -21,6 +21,5 @@ export { default as datachart } from "./DataChart.svelte"
 export { default as datalist } from "./DataList.svelte"
 export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
-export { default as datamap } from "./DataMap.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"

From 0219f34e71df8e207883925b07d6be356d48ddfb Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 28 Jul 2020 19:40:52 +0100
Subject: [PATCH 04/16] improved sorting logic

---
 packages/standard-components/package.json     |  1 +
 .../standard-components/src/DataTable.svelte  | 34 +++++--------------
 2 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 516a888a05..20a19aec74 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -38,6 +38,7 @@
   "gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
+    "fast-sort": "^2.2.0",
     "fusioncharts": "^3.15.1-sr.1",
     "svelte-fusioncharts": "^1.0.0"
   }
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 9c9c256bb2..dc301598e8 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { cssVars, createClasses } from "./cssVars"
+  import fsort from "fast-sort"
 
   export let _bb
   export let onLoad
@@ -23,28 +24,7 @@
   }
 
   $: data = $store[model] || []
-  $: sorted = data
-  $: {
-    let result = [...sorted]
-
-    if (!sort.column) sorted = result
-
-    console.log(sort);
-
-    if (sort.direction === "ASC") {
-      result.sort((a, b) =>  {
-        console.log(a[sort.column], b[sort.column])
-        return String(a[sort.column]).localeCompare(String(b[sort.column]))
-      }
-      )
-    }
-
-    if (sort.direction === "DESC") {
-      result.reverse()
-    }
-
-    sorted = result
-  }
+  $: sorted = sort.direction ? fsort(data)[sort.direction](sort.column) : data
   $: if (model) fetchData()
 
   const shouldDisplayField = name => {
@@ -78,15 +58,15 @@
   function sortColumn(column) {
     if (column === sort.column) {
       sort = {
-        direction: sort.direction === "ASC" ? "DESC" : null,
-        column: sort.direction === "ASC" ? sort.column : null,
+        direction: sort.direction === "asc" ? "desc" : null,
+        column: sort.direction === "asc" ? sort.column : null,
       }
       return
     }
 
     sort = {
       column,
-      direction: "ASC",
+      direction: "asc",
     }
   }
 
@@ -101,7 +81,9 @@
       {#each headers as header}
         <th on:click={() => sortColumn(header)}>
           {header}
-          {#if sort.column === header}v{/if}
+          {#if sort.column === header}
+            {#if sort.direction === 'asc'}v{:else}^{/if}
+          {/if}
         </th>
       {/each}
     </tr>

From 09fc431916854fa0674702d634d966c680a2ae1a Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 29 Jul 2020 13:11:29 +0100
Subject: [PATCH 05/16] table sorting for datatable

---
 .../standard-components/src/DataTable.svelte  | 20 +++++++++++++++----
 .../src/icons/ArrowDown.svelte                |  1 +
 .../src/icons/ArrowUp.svelte                  | 10 ++++++++++
 3 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 packages/standard-components/src/icons/ArrowDown.svelte
 create mode 100644 packages/standard-components/src/icons/ArrowUp.svelte

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index dc301598e8..fb02deb1de 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -1,6 +1,8 @@
 <script>
   import { onMount } from "svelte"
   import { cssVars, createClasses } from "./cssVars"
+  import ArrowUp from "./icons/ArrowUp.svelte"
+  import ArrowDown from "./icons/ArrowDown.svelte"
   import fsort from "fast-sort"
 
   export let _bb
@@ -80,10 +82,14 @@
     <tr>
       {#each headers as header}
         <th on:click={() => sortColumn(header)}>
-          {header}
-          {#if sort.column === header}
-            {#if sort.direction === 'asc'}v{:else}^{/if}
-          {/if}
+          <span>
+            {header}
+            {#if sort.column === header}
+              <svelte:component
+                style="height: 1em;"
+                this={sort.direction === 'asc' ? ArrowUp : ArrowDown} />
+            {/if}
+          </span>
         </th>
       {/each}
     </tr>
@@ -119,6 +125,12 @@
     color: var(--color);
     font-weight: bold;
     text-transform: capitalize;
+    cursor: pointer;
+  }
+
+  th span {
+    display: flex;
+    align-items: center;
   }
 
   td,
diff --git a/packages/standard-components/src/icons/ArrowDown.svelte b/packages/standard-components/src/icons/ArrowDown.svelte
new file mode 100644
index 0000000000..e75c43cb3d
--- /dev/null
+++ b/packages/standard-components/src/icons/ArrowDown.svelte
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z"/></svg>
\ No newline at end of file
diff --git a/packages/standard-components/src/icons/ArrowUp.svelte b/packages/standard-components/src/icons/ArrowUp.svelte
new file mode 100644
index 0000000000..897c3612d2
--- /dev/null
+++ b/packages/standard-components/src/icons/ArrowUp.svelte
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="18"
+  height="18">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414
+    1.414L13 7.828z" />
+</svg>

From 0741e9c81f2c795a4101686ab2068fdb93ae3c36 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 29 Jul 2020 13:12:13 +0100
Subject: [PATCH 06/16] icons wrong way round

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

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index fb02deb1de..7a1fc35c59 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -87,7 +87,7 @@
             {#if sort.column === header}
               <svelte:component
                 style="height: 1em;"
-                this={sort.direction === 'asc' ? ArrowUp : ArrowDown} />
+                this={sort.direction === 'asc' ? ArrowDown : ArrowUp} />
             {/if}
           </span>
         </th>

From 0f8c14a124eabe74fc9269c814d956b61e98a583 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 29 Jul 2020 13:21:32 +0100
Subject: [PATCH 07/16] tidy up :sparkles:

---
 packages/standard-components/src/DataTable.svelte     |  8 ++------
 .../standard-components/src/icons/ArrowDown.svelte    | 11 ++++++++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 7a1fc35c59..92523cfda2 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -86,8 +86,8 @@
             {header}
             {#if sort.column === header}
               <svelte:component
-                style="height: 1em;"
-                this={sort.direction === 'asc' ? ArrowDown : ArrowUp} />
+                this={sort.direction === 'asc' ? ArrowDown : ArrowUp}
+                style="height: 1em;" />
             {/if}
           </span>
         </th>
@@ -156,10 +156,6 @@
       display: block;
     }
 
-    th {
-      cursor: pointer;
-    }
-
     /* Hide table headers (but not display: none;, for accessibility) */
     thead tr {
       position: absolute;
diff --git a/packages/standard-components/src/icons/ArrowDown.svelte b/packages/standard-components/src/icons/ArrowDown.svelte
index e75c43cb3d..ef7e542ea1 100644
--- a/packages/standard-components/src/icons/ArrowDown.svelte
+++ b/packages/standard-components/src/icons/ArrowDown.svelte
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z"/></svg>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="18"
+  height="18">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11
+    16.172V4h2v12.172z" />
+</svg>

From 15595d0c7c9646acb6f5604e6aa9da9796e70745 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 31 Jul 2020 10:46:23 +0200
Subject: [PATCH 08/16] setup sidebar

---
 packages/builder/package.json                 |   4 +-
 .../components/start/CreateAppModal.svelte    | 126 ++++-----
 .../src/components/start/Indicator.svelte     |  80 ++++++
 .../src/components/start/Steps/API.svelte     |   0
 .../src/components/start/Steps/Info.svelte    |   0
 .../src/components/start/Steps/User.svelte    |   0
 .../src/components/start/Steps/index.js       |   3 +
 packages/server/yarn.lock                     | 244 +-----------------
 8 files changed, 151 insertions(+), 306 deletions(-)
 create mode 100644 packages/builder/src/components/start/Indicator.svelte
 create mode 100644 packages/builder/src/components/start/Steps/API.svelte
 create mode 100644 packages/builder/src/components/start/Steps/Info.svelte
 create mode 100644 packages/builder/src/components/start/Steps/User.svelte
 create mode 100644 packages/builder/src/components/start/Steps/index.js

diff --git a/packages/builder/package.json b/packages/builder/package.json
index a93609b4ed..33a3e55b6a 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -55,7 +55,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.16.0",
+    "@budibase/bbui": "^1.17.0",
     "@budibase/client": "^0.1.1",
     "@budibase/colorpicker": "^1.0.1",
     "@nx-js/compiler-util": "^2.0.0",
@@ -112,4 +112,4 @@
     "svelte-jester": "^1.0.6"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
+}
\ No newline at end of file
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 23cbc82bc9..20fbaba402 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,5 +1,7 @@
 <script>
   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 { goto } from "@sveltech/routify"
   import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
@@ -8,6 +10,8 @@
   import { post } from "builderStore/api"
   import analytics from "../../analytics"
 
+  export let hasAPIKey = false
+
   const { open, close } = getContext("simple-modal")
 
   let name = ""
@@ -61,43 +65,56 @@
   async function _onOkay() {
     await createNewApp()
   }
+
+  let currentStep = 0
+  let steps = [
+    { title: "Setup your API Key" },
+    { title: "Create your first web app" },
+    { title: "Create new user" },
+  ]
 </script>
 
 <div class="container">
+  <div class="sidebar">
+    {#each steps as { active, done }, i}
+      <Indicator
+        active={currentStep === i}
+        done={i < currentStep}
+        step={i + 1} />
+    {/each}
+  </div>
   <div class="body">
     <div class="heading">
-      <span class="icon">
-        <AppsIcon />
-      </span>
-      <h3 class="header">Create new web app</h3>
+      <h3 class="header">Get Started with Budibase</h3>
+    </div>
+    <div class="step">
+      <Input
+        error={error.name}
+        name="name"
+        label="Name"
+        placeholder="Enter application name"
+        on:change={e => (name = e.target.value)}
+        on:input={e => (name = e.target.value)} />
+      <TextArea
+        bind:value={description}
+        name="description"
+        label="Description"
+        placeholder="Describe your application" />
+      {#if error.description}
+        <span class="error">
+          Please enter a short description of your application
+        </span>
+      {/if}
+    </div>
+    <div class="footer">
+      {#if currentStep !== 0}
+        <Button primary thin on:click={_onOkay}>Back</Button>
+      {/if}
+      <Button primary thin on:click={_onOkay}>Next</Button>
+      {#if currentStep + 1 === steps.length}
+        <Button primary thin on:click={_onOkay}>Launch</Button>
+      {/if}
     </div>
-    <Input
-      name="name"
-      label="Name"
-      placeholder="Enter application name"
-      on:change={e => (name = e.target.value)}
-      on:input={e => (name = e.target.value)} />
-    {#if error.name}
-      <span class="error">You need to enter a name for your application.</span>
-    {/if}
-    <TextArea
-      bind:value={description}
-      name="description"
-      label="Description"
-      placeholder="Describe your application" />
-    {#if error.description}
-      <span class="error">
-        Please enter a short description of your application
-      </span>
-    {/if}
-  </div>
-  <div class="footer">
-    <a href="./#" class="info">
-      <InfoIcon />
-      How to get started
-    </a>
-    <Button secondary thin on:click={_onCancel}>Cancel</Button>
-    <Button primary thin on:click={_onOkay}>Save</Button>
   </div>
   <div class="close-button" on:click={_onCancel}>
     <CloseIcon />
@@ -112,9 +129,18 @@
 
 <style>
   .container {
+    display: grid;
+    grid-template-columns: 80px 1fr;
     position: relative;
   }
-
+  .sidebar {
+    display: grid;
+    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
+    grid-gap: 30px;
+    align-content: center;
+    background: #f5f5f5;
+  }
   .close-button {
     cursor: pointer;
     position: absolute;
@@ -135,43 +161,17 @@
     margin: 0;
     font-size: 24px;
     font-weight: 600;
-    font-family: inter;
-  }
-  .icon {
-    display: grid;
-    border-radius: 3px;
-    align-content: center;
-    justify-content: center;
-    margin-right: 12px;
-    height: 20px;
-    width: 20px;
-    padding: 10px;
-    background-color: var(--blue-light);
-  }
-  .info {
-    color: var(--blue);
-    text-decoration-color: var(--blue);
-  }
-  .info :global(svg) {
-    fill: var(--blue);
-    margin-right: 8px;
-    width: 24px;
-    height: 24px;
   }
   .body {
-    padding: 40px 40px 80px 40px;
+    padding: 40px 60px 60px 60px;
     display: grid;
-    grid-gap: 20px;
+    grid-template-rows: auto 1fr auto;
   }
   .footer {
     display: grid;
-    grid-gap: 20px;
-    align-items: center;
-    grid-template-columns: 1fr auto auto;
-    padding: 30px 40px;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 50px;
-    background-color: var(--grey-1);
+    grid-gap: 15px;
+    grid-template-columns: auto auto;
+    justify-content: end;
   }
   .spinner-container {
     background: white;
diff --git a/packages/builder/src/components/start/Indicator.svelte b/packages/builder/src/components/start/Indicator.svelte
new file mode 100644
index 0000000000..cde2d62e67
--- /dev/null
+++ b/packages/builder/src/components/start/Indicator.svelte
@@ -0,0 +1,80 @@
+<script>
+  export let step, done, active
+</script>
+
+<div class="container" class:active class:done>
+  <div class="circle" class:active class:done>
+    {#if done}
+      <svg
+        width="12"
+        height="10"
+        viewBox="0 0 12 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10.1212 0.319527C10.327 0.115582 10.6047 0.000803464 10.8944
+          4.20219e-06C11.1841 -0.00079506 11.4624 0.11245 11.6693
+          0.315256C11.8762 0.518062 11.9949 0.794134 11.9998 1.08379C12.0048
+          1.37344 11.8955 1.65339 11.6957 1.86313L5.82705 9.19893C5.72619
+          9.30757 5.60445 9.39475 5.46913 9.45527C5.3338 9.51578 5.18766 9.54839
+          5.03944 9.55113C4.89123 9.55388 4.74398 9.52671 4.60651
+          9.47124C4.46903 9.41578 4.34416 9.33316 4.23934 9.22833L0.350925
+          5.33845C0.242598 5.23751 0.155712 5.11578 0.0954499 4.98054C0.0351876
+          4.84529 0.00278364 4.69929 0.00017159 4.55124C-0.00244046 4.4032
+          0.024793 4.25615 0.0802466 4.11886C0.1357 3.98157 0.218238 3.85685
+          0.322937 3.75215C0.427636 3.64746 0.55235 3.56492 0.68964
+          3.50946C0.82693 3.45401 0.973983 3.42678 1.12203 3.42939C1.27007 3.432
+          1.41607 3.46441 1.55132 3.52467C1.68657 3.58493 1.80829 3.67182
+          1.90923 3.78014L4.98762 6.85706L10.0933 0.35187C10.1024 0.340482
+          10.1122 0.329679 10.1227 0.319527H10.1212Z"
+          fill="white" />
+      </svg>
+    {:else}{step}{/if}
+  </div>
+</div>
+
+<style>
+  .container::before {
+    content: "";
+    position: absolute;
+    top: -30px;
+    width: 1px;
+    height: 30px;
+    background: #bdbdbd;
+  }
+  .container:first-child::before {
+    display: none;
+  }
+  .container {
+    position: relative;
+    height: 45px;
+    display: grid;
+    place-items: center;
+  }
+  .container.active {
+    box-shadow: inset 3px 0 0 0 #4285f4;
+  }
+  .circle.active {
+    background: #4285f4;
+    color: white;
+    border: none;
+  }
+  .circle.done {
+    background: #bdbdbd;
+    color: white;
+    border: none;
+  }
+  .circle {
+    color: #bdbdbd;
+    font-size: 14px;
+    display: grid;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 1px solid #bdbdbd;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/packages/builder/src/components/start/Steps/API.svelte b/packages/builder/src/components/start/Steps/API.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/start/Steps/User.svelte b/packages/builder/src/components/start/Steps/User.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/start/Steps/index.js b/packages/builder/src/components/start/Steps/index.js
new file mode 100644
index 0000000000..45b9a7649c
--- /dev/null
+++ b/packages/builder/src/components/start/Steps/index.js
@@ -0,0 +1,3 @@
+export { default as API } from './API.svelte'
+export { default as Info } from './Info.svelte'
+export { default as User } from './User.svelte'
\ No newline at end of file
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 062563a881..d0bd25a5e8 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -172,21 +172,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/client@^0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.1.tgz#6df65bef641d956dea6d648e5dcd7e95622a24fc"
-  integrity sha512-z5CYj/4wahV9Kg7GwYi1knRZdm60uspkjOX7b3GXy85Zam1+m4ObSQ1aT6857WCXgl2+CQ3hIb2QGqSZfOTFuA==
-  dependencies:
-    "@nx-js/compiler-util" "^2.0.0"
-    bcryptjs "^2.4.3"
-    deep-equal "^2.0.1"
-    lodash "^4.17.15"
-    lunr "^2.3.5"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-    shortid "^2.2.8"
-    svelte "^3.9.2"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -369,11 +354,6 @@
     path-to-regexp "1.x"
     urijs "^1.19.2"
 
-"@nx-js/compiler-util@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
-  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==
-
 "@sendgrid/client@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@sendgrid/client/-/client-7.1.1.tgz#09a25e58ac7e5321d66807e7110ff0fb61bb534f"
@@ -842,11 +822,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"
@@ -906,13 +881,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.706.0:
   version "2.706.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.706.0.tgz#09f65e9a91ecac5a635daf934082abae30eca953"
@@ -1584,26 +1552,6 @@ decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
-deep-equal@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
-  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
-  dependencies:
-    es-abstract "^1.17.5"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.0.5"
-    isarray "^2.0.5"
-    object-is "^1.1.2"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.2"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -1932,36 +1880,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
-es-abstract@^1.17.4:
-  version "1.17.6"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
-  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.0"
-    is-regex "^1.1.0"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
-es-get-iterator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -2856,32 +2774,17 @@ 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"
   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"
@@ -2891,11 +2794,6 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
   integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
-is-callable@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
-  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
-
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -2918,7 +2816,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"
 
@@ -2981,21 +2879,11 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-npm@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
-is-number-object@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3026,28 +2914,11 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-is-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
-  integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
-  dependencies:
-    has-symbols "^1.0.1"
-
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -3062,31 +2933,11 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
-is-typed-array@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
-  dependencies:
-    available-typed-arrays "^1.0.0"
-    es-abstract "^1.17.4"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -3108,11 +2959,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"
@@ -4058,11 +3904,6 @@ ltgt@~2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.1.3.tgz#10851a06d9964b971178441c23c9e52698eece34"
 
-lunr@^2.3.5:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.8.tgz#a8b89c31f30b5a044b97d2d28e2da191b6ba2072"
-  integrity sha512-oxMeX/Y35PNFuZoHp+jUj5OSEmLCaIH4KTFJh7a93cHBoFmpw2IoPs22VIz7vyO2YUnx2Tn9dzIwO2P/4quIRg==
-
 make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -4227,11 +4068,6 @@ nan@^2.12.1:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
 
-nanoid@^2.1.0:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
-  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
-
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -4381,14 +4217,6 @@ object-inspect@^1.7.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
   integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
 
-object-is@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
-  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5038,19 +4866,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"
@@ -5344,21 +5159,6 @@ shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
-shortid@^2.2.8:
-  version "2.2.15"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
-  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
-  dependencies:
-    nanoid "^2.1.0"
-
-side-channel@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
-  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    object-inspect "^1.7.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -5575,7 +5375,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
+string.prototype.trimend@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   dependencies:
@@ -5598,7 +5398,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:
@@ -5717,11 +5517,6 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte@^3.9.2:
-  version "3.24.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
-  integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
-
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -6156,44 +5951,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 64f828ce109f39739cf90f2d12950a6bb5cea81b Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 31 Jul 2020 12:02:29 +0100
Subject: [PATCH 09/16] Stacked list component added

---
 .../userInterface/temporaryPanelStructure.js  | 71 ++++++++++++---
 packages/standard-components/components.json  | 12 +++
 .../src/StackedList.svelte                    | 89 +++++++++++++++++++
 packages/standard-components/src/index.js     |  1 +
 4 files changed, 162 insertions(+), 11 deletions(-)
 create mode 100644 packages/standard-components/src/StackedList.svelte

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index fedc432150..220343b332 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -246,6 +246,66 @@ export default {
       name: "Blocks",
       isCategory: true,
       children: [
+        {
+          name: "List",
+          _component: "@budibase/standard-components/list",
+          description: "Renders all children once per record, of a given table",
+          icon: "ri-file-list-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Table", key: "model", control: ModelSelect }],
+          },
+          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: Input,
+                placeholder: "/table/_id",
+              },
+            ],
+          },
+        },
         {
           _component: "@budibase/materialdesign-components/BasicCard",
           name: "Card",
@@ -407,17 +467,6 @@ export default {
         //  },
         //  children: [],
         // },
-        {
-          name: "List",
-          _component: "@budibase/standard-components/list",
-          description: "Renders all children once per record, of a given table",
-          icon: "ri-file-list-line",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "model", control: ModelSelect }],
-          },
-          children: [],
-        },
         {
           name: "Record Detail",
           _component: "@budibase/standard-components/recorddetail",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 1b266f4021..4b913e83dc 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -249,6 +249,18 @@
 			"model": "models"
 		}
 	},
+	"stackedlist": {
+		"name": "Stacked List",
+		"description": "A stacked list component for displaying information",
+		"props": {
+			"imageUrl": "string",
+			"heading": "string",
+			"text1": "string",
+			"text2": "string",
+			"text3": "string",
+			"destinationUrl": "string"
+		}
+	},
 	"recorddetail": {
 		"description": "Loads a record, using an ID in the url",
 		"data": true,
diff --git a/packages/standard-components/src/StackedList.svelte b/packages/standard-components/src/StackedList.svelte
new file mode 100644
index 0000000000..ceb061ce93
--- /dev/null
+++ b/packages/standard-components/src/StackedList.svelte
@@ -0,0 +1,89 @@
+<script>
+  export let imageUrl = ""
+  export let heading = ""
+  export let text1 = ""
+  export let text2 = ""
+  export let text3 = ""
+  export let destinationUrl = ""
+
+  $: showImage = !!imageUrl
+</script>
+
+<div class="container">
+  <a href={destinationUrl}>
+    <div class="content">
+      {#if showImage}
+        <div class="image-block">
+          <img class="image" src={imageUrl} alt="" />
+        </div>
+      {/if}
+      <h2 class="heading">{heading}</h2>
+      <h4 class="text">{text1}</h4>
+      <h4 class="text">{text2}</h4>
+      <h4 class="text3">{text3}</h4>
+    </div>
+  </a>
+</div>
+
+<style>
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+  .container {
+    padding: 20px;
+  }
+
+  .content {
+    display: grid;
+    grid-template-columns: 120px 300px 1fr 1fr 1fr;
+    align-items: center;
+    gap: 20px;
+    min-height: 80px;
+  }
+
+  @media (max-width: 800px) {
+    .content {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 20px;
+    }
+  }
+  .image-block {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .image {
+    padding: 2px;
+    max-width: 80px;
+    max-height: 80px;
+    margin-right: 20px;
+  }
+
+  .heading {
+    font-size: 24px;
+    margin: 0;
+    min-width: 200px;
+  }
+
+  .text {
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  .text3 {
+    text-align: end;
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  @media (max-width: 800px) {
+    .text3 {
+      text-align: start;
+    }
+  }
+</style>
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index a0c6ee025d..b7cf0f2a03 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -23,4 +23,5 @@ export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
 export { default as datamap } from "./DataMap.svelte"
 export { default as embed } from "./Embed.svelte"
+export { default as stackedlist } from "./StackedList.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"

From 284cceb9b703c38566c6e6363c022f79a08d5691 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 3 Aug 2020 11:45:39 +0100
Subject: [PATCH 10/16] v0.1.13

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

diff --git a/lerna.json b/lerna.json
index 84810e37f7..8b2066df4e 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.12",
+  "version": "0.1.13",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/builder/package.json b/packages/builder/package.json
index a93609b4ed..c488a82f5d 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
diff --git a/packages/cli/package.json b/packages/cli/package.json
index b6c68fca03..b3c100a51c 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "budibase",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Budibase CLI",
   "repository": "https://github.com/Budibase/Budibase",
   "homepage": "https://www.budibase.com",
@@ -17,7 +17,7 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/server": "^0.1.12",
+    "@budibase/server": "^0.1.13",
     "@inquirer/password": "^0.0.6-alpha.0",
     "chalk": "^2.4.2",
     "dotenv": "^8.2.0",
diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index 9f3acde766..27ebfb2280 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@budibase/client": "^0.1.1",
-    "@budibase/standard-components": "^0.1.10",
+    "@budibase/standard-components": "^0.1.13",
     "@material/button": "^4.0.0",
     "@material/checkbox": "^4.0.0",
     "@material/data-table": "4.0.0",
@@ -50,7 +50,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.1.10",
+  "version": "0.1.13",
   "license": "MIT",
   "gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8",
   "dependencies": {
diff --git a/packages/server/package.json b/packages/server/package.json
index bb46db9ed3..8427684dab 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/server",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Budibase Web Server",
   "main": "src/electron.js",
   "repository": {
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 20a19aec74..85e5d28acb 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -33,7 +33,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.1.10",
+  "version": "0.1.13",
   "license": "MIT",
   "gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8",
   "dependencies": {

From 2f10f51cd43c620a9e42a37e1cad181346733b53 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 3 Aug 2020 15:59:50 +0200
Subject: [PATCH 11/16] api key logic works correctly

---
 packages/builder/package.json                 |   6 +-
 .../components/start/CreateAppModal.svelte    | 239 ++++++++++++------
 .../src/components/start/Steps/API.svelte     |  25 ++
 .../src/components/start/Steps/Info.svelte    |  24 ++
 .../src/components/start/Steps/User.svelte    |  35 +++
 packages/builder/src/pages/index.svelte       |  24 +-
 6 files changed, 275 insertions(+), 78 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 33a3e55b6a..61a4dfa1f5 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -55,11 +55,12 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.17.0",
+    "@budibase/bbui": "^1.18.0",
     "@budibase/client": "^0.1.1",
     "@budibase/colorpicker": "^1.0.1",
     "@nx-js/compiler-util": "^2.0.0",
     "@sentry/browser": "5.19.1",
+    "@svelteschool/svelte-forms": "^0.7.0",
     "codemirror": "^5.51.0",
     "date-fns": "^1.29.0",
     "deepmerge": "^4.2.2",
@@ -74,7 +75,8 @@
     "string_decoder": "^1.2.0",
     "svelte-portal": "^0.1.0",
     "svelte-simple-modal": "^0.4.2",
-    "uikit": "^3.1.7"
+    "uikit": "^3.1.7",
+    "yup": "^0.29.2"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 20fbaba402..cb97209b28 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,4 +1,14 @@
+<script context="module">
+  // Init store here so that it doesn't get destroyed and removed when the component instance is destroyed. This is to make sure no data is lost if the user closes the model
+  import { writable } from "svelte/store"
+
+  export const createAppStore = writable({ currentStep: 0, values: {} })
+</script>
+
 <script>
+  import { string, object } from "yup"
+  import api from "builderStore/api"
+  import Form from "@svelteschool/svelte-forms"
   import Spinner from "components/common/Spinner.svelte"
   import { API, Info, User } from "./Steps"
   import Indicator from "./Indicator.svelte"
@@ -10,52 +20,136 @@
   import { post } from "builderStore/api"
   import analytics from "../../analytics"
 
-  export let hasAPIKey = false
-
   const { open, close } = getContext("simple-modal")
 
-  let name = ""
-  let description = ""
-  let loading = false
-  let error = {}
+  export let hasKey
 
-  const createNewApp = async () => {
-    if ((name.length > 100 || name.length < 1) && description.length < 1) {
-      error = {
-        name: true,
-        description: true,
-      }
-    } else if (description.length < 1) {
-      error = {
-        name: false,
-        description: true,
-      }
-    } else if (name.length > 100 || name.length < 1) {
-      error = {
-        name: true,
-      }
-    } else {
-      error = {}
-      const data = { name, description }
-      loading = true
-      try {
-        const response = await post("/api/applications", data)
+  let submitting = false
+  let errors = {}
+  let validationErrors = {}
+  let validationSchemas = [
+    {
+      apiKey: string().required("Please enter your API key."),
+    },
+    {
+      applicationName: string().required("Your application must have a name."),
+    },
+    {
+      username: string().required("Your application needs a first user."),
+      password: string().required(
+        "Please enter a password for your first user."
+      ),
+      accessLevelId: string().required(
+        "You need to select an access level for your user."
+      ),
+    },
+  ]
 
-        const res = await response.json()
+  let steps = [
+    {
+      component: API,
+      errors,
+    },
+    {
+      component: Info,
+      errors,
+    },
+    {
+      component: User,
+      errors,
+    },
+  ]
 
-        analytics.captureEvent("web_app_created", {
-          name,
-          description,
-          appId: res._id,
-        })
-        $goto(`./${res._id}`)
-      } catch (error) {
-        console.error(error)
-      }
+  if (hasKey) {
+    validationSchemas.shift()
+    validationSchemas = validationSchemas
+    steps.shift()
+    steps = steps
+  }
+
+  // Handles form navigation
+  const back = () => {
+    if ($createAppStore.currentStep > 0) {
+      $createAppStore.currentStep -= 1
+    }
+  }
+  const next = () => {
+    $createAppStore.currentStep += 1
+  }
+
+  // $: errors = validationSchemas.validate(values);
+  $: getErrors(
+    $createAppStore.values,
+    validationSchemas[$createAppStore.currentStep]
+  )
+
+  async function getErrors(values, schema) {
+    try {
+      validationErrors = {}
+      await object(schema).validate(values, { abortEarly: false })
+    } catch (error) {
+      validationErrors = extractErrors(error)
     }
   }
 
-  let value
+  const checkValidity = async (values, currentStep) => {
+    const validity = await object()
+      .shape(validationSchemas[currentStep])
+      .isValid(values)
+    currentStepIsValid = validity
+
+    // Check full form on last step
+    if (currentStep === steps.length - 1) {
+      // Make one big schema from all the small ones
+      const fullSchema = Object.assign({}, ...validationSchemas)
+
+      // Check full form schema
+      const formIsValid = await object()
+        .shape(fullSchema)
+        .isValid(values)
+      fullFormIsValid = formIsValid
+    }
+  }
+
+  async function signUp() {
+    submitting = true
+    try {
+      if (!hasKey) {
+        await updateKey(["budibase", $createAppStore.values.apiKey])
+      }
+      const response = await post("/api/applications", {
+        name: $createAppStore.values.applicationName,
+      })
+      const res = await response.json()
+      analytics.captureEvent("web_app_created", {
+        name,
+        description,
+        appId: res._id,
+      })
+      console.log("App created!")
+      // $goto(`./${res._id}`)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  async function updateKey([key, value]) {
+    console.log("Saving API Key")
+    const response = await api.put(`/api/keys/${key}`, { value })
+    const res = await response.json()
+    return res
+  }
+
+  function extractErrors({ inner }) {
+    return inner.reduce((acc, err) => {
+      return { ...acc, [err.path]: err.message }
+    }, {})
+  }
+
+  let currentStepIsValid = false
+  let fullFormIsValid = false
+  $: checkValidity($createAppStore.values, $createAppStore.currentStep)
+
   let onChange = () => {}
 
   function _onCancel() {
@@ -65,21 +159,14 @@
   async function _onOkay() {
     await createNewApp()
   }
-
-  let currentStep = 0
-  let steps = [
-    { title: "Setup your API Key" },
-    { title: "Create your first web app" },
-    { title: "Create new user" },
-  ]
 </script>
 
 <div class="container">
   <div class="sidebar">
     {#each steps as { active, done }, i}
       <Indicator
-        active={currentStep === i}
-        done={i < currentStep}
+        active={$createAppStore.currentStep === i}
+        done={i < $createAppStore.currentStep}
         step={i + 1} />
     {/each}
   </div>
@@ -88,38 +175,41 @@
       <h3 class="header">Get Started with Budibase</h3>
     </div>
     <div class="step">
-      <Input
-        error={error.name}
-        name="name"
-        label="Name"
-        placeholder="Enter application name"
-        on:change={e => (name = e.target.value)}
-        on:input={e => (name = e.target.value)} />
-      <TextArea
-        bind:value={description}
-        name="description"
-        label="Description"
-        placeholder="Describe your application" />
-      {#if error.description}
-        <span class="error">
-          Please enter a short description of your application
-        </span>
-      {/if}
+      <Form bind:values={$createAppStore.values}>
+        {#each steps as step, i (i)}
+          <div class:hidden={$createAppStore.currentStep !== i}>
+            <svelte:component
+              this={step.component}
+              {validationErrors}
+              options={step.options}
+              name={step.name} />
+          </div>
+        {/each}
+      </Form>
     </div>
     <div class="footer">
-      {#if currentStep !== 0}
-        <Button primary thin on:click={_onOkay}>Back</Button>
+      {#if $createAppStore.currentStep > 0}
+        <Button secondary on:click={back}>Back</Button>
       {/if}
-      <Button primary thin on:click={_onOkay}>Next</Button>
-      {#if currentStep + 1 === steps.length}
-        <Button primary thin on:click={_onOkay}>Launch</Button>
+      {#if $createAppStore.currentStep < steps.length - 1}
+        <Button secondary on:click={next} disabled={!currentStepIsValid}>
+          Next
+        </Button>
+      {/if}
+      {#if $createAppStore.currentStep === steps.length - 1}
+        <Button
+          secondary
+          on:click={signUp}
+          disabled={!fullFormIsValid || submitting}>
+          {submitting ? 'Loading...' : 'Submit'}
+        </Button>
       {/if}
     </div>
   </div>
   <div class="close-button" on:click={_onCancel}>
     <CloseIcon />
   </div>
-  {#if loading}
+  {#if submitting}
     <div in:fade class="spinner-container">
       <Spinner />
       <span class="spinner-text">Creating your app...</span>
@@ -129,6 +219,7 @@
 
 <style>
   .container {
+    min-height: 600px;
     display: grid;
     grid-template-columns: 80px 1fr;
     position: relative;
@@ -165,6 +256,7 @@
   .body {
     padding: 40px 60px 60px 60px;
     display: grid;
+    align-items: center;
     grid-template-rows: auto 1fr auto;
   }
   .footer {
@@ -189,9 +281,8 @@
   .spinner-text {
     font-size: 2em;
   }
-  .error {
-    color: var(--red);
-    font-weight: bold;
-    font-size: 0.8em;
+
+  .hidden {
+    display: none;
   }
 </style>
diff --git a/packages/builder/src/components/start/Steps/API.svelte b/packages/builder/src/components/start/Steps/API.svelte
index e69de29bb2..5f7a6d71f8 100644
--- a/packages/builder/src/components/start/Steps/API.svelte
+++ b/packages/builder/src/components/start/Steps/API.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { Input } from "@budibase/bbui"
+  export let validationErrors
+
+  let blurred = { api: false }
+</script>
+
+<h2>Setup your API Key</h2>
+<div class="container">
+  <Input
+    on:input={() => (blurred.api = true)}
+    label="API Key"
+    name="apiKey"
+    placeholder="Enter your API Key"
+    type="password"
+    error={blurred.api && validationErrors.apiKey} />
+  <a target="_blank" href="https://portal.budi.live/">Get API Key</a>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: 40px;
+  }
+</style>
diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte
index e69de29bb2..25dcf39be8 100644
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/packages/builder/src/components/start/Steps/Info.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { Input } from "@budibase/bbui"
+  export let validationErrors
+
+  let blurred = { appName: false }
+</script>
+
+<h2>Create your first web app</h2>
+<div class="container">
+  <Input
+    on:input={() => (blurred.appName = true)}
+    label="Web app name"
+    name="applicationName"
+    placeholder="Enter name of your web application"
+    type="name"
+    error={blurred.appName && validationErrors.applicationName} />
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: 40px;
+  }
+</style>
diff --git a/packages/builder/src/components/start/Steps/User.svelte b/packages/builder/src/components/start/Steps/User.svelte
index e69de29bb2..acbfbbe7cc 100644
--- a/packages/builder/src/components/start/Steps/User.svelte
+++ b/packages/builder/src/components/start/Steps/User.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { Input, Select } from "@budibase/bbui"
+  export let validationErrors
+
+  let blurred = { username: false, password: false }
+</script>
+
+<h2>Create new user</h2>
+<div class="container">
+  <Input
+    on:input={() => (blurred.username = true)}
+    label="Username"
+    name="username"
+    placeholder="Username"
+    type="name"
+    error={blurred.username && validationErrors.username} />
+  <Input
+    on:input={() => (blurred.password = true)}
+    label="Password"
+    name="password"
+    placeholder="Password"
+    type="pasword"
+    error={blurred.password && validationErrors.password} />
+  <Select name="accessLevelId">
+    <option value="ADMIN">Admin</option>
+    <option value="POWER_USER">Power User</option>
+  </Select>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: 40px;
+  }
+</style>
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index b0cd341c2d..5058d9e74b 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
   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"
@@ -23,6 +24,24 @@
     }
   }
 
+  let hasKey
+
+  async function fetchKeys() {
+    const response = await api.get(`/api/keys/`)
+    const res = await response.json()
+    return res.budibase
+  }
+
+  async function checkIfKeysAndApps() {
+    const key = await fetchKeys()
+    const apps = await getApps()
+    if (key) {
+      hasKey = true
+    } else {
+      showCreateAppModal()
+    }
+  }
+
   // Handle create app modal
   const { open } = getContext("simple-modal")
 
@@ -30,8 +49,7 @@
     open(
       CreateAppModal,
       {
-        message: "What is your name?",
-        hasForm: true,
+        hasKey,
       },
       {
         closeButton: false,
@@ -42,6 +60,8 @@
       }
     )
   }
+
+  checkIfKeysAndApps()
 </script>
 
 <div class="header">

From 667e70a7069c973dd9e164ff8dca9aeb763685c2 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 3 Aug 2020 16:26:28 +0200
Subject: [PATCH 12/16] signup flow now works correctly

---
 .../src/components/start/AppCard.svelte       |  6 +--
 .../components/start/CreateAppModal.svelte    | 38 +++++++++++++++----
 .../src/components/start/Steps/index.js       |  6 +--
 .../server/src/api/controllers/application.js |  1 -
 4 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 7cee45104a..39ee948b98 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,14 +1,10 @@
 <script>
   import Button from "components/common/Button.svelte"
-  export let name,
-    description = `A minimalist CRM which removes the noise and allows you to focus
-              on your business.`,
-    _id
+  export let name, _id
 </script>
 
 <div class="apps-card">
   <h3 class="app-title">{name}</h3>
-  <p class="app-desc">{description}</p>
   <div class="card-footer">
     <a href={`/_builder/${_id}`} class="app-button">Open {name}</a>
   </div>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index cb97209b28..755ed358a5 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -6,8 +6,9 @@
 </script>
 
 <script>
+  import { store, workflowStore, backendUiStore } from "builderStore"
   import { string, object } from "yup"
-  import api from "builderStore/api"
+  import api, { get } from "builderStore/api"
   import Form from "@svelteschool/svelte-forms"
   import Spinner from "components/common/Spinner.svelte"
   import { API, Info, User } from "./Steps"
@@ -114,27 +115,48 @@
   async function signUp() {
     submitting = true
     try {
+      // Add API key if there is none.
       if (!hasKey) {
         await updateKey(["budibase", $createAppStore.values.apiKey])
       }
-      const response = await post("/api/applications", {
+
+      // Create App
+      const appResp = await post("/api/applications", {
         name: $createAppStore.values.applicationName,
       })
-      const res = await response.json()
+      const appJson = await appResp.json()
       analytics.captureEvent("web_app_created", {
         name,
-        description,
-        appId: res._id,
+        appId: appJson._id,
       })
-      console.log("App created!")
-      // $goto(`./${res._id}`)
+
+      // Select Correct Application/DB in prep for creating user
+      const applicationPkg = await get(`/api/${appJson._id}/appPackage`)
+      const pkg = await applicationPkg.json()
+      if (applicationPkg.ok) {
+        backendUiStore.actions.reset()
+        await store.setPackage(pkg)
+        workflowStore.actions.fetch()
+      } else {
+        throw new Error(pkg)
+      }
+
+      // Create user
+      const user = {
+        name: $createAppStore.values.username,
+        username: $createAppStore.values.username,
+        password: $createAppStore.values.password,
+        accessLevelId: $createAppStore.values.accessLevelId,
+      }
+      const userResp = await api.post(`/api/users`, user)
+      const json = await userResp.json()
+      $goto(`./${appJson._id}`)
     } catch (error) {
       console.error(error)
     }
   }
 
   async function updateKey([key, value]) {
-    console.log("Saving API Key")
     const response = await api.put(`/api/keys/${key}`, { value })
     const res = await response.json()
     return res
diff --git a/packages/builder/src/components/start/Steps/index.js b/packages/builder/src/components/start/Steps/index.js
index 45b9a7649c..e59018eda7 100644
--- a/packages/builder/src/components/start/Steps/index.js
+++ b/packages/builder/src/components/start/Steps/index.js
@@ -1,3 +1,3 @@
-export { default as API } from './API.svelte'
-export { default as Info } from './Info.svelte'
-export { default as User } from './User.svelte'
\ No newline at end of file
+export { default as API } from "./API.svelte"
+export { default as Info } from "./Info.svelte"
+export { default as User } from "./User.svelte"
diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index fcc3bc0579..9619a973c9 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -69,7 +69,6 @@ exports.create = async function(ctx) {
       "@budibase/materialdesign-components",
     ],
     name: ctx.request.body.name,
-    description: ctx.request.body.description,
   }
 
   const { rev } = await db.put(newApplication)

From 6f851ac489c2a0654a714decec6590a68dbd0757 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 3 Aug 2020 15:28:45 +0100
Subject: [PATCH 13/16] bugfix: create app pointing to hardcoded
 standard-components version

---
 packages/server/src/utilities/createAppPackage.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/utilities/createAppPackage.js b/packages/server/src/utilities/createAppPackage.js
index b970a1985f..6ce3cde9c9 100644
--- a/packages/server/src/utilities/createAppPackage.js
+++ b/packages/server/src/utilities/createAppPackage.js
@@ -5,6 +5,8 @@ const fetch = require("node-fetch")
 const tar = require("tar-fs")
 const zlib = require("zlib")
 const { promisify } = require("util")
+const packageJson = require("../../package.json")
+
 const streamPipeline = promisify(stream.pipeline)
 
 exports.appPackageFolder = (config, appname) =>
@@ -17,7 +19,7 @@ exports.downloadExtractComponentLibraries = async appFolder => {
   for (let lib of LIBRARIES) {
     // download tarball
     // TODO: make sure the latest version is always downloaded
-    const registryUrl = `https://registry.npmjs.org/@budibase/${lib}/-/${lib}-0.1.2.tgz`
+    const registryUrl = `https://registry.npmjs.org/@budibase/${lib}/-/${lib}-${packageJson.version}.tgz`
     const response = await fetch(registryUrl)
     if (!response.ok)
       throw new Error(`unexpected response ${response.statusText}`)

From dfc64cdde96a2c0b3ba816d1523152a1eb38a096 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 3 Aug 2020 16:30:26 +0200
Subject: [PATCH 14/16] adds missing bb logo

---
 .../builder/src/components/start/CreateAppModal.svelte     | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 755ed358a5..6175d29546 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -231,6 +231,7 @@
   <div class="close-button" on:click={_onCancel}>
     <CloseIcon />
   </div>
+  <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
   {#if submitting}
     <div in:fade class="spinner-container">
       <Spinner />
@@ -307,4 +308,10 @@
   .hidden {
     display: none;
   }
+  img {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    height: 40px;
+  }
 </style>

From 43ee2726e23187744f66fa8420635617a55cc569 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 3 Aug 2020 17:08:54 +0200
Subject: [PATCH 15/16] move store init to component instance, svelte-forms
 need to be updated before it can use the store correctly in the context
 module script tag

---
 .../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 6175d29546..2ce4909f48 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,11 +1,6 @@
-<script context="module">
-  // Init store here so that it doesn't get destroyed and removed when the component instance is destroyed. This is to make sure no data is lost if the user closes the model
+<script>
   import { writable } from "svelte/store"
 
-  export const createAppStore = writable({ currentStep: 0, values: {} })
-</script>
-
-<script>
   import { store, workflowStore, backendUiStore } from "builderStore"
   import { string, object } from "yup"
   import api, { get } from "builderStore/api"
@@ -22,6 +17,8 @@
   import analytics from "../../analytics"
 
   const { open, close } = getContext("simple-modal")
+  //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
+  const createAppStore = writable({ currentStep: 0, values: {} })
 
   export let hasKey
 

From bbcb282e532702e2e720a853215036d4cb69659d Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@budibase.com>
Date: Wed, 5 Aug 2020 15:18:28 +0100
Subject: [PATCH 16/16] Cypress Tests Running in CI (#524)

* cypress test setup

* running cypress in CI

* fixing tests after first time setup wizard

* bb api key

* API Key in right place

* adding env in cypress.json

* env var in setup

* lint

* API key not working

* fill in API key form if present

* allow more time for creation

* cypress server for debug

* video recording, better debugging

* Adding debug logs

* set node env

* cypress env

* cancel irrelevant test
---
 .github/workflows/budibase_ci.yml             |  3 +-
 package.json                                  |  3 +-
 packages/builder/cypress.json                 |  7 +-
 packages/builder/cypress/fixtures/apikey.json |  3 +
 .../cypress/integration/createApp.spec.js     |  1 +
 .../integration/createComponents.spec.js      |  7 +-
 .../cypress/integration/createModel.spec.js   |  2 +-
 .../cypress/integration/createUser.spec.js    |  6 +-
 .../integration/createWorkflow.spec.js        | 12 +--
 .../cypress/integration/screens.spec.js       |  3 +-
 packages/builder/cypress/plugins/index.js     |  1 +
 packages/builder/cypress/setup.js             | 22 +++--
 packages/builder/cypress/support/commands.js  | 97 +++++++++++--------
 packages/builder/cypress/support/index.js     |  1 +
 packages/builder/package.json                 |  7 +-
 packages/builder/src/analytics.js             |  3 +-
 .../nav/ModelSetupNav/ModelSetupNav.svelte    |  1 +
 .../src/components/settings/Link.svelte       |  2 +-
 .../userInterface/DesignView.svelte           |  8 --
 .../userInterface/PropertyControl.svelte      |  2 +-
 packages/cli/package.json                     |  2 +-
 packages/cli/src/commands/run/runHandler.js   |  6 +-
 .../materialdesign-components/package.json    |  2 +-
 packages/server/package.json                  |  2 +-
 .../server/src/api/controllers/application.js |  2 +-
 packages/server/src/api/controllers/record.js |  4 +-
 .../workflow/actions/SAVE_RECORD.js           |  6 +-
 packages/server/src/api/index.js              |  4 +-
 packages/server/src/events/index.js           |  2 +-
 packages/server/src/events/workflow.js        | 11 ++-
 .../server/src/utilities/createAppPackage.js  |  1 -
 packages/standard-components/package.json     |  2 +-
 32 files changed, 130 insertions(+), 105 deletions(-)
 create mode 100644 packages/builder/cypress/fixtures/apikey.json

diff --git a/.github/workflows/budibase_ci.yml b/.github/workflows/budibase_ci.yml
index 21d735fcbc..f4c17b64ea 100644
--- a/.github/workflows/budibase_ci.yml
+++ b/.github/workflows/budibase_ci.yml
@@ -32,4 +32,5 @@ jobs:
     - run: yarn test
       env:
         CI: true
-        name: Budibase CI
\ No newline at end of file
+        name: Budibase CI
+    - run: yarn test:e2e:ci
diff --git a/package.json b/package.json
index 8185d0bbb0..b3ce4265a6 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
     "lint": "eslint packages",
     "lint:fix": "eslint --fix packages",
     "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\"",
-    "test:e2e": "lerna run cy:test"
+    "test:e2e": "lerna run cy:test",
+    "test:e2e:ci": "lerna run cy:ci"
   },
   "dependencies": {
     "@material/icon-button": "4.0.0",
diff --git a/packages/builder/cypress.json b/packages/builder/cypress.json
index 477d0a6dc4..a68cea053f 100644
--- a/packages/builder/cypress.json
+++ b/packages/builder/cypress.json
@@ -1,4 +1,5 @@
 {
-    "baseUrl": "http://localhost:4001/_builder/",
-    "video": false
-}
\ No newline at end of file
+  "baseUrl": "http://localhost:4001/_builder/",
+  "video": true,
+  "projectId": "bmbemn"
+}
diff --git a/packages/builder/cypress/fixtures/apikey.json b/packages/builder/cypress/fixtures/apikey.json
new file mode 100644
index 0000000000..1def14ed6c
--- /dev/null
+++ b/packages/builder/cypress/fixtures/apikey.json
@@ -0,0 +1,3 @@
+{
+  "budibase": "CB373643-3FC4-4902-9E31-449C0ED066B6"
+}
\ No newline at end of file
diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js
index 07a8687ea8..5382aa04cc 100644
--- a/packages/builder/cypress/integration/createApp.spec.js
+++ b/packages/builder/cypress/integration/createApp.spec.js
@@ -1,6 +1,7 @@
 context('Create an Application', () => {
 
     beforeEach(() => {
+        cy.server()
         cy.visit('localhost:4001/_builder')
     })
 
diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js
index cedd8fefe1..d6c471b74f 100644
--- a/packages/builder/cypress/integration/createComponents.spec.js
+++ b/packages/builder/cypress/integration/createComponents.spec.js
@@ -1,6 +1,7 @@
-context('Create Components', () => {
+xcontext('Create Components', () => {
 
     before(() => {
+        cy.server()
         cy.visit('localhost:4001/_builder')
         // https://on.cypress.io/type
         cy.createApp('Model App', 'Model App Description')
@@ -22,8 +23,8 @@ context('Create Components', () => {
     })
     it('change the font size of the headline', () => {
         cy.contains('Typography').click()
-        cy.get('input[name="font-size"]')
-            .type('60px')
+        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')
diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js
index 830f5e7a48..06b2420331 100644
--- a/packages/builder/cypress/integration/createModel.spec.js
+++ b/packages/builder/cypress/integration/createModel.spec.js
@@ -1,4 +1,4 @@
-context('Create a Model', () => {
+xcontext('Create a Model', () => {
 
     before(() => {
         cy.visit('localhost:4001/_builder')
diff --git a/packages/builder/cypress/integration/createUser.spec.js b/packages/builder/cypress/integration/createUser.spec.js
index 80d1a51d84..192cdae316 100644
--- a/packages/builder/cypress/integration/createUser.spec.js
+++ b/packages/builder/cypress/integration/createUser.spec.js
@@ -1,6 +1,7 @@
 context('Create a User', () => {
 
     before(() => {
+        cy.server()
         cy.visit('localhost:4001/_builder')
         // https://on.cypress.io/type
         cy.createApp('User App', 'This app is used to test user creation')
@@ -8,12 +9,9 @@ context('Create a User', () => {
 
     // https://on.cypress.io/interacting-with-elements
     it('should create a user', () => {
-        // Close Model modal that shows up after creating an app
-        cy.get('.close').click()
-
         cy.createUser('bbuser', 'test', 'ADMIN')
 
         // Check to make sure user was created!
-        cy.contains('bbuser').should('have.text', 'bbuser')
+        cy.get("input[disabled]").should('have.value', 'bbuser')
     })
 })
diff --git a/packages/builder/cypress/integration/createWorkflow.spec.js b/packages/builder/cypress/integration/createWorkflow.spec.js
index 9188721988..ed14ce1487 100644
--- a/packages/builder/cypress/integration/createWorkflow.spec.js
+++ b/packages/builder/cypress/integration/createWorkflow.spec.js
@@ -1,6 +1,7 @@
-context('Create a workflow', () => {
+xcontext('Create a workflow', () => {
 
     before(() => {
+        cy.server()
         cy.visit('localhost:4001/_builder')
 
         cy.createApp('Workflow Test App', 'This app is used to test that workflows do in fact work!')
@@ -9,11 +10,9 @@ context('Create a workflow', () => {
     // https://on.cypress.io/interacting-with-elements
     it('should create a workflow', () => {
         cy.createModel('dog', 'name', 'age')
-        cy.createUser('bbuser', 'test', 'ADMIN')
-
 
         cy.contains('workflow').click()
-        cy.get('.new-workflow-button').click()
+        cy.contains('Create New Workflow').click()
         cy.get('input').type('Add Record')
         cy.contains('Save').click()
 
@@ -28,14 +27,13 @@ context('Create a workflow', () => {
         cy.get(':nth-child(3) > .budibase__input').type('11')
 
         // Save
-        cy.get('[data-cy=save-workflow-setup]').click()
-        cy.get('.workflow-button').click()
+        cy.contains('Save Workflow').click()
 
         // Activate Workflow
         cy.get('[data-cy=activate-workflow]').click()
 
     })
-    it('should add record when a new record is added', () => {
+    xit('should add record when a new record is added', () => {
         cy.contains('backend').click()
 
         cy.addRecord('bob', '15')
diff --git a/packages/builder/cypress/integration/screens.spec.js b/packages/builder/cypress/integration/screens.spec.js
index 43f7d44917..65879b7b58 100644
--- a/packages/builder/cypress/integration/screens.spec.js
+++ b/packages/builder/cypress/integration/screens.spec.js
@@ -1,13 +1,14 @@
 
 context('Screen Tests', () => {
     before(() => {
+        cy.server()
         cy.visit('localhost:4001/_builder')
         cy.createApp('Conor Cy App', 'Model App Description')
         cy.navigateToFrontend()
     })
 
     it('Should successful create a screen', () => { 
-        cy.createScreen("test Screen")        
+        cy.createScreen("test Screen", "/test")        
     })
 
     it('Should rename a screen', () => {
diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js
index 59b2bab6e4..771ba886b5 100644
--- a/packages/builder/cypress/plugins/index.js
+++ b/packages/builder/cypress/plugins/index.js
@@ -19,4 +19,5 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  require("cypress-terminal-report/src/installLogsPrinter")(on)
 }
diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js
index 80516471da..1003e6e422 100644
--- a/packages/builder/cypress/setup.js
+++ b/packages/builder/cypress/setup.js
@@ -1,17 +1,23 @@
 // What this script does:
-// 1. Removes the old test folder if it exists (.budibase-cypress)
-// 2. Initialises using `.budibase-cypress`
+// 1. Removes the old test folder if it exists (.budibase)
+// 2. Initialises using `.budibase`
 // 3. Runs the server using said folder
 
 const rimraf = require("rimraf")
 const { join } = require("path")
-const homedir = join(require("os").homedir(), ".budibase-cypress")
-const init = require("../../cli/src/commands/init/initHandler")
 const run = require("../../cli/src/commands/run/runHandler")
+const initialiseBudibase = require("../../server/src/utilities/initialiseBudibase")
+
+const homedir = join(require("os").homedir(), ".budibase")
 
 rimraf.sync(homedir)
 
-init({ dir: homedir, clientId: "cypress-test" }).then(() => {
-  delete require.cache[require.resolve("../../server/src/environment")]
-  run({ dir: homedir })
-})
+process.env.BUDIBASE_API_KEY = "6BE826CB-6B30-4AEC-8777-2E90464633DE"
+process.env.NODE_ENV = "cypress"
+
+initialiseBudibase({ dir: homedir, clientId: "cypress-test" })
+  .then(() => {
+    delete require.cache[require.resolve("../../server/src/environment")]
+    run({ dir: homedir })
+  })
+  .catch(e => console.error(e))
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 33ae53d6da..abd44d7061 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -24,69 +24,81 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-Cypress.Commands.add("createApp", (name, description) => {
-  cy.get(".banner-button")
-    .click()
-    .get('input[name="name"]')
-    .type(name)
-    .should("have.value", name)
+Cypress.Commands.add("createApp", name => {
+  cy.contains("Create New Web App").click()
 
-  cy.get('textarea[name="description"]')
-    .type(description)
-    .should("have.value", description)
+  cy.get("body")
+    .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.contains("Next").click()
+      }
+    })
+    .then(() => {
+      cy.get("input[name=applicationName]")
+        .type(name)
+        .should("have.value", name)
 
-  cy.contains("Save").click()
+      cy.contains("Next").click()
+
+      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", {
+        timeout: 10000,
+      }).should("be.visible")
+    })
 })
-Cypress.Commands.add("createModel", (modelName, firstField, secondField) => {
+
+Cypress.Commands.add("createModel", modelName => {
   // Enter model name
-  cy.get("[data-cy=Name]")
-    .click()
-    .type(modelName)
+  cy.contains("Create New Table").click()
+  cy.get("[data-cy=table-name-input]").type(modelName)
 
   // Add 'name' field
-  cy.get("[data-cy=add-new-model-field]").click()
-  cy.get("[data-cy=Name]")
-    .click()
-    .type(firstField)
-  cy.contains("Save").click()
+  cy.contains("Add").click()
+  cy.contains("Plain Text").click()
 
   // Add 'age' field
-  cy.get("[data-cy=add-new-model-field]").click()
+  cy.contains("Add").click()
+  cy.contains("Number").click()
 
-  cy.get("[data-cy=Name]")
-    .click()
-    .type(secondField)
-  cy.get("select").select("number")
   cy.contains("Save").click()
-  cy.contains(secondField).should("exist")
 
-  // Save model
-  cy.contains("Save").click()
+  cy.contains(modelName).click()
 })
+
 Cypress.Commands.add("addRecord", (firstField, secondField) => {
-  cy.contains("Create new record").click()
+  cy.contains("Create New Record").click()
 
-  cy.get("[data-cy=name-input]")
-    .click()
-    .type(firstField)
-  cy.get("[data-cy=age-input]")
-    .click()
-    .type(secondField)
+  cy.get("[data-cy='Plain Text-input']").type(firstField)
+  cy.get("[data-cy=Number-input]").type(secondField)
 
   // Save
   cy.contains("Save").click()
 })
 
-Cypress.Commands.add("createUser", (username, password, level) => {
+Cypress.Commands.add("createUser", (username, password) => {
   // Create User
-  cy.get(".nav-group-header > .ri-add-line").click()
+  cy.get(".toprightnav > .settings").click()
+  cy.contains("Users").click()
 
-  cy.get("[data-cy=username]").type(username)
-  cy.get("[data-cy=password]").type(password)
-  cy.get("[data-cy=accessLevel]").select(level)
+  cy.get("[name=Name]")
+    .first()
+    .type(username)
+  cy.get("[name=Password]")
+    .first()
+    .type(password)
 
   // Save
-  cy.contains("Save").click()
+  cy.get(".create-button").click()
 })
 
 Cypress.Commands.add("addHeadlineComponent", text => {
@@ -95,7 +107,8 @@ Cypress.Commands.add("addHeadlineComponent", text => {
   cy.get("[data-cy=Text]").click()
   cy.get("[data-cy=Headline]").click()
   cy.get(".tabs > :nth-child(2)").click()
-  cy.get('input[type="text"]').type(text)
+  cy.contains("Settings").click()
+  cy.get('input[name="text"]').type(text)
   cy.contains("Design").click()
 })
 Cypress.Commands.add("addButtonComponent", () => {
@@ -105,9 +118,7 @@ Cypress.Commands.add("addButtonComponent", () => {
 })
 
 Cypress.Commands.add("navigateToFrontend", () => {
-  cy.get(".close", { timeout: 10000 }).click()
   cy.contains("frontend").click()
-  cy.get(".close", { timeout: 10000 }).click()
 })
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
diff --git a/packages/builder/cypress/support/index.js b/packages/builder/cypress/support/index.js
index 15c9d759fc..03ef2249f9 100644
--- a/packages/builder/cypress/support/index.js
+++ b/packages/builder/cypress/support/index.js
@@ -19,3 +19,4 @@ import "./commands"
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
+require("cypress-terminal-report/src/installLogsCollector")()
diff --git a/packages/builder/package.json b/packages/builder/package.json
index f5dbaf1eee..7dfd29354a 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -13,7 +13,9 @@
     "cy:setup": "node ./cypress/setup.js",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
-    "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run"
+    "cy:run:ci": "cypress run --browser electron --record --key f308590b-6070-41af-b970-794a3823d451",
+    "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run",
+    "cy:ci": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run:ci"
   },
   "jest": {
     "globals": {
@@ -91,6 +93,7 @@
     "babel-jest": "^24.8.0",
     "browser-sync": "^2.26.7",
     "cypress": "^4.8.0",
+    "cypress-terminal-report": "^1.4.1",
     "eslint-plugin-cypress": "^2.11.1",
     "http-proxy-middleware": "^0.19.1",
     "jest": "^24.8.0",
@@ -114,4 +117,4 @@
     "svelte-jester": "^1.0.6"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
\ No newline at end of file
+}
diff --git a/packages/builder/src/analytics.js b/packages/builder/src/analytics.js
index 092a6f6303..43b51eb5fb 100644
--- a/packages/builder/src/analytics.js
+++ b/packages/builder/src/analytics.js
@@ -3,6 +3,7 @@ import posthog from "posthog-js"
 
 function activate() {
   Sentry.init({ dsn: process.env.SENTRY_DSN })
+  if (!process.env.POSTHOG_TOKEN) return
   posthog.init(process.env.POSTHOG_TOKEN, {
     api_host: process.env.POSTHOG_URL,
   })
@@ -13,7 +14,7 @@ function captureException(err) {
 }
 
 function captureEvent(event) {
-  if (process.env.NODE_ENV !== "production") return
+  if (!process.env.POSTHOG_TOKEN) return
   posthog.capture(event)
 }
 
diff --git a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
index 400e121de1..561ca45be6 100644
--- a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
+++ b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
@@ -99,6 +99,7 @@
         <div class="titled-input">
           <header>Name</header>
           <input
+            data-cy="table-name-input"
             type="text"
             class="budibase__input"
             bind:value={$backendUiStore.draftModel.name} />
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index 7f3c202629..9d669bc7b2 100644
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@@ -24,7 +24,7 @@
   }
 </script>
 
-<span class="topnavitemright" on:click={showSettingsModal}>
+<span class="topnavitemright settings" on:click={showSettingsModal}>
   <SettingsIcon />
 </span>
 
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 9db0001266..5e9015af9f 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -14,14 +14,6 @@
 
   const getProperties = name => panelDefinition[name]
 
-  onMount(() => {
-    // if(propGroup) {
-    //   propGroup.addEventListener("scroll", function(e){
-    //     console.log("I SCROLLED", e.target.scrollTop)
-    //   })
-    // }
-  })
-
   function onChange(category) {
     selectedCategory = category
   }
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index f9a8533b33..01cfd777dd 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -32,7 +32,7 @@
 
 <div class="property-control">
   <div class="label">{label}</div>
-  <div class="control">
+  <div data-cy={`${key}-prop-control`} class="control">
     <svelte:component
       this={control}
       {...handlevalueKey(value)}
diff --git a/packages/cli/package.json b/packages/cli/package.json
index b3c100a51c..08ee362270 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -29,5 +29,5 @@
     "uuid": "^7.0.3",
     "yargs": "^14.2.0"
   },
-  "gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8"
+  "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691"
 }
diff --git a/packages/cli/src/commands/run/runHandler.js b/packages/cli/src/commands/run/runHandler.js
index 4b286db4e9..0305436664 100644
--- a/packages/cli/src/commands/run/runHandler.js
+++ b/packages/cli/src/commands/run/runHandler.js
@@ -8,8 +8,6 @@ module.exports = async ({ dir }) => {
 
   // dont make this a variable or top level require
   // it will cause environment module to be loaded prematurely
-  return require("@budibase/server/src/app")().then(server => {
-    server.on("close", () => console.log("Server Closed"))
-    console.log(`Budibase running on ${JSON.stringify(server.address())}`)
-  })
+  const server = require("@budibase/server/src/app")
+  server.on("close", () => console.log("Server Closed"))
 }
diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index 27ebfb2280..f995444fc5 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -52,7 +52,7 @@
   ],
   "version": "0.1.13",
   "license": "MIT",
-  "gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8",
+  "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@material/card": "4.0.0"
   }
diff --git a/packages/server/package.json b/packages/server/package.json
index 8427684dab..4a0bf43455 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -97,5 +97,5 @@
       "./scripts/jestSetup.js"
     ]
   },
-  "gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8"
+  "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691"
 }
diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index 9619a973c9..d6200a0a20 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -207,7 +207,7 @@ const getClientId = ctx => {
     env.CLIENT_ID
 
   if (!clientId) {
-    ctx.throw(400, "ClientId not suplied")
+    ctx.throw(400, "ClientId not supplied")
   }
   return clientId
 }
diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js
index 01b1f6b859..eeb5f707b6 100644
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@@ -68,7 +68,9 @@ exports.save = async function(ctx) {
 
   ctx.eventEmitter &&
     ctx.eventEmitter.emit(`record:save`, {
-      record,
+      args: {
+        record,
+      },
       instanceId: ctx.user.instanceId,
     })
   ctx.body = record
diff --git a/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js b/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js
index 51f215b6bf..a6c962bdd5 100644
--- a/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js
+++ b/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js
@@ -1,17 +1,17 @@
 const recordController = require("../../record")
 
-module.exports = async function saveRecord({ args, instanceId }) {
+module.exports = async function saveRecord({ args, context }) {
   const { model, ...record } = args.record
 
   const ctx = {
     params: {
-      instanceId,
+      instanceId: context.instanceId,
       modelId: model._id,
     },
     request: {
       body: record,
     },
-    user: { instanceId },
+    user: { instanceId: context.instanceId },
   }
 
   await recordController.save(ctx)
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index cb31b0d6b8..48c2a9041f 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -44,7 +44,9 @@ router
       useAppRootPath: true,
     }
     ctx.isDev =
-      process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "jest"
+      process.env.NODE_ENV !== "production" &&
+      process.env.NODE_ENV !== "jest" &&
+      process.env.NODE_ENV !== "cypress"
     await next()
   })
   .use(authenticated)
diff --git a/packages/server/src/events/index.js b/packages/server/src/events/index.js
index d537209c05..0ad4e986bd 100644
--- a/packages/server/src/events/index.js
+++ b/packages/server/src/events/index.js
@@ -18,7 +18,7 @@ async function executeRelevantWorkflows(event, eventType) {
   workflowOrchestrator.strategy = serverStrategy
 
   for (let workflow of workflows) {
-    workflowOrchestrator.execute(workflow)
+    workflowOrchestrator.execute(workflow, event)
   }
 }
 
diff --git a/packages/server/src/events/workflow.js b/packages/server/src/events/workflow.js
index ea66295e4d..a997530241 100644
--- a/packages/server/src/events/workflow.js
+++ b/packages/server/src/events/workflow.js
@@ -12,9 +12,9 @@ exports.Orchestrator = class Orchestrator {
     this._strategy = strategy()
   }
 
-  async execute(workflow) {
+  async execute(workflow, context) {
     if (workflow.live) {
-      this._strategy.run(workflow.definition)
+      this._strategy.run(workflow.definition, context)
     }
   }
 }
@@ -35,12 +35,15 @@ exports.serverStrategy = () => ({
 
     return mappedArgs
   },
-  run: async function(workflow) {
+  run: async function(workflow, context) {
     for (let block of workflow.steps) {
       if (block.type === "CLIENT") continue
 
       const action = require(`../api/controllers/workflow/actions/${block.actionId}`)
-      const response = await action({ args: this.bindContextArgs(block.args) })
+      const response = await action({
+        args: this.bindContextArgs(block.args),
+        context,
+      })
 
       this.context = {
         ...this.context,
diff --git a/packages/server/src/utilities/createAppPackage.js b/packages/server/src/utilities/createAppPackage.js
index 6ce3cde9c9..ec47901671 100644
--- a/packages/server/src/utilities/createAppPackage.js
+++ b/packages/server/src/utilities/createAppPackage.js
@@ -18,7 +18,6 @@ exports.downloadExtractComponentLibraries = async appFolder => {
   // Need to download tarballs directly from NPM as our users may not have node on their machine
   for (let lib of LIBRARIES) {
     // download tarball
-    // TODO: make sure the latest version is always downloaded
     const registryUrl = `https://registry.npmjs.org/@budibase/${lib}/-/${lib}-${packageJson.version}.tgz`
     const response = await fetch(registryUrl)
     if (!response.ok)
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 85e5d28acb..42a0de8c9a 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -35,7 +35,7 @@
   ],
   "version": "0.1.13",
   "license": "MIT",
-  "gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8",
+  "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
     "fast-sort": "^2.2.0",