From 7aa882c568af7f4f3227a508f8584c43741b8be5 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Sat, 30 May 2020 18:59:33 +0100
Subject: [PATCH 01/57] Complete HSVAColor Class and Utils

---
 .../Colorpicker/Colorpicker.svelte            |   0
 .../Colorpicker/utils/HSVAColor.js            |  66 +++++++++++
 .../userInterface/Colorpicker/utils/utils.js  | 108 ++++++++++++++++++
 3 files changed, 174 insertions(+)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/utils.js

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js b/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
new file mode 100644
index 0000000000..e39e700903
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
@@ -0,0 +1,66 @@
+import {
+  getHexaValues,
+  getRgbaValues,
+  hsvToHSL,
+  isValidRgba,
+  rgbToHSV,
+  hsvToRgb,
+} from "./utils"
+
+export class HSVAColor {
+  h = 0
+  s = 0
+  v = 0
+  a = 1
+
+  constructor(color) {
+    if (color.startsWith("#")) {
+      let [rHex, gHex, bHex, aHex] = getHexaValues(color)
+      this.hexaToHSVA([rHex, gHex, bHex], aHex)
+    } else if (color.startsWith("rgb")) {
+      let rgba = getRgbaValues(color)
+      this.rgbaToHSVA(rgba)
+    }
+  }
+
+  setHSVA([h, s, v, a]) {
+    this.h = h
+    this.s = s
+    this.v = v
+    this.a = a
+  }
+
+  getHSLA() {
+    const [h, s, l] = hsvToHSL([this.h, this.s, this.v])
+    return `hsla(${h}, ${s}, ${l}, ${this.a})`
+  }
+
+  hexaToHSVA(hex, alpha = "FF") {
+    const rgba = hex
+      .map(v => parseInt(v, 16))
+      .concat((parseInt(alpha, 16) / 255).toFixed(1))
+    this.rgbaToHSVA(rgba)
+  }
+
+  rgbaToHSVA(rgba) {
+    if (isValidRgba(rgba)) {
+      const [r, g, b, a = "1"] = rgba
+      let hsv = rgbToHSV([r, g, b])
+      this.setHSVA([...hsv, a])
+    }
+  }
+
+  hsvaToHexa() {
+    const [r, g, b, a] = this.hsvaToRgba()
+    const hexa = [r, g, b]
+      .map(v => v.toString(16))
+      .concat((a * 255).toFixed(1).toString(16))
+    return hexa
+  }
+
+  hsvaToRgba() {
+    const { h, s, v, a } = this
+    let rgb = hsvToRgb([h, s, v])
+    return [...rgb, a]
+  }
+}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js
new file mode 100644
index 0000000000..7412c42e27
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js
@@ -0,0 +1,108 @@
+export const getRgbaValues = rgbaString =>
+  rgbaString.replace(/[a-z\(\)\s]/gi, "").split(",")
+
+export const getHexaValues = hexString =>
+  hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi)
+
+export const isValidRgba = rgba => {
+  let [r, g, b, a = 1] = rgba
+
+  let isValidLengthRange = rgba.length === 3 || rgba.length === 4
+  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255)
+  let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1)
+
+  return isValidLengthRange && isValidColorRange && isValidAlphaRange
+}
+
+//Credit : https://github.com/Qix-/color-convert
+export const rgbToHSV = rgb => {
+  let rdif
+  let gdif
+  let bdif
+  let h
+  let s
+
+  const r = rgb[0] / 255
+  const g = rgb[1] / 255
+  const b = rgb[2] / 255
+  const v = Math.max(r, g, b)
+  const diff = v - Math.min(r, g, b)
+  const diffc = function(c) {
+    return (v - c) / 6 / diff + 1 / 2
+  }
+
+  if (diff === 0) {
+    h = 0
+    s = 0
+  } else {
+    s = diff / v
+    rdif = diffc(r)
+    gdif = diffc(g)
+    bdif = diffc(b)
+
+    if (r === v) {
+      h = bdif - gdif
+    } else if (g === v) {
+      h = 1 / 3 + rdif - bdif
+    } else if (b === v) {
+      h = 2 / 3 + gdif - rdif
+    }
+
+    if (h < 0) {
+      h += 1
+    } else if (h > 1) {
+      h -= 1
+    }
+  }
+
+  const hsvResult = [h * 360, s * 100, v * 100].map(v => v.toFixed(0))
+  return hsvResult
+}
+
+//Credit : https://github.com/Qix-/color-convert
+export const hsvToRgb = hsv => {
+  const h = hsv[0] / 60
+  const s = hsv[1] / 100
+  let v = hsv[2] / 100
+  const hi = Math.floor(h) % 6
+
+  const f = h - Math.floor(h)
+  const p = 255 * v * (1 - s)
+  const q = 255 * v * (1 - s * f)
+  const t = 255 * v * (1 - s * (1 - f))
+  v *= 255
+
+  switch (hi) {
+    case 0:
+      return [v, t, p]
+    case 1:
+      return [q, v, p]
+    case 2:
+      return [p, v, t]
+    case 3:
+      return [p, q, v]
+    case 4:
+      return [t, p, v]
+    case 5:
+      return [v, p, q]
+  }
+}
+
+//Credit : https://github.com/Qix-/color-convert
+export const hsvToHSL = hsv => {
+  const h = hsv[0]
+  const s = hsv[1] / 100
+  const v = hsv[2] / 100
+  const vmin = Math.max(v, 0.01)
+  let sl
+  let l
+
+  l = (2 - s) * v
+  const lmin = (2 - s) * vmin
+  sl = s * vmin
+  sl /= lmin <= 1 ? lmin : 2 - lmin
+  sl = sl || 0
+  l /= 2
+
+  return [h, sl * 100, l * 100]
+}

From 2ec8ed5464e2e6df7768b59a63e73097aac9be46 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Sun, 31 May 2020 20:55:51 +0100
Subject: [PATCH 02/57] Palette, Slider Components and Util Updates

---
 .../Colorpicker/Colorpicker.svelte            |  32 ++++
 .../userInterface/Colorpicker/Palette.svelte  |  49 ++++++
 .../userInterface/Colorpicker/Slider.svelte   |  87 +++++++++++
 .../userInterface/Colorpicker/drag.js         |  23 +++
 .../userInterface/Colorpicker/index.js        |   2 +
 .../userInterface/Colorpicker/utils.js        | 146 ++++++++++++++++++
 .../Colorpicker/utils/HSVAColor.js            |  66 --------
 .../userInterface/Colorpicker/utils/utils.js  | 108 -------------
 8 files changed, 339 insertions(+), 174 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/drag.js
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/index.js
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils.js
 delete mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
 delete mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/utils.js

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index e69de29bb2..db70f3ad64 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -0,0 +1,32 @@
+<script>
+  import Slider from "./Slider.svelte";
+  import Palette from "./Palette.svelte";
+
+  export let value = "#00000000";
+
+  let h = 0;
+  let s = 0;
+  let v = 0;
+  let a = 1;
+</script>
+
+<style>
+  .colorpicker-container {
+    display: flex;
+    flex-direction: column;
+    height: 300px;
+    width: 250px;
+    background: #ffffff;
+    border: 1px solid #e8e8ef;
+    border-radius: 2px;
+  }
+</style>
+
+<div class="colorpicker-container">
+
+  <Palette {h} {a} />
+
+  <Slider type="hue" on:change={hue => (h = hue.detail)} />
+
+  <Slider type="alpha" on:change={alpha => (a = alpha.detail)} />
+</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
new file mode 100644
index 0000000000..4a4decfda8
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { onMount } from "svelte";
+  export let h,
+    a = 0;
+
+  let palette;
+  let dimensions;
+
+  onMount(() => {
+    if (palette) {
+      dimensions = palette.getBoundingClientRect();
+    }
+  });
+
+  function handleClick(event) {
+    const { left, top, width, height } = dimensions;
+    let pickerX = (event.clientX - left) / width;
+    let pickerY = (event.clientY - top) / height;
+    //Saturation - adds white: pickerX * 100
+    //value - adds black: 100 - pickerY * 100
+    console.log("X", pickerX, "Y", pickerY);
+  }
+
+  $: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
+    linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
+  `;
+  $: style = `background: ${paletteGradient};`;
+</script>
+
+<style>
+  .palette {
+    position: relative;
+    width: 100%;
+    height: 175px;
+  }
+
+  .picker {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: transparent;
+    border: 2px solid white;
+    border-radius: 50%;
+  }
+</style>
+
+<div bind:this={palette} on:click={handleClick} class="palette" {style}>
+  <div class="picker" />
+</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
new file mode 100644
index 0000000000..82e00baa93
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -0,0 +1,87 @@
+<script>
+  import { onMount, createEventDispatcher } from "svelte";
+  import dragable from "./drag.js";
+
+  export let type = "hue";
+
+  const dispatch = createEventDispatcher();
+
+  let slider;
+  let dimensions = {};
+  let thumbPosition = 0;
+
+  onMount(() => {
+    if (slider) {
+      dimensions = slider.getBoundingClientRect();
+    }
+  });
+
+  function handleClick(mouseX) {
+    const { left, width } = dimensions;
+    let clickPosition = mouseX - left;
+    debugger;
+    if (clickPosition >= 0 && clickPosition <= width) {
+      thumbPosition = clickPosition;
+      let percentageClick = thumbPosition / width;
+      let value =
+        type === "hue"
+          ? Math.round(360 * percentageClick).toString()
+          : percentageClick.toFixed(2);
+      dispatch("change", value);
+    }
+  }
+
+  $: style = `transform: translateX(${thumbPosition - 6}px);`;
+</script>
+
+<style>
+  .color-format-slider {
+    position: relative;
+    align-self: center;
+    height: 8px;
+    width: 220px;
+    border-radius: 10px;
+    margin: 10px 0px;
+    border: 1px solid #e8e8ef;
+  }
+
+  .hue {
+    background: linear-gradient(
+      to right,
+      hsl(0, 100%, 50%),
+      hsl(60, 100%, 50%),
+      hsl(120, 100%, 50%),
+      hsl(180, 100%, 50%),
+      hsl(240, 100%, 50%),
+      hsl(300, 100%, 50%),
+      hsl(360, 100%, 50%)
+    );
+  }
+
+  .alpha {
+    background: linear-gradient(to right, transparent, rgb(0 0 0));
+  }
+
+  .slider-thumb {
+    position: absolute;
+    bottom: -3px;
+    height: 12px;
+    width: 12px;
+    border: 1px solid black;
+    border-radius: 50%;
+    background-color: #ffffff;
+  }
+</style>
+
+<div
+  bind:this={slider}
+  on:click={event => handleClick(event.clientX)}
+  class="color-format-slider"
+  class:hue={type === 'hue'}
+  class:alpha={type === 'alpha'}>
+  <div
+    use:dragable
+    on:drag={e => handleClick(e.detail)}
+    class="slider-thumb"
+    {style} />
+</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js
new file mode 100644
index 0000000000..eb15c8d4fb
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/drag.js
@@ -0,0 +1,23 @@
+export default function(node) {
+	function handleMouseDown() {
+		window.addEventListener('mousemove', handleMouseMove);
+		window.addEventListener('mouseup', handleMouseUp);
+	}
+
+	function handleMouseMove(event) {
+		let mouseX = event.clientX;
+		console.log(mouseX);
+		node.dispatchEvent(
+			new CustomEvent('drag', {
+				detail: mouseX
+			})
+		);
+	}
+
+	function handleMouseUp() {
+		window.removeEventListener('mousedown', handleMouseDown);
+		window.removeEventListener('mousemove', handleMouseMove);
+	}
+
+	node.addEventListener('mousedown', handleMouseDown);
+}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js
new file mode 100644
index 0000000000..ad8187a09b
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/index.js
@@ -0,0 +1,2 @@
+import Colorpicker from './Colorpicker.svelte';
+export default Colorpicker;
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
new file mode 100644
index 0000000000..98bb96d259
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -0,0 +1,146 @@
+export const getRgbaValues = (rgbaString) => rgbaString.replace(/[a-z()\s]/gi, '').split(',');
+
+export const getHexaValues = (hexString) => hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi);
+
+export const isValidRgba = (rgba) => {
+	let [ r, g, b, a = 1 ] = rgba;
+
+	let isValidLengthRange = rgba.length === 3 || rgba.length === 4;
+	let isValidColorRange = [ r, g, b ].every((v) => v >= 0 && v <= 255);
+	let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1);
+
+	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
+};
+
+export const determineColorType = (color) => {
+	let hsva = [];
+	if (color.startsWith('#')) {
+		let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
+		hsva = hexaToHSVA([ rHex, gHex, bHex ], aHex);
+	} else if (color.startsWith('rgb')) {
+		let rgba = getRgbaValues(color);
+		hsva = rgbaToHSVA(rgba);
+	}
+};
+
+export const getHSLA = (hsv, a) => {
+	const [ h, s, l ] = hsvToHSL(hsv);
+	return `hsla(${h}, ${s}, ${l}, ${a})`;
+};
+
+export const hexaToHSVA = (hex, alpha = 'FF') => {
+	const rgba = hex.map((v) => parseInt(v, 16)).concat((parseInt(alpha, 16) / 255).toFixed(1));
+	return rgbaToHSVA(rgba);
+};
+
+export const rgbaToHSVA = (rgba) => {
+	if (isValidRgba(rgba)) {
+		const [ r, g, b, a = '1' ] = rgba;
+		let hsv = rgbToHSV([ r, g, b ]);
+		return [ ...hsv, a ];
+	}
+};
+
+export const hsvaToHexa = () => {
+	const [ r, g, b, a ] = hsvaToRgba();
+	const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16));
+	return hexa;
+};
+
+export const hsvaToRgba = (h, s, v, a) => {
+	let rgb = _hsvToRgb([ h, s, v ]);
+	return [ ...rgb, a ];
+};
+
+//Credit : https://github.com/Qix-/color-convert
+export const _rgbToHSV = (rgb) => {
+	let rdif;
+	let gdif;
+	let bdif;
+	let h;
+	let s;
+
+	const r = rgb[0] / 255;
+	const g = rgb[1] / 255;
+	const b = rgb[2] / 255;
+	const v = Math.max(r, g, b);
+	const diff = v - Math.min(r, g, b);
+	const diffc = function(c) {
+		return (v - c) / 6 / diff + 1 / 2;
+	};
+
+	if (diff === 0) {
+		h = 0;
+		s = 0;
+	} else {
+		s = diff / v;
+		rdif = diffc(r);
+		gdif = diffc(g);
+		bdif = diffc(b);
+
+		if (r === v) {
+			h = bdif - gdif;
+		} else if (g === v) {
+			h = 1 / 3 + rdif - bdif;
+		} else if (b === v) {
+			h = 2 / 3 + gdif - rdif;
+		}
+
+		if (h < 0) {
+			h += 1;
+		} else if (h > 1) {
+			h -= 1;
+		}
+	}
+
+	const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => v.toFixed(0));
+	return hsvResult;
+};
+
+//Credit : https://github.com/Qix-/color-convert
+export const _hsvToRgb = (hsv) => {
+	const h = hsv[0] / 60;
+	const s = hsv[1] / 100;
+	let v = hsv[2] / 100;
+	const hi = Math.floor(h) % 6;
+
+	const f = h - Math.floor(h);
+	const p = 255 * v * (1 - s);
+	const q = 255 * v * (1 - s * f);
+	const t = 255 * v * (1 - s * (1 - f));
+	v *= 255;
+
+	switch (hi) {
+		case 0:
+			return [ v, t, p ];
+		case 1:
+			return [ q, v, p ];
+		case 2:
+			return [ p, v, t ];
+		case 3:
+			return [ p, q, v ];
+		case 4:
+			return [ t, p, v ];
+		case 5:
+			return [ v, p, q ];
+	}
+};
+
+//Credit : https://github.com/Qix-/color-convert
+export const _hsvToHSL = (hsv) => {
+	const h = hsv[0];
+	const s = hsv[1] / 100;
+	const v = hsv[2] / 100;
+	const vmin = Math.max(v, 0.01);
+	let sl;
+	let l;
+
+	l = (2 - s) * v;
+	const lmin = (2 - s) * vmin;
+	sl = s * vmin;
+	sl /= lmin <= 1 ? lmin : 2 - lmin;
+	sl = sl || 0;
+	l /= 2;
+
+	return [ h, sl * 100, l * 100 ];
+};
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js b/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
deleted file mode 100644
index e39e700903..0000000000
--- a/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  getHexaValues,
-  getRgbaValues,
-  hsvToHSL,
-  isValidRgba,
-  rgbToHSV,
-  hsvToRgb,
-} from "./utils"
-
-export class HSVAColor {
-  h = 0
-  s = 0
-  v = 0
-  a = 1
-
-  constructor(color) {
-    if (color.startsWith("#")) {
-      let [rHex, gHex, bHex, aHex] = getHexaValues(color)
-      this.hexaToHSVA([rHex, gHex, bHex], aHex)
-    } else if (color.startsWith("rgb")) {
-      let rgba = getRgbaValues(color)
-      this.rgbaToHSVA(rgba)
-    }
-  }
-
-  setHSVA([h, s, v, a]) {
-    this.h = h
-    this.s = s
-    this.v = v
-    this.a = a
-  }
-
-  getHSLA() {
-    const [h, s, l] = hsvToHSL([this.h, this.s, this.v])
-    return `hsla(${h}, ${s}, ${l}, ${this.a})`
-  }
-
-  hexaToHSVA(hex, alpha = "FF") {
-    const rgba = hex
-      .map(v => parseInt(v, 16))
-      .concat((parseInt(alpha, 16) / 255).toFixed(1))
-    this.rgbaToHSVA(rgba)
-  }
-
-  rgbaToHSVA(rgba) {
-    if (isValidRgba(rgba)) {
-      const [r, g, b, a = "1"] = rgba
-      let hsv = rgbToHSV([r, g, b])
-      this.setHSVA([...hsv, a])
-    }
-  }
-
-  hsvaToHexa() {
-    const [r, g, b, a] = this.hsvaToRgba()
-    const hexa = [r, g, b]
-      .map(v => v.toString(16))
-      .concat((a * 255).toFixed(1).toString(16))
-    return hexa
-  }
-
-  hsvaToRgba() {
-    const { h, s, v, a } = this
-    let rgb = hsvToRgb([h, s, v])
-    return [...rgb, a]
-  }
-}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js
deleted file mode 100644
index 7412c42e27..0000000000
--- a/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js
+++ /dev/null
@@ -1,108 +0,0 @@
-export const getRgbaValues = rgbaString =>
-  rgbaString.replace(/[a-z\(\)\s]/gi, "").split(",")
-
-export const getHexaValues = hexString =>
-  hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi)
-
-export const isValidRgba = rgba => {
-  let [r, g, b, a = 1] = rgba
-
-  let isValidLengthRange = rgba.length === 3 || rgba.length === 4
-  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255)
-  let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1)
-
-  return isValidLengthRange && isValidColorRange && isValidAlphaRange
-}
-
-//Credit : https://github.com/Qix-/color-convert
-export const rgbToHSV = rgb => {
-  let rdif
-  let gdif
-  let bdif
-  let h
-  let s
-
-  const r = rgb[0] / 255
-  const g = rgb[1] / 255
-  const b = rgb[2] / 255
-  const v = Math.max(r, g, b)
-  const diff = v - Math.min(r, g, b)
-  const diffc = function(c) {
-    return (v - c) / 6 / diff + 1 / 2
-  }
-
-  if (diff === 0) {
-    h = 0
-    s = 0
-  } else {
-    s = diff / v
-    rdif = diffc(r)
-    gdif = diffc(g)
-    bdif = diffc(b)
-
-    if (r === v) {
-      h = bdif - gdif
-    } else if (g === v) {
-      h = 1 / 3 + rdif - bdif
-    } else if (b === v) {
-      h = 2 / 3 + gdif - rdif
-    }
-
-    if (h < 0) {
-      h += 1
-    } else if (h > 1) {
-      h -= 1
-    }
-  }
-
-  const hsvResult = [h * 360, s * 100, v * 100].map(v => v.toFixed(0))
-  return hsvResult
-}
-
-//Credit : https://github.com/Qix-/color-convert
-export const hsvToRgb = hsv => {
-  const h = hsv[0] / 60
-  const s = hsv[1] / 100
-  let v = hsv[2] / 100
-  const hi = Math.floor(h) % 6
-
-  const f = h - Math.floor(h)
-  const p = 255 * v * (1 - s)
-  const q = 255 * v * (1 - s * f)
-  const t = 255 * v * (1 - s * (1 - f))
-  v *= 255
-
-  switch (hi) {
-    case 0:
-      return [v, t, p]
-    case 1:
-      return [q, v, p]
-    case 2:
-      return [p, v, t]
-    case 3:
-      return [p, q, v]
-    case 4:
-      return [t, p, v]
-    case 5:
-      return [v, p, q]
-  }
-}
-
-//Credit : https://github.com/Qix-/color-convert
-export const hsvToHSL = hsv => {
-  const h = hsv[0]
-  const s = hsv[1] / 100
-  const v = hsv[2] / 100
-  const vmin = Math.max(v, 0.01)
-  let sl
-  let l
-
-  l = (2 - s) * v
-  const lmin = (2 - s) * vmin
-  sl = s * vmin
-  sl /= lmin <= 1 ? lmin : 2 - lmin
-  sl = sl || 0
-  l /= 2
-
-  return [h, sl * 100, l * 100]
-}

From e1ecc3f31b66e524dbbc69576f01aebb18998015 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 1 Jun 2020 23:01:56 +0100
Subject: [PATCH 03/57] Completed Palette and Slider with integration

---
 .../Colorpicker/Colorpicker.svelte            | 44 +++++++++++++++--
 .../userInterface/Colorpicker/Palette.svelte  | 48 +++++++++++--------
 .../userInterface/Colorpicker/Slider.svelte   | 26 +++++-----
 .../userInterface/Colorpicker/drag.js         |  1 -
 .../userInterface/Colorpicker/utils.js        | 37 +++++++-------
 5 files changed, 99 insertions(+), 57 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index db70f3ad64..4ca425bcb0 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,13 +1,49 @@
 <script>
+  import {onMount} from "svelte"
+  import { getAndConvertHexa, getAndConvertRgba, getHSLA, hsvaToHexa, hsvaToRgba } from "./utils.js"
   import Slider from "./Slider.svelte";
   import Palette from "./Palette.svelte";
 
-  export let value = "#00000000";
+  export let value = "#00bfffff";
+  export let format = "hexa";
 
   let h = 0;
   let s = 0;
   let v = 0;
   let a = 1;
+
+  onMount(() => {
+    let hsva = getFormatAndConvert(value)
+    setHSVA(hsva)
+  })
+
+  function getFormatAndConvert() {
+  if (value.startsWith('#')) {
+    format = "hexa"
+		return getAndConvertHexa(value)
+	} else if (value.startsWith('rgba')) {
+    format = "rgba"
+		return getAndConvertRgba(value)
+	}
+  }
+
+  function setHSVA([hue, sat, val, alpha]) {
+    h = hue;
+    s = sat / 100;
+    v - val / 100;
+    a = alpha;
+  }
+
+  function setSaturationAndValue({detail}) {
+    s = detail.s
+    v = detail.v
+  }
+
+  // $: {
+  //   let hsva = [h, s, v, a]
+  //   value = format === "hexa" ? hsvaToHexa(hsva) : hsvaToRgba(hsva)
+  //   console.log("VAL", value)
+  // }
 </script>
 
 <style>
@@ -24,9 +60,9 @@
 
 <div class="colorpicker-container">
 
-  <Palette {h} {a} />
+  <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
 
-  <Slider type="hue" on:change={hue => (h = hue.detail)} />
+  <Slider type="hue" value={h} on:change={hue => (h = hue.detail)} />
 
-  <Slider type="alpha" on:change={alpha => (a = alpha.detail)} />
+  <Slider type="alpha" value={a} on:change={alpha => (a = alpha.detail)} />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
index 4a4decfda8..5f344e74a7 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
@@ -1,30 +1,39 @@
 <script>
-  import { onMount } from "svelte";
-  export let h,
-    a = 0;
+  import { onMount, createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher()
+
+  export let h = 0;
+  export let s = 0;
+  export let v = 0;
+  export let a = 1;
 
   let palette;
-  let dimensions;
 
-  onMount(() => {
-    if (palette) {
-      dimensions = palette.getBoundingClientRect();
-    }
-  });
+  let paletteHeight, paletteWidth = 0;
+
 
   function handleClick(event) {
-    const { left, top, width, height } = dimensions;
-    let pickerX = (event.clientX - left) / width;
-    let pickerY = (event.clientY - top) / height;
-    //Saturation - adds white: pickerX * 100
-    //value - adds black: 100 - pickerY * 100
-    console.log("X", pickerX, "Y", pickerY);
+    const { left, top } = palette.getBoundingClientRect();
+    let clickX = (event.clientX - left)
+    let clickY = (event.clientY - top)
+    if((clickX > 0 && clickY > 0) && (clickX < paletteWidth && clickY < paletteHeight)) {
+      let s = (clickX / paletteWidth) * 100
+      let v = 100 - ((clickY / paletteHeight) * 100)
+      dispatch("change", {s, v})
+    }
+
   }
 
+  $: pickerX = (s * paletteWidth) / 100;
+  $: pickerY =  paletteHeight * ((100 - v) / 100)
+
   $: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
     linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
   `;
   $: style = `background: ${paletteGradient};`;
+
+  $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
 </script>
 
 <style>
@@ -32,18 +41,19 @@
     position: relative;
     width: 100%;
     height: 175px;
+    cursor: crosshair;
   }
 
   .picker {
     position: absolute;
-    width: 16px;
-    height: 16px;
+    width: 10px;
+    height: 10px;
     background: transparent;
     border: 2px solid white;
     border-radius: 50%;
   }
 </style>
 
-<div bind:this={palette} on:click={handleClick} class="palette" {style}>
-  <div class="picker" />
+<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
+  <div class="picker" style={pickerStyle} />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
index 82e00baa93..13254c29c8 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -2,35 +2,30 @@
   import { onMount, createEventDispatcher } from "svelte";
   import dragable from "./drag.js";
 
+  export let value = 1
   export let type = "hue";
 
   const dispatch = createEventDispatcher();
 
   let slider;
-  let dimensions = {};
-  let thumbPosition = 0;
-
-  onMount(() => {
-    if (slider) {
-      dimensions = slider.getBoundingClientRect();
-    }
-  });
+  let sliderWidth = 0;
 
   function handleClick(mouseX) {
-    const { left, width } = dimensions;
+    const { left } = slider.getBoundingClientRect();
     let clickPosition = mouseX - left;
-    debugger;
-    if (clickPosition >= 0 && clickPosition <= width) {
-      thumbPosition = clickPosition;
-      let percentageClick = thumbPosition / width;
+    
+    if (clickPosition >= 0 && clickPosition <= sliderWidth) {
+      let percentageClick = clickPosition / sliderWidth;
       let value =
         type === "hue"
-          ? Math.round(360 * percentageClick).toString()
-          : percentageClick.toFixed(2);
+          ? 360 * percentageClick.toString()
+          : percentageClick.toString();
       dispatch("change", value);
     }
   }
 
+  $: thumbPosition = type === "hue" ? sliderWidth * (value / 360) : sliderWidth * (value)
+
   $: style = `transform: translateX(${thumbPosition - 6}px);`;
 </script>
 
@@ -75,6 +70,7 @@
 
 <div
   bind:this={slider}
+  bind:clientWidth={sliderWidth}
   on:click={event => handleClick(event.clientX)}
   class="color-format-slider"
   class:hue={type === 'hue'}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js
index eb15c8d4fb..842d157ad2 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/drag.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/drag.js
@@ -6,7 +6,6 @@ export default function(node) {
 
 	function handleMouseMove(event) {
 		let mouseX = event.clientX;
-		console.log(mouseX);
 		node.dispatchEvent(
 			new CustomEvent('drag', {
 				detail: mouseX
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index 98bb96d259..6c8c8d48ed 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -12,19 +12,19 @@ export const isValidRgba = (rgba) => {
 	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
 };
 
-export const determineColorType = (color) => {
-	let hsva = [];
-	if (color.startsWith('#')) {
-		let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
-		hsva = hexaToHSVA([ rHex, gHex, bHex ], aHex);
-	} else if (color.startsWith('rgb')) {
-		let rgba = getRgbaValues(color);
-		hsva = rgbaToHSVA(rgba);
-	}
-};
 
-export const getHSLA = (hsv, a) => {
-	const [ h, s, l ] = hsvToHSL(hsv);
+export const getAndConvertHexa = (color) => { 
+	let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
+	return hexaToHSVA([ rHex, gHex, bHex ], aHex);
+}
+
+export const getAndConvertRgba = color => {
+	let rgba = getRgbaValues(color);
+	return rgbaToHSVA(rgba);
+}
+
+export const getHSLA = ([hue, sat, val, a]) => {
+	const [ h, s, l ] = _hsvToHSL([hue, sat, val]);
 	return `hsla(${h}, ${s}, ${l}, ${a})`;
 };
 
@@ -36,20 +36,21 @@ export const hexaToHSVA = (hex, alpha = 'FF') => {
 export const rgbaToHSVA = (rgba) => {
 	if (isValidRgba(rgba)) {
 		const [ r, g, b, a = '1' ] = rgba;
-		let hsv = rgbToHSV([ r, g, b ]);
+		let hsv = _rgbToHSV([ r, g, b ]);
 		return [ ...hsv, a ];
 	}
 };
 
-export const hsvaToHexa = () => {
-	const [ r, g, b, a ] = hsvaToRgba();
+export const hsvaToHexa = (hsva) => {
+	const [ r, g, b, a ] = hsvaToRgba(hsva);
 	const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16));
-	return hexa;
+	return `#${hexa.join()}`
 };
 
-export const hsvaToRgba = (h, s, v, a) => {
+export const hsvaToRgba = ([h, s, v, a]) => {
 	let rgb = _hsvToRgb([ h, s, v ]);
-	return [ ...rgb, a ];
+	let rgba = [ ...rgb, a ];
+	return `rgba(${rgba.join(",")})`
 };
 
 //Credit : https://github.com/Qix-/color-convert

From ed1b30d83aa4dbda6df41b84dc19688b16140eec Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 8 Jun 2020 21:41:10 +0100
Subject: [PATCH 04/57] Utils update and Jest Tests

---
 .../Colorpicker/Colorpicker.svelte            |  80 +++++++---
 .../userInterface/Colorpicker/utils.js        | 139 +++++++++++++++---
 .../userInterface/Colorpicker/utils.test.js   |  90 ++++++++++++
 3 files changed, 264 insertions(+), 45 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils.test.js

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 4ca425bcb0..015114ded8 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,48 +1,80 @@
 <script>
   import {onMount} from "svelte"
-  import { getAndConvertHexa, getAndConvertRgba, getHSLA, hsvaToHexa, hsvaToRgba } from "./utils.js"
+  import { getAndConvertHexa, getAndConvertRgba, getHSLA, hsvaToHexa, hsvaToRgba, getColorFormat, convertToHSVA } from "./utils.js"
   import Slider from "./Slider.svelte";
   import Palette from "./Palette.svelte";
 
-  export let value = "#00bfffff";
+  export let value = "rgba(255,255,255,1)";
   export let format = "hexa";
 
-  let h = 0;
-  let s = 0;
-  let v = 0;
-  let a = 1;
+  let h = null;
+  let s = null;
+  let v = null;
+  let a = null;
 
   onMount(() => {
-    let hsva = getFormatAndConvert(value)
-    setHSVA(hsva)
-  })
+    format = getColorFormat(value)
+    if(format) {
+      let hsva = convertToHSVA(value, format)
+      setHSVA(hsva)
+    }
+})
 
-  function getFormatAndConvert() {
-  if (value.startsWith('#')) {
-    format = "hexa"
-		return getAndConvertHexa(value)
-	} else if (value.startsWith('rgba')) {
-    format = "rgba"
-		return getAndConvertRgba(value)
-	}
+  const hsvaIsNull = () => [h,s,v,a].every(c => c === null)
+
+  function setFormatAndConvert() {
+    if (value.startsWith('#')) {
+      format = "hexa"
+      return getAndConvertHexa(value)
+    } else if (value.startsWith('rgba')) {
+      format = "rgba"
+      return getAndConvertRgba(value)
+    }
   }
 
   function setHSVA([hue, sat, val, alpha]) {
     h = hue;
-    s = sat / 100;
-    v - val / 100;
+    s = sat;
+    v = val;
     a = alpha;
   }
 
+  //fired by choosing a color from the palette
   function setSaturationAndValue({detail}) {
     s = detail.s
     v = detail.v
+    let res = convertHSVA()
+    console.log("SAT-VAL", res)
+  }
+    
+  function setHue(hue) {
+    h = hue
+    let res = convertHSVA()
+    console.log("HUE",res)
+  }
+
+  function setAlpha(alpha) {
+    a = alpha
+    let res = convertHSVA()
+    console.log("ALPHA",res)
+
+  }
+
+  function convertHSVA() {
+    let hsva = [h, s, v, a]
+    let _value = format === "hexa" ? hsvaToHexa(hsva, true) : hsvaToRgba(hsva, true)
+    return _value;
+    // onchange(_value)
   }
 
   // $: {
-  //   let hsva = [h, s, v, a]
-  //   value = format === "hexa" ? hsvaToHexa(hsva) : hsvaToRgba(hsva)
-  //   console.log("VAL", value)
+  //   if(!hsvaIsNull()) {
+  //     let hsva = [h, s, v, a]
+  //     // let t = value + "abs"
+  //     value = format === "hexa" ? hsvaToHexa(hsva) : hsvaToRgba(hsva)
+  //     debugger
+  //     // console.log("VAL", value)
+  //   }
   // }
 </script>
 
@@ -62,7 +94,7 @@
 
   <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
 
-  <Slider type="hue" value={h} on:change={hue => (h = hue.detail)} />
+  <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
 
-  <Slider type="alpha" value={a} on:change={alpha => (a = alpha.detail)} />
+  <Slider type="alpha" value={a} on:change={alpha => setAlpha(alpha.detail)} />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index 6c8c8d48ed..b46ad6d202 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -1,17 +1,82 @@
-export const getRgbaValues = (rgbaString) => rgbaString.replace(/[a-z()\s]/gi, '').split(',');
+export const isValidHex = (str) => /^#(?:[A-F0-9]{3}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str)
 
-export const getHexaValues = (hexString) => hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi);
+const getHexaValues = (hexString) => hexString.match(/[A-F0-9]{2}/gi);
 
-export const isValidRgba = (rgba) => {
-	let [ r, g, b, a = 1 ] = rgba;
+export const isValidRgb = (str) => {
+	const hasValidStructure = /^(?:rgba\(|rgb\()[0-9,.\s]*\)$/gi.test(str);
+	if(hasValidStructure) {
+		return testRgbaValues(str.toLowerCase());
+	}
+}
 
-	let isValidLengthRange = rgba.length === 3 || rgba.length === 4;
+const findNonNumericChars = /[a-z()%\s]/gi
+
+export const getNumericValues = (str) => str.replace(findNonNumericChars, '').split(',').map(c => Number(c));
+
+export const testRgbaValues = (str) => {
+	const rgba = getNumericValues(str)
+	let [ r, g, b, a ] = rgba;
+
+	let isValidLengthRange = (str.startsWith("rgb(") && rgba.length === 3) || (str.startsWith("rgba(") && rgba.length === 4);
 	let isValidColorRange = [ r, g, b ].every((v) => v >= 0 && v <= 255);
-	let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1);
+	let isValidAlphaRange =  str.startsWith("rgba(") ? a >= 0 && a <= 1 : true;
 
 	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
 };
 
+export const isValidHsl = (str) => {
+	const hasValidStructure = /^(?:hsl\(|hsla\()[0-9,.\s]*\)$/gi.test(str)
+	if(hasValidStructure) {
+		return testHslaValues(str.toLowerCase())
+	}
+}
+
+export const testHslaValues = (str) => {
+
+	const hsla = getNumericValues(str)
+	const [h, s, l, a] = hsla
+
+	let isValidLengthRange = (str.startsWith("hsl(") && hsla.length === 3) || (str.startsWith("hsla(") && hsla.length === 4);
+	let isValidColorRange = (h >= 0 && h <= 360) && [s, l].every(v => v >= 0 && v <= 100)
+	let isValidAlphaRange = str.startsWith("hsla(") ? (a >= 0 && a <= 1) : true
+
+	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
+}
+
+export const getColorFormat = (color) => {
+	if(typeof color === "string") {
+		if(isValidHex(color)) {
+			return 'hex'
+		}else if(isValidRgb(color)) {
+			return 'rgb'
+		}else if(isValidHsl(color)) {
+			return 'hsl'
+		}
+	}
+}
+
+export const convertToHSVA = (value, format) => {
+	switch(format) {
+		case "hex":
+			return getAndConvertHexa(value)
+		case "rgb": 
+			return getAndConvertRgba(value)
+		case "hsl":
+			return getAndConvertHsla(value)
+	}
+}
+
+export const convertHsvaToFormat = (hsva, format) => {
+	switch(format) {
+		case "hex":
+			return hsvaToHexa(hsva, true)
+		case "rgb":
+			return hsvaToRgba(hsva, true)
+		case "hsl":
+			return hsvaToHsla(hsva, true)
+	}
+}
+
 
 export const getAndConvertHexa = (color) => { 
 	let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
@@ -19,40 +84,71 @@ export const getAndConvertHexa = (color) => {
 }
 
 export const getAndConvertRgba = color => {
-	let rgba = getRgbaValues(color);
+	let rgba = getNumericValues(color);
 	return rgbaToHSVA(rgba);
 }
 
+export const getAndConvertHsla = color => {
+	let hsla = getNumericValues(color);
+	return hslaToHSVA(hsla)
+}
+
 export const getHSLA = ([hue, sat, val, a]) => {
 	const [ h, s, l ] = _hsvToHSL([hue, sat, val]);
 	return `hsla(${h}, ${s}, ${l}, ${a})`;
 };
 
 export const hexaToHSVA = (hex, alpha = 'FF') => {
-	const rgba = hex.map((v) => parseInt(v, 16)).concat((parseInt(alpha, 16) / 255).toFixed(1));
+	const rgba = hex.map((v) => parseInt(v, 16)).concat(Number((parseInt(alpha, 16) / 255).toFixed(2)));
 	return rgbaToHSVA(rgba);
 };
 
 export const rgbaToHSVA = (rgba) => {
-	if (isValidRgba(rgba)) {
-		const [ r, g, b, a = '1' ] = rgba;
-		let hsv = _rgbToHSV([ r, g, b ]);
-		return [ ...hsv, a ];
-	}
+	const [ r, g, b, a = 1 ] = rgba;
+	let hsv = _rgbToHSV([ r, g, b ]);
+	return [ ...hsv, a ];
 };
 
-export const hsvaToHexa = (hsva) => {
+export const hslaToHSVA = ([h, s, l, a = 1]) => {
+	let hsv = _hslToHSV([h, s, l])
+	return [...hsv, a]
+}
+
+export const hsvaToHexa = (hsva, asString = false) => {
 	const [ r, g, b, a ] = hsvaToRgba(hsva);
-	const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16));
-	return `#${hexa.join()}`
+
+	const hexa = [ r, g, b ].map((v) => Math.round(v).toString(16)).concat(Math.round((a * 255)).toString(16));
+	return asString ? `#${hexa.join('')}` : hexa
 };
 
-export const hsvaToRgba = ([h, s, v, a]) => {
-	let rgb = _hsvToRgb([ h, s, v ]);
+export const hsvaToRgba = ([h, s, v, a], asString = false) => {
+	let rgb = _hsvToRgb([ h, s, v ]).map(x => Math.round(x));
 	let rgba = [ ...rgb, a ];
-	return `rgba(${rgba.join(",")})`
+	return asString ? `rgba(${rgba.join(",")})` : rgba
 };
 
+export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => {
+	let hsl = _hsvToHSL([h, s, v])
+	let hsla = [...hsl, a]
+	return asString ? `hsla(${hsla.join(",")})` : hsla
+}
+
+export const _hslToHSV = (hsl) => {
+	const h = hsl[0];
+	let s = hsl[1] / 100;
+	let l = hsl[2] / 100;
+	let smin = s;
+	const lmin = Math.max(l, 0.01);
+
+	l *= 2;
+	s *= (l <= 1) ? l : 2 - l;
+	smin *= lmin <= 1 ? lmin : 2 - lmin;
+	const v = (l + s) / 2;
+	const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
+
+	return [h, sv * 100, v * 100];
+}
+
 //Credit : https://github.com/Qix-/color-convert
 export const _rgbToHSV = (rgb) => {
 	let rdif;
@@ -94,7 +190,7 @@ export const _rgbToHSV = (rgb) => {
 		}
 	}
 
-	const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => v.toFixed(0));
+	const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => Math.round(v));
 	return hsvResult;
 };
 
@@ -129,6 +225,7 @@ export const _hsvToRgb = (hsv) => {
 
 //Credit : https://github.com/Qix-/color-convert
 export const _hsvToHSL = (hsv) => {
+	
 	const h = hsv[0];
 	const s = hsv[1] / 100;
 	const v = hsv[2] / 100;
@@ -143,5 +240,5 @@ export const _hsvToHSL = (hsv) => {
 	sl = sl || 0;
 	l /= 2;
 
-	return [ h, sl * 100, l * 100 ];
+	return [ h, Number((sl * 100).toFixed(1)), Number((l * 100).toFixed(1)) ];
 };
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
new file mode 100644
index 0000000000..0354468b75
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
@@ -0,0 +1,90 @@
+import {getColorFormat, convertToHSVA, convertHsvaToFormat} from "./utils"
+
+describe('convertToHSVA - convert to hsva from format', () => {
+    test("convert from hexa", () => {
+      expect(convertToHSVA("#f222d382", "hex")).toEqual([309, 86, 95, 0.51]) 
+    })
+
+    test("convert from hex", () => {
+        expect(convertToHSVA("#f222d3", "hex")).toEqual([309, 86, 95, 1]) 
+    })
+
+    test("convert from rgba", () => {
+        expect(convertToHSVA("rgba(242, 34, 211, 1)", "rgb")).toEqual([309, 86, 95, 1])
+    })
+
+    test("convert from rgb", () => {
+        expect(convertToHSVA("rgb(150, 80, 255)", "rgb")).toEqual([264, 69, 100, 1])
+    })
+
+    test("convert from from hsl", () => {
+        expect(convertToHSVA("hsl(264, 100%, 65.7%)", "hsl")).toEqual([264, 68.6, 100, 1])
+    })
+
+    test("convert from from hsla", () => {
+        expect(convertToHSVA("hsla(264, 100%, 65.7%, 0.51)", "hsl")).toEqual([264, 68.6, 100, 0.51])
+    })
+
+})
+
+describe('convertHsvaToFormat - convert from hsva to format', () => {
+    test('Convert to hexa', () => {
+        expect(convertHsvaToFormat([264, 68.63, 100, 0.5], "hex")).toBe("#9650ff80")
+    })
+
+    test('Convert to rgba', () => {
+        expect(convertHsvaToFormat([264, 68.63, 100, 0.75], "rgb")).toBe("rgba(150,80,255,0.75)")
+    })
+
+    test('Convert to hsla', () => {
+        expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe("hsla(264,100,65.7,1)")
+    })
+})
+
+
+describe('Get Color Format', () => {
+     test("Testing valid hex string", () => {
+         expect(getColorFormat("#FFF")).toBe("hex")
+     })
+
+     test("Testing invalid hex string", () => {
+        expect(getColorFormat("#FFZ")).toBeUndefined()
+    })
+
+    test("Testing valid hex with alpha", () => {
+        expect(getColorFormat("#FF00BB80")).toBe("hex")
+    })
+
+    test("Test valid rgb value", () => {
+        expect(getColorFormat("RGB(255, 20, 50)")).toBe("rgb")
+    })
+
+    test("Testing invalid rgb value", () => {
+        expect(getColorFormat("rgb(255, 0)")).toBeUndefined()
+    })
+
+    test("Testing rgb value with alpha", () => {
+        expect(getColorFormat("rgba(255, 0, 50, 0.5)")).toBe("rgb")
+    })
+
+    test("Testing rgb value with incorrectly provided alpha", () => {
+        expect(getColorFormat("rgb(255, 0, 50, 0.5)")).toBeUndefined()
+    })
+
+    test("Testing invalid hsl value", () => {
+        expect(getColorFormat("hsla(255, 0)")).toBeUndefined()
+    })
+
+    test("Testing hsla value with alpha", () => {
+        expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
+    })
+
+    test("Testing hsl value with incorrectly provided alpha", () => {
+        expect(getColorFormat("hsl(150, 0, 50, 0.5)")).toBeUndefined()
+    })
+
+    test("Testing out of bounds hsl", () => {
+        expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined()
+    })
+})
+

From 48c604d0d0b67d2152fe6d814a2d3432b7550972 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 9 Jun 2020 13:52:00 +0200
Subject: [PATCH 05/57] feat: adds cypress to the builder

---
 config.js                                     |  13 +
 packages/builder/cypress.json                 |   4 +
 .../builder/cypress/fixtures/example.json     |   5 +
 .../builder/cypress/fixtures/profile.json     |   5 +
 packages/builder/cypress/fixtures/users.json  | 232 ++++++++++++++++++
 packages/builder/cypress/plugins/index.js     |  21 ++
 packages/builder/cypress/support/commands.js  |  25 ++
 packages/builder/cypress/support/index.js     |  20 ++
 packages/builder/package.json                 |   6 +-
 9 files changed, 330 insertions(+), 1 deletion(-)
 create mode 100644 config.js
 create mode 100644 packages/builder/cypress.json
 create mode 100644 packages/builder/cypress/fixtures/example.json
 create mode 100644 packages/builder/cypress/fixtures/profile.json
 create mode 100644 packages/builder/cypress/fixtures/users.json
 create mode 100644 packages/builder/cypress/plugins/index.js
 create mode 100644 packages/builder/cypress/support/commands.js
 create mode 100644 packages/builder/cypress/support/index.js

diff --git a/config.js b/config.js
new file mode 100644
index 0000000000..7bc75c9fb2
--- /dev/null
+++ b/config.js
@@ -0,0 +1,13 @@
+module.exports = () => ({
+  datastore: "local",
+  datastoreConfig: {
+    rootPath: "./.data",
+  },
+  keys: ["secret1", "secret2"],
+  port: 4001,
+  latestPackagesFolder: ".",
+  extraMasterPlugins: {},
+  dev: true,
+  customizeMaster: appDefinition => appDefinition,
+  useAppRootPath: true,
+})
diff --git a/packages/builder/cypress.json b/packages/builder/cypress.json
new file mode 100644
index 0000000000..477d0a6dc4
--- /dev/null
+++ b/packages/builder/cypress.json
@@ -0,0 +1,4 @@
+{
+    "baseUrl": "http://localhost:4001/_builder/",
+    "video": false
+}
\ No newline at end of file
diff --git a/packages/builder/cypress/fixtures/example.json b/packages/builder/cypress/fixtures/example.json
new file mode 100644
index 0000000000..da18d9352a
--- /dev/null
+++ b/packages/builder/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
\ No newline at end of file
diff --git a/packages/builder/cypress/fixtures/profile.json b/packages/builder/cypress/fixtures/profile.json
new file mode 100644
index 0000000000..b6c355ca5c
--- /dev/null
+++ b/packages/builder/cypress/fixtures/profile.json
@@ -0,0 +1,5 @@
+{
+  "id": 8739,
+  "name": "Jane",
+  "email": "jane@example.com"
+}
\ No newline at end of file
diff --git a/packages/builder/cypress/fixtures/users.json b/packages/builder/cypress/fixtures/users.json
new file mode 100644
index 0000000000..79b699aa77
--- /dev/null
+++ b/packages/builder/cypress/fixtures/users.json
@@ -0,0 +1,232 @@
+[
+  {
+    "id": 1,
+    "name": "Leanne Graham",
+    "username": "Bret",
+    "email": "Sincere@april.biz",
+    "address": {
+      "street": "Kulas Light",
+      "suite": "Apt. 556",
+      "city": "Gwenborough",
+      "zipcode": "92998-3874",
+      "geo": {
+        "lat": "-37.3159",
+        "lng": "81.1496"
+      }
+    },
+    "phone": "1-770-736-8031 x56442",
+    "website": "hildegard.org",
+    "company": {
+      "name": "Romaguera-Crona",
+      "catchPhrase": "Multi-layered client-server neural-net",
+      "bs": "harness real-time e-markets"
+    }
+  },
+  {
+    "id": 2,
+    "name": "Ervin Howell",
+    "username": "Antonette",
+    "email": "Shanna@melissa.tv",
+    "address": {
+      "street": "Victor Plains",
+      "suite": "Suite 879",
+      "city": "Wisokyburgh",
+      "zipcode": "90566-7771",
+      "geo": {
+        "lat": "-43.9509",
+        "lng": "-34.4618"
+      }
+    },
+    "phone": "010-692-6593 x09125",
+    "website": "anastasia.net",
+    "company": {
+      "name": "Deckow-Crist",
+      "catchPhrase": "Proactive didactic contingency",
+      "bs": "synergize scalable supply-chains"
+    }
+  },
+  {
+    "id": 3,
+    "name": "Clementine Bauch",
+    "username": "Samantha",
+    "email": "Nathan@yesenia.net",
+    "address": {
+      "street": "Douglas Extension",
+      "suite": "Suite 847",
+      "city": "McKenziehaven",
+      "zipcode": "59590-4157",
+      "geo": {
+        "lat": "-68.6102",
+        "lng": "-47.0653"
+      }
+    },
+    "phone": "1-463-123-4447",
+    "website": "ramiro.info",
+    "company": {
+      "name": "Romaguera-Jacobson",
+      "catchPhrase": "Face to face bifurcated interface",
+      "bs": "e-enable strategic applications"
+    }
+  },
+  {
+    "id": 4,
+    "name": "Patricia Lebsack",
+    "username": "Karianne",
+    "email": "Julianne.OConner@kory.org",
+    "address": {
+      "street": "Hoeger Mall",
+      "suite": "Apt. 692",
+      "city": "South Elvis",
+      "zipcode": "53919-4257",
+      "geo": {
+        "lat": "29.4572",
+        "lng": "-164.2990"
+      }
+    },
+    "phone": "493-170-9623 x156",
+    "website": "kale.biz",
+    "company": {
+      "name": "Robel-Corkery",
+      "catchPhrase": "Multi-tiered zero tolerance productivity",
+      "bs": "transition cutting-edge web services"
+    }
+  },
+  {
+    "id": 5,
+    "name": "Chelsey Dietrich",
+    "username": "Kamren",
+    "email": "Lucio_Hettinger@annie.ca",
+    "address": {
+      "street": "Skiles Walks",
+      "suite": "Suite 351",
+      "city": "Roscoeview",
+      "zipcode": "33263",
+      "geo": {
+        "lat": "-31.8129",
+        "lng": "62.5342"
+      }
+    },
+    "phone": "(254)954-1289",
+    "website": "demarco.info",
+    "company": {
+      "name": "Keebler LLC",
+      "catchPhrase": "User-centric fault-tolerant solution",
+      "bs": "revolutionize end-to-end systems"
+    }
+  },
+  {
+    "id": 6,
+    "name": "Mrs. Dennis Schulist",
+    "username": "Leopoldo_Corkery",
+    "email": "Karley_Dach@jasper.info",
+    "address": {
+      "street": "Norberto Crossing",
+      "suite": "Apt. 950",
+      "city": "South Christy",
+      "zipcode": "23505-1337",
+      "geo": {
+        "lat": "-71.4197",
+        "lng": "71.7478"
+      }
+    },
+    "phone": "1-477-935-8478 x6430",
+    "website": "ola.org",
+    "company": {
+      "name": "Considine-Lockman",
+      "catchPhrase": "Synchronised bottom-line interface",
+      "bs": "e-enable innovative applications"
+    }
+  },
+  {
+    "id": 7,
+    "name": "Kurtis Weissnat",
+    "username": "Elwyn.Skiles",
+    "email": "Telly.Hoeger@billy.biz",
+    "address": {
+      "street": "Rex Trail",
+      "suite": "Suite 280",
+      "city": "Howemouth",
+      "zipcode": "58804-1099",
+      "geo": {
+        "lat": "24.8918",
+        "lng": "21.8984"
+      }
+    },
+    "phone": "210.067.6132",
+    "website": "elvis.io",
+    "company": {
+      "name": "Johns Group",
+      "catchPhrase": "Configurable multimedia task-force",
+      "bs": "generate enterprise e-tailers"
+    }
+  },
+  {
+    "id": 8,
+    "name": "Nicholas Runolfsdottir V",
+    "username": "Maxime_Nienow",
+    "email": "Sherwood@rosamond.me",
+    "address": {
+      "street": "Ellsworth Summit",
+      "suite": "Suite 729",
+      "city": "Aliyaview",
+      "zipcode": "45169",
+      "geo": {
+        "lat": "-14.3990",
+        "lng": "-120.7677"
+      }
+    },
+    "phone": "586.493.6943 x140",
+    "website": "jacynthe.com",
+    "company": {
+      "name": "Abernathy Group",
+      "catchPhrase": "Implemented secondary concept",
+      "bs": "e-enable extensible e-tailers"
+    }
+  },
+  {
+    "id": 9,
+    "name": "Glenna Reichert",
+    "username": "Delphine",
+    "email": "Chaim_McDermott@dana.io",
+    "address": {
+      "street": "Dayna Park",
+      "suite": "Suite 449",
+      "city": "Bartholomebury",
+      "zipcode": "76495-3109",
+      "geo": {
+        "lat": "24.6463",
+        "lng": "-168.8889"
+      }
+    },
+    "phone": "(775)976-6794 x41206",
+    "website": "conrad.com",
+    "company": {
+      "name": "Yost and Sons",
+      "catchPhrase": "Switchable contextually-based project",
+      "bs": "aggregate real-time technologies"
+    }
+  },
+  {
+    "id": 10,
+    "name": "Clementina DuBuque",
+    "username": "Moriah.Stanton",
+    "email": "Rey.Padberg@karina.biz",
+    "address": {
+      "street": "Kattie Turnpike",
+      "suite": "Suite 198",
+      "city": "Lebsackbury",
+      "zipcode": "31428-2261",
+      "geo": {
+        "lat": "-38.2386",
+        "lng": "57.2232"
+      }
+    },
+    "phone": "024-648-3804",
+    "website": "ambrose.net",
+    "company": {
+      "name": "Hoeger LLC",
+      "catchPhrase": "Centralized empowering task-force",
+      "bs": "target end-to-end models"
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js
new file mode 100644
index 0000000000..aa9918d215
--- /dev/null
+++ b/packages/builder/cypress/plugins/index.js
@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
new file mode 100644
index 0000000000..ca4d256f3e
--- /dev/null
+++ b/packages/builder/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/packages/builder/cypress/support/index.js b/packages/builder/cypress/support/index.js
new file mode 100644
index 0000000000..d68db96df2
--- /dev/null
+++ b/packages/builder/cypress/support/index.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 8fe9ffd494..32f5cd823f 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -9,7 +9,10 @@
     "test": "jest",
     "test:watch": "jest --watchAll",
     "dev:builder": "routify --routify-dir routify -c rollup",
-    "rollup": "rollup -c -w"
+    "rollup": "rollup -c -w",
+    "cy:setup": "node ../cli/bin/budi init -d ~/.budibase-cypress && node ../cli/bin/budi run -d ~/.budibase-cypress",
+    "cy:run": "dev:cypress run",
+    "cy:open": "cypress open"
   },
   "jest": {
     "globals": {
@@ -67,6 +70,7 @@
     "@sveltech/routify": "1.7.11",
     "babel-jest": "^24.8.0",
     "browser-sync": "^2.26.7",
+    "cypress": "^4.8.0",
     "http-proxy-middleware": "^0.19.1",
     "jest": "^24.8.0",
     "ncp": "^2.0.0",

From 0c9baf92f8410c5befd69c3f00774184fd86d138 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 9 Jun 2020 13:52:19 +0200
Subject: [PATCH 06/57] adds test for creating budibase app

---
 .../cypress/integration/createApp.spec.js     | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 packages/builder/cypress/integration/createApp.spec.js

diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js
new file mode 100644
index 0000000000..d8f9331eec
--- /dev/null
+++ b/packages/builder/cypress/integration/createApp.spec.js
@@ -0,0 +1,25 @@
+context('Create Application', () => {
+
+    beforeEach(() => {
+        cy.visit('localhost:4001/_builder')
+    })
+
+    // https://on.cypress.io/interacting-with-elements
+
+    it('should create a new application', () => {
+        // https://on.cypress.io/type
+        cy.get('.banner-button')
+            .click()
+            .get('input[name="name"]')
+            .type('My Cool Application').should('have.value', 'My Cool Application')
+
+        cy.get('textarea[name="description"]')
+            .type('This is a description').should('have.value', 'This is a description')
+
+        cy.contains('Save').click()
+
+        cy.visit('localhost:4001/_builder')
+
+        cy.contains('My Cool Application')
+    })
+})

From c46e43cf778a5282f3a054b4f818ce1aadcf4a5d Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 9 Jun 2020 15:39:50 +0200
Subject: [PATCH 07/57] setup commands to allow running tests from project root
 instead of just builder package

---
 CONTRIBUTING.md | 10 ++++++++++
 package.json    |  3 ++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ab2e7d597b..ac35a4277d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -166,6 +166,16 @@ rm -rf ~/.budibase
 ```
 Follow from **Step 3. Install and Build** in the setup guide above. You should have a fresh Budibase installation.
 
+### Running tests
+
+#### End-to-end Tests
+
+Budibase uses Cypress to run a number of E2E tests. To run the tests execute the following command:
+
+```
+yarn test:e2e
+```
+
 
 ### Other Useful Information
 
diff --git a/package.json b/package.json
index 443c8cccc3..e4e4a3bd4e 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "test": "lerna run test",
     "lint": "eslint packages",
     "lint:fix": "eslint --fix packages",
-    "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\""
+    "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\"",
+    "test:e2e": "lerna run cy:test"
   },
   "dependencies": {
     "@material/icon-button": "4.0.0",

From 5e1210723c91bb0263cf2537ad8229f01be530df Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 9 Jun 2020 15:40:00 +0200
Subject: [PATCH 08/57] update create app test

---
 packages/builder/cypress/integration/createApp.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js
index d8f9331eec..a6e488baf6 100644
--- a/packages/builder/cypress/integration/createApp.spec.js
+++ b/packages/builder/cypress/integration/createApp.spec.js
@@ -20,6 +20,6 @@ context('Create Application', () => {
 
         cy.visit('localhost:4001/_builder')
 
-        cy.contains('My Cool Application')
+        cy.contains('My Cool Application').should('exist')
     })
 })

From 8e685d07c1a4b37eb3a4abd515d49d9ee6714fd2 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 9 Jun 2020 15:40:14 +0200
Subject: [PATCH 09/57] add tests to create model and record

---
 .../cypress/integration/createModel.spec.js   | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 packages/builder/cypress/integration/createModel.spec.js

diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js
new file mode 100644
index 0000000000..50e523c598
--- /dev/null
+++ b/packages/builder/cypress/integration/createModel.spec.js
@@ -0,0 +1,74 @@
+context('Create Model', () => {
+
+    beforeEach(() => {
+        cy.visit('localhost:4001/_builder')
+    })
+
+    // https://on.cypress.io/interacting-with-elements
+
+    it('should create a new model', () => {
+        // https://on.cypress.io/type
+        cy.get('.banner-button')
+            .click()
+            .get('input[name="name"]')
+            .type('My Cool Application').should('have.value', 'My Cool Application')
+
+        cy.get('textarea[name="description"]')
+            .type('This is a description').should('have.value', 'This is a description')
+
+        cy.contains('Save').click()
+
+        // Enter model name
+        cy.get('.budibase__input')
+            .type('dog')
+
+        // Add new field
+        cy.get('.new-field')
+            .click()
+
+        // Enter field name
+        cy.get('.budibase__input').first()
+            .type('name')
+
+        // Save
+        cy.contains('Save').click()
+
+
+        // Add new field
+        cy.get('.new-field')
+            .click()
+
+        // Enter field name
+        cy.get('.budibase__input').first()
+            .type('age')
+
+        cy.get('select').select('number')
+
+        // Save
+        cy.contains('Save').click()
+
+        cy.contains('age').should('exist')
+
+        // Save
+        cy.contains('Save').click()
+
+        cy.get('.title').should('have.text', 'dog')
+    })
+    it('should add a record', () => {
+
+        // Open just created app
+        cy.get(':nth-child(1) > .card-footer > .app-button')
+            .click()
+
+        // Open add record modal
+        cy.get('.button')
+            .click()
+
+        cy.get(':nth-child(1) > .uk-input').type('bob').get(':nth-child(2) > .uk-input').type('15')
+
+        // Save
+        cy.contains('Save').click()
+
+        cy.contains('bob').should('have.text', 'bob')
+    })
+})

From f1d968ae883f10d7922bcfd30741b1979121e525 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 9 Jun 2020 15:48:25 +0200
Subject: [PATCH 10/57] adds missing package.json commands

---
 packages/builder/package.json | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 32f5cd823f..ebd30c31bd 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -10,9 +10,10 @@
     "test:watch": "jest --watchAll",
     "dev:builder": "routify --routify-dir routify -c rollup",
     "rollup": "rollup -c -w",
-    "cy:setup": "node ../cli/bin/budi init -d ~/.budibase-cypress && node ../cli/bin/budi run -d ~/.budibase-cypress",
-    "cy:run": "dev:cypress run",
-    "cy:open": "cypress open"
+    "cy:setup": "rm -rf node ~/.budibase-cypress && ../cli/bin/budi init -d ~/.budibase-cypress && node ../cli/bin/budi run -d ~/.budibase-cypress",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open",
+    "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run"
   },
   "jest": {
     "globals": {
@@ -87,6 +88,7 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-url": "^2.2.2",
+    "start-server-and-test": "^1.11.0",
     "svelte": "3.23.x"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"

From 3ee5111d6f28db4600c3a00988f083389bfc80d5 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 11 Jun 2020 12:04:31 +0200
Subject: [PATCH 11/57] rework tests to use commands for DRYness

---
 .../cypress/integration/createApp.spec.js     | 12 +---
 .../cypress/integration/createModel.spec.js   | 65 +++----------------
 .../cypress/integration/createUser.spec.js    | 19 ++++++
 packages/builder/cypress/support/commands.js  | 59 +++++++++++++++++
 4 files changed, 88 insertions(+), 67 deletions(-)
 create mode 100644 packages/builder/cypress/integration/createUser.spec.js

diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js
index a6e488baf6..cbfbed06bb 100644
--- a/packages/builder/cypress/integration/createApp.spec.js
+++ b/packages/builder/cypress/integration/createApp.spec.js
@@ -8,18 +8,10 @@ context('Create Application', () => {
 
     it('should create a new application', () => {
         // https://on.cypress.io/type
-        cy.get('.banner-button')
-            .click()
-            .get('input[name="name"]')
-            .type('My Cool Application').should('have.value', 'My Cool Application')
-
-        cy.get('textarea[name="description"]')
-            .type('This is a description').should('have.value', 'This is a description')
-
-        cy.contains('Save').click()
+        cy.createApp('My Cool App', 'This is a description')
 
         cy.visit('localhost:4001/_builder')
 
-        cy.contains('My Cool Application').should('exist')
+        cy.contains('My Cool App').should('exist')
     })
 })
diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js
index 50e523c598..ec447f07f9 100644
--- a/packages/builder/cypress/integration/createModel.spec.js
+++ b/packages/builder/cypress/integration/createModel.spec.js
@@ -1,73 +1,24 @@
 context('Create Model', () => {
 
-    beforeEach(() => {
+    before(() => {
         cy.visit('localhost:4001/_builder')
+        // https://on.cypress.io/type
+        cy.createApp('Model App', 'Model App Description')
     })
 
     // https://on.cypress.io/interacting-with-elements
-
     it('should create a new model', () => {
-        // https://on.cypress.io/type
-        cy.get('.banner-button')
-            .click()
-            .get('input[name="name"]')
-            .type('My Cool Application').should('have.value', 'My Cool Application')
 
-        cy.get('textarea[name="description"]')
-            .type('This is a description').should('have.value', 'This is a description')
-
-        cy.contains('Save').click()
-
-        // Enter model name
-        cy.get('.budibase__input')
-            .type('dog')
-
-        // Add new field
-        cy.get('.new-field')
-            .click()
-
-        // Enter field name
-        cy.get('.budibase__input').first()
-            .type('name')
-
-        // Save
-        cy.contains('Save').click()
-
-
-        // Add new field
-        cy.get('.new-field')
-            .click()
-
-        // Enter field name
-        cy.get('.budibase__input').first()
-            .type('age')
-
-        cy.get('select').select('number')
-
-        // Save
-        cy.contains('Save').click()
-
-        cy.contains('age').should('exist')
-
-        // Save
-        cy.contains('Save').click()
+        cy.createModel('dog', 'name', 'age')
 
+        // Check if model exists
         cy.get('.title').should('have.text', 'dog')
     })
     it('should add a record', () => {
+        // Page needs to be reloaded for some reason, cookie might be remove between tests?
+        cy.reload()
 
-        // Open just created app
-        cy.get(':nth-child(1) > .card-footer > .app-button')
-            .click()
-
-        // Open add record modal
-        cy.get('.button')
-            .click()
-
-        cy.get(':nth-child(1) > .uk-input').type('bob').get(':nth-child(2) > .uk-input').type('15')
-
-        // Save
-        cy.contains('Save').click()
+        cy.addRecord('bob', '15')
 
         cy.contains('bob').should('have.text', 'bob')
     })
diff --git a/packages/builder/cypress/integration/createUser.spec.js b/packages/builder/cypress/integration/createUser.spec.js
new file mode 100644
index 0000000000..5d46ec780b
--- /dev/null
+++ b/packages/builder/cypress/integration/createUser.spec.js
@@ -0,0 +1,19 @@
+context('Create Model', () => {
+
+    before(() => {
+        cy.visit('localhost:4001/_builder')
+        // https://on.cypress.io/type
+        cy.createApp('User App', 'This app is used to test user creation')
+    })
+
+    // https://on.cypress.io/interacting-with-elements
+    it('should create a user', () => {
+        // Close Model modal that shows up after creating an app
+        cy.get('.close').click()
+
+        cy.createUser('bbuser', 'test', 'ADMIN')
+
+        // Check to make sure user was created!
+        cy.contains('bbuser').should('have.text', 'bbuser')
+    })
+})
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index ca4d256f3e..29a2e00673 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -23,3 +23,62 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+Cypress.Commands.add("createApp", (name, description) => {
+    cy.get('.banner-button')
+        .click()
+        .get('input[name="name"]')
+        .type(name).should('have.value', name)
+
+    cy.get('textarea[name="description"]')
+        .type(description).should('have.value', description)
+
+    cy.contains('Save').click()
+})
+Cypress.Commands.add("createModel", (modelName, firstField, secondField) => {
+    // Enter model name
+    cy.get('.budibase__input')
+        .type(modelName)
+
+    // Add 'name' field
+    cy.get('.new-field')
+        .click()
+    cy.get('.budibase__input').first()
+        .type(firstField)
+    cy.contains('Save').click()
+
+
+    // Add 'age' field
+    cy.get('.new-field')
+        .click()
+    cy.get('.budibase__input').first()
+        .type(secondField)
+    cy.get('select').select('number')
+    cy.contains('Save').click()
+    cy.contains(secondField).should('exist')
+
+    // Save model
+    cy.contains('Save').click()
+})
+Cypress.Commands.add("addRecord", (firstField, secondField) => {
+    cy.contains('Create new record')
+        .click()
+
+    cy.get(':nth-child(1) > .uk-input').type(firstField).get(':nth-child(2) > .uk-input').type(secondField)
+
+    // Save
+    cy.contains('Save').click()
+})
+
+Cypress.Commands.add("createUser", (username, password, level) => {
+    // Create User
+    cy.get('.nav-group-header > .ri-add-line')
+        .click()
+
+    cy.get(':nth-child(2) > .uk-input').type(username)
+    cy.get(':nth-child(3) > .uk-input').type(password)
+    cy.get('.uk-select').select(level)
+
+    // Save
+    cy.contains('Save').click()
+})
\ No newline at end of file

From 59aaf33278a44e65b2113710ec6bd12bf6f55e32 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 11 Jun 2020 12:56:16 +0200
Subject: [PATCH 12/57] adds tests to add components and change props on them

---
 .../integration/createComponents.spec.js      | 53 +++++++++++++++++++
 packages/builder/cypress/support/commands.js  | 12 +++++
 .../src/components/common/Input.svelte        |  2 +
 .../userInterface/PropertyControl.svelte      |  3 +-
 4 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/cypress/integration/createComponents.spec.js

diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js
new file mode 100644
index 0000000000..ad23566c0d
--- /dev/null
+++ b/packages/builder/cypress/integration/createComponents.spec.js
@@ -0,0 +1,53 @@
+context('Create Model', () => {
+
+    before(() => {
+        cy.visit('localhost:4001/_builder')
+        // https://on.cypress.io/type
+        cy.createApp('Model App', 'Model App Description')
+        cy.createModel('dog', 'name', 'age')
+        cy.addRecord('bob', '15')
+    })
+
+    // https://on.cypress.io/interacting-with-elements
+    it('should add a container', () => {
+        cy.contains('frontend').click()
+        cy.get('.switcher > :nth-child(2)').click()
+
+        cy.contains('Container').click()
+    })
+    it('should add a headline', () => {
+        cy.addHeadlineComponent('An Amazing headline!')
+
+        getIframeBody().contains('An Amazing headline!')
+    })
+    it('change the background color of the headline', () => {
+        cy.contains('Background').click()
+        cy.get('input[name="background"]')
+            .type('rgb(102, 51, 153)')
+        cy.contains('Design').click()
+
+        getIframeBody().contains('An Amazing headline!').should('have.css', 'background-color', 'rgb(102, 51, 153)')
+    })
+})
+
+const getIframeDocument = () => {
+    return cy
+        .get('iframe')
+        // Cypress yields jQuery element, which has the real
+        // DOM element under property "0".
+        // From the real DOM iframe element we can get
+        // the "document" element, it is stored in "contentDocument" property
+        // Cypress "its" command can access deep properties using dot notation
+        // https://on.cypress.io/its
+        .its('0.contentDocument').should('exist')
+}
+
+const getIframeBody = () => {
+    // get the document
+    return getIframeDocument()
+        // automatically retries until body is loaded
+        .its('body').should('not.be.undefined')
+        // wraps "body" DOM element to allow
+        // chaining more Cypress commands, like ".find(...)"
+        .then(cy.wrap)
+}
\ No newline at end of file
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 29a2e00673..ffe265a2a2 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -81,4 +81,16 @@ Cypress.Commands.add("createUser", (username, password, level) => {
 
     // Save
     cy.contains('Save').click()
+})
+
+Cypress.Commands.add("addHeadlineComponent", (text) => {
+    // Create User
+    cy.get('.switcher > :nth-child(2)').click()
+
+    cy.contains('Text').click()
+    cy.contains('Headline').click()
+    cy.get('.tabs > :nth-child(2)').click()
+    cy.get('input[type="text"]')
+        .type(text)
+    cy.contains('Design').click()
 })
\ No newline at end of file
diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
index 82305be60a..5db342b2c8 100644
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@@ -2,6 +2,7 @@
   import { onMount } from "svelte"
   import { buildStyle } from "../../helpers.js"
   export let value = ""
+  export let name = ""
   export let textAlign = "left"
   export let width = "160px"
   export let placeholder = ""
@@ -25,6 +26,7 @@
 </script>
 
 <input
+  {name}
   class:centerPlaceholder
   type="text"
   value={displayValue}
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index a7ea35c014..9ecd5aad52 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -36,7 +36,8 @@
       {...handlevalueKey(value)}
       on:change={val => handleChange(key, val)}
       onChange={val => handleChange(key, val)}
-      {...props} />
+      {...props}
+      name={key} />
   </div>
 </div>
 

From b35fbe823c48b805d9346149f1ef56184fb660b6 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 11 Jun 2020 13:20:13 +0200
Subject: [PATCH 13/57] update names for tests

---
 packages/builder/cypress/integration/createApp.spec.js        | 2 +-
 packages/builder/cypress/integration/createComponents.spec.js | 2 +-
 packages/builder/cypress/integration/createModel.spec.js      | 2 +-
 packages/builder/cypress/integration/createUser.spec.js       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js
index cbfbed06bb..07a8687ea8 100644
--- a/packages/builder/cypress/integration/createApp.spec.js
+++ b/packages/builder/cypress/integration/createApp.spec.js
@@ -1,4 +1,4 @@
-context('Create Application', () => {
+context('Create an Application', () => {
 
     beforeEach(() => {
         cy.visit('localhost:4001/_builder')
diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js
index ad23566c0d..299f6b8ad2 100644
--- a/packages/builder/cypress/integration/createComponents.spec.js
+++ b/packages/builder/cypress/integration/createComponents.spec.js
@@ -1,4 +1,4 @@
-context('Create Model', () => {
+context('Create Components', () => {
 
     before(() => {
         cy.visit('localhost:4001/_builder')
diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js
index ec447f07f9..061dadaa3d 100644
--- a/packages/builder/cypress/integration/createModel.spec.js
+++ b/packages/builder/cypress/integration/createModel.spec.js
@@ -1,4 +1,4 @@
-context('Create Model', () => {
+context('Create a Model', () => {
 
     before(() => {
         cy.visit('localhost:4001/_builder')
diff --git a/packages/builder/cypress/integration/createUser.spec.js b/packages/builder/cypress/integration/createUser.spec.js
index 5d46ec780b..80d1a51d84 100644
--- a/packages/builder/cypress/integration/createUser.spec.js
+++ b/packages/builder/cypress/integration/createUser.spec.js
@@ -1,4 +1,4 @@
-context('Create Model', () => {
+context('Create a User', () => {
 
     before(() => {
         cy.visit('localhost:4001/_builder')

From 7cf81c063a33811f5616ae8ea2ed2e216751e114 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 11 Jun 2020 16:40:07 +0200
Subject: [PATCH 14/57] adds some data-cy properties to a number of elements
 and starts work on workflow tests

---
 .../cypress/integration/createModel.spec.js   |  4 +-
 .../integration/createWorkflow.spec.js        | 39 +++++++++++++++++++
 packages/builder/cypress/support/commands.js  | 10 +++--
 .../userInterface/CategoryTab.svelte          |  1 +
 .../userInterface/ItemTab/Item.svelte         |  6 ++-
 .../workflow/SetupPanel/SetupPanel.svelte     |  5 ++-
 .../BlockList/WorkflowBlock.svelte            |  5 ++-
 .../WorkflowPanel/WorkflowPanel.svelte        |  2 +
 8 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 packages/builder/cypress/integration/createWorkflow.spec.js

diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js
index 061dadaa3d..3d46316607 100644
--- a/packages/builder/cypress/integration/createModel.spec.js
+++ b/packages/builder/cypress/integration/createModel.spec.js
@@ -1,6 +1,7 @@
 context('Create a Model', () => {
 
     before(() => {
+        Cypress.Cookies.preserveOnce('builder:token')
         cy.visit('localhost:4001/_builder')
         // https://on.cypress.io/type
         cy.createApp('Model App', 'Model App Description')
@@ -15,9 +16,6 @@ context('Create a Model', () => {
         cy.get('.title').should('have.text', 'dog')
     })
     it('should add a record', () => {
-        // Page needs to be reloaded for some reason, cookie might be remove between tests?
-        cy.reload()
-
         cy.addRecord('bob', '15')
 
         cy.contains('bob').should('have.text', 'bob')
diff --git a/packages/builder/cypress/integration/createWorkflow.spec.js b/packages/builder/cypress/integration/createWorkflow.spec.js
new file mode 100644
index 0000000000..62f00e92d2
--- /dev/null
+++ b/packages/builder/cypress/integration/createWorkflow.spec.js
@@ -0,0 +1,39 @@
+context('Create a workflow', () => {
+
+    before(() => {
+        Cypress.Cookies.preserveOnce('builder:token')
+        cy.visit('localhost:4001/_builder')
+        // https://on.cypress.io/type
+        cy.createApp('Workflow Test App', 'This app is used to test that workflows do in fact work!')
+    })
+
+    // https://on.cypress.io/interacting-with-elements
+    it('should create a workflow', () => {
+        cy.createModel('dog', 'name', 'age')
+        cy.createUser('bbuser', 'test', 'ADMIN')
+
+
+        cy.contains('workflow').click()
+        cy.get('.new-workflow-button').click()
+        cy.get('input').type('Add Record')
+        cy.contains('Save').click()
+
+        cy.get('[data-cy=add-workflow-component]').click()
+        cy.contains('Actions').click()
+
+        cy.get('[data-cy=SAVE_RECORD]').click()
+
+        cy.get(':nth-child(2) > .budibase__input').type('goodboy')
+        cy.get(':nth-child(3) > .budibase__input').type('11')
+
+        // Save
+        cy.get('[data-cy=save-workflow-setup]').click()
+        cy.get('.workflow-button').click()
+
+    })
+    it('should be able to run', () => {
+        cy.contains('frontend').click()
+        cy.addButtonComponent()
+
+    })
+})
\ No newline at end of file
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index ffe265a2a2..7a3d276425 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -84,13 +84,17 @@ Cypress.Commands.add("createUser", (username, password, level) => {
 })
 
 Cypress.Commands.add("addHeadlineComponent", (text) => {
-    // Create User
     cy.get('.switcher > :nth-child(2)').click()
 
-    cy.contains('Text').click()
-    cy.contains('Headline').click()
+    cy.get('[data-cy=Text]').click()
+    cy.get('[data-cy=Headline]').click()
     cy.get('.tabs > :nth-child(2)').click()
     cy.get('input[type="text"]')
         .type(text)
     cy.contains('Design').click()
+})
+Cypress.Commands.add("addButtonComponent", (text) => {
+    cy.get('.switcher > :nth-child(2)').click()
+
+    cy.get('[data-cy=Button]').click()
 })
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte
index 074839eca2..5f7c3e584e 100644
--- a/packages/builder/src/components/userInterface/CategoryTab.svelte
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@@ -7,6 +7,7 @@
 <div class="tabs">
   {#each categories as category}
     <li
+      data-cy={category.name}
       on:click={() => onClick(category)}
       class:active={selectedCategory === category}>
       {category.name}
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index e5b36d0183..4e2806b018 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -3,7 +3,11 @@
   export let item
 </script>
 
-<div class="item-item" in:fly={{ y: 100, duration: 1000 }} on:click>
+<div
+  data-cy={item.name}
+  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/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index 456505a4a8..eb88f6bb23 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -96,7 +96,10 @@
     {#if workflowBlock}
       <WorkflowBlockSetup {workflowBlock} />
       <div class="buttons">
-        <button class="workflow-button hoverable" on:click={saveWorkflow}>
+        <button
+          data-cy="save-workflow-setup"
+          class="workflow-button hoverable"
+          on:click={saveWorkflow}>
           Save Workflow
         </button>
         <button
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
index 739e3e8b5c..95e29cbf91 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
@@ -15,7 +15,10 @@
   }
 </script>
 
-<div class="workflow-block hoverable" on:click={addBlockToWorkflow}>
+<div
+  class="workflow-block hoverable"
+  on:click={addBlockToWorkflow}
+  data-cy={actionId}>
   <div>
     <i class={blockDefinition.icon} />
   </div>
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
index f1a1357978..ba947a5301 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
@@ -11,6 +11,7 @@
 
 <header>
   <span
+    data-cy="workflow-list"
     class="hoverable workflow-header"
     class:selected={selectedTab === 'WORKFLOWS'}
     on:click={() => (selectedTab = 'WORKFLOWS')}>
@@ -18,6 +19,7 @@
   </span>
   {#if $workflowStore.currentWorkflow}
     <span
+      data-cy="add-workflow-component"
       class="hoverable"
       class:selected={selectedTab === 'ADD'}
       on:click={() => (selectedTab = 'ADD')}>

From 87ce7e2c3ba8cee5483dafa6d3fcde50dbe6c720 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 11 Jun 2020 16:40:45 +0200
Subject: [PATCH 15/57] change package.json script temporarily

---
 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 ebd30c31bd..30674b0f9d 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -13,7 +13,7 @@
     "cy:setup": "rm -rf node ~/.budibase-cypress && ../cli/bin/budi init -d ~/.budibase-cypress && node ../cli/bin/budi run -d ~/.budibase-cypress",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
-    "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run"
+    "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:open"
   },
   "jest": {
     "globals": {

From f5e3df09d6e0d751adf456320f211b58de525560 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 11 Jun 2020 17:10:26 +0200
Subject: [PATCH 16/57] make tests less brittle

---
 .../integration/createWorkflow.spec.js        | 20 ++++++++++++-----
 packages/builder/cypress/support/commands.js  | 22 +++++++++----------
 .../src/components/common/Textbox.svelte      |  1 +
 .../CreateEditModel/CreateEditModel.svelte    |  5 ++++-
 .../ModelDataTable/modals/CreateUser.svelte   | 17 +++++++++++---
 .../modals/RecordFieldControl.svelte          |  2 ++
 .../WorkflowBuilder/WorkflowBuilder.svelte    |  1 +
 7 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/packages/builder/cypress/integration/createWorkflow.spec.js b/packages/builder/cypress/integration/createWorkflow.spec.js
index 62f00e92d2..b4d83e228b 100644
--- a/packages/builder/cypress/integration/createWorkflow.spec.js
+++ b/packages/builder/cypress/integration/createWorkflow.spec.js
@@ -3,7 +3,7 @@ context('Create a workflow', () => {
     before(() => {
         Cypress.Cookies.preserveOnce('builder:token')
         cy.visit('localhost:4001/_builder')
-        // https://on.cypress.io/type
+
         cy.createApp('Workflow Test App', 'This app is used to test that workflows do in fact work!')
     })
 
@@ -18,11 +18,13 @@ context('Create a workflow', () => {
         cy.get('input').type('Add Record')
         cy.contains('Save').click()
 
+        // Add trigger
         cy.get('[data-cy=add-workflow-component]').click()
-        cy.contains('Actions').click()
+        cy.get('[data-cy=RECORD_SAVED]').click()
+        cy.get('.budibase__input').select('dog')
 
+        // Create action
         cy.get('[data-cy=SAVE_RECORD]').click()
-
         cy.get(':nth-child(2) > .budibase__input').type('goodboy')
         cy.get(':nth-child(3) > .budibase__input').type('11')
 
@@ -30,10 +32,16 @@ context('Create a workflow', () => {
         cy.get('[data-cy=save-workflow-setup]').click()
         cy.get('.workflow-button').click()
 
+        // Activate Workflow
+        cy.get('[data-cy=activate-workflow]').click()
+
     })
-    it('should be able to run', () => {
-        cy.contains('frontend').click()
-        cy.addButtonComponent()
+    it('should add record when a new record is added', () => {
+        cy.contains('backend').click()
+
+        cy.addRecord('bob', '15')
+
+        cy.contains('goodboy').should('have.text', 'goodboy')
 
     })
 })
\ No newline at end of file
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 7a3d276425..8e8c31d798 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -37,21 +37,20 @@ Cypress.Commands.add("createApp", (name, description) => {
 })
 Cypress.Commands.add("createModel", (modelName, firstField, secondField) => {
     // Enter model name
-    cy.get('.budibase__input')
+    cy.get('[data-cy=Name]').click()
         .type(modelName)
 
     // Add 'name' field
-    cy.get('.new-field')
-        .click()
-    cy.get('.budibase__input').first()
+    cy.get('[data-cy=add-new-model-field]').click()
+    cy.get('[data-cy=Name]').click()
         .type(firstField)
     cy.contains('Save').click()
 
 
     // Add 'age' field
-    cy.get('.new-field')
-        .click()
-    cy.get('.budibase__input').first()
+    cy.get('[data-cy=add-new-model-field]').click()
+
+    cy.get('[data-cy=Name]').click()
         .type(secondField)
     cy.get('select').select('number')
     cy.contains('Save').click()
@@ -64,7 +63,8 @@ Cypress.Commands.add("addRecord", (firstField, secondField) => {
     cy.contains('Create new record')
         .click()
 
-    cy.get(':nth-child(1) > .uk-input').type(firstField).get(':nth-child(2) > .uk-input').type(secondField)
+    cy.get('[data-cy=name-input]').click().type(firstField)
+    cy.get('[data-cy=age-input]').click().type(secondField)
 
     // Save
     cy.contains('Save').click()
@@ -75,9 +75,9 @@ Cypress.Commands.add("createUser", (username, password, level) => {
     cy.get('.nav-group-header > .ri-add-line')
         .click()
 
-    cy.get(':nth-child(2) > .uk-input').type(username)
-    cy.get(':nth-child(3) > .uk-input').type(password)
-    cy.get('.uk-select').select(level)
+    cy.get('[data-cy=username]').type(username)
+    cy.get('[data-cy=password]').type(password)
+    cy.get('[data-cy=accessLevel]').select(level)
 
     // Save
     cy.contains('Save').click()
diff --git a/packages/builder/src/components/common/Textbox.svelte b/packages/builder/src/components/common/Textbox.svelte
index f94cc2a44e..5249bf731a 100644
--- a/packages/builder/src/components/common/Textbox.svelte
+++ b/packages/builder/src/components/common/Textbox.svelte
@@ -13,6 +13,7 @@
   <label class="uk-form-label">{label}</label>
   <div class="uk-form-controls">
     <input
+      data-cy={label}
       class="budibase__input"
       class:uk-form-danger={hasError}
       on:change
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
index 6264b74e09..bcfc2b800d 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@@ -54,7 +54,10 @@
     </div>
     <div class="table-controls">
       <span class="label">Fields</span>
-      <div class="hoverable new-field" on:click={() => (showFieldView = true)}>
+      <div
+        data-cy="add-new-model-field"
+        class="hoverable new-field"
+        on:click={() => (showFieldView = true)}>
         Add new field
       </div>
     </div>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
index d5c924405f..714e822d16 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
@@ -29,15 +29,26 @@
     </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Username</label>
-      <input class="uk-input" type="text" bind:value={username} />
+      <input
+        data-cy="username"
+        class="uk-input"
+        type="text"
+        bind:value={username} />
     </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Password</label>
-      <input class="uk-input" type="password" bind:value={password} />
+      <input
+        data-cy="password"
+        class="uk-input"
+        type="password"
+        bind:value={password} />
     </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Access Level</label>
-      <select class="uk-select" bind:value={accessLevelId}>
+      <select
+        data-cy="accessLevel"
+        class="uk-select"
+        bind:value={accessLevelId}>
         <option value="" />
         <option value="POWER_USER">Power User</option>
         <option value="ADMIN">Admin</option>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
index 5c308a7abb..6d37246be9 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
@@ -32,6 +32,7 @@
 
 {#if type === 'select'}
   <select
+    data-cy="{label}-select"
     class={determineClassName(type)}
     bind:value
     class:uk-form-danger={errors.length > 0}>
@@ -41,6 +42,7 @@
   </select>
 {:else}
   <input
+    data-cy="{label}-input"
     class={determineClassName(type)}
     class:uk-form-danger={errors.length > 0}
     {checked}
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
index 506575f05d..dd5eb7b138 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
@@ -50,6 +50,7 @@
         class:highlighted={!workflowLive}
         class:hoverable={!workflowLive}
         class="play-button hoverable"
+        data-cy="activate-workflow"
         on:click={() => setWorkflowLive(true)}>
         <i class="ri-play-fill" />
       </button>

From 59442f18cbeaccdecebd5131ce32268a9c09bdaa Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 11 Jun 2020 17:59:11 +0200
Subject: [PATCH 17/57] adds script to run cypress tests

---
 packages/builder/.gitignore       |  1 +
 packages/builder/cypress/setup.js | 15 +++++++++++++++
 packages/builder/package.json     |  5 +++--
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 packages/builder/cypress/setup.js

diff --git a/packages/builder/.gitignore b/packages/builder/.gitignore
index 94ba827047..49444a4fc0 100644
--- a/packages/builder/.gitignore
+++ b/packages/builder/.gitignore
@@ -5,4 +5,5 @@ package-lock.json
 yarn.lock
 release/
 dist/
+cypress/screenshots
 routify
diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js
new file mode 100644
index 0000000000..67ac005e49
--- /dev/null
+++ b/packages/builder/cypress/setup.js
@@ -0,0 +1,15 @@
+// What this script does:
+// 1. Removes the old test folder if it exists (.budibase-cypress)
+// 2. Initialises using `.budibase-cypress`
+// 3. Runs the server using said folder
+
+const rimraf = require("rimraf");
+const homedir = require('os').homedir() + '/.budibase-cypress';
+const { exec } = require("child_process")
+
+rimraf(homedir, function (error) {
+    console.log('Error: ', error);
+})
+
+exec(`../../packages/cli/bin/budi init -d ${homedir}`)
+exec(`../../packages/cli/bin/budi run -d ${homedir}`)
\ No newline at end of file
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 30674b0f9d..56ee5135e3 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -10,10 +10,10 @@
     "test:watch": "jest --watchAll",
     "dev:builder": "routify --routify-dir routify -c rollup",
     "rollup": "rollup -c -w",
-    "cy:setup": "rm -rf node ~/.budibase-cypress && ../cli/bin/budi init -d ~/.budibase-cypress && node ../cli/bin/budi run -d ~/.budibase-cypress",
+    "cy:setup": "node ./cypress/setup.js",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
-    "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:open"
+    "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run"
   },
   "jest": {
     "globals": {
@@ -76,6 +76,7 @@
     "jest": "^24.8.0",
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2",
     "rollup": "^1.12.0",
     "rollup-plugin-alias": "^1.5.2",
     "rollup-plugin-browsersync": "^1.0.0",

From 5d84ceb7f6b241471e2e6ddf06a48ba217805caa Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 11 Jun 2020 18:10:53 +0200
Subject: [PATCH 18/57] update script to be sync rather than async

---
 packages/builder/cypress/setup.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js
index 67ac005e49..b737f3ef2e 100644
--- a/packages/builder/cypress/setup.js
+++ b/packages/builder/cypress/setup.js
@@ -5,11 +5,9 @@
 
 const rimraf = require("rimraf");
 const homedir = require('os').homedir() + '/.budibase-cypress';
-const { exec } = require("child_process")
+const { execSync } = require("child_process")
 
-rimraf(homedir, function (error) {
-    console.log('Error: ', error);
-})
+rimraf.sync(homedir)
 
-exec(`../../packages/cli/bin/budi init -d ${homedir}`)
-exec(`../../packages/cli/bin/budi run -d ${homedir}`)
\ No newline at end of file
+execSync(`../../packages/cli/bin/budi init -d ${homedir}`)
+execSync(`../../packages/cli/bin/budi run -d ${homedir}`)

From 7a65da7899f8a1443d34db8095102ece4921a7d8 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 11 Jun 2020 18:14:28 +0200
Subject: [PATCH 19/57] fix linting errors

---
 package.json                                 |   3 +-
 packages/builder/cypress/plugins/index.js    |  21 ----
 packages/builder/cypress/setup.js            |   4 +-
 packages/builder/cypress/support/commands.js | 107 ++++++++++---------
 packages/builder/cypress/support/index.js    |   2 +-
 packages/builder/package.json                |   5 +
 yarn.lock                                    |   9 +-
 7 files changed, 74 insertions(+), 77 deletions(-)
 delete mode 100644 packages/builder/cypress/plugins/index.js

diff --git a/package.json b/package.json
index e4e4a3bd4e..8185d0bbb0 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "@rollup/plugin-json": "^4.0.2",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.8.0",
+    "eslint-plugin-cypress": "^2.11.1",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-svelte3": "^2.7.3",
     "lerna": "3.14.1",
@@ -31,4 +32,4 @@
     "@material/icon-button": "4.0.0",
     "date-fns": "^2.10.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js
deleted file mode 100644
index aa9918d215..0000000000
--- a/packages/builder/cypress/plugins/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}
diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js
index b737f3ef2e..aca5ed627f 100644
--- a/packages/builder/cypress/setup.js
+++ b/packages/builder/cypress/setup.js
@@ -3,8 +3,8 @@
 // 2. Initialises using `.budibase-cypress`
 // 3. Runs the server using said folder
 
-const rimraf = require("rimraf");
-const homedir = require('os').homedir() + '/.budibase-cypress';
+const rimraf = require("rimraf")
+const homedir = require("os").homedir() + "/.budibase-cypress"
 const { execSync } = require("child_process")
 
 rimraf.sync(homedir)
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 8e8c31d798..ed19ba8233 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -25,76 +25,81 @@
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
 Cypress.Commands.add("createApp", (name, description) => {
-    cy.get('.banner-button')
-        .click()
-        .get('input[name="name"]')
-        .type(name).should('have.value', name)
+  cy.get(".banner-button")
+    .click()
+    .get('input[name="name"]')
+    .type(name)
+    .should("have.value", name)
 
-    cy.get('textarea[name="description"]')
-        .type(description).should('have.value', description)
+  cy.get('textarea[name="description"]')
+    .type(description)
+    .should("have.value", description)
 
-    cy.contains('Save').click()
+  cy.contains("Save").click()
 })
 Cypress.Commands.add("createModel", (modelName, firstField, secondField) => {
-    // Enter model name
-    cy.get('[data-cy=Name]').click()
-        .type(modelName)
+  // Enter model name
+  cy.get("[data-cy=Name]")
+    .click()
+    .type(modelName)
 
-    // Add 'name' field
-    cy.get('[data-cy=add-new-model-field]').click()
-    cy.get('[data-cy=Name]').click()
-        .type(firstField)
-    cy.contains('Save').click()
+  // Add 'name' field
+  cy.get("[data-cy=add-new-model-field]").click()
+  cy.get("[data-cy=Name]")
+    .click()
+    .type(firstField)
+  cy.contains("Save").click()
 
+  // Add 'age' field
+  cy.get("[data-cy=add-new-model-field]").click()
 
-    // Add 'age' field
-    cy.get('[data-cy=add-new-model-field]').click()
+  cy.get("[data-cy=Name]")
+    .click()
+    .type(secondField)
+  cy.get("select").select("number")
+  cy.contains("Save").click()
+  cy.contains(secondField).should("exist")
 
-    cy.get('[data-cy=Name]').click()
-        .type(secondField)
-    cy.get('select').select('number')
-    cy.contains('Save').click()
-    cy.contains(secondField).should('exist')
-
-    // Save model
-    cy.contains('Save').click()
+  // Save model
+  cy.contains("Save").click()
 })
 Cypress.Commands.add("addRecord", (firstField, secondField) => {
-    cy.contains('Create new record')
-        .click()
+  cy.contains("Create new record").click()
 
-    cy.get('[data-cy=name-input]').click().type(firstField)
-    cy.get('[data-cy=age-input]').click().type(secondField)
+  cy.get("[data-cy=name-input]")
+    .click()
+    .type(firstField)
+  cy.get("[data-cy=age-input]")
+    .click()
+    .type(secondField)
 
-    // Save
-    cy.contains('Save').click()
+  // Save
+  cy.contains("Save").click()
 })
 
 Cypress.Commands.add("createUser", (username, password, level) => {
-    // Create User
-    cy.get('.nav-group-header > .ri-add-line')
-        .click()
+  // Create User
+  cy.get(".nav-group-header > .ri-add-line").click()
 
-    cy.get('[data-cy=username]').type(username)
-    cy.get('[data-cy=password]').type(password)
-    cy.get('[data-cy=accessLevel]').select(level)
+  cy.get("[data-cy=username]").type(username)
+  cy.get("[data-cy=password]").type(password)
+  cy.get("[data-cy=accessLevel]").select(level)
 
-    // Save
-    cy.contains('Save').click()
+  // Save
+  cy.contains("Save").click()
 })
 
-Cypress.Commands.add("addHeadlineComponent", (text) => {
-    cy.get('.switcher > :nth-child(2)').click()
+Cypress.Commands.add("addHeadlineComponent", text => {
+  cy.get(".switcher > :nth-child(2)").click()
 
-    cy.get('[data-cy=Text]').click()
-    cy.get('[data-cy=Headline]').click()
-    cy.get('.tabs > :nth-child(2)').click()
-    cy.get('input[type="text"]')
-        .type(text)
-    cy.contains('Design').click()
+  cy.get("[data-cy=Text]").click()
+  cy.get("[data-cy=Headline]").click()
+  cy.get(".tabs > :nth-child(2)").click()
+  cy.get('input[type="text"]').type(text)
+  cy.contains("Design").click()
 })
-Cypress.Commands.add("addButtonComponent", (text) => {
-    cy.get('.switcher > :nth-child(2)').click()
+Cypress.Commands.add("addButtonComponent", () => {
+  cy.get(".switcher > :nth-child(2)").click()
 
-    cy.get('[data-cy=Button]').click()
-})
\ No newline at end of file
+  cy.get("[data-cy=Button]").click()
+})
diff --git a/packages/builder/cypress/support/index.js b/packages/builder/cypress/support/index.js
index d68db96df2..a80764cb2c 100644
--- a/packages/builder/cypress/support/index.js
+++ b/packages/builder/cypress/support/index.js
@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands"
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 56ee5135e3..49331426b4 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -41,6 +41,11 @@
       "/node_modules/(?!svelte).+\\.js$"
     ]
   },
+  "eslintConfig": {
+    "extends": [
+      "plugin:cypress/recommended"
+    ]
+  },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
     "@budibase/bbui": "^1.1.1",
diff --git a/yarn.lock b/yarn.lock
index bb8ac784f1..cd956d394d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1980,6 +1980,13 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+eslint-plugin-cypress@^2.11.1:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-cypress/-/eslint-plugin-cypress-2.11.1.tgz#a945e2774b88211e2c706a059d431e262b5c2862"
+  integrity sha512-MxMYoReSO5+IZMGgpBZHHSx64zYPSPTpXDwsgW7ChlJTF/sA+obqRbHplxD6sBStE+g4Mi0LCLkG4t9liu//mQ==
+  dependencies:
+    globals "^11.12.0"
+
 eslint-plugin-prettier@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.2.tgz#432e5a667666ab84ce72f945c72f77d996a5c9ba"
@@ -2526,7 +2533,7 @@ glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-globals@^11.1.0:
+globals@^11.1.0, globals@^11.12.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==

From 47762bd0d56a51617560c1baf4a7c3cde63546df Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 11 Jun 2020 18:15:29 +0200
Subject: [PATCH 20/57] update instructions in contributing

---
 CONTRIBUTING.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ac35a4277d..9d473198b9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -170,12 +170,14 @@ Follow from **Step 3. Install and Build** in the setup guide above. You should h
 
 #### End-to-end Tests
 
-Budibase uses Cypress to run a number of E2E tests. To run the tests execute the following command:
+Budibase uses Cypress to run a number of E2E tests. To run the tests execute the following command in the root folder:
 
 ```
 yarn test:e2e
 ```
 
+Or if you are in the builder you can run `yarn cy:test`.
+
 
 ### Other Useful Information
 

From ce6ca5351d6c5f50bd1adfd70fe8e184b5820269 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 11 Jun 2020 20:37:01 +0100
Subject: [PATCH 21/57] changed setup to require CLI modules directly

---
 packages/builder/cypress/setup.js             | 12 ++++++++----
 packages/cli/src/commands/init/initHandler.js |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js
index aca5ed627f..9682a07118 100644
--- a/packages/builder/cypress/setup.js
+++ b/packages/builder/cypress/setup.js
@@ -4,10 +4,14 @@
 // 3. Runs the server using said folder
 
 const rimraf = require("rimraf")
-const homedir = require("os").homedir() + "/.budibase-cypress"
-const { execSync } = require("child_process")
+const { join } = require("path")
+const homedir = join(require("os").homedir(), ".budibase-cypress")
+const init = require("../../cli/src/commands/init/initHandler")
+const run = require("../../cli/src/commands/run/runHandler")
 
 rimraf.sync(homedir)
 
-execSync(`../../packages/cli/bin/budi init -d ${homedir}`)
-execSync(`../../packages/cli/bin/budi run -d ${homedir}`)
+init({ dir: homedir })
+.then(() => {
+  run({ dir: homedir })
+})
diff --git a/packages/cli/src/commands/init/initHandler.js b/packages/cli/src/commands/init/initHandler.js
index c0c4ad1b9e..3fe4134447 100644
--- a/packages/cli/src/commands/init/initHandler.js
+++ b/packages/cli/src/commands/init/initHandler.js
@@ -7,7 +7,7 @@ const Sqrl = require("squirrelly")
 const uuid = require("uuid")
 
 module.exports = opts => {
-  run(opts)
+  return run(opts)
 }
 
 const run = async opts => {

From ebc47a9b1b6a227d8912c24cd7c26afaac825367 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 12 Jun 2020 10:48:20 +0100
Subject: [PATCH 22/57] Fully functional Colorpicker with Preview

---
 .../Colorpicker/ButtonGroup.svelte            |  27 ++
 .../Colorpicker/Colorpicker.svelte            | 142 ++++--
 .../Colorpicker/Colorpreview.svelte           |  78 ++++
 .../Colorpicker/FlatButton.svelte             |  26 ++
 .../userInterface/Colorpicker/Input.svelte    |  28 ++
 .../userInterface/Colorpicker/Palette.svelte  |   1 +
 .../userInterface/Colorpicker/Slider.svelte   |  22 +-
 .../userInterface/Colorpicker/helpers.js      |  14 +
 .../userInterface/Colorpicker/index.js        |   5 +-
 .../userInterface/Colorpicker/utils.js        | 426 +++++++++---------
 10 files changed, 510 insertions(+), 259 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Input.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/helpers.js

diff --git a/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte b/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
new file mode 100644
index 0000000000..f9c402ac81
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
@@ -0,0 +1,27 @@
+<script>
+  import FlatButton from "./FlatButton.svelte";
+
+  export let format = "hex";
+  export let onclick = format => {};
+
+  let colorFormats = ["hex", "rgb", "hsl"];
+</script>
+
+<style>
+  .flatbutton-group {
+    font-weight: 500;
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    justify-content: center;
+  }
+</style>
+
+<div class="flatbutton-group">
+  {#each colorFormats as text}
+    <FlatButton
+      selected={format === text}
+      {text}
+      on:click={() => onclick(text)} />
+  {/each}
+</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 015114ded8..8ec53d9b86 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,10 +1,17 @@
 <script>
-  import {onMount} from "svelte"
-  import { getAndConvertHexa, getAndConvertRgba, getHSLA, hsvaToHexa, hsvaToRgba, getColorFormat, convertToHSVA } from "./utils.js"
+  import { onMount, createEventDispatcher } from "svelte";
+
+  import {
+    getColorFormat,
+    convertToHSVA,
+    convertHsvaToFormat
+  } from "./utils.js";
   import Slider from "./Slider.svelte";
   import Palette from "./Palette.svelte";
+  import ButtonGroup from "./ButtonGroup.svelte";
+  import Input from "./Input.svelte";
 
-  export let value = "rgba(255,255,255,1)";
+  export let value = "#3ec1d3ff";
   export let format = "hexa";
 
   let h = null;
@@ -12,24 +19,20 @@
   let v = null;
   let a = null;
 
+  const dispatch = createEventDispatcher();
+
   onMount(() => {
-    format = getColorFormat(value)
-    if(format) {
-      let hsva = convertToHSVA(value, format)
-      setHSVA(hsva)
+    format = getColorFormat(value);
+    if (format) {
+      convertAndSetHSVA()
     }
-})
+  });
 
-  const hsvaIsNull = () => [h,s,v,a].every(c => c === null)
+  const hsvaIsNull = () => [h, s, v, a].every(c => c === null);
 
-  function setFormatAndConvert() {
-    if (value.startsWith('#')) {
-      format = "hexa"
-      return getAndConvertHexa(value)
-    } else if (value.startsWith('rgba')) {
-      format = "rgba"
-      return getAndConvertRgba(value)
-    }
+  function convertAndSetHSVA() {
+    let hsva = convertToHSVA(value, format);
+    setHSVA(hsva);
   }
 
   function setHSVA([hue, sat, val, alpha]) {
@@ -40,53 +43,81 @@
   }
 
   //fired by choosing a color from the palette
-  function setSaturationAndValue({detail}) {
-    s = detail.s
-    v = detail.v
-    let res = convertHSVA()
-    console.log("SAT-VAL", res)
+  function setSaturationAndValue({ detail }) {
+    s = detail.s;
+    v = detail.v;
+    value = convertHsvaToFormat([h, s, v, a], format);
+    dispatch("change", value)
   }
-    
+
   function setHue(hue) {
-    h = hue
-    let res = convertHSVA()
-    console.log("HUE",res)
+    h = hue;
+    value = convertHsvaToFormat([h, s, v, a], format);    
+    dispatch("change", value)
   }
 
   function setAlpha(alpha) {
-    a = alpha
-    let res = convertHSVA()
-    console.log("ALPHA",res)
-
+    a = alpha === "1.00" ? "1" :alpha;
+    value = convertHsvaToFormat([h, s, v, a], format);    
+    dispatch("change", value)
   }
 
-  function convertHSVA() {
-    let hsva = [h, s, v, a]
-    let _value = format === "hexa" ? hsvaToHexa(hsva, true) : hsvaToRgba(hsva, true)
-    return _value;
-    // onchange(_value)
+  function changeFormatAndConvert(f) {
+    format = f;
+    value = convertHsvaToFormat([h, s, v, a], format);
   }
 
-  // $: {
-  //   if(!hsvaIsNull()) {
-  //     let hsva = [h, s, v, a]
-  //     // let t = value + "abs"
-  //     value = format === "hexa" ? hsvaToHexa(hsva) : hsvaToRgba(hsva)
-  //     debugger
-  //     // console.log("VAL", value)
-  //   }
-  // }
+  function handleColorInput(text) {
+    let f = getColorFormat(text)
+    if(f) {
+      format = f;
+      value = text
+      convertAndSetHSVA()
+    }
+  }
 </script>
 
 <style>
   .colorpicker-container {
     display: flex;
+    font-size: 12px;
+    font-weight: 400;
     flex-direction: column;
     height: 300px;
     width: 250px;
     background: #ffffff;
-    border: 1px solid #e8e8ef;
     border-radius: 2px;
+    box-shadow: 0 0.15em 1.5em 0 rgba(0,0,0,.1), 0 0 1em 0 rgba(0,0,0,.03);
+  }
+
+  .control-panel {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    background: white;
+    border: 1px solid #d2d2d2
+  }
+
+  .alpha-hue-panel {
+    display: grid;
+    grid-template-columns: 25px 1fr;
+    grid-gap: 15px;
+    justify-content: center;
+    align-items: center;
+    /* padding: 8px; */
+  }
+
+  .selected-color {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 1px solid #dedada;
+  }
+
+  .format-input-panel {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 </style>
 
@@ -94,7 +125,24 @@
 
   <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
 
-  <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
+  <div class="control-panel">
+    <div class="alpha-hue-panel">
+      <div>
+        <div class="selected-color" style={`background: ${value}`} />
+      </div>
+      <div>
+        <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
+        <Slider
+          type="alpha"
+          value={a}
+          on:change={alpha => setAlpha(alpha.detail)} />
+      </div>
+    </div>
+
+    <div class="format-input-panel">
+      <ButtonGroup {format} onclick={changeFormatAndConvert} />
+      <Input {value} on:input={event => handleColorInput(event.target.value)} />
+    </div>
+  </div>
 
-  <Slider type="alpha" value={a} on:change={alpha => setAlpha(alpha.detail)} />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
new file mode 100644
index 0000000000..329d4e4adc
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -0,0 +1,78 @@
+<script>
+    import Colorpicker from "./Colorpicker.svelte"
+    import {createEventDispatcher} from "svelte"
+    import {buildStyle} from "./helpers.js"
+    import { fade } from 'svelte/transition';
+
+    export let value = "#3ec1d3ff"
+    export let format = "hexa";
+    export let width = "25px"
+    export let open = true;
+    export let fullwidth = false;
+
+    let colorPreview = null
+    let positionSide = "top"
+
+    $: width = fullwidth ? "100%" : width
+    $: style = buildStyle({width, background: value})
+    $: colorStyle = buildStyle({[positionSide]: `28px`})
+
+    const dispatch = createEventDispatcher()
+
+    function openColorpicker(event) {
+        if(colorPreview) {
+            const {top: spaceAbove, width, bottom} = colorPreview.getBoundingClientRect()            
+            const spaceBelow = window.innerHeight - bottom;
+
+            if (spaceAbove > spaceBelow) {
+                positionSide = "bottom"
+            } else {
+                positionSide = "top"
+            }
+        }
+        open = true;
+    }
+
+    function onColorChange(color) {
+        value = color.detail;
+        dispatch("change", color.detail)
+    }
+</script>
+
+<div class="color-preview-container">
+    <div bind:this={colorPreview} class="color-preview" {style} on:click={openColorpicker}></div>
+    {#if open}
+        <div class="color-preview" style={colorStyle}>
+            <Colorpicker on:change={onColorChange} {format} {value} />
+        </div>
+    {/if}
+</div>
+{#if open}
+    <div on:click|self={() => open = false} class="overlay"></div>
+{/if}
+
+<style>
+    .color-preview-container{
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        height: fit-content;
+    }
+
+    .color-preview {
+        position: absolute;
+        flex: 1;
+        height: 25px;
+        z-index: 2;
+        border-radius: 3px;
+    }
+
+    .overlay{
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;        
+    }
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte b/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
new file mode 100644
index 0000000000..af1ea5e945
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
@@ -0,0 +1,26 @@
+<script>
+  export let text = "";
+  export let selected = false;
+</script>
+
+<style>
+  .flatbutton {
+    padding: 3px 15px;
+    cursor: pointer;
+    color: black;
+    background-color: #dadada;
+    border: 1px solid #d4d4d4;
+    border-radius: 8px;
+    text-transform: uppercase;
+    margin: 5px;
+    transition: all 0.3s;
+  }
+
+  .selected {
+    color: #ffffff;
+    background-color: #003cb0;
+    border: none;
+  }
+</style>
+
+<div class="flatbutton" class:selected on:click>{text}</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
new file mode 100644
index 0000000000..04966c1f30
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
@@ -0,0 +1,28 @@
+<script>
+  export let value = "";
+</script>
+
+<style>
+  div {
+    display: flex;
+    justify-content: center;
+    margin: 5px 0px;
+  }
+
+  input {
+    width: 185px;
+    font-size: 14px;
+    background: #f1f3f4;
+    border-radius: 8px;
+    height: 27px;
+    outline-color: #003cb0;
+    color: #565252;
+    text-align: center;
+    /* border: none; */
+    border: 1px solid #dadada;
+  }
+</style>
+
+<div>
+  <input on:input type="text" {value} maxlength="25" />
+</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
index 5f344e74a7..01a614124c 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
@@ -42,6 +42,7 @@
     width: 100%;
     height: 175px;
     cursor: crosshair;
+    overflow: hidden;
   }
 
   .picker {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
index 13254c29c8..ec8d99248d 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -2,7 +2,7 @@
   import { onMount, createEventDispatcher } from "svelte";
   import dragable from "./drag.js";
 
-  export let value = 1
+  export let value = 1;
   export let type = "hue";
 
   const dispatch = createEventDispatcher();
@@ -11,20 +11,22 @@
   let sliderWidth = 0;
 
   function handleClick(mouseX) {
-    const { left } = slider.getBoundingClientRect();
+    const { left, width } = slider.getBoundingClientRect();
     let clickPosition = mouseX - left;
+
+    let percentageClick = (clickPosition / sliderWidth).toFixed(2)
     
-    if (clickPosition >= 0 && clickPosition <= sliderWidth) {
-      let percentageClick = clickPosition / sliderWidth;
+    if (percentageClick >= 0 && percentageClick <= 1) {
       let value =
         type === "hue"
-          ? 360 * percentageClick.toString()
-          : percentageClick.toString();
+          ? 360 * percentageClick
+          : percentageClick;
       dispatch("change", value);
     }
   }
 
-  $: thumbPosition = type === "hue" ? sliderWidth * (value / 360) : sliderWidth * (value)
+  $: thumbPosition =
+    type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value;
 
   $: style = `transform: translateX(${thumbPosition - 6}px);`;
 </script>
@@ -34,10 +36,11 @@
     position: relative;
     align-self: center;
     height: 8px;
-    width: 220px;
+    width: 185px;
     border-radius: 10px;
     margin: 10px 0px;
     border: 1px solid #e8e8ef;
+    cursor: pointer;
   }
 
   .hue {
@@ -62,9 +65,10 @@
     bottom: -3px;
     height: 12px;
     width: 12px;
-    border: 1px solid black;
+    border: 1px solid #777676;
     border-radius: 50%;
     background-color: #ffffff;
+    cursor:grab;
   }
 </style>
 
diff --git a/packages/builder/src/components/userInterface/Colorpicker/helpers.js b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
new file mode 100644
index 0000000000..69f94bf208
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
@@ -0,0 +1,14 @@
+export const buildStyle = styles => {
+    let str = ""
+    for (let s in styles) {
+      if (styles[s]) {
+        let key = convertCamel(s)
+        str += `${key}: ${styles[s]}; `
+      }
+    }
+    return str
+  }
+  
+  export const convertCamel = str => {
+    return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+  }
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js
index ad8187a09b..b497601edf 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/index.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/index.js
@@ -1,2 +1,3 @@
-import Colorpicker from './Colorpicker.svelte';
-export default Colorpicker;
+import Colorpreview from './Colorpreview.svelte';
+
+export default Colorpreview;
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index b46ad6d202..518e94ec9f 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -1,244 +1,268 @@
-export const isValidHex = (str) => /^#(?:[A-F0-9]{3}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str)
+export const isValidHex = str =>
+  /^#(?:[A-F0-9]{3}$|[A-F0-9]{4}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str);
 
-const getHexaValues = (hexString) => hexString.match(/[A-F0-9]{2}/gi);
-
-export const isValidRgb = (str) => {
-	const hasValidStructure = /^(?:rgba\(|rgb\()[0-9,.\s]*\)$/gi.test(str);
-	if(hasValidStructure) {
-		return testRgbaValues(str.toLowerCase());
-	}
-}
-
-const findNonNumericChars = /[a-z()%\s]/gi
-
-export const getNumericValues = (str) => str.replace(findNonNumericChars, '').split(',').map(c => Number(c));
-
-export const testRgbaValues = (str) => {
-	const rgba = getNumericValues(str)
-	let [ r, g, b, a ] = rgba;
-
-	let isValidLengthRange = (str.startsWith("rgb(") && rgba.length === 3) || (str.startsWith("rgba(") && rgba.length === 4);
-	let isValidColorRange = [ r, g, b ].every((v) => v >= 0 && v <= 255);
-	let isValidAlphaRange =  str.startsWith("rgba(") ? a >= 0 && a <= 1 : true;
-
-	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
+const getHexaValues = hexString => {
+  if (hexString.length <= 5) {
+    let hexArr = hexString.match(/[A-F0-9]/gi);
+    let t = hexArr.map(c => (c += c));
+    return t;
+  } else {
+    return hexString.match(/[A-F0-9]{2}/gi);
+  }
 };
 
-export const isValidHsl = (str) => {
-	const hasValidStructure = /^(?:hsl\(|hsla\()[0-9,.\s]*\)$/gi.test(str)
-	if(hasValidStructure) {
-		return testHslaValues(str.toLowerCase())
-	}
-}
+export const isValidRgb = str => {
+  const hasValidStructure = /^(?:rgba\(|rgb\()(?:[0-9,\s]|\.(?=\d))*\)$/gi.test(str);
+  if (hasValidStructure) {
+    return testRgbaValues(str.toLowerCase());
+  }
+};
 
-export const testHslaValues = (str) => {
+const findNonNumericChars = /[a-z()\s]/gi;
 
-	const hsla = getNumericValues(str)
-	const [h, s, l, a] = hsla
+export const getNumericValues = str =>
+  str
+    .replace(findNonNumericChars, "")
+    .split(",")
+    .map(v => v !== "" ? v : undefined);
 
-	let isValidLengthRange = (str.startsWith("hsl(") && hsla.length === 3) || (str.startsWith("hsla(") && hsla.length === 4);
-	let isValidColorRange = (h >= 0 && h <= 360) && [s, l].every(v => v >= 0 && v <= 100)
-	let isValidAlphaRange = str.startsWith("hsla(") ? (a >= 0 && a <= 1) : true
+export const testRgbaValues = str => {
+  const rgba = getNumericValues(str);
+  const [r, g, b, a] = rgba;
+  
+  let isValidLengthRange =
+    (str.startsWith("rgb(") && rgba.length === 3) ||
+    (str.startsWith("rgba(") && rgba.length === 4);
+  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255);
+  let isValidAlphaRange = str.startsWith("rgba(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true;
 
-	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
-}
+  return isValidLengthRange && isValidColorRange && isValidAlphaRange;
+};
 
-export const getColorFormat = (color) => {
-	if(typeof color === "string") {
-		if(isValidHex(color)) {
-			return 'hex'
-		}else if(isValidRgb(color)) {
-			return 'rgb'
-		}else if(isValidHsl(color)) {
-			return 'hsl'
-		}
-	}
-}
+export const isValidHsl = str => {
+  const hasValidStructure = /^(?:hsl\(|hsla\()(?:[0-9,%\s]|\.(?=\d))*\)$/gi.test(str);
+  if (hasValidStructure) {
+    return testHslaValues(str.toLowerCase());
+  }
+};
+
+export const testHslaValues = str => {
+  const hsla = getNumericValues(str);
+  const [h, s, l, a] = hsla;
+  const isUndefined = [h,s,l].some(v => v === undefined)
+
+  if(isUndefined) return false;
+
+  let isValidLengthRange =
+    (str.startsWith("hsl(") && hsla.length === 3) ||
+    (str.startsWith("hsla(") && hsla.length === 4);
+  let isValidHue = h >= 0 && h <= 360
+  let isValidSatLum = [s, l].every(v => v.endsWith('%') && parseInt(v) >= 0 && parseInt(v) <= 100 )
+  let isValidAlphaRange = str.startsWith("hsla(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true;
+
+  return isValidLengthRange && isValidHue && isValidSatLum && isValidAlphaRange;
+};
+
+export const getColorFormat = color => {
+  if (typeof color === "string") {
+    if (isValidHex(color)) {
+      return "hex";
+    } else if (isValidRgb(color)) {
+      return "rgb";
+    } else if (isValidHsl(color)) {
+      return "hsl";
+    }
+  }
+};
 
 export const convertToHSVA = (value, format) => {
-	switch(format) {
-		case "hex":
-			return getAndConvertHexa(value)
-		case "rgb": 
-			return getAndConvertRgba(value)
-		case "hsl":
-			return getAndConvertHsla(value)
-	}
-}
+  switch (format) {
+    case "hex":
+      return getAndConvertHexa(value);
+    case "rgb":
+      return getAndConvertRgba(value);
+    case "hsl":
+      return getAndConvertHsla(value);
+  }
+};
 
 export const convertHsvaToFormat = (hsva, format) => {
-	switch(format) {
-		case "hex":
-			return hsvaToHexa(hsva, true)
-		case "rgb":
-			return hsvaToRgba(hsva, true)
-		case "hsl":
-			return hsvaToHsla(hsva, true)
-	}
-}
+  switch (format) {
+    case "hex":
+      return hsvaToHexa(hsva, true);
+    case "rgb":
+      return hsvaToRgba(hsva, true);
+    case "hsl":
+      return hsvaToHsla(hsva);
+  }
+};
 
-
-export const getAndConvertHexa = (color) => { 
-	let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
-	return hexaToHSVA([ rHex, gHex, bHex ], aHex);
-}
+export const getAndConvertHexa = color => {
+  let [rHex, gHex, bHex, aHex] = getHexaValues(color);
+  return hexaToHSVA([rHex, gHex, bHex], aHex);
+};
 
 export const getAndConvertRgba = color => {
-	let rgba = getNumericValues(color);
-	return rgbaToHSVA(rgba);
-}
+  let rgba = getNumericValues(color);
+  return rgbaToHSVA(rgba);
+};
 
 export const getAndConvertHsla = color => {
-	let hsla = getNumericValues(color);
-	return hslaToHSVA(hsla)
-}
-
-export const getHSLA = ([hue, sat, val, a]) => {
-	const [ h, s, l ] = _hsvToHSL([hue, sat, val]);
-	return `hsla(${h}, ${s}, ${l}, ${a})`;
+  let hsla = getNumericValues(color);
+  return hslaToHSVA(hsla);
 };
 
-export const hexaToHSVA = (hex, alpha = 'FF') => {
-	const rgba = hex.map((v) => parseInt(v, 16)).concat(Number((parseInt(alpha, 16) / 255).toFixed(2)));
-	return rgbaToHSVA(rgba);
+
+export const hexaToHSVA = (hex, alpha = "FF") => {
+  const rgba = hex
+    .map(v => parseInt(v, 16))
+    .concat(Number((parseInt(alpha, 16) / 255).toFixed(2)));
+  return rgbaToHSVA(rgba);
 };
 
-export const rgbaToHSVA = (rgba) => {
-	const [ r, g, b, a = 1 ] = rgba;
-	let hsv = _rgbToHSV([ r, g, b ]);
-	return [ ...hsv, a ];
+export const rgbaToHSVA = rgba => {
+  const [r, g, b, a = 1] = rgba;
+  let hsv = _rgbToHSV([r, g, b]);
+  return [...hsv, a];
 };
 
 export const hslaToHSVA = ([h, s, l, a = 1]) => {
-	let hsv = _hslToHSV([h, s, l])
-	return [...hsv, a]
-}
-
-export const hsvaToHexa = (hsva, asString = false) => {
-	const [ r, g, b, a ] = hsvaToRgba(hsva);
-
-	const hexa = [ r, g, b ].map((v) => Math.round(v).toString(16)).concat(Math.round((a * 255)).toString(16));
-	return asString ? `#${hexa.join('')}` : hexa
+  let hsv = _hslToHSV([h, s, l]);
+  return [...hsv, a];
 };
 
-export const hsvaToRgba = ([h, s, v, a], asString = false) => {
-	let rgb = _hsvToRgb([ h, s, v ]).map(x => Math.round(x));
-	let rgba = [ ...rgb, a ];
-	return asString ? `rgba(${rgba.join(",")})` : rgba
+export const hsvaToHexa = (hsva, asString = false) => {
+  const [r, g, b, a] = hsvaToRgba(hsva);
+
+  const hexa = [r, g, b]
+    .map(v => {
+		let hex = Math.round(v).toString(16)
+		return hex.length === 1 ? `0${hex}` : hex
+	})
+    .concat(Math.round(a * 255).toString(16));
+  return asString ? `#${hexa.join("")}` : hexa;
+};
+
+export const hsvaToRgba = ([h, s, v, a = 1], asString = false) => {
+  let rgb = _hsvToRgb([h, s, v]).map(x => Math.round(x));
+  let rgba = [...rgb, a < 1 ? _fixNum(a, 2) : a];
+  return asString ? `rgba(${rgba.join(",")})` : rgba;
 };
 
 export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => {
-	let hsl = _hsvToHSL([h, s, v])
-	let hsla = [...hsl, a]
-	return asString ? `hsla(${hsla.join(",")})` : hsla
-}
+  let [hue, sat, lum] = _hsvToHSL([h, s, v]);
+  let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a];
+  return `hsla(${hsla.join(",")})`;
+};
 
-export const _hslToHSV = (hsl) => {
-	const h = hsl[0];
-	let s = hsl[1] / 100;
-	let l = hsl[2] / 100;
-	let smin = s;
-	const lmin = Math.max(l, 0.01);
+export const _hslToHSV = hsl => {
+  const h = hsl[0];
+  let s = hsl[1] / 100;
+  let l = hsl[2] / 100;
+  let smin = s;
+  const lmin = Math.max(l, 0.01);
 
-	l *= 2;
-	s *= (l <= 1) ? l : 2 - l;
-	smin *= lmin <= 1 ? lmin : 2 - lmin;
-	const v = (l + s) / 2;
-	const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
+  l *= 2;
+  s *= l <= 1 ? l : 2 - l;
+  smin *= lmin <= 1 ? lmin : 2 - lmin;
+  const v = (l + s) / 2;
+  const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
 
-	return [h, sv * 100, v * 100];
-}
-
-//Credit : https://github.com/Qix-/color-convert
-export const _rgbToHSV = (rgb) => {
-	let rdif;
-	let gdif;
-	let bdif;
-	let h;
-	let s;
-
-	const r = rgb[0] / 255;
-	const g = rgb[1] / 255;
-	const b = rgb[2] / 255;
-	const v = Math.max(r, g, b);
-	const diff = v - Math.min(r, g, b);
-	const diffc = function(c) {
-		return (v - c) / 6 / diff + 1 / 2;
-	};
-
-	if (diff === 0) {
-		h = 0;
-		s = 0;
-	} else {
-		s = diff / v;
-		rdif = diffc(r);
-		gdif = diffc(g);
-		bdif = diffc(b);
-
-		if (r === v) {
-			h = bdif - gdif;
-		} else if (g === v) {
-			h = 1 / 3 + rdif - bdif;
-		} else if (b === v) {
-			h = 2 / 3 + gdif - rdif;
-		}
-
-		if (h < 0) {
-			h += 1;
-		} else if (h > 1) {
-			h -= 1;
-		}
-	}
-
-	const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => Math.round(v));
-	return hsvResult;
+  return [h, sv * 100, v * 100];
 };
 
 //Credit : https://github.com/Qix-/color-convert
-export const _hsvToRgb = (hsv) => {
-	const h = hsv[0] / 60;
-	const s = hsv[1] / 100;
-	let v = hsv[2] / 100;
-	const hi = Math.floor(h) % 6;
+export const _rgbToHSV = rgb => {
+  let rdif;
+  let gdif;
+  let bdif;
+  let h;
+  let s;
 
-	const f = h - Math.floor(h);
-	const p = 255 * v * (1 - s);
-	const q = 255 * v * (1 - s * f);
-	const t = 255 * v * (1 - s * (1 - f));
-	v *= 255;
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const v = Math.max(r, g, b);
+  const diff = v - Math.min(r, g, b);
+  const diffc = function(c) {
+    return (v - c) / 6 / diff + 1 / 2;
+  };
 
-	switch (hi) {
-		case 0:
-			return [ v, t, p ];
-		case 1:
-			return [ q, v, p ];
-		case 2:
-			return [ p, v, t ];
-		case 3:
-			return [ p, q, v ];
-		case 4:
-			return [ t, p, v ];
-		case 5:
-			return [ v, p, q ];
-	}
+  if (diff === 0) {
+    h = 0;
+    s = 0;
+  } else {
+    s = diff / v;
+    rdif = diffc(r);
+    gdif = diffc(g);
+    bdif = diffc(b);
+
+    if (r === v) {
+      h = bdif - gdif;
+    } else if (g === v) {
+      h = 1 / 3 + rdif - bdif;
+    } else if (b === v) {
+      h = 2 / 3 + gdif - rdif;
+    }
+
+    if (h < 0) {
+      h += 1;
+    } else if (h > 1) {
+      h -= 1;
+    }
+  }
+
+  const hsvResult = [h * 360, s * 100, v * 100].map(v => Math.round(v));
+  return hsvResult;
 };
 
 //Credit : https://github.com/Qix-/color-convert
-export const _hsvToHSL = (hsv) => {
-	
-	const h = hsv[0];
-	const s = hsv[1] / 100;
-	const v = hsv[2] / 100;
-	const vmin = Math.max(v, 0.01);
-	let sl;
-	let l;
+export const _hsvToRgb = hsv => {
+  const h = hsv[0] / 60;
+  const s = hsv[1] / 100;
+  let v = hsv[2] / 100;
+  const hi = Math.floor(h) % 6;
 
-	l = (2 - s) * v;
-	const lmin = (2 - s) * vmin;
-	sl = s * vmin;
-	sl /= lmin <= 1 ? lmin : 2 - lmin;
-	sl = sl || 0;
-	l /= 2;
+  const f = h - Math.floor(h);
+  const p = 255 * v * (1 - s);
+  const q = 255 * v * (1 - s * f);
+  const t = 255 * v * (1 - s * (1 - f));
+  v *= 255;
 
-	return [ h, Number((sl * 100).toFixed(1)), Number((l * 100).toFixed(1)) ];
+  switch (hi) {
+    case 0:
+      return [v, t, p];
+    case 1:
+      return [q, v, p];
+    case 2:
+      return [p, v, t];
+    case 3:
+      return [p, q, v];
+    case 4:
+      return [t, p, v];
+    case 5:
+      return [v, p, q];
+  }
 };
+
+//Credit : https://github.com/Qix-/color-convert
+export const _hsvToHSL = hsv => {
+  const h = hsv[0];
+  const s = hsv[1] / 100;
+  const v = hsv[2] / 100;
+  const vmin = Math.max(v, 0.01);
+  let sl;
+  let l;
+
+  l = (2 - s) * v;
+  const lmin = (2 - s) * vmin;
+  sl = s * vmin;
+  sl /= lmin <= 1 ? lmin : 2 - lmin;
+  sl = sl || 0;
+  l /= 2;
+
+  return [_fixNum(h, 0), _fixNum(sl * 100, 0), _fixNum(l * 100, 0)];
+};
+
+export const _fixNum = (value, decimalPlaces) =>
+  Number(parseFloat(value).toFixed(decimalPlaces));

From 19d132c6c24b35a185f5426ee681d0a50eb3c2db Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 12 Jun 2020 20:42:55 +0100
Subject: [PATCH 23/57] removal of appRoot - appId comes in cookie

---
 packages/builder/cypress/plugins/index.js     |  21 +++
 .../builder/src/builderStore/store/index.js   |  56 ++----
 .../builder/src/builderStore/storeUtils.js    |  13 ++
 .../common/Inputs/InputGroup.svelte           |   7 +-
 .../AppPreview/CurrentItemPreview.svelte      |  40 +++--
 .../AppPreview/CurrentItemPreview.svelte.orig | 161 ++++++++++++++++++
 .../AppPreview/iframeTemplate.js              |   1 +
 .../ComponentPropertiesPanel.svelte           |  26 +--
 .../components/userInterface/PagesList.svelte |   4 +-
 .../userInterface/SettingsView.svelte         |  40 +++++
 .../userInterface/propertyCategories.js       |  82 +++++++--
 .../userInterface/temporaryPanelStructure.js  |  12 ++
 packages/client/src/api/index.js              |   5 +-
 packages/client/src/createApp.js              |  11 +-
 packages/client/src/index.js                  |   9 +-
 packages/client/src/render/getAppId.js        |   5 +
 packages/client/src/render/screenRouter.js    |  16 +-
 packages/client/src/state/bbComponentApi.js   |  14 +-
 packages/client/src/state/eventHandlers.js    |   3 +-
 packages/client/src/state/stateManager.js     |   5 +-
 packages/client/tests/testAppDef.js           |   9 +-
 .../src/Test/createApp.js                     |   8 +-
 packages/server/package.json                  |   2 +-
 packages/server/src/api/controllers/auth.js   |  12 +-
 packages/server/src/api/controllers/model.js  |  32 +++-
 packages/server/src/api/controllers/record.js |  11 +-
 packages/server/src/api/controllers/static.js |  30 +++-
 packages/server/src/api/index.js              |   9 +
 packages/server/src/api/routes/auth.js        |   2 +-
 packages/server/src/api/routes/index.js       |   2 +
 packages/server/src/api/routes/model.js       |  38 +----
 packages/server/src/api/routes/record.js      |  36 ++++
 packages/server/src/api/routes/static.js      |   5 +-
 .../src/api/routes/tests/couchTestUtils.js    |   4 +
 .../server/src/api/routes/tests/model.spec.js |  47 ++++-
 .../src/api/routes/tests/record.spec.js       |  24 +++
 .../server/src/utilities/builder/buildPage.js |   6 +-
 .../src/utilities/builder/index.template.html |   8 +-
 packages/standard-components/components.json  |   7 +
 .../public/clientAppDefinition.js             |   1 -
 packages/standard-components/src/Embed.svelte |   5 +
 packages/standard-components/src/Login.svelte |  19 +--
 .../standard-components/src/Test/createApp.js |   2 +-
 packages/standard-components/src/index.js     |   1 +
 44 files changed, 616 insertions(+), 235 deletions(-)
 create mode 100644 packages/builder/cypress/plugins/index.js
 create mode 100644 packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig
 create mode 100644 packages/client/src/render/getAppId.js
 create mode 100644 packages/server/src/api/routes/record.js
 create mode 100644 packages/standard-components/src/Embed.svelte

diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js
new file mode 100644
index 0000000000..aa9918d215
--- /dev/null
+++ b/packages/builder/cypress/plugins/index.js
@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 9f91550bca..1f3ea9c0ef 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -5,7 +5,6 @@ import { writable, get } from "svelte/store"
 import api from "../api"
 import { DEFAULT_PAGES_OBJECT } from "../../constants"
 import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
-import { rename } from "components/userInterface/pagesParsing/renameScreen"
 import {
   createProps,
   makePropsSafe,
@@ -24,6 +23,7 @@ import {
   saveCurrentPreviewItem as _saveCurrentPreviewItem,
   saveScreenApi as _saveScreenApi,
   regenerateCssForCurrentScreen,
+  renameCurrentScreen,
 } from "../storeUtils"
 
 export const getStore = () => {
@@ -52,7 +52,6 @@ export const getStore = () => {
   store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store)
 
   store.saveScreen = saveScreen(store)
-  store.renameScreen = renameScreen(store)
   store.deleteScreen = deleteScreen(store)
   store.setCurrentScreen = setCurrentScreen(store)
   store.setCurrentPage = setCurrentPage(store)
@@ -63,6 +62,7 @@ export const getStore = () => {
   store.addChildComponent = addChildComponent(store)
   store.selectComponent = selectComponent(store)
   store.setComponentProp = setComponentProp(store)
+  store.setPageOrScreenProp = setPageOrScreenProp(store)
   store.setComponentStyle = setComponentStyle(store)
   store.setComponentCode = setComponentCode(store)
   store.setScreenType = setScreenType(store)
@@ -207,46 +207,6 @@ const deleteScreen = store => name => {
   })
 }
 
-const renameScreen = store => (oldname, newname) => {
-  store.update(s => {
-    const { screens, pages, error, changedScreens } = rename(
-      s.pages,
-      s.screens,
-      oldname,
-      newname
-    )
-
-    if (error) {
-      // should really do something with this
-      return s
-    }
-
-    s.screens = screens
-    s.pages = pages
-    if (s.currentPreviewItem.name === oldname)
-      s.currentPreviewItem.name = newname
-
-    const saveAllChanged = async () => {
-      for (let screenName of changedScreens) {
-        const changedScreen = getExactComponent(screens, screenName)
-        await api.post(`/_builder/api/${s.appId}/screen`, changedScreen)
-      }
-    }
-
-    api
-      .patch(`/_builder/api/${s.appId}/screen`, {
-        oldname,
-        newname,
-      })
-      .then(() => saveAllChanged())
-      .then(() => {
-        _savePage(s)
-      })
-
-    return s
-  })
-}
-
 const savePage = store => async page => {
   store.update(state => {
     if (state.currentFrontEndType !== "page" || !state.currentPageName) {
@@ -400,6 +360,18 @@ const setComponentProp = store => (name, value) => {
   })
 }
 
+const setPageOrScreenProp = store => (name, value) => {
+  store.update(state => {
+    if (name === "name" && state.currentFrontEndType === "screen") {
+      state = renameCurrentScreen(value, state)
+    } else {
+      state.currentPreviewItem[name] = value
+      _saveCurrentPreviewItem(state)
+    }
+    return state
+  })
+}
+
 const setComponentStyle = store => (type, name, value) => {
   store.update(state => {
     if (!state.currentComponentInfo._styles) {
diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index d6aa4d0308..ff951e6b6f 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -45,6 +45,19 @@ export const saveScreenApi = (screen, s) => {
     .then(() => savePage(s))
 }
 
+export const renameCurrentScreen = (newname, state) => {
+  const oldname = state.currentPreviewItem.name
+  state.currentPreviewItem.name = newname
+  api.patch(
+    `/_builder/api/${state.appId}/pages/${state.currentPageName}/screen`,
+    {
+      oldname,
+      newname,
+    }
+  )
+  return state
+}
+
 export const walkProps = (props, action, cancelToken = null) => {
   cancelToken = cancelToken || { cancelled: false }
   action(props, () => {
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index e5fed68103..385623ca19 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -19,9 +19,10 @@
     onChange(_value)
   }
 
-  $: displayValues = value && suffix
-    ? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
-    : value || []
+  $: displayValues =
+    value && suffix
+      ? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
+      : value || []
 </script>
 
 <div class="input-container">
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 53450c2200..f97f91df6b 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -21,7 +21,7 @@
     return componentName || "element"
   }
 
-  const screenPlaceholder =  {
+  const screenPlaceholder = {
     name: "Screen Placeholder",
     route: "*",
     props: {
@@ -60,9 +60,8 @@
     },
   }
 
-
   $: hasComponent = !!$store.currentPreviewItem
-  
+
   $: {
     styles = ""
     // Apply the CSS from the currently selected page and its screens
@@ -88,11 +87,10 @@
     libraries: $store.libraries,
     page: $store.pages[$store.currentPageName],
     screens: [
-          $store.currentFrontEndType === "page"
-          ? screenPlaceholder
-          : $store.currentPreviewItem,
+      $store.currentFrontEndType === "page"
+        ? screenPlaceholder
+        : $store.currentPreviewItem,
     ],
-    appRootPath: "",
   }
 
   $: selectedComponentType = getComponentTypeName($store.currentComponentInfo)
@@ -102,20 +100,26 @@
     : ""
 
   const refreshContent = () => {
-    iframe.contentWindow.postMessage(JSON.stringify({
-      styles,
-      stylesheetLinks,
-      selectedComponentType,
-      selectedComponentId,
-      frontendDefinition,
-    }))
+    iframe.contentWindow.postMessage(
+      JSON.stringify({
+        styles,
+        stylesheetLinks,
+        selectedComponentType,
+        selectedComponentId,
+        frontendDefinition,
+        appId: $store.appId,
+      })
+    )
   }
 
-  $: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true })
+  $: if (iframe)
+    iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
+      once: true,
+    })
 
-  $: if(iframe && frontendDefinition) {
-		refreshContent()
-	}
+  $: if (iframe && frontendDefinition) {
+    refreshContent()
+  }
 </script>
 
 <div class="component-container">
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig
new file mode 100644
index 0000000000..81c3624274
--- /dev/null
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig
@@ -0,0 +1,161 @@
+<script>
+  import { store, backendUiStore } from "builderStore"
+  import { map, join } from "lodash/fp"
+  import iframeTemplate from "./iframeTemplate"
+  import { pipe } from "components/common/core"
+
+  let iframe
+  let styles = ""
+
+  function transform_component(comp) {
+    const props = comp.props || comp
+    if (props && props._children && props._children.length) {
+      props._children = props._children.map(transform_component)
+    }
+
+    return props
+  }
+
+  const getComponentTypeName = component => {
+    let [componentName] = component._component.match(/[a-z]*$/)
+    return componentName || "element"
+  }
+
+  const screenPlaceholder = {
+    name: "Screen Placeholder",
+    route: "*",
+    props: {
+      _component: "@budibase/standard-components/container",
+      type: "div",
+      _children: [
+        {
+          _component: "@budibase/standard-components/container",
+          _styles: { normal: {}, hover: {}, active: {}, selected: {} },
+          _id: "__screenslot__text",
+          _code: "",
+          className: "",
+          onLoad: [],
+          type: "div",
+          _children: [
+            {
+              _component: "@budibase/standard-components/text",
+              _styles: {
+                normal: {},
+                hover: {},
+                active: {},
+                selected: {},
+              },
+              _id: "__screenslot__text_2",
+              _code: "",
+              text: "content",
+              font: "",
+              color: "",
+              textAlign: "inline",
+              verticalAlign: "inline",
+              formattingTag: "none",
+            },
+          ],
+        },
+      ],
+    },
+  }
+
+  $: hasComponent = !!$store.currentPreviewItem
+
+  $: {
+    styles = ""
+    // Apply the CSS from the currently selected page and its screens
+    const currentPage = $store.pages[$store.currentPageName]
+    styles += currentPage._css
+    for (let screen of currentPage._screens) {
+      styles += screen._css
+    }
+    styles = styles
+  }
+
+  $: stylesheetLinks = pipe($store.pages.stylesheets, [
+    map(s => `<link rel="stylesheet" href="${s}"/>`),
+    join("\n"),
+  ])
+
+  $: screensExist =
+    $store.currentPreviewItem._screens &&
+    $store.currentPreviewItem._screens.length > 0
+
+  $: frontendDefinition = {
+    appId: $store.appId,
+    libraries: $store.libraries,
+    page: $store.pages[$store.currentPageName],
+    screens: [
+      $store.currentFrontEndType === "page"
+        ? screenPlaceholder
+        : $store.currentPreviewItem,
+    ],
+  }
+
+  $: selectedComponentType = getComponentTypeName($store.currentComponentInfo)
+
+  $: selectedComponentId = $store.currentComponentInfo
+    ? $store.currentComponentInfo._id
+    : ""
+
+  const refreshContent = () => {
+<<<<<<< HEAD
+    iframe.contentWindow.postMessage(JSON.stringify({
+      styles,
+      stylesheetLinks,
+      selectedComponentType,
+      selectedComponentId,
+      frontendDefinition,
+      appId: $store.appId
+    }))
+=======
+    iframe.contentWindow.postMessage(
+      JSON.stringify({
+        styles,
+        stylesheetLinks,
+        selectedComponentType,
+        selectedComponentId,
+        frontendDefinition,
+      })
+    )
+>>>>>>> master
+  }
+
+  $: if (iframe)
+    iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
+      once: true,
+    })
+
+  $: if (iframe && frontendDefinition) {
+    refreshContent()
+  }
+</script>
+
+<div class="component-container">
+  {#if hasComponent && $store.currentPreviewItem}
+    <iframe
+      style="height: 100%; width: 100%"
+      title="componentPreview"
+      bind:this={iframe}
+      srcdoc={iframeTemplate} />
+  {/if}
+</div>
+
+<style>
+  .component-container {
+    grid-row-start: middle;
+    grid-column-start: middle;
+    position: relative;
+    overflow: hidden;
+    margin: auto;
+    height: 100%;
+  }
+
+  .component-container iframe {
+    border: 0;
+    left: 0;
+    top: 0;
+    width: 100%;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index 3d305f1c1d..b1bda4ab4f 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -44,6 +44,7 @@ export default `<html>
         document.head.appendChild(styles)
         styles.appendChild(document.createTextNode(data.styles))
 
+        document.cookie = "budibase:appid=" + data.appId
         window["##BUDIBASE_FRONTEND_DEFINITION##"] = data.frontendDefinition;
         if (clientModule) {
           clientModule.loadBudibase({ window, localStorage })
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index bfe5507256..bcebb4d2d4 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -13,7 +13,6 @@
   import CodeEditor from "./CodeEditor.svelte"
   import LayoutEditor from "./LayoutEditor.svelte"
   import EventsEditor from "./EventsEditor"
-
   import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -37,26 +36,11 @@
       //use for getting controls for each component property
       c => c._component === componentInstance._component
     ) || {}
-  
+
   let panelDefinition = {}
 
-  $: {
-    if(componentPropDefinition.properties) {
-      if(selectedCategory.value === "design") {
-        panelDefinition = componentPropDefinition.properties["design"]
-      }else{
-        let panelDef = componentPropDefinition.properties["settings"]
-        if($store.currentFrontEndType === "page" && $store.currentView !== "component") {
-          panelDefinition = [...page,...panelDef]
-        }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
-          panelDefinition = [...screen, ...panelDef]
-        }else {
-          panelDefinition = panelDef
-        }
-      }
-    }
-  }
-
+  $: panelDefinition = componentPropDefinition.properties && 
+      componentPropDefinition.properties[selectedCategory.value]
 
   const onStyleChanged = store.setComponentStyle
   const onPropChanged = store.setComponentProp
@@ -102,7 +86,9 @@
         {componentInstance}
         {componentDefinition}
         {panelDefinition}
-        onChange={onPropChanged} />
+        onChange={onPropChanged}
+        onScreenPropChange={store.setPageOrScreenProp}
+        screenOrPageInstance={$store.currentView !== "component" && $store.currentPreviewItem} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
     {/if}
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 4a87c4ac8a..5a78ef7121 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -9,11 +9,11 @@
 
   const pages = [
     {
-      title: "Main",
+      title: "Private",
       id: "main",
     },
     {
-      title: "Login",
+      title: "Public",
       id: "unauthenticated",
     },
   ]
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 99e704d1d9..17e4fe5e71 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -2,20 +2,60 @@
   import PropertyControl from "./PropertyControl.svelte"
   import InputGroup from "../common/Inputs/InputGroup.svelte"
   import Colorpicker from "../common/Colorpicker.svelte"
+  import { goto } from "@sveltech/routify"
   import { excludeProps } from "./propertyCategories.js"
+  import Input from "../common/Input.svelte"
 
   export let panelDefinition = []
   export let componentDefinition = {}
   export let componentInstance = {}
   export let onChange = () => {}
+  export let onScreenPropChange = () => {}
+  export let screenOrPageInstance
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
 
   function handleChange(key, data) {
     data.target ? onChange(key, data.target.value) : onChange(key, data)
   }
+
+  function handleScreenPropChange (name, value) {
+    onScreenPropChange(name,value)
+    if(!isPage && name === "name") {
+      // screen name is changed... change URL
+      $goto(`./:page/${value}`)
+    }
+  }
+
+  const screenDefinition = [
+    { key: "name", label: "Name", control: Input },
+    { key: "description", label: "Description", control: Input },
+    { key: "route", label: "Route", control: Input },
+  ]
+
+  const pageDefinition = [
+    { key: "title", label: "Title", control: Input },
+    { key: "favicon", label: "Favicon", control: Input },
+  ]
+
+  $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
+  $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
+
 </script>
 
+{#if screenOrPageInstance}
+  {#each screenOrPageDefinition as def}
+    <PropertyControl
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={screenOrPageInstance[def.key]}
+        onChange={handleScreenPropChange}
+        props={{ ...excludeProps(def, ['control', 'label']) }} />
+  {/each}
+  <hr/>
+{/if}
+
 {#if panelDefinition && panelDefinition.length > 0}
   {#each panelDefinition as definition}
     {#if propExistsOnComponentDef(definition.key)}
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 38ef0558e4..c0485304ce 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -12,8 +12,9 @@ export const layout = [
     label: "Display",
     key: "display",
     control: OptionSelect,
-    initialValue: "Flex",
+    initialValue: "",
     options: [
+      { label: "", value: "" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -39,6 +40,7 @@ export const layout = [
     control: OptionSelect,
     initialValue: "Flex Start",
     options: [
+      { label: "", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -317,19 +319,31 @@ export const border = [
   {
     label: "Radius",
     key: "border-radius",
-    control: Input,
-    width: "48px",
-    placeholder: "px",
-    textAlign: "center",
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "0" },
+      { label: "small", value: "0.125rem" },
+      { label: "Medium", value: "0.25rem;" },
+      { label: "Large", value: "0.375rem" },
+      { label: "Extra large", value: "0.5rem" },
+      { label: "Full", value: "5678px" },
+    ],
   },
   {
     label: "Width",
     key: "border-width",
-    control: Input,
-    width: "48px",
-    placeholder: "px",
-    textAlign: "center",
-  }, //custom
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "0" },
+      { label: "Extra small", value: "0.5px" },
+      { label: "Small", value: "1px" },
+      { label: "Medium", value: "2px" },
+      { label: "Large", value: "4px" },
+      { label: "Extra large", value: "8px" },
+    ],
+  },
   {
     label: "Color",
     key: "border-color",
@@ -339,6 +353,7 @@ export const border = [
     label: "Style",
     key: "border-style",
     control: OptionSelect,
+    defaultValue: "None",
     options: [
       "none",
       "hidden",
@@ -365,17 +380,50 @@ export const effects = [
   },
   {
     label: "Rotate",
-    key: "transform",
-    control: Input,
-    width: "48px",
-    textAlign: "center",
-    placeholder: "deg",
+    key: "transform-rotate",
+    control: OptionSelect,
+    defaultValue: "0",
+    options: [
+      "0",
+      "45deg",
+      "90deg",
+      "90deg",
+      "135deg",
+      "180deg",
+      "225deg",
+      "270deg",
+      "315dev",
+    ],
   }, //needs special control
   {
     label: "Shadow",
     key: "box-shadow",
-    control: InputGroup,
-    meta: [{ placeholder: "X" }, { placeholder: "Y" }, { placeholder: "B" }],
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
+      {
+        label: "Small",
+        value:
+          "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+      },
+      {
+        label: "Medium",
+        value:
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+      },
+      {
+        label: "Large",
+        value:
+          "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+      },
+      {
+        label: "Extra large",
+        value:
+          "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+      },
+    ],
   },
 ]
 
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index afd3a06694..7315e09736 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -11,6 +11,18 @@ export default {
       name: "Basic",
       isCategory: true,
       children: [
+        {
+          _component: "@budibase/standard-components/embed",
+          icon: "ri-code-line",
+          name: "Embed",
+          description: "Embed content from 3rd party sources",
+          properties: {
+            design: {
+              ...all,
+            },
+            settings: [{ label: "Embed", key: "embed", control: Input }],
+          },
+        },
         {
           _component: "@budibase/standard-components/container",
           name: "Container",
diff --git a/packages/client/src/api/index.js b/packages/client/src/api/index.js
index f019897494..373ac1809e 100644
--- a/packages/client/src/api/index.js
+++ b/packages/client/src/api/index.js
@@ -1,9 +1,9 @@
 import { authenticate } from "./authenticate"
 import { triggerWorkflow } from "./workflow"
 
-export const createApi = ({ rootPath = "", setState, getState }) => {
+export const createApi = ({ setState, getState }) => {
   const apiCall = method => async ({ url, body }) => {
-    const response = await fetch(`${rootPath}${url}`, {
+    const response = await fetch(url, {
       method: method,
       headers: {
         "Content-Type": "application/json",
@@ -45,7 +45,6 @@ export const createApi = ({ rootPath = "", setState, getState }) => {
   const isSuccess = obj => !obj || !obj[ERROR_MEMBER]
 
   const apiOpts = {
-    rootPath,
     setState,
     getState,
     isSuccess,
diff --git a/packages/client/src/createApp.js b/packages/client/src/createApp.js
index a80c1009c7..a8874960e0 100644
--- a/packages/client/src/createApp.js
+++ b/packages/client/src/createApp.js
@@ -2,6 +2,7 @@ import { attachChildren } from "./render/attachChildren"
 import { createTreeNode } from "./render/prepareRenderComponent"
 import { screenRouter } from "./render/screenRouter"
 import { createStateManager } from "./state/stateManager"
+import { getAppId } from "./render/getAppId"
 
 export const createApp = ({
   componentLibraries,
@@ -15,11 +16,9 @@ export const createApp = ({
   const onScreenSlotRendered = screenSlotNode => {
     const onScreenSelected = (screen, url) => {
       const stateManager = createStateManager({
-        frontendDefinition,
         componentLibraries,
         onScreenSlotRendered: () => {},
         routeTo,
-        appRootPath: frontendDefinition.appRootPath,
       })
       const getAttachChildrenParams = attachChildrenParams(stateManager)
       screenSlotNode.props._children = [screen.props]
@@ -36,12 +35,8 @@ export const createApp = ({
     routeTo = screenRouter({
       screens: frontendDefinition.screens,
       onScreenSelected,
-      appRootPath: frontendDefinition.appRootPath,
     })
-    const fallbackPath = window.location.pathname.replace(
-      frontendDefinition.appRootPath,
-      ""
-    )
+    const fallbackPath = window.location.pathname.replace(getAppId(), "")
     routeTo(currentUrl || fallbackPath)
   }
 
@@ -59,10 +54,8 @@ export const createApp = ({
 
   let rootTreeNode
   const pageStateManager = createStateManager({
-    frontendDefinition,
     componentLibraries,
     onScreenSlotRendered,
-    appRootPath: frontendDefinition.appRootPath,
     // seems weird, but the routeTo variable may not be available at this point
     routeTo: url => routeTo(url),
   })
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 95f722d445..a54ad79420 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -1,5 +1,6 @@
 import { createApp } from "./createApp"
 import { builtins, builtinLibName } from "./render/builtinComponents"
+import { getAppId } from "./render/getAppId"
 
 /**
  * create a web application from static budibase definition files.
@@ -8,7 +9,7 @@ import { builtins, builtinLibName } from "./render/builtinComponents"
 export const loadBudibase = async opts => {
   const _window = (opts && opts.window) || window
   // const _localStorage = (opts && opts.localStorage) || localStorage
-
+  const appId = getAppId()
   const frontendDefinition = _window["##BUDIBASE_FRONTEND_DEFINITION##"]
 
   const user = {}
@@ -20,9 +21,7 @@ export const loadBudibase = async opts => {
   for (let library of libraries) {
     // fetch the JavaScript for the component libraries from the server
     componentLibraryModules[library] = await import(
-      `/${frontendDefinition.appId}/componentlibrary?library=${encodeURI(
-        library
-      )}`
+      `/componentlibrary?library=${encodeURI(library)}`
     )
   }
 
@@ -42,7 +41,7 @@ export const loadBudibase = async opts => {
   })
 
   const route = _window.location
-    ? _window.location.pathname.replace(frontendDefinition.appRootPath, "")
+    ? _window.location.pathname.replace(`${appId}/`, "").replace(appId, "")
     : ""
 
   initialisePage(frontendDefinition.page, _window.document.body, route)
diff --git a/packages/client/src/render/getAppId.js b/packages/client/src/render/getAppId.js
new file mode 100644
index 0000000000..09a1f1b54f
--- /dev/null
+++ b/packages/client/src/render/getAppId.js
@@ -0,0 +1,5 @@
+export const getAppId = () =>
+  document.cookie
+    .split(";")
+    .find(c => c.trim().startsWith("budibase:appid"))
+    .split("=")[1]
diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index 64319102f8..8bff4950ca 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -1,11 +1,19 @@
 import regexparam from "regexparam"
 import { routerStore } from "../state/store"
+import { getAppId } from "./getAppId"
 
-export const screenRouter = ({ screens, onScreenSelected, appRootPath }) => {
+export const screenRouter = ({ screens, onScreenSelected }) => {
   const makeRootedPath = url => {
-    if (appRootPath) {
-      if (url) return `${appRootPath}${url.startsWith("/") ? "" : "/"}${url}`
-      return appRootPath
+    if (
+      window.location.hostname === "localhost" ||
+      window.location.hostname === "127.0.0.1"
+    ) {
+      const appId = getAppId()
+      if (url) {
+        if (url.startsWith(appId)) return url
+        return `/${appId}${url.startsWith("/") ? "" : "/"}${url}`
+      }
+      return appId
     }
     return url
   }
diff --git a/packages/client/src/state/bbComponentApi.js b/packages/client/src/state/bbComponentApi.js
index 7366a90f5c..4452b4839e 100644
--- a/packages/client/src/state/bbComponentApi.js
+++ b/packages/client/src/state/bbComponentApi.js
@@ -6,21 +6,9 @@ export const trimSlash = str => str.replace(/^\/+|\/+$/g, "")
 
 export const bbFactory = ({
   store,
-  frontendDefinition,
   componentLibraries,
   onScreenSlotRendered,
 }) => {
-  const relativeUrl = url => {
-    if (!frontendDefinition.appRootPath) return url
-    if (
-      url.startsWith("http:") ||
-      url.startsWith("https:") ||
-      url.startsWith("./")
-    )
-      return url
-
-    return frontendDefinition.appRootPath + "/" + trimSlash(url)
-  }
 
   const apiCall = method => (url, body) =>
     fetch(url, {
@@ -30,6 +18,7 @@ export const bbFactory = ({
         "x-user-agent": "Budibase Builder",
       },
       body: body && JSON.stringify(body),
+      credentials: "same-origin",
     })
 
   const api = {
@@ -63,7 +52,6 @@ export const bbFactory = ({
       getContext: getContext(treeNode),
       setContext: setContext(treeNode),
       store: store,
-      relativeUrl,
       api,
       parent,
     }
diff --git a/packages/client/src/state/eventHandlers.js b/packages/client/src/state/eventHandlers.js
index b013956dd4..cab825c24b 100644
--- a/packages/client/src/state/eventHandlers.js
+++ b/packages/client/src/state/eventHandlers.js
@@ -6,14 +6,13 @@ import { createApi } from "../api"
 
 export const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType"
 
-export const eventHandlers = (rootPath, routeTo) => {
+export const eventHandlers = routeTo => {
   const handler = (parameters, execute) => ({
     execute,
     parameters,
   })
 
   const api = createApi({
-    rootPath,
     setState,
     getState: (path, fallback) => getState(path, fallback),
   })
diff --git a/packages/client/src/state/stateManager.js b/packages/client/src/state/stateManager.js
index 8e777ca4b9..5c5f198956 100644
--- a/packages/client/src/state/stateManager.js
+++ b/packages/client/src/state/stateManager.js
@@ -21,13 +21,11 @@ const isMetaProp = propName =>
   propName === "_styles"
 
 export const createStateManager = ({
-  appRootPath,
-  frontendDefinition,
   componentLibraries,
   onScreenSlotRendered,
   routeTo,
 }) => {
-  let handlerTypes = eventHandlers(appRootPath, routeTo)
+  let handlerTypes = eventHandlers(routeTo)
   let currentState
 
   const getCurrentState = () => currentState
@@ -35,7 +33,6 @@ export const createStateManager = ({
   const bb = bbFactory({
     store: appStore,
     getCurrentState,
-    frontendDefinition,
     componentLibraries,
     onScreenSlotRendered,
   })
diff --git a/packages/client/tests/testAppDef.js b/packages/client/tests/testAppDef.js
index c02c18a3b2..e1e41c60c5 100644
--- a/packages/client/tests/testAppDef.js
+++ b/packages/client/tests/testAppDef.js
@@ -1,10 +1,9 @@
 import { JSDOM } from "jsdom"
 import { loadBudibase } from "../src/index"
 
-export const load = async (page, screens, url, appRootPath) => {
+export const load = async (page, screens, url) => {
   screens = screens || []
   url = url || "/"
-  appRootPath = appRootPath || ""
   const dom = new JSDOM("<!DOCTYPE html><html><body></body><html>", {
     url: `http://test${url}`,
   })
@@ -13,7 +12,7 @@ export const load = async (page, screens, url, appRootPath) => {
     autoAssignIds(s.props)
   }
   setAppDef(dom.window, page, screens)
-  addWindowGlobals(dom.window, page, screens, appRootPath, {
+  addWindowGlobals(dom.window, page, screens, {
     hierarchy: {},
     actions: [],
     triggers: [],
@@ -27,11 +26,10 @@ export const load = async (page, screens, url, appRootPath) => {
   return { dom, app }
 }
 
-const addWindowGlobals = (window, page, screens, appRootPath) => {
+const addWindowGlobals = (window, page, screens) => {
   window["##BUDIBASE_FRONTEND_DEFINITION##"] = {
     page,
     screens,
-    appRootPath,
   }
 }
 
@@ -88,7 +86,6 @@ const setAppDef = (window, page, screens) => {
     componentLibraries: [],
     page,
     screens,
-    appRootPath: "",
   }
 }
 
diff --git a/packages/materialdesign-components/src/Test/createApp.js b/packages/materialdesign-components/src/Test/createApp.js
index 96106635b7..0bd3098688 100644
--- a/packages/materialdesign-components/src/Test/createApp.js
+++ b/packages/materialdesign-components/src/Test/createApp.js
@@ -14,12 +14,6 @@ export default async () => {
   componentLibraries["@budibase/standard-components"] = standardcomponents
   const appDef = { hierarchy: {}, actions: {} }
   const user = { name: "yeo", permissions: [] }
-  const { initialisePage } = createApp(
-    componentLibraries,
-    { appRootPath: "" },
-    appDef,
-    user,
-    {}
-  )
+  const { initialisePage } = createApp(componentLibraries, {}, appDef, user, {})
   return initialisePage
 }
diff --git a/packages/server/package.json b/packages/server/package.json
index 0888ef2ae4..49a5626f6f 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -25,7 +25,7 @@
   "scripts": {
     "test": "jest routes --runInBand",
     "test:integration": "jest workflow --runInBand",
-    "test:watch": "jest -w",
+    "test:watch": "jest --watch",
     "initialise": "node ../cli/bin/budi init -b local -q",
     "budi": "node ../cli/bin/budi",
     "dev:builder": "nodemon ../cli/bin/budi run",
diff --git a/packages/server/src/api/controllers/auth.js b/packages/server/src/api/controllers/auth.js
index 5ec3aea617..6ca6d7edac 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -4,25 +4,27 @@ const ClientDb = require("../../db/clientDb")
 const bcrypt = require("../../utilities/bcrypt")
 
 exports.authenticate = async ctx => {
+  if (!ctx.appId) ctx.throw(400, "No appId")
+
   const { username, password } = ctx.request.body
 
   if (!username) ctx.throw(400, "Username Required.")
   if (!password) ctx.throw(400, "Password Required")
 
   const masterDb = new CouchDB("clientAppLookup")
-  const { clientId } = await masterDb.get(ctx.params.appId)
+
+  const { clientId } = await masterDb.get(ctx.appId)
 
   if (!clientId) {
     ctx.throw(400, "ClientId not suplied")
   }
   // find the instance that the user is associated with
   const db = new CouchDB(ClientDb.name(clientId))
-  const appId = ctx.params.appId
-  const app = await db.get(appId)
+  const app = await db.get(ctx.appId)
   const instanceId = app.userInstanceMap[username]
 
   if (!instanceId)
-    ctx.throw(500, "User is not associated with an instance of app", appId)
+    ctx.throw(500, "User is not associated with an instance of app", ctx.appId)
 
   // Check the user exists in the instance DB by username
   const instanceDb = new CouchDB(instanceId)
@@ -41,7 +43,7 @@ exports.authenticate = async ctx => {
     const payload = {
       userId: dbUser._id,
       accessLevelId: dbUser.accessLevelId,
-      instanceId: instanceId,
+      instanceId,
     }
 
     const token = jwt.sign(payload, ctx.config.jwtSecret, {
diff --git a/packages/server/src/api/controllers/model.js b/packages/server/src/api/controllers/model.js
index 9d06c7a413..650342b33c 100644
--- a/packages/server/src/api/controllers/model.js
+++ b/packages/server/src/api/controllers/model.js
@@ -27,6 +27,23 @@ exports.create = async function(ctx) {
   const result = await db.post(newModel)
   newModel._rev = result.rev
 
+  const { schema } = ctx.request.body
+  for (let key in schema) {
+    // model has a linked record
+    if (schema[key].type === "link") {
+      // create the link field in the other model
+      const linkedModel = await db.get(schema[key].modelId)
+      linkedModel.schema[newModel.name] = {
+        type: "link",
+        modelId: newModel._id,
+        constraints: {
+          type: "array",
+        },
+      }
+      await db.put(linkedModel)
+    }
+  }
+
   const designDoc = await db.get("_design/database")
   designDoc.views = {
     ...designDoc.views,
@@ -50,7 +67,10 @@ exports.update = async function() {}
 exports.destroy = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
 
-  await db.remove(ctx.params.modelId, ctx.params.revId)
+  const modelToDelete = await db.get(ctx.params.modelId)
+
+  await db.remove(modelToDelete)
+
   const modelViewId = `all_${ctx.params.modelId}`
 
   // Delete all records for that model
@@ -59,6 +79,16 @@ exports.destroy = async function(ctx) {
     records.rows.map(record => ({ id: record.id, _deleted: true }))
   )
 
+  // Delete linked record fields in dependent models
+  for (let key in modelToDelete.schema) {
+    const { type, modelId } = modelToDelete.schema[key]
+    if (type === "link") {
+      const linkedModel = await db.get(modelId)
+      delete linkedModel.schema[modelToDelete.name]
+      await db.put(linkedModel)
+    }
+  }
+
   // delete the "all" view
   const designDoc = await db.get("_design/database")
   delete designDoc.views[modelViewId]
diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js
index 5fab413f04..cf8eb27606 100644
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@@ -61,7 +61,7 @@ exports.fetchView = async function(ctx) {
   ctx.body = response.rows.map(row => row.doc)
 }
 
-exports.fetchModel = async function(ctx) {
+exports.fetchModelRecords = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
   const response = await db.query(`database/all_${ctx.params.modelId}`, {
     include_docs: true,
@@ -69,6 +69,15 @@ exports.fetchModel = async function(ctx) {
   ctx.body = response.rows.map(row => row.doc)
 }
 
+exports.search = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const response = await db.allDocs({
+    include_docs: true,
+    ...ctx.request.body,
+  })
+  ctx.body = response.rows.map(row => row.doc)
+}
+
 exports.find = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
   const record = await db.get(ctx.params.recordId)
diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index 557a9efe7a..d2d2596c0a 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -20,6 +20,27 @@ exports.serveApp = async function(ctx) {
     "public",
     ctx.isAuthenticated ? "main" : "unauthenticated"
   )
+  // only set the appId cookie for /appId .. we COULD check for valid appIds
+  // but would like to avoid that DB hit
+  if (looksLikeAppId(ctx.params.appId)) {
+    ctx.cookies.set("budibase:appid", ctx.params.appId, {
+      path: "/",
+      httpOnly: false,
+      expires: new Date(2099, 1, 1),
+    })
+  }
+
+  await send(ctx, ctx.file || "index.html", { root: ctx.devPath || appPath })
+}
+
+exports.serveAppAsset = async function(ctx) {
+  // default to homedir
+  const appPath = resolve(
+    budibaseAppsDir(),
+    ctx.appId,
+    "public",
+    ctx.isAuthenticated ? "main" : "unauthenticated"
+  )
 
   await send(ctx, ctx.file, { root: ctx.devPath || appPath })
 }
@@ -28,7 +49,7 @@ exports.serveComponentLibrary = async function(ctx) {
   // default to homedir
   let componentLibraryPath = resolve(
     budibaseAppsDir(),
-    ctx.params.appId,
+    ctx.appId,
     "node_modules",
     decodeURI(ctx.query.library),
     "dist"
@@ -44,3 +65,10 @@ exports.serveComponentLibrary = async function(ctx) {
 
   await send(ctx, "/index.js", { root: componentLibraryPath })
 }
+
+const looksLikeAppId = appId => {
+  const allowedChars = "0123456789abcdef".split("")
+  return (
+    appId.length === 32 && !appId.split("").some(c => allowedChars.includes(c))
+  )
+}
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 990714fdc7..8c69407736 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -10,6 +10,7 @@ const {
   instanceRoutes,
   clientRoutes,
   applicationRoutes,
+  recordRoutes,
   modelRoutes,
   viewRoutes,
   staticRoutes,
@@ -59,6 +60,11 @@ router.use(async (ctx, next) => {
   }
 })
 
+router.use(async (ctx, next) => {
+  ctx.appId = ctx.cookies.get("budibase:appid")
+  await next()
+})
+
 router.use(authRoutes.routes())
 router.use(authRoutes.allowedMethods())
 
@@ -69,6 +75,9 @@ router.use(viewRoutes.allowedMethods())
 router.use(modelRoutes.routes())
 router.use(modelRoutes.allowedMethods())
 
+router.use(recordRoutes.routes())
+router.use(recordRoutes.allowedMethods())
+
 router.use(userRoutes.routes())
 router.use(userRoutes.allowedMethods())
 
diff --git a/packages/server/src/api/routes/auth.js b/packages/server/src/api/routes/auth.js
index fa95a3a5e6..b4b68e8929 100644
--- a/packages/server/src/api/routes/auth.js
+++ b/packages/server/src/api/routes/auth.js
@@ -3,6 +3,6 @@ const controller = require("../controllers/auth")
 
 const router = Router()
 
-router.post("/:appId/api/authenticate", controller.authenticate)
+router.post("/api/authenticate", controller.authenticate)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/index.js b/packages/server/src/api/routes/index.js
index c515d5f437..b50fee788a 100644
--- a/packages/server/src/api/routes/index.js
+++ b/packages/server/src/api/routes/index.js
@@ -5,6 +5,7 @@ const instanceRoutes = require("./instance")
 const clientRoutes = require("./client")
 const applicationRoutes = require("./application")
 const modelRoutes = require("./model")
+const recordRoutes = require("./record")
 const viewRoutes = require("./view")
 const staticRoutes = require("./static")
 const componentRoutes = require("./component")
@@ -18,6 +19,7 @@ module.exports = {
   instanceRoutes,
   clientRoutes,
   applicationRoutes,
+  recordRoutes,
   modelRoutes,
   viewRoutes,
   staticRoutes,
diff --git a/packages/server/src/api/routes/model.js b/packages/server/src/api/routes/model.js
index 388f4618bd..f1ec46dbe5 100644
--- a/packages/server/src/api/routes/model.js
+++ b/packages/server/src/api/routes/model.js
@@ -1,46 +1,10 @@
 const Router = require("@koa/router")
 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 { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
-// records
-
-router
-  .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
-  )
-  .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),
-    recordController.destroy
-  )
-
-// models
-
 router
   .get("/api/:instanceId/models", authorized(BUILDER), modelController.fetch)
   .get("/api/:instanceId/models/:id", authorized(BUILDER), modelController.find)
diff --git a/packages/server/src/api/routes/record.js b/packages/server/src/api/routes/record.js
new file mode 100644
index 0000000000..d555d3d8c8
--- /dev/null
+++ b/packages/server/src/api/routes/record.js
@@ -0,0 +1,36 @@
+const Router = require("@koa/router")
+const recordController = require("../controllers/record")
+const authorized = require("../../middleware/authorized")
+const { READ_MODEL, WRITE_MODEL } = require("../../utilities/accessLevels")
+
+const router = Router()
+
+router
+  .get(
+    "/api/:instanceId/:modelId/records",
+    authorized(READ_MODEL, ctx => ctx.params.modelId),
+    recordController.fetchModelRecords
+  )
+  .get(
+    "/api/:instanceId/:modelId/records/:recordId",
+    authorized(READ_MODEL, ctx => ctx.params.modelId),
+    recordController.find
+  )
+  .post("/api/:instanceId/records/search", recordController.search)
+  .post(
+    "/api/:instanceId/:modelId/records",
+    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),
+    recordController.destroy
+  )
+
+module.exports = router
diff --git a/packages/server/src/api/routes/static.js b/packages/server/src/api/routes/static.js
index 5909d31d09..6fff1996fa 100644
--- a/packages/server/src/api/routes/static.js
+++ b/packages/server/src/api/routes/static.js
@@ -21,7 +21,8 @@ if (env.NODE_ENV !== "production") {
 }
 
 router
-  .get("/:appId/componentlibrary", controller.serveComponentLibrary)
-  .get("/:appId/:file*", controller.serveApp)
+  .get("/componentlibrary", controller.serveComponentLibrary)
+  .get("/assets/:file*", controller.serveAppAsset)
+  .get("/:appId/:path*", controller.serveApp)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index 6029e080cc..495b841b10 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -253,3 +253,7 @@ exports.insertDocument = async (databaseId, document) => {
 exports.destroyDocument = async (databaseId, documentId) => {
   return await new CouchDB(databaseId).destroy(documentId)
 }
+
+exports.getDocument = async (databaseId, documentId) => {
+  return await new CouchDB(databaseId).get(documentId)
+}
diff --git a/packages/server/src/api/routes/tests/model.spec.js b/packages/server/src/api/routes/tests/model.spec.js
index 65a44b677a..7134245fb3 100644
--- a/packages/server/src/api/routes/tests/model.spec.js
+++ b/packages/server/src/api/routes/tests/model.spec.js
@@ -3,9 +3,10 @@ const {
   createModel, 
   supertest, 
   createClientDatabase, 
-  createApplication ,
+  createApplication,
   defaultHeaders,
-  builderEndpointShouldBlockNormalUsers
+  builderEndpointShouldBlockNormalUsers,
+  getDocument
 } = require("./couchTestUtils")
 
 describe("/models", () => {
@@ -97,7 +98,6 @@ describe("/models", () => {
           instanceId: instance._id,
         })
       })
-
     });
 
   describe("destroy", () => {
@@ -108,7 +108,11 @@ describe("/models", () => {
       testModel = await createModel(request, instance._id, testModel)
     });
 
-    it("returns a success response when a model is deleted.", done => {
+    afterEach(() => {
+      delete testModel._rev
+    })
+
+    it("returns a success response when a model is deleted.", async done => {
       request
         .delete(`/api/${instance._id}/models/${testModel._id}/${testModel._rev}`)
         .set(defaultHeaders)
@@ -120,6 +124,41 @@ describe("/models", () => {
         });
       })
 
+    it("deletes linked references to the model after deletion", async done => {
+      const linkedModel = await createModel(request, instance._id, {
+        name: "LinkedModel",
+        type: "model",
+        key: "name",
+        schema: {
+          name: {
+            type: "text",
+            constraints: {
+              type: "string",
+            },
+          },
+          TestModel: {
+            type: "link",
+            modelId: testModel._id,
+            constraints: {
+              type: "array"
+            }
+          }
+        },
+      })
+
+      request
+        .delete(`/api/${instance._id}/models/${testModel._id}/${testModel._rev}`)
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+        .end(async (_, res) => {
+            expect(res.res.statusMessage).toEqual(`Model ${testModel._id} deleted.`);            
+            const dependentModel = await getDocument(instance._id, linkedModel._id)
+            expect(dependentModel.schema.TestModel).not.toBeDefined();
+            done();
+        });
+      })
+
     it("should apply authorization to endpoint", async () => {
       await builderEndpointShouldBlockNormalUsers({
         request,
diff --git a/packages/server/src/api/routes/tests/record.spec.js b/packages/server/src/api/routes/tests/record.spec.js
index 2c8c542715..22ac67ecdc 100644
--- a/packages/server/src/api/routes/tests/record.spec.js
+++ b/packages/server/src/api/routes/tests/record.spec.js
@@ -110,6 +110,30 @@ describe("/records", () => {
       expect(res.body.find(r => r.name === record.name)).toBeDefined()
     })
 
+    it("lists records when queried by their ID", async () => {
+      const newRecord = {
+        modelId: model._id,
+        name: "Second Contact",
+        status: "new"
+      }
+      const record = await createRecord()
+      const secondRecord = await createRecord(newRecord)
+
+      const recordIds = [record.body._id, secondRecord.body._id]
+
+      const res = await request
+        .post(`/api/${instance._id}/records/search`)
+        .set(defaultHeaders)
+        .send({
+          keys: recordIds
+        })
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      expect(res.body.length).toBe(2)
+      expect(res.body.map(response => response._id)).toEqual(expect.arrayContaining(recordIds))
+    })
+
     it("load should return 404 when record does not exist", async () => {
       await createRecord()
       await request
diff --git a/packages/server/src/utilities/builder/buildPage.js b/packages/server/src/utilities/builder/buildPage.js
index 3d44cb8072..ea0c9cce25 100644
--- a/packages/server/src/utilities/builder/buildPage.js
+++ b/packages/server/src/utilities/builder/buildPage.js
@@ -45,18 +45,16 @@ const copyClientLib = async (appPath, pageName) => {
 
 const buildIndexHtml = async (config, appId, pageName, appPath, pkg) => {
   const appPublicPath = publicPath(appPath, pageName)
-  const appRootPath = rootPath(config, appId)
 
   const stylesheetUrl = s =>
     s.startsWith("http") ? s : `/${rootPath(config, appId)}/${s}`
 
   const templateObj = {
     title: pkg.page.title || "Budibase App",
-    favicon: `${appRootPath}/${pkg.page.favicon || "/_shared/favicon.png"}`,
+    favicon: `${pkg.page.favicon || "/_shared/favicon.png"}`,
     stylesheets: (pkg.page.stylesheets || []).map(stylesheetUrl),
     screenStyles: pkg.screens.filter(s => s._css).map(s => s._css),
     pageStyle: pkg.page._css,
-    appRootPath,
   }
 
   const indexHtmlTemplate = await readFile(
@@ -74,7 +72,6 @@ const buildIndexHtml = async (config, appId, pageName, appPath, pkg) => {
 const buildFrontendAppDefinition = async (config, appId, pageName, pkg) => {
   const appPath = appPackageFolder(config, appId)
   const appPublicPath = publicPath(appPath, pageName)
-  const appRootPath = rootPath(config, appId)
 
   const filename = join(appPublicPath, "clientFrontendDefinition.js")
 
@@ -89,7 +86,6 @@ const buildFrontendAppDefinition = async (config, appId, pageName, pkg) => {
   }
 
   const clientUiDefinition = JSON.stringify({
-    appRootPath: appRootPath,
     page: pkg.page,
     screens: pkg.screens,
     libraries: [
diff --git a/packages/server/src/utilities/builder/index.template.html b/packages/server/src/utilities/builder/index.template.html
index 2f1f7ed87c..a21219de9b 100644
--- a/packages/server/src/utilities/builder/index.template.html
+++ b/packages/server/src/utilities/builder/index.template.html
@@ -24,15 +24,15 @@
     {{ /each }}
 
     {{ each(options.screenStyles) }}
-    <link rel='stylesheet' href='{{ appRootPath }}{{ @this }}'>
+    <link rel='stylesheet' href='/assets{{ @this }}'>
     {{ /each }}
 
     {{ if(options.pageStyle) }}
-    <link rel='stylesheet' href='{{ appRootPath }}{{ pageStyle }}'>
+    <link rel='stylesheet' href='/assets{{ pageStyle }}'>
     {{ /if }}
 
-    <script src='{{ appRootPath }}/clientFrontendDefinition.js'></script>
-    <script src='{{ appRootPath }}/budibase-client.js'></script>
+    <script src='/assets/clientFrontendDefinition.js'></script>
+    <script src='/assets/budibase-client.js'></script>
 
 </head>
 
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index a562650b85..c4c0246672 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -6,6 +6,13 @@
 			"component": "button"
 		}
 	},
+	"embed": {
+		"name": "Embed",
+		"description": "Embed stuff",
+		"props": {
+			"embed": "string"
+		}
+	},
 	"Navigation": {
 		"name": "Navigation",
 		"description": "A basic header navigation component",
diff --git a/packages/standard-components/public/clientAppDefinition.js b/packages/standard-components/public/clientAppDefinition.js
index be67dcf1a8..f77f59ec03 100644
--- a/packages/standard-components/public/clientAppDefinition.js
+++ b/packages/standard-components/public/clientAppDefinition.js
@@ -98,6 +98,5 @@ window["##BUDIBASE_APPDEFINITION##"] = {
     nodeId: 0,
   },
   componentLibraries: ["budibase-standard-components"],
-  appRootPath: "/testApp2",
   props: {},
 }
diff --git a/packages/standard-components/src/Embed.svelte b/packages/standard-components/src/Embed.svelte
new file mode 100644
index 0000000000..2640864681
--- /dev/null
+++ b/packages/standard-components/src/Embed.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let embed
+</script>
+
+{@html embed}
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index b52cc154ea..0675c65f46 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -13,30 +13,17 @@
   let password = ""
   let loading = false
   let error = false
-  let _logo = ""
   let _buttonClass = ""
   let _inputClass = ""
 
   $: {
-    _logo = _bb.relativeUrl(logo)
     _buttonClass = buttonClass || "default-button"
     _inputClass = inputClass || "default-input"
   }
 
   const login = async () => {
     loading = true
-    const response = await fetch(_bb.relativeUrl("/api/authenticate"), {
-      body: JSON.stringify({
-        username,
-        password,
-      }),
-      headers: {
-        "Content-Type": "application/json",
-        "x-user-agent": "Budibase Builder",
-      },
-      method: "POST",
-    })
-
+    const response = await _bb.api.post("/api/authenticate", { username, password })
     if (response.status === 200) {
       const json = await response.json()
       localStorage.setItem("budibase:token", json.token)
@@ -51,9 +38,9 @@
 
 <div class="root">
   <div class="content">
-    {#if _logo}
+    {#if logo}
       <div class="logo-container">
-        <img src={_logo} alt="logo" />
+        <img src={logo} alt="logo" />
       </div>
     {/if}
 
diff --git a/packages/standard-components/src/Test/createApp.js b/packages/standard-components/src/Test/createApp.js
index 65ad4792c4..48f65c5789 100644
--- a/packages/standard-components/src/Test/createApp.js
+++ b/packages/standard-components/src/Test/createApp.js
@@ -15,7 +15,7 @@ export default async () => {
   const { initialisePage } = createApp(
     window.document,
     componentLibraries,
-    { appRootPath: "" },
+    {},
     appDef,
     user,
     {},
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 2284ab1fcb..24342066e8 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -21,3 +21,4 @@ export { default as datalist } from "./DataList.svelte"
 export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
 export { default as datamap } from "./DataMap.svelte"
+export { default as embed } from "./Embed.svelte"

From 42166e01a5cacc928143f20ee100a50b887267c0 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 12 Jun 2020 21:04:30 +0100
Subject: [PATCH 24/57] accidentally commited cypress folder

---
 packages/builder/cypress/plugins/index.js | 21 ---------------------
 1 file changed, 21 deletions(-)
 delete mode 100644 packages/builder/cypress/plugins/index.js

diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js
deleted file mode 100644
index aa9918d215..0000000000
--- a/packages/builder/cypress/plugins/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}

From f956e141b4847673247b7b1a168d9ea113239cf7 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 12 Jun 2020 21:08:00 +0100
Subject: [PATCH 25/57] fixing tests - not using new auth endpoint

---
 packages/server/src/api/routes/tests/couchTestUtils.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index 495b841b10..54a78c68a9 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -177,7 +177,8 @@ const createUserWithPermissions = async (
   const designDoc = await db.get("_design/database")
 
   const loginResult = await request
-    .post(`/${designDoc.metadata.applicationId}/api/authenticate`)
+    .post(`/api/authenticate`)
+    .set({ Cookie: `budibase:appid=${designDoc.metadata.applicationId}`})
     .send({ username, password })
 
   // returning necessary request headers

From 5b59a110a6442a77226abf9b6d0b1caa4eb24fa1 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 12 Jun 2020 21:11:39 +0100
Subject: [PATCH 26/57] lint fix

---
 packages/client/src/state/bbComponentApi.js            | 1 -
 packages/server/src/api/routes/tests/couchTestUtils.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/src/state/bbComponentApi.js b/packages/client/src/state/bbComponentApi.js
index 4452b4839e..b022ddca27 100644
--- a/packages/client/src/state/bbComponentApi.js
+++ b/packages/client/src/state/bbComponentApi.js
@@ -9,7 +9,6 @@ export const bbFactory = ({
   componentLibraries,
   onScreenSlotRendered,
 }) => {
-
   const apiCall = method => (url, body) =>
     fetch(url, {
       method: method,
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index 54a78c68a9..e21d459d3a 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -178,7 +178,7 @@ const createUserWithPermissions = async (
 
   const loginResult = await request
     .post(`/api/authenticate`)
-    .set({ Cookie: `budibase:appid=${designDoc.metadata.applicationId}`})
+    .set({ Cookie: `budibase:appid=${designDoc.metadata.applicationId}` })
     .send({ username, password })
 
   // returning necessary request headers

From 5174c3f1dc02d357ebbd2de0de87fc98a10a5661 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 12 Jun 2020 21:20:44 +0100
Subject: [PATCH 27/57] build errors from dodgy merge

---
 .../userInterface/AppPreview/CurrentItemPreview.svelte           | 1 -
 .../src/pages/[application]/workflow/[workflow]/_layout.svelte   | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 9059f4524e..f97f91df6b 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -110,7 +110,6 @@
         appId: $store.appId,
       })
     )
-    )
   }
 
   $: if (iframe)
diff --git a/packages/builder/src/pages/[application]/workflow/[workflow]/_layout.svelte b/packages/builder/src/pages/[application]/workflow/[workflow]/_layout.svelte
index f1b3bae003..a00f7b4ab0 100644
--- a/packages/builder/src/pages/[application]/workflow/[workflow]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/workflow/[workflow]/_layout.svelte
@@ -1,3 +1,4 @@
 <script>
+  import { params } from "@sveltech/routify"
   store.setCurrentPage($params.page)
 </script>

From ea3a8fd81aecea41b699b6d596f20d5c367f3b70 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Sun, 14 Jun 2020 20:30:23 +0100
Subject: [PATCH 28/57] client: fixing broken tests

---
 packages/client/package.json                |  2 +-
 packages/client/src/createApp.js            |  6 +++++-
 packages/client/src/index.js                |  4 ++--
 packages/client/src/render/getAppId.js      |  4 ++--
 packages/client/src/render/screenRouter.js  |  9 ++++----
 packages/client/tests/screenRouting.spec.js |  2 +-
 packages/client/tests/testAppDef.js         | 24 ++++++++++++++++++---
 7 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index 01b90a7bc5..acefff3770 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -15,7 +15,7 @@
         "client": "web"
       }
     },
-    "testURL": "http://jest-breaks-if-this-does-not-exist",
+    "testURL": "http://test.com",
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
       "\\.(css|less|sass|scss)$": "identity-obj-proxy"
diff --git a/packages/client/src/createApp.js b/packages/client/src/createApp.js
index a8874960e0..9e1a9ea1b1 100644
--- a/packages/client/src/createApp.js
+++ b/packages/client/src/createApp.js
@@ -35,8 +35,12 @@ export const createApp = ({
     routeTo = screenRouter({
       screens: frontendDefinition.screens,
       onScreenSelected,
+      window,
     })
-    const fallbackPath = window.location.pathname.replace(getAppId(), "")
+    const fallbackPath = window.location.pathname.replace(
+      getAppId(window.document.cookie),
+      ""
+    )
     routeTo(currentUrl || fallbackPath)
   }
 
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index a54ad79420..87813a812d 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -9,7 +9,7 @@ import { getAppId } from "./render/getAppId"
 export const loadBudibase = async opts => {
   const _window = (opts && opts.window) || window
   // const _localStorage = (opts && opts.localStorage) || localStorage
-  const appId = getAppId()
+  const appId = getAppId(_window.document.cookie)
   const frontendDefinition = _window["##BUDIBASE_FRONTEND_DEFINITION##"]
 
   const user = {}
@@ -37,7 +37,7 @@ export const loadBudibase = async opts => {
     componentLibraries: componentLibraryModules,
     frontendDefinition,
     user,
-    window,
+    window: _window,
   })
 
   const route = _window.location
diff --git a/packages/client/src/render/getAppId.js b/packages/client/src/render/getAppId.js
index 09a1f1b54f..1a8d445920 100644
--- a/packages/client/src/render/getAppId.js
+++ b/packages/client/src/render/getAppId.js
@@ -1,5 +1,5 @@
-export const getAppId = () =>
-  document.cookie
+export const getAppId = cookie =>
+  cookie
     .split(";")
     .find(c => c.trim().startsWith("budibase:appid"))
     .split("=")[1]
diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index 8bff4950ca..ae11c10949 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -2,13 +2,14 @@ import regexparam from "regexparam"
 import { routerStore } from "../state/store"
 import { getAppId } from "./getAppId"
 
-export const screenRouter = ({ screens, onScreenSelected }) => {
+export const screenRouter = ({ screens, onScreenSelected, window }) => {
   const makeRootedPath = url => {
     if (
-      window.location.hostname === "localhost" ||
-      window.location.hostname === "127.0.0.1"
+      window.location &&
+      (window.location.hostname === "localhost" ||
+        window.location.hostname === "127.0.0.1")
     ) {
-      const appId = getAppId()
+      const appId = getAppId(window.document.cookie)
       if (url) {
         if (url.startsWith(appId)) return url
         return `/${appId}${url.startsWith("/") ? "" : "/"}${url}`
diff --git a/packages/client/tests/screenRouting.spec.js b/packages/client/tests/screenRouting.spec.js
index bb4380196f..d0b2c1b4d5 100644
--- a/packages/client/tests/screenRouting.spec.js
+++ b/packages/client/tests/screenRouting.spec.js
@@ -18,7 +18,7 @@ describe("screenRouting", () => {
 
   it("should load correct screen, for initial URL, when appRootPath is something", async () => {
     const { page, screens } = pageWith3Screens()
-    const { dom } = await load(page, screens, "/testApp/screen2", "/testApp")
+    const { dom } = await load(page, screens, "/TEST_APP_ID/screen2", "localhost")
 
     const rootDiv = dom.window.document.body.children[0]
     expect(rootDiv.children.length).toBe(1)
diff --git a/packages/client/tests/testAppDef.js b/packages/client/tests/testAppDef.js
index e1e41c60c5..f75abb6556 100644
--- a/packages/client/tests/testAppDef.js
+++ b/packages/client/tests/testAppDef.js
@@ -1,12 +1,29 @@
-import { JSDOM } from "jsdom"
+import jsdom, { JSDOM } from "jsdom"
 import { loadBudibase } from "../src/index"
 
-export const load = async (page, screens, url) => {
+export const load = async (page, screens, url, host = "test.com") => {
   screens = screens || []
   url = url || "/"
+
+  const fullUrl = `http://${host}${url}`
+  const cookieJar = new jsdom.CookieJar()
+  cookieJar.setCookie(
+    `budibase:appid=TEST_APP_ID;domain=${host};path=/`,
+    fullUrl,
+    {
+      looseMode: false,
+    },
+    () => {}
+  )
+
   const dom = new JSDOM("<!DOCTYPE html><html><body></body><html>", {
-    url: `http://test${url}`,
+    url: fullUrl,
+    cookieJar,
   })
+  /*const cookie = tough.Cookie
+  cookie.key = "budibase:appid"
+  cookie.value = "TEST_APPID"*/
+
   autoAssignIds(page.props)
   for (let s of screens) {
     autoAssignIds(s.props)
@@ -27,6 +44,7 @@ export const load = async (page, screens, url) => {
 }
 
 const addWindowGlobals = (window, page, screens) => {
+  window.document.cookie = "budibase:appid=TEST_APP_ID"
   window["##BUDIBASE_FRONTEND_DEFINITION##"] = {
     page,
     screens,

From f0ee7293765ef4ddbf060ebccd3841c23fb5432f Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Sun, 14 Jun 2020 20:36:51 +0100
Subject: [PATCH 29/57] code review - static controller - test app id with
 regex

---
 packages/server/src/api/controllers/static.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index d2d2596c0a..82545d459c 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -66,9 +66,4 @@ exports.serveComponentLibrary = async function(ctx) {
   await send(ctx, "/index.js", { root: componentLibraryPath })
 }
 
-const looksLikeAppId = appId => {
-  const allowedChars = "0123456789abcdef".split("")
-  return (
-    appId.length === 32 && !appId.split("").some(c => allowedChars.includes(c))
-  )
-}
+const looksLikeAppId = appId => /^[0-9a-f]{32}$/.test(appId)

From 93031566aa7fabe814b36cd1e54cfad7a6d47a6d Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 15 Jun 2020 10:14:58 +0200
Subject: [PATCH 30/57] removes unused file

---
 config.js | 13 -------------
 1 file changed, 13 deletions(-)
 delete mode 100644 config.js

diff --git a/config.js b/config.js
deleted file mode 100644
index 7bc75c9fb2..0000000000
--- a/config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-module.exports = () => ({
-  datastore: "local",
-  datastoreConfig: {
-    rootPath: "./.data",
-  },
-  keys: ["secret1", "secret2"],
-  port: 4001,
-  latestPackagesFolder: ".",
-  extraMasterPlugins: {},
-  dev: true,
-  customizeMaster: appDefinition => appDefinition,
-  useAppRootPath: true,
-})

From 77544089ce3df6647c8448e64572133f681e939e Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 15 Jun 2020 10:41:38 +0200
Subject: [PATCH 31/57] adds ignore pattern to jest config so that it doesn't
 try to run cypress tests as unit tests

---
 packages/builder/package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 49331426b4..8456f0bfda 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,6 +39,9 @@
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!svelte).+\\.js$"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/cypress/"
     ]
   },
   "eslintConfig": {

From 4a00e2257fb0f9e86342030b074f251a34e2d04c Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 17 Jun 2020 16:46:03 +0100
Subject: [PATCH 32/57] Integrating Colorpicker with Builder

---
 .../Colorpicker/Colorpicker.svelte            |  11 +-
 .../Colorpicker/Colorpreview.svelte           | 121 ++++++++++++++----
 .../userInterface/Colorpicker/index.js        |   5 +-
 .../userInterface/Colorpicker/utils.js        |   8 +-
 .../ComponentPropertiesPanel.svelte           |   3 -
 .../userInterface/DesignView.svelte           |   9 +-
 .../userInterface/PropertyControl.svelte      |   2 +
 .../userInterface/propertyCategories.js       |  12 +-
 .../[application]/frontend/_layout.svelte     |   1 -
 9 files changed, 121 insertions(+), 51 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 8ec53d9b86..936756f403 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -22,14 +22,11 @@
   const dispatch = createEventDispatcher();
 
   onMount(() => {
-    format = getColorFormat(value);
     if (format) {
       convertAndSetHSVA()
     }
   });
 
-  const hsvaIsNull = () => [h, s, v, a].every(c => c === null);
-
   function convertAndSetHSVA() {
     let hsva = convertToHSVA(value, format);
     setHSVA(hsva);
@@ -53,17 +50,16 @@
   function setHue(hue) {
     h = hue;
     value = convertHsvaToFormat([h, s, v, a], format);    
-    dispatch("change", value)
   }
 
   function setAlpha(alpha) {
     a = alpha === "1.00" ? "1" :alpha;
     value = convertHsvaToFormat([h, s, v, a], format);    
-    dispatch("change", value)
   }
 
   function changeFormatAndConvert(f) {
     format = f;
+    console.log(f)
     value = convertHsvaToFormat([h, s, v, a], format);
   }
 
@@ -73,14 +69,16 @@
       format = f;
       value = text
       convertAndSetHSVA()
+      dispatch("change", value)
     }
   }
+
 </script>
 
 <style>
   .colorpicker-container {
     display: flex;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 400;
     flex-direction: column;
     height: 300px;
@@ -104,7 +102,6 @@
     grid-gap: 15px;
     justify-content: center;
     align-items: center;
-    /* padding: 8px; */
   }
 
   .selected-color {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
index 329d4e4adc..fa880b6292 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -1,36 +1,83 @@
 <script>
     import Colorpicker from "./Colorpicker.svelte"
-    import {createEventDispatcher} from "svelte"
+    import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
     import {buildStyle} from "./helpers.js"
     import { fade } from 'svelte/transition';
+    import {getColorFormat} from "./utils.js"
 
     export let value = "#3ec1d3ff"
-    export let format = "hexa";
+    export let open = false;
     export let width = "25px"
-    export let open = true;
-    export let fullwidth = false;
+    export let height = "25px"
 
+    let format = "hexa";
+    let dimensions = {top: 0, left: 0}
     let colorPreview = null
-    let positionSide = "top"
 
-    $: width = fullwidth ? "100%" : width
-    $: style = buildStyle({width, background: value})
-    $: colorStyle = buildStyle({[positionSide]: `28px`})
+    let previewHeight = null    
+    let previewWidth = null
+    let pickerWidth = 250
+    let pickerHeight = 300
+
+    let anchorEl = null
+    let parentNodes = [];
+    let errorMsg = null
+
+    $: previewStyle = buildStyle({width, height, background: value})
+    $: errorPreviewStyle = buildStyle({width, height})
+    $: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`})    
 
     const dispatch = createEventDispatcher()
 
+    beforeUpdate(() => {
+       format = getColorFormat(value)
+       if(!format) {
+           errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
+           console.error(errorMsg)
+       }else{
+           errorMsg = null
+       }
+    })
+
+    afterUpdate(() => {
+        if(colorPreview && colorPreview.offsetParent && !anchorEl) {
+            //Anchor relative to closest positioned ancestor element. If none, then anchor to body
+            anchorEl = colorPreview.offsetParent 
+                let curEl = colorPreview
+                let els = []
+                //Travel up dom tree from preview element to find parent elements that scroll
+                while(!anchorEl.isSameNode(curEl)) {
+                    curEl = curEl.parentNode
+                    let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow")                    
+                    if(/scroll|auto/.test(elOverflow)) {
+                        els.push(curEl)
+                    }
+                } 
+                parentNodes = els
+        }
+    })
+
+
     function openColorpicker(event) {
         if(colorPreview) {
-            const {top: spaceAbove, width, bottom} = colorPreview.getBoundingClientRect()            
-            const spaceBelow = window.innerHeight - bottom;
+            const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
+            const {innerHeight, innerWidth} = window
 
-            if (spaceAbove > spaceBelow) {
-                positionSide = "bottom"
-            } else {
-                positionSide = "top"
-            }
+            const {offsetLeft, offsetTop} = colorPreview
+            //get the scrollTop value for all scrollable parent elements 
+            let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
+
+            const spaceBelow = (innerHeight - spaceAbove) - previewHeight
+            const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop      
+            
+            //TOO: Testing and Scroll Awareness for x Scroll
+            const spaceRight = (innerWidth - spaceLeft) + previewWidth
+            const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) + pickerWidth : offsetLeft - pickerWidth
+
+            dimensions = {top, left}
+
+            open = true;        
         }
-        open = true;
     }
 
     function onColorChange(color) {
@@ -40,31 +87,48 @@
 </script>
 
 <div class="color-preview-container">
-    <div bind:this={colorPreview} class="color-preview" {style} on:click={openColorpicker}></div>
-    {#if open}
-        <div class="color-preview" style={colorStyle}>
+    {#if !errorMsg}
+        <div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker}></div>
+        {#if open}
+        <div class="picker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth} style={pickerStyle}>
             <Colorpicker on:change={onColorChange} {format} {value} />
         </div>
+        <div on:click|self={() => open = false} class="overlay"></div>
+        {/if}
+    {:else}
+        <div class="color-preview preview-error" style={errorPreviewStyle}>
+            <span>&times;</span>
+        </div>
     {/if}
 </div>
-{#if open}
-    <div on:click|self={() => open = false} class="overlay"></div>
-{/if}
+
 
 <style>
     .color-preview-container{
-        position: relative;
         display: flex;
         flex-flow: row nowrap;
         height: fit-content;
     }
 
     .color-preview {
-        position: absolute;
         flex: 1;
-        height: 25px;
-        z-index: 2;
         border-radius: 3px;
+        border: 1px solid #dedada;
+    }
+
+    .preview-error {
+        background: #cccccc;
+        color: #808080;
+        text-align: center;
+        font-size: 18px;
+        cursor: not-allowed;
+    }
+
+    .picker-container {
+        position: absolute;
+        z-index: 3;
+        width: fit-content;
+        height: fit-content;
     }
 
     .overlay{
@@ -73,6 +137,7 @@
         bottom: 0;
         left: 0;
         right: 0;
-        z-index: 1;        
+        z-index: 2;        
     }
-</style>
\ No newline at end of file
+</style>
+
diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js
index b497601edf..21e19acc9b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/index.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/index.js
@@ -1,3 +1,2 @@
-import Colorpreview from './Colorpreview.svelte';
-
-export default Colorpreview;
+import Colorpreview from "./Colorpreview.svelte"
+export default Colorpreview
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index 518e94ec9f..5e3791ae42 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -127,9 +127,11 @@ export const rgbaToHSVA = rgba => {
 };
 
 export const hslaToHSVA = ([h, s, l, a = 1]) => {
-  let hsv = _hslToHSV([h, s, l]);
-  return [...hsv, a];
-};
+  let sat = s.replace(/%/, "")
+  let lum = l.replace(/%/, "")
+  let hsv = _hslToHSV([h, sat, lum])
+  return [...hsv, a]
+}
 
 export const hsvaToHexa = (hsva, asString = false) => {
   const [r, g, b, a] = hsvaToRgba(hsva);
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index bcebb4d2d4..927f6ff13f 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -102,8 +102,6 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    overflow-x: hidden;
-    overflow-y: hidden;
     padding: 20px;
     box-sizing: border-box;
   }
@@ -121,6 +119,5 @@
     margin-top: 20px;
     flex: 1 1 auto;
     min-height: 0;
-    overflow-y: auto;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 070ba502e3..6826bddc5c 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -31,6 +31,7 @@
     <FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
   </div>
 
+<div class="positioned-wrapper">
   <div class="design-view-property-groups">
     {#if propertyGroupNames.length > 0}
       {#each propertyGroupNames as groupName}
@@ -49,6 +50,7 @@
     {/if}
   </div>
 </div>
+</div>
 
 <style>
   .design-view-container {
@@ -62,10 +64,15 @@
     flex: 0 0 50px;
   }
 
+  .positioned-wrapper{
+    position: relative;
+    display: flex;
+    min-height: 0;
+  }
+
   .design-view-property-groups {
     flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
     min-height: 0;
   }
 
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index a7ea35c014..159efdd08e 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -12,6 +12,8 @@
     if (v.target) {
       let val = props.valueKey ? v.target[props.valueKey] : v.target.value
       onChange(key, val)
+    }else if(v.detail) {
+      onChange(key, v.detail)
     } else {
       onChange(key, v)
     }
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index c0485304ce..d2043289c8 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -2,7 +2,7 @@ import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
-// import Colorpicker from "../common/Colorpicker.svelte"
+import Colorpicker from "./Colorpicker"
 /*
   TODO: Allow for default values for all properties
 */
@@ -256,8 +256,8 @@ export const typography = [
   {
     label: "Color",
     key: "color",
-    control: Input,
-    placeholder: "hex",
+    control: Colorpicker,
+    defaultValue: "#000",
   },
   {
     label: "align",
@@ -305,7 +305,8 @@ export const background = [
   {
     label: "Color",
     key: "background",
-    control: Input,
+    control: Colorpicker,
+    defaultValue: "#000",
   },
   {
     label: "Image",
@@ -347,7 +348,8 @@ export const border = [
   {
     label: "Color",
     key: "border-color",
-    control: Input,
+    control: Colorpicker,
+    defaultValue: "#000",
   },
   {
     label: "Style",
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 78ade02904..8bdb95becf 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -103,7 +103,6 @@
     background-color: var(--white);
     min-height: 0px;
     height: calc(100vh - 69px);
-    overflow-y: hidden;
   }
 
   .nav-group-header > div:nth-child(1) {

From f9448f14a19d0b56f00facd1c2664cddf88f2b62 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 17 Jun 2020 16:57:38 +0100
Subject: [PATCH 33/57] Lint fix

---
 .../userInterface/Colorpicker/drag.js         |  34 +-
 .../userInterface/Colorpicker/helpers.js      |  22 +-
 .../userInterface/Colorpicker/utils.js        | 297 +++++++++---------
 .../userInterface/Colorpicker/utils.test.js   | 150 +++++----
 4 files changed, 264 insertions(+), 239 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js
index 842d157ad2..0d7a9c2481 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/drag.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/drag.js
@@ -1,22 +1,22 @@
 export default function(node) {
-	function handleMouseDown() {
-		window.addEventListener('mousemove', handleMouseMove);
-		window.addEventListener('mouseup', handleMouseUp);
-	}
+  function handleMouseDown() {
+    window.addEventListener("mousemove", handleMouseMove)
+    window.addEventListener("mouseup", handleMouseUp)
+  }
 
-	function handleMouseMove(event) {
-		let mouseX = event.clientX;
-		node.dispatchEvent(
-			new CustomEvent('drag', {
-				detail: mouseX
-			})
-		);
-	}
+  function handleMouseMove(event) {
+    let mouseX = event.clientX
+    node.dispatchEvent(
+      new CustomEvent("drag", {
+        detail: mouseX,
+      })
+    )
+  }
 
-	function handleMouseUp() {
-		window.removeEventListener('mousedown', handleMouseDown);
-		window.removeEventListener('mousemove', handleMouseMove);
-	}
+  function handleMouseUp() {
+    window.removeEventListener("mousedown", handleMouseDown)
+    window.removeEventListener("mousemove", handleMouseMove)
+  }
 
-	node.addEventListener('mousedown', handleMouseDown);
+  node.addEventListener("mousedown", handleMouseDown)
 }
diff --git a/packages/builder/src/components/userInterface/Colorpicker/helpers.js b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
index 69f94bf208..5d9ff750af 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/helpers.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
@@ -1,14 +1,14 @@
 export const buildStyle = styles => {
-    let str = ""
-    for (let s in styles) {
-      if (styles[s]) {
-        let key = convertCamel(s)
-        str += `${key}: ${styles[s]}; `
-      }
+  let str = ""
+  for (let s in styles) {
+    if (styles[s]) {
+      let key = convertCamel(s)
+      str += `${key}: ${styles[s]}; `
     }
-    return str
   }
-  
-  export const convertCamel = str => {
-    return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
-  }
\ No newline at end of file
+  return str
+}
+
+export const convertCamel = str => {
+  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index 5e3791ae42..d49efc876e 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -1,130 +1,139 @@
 export const isValidHex = str =>
-  /^#(?:[A-F0-9]{3}$|[A-F0-9]{4}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str);
+  /^#(?:[A-F0-9]{3}$|[A-F0-9]{4}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str)
 
 const getHexaValues = hexString => {
   if (hexString.length <= 5) {
-    let hexArr = hexString.match(/[A-F0-9]/gi);
-    let t = hexArr.map(c => (c += c));
-    return t;
+    let hexArr = hexString.match(/[A-F0-9]/gi)
+    let t = hexArr.map(c => (c += c))
+    return t
   } else {
-    return hexString.match(/[A-F0-9]{2}/gi);
+    return hexString.match(/[A-F0-9]{2}/gi)
   }
-};
+}
 
 export const isValidRgb = str => {
-  const hasValidStructure = /^(?:rgba\(|rgb\()(?:[0-9,\s]|\.(?=\d))*\)$/gi.test(str);
+  const hasValidStructure = /^(?:rgba\(|rgb\()(?:[0-9,\s]|\.(?=\d))*\)$/gi.test(
+    str
+  )
   if (hasValidStructure) {
-    return testRgbaValues(str.toLowerCase());
+    return testRgbaValues(str.toLowerCase())
   }
-};
+}
 
-const findNonNumericChars = /[a-z()\s]/gi;
+const findNonNumericChars = /[a-z()\s]/gi
 
 export const getNumericValues = str =>
   str
     .replace(findNonNumericChars, "")
     .split(",")
-    .map(v => v !== "" ? v : undefined);
+    .map(v => (v !== "" ? v : undefined))
 
 export const testRgbaValues = str => {
-  const rgba = getNumericValues(str);
-  const [r, g, b, a] = rgba;
-  
+  const rgba = getNumericValues(str)
+  const [r, g, b, a] = rgba
+
   let isValidLengthRange =
     (str.startsWith("rgb(") && rgba.length === 3) ||
-    (str.startsWith("rgba(") && rgba.length === 4);
-  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255);
-  let isValidAlphaRange = str.startsWith("rgba(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true;
+    (str.startsWith("rgba(") && rgba.length === 4)
+  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255)
+  let isValidAlphaRange = str.startsWith("rgba(")
+    ? `${a}`.length <= 4 && a >= 0 && a <= 1
+    : true
 
-  return isValidLengthRange && isValidColorRange && isValidAlphaRange;
-};
+  return isValidLengthRange && isValidColorRange && isValidAlphaRange
+}
 
 export const isValidHsl = str => {
-  const hasValidStructure = /^(?:hsl\(|hsla\()(?:[0-9,%\s]|\.(?=\d))*\)$/gi.test(str);
+  const hasValidStructure = /^(?:hsl\(|hsla\()(?:[0-9,%\s]|\.(?=\d))*\)$/gi.test(
+    str
+  )
   if (hasValidStructure) {
-    return testHslaValues(str.toLowerCase());
+    return testHslaValues(str.toLowerCase())
   }
-};
+}
 
 export const testHslaValues = str => {
-  const hsla = getNumericValues(str);
-  const [h, s, l, a] = hsla;
-  const isUndefined = [h,s,l].some(v => v === undefined)
+  const hsla = getNumericValues(str)
+  const [h, s, l, a] = hsla
+  const isUndefined = [h, s, l].some(v => v === undefined)
 
-  if(isUndefined) return false;
+  if (isUndefined) return false
 
   let isValidLengthRange =
     (str.startsWith("hsl(") && hsla.length === 3) ||
-    (str.startsWith("hsla(") && hsla.length === 4);
+    (str.startsWith("hsla(") && hsla.length === 4)
   let isValidHue = h >= 0 && h <= 360
-  let isValidSatLum = [s, l].every(v => v.endsWith('%') && parseInt(v) >= 0 && parseInt(v) <= 100 )
-  let isValidAlphaRange = str.startsWith("hsla(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true;
+  let isValidSatLum = [s, l].every(
+    v => v.endsWith("%") && parseInt(v) >= 0 && parseInt(v) <= 100
+  )
+  let isValidAlphaRange = str.startsWith("hsla(")
+    ? `${a}`.length <= 4 && a >= 0 && a <= 1
+    : true
 
-  return isValidLengthRange && isValidHue && isValidSatLum && isValidAlphaRange;
-};
+  return isValidLengthRange && isValidHue && isValidSatLum && isValidAlphaRange
+}
 
 export const getColorFormat = color => {
   if (typeof color === "string") {
     if (isValidHex(color)) {
-      return "hex";
+      return "hex"
     } else if (isValidRgb(color)) {
-      return "rgb";
+      return "rgb"
     } else if (isValidHsl(color)) {
-      return "hsl";
+      return "hsl"
     }
   }
-};
+}
 
 export const convertToHSVA = (value, format) => {
   switch (format) {
     case "hex":
-      return getAndConvertHexa(value);
+      return getAndConvertHexa(value)
     case "rgb":
-      return getAndConvertRgba(value);
+      return getAndConvertRgba(value)
     case "hsl":
-      return getAndConvertHsla(value);
+      return getAndConvertHsla(value)
   }
-};
+}
 
 export const convertHsvaToFormat = (hsva, format) => {
   switch (format) {
     case "hex":
-      return hsvaToHexa(hsva, true);
+      return hsvaToHexa(hsva, true)
     case "rgb":
-      return hsvaToRgba(hsva, true);
+      return hsvaToRgba(hsva, true)
     case "hsl":
-      return hsvaToHsla(hsva);
+      return hsvaToHsla(hsva)
   }
-};
+}
 
 export const getAndConvertHexa = color => {
-  let [rHex, gHex, bHex, aHex] = getHexaValues(color);
-  return hexaToHSVA([rHex, gHex, bHex], aHex);
-};
+  let [rHex, gHex, bHex, aHex] = getHexaValues(color)
+  return hexaToHSVA([rHex, gHex, bHex], aHex)
+}
 
 export const getAndConvertRgba = color => {
-  let rgba = getNumericValues(color);
-  return rgbaToHSVA(rgba);
-};
+  let rgba = getNumericValues(color)
+  return rgbaToHSVA(rgba)
+}
 
 export const getAndConvertHsla = color => {
-  let hsla = getNumericValues(color);
-  return hslaToHSVA(hsla);
-};
-
+  let hsla = getNumericValues(color)
+  return hslaToHSVA(hsla)
+}
 
 export const hexaToHSVA = (hex, alpha = "FF") => {
   const rgba = hex
     .map(v => parseInt(v, 16))
-    .concat(Number((parseInt(alpha, 16) / 255).toFixed(2)));
-  return rgbaToHSVA(rgba);
-};
+    .concat(Number((parseInt(alpha, 16) / 255).toFixed(2)))
+  return rgbaToHSVA(rgba)
+}
 
 export const rgbaToHSVA = rgba => {
-  const [r, g, b, a = 1] = rgba;
-  let hsv = _rgbToHSV([r, g, b]);
-  return [...hsv, a];
-};
+  const [r, g, b, a = 1] = rgba
+  let hsv = _rgbToHSV([r, g, b])
+  return [...hsv, a]
+}
 
 export const hslaToHSVA = ([h, s, l, a = 1]) => {
   let sat = s.replace(/%/, "")
@@ -134,137 +143,137 @@ export const hslaToHSVA = ([h, s, l, a = 1]) => {
 }
 
 export const hsvaToHexa = (hsva, asString = false) => {
-  const [r, g, b, a] = hsvaToRgba(hsva);
+  const [r, g, b, a] = hsvaToRgba(hsva)
 
   const hexa = [r, g, b]
     .map(v => {
-		let hex = Math.round(v).toString(16)
-		return hex.length === 1 ? `0${hex}` : hex
-	})
-    .concat(Math.round(a * 255).toString(16));
-  return asString ? `#${hexa.join("")}` : hexa;
-};
+      let hex = Math.round(v).toString(16)
+      return hex.length === 1 ? `0${hex}` : hex
+    })
+    .concat(Math.round(a * 255).toString(16))
+  return asString ? `#${hexa.join("")}` : hexa
+}
 
 export const hsvaToRgba = ([h, s, v, a = 1], asString = false) => {
-  let rgb = _hsvToRgb([h, s, v]).map(x => Math.round(x));
-  let rgba = [...rgb, a < 1 ? _fixNum(a, 2) : a];
-  return asString ? `rgba(${rgba.join(",")})` : rgba;
-};
+  let rgb = _hsvToRgb([h, s, v]).map(x => Math.round(x))
+  let rgba = [...rgb, a < 1 ? _fixNum(a, 2) : a]
+  return asString ? `rgba(${rgba.join(",")})` : rgba
+}
 
 export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => {
-  let [hue, sat, lum] = _hsvToHSL([h, s, v]);
-  let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a];
-  return `hsla(${hsla.join(",")})`;
-};
+  let [hue, sat, lum] = _hsvToHSL([h, s, v])
+  let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a]
+  return `hsla(${hsla.join(",")})`
+}
 
 export const _hslToHSV = hsl => {
-  const h = hsl[0];
-  let s = hsl[1] / 100;
-  let l = hsl[2] / 100;
-  let smin = s;
-  const lmin = Math.max(l, 0.01);
+  const h = hsl[0]
+  let s = hsl[1] / 100
+  let l = hsl[2] / 100
+  let smin = s
+  const lmin = Math.max(l, 0.01)
 
-  l *= 2;
-  s *= l <= 1 ? l : 2 - l;
-  smin *= lmin <= 1 ? lmin : 2 - lmin;
-  const v = (l + s) / 2;
-  const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
+  l *= 2
+  s *= l <= 1 ? l : 2 - l
+  smin *= lmin <= 1 ? lmin : 2 - lmin
+  const v = (l + s) / 2
+  const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s)
 
-  return [h, sv * 100, v * 100];
-};
+  return [h, sv * 100, v * 100]
+}
 
 //Credit : https://github.com/Qix-/color-convert
 export const _rgbToHSV = rgb => {
-  let rdif;
-  let gdif;
-  let bdif;
-  let h;
-  let s;
+  let rdif
+  let gdif
+  let bdif
+  let h
+  let s
 
-  const r = rgb[0] / 255;
-  const g = rgb[1] / 255;
-  const b = rgb[2] / 255;
-  const v = Math.max(r, g, b);
-  const diff = v - Math.min(r, g, b);
+  const r = rgb[0] / 255
+  const g = rgb[1] / 255
+  const b = rgb[2] / 255
+  const v = Math.max(r, g, b)
+  const diff = v - Math.min(r, g, b)
   const diffc = function(c) {
-    return (v - c) / 6 / diff + 1 / 2;
-  };
+    return (v - c) / 6 / diff + 1 / 2
+  }
 
   if (diff === 0) {
-    h = 0;
-    s = 0;
+    h = 0
+    s = 0
   } else {
-    s = diff / v;
-    rdif = diffc(r);
-    gdif = diffc(g);
-    bdif = diffc(b);
+    s = diff / v
+    rdif = diffc(r)
+    gdif = diffc(g)
+    bdif = diffc(b)
 
     if (r === v) {
-      h = bdif - gdif;
+      h = bdif - gdif
     } else if (g === v) {
-      h = 1 / 3 + rdif - bdif;
+      h = 1 / 3 + rdif - bdif
     } else if (b === v) {
-      h = 2 / 3 + gdif - rdif;
+      h = 2 / 3 + gdif - rdif
     }
 
     if (h < 0) {
-      h += 1;
+      h += 1
     } else if (h > 1) {
-      h -= 1;
+      h -= 1
     }
   }
 
-  const hsvResult = [h * 360, s * 100, v * 100].map(v => Math.round(v));
-  return hsvResult;
-};
+  const hsvResult = [h * 360, s * 100, v * 100].map(v => Math.round(v))
+  return hsvResult
+}
 
 //Credit : https://github.com/Qix-/color-convert
 export const _hsvToRgb = hsv => {
-  const h = hsv[0] / 60;
-  const s = hsv[1] / 100;
-  let v = hsv[2] / 100;
-  const hi = Math.floor(h) % 6;
+  const h = hsv[0] / 60
+  const s = hsv[1] / 100
+  let v = hsv[2] / 100
+  const hi = Math.floor(h) % 6
 
-  const f = h - Math.floor(h);
-  const p = 255 * v * (1 - s);
-  const q = 255 * v * (1 - s * f);
-  const t = 255 * v * (1 - s * (1 - f));
-  v *= 255;
+  const f = h - Math.floor(h)
+  const p = 255 * v * (1 - s)
+  const q = 255 * v * (1 - s * f)
+  const t = 255 * v * (1 - s * (1 - f))
+  v *= 255
 
   switch (hi) {
     case 0:
-      return [v, t, p];
+      return [v, t, p]
     case 1:
-      return [q, v, p];
+      return [q, v, p]
     case 2:
-      return [p, v, t];
+      return [p, v, t]
     case 3:
-      return [p, q, v];
+      return [p, q, v]
     case 4:
-      return [t, p, v];
+      return [t, p, v]
     case 5:
-      return [v, p, q];
+      return [v, p, q]
   }
-};
+}
 
 //Credit : https://github.com/Qix-/color-convert
 export const _hsvToHSL = hsv => {
-  const h = hsv[0];
-  const s = hsv[1] / 100;
-  const v = hsv[2] / 100;
-  const vmin = Math.max(v, 0.01);
-  let sl;
-  let l;
+  const h = hsv[0]
+  const s = hsv[1] / 100
+  const v = hsv[2] / 100
+  const vmin = Math.max(v, 0.01)
+  let sl
+  let l
 
-  l = (2 - s) * v;
-  const lmin = (2 - s) * vmin;
-  sl = s * vmin;
-  sl /= lmin <= 1 ? lmin : 2 - lmin;
-  sl = sl || 0;
-  l /= 2;
+  l = (2 - s) * v
+  const lmin = (2 - s) * vmin
+  sl = s * vmin
+  sl /= lmin <= 1 ? lmin : 2 - lmin
+  sl = sl || 0
+  l /= 2
 
-  return [_fixNum(h, 0), _fixNum(sl * 100, 0), _fixNum(l * 100, 0)];
-};
+  return [_fixNum(h, 0), _fixNum(sl * 100, 0), _fixNum(l * 100, 0)]
+}
 
 export const _fixNum = (value, decimalPlaces) =>
-  Number(parseFloat(value).toFixed(decimalPlaces));
+  Number(parseFloat(value).toFixed(decimalPlaces))
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
index 0354468b75..56ea17419a 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
@@ -1,90 +1,106 @@
-import {getColorFormat, convertToHSVA, convertHsvaToFormat} from "./utils"
+import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./utils"
 
-describe('convertToHSVA - convert to hsva from format', () => {
-    test("convert from hexa", () => {
-      expect(convertToHSVA("#f222d382", "hex")).toEqual([309, 86, 95, 0.51]) 
-    })
+describe("convertToHSVA - convert to hsva from format", () => {
+  test("convert from hexa", () => {
+    expect(convertToHSVA("#f222d382", "hex")).toEqual([309, 86, 95, 0.51])
+  })
 
-    test("convert from hex", () => {
-        expect(convertToHSVA("#f222d3", "hex")).toEqual([309, 86, 95, 1]) 
-    })
+  test("convert from hex", () => {
+    expect(convertToHSVA("#f222d3", "hex")).toEqual([309, 86, 95, 1])
+  })
 
-    test("convert from rgba", () => {
-        expect(convertToHSVA("rgba(242, 34, 211, 1)", "rgb")).toEqual([309, 86, 95, 1])
-    })
+  test("convert from rgba", () => {
+    expect(convertToHSVA("rgba(242, 34, 211, 1)", "rgb")).toEqual([
+      309,
+      86,
+      95,
+      1,
+    ])
+  })
 
-    test("convert from rgb", () => {
-        expect(convertToHSVA("rgb(150, 80, 255)", "rgb")).toEqual([264, 69, 100, 1])
-    })
+  test("convert from rgb", () => {
+    expect(convertToHSVA("rgb(150, 80, 255)", "rgb")).toEqual([264, 69, 100, 1])
+  })
 
-    test("convert from from hsl", () => {
-        expect(convertToHSVA("hsl(264, 100%, 65.7%)", "hsl")).toEqual([264, 68.6, 100, 1])
-    })
-
-    test("convert from from hsla", () => {
-        expect(convertToHSVA("hsla(264, 100%, 65.7%, 0.51)", "hsl")).toEqual([264, 68.6, 100, 0.51])
-    })
+  test("convert from from hsl", () => {
+    expect(convertToHSVA("hsl(264, 100%, 65.7%)", "hsl")).toEqual([
+      264,
+      68.6,
+      100,
+      1,
+    ])
+  })
 
+  test("convert from from hsla", () => {
+    expect(convertToHSVA("hsla(264, 100%, 65.7%, 0.51)", "hsl")).toEqual([
+      264,
+      68.6,
+      100,
+      0.51,
+    ])
+  })
 })
 
-describe('convertHsvaToFormat - convert from hsva to format', () => {
-    test('Convert to hexa', () => {
-        expect(convertHsvaToFormat([264, 68.63, 100, 0.5], "hex")).toBe("#9650ff80")
-    })
+describe("convertHsvaToFormat - convert from hsva to format", () => {
+  test("Convert to hexa", () => {
+    expect(convertHsvaToFormat([264, 68.63, 100, 0.5], "hex")).toBe("#9650ff80")
+  })
 
-    test('Convert to rgba', () => {
-        expect(convertHsvaToFormat([264, 68.63, 100, 0.75], "rgb")).toBe("rgba(150,80,255,0.75)")
-    })
+  test("Convert to rgba", () => {
+    expect(convertHsvaToFormat([264, 68.63, 100, 0.75], "rgb")).toBe(
+      "rgba(150,80,255,0.75)"
+    )
+  })
 
-    test('Convert to hsla', () => {
-        expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe("hsla(264,100,65.7,1)")
-    })
+  test("Convert to hsla", () => {
+    expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe(
+      "hsla(264,100,65.7,1)"
+    )
+  })
 })
 
+describe("Get Color Format", () => {
+  test("Testing valid hex string", () => {
+    expect(getColorFormat("#FFF")).toBe("hex")
+  })
 
-describe('Get Color Format', () => {
-     test("Testing valid hex string", () => {
-         expect(getColorFormat("#FFF")).toBe("hex")
-     })
+  test("Testing invalid hex string", () => {
+    expect(getColorFormat("#FFZ")).toBeUndefined()
+  })
 
-     test("Testing invalid hex string", () => {
-        expect(getColorFormat("#FFZ")).toBeUndefined()
-    })
+  test("Testing valid hex with alpha", () => {
+    expect(getColorFormat("#FF00BB80")).toBe("hex")
+  })
 
-    test("Testing valid hex with alpha", () => {
-        expect(getColorFormat("#FF00BB80")).toBe("hex")
-    })
+  test("Test valid rgb value", () => {
+    expect(getColorFormat("RGB(255, 20, 50)")).toBe("rgb")
+  })
 
-    test("Test valid rgb value", () => {
-        expect(getColorFormat("RGB(255, 20, 50)")).toBe("rgb")
-    })
+  test("Testing invalid rgb value", () => {
+    expect(getColorFormat("rgb(255, 0)")).toBeUndefined()
+  })
 
-    test("Testing invalid rgb value", () => {
-        expect(getColorFormat("rgb(255, 0)")).toBeUndefined()
-    })
+  test("Testing rgb value with alpha", () => {
+    expect(getColorFormat("rgba(255, 0, 50, 0.5)")).toBe("rgb")
+  })
 
-    test("Testing rgb value with alpha", () => {
-        expect(getColorFormat("rgba(255, 0, 50, 0.5)")).toBe("rgb")
-    })
+  test("Testing rgb value with incorrectly provided alpha", () => {
+    expect(getColorFormat("rgb(255, 0, 50, 0.5)")).toBeUndefined()
+  })
 
-    test("Testing rgb value with incorrectly provided alpha", () => {
-        expect(getColorFormat("rgb(255, 0, 50, 0.5)")).toBeUndefined()
-    })
+  test("Testing invalid hsl value", () => {
+    expect(getColorFormat("hsla(255, 0)")).toBeUndefined()
+  })
 
-    test("Testing invalid hsl value", () => {
-        expect(getColorFormat("hsla(255, 0)")).toBeUndefined()
-    })
+  test("Testing hsla value with alpha", () => {
+    expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
+  })
 
-    test("Testing hsla value with alpha", () => {
-        expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
-    })
+  test("Testing hsl value with incorrectly provided alpha", () => {
+    expect(getColorFormat("hsl(150, 0, 50, 0.5)")).toBeUndefined()
+  })
 
-    test("Testing hsl value with incorrectly provided alpha", () => {
-        expect(getColorFormat("hsl(150, 0, 50, 0.5)")).toBeUndefined()
-    })
-
-    test("Testing out of bounds hsl", () => {
-        expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined()
-    })
+  test("Testing out of bounds hsl", () => {
+    expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined()
+  })
 })
-

From efb80347c67f5cc115d4e01c543ba4cf0d55e56f Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 17 Jun 2020 17:44:47 +0100
Subject: [PATCH 34/57] Lint and test fixes

---
 .../builder/src/components/userInterface/Colorpicker/utils.js | 4 ++--
 .../src/components/userInterface/Colorpicker/utils.test.js    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index d49efc876e..98f3f53f9b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -132,14 +132,14 @@ export const hexaToHSVA = (hex, alpha = "FF") => {
 export const rgbaToHSVA = rgba => {
   const [r, g, b, a = 1] = rgba
   let hsv = _rgbToHSV([r, g, b])
-  return [...hsv, a]
+  return [...hsv, a].map(x => parseFloat(x))
 }
 
 export const hslaToHSVA = ([h, s, l, a = 1]) => {
   let sat = s.replace(/%/, "")
   let lum = l.replace(/%/, "")
   let hsv = _hslToHSV([h, sat, lum])
-  return [...hsv, a]
+  return [...hsv, a].map(x => parseFloat(x))
 }
 
 export const hsvaToHexa = (hsva, asString = false) => {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
index 56ea17419a..c47d54ed1b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
@@ -54,7 +54,7 @@ describe("convertHsvaToFormat - convert from hsva to format", () => {
 
   test("Convert to hsla", () => {
     expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe(
-      "hsla(264,100,65.7,1)"
+      "hsla(264,100%,66%,1)"
     )
   })
 })
@@ -93,7 +93,7 @@ describe("Get Color Format", () => {
   })
 
   test("Testing hsla value with alpha", () => {
-    expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
+    expect(getColorFormat("hsla(150, 60%, 50%, 0.5)")).toBe("hsl")
   })
 
   test("Testing hsl value with incorrectly provided alpha", () => {

From 06f3c1db776cb398b2bae89132976f3040f7fec2 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 17 Jun 2020 17:50:23 +0100
Subject: [PATCH 35/57] Removing unused asString

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

diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index 98f3f53f9b..e14c8711ab 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -160,7 +160,7 @@ export const hsvaToRgba = ([h, s, v, a = 1], asString = false) => {
   return asString ? `rgba(${rgba.join(",")})` : rgba
 }
 
-export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => {
+export const hsvaToHsla = ([h, s, v, a = 1]) => {
   let [hue, sat, lum] = _hsvToHSL([h, s, v])
   let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a]
   return `hsla(${hsla.join(",")})`

From ad0840545e494542edb1adbc2091dc5c40fe7b5b Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Thu, 18 Jun 2020 15:54:18 +0100
Subject: [PATCH 36/57] Updates for Colorpicker Component

---
 .../Colorpicker/ButtonGroup.svelte            |  4 +-
 .../Colorpicker/CheckedBackground.svelte      | 23 +++++++++++
 .../Colorpicker/Colorpicker.svelte            | 39 +++++++++++++------
 .../Colorpicker/Colorpreview.svelte           | 11 ++++--
 .../Colorpicker/FlatButton.svelte             |  9 +++--
 .../userInterface/Colorpicker/Input.svelte    | 10 ++---
 .../userInterface/Colorpicker/Palette.svelte  | 11 ++++--
 .../userInterface/Colorpicker/Slider.svelte   |  2 +-
 8 files changed, 79 insertions(+), 30 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte

diff --git a/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte b/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
index f9c402ac81..134dac772d 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
@@ -12,8 +12,10 @@
     font-weight: 500;
     display: flex;
     flex-flow: row nowrap;
-    width: 100%;
     justify-content: center;
+    width: 170px;
+    height: 30px;
+    align-self: center;
   }
 </style>
 
diff --git a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
new file mode 100644
index 0000000000..c6acd8f18a
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
@@ -0,0 +1,23 @@
+<script>
+    import {buildStyle} from "./helpers.js"
+
+    export let backgroundSize = "10px"
+    export let borderRadius = ""
+    export let height = ""
+    export let width = ""
+
+    $: style = buildStyle({backgroundSize, borderRadius, height, width})
+
+</script>
+
+<style>
+  div {
+    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
+    height: fit-content;
+    width: fit-content;
+  }
+</style>
+
+<div {style}>
+    <slot />
+</div>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 936756f403..16f17ccc98 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte";
-
+  import CheckedBackground from "./CheckedBackground.svelte"
+  import {buildStyle} from "./helpers.js"
   import {
     getColorFormat,
     convertToHSVA,
@@ -59,7 +60,6 @@
 
   function changeFormatAndConvert(f) {
     format = f;
-    console.log(f)
     value = convertHsvaToFormat([h, s, v, a], format);
   }
 
@@ -73,6 +73,8 @@
     }
   }
 
+    $: border = s < 10 ? "1px dashed #dedada" : ""
+    $: style = buildStyle({background: value, border})
 </script>
 
 <style>
@@ -81,19 +83,25 @@
     font-size: 11px;
     font-weight: 400;
     flex-direction: column;
-    height: 300px;
-    width: 250px;
+    height: 265px;
+    width: 220px;
     background: #ffffff;
     border-radius: 2px;
     box-shadow: 0 0.15em 1.5em 0 rgba(0,0,0,.1), 0 0 1em 0 rgba(0,0,0,.03);
   }
 
+  .palette-panel {
+    flex: 1;
+  }
+
   .control-panel {
+    flex: 1;
     display: flex;
     flex-direction: column;
     padding: 8px;
     background: white;
-    border: 1px solid #d2d2d2
+    border: 1px solid #d2d2d2;
+    color: #777373;
   }
 
   .alpha-hue-panel {
@@ -108,7 +116,6 @@
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    border: 1px solid #dedada;
   }
 
   .format-input-panel {
@@ -120,19 +127,27 @@
 
 <div class="colorpicker-container">
 
-  <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+  <div class="palette-panel">
+    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+  </div>
 
   <div class="control-panel">
     <div class="alpha-hue-panel">
       <div>
-        <div class="selected-color" style={`background: ${value}`} />
+        <CheckedBackground borderRadius="50%" backgroundSize="8px">
+          <div class="selected-color" {style} />
+        </CheckedBackground>
       </div>
       <div>
         <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
-        <Slider
-          type="alpha"
-          value={a}
-          on:change={alpha => setAlpha(alpha.detail)} />
+
+        <CheckedBackground borderRadius="10px" backgroundSize="7px">
+          <Slider
+            type="alpha"
+            value={a}
+            on:change={alpha => setAlpha(alpha.detail)} />
+        </CheckedBackground>
+        
       </div>
     </div>
 
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
index fa880b6292..8f5bf64f70 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -1,5 +1,6 @@
 <script>
     import Colorpicker from "./Colorpicker.svelte"
+    import CheckedBackground from "./CheckedBackground.svelte"
     import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
     import {buildStyle} from "./helpers.js"
     import { fade } from 'svelte/transition';
@@ -72,7 +73,7 @@
             
             //TOO: Testing and Scroll Awareness for x Scroll
             const spaceRight = (innerWidth - spaceLeft) + previewWidth
-            const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) + pickerWidth : offsetLeft - pickerWidth
+            const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
 
             dimensions = {top, left}
 
@@ -88,7 +89,10 @@
 
 <div class="color-preview-container">
     {#if !errorMsg}
-        <div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker}></div>
+        <CheckedBackground borderRadius="3px" backgroundSize="8px">
+            <div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} />        
+        </CheckedBackground>
+
         {#if open}
         <div class="picker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth} style={pickerStyle}>
             <Colorpicker on:change={onColorChange} {format} {value} />
@@ -111,9 +115,8 @@
     }
 
     .color-preview {
-        flex: 1;
         border-radius: 3px;
-        border: 1px solid #dedada;
+        border: 1px solid #dedada;        
     }
 
     .preview-error {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte b/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
index af1ea5e945..881f73d134 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
@@ -5,15 +5,18 @@
 
 <style>
   .flatbutton {
-    padding: 3px 15px;
     cursor: pointer;
-    color: black;
-    background-color: #dadada;
     border: 1px solid #d4d4d4;
     border-radius: 8px;
     text-transform: uppercase;
     margin: 5px;
     transition: all 0.3s;
+    font-size: 10px;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #f1f3f4;
   }
 
   .selected {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
index 04966c1f30..483fcd450d 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
@@ -10,16 +10,16 @@
   }
 
   input {
-    width: 185px;
-    font-size: 14px;
+    width: 175px;
+    font-size: 13px;
     background: #f1f3f4;
     border-radius: 8px;
-    height: 27px;
+    height: 20px;
     outline-color: #003cb0;
-    color: #565252;
+    color: inherit;
     text-align: center;
-    /* border: none; */
     border: 1px solid #dadada;
+    font-weight: 550;
   }
 </style>
 
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
index 01a614124c..4763ee86cc 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte";
+  import CheckedBackground from "./CheckedBackground.svelte"
 
   const dispatch = createEventDispatcher()
 
@@ -40,7 +41,7 @@
   .palette {
     position: relative;
     width: 100%;
-    height: 175px;
+    height: 140px;
     cursor: crosshair;
     overflow: hidden;
   }
@@ -55,6 +56,8 @@
   }
 </style>
 
-<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
-  <div class="picker" style={pickerStyle} />
-</div>
+  <CheckedBackground width="100%">
+    <div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
+      <div class="picker" style={pickerStyle} />
+    </div>
+  </CheckedBackground>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
index ec8d99248d..47736d7b69 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -36,7 +36,7 @@
     position: relative;
     align-self: center;
     height: 8px;
-    width: 185px;
+    width: 150px;
     border-radius: 10px;
     margin: 10px 0px;
     border: 1px solid #e8e8ef;

From bf14aa5ccbb22aa65507023391257b6a139ecc92 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 18 Jun 2020 16:59:31 +0100
Subject: [PATCH 37/57] instanceid removal

---
 packages/builder/src/builderStore/api.js      | 42 ++++++----
 .../builder/src/builderStore/store/backend.js |  4 +-
 .../builder/src/builderStore/store/index.js   |  4 -
 .../src/builderStore/store/workflow/index.js  | 20 ++---
 .../components/database/ModelDataTable/api.js | 16 ++--
 .../CreateEditModel/CreateEditModel.svelte    |  4 +-
 .../modals/CreateEditView.svelte              |  4 +-
 .../src/components/nav/HierarchyRow.svelte    |  1 -
 .../nav/SchemaManagementDrawer.svelte         |  4 +-
 .../src/components/nav/UsersList.svelte       |  4 +-
 .../AppPreview/CurrentItemPreview.svelte      |  1 +
 .../AppPreview/iframeTemplate.js              | 16 ++--
 .../SetupPanel/DeleteWorkflowModal.svelte     |  1 -
 .../workflow/SetupPanel/SetupPanel.svelte     |  1 -
 .../WorkflowBuilder/WorkflowBuilder.svelte    |  1 -
 .../WorkflowPanel/BlockList/BlockList.svelte  |  1 -
 .../WorkflowList/CreateWorkflowModal.svelte   |  1 -
 .../WorkflowList/WorkflowList.svelte          |  1 -
 .../WorkflowPanel/WorkflowPanel.svelte        |  1 -
 packages/client/src/render/getAppId.js        | 10 ++-
 packages/client/tests/testAppDef.js           |  7 +-
 .../server/src/api/controllers/accesslevel.js | 16 ++--
 .../server/src/api/controllers/application.js | 19 ++++-
 packages/server/src/api/controllers/auth.js   | 13 +++-
 .../server/src/api/controllers/instance.js    | 10 +--
 packages/server/src/api/controllers/model.js  |  8 +-
 packages/server/src/api/controllers/record.js | 16 ++--
 packages/server/src/api/controllers/static.js | 19 +++--
 packages/server/src/api/controllers/user.js   | 10 +--
 packages/server/src/api/controllers/view.js   |  6 +-
 .../src/api/controllers/workflow/index.js     |  8 +-
 packages/server/src/api/index.js              |  5 --
 packages/server/src/api/routes/accesslevel.js | 12 +--
 packages/server/src/api/routes/instance.js    |  2 +-
 packages/server/src/api/routes/model.js       | 14 ++--
 packages/server/src/api/routes/record.js      | 12 +--
 packages/server/src/api/routes/screen.js      | 10 +--
 .../src/api/routes/tests/accesslevel.spec.js  | 28 +++----
 .../src/api/routes/tests/application.spec.js  | 14 ++--
 .../src/api/routes/tests/couchTestUtils.js    | 78 ++++++++++++++-----
 .../src/api/routes/tests/instance.spec.js     |  6 +-
 .../server/src/api/routes/tests/model.spec.js | 14 ++--
 .../src/api/routes/tests/record.spec.js       | 36 ++++-----
 .../server/src/api/routes/tests/user.spec.js  | 12 +--
 .../server/src/api/routes/tests/view.spec.js  |  6 +-
 .../src/api/routes/tests/workflow.spec.js     |  8 +-
 packages/server/src/api/routes/user.js        | 16 +---
 packages/server/src/api/routes/view.js        |  6 +-
 packages/server/src/api/routes/workflow.js    | 14 ++--
 .../server/src/middleware/authenticated.js    | 26 +++++--
 packages/server/src/middleware/authorized.js  | 11 +--
 packages/server/src/utilities/accessLevels.js | 10 ++-
 .../src/utilities/builder/setBuilderToken.js  | 19 +++++
 .../standard-components/src/DataChart.svelte  |  3 +-
 .../standard-components/src/DataForm.svelte   |  5 +-
 .../standard-components/src/DataList.svelte   |  3 +-
 .../standard-components/src/DataTable.svelte  |  3 +-
 packages/standard-components/src/List.svelte  |  3 +-
 58 files changed, 358 insertions(+), 287 deletions(-)
 create mode 100644 packages/server/src/utilities/builder/setBuilderToken.js

diff --git a/packages/builder/src/builderStore/api.js b/packages/builder/src/builderStore/api.js
index 3fcd35ce28..795aaf8cd7 100644
--- a/packages/builder/src/builderStore/api.js
+++ b/packages/builder/src/builderStore/api.js
@@ -1,17 +1,17 @@
-const apiCall = method => async (url, body) => {
+const apiCall = (method, instanceId) => async (url, body) => {
+  const headers = {
+    "Content-Type": "application/json",
+    "x-user-agent": "Budibase Builder",
+  }
+  if (instanceId) {
+    headers["x-budibase-instanceid"] = instanceId
+  }
   const response = await fetch(url, {
     method: method,
-    headers: {
-      "Content-Type": "application/json",
-      "x-user-agent": "Budibase Builder",
-    },
     body: body && JSON.stringify(body),
+    headers,
   })
 
-  // if (response.status === 500) {
-  //   throw new Error("Server Error");
-  // }
-
   return response
 }
 
@@ -21,10 +21,20 @@ export const patch = apiCall("PATCH")
 export const del = apiCall("DELETE")
 export const put = apiCall("PUT")
 
-export default {
-  post,
-  get,
-  patch,
-  delete: del,
-  put,
-}
+// usage: api(instanceId).post(...) ... will supply instance Id in header
+const api = instanceId => ({
+  post: apiCall("POST", instanceId),
+  get: apiCall("GET", instanceId),
+  patch: apiCall("PATCH", instanceId),
+  delete: apiCall("DELETE", instanceId),
+  put: apiCall("PUT", instanceId),
+})
+
+// usage: api.post(...)... will not supply instanceid in header
+api.post = apiCall("POST")
+api.get = apiCall("GET")
+api.patch = apiCall("PATCH")
+api.delete = apiCall("DELETE")
+api.put = apiCall("PUT")
+
+export default api
diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 9a5a7b1fbc..6efb980506 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -24,8 +24,8 @@ export const getBackendUiStore = () => {
   store.actions = {
     database: {
       select: async db => {
-        const modelsResponse = await api.get(`/api/${db._id}/models`)
-        const viewsResponse = await api.get(`/api/${db._id}/views`)
+        const modelsResponse = await api(db._id).get(`/api/models`)
+        const viewsResponse = await api(db._id).get(`/api/views`)
         const models = await modelsResponse.json()
         const views = await viewsResponse.json()
         store.update(state => {
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 1f3ea9c0ef..0b17e8c61c 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -1,5 +1,4 @@
 import { values } from "lodash/fp"
-import { backendUiStore } from "builderStore"
 import * as backendStoreActions from "./backend"
 import { writable, get } from "svelte/store"
 import api from "../api"
@@ -295,13 +294,10 @@ const addChildComponent = store => (componentToAdd, presetName) => {
 
     const presetProps = presetName ? component.presets[presetName] : {}
 
-    const instanceId = get(backendUiStore).selectedDatabase._id
-
     const newComponent = createProps(
       component,
       {
         ...presetProps,
-        _instanceId: instanceId,
       },
       state
     )
diff --git a/packages/builder/src/builderStore/store/workflow/index.js b/packages/builder/src/builderStore/store/workflow/index.js
index 8d5e63b197..7c814c27ee 100644
--- a/packages/builder/src/builderStore/store/workflow/index.js
+++ b/packages/builder/src/builderStore/store/workflow/index.js
@@ -4,8 +4,8 @@ import Workflow from "./Workflow"
 
 const workflowActions = store => ({
   fetch: async instanceId => {
-    const WORKFLOWS_URL = `/api/${instanceId}/workflows`
-    const workflowResponse = await api.get(WORKFLOWS_URL)
+    const WORKFLOWS_URL = `/api/workflows`
+    const workflowResponse = await api(instanceId).get(WORKFLOWS_URL)
     const json = await workflowResponse.json()
     store.update(state => {
       state.workflows = json
@@ -19,8 +19,8 @@ const workflowActions = store => ({
         steps: [],
       },
     }
-    const CREATE_WORKFLOW_URL = `/api/${instanceId}/workflows`
-    const response = await api.post(CREATE_WORKFLOW_URL, workflow)
+    const CREATE_WORKFLOW_URL = `/api/workflows`
+    const response = await api(instanceId).post(CREATE_WORKFLOW_URL, workflow)
     const json = await response.json()
     store.update(state => {
       state.workflows = state.workflows.concat(json.workflow)
@@ -29,8 +29,8 @@ const workflowActions = store => ({
     })
   },
   save: async ({ instanceId, workflow }) => {
-    const UPDATE_WORKFLOW_URL = `/api/${instanceId}/workflows`
-    const response = await api.put(UPDATE_WORKFLOW_URL, workflow)
+    const UPDATE_WORKFLOW_URL = `/api/workflows`
+    const response = await api(instanceId).put(UPDATE_WORKFLOW_URL, workflow)
     const json = await response.json()
     store.update(state => {
       const existingIdx = state.workflows.findIndex(
@@ -43,8 +43,8 @@ const workflowActions = store => ({
     })
   },
   update: async ({ instanceId, workflow }) => {
-    const UPDATE_WORKFLOW_URL = `/api/${instanceId}/workflows`
-    const response = await api.put(UPDATE_WORKFLOW_URL, workflow)
+    const UPDATE_WORKFLOW_URL = `/api/workflows`
+    const response = await api(instanceId).put(UPDATE_WORKFLOW_URL, workflow)
     const json = await response.json()
     store.update(state => {
       const existingIdx = state.workflows.findIndex(
@@ -57,8 +57,8 @@ const workflowActions = store => ({
   },
   delete: async ({ instanceId, workflow }) => {
     const { _id, _rev } = workflow
-    const DELETE_WORKFLOW_URL = `/api/${instanceId}/workflows/${_id}/${_rev}`
-    await api.delete(DELETE_WORKFLOW_URL)
+    const DELETE_WORKFLOW_URL = `/api/workflows/${_id}/${_rev}`
+    await api(instanceId).delete(DELETE_WORKFLOW_URL)
 
     store.update(state => {
       const existingIdx = state.workflows.findIndex(
diff --git a/packages/builder/src/components/database/ModelDataTable/api.js b/packages/builder/src/components/database/ModelDataTable/api.js
index cb98879567..9fb6651983 100644
--- a/packages/builder/src/components/database/ModelDataTable/api.js
+++ b/packages/builder/src/components/database/ModelDataTable/api.js
@@ -1,8 +1,8 @@
 import api from "builderStore/api"
 
 export async function createUser(user, instanceId) {
-  const CREATE_USER_URL = `/api/${instanceId}/users`
-  const response = await api.post(CREATE_USER_URL, user)
+  const CREATE_USER_URL = `/api/users`
+  const response = await api(instanceId).post(CREATE_USER_URL, user)
   return await response.json()
 }
 
@@ -15,21 +15,21 @@ export async function createDatabase(appname, instanceName) {
 }
 
 export async function deleteRecord(record, instanceId) {
-  const DELETE_RECORDS_URL = `/api/${instanceId}/${record._modelId}/records/${record._id}/${record._rev}`
-  const response = await api.delete(DELETE_RECORDS_URL)
+  const DELETE_RECORDS_URL = `/api/${record._modelId}/records/${record._id}/${record._rev}`
+  const response = await api(instanceId).delete(DELETE_RECORDS_URL)
   return response
 }
 
 export async function saveRecord(record, instanceId, modelId) {
-  const SAVE_RECORDS_URL = `/api/${instanceId}/${modelId}/records`
-  const response = await api.post(SAVE_RECORDS_URL, record)
+  const SAVE_RECORDS_URL = `/api/${modelId}/records`
+  const response = await api(instanceId).post(SAVE_RECORDS_URL, record)
 
   return await response.json()
 }
 
 export async function fetchDataForView(viewName, instanceId) {
-  const FETCH_RECORDS_URL = `/api/${instanceId}/views/${viewName}`
+  const FETCH_RECORDS_URL = `/api/views/${viewName}`
 
-  const response = await api.get(FETCH_RECORDS_URL)
+  const response = await api(instanceId).get(FETCH_RECORDS_URL)
   return await response.json()
 }
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
index 6264b74e09..6fb6cc8a2f 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@@ -27,8 +27,8 @@
   function onFinishedFieldEdit() {}
 
   async function saveModel() {
-    const SAVE_MODEL_URL = `/api/${instanceId}/models`
-    const response = await api.post(SAVE_MODEL_URL, model)
+    const SAVE_MODEL_URL = `/api/models`
+    const response = await api(instanceId).post(SAVE_MODEL_URL, model)
     const newModel = await response.json()
     backendUiStore.actions.models.create(newModel)
     onClosed()
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
index 4db445e54f..6f9f5dac1a 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
@@ -29,8 +29,8 @@
   function deleteView() {}
 
   async function saveView() {
-    const SAVE_VIEW_URL = `/api/${instanceId}/views`
-    const response = await api.post(SAVE_VIEW_URL, view)
+    const SAVE_VIEW_URL = `/api/views`
+    const response = await api(instanceId).post(SAVE_VIEW_URL, view)
     backendUiStore.update(state => {
       state.views = [...state.views, response.view]
       return state
diff --git a/packages/builder/src/components/nav/HierarchyRow.svelte b/packages/builder/src/components/nav/HierarchyRow.svelte
index 8921ab74de..7653e46fd0 100644
--- a/packages/builder/src/components/nav/HierarchyRow.svelte
+++ b/packages/builder/src/components/nav/HierarchyRow.svelte
@@ -7,7 +7,6 @@
     CreateEditModelModal,
     CreateEditViewModal,
   } from "components/database/ModelDataTable/modals"
-  import api from "builderStore/api"
 
   const { open, close } = getContext("simple-modal")
 
diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
index cc9e5d86a7..de7d010894 100644
--- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
+++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
@@ -52,8 +52,8 @@
   }
 
   async function deleteModel(modelToDelete) {
-    const DELETE_MODEL_URL = `/api/${instanceId}/models/${node._id}/${node._rev}`
-    const response = await api.delete(DELETE_MODEL_URL)
+    const DELETE_MODEL_URL = `/api/models/${node._id}/${node._rev}`
+    const response = await api(instanceId).delete(DELETE_MODEL_URL)
     backendUiStore.update(state => {
       state.models = state.models.filter(
         model => model._id !== modelToDelete._id
diff --git a/packages/builder/src/components/nav/UsersList.svelte b/packages/builder/src/components/nav/UsersList.svelte
index faef8a4234..29bc4a4ed3 100644
--- a/packages/builder/src/components/nav/UsersList.svelte
+++ b/packages/builder/src/components/nav/UsersList.svelte
@@ -16,8 +16,8 @@
   }
 
   async function fetchUsers() {
-    const FETCH_USERS_URL = `/api/${currentAppInfo.instanceId}/users`
-    const response = await api.get(FETCH_USERS_URL)
+    const FETCH_USERS_URL = `/api/users`
+    const response = await api(currentAppInfo.instanceId).get(FETCH_USERS_URL)
     const users = await response.json()
     backendUiStore.update(state => {
       state.users = users
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index f97f91df6b..523ed25031 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -108,6 +108,7 @@
         selectedComponentId,
         frontendDefinition,
         appId: $store.appId,
+        instanceId: $backendUiStore.selectedDatabase._id,
       })
     )
   }
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index b1bda4ab4f..c9272dddb2 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -20,6 +20,7 @@ export default `<html>
           font-weight: bold;
         }
     </style>
+    <script src='/assets/budibase-client.js'></script>
     <script>
       function receiveMessage(event) { 
 
@@ -44,13 +45,11 @@ export default `<html>
         document.head.appendChild(styles)
         styles.appendChild(document.createTextNode(data.styles))
 
-        document.cookie = "budibase:appid=" + data.appId
         window["##BUDIBASE_FRONTEND_DEFINITION##"] = data.frontendDefinition;
-        if (clientModule) {
-          clientModule.loadBudibase({ window, localStorage })
+        if (window.loadBudibase) {
+          loadBudibase({ window, localStorage })
         }
       }
-      let clientModule
       let styles
       let selectedComponentStyle
 
@@ -60,12 +59,9 @@ export default `<html>
         return false;
       }, true)
 
-      import('/_builder/budibase-client.esm.mjs')
-      .then(module => {
-        clientModule = module
-        window.addEventListener('message', receiveMessage)
-        window.dispatchEvent(new Event('bb-ready'))
-      })
+      window.addEventListener('message', receiveMessage)
+      window.dispatchEvent(new Event('bb-ready'))
+      
     </script>
   </head>
   <body>
diff --git a/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte b/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
index 9f51362419..4eed82bf25 100644
--- a/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
@@ -1,7 +1,6 @@
 <script>
   import { store, backendUiStore, workflowStore } from "builderStore"
   import { notifier } from "@beyonk/svelte-notifications"
-  import api from "builderStore/api"
   import ActionButton from "components/common/ActionButton.svelte"
 
   export let onClosed
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index 456505a4a8..85fae4c62f 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -3,7 +3,6 @@
   import { onMount, getContext } from "svelte"
   import { backendUiStore, workflowStore } from "builderStore"
   import { notifier } from "@beyonk/svelte-notifications"
-  import api from "builderStore/api"
   import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
   import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
 
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
index 506575f05d..aa71a2e9a5 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
@@ -3,7 +3,6 @@
   import { workflowStore, backendUiStore } from "builderStore"
   import { notifier } from "@beyonk/svelte-notifications"
   import Flowchart from "./flowchart/FlowChart.svelte"
-  import api from "builderStore/api"
 
   let selectedWorkflow
   let uiTree
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
index 523545a929..b70fe93640 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
@@ -3,7 +3,6 @@
   import { backendUiStore, workflowStore } from "builderStore"
   import { WorkflowList } from "../"
   import WorkflowBlock from "./WorkflowBlock.svelte"
-  import api from "builderStore/api"
   import blockDefinitions from "../blockDefinitions"
 
   let selectedTab = "TRIGGER"
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
index 66683182b8..315332890f 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
@@ -1,7 +1,6 @@
 <script>
   import { store, backendUiStore, workflowStore } from "builderStore"
   import { notifier } from "@beyonk/svelte-notifications"
-  import api from "builderStore/api"
   import ActionButton from "components/common/ActionButton.svelte"
 
   export let onClosed
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
index 7ba022fb78..f4c0f2ebf8 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@@ -3,7 +3,6 @@
   import { notifier } from "@beyonk/svelte-notifications"
   import { onMount, getContext } from "svelte"
   import { backendUiStore, workflowStore } from "builderStore"
-  import api from "builderStore/api"
   import CreateWorkflowModal from "./CreateWorkflowModal.svelte"
 
   const { open, close } = getContext("simple-modal")
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
index f1a1357978..ffa9e8f408 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
@@ -2,7 +2,6 @@
   import { onMount } from "svelte"
   import { backendUiStore, workflowStore } from "builderStore"
   import { WorkflowList, BlockList } from "./"
-  import api from "builderStore/api"
   import blockDefinitions from "./blockDefinitions"
 
   let selectedTab = "WORKFLOWS"
diff --git a/packages/client/src/render/getAppId.js b/packages/client/src/render/getAppId.js
index 1a8d445920..75753e381d 100644
--- a/packages/client/src/render/getAppId.js
+++ b/packages/client/src/render/getAppId.js
@@ -1,5 +1,9 @@
-export const getAppId = cookie =>
-  cookie
+export const getAppId = cookie => {
+  const base64Token = cookie
     .split(";")
-    .find(c => c.trim().startsWith("budibase:appid"))
+    .find(c => c.trim().startsWith("budibase:token"))
     .split("=")[1]
+
+  const user = JSON.parse(atob(base64Token.split(".")[1]))
+  return user.appId
+}
diff --git a/packages/client/tests/testAppDef.js b/packages/client/tests/testAppDef.js
index f75abb6556..bafba601e9 100644
--- a/packages/client/tests/testAppDef.js
+++ b/packages/client/tests/testAppDef.js
@@ -7,8 +7,9 @@ export const load = async (page, screens, url, host = "test.com") => {
 
   const fullUrl = `http://${host}${url}`
   const cookieJar = new jsdom.CookieJar()
+  const cookie = btoa('{}{"appId":"TEST_APP_ID"}signature')
   cookieJar.setCookie(
-    `budibase:appid=TEST_APP_ID;domain=${host};path=/`,
+    `budibase:token=${cookie};domain=${host};path=/`,
     fullUrl,
     {
       looseMode: false,
@@ -20,9 +21,6 @@ export const load = async (page, screens, url, host = "test.com") => {
     url: fullUrl,
     cookieJar,
   })
-  /*const cookie = tough.Cookie
-  cookie.key = "budibase:appid"
-  cookie.value = "TEST_APPID"*/
 
   autoAssignIds(page.props)
   for (let s of screens) {
@@ -44,7 +42,6 @@ export const load = async (page, screens, url, host = "test.com") => {
 }
 
 const addWindowGlobals = (window, page, screens) => {
-  window.document.cookie = "budibase:appid=TEST_APP_ID"
   window["##BUDIBASE_FRONTEND_DEFINITION##"] = {
     page,
     screens,
diff --git a/packages/server/src/api/controllers/accesslevel.js b/packages/server/src/api/controllers/accesslevel.js
index 9c9c7ff727..44b638ed41 100644
--- a/packages/server/src/api/controllers/accesslevel.js
+++ b/packages/server/src/api/controllers/accesslevel.js
@@ -8,7 +8,7 @@ const {
 } = require("../../utilities/accessLevels")
 
 exports.fetch = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const body = await db.query("database/by_type", {
     include_docs: true,
     key: ["accesslevel"],
@@ -19,12 +19,12 @@ exports.fetch = async function(ctx) {
     {
       _id: ADMIN_LEVEL_ID,
       name: "Admin",
-      permissions: await generateAdminPermissions(ctx.params.instanceId),
+      permissions: await generateAdminPermissions(ctx.user.instanceId),
     },
     {
       _id: POWERUSER_LEVEL_ID,
       name: "Power User",
-      permissions: await generatePowerUserPermissions(ctx.params.instanceId),
+      permissions: await generatePowerUserPermissions(ctx.user.instanceId),
     },
   ]
 
@@ -32,12 +32,12 @@ exports.fetch = async function(ctx) {
 }
 
 exports.find = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   ctx.body = await db.get(ctx.params.levelId)
 }
 
 exports.update = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const level = await db.get(ctx.params.levelId)
   level.name = ctx.body.name
   level.permissions = ctx.request.body.permissions
@@ -48,7 +48,7 @@ exports.update = async function(ctx) {
 }
 
 exports.patch = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const level = await db.get(ctx.params.levelId)
   const { removedPermissions, addedPermissions, _rev } = ctx.request.body
 
@@ -84,7 +84,7 @@ exports.patch = async function(ctx) {
 }
 
 exports.create = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
 
   const level = {
     name: ctx.request.body.name,
@@ -101,7 +101,7 @@ exports.create = async function(ctx) {
 }
 
 exports.destroy = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.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/application.js b/packages/server/src/api/controllers/application.js
index 0f604be0e7..ab4820794f 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -9,6 +9,7 @@ const { copy, exists, readFile, writeFile } = require("fs-extra")
 const { budibaseAppsDir } = require("../../utilities/budibaseDir")
 const { exec } = require("child_process")
 const sqrl = require("squirrelly")
+const setBuilderToken = require("../../utilities/builder/setBuilderToken")
 
 exports.fetch = async function(ctx) {
   const db = new CouchDB(ClientDb.name(getClientId(ctx)))
@@ -25,6 +26,14 @@ exports.fetchAppPackage = async function(ctx) {
   const db = new CouchDB(ClientDb.name(clientId))
   const application = await db.get(ctx.params.applicationId)
   ctx.body = await getPackageForBuilder(ctx.config, application)
+  /* 
+  instance is hardcoded now - this can only change when we move
+  pages and screens into the database 
+  */
+  const devInstance = application.instances.find(
+    i => i.name === `dev-${clientId}`
+  )
+  setBuilderToken(ctx, ctx.params.applicationId, devInstance._id)
 }
 
 exports.create = async function(ctx) {
@@ -37,10 +46,12 @@ exports.create = async function(ctx) {
   const appId = newid()
   // insert an appId -> clientId lookup
   const masterDb = new CouchDB("clientAppLookup")
+
   await masterDb.put({
     _id: appId,
     clientId,
   })
+
   const db = new CouchDB(ClientDb.name(clientId))
 
   const newApplication = {
@@ -56,18 +67,18 @@ exports.create = async function(ctx) {
     description: ctx.request.body.description,
   }
 
-  const { rev } = await db.post(newApplication)
+  const { rev } = await db.put(newApplication)
   newApplication._rev = rev
-
   const createInstCtx = {
-    params: {
-      applicationId: newApplication._id,
+    user: {
+      appId: newApplication._id,
     },
     request: {
       body: { name: `dev-${clientId}` },
     },
   }
   await instanceController.create(createInstCtx)
+  newApplication.instances.push(createInstCtx.body)
 
   if (ctx.isDev) {
     const newAppFolder = await createEmptyAppPackage(ctx, newApplication)
diff --git a/packages/server/src/api/controllers/auth.js b/packages/server/src/api/controllers/auth.js
index 6ca6d7edac..88eb86c472 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -4,7 +4,7 @@ const ClientDb = require("../../db/clientDb")
 const bcrypt = require("../../utilities/bcrypt")
 
 exports.authenticate = async ctx => {
-  if (!ctx.appId) ctx.throw(400, "No appId")
+  if (!ctx.user.appId) ctx.throw(400, "No appId")
 
   const { username, password } = ctx.request.body
 
@@ -13,18 +13,22 @@ exports.authenticate = async ctx => {
 
   const masterDb = new CouchDB("clientAppLookup")
 
-  const { clientId } = await masterDb.get(ctx.appId)
+  const { clientId } = await masterDb.get(ctx.user.appId)
 
   if (!clientId) {
     ctx.throw(400, "ClientId not suplied")
   }
   // find the instance that the user is associated with
   const db = new CouchDB(ClientDb.name(clientId))
-  const app = await db.get(ctx.appId)
+  const app = await db.get(ctx.user.appId)
   const instanceId = app.userInstanceMap[username]
 
   if (!instanceId)
-    ctx.throw(500, "User is not associated with an instance of app", ctx.appId)
+    ctx.throw(
+      500,
+      "User is not associated with an instance of app",
+      ctx.user.appId
+    )
 
   // Check the user exists in the instance DB by username
   const instanceDb = new CouchDB(instanceId)
@@ -43,6 +47,7 @@ exports.authenticate = async ctx => {
     const payload = {
       userId: dbUser._id,
       accessLevelId: dbUser.accessLevelId,
+      appId: ctx.user.appId,
       instanceId,
     }
 
diff --git a/packages/server/src/api/controllers/instance.js b/packages/server/src/api/controllers/instance.js
index 155437371f..903d3ff651 100644
--- a/packages/server/src/api/controllers/instance.js
+++ b/packages/server/src/api/controllers/instance.js
@@ -4,19 +4,19 @@ const newid = require("../../db/newid")
 
 exports.create = async function(ctx) {
   const instanceName = ctx.request.body.name
-  const appShortId = ctx.params.applicationId.substring(0, 7)
+  const { appId } = ctx.user
+  const appShortId = appId.substring(0, 7)
   const instanceId = `inst_${appShortId}_${newid()}`
-  const { applicationId } = ctx.params
 
   const masterDb = new CouchDB("clientAppLookup")
-  const { clientId } = await masterDb.get(applicationId)
+  const { clientId } = await masterDb.get(appId)
 
   const db = new CouchDB(instanceId)
   await db.put({
     _id: "_design/database",
     metadata: {
       clientId,
-      applicationId,
+      applicationId: appId,
     },
     views: {
       by_username: {
@@ -46,7 +46,7 @@ exports.create = async function(ctx) {
 
   // Add the new instance under the app clientDB
   const clientDb = new CouchDB(client.name(clientId))
-  const budibaseApp = await clientDb.get(applicationId)
+  const budibaseApp = await clientDb.get(appId)
   const instance = { _id: instanceId, name: instanceName }
   budibaseApp.instances.push(instance)
   await clientDb.put(budibaseApp)
diff --git a/packages/server/src/api/controllers/model.js b/packages/server/src/api/controllers/model.js
index 650342b33c..e7792195cb 100644
--- a/packages/server/src/api/controllers/model.js
+++ b/packages/server/src/api/controllers/model.js
@@ -2,7 +2,7 @@ const CouchDB = require("../../db")
 const newid = require("../../db/newid")
 
 exports.fetch = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const body = await db.query("database/by_type", {
     include_docs: true,
     key: ["model"],
@@ -11,13 +11,13 @@ exports.fetch = async function(ctx) {
 }
 
 exports.find = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const model = await db.get(ctx.params.id)
   ctx.body = model
 }
 
 exports.create = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const newModel = {
     type: "model",
     ...ctx.request.body,
@@ -65,7 +65,7 @@ exports.create = async function(ctx) {
 exports.update = async function() {}
 
 exports.destroy = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
 
   const modelToDelete = await db.get(ctx.params.modelId)
 
diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js
index cf8eb27606..4e4af81e01 100644
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@@ -3,7 +3,7 @@ const validateJs = require("validate.js")
 const newid = require("../../db/newid")
 
 exports.save = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const record = ctx.request.body
   record.modelId = ctx.params.modelId
 
@@ -46,7 +46,7 @@ exports.save = async function(ctx) {
   ctx.eventEmitter &&
     ctx.eventEmitter.emit(`record:save`, {
       record,
-      instanceId: ctx.params.instanceId,
+      instanceId: ctx.user.instanceId,
     })
   ctx.body = record
   ctx.status = 200
@@ -54,7 +54,7 @@ exports.save = async function(ctx) {
 }
 
 exports.fetchView = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const response = await db.query(`database/${ctx.params.viewName}`, {
     include_docs: true,
   })
@@ -62,7 +62,7 @@ exports.fetchView = async function(ctx) {
 }
 
 exports.fetchModelRecords = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const response = await db.query(`database/all_${ctx.params.modelId}`, {
     include_docs: true,
   })
@@ -70,7 +70,7 @@ exports.fetchModelRecords = async function(ctx) {
 }
 
 exports.search = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const response = await db.allDocs({
     include_docs: true,
     ...ctx.request.body,
@@ -79,7 +79,7 @@ exports.search = async function(ctx) {
 }
 
 exports.find = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.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")
@@ -89,7 +89,7 @@ exports.find = async function(ctx) {
 }
 
 exports.destroy = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.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")
@@ -101,7 +101,7 @@ exports.destroy = async function(ctx) {
 
 exports.validate = async function(ctx) {
   const errors = await validate({
-    instanceId: ctx.params.instanceId,
+    instanceId: ctx.user.instanceId,
     modelId: ctx.params.modelId,
     record: ctx.request.body,
   })
diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index 82545d459c..181af162c5 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -4,11 +4,12 @@ const {
   budibaseAppsDir,
   budibaseTempDir,
 } = require("../../utilities/budibaseDir")
-const env = require("../../environment")
+const setBuilderToken = require("../../utilities/builder/setBuilderToken")
+const { ANON_LEVEL_ID } = require("../../utilities/accessLevels")
 
 exports.serveBuilder = async function(ctx) {
   let builderPath = resolve(__dirname, "../../../builder")
-  ctx.cookies.set("builder:token", env.ADMIN_SECRET)
+  setBuilderToken(ctx)
   await send(ctx, ctx.file, { root: ctx.devPath || builderPath })
 }
 
@@ -22,11 +23,15 @@ exports.serveApp = async function(ctx) {
   )
   // only set the appId cookie for /appId .. we COULD check for valid appIds
   // but would like to avoid that DB hit
-  if (looksLikeAppId(ctx.params.appId)) {
-    ctx.cookies.set("budibase:appid", ctx.params.appId, {
+  if (looksLikeAppId(ctx.params.appId) && !ctx.isAuthenticated) {
+    const anonToken = {
+      userId: "ANON",
+      accessLevelId: ANON_LEVEL_ID,
+      appId: ctx.params.appId,
+    }
+    ctx.cookies.set("budibase:token", anonToken, {
       path: "/",
       httpOnly: false,
-      expires: new Date(2099, 1, 1),
     })
   }
 
@@ -37,7 +42,7 @@ exports.serveAppAsset = async function(ctx) {
   // default to homedir
   const appPath = resolve(
     budibaseAppsDir(),
-    ctx.appId,
+    ctx.user.appId,
     "public",
     ctx.isAuthenticated ? "main" : "unauthenticated"
   )
@@ -49,7 +54,7 @@ exports.serveComponentLibrary = async function(ctx) {
   // default to homedir
   let componentLibraryPath = resolve(
     budibaseAppsDir(),
-    ctx.appId,
+    ctx.user.appId,
     "node_modules",
     decodeURI(ctx.query.library),
     "dist"
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index 1b66cf1cca..71816f1c78 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -8,7 +8,7 @@ const {
 } = require("../../utilities/accessLevels")
 
 exports.fetch = async function(ctx) {
-  const database = new CouchDB(ctx.params.instanceId)
+  const database = new CouchDB(ctx.user.instanceId)
   const data = await database.query("database/by_type", {
     include_docs: true,
     key: ["user"],
@@ -18,7 +18,7 @@ exports.fetch = async function(ctx) {
 }
 
 exports.create = async function(ctx) {
-  const database = new CouchDB(ctx.params.instanceId)
+  const database = new CouchDB(ctx.user.instanceId)
   const appId = (await database.get("_design/database")).metadata.applicationId
   const { username, password, name, accessLevelId } = ctx.request.body
 
@@ -50,7 +50,7 @@ exports.create = async function(ctx) {
 
   app.userInstanceMap = {
     ...app.userInstanceMap,
-    [username]: ctx.params.instanceId,
+    [username]: ctx.user.instanceId,
   }
   await db.put(app)
 
@@ -66,14 +66,14 @@ exports.create = async function(ctx) {
 exports.update = async function() {}
 
 exports.destroy = async function(ctx) {
-  const database = new CouchDB(ctx.params.instanceId)
+  const database = new CouchDB(ctx.user.instanceId)
   await database.destroy(getUserId(ctx.params.username))
   ctx.message = `User ${ctx.params.username} deleted.`
   ctx.status = 200
 }
 
 exports.find = async function(ctx) {
-  const database = new CouchDB(ctx.params.instanceId)
+  const database = new CouchDB(ctx.user.instanceId)
   const user = await database.get(getUserId(ctx.params.username))
   ctx.body = {
     username: user.username,
diff --git a/packages/server/src/api/controllers/view.js b/packages/server/src/api/controllers/view.js
index 9e847da358..d449ae36f9 100644
--- a/packages/server/src/api/controllers/view.js
+++ b/packages/server/src/api/controllers/view.js
@@ -3,7 +3,7 @@ const CouchDB = require("../../db")
 const controller = {
   query: async () => {},
   fetch: async ctx => {
-    const db = new CouchDB(ctx.params.instanceId)
+    const db = new CouchDB(ctx.user.instanceId)
     const designDoc = await db.get("_design/database")
     const response = []
 
@@ -24,7 +24,7 @@ const controller = {
     ctx.body = response
   },
   create: async ctx => {
-    const db = new CouchDB(ctx.params.instanceId)
+    const db = new CouchDB(ctx.user.instanceId)
     const newView = ctx.request.body
 
     const designDoc = await db.get("_design/database")
@@ -38,7 +38,7 @@ const controller = {
     ctx.message = `View ${newView.name} created successfully.`
   },
   destroy: async ctx => {
-    const db = new CouchDB(ctx.params.instanceId)
+    const db = new CouchDB(ctx.user.instanceId)
     ctx.body = await db.destroy(ctx.params.userId)
   },
 }
diff --git a/packages/server/src/api/controllers/workflow/index.js b/packages/server/src/api/controllers/workflow/index.js
index f1dd1bcb89..5c77bbfaa6 100644
--- a/packages/server/src/api/controllers/workflow/index.js
+++ b/packages/server/src/api/controllers/workflow/index.js
@@ -2,7 +2,7 @@ const CouchDB = require("../../../db")
 const newid = require("../../../db/newid")
 
 exports.create = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const workflow = ctx.request.body
 
   workflow._id = newid()
@@ -22,7 +22,7 @@ exports.create = async function(ctx) {
 }
 
 exports.update = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const workflow = ctx.request.body
 
   const response = await db.put(workflow)
@@ -40,7 +40,7 @@ exports.update = async function(ctx) {
 }
 
 exports.fetch = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   const response = await db.query(`database/by_type`, {
     key: ["workflow"],
     include_docs: true,
@@ -69,6 +69,6 @@ exports.fetchActionScript = async function(ctx) {
 }
 
 exports.destroy = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
+  const db = new CouchDB(ctx.user.instanceId)
   ctx.body = await db.remove(ctx.params.id, ctx.params.rev)
 }
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 8c69407736..e6143d6725 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -60,11 +60,6 @@ router.use(async (ctx, next) => {
   }
 })
 
-router.use(async (ctx, next) => {
-  ctx.appId = ctx.cookies.get("budibase:appid")
-  await next()
-})
-
 router.use(authRoutes.routes())
 router.use(authRoutes.allowedMethods())
 
diff --git a/packages/server/src/api/routes/accesslevel.js b/packages/server/src/api/routes/accesslevel.js
index d34acab02c..af1ff80ec6 100644
--- a/packages/server/src/api/routes/accesslevel.js
+++ b/packages/server/src/api/routes/accesslevel.js
@@ -4,11 +4,11 @@ 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)
+  .post("/api/accesslevels", controller.create)
+  .put("/api/accesslevels", controller.update)
+  .get("/api/accesslevels", controller.fetch)
+  .get("/api/accesslevels/:levelId", controller.find)
+  .delete("/api/accesslevels/:levelId/:rev", controller.destroy)
+  .patch("/api/accesslevels/:levelId", controller.patch)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/instance.js b/packages/server/src/api/routes/instance.js
index 9b7b3db511..00fce6bb12 100644
--- a/packages/server/src/api/routes/instance.js
+++ b/packages/server/src/api/routes/instance.js
@@ -6,7 +6,7 @@ const { BUILDER } = require("../../utilities/accessLevels")
 const router = Router()
 
 router
-  .post("/api/:applicationId/instances", authorized(BUILDER), controller.create)
+  .post("/api/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 f1ec46dbe5..b5ab9b3f95 100644
--- a/packages/server/src/api/routes/model.js
+++ b/packages/server/src/api/routes/model.js
@@ -1,17 +1,21 @@
 const Router = require("@koa/router")
 const modelController = require("../controllers/model")
 const authorized = require("../../middleware/authorized")
-const { BUILDER } = require("../../utilities/accessLevels")
+const { BUILDER, READ_MODEL } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .get("/api/:instanceId/models", authorized(BUILDER), modelController.fetch)
-  .get("/api/:instanceId/models/:id", authorized(BUILDER), modelController.find)
-  .post("/api/:instanceId/models", authorized(BUILDER), modelController.create)
+  .get("/api/models", modelController.fetch)
+  .get(
+    "/api/models/:id",
+    authorized(READ_MODEL, ctx => ctx.params.id),
+    modelController.find
+  )
+  .post("/api/models", authorized(BUILDER), modelController.create)
   // .patch("/api/:instanceId/models", controller.update)
   .delete(
-    "/api/:instanceId/models/:modelId/:revId",
+    "/api/models/:modelId/:revId",
     authorized(BUILDER),
     modelController.destroy
   )
diff --git a/packages/server/src/api/routes/record.js b/packages/server/src/api/routes/record.js
index d555d3d8c8..deba513aa9 100644
--- a/packages/server/src/api/routes/record.js
+++ b/packages/server/src/api/routes/record.js
@@ -7,28 +7,28 @@ const router = Router()
 
 router
   .get(
-    "/api/:instanceId/:modelId/records",
+    "/api/:modelId/records",
     authorized(READ_MODEL, ctx => ctx.params.modelId),
     recordController.fetchModelRecords
   )
   .get(
-    "/api/:instanceId/:modelId/records/:recordId",
+    "/api/:modelId/records/:recordId",
     authorized(READ_MODEL, ctx => ctx.params.modelId),
     recordController.find
   )
-  .post("/api/:instanceId/records/search", recordController.search)
+  .post("/api/records/search", recordController.search)
   .post(
-    "/api/:instanceId/:modelId/records",
+    "/api/:modelId/records",
     authorized(WRITE_MODEL, ctx => ctx.params.modelId),
     recordController.save
   )
   .post(
-    "/api/:instanceId/:modelId/records/validate",
+    "/api/:modelId/records/validate",
     authorized(WRITE_MODEL, ctx => ctx.params.modelId),
     recordController.validate
   )
   .delete(
-    "/api/:instanceId/:modelId/records/:recordId/:revId",
+    "/api/:modelId/records/:recordId/:revId",
     authorized(WRITE_MODEL, ctx => ctx.params.modelId),
     recordController.destroy
   )
diff --git a/packages/server/src/api/routes/screen.js b/packages/server/src/api/routes/screen.js
index 19823aab68..60e29bf363 100644
--- a/packages/server/src/api/routes/screen.js
+++ b/packages/server/src/api/routes/screen.js
@@ -6,12 +6,8 @@ const { BUILDER } = require("../../utilities/accessLevels")
 const router = Router()
 
 router
-  .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
-  )
+  .get("/api/screens", authorized(BUILDER), controller.fetch)
+  .post("/api/screens", authorized(BUILDER), controller.save)
+  .delete("/api/: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
index ef2d1575cd..9cd3495ed8 100644
--- a/packages/server/src/api/routes/tests/accesslevel.spec.js
+++ b/packages/server/src/api/routes/tests/accesslevel.spec.js
@@ -36,8 +36,8 @@ describe("/accesslevels", () => {
 
   beforeEach(async () => {
     instanceId = (await createInstance(request, appId))._id
-    model = await createModel(request, instanceId)
-    view = await createView(request, instanceId)
+    model = await createModel(request, appId, instanceId)
+    view = await createView(request, appId, instanceId)
   })
 
   describe("create", () => {
@@ -46,7 +46,7 @@ describe("/accesslevels", () => {
       const res = await request
         .post(`/api/${instanceId}/accesslevels`)
         .send({ name: "user" })
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -64,7 +64,7 @@ describe("/accesslevels", () => {
       const createRes = await request
         .post(`/api/${instanceId}/accesslevels`)
         .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL }] })
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -72,7 +72,7 @@ describe("/accesslevels", () => {
 
       const res = await request
         .get(`/api/${instanceId}/accesslevels`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -97,7 +97,7 @@ describe("/accesslevels", () => {
       const createRes = await request
         .post(`/api/${instanceId}/accesslevels`)
         .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL } ] })
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -105,12 +105,12 @@ describe("/accesslevels", () => {
 
       await request
         .delete(`/api/${instanceId}/accesslevels/${customLevel._id}/${customLevel._rev}`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect(200)
 
       await request
         .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect(404)      
     })
   })
@@ -120,7 +120,7 @@ describe("/accesslevels", () => {
       const createRes = await request
         .post(`/api/${instanceId}/accesslevels`)
         .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL }] })
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -132,13 +132,13 @@ describe("/accesslevels", () => {
           _rev: customLevel._rev,
           addedPermissions:  [ { itemId: model._id, name: WRITE_MODEL } ] 
         })
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
         .expect(200)
 
       const finalRes = await request
         .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect(200) 
 
       expect(finalRes.body.permissions.length).toBe(2)
@@ -156,7 +156,7 @@ describe("/accesslevels", () => {
             { itemId: model._id, name: WRITE_MODEL },
           ] 
         })
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -168,13 +168,13 @@ describe("/accesslevels", () => {
           _rev: customLevel._rev,
           removedPermissions:  [ { itemId: model._id, name: WRITE_MODEL }] 
         })
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
         .expect(200)
 
       const finalRes = await request
         .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(appId, instanceId))
         .expect(200) 
 
       expect(finalRes.body.permissions.length).toBe(1)
diff --git a/packages/server/src/api/routes/tests/application.spec.js b/packages/server/src/api/routes/tests/application.spec.js
index 7f64419778..0bde24a02f 100644
--- a/packages/server/src/api/routes/tests/application.spec.js
+++ b/packages/server/src/api/routes/tests/application.spec.js
@@ -34,14 +34,14 @@ describe("/applications", () => {
       const res = await request
         .post("/api/applications")
         .send({ name: "My App" })
-        .set(defaultHeaders)
+        .set(defaultHeaders())
         .expect('Content-Type', /json/)
         .expect(200)
       expect(res.res.statusMessage).toEqual("Application My App created successfully")
       expect(res.body._id).toBeDefined()
     })
 
-    it("should apply authorization to endpoint", async () => {
+    fit("should apply authorization to endpoint", async () => {
       const otherApplication = await createApplication(request) 
       const instance = await createInstance(request, otherApplication._id)
       await builderEndpointShouldBlockNormalUsers({
@@ -49,6 +49,7 @@ describe("/applications", () => {
         method: "POST",
         url: `/api/applications`,
         instanceId: instance._id,
+        appId: otherApplication._id,
         body: { name: "My App" }
       })
     })
@@ -63,7 +64,7 @@ describe("/applications", () => {
 
       const res = await request
         .get("/api/applications")
-        .set(defaultHeaders)
+        .set(defaultHeaders())
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -77,13 +78,13 @@ describe("/applications", () => {
       const blah = await request
         .post("/api/applications")
         .send({ name: "app2", clientId: "new_client"})
-        .set(defaultHeaders)
+        .set(defaultHeaders())
         .expect('Content-Type', /json/)
         //.expect(200)
 
       const client1Res = await request
         .get(`/api/applications?clientId=${TEST_CLIENT_ID}`)
-        .set(defaultHeaders)
+        .set(defaultHeaders())
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -92,7 +93,7 @@ describe("/applications", () => {
 
       const client2Res = await request
         .get(`/api/applications?clientId=new_client`)
-        .set(defaultHeaders)
+        .set(defaultHeaders())
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -109,6 +110,7 @@ describe("/applications", () => {
         method: "GET",
         url: `/api/applications`,
         instanceId: instance._id,
+        appId: otherApplication._id,
       })
     })
   })
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index e21d459d3a..ebf09e392d 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -4,8 +4,12 @@ const supertest = require("supertest")
 const app = require("../../../app")
 const {
   POWERUSER_LEVEL_ID,
+  ANON_LEVEL_ID,
+  BUILDER_LEVEL_ID,
   generateAdminPermissions,
 } = require("../../../utilities/accessLevels")
+const jwt = require("jsonwebtoken")
+const env = require("../../../environment")
 
 const TEST_CLIENT_ID = "test-client-id"
 
@@ -20,13 +24,24 @@ exports.supertest = async () => {
   return { request, server }
 }
 
-exports.defaultHeaders = {
-  Accept: "application/json",
-  Cookie: ["builder:token=test-admin-secret"],
-  "x-user-agent": "Budibase Builder",
+exports.defaultHeaders = (appId, instanceId) => {
+  const builderUser = {
+    userId: "BUILDER",
+    accessLevelId: BUILDER_LEVEL_ID,
+    appId,
+    instanceId,
+  }
+
+  const builderToken = jwt.sign(builderUser, env.JWT_SECRET)
+
+  return {
+    Accept: "application/json",
+    Cookie: [`builder:token=${builderToken}`],
+    "x-user-agent": "Budibase Builder",
+  }
 }
 
-exports.createModel = async (request, instanceId, model) => {
+exports.createModel = async (request, appId, instanceId, model) => {
   model = model || {
     name: "TestModel",
     type: "model",
@@ -43,19 +58,19 @@ exports.createModel = async (request, instanceId, model) => {
 
   const res = await request
     .post(`/api/${instanceId}/models`)
-    .set(exports.defaultHeaders)
+    .set(exports.defaultHeaders(appId, instanceId))
     .send(model)
   return res.body
 }
 
-exports.createView = async (request, instanceId, view) => {
+exports.createView = async (request, appId, instanceId, view) => {
   view = view || {
     map: "function(doc) { emit(doc[doc.key], doc._id); } ",
   }
 
   const res = await request
     .post(`/api/${instanceId}/views`)
-    .set(exports.defaultHeaders)
+    .set(exports.defaultHeaders(appId, instanceId))
     .send(view)
   return res.body
 }
@@ -65,7 +80,7 @@ exports.createClientDatabase = async id => await create(id || TEST_CLIENT_ID)
 exports.createApplication = async (request, name = "test_application") => {
   const res = await request
     .post("/api/applications")
-    .set(exports.defaultHeaders)
+    .set(exports.defaultHeaders())
     .send({
       name,
     })
@@ -76,8 +91,8 @@ exports.destroyClientDatabase = async () => await destroy(TEST_CLIENT_ID)
 
 exports.createInstance = async (request, appId) => {
   const res = await request
-    .post(`/api/${appId}/instances`)
-    .set(exports.defaultHeaders)
+    .post(`/api/instances`)
+    .set(exports.defaultHeaders(appId))
     .send({
       name: "test-instance",
     })
@@ -86,13 +101,14 @@ exports.createInstance = async (request, appId) => {
 
 exports.createUser = async (
   request,
+  appId,
   instanceId,
   username = "babs",
   password = "babs_password"
 ) => {
   const res = await request
-    .post(`/api/${instanceId}/users`)
-    .set(exports.defaultHeaders)
+    .post(`/api/users`)
+    .set(exports.defaultHeaders(appId, instanceId))
     .send({
       name: "Bill",
       username,
@@ -104,6 +120,7 @@ exports.createUser = async (
 
 const createUserWithOnePermission = async (
   request,
+  appId,
   instanceId,
   permName,
   itemId
@@ -115,17 +132,19 @@ const createUserWithOnePermission = async (
 
   return await createUserWithPermissions(
     request,
+    appId,
     instanceId,
     permissions,
     "onePermOnlyUser"
   )
 }
 
-const createUserWithAdminPermissions = async (request, instanceId) => {
+const createUserWithAdminPermissions = async (request, appId, instanceId) => {
   let permissions = await generateAdminPermissions(instanceId)
 
   return await createUserWithPermissions(
     request,
+    appId,
     instanceId,
     permissions,
     "adminUser"
@@ -134,6 +153,7 @@ const createUserWithAdminPermissions = async (request, instanceId) => {
 
 const createUserWithAllPermissionExceptOne = async (
   request,
+  appId,
   instanceId,
   permName,
   itemId
@@ -145,6 +165,7 @@ const createUserWithAllPermissionExceptOne = async (
 
   return await createUserWithPermissions(
     request,
+    appId,
     instanceId,
     permissions,
     "allPermsExceptOneUser"
@@ -153,6 +174,7 @@ const createUserWithAllPermissionExceptOne = async (
 
 const createUserWithPermissions = async (
   request,
+  appId,
   instanceId,
   permissions,
   username
@@ -160,12 +182,12 @@ const createUserWithPermissions = async (
   const accessRes = await request
     .post(`/api/${instanceId}/accesslevels`)
     .send({ name: "TestLevel", permissions })
-    .set(exports.defaultHeaders)
+    .set(exports.defaultHeaders(appId, instanceId))
 
   const password = `password_${username}`
   await request
     .post(`/api/${instanceId}/users`)
-    .set(exports.defaultHeaders)
+    .set(exports.defaultHeaders(appId, instanceId))
     .send({
       name: username,
       username,
@@ -173,12 +195,20 @@ const createUserWithPermissions = async (
       accessLevelId: accessRes.body._id,
     })
 
-  const db = new CouchDB(instanceId)
-  const designDoc = await db.get("_design/database")
+  //const db = new CouchDB(instanceId)
+  //const designDoc = await db.get("_design/database")
+
+  const anonUser = {
+    userId: "ANON",
+    accessLevelId: ANON_LEVEL_ID,
+    appId: appId,
+  }
+
+  const anonToken = jwt.sign(anonUser, env.JWT_SECRET)
 
   const loginResult = await request
     .post(`/api/authenticate`)
-    .set({ Cookie: `budibase:appid=${designDoc.metadata.applicationId}` })
+    .set({ Cookie: `budibase:token=${anonToken}` })
     .send({ username, password })
 
   // returning necessary request headers
@@ -193,12 +223,14 @@ exports.testPermissionsForEndpoint = async ({
   method,
   url,
   body,
+  appId,
   instanceId,
   permissionName,
   itemId,
 }) => {
   const headers = await createUserWithOnePermission(
     request,
+    appId,
     instanceId,
     permissionName,
     itemId
@@ -210,6 +242,7 @@ exports.testPermissionsForEndpoint = async ({
 
   const noPermsHeaders = await createUserWithAllPermissionExceptOne(
     request,
+    appId,
     instanceId,
     permissionName,
     itemId
@@ -225,9 +258,14 @@ exports.builderEndpointShouldBlockNormalUsers = async ({
   method,
   url,
   body,
+  appId,
   instanceId,
 }) => {
-  const headers = await createUserWithAdminPermissions(request, instanceId)
+  const headers = await createUserWithAdminPermissions(
+    request,
+    appId,
+    instanceId
+  )
 
   await createRequest(request, method, url, body)
     .set(headers)
diff --git a/packages/server/src/api/routes/tests/instance.spec.js b/packages/server/src/api/routes/tests/instance.spec.js
index 0b8bd44cb6..3bbed4d8e6 100644
--- a/packages/server/src/api/routes/tests/instance.spec.js
+++ b/packages/server/src/api/routes/tests/instance.spec.js
@@ -24,9 +24,9 @@ describe("/instances", () => {
 
     it("returns a success message when the instance database is successfully created", async () => {
       const res = await request
-        .post(`/api/${TEST_APP_ID}/instances`)
+        .post(`/api/instances`)
         .send({ name: "test-instance" })
-        .set(defaultHeaders)
+        .set(defaultHeaders(TEST_APP_ID))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -42,7 +42,7 @@ describe("/instances", () => {
       const instance = await createInstance(request, TEST_APP_ID);
       const res = await request
         .delete(`/api/instances/${instance._id}`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(TEST_APP_ID))
         .expect(200)
 
       expect(res.res.statusMessage).toEqual(`Instance Database ${instance._id} successfully destroyed.`);
diff --git a/packages/server/src/api/routes/tests/model.spec.js b/packages/server/src/api/routes/tests/model.spec.js
index 7134245fb3..f4708be58d 100644
--- a/packages/server/src/api/routes/tests/model.spec.js
+++ b/packages/server/src/api/routes/tests/model.spec.js
@@ -41,7 +41,7 @@ describe("/models", () => {
             name: { type: "string" }
           }
         })
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (err, res) => {
@@ -73,13 +73,13 @@ describe("/models", () => {
 
     beforeEach(async () => {
       instance = await createInstance(request, app._id)
-      testModel = await createModel(request, instance._id, testModel)
+      testModel = await createModel(request, app._id, instance._id, testModel)
     });
 
     it("returns all the models for that instance in the response body", done => {
       request
         .get(`/api/${instance._id}/models`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (_, res) => {
@@ -105,7 +105,7 @@ describe("/models", () => {
 
     beforeEach(async () => {
       instance = await createInstance(request, app._id)
-      testModel = await createModel(request, instance._id, testModel)
+      testModel = await createModel(request, app._id, instance._id, testModel)
     });
 
     afterEach(() => {
@@ -115,7 +115,7 @@ describe("/models", () => {
     it("returns a success response when a model is deleted.", async done => {
       request
         .delete(`/api/${instance._id}/models/${testModel._id}/${testModel._rev}`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (_, res) => {
@@ -125,7 +125,7 @@ describe("/models", () => {
       })
 
     it("deletes linked references to the model after deletion", async done => {
-      const linkedModel = await createModel(request, instance._id, {
+      const linkedModel = await createModel(request, app._id, instance._id, {
         name: "LinkedModel",
         type: "model",
         key: "name",
@@ -148,7 +148,7 @@ describe("/models", () => {
 
       request
         .delete(`/api/${instance._id}/models/${testModel._id}/${testModel._rev}`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .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 22ac67ecdc..c856cfc47a 100644
--- a/packages/server/src/api/routes/tests/record.spec.js
+++ b/packages/server/src/api/routes/tests/record.spec.js
@@ -27,7 +27,7 @@ describe("/records", () => {
 
   beforeEach(async () => {
     instance = await createInstance(request, app._id)
-    model = await createModel(request, instance._id)
+    model = await createModel(request, app._id, instance._id)
     record = {
       name: "Test Contact",
       status: "new",
@@ -39,13 +39,13 @@ describe("/records", () => {
 
     const createRecord = async r => 
       await request
-        .post(`/api/${instance._id}/${model._id}/records`)
+        .post(`/api/${model._id}/records`)
         .send(r || record)
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
 
-    it("returns a success message when the record is created", async () => {
+    fit("returns a success message when the record is created", async () => {
       const res = await createRecord()
       expect(res.res.statusMessage).toEqual(`${model.name} created successfully`)           
       expect(res.body.name).toEqual("Test Contact")
@@ -57,14 +57,14 @@ describe("/records", () => {
       const existing = rec.body
 
       const res = await request
-        .post(`/api/${instance._id}/${model._id}/records`)
+        .post(`/api/${model._id}/records`)
         .send({
           _id: existing._id,
           _rev: existing._rev,
           modelId: model._id,
           name: "Updated Name",
         })
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -77,8 +77,8 @@ describe("/records", () => {
       const existing = rec.body
 
       const res = await request
-        .get(`/api/${instance._id}/${model._id}/records/${existing._id}`)
-        .set(defaultHeaders)
+        .get(`/api/${model._id}/records/${existing._id}`)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -100,8 +100,8 @@ describe("/records", () => {
       await createRecord(newRecord)
 
       const res = await request
-        .get(`/api/${instance._id}/${model._id}/records`)
-        .set(defaultHeaders)
+        .get(`/api/${model._id}/records`)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -122,8 +122,8 @@ describe("/records", () => {
       const recordIds = [record.body._id, secondRecord.body._id]
 
       const res = await request
-        .post(`/api/${instance._id}/records/search`)
-        .set(defaultHeaders)
+        .post(`/api/records/search`)
+        .set(defaultHeaders(app._id, instance._id))
         .send({
           keys: recordIds
         })
@@ -137,8 +137,8 @@ describe("/records", () => {
     it("load should return 404 when record does not exist", async () => {
       await createRecord()
       await request
-        .get(`/api/${instance._id}/${model._id}/records/not-a-valid-id`)
-        .set(defaultHeaders)
+        .get(`/api/${model._id}/records/not-a-valid-id`)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(404)
     })
@@ -147,9 +147,9 @@ describe("/records", () => {
   describe("validate", () => {
     it("should return no errors on valid record", async () => {
       const result = await request
-        .post(`/api/${instance._id}/${model._id}/records/validate`)
+        .post(`/api/${model._id}/records/validate`)
         .send({ name: "ivan" })
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -159,9 +159,9 @@ describe("/records", () => {
 
     it("should errors on invalid record", async () => {
       const result = await request
-        .post(`/api/${instance._id}/${model._id}/records/validate`)
+        .post(`/api/${model._id}/records/validate`)
         .send({ name: 1 })
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
       
diff --git a/packages/server/src/api/routes/tests/user.spec.js b/packages/server/src/api/routes/tests/user.spec.js
index d950f03c3d..4900946e45 100644
--- a/packages/server/src/api/routes/tests/user.spec.js
+++ b/packages/server/src/api/routes/tests/user.spec.js
@@ -36,11 +36,11 @@ describe("/users", () => {
   describe("fetch", () => {    
 
     it("returns a list of users from an instance db", async () => {
-      await createUser(request, instance._id, "brenda", "brendas_password")
-      await createUser(request, instance._id, "pam", "pam_password")
+      await createUser(request, app._id, instance._id, "brenda", "brendas_password")
+      await createUser(request, app._id, instance._id, "pam", "pam_password")
       const res = await request
-        .get(`/api/${instance._id}/users`)
-        .set(defaultHeaders)
+        .get(`/api/users`)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -50,7 +50,7 @@ describe("/users", () => {
     })
 
     it("should apply authorization to endpoint", async () => {
-      await createUser(request, instance._id, "brenda", "brendas_password")
+      await createUser(request, app._id, instance._id, "brenda", "brendas_password")
       await testPermissionsForEndpoint({
         request,
         method: "GET",
@@ -67,7 +67,7 @@ describe("/users", () => {
     it("returns a success message when a user is successfully created", async () => {
       const res = await request
         .post(`/api/${instance._id}/users`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .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/tests/view.spec.js b/packages/server/src/api/routes/tests/view.spec.js
index b8fd47972a..db521ef53b 100644
--- a/packages/server/src/api/routes/tests/view.spec.js
+++ b/packages/server/src/api/routes/tests/view.spec.js
@@ -40,7 +40,7 @@ describe("/views", () => {
       }`,
       reduce: `function(keys, values) { }`
     })
-    .set(defaultHeaders)
+    .set(defaultHeaders(app._id, instance._id))
     .expect('Content-Type', /json/)
     .expect(200)
 
@@ -56,14 +56,14 @@ describe("/views", () => {
   describe("fetch", () => {
 
     beforeEach(async () => {
-      model = await createModel(request, instance._id);
+      model = await createModel(request, app._id, instance._id);
     });
 
     it("should only return custom views", async () => {
       const view = await createView()
       const res = await request
         .get(`/api/${instance._id}/views`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
       expect(res.body.length).toBe(1)
diff --git a/packages/server/src/api/routes/tests/workflow.spec.js b/packages/server/src/api/routes/tests/workflow.spec.js
index 1f345698bf..bcd1f67120 100644
--- a/packages/server/src/api/routes/tests/workflow.spec.js
+++ b/packages/server/src/api/routes/tests/workflow.spec.js
@@ -64,7 +64,7 @@ describe("/workflows", () => {
     it("returns a success message when the workflow is successfully created", async () => {
       const res = await request
         .post(`/api/${instance._id}/workflows`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .send(TEST_WORKFLOW)
         .expect('Content-Type', /json/)
         .expect(200)
@@ -93,7 +93,7 @@ describe("/workflows", () => {
 
       const res = await request
         .put(`/api/${instance._id}/workflows`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .send(workflow)
         .expect('Content-Type', /json/)
         .expect(200)
@@ -108,7 +108,7 @@ describe("/workflows", () => {
       await createWorkflow();
       const res = await request
         .get(`/api/${instance._id}/workflows`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -130,7 +130,7 @@ describe("/workflows", () => {
       await createWorkflow();
       const res = await request
         .delete(`/api/${instance._id}/workflows/${workflow.id}/${workflow.rev}`)
-        .set(defaultHeaders)
+        .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
 
diff --git a/packages/server/src/api/routes/user.js b/packages/server/src/api/routes/user.js
index 20e17c7473..3c560d3f80 100644
--- a/packages/server/src/api/routes/user.js
+++ b/packages/server/src/api/routes/user.js
@@ -6,19 +6,11 @@ const { USER_MANAGEMENT, LIST_USERS } = require("../../utilities/accessLevels")
 const router = Router()
 
 router
-  .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
-  )
+  .get("/api/users", authorized(LIST_USERS), controller.fetch)
+  .get("/api/users/:username", authorized(USER_MANAGEMENT), controller.find)
+  .post("/api/users", authorized(USER_MANAGEMENT), controller.create)
   .delete(
-    "/api/:instanceId/users/:username",
+    "/api/users/:username",
     authorized(USER_MANAGEMENT),
     controller.destroy
   )
diff --git a/packages/server/src/api/routes/view.js b/packages/server/src/api/routes/view.js
index 193ece1cdf..5a73eea22e 100644
--- a/packages/server/src/api/routes/view.js
+++ b/packages/server/src/api/routes/view.js
@@ -8,13 +8,13 @@ const router = Router()
 
 router
   .get(
-    "/api/:instanceId/views/:viewName",
+    "/api/views/:viewName",
     authorized(READ_VIEW, ctx => ctx.params.viewName),
     recordController.fetchView
   )
-  .get("/api/:instanceId/views", authorized(BUILDER), viewController.fetch)
+  .get("/api/views", authorized(BUILDER), viewController.fetch)
   // .patch("/api/:databaseId/views", controller.update);
   // .delete("/api/:instanceId/views/:viewId/:revId", controller.destroy);
-  .post("/api/:instanceId/views", authorized(BUILDER), viewController.create)
+  .post("/api/views", authorized(BUILDER), viewController.create)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/workflow.js b/packages/server/src/api/routes/workflow.js
index fcb1d6e182..987e18a60f 100644
--- a/packages/server/src/api/routes/workflow.js
+++ b/packages/server/src/api/routes/workflow.js
@@ -6,20 +6,16 @@ const { BUILDER } = require("../../utilities/accessLevels")
 const router = Router()
 
 router
-  .get("/api/:instanceId/workflows", authorized(BUILDER), controller.fetch)
+  .get("/api/workflows", authorized(BUILDER), controller.fetch)
   .get("/api/workflows/:id", authorized(BUILDER), controller.find)
   .get(
-    "/api/:instanceId/workflows/:id/:action",
+    "/api/workflows/:id/:action",
     authorized(BUILDER),
     controller.fetchActionScript
   )
-  .put("/api/:instanceId/workflows", authorized(BUILDER), controller.update)
-  .post("/api/:instanceId/workflows", authorized(BUILDER), controller.create)
+  .put("/api/workflows", authorized(BUILDER), controller.update)
+  .post("/api/workflows", authorized(BUILDER), controller.create)
   .post("/api/workflows/action", controller.executeAction)
-  .delete(
-    "/api/:instanceId/workflows/:id/:rev",
-    authorized(BUILDER),
-    controller.destroy
-  )
+  .delete("/api/workflows/:id/:rev", authorized(BUILDER), controller.destroy)
 
 module.exports = router
diff --git a/packages/server/src/middleware/authenticated.js b/packages/server/src/middleware/authenticated.js
index d0ce1e2f30..0a3c9c8ef9 100644
--- a/packages/server/src/middleware/authenticated.js
+++ b/packages/server/src/middleware/authenticated.js
@@ -1,10 +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,
+  BUILDER_LEVEL_ID,
+  ANON_LEVEL_ID,
 } = require("../utilities/accessLevels")
 
 module.exports = async (ctx, next) => {
@@ -21,10 +22,19 @@ module.exports = async (ctx, next) => {
   const shouldAuthAsBuilder = isBuilderAgent && builderToken
 
   if (shouldAuthAsBuilder) {
-    const builderTokenValid = builderToken === env.ADMIN_SECRET
-
-    ctx.isAuthenticated = builderTokenValid
-    ctx.isBuilder = builderTokenValid
+    try {
+      const jwtPayload = jwt.verify(builderToken, ctx.config.jwtSecret)
+      ctx.isAuthenticated = jwtPayload.accessLevelId === BUILDER_LEVEL_ID
+      ctx.user = {
+        ...jwtPayload,
+        accessLevel: await getAccessLevel(
+          jwtPayload.instanceId,
+          jwtPayload.accessLevelId
+        ),
+      }
+    } catch (_) {
+      // empty: do nothing
+    }
 
     await next()
     return
@@ -46,7 +56,7 @@ module.exports = async (ctx, next) => {
         jwtPayload.accessLevelId
       ),
     }
-    ctx.isAuthenticated = true
+    ctx.isAuthenticated = ctx.user.accessLevelId !== ANON_LEVEL_ID
   } catch (err) {
     ctx.throw(err.status || STATUS_CODES.FORBIDDEN, err.text)
   }
@@ -57,7 +67,9 @@ module.exports = async (ctx, next) => {
 const getAccessLevel = async (instanceId, accessLevelId) => {
   if (
     accessLevelId === POWERUSER_LEVEL_ID ||
-    accessLevelId === ADMIN_LEVEL_ID
+    accessLevelId === ADMIN_LEVEL_ID ||
+    accessLevelId === BUILDER_LEVEL_ID ||
+    accessLevelId === ANON_LEVEL_ID
   ) {
     return {
       _id: accessLevelId,
diff --git a/packages/server/src/middleware/authorized.js b/packages/server/src/middleware/authorized.js
index b07715af36..b452d63cf5 100644
--- a/packages/server/src/middleware/authorized.js
+++ b/packages/server/src/middleware/authorized.js
@@ -2,6 +2,7 @@ const {
   adminPermissions,
   ADMIN_LEVEL_ID,
   POWERUSER_LEVEL_ID,
+  BUILDER_LEVEL_ID,
   BUILDER,
 } = require("../utilities/accessLevels")
 
@@ -10,7 +11,11 @@ module.exports = (permName, getItemId) => async (ctx, next) => {
     ctx.throw(403, "Session not authenticated")
   }
 
-  if (ctx.isBuilder) {
+  if (!ctx.user) {
+    ctx.throw(403, "User not found")
+  }
+
+  if (ctx.user.accessLevel._id === BUILDER_LEVEL_ID) {
     await next()
     return
   }
@@ -20,10 +25,6 @@ module.exports = (permName, getItemId) => async (ctx, next) => {
     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) {
diff --git a/packages/server/src/utilities/accessLevels.js b/packages/server/src/utilities/accessLevels.js
index 9fff76e531..d609d6fa2c 100644
--- a/packages/server/src/utilities/accessLevels.js
+++ b/packages/server/src/utilities/accessLevels.js
@@ -5,6 +5,8 @@ const workflowController = require("../api/controllers/workflow")
 // Access Level IDs
 const ADMIN_LEVEL_ID = "ADMIN"
 const POWERUSER_LEVEL_ID = "POWER_USER"
+const BUILDER_LEVEL_ID = "BUILDER"
+const ANON_LEVEL_ID = "ANON"
 
 // Permissions
 const READ_MODEL = "read-model"
@@ -28,7 +30,7 @@ const generateAdminPermissions = async instanceId => [
 
 const generatePowerUserPermissions = async instanceId => {
   const fetchModelsCtx = {
-    params: {
+    user: {
       instanceId,
     },
   }
@@ -36,7 +38,7 @@ const generatePowerUserPermissions = async instanceId => {
   const models = fetchModelsCtx.body
 
   const fetchViewsCtx = {
-    params: {
+    user: {
       instanceId,
     },
   }
@@ -44,7 +46,7 @@ const generatePowerUserPermissions = async instanceId => {
   const views = fetchViewsCtx.body
 
   const fetchWorkflowsCtx = {
-    params: {
+    user: {
       instanceId,
     },
   }
@@ -83,6 +85,8 @@ const generatePowerUserPermissions = async instanceId => {
 module.exports = {
   ADMIN_LEVEL_ID,
   POWERUSER_LEVEL_ID,
+  BUILDER_LEVEL_ID,
+  ANON_LEVEL_ID,
   READ_MODEL,
   WRITE_MODEL,
   READ_VIEW,
diff --git a/packages/server/src/utilities/builder/setBuilderToken.js b/packages/server/src/utilities/builder/setBuilderToken.js
new file mode 100644
index 0000000000..12622d5522
--- /dev/null
+++ b/packages/server/src/utilities/builder/setBuilderToken.js
@@ -0,0 +1,19 @@
+const { BUILDER_LEVEL_ID } = require("../accessLevels")
+const jwt = require("jsonwebtoken")
+
+module.exports = (ctx, appId, instanceId) => {
+  const builderUser = {
+    userId: "BUILDER",
+    accessLevelId: BUILDER_LEVEL_ID,
+    instanceId,
+    appId,
+  }
+
+  const token = jwt.sign(builderUser, ctx.config.jwtSecret, {
+    expiresIn: "30 days",
+  })
+
+  var expiry = new Date()
+  expiry.setDate(expiry.getDate() + 30)
+  ctx.cookies.set("builder:token", token, { expires: expiry, httpOnly: false })
+}
diff --git a/packages/standard-components/src/DataChart.svelte b/packages/standard-components/src/DataChart.svelte
index 3f7aafd8a8..bccfc6314a 100644
--- a/packages/standard-components/src/DataChart.svelte
+++ b/packages/standard-components/src/DataChart.svelte
@@ -8,7 +8,6 @@
   fcRoot(FusionCharts, Charts, FusionTheme)
 
   export let _bb
-  export let _instanceId
   export let model
   export let type = "column2d"
 
@@ -25,7 +24,7 @@
   }
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
     const response = await _bb.api.get(FETCH_RECORDS_URL)
     if (response.status === 200) {
       const json = await response.json()
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 6a9788458e..dc97c6971d 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -2,7 +2,6 @@
   import { onMount } from "svelte"
 
   export let _bb
-  export let _instanceId
   export let model
 
   let username
@@ -21,14 +20,14 @@
   $: fields = Object.keys(schema)
 
   async function fetchModel() {
-    const FETCH_MODEL_URL = `/api/${_instanceId}/models/${model}`
+    const FETCH_MODEL_URL = `/api/models/${model}`
     const response = await _bb.api.get(FETCH_MODEL_URL)
     modelDef = await response.json()
     schema = modelDef.schema
   }
 
   async function save() {
-    const SAVE_RECORD_URL = `/api/${_instanceId}/${model}/records`
+    const SAVE_RECORD_URL = `/api/${model}/records`
     const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
     const json = await response.json()
 
diff --git a/packages/standard-components/src/DataList.svelte b/packages/standard-components/src/DataList.svelte
index 03bcd5ccc4..3f30558227 100644
--- a/packages/standard-components/src/DataList.svelte
+++ b/packages/standard-components/src/DataList.svelte
@@ -2,7 +2,6 @@
   import { onMount } from "svelte"
 
   export let _bb
-  export let _instanceId
   export let model
   export let layout = "list"
 
@@ -12,7 +11,7 @@
   async function fetchData() {
     if (!model || !model.length) return
 
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
     const response = await _bb.api.get(FETCH_RECORDS_URL)
     if (response.status === 200) {
       const json = await response.json()
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 90716383da..188671b06a 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -3,14 +3,13 @@
 
   export let _bb
   export let onLoad
-  export let _instanceId
   export let model
 
   let headers = []
   let store = _bb.store
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
 
     const response = await _bb.api.get(FETCH_RECORDS_URL)
     if (response.status === 200) {
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 7720094999..9e4ddd6c99 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -2,7 +2,6 @@
   import { onMount } from "svelte"
 
   export let _bb
-  export let _instanceId
   export let model
   export let layout = "list"
 
@@ -13,7 +12,7 @@
   async function fetchData() {
     if (!model || !model.length) return
 
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
     const response = await _bb.api.get(FETCH_RECORDS_URL)
     if (response.status === 200) {
       const json = await response.json()

From 2436ea525d94bca888d6ed67aa20fc8106382b74 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 18 Jun 2020 20:41:37 +0100
Subject: [PATCH 38/57] fixing broken tests

---
 packages/server/src/api/routes/model.js       |  2 +-
 .../src/api/routes/tests/accesslevel.spec.js  | 24 +++++++++----------
 .../src/api/routes/tests/application.spec.js  |  2 +-
 .../src/api/routes/tests/couchTestUtils.js    | 14 +++++------
 .../server/src/api/routes/tests/model.spec.js | 17 +++++++------
 .../src/api/routes/tests/record.spec.js       |  2 +-
 .../server/src/api/routes/tests/user.spec.js  |  8 ++++---
 .../server/src/api/routes/tests/view.spec.js  |  4 ++--
 .../src/api/routes/tests/workflow.spec.js     | 17 +++++++------
 .../server/src/middleware/authenticated.js    |  2 ++
 10 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/packages/server/src/api/routes/model.js b/packages/server/src/api/routes/model.js
index b5ab9b3f95..10882aa057 100644
--- a/packages/server/src/api/routes/model.js
+++ b/packages/server/src/api/routes/model.js
@@ -6,7 +6,7 @@ const { BUILDER, READ_MODEL } = require("../../utilities/accessLevels")
 const router = Router()
 
 router
-  .get("/api/models", modelController.fetch)
+  .get("/api/models", authorized(BUILDER), modelController.fetch)
   .get(
     "/api/models/:id",
     authorized(READ_MODEL, ctx => ctx.params.id),
diff --git a/packages/server/src/api/routes/tests/accesslevel.spec.js b/packages/server/src/api/routes/tests/accesslevel.spec.js
index 9cd3495ed8..81ab6a78ad 100644
--- a/packages/server/src/api/routes/tests/accesslevel.spec.js
+++ b/packages/server/src/api/routes/tests/accesslevel.spec.js
@@ -44,7 +44,7 @@ describe("/accesslevels", () => {
 
     it("returns a success message when level is successfully created", async () => {
       const res = await request
-        .post(`/api/${instanceId}/accesslevels`)
+        .post(`/api/accesslevels`)
         .send({ name: "user" })
         .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
@@ -62,7 +62,7 @@ describe("/accesslevels", () => {
 
     it("should list custom levels, plus 2 default levels", async () => {
       const createRes = await request
-        .post(`/api/${instanceId}/accesslevels`)
+        .post(`/api/accesslevels`)
         .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL }] })
         .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
@@ -71,7 +71,7 @@ describe("/accesslevels", () => {
       const customLevel = createRes.body
 
       const res = await request
-        .get(`/api/${instanceId}/accesslevels`)
+        .get(`/api/accesslevels`)
         .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
         .expect(200)
@@ -95,7 +95,7 @@ describe("/accesslevels", () => {
   describe("destroy", () => {
     it("should delete custom access level", async () => {
       const createRes = await request
-        .post(`/api/${instanceId}/accesslevels`)
+        .post(`/api/accesslevels`)
         .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL } ] })
         .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
@@ -104,12 +104,12 @@ describe("/accesslevels", () => {
       const customLevel = createRes.body
 
       await request
-        .delete(`/api/${instanceId}/accesslevels/${customLevel._id}/${customLevel._rev}`)
+        .delete(`/api/accesslevels/${customLevel._id}/${customLevel._rev}`)
         .set(defaultHeaders(appId, instanceId))
         .expect(200)
 
       await request
-        .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .get(`/api/accesslevels/${customLevel._id}`)
         .set(defaultHeaders(appId, instanceId))
         .expect(404)      
     })
@@ -118,7 +118,7 @@ describe("/accesslevels", () => {
   describe("patch", () => {
     it("should add given permissions", async () => {
       const createRes = await request
-        .post(`/api/${instanceId}/accesslevels`)
+        .post(`/api/accesslevels`)
         .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL }] })
         .set(defaultHeaders(appId, instanceId))
         .expect('Content-Type', /json/)
@@ -127,7 +127,7 @@ describe("/accesslevels", () => {
       const customLevel = createRes.body
 
       await request
-        .patch(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .patch(`/api/accesslevels/${customLevel._id}`)
         .send({
           _rev: customLevel._rev,
           addedPermissions:  [ { itemId: model._id, name: WRITE_MODEL } ] 
@@ -137,7 +137,7 @@ describe("/accesslevels", () => {
         .expect(200)
 
       const finalRes = await request
-        .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .get(`/api/accesslevels/${customLevel._id}`)
         .set(defaultHeaders(appId, instanceId))
         .expect(200) 
 
@@ -148,7 +148,7 @@ describe("/accesslevels", () => {
 
     it("should remove given permissions", async () => {
       const createRes = await request
-        .post(`/api/${instanceId}/accesslevels`)
+        .post(`/api/accesslevels`)
         .send({ 
           name: "user", 
           permissions: [ 
@@ -163,7 +163,7 @@ describe("/accesslevels", () => {
       const customLevel = createRes.body
 
       await request
-        .patch(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .patch(`/api/accesslevels/${customLevel._id}`)
         .send({
           _rev: customLevel._rev,
           removedPermissions:  [ { itemId: model._id, name: WRITE_MODEL }] 
@@ -173,7 +173,7 @@ describe("/accesslevels", () => {
         .expect(200)
 
       const finalRes = await request
-        .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .get(`/api/accesslevels/${customLevel._id}`)
         .set(defaultHeaders(appId, instanceId))
         .expect(200) 
 
diff --git a/packages/server/src/api/routes/tests/application.spec.js b/packages/server/src/api/routes/tests/application.spec.js
index 0bde24a02f..d22ab02016 100644
--- a/packages/server/src/api/routes/tests/application.spec.js
+++ b/packages/server/src/api/routes/tests/application.spec.js
@@ -41,7 +41,7 @@ describe("/applications", () => {
       expect(res.body._id).toBeDefined()
     })
 
-    fit("should apply authorization to endpoint", async () => {
+    it("should apply authorization to endpoint", async () => {
       const otherApplication = await createApplication(request) 
       const instance = await createInstance(request, otherApplication._id)
       await builderEndpointShouldBlockNormalUsers({
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index ebf09e392d..9b8aedd453 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -57,7 +57,7 @@ exports.createModel = async (request, appId, instanceId, model) => {
   }
 
   const res = await request
-    .post(`/api/${instanceId}/models`)
+    .post(`/api/models`)
     .set(exports.defaultHeaders(appId, instanceId))
     .send(model)
   return res.body
@@ -69,7 +69,7 @@ exports.createView = async (request, appId, instanceId, view) => {
   }
 
   const res = await request
-    .post(`/api/${instanceId}/views`)
+    .post(`/api/views`)
     .set(exports.defaultHeaders(appId, instanceId))
     .send(view)
   return res.body
@@ -80,10 +80,10 @@ exports.createClientDatabase = async id => await create(id || TEST_CLIENT_ID)
 exports.createApplication = async (request, name = "test_application") => {
   const res = await request
     .post("/api/applications")
-    .set(exports.defaultHeaders())
     .send({
       name,
     })
+    .set(exports.defaultHeaders())
   return res.body
 }
 
@@ -92,10 +92,10 @@ exports.destroyClientDatabase = async () => await destroy(TEST_CLIENT_ID)
 exports.createInstance = async (request, appId) => {
   const res = await request
     .post(`/api/instances`)
-    .set(exports.defaultHeaders(appId))
     .send({
-      name: "test-instance",
+      name: "test-instance2",
     })
+    .set(exports.defaultHeaders(appId))
   return res.body
 }
 
@@ -180,13 +180,13 @@ const createUserWithPermissions = async (
   username
 ) => {
   const accessRes = await request
-    .post(`/api/${instanceId}/accesslevels`)
+    .post(`/api/accesslevels`)
     .send({ name: "TestLevel", permissions })
     .set(exports.defaultHeaders(appId, instanceId))
 
   const password = `password_${username}`
   await request
-    .post(`/api/${instanceId}/users`)
+    .post(`/api/users`)
     .set(exports.defaultHeaders(appId, instanceId))
     .send({
       name: username,
diff --git a/packages/server/src/api/routes/tests/model.spec.js b/packages/server/src/api/routes/tests/model.spec.js
index f4708be58d..4d4e7aeb08 100644
--- a/packages/server/src/api/routes/tests/model.spec.js
+++ b/packages/server/src/api/routes/tests/model.spec.js
@@ -33,7 +33,7 @@ describe("/models", () => {
 
     it("returns a success message when the model is successfully created", done => {
       request
-        .post(`/api/${instance._id}/models`)
+        .post(`/api/models`)
         .send({ 
           name: "TestModel",
           key: "name",
@@ -55,8 +55,9 @@ describe("/models", () => {
         await builderEndpointShouldBlockNormalUsers({
           request,
           method: "POST",
-          url: `/api/${instance._id}/models`,
+          url: `/api/models`,
           instanceId: instance._id,
+          appId: app._id,
           body: { 
             name: "TestModel",
             key: "name",
@@ -78,7 +79,7 @@ describe("/models", () => {
 
     it("returns all the models for that instance in the response body", done => {
       request
-        .get(`/api/${instance._id}/models`)
+        .get(`/api/models`)
         .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
@@ -94,8 +95,9 @@ describe("/models", () => {
         await builderEndpointShouldBlockNormalUsers({
           request,
           method: "GET",
-          url: `/api/${instance._id}/models`,
+          url: `/api/models`,
           instanceId: instance._id,
+          appId: app._id,
         })
       })
     });
@@ -114,7 +116,7 @@ describe("/models", () => {
 
     it("returns a success response when a model is deleted.", async done => {
       request
-        .delete(`/api/${instance._id}/models/${testModel._id}/${testModel._rev}`)
+        .delete(`/api/models/${testModel._id}/${testModel._rev}`)
         .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
@@ -147,7 +149,7 @@ describe("/models", () => {
       })
 
       request
-        .delete(`/api/${instance._id}/models/${testModel._id}/${testModel._rev}`)
+        .delete(`/api/models/${testModel._id}/${testModel._rev}`)
         .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
@@ -163,8 +165,9 @@ describe("/models", () => {
       await builderEndpointShouldBlockNormalUsers({
         request,
         method: "DELETE",
-        url: `/api/${instance._id}/models/${testModel._id}/${testModel._rev}`,
+        url: `/api/models/${testModel._id}/${testModel._rev}`,
         instanceId: instance._id,
+        appId: app._id,
       })
     })
 
diff --git a/packages/server/src/api/routes/tests/record.spec.js b/packages/server/src/api/routes/tests/record.spec.js
index c856cfc47a..62cf205b1c 100644
--- a/packages/server/src/api/routes/tests/record.spec.js
+++ b/packages/server/src/api/routes/tests/record.spec.js
@@ -45,7 +45,7 @@ describe("/records", () => {
         .expect('Content-Type', /json/)
         .expect(200)
 
-    fit("returns a success message when the record is created", async () => {
+    it("returns a success message when the record is created", async () => {
       const res = await createRecord()
       expect(res.res.statusMessage).toEqual(`${model.name} created successfully`)           
       expect(res.body.name).toEqual("Test Contact")
diff --git a/packages/server/src/api/routes/tests/user.spec.js b/packages/server/src/api/routes/tests/user.spec.js
index 4900946e45..a17e6fe275 100644
--- a/packages/server/src/api/routes/tests/user.spec.js
+++ b/packages/server/src/api/routes/tests/user.spec.js
@@ -54,8 +54,9 @@ describe("/users", () => {
       await testPermissionsForEndpoint({
         request,
         method: "GET",
-        url: `/api/${instance._id}/users`,
+        url: `/api/users`,
         instanceId: instance._id,
+        appId: app._id,
         permissionName: LIST_USERS,
       })
     })
@@ -66,7 +67,7 @@ describe("/users", () => {
 
     it("returns a success message when a user is successfully created", async () => {
       const res = await request
-        .post(`/api/${instance._id}/users`)
+        .post(`/api/users`)
         .set(defaultHeaders(app._id, instance._id))
         .send({ name: "Bill", username: "bill", password: "bills_password", accessLevelId: POWERUSER_LEVEL_ID })
         .expect(200)
@@ -81,8 +82,9 @@ describe("/users", () => {
         request,
         method: "POST",
         body: { name: "brandNewUser", username: "brandNewUser", password: "yeeooo", accessLevelId: POWERUSER_LEVEL_ID },
-        url: `/api/${instance._id}/users`,
+        url: `/api/users`,
         instanceId: instance._id,
+        appId: app._id,
         permissionName: USER_MANAGEMENT,
       })
     })
diff --git a/packages/server/src/api/routes/tests/view.spec.js b/packages/server/src/api/routes/tests/view.spec.js
index db521ef53b..5a889bed67 100644
--- a/packages/server/src/api/routes/tests/view.spec.js
+++ b/packages/server/src/api/routes/tests/view.spec.js
@@ -30,7 +30,7 @@ describe("/views", () => {
 
   const createView = async () => 
     await request
-    .post(`/api/${instance._id}/views`)
+    .post(`/api/views`)
     .send({ 
       name: "TestView",
       map: `function(doc) {
@@ -62,7 +62,7 @@ describe("/views", () => {
     it("should only return custom views", async () => {
       const view = await createView()
       const res = await request
-        .get(`/api/${instance._id}/views`)
+        .get(`/api/views`)
         .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
diff --git a/packages/server/src/api/routes/tests/workflow.spec.js b/packages/server/src/api/routes/tests/workflow.spec.js
index bcd1f67120..f8b38c53ec 100644
--- a/packages/server/src/api/routes/tests/workflow.spec.js
+++ b/packages/server/src/api/routes/tests/workflow.spec.js
@@ -63,7 +63,7 @@ describe("/workflows", () => {
   describe("create", () => {
     it("returns a success message when the workflow is successfully created", async () => {
       const res = await request
-        .post(`/api/${instance._id}/workflows`)
+        .post(`/api/workflows`)
         .set(defaultHeaders(app._id, instance._id))
         .send(TEST_WORKFLOW)
         .expect('Content-Type', /json/)
@@ -77,8 +77,9 @@ describe("/workflows", () => {
       await builderEndpointShouldBlockNormalUsers({
         request,
         method: "POST",
-        url: `/api/${instance._id}/workflows`,
+        url: `/api/workflows`,
         instanceId: instance._id,
+        appId: app._id,
         body: TEST_WORKFLOW
       })
     })
@@ -92,7 +93,7 @@ describe("/workflows", () => {
       workflow.name = "Updated Name";
 
       const res = await request
-        .put(`/api/${instance._id}/workflows`)
+        .put(`/api/workflows`)
         .set(defaultHeaders(app._id, instance._id))
         .send(workflow)
         .expect('Content-Type', /json/)
@@ -107,7 +108,7 @@ describe("/workflows", () => {
     it("return all the workflows for an instance", async () => {
       await createWorkflow();
       const res = await request
-        .get(`/api/${instance._id}/workflows`)
+        .get(`/api/workflows`)
         .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
@@ -119,8 +120,9 @@ describe("/workflows", () => {
       await builderEndpointShouldBlockNormalUsers({
         request,
         method: "GET",
-        url: `/api/${instance._id}/workflows`,
+        url: `/api/workflows`,
         instanceId: instance._id,
+        appId: app._id,
       })
     })
   })
@@ -129,7 +131,7 @@ describe("/workflows", () => {
     it("deletes a workflow by its ID", async () => {
       await createWorkflow();
       const res = await request
-        .delete(`/api/${instance._id}/workflows/${workflow.id}/${workflow.rev}`)
+        .delete(`/api/workflows/${workflow.id}/${workflow.rev}`)
         .set(defaultHeaders(app._id, instance._id))
         .expect('Content-Type', /json/)
         .expect(200)
@@ -142,8 +144,9 @@ describe("/workflows", () => {
       await builderEndpointShouldBlockNormalUsers({
         request,
         method: "DELETE",
-        url: `/api/${instance._id}/workflows/${workflow.id}/${workflow._rev}`,
+        url: `/api/workflows/${workflow.id}/${workflow._rev}`,
         instanceId: instance._id,
+        appId: app._id,
       })
     })
   })
diff --git a/packages/server/src/middleware/authenticated.js b/packages/server/src/middleware/authenticated.js
index 0a3c9c8ef9..2318512eea 100644
--- a/packages/server/src/middleware/authenticated.js
+++ b/packages/server/src/middleware/authenticated.js
@@ -81,6 +81,8 @@ const getAccessLevel = async (instanceId, accessLevelId) => {
   const findAccessContext = {
     params: {
       levelId: accessLevelId,
+    },
+    user: {
       instanceId,
     },
   }

From bd927564b28f9484d249a53c66314b4e2178b350 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 19 Jun 2020 07:04:55 +0100
Subject: [PATCH 39/57] client - should recognise new cookie format

---
 packages/client/src/render/getAppId.js      | 4 +++-
 packages/client/tests/screenRouting.spec.js | 6 +++---
 packages/client/tests/testAppDef.js         | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/render/getAppId.js b/packages/client/src/render/getAppId.js
index 75753e381d..8ac2dbc79b 100644
--- a/packages/client/src/render/getAppId.js
+++ b/packages/client/src/render/getAppId.js
@@ -2,8 +2,10 @@ export const getAppId = cookie => {
   const base64Token = cookie
     .split(";")
     .find(c => c.trim().startsWith("budibase:token"))
-    .split("=")[1]
+    .substring(lengthOfKey)
 
   const user = JSON.parse(atob(base64Token.split(".")[1]))
   return user.appId
 }
+
+const lengthOfKey = "budibase:token=".length
diff --git a/packages/client/tests/screenRouting.spec.js b/packages/client/tests/screenRouting.spec.js
index d0b2c1b4d5..3e4818961d 100644
--- a/packages/client/tests/screenRouting.spec.js
+++ b/packages/client/tests/screenRouting.spec.js
@@ -18,7 +18,7 @@ describe("screenRouting", () => {
 
   it("should load correct screen, for initial URL, when appRootPath is something", async () => {
     const { page, screens } = pageWith3Screens()
-    const { dom } = await load(page, screens, "/TEST_APP_ID/screen2", "localhost")
+    const { dom } = await load(page, screens, "/TEST_APP_ID/screen2", "127.0.0.1")
 
     const rootDiv = dom.window.document.body.children[0]
     expect(rootDiv.children.length).toBe(1)
@@ -50,8 +50,8 @@ describe("screenRouting", () => {
     const { dom, app } = await load(
       page,
       screens,
-      "/testApp/screen2",
-      "/testApp"
+      "/TEST_APP_ID/screen2",
+      "127.0.0.1"
     )
 
     app.routeTo()("/screen3")
diff --git a/packages/client/tests/testAppDef.js b/packages/client/tests/testAppDef.js
index bafba601e9..76bb3784b0 100644
--- a/packages/client/tests/testAppDef.js
+++ b/packages/client/tests/testAppDef.js
@@ -7,7 +7,7 @@ export const load = async (page, screens, url, host = "test.com") => {
 
   const fullUrl = `http://${host}${url}`
   const cookieJar = new jsdom.CookieJar()
-  const cookie = btoa('{}{"appId":"TEST_APP_ID"}signature')
+  const cookie = `${btoa("{}")}.${btoa('{"appId":"TEST_APP_ID"}')}.signature`
   cookieJar.setCookie(
     `budibase:token=${cookie};domain=${host};path=/`,
     fullUrl,

From 06fd91cfab30ceccb63aef6615156a668f278283 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 19 Jun 2020 13:36:03 +0200
Subject: [PATCH 40/57] adds bbui.css file

---
 packages/builder/package.json     | 2 +-
 packages/builder/rollup.config.js | 4 ++++
 packages/builder/src/index.html   | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 8fe9ffd494..854bcd3caf 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.1.1",
+    "@budibase/bbui": "^1.8.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js
index fd7c487c3f..0a4e016170 100644
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@@ -165,6 +165,10 @@ export default {
           src: "node_modules/@budibase/client/dist/budibase-client.esm.mjs",
           dest: outputpath,
         },
+        {
+          src: "node_modules/@budibase/bbui/dist/bbui.css",
+          dest: outputpath,
+        },
       ],
     }),
 
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index 23c5aaf6c0..afc3bcb4c2 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <html>
+
 <head>
 	<meta charset='utf8'>
 	<meta name='viewport' content='width=device-width'>
@@ -14,6 +15,7 @@
 	<link rel='stylesheet' href='/_builder/budibase.css'>
 	<link rel='stylesheet' href='/_builder/monokai.css'>
 	<link rel='stylesheet' href='/_builder/bundle.css'>
+	<link rel='stylesheet' href='/_builder/bbui.css'>
 	<link rel='stylesheet' href='/_builder/fonts.css'>
 	<link rel='stylesheet' href="/_builder/uikit.min.css">
 </head>
@@ -21,4 +23,5 @@
 <body id="app">
 	<script src='/_builder/bundle.js'></script>
 </body>
+
 </html>
\ No newline at end of file

From eb2b6ec56f1491231454a70046ece06334496017 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 19 Jun 2020 16:59:46 +0100
Subject: [PATCH 41/57] removed x-user-agent

---
 packages/client/src/render/getAppId.js          | 11 ++++++-----
 packages/client/src/render/screenRouter.js      |  2 +-
 packages/client/src/state/bbComponentApi.js     |  6 +++---
 packages/server/src/api/controllers/auth.js     |  9 +++++++--
 packages/server/src/api/controllers/static.js   |  8 ++++++--
 packages/server/src/middleware/authenticated.js |  6 +-----
 packages/server/src/utilities/accessLevels.js   |  1 +
 7 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/render/getAppId.js b/packages/client/src/render/getAppId.js
index 8ac2dbc79b..6d3df8eac2 100644
--- a/packages/client/src/render/getAppId.js
+++ b/packages/client/src/render/getAppId.js
@@ -1,8 +1,9 @@
-export const getAppId = cookie => {
-  const base64Token = cookie
-    .split(";")
-    .find(c => c.trim().startsWith("budibase:token"))
-    .substring(lengthOfKey)
+export const getAppId = docCookie => {
+  const cookie =
+    docCookie.split(";").find(c => c.trim().startsWith("budibase:token")) ||
+    docCookie.split(";").find(c => c.trim().startsWith("builder:token"))
+
+  const base64Token = cookie.substring(lengthOfKey)
 
   const user = JSON.parse(atob(base64Token.split(".")[1]))
   return user.appId
diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index ae11c10949..fb0b005096 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -79,7 +79,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
     )
       return
 
-    const target = x.target || "_self"
+    const target = (x && x.target) || "_self"
     if (!y || target !== "_self" || x.host !== location.host) return
 
     e.preventDefault()
diff --git a/packages/client/src/state/bbComponentApi.js b/packages/client/src/state/bbComponentApi.js
index b022ddca27..112e3e8534 100644
--- a/packages/client/src/state/bbComponentApi.js
+++ b/packages/client/src/state/bbComponentApi.js
@@ -9,16 +9,16 @@ export const bbFactory = ({
   componentLibraries,
   onScreenSlotRendered,
 }) => {
-  const apiCall = method => (url, body) =>
-    fetch(url, {
+  const apiCall = method => (url, body) => {
+    return fetch(url, {
       method: method,
       headers: {
         "Content-Type": "application/json",
-        "x-user-agent": "Budibase Builder",
       },
       body: body && JSON.stringify(body),
       credentials: "same-origin",
     })
+  }
 
   const api = {
     post: apiCall("POST"),
diff --git a/packages/server/src/api/controllers/auth.js b/packages/server/src/api/controllers/auth.js
index 88eb86c472..e9570e270f 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -55,9 +55,14 @@ exports.authenticate = async ctx => {
       expiresIn: "1 day",
     })
 
-    const ONE_DAY_FROM_NOW = new Date(Date.now() + 24 * 3600)
+    const expires = new Date()
+    expires.setDate(expires.getDate() + 1)
 
-    ctx.cookies.set("budibase:token", token, { expires: ONE_DAY_FROM_NOW })
+    ctx.cookies.set("budibase:token", token, {
+      expires,
+      path: "/",
+      httpOnly: false,
+    })
 
     ctx.body = {
       token,
diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index 181af162c5..2f0ea8f4b0 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -6,10 +6,13 @@ const {
 } = require("../../utilities/budibaseDir")
 const setBuilderToken = require("../../utilities/builder/setBuilderToken")
 const { ANON_LEVEL_ID } = require("../../utilities/accessLevels")
+const jwt = require("jsonwebtoken")
 
 exports.serveBuilder = async function(ctx) {
   let builderPath = resolve(__dirname, "../../../builder")
-  setBuilderToken(ctx)
+  if (ctx.file === "index.html") {
+    setBuilderToken(ctx)
+  }
   await send(ctx, ctx.file, { root: ctx.devPath || builderPath })
 }
 
@@ -24,11 +27,12 @@ exports.serveApp = async function(ctx) {
   // only set the appId cookie for /appId .. we COULD check for valid appIds
   // but would like to avoid that DB hit
   if (looksLikeAppId(ctx.params.appId) && !ctx.isAuthenticated) {
-    const anonToken = {
+    const anonUser = {
       userId: "ANON",
       accessLevelId: ANON_LEVEL_ID,
       appId: ctx.params.appId,
     }
+    const anonToken = jwt.sign(anonUser, ctx.config.jwtSecret)
     ctx.cookies.set("budibase:token", anonToken, {
       path: "/",
       httpOnly: false,
diff --git a/packages/server/src/middleware/authenticated.js b/packages/server/src/middleware/authenticated.js
index 2318512eea..36e2776abe 100644
--- a/packages/server/src/middleware/authenticated.js
+++ b/packages/server/src/middleware/authenticated.js
@@ -16,12 +16,8 @@ module.exports = async (ctx, next) => {
 
   const appToken = ctx.cookies.get("budibase:token")
   const builderToken = ctx.cookies.get("builder:token")
-  const isBuilderAgent = ctx.headers["x-user-agent"] === "Budibase Builder"
 
-  // all admin api access should auth with buildertoken and 'Budibase Builder user agent
-  const shouldAuthAsBuilder = isBuilderAgent && builderToken
-
-  if (shouldAuthAsBuilder) {
+  if (builderToken) {
     try {
       const jwtPayload = jwt.verify(builderToken, ctx.config.jwtSecret)
       ctx.isAuthenticated = jwtPayload.accessLevelId === BUILDER_LEVEL_ID
diff --git a/packages/server/src/utilities/accessLevels.js b/packages/server/src/utilities/accessLevels.js
index d609d6fa2c..50ae559d07 100644
--- a/packages/server/src/utilities/accessLevels.js
+++ b/packages/server/src/utilities/accessLevels.js
@@ -94,6 +94,7 @@ module.exports = {
   USER_MANAGEMENT,
   BUILDER,
   LIST_USERS,
+  adminPermissions,
   generateAdminPermissions,
   generatePowerUserPermissions,
 }

From bf9b8e49f9f8434215192ba3203d1e30e5920502 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 19 Jun 2020 17:07:11 +0100
Subject: [PATCH 42/57] Recent Colors and UI Updates

---
 .../Colorpicker/CheckedBackground.svelte      |   3 +-
 .../Colorpicker/Colorpicker.svelte            | 125 +++++++++++++++---
 .../Colorpicker/Colorpreview.svelte           |  44 +++---
 .../userInterface/Colorpicker/Input.svelte    |   2 +-
 .../userInterface/Colorpicker/Slider.svelte   |  10 +-
 .../userInterface/Colorpicker/drag.js         |   1 +
 6 files changed, 139 insertions(+), 46 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
index c6acd8f18a..9ed2899203 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
@@ -1,5 +1,6 @@
 <script>
     import {buildStyle} from "./helpers.js"
+    import {fade} from "svelte/transition"
 
     export let backgroundSize = "10px"
     export let borderRadius = ""
@@ -18,6 +19,6 @@
   }
 </style>
 
-<div {style}>
+<div transition:fade {style}>
     <slot />
 </div>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 16f17ccc98..2e80f826bd 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte";
+  import { fade } from 'svelte/transition';
   import CheckedBackground from "./CheckedBackground.svelte"
   import {buildStyle} from "./helpers.js"
   import {
@@ -14,6 +15,11 @@
 
   export let value = "#3ec1d3ff";
   export let format = "hexa";
+  
+  let recentColors = []
+
+  export let pickerHeight = 0;
+  export let pickerWidth = 0;
 
   let h = null;
   let s = null;
@@ -23,11 +29,30 @@
   const dispatch = createEventDispatcher();
 
   onMount(() => {
+    getRecentColors()
+
     if (format) {
       convertAndSetHSVA()
     }
   });
 
+  function getRecentColors() {
+    let colorStore = localStorage.getItem("cp:recent-colors")
+    if (colorStore) {
+      recentColors = JSON.parse(colorStore)
+    }
+  }
+
+  function setRecentColor(color) {
+    if (recentColors.length === 6) {
+      recentColors.splice(0, 1)
+    }
+    if (!recentColors.includes(color)) {
+      recentColors = [...recentColors, color]
+      localStorage.setItem("cp:recent-colors", JSON.stringify(recentColors))
+    }
+  }
+
   function convertAndSetHSVA() {
     let hsva = convertToHSVA(value, format);
     setHSVA(hsva);
@@ -45,35 +70,64 @@
     s = detail.s;
     v = detail.v;
     value = convertHsvaToFormat([h, s, v, a], format);
+    setRecentColor(value)
+    dispatchValue()
+  }
+
+  function setHue({color, isDrag}) {
+    h = color;
+    value = convertHsvaToFormat([h, s, v, a], format);   
+    if(!isDrag) {
+      setRecentColor(value)
+      dispatchValue()
+    } 
+  }
+
+  function setAlpha({color, isDrag}) {
+    a = color === "1.00" ? "1" : color;
+    value = convertHsvaToFormat([h, s, v, a], format);    
+    if(!isDrag) {
+        setRecentColor(value)
+        dispatchValue()
+      } 
+  }
+
+  function dispatchValue() {
     dispatch("change", value)
   }
 
-  function setHue(hue) {
-    h = hue;
-    value = convertHsvaToFormat([h, s, v, a], format);    
-  }
-
-  function setAlpha(alpha) {
-    a = alpha === "1.00" ? "1" :alpha;
-    value = convertHsvaToFormat([h, s, v, a], format);    
-  }
-
   function changeFormatAndConvert(f) {
     format = f;
     value = convertHsvaToFormat([h, s, v, a], format);
   }
 
   function handleColorInput(text) {
-    let f = getColorFormat(text)
-    if(f) {
-      format = f;
+    let format = getColorFormat(text)
+    if(format) {
       value = text
       convertAndSetHSVA()
-      dispatch("change", value)
     }
   }
 
-    $: border = s < 10 ? "1px dashed #dedada" : ""
+  function dispatchInputChange() {
+    if(format) {
+      setRecentColor(value)
+      dispatchValue()
+    }
+  }
+  
+
+  function applyRecentColor(color) {
+    if(value !== color) {
+      format = getColorFormat(color)
+      if(format) {
+        value = color
+        convertAndSetHSVA()
+        dispatchValue()
+      }
+    }
+  }
+    $: border = (v > 90 && s < 5) ? "1px dashed #dedada" : ""
     $: style = buildStyle({background: value, border})
 </script>
 
@@ -83,7 +137,8 @@
     font-size: 11px;
     font-weight: 400;
     flex-direction: column;
-    height: 265px;
+    /* height: 265px; */
+    height: auto;
     width: 220px;
     background: #ffffff;
     border-radius: 2px;
@@ -118,6 +173,24 @@
     border-radius: 50%;
   }
 
+  .recent-color-panel {
+    flex: 0 0 15px;
+    display: grid;
+    grid-gap: 10px;
+    justify-content: flex-start;
+    grid-auto-flow: column;
+    padding: 5px;
+    margin-left: 6px;
+  }
+
+  .recent-color {
+    cursor: pointer;
+    border-radius: 6px;
+    border: 1px solid #dedada;  
+    height: 20px; 
+    width: 20px;   
+  }
+
   .format-input-panel {
     display: flex;
     flex-direction: column;
@@ -125,7 +198,7 @@
   }
 </style>
 
-<div class="colorpicker-container">
+<div class="colorpicker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth}>
 
   <div class="palette-panel">
     <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
@@ -139,21 +212,33 @@
         </CheckedBackground>
       </div>
       <div>
-        <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
+        <Slider type="hue" value={h} on:change={(hue) => setHue(hue.detail)} on:dragend={dispatchValue} />
 
         <CheckedBackground borderRadius="10px" backgroundSize="7px">
           <Slider
             type="alpha"
             value={a}
-            on:change={alpha => setAlpha(alpha.detail)} />
+            on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)} 
+            on:dragend={dispatchValue}
+            />
         </CheckedBackground>
         
       </div>
     </div>
 
+    {#if recentColors.length > 0}
+      <div transition:fade class="recent-color-panel">
+        {#each recentColors as color}
+          <CheckedBackground borderRadius="6px"> 
+            <div transition:fade class="recent-color" style={`background: ${color};`} on:click={() => applyRecentColor(color)} />
+          </CheckedBackground>
+        {/each}
+      </div>
+    {/if}
+
     <div class="format-input-panel">
       <ButtonGroup {format} onclick={changeFormatAndConvert} />
-      <Input {value} on:input={event => handleColorInput(event.target.value)} />
+      <Input {value} on:input={event => handleColorInput(event.target.value)} on:change={dispatchInputChange} />
     </div>
   </div>
 
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
index 8f5bf64f70..0534666e1c 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -2,6 +2,7 @@
     import Colorpicker from "./Colorpicker.svelte"
     import CheckedBackground from "./CheckedBackground.svelte"
     import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
+
     import {buildStyle} from "./helpers.js"
     import { fade } from 'svelte/transition';
     import {getColorFormat} from "./utils.js"
@@ -17,8 +18,8 @@
 
     let previewHeight = null    
     let previewWidth = null
-    let pickerWidth = 250
-    let pickerHeight = 300
+    let pickerWidth = 0
+    let pickerHeight = 0
 
     let anchorEl = null
     let parentNodes = [];
@@ -61,30 +62,33 @@
 
     function openColorpicker(event) {
         if(colorPreview) {
-            const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
-            const {innerHeight, innerWidth} = window
-
-            const {offsetLeft, offsetTop} = colorPreview
-            //get the scrollTop value for all scrollable parent elements 
-            let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
-
-            const spaceBelow = (innerHeight - spaceAbove) - previewHeight
-            const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop      
-            
-            //TOO: Testing and Scroll Awareness for x Scroll
-            const spaceRight = (innerWidth - spaceLeft) + previewWidth
-            const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
-
-            dimensions = {top, left}
-
             open = true;        
         }
     }
 
+    $: if(open && colorPreview) {
+        const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
+        const {innerHeight, innerWidth} = window
+
+        const {offsetLeft, offsetTop} = colorPreview
+        //get the scrollTop value for all scrollable parent elements 
+        let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
+
+        const spaceBelow = (innerHeight - spaceAbove) - previewHeight
+        const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop      
+        
+        //TOO: Testing and Scroll Awareness for x Scroll
+        const spaceRight = (innerWidth - spaceLeft) + previewWidth
+        const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
+
+        dimensions = {top, left}
+    }
+
     function onColorChange(color) {
         value = color.detail;
         dispatch("change", color.detail)
     }
+
 </script>
 
 <div class="color-preview-container">
@@ -94,8 +98,8 @@
         </CheckedBackground>
 
         {#if open}
-        <div class="picker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth} style={pickerStyle}>
-            <Colorpicker on:change={onColorChange} {format} {value} />
+        <div transition:fade class="picker-container" style={pickerStyle}>
+            <Colorpicker on:change={onColorChange} bind:format bind:value bind:pickerHeight bind:pickerWidth />
         </div>
         <div on:click|self={() => open = false} class="overlay"></div>
         {/if}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
index 483fcd450d..811a51cea6 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
@@ -24,5 +24,5 @@
 </style>
 
 <div>
-  <input on:input type="text" {value} maxlength="25" />
+  <input on:input on:change type="text" {value} maxlength="25" />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
index 47736d7b69..edf0888432 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -10,7 +10,7 @@
   let slider;
   let sliderWidth = 0;
 
-  function handleClick(mouseX) {
+  function onSliderChange(mouseX, isDrag = false) {
     const { left, width } = slider.getBoundingClientRect();
     let clickPosition = mouseX - left;
 
@@ -21,7 +21,8 @@
         type === "hue"
           ? 360 * percentageClick
           : percentageClick;
-      dispatch("change", value);
+      
+      dispatch("change", {color: value, isDrag});
     }
   }
 
@@ -75,13 +76,14 @@
 <div
   bind:this={slider}
   bind:clientWidth={sliderWidth}
-  on:click={event => handleClick(event.clientX)}
+  on:click={event => onSliderChange(event.clientX)}
   class="color-format-slider"
   class:hue={type === 'hue'}
   class:alpha={type === 'alpha'}>
   <div
     use:dragable
-    on:drag={e => handleClick(e.detail)}
+    on:drag={e => onSliderChange(e.detail, true)}
+    on:dragend
     class="slider-thumb"
     {style} />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js
index 0d7a9c2481..54fa5e924b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/drag.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/drag.js
@@ -16,6 +16,7 @@ export default function(node) {
   function handleMouseUp() {
     window.removeEventListener("mousedown", handleMouseDown)
     window.removeEventListener("mousemove", handleMouseMove)
+    node.dispatchEvent(new CustomEvent("dragend"))
   }
 
   node.addEventListener("mousedown", handleMouseDown)

From 4ba1329983412fc070ccc842a606fb2cd68ea12e Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 19 Jun 2020 17:19:30 +0100
Subject: [PATCH 43/57] instance Id is gone from API module

---
 packages/builder/src/builderStore/api.js      | 30 +++++--------------
 .../builder/src/builderStore/store/backend.js |  4 +--
 .../src/builderStore/store/workflow/index.js  | 16 +++++-----
 .../ModelDataTable/ModelDataTable.svelte      |  4 +--
 .../components/database/ModelDataTable/api.js | 16 +++++-----
 .../CreateEditModel/CreateEditModel.svelte    |  3 +-
 .../modals/CreateEditRecord.svelte            |  3 --
 .../modals/CreateEditView.svelte              |  2 +-
 .../ModelDataTable/modals/CreateUser.svelte   |  3 +-
 .../ModelDataTable/modals/DeleteRecord.svelte |  3 +-
 .../nav/SchemaManagementDrawer.svelte         |  2 +-
 .../src/components/nav/UsersList.svelte       |  3 +-
 .../src/api/routes/tests/couchTestUtils.js    |  1 -
 13 files changed, 33 insertions(+), 57 deletions(-)

diff --git a/packages/builder/src/builderStore/api.js b/packages/builder/src/builderStore/api.js
index 795aaf8cd7..116222409f 100644
--- a/packages/builder/src/builderStore/api.js
+++ b/packages/builder/src/builderStore/api.js
@@ -1,10 +1,6 @@
-const apiCall = (method, instanceId) => async (url, body) => {
+const apiCall = method => async (url, body) => {
   const headers = {
     "Content-Type": "application/json",
-    "x-user-agent": "Budibase Builder",
-  }
-  if (instanceId) {
-    headers["x-budibase-instanceid"] = instanceId
   }
   const response = await fetch(url, {
     method: method,
@@ -21,20 +17,10 @@ export const patch = apiCall("PATCH")
 export const del = apiCall("DELETE")
 export const put = apiCall("PUT")
 
-// usage: api(instanceId).post(...) ... will supply instance Id in header
-const api = instanceId => ({
-  post: apiCall("POST", instanceId),
-  get: apiCall("GET", instanceId),
-  patch: apiCall("PATCH", instanceId),
-  delete: apiCall("DELETE", instanceId),
-  put: apiCall("PUT", instanceId),
-})
-
-// usage: api.post(...)... will not supply instanceid in header
-api.post = apiCall("POST")
-api.get = apiCall("GET")
-api.patch = apiCall("PATCH")
-api.delete = apiCall("DELETE")
-api.put = apiCall("PUT")
-
-export default api
+export default {
+  post: apiCall("POST"),
+  get: apiCall("GET"),
+  patch: apiCall("PATCH"),
+  delete: apiCall("DELETE"),
+  put: apiCall("PUT"),
+}
diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 6efb980506..53bdaa3360 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -24,8 +24,8 @@ export const getBackendUiStore = () => {
   store.actions = {
     database: {
       select: async db => {
-        const modelsResponse = await api(db._id).get(`/api/models`)
-        const viewsResponse = await api(db._id).get(`/api/views`)
+        const modelsResponse = await api.get(`/api/models`)
+        const viewsResponse = await api.get(`/api/views`)
         const models = await modelsResponse.json()
         const views = await viewsResponse.json()
         store.update(state => {
diff --git a/packages/builder/src/builderStore/store/workflow/index.js b/packages/builder/src/builderStore/store/workflow/index.js
index 7c814c27ee..d794868df3 100644
--- a/packages/builder/src/builderStore/store/workflow/index.js
+++ b/packages/builder/src/builderStore/store/workflow/index.js
@@ -12,7 +12,7 @@ const workflowActions = store => ({
       return state
     })
   },
-  create: async ({ instanceId, name }) => {
+  create: async ({ name }) => {
     const workflow = {
       name,
       definition: {
@@ -20,7 +20,7 @@ const workflowActions = store => ({
       },
     }
     const CREATE_WORKFLOW_URL = `/api/workflows`
-    const response = await api(instanceId).post(CREATE_WORKFLOW_URL, workflow)
+    const response = await api.post(CREATE_WORKFLOW_URL, workflow)
     const json = await response.json()
     store.update(state => {
       state.workflows = state.workflows.concat(json.workflow)
@@ -28,9 +28,9 @@ const workflowActions = store => ({
       return state
     })
   },
-  save: async ({ instanceId, workflow }) => {
+  save: async ({ workflow }) => {
     const UPDATE_WORKFLOW_URL = `/api/workflows`
-    const response = await api(instanceId).put(UPDATE_WORKFLOW_URL, workflow)
+    const response = await api.put(UPDATE_WORKFLOW_URL, workflow)
     const json = await response.json()
     store.update(state => {
       const existingIdx = state.workflows.findIndex(
@@ -42,9 +42,9 @@ const workflowActions = store => ({
       return state
     })
   },
-  update: async ({ instanceId, workflow }) => {
+  update: async ({ workflow }) => {
     const UPDATE_WORKFLOW_URL = `/api/workflows`
-    const response = await api(instanceId).put(UPDATE_WORKFLOW_URL, workflow)
+    const response = await api.put(UPDATE_WORKFLOW_URL, workflow)
     const json = await response.json()
     store.update(state => {
       const existingIdx = state.workflows.findIndex(
@@ -55,10 +55,10 @@ const workflowActions = store => ({
       return state
     })
   },
-  delete: async ({ instanceId, workflow }) => {
+  delete: async ({ workflow }) => {
     const { _id, _rev } = workflow
     const DELETE_WORKFLOW_URL = `/api/workflows/${_id}/${_rev}`
-    await api(instanceId).delete(DELETE_WORKFLOW_URL)
+    await api.delete(DELETE_WORKFLOW_URL)
 
     store.update(state => {
       const existingIdx = state.workflows.findIndex(
diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
index f1d49894a0..8eb6defa8f 100644
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@@ -53,12 +53,10 @@
   let views = []
   let currentPage = 0
 
-  $: instanceId = $backendUiStore.selectedDatabase._id
-
   $: {
     if ($backendUiStore.selectedView) {
       api
-        .fetchDataForView($backendUiStore.selectedView, instanceId)
+        .fetchDataForView($backendUiStore.selectedView)
         .then(records => {
           data = records || []
           headers = Object.keys($backendUiStore.selectedModel.schema).filter(
diff --git a/packages/builder/src/components/database/ModelDataTable/api.js b/packages/builder/src/components/database/ModelDataTable/api.js
index 9fb6651983..f50290b091 100644
--- a/packages/builder/src/components/database/ModelDataTable/api.js
+++ b/packages/builder/src/components/database/ModelDataTable/api.js
@@ -1,8 +1,8 @@
 import api from "builderStore/api"
 
-export async function createUser(user, instanceId) {
+export async function createUser(user) {
   const CREATE_USER_URL = `/api/users`
-  const response = await api(instanceId).post(CREATE_USER_URL, user)
+  const response = await api.post(CREATE_USER_URL, user)
   return await response.json()
 }
 
@@ -14,22 +14,22 @@ export async function createDatabase(appname, instanceName) {
   return await response.json()
 }
 
-export async function deleteRecord(record, instanceId) {
+export async function deleteRecord(record) {
   const DELETE_RECORDS_URL = `/api/${record._modelId}/records/${record._id}/${record._rev}`
-  const response = await api(instanceId).delete(DELETE_RECORDS_URL)
+  const response = await api.delete(DELETE_RECORDS_URL)
   return response
 }
 
-export async function saveRecord(record, instanceId, modelId) {
+export async function saveRecord(record, modelId) {
   const SAVE_RECORDS_URL = `/api/${modelId}/records`
-  const response = await api(instanceId).post(SAVE_RECORDS_URL, record)
+  const response = await api.post(SAVE_RECORDS_URL, record)
 
   return await response.json()
 }
 
-export async function fetchDataForView(viewName, instanceId) {
+export async function fetchDataForView(viewName) {
   const FETCH_RECORDS_URL = `/api/views/${viewName}`
 
-  const response = await api(instanceId).get(FETCH_RECORDS_URL)
+  const response = await api.get(FETCH_RECORDS_URL)
   return await response.json()
 }
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
index 6fb6cc8a2f..9e80ec4ca1 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@@ -18,7 +18,6 @@
   let fieldToEdit
 
   $: modelFields = model.schema ? Object.entries(model.schema) : []
-  $: instanceId = $backendUiStore.selectedDatabase._id
 
   function editField() {}
 
@@ -28,7 +27,7 @@
 
   async function saveModel() {
     const SAVE_MODEL_URL = `/api/models`
-    const response = await api(instanceId).post(SAVE_MODEL_URL, model)
+    const response = await api.post(SAVE_MODEL_URL, model)
     const newModel = await response.json()
     backendUiStore.actions.models.create(newModel)
     onClosed()
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
index 62688d58e3..a97cdc0ca1 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -14,8 +14,6 @@
   let errors = []
   let selectedModel
 
-  $: instanceId = $backendUiStore.selectedDatabase._id
-
   $: modelSchema = $backendUiStore.selectedModel
     ? Object.entries($backendUiStore.selectedModel.schema)
     : []
@@ -49,7 +47,6 @@
         ...record,
         modelId: $backendUiStore.selectedModel._id,
       },
-      instanceId,
       $backendUiStore.selectedModel._id
     )
     if (recordResponse.errors) {
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
index 6f9f5dac1a..53cb3e2cc6 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
@@ -30,7 +30,7 @@
 
   async function saveView() {
     const SAVE_VIEW_URL = `/api/views`
-    const response = await api(instanceId).post(SAVE_VIEW_URL, view)
+    const response = await api.post(SAVE_VIEW_URL, view)
     backendUiStore.update(state => {
       state.views = [...state.views, response.view]
       return state
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
index d5c924405f..60b77111d3 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
@@ -10,12 +10,11 @@
   let accessLevelId
 
   $: valid = username && password && accessLevelId
-  $: instanceId = $backendUiStore.selectedDatabase._id
   $: appId = $store.appId
 
   async function createUser() {
     const user = { name: username, username, password, accessLevelId }
-    const response = await api.createUser(user, instanceId)
+    const response = await api.createUser(user)
     backendUiStore.actions.users.create(response)
     onClosed()
   }
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
index 05ecfcd85f..aa192b32eb 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
@@ -6,7 +6,6 @@
   export let record
   export let onClosed
 
-  $: instanceId = $backendUiStore.selectedDatabase._id
 </script>
 
 <section>
@@ -25,7 +24,7 @@
     <ActionButton
       alert
       on:click={async () => {
-        await api.deleteRecord(record, instanceId)
+        await api.deleteRecord(record)
         backendUiStore.actions.records.delete(record)
         onClosed()
       }}>
diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
index de7d010894..9465c85140 100644
--- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
+++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
@@ -53,7 +53,7 @@
 
   async function deleteModel(modelToDelete) {
     const DELETE_MODEL_URL = `/api/models/${node._id}/${node._rev}`
-    const response = await api(instanceId).delete(DELETE_MODEL_URL)
+    const response = await api.delete(DELETE_MODEL_URL)
     backendUiStore.update(state => {
       state.models = state.models.filter(
         model => model._id !== modelToDelete._id
diff --git a/packages/builder/src/components/nav/UsersList.svelte b/packages/builder/src/components/nav/UsersList.svelte
index 29bc4a4ed3..e213aa066c 100644
--- a/packages/builder/src/components/nav/UsersList.svelte
+++ b/packages/builder/src/components/nav/UsersList.svelte
@@ -12,12 +12,11 @@
 
   $: currentAppInfo = {
     appname: $store.appname,
-    instanceId: $backendUiStore.selectedDatabase._id,
   }
 
   async function fetchUsers() {
     const FETCH_USERS_URL = `/api/users`
-    const response = await api(currentAppInfo.instanceId).get(FETCH_USERS_URL)
+    const response = await api.get(FETCH_USERS_URL)
     const users = await response.json()
     backendUiStore.update(state => {
       state.users = users
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index 9b8aedd453..17f096ec6b 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -37,7 +37,6 @@ exports.defaultHeaders = (appId, instanceId) => {
   return {
     Accept: "application/json",
     Cookie: [`builder:token=${builderToken}`],
-    "x-user-agent": "Budibase Builder",
   }
 }
 

From 31f8d3bee2149fddc4c6835d512750e016f5f274 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 19 Jun 2020 17:21:24 +0100
Subject: [PATCH 44/57] codereview: looksLikeAppId as variable

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

diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index 2f0ea8f4b0..67ec8e391a 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -26,7 +26,8 @@ exports.serveApp = async function(ctx) {
   )
   // only set the appId cookie for /appId .. we COULD check for valid appIds
   // but would like to avoid that DB hit
-  if (looksLikeAppId(ctx.params.appId) && !ctx.isAuthenticated) {
+  const looksLikeAppId = /^[0-9a-f]{32}$/.test(ctx.params.appId)
+  if (looksLikeAppId && !ctx.isAuthenticated) {
     const anonUser = {
       userId: "ANON",
       accessLevelId: ANON_LEVEL_ID,
@@ -74,5 +75,3 @@ exports.serveComponentLibrary = async function(ctx) {
 
   await send(ctx, "/index.js", { root: componentLibraryPath })
 }
-
-const looksLikeAppId = appId => /^[0-9a-f]{32}$/.test(appId)

From af0ed48774aca643d2121c6a0364f0d5db5803e1 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Sat, 20 Jun 2020 20:30:00 +0100
Subject: [PATCH 45/57] bugfix: workflow still passing instanceId to api()

---
 packages/builder/src/builderStore/store/workflow/index.js     | 4 ++--
 .../workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/builderStore/store/workflow/index.js b/packages/builder/src/builderStore/store/workflow/index.js
index d794868df3..9d50f85661 100644
--- a/packages/builder/src/builderStore/store/workflow/index.js
+++ b/packages/builder/src/builderStore/store/workflow/index.js
@@ -3,9 +3,9 @@ import api from "../../api"
 import Workflow from "./Workflow"
 
 const workflowActions = store => ({
-  fetch: async instanceId => {
+  fetch: async () => {
     const WORKFLOWS_URL = `/api/workflows`
-    const workflowResponse = await api(instanceId).get(WORKFLOWS_URL)
+    const workflowResponse = await api.get(WORKFLOWS_URL)
     const json = await workflowResponse.json()
     store.update(state => {
       state.workflows = json
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
index f4c0f2ebf8..ece0a47016 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@@ -22,7 +22,7 @@
   }
 
   onMount(() => {
-    workflowStore.actions.fetch($backendUiStore.selectedDatabase._id)
+    workflowStore.actions.fetch()
   })
 </script>
 

From ff2c2340e2a5a377d33886ad3f55769f10449395 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Sun, 21 Jun 2020 06:01:29 +0100
Subject: [PATCH 46/57] bugfix:Dataform throwing error

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

diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index dc97c6971d..6188165aa7 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -32,7 +32,7 @@
     const json = await response.json()
 
     store.update(state => {
-      state[model._id] = [...state[model], json]
+      state[model] = state[model] ? [...state[model], json] : [json]
       return state
     })
   }

From bf89f3c403163c0b46ec89cd1a2380ce6a1b50cd Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Sun, 21 Jun 2020 20:54:37 +0100
Subject: [PATCH 47/57] removed ADMIN_SECRET env var (no longer needed)

---
 packages/builder/cypress/plugins/index.js | 21 +++++++++++++++++++++
 packages/builder/cypress/setup.js         |  2 +-
 packages/server/.env.template             |  3 ---
 packages/server/scripts/jestSetup.js      |  1 -
 packages/server/src/environment.js        |  1 -
 5 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 packages/builder/cypress/plugins/index.js

diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js
new file mode 100644
index 0000000000..aa9918d215
--- /dev/null
+++ b/packages/builder/cypress/plugins/index.js
@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}
diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js
index 9682a07118..a6566237ce 100644
--- a/packages/builder/cypress/setup.js
+++ b/packages/builder/cypress/setup.js
@@ -11,7 +11,7 @@ const run = require("../../cli/src/commands/run/runHandler")
 
 rimraf.sync(homedir)
 
-init({ dir: homedir })
+init({ dir: homedir, clientId: "cypress-test" })
 .then(() => {
   run({ dir: homedir })
 })
diff --git a/packages/server/.env.template b/packages/server/.env.template
index 170d391520..f282d9c67f 100644
--- a/packages/server/.env.template
+++ b/packages/server/.env.template
@@ -5,9 +5,6 @@ COUCH_DB_URL={{couchDbUrl}}
 # identifies a client database - i.e. group of apps
 CLIENT_ID={{clientId}}
 
-# Full access API key for server
-ADMIN_SECRET={{adminSecret}}
-
 # used to create cookie hashes
 JWT_SECRET={{cookieKey1}}
 
diff --git a/packages/server/scripts/jestSetup.js b/packages/server/scripts/jestSetup.js
index ab5bc83885..8fc7082554 100644
--- a/packages/server/scripts/jestSetup.js
+++ b/packages/server/scripts/jestSetup.js
@@ -4,5 +4,4 @@ process.env.NODE_ENV = "jest"
 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/environment.js b/packages/server/src/environment.js
index fdf8b9874a..9bab1ed1a0 100644
--- a/packages/server/src/environment.js
+++ b/packages/server/src/environment.js
@@ -3,7 +3,6 @@ module.exports = {
   NODE_ENV: process.env.NODE_ENV,
   JWT_SECRET: process.env.JWT_SECRET,
   BUDIBASE_DIR: process.env.BUDIBASE_DIR,
-  ADMIN_SECRET: process.env.ADMIN_SECRET,
   PORT: process.env.PORT,
   COUCH_DB_URL: process.env.COUCH_DB_URL,
   SALT_ROUNDS: process.env.SALT_ROUNDS,

From 0ff6cc75e7b16f679bf73a8287a2f4ed47e96d53 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Sun, 21 Jun 2020 21:21:24 +0100
Subject: [PATCH 48/57] removed debug message

---
 packages/cli/src/commands/run/runHandler.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/cli/src/commands/run/runHandler.js b/packages/cli/src/commands/run/runHandler.js
index 04b21a4ff0..e3f669cf53 100644
--- a/packages/cli/src/commands/run/runHandler.js
+++ b/packages/cli/src/commands/run/runHandler.js
@@ -5,7 +5,6 @@ module.exports = ({ dir }) => {
   dir = xPlatHomeDir(dir)
   process.env.BUDIBASE_DIR = resolve(dir)
   require("dotenv").config({ path: resolve(dir, ".env") })
-  console.log("dotenv loaded")
 
   // dont make this a variable or top level require
   // ti will cause environment module to be loaded prematurely

From 8acdda053dcfb53b75878c641189d581ae53239f Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Sun, 21 Jun 2020 21:26:53 +0100
Subject: [PATCH 49/57] cypress tests - run on windows

---
 packages/builder/cypress/setup.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js
index a6566237ce..4f20fec9ba 100644
--- a/packages/builder/cypress/setup.js
+++ b/packages/builder/cypress/setup.js
@@ -13,5 +13,8 @@ rimraf.sync(homedir)
 
 init({ dir: homedir, clientId: "cypress-test" })
 .then(() => {
+  delete require.cache[require.resolve("../../server/src/environment")]
   run({ dir: homedir })
 })
+
+

From d424c3ff52f125764572f0652ecf10aab165b9cc Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Sun, 21 Jun 2020 21:41:10 +0100
Subject: [PATCH 50/57] lint fix

---
 packages/builder/cypress/plugins/index.js | 1 +
 packages/builder/cypress/setup.js         | 5 +----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js
index aa9918d215..59b2bab6e4 100644
--- a/packages/builder/cypress/plugins/index.js
+++ b/packages/builder/cypress/plugins/index.js
@@ -15,6 +15,7 @@
 /**
  * @type {Cypress.PluginConfig}
  */
+// eslint-disable-next-line no-unused-vars
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js
index 4f20fec9ba..80516471da 100644
--- a/packages/builder/cypress/setup.js
+++ b/packages/builder/cypress/setup.js
@@ -11,10 +11,7 @@ const run = require("../../cli/src/commands/run/runHandler")
 
 rimraf.sync(homedir)
 
-init({ dir: homedir, clientId: "cypress-test" })
-.then(() => {
+init({ dir: homedir, clientId: "cypress-test" }).then(() => {
   delete require.cache[require.resolve("../../server/src/environment")]
   run({ dir: homedir })
 })
-
-

From a1df978b80b312a35e17be45842fa86222633497 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 22 Jun 2020 10:53:17 +0100
Subject: [PATCH 51/57] cypress - retain "builder:token" cookie between tests

---
 packages/builder/cypress/support/cookies.js | 3 +++
 packages/builder/cypress/support/index.js   | 1 +
 2 files changed, 4 insertions(+)
 create mode 100644 packages/builder/cypress/support/cookies.js

diff --git a/packages/builder/cypress/support/cookies.js b/packages/builder/cypress/support/cookies.js
new file mode 100644
index 0000000000..bfb470c57b
--- /dev/null
+++ b/packages/builder/cypress/support/cookies.js
@@ -0,0 +1,3 @@
+Cypress.Cookies.defaults({
+  whitelist: "builder:token",
+})
diff --git a/packages/builder/cypress/support/index.js b/packages/builder/cypress/support/index.js
index a80764cb2c..15c9d759fc 100644
--- a/packages/builder/cypress/support/index.js
+++ b/packages/builder/cypress/support/index.js
@@ -14,6 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
+import "./cookies"
 import "./commands"
 
 // Alternatively you can use CommonJS syntax:

From a29f82180211523021ab476d1a54234a70a93ea8 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 22 Jun 2020 11:29:34 +0100
Subject: [PATCH 52/57] cypress - changed background test to font-size (so i
 dont have to figure out how to test the colour picker)

---
 .../cypress/integration/createComponents.spec.js       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js
index 299f6b8ad2..cedd8fefe1 100644
--- a/packages/builder/cypress/integration/createComponents.spec.js
+++ b/packages/builder/cypress/integration/createComponents.spec.js
@@ -20,13 +20,13 @@ context('Create Components', () => {
 
         getIframeBody().contains('An Amazing headline!')
     })
-    it('change the background color of the headline', () => {
-        cy.contains('Background').click()
-        cy.get('input[name="background"]')
-            .type('rgb(102, 51, 153)')
+    it('change the font size of the headline', () => {
+        cy.contains('Typography').click()
+        cy.get('input[name="font-size"]')
+            .type('60px')
         cy.contains('Design').click()
 
-        getIframeBody().contains('An Amazing headline!').should('have.css', 'background-color', 'rgb(102, 51, 153)')
+        getIframeBody().contains('An Amazing headline!').should('have.css', 'font-size', '60px')
     })
 })
 

From 9670a0cb5c6db914513acf4632c91a5afd945c57 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 22 Jun 2020 16:39:28 +0200
Subject: [PATCH 53/57] remove cookies set up in each test and rely on cookie
 default added before

---
 packages/builder/cypress/integration/createModel.spec.js    | 1 -
 packages/builder/cypress/integration/createWorkflow.spec.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js
index 3d46316607..830f5e7a48 100644
--- a/packages/builder/cypress/integration/createModel.spec.js
+++ b/packages/builder/cypress/integration/createModel.spec.js
@@ -1,7 +1,6 @@
 context('Create a Model', () => {
 
     before(() => {
-        Cypress.Cookies.preserveOnce('builder:token')
         cy.visit('localhost:4001/_builder')
         // https://on.cypress.io/type
         cy.createApp('Model App', 'Model App Description')
diff --git a/packages/builder/cypress/integration/createWorkflow.spec.js b/packages/builder/cypress/integration/createWorkflow.spec.js
index b4d83e228b..9188721988 100644
--- a/packages/builder/cypress/integration/createWorkflow.spec.js
+++ b/packages/builder/cypress/integration/createWorkflow.spec.js
@@ -1,7 +1,6 @@
 context('Create a workflow', () => {
 
     before(() => {
-        Cypress.Cookies.preserveOnce('builder:token')
         cy.visit('localhost:4001/_builder')
 
         cy.createApp('Workflow Test App', 'This app is used to test that workflows do in fact work!')

From 897a0a875b950509b61a0f8d07a160dae94747d7 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 22 Jun 2020 16:32:57 +0100
Subject: [PATCH 54/57] Swatch Panel, Logic and UI Updates

---
 .../Colorpicker/CheckedBackground.svelte      |   5 +-
 .../Colorpicker/Colorpicker.svelte            | 104 ++++++++++++------
 .../Colorpicker/Colorpreview.svelte           |   4 +-
 .../userInterface/Colorpicker/Swatch.svelte   |  53 +++++++++
 4 files changed, 129 insertions(+), 37 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte

diff --git a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
index 9ed2899203..19d54523b2 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
@@ -6,8 +6,9 @@
     export let borderRadius = ""
     export let height = ""
     export let width = ""
+    export let margin = ""
 
-    $: style = buildStyle({backgroundSize, borderRadius, height, width})
+    $: style = buildStyle({backgroundSize, borderRadius, height, width, margin})
 
 </script>
 
@@ -19,6 +20,6 @@
   }
 </style>
 
-<div transition:fade {style}>
+<div in:fade {style}>
     <slot />
 </div>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 2e80f826bd..5989e6b3ed 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte";
   import { fade } from 'svelte/transition';
+  import Swatch from "./Swatch.svelte";
   import CheckedBackground from "./CheckedBackground.svelte"
   import {buildStyle} from "./helpers.js"
   import {
@@ -14,13 +15,16 @@
   import Input from "./Input.svelte";
 
   export let value = "#3ec1d3ff";
+  export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
+  export let disableSwatches = false
   export let format = "hexa";
+  export let open = false;
   
-  let recentColors = []
-
   export let pickerHeight = 0;
   export let pickerWidth = 0;
 
+  let adder = null;
+
   let h = null;
   let s = null;
   let v = null;
@@ -29,7 +33,10 @@
   const dispatch = createEventDispatcher();
 
   onMount(() => {
-    getRecentColors()
+    if(!swatches.length > 0) {
+      //Don't use locally stored recent colors if swatches have been passed as props
+      getRecentColors()
+    }
 
     if (format) {
       convertAndSetHSVA()
@@ -39,17 +46,17 @@
   function getRecentColors() {
     let colorStore = localStorage.getItem("cp:recent-colors")
     if (colorStore) {
-      recentColors = JSON.parse(colorStore)
+      swatches = JSON.parse(colorStore)      
     }
   }
 
   function setRecentColor(color) {
-    if (recentColors.length === 6) {
-      recentColors.splice(0, 1)
+    if (swatches.length === 12) {
+      swatches.splice(0, 1)
     }
-    if (!recentColors.includes(color)) {
-      recentColors = [...recentColors, color]
-      localStorage.setItem("cp:recent-colors", JSON.stringify(recentColors))
+    if (!swatches.includes(color)) {
+      swatches = [...swatches, color]
+      localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
     }
   }
 
@@ -70,7 +77,6 @@
     s = detail.s;
     v = detail.v;
     value = convertHsvaToFormat([h, s, v, a], format);
-    setRecentColor(value)
     dispatchValue()
   }
 
@@ -78,7 +84,6 @@
     h = color;
     value = convertHsvaToFormat([h, s, v, a], format);   
     if(!isDrag) {
-      setRecentColor(value)
       dispatchValue()
     } 
   }
@@ -87,7 +92,6 @@
     a = color === "1.00" ? "1" : color;
     value = convertHsvaToFormat([h, s, v, a], format);    
     if(!isDrag) {
-        setRecentColor(value)
         dispatchValue()
       } 
   }
@@ -111,13 +115,26 @@
 
   function dispatchInputChange() {
     if(format) {
-      setRecentColor(value)
       dispatchValue()
     }
   }
+
+  function addSwatch() {
+    if(format) {
+      dispatch("addswatch", value)
+      setRecentColor(value)
+    }
+  }
+
+  function removeSwatch(idx) {
+    let removedSwatch = swatches.splice(idx, 1);
+    swatches = swatches
+    dispatch("removeswatch", removedSwatch)
+    localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
+  }
   
 
-  function applyRecentColor(color) {
+  function applySwatch(color) {
     if(value !== color) {
       format = getColorFormat(color)
       if(format) {
@@ -127,8 +144,10 @@
       }
     }
   }
+
     $: border = (v > 90 && s < 5) ? "1px dashed #dedada" : ""
     $: style = buildStyle({background: value, border})
+    $: shrink = swatches.length > 0
 </script>
 
 <style>
@@ -173,28 +192,40 @@
     border-radius: 50%;
   }
 
-  .recent-color-panel {
+   .swatch-panel {
     flex: 0 0 15px;
-    display: grid;
-    grid-gap: 10px;
+    display: flex;
+    flex-flow: row wrap;
     justify-content: flex-start;
-    grid-auto-flow: column;
-    padding: 5px;
-    margin-left: 6px;
+    padding: 0 5px;
+    max-height: 56px;
   }
 
-  .recent-color {
+  .adder {
+    flex: 1;
+    height: 20px;		
+    display: flex;
+    transition: flex 0.5s;
+    justify-content: center;
+    align-items: center;
+    background: #f1f3f4;
     cursor: pointer;
-    border-radius: 6px;
-    border: 1px solid #dedada;  
-    height: 20px; 
-    width: 20px;   
+    border: 1px solid #d4d4d4;
+    border-radius: 8px;
+    margin-left: 5px;
+    margin-top: 3px;
+    font-weight: 500;
+  }
+
+  .shrink { 
+    flex: 0 0 20px;
   }
 
   .format-input-panel {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    padding-top: 3px;
   }
 </style>
 
@@ -226,15 +257,20 @@
       </div>
     </div>
 
-    {#if recentColors.length > 0}
-      <div transition:fade class="recent-color-panel">
-        {#each recentColors as color}
-          <CheckedBackground borderRadius="6px"> 
-            <div transition:fade class="recent-color" style={`background: ${color};`} on:click={() => applyRecentColor(color)} />
-          </CheckedBackground>
-        {/each}
-      </div>
-    {/if}
+      {#if !disableSwatches}
+        <div transition:fade class="swatch-panel">
+          {#if swatches.length > 0}
+            {#each swatches as color, idx}
+              <Swatch {color} on:click={() => applySwatch(color)} on:removeswatch={() => removeSwatch(idx)} />
+            {/each}
+          {/if}
+          {#if swatches.length !== 12}
+            <div bind:this={adder} transition:fade class="adder" on:click={addSwatch} class:shrink>
+              <span>&plus;</span>
+            </div>
+          {/if}
+        </div>
+      {/if}
 
     <div class="format-input-panel">
       <ButtonGroup {format} onclick={changeFormatAndConvert} />
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
index 0534666e1c..32a5e63ff3 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -8,6 +8,8 @@
     import {getColorFormat} from "./utils.js"
 
     export let value = "#3ec1d3ff"
+    export let swatches = []
+    export let disableSwatches = false
     export let open = false;
     export let width = "25px"
     export let height = "25px"
@@ -99,7 +101,7 @@
 
         {#if open}
         <div transition:fade class="picker-container" style={pickerStyle}>
-            <Colorpicker on:change={onColorChange} bind:format bind:value bind:pickerHeight bind:pickerWidth />
+            <Colorpicker on:change={onColorChange} on:addswatch on:removeswatch bind:format bind:value bind:pickerHeight bind:pickerWidth {swatches} {disableSwatches} {open} />
         </div>
         <div on:click|self={() => open = false} class="overlay"></div>
         {/if}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte b/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
new file mode 100644
index 0000000000..e602b72d33
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
@@ -0,0 +1,53 @@
+<script>
+    import {createEventDispatcher} from "svelte"
+    import { fade } from 'svelte/transition';
+    import CheckedBackground from "./CheckedBackground.svelte"
+
+    export let hovered = false
+    export let color = "#fff"
+
+    const dispatch = createEventDispatcher()
+
+</script>
+
+<style>
+  .swatch {
+    position: relative;
+    cursor: pointer;
+    border-radius: 6px;
+    border: 1px solid #dedada;  
+    height: 20px; 
+    width: 20px;
+  }
+
+  .space {
+      padding: 3px 5px;
+  }
+
+  .remove-icon {
+    position: absolute;
+    right: 0;
+    top: -5px;
+    right: -4px;
+    width:10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #800000;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
+
+<div class="space">
+  <CheckedBackground borderRadius="6px"> 
+    <div in:fade class="swatch" style={`background: ${color};`} on:click|self on:mouseover={() => hovered = true} on:mouseleave={() => hovered = false}>
+        {#if hovered}
+        <div in:fade class="remove-icon" on:click|self={()=> dispatch("removeswatch")}>
+            <span on:click|self={()=> dispatch("removeswatch")}>&times;</span>
+        </div>
+        {/if}
+    </div>            
+</CheckedBackground>
+</div>
\ No newline at end of file

From e643d6651fbc1076f886fd48fdc1d6a3bf251090 Mon Sep 17 00:00:00 2001
From: Victoria Sloan <victoriasloan@victorias-mbp.home>
Date: Mon, 22 Jun 2020 17:38:00 +0100
Subject: [PATCH 55/57] setting appId on user object when creating the app
 instance

---
 packages/cli/src/commands/new/newHandler.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/cli/src/commands/new/newHandler.js b/packages/cli/src/commands/new/newHandler.js
index 44007acde7..c0d8b4be50 100644
--- a/packages/cli/src/commands/new/newHandler.js
+++ b/packages/cli/src/commands/new/newHandler.js
@@ -18,7 +18,7 @@ const run = async opts => {
     console.log(chalk.green(`Budibase app ${opts.name} created!`))
   } catch (error) {
     console.error(
-      chalk.red("Error creating new app", JSON.stringify(error, { space: 2 }))
+      chalk.red("Error creating new app", error)
     )
   }
 }
@@ -52,8 +52,10 @@ const createAppInstance = async opts => {
   const instanceController = require("@budibase/server/src/api/controllers/instance")
   const createInstCtx = {
     params: {
-      clientId: process.env.CLIENT_ID,
-      applicationId: opts.applicationId,
+      clientId: process.env.CLIENT_ID
+    },
+    user: {
+      appId: opts.applicationId
     },
     request: {
       body: { name: `dev-${process.env.CLIENT_ID}` },

From 16430cb7984f472ff7ecbf1152e3e0c7e8d75cd5 Mon Sep 17 00:00:00 2001
From: Victoria Sloan <victoriasloan@victorias-mbp.home>
Date: Mon, 22 Jun 2020 18:07:52 +0100
Subject: [PATCH 56/57] linty

---
 packages/cli/src/commands/new/newHandler.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/cli/src/commands/new/newHandler.js b/packages/cli/src/commands/new/newHandler.js
index c0d8b4be50..64c974cdf9 100644
--- a/packages/cli/src/commands/new/newHandler.js
+++ b/packages/cli/src/commands/new/newHandler.js
@@ -17,9 +17,7 @@ const run = async opts => {
     exec(`cd ${join(opts.dir, opts.applicationId)} && npm install`)
     console.log(chalk.green(`Budibase app ${opts.name} created!`))
   } catch (error) {
-    console.error(
-      chalk.red("Error creating new app", error)
-    )
+    console.error(chalk.red("Error creating new app", error))
   }
 }
 
@@ -52,10 +50,10 @@ const createAppInstance = async opts => {
   const instanceController = require("@budibase/server/src/api/controllers/instance")
   const createInstCtx = {
     params: {
-      clientId: process.env.CLIENT_ID
+      clientId: process.env.CLIENT_ID,
     },
     user: {
-      appId: opts.applicationId
+      appId: opts.applicationId,
     },
     request: {
       body: { name: `dev-${process.env.CLIENT_ID}` },

From c9b35508d98f84bc6a5752024ffcbd503ac24ddd Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 22 Jun 2020 21:16:51 +0100
Subject: [PATCH 57/57] #363 bugfix: page not built until prop changed

---
 .../server/src/api/controllers/application.js     | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index ab4820794f..43463fc4fd 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -1,6 +1,6 @@
 const CouchDB = require("../../db")
 const ClientDb = require("../../db/clientDb")
-const { getPackageForBuilder } = require("../../utilities/builder")
+const { getPackageForBuilder, buildPage } = require("../../utilities/builder")
 const newid = require("../../db/newid")
 const env = require("../../environment")
 const instanceController = require("./instance")
@@ -111,15 +111,23 @@ const createEmptyAppPackage = async (ctx, app) => {
   await updateJsonFile(join(appsFolder, app._id, "package.json"), {
     name: npmFriendlyAppName(app.name),
   })
-  await updateJsonFile(
+
+  const mainJson = await updateJsonFile(
     join(appsFolder, app._id, "pages", "main", "page.json"),
     app
   )
-  await updateJsonFile(
+
+  await buildPage(ctx.config, app._id, "main", { page: mainJson })
+
+  const unauthenticatedJson = await updateJsonFile(
     join(appsFolder, app._id, "pages", "unauthenticated", "page.json"),
     app
   )
 
+  await buildPage(ctx.config, app._id, "unauthenticated", {
+    page: unauthenticatedJson,
+  })
+
   return newAppFolder
 }
 
@@ -145,6 +153,7 @@ const updateJsonFile = async (filePath, app) => {
   const json = await readFile(filePath, "utf8")
   const newJson = sqrl.Render(json, app)
   await writeFile(filePath, newJson, "utf8")
+  return JSON.parse(newJson)
 }
 
 const runNpmInstall = async newAppFolder => {