From 35ceb7e01dd2c07f2eda4ca63224993086e749f9 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 21 May 2020 11:55:56 +0100
Subject: [PATCH 01/51] budi init - removing unnecessary argument

---
 packages/cli/src/commands/init/index.js       |  9 +------
 packages/cli/src/commands/init/initHandler.js | 26 +++----------------
 2 files changed, 4 insertions(+), 31 deletions(-)

diff --git a/packages/cli/src/commands/init/index.js b/packages/cli/src/commands/init/index.js
index 4a25fbd8b2..f387a8d203 100644
--- a/packages/cli/src/commands/init/index.js
+++ b/packages/cli/src/commands/init/index.js
@@ -11,13 +11,6 @@ module.exports = {
       default: "~/.budibase",
       alias: "d",
     })
-    yargs.positional("database", {
-      type: "string",
-      describe: "use a local (PouchDB) or remote (CouchDB) database",
-      alias: "b",
-      default: "local",
-      choices: ["local", "remote"],
-    })
     yargs.positional("clientId", {
       type: "string",
       describe: "used to determine the name of the global databse",
@@ -28,7 +21,7 @@ module.exports = {
       type: "string",
       describe:
         "connection string for couch db, format: https://username:password@localhost:5984",
-      alias: "x",
+      alias: "u",
       default: "",
     })
     yargs.positional("quiet", {
diff --git a/packages/cli/src/commands/init/initHandler.js b/packages/cli/src/commands/init/initHandler.js
index 0467633ee8..c0c4ad1b9e 100644
--- a/packages/cli/src/commands/init/initHandler.js
+++ b/packages/cli/src/commands/init/initHandler.js
@@ -14,7 +14,6 @@ const run = async opts => {
   try {
     await ensureAppDir(opts)
     await setEnvironmentVariables(opts)
-    await prompts(opts)
     await createClientDatabase(opts)
     await createDevEnvFile(opts)
     console.log(chalk.green("Budibase successfully initialised."))
@@ -24,13 +23,13 @@ const run = async opts => {
 }
 
 const setEnvironmentVariables = async opts => {
-  if (opts.database === "local") {
+  if (opts.couchDbUrl) {
+    process.env.COUCH_DB_URL = opts.couchDbUrl
+  } else {
     const dataDir = join(opts.dir, ".data")
     await ensureDir(dataDir)
     process.env.COUCH_DB_URL =
       dataDir + (dataDir.endsWith("/") || dataDir.endsWith("\\") ? "" : "/")
-  } else {
-    process.env.COUCH_DB_URL = opts.couchDbUrl
   }
 }
 
@@ -39,25 +38,6 @@ const ensureAppDir = async opts => {
   await ensureDir(opts.dir)
 }
 
-const prompts = async opts => {
-  const questions = [
-    {
-      type: "input",
-      name: "couchDbUrl",
-      message:
-        "CouchDB Connection String (e.g. https://user:password@localhost:5984): ",
-      validate: function(value) {
-        return !!value || "Please enter connection string"
-      },
-    },
-  ]
-
-  if (opts.database === "remote" && !opts.couchDbUrl) {
-    const answers = await inquirer.prompt(questions)
-    opts.couchDbUrl = answers.couchDbUrl
-  }
-}
-
 const createClientDatabase = async opts => {
   // cannot be a top level require as it
   // will cause environment module to be loaded prematurely

From aa66598e4c535326703aad69692d5aa6aa539ccc Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 21 May 2020 14:31:23 +0100
Subject: [PATCH 02/51] auth, first version, needing tested

---
 packages/server/.vscode/launch.json           |  13 ++
 .../server/src/api/controllers/accesslevel.js | 108 ++++++++++
 packages/server/src/api/controllers/auth.js   |   2 +-
 packages/server/src/api/controllers/record.js |  30 ++-
 packages/server/src/api/controllers/user.js   |  39 +++-
 packages/server/src/api/index.js              |   8 +-
 packages/server/src/api/routes/accesslevel.js |  14 ++
 packages/server/src/api/routes/application.js |  12 +-
 packages/server/src/api/routes/client.js      |   4 +-
 packages/server/src/api/routes/component.js   |   3 +
 packages/server/src/api/routes/index.js       |   4 +-
 packages/server/src/api/routes/instance.js    |   6 +-
 packages/server/src/api/routes/model.js       |  45 ++++-
 packages/server/src/api/routes/pages.js       | 120 ++++++-----
 packages/server/src/api/routes/record.js      |  12 --
 packages/server/src/api/routes/screen.js      |  12 +-
 .../src/api/routes/tests/accesslevel.spec.js  | 184 +++++++++++++++++
 .../src/api/routes/tests/couchTestUtils.js    |  22 +-
 .../server/src/api/routes/tests/model.spec.js |   9 +-
 .../src/api/routes/tests/record.spec.js       |  23 ++-
 .../server/src/api/routes/tests/user.spec.js  |   3 +-
 packages/server/src/api/routes/user.js        |  22 +-
 packages/server/src/api/routes/view.js        |  14 +-
 .../server/src/middleware/authenticated.js    |  34 +++-
 packages/server/src/middleware/authorized.js  |  58 ++++++
 packages/server/src/utilities/accessLevels.js |  64 ++++++
 packages/server/yarn.lock                     | 190 +-----------------
 27 files changed, 746 insertions(+), 309 deletions(-)
 create mode 100644 packages/server/src/api/controllers/accesslevel.js
 create mode 100644 packages/server/src/api/routes/accesslevel.js
 delete mode 100644 packages/server/src/api/routes/record.js
 create mode 100644 packages/server/src/api/routes/tests/accesslevel.spec.js
 create mode 100644 packages/server/src/middleware/authorized.js
 create mode 100644 packages/server/src/utilities/accessLevels.js

diff --git a/packages/server/.vscode/launch.json b/packages/server/.vscode/launch.json
index 964e9297f4..4dc6b653cb 100644
--- a/packages/server/.vscode/launch.json
+++ b/packages/server/.vscode/launch.json
@@ -49,6 +49,19 @@
             "program": "${workspaceFolder}/node_modules/jest-cli/bin/jest",
         }
       },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Jest - Access Levels",
+        "program": "${workspaceFolder}/node_modules/.bin/jest",
+        "args": ["accesslevel.spec", "--runInBand"],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "neverOpen",
+        "disableOptimisticBPs": true,
+        "windows": {
+            "program": "${workspaceFolder}/node_modules/jest-cli/bin/jest",
+        }
+      },
       {
         "type": "node",
         "request": "launch",
diff --git a/packages/server/src/api/controllers/accesslevel.js b/packages/server/src/api/controllers/accesslevel.js
new file mode 100644
index 0000000000..9c9c7ff727
--- /dev/null
+++ b/packages/server/src/api/controllers/accesslevel.js
@@ -0,0 +1,108 @@
+const CouchDB = require("../../db")
+const newid = require("../../db/newid")
+const {
+  generateAdminPermissions,
+  generatePowerUserPermissions,
+  POWERUSER_LEVEL_ID,
+  ADMIN_LEVEL_ID,
+} = require("../../utilities/accessLevels")
+
+exports.fetch = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const body = await db.query("database/by_type", {
+    include_docs: true,
+    key: ["accesslevel"],
+  })
+  const customAccessLevels = body.rows.map(row => row.doc)
+
+  const staticAccessLevels = [
+    {
+      _id: ADMIN_LEVEL_ID,
+      name: "Admin",
+      permissions: await generateAdminPermissions(ctx.params.instanceId),
+    },
+    {
+      _id: POWERUSER_LEVEL_ID,
+      name: "Power User",
+      permissions: await generatePowerUserPermissions(ctx.params.instanceId),
+    },
+  ]
+
+  ctx.body = [...staticAccessLevels, ...customAccessLevels]
+}
+
+exports.find = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  ctx.body = await db.get(ctx.params.levelId)
+}
+
+exports.update = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const level = await db.get(ctx.params.levelId)
+  level.name = ctx.body.name
+  level.permissions = ctx.request.body.permissions
+  const result = await db.put(level)
+  level._rev = result.rev
+  ctx.body = level
+  ctx.message = `Level ${level.name} updated successfully.`
+}
+
+exports.patch = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const level = await db.get(ctx.params.levelId)
+  const { removedPermissions, addedPermissions, _rev } = ctx.request.body
+
+  if (!_rev) throw new Error("Must supply a _rev to update an access level")
+
+  level._rev = _rev
+
+  if (removedPermissions) {
+    level.permissions = level.permissions.filter(
+      p =>
+        !removedPermissions.some(
+          rem => rem.name === p.name && rem.itemId === p.itemId
+        )
+    )
+  }
+
+  if (addedPermissions) {
+    level.permissions = [
+      ...level.permissions.filter(
+        p =>
+          !addedPermissions.some(
+            add => add.name === p.name && add.itemId === p.itemId
+          )
+      ),
+      ...addedPermissions,
+    ]
+  }
+
+  const result = await db.put(level)
+  level._rev = result.rev
+  ctx.body = level
+  ctx.message = `Access Level ${level.name} updated successfully.`
+}
+
+exports.create = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+
+  const level = {
+    name: ctx.request.body.name,
+    _rev: ctx.request.body._rev,
+    permissions: ctx.request.body.permissions || [],
+    _id: newid(),
+    type: "accesslevel",
+  }
+
+  const result = await db.put(level)
+  level._rev = result.rev
+  ctx.body = level
+  ctx.message = `Access Level '${level.name}' created successfully.`
+}
+
+exports.destroy = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  await db.remove(ctx.params.levelId, ctx.params.rev)
+  ctx.message = `Access Level ${ctx.params.id} deleted successfully`
+  ctx.status = 200
+}
diff --git a/packages/server/src/api/controllers/auth.js b/packages/server/src/api/controllers/auth.js
index 4cfc2f438a..b9e1150648 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -37,7 +37,7 @@ exports.authenticate = async ctx => {
   if (await bcrypt.compare(password, dbUser.password)) {
     const payload = {
       userId: dbUser._id,
-      accessLevel: "",
+      accessLevelId: dbUser.accessLevelId,
       instanceId: instanceId,
     }
 
diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js
index 2cd648b6c3..7a5b045136 100644
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@@ -7,6 +7,7 @@ const ajv = new Ajv()
 exports.save = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
   const record = ctx.request.body
+  record.modelId = ctx.params.modelId
 
   if (!record._rev && !record._id) {
     record._id = newid()
@@ -43,16 +44,12 @@ exports.save = async function(ctx) {
   record.type = "record"
   const response = await db.post(record)
   record._rev = response.rev
-  // await ctx.publish(events.recordApi.save.onRecordCreated, {
-  //   record: record,
-  // })
-
   ctx.body = record
   ctx.status = 200
   ctx.message = `${model.name} created successfully`
 }
 
-exports.fetch = async function(ctx) {
+exports.fetchView = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
   const response = await db.query(`database/${ctx.params.viewName}`, {
     include_docs: true,
@@ -60,13 +57,30 @@ exports.fetch = async function(ctx) {
   ctx.body = response.rows.map(row => row.doc)
 }
 
+exports.fetchModel = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const response = await db.query(`database/all_${ctx.params.modelId}`, {
+    include_docs: true,
+  })
+  ctx.body = response.rows.map(row => row.doc)
+}
+
 exports.find = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
-  ctx.body = await db.get(ctx.params.recordId)
+  const record = await db.get(ctx.params.recordId)
+  if (record.modelId !== ctx.params.modelId) {
+    ctx.throw(400, "Supplied modelId doe not match the record's modelId")
+    return
+  }
+  ctx.body = record
 }
 
 exports.destroy = async function(ctx) {
-  const databaseId = ctx.params.instanceId
-  const db = new CouchDB(databaseId)
+  const db = new CouchDB(ctx.params.instanceId)
+  const record = await db.get(ctx.params.recordId)
+  if (record.modelId !== ctx.params.modelId) {
+    ctx.throw(400, "Supplied modelId doe not match the record's modelId")
+    return
+  }
   ctx.body = await db.remove(ctx.params.recordId, ctx.params.revId)
 }
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index 2be0132a47..f654caa4c0 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -2,8 +2,11 @@ const CouchDB = require("../../db")
 const clientDb = require("../../db/clientDb")
 const bcrypt = require("../../utilities/bcrypt")
 const env = require("../../environment")
-
 const getUserId = userName => `user_${userName}`
+const {
+  POWERUSER_LEVEL_ID,
+  ADMIN_LEVEL_ID,
+} = require("../../utilities/accessLevels")
 
 exports.fetch = async function(ctx) {
   const database = new CouchDB(ctx.params.instanceId)
@@ -18,17 +21,26 @@ exports.fetch = async function(ctx) {
 exports.create = async function(ctx) {
   const database = new CouchDB(ctx.params.instanceId)
   const appId = (await database.get("_design/database")).metadata.applicationId
-  const { username, password, name } = ctx.request.body
+  const { username, password, name, accessLevelId } = ctx.request.body
 
-  if (!username || !password) ctx.throw(400, "Username and Password Required.")
+  if (!username || !password) {
+    ctx.throw(400, "Username and Password Required.")
+  }
 
-  const response = await database.post({
+  const accessLevel = await checkAccessLevel(database, accessLevelId)
+
+  if (!accessLevel) ctx.throw(400, "Invalid Access Level")
+
+  const user = {
     _id: getUserId(username),
     username,
     password: await bcrypt.hash(password),
     name: name || username,
     type: "user",
-  })
+    accessLevelId,
+  }
+
+  const response = await database.post(user)
 
   // the clientDB needs to store a map of users against the app
   const db = new CouchDB(clientDb.name(env.CLIENT_ID))
@@ -49,6 +61,8 @@ exports.create = async function(ctx) {
   }
 }
 
+exports.update = async function(ctx) {}
+
 exports.destroy = async function(ctx) {
   const database = new CouchDB(ctx.params.instanceId)
   await database.destroy(getUserId(ctx.params.username))
@@ -65,3 +79,18 @@ exports.find = async function(ctx) {
     _rev: user._rev,
   }
 }
+
+const checkAccessLevel = async (db, accessLevelId) => {
+  if (!accessLevelId) return
+  if (
+    accessLevelId === POWERUSER_LEVEL_ID ||
+    accessLevelId === ADMIN_LEVEL_ID
+  ) {
+    return {
+      _id: accessLevelId,
+      name: accessLevelId,
+      permissions: [],
+    }
+  }
+  return await db.get(accessLevelId)
+}
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 176eaaff96..d8f3bde76b 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -7,7 +7,6 @@ const {
   authRoutes,
   pageRoutes,
   userRoutes,
-  recordRoutes,
   instanceRoutes,
   clientRoutes,
   applicationRoutes,
@@ -15,6 +14,7 @@ const {
   viewRoutes,
   staticRoutes,
   componentRoutes,
+  accesslevelRoutes,
 } = require("./routes")
 
 const router = new Router()
@@ -70,9 +70,6 @@ router.use(modelRoutes.allowedMethods())
 router.use(userRoutes.routes())
 router.use(userRoutes.allowedMethods())
 
-router.use(recordRoutes.routes())
-router.use(recordRoutes.allowedMethods())
-
 router.use(instanceRoutes.routes())
 router.use(instanceRoutes.allowedMethods())
 // end auth routes
@@ -89,6 +86,9 @@ router.use(componentRoutes.allowedMethods())
 router.use(clientRoutes.routes())
 router.use(clientRoutes.allowedMethods())
 
+router.use(accesslevelRoutes.routes())
+router.use(accesslevelRoutes.allowedMethods())
+
 router.use(staticRoutes.routes())
 router.use(staticRoutes.allowedMethods())
 
diff --git a/packages/server/src/api/routes/accesslevel.js b/packages/server/src/api/routes/accesslevel.js
new file mode 100644
index 0000000000..d34acab02c
--- /dev/null
+++ b/packages/server/src/api/routes/accesslevel.js
@@ -0,0 +1,14 @@
+const Router = require("@koa/router")
+const controller = require("../controllers/accesslevel")
+
+const router = Router()
+
+router
+  .post("/api/:instanceId/accesslevels", controller.create)
+  .put("/api/:instanceId/accesslevels", controller.update)
+  .get("/api/:instanceId/accesslevels", controller.fetch)
+  .get("/api/:instanceId/accesslevels/:levelId", controller.find)
+  .delete("/api/:instanceId/accesslevels/:levelId/:rev", controller.destroy)
+  .patch("/api/:instanceId/accesslevels/:levelId", controller.patch)
+
+module.exports = router
diff --git a/packages/server/src/api/routes/application.js b/packages/server/src/api/routes/application.js
index dddf64a710..60cc781ac6 100644
--- a/packages/server/src/api/routes/application.js
+++ b/packages/server/src/api/routes/application.js
@@ -1,11 +1,17 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/application")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .get("/api/applications", controller.fetch)
-  .get("/api/:applicationId/appPackage", controller.fetchAppPackage)
-  .post("/api/applications", controller.create)
+  .get("/api/applications", authorized(BUILDER), controller.fetch)
+  .get(
+    "/api/:applicationId/appPackage",
+    authorized(BUILDER),
+    controller.fetchAppPackage
+  )
+  .post("/api/applications", authorized(BUILDER), controller.create)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/client.js b/packages/server/src/api/routes/client.js
index ff87b82e22..16acf1b7a3 100644
--- a/packages/server/src/api/routes/client.js
+++ b/packages/server/src/api/routes/client.js
@@ -1,8 +1,10 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/client")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
-router.get("/api/client/id", controller.getClientId)
+router.get("/api/client/id", authorized(BUILDER), controller.getClientId)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/component.js b/packages/server/src/api/routes/component.js
index 5df34381fa..8fbe7ac41a 100644
--- a/packages/server/src/api/routes/component.js
+++ b/packages/server/src/api/routes/component.js
@@ -1,10 +1,13 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/component")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router.get(
   "/:appId/components/definitions",
+  authorized(BUILDER),
   controller.fetchAppComponentDefinitions
 )
 
diff --git a/packages/server/src/api/routes/index.js b/packages/server/src/api/routes/index.js
index a8f57c0e14..6a299f8351 100644
--- a/packages/server/src/api/routes/index.js
+++ b/packages/server/src/api/routes/index.js
@@ -1,7 +1,6 @@
 const authRoutes = require("./auth")
 const pageRoutes = require("./pages")
 const userRoutes = require("./user")
-const recordRoutes = require("./record")
 const instanceRoutes = require("./instance")
 const clientRoutes = require("./client")
 const applicationRoutes = require("./application")
@@ -9,12 +8,12 @@ const modelRoutes = require("./model")
 const viewRoutes = require("./view")
 const staticRoutes = require("./static")
 const componentRoutes = require("./component")
+const accesslevelRoutes = require("./accesslevel")
 
 module.exports = {
   authRoutes,
   pageRoutes,
   userRoutes,
-  recordRoutes,
   instanceRoutes,
   clientRoutes,
   applicationRoutes,
@@ -22,4 +21,5 @@ module.exports = {
   viewRoutes,
   staticRoutes,
   componentRoutes,
+  accesslevelRoutes,
 }
diff --git a/packages/server/src/api/routes/instance.js b/packages/server/src/api/routes/instance.js
index fd74a98bf1..9b7b3db511 100644
--- a/packages/server/src/api/routes/instance.js
+++ b/packages/server/src/api/routes/instance.js
@@ -1,10 +1,12 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/instance")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .post("/api/:applicationId/instances", controller.create)
-  .delete("/api/instances/:instanceId", controller.destroy)
+  .post("/api/:applicationId/instances", authorized(BUILDER), controller.create)
+  .delete("/api/instances/:instanceId", authorized(BUILDER), controller.destroy)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/model.js b/packages/server/src/api/routes/model.js
index d25d0d17cb..d9eb5cf798 100644
--- a/packages/server/src/api/routes/model.js
+++ b/packages/server/src/api/routes/model.js
@@ -1,12 +1,49 @@
 const Router = require("@koa/router")
-const controller = require("../controllers/model")
+const modelController = require("../controllers/model")
+const recordController = require("../controllers/record")
+const authorized = require("../../middleware/authorized")
+const {
+  READ_MODEL,
+  WRITE_MODEL,
+  BUILDER,
+} = require("../../utilities/accessLevels")
 
 const router = Router()
 
+// records
+
 router
-  .get("/api/:instanceId/models", controller.fetch)
-  .post("/api/:instanceId/models", controller.create)
+  .get(
+    "/api/:instanceId/:modelId/records",
+    authorized(READ_MODEL, ctx => ctx.params.modelId),
+    recordController.fetchModel
+  )
+  .get(
+    "/api/:instanceId/:modelId/records/:recordId",
+    authorized(READ_MODEL, ctx => ctx.params.modelId),
+    recordController.find
+  )
+  .post(
+    "/api/:instanceId/:modelId/records",
+    authorized(WRITE_MODEL, ctx => ctx.params.modelId),
+    recordController.save
+  )
+  .delete(
+    "/api/:instanceId/:modelId/records/:recordId/:revId",
+    authorized(WRITE_MODEL, ctx => ctx.params.modelId),
+    recordController.destroy
+  )
+
+// models
+
+router
+  .get("/api/:instanceId/models", authorized(BUILDER), modelController.fetch)
+  .post("/api/:instanceId/models", authorized(BUILDER), modelController.create)
   // .patch("/api/:instanceId/models", controller.update)
-  .delete("/api/:instanceId/models/:modelId/:revId", controller.destroy)
+  .delete(
+    "/api/:instanceId/models/:modelId/:revId",
+    authorized(BUILDER),
+    modelController.destroy
+  )
 
 module.exports = router
diff --git a/packages/server/src/api/routes/pages.js b/packages/server/src/api/routes/pages.js
index 88fd1239f4..98f0f08b92 100644
--- a/packages/server/src/api/routes/pages.js
+++ b/packages/server/src/api/routes/pages.js
@@ -7,63 +7,85 @@ const {
   renameScreen,
   deleteScreen,
 } = require("../../utilities/builder")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
-router.post("/_builder/api/:appId/pages/:pageName", async ctx => {
-  await buildPage(
-    ctx.config,
-    ctx.params.appId,
-    ctx.params.pageName,
-    ctx.request.body
-  )
-  ctx.response.status = StatusCodes.OK
-})
+router.post(
+  "/_builder/api/:appId/pages/:pageName",
+  authorized(BUILDER),
+  async ctx => {
+    await buildPage(
+      ctx.config,
+      ctx.params.appId,
+      ctx.params.pageName,
+      ctx.request.body
+    )
+    ctx.response.status = StatusCodes.OK
+  }
+)
 
-router.get("/_builder/api/:appId/pages/:pagename/screens", async ctx => {
-  ctx.body = await listScreens(
-    ctx.config,
-    ctx.params.appId,
-    ctx.params.pagename
-  )
-  ctx.response.status = StatusCodes.OK
-})
+router.get(
+  "/_builder/api/:appId/pages/:pagename/screens",
+  authorized(BUILDER),
+  async ctx => {
+    ctx.body = await listScreens(
+      ctx.config,
+      ctx.params.appId,
+      ctx.params.pagename
+    )
+    ctx.response.status = StatusCodes.OK
+  }
+)
 
-router.post("/_builder/api/:appId/pages/:pagename/screen", async ctx => {
-  ctx.body = await saveScreen(
-    ctx.config,
-    ctx.params.appId,
-    ctx.params.pagename,
-    ctx.request.body
-  )
-  ctx.response.status = StatusCodes.OK
-})
+router.post(
+  "/_builder/api/:appId/pages/:pagename/screen",
+  authorized(BUILDER),
+  async ctx => {
+    ctx.body = await saveScreen(
+      ctx.config,
+      ctx.params.appId,
+      ctx.params.pagename,
+      ctx.request.body
+    )
+    ctx.response.status = StatusCodes.OK
+  }
+)
 
-router.patch("/_builder/api/:appname/pages/:pagename/screen", async ctx => {
-  await renameScreen(
-    ctx.config,
-    ctx.params.appname,
-    ctx.params.pagename,
-    ctx.request.body.oldname,
-    ctx.request.body.newname
-  )
-  ctx.response.status = StatusCodes.OK
-})
+router.patch(
+  "/_builder/api/:appname/pages/:pagename/screen",
+  authorized(BUILDER),
+  async ctx => {
+    await renameScreen(
+      ctx.config,
+      ctx.params.appname,
+      ctx.params.pagename,
+      ctx.request.body.oldname,
+      ctx.request.body.newname
+    )
+    ctx.response.status = StatusCodes.OK
+  }
+)
 
-router.delete("/_builder/api/:appname/pages/:pagename/screen/*", async ctx => {
-  const name = ctx.request.path.replace(
-    `/_builder/api/${ctx.params.appname}/pages/${ctx.params.pagename}/screen/`,
-    ""
-  )
+router.delete(
+  "/_builder/api/:appname/pages/:pagename/screen/*",
+  authorized(BUILDER),
+  async ctx => {
+    const name = ctx.request.path.replace(
+      `/_builder/api/${ctx.params.appname}/pages/${ctx.params.pagename}/screen/`,
+      ""
+    )
 
-  await deleteScreen(
-    ctx.config,
-    ctx.params.appname,
-    ctx.params.pagename,
-    decodeURI(name)
-  )
+    await deleteScreen(
+      ctx.config,
+      ctx.params.appname,
+      ctx.params.pagename,
+      decodeURI(name)
+    )
 
-  ctx.response.status = StatusCodes.OK
-})
+    ctx.response.status = StatusCodes.OK
+  }
+)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/record.js b/packages/server/src/api/routes/record.js
deleted file mode 100644
index fb0b543dc1..0000000000
--- a/packages/server/src/api/routes/record.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const Router = require("@koa/router")
-const controller = require("../controllers/record")
-
-const router = Router()
-
-router
-  .get("/api/:instanceId/:viewName/records", controller.fetch)
-  .get("/api/:instanceId/records/:recordId", controller.find)
-  .post("/api/:instanceId/records", controller.save)
-  .delete("/api/:instanceId/records/:recordId/:revId", controller.destroy)
-
-module.exports = router
diff --git a/packages/server/src/api/routes/screen.js b/packages/server/src/api/routes/screen.js
index 3a167b6ef6..19823aab68 100644
--- a/packages/server/src/api/routes/screen.js
+++ b/packages/server/src/api/routes/screen.js
@@ -1,11 +1,17 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/screen")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .get("/api/:instanceId/screens", controller.fetch)
-  .post("/api/:instanceId/screens", controller.save)
-  .delete("/api/:instanceId/:screenId/:revId", controller.destroy)
+  .get("/api/:instanceId/screens", authorized(BUILDER), controller.fetch)
+  .post("/api/:instanceId/screens", authorized(BUILDER), controller.save)
+  .delete(
+    "/api/:instanceId/:screenId/:revId",
+    authorized(BUILDER),
+    controller.destroy
+  )
 
 module.exports = router
diff --git a/packages/server/src/api/routes/tests/accesslevel.spec.js b/packages/server/src/api/routes/tests/accesslevel.spec.js
new file mode 100644
index 0000000000..ef2d1575cd
--- /dev/null
+++ b/packages/server/src/api/routes/tests/accesslevel.spec.js
@@ -0,0 +1,184 @@
+const { 
+  createInstance, 
+  createClientDatabase,
+  createApplication,
+  createModel,
+  createView,
+  supertest,
+  defaultHeaders
+} = require("./couchTestUtils")
+const {
+  generateAdminPermissions,
+  generatePowerUserPermissions,
+  POWERUSER_LEVEL_ID,
+  ADMIN_LEVEL_ID,
+  READ_MODEL,
+  WRITE_MODEL,
+} = require("../../../utilities/accessLevels")
+
+describe("/accesslevels", () => {
+  let appId
+  let server
+  let request
+  let instanceId
+  let model
+  let view
+
+  beforeAll(async () => {
+    ({ request, server } = await supertest())
+    await createClientDatabase(request);
+    appId = (await createApplication(request))._id
+  });
+
+  afterAll(async () => {
+    server.close();
+  })
+
+  beforeEach(async () => {
+    instanceId = (await createInstance(request, appId))._id
+    model = await createModel(request, instanceId)
+    view = await createView(request, instanceId)
+  })
+
+  describe("create", () => {
+
+    it("returns a success message when level is successfully created", async () => {
+      const res = await request
+        .post(`/api/${instanceId}/accesslevels`)
+        .send({ name: "user" })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      expect(res.res.statusMessage).toEqual("Access Level 'user' created successfully.")
+      expect(res.body._id).toBeDefined()
+      expect(res.body._rev).toBeDefined()
+      expect(res.body.permissions).toEqual([])
+    })
+
+  });
+
+  describe("fetch", () => {
+
+    it("should list custom levels, plus 2 default levels", async () => {
+      const createRes = await request
+        .post(`/api/${instanceId}/accesslevels`)
+        .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL }] })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const customLevel = createRes.body
+
+      const res = await request
+        .get(`/api/${instanceId}/accesslevels`)
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      expect(res.body.length).toBe(3)
+
+      const adminLevel = res.body.find(r => r._id === ADMIN_LEVEL_ID)
+      expect(adminLevel).toBeDefined()
+      expect(adminLevel.permissions).toEqual(await generateAdminPermissions(instanceId))
+
+      const powerUserLevel = res.body.find(r => r._id === POWERUSER_LEVEL_ID)
+      expect(powerUserLevel).toBeDefined()
+      expect(powerUserLevel.permissions).toEqual(await generatePowerUserPermissions(instanceId))
+
+      const customLevelFetched = res.body.find(r => r._id === customLevel._id)
+      expect(customLevelFetched.permissions).toEqual(customLevel.permissions)
+    })
+    
+  });
+
+  describe("destroy", () => {
+    it("should delete custom access level", async () => {
+      const createRes = await request
+        .post(`/api/${instanceId}/accesslevels`)
+        .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL } ] })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const customLevel = createRes.body
+
+      await request
+        .delete(`/api/${instanceId}/accesslevels/${customLevel._id}/${customLevel._rev}`)
+        .set(defaultHeaders)
+        .expect(200)
+
+      await request
+        .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .set(defaultHeaders)
+        .expect(404)      
+    })
+  })
+
+  describe("patch", () => {
+    it("should add given permissions", async () => {
+      const createRes = await request
+        .post(`/api/${instanceId}/accesslevels`)
+        .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL }] })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const customLevel = createRes.body
+
+      await request
+        .patch(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .send({
+          _rev: customLevel._rev,
+          addedPermissions:  [ { itemId: model._id, name: WRITE_MODEL } ] 
+        })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const finalRes = await request
+        .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .set(defaultHeaders)
+        .expect(200) 
+
+      expect(finalRes.body.permissions.length).toBe(2)
+      expect(finalRes.body.permissions.some(p => p.name === WRITE_MODEL)).toBe(true)
+      expect(finalRes.body.permissions.some(p => p.name === READ_MODEL)).toBe(true)
+    })
+
+    it("should remove given permissions", async () => {
+      const createRes = await request
+        .post(`/api/${instanceId}/accesslevels`)
+        .send({ 
+          name: "user", 
+          permissions: [ 
+            { itemId: model._id, name: READ_MODEL },
+            { itemId: model._id, name: WRITE_MODEL },
+          ] 
+        })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const customLevel = createRes.body
+
+      await request
+        .patch(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .send({
+          _rev: customLevel._rev,
+          removedPermissions:  [ { itemId: model._id, name: WRITE_MODEL }] 
+        })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const finalRes = await request
+        .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .set(defaultHeaders)
+        .expect(200) 
+
+      expect(finalRes.body.permissions.length).toBe(1)
+      expect(finalRes.body.permissions.some(p => p.name === READ_MODEL)).toBe(true)
+    })
+  })
+});
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index 7018ec24b2..841d46ca46 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -2,6 +2,7 @@ const CouchDB = require("../../../db")
 const { create, destroy } = require("../../../db/clientDb")
 const supertest = require("supertest")
 const app = require("../../../app")
+const { POWERUSER_LEVEL_ID } = require("../../../utilities/accessLevels")
 
 const TEST_CLIENT_ID = "test-client-id"
 
@@ -17,7 +18,7 @@ exports.supertest = async () => {
 
 exports.defaultHeaders = {
   Accept: "application/json",
-  Authorization: "Basic test-admin-secret",
+  Cookie: ["builder:token=test-admin-secret"],
 }
 
 exports.createModel = async (request, instanceId, model) => {
@@ -37,6 +38,18 @@ exports.createModel = async (request, instanceId, model) => {
   return res.body
 }
 
+exports.createView = async (request, instanceId, view) => {
+  view = view || {
+    map: "function(doc) { emit(doc[doc.key], doc._id); } ",
+  }
+
+  const res = await request
+    .post(`/api/${instanceId}/views`)
+    .set(exports.defaultHeaders)
+    .send(view)
+  return res.body
+}
+
 exports.createClientDatabase = async () => await create(TEST_CLIENT_ID)
 
 exports.createApplication = async (request, name = "test_application") => {
@@ -70,7 +83,12 @@ exports.createUser = async (
   const res = await request
     .post(`/api/${instanceId}/users`)
     .set(exports.defaultHeaders)
-    .send({ name: "Bill", username, password })
+    .send({
+      name: "Bill",
+      username,
+      password,
+      accessLevelId: POWERUSER_LEVEL_ID,
+    })
   return res.body
 }
 
diff --git a/packages/server/src/api/routes/tests/model.spec.js b/packages/server/src/api/routes/tests/model.spec.js
index e32c94224f..3e224536ed 100644
--- a/packages/server/src/api/routes/tests/model.spec.js
+++ b/packages/server/src/api/routes/tests/model.spec.js
@@ -3,7 +3,8 @@ const {
   createModel, 
   supertest, 
   createClientDatabase, 
-  createApplication 
+  createApplication ,
+  defaultHeaders
 } = require("./couchTestUtils")
 
 describe("/models", () => {
@@ -38,7 +39,7 @@ describe("/models", () => {
             name: { type: "string" }
           }
         })
-        .set("Accept", "application/json")
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (err, res) => {
@@ -60,7 +61,7 @@ describe("/models", () => {
     it("returns all the models for that instance in the response body", done => {
       request
         .get(`/api/${instance._id}/models`)
-        .set("Accept", "application/json")
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (_, res) => {
@@ -83,7 +84,7 @@ describe("/models", () => {
     it("returns a success response when a model is deleted.", done => {
       request
         .delete(`/api/${instance._id}/models/${testModel._id}/${testModel._rev}`)
-        .set("Accept", "application/json")
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (_, res) => {
diff --git a/packages/server/src/api/routes/tests/record.spec.js b/packages/server/src/api/routes/tests/record.spec.js
index b75b245135..16af0b6031 100644
--- a/packages/server/src/api/routes/tests/record.spec.js
+++ b/packages/server/src/api/routes/tests/record.spec.js
@@ -3,7 +3,8 @@ const {
   createClientDatabase,
   createInstance, 
   createModel,
-  supertest
+  supertest,
+  defaultHeaders,
 } = require("./couchTestUtils");
 
 describe("/records", () => {
@@ -38,9 +39,9 @@ describe("/records", () => {
 
     const createRecord = async r => 
       await request
-        .post(`/api/${instance._id}/records`)
+        .post(`/api/${instance._id}/${model._id}/records`)
         .send(r || record)
-        .set("Accept", "application/json")
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -56,14 +57,14 @@ describe("/records", () => {
       const existing = rec.body
 
       const res = await request
-        .post(`/api/${instance._id}/records`)
+        .post(`/api/${instance._id}/${model._id}/records`)
         .send({
           _id: existing._id,
           _rev: existing._rev,
           modelId: model._id,
           name: "Updated Name",
         })
-        .set("Accept", "application/json")
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -76,8 +77,8 @@ describe("/records", () => {
       const existing = rec.body
 
       const res = await request
-        .get(`/api/${instance._id}/records/${existing._id}`)
-        .set("Accept", "application/json")
+        .get(`/api/${instance._id}/${model._id}/records/${existing._id}`)
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -99,8 +100,8 @@ describe("/records", () => {
       await createRecord(newRecord)
 
       const res = await request
-        .get(`/api/${instance._id}/all_${newRecord.modelId}/records`)
-        .set("Accept", "application/json")
+        .get(`/api/${instance._id}/${model._id}/records`)
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -112,8 +113,8 @@ describe("/records", () => {
     it("load should return 404 when record does not exist", async () => {
       await createRecord()
       await request
-        .get(`/api/${instance._id}/records/not-a-valid-id`)
-        .set("Accept", "application/json")
+        .get(`/api/${instance._id}/${model._id}/records/not-a-valid-id`)
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(404)
     })
diff --git a/packages/server/src/api/routes/tests/user.spec.js b/packages/server/src/api/routes/tests/user.spec.js
index bba748daff..f994798c2e 100644
--- a/packages/server/src/api/routes/tests/user.spec.js
+++ b/packages/server/src/api/routes/tests/user.spec.js
@@ -6,6 +6,7 @@ const {
   defaultHeaders,
   createUser,
 } = require("./couchTestUtils")
+const { POWERUSER_LEVEL_ID } = require("../../../utilities/accessLevels")
 
 describe("/users", () => {
   let request
@@ -51,7 +52,7 @@ describe("/users", () => {
       const res = await request
         .post(`/api/${instance._id}/users`)
         .set(defaultHeaders)
-        .send({ name: "Bill", username: "bill", password: "bills_password" })
+        .send({ name: "Bill", username: "bill", password: "bills_password", accessLevelId: POWERUSER_LEVEL_ID })
         .expect(200)
         .expect('Content-Type', /json/)
 
diff --git a/packages/server/src/api/routes/user.js b/packages/server/src/api/routes/user.js
index 61f4a096fb..20e17c7473 100644
--- a/packages/server/src/api/routes/user.js
+++ b/packages/server/src/api/routes/user.js
@@ -1,12 +1,26 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/user")
+const authorized = require("../../middleware/authorized")
+const { USER_MANAGEMENT, LIST_USERS } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .get("/api/:instanceId/users", controller.fetch)
-  .get("/api/:instanceId/users/:username", controller.find)
-  .post("/api/:instanceId/users", controller.create)
-  .delete("/api/:instanceId/users/:username", controller.destroy)
+  .get("/api/:instanceId/users", authorized(LIST_USERS), controller.fetch)
+  .get(
+    "/api/:instanceId/users/:username",
+    authorized(USER_MANAGEMENT),
+    controller.find
+  )
+  .post(
+    "/api/:instanceId/users",
+    authorized(USER_MANAGEMENT),
+    controller.create
+  )
+  .delete(
+    "/api/:instanceId/users/:username",
+    authorized(USER_MANAGEMENT),
+    controller.destroy
+  )
 
 module.exports = router
diff --git a/packages/server/src/api/routes/view.js b/packages/server/src/api/routes/view.js
index f7ce9b41b5..3bae02c4b3 100644
--- a/packages/server/src/api/routes/view.js
+++ b/packages/server/src/api/routes/view.js
@@ -1,12 +1,20 @@
 const Router = require("@koa/router")
-const controller = require("../controllers/view")
+const viewController = require("../controllers/view")
+const recordController = require("../controllers/record")
+const authorized = require("../../middleware/authorized")
+const { BUILDER, READ_VIEW } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .get("/api/:instanceId/views", controller.fetch)
+  .get(
+    "/api/:instanceId/view/:viewName",
+    authorized(READ_VIEW, ctx => ctx.params.viewName),
+    recordController.fetchView
+  )
+  .get("/api/:instanceId/views", authorized(BUILDER), viewController.fetch)
   // .patch("/api/:databaseId/views", controller.update);
   // .delete("/api/:instanceId/views/:viewId/:revId", controller.destroy);
-  .post("/api/:instanceId/views", controller.create)
+  .post("/api/:instanceId/views", authorized(BUILDER), viewController.create)
 
 module.exports = router
diff --git a/packages/server/src/middleware/authenticated.js b/packages/server/src/middleware/authenticated.js
index 1bcc5575c3..1a28e6a418 100644
--- a/packages/server/src/middleware/authenticated.js
+++ b/packages/server/src/middleware/authenticated.js
@@ -1,6 +1,11 @@
 const jwt = require("jsonwebtoken")
 const STATUS_CODES = require("../utilities/statusCodes")
 const env = require("../environment")
+const accessLevelController = require("../api/controllers/accesslevel")
+const {
+  ADMIN_LEVEL_ID,
+  POWERUSER_LEVEL_ID,
+} = require("../utilities/accessLevels")
 
 module.exports = async (ctx, next) => {
   if (ctx.path === "/_builder") {
@@ -8,8 +13,9 @@ module.exports = async (ctx, next) => {
     return
   }
 
-  if (ctx.isDev && ctx.cookies.get("builder:token") === env.ADMIN_SECRET) {
+  if (ctx.cookies.get("builder:token") === env.ADMIN_SECRET) {
     ctx.isAuthenticated = true
+    ctx.isBuilder = true
     await next()
     return
   }
@@ -23,7 +29,12 @@ module.exports = async (ctx, next) => {
   }
 
   try {
-    ctx.jwtPayload = jwt.verify(token, ctx.config.jwtSecret)
+    const jwtPayload = jwt.verify(token, ctx.config.jwtSecret)
+
+    ctx.user = {
+      ...jwtPayload,
+      accessLevel: await getAccessLevel(jwtPayload.accessLevelId),
+    }
     ctx.isAuthenticated = true
   } catch (err) {
     ctx.throw(err.status || STATUS_CODES.FORBIDDEN, err.text)
@@ -31,3 +42,22 @@ module.exports = async (ctx, next) => {
 
   await next()
 }
+
+const getAccessLevel = async accessLevelId => {
+  if (
+    accessLevelId === POWERUSER_LEVEL_ID ||
+    accessLevelId === ADMIN_LEVEL_ID
+  ) {
+    return {
+      _id: accessLevelId,
+      name: accessLevelId,
+      permissions: [],
+    }
+  }
+
+  const findAccessContext = {
+    params: { levelId: accessLevelId },
+  }
+  await accessLevelController.find(findAccessContext)
+  return findAccessContext.body
+}
diff --git a/packages/server/src/middleware/authorized.js b/packages/server/src/middleware/authorized.js
new file mode 100644
index 0000000000..15a7b25458
--- /dev/null
+++ b/packages/server/src/middleware/authorized.js
@@ -0,0 +1,58 @@
+const {
+  adminPermissions,
+  ADMIN_LEVEL_ID,
+  POWERUSER_LEVEL_ID,
+  BUILDER,
+} = require("../utilities/accessLevels")
+
+module.exports = (permName, getItemId) => async (ctx, next) => {
+  if (!ctx.isAuthenticated) {
+    ctx.throw(403, "Session not authenticated")
+  }
+
+  if (ctx.isBuilder) {
+    await next()
+    return
+  }
+
+  if (permName === BUILDER) {
+    ctx.throw(403, "Not Authorized")
+    return
+  }
+
+  if (!ctx.user) {
+    ctx.throw(403, "User not found")
+  }
+
+  const permissionId = ({ name, itemId }) => name + (itemId ? `-${itemId}` : "")
+
+  if (ctx.user.accessLevel._id === ADMIN_LEVEL_ID) {
+    await next()
+    return
+  }
+
+  const thisPermissionId = {
+    name: permName,
+    itemId: getItemId && getItemId(ctx),
+  }
+
+  // power user has everything, except the admin specific perms
+  if (
+    ctx.user.accessLevel._id === POWERUSER_LEVEL_ID &&
+    !adminPermissions.map(permissionId).includes(thisPermissionId)
+  ) {
+    await next()
+    return
+  }
+
+  if (
+    ctx.user.accessLevel.permissions
+      .map(permissionId)
+      .includes(thisPermissionId)
+  ) {
+    await next()
+    return
+  }
+
+  ctx.throw(403, "Not Authorized")
+}
diff --git a/packages/server/src/utilities/accessLevels.js b/packages/server/src/utilities/accessLevels.js
new file mode 100644
index 0000000000..25a231ed73
--- /dev/null
+++ b/packages/server/src/utilities/accessLevels.js
@@ -0,0 +1,64 @@
+const viewController = require("../api/controllers/view")
+const modelController = require("../api/controllers/model")
+
+exports.ADMIN_LEVEL_ID = "ADMIN"
+exports.POWERUSER_LEVEL_ID = "POWER_USER"
+
+exports.READ_MODEL = "read-model"
+exports.WRITE_MODEL = "write-model"
+exports.READ_VIEW = "read-view"
+exports.EXECUTE_WORKFLOW = "execute-workflow"
+exports.USER_MANAGEMENT = "user-management"
+exports.BUILDER = "builder"
+exports.LIST_USERS = "list-users"
+
+exports.adminPermissions = [
+  {
+    name: exports.USER_MANAGEMENT,
+  },
+]
+
+exports.generateAdminPermissions = async instanceId => [
+  ...exports.adminPermissions,
+  ...(await exports.generatePowerUserPermissions(instanceId)),
+]
+
+exports.generatePowerUserPermissions = async instanceId => {
+  const fetchModelsCtx = {
+    params: {
+      instanceId,
+    },
+  }
+  await modelController.fetch(fetchModelsCtx)
+  const models = fetchModelsCtx.body
+
+  const fetchViewsCtx = {
+    params: {
+      instanceId,
+    },
+  }
+  await viewController.fetch(fetchViewsCtx)
+  const views = fetchViewsCtx.body
+
+  const readModelPermissions = models.map(m => ({
+    itemId: m._id,
+    name: exports.READ_MODEL,
+  }))
+
+  const writeModelPermissions = models.map(m => ({
+    itemId: m._id,
+    name: exports.WRITE_MODEL,
+  }))
+
+  const viewPermissions = views.map(v => ({
+    itemId: v.name,
+    name: exports.READ_VIEW,
+  }))
+
+  return [
+    ...readModelPermissions,
+    ...writeModelPermissions,
+    ...viewPermissions,
+    { name: exports.LIST_USERS },
+  ]
+}
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 0959e3e991..8a64a7cb8a 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -194,20 +194,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/client@^0.0.32":
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496"
-  integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A==
-  dependencies:
-    "@nx-js/compiler-util" "^2.0.0"
-    bcryptjs "^2.4.3"
-    deep-equal "^2.0.1"
-    lodash "^4.17.15"
-    lunr "^2.3.5"
-    regexparam "^1.3.0"
-    shortid "^2.2.8"
-    svelte "^3.9.2"
-
 "@budibase/core@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa"
@@ -839,11 +825,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"
@@ -916,13 +897,6 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
-available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1638,26 +1612,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"
@@ -2011,7 +1965,7 @@ error-inject@^1.0.0:
   resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37"
   integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc=
 
-es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
   version "1.17.5"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
   integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
@@ -2028,19 +1982,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstrac
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.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"
@@ -3026,21 +2967,11 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-bigint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -3048,11 +2979,6 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3089,7 +3015,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -3164,21 +3090,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"
@@ -3215,21 +3131,11 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-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"
@@ -3246,31 +3152,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"
@@ -3296,11 +3182,6 @@ isarray@1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -4708,14 +4589,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"
@@ -5437,19 +5310,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"
@@ -5778,14 +5638,6 @@ shortid@^2.2.8:
   dependencies:
     nanoid "^2.1.0"
 
-side-channel@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
-  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    object-inspect "^1.7.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -6194,11 +6046,6 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte@^3.9.2:
-  version "3.22.3"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.22.3.tgz#6af3bdcfea44c2fadbf17a32c479f49bdf1aba4b"
-  integrity sha512-DumSy5eWPFPlMUGf3+eHyFSkt5yLqyAmMdCuXOE4qc5GtFyLxwTAGKZmgKmW2jmbpTTeFQ/fSQfDBQbl9Eo7yw==
-
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -6679,44 +6526,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 5717bda8a4ed0560e35aac2b4b724a33d6a66f24 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 26 May 2020 10:38:43 +0200
Subject: [PATCH 03/51] refactor home page to use _layout

---
 .../src/components/common/ModalDialog.svelte  |  51 ++++
 .../{_layout.svelte => _reset.svelte}         |   0
 packages/builder/src/pages/_layout.svelte     | 214 ++++++++++++++
 packages/builder/src/pages/index.svelte       | 269 +++---------------
 4 files changed, 306 insertions(+), 228 deletions(-)
 create mode 100644 packages/builder/src/components/common/ModalDialog.svelte
 rename packages/builder/src/pages/[application]/{_layout.svelte => _reset.svelte} (100%)
 create mode 100644 packages/builder/src/pages/_layout.svelte

diff --git a/packages/builder/src/components/common/ModalDialog.svelte b/packages/builder/src/components/common/ModalDialog.svelte
new file mode 100644
index 0000000000..121714cd85
--- /dev/null
+++ b/packages/builder/src/components/common/ModalDialog.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { getContext } from "svelte"
+  export let message
+  export let hasForm = false
+  export let onCancel = () => {}
+  export let onOkay = () => {}
+
+  const { close } = getContext("simple-modal")
+
+  let value
+  let onChange = () => {}
+
+  function _onCancel() {
+    onCancel()
+    close()
+  }
+
+  function _onOkay() {
+    onOkay(value)
+    close()
+  }
+
+  $: onChange(value)
+</script>
+
+<h2>{message}</h2>
+
+{#if hasForm}
+  <input type="text" bind:value on:keydown={e => e.which === 13 && _onOkay()} />
+{/if}
+
+<div class="buttons">
+  <button on:click={_onCancel}>Cancel</button>
+  <button on:click={_onOkay}>Okay</button>
+</div>
+
+<style>
+  h2 {
+    font-size: 2rem;
+    text-align: center;
+  }
+
+  input {
+    width: 100%;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
diff --git a/packages/builder/src/pages/[application]/_layout.svelte b/packages/builder/src/pages/[application]/_reset.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/_layout.svelte
rename to packages/builder/src/pages/[application]/_reset.svelte
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
new file mode 100644
index 0000000000..b807c1737b
--- /dev/null
+++ b/packages/builder/src/pages/_layout.svelte
@@ -0,0 +1,214 @@
+<script>
+  import {
+    SettingsIcon,
+    AppsIcon,
+    UpdatesIcon,
+    HostingIcon,
+    DocumentationIcon,
+    TutorialsIcon,
+    CommunityIcon,
+    ContributionIcon,
+    BugIcon,
+    EmailIcon,
+    TwitterIcon,
+  } from "components/common/Icons/"
+</script>
+
+<div class="root">
+  <div class="ui-nav">
+    <div class="home-logo">
+      <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
+    </div>
+
+    <div class="nav-section">
+      <div class="nav-section-title">Build</div>
+      <div class="nav-item-home">
+        <span class="nav-item-icon">
+          <AppsIcon />
+        </span>
+        <div class="nav-item-title">Apps</div>
+      </div>
+      <div class="nav-item">
+        <span class="nav-item-icon">
+          <SettingsIcon />
+        </span>
+        <div class="nav-item-title">Settings</div>
+      </div>
+      <a href="https://budibase.con/login" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <UpdatesIcon />
+        </span>
+        <div class="nav-item-title">Updates</div>
+      </a>
+      <a href="https://budibase.con/login" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <HostingIcon />
+        </span>
+        <div class="nav-item-title">Hosting</div>
+      </a>
+    </div>
+
+    <div class="nav-section">
+      <div class="nav-section-title">Learn</div>
+      <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <DocumentationIcon />
+        </span>
+        <div class="nav-item-title">Documentation</div>
+      </a>
+      <a
+        href="https://docs.budibase.com/tutorial/quick-start"
+        target="_blank"
+        class="nav-item">
+        <span class="nav-item-icon">
+          <TutorialsIcon />
+        </span>
+        <div class="nav-item-title">Tutorials</div>
+      </a>
+      <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <CommunityIcon />
+        </span>
+        <div class="nav-item-title">Community</div>
+      </a>
+    </div>
+
+    <div class="nav-section">
+      <div class="nav-section-title">Contact</div>
+      <a
+        href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
+        target="_blank"
+        class="nav-item">
+        <span class="nav-item-icon">
+          <ContributionIcon />
+        </span>
+        <div class="nav-item-title">Contribute to our product</div>
+      </a>
+      <a
+        href="https://github.com/Budibase/budibase/issues"
+        target="_blank"
+        class="nav-item">
+        <span class="nav-item-icon">
+          <BugIcon />
+        </span>
+        <div class="nav-item-title">Report bug</div>
+      </a>
+      <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <EmailIcon />
+        </span>
+        <div class="nav-item-title">Email</div>
+      </a>
+      <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <TwitterIcon />
+        </span>
+        <div class="nav-item-title">Twitter</div>
+      </a>
+    </div>
+  </div>
+
+  <div class="main">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .root {
+    display: grid;
+    grid-template-columns: 275px 1fr;
+    height: 100%;
+    width: 100%;
+    background: var(--grey-light);
+  }
+
+  @media only screen and (min-width: 1800px) {
+    .root {
+      display: grid;
+      grid-template-columns: 300px 1fr;
+      height: 100%;
+      width: 100%;
+      background: var(--grey-light);
+    }
+  }
+
+  .main {
+    grid-column: 2;
+  }
+
+  .ui-nav {
+    grid-column: 1;
+    background-color: var(--white);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--grey-dark);
+  }
+
+  .home-logo {
+    cursor: pointer;
+    height: 40px;
+    margin-bottom: 20px;
+  }
+
+  .home-logo img {
+    height: 40px;
+  }
+
+  .nav-section {
+    margin: 20px 0px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-section-title {
+    font-size: 20px;
+    color: var(--ink);
+    font-weight: 700;
+    margin-bottom: 12px;
+  }
+
+  .nav-item {
+    cursor: pointer;
+    margin: 0px 0px 4px 0px;
+    padding: 0px 0px 0px 12px;
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .nav-item-home {
+    cursor: pointer;
+    margin: 0px 0px 4px 0px;
+    padding: 0px 0px 0px 12px;
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: var(--blue-light);
+  }
+
+  .nav-item:hover {
+    background-color: var(--grey-light);
+    border-radius: 3px;
+  }
+
+  .nav-item::selection {
+    background-color: var(--blue-light);
+    border-radius: 3px;
+  }
+
+  .nav-item-title {
+    font-size: 14px;
+    color: var(--ink);
+    font-weight: 500;
+    margin-left: 12px;
+  }
+
+  .nav-item-icon {
+    color: var(--ink-light);
+  }
+</style>
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index cf9aa87bb3..6c77059739 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -1,22 +1,11 @@
 <script>
+  import { getContext } from "svelte"
   import { store } from "builderStore"
   import AppList from "components/start/AppList.svelte"
   import { onMount } from "svelte"
   import ActionButton from "components/common/ActionButton.svelte"
   import IconButton from "components/common/IconButton.svelte"
-  import {
-    SettingsIcon,
-    AppsIcon,
-    UpdatesIcon,
-    HostingIcon,
-    DocumentationIcon,
-    TutorialsIcon,
-    CommunityIcon,
-    ContributionIcon,
-    BugIcon,
-    EmailIcon,
-    TwitterIcon,
-  } from "components/common/Icons/"
+
   import Spinner from "components/common/Spinner.svelte"
 
   let promise = getApps()
@@ -31,229 +20,53 @@
       throw new Error(json)
     }
   }
+
+  // Handle create app modal
+  const { open } = getContext("simple-modal")
+  const showCreateAppModal = () => {
+    open(
+      Dialog,
+      {
+        message: "What is your name?",
+        hasForm: true,
+        onCancel,
+        onOkay,
+      },
+      {
+        closeButton: false,
+        closeOnEsc: false,
+        closeOnOuterClick: false,
+      }
+    )
+  }
 </script>
 
-<div class="root">
-  <div class="ui-nav">
-    <div class="home-logo">
-      <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Build</div>
-      <div class="nav-item-home">
-        <span class="nav-item-icon">
-          <AppsIcon />
-        </span>
-        <div class="nav-item-title">Apps</div>
-      </div>
-      <div class="nav-item">
-        <span class="nav-item-icon">
-          <SettingsIcon />
-        </span>
-        <div class="nav-item-title">Settings</div>
-      </div>
-      <a href="https://budibase.con/login" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <UpdatesIcon />
-        </span>
-        <div class="nav-item-title">Updates</div>
-      </a>
-      <a href="https://budibase.con/login" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <HostingIcon />
-        </span>
-        <div class="nav-item-title">Hosting</div>
-      </a>
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Learn</div>
-      <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <DocumentationIcon />
-        </span>
-        <div class="nav-item-title">Documentation</div>
-      </a>
-      <a
-        href="https://docs.budibase.com/tutorial/quick-start"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <TutorialsIcon />
-        </span>
-        <div class="nav-item-title">Tutorials</div>
-      </a>
-      <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <CommunityIcon />
-        </span>
-        <div class="nav-item-title">Community</div>
-      </a>
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Contact</div>
-      <a
-        href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <ContributionIcon />
-        </span>
-        <div class="nav-item-title">Contribute to our product</div>
-      </a>
-      <a
-        href="https://github.com/Budibase/budibase/issues"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <BugIcon />
-        </span>
-        <div class="nav-item-title">Report bug</div>
-      </a>
-      <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <EmailIcon />
-        </span>
-        <div class="nav-item-title">Email</div>
-      </a>
-      <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <TwitterIcon />
-        </span>
-        <div class="nav-item-title">Twitter</div>
-      </a>
+<div class="welcome">Welcome to Budibase</div>
+<div class="banner">
+  <div class="banner-content">
+    <div class="banner-header">
+      Every accomplishment starts with a decision to try.
     </div>
+    <button class="banner-button" type="button">
+      <i class="ri-add-circle-fill" />
+      Create New Web App
+    </button>
   </div>
-
-  <div class="main">
-    <div class="welcome">Welcome to Budibase</div>
-    <div class="banner">
-      <div class="banner-content">
-        <div class="banner-header">
-          Every accomplishment starts with a decision to try.
-        </div>
-        <button class="banner-button" type="button">
-          <i class="ri-add-circle-fill" />
-          Create New Web App
-        </button>
-      </div>
-      <div class="banner-image">
-        <img src="/_builder/assets/banner-image.png" alt="Bannerimage" />
-      </div>
-    </div>
-    {#await promise}
-      <div class="spinner-container">
-        <Spinner />
-      </div>
-    {:then result}
-      <AppList apps={result} />
-    {:catch err}
-      <h1 style="color:red">{err}</h1>
-    {/await}
+  <div class="banner-image">
+    <img src="/_builder/assets/banner-image.png" alt="Bannerimage" />
   </div>
 </div>
+{#await promise}
+  <div class="spinner-container">
+    <Spinner />
+  </div>
+{:then result}
+  <AppList apps={result} />
+{:catch err}
+  <h1 style="color:red">{err}</h1>
+{/await}
 
 <style>
-  .root {
-    display: grid;
-    grid-template-columns: 275px 1fr;
-    height: 100%;
-    width: 100%;
-    background: var(--grey-light);
-  }
-
-  @media only screen and (min-width: 1800px) {
-    .root {
-      display: grid;
-      grid-template-columns: 300px 1fr;
-      height: 100%;
-      width: 100%;
-      background: var(--grey-light);
-    }
-  }
-
-  .main {
-    grid-column: 2;
-  }
-
-  .ui-nav {
-    grid-column: 1;
-    background-color: var(--white);
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    border-right: 1px solid var(--grey-dark);
-  }
-
-  .home-logo {
-    cursor: pointer;
-    height: 40px;
-    margin-bottom: 20px;
-  }
-
-  .home-logo img {
-    height: 40px;
-  }
-
-  .nav-section {
-    margin: 20px 0px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .nav-section-title {
-    font-size: 20px;
-    color: var(--ink);
-    font-weight: 700;
-    margin-bottom: 12px;
-  }
-
-  .nav-item {
-    cursor: pointer;
-    margin: 0px 0px 4px 0px;
-    padding: 0px 0px 0px 12px;
-    height: 40px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-  }
-
-  .nav-item-home {
-    cursor: pointer;
-    margin: 0px 0px 4px 0px;
-    padding: 0px 0px 0px 12px;
-    height: 40px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    background-color: var(--blue-light);
-  }
-
-  .nav-item:hover {
-    background-color: var(--grey-light);
-    border-radius: 3px;
-  }
-
-  .nav-item::selection {
-    background-color: var(--blue-light);
-    border-radius: 3px;
-  }
-
-  .nav-item-title {
-    font-size: 14px;
-    color: var(--ink);
-    font-weight: 500;
-    margin-left: 12px;
-  }
-
-  .nav-item-icon {
-    color: var(--ink-light);
-  }
-
   .welcome {
     margin: 60px 80px 0px 80px;
     font-size: 42px;

From 2a151821f9c75afeb9afeaaab31e6526c6c265a0 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 26 May 2020 16:25:37 +0200
Subject: [PATCH 04/51] 90% finished modal

---
 packages/builder/package.json                 |   3 +-
 .../src/components/common/Icons/Close.svelte  |   1 +
 .../src/components/common/Icons/Info.svelte   |   1 +
 .../src/components/common/Icons/index.js      |   2 +
 .../src/components/common/ModalDialog.svelte  |  51 --------
 .../src/components/start/AppList.svelte       |   2 +-
 .../components/start/CreateAppModal.svelte    | 118 ++++++++++++++++++
 packages/builder/src/global.css               |   5 +
 packages/builder/src/pages/_layout.svelte     |   2 +-
 packages/builder/src/pages/index.svelte       |  16 ++-
 10 files changed, 145 insertions(+), 56 deletions(-)
 create mode 100644 packages/builder/src/components/common/Icons/Close.svelte
 create mode 100644 packages/builder/src/components/common/Icons/Info.svelte
 delete mode 100644 packages/builder/src/components/common/ModalDialog.svelte
 create mode 100644 packages/builder/src/components/start/CreateAppModal.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index cb91f2ce42..3e76ac87d8 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -38,6 +38,7 @@
     ]
   },
   "dependencies": {
+    "@budibase/bbui": "^0.3.1",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
@@ -82,4 +83,4 @@
     "svelte": "^3.0.0"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
\ No newline at end of file
+}
diff --git a/packages/builder/src/components/common/Icons/Close.svelte b/packages/builder/src/components/common/Icons/Close.svelte
new file mode 100644
index 0000000000..e39564d9ad
--- /dev/null
+++ b/packages/builder/src/components/common/Icons/Close.svelte
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
\ No newline at end of file
diff --git a/packages/builder/src/components/common/Icons/Info.svelte b/packages/builder/src/components/common/Icons/Info.svelte
new file mode 100644
index 0000000000..162a9b3887
--- /dev/null
+++ b/packages/builder/src/components/common/Icons/Info.svelte
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/></svg>
\ No newline at end of file
diff --git a/packages/builder/src/components/common/Icons/index.js b/packages/builder/src/components/common/Icons/index.js
index c7e4da29da..69b78421da 100644
--- a/packages/builder/src/components/common/Icons/index.js
+++ b/packages/builder/src/components/common/Icons/index.js
@@ -29,3 +29,5 @@ export { default as ContributionIcon } from "./Contribution.svelte"
 export { default as BugIcon } from "./Bug.svelte"
 export { default as EmailIcon } from "./Email.svelte"
 export { default as TwitterIcon } from "./Twitter.svelte"
+export { default as InfoIcon } from "./Info.svelte"
+export { default as CloseIcon } from "./Close.svelte"
diff --git a/packages/builder/src/components/common/ModalDialog.svelte b/packages/builder/src/components/common/ModalDialog.svelte
deleted file mode 100644
index 121714cd85..0000000000
--- a/packages/builder/src/components/common/ModalDialog.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  export let message
-  export let hasForm = false
-  export let onCancel = () => {}
-  export let onOkay = () => {}
-
-  const { close } = getContext("simple-modal")
-
-  let value
-  let onChange = () => {}
-
-  function _onCancel() {
-    onCancel()
-    close()
-  }
-
-  function _onOkay() {
-    onOkay(value)
-    close()
-  }
-
-  $: onChange(value)
-</script>
-
-<h2>{message}</h2>
-
-{#if hasForm}
-  <input type="text" bind:value on:keydown={e => e.which === 13 && _onOkay()} />
-{/if}
-
-<div class="buttons">
-  <button on:click={_onCancel}>Cancel</button>
-  <button on:click={_onOkay}>Okay</button>
-</div>
-
-<style>
-  h2 {
-    font-size: 2rem;
-    text-align: center;
-  }
-
-  input {
-    width: 100%;
-  }
-
-  .buttons {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index 22ba16c45d..e53b1f93bf 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -56,7 +56,7 @@
     max-width: 400px;
     max-height: 150px;
     border-radius: 5px;
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-medium);
   }
 
   .app-button:hover {
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
new file mode 100644
index 0000000000..07f53cc1b3
--- /dev/null
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -0,0 +1,118 @@
+<script>
+  import Button from "components/common/Button.svelte"
+  import { Input, TextArea } from "@budibase/bbui"
+  import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
+  import { getContext } from "svelte"
+  export let onCancel = () => {}
+  export let onOkay = () => {}
+
+  const { close } = getContext("simple-modal")
+
+  let value
+  let onChange = () => {}
+
+  function _onCancel() {
+    onCancel()
+    close()
+  }
+
+  function _onOkay() {
+    onOkay(value)
+    close()
+  }
+
+  $: onChange(value)
+</script>
+
+<div class="container">
+  <div class="body">
+    <div class="heading">
+      <span class="icon"><AppsIcon /></span>
+      <h3>Create new web app</h3>
+    </div>
+    <Input name="name" label="Name" placeholder="Enter application name" />
+    <TextArea
+      name="description"
+      label="Description"
+      placeholder="Describe your application" />
+  </div>
+  <div class="footer">
+    <a href="./#" class="info"><InfoIcon />How to get started</a>
+    <Button color="secondary" on:click={_onCancel}>
+      <span class="button-text">Cancel</span>
+    </Button>
+    <Button color="primary" on:click={_onOkay}>
+      <span class="button-text">Create</span>
+    </Button>
+  </div>
+  <div class="close-button" on:click={_onCancel}><CloseIcon /></div>
+</div>
+
+<style>
+
+.container {
+  position: relative;
+}
+
+  .close-button {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+  .close-button :global(svg) {
+    width: 24px;
+    height: 24px;
+  }
+  .heading {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  h3 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .icon {
+    display: grid;
+    border-radius: 3px;
+    align-content: center;
+    justify-content: center;
+    margin-right: 12px;
+    height: 20px;
+    width: 20px;
+    padding: 10px;
+    background-color: var(--blue-light);
+  }
+  .info {
+    color: var(--primary100);
+    text-decoration-color: var(--primary100);
+  }
+  .info :global(svg) {
+    fill: var(--primary100);
+    margin-right: 8px;
+    width: 24px;
+    height: 24px;
+  }
+  .body {
+    padding: 40px 40px 80px 40px;
+    display: grid;
+    grid-gap: 20px;
+  }
+  .footer {
+    display: grid;
+    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-light);
+  }
+  .button-text {
+    font-size: 18px;
+    line-height: 1.17;
+    letter-spacing: normal;
+    color: var(--white);
+  }
+</style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 3ad5851157..dea20e4d26 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -13,6 +13,7 @@
     
     --grey: #F2F2F2;
     --grey-light: #FBFBFB;
+    --grey-medium: #e8e8ef;
     --grey-dark: #E6E6E6;
 
     --primary100: #0055ff;
@@ -125,6 +126,10 @@ h5 {
     color: var(--darkslate);
 }
 
+textarea {
+    font-family: var(--fontnormal);
+}
+
 .hoverable:hover {
     cursor: pointer;
 }
\ No newline at end of file
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index b807c1737b..98bae8aa7d 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -142,7 +142,7 @@
     padding: 20px;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--grey-dark);
+    border-right: 1px solid var(--grey-medium);
   }
 
   .home-logo {
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 6c77059739..8ef61f68cd 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -7,6 +7,7 @@
   import IconButton from "components/common/IconButton.svelte"
 
   import Spinner from "components/common/Spinner.svelte"
+  import CreateAppModal from "components/start/CreateAppModal.svelte"
 
   let promise = getApps()
 
@@ -23,9 +24,19 @@
 
   // Handle create app modal
   const { open } = getContext("simple-modal")
+  const onCancel = text => {
+    name = ""
+    status = -1
+  }
+
+  const onOkay = text => {
+    name = text
+    status = 1
+  }
+
   const showCreateAppModal = () => {
     open(
-      Dialog,
+      CreateAppModal,
       {
         message: "What is your name?",
         hasForm: true,
@@ -36,6 +47,7 @@
         closeButton: false,
         closeOnEsc: false,
         closeOnOuterClick: false,
+        styleContent: { padding: 0 },
       }
     )
   }
@@ -47,7 +59,7 @@
     <div class="banner-header">
       Every accomplishment starts with a decision to try.
     </div>
-    <button class="banner-button" type="button">
+    <button class="banner-button" type="button" on:click={showCreateAppModal}>
       <i class="ri-add-circle-fill" />
       Create New Web App
     </button>

From 1127e1ef0fd8ec3db7c9937fc18ea43078566f2f Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 26 May 2020 16:29:16 +0100
Subject: [PATCH 05/51] server - create app endpoint creates files

---
 .../server/src/api/controllers/application.js | 71 ++++++++++++++++++-
 .../utilities/appDirectoryTemplate/.gitignore |  1 +
 .../appDirectoryTemplate/package.json         | 11 +++
 .../appDirectoryTemplate/pages/main/page.json | 19 +++++
 .../pages/main/screens/.gitkeep               |  0
 .../pages/unauthenticated/page.json           | 19 +++++
 .../pages/unauthenticated/screens/.gitkeep    |  0
 .../utilities/appDirectoryTemplate/plugins.js |  1 +
 8 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/.gitignore
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/package.json
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/.gitkeep
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/plugins.js

diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index c4b49d1f74..c9c072fc2b 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -3,6 +3,10 @@ const ClientDb = require("../../db/clientDb")
 const { getPackageForBuilder } = require("../../utilities/builder")
 const newid = require("../../db/newid")
 const env = require("../../environment")
+const instanceController = require("./instance")
+const { resolve, join } = require("path")
+const { copy, readJSON, writeJSON, exists } = require("fs-extra")
+const { exec } = require("child_process")
 
 exports.fetch = async function(ctx) {
   const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
@@ -32,12 +36,77 @@ exports.create = async function(ctx) {
       "@budibase/standard-components",
       "@budibase/materialdesign-components",
     ],
-    ...ctx.request.body,
+    name: ctx.request.body.name,
+    description: ctx.request.body.description,
   }
 
   const { rev } = await db.post(newApplication)
   newApplication._rev = rev
 
+  const createInstCtx = {
+    params: {
+      clientId: env.CLIENT_ID,
+      applicationId: newApplication._id,
+    },
+    request: {
+      body: { name: `dev-${env.CLIENT_ID}` },
+    },
+  }
+  await instanceController.create(createInstCtx)
+
+  if (env.NODE_ENV === "production") {
+    const newAppFolder = await createEmptyAppPackage(ctx, newApplication)
+    await runNpmInstall(newAppFolder)
+  }
+
   ctx.body = newApplication
   ctx.message = `Application ${ctx.request.body.name} created successfully`
 }
+
+const createEmptyAppPackage = async (ctx, app) => {
+  const templateFolder = resolve(
+    __dirname,
+    "..",
+    "..",
+    "utilities",
+    "appDirectoryTemplate"
+  )
+
+  const appsFolder = env.BUDIBASE_DIR
+  const newAppFolder = resolve(appsFolder, app._id)
+
+  if (await exists(newAppFolder)) {
+    ctx.throw(400, "App folder already exists for this application")
+    return
+  }
+
+  await copy(templateFolder, newAppFolder)
+
+  const packageJsonPath = join(appsFolder, app._id, "package.json")
+  const packageJson = await readJSON(packageJsonPath)
+
+  packageJson.name = npmFriendlyAppName(app.name)
+
+  await writeJSON(packageJsonPath, packageJson)
+
+  return newAppFolder
+}
+
+const runNpmInstall = async newAppFolder => {
+  return new Promise((resolve, reject) => {
+    const cmd = `cd ${newAppFolder} && npm install`
+    exec(cmd, (error, stdout, stderr) => {
+      if (error) {
+        reject(error)
+      }
+      resolve(stdout ? stdout : stderr)
+    })
+  })
+}
+
+const npmFriendlyAppName = name =>
+  name
+    .replace(/_/g, "")
+    .replace(/./g, "")
+    .replace(/ /g, "")
+    .toLowerCase()
diff --git a/packages/server/src/utilities/appDirectoryTemplate/.gitignore b/packages/server/src/utilities/appDirectoryTemplate/.gitignore
new file mode 100644
index 0000000000..77738287f0
--- /dev/null
+++ b/packages/server/src/utilities/appDirectoryTemplate/.gitignore
@@ -0,0 +1 @@
+dist/
\ No newline at end of file
diff --git a/packages/server/src/utilities/appDirectoryTemplate/package.json b/packages/server/src/utilities/appDirectoryTemplate/package.json
new file mode 100644
index 0000000000..f49e35d23f
--- /dev/null
+++ b/packages/server/src/utilities/appDirectoryTemplate/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "name",
+  "version": "1.0.0",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@budibase/standard-components": "0.x",
+    "@budibase/materialdesign-components": "0.x"
+  }
+}
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
new file mode 100644
index 0000000000..89a23a78e5
--- /dev/null
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@@ -0,0 +1,19 @@
+{
+	"title": "Test App",
+	"favicon": "./_shared/favicon.png",
+	"stylesheets": [],
+	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
+	"props" : {
+		"_component": "@budibase/standard-components/container",
+		"_children": [],
+		"_id": 0,
+		"type": "div",
+		"_styles": {
+			"layout": {},
+			"position": {}
+		},
+		"_code": ""
+	},
+	"_css": "",
+	"uiFunctions": ""
+}
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/.gitkeep b/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
new file mode 100644
index 0000000000..14d0301c24
--- /dev/null
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
@@ -0,0 +1,19 @@
+{
+	"title": "Test App",
+	"favicon": "./_shared/favicon.png",
+	"stylesheets": [],
+	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
+	"props" : {
+		"_component": "@budibase/standard-components/container",
+		"_children": [],
+		"_id": 1,
+		"type": "div",
+		"_styles": {
+			"layout": {},
+			"position": {}
+		},
+		"_code": ""
+	},
+	"_css": "",
+	"uiFunctions": ""
+}
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/server/src/utilities/appDirectoryTemplate/plugins.js b/packages/server/src/utilities/appDirectoryTemplate/plugins.js
new file mode 100644
index 0000000000..44368bf6ec
--- /dev/null
+++ b/packages/server/src/utilities/appDirectoryTemplate/plugins.js
@@ -0,0 +1 @@
+module.exports = () => ({})

From 1ff512a21893f551298f6a0d3fd509987ac54944 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 26 May 2020 17:37:11 +0200
Subject: [PATCH 06/51] wip: adds gap to apps

---
 packages/builder/package.json                 |  2 +-
 .../src/components/start/AppCard.svelte       | 70 ++++++++++++++++
 .../src/components/start/AppList.svelte       | 80 +++----------------
 .../components/start/CreateAppModal.svelte    | 19 ++---
 packages/builder/src/pages/index.svelte       |  1 +
 5 files changed, 89 insertions(+), 83 deletions(-)
 create mode 100644 packages/builder/src/components/start/AppCard.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 3e76ac87d8..76edce7e19 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -38,7 +38,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^0.3.1",
+    "@budibase/bbui": "^0.3.5",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
new file mode 100644
index 0000000000..6ba02d4f9b
--- /dev/null
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -0,0 +1,70 @@
+<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;
+</script>
+
+<div class="apps-card">
+  <h3 class="app-title">{name}</h3>
+  <p class="app-desc">
+    {description}
+  </p>
+  <div class="card-footer">
+    <div class="modified-date">Last Edited - 25th May 2020</div>
+    <a href={`/_builder/${_id}`} class="app-button">
+      Open Web App
+    </a>
+  </div>
+</div>
+          
+<style>
+  .apps-card {
+    background-color: var(--white);
+    padding: 20px;
+    max-width: 400px;
+    max-height: 150px;
+    border-radius: 5px;
+    border: 1px solid var(--grey-medium);
+  }
+
+  .app-button:hover {
+    background-color: var(--grey-light);
+    text-decoration: none;
+  }
+          
+                .app-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--ink);
+    text-transform: capitalize;
+  }
+
+  .app-desc {
+    color: var(--ink-light);
+  }
+
+  .card-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+
+  .modified-date {
+    font-size: 14px;
+    color: var(--ink-light);
+  }
+
+  .app-button {
+    background-color: var(--white);
+    color: var(--ink);
+    padding: 12px 20px;
+    border-radius: 5px;
+    border: 1px var(--grey) solid;
+    font-size: 14px;
+    font-weight: 400;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-sizing: border-box;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index e53b1f93bf..61ab0244a3 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Button from "components/common/Button.svelte"
+  import AppCard from "./AppCard.svelte"
   export let apps
 
   function myFunction() {
@@ -13,27 +13,22 @@
     <div>
       <div>
         <div class="app-section-title">Your Web Apps</div>
-        {#each apps as app}
-          <div class="apps-card">
-            <h3 class="app-title">{app.name}</h3>
-            <p class="app-desc">
-              A minimalist CRM which removes the noise and allows you to focus
-              on your business.
-            </p>
-            <div class="card-footer">
-              <div class="modified-date">Last Edited - 25th May 2020</div>
-              <a href={`/_builder/${app._id}`} class="app-button">
-                Open Web App
-              </a>
-            </div>
+          <div class="apps">
+            {#each apps as app}
+              <AppCard {...app} />
+            {/each}
           </div>
-        {/each}
       </div>
     </div>
   </div>
 </div>
 
 <style>
+  .apps {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400, 1fr));
+    gap: 85px;
+  }
   .root {
     margin: 40px 80px;
   }
@@ -44,59 +39,4 @@
     font-weight: 700;
     margin-bottom: 20px;
   }
-
-  .apps {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 40px;
-  }
-  .apps-card {
-    background-color: var(--white);
-    padding: 20px;
-    max-width: 400px;
-    max-height: 150px;
-    border-radius: 5px;
-    border: 1px solid var(--grey-medium);
-  }
-
-  .app-button:hover {
-    background-color: var(--grey-light);
-    text-decoration: none;
-  }
-
-  .app-title {
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--ink);
-    text-transform: capitalize;
-  }
-
-  .app-desc {
-    color: var(--ink-light);
-  }
-
-  .card-footer {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: space-between;
-  }
-
-  .modified-date {
-    font-size: 14px;
-    color: var(--ink-light);
-  }
-
-  .app-button {
-    background-color: var(--white);
-    color: var(--ink);
-    padding: 12px 20px;
-    border-radius: 5px;
-    border: 1px var(--grey) solid;
-    font-size: 14px;
-    font-weight: 400;
-    cursor: pointer;
-    transition: all 0.2s;
-    box-sizing: border-box;
-  }
 </style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 07f53cc1b3..66bb2ac941 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,6 +1,5 @@
 <script>
-  import Button from "components/common/Button.svelte"
-  import { Input, TextArea } from "@budibase/bbui"
+  import { Input, TextArea, Button } from "@budibase/bbui"
   import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
   import { getContext } from "svelte"
   export let onCancel = () => {}
@@ -38,11 +37,11 @@
   </div>
   <div class="footer">
     <a href="./#" class="info"><InfoIcon />How to get started</a>
-    <Button color="secondary" on:click={_onCancel}>
-      <span class="button-text">Cancel</span>
+    <Button outline thin on:click={_onCancel}>
+      Cancel
     </Button>
-    <Button color="primary" on:click={_onOkay}>
-      <span class="button-text">Create</span>
+    <Button primary thin on:click={_onOkay}>
+      Save
     </Button>
   </div>
   <div class="close-button" on:click={_onCancel}><CloseIcon /></div>
@@ -68,6 +67,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-bottom: 20px;
   }
   h3 {
     margin: 0;
@@ -102,6 +102,7 @@
   }
   .footer {
     display: grid;
+    grid-gap: 20px;
     align-items: center;
     grid-template-columns: 1fr auto auto;
     padding: 30px 40px;
@@ -109,10 +110,4 @@
     border-bottom-right-radius: 50px;
     background-color: var(--grey-light);
   }
-  .button-text {
-    font-size: 18px;
-    line-height: 1.17;
-    letter-spacing: normal;
-    color: var(--white);
-  }
 </style>
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 8ef61f68cd..1e6b46355e 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -48,6 +48,7 @@
         closeOnEsc: false,
         closeOnOuterClick: false,
         styleContent: { padding: 0 },
+        closeOnOuterClick: true
       }
     )
   }

From b2d2c25bd1765f419c25f908390c19086a81d321 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 11:44:15 +0200
Subject: [PATCH 07/51] add fetch

---
 .../src/components/start/AppCard.svelte       |  6 ++--
 .../src/components/start/AppList.svelte       |  5 ++--
 .../components/start/CreateAppModal.svelte    | 30 +++++++++++++++----
 .../src/pages/[application]/_reset.svelte     |  1 +
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 6ba02d4f9b..a54012ac0a 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -2,6 +2,8 @@
   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;
+              
+  
 </script>
 
 <div class="apps-card">
@@ -31,8 +33,8 @@
     background-color: var(--grey-light);
     text-decoration: none;
   }
-          
-                .app-title {
+  
+  .app-title {
     font-size: 18px;
     font-weight: 700;
     color: var(--ink);
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index 61ab0244a3..e3b1f572e1 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -26,8 +26,9 @@
 <style>
   .apps {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400, 1fr));
-    gap: 85px;
+    grid-template-columns: repeat(auto-fill, 400px);
+    grid-gap: 40px 85px;
+    justify-content: start;
   }
   .root {
     margin: 40px 80px;
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 66bb2ac941..f3faee047b 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -6,6 +6,27 @@
   export let onOkay = () => {}
 
   const { close } = getContext("simple-modal")
+  
+  let name = ""
+  let description = ""
+  
+  const createNewApp = async () => {
+    const data = { name, description}    
+    
+    try {
+      const response = await fetch('/api/applications', {
+        method: 'POST', // *GET, POST, PUT, DELETE, etc.
+        credentials: 'same-origin', // include, *same-origin, omit
+        headers: {
+          'Content-Type': 'application/json'
+          // 'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: JSON.stringify(data) // body data type must match "Content-Type" header
+      });
+    } catch (error) {
+      
+    }
+  }
 
   let value
   let onChange = () => {}
@@ -15,12 +36,10 @@
     close()
   }
 
-  function _onOkay() {
-    onOkay(value)
+  async function _onOkay() {
+    await createNewApp()
     close()
   }
-
-  $: onChange(value)
 </script>
 
 <div class="container">
@@ -29,8 +48,9 @@
       <span class="icon"><AppsIcon /></span>
       <h3>Create new web app</h3>
     </div>
-    <Input name="name" label="Name" placeholder="Enter application name" />
+    <Input 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" />
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 5de5e3379b..e21518f9f0 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -20,6 +20,7 @@
       await store.setPackage(pkg)
       return pkg
     } else {
+      console.log(pkg)
       throw new Error(pkg)
     }
   }

From af6d1da89fded91fd10550491e859f39ce37474d Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 27 May 2020 10:44:56 +0100
Subject: [PATCH 08/51] forcing svelte version - routify fix

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

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 76edce7e19..81e240d148 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -80,7 +80,7 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-url": "^2.2.2",
-    "svelte": "^3.0.0"
+    "svelte": "3.23.x"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
 }

From 075b264d21d89f9e436220540445224b63347dd1 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 27 May 2020 10:54:34 +0100
Subject: [PATCH 09/51] bugfix: create app not creating dirs

---
 packages/server/src/api/controllers/application.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index c9c072fc2b..63422c468a 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -54,7 +54,7 @@ exports.create = async function(ctx) {
   }
   await instanceController.create(createInstCtx)
 
-  if (env.NODE_ENV === "production") {
+  if (ctx.isDev) {
     const newAppFolder = await createEmptyAppPackage(ctx, newApplication)
     await runNpmInstall(newAppFolder)
   }

From 538aea1b04505958f4bc26e90f86137992ac9612 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 11:11:32 +0100
Subject: [PATCH 10/51] Component items ui updated

---
 .../ComponentSelectionList.svelte             | 27 ++-----------
 .../userInterface/ItemTab/Item.svelte         | 39 +++++++------------
 .../userInterface/temporaryPanelStructure.js  |  2 +-
 .../src/pages/[application]/_layout.svelte    |  2 +-
 4 files changed, 18 insertions(+), 52 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 3ffab198e9..6fc4193017 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -52,32 +52,11 @@
 </div>
 
 <style>
-  .tabs {
-    display: flex;
-    justify-content: center;
-    list-style: none;
-    margin: 0 auto;
-    padding: 0 30px;
-    border-bottom: 1px solid #d8d8d8;
-
-    font-size: 14px;
-    font-weight: 500;
-    letter-spacing: 0.14px;
-  }
-
-  li {
-    color: #808192;
-    margin: 0 5px;
-    padding: 0 8px;
-    cursor: pointer;
-  }
 
   .panel {
-    padding: 20px;
+    padding: 20px 0px;
+    display: flex;
+    flex-wrap: wrap;
   }
 
-  .active {
-    border-bottom: solid 3px #0055ff;
-    color: #393c44;
-  }
 </style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index 82eec75483..3fc62d7a92 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -8,59 +8,46 @@
   </div>
   <div class="item-text">
     <div class="item-name">{item.name}</div>
-    <div class="item-description">
-      <p>{item.description}</p>
-    </div>
   </div>
 </div>
 
 <style>
+
   .item-item {
     display: flex;
-    flex-direction: row;
-    padding: 10px 0px 8px 10px;
-    align-items: center;
+    flex-direction: column;
     cursor: pointer;
+    margin-bottom: 8px;
+    padding: 8px 0px 16px 0px;
+    width: 80px;
+    justify-content: center;
+    align-items: center;
+    margin-right: 6px;
   }
 
   .item-item:hover {
-    background: #fbfbfb;
-    border-radius: 5px;
+    background: var(--grey-light);
+    border-radius: 3px;
   }
 
   .item-icon {
-    flex: 0 0 40px;
-    background: #f1f4fc;
-    height: 40px;
-    border-radius: 5px;
+    border-radius: 3px;
     display: flex;
-    justify-content: center;
-    align-items: center;
   }
 
   .item-text {
     display: flex;
-    padding-left: 16px;
-    padding-top: 8px;
     flex-direction: column;
   }
 
   .item-name {
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
   }
 
-  .item-description {
-    font-size: 12px;
-    color: #808192;
-  }
-
-  p {
-    line-height: 15px;
-  }
 
   i {
     font-size: 24px;
-    color: #808192;
+    color: var(--ink-light);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index ae6a658e7a..b62b0b0f74 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -249,7 +249,7 @@ export default {
           properties: { design: { ...all } },
         },
         {
-          name: "Navigation Bar",
+          name: "Nav Bar",
           _component: "@budibase/standard-components/Navigation",
           description:
             "A component for handling the navigation within your app.",
diff --git a/packages/builder/src/pages/[application]/_layout.svelte b/packages/builder/src/pages/[application]/_layout.svelte
index 5de5e3379b..a996a2680f 100644
--- a/packages/builder/src/pages/[application]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/_layout.svelte
@@ -147,7 +147,7 @@
   }
 
   .topnavitemright:hover {
-    color: rgb(255, 255, 255, 0.8);
+    color: var(--ink);
     font-weight: 500;
   }
 

From 3a72eddd78c2159f964a8ab4dbb162faedd34df8 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 12:54:53 +0200
Subject: [PATCH 11/51] add loading state

---
 packages/builder/src/App.svelte               |   4 +-
 .../components/start/CreateAppModal.svelte    |  93 ++++++---
 .../src/pages/[application]/_reset.svelte     |  92 ++++-----
 packages/builder/src/pages/_layout.svelte     | 187 +++++++++---------
 packages/builder/src/pages/index.svelte       |  13 +-
 5 files changed, 207 insertions(+), 182 deletions(-)

diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index c6b76090f9..000c5c0e16 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -26,6 +26,4 @@
 
 <AppNotification />
 
-<Modal>
-  <Router {routes} />
-</Modal>
+<Router {routes} />
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index f3faee047b..77e31a5823 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,30 +1,36 @@
 <script>
+  import Spinner from "components/common/Spinner.svelte"
   import { Input, TextArea, Button } from "@budibase/bbui"
+  import { goto } from "@sveltech/routify"
   import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
   import { getContext } from "svelte"
-  export let onCancel = () => {}
-  export let onOkay = () => {}
+  import { fade } from "svelte/transition"
+
+  const { open, close } = getContext("simple-modal")
 
-  const { close } = getContext("simple-modal")
-  
   let name = ""
   let description = ""
-  
+  let loading = false
+
   const createNewApp = async () => {
-    const data = { name, description}    
-    
+    const data = { name, description }
+    loading = true
     try {
-      const response = await fetch('/api/applications', {
-        method: 'POST', // *GET, POST, PUT, DELETE, etc.
-        credentials: 'same-origin', // include, *same-origin, omit
+      const response = await fetch("/api/applications", {
+        method: "POST", // *GET, POST, PUT, DELETE, etc.
+        credentials: "same-origin", // include, *same-origin, omit
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
           // 'Content-Type': 'application/x-www-form-urlencoded',
         },
-        body: JSON.stringify(data) // body data type must match "Content-Type" header
-      });
+        body: JSON.stringify(data), // body data type must match "Content-Type" header
+      })
+
+      const res = await response.json()
+
+      $goto(`./${res._id}`)
     } catch (error) {
-      
+      console.error(error)
     }
   }
 
@@ -32,23 +38,28 @@
   let onChange = () => {}
 
   function _onCancel() {
-    onCancel()
     close()
   }
 
   async function _onOkay() {
     await createNewApp()
-    close()
   }
 </script>
 
 <div class="container">
   <div class="body">
     <div class="heading">
-      <span class="icon"><AppsIcon /></span>
+      <span class="icon">
+        <AppsIcon />
+      </span>
       <h3>Create new web app</h3>
     </div>
-    <Input name="name" label="Name" placeholder="Enter application name" on:change={(e) => name = e.target.value} on:input={(e) => name = e.target.value} />
+    <Input
+      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"
@@ -56,22 +67,28 @@
       placeholder="Describe your application" />
   </div>
   <div class="footer">
-    <a href="./#" class="info"><InfoIcon />How to get started</a>
-    <Button outline thin on:click={_onCancel}>
-      Cancel
-    </Button>
-    <Button primary thin on:click={_onOkay}>
-      Save
-    </Button>
+    <a href="./#" class="info">
+      <InfoIcon />
+      How to get started
+    </a>
+    <Button outline thin on:click={_onCancel}>Cancel</Button>
+    <Button primary thin on:click={_onOkay}>Save</Button>
   </div>
-  <div class="close-button" on:click={_onCancel}><CloseIcon /></div>
+  <div class="close-button" on:click={_onCancel}>
+    <CloseIcon />
+  </div>
+  {#if loading}
+    <div in:fade class="spinner-container">
+      <Spinner />
+      <span class="spinner-text">Creating your app...</span>
+    </div>
+  {/if}
 </div>
 
 <style>
-
-.container {
-  position: relative;
-}
+  .container {
+    position: relative;
+  }
 
   .close-button {
     cursor: pointer;
@@ -130,4 +147,20 @@
     border-bottom-right-radius: 50px;
     background-color: var(--grey-light);
   }
+  .spinner-container {
+    background: white;
+    position: absolute;
+    border-radius: 5px;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    justify-items: center;
+    align-content: center;
+    grid-gap: 50px;
+  }
+  .spinner-text {
+    font-size: 2em;
+  }
 </style>
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index e21518f9f0..edaed8c967 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Modal from "svelte-simple-modal"
   import { store } from "builderStore"
 
   import { fade } from "svelte/transition"
@@ -20,62 +21,63 @@
       await store.setPackage(pkg)
       return pkg
     } else {
-      console.log(pkg)
       throw new Error(pkg)
     }
   }
 </script>
 
-<div class="root">
+<Modal>
+  <div class="root">
 
-  <div class="top-nav">
-    <div class="topleftnav">
-      <button class="home-logo">
-        <img
-          src="/_builder/assets/bb-logo.svg"
-          alt="budibase icon"
-          on:click={() => $goto(`/`)} />
-      </button>
+    <div class="top-nav">
+      <div class="topleftnav">
+        <button class="home-logo">
+          <img
+            src="/_builder/assets/bb-logo.svg"
+            alt="budibase icon"
+            on:click={() => $goto(`/`)} />
+        </button>
 
-      <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-      {#each $layout.children as { path, title }}
-        <span
-          class:active={$isActive(path)}
-          class="topnavitem"
-          on:click={() => $goto(path)}>
-          {title}
-        </span>
-      {/each}
-      <!-- <IconButton icon="home"
+        <!-- This gets all indexable subroutes and sticks them in the top nav. -->
+        {#each $layout.children as { path, title }}
+          <span
+            class:active={$isActive(path)}
+            class="topnavitem"
+            on:click={() => $goto(path)}>
+            {title}
+          </span>
+        {/each}
+        <!-- <IconButton icon="home"
                       color="var(--slate)"
                       hoverColor="var(--secondary75)"/> -->
+      </div>
+      <div class="toprightnav">
+        <span
+          class:active={$isActive(`/settings`)}
+          class="topnavitemright"
+          on:click={() => $goto(`/settings`)}>
+          <SettingsIcon />
+        </span>
+        <span
+          class:active={false}
+          class="topnavitemright"
+          on:click={() => (location = `/${application}`)}>
+          <PreviewIcon />
+        </span>
+      </div>
     </div>
-    <div class="toprightnav">
-      <span
-        class:active={$isActive(`/settings`)}
-        class="topnavitemright"
-        on:click={() => $goto(`/settings`)}>
-        <SettingsIcon />
-      </span>
-      <span
-        class:active={false}
-        class="topnavitemright"
-        on:click={() => (location = `/${application}`)}>
-        <PreviewIcon />
-      </span>
-    </div>
+
+    {#await promise}
+      <!-- This should probably be some kind of loading state? -->
+      <div />
+    {:then}
+      <slot />
+    {:catch error}
+      <p>Something went wrong: {error.message}</p>
+    {/await}
+
   </div>
-
-  {#await promise}
-    <!-- This should probably be some kind of loading state? -->
-    <div />
-  {:then}
-    <slot />
-  {:catch error}
-    <p>Something went wrong: {error.message}</p>
-  {/await}
-
-</div>
+</Modal>
 
 <style>
   .root {
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index 98bae8aa7d..363efcf619 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Modal from "svelte-simple-modal"
   import {
     SettingsIcon,
     AppsIcon,
@@ -14,104 +15,106 @@
   } from "components/common/Icons/"
 </script>
 
-<div class="root">
-  <div class="ui-nav">
-    <div class="home-logo">
-      <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Build</div>
-      <div class="nav-item-home">
-        <span class="nav-item-icon">
-          <AppsIcon />
-        </span>
-        <div class="nav-item-title">Apps</div>
+<Modal>
+  <div class="root">
+    <div class="ui-nav">
+      <div class="home-logo">
+        <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
       </div>
-      <div class="nav-item">
-        <span class="nav-item-icon">
-          <SettingsIcon />
-        </span>
-        <div class="nav-item-title">Settings</div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Build</div>
+        <div class="nav-item-home">
+          <span class="nav-item-icon">
+            <AppsIcon />
+          </span>
+          <div class="nav-item-title">Apps</div>
+        </div>
+        <div class="nav-item">
+          <span class="nav-item-icon">
+            <SettingsIcon />
+          </span>
+          <div class="nav-item-title">Settings</div>
+        </div>
+        <a href="https://budibase.con/login" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <UpdatesIcon />
+          </span>
+          <div class="nav-item-title">Updates</div>
+        </a>
+        <a href="https://budibase.con/login" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <HostingIcon />
+          </span>
+          <div class="nav-item-title">Hosting</div>
+        </a>
+      </div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Learn</div>
+        <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <DocumentationIcon />
+          </span>
+          <div class="nav-item-title">Documentation</div>
+        </a>
+        <a
+          href="https://docs.budibase.com/tutorial/quick-start"
+          target="_blank"
+          class="nav-item">
+          <span class="nav-item-icon">
+            <TutorialsIcon />
+          </span>
+          <div class="nav-item-title">Tutorials</div>
+        </a>
+        <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <CommunityIcon />
+          </span>
+          <div class="nav-item-title">Community</div>
+        </a>
+      </div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Contact</div>
+        <a
+          href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
+          target="_blank"
+          class="nav-item">
+          <span class="nav-item-icon">
+            <ContributionIcon />
+          </span>
+          <div class="nav-item-title">Contribute to our product</div>
+        </a>
+        <a
+          href="https://github.com/Budibase/budibase/issues"
+          target="_blank"
+          class="nav-item">
+          <span class="nav-item-icon">
+            <BugIcon />
+          </span>
+          <div class="nav-item-title">Report bug</div>
+        </a>
+        <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <EmailIcon />
+          </span>
+          <div class="nav-item-title">Email</div>
+        </a>
+        <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <TwitterIcon />
+          </span>
+          <div class="nav-item-title">Twitter</div>
+        </a>
       </div>
-      <a href="https://budibase.con/login" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <UpdatesIcon />
-        </span>
-        <div class="nav-item-title">Updates</div>
-      </a>
-      <a href="https://budibase.con/login" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <HostingIcon />
-        </span>
-        <div class="nav-item-title">Hosting</div>
-      </a>
     </div>
 
-    <div class="nav-section">
-      <div class="nav-section-title">Learn</div>
-      <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <DocumentationIcon />
-        </span>
-        <div class="nav-item-title">Documentation</div>
-      </a>
-      <a
-        href="https://docs.budibase.com/tutorial/quick-start"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <TutorialsIcon />
-        </span>
-        <div class="nav-item-title">Tutorials</div>
-      </a>
-      <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <CommunityIcon />
-        </span>
-        <div class="nav-item-title">Community</div>
-      </a>
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Contact</div>
-      <a
-        href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <ContributionIcon />
-        </span>
-        <div class="nav-item-title">Contribute to our product</div>
-      </a>
-      <a
-        href="https://github.com/Budibase/budibase/issues"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <BugIcon />
-        </span>
-        <div class="nav-item-title">Report bug</div>
-      </a>
-      <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <EmailIcon />
-        </span>
-        <div class="nav-item-title">Email</div>
-      </a>
-      <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <TwitterIcon />
-        </span>
-        <div class="nav-item-title">Twitter</div>
-      </a>
+    <div class="main">
+      <slot />
     </div>
   </div>
-
-  <div class="main">
-    <slot />
-  </div>
-</div>
+</Modal>
 
 <style>
   .root {
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 1e6b46355e..97df61ebb0 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -24,15 +24,6 @@
 
   // Handle create app modal
   const { open } = getContext("simple-modal")
-  const onCancel = text => {
-    name = ""
-    status = -1
-  }
-
-  const onOkay = text => {
-    name = text
-    status = 1
-  }
 
   const showCreateAppModal = () => {
     open(
@@ -40,15 +31,13 @@
       {
         message: "What is your name?",
         hasForm: true,
-        onCancel,
-        onOkay,
       },
       {
         closeButton: false,
         closeOnEsc: false,
         closeOnOuterClick: false,
         styleContent: { padding: 0 },
-        closeOnOuterClick: true
+        closeOnOuterClick: true,
       }
     )
   }

From a6b7837cd3bd398c3eadd1cfe6cda95ef36c91d6 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 12:18:05 +0100
Subject: [PATCH 12/51] Unified icons and made the components look like blocks

---
 .../ComponentPropertiesPanel.svelte            |  2 +-
 .../ComponentsPaneSwitcher.svelte              |  2 +-
 .../userInterface/ItemTab/Item.svelte          |  9 ++++++---
 .../userInterface/temporaryPanelStructure.js   | 18 +++++++++---------
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 3ab8c522f0..726fb35aae 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -109,7 +109,7 @@
 
   .title > div:nth-child(1) {
     grid-column-start: name;
-    color: var(--secondary100);
+    color: var(--ink);
   }
 
   .title > div:nth-child(2) {
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
index 185b1d640d..de523cd7bf 100644
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
@@ -55,7 +55,7 @@
     display: flex;
     flex-direction: column;
     padding: 20px 20px;
-    border-left: solid 1px #e8e8ef;
+    border-left: solid 1px var(--grey);
   }
 
   .switcher {
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index 3fc62d7a92..af78d2e015 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -19,14 +19,17 @@
     cursor: pointer;
     margin-bottom: 8px;
     padding: 8px 0px 16px 0px;
-    width: 80px;
+    width: 120px;
+    height: 80px;
     justify-content: center;
     align-items: center;
-    margin-right: 6px;
+    margin-right: 8px;
+    background-color: var(--grey-light);
+    border-radius: 3px;
   }
 
   .item-item:hover {
-    background: var(--grey-light);
+    background: var(--grey);
     border-radius: 3px;
   }
 
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index b62b0b0f74..eba4c51bb1 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -15,7 +15,7 @@ export default {
           name: "Screenslot",
           description:
             "This component is a placeholder for the rendering of a screen within a page.",
-          icon: "ri-crop-2-line",
+          icon: "ri-crop-2-fill",
           commonProps: {},
           children: [],
         },
@@ -119,7 +119,7 @@ export default {
         {
           name: "Input",
           description: "These components handle user input.",
-          icon: "ri-edit-box-line",
+          icon: "ri-edit-box-fill",
           commonProps: {},
           children: [
             {
@@ -127,7 +127,7 @@ export default {
               name: "Textfield",
               description:
                 "A textfield component that allows the user to input text.",
-              icon: "ri-edit-box-line",
+              icon: "ri-edit-box-fill",
               properties: {
                 design: { ...all },
                 settings: [
@@ -145,7 +145,7 @@ export default {
               _component: "@budibase/standard-components/checkbox",
               name: "Checkbox",
               description: "A selectable checkbox component",
-              icon: "ri-checkbox-line",
+              icon: "ri-checkbox-fill",
               properties: {
                 design: { ...all },
                 settings: [{ label: "Label", key: "label", control: Input }],
@@ -166,7 +166,7 @@ export default {
               name: "Select",
               description:
                 "A select component for choosing from different options",
-              icon: "ri-file-list-line",
+              icon: "ri-file-list-fill",
               properties: {
                 design: { ...all },
                 settings: [],
@@ -236,7 +236,7 @@ export default {
           name: "Card",
           description:
             "A basic card component that can contain content and actions.",
-          icon: "ri-layout-bottom-line",
+          icon: "ri-layout-bottom-fill",
           children: [],
           properties: { design: { ...all } },
         },
@@ -303,7 +303,7 @@ export default {
           name: "Chart",
           _component: "@budibase/standard-components/datachart",
           description: "Shiny chart",
-          icon: "ri-bar-chart-line",
+          icon: "ri-bar-chart-fill",
           properties: { design: { ...all } },
           children: [],
         },
@@ -311,7 +311,7 @@ export default {
           name: "List",
           _component: "@budibase/standard-components/datalist",
           description: "Shiny list",
-          icon: "ri-file-list-line",
+          icon: "ri-file-list-fill",
           properties: { design: { ...all } },
           children: [],
         },
@@ -319,7 +319,7 @@ export default {
           name: "Map",
           _component: "@budibase/standard-components/datamap",
           description: "Shiny map",
-          icon: "ri-map-pin-line",
+          icon: "ri-map-pin-fill",
           properties: { design: { ...all } },
           children: [],
         },

From 9392de550ad23208d22c96474427bee36723c5d5 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 13:48:38 +0200
Subject: [PATCH 13/51] add validation

---
 .../components/start/CreateAppModal.svelte    | 63 ++++++++++++++-----
 1 file changed, 47 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 77e31a5823..d2232f7604 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -11,26 +11,44 @@
   let name = ""
   let description = ""
   let loading = false
+  let error = {}
 
   const createNewApp = async () => {
-    const data = { name, description }
-    loading = true
-    try {
-      const response = await fetch("/api/applications", {
-        method: "POST", // *GET, POST, PUT, DELETE, etc.
-        credentials: "same-origin", // include, *same-origin, omit
-        headers: {
-          "Content-Type": "application/json",
-          // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        body: JSON.stringify(data), // body data type must match "Content-Type" header
-      })
+    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 fetch("/api/applications", {
+          method: "POST", // *GET, POST, PUT, DELETE, etc.
+          credentials: "same-origin", // include, *same-origin, omit
+          headers: {
+            "Content-Type": "application/json",
+            // 'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: JSON.stringify(data), // body data type must match "Content-Type" header
+        })
 
-      const res = await response.json()
+        const res = await response.json()
 
-      $goto(`./${res._id}`)
-    } catch (error) {
-      console.error(error)
+        $goto(`./${res._id}`)
+      } catch (error) {
+        console.error(error)
+      }
     }
   }
 
@@ -60,11 +78,19 @@
       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">
@@ -163,4 +189,9 @@
   .spinner-text {
     font-size: 2em;
   }
+  .error {
+    color: var(--deletion100);
+    font-weight: bold;
+    font-size: 0.8em;
+  }
 </style>

From d237dd9271479f2e2b3d6a957214c1424d34685b Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 13:51:19 +0200
Subject: [PATCH 14/51] fix lint erorrs

---
 packages/server/src/api/controllers/user.js   |  2 +-
 .../server/src/api/controllers/workflow.js    |  9 +++----
 .../src/api/routes/tests/couchTestUtils.js    |  4 +--
 packages/server/src/schemas/index.js          | 26 +++++++++----------
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index f654caa4c0..5810872989 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -61,7 +61,7 @@ exports.create = async function(ctx) {
   }
 }
 
-exports.update = async function(ctx) {}
+exports.update = async function() {}
 
 exports.destroy = async function(ctx) {
   const database = new CouchDB(ctx.params.instanceId)
diff --git a/packages/server/src/api/controllers/workflow.js b/packages/server/src/api/controllers/workflow.js
index 216ca6afd2..e257151d37 100644
--- a/packages/server/src/api/controllers/workflow.js
+++ b/packages/server/src/api/controllers/workflow.js
@@ -2,8 +2,6 @@ const CouchDB = require("../../db")
 const Ajv = require("ajv")
 const newid = require("../../db/newid")
 
-const ajv = new Ajv()
-
 exports.create = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
   const workflow = ctx.request.body
@@ -28,7 +26,6 @@ exports.create = async function(ctx) {
   //   return
   // }
 
-
   workflow.type = "workflow"
   const response = await db.post(workflow)
   workflow._rev = response.rev
@@ -38,9 +35,9 @@ exports.create = async function(ctx) {
     message: "Workflow created successfully",
     workflow: {
       ...workflow,
-      ...response
-    }
-  };
+      ...response,
+    },
+  }
 }
 
 exports.update = async function(ctx) {
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index aa7a765d25..de4ed7f87e 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -98,5 +98,5 @@ exports.insertDocument = async (databaseId, document) => {
 }
 
 exports.destroyDocument = async (databaseId, documentId) => {
-  return await new CouchDB(databaseId).destroy(documentId);
-}
\ No newline at end of file
+  return await new CouchDB(databaseId).destroy(documentId)
+}
diff --git a/packages/server/src/schemas/index.js b/packages/server/src/schemas/index.js
index 23a839bf97..9ab8736a7a 100644
--- a/packages/server/src/schemas/index.js
+++ b/packages/server/src/schemas/index.js
@@ -2,22 +2,22 @@ const WORKFLOW_SCHEMA = {
   properties: {
     type: "workflow",
     pageId: {
-      type: "string"
+      type: "string",
     },
     screenId: {
-      type: "string"
+      type: "string",
     },
     live: {
-      type: "boolean"
+      type: "boolean",
     },
     uiTree: {
-      type: "object"
+      type: "object",
     },
     definition: {
       type: "object",
       properties: {
         triggers: { type: "array" },
-        next: { 
+        next: {
           type: "object",
           properties: {
             type: { type: "string" },
@@ -25,14 +25,14 @@ const WORKFLOW_SCHEMA = {
             args: { type: "object" },
             conditions: { type: "array" },
             errorHandling: { type: "object" },
-            next: { type: "object" }
-          }
+            next: { type: "object" },
+          },
         },
-      }
-    }
-  }
-};
+      },
+    },
+  },
+}
 
 module.exports = {
-  WORKFLOW_SCHEMA
-};
\ No newline at end of file
+  WORKFLOW_SCHEMA,
+}

From 86499c132387dfa7e11de785c74f0759c1c41ba8 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 12:51:47 +0100
Subject: [PATCH 15/51] Tidy up

---
 .../builder/src/components/userInterface/ItemTab/Item.svelte   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index af78d2e015..cd51e42564 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -12,7 +12,6 @@
 </div>
 
 <style>
-
   .item-item {
     display: flex;
     flex-direction: column;
@@ -31,6 +30,7 @@
   .item-item:hover {
     background: var(--grey);
     border-radius: 3px;
+    transition: all 0.2s;
   }
 
   .item-icon {
@@ -48,7 +48,6 @@
     font-weight: 400;
   }
 
-
   i {
     font-size: 24px;
     color: var(--ink-light);

From 2325291b3edb246540e7560b8a95fe095835a16d Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 13:53:44 +0200
Subject: [PATCH 16/51] fix another lint error

---
 packages/server/src/api/controllers/workflow.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/server/src/api/controllers/workflow.js b/packages/server/src/api/controllers/workflow.js
index e257151d37..61543afc0d 100644
--- a/packages/server/src/api/controllers/workflow.js
+++ b/packages/server/src/api/controllers/workflow.js
@@ -1,5 +1,4 @@
 const CouchDB = require("../../db")
-const Ajv = require("ajv")
 const newid = require("../../db/newid")
 
 exports.create = async function(ctx) {

From ea31f93cf22c236824ac453a65a03eb6e88d8a10 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 13:21:13 +0100
Subject: [PATCH 17/51] Update to component groupings

---
 .../ComponentSelectionList.svelte             |  2 -
 .../userInterface/temporaryPanelStructure.js  | 65 +++++++------------
 2 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 6fc4193017..0bf848e4a8 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -52,11 +52,9 @@
 </div>
 
 <style>
-
   .panel {
     padding: 20px 0px;
     display: flex;
     flex-wrap: wrap;
   }
-
 </style>
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index eba4c51bb1..f27b3c7788 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -10,15 +10,6 @@ export default {
       name: "Basic",
       isCategory: true,
       children: [
-        {
-          _component: "##builtin/screenslot",
-          name: "Screenslot",
-          description:
-            "This component is a placeholder for the rendering of a screen within a page.",
-          icon: "ri-crop-2-fill",
-          commonProps: {},
-          children: [],
-        },
         {
           _component: "@budibase/standard-components/container",
           name: "Container",
@@ -222,6 +213,7 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
+              
             ],
           },
         },
@@ -248,21 +240,6 @@ export default {
           children: [],
           properties: { design: { ...all } },
         },
-        {
-          name: "Nav Bar",
-          _component: "@budibase/standard-components/Navigation",
-          description:
-            "A component for handling the navigation within your app.",
-          icon: "ri-navigation-fill",
-          children: [],
-          properties: { design: { ...all } },
-        },
-      ],
-    },
-    {
-      name: "Data",
-      isCategory: true,
-      children: [
         {
           name: "Table",
           description: "A component that generates a table from your data.",
@@ -283,22 +260,6 @@ export default {
           },
           children: [],
         },
-        {
-          _component: "@budibase/standard-components/datatable",
-          name: "DataTable",
-          description: "A table for displaying data from the backend.",
-          icon: "ri-archive-drawer-fill",
-          properties: { design: { ...all } },
-          children: [],
-        },
-        {
-          _component: "@budibase/standard-components/dataform",
-          name: "DataForm",
-          description: "Form stuff",
-          icon: "ri-file-edit-fill",
-          properties: { design: { ...all } },
-          children: [],
-        },
         {
           name: "Chart",
           _component: "@budibase/standard-components/datachart",
@@ -325,5 +286,29 @@ export default {
         },
       ],
     },
+    {
+      name: "Layouts",
+      isCategory: true,
+      children: [
+        {
+          _component: "##builtin/screenslot",
+          name: "Screenslot",
+          description:
+            "This component is a placeholder for the rendering of a screen within a page.",
+          icon: "ri-crop-2-fill",
+          commonProps: {},
+          children: [],
+        },
+        {
+          name: "Nav Bar",
+          _component: "@budibase/standard-components/Navigation",
+          description:
+            "A component for handling the navigation within your app.",
+          icon: "ri-navigation-fill",
+          children: [],
+          properties: { design: { ...all } },
+        },
+      ],
+    },
   ],
 }

From a674094f20823e775a1880588189d6f513371322 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 13:25:19 +0100
Subject: [PATCH 18/51] Update temporaryPanelStructure.js

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

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index f27b3c7788..072bc143ac 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -213,7 +213,6 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
-              
             ],
           },
         },

From a3135a9cee10d572256f8e8838254f345bb79ea9 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 14:27:25 +0100
Subject: [PATCH 19/51] Props panel flex fix

---
 .../userInterface/propertyCategories.js       | 72 +++++++++++++++----
 1 file changed, 60 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 07101779a5..8303dbb6e7 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,48 +1,96 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
+const newLocal = "display"
 // import Colorpicker from "../common/Colorpicker.svelte"
 /*
   TODO: Allow for default values for all properties
 */
 
 export const layout = [
+  {
+    label: "Display",
+    key: "display",
+    control: OptionSelect,
+    initialValue: "Select Option",
+    options: [
+      { label: "Select Option", value: "Na" },
+      { label: "Flex", value: "flex" },
+      { label: "Inline Flex", value: "inline-flex" }
+    ],
+  },
   {
     label: "Direction",
     key: "flex-direction",
     control: OptionSelect,
-    initialValue: "columnReverse",
+    initialValue: "Select Option",
     options: [
-      { label: "row" },
-      { label: "row-reverse", value: "rowReverse" },
-      { label: "column" },
-      { label: "column-reverse", value: "columnReverse" },
+      { label: "Select Option", value: "Na" },
+      { label: "Row", value: "row" },
+      { label: "Row Reverse", value: "rowReverse" },
+      { label: "column", value: "column" },
+      { label: "Column Reverse", value: "columnReverse" },
     ],
   },
-  { label: "Justify", key: "justify-content", control: Input },
-  { label: "Align", key: "align-items", control: Input },
+  { label: "Justify", 
+    key: "justify-content", 
+    control: OptionSelect,
+    initialValue: "Select Option",
+    options: [
+      { label: "Select Option", value: "Na" },
+      { label: "Flex Start", value: "flex-start" }, 
+      { label: "Flex End", value: "flex-end" }, 
+      { label: "Center", value: "center" }, 
+      { label: "Space Between", value: "space-between" }, 
+      { label: "Space Around", value: "space-around" }, 
+      { label: "Space Evenly", value: "space-evenly" }, 
+    ],
+  },
+  { label: "Align", 
+    key: "align-items", 
+    control: OptionSelect,
+    initialValue: "Select Option",
+    options: [
+      { label: "Select Option", value: "Na" },
+      { label: "Flex Start", value: "flex-start" }, 
+      { label: "Flex End", value: "flex-end" }, 
+      { label: "Center", value: "center" }, 
+      { label: "Baseline", value: "baseline" }, 
+      { label: "Stretch", value: "stretch" }, 
+    ], 
+  },
   {
     label: "Wrap",
     key: "flex-wrap",
     control: OptionSelect,
-    options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
+    initialValue: "Wrap",
+    options: [
+      { label: "Select Option", value: "Na" },
+      { label: "Wrap", value: "wrap" }, 
+      { label: "No Wrap", value: "nowrap" },
+      { label: "Wrap Reverse", value: "wrap-reverse" }
+    ],
   },
 ]
 
 const spacingMeta = [
-  { placeholder: "T" },
-  { placeholder: "R" },
-  { placeholder: "B" },
   { placeholder: "L" },
+  { placeholder: "B" },
+  { placeholder: "R" },
+  { placeholder: "T" },
 ]
 export const spacing = [
+  { label: "Margin", 
+    key: "margin", 
+    control: InputGroup, 
+    meta: spacingMeta 
+  },
   {
     label: "Padding",
     key: "padding",
     control: InputGroup,
     meta: spacingMeta,
   },
-  { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
 ]
 
 export const size = [

From 6a920ddbfbe2fe7b5801f9b3c5b0063e8f7f059a Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 14:28:05 +0100
Subject: [PATCH 20/51] Format and lint

---
 .../userInterface/propertyCategories.js       | 46 +++++++++----------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 8303dbb6e7..b871962b92 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -16,7 +16,7 @@ export const layout = [
     options: [
       { label: "Select Option", value: "Na" },
       { label: "Flex", value: "flex" },
-      { label: "Inline Flex", value: "inline-flex" }
+      { label: "Inline Flex", value: "inline-flex" },
     ],
   },
   {
@@ -32,32 +32,34 @@ export const layout = [
       { label: "Column Reverse", value: "columnReverse" },
     ],
   },
-  { label: "Justify", 
-    key: "justify-content", 
+  {
+    label: "Justify",
+    key: "justify-content",
     control: OptionSelect,
     initialValue: "Select Option",
     options: [
       { label: "Select Option", value: "Na" },
-      { label: "Flex Start", value: "flex-start" }, 
-      { label: "Flex End", value: "flex-end" }, 
-      { label: "Center", value: "center" }, 
-      { label: "Space Between", value: "space-between" }, 
-      { label: "Space Around", value: "space-around" }, 
-      { label: "Space Evenly", value: "space-evenly" }, 
+      { label: "Flex Start", value: "flex-start" },
+      { label: "Flex End", value: "flex-end" },
+      { label: "Center", value: "center" },
+      { label: "Space Between", value: "space-between" },
+      { label: "Space Around", value: "space-around" },
+      { label: "Space Evenly", value: "space-evenly" },
     ],
   },
-  { label: "Align", 
-    key: "align-items", 
+  {
+    label: "Align",
+    key: "align-items",
     control: OptionSelect,
     initialValue: "Select Option",
     options: [
       { label: "Select Option", value: "Na" },
-      { label: "Flex Start", value: "flex-start" }, 
-      { label: "Flex End", value: "flex-end" }, 
-      { label: "Center", value: "center" }, 
-      { label: "Baseline", value: "baseline" }, 
-      { label: "Stretch", value: "stretch" }, 
-    ], 
+      { label: "Flex Start", value: "flex-start" },
+      { label: "Flex End", value: "flex-end" },
+      { label: "Center", value: "center" },
+      { label: "Baseline", value: "baseline" },
+      { label: "Stretch", value: "stretch" },
+    ],
   },
   {
     label: "Wrap",
@@ -66,9 +68,9 @@ export const layout = [
     initialValue: "Wrap",
     options: [
       { label: "Select Option", value: "Na" },
-      { label: "Wrap", value: "wrap" }, 
+      { label: "Wrap", value: "wrap" },
       { label: "No Wrap", value: "nowrap" },
-      { label: "Wrap Reverse", value: "wrap-reverse" }
+      { label: "Wrap Reverse", value: "wrap-reverse" },
     ],
   },
 ]
@@ -80,11 +82,7 @@ const spacingMeta = [
   { placeholder: "T" },
 ]
 export const spacing = [
-  { label: "Margin", 
-    key: "margin", 
-    control: InputGroup, 
-    meta: spacingMeta 
-  },
+  { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
   {
     label: "Padding",
     key: "padding",

From 820de937e4e5ad6b80261839fe0f1e6c8ae99177 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 14:39:48 +0100
Subject: [PATCH 21/51] Update propertyCategories.js

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

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index b871962b92..96c11bec38 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,7 +1,6 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
-const newLocal = "display"
 // import Colorpicker from "../common/Colorpicker.svelte"
 /*
   TODO: Allow for default values for all properties

From 5bc315f1624652b277ae4f0b4d3011b2b00d5b56 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 11:11:32 +0100
Subject: [PATCH 22/51] Component items ui updated

---
 .../ComponentSelectionList.svelte             | 27 ++-----------
 .../userInterface/ItemTab/Item.svelte         | 39 +++++++------------
 .../userInterface/temporaryPanelStructure.js  |  2 +-
 .../src/pages/[application]/_reset.svelte     |  2 +-
 4 files changed, 18 insertions(+), 52 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 3ffab198e9..6fc4193017 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -52,32 +52,11 @@
 </div>
 
 <style>
-  .tabs {
-    display: flex;
-    justify-content: center;
-    list-style: none;
-    margin: 0 auto;
-    padding: 0 30px;
-    border-bottom: 1px solid #d8d8d8;
-
-    font-size: 14px;
-    font-weight: 500;
-    letter-spacing: 0.14px;
-  }
-
-  li {
-    color: #808192;
-    margin: 0 5px;
-    padding: 0 8px;
-    cursor: pointer;
-  }
 
   .panel {
-    padding: 20px;
+    padding: 20px 0px;
+    display: flex;
+    flex-wrap: wrap;
   }
 
-  .active {
-    border-bottom: solid 3px #0055ff;
-    color: #393c44;
-  }
 </style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index 82eec75483..3fc62d7a92 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -8,59 +8,46 @@
   </div>
   <div class="item-text">
     <div class="item-name">{item.name}</div>
-    <div class="item-description">
-      <p>{item.description}</p>
-    </div>
   </div>
 </div>
 
 <style>
+
   .item-item {
     display: flex;
-    flex-direction: row;
-    padding: 10px 0px 8px 10px;
-    align-items: center;
+    flex-direction: column;
     cursor: pointer;
+    margin-bottom: 8px;
+    padding: 8px 0px 16px 0px;
+    width: 80px;
+    justify-content: center;
+    align-items: center;
+    margin-right: 6px;
   }
 
   .item-item:hover {
-    background: #fbfbfb;
-    border-radius: 5px;
+    background: var(--grey-light);
+    border-radius: 3px;
   }
 
   .item-icon {
-    flex: 0 0 40px;
-    background: #f1f4fc;
-    height: 40px;
-    border-radius: 5px;
+    border-radius: 3px;
     display: flex;
-    justify-content: center;
-    align-items: center;
   }
 
   .item-text {
     display: flex;
-    padding-left: 16px;
-    padding-top: 8px;
     flex-direction: column;
   }
 
   .item-name {
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
   }
 
-  .item-description {
-    font-size: 12px;
-    color: #808192;
-  }
-
-  p {
-    line-height: 15px;
-  }
 
   i {
     font-size: 24px;
-    color: #808192;
+    color: var(--ink-light);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index ae6a658e7a..b62b0b0f74 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -249,7 +249,7 @@ export default {
           properties: { design: { ...all } },
         },
         {
-          name: "Navigation Bar",
+          name: "Nav Bar",
           _component: "@budibase/standard-components/Navigation",
           description:
             "A component for handling the navigation within your app.",
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index edaed8c967..5e3e973ae7 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -150,7 +150,7 @@
   }
 
   .topnavitemright:hover {
-    color: rgb(255, 255, 255, 0.8);
+    color: var(--ink);
     font-weight: 500;
   }
 

From de1611e693e104b09ce0ff04d5eff14b358ae5fc Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 12:18:05 +0100
Subject: [PATCH 23/51] Unified icons and made the components look like blocks

---
 .../ComponentPropertiesPanel.svelte            |  2 +-
 .../ComponentsPaneSwitcher.svelte              |  2 +-
 .../userInterface/ItemTab/Item.svelte          |  9 ++++++---
 .../userInterface/temporaryPanelStructure.js   | 18 +++++++++---------
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 3ab8c522f0..726fb35aae 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -109,7 +109,7 @@
 
   .title > div:nth-child(1) {
     grid-column-start: name;
-    color: var(--secondary100);
+    color: var(--ink);
   }
 
   .title > div:nth-child(2) {
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
index 185b1d640d..de523cd7bf 100644
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
@@ -55,7 +55,7 @@
     display: flex;
     flex-direction: column;
     padding: 20px 20px;
-    border-left: solid 1px #e8e8ef;
+    border-left: solid 1px var(--grey);
   }
 
   .switcher {
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index 3fc62d7a92..af78d2e015 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -19,14 +19,17 @@
     cursor: pointer;
     margin-bottom: 8px;
     padding: 8px 0px 16px 0px;
-    width: 80px;
+    width: 120px;
+    height: 80px;
     justify-content: center;
     align-items: center;
-    margin-right: 6px;
+    margin-right: 8px;
+    background-color: var(--grey-light);
+    border-radius: 3px;
   }
 
   .item-item:hover {
-    background: var(--grey-light);
+    background: var(--grey);
     border-radius: 3px;
   }
 
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index b62b0b0f74..eba4c51bb1 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -15,7 +15,7 @@ export default {
           name: "Screenslot",
           description:
             "This component is a placeholder for the rendering of a screen within a page.",
-          icon: "ri-crop-2-line",
+          icon: "ri-crop-2-fill",
           commonProps: {},
           children: [],
         },
@@ -119,7 +119,7 @@ export default {
         {
           name: "Input",
           description: "These components handle user input.",
-          icon: "ri-edit-box-line",
+          icon: "ri-edit-box-fill",
           commonProps: {},
           children: [
             {
@@ -127,7 +127,7 @@ export default {
               name: "Textfield",
               description:
                 "A textfield component that allows the user to input text.",
-              icon: "ri-edit-box-line",
+              icon: "ri-edit-box-fill",
               properties: {
                 design: { ...all },
                 settings: [
@@ -145,7 +145,7 @@ export default {
               _component: "@budibase/standard-components/checkbox",
               name: "Checkbox",
               description: "A selectable checkbox component",
-              icon: "ri-checkbox-line",
+              icon: "ri-checkbox-fill",
               properties: {
                 design: { ...all },
                 settings: [{ label: "Label", key: "label", control: Input }],
@@ -166,7 +166,7 @@ export default {
               name: "Select",
               description:
                 "A select component for choosing from different options",
-              icon: "ri-file-list-line",
+              icon: "ri-file-list-fill",
               properties: {
                 design: { ...all },
                 settings: [],
@@ -236,7 +236,7 @@ export default {
           name: "Card",
           description:
             "A basic card component that can contain content and actions.",
-          icon: "ri-layout-bottom-line",
+          icon: "ri-layout-bottom-fill",
           children: [],
           properties: { design: { ...all } },
         },
@@ -303,7 +303,7 @@ export default {
           name: "Chart",
           _component: "@budibase/standard-components/datachart",
           description: "Shiny chart",
-          icon: "ri-bar-chart-line",
+          icon: "ri-bar-chart-fill",
           properties: { design: { ...all } },
           children: [],
         },
@@ -311,7 +311,7 @@ export default {
           name: "List",
           _component: "@budibase/standard-components/datalist",
           description: "Shiny list",
-          icon: "ri-file-list-line",
+          icon: "ri-file-list-fill",
           properties: { design: { ...all } },
           children: [],
         },
@@ -319,7 +319,7 @@ export default {
           name: "Map",
           _component: "@budibase/standard-components/datamap",
           description: "Shiny map",
-          icon: "ri-map-pin-line",
+          icon: "ri-map-pin-fill",
           properties: { design: { ...all } },
           children: [],
         },

From 50c9fd2dc1e64196d4de149ac25a6f70c44e372f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 12:51:47 +0100
Subject: [PATCH 24/51] Tidy up

---
 .../builder/src/components/userInterface/ItemTab/Item.svelte   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index af78d2e015..cd51e42564 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -12,7 +12,6 @@
 </div>
 
 <style>
-
   .item-item {
     display: flex;
     flex-direction: column;
@@ -31,6 +30,7 @@
   .item-item:hover {
     background: var(--grey);
     border-radius: 3px;
+    transition: all 0.2s;
   }
 
   .item-icon {
@@ -48,7 +48,6 @@
     font-weight: 400;
   }
 
-
   i {
     font-size: 24px;
     color: var(--ink-light);

From 74832d13035922c2d41c9a349f5cdbbd62c6f629 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 13:21:13 +0100
Subject: [PATCH 25/51] Update to component groupings

---
 .../ComponentSelectionList.svelte             |  2 -
 .../userInterface/temporaryPanelStructure.js  | 65 +++++++------------
 2 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 6fc4193017..0bf848e4a8 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -52,11 +52,9 @@
 </div>
 
 <style>
-
   .panel {
     padding: 20px 0px;
     display: flex;
     flex-wrap: wrap;
   }
-
 </style>
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index eba4c51bb1..f27b3c7788 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -10,15 +10,6 @@ export default {
       name: "Basic",
       isCategory: true,
       children: [
-        {
-          _component: "##builtin/screenslot",
-          name: "Screenslot",
-          description:
-            "This component is a placeholder for the rendering of a screen within a page.",
-          icon: "ri-crop-2-fill",
-          commonProps: {},
-          children: [],
-        },
         {
           _component: "@budibase/standard-components/container",
           name: "Container",
@@ -222,6 +213,7 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
+              
             ],
           },
         },
@@ -248,21 +240,6 @@ export default {
           children: [],
           properties: { design: { ...all } },
         },
-        {
-          name: "Nav Bar",
-          _component: "@budibase/standard-components/Navigation",
-          description:
-            "A component for handling the navigation within your app.",
-          icon: "ri-navigation-fill",
-          children: [],
-          properties: { design: { ...all } },
-        },
-      ],
-    },
-    {
-      name: "Data",
-      isCategory: true,
-      children: [
         {
           name: "Table",
           description: "A component that generates a table from your data.",
@@ -283,22 +260,6 @@ export default {
           },
           children: [],
         },
-        {
-          _component: "@budibase/standard-components/datatable",
-          name: "DataTable",
-          description: "A table for displaying data from the backend.",
-          icon: "ri-archive-drawer-fill",
-          properties: { design: { ...all } },
-          children: [],
-        },
-        {
-          _component: "@budibase/standard-components/dataform",
-          name: "DataForm",
-          description: "Form stuff",
-          icon: "ri-file-edit-fill",
-          properties: { design: { ...all } },
-          children: [],
-        },
         {
           name: "Chart",
           _component: "@budibase/standard-components/datachart",
@@ -325,5 +286,29 @@ export default {
         },
       ],
     },
+    {
+      name: "Layouts",
+      isCategory: true,
+      children: [
+        {
+          _component: "##builtin/screenslot",
+          name: "Screenslot",
+          description:
+            "This component is a placeholder for the rendering of a screen within a page.",
+          icon: "ri-crop-2-fill",
+          commonProps: {},
+          children: [],
+        },
+        {
+          name: "Nav Bar",
+          _component: "@budibase/standard-components/Navigation",
+          description:
+            "A component for handling the navigation within your app.",
+          icon: "ri-navigation-fill",
+          children: [],
+          properties: { design: { ...all } },
+        },
+      ],
+    },
   ],
 }

From b92640de2c1d26dd75cde9ef96b4f4e03522853f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 13:25:19 +0100
Subject: [PATCH 26/51] Update temporaryPanelStructure.js

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

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index f27b3c7788..072bc143ac 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -213,7 +213,6 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
-              
             ],
           },
         },

From fc73bb2341ecef3dbe363929265bb834026f6f75 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 28 May 2020 09:23:36 +0100
Subject: [PATCH 27/51] Color fix

---
 .../src/components/userInterface/FlatButton.svelte     | 10 +++++-----
 .../components/userInterface/FlatButtonGroup.svelte    |  1 -
 .../src/components/userInterface/propertyCategories.js |  3 +--
 .../userInterface/temporaryPanelStructure.js           |  2 +-
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index 9e11a546e3..7fb5742c46 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -19,20 +19,20 @@
 <style>
   .flatbutton {
     cursor: pointer;
-    padding: 8px 4px;
+    padding: 8px 2px;
     text-align: center;
     background: #ffffff;
     color: var(--ink-light);
     border-radius: 5px;
     font-family: Roboto;
-    font-size: 13px;
-    font-weight: 500;
-    transition: background 0.5s, color 0.5s ease;
+    font-size: 14px;
+    font-weight: 400;
+    transition: all 0.3s;
     text-rendering: optimizeLegibility;
   }
 
   .selected {
-    background: #808192;
+    background: var(--ink-light);
     color: #ffffff;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
index 9081694c0c..ffa1a98393 100644
--- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@@ -1,6 +1,5 @@
 <script>
   import { onMount } from "svelte"
-
   import FlatButton from "./FlatButton.svelte"
   export let buttonProps = []
   export let isMultiSelect = false
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 96c11bec38..26e2365332 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -148,8 +148,7 @@ export const typography = [
   {
     label: "Color",
     key: "color",
-    control: OptionSelect,
-    options: ["black", "white", "red", "blue", "green"],
+    control: Input,
   },
   {
     label: "align",
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 072bc143ac..ed084afbef 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -295,7 +295,7 @@ export default {
           description:
             "This component is a placeholder for the rendering of a screen within a page.",
           icon: "ri-crop-2-fill",
-          commonProps: {},
+          commonProps: { design: { ...all } },
           children: [],
         },
         {

From 8e019a3f6da1eb5e9bb96e03ea0c59dcd34f497f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 28 May 2020 09:37:54 +0100
Subject: [PATCH 28/51] Sweet transition

---
 .../builder/src/components/userInterface/ItemTab/Item.svelte   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index cd51e42564..e61d80aaa1 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -1,8 +1,9 @@
 <script>
+	import { fly } from 'svelte/transition';
   export let item
 </script>
 
-<div class="item-item" on:click>
+<div class="item-item" transition:fly="{{ y: 100, duration: 1000 }}" on:click>
   <div class="item-icon">
     <i class={item.icon} />
   </div>

From 904f6bb52a2a7ac3b8fe8d199fafd1107976235b Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 28 May 2020 10:45:59 +0100
Subject: [PATCH 29/51] bugfix: save record not wokring (wrong url)

---
 .../builder/src/components/database/ModelDataTable/api.js   | 6 +++---
 .../database/ModelDataTable/modals/CreateEditRecord.svelte  | 3 ++-
 .../src/components/nav/SchemaManagementDrawer.svelte        | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/database/ModelDataTable/api.js b/packages/builder/src/components/database/ModelDataTable/api.js
index c573814e88..c723676388 100644
--- a/packages/builder/src/components/database/ModelDataTable/api.js
+++ b/packages/builder/src/components/database/ModelDataTable/api.js
@@ -15,13 +15,13 @@ export async function createDatabase(appname, instanceName) {
 }
 
 export async function deleteRecord(record, instanceId) {
-  const DELETE_RECORDS_URL = `/api/${instanceId}/records/${record._id}/${record._rev}`
+  const DELETE_RECORDS_URL = `/api/${instanceId}/${record._modelId}/records/${record._id}/${record._rev}`
   const response = await api.delete(DELETE_RECORDS_URL)
   return response
 }
 
-export async function saveRecord(record, instanceId) {
-  const SAVE_RECORDS_URL = `/api/${instanceId}/records`
+export async function saveRecord(record, instanceId, modelId) {
+  const SAVE_RECORDS_URL = `/api/${instanceId}/${modelId}/records`
   const response = await api.post(SAVE_RECORDS_URL, record)
 
   return await response.json()
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
index d957a99f02..49749a70a1 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -42,7 +42,8 @@
         ...record,
         modelId: $backendUiStore.selectedModel._id,
       },
-      instanceId
+      instanceId,
+      $backendUiStore.selectedModel._id
     )
     if (recordResponse.errors) {
       errors = recordResponse.errors
diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
index cc9e5d86a7..5fb6ed6c25 100644
--- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
+++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
@@ -46,7 +46,7 @@
   function selectModel(model) {
     backendUiStore.update(state => {
       state.selectedModel = model
-      state.selectedView = `all_${model._id}`
+      state.selectedView = `${model._id}`
       return state
     })
   }

From 53ff560e428cb01c0c562abe0be130fb329c14fd Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 28 May 2020 15:39:29 +0100
Subject: [PATCH 30/51] server side record validation

---
 packages/server/package.json                  |   2 +-
 packages/server/src/api/controllers/record.js |  44 +++-
 packages/server/src/api/routes/model.js       |   5 +
 .../src/api/routes/tests/couchTestUtils.js    |   7 +-
 .../src/api/routes/tests/record.spec.js       |  47 ++++-
 packages/server/yarn.lock                     | 197 +++++++++++++++++-
 6 files changed, 277 insertions(+), 25 deletions(-)

diff --git a/packages/server/package.json b/packages/server/package.json
index 156a25aa0b..023ee7c67f 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -44,7 +44,6 @@
     "@budibase/client": "^0.0.32",
     "@budibase/core": "^0.0.32",
     "@koa/router": "^8.0.0",
-    "ajv": "^6.12.2",
     "bcryptjs": "^2.4.3",
     "dotenv": "^8.2.0",
     "electron-is-dev": "^1.2.0",
@@ -66,6 +65,7 @@
     "squirrelly": "^7.5.0",
     "tar-fs": "^2.0.0",
     "uuid": "^3.3.2",
+    "validate.js": "^0.13.1",
     "yargs": "^13.2.4",
     "zlib": "^1.0.5"
   },
diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js
index 7a5b045136..2fd81ffd8c 100644
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@@ -1,9 +1,7 @@
 const CouchDB = require("../../db")
-const Ajv = require("ajv")
+const validateJs = require("validate.js")
 const newid = require("../../db/newid")
 
-const ajv = new Ajv()
-
 exports.save = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
   const record = ctx.request.body
@@ -13,18 +11,18 @@ exports.save = async function(ctx) {
     record._id = newid()
   }
 
-  // validation with ajv
   const model = await db.get(record.modelId)
-  const validate = ajv.compile({
-    properties: model.schema,
-  })
-  const valid = validate(record)
 
-  if (!valid) {
+  const validateResult = await validate({
+    record,
+    model,
+  })
+
+  if (!validateResult.valid) {
     ctx.status = 400
     ctx.body = {
       status: 400,
-      errors: validate.errors,
+      errors: validateResult.errors,
     }
     return
   }
@@ -84,3 +82,29 @@ exports.destroy = async function(ctx) {
   }
   ctx.body = await db.remove(ctx.params.recordId, ctx.params.revId)
 }
+
+exports.validate = async function(ctx) {
+  const errors = await validate({
+    instanceId: ctx.params.instanceId,
+    modelId: ctx.params.modelId,
+    record: ctx.request.body,
+  })
+  ctx.status = 200
+  ctx.body = errors
+}
+
+async function validate({ instanceId, modelId, record, model }) {
+  if (!model) {
+    const db = new CouchDB(instanceId)
+    model = await db.get(modelId)
+  }
+  const errors = {}
+  for (let fieldName in model.schema) {
+    const res = validateJs.single(
+      record[fieldName],
+      model.schema[fieldName].constraints
+    )
+    if (res) errors[fieldName] = res
+  }
+  return { valid: Object.keys(errors).length === 0, errors }
+}
diff --git a/packages/server/src/api/routes/model.js b/packages/server/src/api/routes/model.js
index d9eb5cf798..831aefd7f6 100644
--- a/packages/server/src/api/routes/model.js
+++ b/packages/server/src/api/routes/model.js
@@ -28,6 +28,11 @@ router
     authorized(WRITE_MODEL, ctx => ctx.params.modelId),
     recordController.save
   )
+  .post(
+    "/api/:instanceId/:modelId/records/validate",
+    authorized(WRITE_MODEL, ctx => ctx.params.modelId),
+    recordController.validate
+  )
   .delete(
     "/api/:instanceId/:modelId/records/:recordId/:revId",
     authorized(WRITE_MODEL, ctx => ctx.params.modelId),
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index de4ed7f87e..1f2017dcf0 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -27,7 +27,12 @@ exports.createModel = async (request, instanceId, model) => {
     type: "model",
     key: "name",
     schema: {
-      name: { type: "string" },
+      name: {
+        type: "text",
+        constraints: {
+          type: "string",
+        },
+      },
     },
   }
 
diff --git a/packages/server/src/api/routes/tests/record.spec.js b/packages/server/src/api/routes/tests/record.spec.js
index 16af0b6031..07e4d3cc4c 100644
--- a/packages/server/src/api/routes/tests/record.spec.js
+++ b/packages/server/src/api/routes/tests/record.spec.js
@@ -25,17 +25,17 @@ describe("/records", () => {
     server.close();
   })
 
-  describe("save, load, update, delete", () => {
+  beforeEach(async () => {
+    instance = await createInstance(request, app._id)
+    model = await createModel(request, instance._id)
+    record = {
+      name: "Test Contact",
+      status: "new",
+      modelId: model._id
+    }
+  })
 
-    beforeEach(async () => {
-      instance = await createInstance(request, app._id)
-      model = await createModel(request, instance._id)
-      record = {
-        name: "Test Contact",
-        status: "new",
-        modelId: model._id
-      }
-    })
+  describe("save, load, update, delete", () => {
 
     const createRecord = async r => 
       await request
@@ -119,4 +119,31 @@ describe("/records", () => {
         .expect(404)
     })
   })
+
+  describe("validate", () => {
+    it("should return no errors on valid record", async () => {
+      const result = await request
+        .post(`/api/${instance._id}/${model._id}/records/validate`)
+        .send({ name: "ivan" })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+      
+      expect(result.body.valid).toBe(true)
+      expect(Object.keys(result.body.errors)).toEqual([])
+    })
+
+    it("should errors on invalid record", async () => {
+      const result = await request
+        .post(`/api/${instance._id}/${model._id}/records/validate`)
+        .send({ name: 1 })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+      
+      expect(result.body.valid).toBe(false)
+      expect(Object.keys(result.body.errors)).toEqual(["name"])
+
+    })
+  })
 })
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 8a64a7cb8a..ce52984cdf 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -194,6 +194,20 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@budibase/client@^0.0.32":
+  version "0.0.32"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496"
+  integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A==
+  dependencies:
+    "@nx-js/compiler-util" "^2.0.0"
+    bcryptjs "^2.4.3"
+    deep-equal "^2.0.1"
+    lodash "^4.17.15"
+    lunr "^2.3.5"
+    regexparam "^1.3.0"
+    shortid "^2.2.8"
+    svelte "^3.9.2"
+
 "@budibase/core@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa"
@@ -655,7 +669,7 @@ ajv-keywords@^3.4.1:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
   integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
 
-ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.2:
+ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0:
   version "6.12.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.2.tgz#c629c5eced17baf314437918d2da88c99d5958cd"
   integrity sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==
@@ -825,6 +839,11 @@ 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"
@@ -897,6 +916,13 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1612,6 +1638,26 @@ 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"
@@ -1965,7 +2011,7 @@ error-inject@^1.0.0:
   resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37"
   integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc=
 
-es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
   version "1.17.5"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
   integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
@@ -1982,6 +2028,19 @@ 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-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"
@@ -2967,11 +3026,21 @@ 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"
@@ -2979,6 +3048,11 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3015,7 +3089,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -3090,11 +3164,21 @@ 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"
@@ -3131,11 +3215,21 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
+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"
@@ -3152,11 +3246,31 @@ 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"
@@ -3182,6 +3296,11 @@ 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"
@@ -4589,6 +4708,14 @@ 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"
@@ -5310,6 +5437,19 @@ 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"
@@ -5638,6 +5778,14 @@ shortid@^2.2.8:
   dependencies:
     nanoid "^2.1.0"
 
+side-channel@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
+  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    object-inspect "^1.7.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -6046,6 +6194,11 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte@^3.9.2:
+  version "3.23.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.23.0.tgz#bbcd6887cf588c24a975b14467455abfff9acd3f"
+  integrity sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw==
+
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -6458,6 +6611,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+validate.js@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.13.1.tgz#b58bfac04a0f600a340f62e5227e70d95971e92a"
+  integrity sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g==
+
 vary@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -6526,11 +6684,44 @@ 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 8f731286219f51ce75cfac6cc90e281d080fa31f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 28 May 2020 19:41:07 +0100
Subject: [PATCH 31/51] Update propertyCategories.js

New fonts added
Z-index added
initial values changed
Position fixed
New position props added
Background color changed to an input
---
 .../userInterface/propertyCategories.js       | 98 ++++++++++++++-----
 1 file changed, 75 insertions(+), 23 deletions(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 26e2365332..a0ca139459 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -11,9 +11,8 @@ export const layout = [
     label: "Display",
     key: "display",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Flex",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -22,9 +21,8 @@ export const layout = [
     label: "Direction",
     key: "flex-direction",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Row",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Row", value: "row" },
       { label: "Row Reverse", value: "rowReverse" },
       { label: "column", value: "column" },
@@ -35,9 +33,8 @@ export const layout = [
     label: "Justify",
     key: "justify-content",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Flex Start",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -50,9 +47,8 @@ export const layout = [
     label: "Align",
     key: "align-items",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Flex Start",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -66,7 +62,6 @@ export const layout = [
     control: OptionSelect,
     initialValue: "Wrap",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Wrap", value: "wrap" },
       { label: "No Wrap", value: "nowrap" },
       { label: "Wrap Reverse", value: "wrap-reverse" },
@@ -80,8 +75,13 @@ const spacingMeta = [
   { placeholder: "R" },
   { placeholder: "T" },
 ]
+
 export const spacing = [
-  { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
+  { label: "Margin", 
+    key: "margin", 
+    control: InputGroup, 
+    meta: spacingMeta 
+  },
   {
     label: "Padding",
     key: "padding",
@@ -104,14 +104,40 @@ export const position = [
     label: "Position",
     key: "position",
     control: OptionSelect,
+    initialValue: "Wrap",
     options: [
-      { label: "static" },
-      { label: "relative" },
-      { label: "fixed" },
-      { label: "absolute" },
-      { label: "sticky" },
+      { label: "Static", value: "static"},
+      { label: "Relative", value: "relative"},
+      { label: "Fixed", value: "fixed"},
+      { label: "Absolute", value: "absolute"},
+      { label: "Sticky", value: "sticky"},
     ],
   },
+  {
+    label: "Top",
+    key: "top",
+    control: Input,
+  },
+  {
+    label: "Right",
+    key: "right",
+    control: Input,
+  },
+  {
+    label: "Bottom",
+    key: "bottom",
+    control: Input,
+  },
+  {
+    label: "Left",
+    key: "left",
+    control: Input,
+  },
+  {
+    label: "Z-index",
+    key: "z-index",
+    control: Input,
+  },
 ]
 
 export const typography = [
@@ -122,13 +148,21 @@ export const typography = [
     defaultValue: "initial",
     options: [
       "initial",
-      "Times New Roman",
-      "Georgia",
       "Arial",
       "Arial Black",
+      "Cursive",
+      "Courier",
       "Comic Sans MS",
+      "Helvetica",
       "Impact",
+      "Inter",
       "Lucida Sans Unicode",
+      "Open Sans",
+      "Playfair",
+      "Roboto",
+      "Roboto Mono",
+      "Times New Roman",
+      "Verdana",
     ],
     styleBindingProperty: "font-family",
   },
@@ -164,8 +198,7 @@ export const background = [
   {
     label: "Background",
     key: "background",
-    control: OptionSelect,
-    options: ["black", "white", "red", "blue", "green"],
+    control: Input,
   },
   { label: "Image", key: "image", control: Input }, //custom
 ]
@@ -176,15 +209,34 @@ export const border = [
   {
     label: "Color",
     key: "border-color",
-    control: OptionSelect,
-    options: ["black", "white", "red", "blue", "green"],
+    control: Input,
   },
-  { label: "Style", key: "border-style", control: Input },
+  { 
+    label: "Style", 
+    key: "border-style", 
+    control: OptionSelect,
+    options: ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"],
+   },
 ]
 
 export const effects = [
   { label: "Opacity", key: "opacity", control: Input },
-  { label: "Rotate", key: "transform", control: Input }, //needs special control
+  { label: "Rotate", 
+    key: "transform", 
+    control: OptionSelect,
+    options: [
+      {label: "None", value:"rotate(0deg)"}, 
+      {label: "45 degrees", value:"rotate(45deg)"}, 
+      {label: "90 degrees", value:"rotate(90deg)"}, 
+      {label: "135 degrees", value:"rotate(135deg)"}, 
+      {label: "180 degrees", value:"rotate(180deg)"}, 
+      {label: "225 degrees", value:"rotate(225deg)"}, 
+      {label: "270 degrees", value:"rotate(270deg)"}, 
+      {label: "315 degrees", value:"rotate(315deg)"}, 
+      {label: "360 degrees", value:"rotate(360deg)"}, 
+    ],
+  }
+    , //needs special control
   { label: "Shadow", key: "box-shadow", control: Input },
 ]
 

From 13cdc81196a7ed7fc76b7b52b4853b0e615621d5 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 28 May 2020 19:42:33 +0100
Subject: [PATCH 32/51] formatting

---
 .../src/components/common/Icons/Close.svelte  | 11 +++-
 .../src/components/common/Icons/Info.svelte   |  7 ++-
 .../src/components/start/AppCard.svelte       | 22 +++----
 .../src/components/start/AppList.svelte       | 10 +--
 .../userInterface/ItemTab/Item.svelte         |  4 +-
 .../userInterface/propertyCategories.js       | 63 ++++++++++---------
 6 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/packages/builder/src/components/common/Icons/Close.svelte b/packages/builder/src/components/common/Icons/Close.svelte
index e39564d9ad..b6cacd076c 100644
--- a/packages/builder/src/components/common/Icons/Close.svelte
+++ b/packages/builder/src/components/common/Icons/Close.svelte
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414
+    1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+</svg>
diff --git a/packages/builder/src/components/common/Icons/Info.svelte b/packages/builder/src/components/common/Icons/Info.svelte
index 162a9b3887..ea9779858d 100644
--- a/packages/builder/src/components/common/Icons/Info.svelte
+++ b/packages/builder/src/components/common/Icons/Info.svelte
@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
+    10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z" />
+</svg>
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index a54012ac0a..2608bfa370 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,24 +1,20 @@
 <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,
+    description = `A minimalist CRM which removes the noise and allows you to focus
+              on your business.`,
+    _id
 </script>
 
 <div class="apps-card">
   <h3 class="app-title">{name}</h3>
-  <p class="app-desc">
-    {description}
-  </p>
+  <p class="app-desc">{description}</p>
   <div class="card-footer">
     <div class="modified-date">Last Edited - 25th May 2020</div>
-    <a href={`/_builder/${_id}`} class="app-button">
-      Open Web App
-    </a>
+    <a href={`/_builder/${_id}`} class="app-button">Open Web App</a>
   </div>
 </div>
-          
+
 <style>
   .apps-card {
     background-color: var(--white);
@@ -33,7 +29,7 @@
     background-color: var(--grey-light);
     text-decoration: none;
   }
-  
+
   .app-title {
     font-size: 18px;
     font-weight: 700;
@@ -69,4 +65,4 @@
     transition: all 0.2s;
     box-sizing: border-box;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index e3b1f572e1..a0eacbc470 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -13,11 +13,11 @@
     <div>
       <div>
         <div class="app-section-title">Your Web Apps</div>
-          <div class="apps">
-            {#each apps as app}
-              <AppCard {...app} />
-            {/each}
-          </div>
+        <div class="apps">
+          {#each apps as app}
+            <AppCard {...app} />
+          {/each}
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index e61d80aaa1..d4576055c6 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -1,9 +1,9 @@
 <script>
-	import { fly } from 'svelte/transition';
+  import { fly } from "svelte/transition"
   export let item
 </script>
 
-<div class="item-item" transition:fly="{{ y: 100, duration: 1000 }}" on:click>
+<div class="item-item" transition:fly={{ y: 100, duration: 1000 }} on:click>
   <div class="item-icon">
     <i class={item.icon} />
   </div>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index a0ca139459..dde62f7e5a 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -77,11 +77,7 @@ const spacingMeta = [
 ]
 
 export const spacing = [
-  { label: "Margin", 
-    key: "margin", 
-    control: InputGroup, 
-    meta: spacingMeta 
-  },
+  { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
   {
     label: "Padding",
     key: "padding",
@@ -106,11 +102,11 @@ export const position = [
     control: OptionSelect,
     initialValue: "Wrap",
     options: [
-      { label: "Static", value: "static"},
-      { label: "Relative", value: "relative"},
-      { label: "Fixed", value: "fixed"},
-      { label: "Absolute", value: "absolute"},
-      { label: "Sticky", value: "sticky"},
+      { label: "Static", value: "static" },
+      { label: "Relative", value: "relative" },
+      { label: "Fixed", value: "fixed" },
+      { label: "Absolute", value: "absolute" },
+      { label: "Sticky", value: "sticky" },
     ],
   },
   {
@@ -211,32 +207,43 @@ export const border = [
     key: "border-color",
     control: Input,
   },
-  { 
-    label: "Style", 
-    key: "border-style", 
+  {
+    label: "Style",
+    key: "border-style",
     control: OptionSelect,
-    options: ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"],
-   },
+    options: [
+      "none",
+      "hidden",
+      "dotted",
+      "dashed",
+      "solid",
+      "double",
+      "groove",
+      "ridge",
+      "inset",
+      "outset",
+    ],
+  },
 ]
 
 export const effects = [
   { label: "Opacity", key: "opacity", control: Input },
-  { label: "Rotate", 
-    key: "transform", 
+  {
+    label: "Rotate",
+    key: "transform",
     control: OptionSelect,
     options: [
-      {label: "None", value:"rotate(0deg)"}, 
-      {label: "45 degrees", value:"rotate(45deg)"}, 
-      {label: "90 degrees", value:"rotate(90deg)"}, 
-      {label: "135 degrees", value:"rotate(135deg)"}, 
-      {label: "180 degrees", value:"rotate(180deg)"}, 
-      {label: "225 degrees", value:"rotate(225deg)"}, 
-      {label: "270 degrees", value:"rotate(270deg)"}, 
-      {label: "315 degrees", value:"rotate(315deg)"}, 
-      {label: "360 degrees", value:"rotate(360deg)"}, 
+      { label: "None", value: "rotate(0deg)" },
+      { label: "45 degrees", value: "rotate(45deg)" },
+      { label: "90 degrees", value: "rotate(90deg)" },
+      { label: "135 degrees", value: "rotate(135deg)" },
+      { label: "180 degrees", value: "rotate(180deg)" },
+      { label: "225 degrees", value: "rotate(225deg)" },
+      { label: "270 degrees", value: "rotate(270deg)" },
+      { label: "315 degrees", value: "rotate(315deg)" },
+      { label: "360 degrees", value: "rotate(360deg)" },
     ],
-  }
-    , //needs special control
+  }, //needs special control
   { label: "Shadow", key: "box-shadow", control: Input },
 ]
 

From 0d637260beae86996779ca8032275271fe35440b Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 28 May 2020 22:26:32 +0100
Subject: [PATCH 33/51] create model & record - validation hooked up again

---
 .../modals/CreateEditModel/FieldView.svelte   | 52 +++++++++++--------
 .../modals/CreateEditRecord.svelte            | 25 ++++++---
 .../modals/RecordFieldControl.svelte          | 26 ++++++++--
 3 files changed, 69 insertions(+), 34 deletions(-)

diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
index 65934a032d..ae78405ccb 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
@@ -13,17 +13,33 @@
 
   const FIELD_TYPES = ["string", "number", "boolean"]
 
-  export let field = { type: "string" }
+  export let field = { type: "string", constraints: { type: "string", presence: false } }
   export let schema
   export let goBack
 
   let errors = []
   let draftField = cloneDeep(field)
+  
+  let type = field.type
+  let constraints = field.constraints
+  let required = field.constraints.presence && !field.constraints.presence.allowEmpty
 
   const save = () => {
+    constraints.presence = required ? { allowEmpty: false } : false
+    draftField.constraints = constraints
+    draftField.type = type
     schema[field.name] = draftField
     goBack()
   }
+  
+  $: constraints = 
+      type === "string" ? { type: "string", length: {}, presence: false }
+      : type === "number" ? { type: "number", presence: false, numericality: {} }
+      : type === "boolean" ? { type: "boolean", presence: false }
+      : type === "datetime" ? { type: "date", datetime: {}, presence: false }
+      : type.startsWith('array') ? { type: "array", presence: false }
+      : { type: "string", presence: false }
+      
 </script>
 
 <div class="root">
@@ -34,30 +50,22 @@
     <Textbox label="Name" bind:text={field.name} />
     <Dropdown
       label="Type"
-      bind:selected={draftField.type}
+      bind:selected={type}
       options={FIELD_TYPES} />
+    
+    <Checkbox label="Required" bind:checked={required} />
+    
 
-    {#if field.type === 'string'}
-      <NumberBox label="Max Length" bind:value={draftField.maxLength} />
-      <ValuesList label="Categories" bind:values={draftField.values} />
-    {:else if field.type === 'boolean'}
+    {#if type === 'string'}
+      <NumberBox label="Max Length" bind:value={constraints.length.maximum} />
+      <ValuesList label="Categories" bind:values={constraints.inclusion} />
+    {:else if type === 'datetime'}
       <!-- TODO: revisit and fix with JSON schema -->
-      <Checkbox label="Allow Null" bind:checked={draftField.allowNulls} />
-    {:else if field.format === 'datetime'}
-      <!-- TODO: revisit and fix with JSON schema -->
-      <DatePicker label="Min Value" bind:value={draftField.minValue} />
-      <DatePicker label="Max Value" bind:value={draftField.maxValue} />
-    {:else if field.type === 'number'}
-      <NumberBox label="Min Value" bind:value={draftField.minimum} />
-      <NumberBox label="Max Value" bind:value={draftField.maximum} />
-    {:else if draftField.type.startsWith('array')}
-      <!-- TODO: revisit and fix with JSON schema -->
-      <NumberBox
-        label="Min Length"
-        bind:value={draftField.typeOptions.minLength} />
-      <NumberBox
-        label="Max Length"
-        bind:value={draftField.typeOptions.maxLength} />
+      <DatePicker label="Min Value" bind:value={constraints.datetime.earliest} />
+      <DatePicker label="Max Value" bind:value={constraints.datetime.latest} />
+    {:else if type === 'number'}
+      <NumberBox label="Min Value" bind:value={constraints.numericality.greaterThanOrEqualTo} />
+      <NumberBox label="Max Value" bind:value={constraints.numericality.lessThanOrEqualTo} />
     {/if}
   </form>
 </div>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
index 49749a70a1..d5320eca0d 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -8,10 +8,6 @@
   import * as api from "../api"
   import ErrorsBox from "components/common/ErrorsBox.svelte"
 
-  const CLASS_NAME_MAP = {
-    boolean: "uk-checkbox",
-  }
-
   export let record = {}
   export let onClosed
 
@@ -27,14 +23,25 @@
   function closed() {
     onClosed()
   }
-
+  
+  const isSelect = meta =>
+    meta.type === "string" 
+    && meta.constraints 
+    && meta.constraints.inclusion 
+    && meta.constraints.inclusion.length > 0
+    
   function determineInputType(meta) {
     if (meta.type === "datetime") return "date"
     if (meta.type === "number") return "number"
     if (meta.type === "boolean") return "checkbox"
-
+    if (isSelect(meta)) return "select"
+        
     return "text"
   }
+  
+  function determineOptions(meta) {
+    return isSelect(meta) ? meta.constraints.inclusion : []
+  }
 
   async function saveRecord() {
     const recordResponse = await api.saveRecord(
@@ -46,7 +53,9 @@
       $backendUiStore.selectedModel._id
     )
     if (recordResponse.errors) {
-      errors = recordResponse.errors
+      errors = Object.keys(recordResponse.errors)
+                .map(k => ({dataPath: k,  message: recordResponse.errors[k]}))
+                .flat()
       return
     }
 
@@ -65,8 +74,8 @@
     {#each modelSchema as [key, meta]}
       <div class="uk-margin">
         <RecordFieldControl
-          className={CLASS_NAME_MAP[meta.type]}
           type={determineInputType(meta)}
+          options={determineOptions(meta)}
           label={key}
           bind:value={record[key]} />
       </div>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
index 0839180601..b0571a2353 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
@@ -3,10 +3,16 @@
   export let value = ""
   export let label
   export let errors = []
-  export let className = "uk-input"
-
+  export let options = []
+  
   let checked = type === "checkbox" ? value : false
-
+  
+  const determineClassName = type => {
+    if (type === "checkbox") return "uk-checkbox"
+    if (type === "select") return "uk-select"
+    return "uk-input"
+  }
+    
   const handleInput = event => {
     if (event.target.type === "checkbox") {
       value = event.target.checked
@@ -23,11 +29,23 @@
 </script>
 
 <label>{label}</label>
+
+{#if type === "select"}
+<select 
+  class={determineClassName(type)}
+  bind:value={value}
+  class:uk-form-danger={errors.length > 0} >
+  {#each options as opt}
+    <option value={opt}>{ opt }</option>
+  {/each}
+</select>
+{:else}
 <input
-  class={className}
+  class={determineClassName(type)}
   class:uk-form-danger={errors.length > 0}
   {checked}
   {type}
   {value}
   on:input={handleInput}
   on:change={handleInput} />
+{/if}

From 17e6bf261bad17e6eb1e87c6f121daef4e9c56d5 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 29 May 2020 09:20:29 +0100
Subject: [PATCH 34/51] Font numerical weights added and line decorations added

---
 .../userInterface/propertyCategories.js       | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index dde62f7e5a..831caf0730 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -167,10 +167,16 @@ export const typography = [
     key: "font-weight",
     control: OptionSelect,
     options: [
-      { label: "normal" },
-      { label: "bold" },
-      { label: "bolder" },
-      { label: "lighter" },
+      { label: "100", value:"100"},
+      { label: "200", value:"200"},
+      { label: "300", value:"300"},
+      { label: "400", value:"400"},
+      { label: "500", value:"500"},
+      { label: "600", value:"600"},
+      { label: "700", value:"700"},
+      { label: "800", value:"800"},
+      { label: "900", value:"900"},
+
     ],
   },
   { label: "size", key: "font-size", defaultValue: "", control: Input },
@@ -186,6 +192,21 @@ export const typography = [
     control: OptionSelect,
     options: ["initial", "left", "right", "center", "justify"],
   }, //custom
+  {
+    label: "Decoration",
+    key: "text-decoration-line",
+    control: OptionSelect,
+    defaultValue: "Underline",
+    options: [
+      {label: "Underline", value: "underline"}, 
+      {label: "None", value: "none"}, 
+      {label: "Overline", value: "overline"}, 
+      {label: "Line-through", value: "line-through"}, 
+      {label: "Under Over", value: "underline overline"}, 
+
+    ],
+  }, 
+
   { label: "transform", key: "text-transform", control: Input }, //custom
   { label: "style", key: "font-style", control: Input }, //custom
 ]

From 69d6109c33c40737e7766c9c23f5af5dd0947c99 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 29 May 2020 09:39:47 +0100
Subject: [PATCH 35/51] Update propertyCategories.js

---
 .../userInterface/propertyCategories.js       | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 831caf0730..eaa2f41245 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -167,16 +167,15 @@ export const typography = [
     key: "font-weight",
     control: OptionSelect,
     options: [
-      { label: "100", value:"100"},
-      { label: "200", value:"200"},
-      { label: "300", value:"300"},
-      { label: "400", value:"400"},
-      { label: "500", value:"500"},
-      { label: "600", value:"600"},
-      { label: "700", value:"700"},
-      { label: "800", value:"800"},
-      { label: "900", value:"900"},
-
+      { label: "100", value: "100" },
+      { label: "200", value: "200" },
+      { label: "300", value: "300" },
+      { label: "400", value: "400" },
+      { label: "500", value: "500" },
+      { label: "600", value: "600" },
+      { label: "700", value: "700" },
+      { label: "800", value: "800" },
+      { label: "900", value: "900" },
     ],
   },
   { label: "size", key: "font-size", defaultValue: "", control: Input },
@@ -198,14 +197,13 @@ export const typography = [
     control: OptionSelect,
     defaultValue: "Underline",
     options: [
-      {label: "Underline", value: "underline"}, 
-      {label: "None", value: "none"}, 
-      {label: "Overline", value: "overline"}, 
-      {label: "Line-through", value: "line-through"}, 
-      {label: "Under Over", value: "underline overline"}, 
-
+      { label: "Underline", value: "underline" },
+      { label: "None", value: "none" },
+      { label: "Overline", value: "overline" },
+      { label: "Line-through", value: "line-through" },
+      { label: "Under Over", value: "underline overline" },
     ],
-  }, 
+  },
 
   { label: "transform", key: "text-transform", control: Input }, //custom
   { label: "style", key: "font-style", control: Input }, //custom

From 4a6a06b53296cfeff961f7987901370e2bd47f5b Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 29 May 2020 09:40:53 +0100
Subject: [PATCH 36/51] bugfix: restoring design props to screenslot

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

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index ed084afbef..54c8b57550 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -295,7 +295,8 @@ export default {
           description:
             "This component is a placeholder for the rendering of a screen within a page.",
           icon: "ri-crop-2-fill",
-          commonProps: { design: { ...all } },
+          properties: { design: { ...all } },
+          commonProps: {},
           children: [],
         },
         {

From 71f61d633206b383dc2c9e6c22d03fe7b8f4e0c3 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 29 May 2020 10:57:00 +0100
Subject: [PATCH 37/51] Cleaning up the panel UI by removing inner borders

---
 .../builder/src/components/nav/BackendNav.svelte |  1 -
 .../userInterface/UserInterfaceRoot.svelte       | 16 ++--------------
 .../pages/[application]/frontend/_layout.svelte  |  3 ---
 3 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index 8a7fd6bb90..173e92d98b 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/packages/builder/src/components/nav/BackendNav.svelte
@@ -45,7 +45,6 @@
       <DatabasesList />
     </div>
   </div>
-  <hr />
   {#if $backendUiStore.selectedDatabase._id}
     <div class="hierarchy">
       <div class="components-list-container">
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index 13d7a7e2a1..f4581286df 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -42,7 +42,6 @@
     <div class="pages-list-container">
       <div class="nav-header">
         <span class="navigator-title">Navigator</span>
-        <div class="border-line" />
 
         <span class="components-nav-page">Pages</span>
       </div>
@@ -52,11 +51,9 @@
       </div>
     </div>
 
-    <div class="border-line" />
 
     <PageLayout layout={$store.pages[$store.currentPageName]} />
 
-    <div class="border-line" />
 
     <div class="components-list-container">
       <div class="nav-group-header">
@@ -114,21 +111,12 @@
 
   .root {
     display: grid;
-    grid-template-columns: 275px 1fr 300px;
+    grid-template-columns: 300px 1fr 300px;
     height: 100%;
     width: 100%;
-    background: #fafafa;
+    background: #FBFBFB;
   }
 
-  @media only screen and (min-width: 1800px) {
-    .root {
-      display: grid;
-      grid-template-columns: 300px 1fr 300px;
-      height: 100%;
-      width: 100%;
-      background: #fafafa;
-    }
-  }
 
   .ui-nav {
     grid-column: 1;
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index c480a75bfa..9042301cd6 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -63,12 +63,9 @@
       </div>
     </div>
 
-    <div class="border-line" />
 
     <PageLayout layout={$store.pages[$store.currentPageName]} />
 
-    <div class="border-line" />
-
     <div class="components-list-container">
       <div class="nav-group-header">
         <span class="components-nav-header" style="margin-top: 0;">

From 1353e229e8c9592ca2eae8513882e64e53a3d40e Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 29 May 2020 13:24:33 +0100
Subject: [PATCH 38/51] Media queries removed

---
 .../src/pages/[application]/backend/_layout.svelte    | 10 +---------
 .../src/pages/[application]/frontend/_layout.svelte   | 11 +----------
 2 files changed, 2 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte
index 069e720b17..84b09986fa 100644
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/_layout.svelte
@@ -34,16 +34,8 @@
   .nav {
     overflow: auto;
     flex: 0 1 auto;
-    width: 275px;
+    width: 300px;
     height: 100%;
   }
 
-  @media only screen and (min-width: 1800px) {
-    .nav {
-      overflow: auto;
-      flex: 0 1 auto;
-      width: 300px;
-      height: 100%;
-    }
-  }
 </style>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 9042301cd6..9adf71987f 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -123,20 +123,11 @@
 
   .root {
     display: grid;
-    grid-template-columns: 275px 1fr 275px;
+    grid-template-columns: 300px 1fr 300px;
     width: 100%;
     background: var(--grey-light);
   }
 
-  @media only screen and (min-width: 1800px) {
-    .root {
-      display: grid;
-      grid-template-columns: 300px 1fr 300px;
-      width: 100%;
-      background: var(--grey-light);
-    }
-  }
-
   .ui-nav {
     grid-column: 1;
     background-color: var(--white);

From cc9a6204297b107054d51f650a10876cd0e2b86d Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 29 May 2020 13:25:27 +0100
Subject: [PATCH 39/51] formatting

---
 .../src/components/userInterface/UserInterfaceRoot.svelte    | 5 +----
 .../builder/src/pages/[application]/backend/_layout.svelte   | 1 -
 .../builder/src/pages/[application]/frontend/_layout.svelte  | 1 -
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index f4581286df..8b600047d8 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -51,10 +51,8 @@
       </div>
     </div>
 
-
     <PageLayout layout={$store.pages[$store.currentPageName]} />
 
-
     <div class="components-list-container">
       <div class="nav-group-header">
         <span class="components-nav-header" style="margin-top: 0;">
@@ -114,10 +112,9 @@
     grid-template-columns: 300px 1fr 300px;
     height: 100%;
     width: 100%;
-    background: #FBFBFB;
+    background: #fbfbfb;
   }
 
-
   .ui-nav {
     grid-column: 1;
     background-color: var(--white);
diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte
index 84b09986fa..0e36980c6c 100644
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/_layout.svelte
@@ -37,5 +37,4 @@
     width: 300px;
     height: 100%;
   }
-
 </style>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 9adf71987f..a8cbf56efd 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -63,7 +63,6 @@
       </div>
     </div>
 
-
     <PageLayout layout={$store.pages[$store.currentPageName]} />
 
     <div class="components-list-container">

From 6b00a079d1f25a6d0994c5105fc046595a07138e Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 29 May 2020 13:28:12 +0100
Subject: [PATCH 40/51] added common switcher component, and moved add
 component to left

---
 .../src/components/common/Switcher.svelte     |  74 ++++++++++
 .../ComponentSelectionList.svelte             |   2 +-
 .../ComponentsPaneSwitcher.svelte             |  81 -----------
 .../userInterface/FrontendNavigatePane.svelte | 126 +++++++++++++++++
 .../userInterface/ItemTab/Tab.svelte          |   1 -
 .../[application]/frontend/_layout.svelte     | 132 +++---------------
 6 files changed, 221 insertions(+), 195 deletions(-)
 create mode 100644 packages/builder/src/components/common/Switcher.svelte
 delete mode 100644 packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
 create mode 100644 packages/builder/src/components/userInterface/FrontendNavigatePane.svelte

diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte
new file mode 100644
index 0000000000..cf23e39507
--- /dev/null
+++ b/packages/builder/src/components/common/Switcher.svelte
@@ -0,0 +1,74 @@
+<script>
+  export let tabs = []
+  export const selectTab = tabName => {
+    selected = tabName
+    selectedIndex = tabs.indexOf(selected)
+  }
+
+  let selected = tabs.length > 0 && tabs[0]
+  let selectedIndex = 0
+
+  const isSelected = tab => selected === tab
+
+  
+
+</script>
+
+<div class="root">
+
+  <div class="switcher">
+
+    {#each tabs as tab}
+      <button
+        class:selected={selected === tab}
+        on:click={() => selectTab(tab)}>
+        {tab}
+      </button>
+    {/each}
+
+  </div>
+
+  <div class="panel">
+    {#if selectedIndex === 0}
+      <slot name="0"></slot>
+    {:else if selectedIndex === 1}
+      <slot name="1"></slot>
+    {:else if selectedIndex === 2}
+      <slot name="2"></slot>
+    {:else if selectedIndex === 3}
+      <slot name="3"></slot>
+    {/if}
+  </div>
+
+</div>
+
+<style>
+  .root {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 20px 20px;
+    border-left: solid 1px var(--grey);
+  }
+
+  .switcher {
+    display: flex;
+    margin: 0px 20px 20px 0px;
+  }
+
+  .switcher > button {
+    display: inline-block;
+    border: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--ink-lighter);
+    margin-right: 20px;
+  }
+
+  .switcher > .selected {
+    color: var(--ink);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 0bf848e4a8..2a46e5d6f6 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -32,7 +32,7 @@
 
   const onComponentChosen = component => {
     store.addChildComponent(component._component)
-    toggleTab()
+    toggleTab("Navigate")
   }
 </script>
 
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
deleted file mode 100644
index de523cd7bf..0000000000
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script>
-  import { store } from "builderStore/"
-  import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
-  import ComponentSelectionList from "./ComponentSelectionList.svelte"
-
-  const PROPERTIES_TAB = "properties"
-  const COMPONENT_SELECTION_TAB = "components"
-
-  let selected = PROPERTIES_TAB
-
-  const isSelected = tab => selected === tab
-
-  const selectTab = tab => (selected = tab)
-
-  const toggleTab = () =>
-    (selected =
-      selected === PROPERTIES_TAB ? COMPONENT_SELECTION_TAB : PROPERTIES_TAB)
-</script>
-
-<div class="root">
-  {#if $store.currentFrontEndType === 'page' || $store.screens.length}
-    <div class="switcher">
-
-      <button
-        class:selected={selected === COMPONENT_SELECTION_TAB}
-        on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
-        Add
-      </button>
-
-      <button
-        class:selected={selected === PROPERTIES_TAB}
-        on:click={() => selectTab(PROPERTIES_TAB)}>
-        Edit
-      </button>
-
-    </div>
-
-    <div class="panel">
-      {#if selected === PROPERTIES_TAB}
-        <ComponentPropertiesPanel {toggleTab} />
-      {/if}
-
-      {#if selected === COMPONENT_SELECTION_TAB}
-        <ComponentSelectionList {toggleTab} />
-      {/if}
-
-    </div>
-  {/if}
-
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 20px;
-    border-left: solid 1px var(--grey);
-  }
-
-  .switcher {
-    display: flex;
-    margin: 0px 20px 20px 0px;
-  }
-
-  .switcher > button {
-    display: inline-block;
-    border: none;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--ink-lighter);
-    margin-right: 20px;
-  }
-
-  .switcher > .selected {
-    color: var(--ink);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
new file mode 100644
index 0000000000..8b4b8e1843
--- /dev/null
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -0,0 +1,126 @@
+<script>
+  import { store, backendUiStore } from "builderStore"
+  import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
+  import PageLayout from "components/userInterface/PageLayout.svelte"
+  import PagesList from "components/userInterface/PagesList.svelte"
+  import { AddIcon } from "components/common/Icons"
+  import NewScreen from "components/userInterface/NewScreen.svelte"
+  
+  const newScreen = () => {
+    newScreenPicker.show()
+  }
+
+  let newScreenPicker
+</script>
+
+<div class="pages-list-container">
+  <div class="nav-header">
+    <span class="navigator-title">Navigate</span>
+    <span class="components-nav-page">Pages</span>
+  </div>
+
+  <div class="nav-items-container">
+    <PagesList />
+  </div>
+</div>
+
+<div class="border-line" />
+
+<PageLayout layout={$store.pages[$store.currentPageName]} />
+
+<div class="border-line" />
+
+<div class="components-list-container">
+  <div class="nav-group-header">
+    <span class="components-nav-header" style="margin-top: 0;">
+      Screens
+    </span>
+    <div>
+      <button on:click={newScreen}>
+        <AddIcon />
+      </button>
+    </div>
+  </div>
+  <div class="nav-items-container">
+    <ComponentsHierarchy screens={$store.screens} />
+  </div>
+</div>
+
+<NewScreen bind:this={newScreenPicker} />
+
+<style>
+
+button {
+  cursor: pointer;
+  outline: none;
+  border: none;
+  border-radius: 5px;
+  width: 20px;
+  padding-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+.components-nav-page {
+  font-size: 13px;
+  color: var(--ink);
+  padding-left: 20px;
+  margin-top: 20px;
+  font-weight: 600;
+  opacity: 0.4;
+  letter-spacing: 1px;
+}
+
+.components-nav-header {
+  font-size: 13px;
+  color: var(--ink);
+  margin-top: 20px;
+  font-weight: 600;
+  opacity: 0.4;
+  letter-spacing: 1px;
+}
+
+.nav-header {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+}
+
+.nav-items-container {
+  padding: 1rem 0rem 0rem 0rem;
+}
+
+.nav-group-header {
+  display: flex;
+  padding: 0px 20px 0px 20px;
+  font-size: 0.9rem;
+  font-weight: bold;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav-group-header > span:nth-child(3) {
+  margin-left: 5px;
+  vertical-align: bottom;
+  grid-column-start: title;
+  margin-top: auto;
+}
+
+  .navigator-title {
+  font-size: 18px;
+  color: var(--ink);
+  font-weight: bold;
+  padding: 0 20px 20px 20px;
+}
+
+.border-line {
+  border-bottom: 1px solid #d8d8d8;
+}
+
+.components-list-container {
+  padding: 20px 0px 0 0;
+}
+
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
index 80f1733cc1..f811a56670 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
@@ -3,7 +3,6 @@
   const dispatch = createEventDispatcher()
 
   import Item from "./Item.svelte"
-  import { store } from "builderStore"
   export let list
 
   let category = list
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index c480a75bfa..deea52ce3e 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -2,18 +2,17 @@
   import { store, backendUiStore } from "builderStore"
   import { goto } from "@sveltech/routify"
   import { onMount } from "svelte"
-  import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
   import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
-  import PageLayout from "components/userInterface/PageLayout.svelte"
-  import PagesList from "components/userInterface/PagesList.svelte"
   import IconButton from "components/common/IconButton.svelte"
-  import NewScreen from "components/userInterface/NewScreen.svelte"
   import CurrentItemPreview from "components/userInterface/AppPreview"
   import PageView from "components/userInterface/PageView.svelte"
-  import ComponentsPaneSwitcher from "components/userInterface/ComponentsPaneSwitcher.svelte"
+  import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
+  import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
+  import Switcher from "components/common/Switcher.svelte"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last } from "lodash/fp"
   import { AddIcon } from "components/common/Icons"
+  import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
 
   $: instances = $store.appInstances
 
@@ -27,13 +26,10 @@
     }
   })
 
-  let newScreenPicker
+  
   let confirmDeleteDialog
   let componentToDelete = ""
 
-  const newScreen = () => {
-    newScreenPicker.show()
-  }
 
   let settingsView
   const settings = () => {
@@ -45,6 +41,8 @@
     confirmDeleteDialog.show()
   }
 
+  let leftNavSwitcher
+
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
 </script>
 
@@ -52,54 +50,32 @@
 
   <div class="ui-nav">
 
-    <div class="pages-list-container">
-      <div class="nav-header">
-        <span class="navigator-title">Navigate</span>
-        <span class="components-nav-page">Pages</span>
+    <Switcher bind:this={leftNavSwitcher} tabs={["Navigate", "Add"]}>
+      <div slot="0">
+        <FrontendNavigatePane />
       </div>
-
-      <div class="nav-items-container">
-        <PagesList />
-      </div>
-    </div>
-
-    <div class="border-line" />
-
-    <PageLayout layout={$store.pages[$store.currentPageName]} />
-
-    <div class="border-line" />
-
-    <div class="components-list-container">
-      <div class="nav-group-header">
-        <span class="components-nav-header" style="margin-top: 0;">
-          Screens
-        </span>
-        <div>
-          <button on:click={newScreen}>
-            <AddIcon />
-          </button>
-        </div>
-      </div>
-      <div class="nav-items-container">
-        <ComponentsHierarchy screens={$store.screens} />
-      </div>
-    </div>
+      <div slot="1">
+        <ComponentSelectionList toggleTab={leftNavSwitcher.selectTab} />      </div>
+    </Switcher>
+    
 
   </div>
 
   <div class="preview-pane">
+    {#if $store.currentPageName && $store.currentPageName.length > 0}
     <CurrentItemPreview />
+    {/if}
   </div>
 
   {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
     <div class="components-pane">
-      <ComponentsPaneSwitcher />
+      <ComponentPropertiesPanel />
     </div>
   {/if}
 
 </div>
 
-<NewScreen bind:this={newScreenPicker} />
+
 
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
@@ -111,19 +87,6 @@
 <slot />
 
 <style>
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    width: 20px;
-    padding-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-  }
-
   .root {
     display: grid;
     grid-template-columns: 275px 1fr 275px;
@@ -162,43 +125,7 @@
     background-color: var(--white);
   }
 
-  .components-nav-page {
-    font-size: 13px;
-    color: var(--ink);
-    padding-left: 20px;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
-
-  .components-nav-header {
-    font-size: 13px;
-    color: var(--ink);
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
-
-  .nav-header {
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-  }
-
-  .nav-items-container {
-    padding: 1rem 0rem 0rem 0rem;
-  }
-
-  .nav-group-header {
-    display: flex;
-    padding: 0px 20px 0px 20px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-  }
+  
 
   .nav-group-header > div:nth-child(1) {
     padding: 0rem 0.5rem 0rem 0rem;
@@ -207,12 +134,7 @@
     margin-right: 5px;
   }
 
-  .nav-group-header > span:nth-child(3) {
-    margin-left: 5px;
-    vertical-align: bottom;
-    grid-column-start: title;
-    margin-top: auto;
-  }
+
 
   .nav-group-header > div:nth-child(3) {
     vertical-align: bottom;
@@ -225,18 +147,4 @@
     color: var(--primary75);
   }
 
-  .navigator-title {
-    font-size: 18px;
-    color: var(--ink);
-    font-weight: bold;
-    padding: 0 20px 20px 20px;
-  }
-
-  .border-line {
-    border-bottom: 1px solid #d8d8d8;
-  }
-
-  .components-list-container {
-    padding: 20px 0px 0 0;
-  }
 </style>

From 1c1d35bc9db9f38bc06dd18b094874ed715bb4ea Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 29 May 2020 13:56:57 +0100
Subject: [PATCH 41/51] the alert button ui was off and the red is too serious

---
 .../components/common/AppNotification.svelte  | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/common/AppNotification.svelte b/packages/builder/src/components/common/AppNotification.svelte
index e4a43247c9..85c6d30a2b 100644
--- a/packages/builder/src/components/common/AppNotification.svelte
+++ b/packages/builder/src/components/common/AppNotification.svelte
@@ -5,7 +5,7 @@
     UIKit.notification({
       message: `
           <div class="message-container">
-            <i class="ri-information-fill information-icon"></i> 
+            <div class="information-icon">🤯</div> 
             <span class="notification-message"> 
               ${message}
             </span>
@@ -21,6 +21,7 @@
 <style>
   :global(.information-icon) {
     font-size: 24px;
+    margin-right: 8px;
   }
 
   :global(.uk-nofi) {
@@ -31,10 +32,9 @@
   }
 
   :global(.message-container) {
-    display: grid;
-    grid-template-columns: 40px 1fr auto;
-    grid-gap: 5px;
+    display: flex;
     align-items: center;
+    justify-content: center;
   }
 
   :global(.uk-notification) {
@@ -44,7 +44,6 @@
     margin-right: auto !important;
     margin-left: auto !important;
     border-radius: 10px;
-    box-shadow: 0px 3px 6px #00000029;
   }
 
   :global(.uk-notification-message) {
@@ -56,21 +55,23 @@
   }
 
   :global(.uk-notification-message-danger) {
-    background: #f2545b !important;
+    background: var(--ink-light) !important;
     color: #fff !important;
     font-family: Roboto;
-    font-size: 14px !important;
+    font-size: 16px !important;
   }
 
   :global(.refresh-page-button) {
-    font-size: 13px;
-    font-weight: 600;
-    border-radius: 5px;
+    font-size: 14px;
+    border-radius: 3px;
     border: none;
-    padding: 5px;
-    width: 91px;
-    height: 28px;
-    color: #f2545b;
+    padding: 8px 16px;
+    color: var(--ink);
     background: #ffffff;
+    margin-left: 20px;
+  }
+
+  :global(.refresh-page-button):hover{
+    background: var(--grey-light);
   }
 </style>

From cd9f539a0908b79616b1317dbc4fe1497f673cd0 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 29 May 2020 14:06:25 +0100
Subject: [PATCH 42/51] configurable logLevel - defaults to error

---
 packages/server/.env.template        | 5 ++++-
 packages/server/scripts/jestSetup.js | 1 +
 packages/server/src/app.js           | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/server/.env.template b/packages/server/.env.template
index bc2e7954a4..170d391520 100644
--- a/packages/server/.env.template
+++ b/packages/server/.env.template
@@ -12,4 +12,7 @@ ADMIN_SECRET={{adminSecret}}
 JWT_SECRET={{cookieKey1}}
 
 # port to run http server on
-PORT=4001 
\ No newline at end of file
+PORT=4001 
+
+# error level for koa-pino
+LOG_LEVEL=error
\ No newline at end of file
diff --git a/packages/server/scripts/jestSetup.js b/packages/server/scripts/jestSetup.js
index 5289aef9f4..ab5bc83885 100644
--- a/packages/server/scripts/jestSetup.js
+++ b/packages/server/scripts/jestSetup.js
@@ -5,3 +5,4 @@ process.env.JWT_SECRET = "test-jwtsecret"
 process.env.CLIENT_ID = "test-client-id"
 process.env.BUDIBASE_DIR = tmpdir("budibase-unittests")
 process.env.ADMIN_SECRET = "test-admin-secret"
+process.env.LOG_LEVEL = "silent"
diff --git a/packages/server/src/app.js b/packages/server/src/app.js
index bec5f8d16e..f23aeca02c 100644
--- a/packages/server/src/app.js
+++ b/packages/server/src/app.js
@@ -15,7 +15,7 @@ app.use(
     prettyPrint: {
       levelFirst: true,
     },
-    level: process.env.NODE_ENV === "jest" ? "silent" : "info",
+    level: env.LOG_LEVEL || "error",
   })
 )
 

From 46da102670e7a9ecd81a946b4cc1f27597a1a7c5 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 29 May 2020 14:56:21 +0100
Subject: [PATCH 43/51] bugfix: not selecting component after add

---
 .../userInterface/ComponentSelectionList.svelte          | 9 +++++++++
 .../src/components/userInterface/PagesList.svelte        | 3 ++-
 .../src/pages/[application]/frontend/_layout.svelte      | 3 ++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 2a46e5d6f6..d39acf872a 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@sveltech/routify"
   import { splitName } from "./pagesParsing/splitRootComponentName.js"
   import components from "./temporaryPanelStructure.js"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -32,7 +33,15 @@
 
   const onComponentChosen = component => {
     store.addChildComponent(component._component)
+    
     toggleTab("Navigate")
+    
+    // Get ID path
+    const path = store.getPathToComponent($store.currentComponentInfo)
+
+    // Go to correct URL
+    $goto(`./:page/:screen/${path}`)
+    
   }
 </script>
 
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 562c813865..823f922bb6 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -20,7 +20,8 @@
     },
   ]
 
-  store.setCurrentPage($params.page ? $params.page : "main")
+  if (!$store.currentPageName)
+    store.setCurrentPage($params.page ? $params.page : "main")
 
   const changePage = id => {
     store.setCurrentPage(id)
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index deea52ce3e..293623f8d2 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -55,7 +55,8 @@
         <FrontendNavigatePane />
       </div>
       <div slot="1">
-        <ComponentSelectionList toggleTab={leftNavSwitcher.selectTab} />      </div>
+        <ComponentSelectionList toggleTab={leftNavSwitcher.selectTab} />      
+      </div>
     </Switcher>
     
 

From cee06067a84593f523d7d65736720a132c5147ff Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 29 May 2020 18:31:47 +0100
Subject: [PATCH 44/51] Update to Frontend UI Nav and Component Panel

Components moved to the left
Nav panel UI updated
Props tabs moved up
---
 packages/builder/src/budibase.css             | 14 ++--
 .../ComponentPropertiesPanel.svelte           |  1 +
 .../userInterface/ComponentsHierarchy.svelte  | 13 ++-
 .../ComponentsPaneSwitcher.svelte             | 81 +++++++++++++++++++
 .../userInterface/FrontendNavigatePane.svelte | 80 +++++-------------
 .../userInterface/ItemTab/Item.svelte         |  2 +-
 .../userInterface/PageLayout.svelte           | 36 +++------
 .../components/userInterface/PagesList.svelte | 57 ++++---------
 .../userInterface/UserInterfaceRoot.svelte    |  5 --
 .../[application]/frontend/_layout.svelte     |  5 --
 packages/builder/src/pages/_layout.svelte     | 12 +--
 11 files changed, 146 insertions(+), 160 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index f433b016da..0d74ed7221 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -57,23 +57,23 @@
 
 .budibase__nav-item {
     cursor: pointer;
-    padding: 0 7px 0 3px;
+    padding: 0 4px 0 2px;
     height: 35px;
-    margin: 5px 20px 5px 0px;
+    margin: 5px 0px 4px 0px;
     border-radius: 0 5px 5px 0;
     display: flex;
     align-items: center;
-    font-weight: 500;
-    font-size: 13px;
+    font-size: 14px;
+    transition: 0.2s;
 }
 
 .budibase__nav-item.selected {
-    color: var(--button-text);
-    background: #f1f4fc;
+    color: var(--ink);
+    background: var(--blue-light);
 }
 
 .budibase__nav-item:hover {
-    background: #fafafa;
+    background: var(--grey-light);
 }
 
 .budibase__input {
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 726fb35aae..afce0576e1 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -105,6 +105,7 @@
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
+    padding: 20px;
   }
 
   .title > div:nth-child(1) {
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 26929fcdce..bb6d369956 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -1,7 +1,6 @@
 <script>
   import { params, goto } from "@sveltech/routify"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-
   import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { pipe } from "components/common/core"
@@ -62,9 +61,7 @@
         {/if}
       </span>
 
-      <span class="icon">
-        <ShapeIcon />
-      </span>
+      <i class="ri-artboard-2-fill icon"></i>
 
       <span class="title">{screen.title}</span>
     </div>
@@ -92,21 +89,23 @@
 <style>
   .root {
     font-weight: 400;
-    color: #000333;
+    color: var(--ink);
   }
 
   .title {
     margin-left: 10px;
     margin-top: 2px;
-    font-size: 13px;
+    font-size: 14px;
+    font-weight: 500;
   }
 
   .icon {
     display: inline-block;
     transition: 0.2s;
+    font-size: 24px;
     width: 20px;
     margin-top: 2px;
-    color: #333;
+    color: var(--ink-light);
   }
 
   .icon:nth-of-type(2) {
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
new file mode 100644
index 0000000000..de523cd7bf
--- /dev/null
+++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
@@ -0,0 +1,81 @@
+<script>
+  import { store } from "builderStore/"
+  import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
+  import ComponentSelectionList from "./ComponentSelectionList.svelte"
+
+  const PROPERTIES_TAB = "properties"
+  const COMPONENT_SELECTION_TAB = "components"
+
+  let selected = PROPERTIES_TAB
+
+  const isSelected = tab => selected === tab
+
+  const selectTab = tab => (selected = tab)
+
+  const toggleTab = () =>
+    (selected =
+      selected === PROPERTIES_TAB ? COMPONENT_SELECTION_TAB : PROPERTIES_TAB)
+</script>
+
+<div class="root">
+  {#if $store.currentFrontEndType === 'page' || $store.screens.length}
+    <div class="switcher">
+
+      <button
+        class:selected={selected === COMPONENT_SELECTION_TAB}
+        on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
+        Add
+      </button>
+
+      <button
+        class:selected={selected === PROPERTIES_TAB}
+        on:click={() => selectTab(PROPERTIES_TAB)}>
+        Edit
+      </button>
+
+    </div>
+
+    <div class="panel">
+      {#if selected === PROPERTIES_TAB}
+        <ComponentPropertiesPanel {toggleTab} />
+      {/if}
+
+      {#if selected === COMPONENT_SELECTION_TAB}
+        <ComponentSelectionList {toggleTab} />
+      {/if}
+
+    </div>
+  {/if}
+
+</div>
+
+<style>
+  .root {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 20px 20px;
+    border-left: solid 1px var(--grey);
+  }
+
+  .switcher {
+    display: flex;
+    margin: 0px 20px 20px 0px;
+  }
+
+  .switcher > button {
+    display: inline-block;
+    border: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--ink-lighter);
+    margin-right: 20px;
+  }
+
+  .switcher > .selected {
+    color: var(--ink);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 8b4b8e1843..565301213d 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -3,7 +3,6 @@
   import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
-  import { AddIcon } from "components/common/Icons"
   import NewScreen from "components/userInterface/NewScreen.svelte"
   
   const newScreen = () => {
@@ -13,64 +12,44 @@
   let newScreenPicker
 </script>
 
-<div class="pages-list-container">
-  <div class="nav-header">
-    <span class="navigator-title">Navigate</span>
-    <span class="components-nav-page">Pages</span>
-  </div>
+<PagesList />
 
-  <div class="nav-items-container">
-    <PagesList />
-  </div>
-</div>
-
-<div class="border-line" />
+<button 
+  class="newscreen"
+  on:click={newScreen}>
+  Create New Screen
+</button>
 
 <PageLayout layout={$store.pages[$store.currentPageName]} />
 
-<div class="border-line" />
 
-<div class="components-list-container">
-  <div class="nav-group-header">
-    <span class="components-nav-header" style="margin-top: 0;">
-      Screens
-    </span>
-    <div>
-      <button on:click={newScreen}>
-        <AddIcon />
-      </button>
-    </div>
-  </div>
-  <div class="nav-items-container">
-    <ComponentsHierarchy screens={$store.screens} />
-  </div>
+<div class="nav-items-container">
+  <ComponentsHierarchy screens={$store.screens} />
 </div>
 
 <NewScreen bind:this={newScreenPicker} />
 
 <style>
 
-button {
+.newscreen {
   cursor: pointer;
-  outline: none;
-  border: none;
-  border-radius: 5px;
-  width: 20px;
-  padding-bottom: 10px;
+  border: 1px solid var(--grey-dark);
+  border-radius: 3px;
+  width: 100%;
+  padding: 8px 16px;
+  margin: 12px 0px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0;
+  background: white;
+  color: var(--ink);
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 2ms;
 }
 
-.components-nav-page {
-  font-size: 13px;
-  color: var(--ink);
-  padding-left: 20px;
-  margin-top: 20px;
-  font-weight: 600;
-  opacity: 0.4;
-  letter-spacing: 1px;
+.newscreen:hover {
+  background: var(--grey-light);
 }
 
 .components-nav-header {
@@ -82,19 +61,9 @@ button {
   letter-spacing: 1px;
 }
 
-.nav-header {
-  display: flex;
-  flex-direction: column;
-  margin-top: 20px;
-}
-
-.nav-items-container {
-  padding: 1rem 0rem 0rem 0rem;
-}
 
 .nav-group-header {
   display: flex;
-  padding: 0px 20px 0px 20px;
   font-size: 0.9rem;
   font-weight: bold;
   justify-content: space-between;
@@ -108,13 +77,6 @@ button {
   margin-top: auto;
 }
 
-  .navigator-title {
-  font-size: 18px;
-  color: var(--ink);
-  font-weight: bold;
-  padding: 0 20px 20px 20px;
-}
-
 .border-line {
   border-bottom: 1px solid #d8d8d8;
 }
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index d4576055c6..871501a20c 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -3,7 +3,7 @@
   export let item
 </script>
 
-<div class="item-item" transition:fly={{ y: 100, duration: 1000 }} on:click>
+<div class="item-item" in:fly={{ y: 100, duration: 1000 }} on:click>
   <div class="item-icon">
     <i class={item.icon} />
   </div>
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 2a532f9624..f35a080a65 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -46,7 +46,6 @@
 </script>
 
 <div class="pagelayoutSection">
-  <div class="components-nav-page">Page Layout</div>
   <div
     class="budibase__nav-item root"
     class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
@@ -56,12 +55,8 @@
       class:rotate={$store.currentPreviewItem.name !== _layout.title}>
       <ArrowDownIcon />
     </span>
-
-    <span class="icon">
-      <GridIcon />
-    </span>
-
-    <span class="title">Page Layout</span>
+  <i class="ri-layout-3-fill icon-big"></i>
+  <span class="title">Master Screen</span>
   </div>
 
   {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
@@ -84,36 +79,29 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
-  .components-nav-page {
-    font-size: 13px;
-    color: #000333;
-    text-transform: uppercase;
-    margin-bottom: 10px;
-    padding-left: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
 
   .pagelayoutSection {
-    margin: 20px 0px 20px 0px;
+    margin: 20px 0px 0px 0px;
   }
+
   .title {
     margin-left: 10px;
-    font-size: 13px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ink);
   }
 
   .icon {
+    width: 24px;
     display: inline-block;
     transition: 0.2s;
     width: 20px;
-    margin-top: 2px;
-    color: #000333;
+    color: var(--ink-light);
   }
 
-  .icon:nth-of-type(2) {
-    width: 14px;
-    margin: 0 0 0 5px;
+  .icon-big {
+    font-size: 24px;
+    color: var(--ink-light);
   }
 
   :global(svg) {
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 823f922bb6..1c37337a45 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -1,8 +1,6 @@
 <script>
   import { params, goto } from "@sveltech/routify"
   import { store } from "builderStore"
-  import getIcon from "components/common/icon"
-  import { CheckIcon } from "components/common/Icons"
 
   const getPage = (s, name) => {
     const props = s.pages[name]
@@ -30,63 +28,40 @@
 </script>
 
 <div class="root">
-  <ul>
     {#each pages as { title, id }}
-      <li>
-        <span class="icon">
-          {#if id === $params.page}
-            <CheckIcon />
-          {/if}
-        </span>
-
         <button
           class:active={id === $params.page}
           on:click={() => changePage(id)}>
           {title}
         </button>
-      </li>
     {/each}
-  </ul>
 </div>
 
 <style>
   .root {
-    padding-bottom: 10px;
-    font-size: 0.9rem;
-    color: #000333;
-    font-weight: bold;
-    position: relative;
-    padding-left: 1.8rem;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  li {
-    margin: 0.5rem 0;
+    display: flex;
+    flex-direction: row;
   }
 
   button {
-    margin: 0 0 0 6px;
-    padding: 0;
-    border: none;
-    font-family: Roboto;
-    font-size: 13px;
-    outline: none;
     cursor: pointer;
-    background: rgba(0, 0, 0, 0);
+    padding: 8px 16px;
+    text-align: center;
+    background: #ffffff;
+    color: var(--ink-light);
+    border-radius: 5px;
+    font-family: Roboto;
+    font-size: 14px;
+    font-weight: 400;
+    transition: all 0.3s;
+    text-rendering: optimizeLegibility;
+    border: none !important;
+    transition: 0.2s;
   }
 
   .active {
-    font-weight: 500;
+    background: var(--ink-light);
+    color: var(--white);
   }
 
-  .icon {
-    display: inline-block;
-    width: 14px;
-    color: #000333;
-  }
 </style>
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index 8b600047d8..3fe67e6482 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -120,7 +120,6 @@
     background-color: var(--white);
     height: calc(100vh - 49px);
     padding: 0;
-    overflow: scroll;
     display: flex;
     flex-direction: column;
   }
@@ -215,10 +214,6 @@
     letter-spacing: 1px;
   }
 
-  .border-line {
-    border-bottom: 1px solid #d8d8d8;
-  }
-
   .components-list-container {
     padding: 20px 0px 0 0;
   }
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 536da887d6..1dfdb82168 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -100,7 +100,6 @@
     background-color: var(--white);
     height: calc(100vh - 49px);
     padding: 0;
-    overflow: scroll;
     display: flex;
     flex-direction: column;
   }
@@ -117,8 +116,6 @@
     background-color: var(--white);
   }
 
-  
-
   .nav-group-header > div:nth-child(1) {
     padding: 0rem 0.5rem 0rem 0rem;
     vertical-align: bottom;
@@ -126,8 +123,6 @@
     margin-right: 5px;
   }
 
-
-
   .nav-group-header > div:nth-child(3) {
     vertical-align: bottom;
     grid-column-start: button;
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index 363efcf619..001561cae9 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -119,22 +119,12 @@
 <style>
   .root {
     display: grid;
-    grid-template-columns: 275px 1fr;
+    grid-template-columns: 300px 1fr;
     height: 100%;
     width: 100%;
     background: var(--grey-light);
   }
 
-  @media only screen and (min-width: 1800px) {
-    .root {
-      display: grid;
-      grid-template-columns: 300px 1fr;
-      height: 100%;
-      width: 100%;
-      background: var(--grey-light);
-    }
-  }
-
   .main {
     grid-column: 2;
   }

From 1c541c684e4a9d12cbf8abb4dd47690a36c59f50 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 29 May 2020 18:32:52 +0100
Subject: [PATCH 45/51] Formatting update

---
 .../components/common/AppNotification.svelte  |  2 +-
 .../src/components/common/Switcher.svelte     | 15 ++--
 .../ComponentSelectionList.svelte             |  5 +-
 .../userInterface/ComponentsHierarchy.svelte  |  2 +-
 .../userInterface/FrontendNavigatePane.svelte | 83 +++++--------------
 .../userInterface/PageLayout.svelte           |  5 +-
 .../components/userInterface/PagesList.svelte | 13 ++-
 .../[application]/frontend/_layout.svelte     | 12 +--
 8 files changed, 41 insertions(+), 96 deletions(-)

diff --git a/packages/builder/src/components/common/AppNotification.svelte b/packages/builder/src/components/common/AppNotification.svelte
index 85c6d30a2b..2e8723ab53 100644
--- a/packages/builder/src/components/common/AppNotification.svelte
+++ b/packages/builder/src/components/common/AppNotification.svelte
@@ -71,7 +71,7 @@
     margin-left: 20px;
   }
 
-  :global(.refresh-page-button):hover{
+  :global(.refresh-page-button):hover {
     background: var(--grey-light);
   }
 </style>
diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte
index cf23e39507..b1c84e6eac 100644
--- a/packages/builder/src/components/common/Switcher.svelte
+++ b/packages/builder/src/components/common/Switcher.svelte
@@ -9,9 +9,6 @@
   let selectedIndex = 0
 
   const isSelected = tab => selected === tab
-
-  
-
 </script>
 
 <div class="root">
@@ -19,9 +16,7 @@
   <div class="switcher">
 
     {#each tabs as tab}
-      <button
-        class:selected={selected === tab}
-        on:click={() => selectTab(tab)}>
+      <button class:selected={selected === tab} on:click={() => selectTab(tab)}>
         {tab}
       </button>
     {/each}
@@ -30,13 +25,13 @@
 
   <div class="panel">
     {#if selectedIndex === 0}
-      <slot name="0"></slot>
+      <slot name="0" />
     {:else if selectedIndex === 1}
-      <slot name="1"></slot>
+      <slot name="1" />
     {:else if selectedIndex === 2}
-      <slot name="2"></slot>
+      <slot name="2" />
     {:else if selectedIndex === 3}
-      <slot name="3"></slot>
+      <slot name="3" />
     {/if}
   </div>
 
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index d39acf872a..590cf9c985 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -33,15 +33,14 @@
 
   const onComponentChosen = component => {
     store.addChildComponent(component._component)
-    
+
     toggleTab("Navigate")
-    
+
     // Get ID path
     const path = store.getPathToComponent($store.currentComponentInfo)
 
     // Go to correct URL
     $goto(`./:page/:screen/${path}`)
-    
   }
 </script>
 
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index bb6d369956..714e1c2cc9 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -61,7 +61,7 @@
         {/if}
       </span>
 
-      <i class="ri-artboard-2-fill icon"></i>
+      <i class="ri-artboard-2-fill icon" />
 
       <span class="title">{screen.title}</span>
     </div>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 565301213d..cee63c4cbb 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -4,7 +4,7 @@
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
   import NewScreen from "components/userInterface/NewScreen.svelte"
-  
+
   const newScreen = () => {
     newScreenPicker.show()
   }
@@ -14,15 +14,10 @@
 
 <PagesList />
 
-<button 
-  class="newscreen"
-  on:click={newScreen}>
-  Create New Screen
-</button>
+<button class="newscreen" on:click={newScreen}>Create New Screen</button>
 
 <PageLayout layout={$store.pages[$store.currentPageName]} />
 
-
 <div class="nav-items-container">
   <ComponentsHierarchy screens={$store.screens} />
 </div>
@@ -30,59 +25,25 @@
 <NewScreen bind:this={newScreenPicker} />
 
 <style>
+  .newscreen {
+    cursor: pointer;
+    border: 1px solid var(--grey-dark);
+    border-radius: 3px;
+    width: 100%;
+    padding: 8px 16px;
+    margin: 12px 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: white;
+    color: var(--ink);
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 2ms;
+  }
 
-.newscreen {
-  cursor: pointer;
-  border: 1px solid var(--grey-dark);
-  border-radius: 3px;
-  width: 100%;
-  padding: 8px 16px;
-  margin: 12px 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: white;
-  color: var(--ink);
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 2ms;
-}
+  .newscreen:hover {
+    background: var(--grey-light);
+  }
 
-.newscreen:hover {
-  background: var(--grey-light);
-}
-
-.components-nav-header {
-  font-size: 13px;
-  color: var(--ink);
-  margin-top: 20px;
-  font-weight: 600;
-  opacity: 0.4;
-  letter-spacing: 1px;
-}
-
-
-.nav-group-header {
-  display: flex;
-  font-size: 0.9rem;
-  font-weight: bold;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.nav-group-header > span:nth-child(3) {
-  margin-left: 5px;
-  vertical-align: bottom;
-  grid-column-start: title;
-  margin-top: auto;
-}
-
-.border-line {
-  border-bottom: 1px solid #d8d8d8;
-}
-
-.components-list-container {
-  padding: 20px 0px 0 0;
-}
-
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index f35a080a65..ec32e1cb44 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -55,8 +55,8 @@
       class:rotate={$store.currentPreviewItem.name !== _layout.title}>
       <ArrowDownIcon />
     </span>
-  <i class="ri-layout-3-fill icon-big"></i>
-  <span class="title">Master Screen</span>
+    <i class="ri-layout-3-fill icon-big" />
+    <span class="title">Master Screen</span>
   </div>
 
   {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
@@ -79,7 +79,6 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
-
   .pagelayoutSection {
     margin: 20px 0px 0px 0px;
   }
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 1c37337a45..4a87c4ac8a 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -28,13 +28,11 @@
 </script>
 
 <div class="root">
-    {#each pages as { title, id }}
-        <button
-          class:active={id === $params.page}
-          on:click={() => changePage(id)}>
-          {title}
-        </button>
-    {/each}
+  {#each pages as { title, id }}
+    <button class:active={id === $params.page} on:click={() => changePage(id)}>
+      {title}
+    </button>
+  {/each}
 </div>
 
 <style>
@@ -63,5 +61,4 @@
     background: var(--ink-light);
     color: var(--white);
   }
-
 </style>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 1dfdb82168..e30c11daae 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -26,11 +26,9 @@
     }
   })
 
-  
   let confirmDeleteDialog
   let componentToDelete = ""
 
-
   let settingsView
   const settings = () => {
     settingsView.show()
@@ -50,21 +48,20 @@
 
   <div class="ui-nav">
 
-    <Switcher bind:this={leftNavSwitcher} tabs={["Navigate", "Add"]}>
+    <Switcher bind:this={leftNavSwitcher} tabs={['Navigate', 'Add']}>
       <div slot="0">
         <FrontendNavigatePane />
       </div>
       <div slot="1">
-        <ComponentSelectionList toggleTab={leftNavSwitcher.selectTab} />      
+        <ComponentSelectionList toggleTab={leftNavSwitcher.selectTab} />
       </div>
     </Switcher>
-    
 
   </div>
 
   <div class="preview-pane">
     {#if $store.currentPageName && $store.currentPageName.length > 0}
-    <CurrentItemPreview />
+      <CurrentItemPreview />
     {/if}
   </div>
 
@@ -76,8 +73,6 @@
 
 </div>
 
-
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Delete"
@@ -133,5 +128,4 @@
   .nav-group-header > div:nth-child(3):hover {
     color: var(--primary75);
   }
-
 </style>

From 353c9c81951a72d8b0a7737615f10b66936d53ee Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 1 Jun 2020 10:18:45 +0100
Subject: [PATCH 46/51] component nav dropdown menu

---
 .../builder/src/builderStore/store/index.js   |  78 ++++++++++--
 .../src/components/common/Icons/More.svelte   |   8 ++
 .../src/components/common/Icons/index.js      |   1 +
 .../ComponentDropdownMenu.svelte              | 116 ++++++++++++++++++
 .../ComponentsHierarchyChildren.svelte        |  54 +-------
 .../[application]/frontend/_layout.svelte     |   1 +
 6 files changed, 197 insertions(+), 61 deletions(-)
 create mode 100644 packages/builder/src/components/common/Icons/More.svelte
 create mode 100644 packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index f4d47064be..6755bc0a7c 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -64,11 +64,16 @@ export const getStore = () => {
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
+  store.storeComponentForCopy = storeComponentForCopy(store)
+  store.pasteComponent = pasteComponent(store)
   return store
 }
 
 export default getStore
 
+export const getComponentDefinition = (state, name) =>
+  name.startsWith("##") ? getBuiltin(name) : state.components[name]
+
 const setPackage = (store, initial) => async pkg => {
   const [main_screens, unauth_screens] = await Promise.all([
     api
@@ -317,8 +322,6 @@ const setCurrentPage = store => pageName => {
   })
 }
 
-// const getComponentDefinition = (components, name) => components.find(c => c.name === name)
-
 /**
  * @param  {string} componentToAdd - name of the component to add to the application
  * @param  {string} presetName - name of the component preset if defined
@@ -344,9 +347,7 @@ const addChildComponent = store => (componentToAdd, presetName) => {
       return state
     }
 
-    const component = componentToAdd.startsWith("##")
-      ? getBuiltin(componentToAdd)
-      : state.components[componentToAdd]
+    const component = getComponentDefinition(componentToAdd)
 
     const presetProps = presetName ? component.presets[presetName] : {}
 
@@ -398,14 +399,18 @@ const addTemplatedComponent = store => props => {
   })
 }
 
+const _selectComponent = (state, component) => {
+  const componentDef = component._component.startsWith("##")
+    ? component
+    : state.components[component._component]
+  state.currentComponentInfo = makePropsSafe(componentDef, component)
+  state.currentView = "component"
+  return state
+}
+
 const selectComponent = store => component => {
   store.update(state => {
-    const componentDef = component._component.startsWith("##")
-      ? component
-      : state.components[component._component]
-    state.currentComponentInfo = makePropsSafe(componentDef, component)
-    state.currentView = "component"
-    return state
+    return _selectComponent(state, component)
   })
 }
 
@@ -534,7 +539,6 @@ const copyComponent = store => component => {
       p._id = uuid()
     })
     parent._children = [...parent._children, copiedComponent]
-    s.curren
     _saveCurrentPreviewItem(s)
     s.currentComponentInfo = copiedComponent
     return s
@@ -572,10 +576,58 @@ const getPathToComponent = store => component => {
   return path
 }
 
+const generateNewIdsForComponent = component =>
+  walkProps(component, p => {
+    p._id = uuid()
+  })
+
+const storeComponentForCopy = store => (component, cut = false) => {
+  store.update(s => {
+    const copiedComponent = cloneDeep(component)
+    s.componentToPaste = copiedComponent
+    if (cut) {
+      const parent = getParent(s.currentPreviewItem.props, component._id)
+      parent._children = parent._children.filter(c => c._id !== component._id)
+      _selectComponent(s, parent)
+    }
+
+    return s
+  })
+}
+
+const pasteComponent = store => (targetComponent, mode) => {
+  store.update(s => {
+    if (!s.componentToPaste) return s
+
+    const componentToPaste = cloneDeep(s.componentToPaste)
+    generateNewIdsForComponent(componentToPaste)
+    delete componentToPaste._cutId
+
+    if (mode === "inside") {
+      targetComponent._children.push(componentToPaste)
+      return s
+    }
+
+    const parent = getParent(s.currentPreviewItem.props, targetComponent)
+
+    const targetIndex = parent._children.indexOf(targetComponent)
+    const index = mode === "above" ? targetIndex : targetIndex + 1
+    parent._children.splice(index, 0, cloneDeep(componentToPaste))
+
+    _saveCurrentPreviewItem(s)
+    _selectComponent(s, componentToPaste)
+
+    return s
+  })
+}
+
 const getParent = (rootProps, child) => {
   let parent
   walkProps(rootProps, (p, breakWalk) => {
-    if (p._children && p._children.includes(child)) {
+    if (
+      p._children &&
+      (p._children.includes(child) || p._children.some(c => c._id === child))
+    ) {
       parent = p
       breakWalk()
     }
diff --git a/packages/builder/src/components/common/Icons/More.svelte b/packages/builder/src/components/common/Icons/More.svelte
new file mode 100644
index 0000000000..f072c48976
--- /dev/null
+++ b/packages/builder/src/components/common/Icons/More.svelte
@@ -0,0 +1,8 @@
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  viewBox="0 0 24 24" 
+  width="24" 
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z"/>
+</svg>
diff --git a/packages/builder/src/components/common/Icons/index.js b/packages/builder/src/components/common/Icons/index.js
index 69b78421da..4e4b41082d 100644
--- a/packages/builder/src/components/common/Icons/index.js
+++ b/packages/builder/src/components/common/Icons/index.js
@@ -31,3 +31,4 @@ export { default as EmailIcon } from "./Email.svelte"
 export { default as TwitterIcon } from "./Twitter.svelte"
 export { default as InfoIcon } from "./Info.svelte"
 export { default as CloseIcon } from "./Close.svelte"
+export { default as MoreIcon } from "./More.svelte"
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
new file mode 100644
index 0000000000..5a485f9680
--- /dev/null
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -0,0 +1,116 @@
+<script>
+import { MoreIcon } from "components/common/Icons"
+import { store } from "builderStore"
+import { getComponentDefinition } from "builderStore/store"
+import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+import { last } from "lodash/fp"
+import UIkit from "uikit"
+
+export let component
+
+let confirmDeleteDialog
+let dropdownEl
+
+$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right" });
+$: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false
+$: noPaste = !$store.componentToPaste || $store.componentToPaste._id === component._id
+
+const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
+const showDropdown = () => {
+  dropdown.show()
+}
+
+/*
+{#if index > 0}
+            <button
+              class:solo={index === components.length - 1}
+              on:click|stopPropagation={() => onMoveUpComponent(component)}>
+              <ChevronUpIcon />
+            </button>
+          {/if}
+          {#if index < components.length - 1}
+            <button
+              class:solo={index === 0}
+              on:click|stopPropagation={moveDownComponent(component)}>
+              <ChevronDownIcon />
+            </button>
+          {/if}
+*/
+
+</script>
+
+<div class="root" on:click|stopPropagation={()  => {}}>
+  <button>
+    <MoreIcon />
+  </button>
+  <ul class="menu" bind:this={dropdownEl} on:mouseout={() => dropdown.hide()} on:click={() => dropdown.hide()}>
+    <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
+    <li on:click={() => store.moveUpComponent(component)}>Move up</li>
+    <li on:click={() => store.moveDownComponent(component)}>Move down</li>
+    <li on:click={() => store.copyComponent(component)}>Duplicate</li>
+    <li on:click={() => store.storeComponentForCopy(component, true)}>Cut</li>
+    <li on:click={() => store.storeComponentForCopy(component)}>Copy</li>
+    <hr />
+    <li class:disabled={noPaste} on:click={() => store.pasteComponent(component, "above")}>Paste above</li>
+    <li class:disabled={noPaste} on:click={() => store.pasteComponent(component, "below")}>Paste below</li>
+    <li class:disabled={noPaste || noChildrenAllowed} on:click={() => store.pasteComponent(component, "inside")}>Paste inside</li>    
+  </ul>
+</div>
+
+
+
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Delete"
+  body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`}
+  okText="Delete Component"
+  onOk={() => store.deleteComponent(component)} />
+
+<style>
+
+.root {
+  overflow: hidden;
+  z-index:9;
+}
+
+.root button {
+  border-style: none;
+  border-radius: 2px;
+  padding: 5px;
+  background: var(--grey);
+  cursor: pointer;
+}
+
+.menu {
+  z-index: 100000;
+  overflow: visible;
+  padding: 10px 0
+}
+
+.menu li {
+  border-style: none;
+  background-color: transparent;
+  list-style-type: none;
+  padding: 4px 5px 4px 15px;
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+
+.menu li:not(.disabled) {
+  cursor: pointer;
+  color: var(--ink);
+}
+
+.menu li:not(.disabled):hover {
+  color: var(--button-text);
+  background-color: var(--grey-light); 
+}
+
+.disabled {
+  color: var(--grey-dark);
+  cursor: default;
+}
+
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index eafc1834d0..a61d6960f2 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -3,6 +3,7 @@
   import { store } from "builderStore"
   import { last } from "lodash/fp"
   import { pipe } from "components/common/core"
+  import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
   import {
     XCircleIcon,
     ChevronUpIcon,
@@ -51,30 +52,9 @@
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 53}px">
         <div>{get_capitalised_name(component._component)}</div>
-        <div class="reorder-buttons">
-          {#if index > 0}
-            <button
-              class:solo={index === components.length - 1}
-              on:click|stopPropagation={() => onMoveUpComponent(component)}>
-              <ChevronUpIcon />
-            </button>
-          {/if}
-          {#if index < components.length - 1}
-            <button
-              class:solo={index === 0}
-              on:click|stopPropagation={moveDownComponent(component)}>
-              <ChevronDownIcon />
-            </button>
-          {/if}
+        <div class="actions">
+          <ComponentDropdownMenu component={component}/>
         </div>
-        <button
-          class="copy"
-          on:click|stopPropagation={() => onCopyComponent(component)}>
-          <CopyIcon />
-        </button>
-        <button on:click|stopPropagation={() => onDeleteComponent(component)}>
-          <XCircleIcon />
-        </button>
       </div>
 
       {#if component._children}
@@ -111,7 +91,7 @@
     font-size: 13px;
   }
 
-  .item button {
+  .actions {
     display: none;
     height: 20px;
     width: 28px;
@@ -120,37 +100,15 @@
     border-style: none;
     background: rgba(0, 0, 0, 0);
     cursor: pointer;
-  }
-
-  .item button.copy {
-    width: 26px;
+    position: relative;
   }
 
   .item:hover {
     background: #fafafa;
     cursor: pointer;
   }
-  .item:hover button {
+  .item:hover .actions {
     display: block;
   }
 
-  .item:hover button:hover {
-    color: var(--button-text);
-  }
-
-  .reorder-buttons {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .reorder-buttons > button {
-    flex: 1 1 auto;
-    width: 30px;
-    height: 15px;
-  }
-
-  .reorder-buttons > button.solo {
-    padding-top: 2px;
-  }
 </style>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 536da887d6..9b38d64f5d 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -103,6 +103,7 @@
     overflow: scroll;
     display: flex;
     flex-direction: column;
+    z-index: 5;
   }
 
   .preview-pane {

From b29d39d525873c1a5d987274db868f1df0bfdf85 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 1 Jun 2020 10:25:12 +0100
Subject: [PATCH 47/51] removing old component actions

---
 .../ComponentDropdownMenu.svelte              | 20 ++-----------------
 .../userInterface/ComponentsHierarchy.svelte  |  6 +-----
 .../ComponentsHierarchyChildren.svelte        | 18 ++---------------
 .../userInterface/PageLayout.svelte           |  6 +-----
 4 files changed, 6 insertions(+), 44 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 5a485f9680..e2f8943d9e 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -20,23 +20,6 @@ const showDropdown = () => {
   dropdown.show()
 }
 
-/*
-{#if index > 0}
-            <button
-              class:solo={index === components.length - 1}
-              on:click|stopPropagation={() => onMoveUpComponent(component)}>
-              <ChevronUpIcon />
-            </button>
-          {/if}
-          {#if index < components.length - 1}
-            <button
-              class:solo={index === 0}
-              on:click|stopPropagation={moveDownComponent(component)}>
-              <ChevronDownIcon />
-            </button>
-          {/if}
-*/
-
 </script>
 
 <div class="root" on:click|stopPropagation={()  => {}}>
@@ -77,8 +60,9 @@ const showDropdown = () => {
   border-style: none;
   border-radius: 2px;
   padding: 5px;
-  background: var(--grey);
+  background: transparent;
   cursor: pointer;
+  color: var(--button-text)
 }
 
 .menu {
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 26929fcdce..e02874c0dd 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -72,11 +72,7 @@
     {#if $store.currentPreviewItem.name === screen.title && screen.component.props._children}
       <ComponentsHierarchyChildren
         components={screen.component.props._children}
-        currentComponent={$store.currentComponentInfo}
-        onDeleteComponent={confirmDeleteComponent}
-        onMoveUpComponent={store.moveUpComponent}
-        onMoveDownComponent={store.moveDownComponent}
-        onCopyComponent={store.copyComponent} />
+        currentComponent={$store.currentComponentInfo} />
     {/if}
   {/each}
 
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index a61d6960f2..16aab64576 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -15,23 +15,13 @@
   export let currentComponent
   export let onSelect = () => {}
   export let level = 0
-  export let onDeleteComponent
-  export let onMoveUpComponent
-  export let onMoveDownComponent
-  export let onCopyComponent
+
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
 
   const get_capitalised_name = name => pipe(name, [get_name, capitalise])
 
-  const moveDownComponent = component => {
-    const c = component
-    return () => {
-      return onMoveDownComponent(c)
-    }
-  }
-
   const selectComponent = component => {
     // Set current component
     store.selectComponent(component)
@@ -62,11 +52,7 @@
           components={component._children}
           {currentComponent}
           {onSelect}
-          level={level + 1}
-          {onDeleteComponent}
-          {onMoveUpComponent}
-          {onMoveDownComponent}
-          {onCopyComponent} />
+          level={level + 1} />
       {/if}
     </li>
   {/each}
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 2a532f9624..c4b786c5b2 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -68,11 +68,7 @@
     <ComponentsHierarchyChildren
       thisComponent={_layout.component.props}
       components={_layout.component.props._children}
-      currentComponent={$store.currentComponentInfo}
-      onDeleteComponent={confirmDeleteComponent}
-      onMoveUpComponent={store.moveUpComponent}
-      onMoveDownComponent={store.moveDownComponent}
-      onCopyComponent={store.copyComponent} />
+      currentComponent={$store.currentComponentInfo} />
   {/if}
 </div>
 

From 50ecfba39535bd1728db8edcb86dea295e8c6d75 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 1 Jun 2020 11:04:32 +0100
Subject: [PATCH 48/51] few bugfixes

---
 .../builder/src/builderStore/store/index.js     |  2 +-
 .../userInterface/ComponentDropdownMenu.svelte  | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 6755bc0a7c..a034114b02 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -347,7 +347,7 @@ const addChildComponent = store => (componentToAdd, presetName) => {
       return state
     }
 
-    const component = getComponentDefinition(componentToAdd)
+    const component = getComponentDefinition(state, componentToAdd)
 
     const presetProps = presetName ? component.presets[presetName] : {}
 
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index e2f8943d9e..5672ea6f4c 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -11,13 +11,15 @@ export let component
 let confirmDeleteDialog
 let dropdownEl
 
-$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right" });
+$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right", "delay-hide": 0, animation: false });
+$: dropdown && UIkit.util.on(dropdown, "shown", () => hidden = false)
 $: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false
 $: noPaste = !$store.componentToPaste || $store.componentToPaste._id === component._id
 
 const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
-const showDropdown = () => {
-  dropdown.show()
+
+const hideDropdown = () => {
+  dropdown.hide()
 }
 
 </script>
@@ -26,7 +28,7 @@ const showDropdown = () => {
   <button>
     <MoreIcon />
   </button>
-  <ul class="menu" bind:this={dropdownEl} on:mouseout={() => dropdown.hide()} on:click={() => dropdown.hide()}>
+  <ul class="menu"  bind:this={dropdownEl} on:click={hideDropdown}>
     <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
     <li on:click={() => store.moveUpComponent(component)}>Move up</li>
     <li on:click={() => store.moveDownComponent(component)}>Move down</li>
@@ -56,13 +58,18 @@ const showDropdown = () => {
   z-index:9;
 }
 
+.hidden {
+  display: none;
+}
+
 .root button {
   border-style: none;
   border-radius: 2px;
   padding: 5px;
   background: transparent;
   cursor: pointer;
-  color: var(--button-text)
+  color: var(--button-text);
+  outline: none;
 }
 
 .menu {

From 8847de2264a610d4cf0c1dab774c4ab763008f4a Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 1 Jun 2020 11:11:06 +0100
Subject: [PATCH 49/51] Props fix

The intial value is not being rendered. Display Flex must be selected.
---
 .../components/userInterface/propertyCategories.js    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index eaa2f41245..35d624140a 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -11,8 +11,9 @@ export const layout = [
     label: "Display",
     key: "display",
     control: OptionSelect,
-    initialValue: "Flex",
+    initialValue: "Select Option",
     options: [
+      { label: "Select Option", value: "" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -60,10 +61,10 @@ export const layout = [
     label: "Wrap",
     key: "flex-wrap",
     control: OptionSelect,
-    initialValue: "Wrap",
+    initialValue: "NoWrap",
     options: [
-      { label: "Wrap", value: "wrap" },
       { label: "No Wrap", value: "nowrap" },
+      { label: "Wrap", value: "wrap" },
       { label: "Wrap Reverse", value: "wrap-reverse" },
     ],
   },
@@ -195,10 +196,10 @@ export const typography = [
     label: "Decoration",
     key: "text-decoration-line",
     control: OptionSelect,
-    defaultValue: "Underline",
+    defaultValue: "None",
     options: [
-      { label: "Underline", value: "underline" },
       { label: "None", value: "none" },
+      { label: "Underline", value: "underline" },
       { label: "Overline", value: "overline" },
       { label: "Line-through", value: "line-through" },
       { label: "Under Over", value: "underline overline" },

From 0db37061090bb38aa013b107391f92e32930f264 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 1 Jun 2020 12:12:25 +0100
Subject: [PATCH 50/51] refactor component menu actions inside control

---
 .../builder/src/builderStore/store/index.js   | 186 +-----------------
 .../builder/src/builderStore/storeUtils.js    |  59 ++++++
 .../ComponentDropdownMenu.svelte              | 139 +++++++++++--
 .../userInterface/ComponentsHierarchy.svelte  |  12 --
 .../userInterface/PageLayout.svelte           |  12 --
 .../userInterface/UserInterfaceRoot.svelte    |  12 --
 .../[application]/frontend/_layout.svelte     |  12 --
 7 files changed, 193 insertions(+), 239 deletions(-)
 create mode 100644 packages/builder/src/builderStore/storeUtils.js

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index a034114b02..f94cea2399 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -1,4 +1,4 @@
-import { cloneDeep, values } from "lodash/fp"
+import { values } from "lodash/fp"
 import { backendUiStore } from "builderStore"
 import * as backendStoreActions from "./backend"
 import { writable, get } from "svelte/store"
@@ -16,6 +16,14 @@ import { buildCodeForScreens } from "../buildCodeForScreens"
 import { generate_screen_css } from "../generate_css"
 import { insertCodeMetadata } from "../insertCodeMetadata"
 import { uuid } from "../uuid"
+import {
+  selectComponent as _selectComponent,
+  getParent,
+  walkProps,
+  savePage as _savePage,
+  saveCurrentPreviewItem as _saveCurrentPreviewItem,
+  saveScreenApi as _saveScreenApi,
+} from "../storeUtils"
 
 export const getStore = () => {
   const initial = {
@@ -57,15 +65,9 @@ export const getStore = () => {
   store.setComponentStyle = setComponentStyle(store)
   store.setComponentCode = setComponentCode(store)
   store.setScreenType = setScreenType(store)
-  store.deleteComponent = deleteComponent(store)
-  store.moveUpComponent = moveUpComponent(store)
-  store.moveDownComponent = moveDownComponent(store)
-  store.copyComponent = copyComponent(store)
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
-  store.storeComponentForCopy = storeComponentForCopy(store)
-  store.pasteComponent = pasteComponent(store)
   return store
 }
 
@@ -145,12 +147,6 @@ const _saveScreen = async (store, s, screen) => {
   return s
 }
 
-const _saveScreenApi = (screen, s) => {
-  api
-    .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
-    .then(() => _savePage(s))
-}
-
 const createScreen = store => (screenName, route, layoutComponentName) => {
   store.update(state => {
     const rootComponent = state.components[layoutComponentName]
@@ -282,15 +278,6 @@ const removeStylesheet = store => stylesheet => {
   })
 }
 
-const _savePage = async s => {
-  const page = s.pages[s.currentPageName]
-  await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, {
-    page: { componentLibraries: s.pages.componentLibraries, ...page },
-    uiFunctions: s.currentPageFunctions,
-    screens: page._screens,
-  })
-}
-
 const setCurrentPage = store => pageName => {
   store.update(state => {
     const current_screens = state.pages[pageName]._screens
@@ -399,15 +386,6 @@ const addTemplatedComponent = store => props => {
   })
 }
 
-const _selectComponent = (state, component) => {
-  const componentDef = component._component.startsWith("##")
-    ? component
-    : state.components[component._component]
-  state.currentComponentInfo = makePropsSafe(componentDef, component)
-  state.currentView = "component"
-  return state
-}
-
 const selectComponent = store => component => {
   store.update(state => {
     return _selectComponent(state, component)
@@ -477,74 +455,6 @@ const setScreenType = store => type => {
   })
 }
 
-const deleteComponent = store => componentName => {
-  store.update(state => {
-    const parent = getParent(state.currentPreviewItem.props, componentName)
-
-    if (parent) {
-      parent._children = parent._children.filter(
-        component => component !== componentName
-      )
-    }
-
-    _saveCurrentPreviewItem(state)
-
-    return state
-  })
-}
-
-const moveUpComponent = store => component => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-
-    if (parent) {
-      const currentIndex = parent._children.indexOf(component)
-      if (currentIndex === 0) return s
-
-      const newChildren = parent._children.filter(c => c !== component)
-      newChildren.splice(currentIndex - 1, 0, component)
-      parent._children = newChildren
-    }
-    s.currentComponentInfo = component
-    _saveCurrentPreviewItem(s)
-
-    return s
-  })
-}
-
-const moveDownComponent = store => component => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-
-    if (parent) {
-      const currentIndex = parent._children.indexOf(component)
-      if (currentIndex === parent._children.length - 1) return s
-
-      const newChildren = parent._children.filter(c => c !== component)
-      newChildren.splice(currentIndex + 1, 0, component)
-      parent._children = newChildren
-    }
-    s.currentComponentInfo = component
-    _saveCurrentPreviewItem(s)
-
-    return s
-  })
-}
-
-const copyComponent = store => component => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-    const copiedComponent = cloneDeep(component)
-    walkProps(copiedComponent, p => {
-      p._id = uuid()
-    })
-    parent._children = [...parent._children, copiedComponent]
-    _saveCurrentPreviewItem(s)
-    s.currentComponentInfo = copiedComponent
-    return s
-  })
-}
-
 const getPathToComponent = store => component => {
   // Gets all the components to needed to construct a path.
   const tempStore = get(store)
@@ -576,87 +486,9 @@ const getPathToComponent = store => component => {
   return path
 }
 
-const generateNewIdsForComponent = component =>
-  walkProps(component, p => {
-    p._id = uuid()
-  })
-
-const storeComponentForCopy = store => (component, cut = false) => {
-  store.update(s => {
-    const copiedComponent = cloneDeep(component)
-    s.componentToPaste = copiedComponent
-    if (cut) {
-      const parent = getParent(s.currentPreviewItem.props, component._id)
-      parent._children = parent._children.filter(c => c._id !== component._id)
-      _selectComponent(s, parent)
-    }
-
-    return s
-  })
-}
-
-const pasteComponent = store => (targetComponent, mode) => {
-  store.update(s => {
-    if (!s.componentToPaste) return s
-
-    const componentToPaste = cloneDeep(s.componentToPaste)
-    generateNewIdsForComponent(componentToPaste)
-    delete componentToPaste._cutId
-
-    if (mode === "inside") {
-      targetComponent._children.push(componentToPaste)
-      return s
-    }
-
-    const parent = getParent(s.currentPreviewItem.props, targetComponent)
-
-    const targetIndex = parent._children.indexOf(targetComponent)
-    const index = mode === "above" ? targetIndex : targetIndex + 1
-    parent._children.splice(index, 0, cloneDeep(componentToPaste))
-
-    _saveCurrentPreviewItem(s)
-    _selectComponent(s, componentToPaste)
-
-    return s
-  })
-}
-
-const getParent = (rootProps, child) => {
-  let parent
-  walkProps(rootProps, (p, breakWalk) => {
-    if (
-      p._children &&
-      (p._children.includes(child) || p._children.some(c => c._id === child))
-    ) {
-      parent = p
-      breakWalk()
-    }
-  })
-  return parent
-}
-
-const walkProps = (props, action, cancelToken = null) => {
-  cancelToken = cancelToken || { cancelled: false }
-  action(props, () => {
-    cancelToken.cancelled = true
-  })
-
-  if (props._children) {
-    for (let child of props._children) {
-      if (cancelToken.cancelled) return
-      walkProps(child, action, cancelToken)
-    }
-  }
-}
-
 const setMetadataProp = store => (name, prop) => {
   store.update(s => {
     s.currentPreviewItem[name] = prop
     return s
   })
 }
-
-const _saveCurrentPreviewItem = s =>
-  s.currentFrontEndType === "page"
-    ? _savePage(s)
-    : _saveScreenApi(s.currentPreviewItem, s)
diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
new file mode 100644
index 0000000000..c8c0c7211a
--- /dev/null
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -0,0 +1,59 @@
+import { makePropsSafe } from "components/userInterface/pagesParsing/createProps"
+import api from "./api"
+
+export const selectComponent = (state, component) => {
+  const componentDef = component._component.startsWith("##")
+    ? component
+    : state.components[component._component]
+  state.currentComponentInfo = makePropsSafe(componentDef, component)
+  state.currentView = "component"
+  return state
+}
+
+export const getParent = (rootProps, child) => {
+  let parent
+  walkProps(rootProps, (p, breakWalk) => {
+    if (
+      p._children &&
+      (p._children.includes(child) || p._children.some(c => c._id === child))
+    ) {
+      parent = p
+      breakWalk()
+    }
+  })
+  return parent
+}
+
+export const saveCurrentPreviewItem = s =>
+  s.currentFrontEndType === "page"
+    ? savePage(s)
+    : saveScreenApi(s.currentPreviewItem, s)
+
+export const savePage = async s => {
+  const page = s.pages[s.currentPageName]
+  await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, {
+    page: { componentLibraries: s.pages.componentLibraries, ...page },
+    uiFunctions: s.currentPageFunctions,
+    screens: page._screens,
+  })
+}
+
+export const saveScreenApi = (screen, s) => {
+  api
+    .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
+    .then(() => savePage(s))
+}
+
+export const walkProps = (props, action, cancelToken = null) => {
+  cancelToken = cancelToken || { cancelled: false }
+  action(props, () => {
+    cancelToken.cancelled = true
+  })
+
+  if (props._children) {
+    for (let child of props._children) {
+      if (cancelToken.cancelled) return
+      walkProps(child, action, cancelToken)
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 5672ea6f4c..21ef4b2ab3 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -3,8 +3,10 @@ import { MoreIcon } from "components/common/Icons"
 import { store } from "builderStore"
 import { getComponentDefinition } from "builderStore/store"
 import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-import { last } from "lodash/fp"
+import { last, cloneDeep } from "lodash/fp"
 import UIkit from "uikit"
+import { selectComponent, getParent, walkProps, saveCurrentPreviewItem } from "builderStore/storeUtils"
+import { uuid } from "builderStore/uuid"
 
 export let component
 
@@ -22,6 +24,119 @@ const hideDropdown = () => {
   dropdown.hide()
 }
 
+const moveUpComponent = () => {
+  store.update(s => {
+    const parent = getParent(s.currentPreviewItem.props, component)
+
+    if (parent) {
+      const currentIndex = parent._children.indexOf(component)
+      if (currentIndex === 0) return s
+
+      const newChildren = parent._children.filter(c => c !== component)
+      newChildren.splice(currentIndex - 1, 0, component)
+      parent._children = newChildren
+    }
+    s.currentComponentInfo = component
+    saveCurrentPreviewItem(s)
+
+    return s
+  })
+}
+
+const moveDownComponent = () => {
+  store.update(s => {
+    const parent = getParent(s.currentPreviewItem.props, component)
+
+    if (parent) {
+      const currentIndex = parent._children.indexOf(component)
+      if (currentIndex === parent._children.length - 1) return s
+
+      const newChildren = parent._children.filter(c => c !== component)
+      newChildren.splice(currentIndex + 1, 0, component)
+      parent._children = newChildren
+    }
+    s.currentComponentInfo = component
+    saveCurrentPreviewItem(s)
+
+    return s
+  })
+}
+
+const copyComponent = () => {
+  store.update(s => {
+    const parent = getParent(s.currentPreviewItem.props, component)
+    const copiedComponent = cloneDeep(component)
+    walkProps(copiedComponent, p => {
+      p._id = uuid()
+    })
+    parent._children = [...parent._children, copiedComponent]
+    saveCurrentPreviewItem(s)
+    s.currentComponentInfo = copiedComponent
+    return s
+  })
+}
+
+const deleteComponent = () => {
+  store.update(state => {
+    const parent = getParent(state.currentPreviewItem.props, component)
+
+    if (parent) {
+      parent._children = parent._children.filter(
+        c => c !== component
+      )
+    }
+
+    saveCurrentPreviewItem(state)
+
+    return state
+  })
+}
+
+const generateNewIdsForComponent = c =>
+  walkProps(c, p => {
+    p._id = uuid()
+  })
+
+const storeComponentForCopy = (cut = false) => {
+  store.update(s => {
+    const copiedComponent = cloneDeep(component)
+    s.componentToPaste = copiedComponent
+    if (cut) {
+      const parent = getParent(s.currentPreviewItem.props, component._id)
+      parent._children = parent._children.filter(c => c._id !== component._id)
+      selectComponent(s, parent)
+    }
+
+    return s
+  })
+}
+
+const pasteComponent = mode => {
+  store.update(s => {
+    if (!s.componentToPaste) return s
+
+    const componentToPaste = cloneDeep(s.componentToPaste)
+    generateNewIdsForComponent(componentToPaste)
+    delete componentToPaste._cutId
+
+    if (mode === "inside") {
+      component._children.push(componentToPaste)
+      return s
+    }
+
+    const parent = getParent(s.currentPreviewItem.props, component)
+
+    const targetIndex = parent._children.indexOf(component)
+    const index = mode === "above" ? targetIndex : targetIndex + 1
+    parent._children.splice(index, 0, cloneDeep(componentToPaste))
+
+    saveCurrentPreviewItem(s)
+    selectComponent(s, componentToPaste)
+
+    return s
+  })
+}
+
 </script>
 
 <div class="root" on:click|stopPropagation={()  => {}}>
@@ -30,15 +145,15 @@ const hideDropdown = () => {
   </button>
   <ul class="menu"  bind:this={dropdownEl} on:click={hideDropdown}>
     <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
-    <li on:click={() => store.moveUpComponent(component)}>Move up</li>
-    <li on:click={() => store.moveDownComponent(component)}>Move down</li>
-    <li on:click={() => store.copyComponent(component)}>Duplicate</li>
-    <li on:click={() => store.storeComponentForCopy(component, true)}>Cut</li>
-    <li on:click={() => store.storeComponentForCopy(component)}>Copy</li>
+    <li on:click={moveUpComponent}>Move up</li>
+    <li on:click={moveDownComponent}>Move down</li>
+    <li on:click={copyComponent}>Duplicate</li>
+    <li on:click={() => storeComponentForCopy(true)}>Cut</li>
+    <li on:click={() => storeComponentForCopy(false)}>Copy</li>
     <hr />
-    <li class:disabled={noPaste} on:click={() => store.pasteComponent(component, "above")}>Paste above</li>
-    <li class:disabled={noPaste} on:click={() => store.pasteComponent(component, "below")}>Paste below</li>
-    <li class:disabled={noPaste || noChildrenAllowed} on:click={() => store.pasteComponent(component, "inside")}>Paste inside</li>    
+    <li class:disabled={noPaste} on:click={() => pasteComponent("above")}>Paste above</li>
+    <li class:disabled={noPaste} on:click={() => pasteComponent("below")}>Paste below</li>
+    <li class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent("inside")}>Paste inside</li>    
   </ul>
 </div>
 
@@ -49,7 +164,7 @@ const hideDropdown = () => {
   title="Confirm Delete"
   body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`}
   okText="Delete Component"
-  onOk={() => store.deleteComponent(component)} />
+  onOk={deleteComponent} />
 
 <style>
 
@@ -58,10 +173,6 @@ const hideDropdown = () => {
   z-index:9;
 }
 
-.hidden {
-  display: none;
-}
-
 .root button {
   border-style: none;
   border-radius: 2px;
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 96e6f00531..7a2e38d3d2 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -35,11 +35,6 @@
     sortBy("title"),
   ])
 
-  const confirmDeleteComponent = component => {
-    componentToDelete = component
-    confirmDeleteDialog.show()
-  }
-
   const changeScreen = screen => {
     store.setCurrentScreen(screen.title)
     $goto(`./:page/${screen.title}`)
@@ -75,13 +70,6 @@
 
 </div>
 
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component?`}
-  okText="Delete Component"
-  onOk={() => store.deleteComponent(componentToDelete)} />
-
 <style>
   .root {
     font-weight: 400;
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 8da9f0b16b..093dd12e4e 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -34,11 +34,6 @@
     title: lastPartOfName(layout),
   }
 
-  const confirmDeleteComponent = async component => {
-    componentToDelete = component
-    confirmDeleteDialog.show()
-  }
-
   const setCurrentScreenToLayout = () => {
     store.setScreenType("page")
     $goto("./:page/page-layout")
@@ -67,13 +62,6 @@
   {/if}
 </div>
 
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component?`}
-  okText="Delete Component"
-  onOk={() => store.deleteComponent(componentToDelete)} />
-
 <style>
   .pagelayoutSection {
     margin: 20px 0px 0px 0px;
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index 3fe67e6482..da57b134a0 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -27,11 +27,6 @@
     settingsView.show()
   }
 
-  const confirmDeleteComponent = component => {
-    componentToDelete = component
-    confirmDeleteDialog.show()
-  }
-
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
 </script>
 
@@ -86,13 +81,6 @@
 <NewScreen bind:this={newScreenPicker} />
 <SettingsView bind:this={settingsView} />
 
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
-  okText="Delete Component"
-  onOk={() => store.deleteComponent(componentToDelete)} />
-
 <style>
   button {
     cursor: pointer;
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index eab0060241..cbbb1ebc63 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -34,11 +34,6 @@
     settingsView.show()
   }
 
-  const confirmDeleteComponent = component => {
-    componentToDelete = component
-    confirmDeleteDialog.show()
-  }
-
   let leftNavSwitcher
 
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
@@ -73,13 +68,6 @@
 
 </div>
 
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
-  okText="Delete Component"
-  onOk={() => store.deleteComponent(componentToDelete)} />
-
 <slot />
 
 <style>

From c1cc4f048e5fba394e9bdd5c41087437210a7aad Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 1 Jun 2020 12:15:44 +0100
Subject: [PATCH 51/51] lint:fix & forman

---
 .../builder/src/builderStore/storeUtils.js    |   2 +-
 .../src/components/common/Icons/More.svelte   |  16 +-
 .../modals/CreateEditModel/FieldView.svelte   |  50 ++-
 .../modals/CreateEditRecord.svelte            |  20 +-
 .../modals/RecordFieldControl.svelte          |  40 +-
 .../ComponentDropdownMenu.svelte              | 352 +++++++++---------
 .../ComponentsHierarchyChildren.svelte        |   4 +-
 .../userInterface/FrontendNavigatePane.svelte |   1 -
 8 files changed, 255 insertions(+), 230 deletions(-)

diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index c8c0c7211a..68e20e56b3 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -56,4 +56,4 @@ export const walkProps = (props, action, cancelToken = null) => {
       walkProps(child, action, cancelToken)
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/builder/src/components/common/Icons/More.svelte b/packages/builder/src/components/common/Icons/More.svelte
index f072c48976..1ec4139eae 100644
--- a/packages/builder/src/components/common/Icons/More.svelte
+++ b/packages/builder/src/components/common/Icons/More.svelte
@@ -1,8 +1,12 @@
-<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  viewBox="0 0 24 24" 
-  width="24" 
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
   height="24">
-  <path fill="none" d="M0 0h24v24H0z"/>
-  <path d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z"/>
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6
+    12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21
+    12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5
+    1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z" />
 </svg>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
index ae78405ccb..46f8bd9189 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
@@ -13,16 +13,20 @@
 
   const FIELD_TYPES = ["string", "number", "boolean"]
 
-  export let field = { type: "string", constraints: { type: "string", presence: false } }
+  export let field = {
+    type: "string",
+    constraints: { type: "string", presence: false },
+  }
   export let schema
   export let goBack
 
   let errors = []
   let draftField = cloneDeep(field)
-  
+
   let type = field.type
   let constraints = field.constraints
-  let required = field.constraints.presence && !field.constraints.presence.allowEmpty
+  let required =
+    field.constraints.presence && !field.constraints.presence.allowEmpty
 
   const save = () => {
     constraints.presence = required ? { allowEmpty: false } : false
@@ -31,15 +35,19 @@
     schema[field.name] = draftField
     goBack()
   }
-  
-  $: constraints = 
-      type === "string" ? { type: "string", length: {}, presence: false }
-      : type === "number" ? { type: "number", presence: false, numericality: {} }
-      : type === "boolean" ? { type: "boolean", presence: false }
-      : type === "datetime" ? { type: "date", datetime: {}, presence: false }
-      : type.startsWith('array') ? { type: "array", presence: false }
+
+  $: constraints =
+    type === "string"
+      ? { type: "string", length: {}, presence: false }
+      : type === "number"
+      ? { type: "number", presence: false, numericality: {} }
+      : type === "boolean"
+      ? { type: "boolean", presence: false }
+      : type === "datetime"
+      ? { type: "date", datetime: {}, presence: false }
+      : type.startsWith("array")
+      ? { type: "array", presence: false }
       : { type: "string", presence: false }
-      
 </script>
 
 <div class="root">
@@ -48,24 +56,26 @@
 
   <form on:submit|preventDefault class="uk-form-stacked">
     <Textbox label="Name" bind:text={field.name} />
-    <Dropdown
-      label="Type"
-      bind:selected={type}
-      options={FIELD_TYPES} />
-    
+    <Dropdown label="Type" bind:selected={type} options={FIELD_TYPES} />
+
     <Checkbox label="Required" bind:checked={required} />
-    
 
     {#if type === 'string'}
       <NumberBox label="Max Length" bind:value={constraints.length.maximum} />
       <ValuesList label="Categories" bind:values={constraints.inclusion} />
     {:else if type === 'datetime'}
       <!-- TODO: revisit and fix with JSON schema -->
-      <DatePicker label="Min Value" bind:value={constraints.datetime.earliest} />
+      <DatePicker
+        label="Min Value"
+        bind:value={constraints.datetime.earliest} />
       <DatePicker label="Max Value" bind:value={constraints.datetime.latest} />
     {:else if type === 'number'}
-      <NumberBox label="Min Value" bind:value={constraints.numericality.greaterThanOrEqualTo} />
-      <NumberBox label="Max Value" bind:value={constraints.numericality.lessThanOrEqualTo} />
+      <NumberBox
+        label="Min Value"
+        bind:value={constraints.numericality.greaterThanOrEqualTo} />
+      <NumberBox
+        label="Max Value"
+        bind:value={constraints.numericality.lessThanOrEqualTo} />
     {/if}
   </form>
 </div>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
index d5320eca0d..62688d58e3 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -23,22 +23,22 @@
   function closed() {
     onClosed()
   }
-  
+
   const isSelect = meta =>
-    meta.type === "string" 
-    && meta.constraints 
-    && meta.constraints.inclusion 
-    && meta.constraints.inclusion.length > 0
-    
+    meta.type === "string" &&
+    meta.constraints &&
+    meta.constraints.inclusion &&
+    meta.constraints.inclusion.length > 0
+
   function determineInputType(meta) {
     if (meta.type === "datetime") return "date"
     if (meta.type === "number") return "number"
     if (meta.type === "boolean") return "checkbox"
     if (isSelect(meta)) return "select"
-        
+
     return "text"
   }
-  
+
   function determineOptions(meta) {
     return isSelect(meta) ? meta.constraints.inclusion : []
   }
@@ -54,8 +54,8 @@
     )
     if (recordResponse.errors) {
       errors = Object.keys(recordResponse.errors)
-                .map(k => ({dataPath: k,  message: recordResponse.errors[k]}))
-                .flat()
+        .map(k => ({ dataPath: k, message: recordResponse.errors[k] }))
+        .flat()
       return
     }
 
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
index b0571a2353..5c308a7abb 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
@@ -4,15 +4,15 @@
   export let label
   export let errors = []
   export let options = []
-  
+
   let checked = type === "checkbox" ? value : false
-  
+
   const determineClassName = type => {
     if (type === "checkbox") return "uk-checkbox"
     if (type === "select") return "uk-select"
     return "uk-input"
   }
-    
+
   const handleInput = event => {
     if (event.target.type === "checkbox") {
       value = event.target.checked
@@ -30,22 +30,22 @@
 
 <label>{label}</label>
 
-{#if type === "select"}
-<select 
-  class={determineClassName(type)}
-  bind:value={value}
-  class:uk-form-danger={errors.length > 0} >
-  {#each options as opt}
-    <option value={opt}>{ opt }</option>
-  {/each}
-</select>
+{#if type === 'select'}
+  <select
+    class={determineClassName(type)}
+    bind:value
+    class:uk-form-danger={errors.length > 0}>
+    {#each options as opt}
+      <option value={opt}>{opt}</option>
+    {/each}
+  </select>
 {:else}
-<input
-  class={determineClassName(type)}
-  class:uk-form-danger={errors.length > 0}
-  {checked}
-  {type}
-  {value}
-  on:input={handleInput}
-  on:change={handleInput} />
+  <input
+    class={determineClassName(type)}
+    class:uk-form-danger={errors.length > 0}
+    {checked}
+    {type}
+    {value}
+    on:input={handleInput}
+    on:change={handleInput} />
 {/if}
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 21ef4b2ab3..712031aa3d 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -1,149 +1,160 @@
 <script>
-import { MoreIcon } from "components/common/Icons"
-import { store } from "builderStore"
-import { getComponentDefinition } from "builderStore/store"
-import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-import { last, cloneDeep } from "lodash/fp"
-import UIkit from "uikit"
-import { selectComponent, getParent, walkProps, saveCurrentPreviewItem } from "builderStore/storeUtils"
-import { uuid } from "builderStore/uuid"
+  import { MoreIcon } from "components/common/Icons"
+  import { store } from "builderStore"
+  import { getComponentDefinition } from "builderStore/store"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { last, cloneDeep } from "lodash/fp"
+  import UIkit from "uikit"
+  import {
+    selectComponent,
+    getParent,
+    walkProps,
+    saveCurrentPreviewItem,
+  } from "builderStore/storeUtils"
+  import { uuid } from "builderStore/uuid"
 
-export let component
+  export let component
 
-let confirmDeleteDialog
-let dropdownEl
+  let confirmDeleteDialog
+  let dropdownEl
 
-$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right", "delay-hide": 0, animation: false });
-$: dropdown && UIkit.util.on(dropdown, "shown", () => hidden = false)
-$: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false
-$: noPaste = !$store.componentToPaste || $store.componentToPaste._id === component._id
-
-const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
-
-const hideDropdown = () => {
-  dropdown.hide()
-}
-
-const moveUpComponent = () => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-
-    if (parent) {
-      const currentIndex = parent._children.indexOf(component)
-      if (currentIndex === 0) return s
-
-      const newChildren = parent._children.filter(c => c !== component)
-      newChildren.splice(currentIndex - 1, 0, component)
-      parent._children = newChildren
-    }
-    s.currentComponentInfo = component
-    saveCurrentPreviewItem(s)
-
-    return s
+  $: dropdown = UIkit.dropdown(dropdownEl, {
+    mode: "click",
+    offset: 0,
+    pos: "bottom-right",
+    "delay-hide": 0,
+    animation: false,
   })
-}
+  $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
+  $: noChildrenAllowed =
+    !component ||
+    getComponentDefinition($store, component._component).children === false
+  $: noPaste =
+    !$store.componentToPaste || $store.componentToPaste._id === component._id
 
-const moveDownComponent = () => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
+  const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
 
-    if (parent) {
-      const currentIndex = parent._children.indexOf(component)
-      if (currentIndex === parent._children.length - 1) return s
+  const hideDropdown = () => {
+    dropdown.hide()
+  }
 
-      const newChildren = parent._children.filter(c => c !== component)
-      newChildren.splice(currentIndex + 1, 0, component)
-      parent._children = newChildren
-    }
-    s.currentComponentInfo = component
-    saveCurrentPreviewItem(s)
+  const moveUpComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
 
-    return s
-  })
-}
+      if (parent) {
+        const currentIndex = parent._children.indexOf(component)
+        if (currentIndex === 0) return s
 
-const copyComponent = () => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-    const copiedComponent = cloneDeep(component)
-    walkProps(copiedComponent, p => {
+        const newChildren = parent._children.filter(c => c !== component)
+        newChildren.splice(currentIndex - 1, 0, component)
+        parent._children = newChildren
+      }
+      s.currentComponentInfo = component
+      saveCurrentPreviewItem(s)
+
+      return s
+    })
+  }
+
+  const moveDownComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
+
+      if (parent) {
+        const currentIndex = parent._children.indexOf(component)
+        if (currentIndex === parent._children.length - 1) return s
+
+        const newChildren = parent._children.filter(c => c !== component)
+        newChildren.splice(currentIndex + 1, 0, component)
+        parent._children = newChildren
+      }
+      s.currentComponentInfo = component
+      saveCurrentPreviewItem(s)
+
+      return s
+    })
+  }
+
+  const copyComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
+      const copiedComponent = cloneDeep(component)
+      walkProps(copiedComponent, p => {
+        p._id = uuid()
+      })
+      parent._children = [...parent._children, copiedComponent]
+      saveCurrentPreviewItem(s)
+      s.currentComponentInfo = copiedComponent
+      return s
+    })
+  }
+
+  const deleteComponent = () => {
+    store.update(state => {
+      const parent = getParent(state.currentPreviewItem.props, component)
+
+      if (parent) {
+        parent._children = parent._children.filter(c => c !== component)
+      }
+
+      saveCurrentPreviewItem(state)
+
+      return state
+    })
+  }
+
+  const generateNewIdsForComponent = c =>
+    walkProps(c, p => {
       p._id = uuid()
     })
-    parent._children = [...parent._children, copiedComponent]
-    saveCurrentPreviewItem(s)
-    s.currentComponentInfo = copiedComponent
-    return s
-  })
-}
 
-const deleteComponent = () => {
-  store.update(state => {
-    const parent = getParent(state.currentPreviewItem.props, component)
+  const storeComponentForCopy = (cut = false) => {
+    store.update(s => {
+      const copiedComponent = cloneDeep(component)
+      s.componentToPaste = copiedComponent
+      if (cut) {
+        const parent = getParent(s.currentPreviewItem.props, component._id)
+        parent._children = parent._children.filter(c => c._id !== component._id)
+        selectComponent(s, parent)
+      }
 
-    if (parent) {
-      parent._children = parent._children.filter(
-        c => c !== component
-      )
-    }
-
-    saveCurrentPreviewItem(state)
-
-    return state
-  })
-}
-
-const generateNewIdsForComponent = c =>
-  walkProps(c, p => {
-    p._id = uuid()
-  })
-
-const storeComponentForCopy = (cut = false) => {
-  store.update(s => {
-    const copiedComponent = cloneDeep(component)
-    s.componentToPaste = copiedComponent
-    if (cut) {
-      const parent = getParent(s.currentPreviewItem.props, component._id)
-      parent._children = parent._children.filter(c => c._id !== component._id)
-      selectComponent(s, parent)
-    }
-
-    return s
-  })
-}
-
-const pasteComponent = mode => {
-  store.update(s => {
-    if (!s.componentToPaste) return s
-
-    const componentToPaste = cloneDeep(s.componentToPaste)
-    generateNewIdsForComponent(componentToPaste)
-    delete componentToPaste._cutId
-
-    if (mode === "inside") {
-      component._children.push(componentToPaste)
       return s
-    }
+    })
+  }
 
-    const parent = getParent(s.currentPreviewItem.props, component)
+  const pasteComponent = mode => {
+    store.update(s => {
+      if (!s.componentToPaste) return s
 
-    const targetIndex = parent._children.indexOf(component)
-    const index = mode === "above" ? targetIndex : targetIndex + 1
-    parent._children.splice(index, 0, cloneDeep(componentToPaste))
+      const componentToPaste = cloneDeep(s.componentToPaste)
+      generateNewIdsForComponent(componentToPaste)
+      delete componentToPaste._cutId
 
-    saveCurrentPreviewItem(s)
-    selectComponent(s, componentToPaste)
+      if (mode === "inside") {
+        component._children.push(componentToPaste)
+        return s
+      }
 
-    return s
-  })
-}
+      const parent = getParent(s.currentPreviewItem.props, component)
 
+      const targetIndex = parent._children.indexOf(component)
+      const index = mode === "above" ? targetIndex : targetIndex + 1
+      parent._children.splice(index, 0, cloneDeep(componentToPaste))
+
+      saveCurrentPreviewItem(s)
+      selectComponent(s, componentToPaste)
+
+      return s
+    })
+  }
 </script>
 
-<div class="root" on:click|stopPropagation={()  => {}}>
+<div class="root" on:click|stopPropagation={() => {}}>
   <button>
     <MoreIcon />
   </button>
-  <ul class="menu"  bind:this={dropdownEl} on:click={hideDropdown}>
+  <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
     <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
     <li on:click={moveUpComponent}>Move up</li>
     <li on:click={moveDownComponent}>Move down</li>
@@ -151,14 +162,20 @@ const pasteComponent = mode => {
     <li on:click={() => storeComponentForCopy(true)}>Cut</li>
     <li on:click={() => storeComponentForCopy(false)}>Copy</li>
     <hr />
-    <li class:disabled={noPaste} on:click={() => pasteComponent("above")}>Paste above</li>
-    <li class:disabled={noPaste} on:click={() => pasteComponent("below")}>Paste below</li>
-    <li class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent("inside")}>Paste inside</li>    
+    <li class:disabled={noPaste} on:click={() => pasteComponent('above')}>
+      Paste above
+    </li>
+    <li class:disabled={noPaste} on:click={() => pasteComponent('below')}>
+      Paste below
+    </li>
+    <li
+      class:disabled={noPaste || noChildrenAllowed}
+      on:click={() => pasteComponent('inside')}>
+      Paste inside
+    </li>
   </ul>
 </div>
 
-
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Delete"
@@ -167,52 +184,49 @@ const pasteComponent = mode => {
   onOk={deleteComponent} />
 
 <style>
+  .root {
+    overflow: hidden;
+    z-index: 9;
+  }
 
-.root {
-  overflow: hidden;
-  z-index:9;
-}
+  .root button {
+    border-style: none;
+    border-radius: 2px;
+    padding: 5px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--button-text);
+    outline: none;
+  }
 
-.root button {
-  border-style: none;
-  border-radius: 2px;
-  padding: 5px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--button-text);
-  outline: none;
-}
+  .menu {
+    z-index: 100000;
+    overflow: visible;
+    padding: 10px 0;
+  }
 
-.menu {
-  z-index: 100000;
-  overflow: visible;
-  padding: 10px 0
-}
+  .menu li {
+    border-style: none;
+    background-color: transparent;
+    list-style-type: none;
+    padding: 4px 5px 4px 15px;
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
+  }
 
-.menu li {
-  border-style: none;
-  background-color: transparent;
-  list-style-type: none;
-  padding: 4px 5px 4px 15px;
-  margin: 0;
-  width: 100%;
-  box-sizing: border-box;
-}
+  .menu li:not(.disabled) {
+    cursor: pointer;
+    color: var(--ink);
+  }
 
+  .menu li:not(.disabled):hover {
+    color: var(--button-text);
+    background-color: var(--grey-light);
+  }
 
-.menu li:not(.disabled) {
-  cursor: pointer;
-  color: var(--ink);
-}
-
-.menu li:not(.disabled):hover {
-  color: var(--button-text);
-  background-color: var(--grey-light); 
-}
-
-.disabled {
-  color: var(--grey-dark);
-  cursor: default;
-}
-
-</style>
\ No newline at end of file
+  .disabled {
+    color: var(--grey-dark);
+    cursor: default;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 16aab64576..344e02d127 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -16,7 +16,6 @@
   export let onSelect = () => {}
   export let level = 0
 
-
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
 
@@ -43,7 +42,7 @@
         style="padding-left: {level * 20 + 53}px">
         <div>{get_capitalised_name(component._component)}</div>
         <div class="actions">
-          <ComponentDropdownMenu component={component}/>
+          <ComponentDropdownMenu {component} />
         </div>
       </div>
 
@@ -96,5 +95,4 @@
   .item:hover .actions {
     display: block;
   }
-
 </style>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index cee63c4cbb..86804885ff 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -45,5 +45,4 @@
   .newscreen:hover {
     background: var(--grey-light);
   }
-
 </style>