From 69b840c919e37e4c68b0f8bfeeb2b4bea727f302 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 26 Jan 2021 08:55:44 +0000
Subject: [PATCH 01/86] Add initial work on new Form component, spectrum styles
 and new text field

---
 .../design/AppPreview/componentStructure.json |   5 +-
 packages/client/yarn.lock                     |   5 -
 packages/standard-components/manifest.json    |  90 ++++++++++---
 packages/standard-components/package.json     |   8 ++
 packages/standard-components/rollup.config.js |   2 +
 .../standard-components/src/DataForm.svelte   |   5 -
 .../src/DataFormWide.svelte                   |   5 -
 .../standard-components/src/forms/Form.svelte | 123 ++++++++++++++++++
 .../src/forms/Input.svelte                    |  67 ++++++++++
 .../standard-components/src/forms/index.js    |   2 +
 packages/standard-components/src/index.js     |  15 ++-
 .../standard-components/src/spectrum-icons.js |  32 +++++
 packages/standard-components/yarn.lock        |  59 ++++++++-
 13 files changed, 376 insertions(+), 42 deletions(-)
 delete mode 100644 packages/standard-components/src/DataForm.svelte
 delete mode 100644 packages/standard-components/src/DataFormWide.svelte
 create mode 100644 packages/standard-components/src/forms/Form.svelte
 create mode 100644 packages/standard-components/src/forms/Input.svelte
 create mode 100644 packages/standard-components/src/forms/index.js
 create mode 100644 packages/standard-components/src/spectrum-icons.js

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index bed95c607f..e0881821c7 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -7,8 +7,7 @@
     "name": "Form",
     "icon": "ri-file-edit-line",
     "children": [
-      "dataform",
-      "dataformwide",
+      "form",
       "input",
       "richtext",
       "datepicker"
@@ -59,4 +58,4 @@
       "newrow"
     ]
   }
-]
\ No newline at end of file
+]
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index 6660faa3eb..1a17d999c3 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -1362,11 +1362,6 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-mustache@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.0.1.tgz#d99beb031701ad433338e7ea65e0489416c854a2"
-  integrity sha512-yL5VE97+OXn4+Er3THSmTdCFCtx5hHWzrolvH+JObZnUYwuaG7XV+Ch4fR2cIrcYI0tFHxS7iyFYl14bW8y2sA==
-
 nanoid@^2.1.0:
   version "2.1.11"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 901ea0df3c..c9c13c4dba 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -115,33 +115,54 @@
       }
     ]
   },
-  "dataform": {
+  "form": {
     "name": "Form",
     "icon": "ri-file-edit-line",
-    "styleable": true
-  },
-  "dataformwide": {
-    "name": "Wide Form",
-    "icon": "ri-file-edit-line",
-    "styleable": true
-  },
-  "input": {
-    "name": "Text Field",
-    "description": "A textfield component that allows the user to input text.",
-    "icon": "ri-edit-box-line",
     "styleable": true,
-    "bindable": true,
+    "hasChildren": true,
+    "dataProvider": true,
+    "datasourceSetting": "datasource",
     "settings": [
       {
-        "type": "text",
-        "label": "Label",
-        "key": "label"
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
       },
       {
-        "label": "Type",
-        "key": "type",
-        "defaultValue": "text",
-        "options": ["text", "password"]
+        "type": "select",
+        "label": "Theme",
+        "key": "theme",
+        "defaultValue": "spectrum--light",
+        "options": [
+          {
+            "label": "Light",
+            "value": "spectrum--light"
+          },
+          {
+            "label": "Dark",
+            "value": "spectrum--dark"
+          },
+          {
+            "label": "Darkest",
+            "value": "spectrum--darkest"
+          }
+        ]
+      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "spectrum--medium",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ]
       }
     ]
   },
@@ -1102,5 +1123,34 @@
         "defaultValue": true
       }
     ]
+  },
+  "input": {
+    "name": "Text Field",
+    "description": "A textfield component that allows the user to input text.",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "bindable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder"
+      },
+      {
+        "type": "boolean",
+        "label": "Required",
+        "key": "required"
+      }
+    ]
   }
 }
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index b5b3a64888..7ae2b94b7f 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -22,6 +22,7 @@
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-postcss": "^3.1.5",
     "rollup-plugin-svelte": "^6.1.1",
+    "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "sirv-cli": "^0.4.4",
     "svelte": "^3.30.0"
@@ -33,10 +34,17 @@
   "license": "MIT",
   "gitHead": "62ebf3cedcd7e9b2494b4f8cbcfb90927609b491",
   "dependencies": {
+    "@adobe/spectrum-css-workflow-icons": "^1.1.0",
     "@budibase/bbui": "^1.52.4",
     "@budibase/svelte-ag-grid": "^0.0.16",
+    "@spectrum-css/button": "^3.0.0-beta.6",
+    "@spectrum-css/icon": "^3.0.0-beta.2",
+    "@spectrum-css/page": "^3.0.0-beta.0",
+    "@spectrum-css/textfield": "^3.0.0-beta.6",
+    "@spectrum-css/vars": "^3.0.0-beta.2",
     "apexcharts": "^3.22.1",
     "flatpickr": "^4.6.6",
+    "loadicons": "^1.0.0",
     "lodash.debounce": "^4.0.8",
     "markdown-it": "^12.0.2",
     "quill": "^1.3.7",
diff --git a/packages/standard-components/rollup.config.js b/packages/standard-components/rollup.config.js
index dd8fd47b60..6d0e5fbd48 100644
--- a/packages/standard-components/rollup.config.js
+++ b/packages/standard-components/rollup.config.js
@@ -4,6 +4,7 @@ import svelte from "rollup-plugin-svelte"
 import postcss from "rollup-plugin-postcss"
 import json from "@rollup/plugin-json"
 import { terser } from "rollup-plugin-terser"
+import svg from "rollup-plugin-svg"
 
 import builtins from "rollup-plugin-node-builtins"
 
@@ -33,5 +34,6 @@ export default {
     }),
     commonjs(),
     json(),
+    svg(),
   ],
 }
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
deleted file mode 100644
index 6307bc6237..0000000000
--- a/packages/standard-components/src/DataForm.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import Form from "./Form.svelte"
-</script>
-
-<Form wide={false} />
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
deleted file mode 100644
index 4edcf839b1..0000000000
--- a/packages/standard-components/src/DataFormWide.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import Form from "./Form.svelte"
-</script>
-
-<Form wide />
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
new file mode 100644
index 0000000000..19cc11bc83
--- /dev/null
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -0,0 +1,123 @@
+<script>
+  import { setContext, getContext, onMount } from "svelte"
+  import { writable, get } from "svelte/store"
+
+  export let datasource
+  export let theme
+  export let size
+
+  const { styleable, API } = getContext("sdk")
+  const component = getContext("component")
+
+  let loaded = false
+  let schema = {}
+  let fieldMap = {}
+
+  // Keep form state up to date with form fields
+  $: updateFormState(fieldMap)
+
+  // Form state contains observable data about the form
+  const formState = writable({ values: {}, errors: {}, valid: true })
+
+  // Form API contains functions to control the form
+  const formApi = {
+    registerField: (field, validate) => {
+      if (!field) {
+        return
+      }
+      if (fieldMap[field] != null) {
+        return fieldMap[field]
+      }
+      fieldMap[field] = {
+        fieldState: makeFieldState(field),
+        fieldApi: makeFieldApi(field, validate),
+      }
+      fieldMap = fieldMap
+      return fieldMap[field]
+    },
+  }
+
+  // Provide both form API and state to children
+  setContext("form", { formApi, formState })
+
+  // Creates an API for a specific field
+  const makeFieldApi = (field, validate) => {
+    return {
+      setValue: value => {
+        const { fieldState } = fieldMap[field]
+        fieldState.update(state => {
+          state.value = value
+          state.error = validate ? validate(value) : null
+          state.valid = !state.error
+          return state
+        })
+        fieldMap = fieldMap
+      },
+    }
+  }
+
+  // Creates observable state data about a specific field
+  const makeFieldState = field => {
+    return writable({
+      field,
+      value: null,
+      error: null,
+      valid: true,
+    })
+  }
+
+  // Updates the form states from the field data
+  const updateFormState = fieldMap => {
+    let values = {}
+    let errors = {}
+    Object.entries(fieldMap).forEach(([field, formField]) => {
+      const fieldState = get(formField.fieldState)
+      values[field] = fieldState.value
+      if (fieldState.error) {
+        errors[field] = fieldState.error
+      }
+    })
+    const valid = Object.keys(errors).length === 0
+    formState.set({ values, errors, valid })
+  }
+
+  // Fetches the form schema from this form's datasource, if one exists
+  const fetchSchema = async () => {
+    if (!datasource?.tableId) {
+      schema = {}
+    } else {
+      const table = await API.fetchTableDefinition(datasource?.tableId)
+      if (table) {
+        if (datasource.type === "query") {
+          schema = table.parameters
+        } else {
+          schema = table.schema || {}
+        }
+        console.log(table)
+      }
+    }
+    loaded = true
+  }
+
+  // Load the form schema on mount
+  onMount(fetchSchema)
+</script>
+
+<div
+  lang="en"
+  dir="ltr"
+  use:styleable={$component.styles}
+  class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
+  {#if loaded}
+    <slot />
+  {/if}
+</div>
+
+<style>
+  .spectrum :global(label) {
+    font-size: var(
+      --spectrum-alias-item-text-size-m,
+      var(--spectrum-global-dimension-font-size-100)
+    ) !important;
+  }
+</style>
diff --git a/packages/standard-components/src/forms/Input.svelte b/packages/standard-components/src/forms/Input.svelte
new file mode 100644
index 0000000000..30f2790e67
--- /dev/null
+++ b/packages/standard-components/src/forms/Input.svelte
@@ -0,0 +1,67 @@
+<script>
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import { Label } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  export let field
+  export let label
+  export let placeholder
+  export let validate = value => (value ? null : "Required")
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+  const { formApi } = getContext("form") ?? {}
+
+  // Register this field with its form
+  const formField = formApi?.registerField(field, validate) ?? {}
+  const { fieldApi, fieldState } = formField
+
+  // Update value on blur only
+  const onBlur = event => {
+    fieldApi.setValue(event.target.value)
+  }
+</script>
+
+{#if !field}
+  <div>Add the Field setting to start using your component!</div>
+{:else if !fieldState}
+  <div>Form components need to be wrapped in a Form.</div>
+{:else}
+  <div class="container" use:styleable={$component.styles}>
+    {#if label}
+      <Label grey>{label}</Label>
+    {/if}
+    <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
+      {#if !$fieldState.valid}
+        <svg
+          class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+          focusable="false"
+          aria-hidden="true">
+          <use xlink:href="#spectrum-icon-18-Alert" />
+        </svg>
+      {/if}
+      <input
+        value={$fieldState.value || ''}
+        placeholder={placeholder || ''}
+        on:blur={onBlur}
+        type="text"
+        class="spectrum-Textfield-input" />
+    </div>
+    {#if $fieldState.error}
+      <div class="error">
+        <Label>{$fieldState.error}</Label>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .error :global(label) {
+    color: var(
+      --spectrum-semantic-negative-color-default,
+      var(--spectrum-global-color-red-500)
+    ) !important;
+    margin-top: var(--spacing-s) !important;
+    margin-bottom: 0 !important;
+  }
+</style>
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
new file mode 100644
index 0000000000..16e243a802
--- /dev/null
+++ b/packages/standard-components/src/forms/index.js
@@ -0,0 +1,2 @@
+export { default as form } from "./Form.svelte"
+export { default as input } from "./Input.svelte"
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index a856e60a14..b0fbf88017 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -1,17 +1,25 @@
 import "@budibase/bbui/dist/bbui.css"
 import "flatpickr/dist/flatpickr.css"
+import "@spectrum-css/vars/dist/spectrum-global.css"
+import "@spectrum-css/vars/dist/spectrum-medium.css"
+import "@spectrum-css/vars/dist/spectrum-large.css"
+import "@spectrum-css/vars/dist/spectrum-light.css"
+import "@spectrum-css/vars/dist/spectrum-dark.css"
+import "@spectrum-css/vars/dist/spectrum-darkest.css"
+import "@spectrum-css/page/dist/index-vars.css"
+import "@spectrum-css/button/dist/index-vars.css"
+
+import { loadSpectrumIcons } from "./spectrum-icons"
+loadSpectrumIcons()
 
 export { default as container } from "./Container.svelte"
 export { default as datagrid } from "./grid/Component.svelte"
 export { default as screenslot } from "./ScreenSlot.svelte"
 export { default as button } from "./Button.svelte"
-export { default as input } from "./Input.svelte"
 export { default as richtext } from "./RichText.svelte"
 export { default as list } from "./List.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"
-export { default as dataform } from "./DataForm.svelte"
-export { default as dataformwide } from "./DataFormWide.svelte"
 export { default as datepicker } from "./DatePicker.svelte"
 export { default as text } from "./Text.svelte"
 export { default as login } from "./Login.svelte"
@@ -26,3 +34,4 @@ export { default as cardstat } from "./CardStat.svelte"
 export { default as newrow } from "./NewRow.svelte"
 export { default as icon } from "./Icon.svelte"
 export * from "./charts"
+export * from "./forms"
diff --git a/packages/standard-components/src/spectrum-icons.js b/packages/standard-components/src/spectrum-icons.js
new file mode 100644
index 0000000000..932838339b
--- /dev/null
+++ b/packages/standard-components/src/spectrum-icons.js
@@ -0,0 +1,32 @@
+import "@spectrum-css/icon/dist/index-vars.css"
+import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg"
+import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg"
+
+export const loadSpectrumIcons = () => {
+  loadIconSet("Spectrum UI Icons", SpectrumUIIcons)
+  loadIconSet("Spectrum Workflow Icons", SpectrumWorkflowIcons)
+}
+
+const loadIconSet = (name, markup) => {
+  // Parse the SVG
+  const parser = new DOMParser()
+  try {
+    const doc = parser.parseFromString(markup, "image/svg+xml")
+    const svg = doc.firstChild
+
+    // Check a real SVG was parsed
+    if (svg && svg.tagName === "svg") {
+      // Hide the element
+      svg.style.display = "none"
+
+      // Insert it into the head
+      document.head.insertBefore(svg, null)
+    } else {
+      throw "Invalid tag type for SVG definition"
+    }
+  } catch (err) {
+    // Swallow error, but icons won't work
+    console.error(err)
+    console.error(`Failed to parse ${name}. Icons won't work.`)
+  }
+}
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 682c048276..732c50990a 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@adobe/spectrum-css-workflow-icons@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.1.0.tgz#79e97f86130e1a30b84c8524cebff93a600dbb8a"
+  integrity sha512-07ec4Pfr+W5II4a36nto3jShBZTbpe39lB977ULYN436UTQsnAdYupezBwFd7eEvOMUawgKfqnxyR2oPxp1SMQ==
+
 "@babel/code-frame@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -127,6 +132,33 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@spectrum-css/button@^3.0.0-beta.6":
+  version "3.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a"
+  integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg==
+
+"@spectrum-css/icon@^3.0.0-beta.2":
+  version "3.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb"
+  integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA==
+
+"@spectrum-css/page@^3.0.0-beta.0":
+  version "3.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.0-beta.0.tgz#885ea41b44861c5dc3aac904536f9e93c9109b58"
+  integrity sha512-+OD+l3aLisykxJnHfLkdkxMS1Uj1vKGYpKil7W0r5lSWU44eHyRgb8ZK5Vri1+sUO5SSf/CTybeVwtXME9wMLA==
+  dependencies:
+    "@spectrum-css/vars" "^3.0.0-beta.2"
+
+"@spectrum-css/textfield@^3.0.0-beta.6":
+  version "3.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.6.tgz#30c044ceb403d6ea82d8046fb8f767f7fe455da6"
+  integrity sha512-U7P8C3Xx8h5X+r+dZu1qbxceIxBn7ZSmMvJyC7MPSPcU3EwdzCUepERNGX7NrQdcX91XSNlPUOF7hZUognBwhQ==
+
+"@spectrum-css/vars@^3.0.0-beta.2":
+  version "3.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.0-beta.2.tgz#f0b3a2db44aa57b1a82e47ab392c716a3056a157"
+  integrity sha512-HpcRDUkSjKVWUi7+jf6zp33YszXs3qFljaaNVTVOf0m0mqjWWXHxgLrvYlFFlHp5ITbNXds5Cb7EgiXCKmVIpA==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -979,6 +1011,11 @@ esprima@^4.0.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
+estree-walker@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
+  integrity sha1-va/oCVOD2EFNXcLs9MkXO225QS4=
+
 estree-walker@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
@@ -1557,6 +1594,11 @@ loader-utils@^1.1.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loadicons@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/loadicons/-/loadicons-1.0.0.tgz#79fd9b08ef2933988c94068cbd246ef3f21cbd04"
+  integrity sha512-KSywiudfuOK5sTdhNMM8hwRpMxZ5TbQlU4ZijMxUFwRW7jpxUmb9YJoLIzDn7+xuxeLzCZWBmLJS2JDjDWCpsw==
+
 local-access@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/local-access/-/local-access-1.0.1.tgz#5121258146d64e869046c642ea4f1dd39ff942bb"
@@ -1662,7 +1704,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@^3.0.4:
+minimatch@^3.0.2, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -2456,6 +2498,13 @@ rollup-plugin-svelte@^6.1.1:
     rollup-pluginutils "^2.8.2"
     sourcemap-codec "^1.4.8"
 
+rollup-plugin-svg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-svg/-/rollup-plugin-svg-2.0.0.tgz#ce11b55e915d5b2190328c4e6632bd6b4fe12ee9"
+  integrity sha512-DmE7dSQHo1SC5L2uH2qul3Mjyd5oV6U1aVVkyvTLX/mUsRink7f1b1zaIm+32GEBA6EHu8H/JJi3DdWqM53ySQ==
+  dependencies:
+    rollup-pluginutils "^1.3.1"
+
 rollup-plugin-terser@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
@@ -2466,6 +2515,14 @@ rollup-plugin-terser@^7.0.2:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
+rollup-pluginutils@^1.3.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
+  integrity sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=
+  dependencies:
+    estree-walker "^0.2.1"
+    minimatch "^3.0.2"
+
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"

From 365c503224d3fd788c1edb8985d3e137bea12015 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 26 Jan 2021 14:40:44 +0000
Subject: [PATCH 02/86] Add automatic schema validation to forms and add
 builder settings for specific field types

---
 .../builder/src/builderStore/storeUtils.js    | 24 +++++-
 .../design/AppPreview/componentStructure.json |  4 +-
 .../PropertyControls/FormFieldSelect.svelte   | 33 ++++++++
 .../PropertyControls/NumberFieldSelect.svelte |  5 ++
 .../PropertyControls/OptionSelect.svelte      | 13 +++-
 .../OptionsFieldSelect.svelte                 |  5 ++
 .../PropertyControls/StringFieldSelect.svelte |  5 ++
 .../PropertiesPanel/SettingsView.svelte       |  6 ++
 packages/client/src/store/builder.js          |  8 +-
 packages/client/src/utils/styleable.js        | 14 ++--
 packages/standard-components/manifest.json    | 53 +++++++++++--
 .../standard-components/src/forms/Form.svelte | 18 +++--
 .../src/forms/NumberField.svelte              |  5 ++
 .../src/forms/OptionsField.svelte             |  1 +
 .../src/forms/Placeholder.svelte              | 17 ++++
 .../{Input.svelte => StringField.svelte}      |  9 ++-
 .../standard-components/src/forms/index.js    |  4 +-
 .../src/forms/validation.js                   | 78 +++++++++++++++++++
 18 files changed, 271 insertions(+), 31 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
 create mode 100644 packages/standard-components/src/forms/NumberField.svelte
 create mode 100644 packages/standard-components/src/forms/OptionsField.svelte
 create mode 100644 packages/standard-components/src/forms/Placeholder.svelte
 rename packages/standard-components/src/forms/{Input.svelte => StringField.svelte} (87%)
 create mode 100644 packages/standard-components/src/forms/validation.js

diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index 00f5a209a3..6d0f0beab0 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -59,8 +59,8 @@ export const findComponentPath = (rootComponent, id, path = []) => {
 }
 
 /**
- * Recurses through the component tree and finds all components of a certain
- * type.
+ * Recurses through the component tree and finds all components which match
+ * a certain selector
  */
 export const findAllMatchingComponents = (rootComponent, selector) => {
   if (!rootComponent || !selector) {
@@ -81,6 +81,26 @@ export const findAllMatchingComponents = (rootComponent, selector) => {
   return components.reverse()
 }
 
+/**
+ * Finds the closes parent component which matches certain criteria
+ */
+export const findClosestMatchingComponent = (
+  rootComponent,
+  componentId,
+  selector
+) => {
+  if (!selector) {
+    return null
+  }
+  const componentPath = findComponentPath(rootComponent, componentId).reverse()
+  for (let component of componentPath) {
+    if (selector(component)) {
+      return component
+    }
+  }
+  return null
+}
+
 /**
  * Recurses through a component tree evaluating a matching function against
  * components until a match is found
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index e0881821c7..9193a566b5 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -8,7 +8,9 @@
     "icon": "ri-file-edit-line",
     "children": [
       "form",
-      "input",
+      "stringfield",
+      "numberfield",
+      "optionsfield",
       "richtext",
       "datepicker"
     ]
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
new file mode 100644
index 0000000000..ca40946bcb
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@@ -0,0 +1,33 @@
+<script>
+  import OptionSelect from "./OptionSelect.svelte"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+  import { currentAsset } from "builderStore"
+  import { findClosestMatchingComponent } from "builderStore/storeUtils"
+
+  export let componentInstance
+  export let value
+  export let onChange
+  export let type
+
+  $: form = findClosestMatchingComponent(
+    $currentAsset.props,
+    componentInstance._id,
+    component => component._component === "@budibase/standard-components/form"
+  )
+  $: datasource = getDatasourceForProvider(form)
+  $: schema = getSchemaForDatasource(datasource).schema
+  $: options = getOptions(schema, type)
+
+  const getOptions = (schema, fieldType) => {
+    let entries = Object.entries(schema)
+    if (fieldType) {
+      entries = entries.filter(entry => entry[1].type === fieldType)
+    }
+    return entries.map(entry => entry[0])
+  }
+</script>
+
+<OptionSelect {value} {onChange} {options} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
new file mode 100644
index 0000000000..ce2569cf91
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="number" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
index 3ee839fbd0..c464ed84e0 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
@@ -106,7 +106,9 @@
   }
 
   $: displayLabel =
-    selectedOption && selectedOption.label ? selectedOption.label : value || ""
+    selectedOption && selectedOption.label
+      ? selectedOption.label
+      : value || "Choose option"
 </script>
 
 <div
@@ -129,11 +131,16 @@
         on:keydown={handleEscape}
         class="bb-select-menu">
         <ul>
+          <li
+            on:click|self={() => handleClick(null)}
+            class:selected={value == null || value === ''}>
+            Choose option
+          </li>
           {#if isOptionsObject}
             {#each options as { value: v, label }}
               <li
                 {...handleStyleBind(v)}
-                on:click|self={handleClick(v)}
+                on:click|self={() => handleClick(v)}
                 class:selected={value === v}>
                 {label}
               </li>
@@ -142,7 +149,7 @@
             {#each options as v}
               <li
                 {...handleStyleBind(v)}
-                on:click|self={handleClick(v)}
+                on:click|self={() => handleClick(v)}
                 class:selected={value === v}>
                 {v}
               </li>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
new file mode 100644
index 0000000000..526372e3d8
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="options" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
new file mode 100644
index 0000000000..27815af91f
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="string" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 6d3c0d07d3..da6ffc0f11 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -17,6 +17,9 @@
   import DetailScreenSelect from "./PropertyControls/DetailScreenSelect.svelte"
   import { IconSelect } from "./PropertyControls/IconSelect"
   import ColorPicker from "./PropertyControls/ColorPicker.svelte"
+  import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
+  import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
+  import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
 
   export let componentDefinition = {}
   export let componentInstance = {}
@@ -58,6 +61,9 @@
     icon: IconSelect,
     field: TableViewFieldSelect,
     multifield: MultiTableViewFieldSelect,
+    "field/string": StringFieldSelect,
+    "field/number": NumberFieldSelect,
+    "field/options": OptionsFieldSelect,
   }
 
   const getControl = type => {
diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js
index c7599e5254..295bb6ccc9 100644
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@@ -13,9 +13,11 @@ const createBuilderStore = () => {
   const store = writable(initialState)
   const actions = {
     selectComponent: id => {
-      window.dispatchEvent(
-        new CustomEvent("bb-select-component", { detail: id })
-      )
+      if (id) {
+        window.dispatchEvent(
+          new CustomEvent("bb-select-component", { detail: id })
+        )
+      }
     },
   }
   return {
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 3e934016f6..fbd3ccb053 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -9,7 +9,7 @@ const selectedComponentColor = "#4285f4"
  */
 const buildStyleString = (styleObject, customStyles) => {
   let str = ""
-  Object.entries(styleObject).forEach(([style, value]) => {
+  Object.entries(styleObject || {}).forEach(([style, value]) => {
     if (style && value != null) {
       str += `${style}: ${value}; `
     }
@@ -60,14 +60,14 @@ export const styleable = (node, styles = {}) => {
   }
 
   // Creates event listeners and applies initial styles
-  const setupStyles = newStyles => {
+  const setupStyles = (newStyles = {}) => {
     const componentId = newStyles.id
-    const selectable = newStyles.allowSelection
-    const customStyles = newStyles.custom
-    const normalStyles = newStyles.normal
+    const selectable = !!newStyles.allowSelection
+    const customStyles = newStyles.custom || ""
+    const normalStyles = newStyles.normal || {}
     const hoverStyles = {
       ...normalStyles,
-      ...newStyles.hover,
+      ...(newStyles.hover || {}),
     }
 
     // Applies a style string to a DOM node, enriching it for the builder
@@ -89,7 +89,7 @@ export const styleable = (node, styles = {}) => {
     // Handler to select a component in the builder when clicking it in the
     // builder preview
     selectComponent = event => {
-      builderStore.actions.selectComponent(newStyles.id)
+      builderStore.actions.selectComponent(componentId)
       return blockEvent(event)
     }
 
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index e66f467a00..a21a66992b 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1121,7 +1121,7 @@
       }
     ]
   },
-  "input": {
+  "stringfield": {
     "name": "Text Field",
     "description": "A textfield component that allows the user to input text.",
     "icon": "ri-edit-box-line",
@@ -1129,7 +1129,7 @@
     "bindable": true,
     "settings": [
       {
-        "type": "text",
+        "type": "field/string",
         "label": "Field",
         "key": "field"
       },
@@ -1142,11 +1142,54 @@
         "type": "text",
         "label": "Placeholder",
         "key": "placeholder"
+      }
+    ]
+  },
+  "numberfield": {
+    "name": "Number Field",
+    "description": "A textfield component that allows the user to input numbers.",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "bindable": true,
+    "settings": [
+      {
+        "type": "field/number",
+        "label": "Field",
+        "key": "field"
       },
       {
-        "type": "boolean",
-        "label": "Required",
-        "key": "required"
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder"
+      }
+    ]
+  },
+  "optionsfield": {
+    "name": "Options Picker",
+    "description": "A textfield component that allows the user to input text.",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "bindable": true,
+    "settings": [
+      {
+        "type": "field/options",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder"
       }
     ]
   }
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 19cc11bc83..a4a2d46c86 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -1,6 +1,7 @@
 <script>
   import { setContext, getContext, onMount } from "svelte"
   import { writable, get } from "svelte/store"
+  import { createValidatorFromConstraints } from "./validation"
 
   export let datasource
   export let theme
@@ -10,7 +11,8 @@
   const component = getContext("component")
 
   let loaded = false
-  let schema = {}
+  let schema
+  let table
   let fieldMap = {}
 
   // Keep form state up to date with form fields
@@ -21,13 +23,18 @@
 
   // Form API contains functions to control the form
   const formApi = {
-    registerField: (field, validate) => {
+    registerField: field => {
       if (!field) {
         return
       }
       if (fieldMap[field] != null) {
         return fieldMap[field]
       }
+
+      // Create validation function based on field schema
+      const constraints = schema?.[field]?.constraints
+      const validate = createValidatorFromConstraints(constraints, field, table)
+
       fieldMap[field] = {
         fieldState: makeFieldState(field),
         fieldApi: makeFieldApi(field, validate),
@@ -85,15 +92,16 @@
   const fetchSchema = async () => {
     if (!datasource?.tableId) {
       schema = {}
+      table = null
     } else {
-      const table = await API.fetchTableDefinition(datasource?.tableId)
+      table = await API.fetchTableDefinition(datasource?.tableId)
       if (table) {
         if (datasource.type === "query") {
-          schema = table.parameters
+          console.log("No implementation for queries yet")
+          schema = {}
         } else {
           schema = table.schema || {}
         }
-        console.log(table)
       }
     }
     loaded = true
diff --git a/packages/standard-components/src/forms/NumberField.svelte b/packages/standard-components/src/forms/NumberField.svelte
new file mode 100644
index 0000000000..32eacd5b44
--- /dev/null
+++ b/packages/standard-components/src/forms/NumberField.svelte
@@ -0,0 +1,5 @@
+<script>
+  import StringField from "./StringField.svelte"
+</script>
+
+<StringField {...$$props} type="number" />
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
new file mode 100644
index 0000000000..f728c685bb
--- /dev/null
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -0,0 +1 @@
+Select
diff --git a/packages/standard-components/src/forms/Placeholder.svelte b/packages/standard-components/src/forms/Placeholder.svelte
new file mode 100644
index 0000000000..4c088e6038
--- /dev/null
+++ b/packages/standard-components/src/forms/Placeholder.svelte
@@ -0,0 +1,17 @@
+<script>
+  import { getContext } from "svelte"
+
+  const { styleable, builderStore } = getContext("sdk")
+  const component = getContext("component")
+
+  $: styles = {
+    id: $component.styles.id,
+    allowSelection: $component.styles.allowSelection,
+  }
+</script>
+
+{#if $builderStore.inBuilder}
+  <div use:styleable={styles}>
+    <slot />
+  </div>
+{/if}
diff --git a/packages/standard-components/src/forms/Input.svelte b/packages/standard-components/src/forms/StringField.svelte
similarity index 87%
rename from packages/standard-components/src/forms/Input.svelte
rename to packages/standard-components/src/forms/StringField.svelte
index 30f2790e67..b51b431e24 100644
--- a/packages/standard-components/src/forms/Input.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -2,11 +2,12 @@
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { Label } from "@budibase/bbui"
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
   export let field
   export let label
   export let placeholder
-  export let validate = value => (value ? null : "Required")
+  export let type = "text"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -23,9 +24,9 @@
 </script>
 
 {#if !field}
-  <div>Add the Field setting to start using your component!</div>
+  <Placeholder>Add the Field setting to start using your component</Placeholder>
 {:else if !fieldState}
-  <div>Form components need to be wrapped in a Form.</div>
+  <Placeholder>Form components need to be wrapped in a Form</Placeholder>
 {:else}
   <div class="container" use:styleable={$component.styles}>
     {#if label}
@@ -44,7 +45,7 @@
         value={$fieldState.value || ''}
         placeholder={placeholder || ''}
         on:blur={onBlur}
-        type="text"
+        {type}
         class="spectrum-Textfield-input" />
     </div>
     {#if $fieldState.error}
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index 16e243a802..5f83601526 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/packages/standard-components/src/forms/index.js
@@ -1,2 +1,4 @@
 export { default as form } from "./Form.svelte"
-export { default as input } from "./Input.svelte"
+export { default as stringfield } from "./StringField.svelte"
+export { default as numberfield } from "./NumberField.svelte"
+export { default as optionsfield } from "./OptionsField.svelte"
diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
new file mode 100644
index 0000000000..f07a0e755f
--- /dev/null
+++ b/packages/standard-components/src/forms/validation.js
@@ -0,0 +1,78 @@
+export const createValidatorFromConstraints = (constraints, field, table) => {
+  let checks = []
+
+  if (constraints) {
+    // Required constraint
+    if (
+      field === table?.primaryDisplay ||
+      constraints.presence?.allowEmpty === false
+    ) {
+      checks.push(presenceConstraint)
+    }
+
+    // String length constraint
+    if (constraints.length?.maximum) {
+      const length = constraints.length?.maximum
+      checks.push(lengthConstraint(length))
+    }
+
+    // Min / max number constraint
+    if (constraints.numericality?.greaterThanOrEqualTo != null) {
+      const min = constraints.numericality.greaterThanOrEqualTo
+      checks.push(numericalConstraint(x => x >= min, `Minimum value is ${min}`))
+    }
+    if (constraints.numericality?.lessThanOrEqualTo != null) {
+      const max = constraints.numericality.lessThanOrEqualTo
+      checks.push(numericalConstraint(x => x <= max, `Maximum value is ${max}`))
+    }
+
+    // Inclusion constraint
+    if (constraints.inclusion !== undefined) {
+      const options = constraints.inclusion
+      checks.push(inclusionConstraint(options))
+    }
+  }
+
+  // Evaluate each constraint
+  return value => {
+    for (let check of checks) {
+      const error = check(value)
+      if (error) {
+        return error
+      }
+    }
+    return null
+  }
+}
+
+const presenceConstraint = value => {
+  return value == null || value === "" ? "Required" : null
+}
+
+const lengthConstraint = maxLength => value => {
+  if (value && value.length > maxLength) {
+    ;`Maximum ${maxLength} characters`
+  }
+  return null
+}
+
+const numericalConstraint = (constraint, error) => value => {
+  if (isNaN(value)) {
+    return "Must be a number"
+  }
+  const number = parseFloat(value)
+  if (!constraint(number)) {
+    return error
+  }
+  return null
+}
+
+const inclusionConstraint = (options = []) => value => {
+  if (value == null || value === "") {
+    return null
+  }
+  if (!options.includes(value)) {
+    return "Invalid value"
+  }
+  return null
+}

From 12f3b7f6fa23f9f9f131524c4a9e664870ebb42e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 27 Jan 2021 10:59:05 +0000
Subject: [PATCH 03/86] Add common SpectrumField component, add spectrum
 labels, add form label position customisation

---
 .../design/AppPreview/componentStructure.json |   1 +
 packages/client/src/utils/styleable.js        |   1 +
 packages/standard-components/manifest.json    | 125 ++++++++++--------
 packages/standard-components/package.json     |   6 +
 .../standard-components/src/forms/Form.svelte |  27 ++--
 .../src/forms/OptionsField.svelte             | 108 ++++++++++++++-
 .../src/forms/SpectrumField.svelte            |  36 +++++
 .../src/forms/StringField.svelte              |  68 ++++++----
 packages/standard-components/yarn.lock        |  30 +++++
 9 files changed, 311 insertions(+), 91 deletions(-)
 create mode 100644 packages/standard-components/src/forms/SpectrumField.svelte

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 9193a566b5..dcf29b2534 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -61,3 +61,4 @@
     ]
   }
 ]
+
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index fbd3ccb053..665a3dc92d 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -74,6 +74,7 @@ export const styleable = (node, styles = {}) => {
     // preview
     const applyStyles = styleString => {
       node.style = addBuilderPreviewStyles(styleString, componentId, selectable)
+      node.dataset.componentId = componentId
     }
 
     // Applies the "normal" style definition
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index a21a66992b..1cf887bbf2 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -114,57 +114,6 @@
       }
     ]
   },
-  "form": {
-    "name": "Form",
-    "icon": "ri-file-edit-line",
-    "styleable": true,
-    "hasChildren": true,
-    "dataProvider": true,
-    "datasourceSetting": "datasource",
-    "settings": [
-      {
-        "type": "datasource",
-        "label": "Data",
-        "key": "datasource"
-      },
-      {
-        "type": "select",
-        "label": "Theme",
-        "key": "theme",
-        "defaultValue": "spectrum--light",
-        "options": [
-          {
-            "label": "Light",
-            "value": "spectrum--light"
-          },
-          {
-            "label": "Dark",
-            "value": "spectrum--dark"
-          },
-          {
-            "label": "Darkest",
-            "value": "spectrum--darkest"
-          }
-        ]
-      },
-      {
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "defaultValue": "spectrum--medium",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ]
-      }
-    ]
-  },
   "richtext": {
     "name": "Rich Text",
     "description": "A component that allows the user to enter long form text.",
@@ -1121,6 +1070,77 @@
       }
     ]
   },
+  "form": {
+    "name": "Form",
+    "icon": "ri-file-edit-line",
+    "styleable": true,
+    "hasChildren": true,
+    "dataProvider": true,
+    "datasourceSetting": "datasource",
+    "settings": [
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "select",
+        "label": "Theme",
+        "key": "theme",
+        "defaultValue": "spectrum--light",
+        "options": [
+          {
+            "label": "Light",
+            "value": "spectrum--light"
+          },
+          {
+            "label": "Dark",
+            "value": "spectrum--dark"
+          },
+          {
+            "label": "Darkest",
+            "value": "spectrum--darkest"
+          }
+        ]
+      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "spectrum--medium",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ]
+      },
+      {
+        "type": "select",
+        "label": "Labels",
+        "key": "labelPosition",
+        "defaultValue": "left",
+        "options": [
+          {
+            "label": "Left",
+            "value": "left"
+          },
+          {
+            "label": "Right",
+            "value": "right"
+          },
+          {
+            "label": "Above",
+            "value": "above"
+          }
+        ]
+      }
+    ]
+  },
   "stringfield": {
     "name": "Text Field",
     "description": "A textfield component that allows the user to input text.",
@@ -1189,7 +1209,8 @@
       {
         "type": "text",
         "label": "Placeholder",
-        "key": "placeholder"
+        "key": "placeholder",
+        "placeholder": "Choose an option"
       }
     ]
   }
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 7ae2b94b7f..047cfa6aff 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -37,9 +37,15 @@
     "@adobe/spectrum-css-workflow-icons": "^1.1.0",
     "@budibase/bbui": "^1.52.4",
     "@budibase/svelte-ag-grid": "^0.0.16",
+    "@spectrum-css/actionbutton": "^1.0.0-beta.1",
     "@spectrum-css/button": "^3.0.0-beta.6",
+    "@spectrum-css/fieldlabel": "^3.0.0-beta.7",
     "@spectrum-css/icon": "^3.0.0-beta.2",
+    "@spectrum-css/menu": "^3.0.0-beta.5",
     "@spectrum-css/page": "^3.0.0-beta.0",
+    "@spectrum-css/picker": "^1.0.0-beta.3",
+    "@spectrum-css/popover": "^3.0.0-beta.6",
+    "@spectrum-css/stepper": "^3.0.0-beta.7",
     "@spectrum-css/textfield": "^3.0.0-beta.6",
     "@spectrum-css/vars": "^3.0.0-beta.2",
     "apexcharts": "^3.22.1",
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index a4a2d46c86..86568f18d5 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -1,4 +1,5 @@
 <script>
+  import "@spectrum-css/fieldlabel/dist/index-vars.css"
   import { setContext, getContext, onMount } from "svelte"
   import { writable, get } from "svelte/store"
   import { createValidatorFromConstraints } from "./validation"
@@ -6,6 +7,7 @@
   export let datasource
   export let theme
   export let size
+  export let labelPosition = "left"
 
   const { styleable, API } = getContext("sdk")
   const component = getContext("component")
@@ -38,6 +40,10 @@
       fieldMap[field] = {
         fieldState: makeFieldState(field),
         fieldApi: makeFieldApi(field, validate),
+        fieldSchema: schema?.[field] ?? {},
+        fieldId: `${Math.random()
+          .toString(32)
+          .substr(2)}/${field}`,
       }
       fieldMap = fieldMap
       return fieldMap[field]
@@ -45,7 +51,7 @@
   }
 
   // Provide both form API and state to children
-  setContext("form", { formApi, formState })
+  setContext("form", { formApi, formState, labelPosition })
 
   // Creates an API for a specific field
   const makeFieldApi = (field, validate) => {
@@ -116,16 +122,11 @@
   dir="ltr"
   use:styleable={$component.styles}
   class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
-  {#if loaded}
-    <slot />
-  {/if}
+  <form
+    class="spectrum-Form"
+    class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
+    {#if loaded}
+      <slot />
+    {/if}
+  </form>
 </div>
-
-<style>
-  .spectrum :global(label) {
-    font-size: var(
-      --spectrum-alias-item-text-size-m,
-      var(--spectrum-global-dimension-font-size-100)
-    ) !important;
-  }
-</style>
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index f728c685bb..2796356027 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -1 +1,107 @@
-Select
+<script>
+  import "@spectrum-css/picker/dist/index-vars.css"
+  import "@spectrum-css/popover/dist/index-vars.css"
+  import "@spectrum-css/menu/dist/index-vars.css"
+  import { getContext } from "svelte"
+  import SpectrumField from "./SpectrumField.svelte"
+
+  export let field
+  export let label
+  export let placeholder
+
+  // Register this field with its form
+  const { formApi } = getContext("form") ?? {}
+  const formField = formApi?.registerField(field) ?? {}
+  const { fieldApi, fieldState, fieldSchema } = formField
+
+  // Picker state
+  let open = false
+  $: options = fieldSchema?.constraints?.inclusion ?? []
+  $: placeholderText = placeholder || "Choose an option"
+  $: isNull = $fieldState.value == null || $fieldState.value === ""
+
+  // Update value on blur only
+  const selectOption = value => {
+    fieldApi.setValue(value)
+    open = false
+  }
+</script>
+
+<SpectrumField {field} {label}>
+  <button
+    id={$fieldState.fieldId}
+    class="spectrum-Picker"
+    class:is-invalid={!$fieldState.valid}
+    class:is-open={open}
+    aria-haspopup="listbox"
+    on:click={() => (open = true)}>
+    <span class="spectrum-Picker-label" class:is-placeholder={isNull}>
+      {isNull ? placeholderText : $fieldState.value}
+    </span>
+    {#if !$fieldState.valid}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder">
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
+    </svg>
+  </button>
+  <div
+    class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover"
+    class:is-open={open}>
+    <ul class="spectrum-Menu" role="listbox">
+      <li
+        class="spectrum-Menu-item"
+        class:is-selected={isNull}
+        role="option"
+        aria-selected="true"
+        tabindex="0"
+        on:click={() => selectOption(null)}>
+        <span class="spectrum-Menu-itemLabel">{placeholderText}</span>
+        <svg
+          class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+          focusable="false"
+          aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-Checkmark100" />
+        </svg>
+      </li>
+      {#each options as option}
+        <li
+          class="spectrum-Menu-item"
+          class:is-selected={option === $fieldState.value}
+          role="option"
+          aria-selected="true"
+          tabindex="0"
+          on:click={() => selectOption(option)}>
+          <span class="spectrum-Menu-itemLabel">{option}</span>
+          <svg
+            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+            focusable="false"
+            aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-Checkmark100" />
+          </svg>
+        </li>
+      {/each}
+    </ul>
+  </div>
+  {#if $fieldState.error}
+    <div class="error">{$fieldState.error}</div>
+  {/if}
+</SpectrumField>
+
+<style>
+  .error {
+    color: var(
+      --spectrum-semantic-negative-color-default,
+      var(--spectrum-global-color-red-500)
+    ) !important;
+  }
+</style>
diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte
new file mode 100644
index 0000000000..84f1a22ccb
--- /dev/null
+++ b/packages/standard-components/src/forms/SpectrumField.svelte
@@ -0,0 +1,36 @@
+<script>
+  import Placeholder from "./Placeholder.svelte"
+  import { getContext } from "svelte"
+
+  export let label
+  export let field
+
+  const formContext = getContext("form")
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+  const { labelPosition, formApi } = formContext || {}
+  const formField = formApi?.registerField(field) ?? {}
+  const { fieldId } = formField
+
+  $: labelPositionClass =
+    labelPosition === "top" ? "" : `spectrum-FieldLabel--${labelPosition}`
+</script>
+
+{#if !fieldId}
+  <Placeholder>Add the Field setting to start using your component</Placeholder>
+{:else if !formContext}
+  <Placeholder>Form components need to be wrapped in a Form</Placeholder>
+{:else}
+  <div class="spectrum-Form-item" use:styleable={$component.styles}>
+    {#if label}
+      <label
+        for={fieldId}
+        class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
+        {label}
+      </label>
+    {/if}
+    <div class="spectrum-Form-itemField">
+      <slot />
+    </div>
+  </div>
+{/if}
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index b51b431e24..f75a5b1b6f 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -1,38 +1,34 @@
 <script>
   import "@spectrum-css/textfield/dist/index-vars.css"
-  import { Label } from "@budibase/bbui"
+  import "@spectrum-css/actionbutton/dist/index-vars.css"
+  import "@spectrum-css/stepper/dist/index-vars.css"
   import { getContext } from "svelte"
-  import Placeholder from "./Placeholder.svelte"
+  import SpectrumField from "./SpectrumField.svelte"
 
   export let field
   export let label
   export let placeholder
   export let type = "text"
 
-  const { styleable } = getContext("sdk")
-  const component = getContext("component")
-  const { formApi } = getContext("form") ?? {}
-
   // Register this field with its form
-  const formField = formApi?.registerField(field, validate) ?? {}
+  const { formApi } = getContext("form") ?? {}
+  const formField = formApi?.registerField(field) ?? {}
   const { fieldApi, fieldState } = formField
 
+  $: numeric = type === "number"
+
   // Update value on blur only
   const onBlur = event => {
     fieldApi.setValue(event.target.value)
   }
 </script>
 
-{#if !field}
-  <Placeholder>Add the Field setting to start using your component</Placeholder>
-{:else if !fieldState}
-  <Placeholder>Form components need to be wrapped in a Form</Placeholder>
-{:else}
-  <div class="container" use:styleable={$component.styles}>
-    {#if label}
-      <Label grey>{label}</Label>
-    {/if}
-    <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
+<SpectrumField {label} {field}>
+  <div class:spectrum-Stepper={type === 'number'}>
+    <div
+      class="spectrum-Textfield"
+      class:spectrum-Stepper-textfield={numeric}
+      class:is-invalid={!$fieldState.valid}>
       {#if !$fieldState.valid}
         <svg
           class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
@@ -42,27 +38,49 @@
         </svg>
       {/if}
       <input
+        id={$fieldState.fieldId}
         value={$fieldState.value || ''}
         placeholder={placeholder || ''}
         on:blur={onBlur}
         {type}
-        class="spectrum-Textfield-input" />
+        class="spectrum-Textfield-input"
+        class:spectrum-Stepper-input={numeric} />
     </div>
+    {#if numeric}
+      <span class="spectrum-Stepper-buttons">
+        <button
+          class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp"
+          tabindex="-1">
+          <svg
+            class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-Stepper-stepUpIcon"
+            focusable="false"
+            aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-Chevron75" />
+          </svg>
+        </button>
+        <button
+          class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown"
+          tabindex="-1">
+          <svg
+            class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-Stepper-stepDownIcon"
+            focusable="false"
+            aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-Chevron75" />
+          </svg>
+        </button>
+      </span>
+    {/if}
     {#if $fieldState.error}
-      <div class="error">
-        <Label>{$fieldState.error}</Label>
-      </div>
+      <div class="error">{$fieldState.error}</div>
     {/if}
   </div>
-{/if}
+</SpectrumField>
 
 <style>
-  .error :global(label) {
+  .error {
     color: var(
       --spectrum-semantic-negative-color-default,
       var(--spectrum-global-color-red-500)
     ) !important;
-    margin-top: var(--spacing-s) !important;
-    margin-bottom: 0 !important;
   }
 </style>
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 732c50990a..a1a4a11af5 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -132,16 +132,31 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@spectrum-css/actionbutton@^1.0.0-beta.1":
+  version "1.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.0-beta.1.tgz#a6684cac108d4a9daefe0be6df8201d3c369a0d6"
+  integrity sha512-QbrPMTkbkmh+dEBP66TFXmF5z3qSde+BnLR5hnlo2XMvKvnblX2VJStEbQ+hTKuSZXCRFADXyXD5o0NOYDTByQ==
+
 "@spectrum-css/button@^3.0.0-beta.6":
   version "3.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a"
   integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg==
 
+"@spectrum-css/fieldlabel@^3.0.0-beta.7":
+  version "3.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.0-beta.7.tgz#f37797565e21b3609b8fbc2dafcea8ea41ffa114"
+  integrity sha512-0pseiPghqlOdALsRtidveWyt2YjfSXTZWDlSkcne/J0/QXBJOQH/7Qfy7TmROQZYRB2LqH1VzmE1zbvGwr5Aog==
+
 "@spectrum-css/icon@^3.0.0-beta.2":
   version "3.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb"
   integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA==
 
+"@spectrum-css/menu@^3.0.0-beta.5":
+  version "3.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.5.tgz#99d5ea7f6760b7a89d5d732f4e91b98dd3f82d74"
+  integrity sha512-jvPD5GbNdX31rdFBLxCG7KoUVGeeNYLzNXDpiGZsWme/djVTwitljgNe7bhVwCVlXZE7H20Ti/YrdafnE154Rw==
+
 "@spectrum-css/page@^3.0.0-beta.0":
   version "3.0.0-beta.0"
   resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.0-beta.0.tgz#885ea41b44861c5dc3aac904536f9e93c9109b58"
@@ -149,6 +164,21 @@
   dependencies:
     "@spectrum-css/vars" "^3.0.0-beta.2"
 
+"@spectrum-css/picker@^1.0.0-beta.3":
+  version "1.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.0-beta.3.tgz#476593597b5a9e0105397e4e39350869cf6e7965"
+  integrity sha512-jHzFnS5Frd3JSwZ6B8ymH/sVnNqAUBo9p93Zax4VHTUDsPTtTkvxj/Vxo4POmrJEL9v3qUB2Yk13rD2BSfEzLQ==
+
+"@spectrum-css/popover@^3.0.0-beta.6":
+  version "3.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.6.tgz#787611f020e091234e6ba7e946b0dbd0ed1a2fa2"
+  integrity sha512-dUJlwxoNpB6jOR0g/ywH2cPoUz2FVsL6xPfkm6BSsLp9ejhYy0/OFF4w0Q32Fu9qJDbWJ9qaoOlPpt7IjQ+/GQ==
+
+"@spectrum-css/stepper@^3.0.0-beta.7":
+  version "3.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.0-beta.7.tgz#fc78435ce878c5e233af13e43ed2c3e8671a2bbc"
+  integrity sha512-TQL2OBcdEgbHBwehMGgqMuWdKZZQPGcBRV5FlF0TUdOT58lEqFAO43Gajqvyte1P23lNmnX8KuMwkRfQdn0RzA==
+
 "@spectrum-css/textfield@^3.0.0-beta.6":
   version "3.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.6.tgz#30c044ceb403d6ea82d8046fb8f767f7fe455da6"

From 6631fe2af86997ceb5023727d3fb19dda1cbe01e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 27 Jan 2021 15:52:12 +0000
Subject: [PATCH 04/86] Update builder preview to be interactive and improve
 builder preview experience

---
 .../design/AppPreview/iframeTemplate.html     |  3 --
 .../PropertiesPanel/SettingsView.svelte       |  2 +-
 .../design/PropertiesPanel/componentStyles.js | 33 ------------
 .../client/src/components/ClientApp.svelte    | 11 ++--
 .../client/src/components/Component.svelte    | 45 ++++++++---------
 packages/client/src/components/Router.svelte  |  3 --
 packages/client/src/utils/hash.js             | 12 +++++
 packages/client/src/utils/styleable.js        | 50 +++++--------------
 packages/standard-components/src/Login.svelte |  5 +-
 .../standard-components/src/Navigation.svelte |  5 +-
 .../src/forms/OptionsField.svelte             | 12 -----
 .../src/forms/SpectrumField.svelte            | 16 +++++-
 .../src/forms/StringField.svelte              | 50 ++-----------------
 13 files changed, 81 insertions(+), 166 deletions(-)
 create mode 100644 packages/client/src/utils/hash.js

diff --git a/packages/builder/src/components/design/AppPreview/iframeTemplate.html b/packages/builder/src/components/design/AppPreview/iframeTemplate.html
index 49df3b5c0b..166a978d01 100644
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.html
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.html
@@ -11,9 +11,6 @@
       *, *:before, *:after {
         box-sizing: border-box;
       }
-      * {
-        pointer-events: none;
-      }
     </style>
     <script src='/assets/budibase-client.js'></script>
     <script>
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index da6ffc0f11..3709e9da66 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -120,7 +120,7 @@
           value={componentInstance[setting.key] ?? componentInstance[setting.key]?.defaultValue}
           {componentInstance}
           onChange={val => onChange(setting.key, val)}
-          props={{ options: setting.options }} />
+          props={{ options: setting.options, placeholder: setting.placeholder }} />
       {/if}
     {/each}
   {:else}
diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index f3cdaad094..867ff23c3f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@@ -9,7 +9,6 @@ export const layout = [
     key: "display",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "Block", value: "block" },
       { label: "Inline Block", value: "inline-block" },
       { label: "Flex", value: "flex" },
@@ -37,7 +36,6 @@ export const layout = [
     key: "justify-content",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -51,7 +49,6 @@ export const layout = [
     key: "align-items",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -64,7 +61,6 @@ export const layout = [
     key: "flex-wrap",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "Wrap", value: "wrap" },
       { label: "No wrap", value: "nowrap" },
     ],
@@ -74,7 +70,6 @@ export const layout = [
     key: "gap",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -93,7 +88,6 @@ export const margin = [
     key: "margin",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -113,7 +107,6 @@ export const margin = [
     key: "margin-top",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -133,7 +126,6 @@ export const margin = [
     key: "margin-right",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -153,7 +145,6 @@ export const margin = [
     key: "margin-bottom",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -173,7 +164,6 @@ export const margin = [
     key: "margin-left",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -196,7 +186,6 @@ export const padding = [
     key: "padding",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -214,7 +203,6 @@ export const padding = [
     key: "padding-top",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -232,7 +220,6 @@ export const padding = [
     key: "padding-right",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -250,7 +237,6 @@ export const padding = [
     key: "padding-bottom",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -268,7 +254,6 @@ export const padding = [
     key: "padding-left",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -289,7 +274,6 @@ export const size = [
     key: "flex",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "Shrink", value: "0 1 auto" },
       { label: "Grow", value: "1 1 auto" },
     ],
@@ -338,7 +322,6 @@ export const position = [
     key: "position",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "Static", value: "static" },
       { label: "Relative", value: "relative" },
       { label: "Fixed", value: "fixed" },
@@ -375,7 +358,6 @@ export const position = [
     key: "z-index",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "-9999", value: "-9999" },
       { label: "-3", value: "-3" },
       { label: "-2", value: "-2" },
@@ -395,7 +377,6 @@ export const typography = [
     key: "font-family",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "Arial", value: "Arial" },
       { label: "Arial Black", value: "Arial Black" },
       { label: "Cursive", value: "Cursive" },
@@ -418,7 +399,6 @@ export const typography = [
     key: "font-weight",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "200", value: "200" },
       { label: "300", value: "300" },
       { label: "400", value: "400" },
@@ -434,7 +414,6 @@ export const typography = [
     key: "font-size",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "8px", value: "8px" },
       { label: "10px", value: "10px" },
       { label: "12px", value: "12px" },
@@ -454,7 +433,6 @@ export const typography = [
     key: "line-height",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "1", value: "1" },
       { label: "1.25", value: "1.25" },
       { label: "1.5", value: "1.5" },
@@ -496,7 +474,6 @@ export const typography = [
     key: "text-decoration-line",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "Underline", value: "underline" },
       { label: "Overline", value: "overline" },
       { label: "Line-through", value: "line-through" },
@@ -516,7 +493,6 @@ export const background = [
     key: "background-image",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "none" },
       {
         label: "Warm Flame",
@@ -603,7 +579,6 @@ export const border = [
     key: "border-radius",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0" },
       { label: "X Small", value: "0.125rem" },
       { label: "Small", value: "0.25rem" },
@@ -619,7 +594,6 @@ export const border = [
     key: "border-width",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0" },
       { label: "X Small", value: "0.5px" },
       { label: "Small", value: "1px" },
@@ -638,7 +612,6 @@ export const border = [
     key: "border-style",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "none" },
       { label: "Hidden", value: "hidden" },
       { label: "Dotted", value: "dotted" },
@@ -659,7 +632,6 @@ export const effects = [
     key: "opacity",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "0", value: "0" },
       { label: "0.2", value: "0.2" },
       { label: "0.4", value: "0.4" },
@@ -673,7 +645,6 @@ export const effects = [
     key: "transform",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "0" },
       { label: "45 deg", value: "rotate(45deg)" },
       { label: "90 deg", value: "rotate(90deg)" },
@@ -690,7 +661,6 @@ export const effects = [
     key: "box-shadow",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "none" },
       { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
       {
@@ -723,7 +693,6 @@ export const transitions = [
     key: "transition-property",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "None", value: "none" },
       { label: "All", value: "all" },
       { label: "Background Color", value: "background color" },
@@ -745,7 +714,6 @@ export const transitions = [
     control: OptionSelect,
     placeholder: "sec",
     options: [
-      { label: "Choose option", value: "" },
       { label: "0.4s", value: "0.4s" },
       { label: "0.6s", value: "0.6s" },
       { label: "0.8s", value: "0.8s" },
@@ -759,7 +727,6 @@ export const transitions = [
     key: "transition-timing-function",
     control: OptionSelect,
     options: [
-      { label: "Choose option", value: "" },
       { label: "Linear", value: "linear" },
       { label: "Ease", value: "ease" },
       { label: "Ease in", value: "ease-in" },
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 4af1f198d5..9c2b7e0c23 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -2,9 +2,14 @@
   import { writable } from "svelte/store"
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
-  import NotificationDisplay from './NotificationDisplay.svelte'
+  import NotificationDisplay from "./NotificationDisplay.svelte"
   import SDK from "../sdk"
-  import { createDataStore, initialise, screenStore, notificationStore } from "../store"
+  import {
+    createDataStore,
+    initialise,
+    screenStore,
+    builderStore,
+  } from "../store"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -23,5 +28,5 @@
 
 {#if loaded && $screenStore.activeLayout}
   <Component definition={$screenStore.activeLayout.props} />
+  <NotificationDisplay />
 {/if}
-<NotificationDisplay />
\ No newline at end of file
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 208ba21718..88db772222 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -1,19 +1,23 @@
 <script>
   import { getContext, setContext } from "svelte"
-  import { writable } from "svelte/store"
+  import { writable, get } from "svelte/store"
   import * as ComponentLibrary from "@budibase/standard-components"
   import Router from "./Router.svelte"
   import { enrichProps, propsAreSame } from "../utils/componentProps"
   import { bindingStore, builderStore } from "../store"
+  import { hashString } from "../utils/hash"
 
   export let definition = {}
 
   let enrichedProps
   let componentProps
 
+  // Props are hashed when inside the builder preview and used as a key, so that
+  // components fully remount whenever any props change
+  let propsHash = 0
+
   // Get contexts
   const dataContext = getContext("data")
-  const screenslotContext = getContext("screenslot")
 
   // Create component context
   const componentStore = writable({})
@@ -27,16 +31,11 @@
   $: updateProps(enrichedProps)
   $: styles = definition._styles
 
-  // Allow component selection in the builder preview if we're previewing a
-  // layout, or we're preview a screen and we're inside the screenslot
-  $: allowSelection =
-    $builderStore.previewType === "layout" || screenslotContext
-
   // Update component context
   $: componentStore.set({
     id,
     children: children.length,
-    styles: { ...styles, id, allowSelection },
+    styles: { ...styles, id },
   })
 
   // Updates the component props.
@@ -46,14 +45,20 @@
     if (!props) {
       return
     }
+    let propsChanged = false
     if (!componentProps) {
       componentProps = {}
+      propsChanged = true
     }
     Object.keys(props).forEach(key => {
       if (!propsAreSame(props[key], componentProps[key])) {
+        propsChanged = true
         componentProps[key] = props[key]
       }
     })
+    if (get(builderStore).inBuilder && propsChanged) {
+      propsHash = hashString(JSON.stringify(componentProps))
+    }
   }
 
   // Gets the component constructor for the specified component
@@ -70,22 +75,16 @@
   const enrichComponentProps = async (definition, context, bindingStore) => {
     enrichedProps = await enrichProps(definition, context, bindingStore)
   }
-
-  // Returns a unique key to let svelte know when to remount components.
-  // If a component is selected we want to remount it every time any props
-  // change.
-  const getChildKey = childId => {
-    const selected = childId === $builderStore.selectedComponentId
-    return selected ? `${childId}-${$builderStore.previewId}` : childId
-  }
 </script>
 
 {#if constructor && componentProps}
-  <svelte:component this={constructor} {...componentProps}>
-    {#if children.length}
-      {#each children as child (getChildKey(child._id))}
-        <svelte:self definition={child} />
-      {/each}
-    {/if}
-  </svelte:component>
+  {#key propsHash}
+    <svelte:component this={constructor} {...componentProps}>
+      {#if children.length}
+        {#each children as child (child._id)}
+          <svelte:self definition={child} />
+        {/each}
+      {/if}
+    </svelte:component>
+  {/key}
 {/if}
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index 5477d02f86..efa0e321aa 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -7,9 +7,6 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
-  // Set context flag so components know that we're now inside the screenslot
-  setContext("screenslot", true)
-
   // Only wrap this as an array to take advantage of svelte keying,
   // to ensure the svelte-spa-router is fully remounted when route config
   // changes
diff --git a/packages/client/src/utils/hash.js b/packages/client/src/utils/hash.js
new file mode 100644
index 0000000000..2c42007e43
--- /dev/null
+++ b/packages/client/src/utils/hash.js
@@ -0,0 +1,12 @@
+export const hashString = str => {
+  if (!str) {
+    return 0
+  }
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    let char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32bit integer
+  }
+  return hash
+}
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 665a3dc92d..6cc387058a 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -1,9 +1,6 @@
 import { get } from "svelte/store"
 import { builderStore } from "../store"
 
-const selectedComponentWidth = 2
-const selectedComponentColor = "#4285f4"
-
 /**
  * Helper to build a CSS string from a style object.
  */
@@ -23,24 +20,14 @@ const buildStyleString = (styleObject, customStyles) => {
  * events for any selectable components (overriding the blanket ban on pointer
  * events in the iframe HTML).
  */
-const addBuilderPreviewStyles = (styleString, componentId, selectable) => {
-  let str = styleString
-
-  // Apply extra styles if we're in the builder preview
-  const state = get(builderStore)
-  if (state.inBuilder) {
-    // Allow pointer events and always enable cursor
-    if (selectable) {
-      str += ";pointer-events: all !important; cursor: pointer !important;"
-    }
-
-    // Highlighted selected element
-    if (componentId === state.selectedComponentId) {
-      str += `;border: ${selectedComponentWidth}px solid ${selectedComponentColor} !important;`
-    }
+const addBuilderPreviewStyles = (node, styleString, componentId) => {
+  if (componentId === get(builderStore).selectedComponentId) {
+    const style = window.getComputedStyle(node)
+    const property = style?.display === "table-row" ? "outline" : "border"
+    return styleString + `;${property}: 2px solid #4285f4 !important;`
+  } else {
+    return styleString
   }
-
-  return str
 }
 
 /**
@@ -52,17 +39,9 @@ export const styleable = (node, styles = {}) => {
   let applyHoverStyles
   let selectComponent
 
-  // Kill JS even bubbling
-  const blockEvent = event => {
-    event.preventDefault()
-    event.stopPropagation()
-    return false
-  }
-
   // Creates event listeners and applies initial styles
   const setupStyles = (newStyles = {}) => {
     const componentId = newStyles.id
-    const selectable = !!newStyles.allowSelection
     const customStyles = newStyles.custom || ""
     const normalStyles = newStyles.normal || {}
     const hoverStyles = {
@@ -70,10 +49,9 @@ export const styleable = (node, styles = {}) => {
       ...(newStyles.hover || {}),
     }
 
-    // Applies a style string to a DOM node, enriching it for the builder
-    // preview
+    // Applies a style string to a DOM node
     const applyStyles = styleString => {
-      node.style = addBuilderPreviewStyles(styleString, componentId, selectable)
+      node.style = addBuilderPreviewStyles(node, styleString, componentId)
       node.dataset.componentId = componentId
     }
 
@@ -91,7 +69,9 @@ export const styleable = (node, styles = {}) => {
     // builder preview
     selectComponent = event => {
       builderStore.actions.selectComponent(componentId)
-      return blockEvent(event)
+      event.preventDefault()
+      event.stopPropagation()
+      return false
     }
 
     // Add listeners to toggle hover styles
@@ -101,10 +81,6 @@ export const styleable = (node, styles = {}) => {
     // Add builder preview click listener
     if (get(builderStore).inBuilder) {
       node.addEventListener("click", selectComponent, false)
-
-      // Kill other interaction events
-      node.addEventListener("mousedown", blockEvent)
-      node.addEventListener("mouseup", blockEvent)
     }
 
     // Apply initial normal styles
@@ -119,8 +95,6 @@ export const styleable = (node, styles = {}) => {
     // Remove builder preview click listener
     if (get(builderStore).inBuilder) {
       node.removeEventListener("click", selectComponent)
-      node.removeEventListener("mousedown", blockEvent)
-      node.removeEventListener("mouseup", blockEvent)
     }
   }
 
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index 8a4af82320..1502b5c583 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
 
-  const { authStore, styleable } = getContext("sdk")
+  const { authStore, styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let buttonText = "Log In"
@@ -23,6 +23,9 @@
   }
 
   const login = async () => {
+    if ($builderStore.inBuilder) {
+      return
+    }
     loading = true
     await authStore.actions.logIn({ email, password })
     loading = false
diff --git a/packages/standard-components/src/Navigation.svelte b/packages/standard-components/src/Navigation.svelte
index 4a4ec8dccc..9bfc30384d 100644
--- a/packages/standard-components/src/Navigation.svelte
+++ b/packages/standard-components/src/Navigation.svelte
@@ -1,12 +1,15 @@
 <script>
   import { getContext } from "svelte"
 
-  const { authStore, linkable, styleable } = getContext("sdk")
+  const { authStore, linkable, styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let logoUrl
 
   const logOut = async () => {
+    if ($builderStore.inBuilder) {
+      return
+    }
     await authStore.actions.logOut()
   }
 </script>
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 2796356027..77d48867f6 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -92,16 +92,4 @@
       {/each}
     </ul>
   </div>
-  {#if $fieldState.error}
-    <div class="error">{$fieldState.error}</div>
-  {/if}
 </SpectrumField>
-
-<style>
-  .error {
-    color: var(
-      --spectrum-semantic-negative-color-default,
-      var(--spectrum-global-color-red-500)
-    ) !important;
-  }
-</style>
diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte
index 84f1a22ccb..4acda6e921 100644
--- a/packages/standard-components/src/forms/SpectrumField.svelte
+++ b/packages/standard-components/src/forms/SpectrumField.svelte
@@ -10,7 +10,7 @@
   const component = getContext("component")
   const { labelPosition, formApi } = formContext || {}
   const formField = formApi?.registerField(field) ?? {}
-  const { fieldId } = formField
+  const { fieldId, fieldState } = formField
 
   $: labelPositionClass =
     labelPosition === "top" ? "" : `spectrum-FieldLabel--${labelPosition}`
@@ -31,6 +31,20 @@
     {/if}
     <div class="spectrum-Form-itemField">
       <slot />
+      {#if $fieldState.error}
+        <div class="error">{$fieldState.error}</div>
+      {/if}
     </div>
   </div>
 {/if}
+
+<style>
+  .error {
+    color: var(
+      --spectrum-semantic-negative-color-default,
+      var(--spectrum-global-color-red-500)
+    );
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    margin-top: var(--spectrum-global-dimension-size-75);
+  }
+</style>
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index f75a5b1b6f..43ae0c1c13 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -1,7 +1,5 @@
 <script>
   import "@spectrum-css/textfield/dist/index-vars.css"
-  import "@spectrum-css/actionbutton/dist/index-vars.css"
-  import "@spectrum-css/stepper/dist/index-vars.css"
   import { getContext } from "svelte"
   import SpectrumField from "./SpectrumField.svelte"
 
@@ -15,8 +13,6 @@
   const formField = formApi?.registerField(field) ?? {}
   const { fieldApi, fieldState } = formField
 
-  $: numeric = type === "number"
-
   // Update value on blur only
   const onBlur = event => {
     fieldApi.setValue(event.target.value)
@@ -24,11 +20,8 @@
 </script>
 
 <SpectrumField {label} {field}>
-  <div class:spectrum-Stepper={type === 'number'}>
-    <div
-      class="spectrum-Textfield"
-      class:spectrum-Stepper-textfield={numeric}
-      class:is-invalid={!$fieldState.valid}>
+  <div>
+    <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
       {#if !$fieldState.valid}
         <svg
           class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
@@ -43,44 +36,7 @@
         placeholder={placeholder || ''}
         on:blur={onBlur}
         {type}
-        class="spectrum-Textfield-input"
-        class:spectrum-Stepper-input={numeric} />
+        class="spectrum-Textfield-input" />
     </div>
-    {#if numeric}
-      <span class="spectrum-Stepper-buttons">
-        <button
-          class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp"
-          tabindex="-1">
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-Stepper-stepUpIcon"
-            focusable="false"
-            aria-hidden="true">
-            <use xlink:href="#spectrum-css-icon-Chevron75" />
-          </svg>
-        </button>
-        <button
-          class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown"
-          tabindex="-1">
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-Stepper-stepDownIcon"
-            focusable="false"
-            aria-hidden="true">
-            <use xlink:href="#spectrum-css-icon-Chevron75" />
-          </svg>
-        </button>
-      </span>
-    {/if}
-    {#if $fieldState.error}
-      <div class="error">{$fieldState.error}</div>
-    {/if}
   </div>
 </SpectrumField>
-
-<style>
-  .error {
-    color: var(
-      --spectrum-semantic-negative-color-default,
-      var(--spectrum-global-color-red-500)
-    ) !important;
-  }
-</style>

From e1f40ea066dd3cbbac2b4f2736fcb24b1f142d8e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 27 Jan 2021 18:25:57 +0000
Subject: [PATCH 05/86] Add FieldGroup component to allow easy mixing of fields
 and other content in forms

---
 .../design/AppPreview/componentStructure.json |  1 +
 packages/standard-components/manifest.json    | 13 +++++--
 .../src/forms/FieldGroup.svelte               | 17 +++++++++
 .../src/forms/FieldGroupFallback.svelte       | 14 ++++++++
 .../standard-components/src/forms/Form.svelte | 13 +++----
 .../src/forms/OptionsField.svelte             |  2 +-
 .../src/forms/SpectrumField.svelte            | 35 +++++++++++--------
 .../src/forms/StringField.svelte              | 34 +++++++++---------
 .../standard-components/src/forms/index.js    |  1 +
 9 files changed, 85 insertions(+), 45 deletions(-)
 create mode 100644 packages/standard-components/src/forms/FieldGroup.svelte
 create mode 100644 packages/standard-components/src/forms/FieldGroupFallback.svelte

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index dcf29b2534..98f2ca1aa0 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -8,6 +8,7 @@
     "icon": "ri-file-edit-line",
     "children": [
       "form",
+      "fieldgroup",
       "stringfield",
       "numberfield",
       "optionsfield",
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 1cf887bbf2..ce628ee775 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1118,12 +1118,21 @@
             "value": "spectrum--large"
           }
         ]
-      },
+      }
+    ]
+  },
+  "fieldgroup": {
+    "name": "Field Group",
+    "description": "A group of fields in a form.",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "hasChildren": true,
+    "settings": [
       {
         "type": "select",
         "label": "Labels",
         "key": "labelPosition",
-        "defaultValue": "left",
+        "defaultValue": "above",
         "options": [
           {
             "label": "Left",
diff --git a/packages/standard-components/src/forms/FieldGroup.svelte b/packages/standard-components/src/forms/FieldGroup.svelte
new file mode 100644
index 0000000000..ec5979ed30
--- /dev/null
+++ b/packages/standard-components/src/forms/FieldGroup.svelte
@@ -0,0 +1,17 @@
+<script>
+  import { getContext, setContext } from "svelte"
+
+  export let labelPosition = "above"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+  setContext("fieldGroup", { labelPosition })
+</script>
+
+<div use:styleable={$component.styles}>
+  <form
+    class="spectrum-Form"
+    class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
+    <slot />
+  </form>
+</div>
diff --git a/packages/standard-components/src/forms/FieldGroupFallback.svelte b/packages/standard-components/src/forms/FieldGroupFallback.svelte
new file mode 100644
index 0000000000..8fc22c9cc4
--- /dev/null
+++ b/packages/standard-components/src/forms/FieldGroupFallback.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { getContext } from "svelte"
+
+  const fieldGroupContext = getContext("fieldGroup")
+  const labelPosition = fieldGroupContext?.labelPosition || "above"
+</script>
+
+{#if fieldGroupContext}
+  <slot />
+{:else}
+  <div class="spectrum-Form--labelsAbove">
+    <slot />
+  </div>
+{/if}
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 86568f18d5..21e2ece4df 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -7,7 +7,6 @@
   export let datasource
   export let theme
   export let size
-  export let labelPosition = "left"
 
   const { styleable, API } = getContext("sdk")
   const component = getContext("component")
@@ -51,7 +50,7 @@
   }
 
   // Provide both form API and state to children
-  setContext("form", { formApi, formState, labelPosition })
+  setContext("form", { formApi, formState })
 
   // Creates an API for a specific field
   const makeFieldApi = (field, validate) => {
@@ -122,11 +121,7 @@
   dir="ltr"
   use:styleable={$component.styles}
   class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
-  <form
-    class="spectrum-Form"
-    class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
-    {#if loaded}
-      <slot />
-    {/if}
-  </form>
+  {#if loaded}
+    <slot />
+  {/if}
 </div>
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 77d48867f6..4c7f29f046 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -18,7 +18,7 @@
   let open = false
   $: options = fieldSchema?.constraints?.inclusion ?? []
   $: placeholderText = placeholder || "Choose an option"
-  $: isNull = $fieldState.value == null || $fieldState.value === ""
+  $: isNull = $fieldState?.value == null || $fieldState?.value === ""
 
   // Update value on blur only
   const selectOption = value => {
diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte
index 4acda6e921..418b04371c 100644
--- a/packages/standard-components/src/forms/SpectrumField.svelte
+++ b/packages/standard-components/src/forms/SpectrumField.svelte
@@ -1,19 +1,22 @@
 <script>
   import Placeholder from "./Placeholder.svelte"
+  import FieldGroupFallback from "./FieldGroupFallback.svelte"
   import { getContext } from "svelte"
 
   export let label
   export let field
 
   const formContext = getContext("form")
+  const fieldGroupContext = getContext("fieldGroup")
   const { styleable } = getContext("sdk")
   const component = getContext("component")
-  const { labelPosition, formApi } = formContext || {}
+  const { formApi } = formContext || {}
+  const labelPosition = fieldGroupContext?.labelPosition || "above"
   const formField = formApi?.registerField(field) ?? {}
   const { fieldId, fieldState } = formField
 
   $: labelPositionClass =
-    labelPosition === "top" ? "" : `spectrum-FieldLabel--${labelPosition}`
+    labelPosition === "above" ? "" : `spectrum-FieldLabel--${labelPosition}`
 </script>
 
 {#if !fieldId}
@@ -21,21 +24,23 @@
 {:else if !formContext}
   <Placeholder>Form components need to be wrapped in a Form</Placeholder>
 {:else}
-  <div class="spectrum-Form-item" use:styleable={$component.styles}>
-    {#if label}
-      <label
-        for={fieldId}
-        class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
-        {label}
-      </label>
-    {/if}
-    <div class="spectrum-Form-itemField">
-      <slot />
-      {#if $fieldState.error}
-        <div class="error">{$fieldState.error}</div>
+  <FieldGroupFallback>
+    <div class="spectrum-Form-item" use:styleable={$component.styles}>
+      {#if label}
+        <label
+          for={fieldId}
+          class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
+          {label}
+        </label>
       {/if}
+      <div class="spectrum-Form-itemField">
+        <slot />
+        {#if $fieldState.error}
+          <div class="error">{$fieldState.error}</div>
+        {/if}
+      </div>
     </div>
-  </div>
+  </FieldGroupFallback>
 {/if}
 
 <style>
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index 43ae0c1c13..14ead3b367 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -20,23 +20,21 @@
 </script>
 
 <SpectrumField {label} {field}>
-  <div>
-    <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
-      {#if !$fieldState.valid}
-        <svg
-          class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-          focusable="false"
-          aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Alert" />
-        </svg>
-      {/if}
-      <input
-        id={$fieldState.fieldId}
-        value={$fieldState.value || ''}
-        placeholder={placeholder || ''}
-        on:blur={onBlur}
-        {type}
-        class="spectrum-Textfield-input" />
-    </div>
+  <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
+    {#if !$fieldState.valid}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+        focusable="false"
+        aria-hidden="true">
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
+    <input
+      id={$fieldState.fieldId}
+      value={$fieldState.value || ''}
+      placeholder={placeholder || ''}
+      on:blur={onBlur}
+      {type}
+      class="spectrum-Textfield-input" />
   </div>
 </SpectrumField>
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index 5f83601526..166bd6cd72 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/packages/standard-components/src/forms/index.js
@@ -1,4 +1,5 @@
 export { default as form } from "./Form.svelte"
+export { default as fieldgroup } from "./FieldGroup.svelte"
 export { default as stringfield } from "./StringField.svelte"
 export { default as numberfield } from "./NumberField.svelte"
 export { default as optionsfield } from "./OptionsField.svelte"

From 8c90edf4624996749e28132584d91116aa49e560 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 28 Jan 2021 08:47:44 +0000
Subject: [PATCH 06/86] Add more functionality to core SpectrumField component
 to simplify other form components

---
 .../PropertyControls/FormFieldSelect.svelte   |   2 +-
 .../standard-components/src/forms/Form.svelte |  16 +--
 .../src/forms/OptionsField.svelte             | 111 +++++++++---------
 .../src/forms/SpectrumField.svelte            |  19 ++-
 .../src/forms/StringField.svelte              |  46 ++++----
 5 files changed, 102 insertions(+), 92 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
index ca40946bcb..2c6119eb00 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@@ -22,7 +22,7 @@
   $: options = getOptions(schema, type)
 
   const getOptions = (schema, fieldType) => {
-    let entries = Object.entries(schema)
+    let entries = Object.entries(schema ?? {})
     if (fieldType) {
       entries = entries.filter(entry => entry[1].type === fieldType)
     }
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 21e2ece4df..268b3f8aed 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -8,7 +8,7 @@
   export let theme
   export let size
 
-  const { styleable, API } = getContext("sdk")
+  const { styleable, API, setBindableValue } = getContext("sdk")
   const component = getContext("component")
 
   let loaded = false
@@ -24,7 +24,7 @@
 
   // Form API contains functions to control the form
   const formApi = {
-    registerField: field => {
+    registerField: (field, componentId) => {
       if (!field) {
         return
       }
@@ -38,11 +38,8 @@
 
       fieldMap[field] = {
         fieldState: makeFieldState(field),
-        fieldApi: makeFieldApi(field, validate),
+        fieldApi: makeFieldApi(field, componentId, validate),
         fieldSchema: schema?.[field] ?? {},
-        fieldId: `${Math.random()
-          .toString(32)
-          .substr(2)}/${field}`,
       }
       fieldMap = fieldMap
       return fieldMap[field]
@@ -53,9 +50,11 @@
   setContext("form", { formApi, formState })
 
   // Creates an API for a specific field
-  const makeFieldApi = (field, validate) => {
+  const makeFieldApi = (field, componentId, validate) => {
     return {
       setValue: value => {
+        console.log("setting " + componentId + " to " + value)
+        setBindableValue(value, componentId)
         const { fieldState } = fieldMap[field]
         fieldState.update(state => {
           state.value = value
@@ -72,6 +71,9 @@
   const makeFieldState = field => {
     return writable({
       field,
+      fieldId: `${Math.random()
+        .toString(32)
+        .substr(2)}/${field}`,
       value: null,
       error: null,
       valid: true,
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 4c7f29f046..bdfb1664cc 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -2,17 +2,15 @@
   import "@spectrum-css/picker/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
-  import { getContext } from "svelte"
   import SpectrumField from "./SpectrumField.svelte"
 
   export let field
   export let label
   export let placeholder
 
-  // Register this field with its form
-  const { formApi } = getContext("form") ?? {}
-  const formField = formApi?.registerField(field) ?? {}
-  const { fieldApi, fieldState, fieldSchema } = formField
+  let fieldState
+  let fieldApi
+  let fieldSchema
 
   // Picker state
   let open = false
@@ -20,68 +18,52 @@
   $: placeholderText = placeholder || "Choose an option"
   $: isNull = $fieldState?.value == null || $fieldState?.value === ""
 
-  // Update value on blur only
   const selectOption = value => {
     fieldApi.setValue(value)
     open = false
   }
 </script>
 
-<SpectrumField {field} {label}>
-  <button
-    id={$fieldState.fieldId}
-    class="spectrum-Picker"
-    class:is-invalid={!$fieldState.valid}
-    class:is-open={open}
-    aria-haspopup="listbox"
-    on:click={() => (open = true)}>
-    <span class="spectrum-Picker-label" class:is-placeholder={isNull}>
-      {isNull ? placeholderText : $fieldState.value}
-    </span>
-    {#if !$fieldState.valid}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
-        focusable="false"
-        aria-hidden="true"
-        aria-label="Folder">
-        <use xlink:href="#spectrum-icon-18-Alert" />
-      </svg>
-    {/if}
-    <svg
-      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
-      focusable="false"
-      aria-hidden="true">
-      <use xlink:href="#spectrum-css-icon-Chevron100" />
-    </svg>
-  </button>
-  <div
-    class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover"
-    class:is-open={open}>
-    <ul class="spectrum-Menu" role="listbox">
-      <li
-        class="spectrum-Menu-item"
-        class:is-selected={isNull}
-        role="option"
-        aria-selected="true"
-        tabindex="0"
-        on:click={() => selectOption(null)}>
-        <span class="spectrum-Menu-itemLabel">{placeholderText}</span>
+<SpectrumField {field} {label} bind:fieldState bind:fieldApi bind:fieldSchema>
+  {#if fieldState}
+    <button
+      id={$fieldState.fieldId}
+      class="spectrum-Picker"
+      class:is-invalid={!$fieldState.valid}
+      class:is-open={open}
+      aria-haspopup="listbox"
+      on:click={() => (open = true)}>
+      <span class="spectrum-Picker-label" class:is-placeholder={isNull}>
+        {isNull ? placeholderText : $fieldState.value}
+      </span>
+      {#if !$fieldState.valid}
         <svg
-          class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+          class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
           focusable="false"
-          aria-hidden="true">
-          <use xlink:href="#spectrum-css-icon-Checkmark100" />
+          aria-hidden="true"
+          aria-label="Folder">
+          <use xlink:href="#spectrum-icon-18-Alert" />
         </svg>
-      </li>
-      {#each options as option}
+      {/if}
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+        focusable="false"
+        aria-hidden="true">
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    </button>
+    <div
+      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover"
+      class:is-open={open}>
+      <ul class="spectrum-Menu" role="listbox">
         <li
           class="spectrum-Menu-item"
-          class:is-selected={option === $fieldState.value}
+          class:is-selected={isNull}
           role="option"
           aria-selected="true"
           tabindex="0"
-          on:click={() => selectOption(option)}>
-          <span class="spectrum-Menu-itemLabel">{option}</span>
+          on:click={() => selectOption(null)}>
+          <span class="spectrum-Menu-itemLabel">{placeholderText}</span>
           <svg
             class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
             focusable="false"
@@ -89,7 +71,24 @@
             <use xlink:href="#spectrum-css-icon-Checkmark100" />
           </svg>
         </li>
-      {/each}
-    </ul>
-  </div>
+        {#each options as option}
+          <li
+            class="spectrum-Menu-item"
+            class:is-selected={option === $fieldState.value}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
+            on:click={() => selectOption(option)}>
+            <span class="spectrum-Menu-itemLabel">{option}</span>
+            <svg
+              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+              focusable="false"
+              aria-hidden="true">
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
+            </svg>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
 </SpectrumField>
diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte
index 418b04371c..0c7b826f9f 100644
--- a/packages/standard-components/src/forms/SpectrumField.svelte
+++ b/packages/standard-components/src/forms/SpectrumField.svelte
@@ -5,21 +5,32 @@
 
   export let label
   export let field
+  export let fieldState
+  export let fieldApi
+  export let fieldSchema
 
+  // Get contexts
   const formContext = getContext("form")
   const fieldGroupContext = getContext("fieldGroup")
   const { styleable } = getContext("sdk")
   const component = getContext("component")
+
+  // Register field with form
   const { formApi } = formContext || {}
   const labelPosition = fieldGroupContext?.labelPosition || "above"
-  const formField = formApi?.registerField(field) ?? {}
-  const { fieldId, fieldState } = formField
+  const formField = formApi?.registerField(field, $component.id)
 
+  // Expose field properties to parent component
+  fieldState = formField?.fieldState
+  fieldApi = formField?.fieldApi
+  fieldSchema = formField?.fieldSchema
+
+  // Extract label position from field group context
   $: labelPositionClass =
     labelPosition === "above" ? "" : `spectrum-FieldLabel--${labelPosition}`
 </script>
 
-{#if !fieldId}
+{#if !fieldState}
   <Placeholder>Add the Field setting to start using your component</Placeholder>
 {:else if !formContext}
   <Placeholder>Form components need to be wrapped in a Form</Placeholder>
@@ -28,7 +39,7 @@
     <div class="spectrum-Form-item" use:styleable={$component.styles}>
       {#if label}
         <label
-          for={fieldId}
+          for={$fieldState.fieldId}
           class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
           {label}
         </label>
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index 14ead3b367..c0a5684eae 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -1,6 +1,5 @@
 <script>
   import "@spectrum-css/textfield/dist/index-vars.css"
-  import { getContext } from "svelte"
   import SpectrumField from "./SpectrumField.svelte"
 
   export let field
@@ -8,33 +7,32 @@
   export let placeholder
   export let type = "text"
 
-  // Register this field with its form
-  const { formApi } = getContext("form") ?? {}
-  const formField = formApi?.registerField(field) ?? {}
-  const { fieldApi, fieldState } = formField
+  let fieldState
+  let fieldApi
 
-  // Update value on blur only
   const onBlur = event => {
     fieldApi.setValue(event.target.value)
   }
 </script>
 
-<SpectrumField {label} {field}>
-  <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
-    {#if !$fieldState.valid}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-        focusable="false"
-        aria-hidden="true">
-        <use xlink:href="#spectrum-icon-18-Alert" />
-      </svg>
-    {/if}
-    <input
-      id={$fieldState.fieldId}
-      value={$fieldState.value || ''}
-      placeholder={placeholder || ''}
-      on:blur={onBlur}
-      {type}
-      class="spectrum-Textfield-input" />
-  </div>
+<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+  {#if fieldState}
+    <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
+      {#if !$fieldState.valid}
+        <svg
+          class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+          focusable="false"
+          aria-hidden="true">
+          <use xlink:href="#spectrum-icon-18-Alert" />
+        </svg>
+      {/if}
+      <input
+        id={$fieldState.fieldId}
+        value={$fieldState.value || ''}
+        placeholder={placeholder || ''}
+        on:blur={onBlur}
+        {type}
+        class="spectrum-Textfield-input" />
+    </div>
+  {/if}
 </SpectrumField>

From 2c104396dfdcd65f5426ea348a71d73fa50b5dd2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 28 Jan 2021 16:31:55 +0000
Subject: [PATCH 07/86] Add boolean field, fix label alignment, fix picker z
 index

---
 .../design/AppPreview/componentStructure.json |  1 +
 .../BooleanFieldSelect.svelte                 |  5 ++
 .../PropertiesPanel/SettingsView.svelte       |  2 +
 packages/client/src/store/binding.js          |  2 +-
 packages/standard-components/manifest.json    | 27 ++++++++--
 packages/standard-components/package.json     |  1 +
 .../standard-components/src/DatePicker.svelte |  2 +-
 packages/standard-components/src/Input.svelte |  2 +-
 .../src/forms/BooleanField.svelte             | 50 +++++++++++++++++++
 .../standard-components/src/forms/Form.svelte | 11 ++--
 .../src/forms/OptionsField.svelte             |  3 +-
 .../src/forms/SpectrumField.svelte            | 14 +++---
 .../standard-components/src/forms/index.js    |  1 +
 packages/standard-components/yarn.lock        |  5 ++
 14 files changed, 103 insertions(+), 23 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
 create mode 100644 packages/standard-components/src/forms/BooleanField.svelte

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 98f2ca1aa0..9c34c20a14 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -12,6 +12,7 @@
       "stringfield",
       "numberfield",
       "optionsfield",
+      "booleanfield",
       "richtext",
       "datepicker"
     ]
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
new file mode 100644
index 0000000000..51b459bf23
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="boolean" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 3709e9da66..74d7837b14 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -20,6 +20,7 @@
   import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
   import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
   import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
+  import BooleanFieldSelect from "./PropertyControls/BooleanFieldSelect.svelte"
 
   export let componentDefinition = {}
   export let componentInstance = {}
@@ -64,6 +65,7 @@
     "field/string": StringFieldSelect,
     "field/number": NumberFieldSelect,
     "field/options": OptionsFieldSelect,
+    "field/boolean": BooleanFieldSelect,
   }
 
   const getControl = type => {
diff --git a/packages/client/src/store/binding.js b/packages/client/src/store/binding.js
index b279142c32..e9ab28831d 100644
--- a/packages/client/src/store/binding.js
+++ b/packages/client/src/store/binding.js
@@ -3,7 +3,7 @@ import { writable } from "svelte/store"
 const createBindingStore = () => {
   const store = writable({})
 
-  const setBindableValue = (value, componentId) => {
+  const setBindableValue = (componentId, value) => {
     store.update(state => {
       if (componentId) {
         state[componentId] = value
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index ce628ee775..09af829621 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1123,7 +1123,6 @@
   },
   "fieldgroup": {
     "name": "Field Group",
-    "description": "A group of fields in a form.",
     "icon": "ri-edit-box-line",
     "styleable": true,
     "hasChildren": true,
@@ -1152,7 +1151,6 @@
   },
   "stringfield": {
     "name": "Text Field",
-    "description": "A textfield component that allows the user to input text.",
     "icon": "ri-edit-box-line",
     "styleable": true,
     "bindable": true,
@@ -1176,7 +1174,6 @@
   },
   "numberfield": {
     "name": "Number Field",
-    "description": "A textfield component that allows the user to input numbers.",
     "icon": "ri-edit-box-line",
     "styleable": true,
     "bindable": true,
@@ -1200,7 +1197,6 @@
   },
   "optionsfield": {
     "name": "Options Picker",
-    "description": "A textfield component that allows the user to input text.",
     "icon": "ri-edit-box-line",
     "styleable": true,
     "bindable": true,
@@ -1222,5 +1218,28 @@
         "placeholder": "Choose an option"
       }
     ]
+  },
+  "booleanfield": {
+    "name": "Checkbox",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "bindable": true,
+    "settings": [
+      {
+        "type": "field/boolean",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Text",
+        "key": "text"
+      }
+    ]
   }
 }
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 30d2c35346..678e772c0f 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -44,6 +44,7 @@
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@spectrum-css/actionbutton": "^1.0.0-beta.1",
     "@spectrum-css/button": "^3.0.0-beta.6",
+    "@spectrum-css/checkbox": "^3.0.0-beta.6",
     "@spectrum-css/fieldlabel": "^3.0.0-beta.7",
     "@spectrum-css/icon": "^3.0.0-beta.2",
     "@spectrum-css/menu": "^3.0.0-beta.5",
diff --git a/packages/standard-components/src/DatePicker.svelte b/packages/standard-components/src/DatePicker.svelte
index 77b98b670b..200a563516 100644
--- a/packages/standard-components/src/DatePicker.svelte
+++ b/packages/standard-components/src/DatePicker.svelte
@@ -8,7 +8,7 @@
   export let placeholder
 
   let value
-  $: setBindableValue(value, $component.id)
+  $: setBindableValue($component.id, value)
 
   function handleChange(event) {
     const [fullDate] = event.detail
diff --git a/packages/standard-components/src/Input.svelte b/packages/standard-components/src/Input.svelte
index 18a8880529..03dd6ea023 100644
--- a/packages/standard-components/src/Input.svelte
+++ b/packages/standard-components/src/Input.svelte
@@ -7,7 +7,7 @@
   let value
 
   function onBlur() {
-    setBindableValue(value, $component.id)
+    setBindableValue($component.id, value)
   }
 </script>
 
diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte
new file mode 100644
index 0000000000..4292eedcbe
--- /dev/null
+++ b/packages/standard-components/src/forms/BooleanField.svelte
@@ -0,0 +1,50 @@
+<script>
+  import { onMount } from "svelte"
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import SpectrumField from "./SpectrumField.svelte"
+
+  export let field
+  export let label
+  export let text
+
+  let fieldState
+  let fieldApi
+
+  const onChange = event => {
+    fieldApi.setValue(event.target.checked)
+  }
+
+  // Ensure a valid boolean value is set
+  onMount(() => {
+    fieldApi.setValue($fieldState.value || false)
+  })
+</script>
+
+<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+  {#if fieldState}
+    <div class="spectrum-FieldGroup spectrum-FieldGroup--horizontal">
+      <label class="spectrum-Checkbox" class:is-invalid={!$fieldState.valid}>
+        <input
+          on:change={onChange}
+          type="checkbox"
+          class="spectrum-Checkbox-input"
+          id={$fieldState.fieldId} />
+        <span class="spectrum-Checkbox-box">
+          <svg
+            class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark"
+            focusable="false"
+            aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-Checkmark75" />
+          </svg>
+          <svg
+            class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark"
+            focusable="false"
+            aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-Dash75" />
+          </svg>
+        </span>
+        <span class="spectrum-Checkbox-label">{text || 'Checkbox'}</span>
+      </label>
+    </div>
+  {/if}
+</SpectrumField>
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 268b3f8aed..48684f4cfd 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -16,15 +16,14 @@
   let table
   let fieldMap = {}
 
-  // Keep form state up to date with form fields
-  $: updateFormState(fieldMap)
-
   // Form state contains observable data about the form
   const formState = writable({ values: {}, errors: {}, valid: true })
+  $: updateFormState(fieldMap)
+  $: setBindableValue($component.id, $formState.values)
 
   // Form API contains functions to control the form
   const formApi = {
-    registerField: (field, componentId) => {
+    registerField: field => {
       if (!field) {
         return
       }
@@ -38,7 +37,7 @@
 
       fieldMap[field] = {
         fieldState: makeFieldState(field),
-        fieldApi: makeFieldApi(field, componentId, validate),
+        fieldApi: makeFieldApi(field, validate),
         fieldSchema: schema?.[field] ?? {},
       }
       fieldMap = fieldMap
@@ -53,8 +52,6 @@
   const makeFieldApi = (field, componentId, validate) => {
     return {
       setValue: value => {
-        console.log("setting " + componentId + " to " + value)
-        setBindableValue(value, componentId)
         const { fieldState } = fieldMap[field]
         fieldState.update(state => {
           state.value = value
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index bdfb1664cc..6ff204b175 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -54,7 +54,8 @@
     </button>
     <div
       class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover"
-      class:is-open={open}>
+      class:is-open={open}
+      style="z-index: 1;">
       <ul class="spectrum-Menu" role="listbox">
         <li
           class="spectrum-Menu-item"
diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte
index 0c7b826f9f..dd144e8518 100644
--- a/packages/standard-components/src/forms/SpectrumField.svelte
+++ b/packages/standard-components/src/forms/SpectrumField.svelte
@@ -18,7 +18,7 @@
   // Register field with form
   const { formApi } = formContext || {}
   const labelPosition = fieldGroupContext?.labelPosition || "above"
-  const formField = formApi?.registerField(field, $component.id)
+  const formField = formApi?.registerField(field)
 
   // Expose field properties to parent component
   fieldState = formField?.fieldState
@@ -37,13 +37,11 @@
 {:else}
   <FieldGroupFallback>
     <div class="spectrum-Form-item" use:styleable={$component.styles}>
-      {#if label}
-        <label
-          for={$fieldState.fieldId}
-          class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
-          {label}
-        </label>
-      {/if}
+      <label
+        for={$fieldState.fieldId}
+        class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
+        {label || ''}
+      </label>
       <div class="spectrum-Form-itemField">
         <slot />
         {#if $fieldState.error}
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index 166bd6cd72..52b7386005 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/packages/standard-components/src/forms/index.js
@@ -3,3 +3,4 @@ export { default as fieldgroup } from "./FieldGroup.svelte"
 export { default as stringfield } from "./StringField.svelte"
 export { default as numberfield } from "./NumberField.svelte"
 export { default as optionsfield } from "./OptionsField.svelte"
+export { default as booleanfield } from "./BooleanField.svelte"
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index a1a4a11af5..4002f824cc 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -142,6 +142,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a"
   integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg==
 
+"@spectrum-css/checkbox@^3.0.0-beta.6":
+  version "3.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.6.tgz#338c4e58c4570ac8023f7332794fcb45f5ae9374"
+  integrity sha512-Z0Mwu7yn2b+QcZaBqMpKhliTQiF8T/cRyKgTyaIACtJ0FAK5NBJ4h/X6SWW3iXtoUWCH4+p/Hdtq1iQHAFi1qQ==
+
 "@spectrum-css/fieldlabel@^3.0.0-beta.7":
   version "3.0.0-beta.7"
   resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.0-beta.7.tgz#f37797565e21b3609b8fbc2dafcea8ea41ffa114"

From 16c276aa9a0ca16a1e007ba5a8114dc20ea946c0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 28 Jan 2021 18:03:44 +0000
Subject: [PATCH 08/86] Add rich text field to form components

---
 .../design/AppPreview/componentStructure.json |  2 +-
 .../LongFormFieldSelect.svelte                |  5 ++
 .../PropertiesPanel/SettingsView.svelte       |  2 +
 packages/standard-components/manifest.json    | 30 ++++++++---
 .../standard-components/src/RichText.svelte   | 29 -----------
 .../standard-components/src/forms/Form.svelte |  2 +-
 .../src/forms/LongFormField.svelte            | 51 +++++++++++++++++++
 .../standard-components/src/forms/index.js    |  1 +
 packages/standard-components/src/index.js     |  1 -
 9 files changed, 84 insertions(+), 39 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
 delete mode 100644 packages/standard-components/src/RichText.svelte
 create mode 100644 packages/standard-components/src/forms/LongFormField.svelte

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 9c34c20a14..96e45ed658 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -13,7 +13,7 @@
       "numberfield",
       "optionsfield",
       "booleanfield",
-      "richtext",
+      "longformfield",
       "datepicker"
     ]
   },
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
new file mode 100644
index 0000000000..05a83fe387
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="longform" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 74d7837b14..5575ac0b9f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -21,6 +21,7 @@
   import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
   import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
   import BooleanFieldSelect from "./PropertyControls/BooleanFieldSelect.svelte"
+  import LongFormFieldSelect from "./PropertyControls/LongFormFieldSelect.svelte"
 
   export let componentDefinition = {}
   export let componentInstance = {}
@@ -66,6 +67,7 @@
     "field/number": NumberFieldSelect,
     "field/options": OptionsFieldSelect,
     "field/boolean": BooleanFieldSelect,
+    "field/longform": LongFormFieldSelect,
   }
 
   const getControl = type => {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 09af829621..d0b81cdf13 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -114,13 +114,6 @@
       }
     ]
   },
-  "richtext": {
-    "name": "Rich Text",
-    "description": "A component that allows the user to enter long form text.",
-    "icon": "ri-edit-box-line",
-    "styleable": true,
-    "bindable": true
-  },
   "datepicker": {
     "name": "Date Picker",
     "description": "A basic date picker component",
@@ -1241,5 +1234,28 @@
         "key": "text"
       }
     ]
+  },
+  "longformfield": {
+    "name": "Rich Text",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "field/longform",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder",
+        "placeholder": "Type something..."
+      }
+    ]
   }
 }
diff --git a/packages/standard-components/src/RichText.svelte b/packages/standard-components/src/RichText.svelte
deleted file mode 100644
index 3ad66e1703..0000000000
--- a/packages/standard-components/src/RichText.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { RichText } from "@budibase/bbui"
-
-  const { styleable } = getContext("sdk")
-  const component = getContext("component")
-
-  export let value = ""
-
-  // Need to determine what options we want to expose.
-  let options = {
-    modules: {
-      toolbar: [
-        [
-          {
-            header: [1, 2, 3, false],
-          },
-        ],
-        ["bold", "italic", "underline", "strike"],
-      ],
-    },
-    placeholder: "Type something...",
-    theme: "snow",
-  }
-</script>
-
-<div use:styleable={$component.styles}>
-  <RichText bind:value {options} />
-</div>
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 48684f4cfd..838a0bc2cf 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -49,7 +49,7 @@
   setContext("form", { formApi, formState })
 
   // Creates an API for a specific field
-  const makeFieldApi = (field, componentId, validate) => {
+  const makeFieldApi = (field, validate) => {
     return {
       setValue: value => {
         const { fieldState } = fieldMap[field]
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
new file mode 100644
index 0000000000..0b2b873760
--- /dev/null
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { RichText } from "@budibase/bbui"
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import SpectrumField from "./SpectrumField.svelte"
+
+  export let field
+  export let label
+  export let placeholder
+
+  let fieldState
+  let fieldApi
+
+  let value
+  $: fieldApi?.setValue(value)
+
+  // Options for rich text component
+  const options = {
+    modules: {
+      toolbar: [
+        [
+          {
+            header: [1, 2, 3, false],
+          },
+        ],
+        ["bold", "italic", "underline", "strike"],
+      ],
+    },
+    placeholder: placeholder || "Type something...",
+    theme: "snow",
+  }
+</script>
+
+<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+  {#if fieldState}
+    <div>
+      <RichText bind:value {options} />
+    </div>
+  {/if}
+</SpectrumField>
+
+<style>
+  div {
+    background-color: white;
+  }
+  div :global(.ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after) {
+    display: none;
+  }
+  div :global(.ql-snow .ql-formats:after) {
+    display: none;
+  }
+</style>
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index 52b7386005..5d0fc1d70c 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/packages/standard-components/src/forms/index.js
@@ -4,3 +4,4 @@ export { default as stringfield } from "./StringField.svelte"
 export { default as numberfield } from "./NumberField.svelte"
 export { default as optionsfield } from "./OptionsField.svelte"
 export { default as booleanfield } from "./BooleanField.svelte"
+export { default as longformfield } from "./LongFormField.svelte"
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index b0fbf88017..8f0b38f2f1 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -16,7 +16,6 @@ export { default as container } from "./Container.svelte"
 export { default as datagrid } from "./grid/Component.svelte"
 export { default as screenslot } from "./ScreenSlot.svelte"
 export { default as button } from "./Button.svelte"
-export { default as richtext } from "./RichText.svelte"
 export { default as list } from "./List.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"

From e72850b84de137ba3c2343cbfc96cd84024da25f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 28 Jan 2021 18:53:40 +0000
Subject: [PATCH 09/86] Integrate flatpickr with spectrum

---
 .../design/AppPreview/componentStructure.json |  2 +-
 .../DateTimeFieldSelect.svelte                |  5 ++
 .../PropertiesPanel/SettingsView.svelte       |  2 +
 packages/standard-components/manifest.json    | 36 +++++----
 packages/standard-components/package.json     |  1 +
 .../standard-components/src/DatePicker.svelte | 21 -----
 .../src/forms/DateTimeField.svelte            | 79 +++++++++++++++++++
 .../src/forms/LongFormField.svelte            |  2 -
 .../standard-components/src/forms/index.js    |  1 +
 packages/standard-components/src/index.js     |  2 -
 packages/standard-components/yarn.lock        |  5 ++
 11 files changed, 116 insertions(+), 40 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
 delete mode 100644 packages/standard-components/src/DatePicker.svelte
 create mode 100644 packages/standard-components/src/forms/DateTimeField.svelte

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 96e45ed658..6ecdcc8657 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -14,7 +14,7 @@
       "optionsfield",
       "booleanfield",
       "longformfield",
-      "datepicker"
+      "datetimefield"
     ]
   },
   {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
new file mode 100644
index 0000000000..5c0ed8cb2f
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="datetime" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 5575ac0b9f..a1be940553 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -22,6 +22,7 @@
   import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
   import BooleanFieldSelect from "./PropertyControls/BooleanFieldSelect.svelte"
   import LongFormFieldSelect from "./PropertyControls/LongFormFieldSelect.svelte"
+  import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
 
   export let componentDefinition = {}
   export let componentInstance = {}
@@ -68,6 +69,7 @@
     "field/options": OptionsFieldSelect,
     "field/boolean": BooleanFieldSelect,
     "field/longform": LongFormFieldSelect,
+    "field/datetime": DateTimeFieldSelect,
   }
 
   const getControl = type => {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index d0b81cdf13..4214346a7f 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -114,20 +114,6 @@
       }
     ]
   },
-  "datepicker": {
-    "name": "Date Picker",
-    "description": "A basic date picker component",
-    "icon": "ri-calendar-line",
-    "styleable": true,
-    "bindable": true,
-    "settings": [
-      {
-        "type": "text",
-        "label": "Placeholder",
-        "key": "placeholder"
-      }
-    ]
-  },
   "stackedlist": {
     "name": "Stacked List",
     "icon": "ri-archive-drawer-line",
@@ -1257,5 +1243,27 @@
         "placeholder": "Type something..."
       }
     ]
+  },
+  "datetimefield": {
+    "name": "Date Picker",
+    "icon": "ri-calendar-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "field/datetime",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder"
+      }
+    ]
   }
 }
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 678e772c0f..eec67a7ff4 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -47,6 +47,7 @@
     "@spectrum-css/checkbox": "^3.0.0-beta.6",
     "@spectrum-css/fieldlabel": "^3.0.0-beta.7",
     "@spectrum-css/icon": "^3.0.0-beta.2",
+    "@spectrum-css/inputgroup": "^3.0.0-beta.7",
     "@spectrum-css/menu": "^3.0.0-beta.5",
     "@spectrum-css/page": "^3.0.0-beta.0",
     "@spectrum-css/picker": "^1.0.0-beta.3",
diff --git a/packages/standard-components/src/DatePicker.svelte b/packages/standard-components/src/DatePicker.svelte
deleted file mode 100644
index 200a563516..0000000000
--- a/packages/standard-components/src/DatePicker.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { DatePicker } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { styleable, setBindableValue } = getContext("sdk")
-  const component = getContext("component")
-
-  export let placeholder
-
-  let value
-  $: setBindableValue($component.id, value)
-
-  function handleChange(event) {
-    const [fullDate] = event.detail
-    value = fullDate
-  }
-</script>
-
-<div use:styleable={$component.styles}>
-  <DatePicker {placeholder} on:change={handleChange} {value} />
-</div>
diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
new file mode 100644
index 0000000000..3245ce7662
--- /dev/null
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -0,0 +1,79 @@
+<script>
+  import Flatpickr from "svelte-flatpickr"
+  import SpectrumField from "./SpectrumField.svelte"
+  import "flatpickr/dist/flatpickr.css"
+  import "@spectrum-css/inputgroup/dist/index-vars.css"
+
+  export let field
+  export let label
+  export let placeholder
+
+  let fieldState
+  let fieldApi
+  let value
+  $: fieldApi?.setValue(value)
+
+  const handleChange = event => {
+    const [fullDate] = event.detail
+    value = fullDate
+  }
+
+  const formatDate = dateString => {
+    const date = new Date(dateString)
+    return date.toDateString()
+  }
+</script>
+
+<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+  {#if fieldState}
+    <Flatpickr
+      {value}
+      options={{ element: `#${$fieldState.id}-wrapper` }}
+      on:change={handleChange}
+      element={`#${$fieldState.id}-wrapper`}>
+      <div
+        id={`${$fieldState.id}-wrapper`}
+        aria-disabled="false"
+        aria-invalid="false"
+        class="flatpickr spectrum-InputGroup spectrum-Datepicker"
+        aria-readonly="false"
+        aria-required="false"
+        aria-haspopup="true">
+        <div class="spectrum-Textfield spectrum-InputGroup-textfield">
+          <input
+            data-input
+            type="text"
+            class="spectrum-Textfield-input spectrum-InputGroup-input"
+            aria-invalid="false"
+            {placeholder}
+            id={$fieldState.id}
+            value={formatDate($fieldState.value)} />
+        </div>
+        <button
+          type="button"
+          class="spectrum-Picker spectrum-InputGroup-button"
+          tabindex="-1">
+          <svg
+            class="spectrum-Icon spectrum-Icon--sizeM"
+            focusable="false"
+            aria-hidden="true"
+            aria-label="Calendar">
+            <use xlink:href="#spectrum-icon-18-Calendar" />
+          </svg>
+        </button>
+      </div>
+    </Flatpickr>
+  {/if}
+</SpectrumField>
+
+<style>
+  .flatpickr {
+    width: var(
+      --spectrum-alias-single-line-width,
+      var(--spectrum-global-dimension-size-2400)
+    );
+  }
+  .flatpickr .spectrum-Textfield {
+    width: auto;
+  }
+</style>
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index 0b2b873760..a9cd13de4a 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -1,6 +1,5 @@
 <script>
   import { RichText } from "@budibase/bbui"
-  import "@spectrum-css/checkbox/dist/index-vars.css"
   import SpectrumField from "./SpectrumField.svelte"
 
   export let field
@@ -9,7 +8,6 @@
 
   let fieldState
   let fieldApi
-
   let value
   $: fieldApi?.setValue(value)
 
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index 5d0fc1d70c..caaf0bc276 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/packages/standard-components/src/forms/index.js
@@ -5,3 +5,4 @@ export { default as numberfield } from "./NumberField.svelte"
 export { default as optionsfield } from "./OptionsField.svelte"
 export { default as booleanfield } from "./BooleanField.svelte"
 export { default as longformfield } from "./LongFormField.svelte"
+export { default as datetimefield } from "./DateTimeField.svelte"
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 8f0b38f2f1..e100a0d6bd 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -1,5 +1,4 @@
 import "@budibase/bbui/dist/bbui.css"
-import "flatpickr/dist/flatpickr.css"
 import "@spectrum-css/vars/dist/spectrum-global.css"
 import "@spectrum-css/vars/dist/spectrum-medium.css"
 import "@spectrum-css/vars/dist/spectrum-large.css"
@@ -19,7 +18,6 @@ export { default as button } from "./Button.svelte"
 export { default as list } from "./List.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"
-export { default as datepicker } from "./DatePicker.svelte"
 export { default as text } from "./Text.svelte"
 export { default as login } from "./Login.svelte"
 export { default as navigation } from "./Navigation.svelte"
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 4002f824cc..cd03e685b9 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -157,6 +157,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb"
   integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA==
 
+"@spectrum-css/inputgroup@^3.0.0-beta.7":
+  version "3.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.0-beta.7.tgz#9829812e349bf973fb8835f0586bf013c8c38d23"
+  integrity sha512-pZDpYhtTKZUVG31Rtx7imdwK2ohLyVuTEsl+mj2yDKn+2TOwYRxr6LdbfNhFN4xd0GtSqapKYfbgKBWYpIyiSw==
+
 "@spectrum-css/menu@^3.0.0-beta.5":
   version "3.0.0-beta.5"
   resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.5.tgz#99d5ea7f6760b7a89d5d732f4e91b98dd3f82d74"

From 24a5b657bccb45da85daac20ca57160a9c8fca54 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 28 Jan 2021 19:41:46 +0000
Subject: [PATCH 10/86] Add date field validation

---
 .../src/forms/DateTimeField.svelte            | 15 +++++----
 .../src/forms/validation.js                   | 32 +++++++++++++++++--
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index 3245ce7662..348a92c20a 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -12,23 +12,24 @@
   let fieldApi
   let value
   $: fieldApi?.setValue(value)
+  $: flatpickrOptions = {
+    element: `#${$fieldState?.id}-wrapper`,
+    enableTime: true,
+    altInput: true,
+    altFormat: "F j Y, H:i",
+  }
 
   const handleChange = event => {
     const [fullDate] = event.detail
     value = fullDate
   }
-
-  const formatDate = dateString => {
-    const date = new Date(dateString)
-    return date.toDateString()
-  }
 </script>
 
 <SpectrumField {label} {field} bind:fieldState bind:fieldApi>
   {#if fieldState}
     <Flatpickr
       {value}
-      options={{ element: `#${$fieldState.id}-wrapper` }}
+      options={flatpickrOptions}
       on:change={handleChange}
       element={`#${$fieldState.id}-wrapper`}>
       <div
@@ -47,7 +48,7 @@
             aria-invalid="false"
             {placeholder}
             id={$fieldState.id}
-            value={formatDate($fieldState.value)} />
+            value={$fieldState.value} />
         </div>
         <button
           type="button"
diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index f07a0e755f..358a884f7f 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -1,3 +1,5 @@
+import flatpickr from "flatpickr"
+
 export const createValidatorFromConstraints = (constraints, field, table) => {
   let checks = []
 
@@ -11,7 +13,7 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
     }
 
     // String length constraint
-    if (constraints.length?.maximum) {
+    if (constraints.length?.maximum != null) {
       const length = constraints.length?.maximum
       checks.push(lengthConstraint(length))
     }
@@ -27,10 +29,20 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
     }
 
     // Inclusion constraint
-    if (constraints.inclusion !== undefined) {
+    if (constraints.inclusion != null) {
       const options = constraints.inclusion
       checks.push(inclusionConstraint(options))
     }
+
+    // Date constraint
+    if (constraints.datetime?.earliest != null) {
+      const limit = constraints.datetime.earliest
+      checks.push(dateConstraint(limit, true))
+    }
+    if (constraints.datetime?.latest != null) {
+      const limit = constraints.datetime.latest
+      checks.push(dateConstraint(limit, false))
+    }
   }
 
   // Evaluate each constraint
@@ -51,7 +63,7 @@ const presenceConstraint = value => {
 
 const lengthConstraint = maxLength => value => {
   if (value && value.length > maxLength) {
-    ;`Maximum ${maxLength} characters`
+    return `Maximum ${maxLength} characters`
   }
   return null
 }
@@ -76,3 +88,17 @@ const inclusionConstraint = (options = []) => value => {
   }
   return null
 }
+
+const dateConstraint = (dateString, isEarliest) => {
+  const dateLimit = Date.parse(dateString)
+  return value => {
+    if (value == null || value === "" || !value.length) {
+      return null
+    }
+    const dateValue = Date.parse(value[0])
+    const valid = isEarliest ? dateValue >= dateLimit : dateValue <= dateLimit
+    const adjective = isEarliest ? "Earliest" : "Latest"
+    const limitString = flatpickr.formatDate(new Date(dateLimit), "F j Y, H:i")
+    return valid ? null : `${adjective} is ${limitString}`
+  }
+}

From 95ca500bd5dc3387ee46a5d5d6f26c3805915d17 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 29 Jan 2021 10:18:41 +0000
Subject: [PATCH 11/86] Fix validation and focus styling on datepickers

---
 packages/standard-components/manifest.json    |  6 +++
 .../src/forms/DateTimeField.svelte            | 38 +++++++++++++++----
 .../src/forms/validation.js                   |  4 +-
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 4214346a7f..353168938a 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1263,6 +1263,12 @@
         "type": "text",
         "label": "Placeholder",
         "key": "placeholder"
+      },
+      {
+        "type": "boolean",
+        "label": "Show Time",
+        "key": "enableTime",
+        "defaultValue": true
       }
     ]
   }
diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index 348a92c20a..e4beda5d3e 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -7,28 +7,48 @@
   export let field
   export let label
   export let placeholder
+  export let enableTime
 
   let fieldState
   let fieldApi
-  let value
-  $: fieldApi?.setValue(value)
+  let open = false
+  let flatpickr
+
   $: flatpickrOptions = {
     element: `#${$fieldState?.id}-wrapper`,
-    enableTime: true,
+    enableTime: enableTime || false,
     altInput: true,
-    altFormat: "F j Y, H:i",
+    altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
   }
 
   const handleChange = event => {
-    const [fullDate] = event.detail
-    value = fullDate
+    const [dates] = event.detail
+    fieldApi.setValue(dates[0])
+  }
+
+  const onOpen = () => {
+    open = true
+  }
+
+  const onClose = () => {
+    open = false
+
+    // Manually blur all input fields since flatpickr creates a second
+    // duplicate input field.
+    // We need to blur both because the focus styling does not get properly
+    // applied.
+    const els = document.querySelectorAll(`#${$fieldState.id}-wrapper input`)
+    els.forEach(el => el.blur())
   }
 </script>
 
 <SpectrumField {label} {field} bind:fieldState bind:fieldApi>
   {#if fieldState}
     <Flatpickr
-      {value}
+      bind:flatpickr
+      value={$fieldState.value}
+      on:open={onOpen}
+      on:close={onClose}
       options={flatpickrOptions}
       on:change={handleChange}
       element={`#${$fieldState.id}-wrapper`}>
@@ -37,6 +57,7 @@
         aria-disabled="false"
         aria-invalid="false"
         class="flatpickr spectrum-InputGroup spectrum-Datepicker"
+        class:is-focused={open}
         aria-readonly="false"
         aria-required="false"
         aria-haspopup="true">
@@ -53,7 +74,8 @@
         <button
           type="button"
           class="spectrum-Picker spectrum-InputGroup-button"
-          tabindex="-1">
+          tabindex="-1"
+          on:click={flatpickr?.open}>
           <svg
             class="spectrum-Icon spectrum-Icon--sizeM"
             focusable="false"
diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index 358a884f7f..2d265c0879 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -92,10 +92,10 @@ const inclusionConstraint = (options = []) => value => {
 const dateConstraint = (dateString, isEarliest) => {
   const dateLimit = Date.parse(dateString)
   return value => {
-    if (value == null || value === "" || !value.length) {
+    if (value == null || value === "") {
       return null
     }
-    const dateValue = Date.parse(value[0])
+    const dateValue = Date.parse(value)
     const valid = isEarliest ? dateValue >= dateLimit : dateValue <= dateLimit
     const adjective = isEarliest ? "Earliest" : "Latest"
     const limitString = flatpickr.formatDate(new Date(dateLimit), "F j Y, H:i")

From acc8b77611f0a2955f78478aea61b206c235b3ba Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 29 Jan 2021 10:28:13 +0000
Subject: [PATCH 12/86] Fix validation on long form field

---
 .../src/forms/LongFormField.svelte                  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index a9cd13de4a..c3bc8df26a 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -8,8 +8,17 @@
 
   let fieldState
   let fieldApi
-  let value
-  $: fieldApi?.setValue(value)
+  let previousValue = ""
+  let value = ""
+
+  $: {
+    // Only actually update the value when it changes, so that we don't trigger
+    // validation unnecessarily
+    if (value !== previousValue) {
+      fieldApi?.setValue(value)
+      previousValue = value
+    }
+  }
 
   // Options for rich text component
   const options = {

From a4de9668ed271f5e9d3e5d808a59828a65d0c4a9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 29 Jan 2021 13:22:38 +0000
Subject: [PATCH 13/86] Add attachment field to forms

---
 .../design/AppPreview/componentStructure.json |  3 +-
 .../AttachmentFieldSelect.svelte              |  5 ++
 .../PropertiesPanel/SettingsView.svelte       |  2 +
 packages/client/src/api/api.js                |  4 +-
 .../client/src/components/Component.svelte    | 71 +++++++++++--------
 packages/standard-components/manifest.json    | 17 +++++
 .../src/forms/AttachmentField.svelte          | 27 +++++++
 .../standard-components/src/forms/Form.svelte | 22 +++---
 .../src/forms/Placeholder.svelte              | 31 +++++---
 .../src/forms/SpectrumField.svelte            | 48 +++++++------
 .../standard-components/src/forms/index.js    |  1 +
 11 files changed, 160 insertions(+), 71 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
 create mode 100644 packages/standard-components/src/forms/AttachmentField.svelte

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 6ecdcc8657..53d657d4a2 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -14,7 +14,8 @@
       "optionsfield",
       "booleanfield",
       "longformfield",
-      "datetimefield"
+      "datetimefield",
+      "attachmentfield"
     ]
   },
   {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
new file mode 100644
index 0000000000..9e6ab5529b
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="attachment" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index a1be940553..bfb97ea293 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -23,6 +23,7 @@
   import BooleanFieldSelect from "./PropertyControls/BooleanFieldSelect.svelte"
   import LongFormFieldSelect from "./PropertyControls/LongFormFieldSelect.svelte"
   import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
+  import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
 
   export let componentDefinition = {}
   export let componentInstance = {}
@@ -70,6 +71,7 @@
     "field/boolean": BooleanFieldSelect,
     "field/longform": LongFormFieldSelect,
     "field/datetime": DateTimeFieldSelect,
+    "field/attachment": AttachmentFieldSelect,
   }
 
   const getControl = type => {
diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index 5509221d5c..d74c5c2a82 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -20,9 +20,11 @@ const makeApiCall = async ({ method, url, body, json = true }) => {
     const requestBody = json ? JSON.stringify(body) : body
     let headers = {
       Accept: "application/json",
-      "Content-Type": "application/json",
       "x-budibase-app-id": window["##BUDIBASE_APP_ID##"],
     }
+    if (json) {
+      headers["Content-Type"] = "application/json"
+    }
     if (!window["##BUDIBASE_IN_BUILDER##"]) {
       headers["x-budibase-type"] = "client"
     }
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 88db772222..64aa7960ce 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -9,13 +9,18 @@
 
   export let definition = {}
 
-  let enrichedProps
+  // Props that will be passed to the component instance
   let componentProps
 
   // Props are hashed when inside the builder preview and used as a key, so that
   // components fully remount whenever any props change
   let propsHash = 0
 
+  // Latest timestamp that we started a props update.
+  // Due to enrichment now being async, we need to avoid overwriting newer
+  // props with old ones, depending on how long enrichment takes.
+  let latestUpdateTime
+
   // Get contexts
   const dataContext = getContext("data")
 
@@ -27,8 +32,7 @@
   $: constructor = getComponentConstructor(definition._component)
   $: children = definition._children || []
   $: id = definition._id
-  $: enrichComponentProps(definition, $dataContext, $bindingStore)
-  $: updateProps(enrichedProps)
+  $: updateComponentProps(definition, $dataContext, $bindingStore)
   $: styles = definition._styles
 
   // Update component context
@@ -38,29 +42,6 @@
     styles: { ...styles, id },
   })
 
-  // Updates the component props.
-  // Most props are deeply compared so that svelte will only trigger reactive
-  // statements on props that have actually changed.
-  const updateProps = props => {
-    if (!props) {
-      return
-    }
-    let propsChanged = false
-    if (!componentProps) {
-      componentProps = {}
-      propsChanged = true
-    }
-    Object.keys(props).forEach(key => {
-      if (!propsAreSame(props[key], componentProps[key])) {
-        propsChanged = true
-        componentProps[key] = props[key]
-      }
-    })
-    if (get(builderStore).inBuilder && propsChanged) {
-      propsHash = hashString(JSON.stringify(componentProps))
-    }
-  }
-
   // Gets the component constructor for the specified component
   const getComponentConstructor = component => {
     const split = component?.split("/")
@@ -72,8 +53,42 @@
   }
 
   // Enriches any string component props using handlebars
-  const enrichComponentProps = async (definition, context, bindingStore) => {
-    enrichedProps = await enrichProps(definition, context, bindingStore)
+  const updateComponentProps = async (definition, context, bindingStore) => {
+    // Record the timestamp so we can reference it after enrichment
+    latestUpdateTime = Date.now()
+    const enrichmentTime = latestUpdateTime
+
+    // Enrich props with context
+    const enrichedProps = await enrichProps(definition, context, bindingStore)
+
+    // Abandon this update if a newer update has started
+    if (enrichmentTime !== latestUpdateTime) {
+      return
+    }
+
+    // Update the component props.
+    // Most props are deeply compared so that svelte will only trigger reactive
+    // statements on props that have actually changed.
+    if (!enrichedProps) {
+      return
+    }
+    let propsChanged = false
+    if (!componentProps) {
+      componentProps = {}
+      propsChanged = true
+    }
+    Object.keys(enrichedProps).forEach(key => {
+      if (!propsAreSame(enrichedProps[key], componentProps[key])) {
+        propsChanged = true
+        componentProps[key] = enrichedProps[key]
+      }
+    })
+
+    // Update the hash if we're in the builder so we can fully remount this
+    // component
+    if (get(builderStore).inBuilder && propsChanged) {
+      propsHash = hashString(JSON.stringify(componentProps))
+    }
   }
 </script>
 
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 353168938a..a0d39b82d4 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1271,5 +1271,22 @@
         "defaultValue": true
       }
     ]
+  },
+  "attachmentfield": {
+    "name": "Attachment",
+    "icon": "ri-calendar-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "field/attachment",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      }
+    ]
   }
 }
diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte
new file mode 100644
index 0000000000..ba1945173d
--- /dev/null
+++ b/packages/standard-components/src/forms/AttachmentField.svelte
@@ -0,0 +1,27 @@
+<script>
+  import SpectrumField from "./SpectrumField.svelte"
+  import Dropzone from "../attachments/Dropzone.svelte"
+
+  export let field
+  export let label
+
+  let previousFiles = []
+  let files = []
+  $: {
+    // Only actually update the value when it changes, so that we don't trigger
+    // validation unnecessarily
+    if (files !== previousFiles) {
+      fieldApi?.setValue(files)
+      previousFiles = files
+    }
+  }
+
+  let fieldState
+  let fieldApi
+</script>
+
+<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+  {#if fieldState}
+    <Dropzone bind:files />
+  {/if}
+</SpectrumField>
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 838a0bc2cf..5edeb10447 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -8,7 +8,7 @@
   export let theme
   export let size
 
-  const { styleable, API, setBindableValue } = getContext("sdk")
+  const { styleable, API, setBindableValue, DataProvider } = getContext("sdk")
   const component = getContext("component")
 
   let loaded = false
@@ -115,12 +115,14 @@
   onMount(fetchSchema)
 </script>
 
-<div
-  lang="en"
-  dir="ltr"
-  use:styleable={$component.styles}
-  class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
-  {#if loaded}
-    <slot />
-  {/if}
-</div>
+<DataProvider row={{ ...$formState.values, tableId: datasource?.tableId }}>
+  <div
+    lang="en"
+    dir="ltr"
+    use:styleable={$component.styles}
+    class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
+    {#if loaded}
+      <slot />
+    {/if}
+  </div>
+</DataProvider>
diff --git a/packages/standard-components/src/forms/Placeholder.svelte b/packages/standard-components/src/forms/Placeholder.svelte
index 4c088e6038..517901e7c5 100644
--- a/packages/standard-components/src/forms/Placeholder.svelte
+++ b/packages/standard-components/src/forms/Placeholder.svelte
@@ -1,17 +1,30 @@
 <script>
   import { getContext } from "svelte"
-
-  const { styleable, builderStore } = getContext("sdk")
-  const component = getContext("component")
-
-  $: styles = {
-    id: $component.styles.id,
-    allowSelection: $component.styles.allowSelection,
-  }
+  const { builderStore } = getContext("sdk")
 </script>
 
 {#if $builderStore.inBuilder}
-  <div use:styleable={styles}>
+  <div>
     <slot />
   </div>
 {/if}
+
+<style>
+  div {
+    height: var(
+      --spectrum-alias-item-height-m,
+      var(--spectrum-global-dimension-size-400)
+    );
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: var(--spectrum-global-color-gray-600);
+    font-size: var(
+      --spectrum-alias-item-text-size-m,
+      var(--spectrum-global-dimension-font-size-100)
+    );
+    font-style: var(--spectrum-global-font-style-italic, italic);
+    font-weight: var(--spectrum-global-font-weight-regular, 400);
+  }
+</style>
diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte
index dd144e8518..ca5ddf84db 100644
--- a/packages/standard-components/src/forms/SpectrumField.svelte
+++ b/packages/standard-components/src/forms/SpectrumField.svelte
@@ -16,41 +16,45 @@
   const component = getContext("component")
 
   // Register field with form
-  const { formApi } = formContext || {}
-  const labelPosition = fieldGroupContext?.labelPosition || "above"
-  const formField = formApi?.registerField(field)
+  $: formApi = formContext?.formApi
+  $: labelPosition = fieldGroupContext?.labelPosition || "above"
+  $: formField = formApi?.registerField(field)
 
   // Expose field properties to parent component
-  fieldState = formField?.fieldState
-  fieldApi = formField?.fieldApi
-  fieldSchema = formField?.fieldSchema
+  $: {
+    fieldState = formField?.fieldState
+    fieldApi = formField?.fieldApi
+    fieldSchema = formField?.fieldSchema
+  }
 
   // Extract label position from field group context
   $: labelPositionClass =
     labelPosition === "above" ? "" : `spectrum-FieldLabel--${labelPosition}`
 </script>
 
-{#if !fieldState}
-  <Placeholder>Add the Field setting to start using your component</Placeholder>
-{:else if !formContext}
-  <Placeholder>Form components need to be wrapped in a Form</Placeholder>
-{:else}
-  <FieldGroupFallback>
-    <div class="spectrum-Form-item" use:styleable={$component.styles}>
-      <label
-        for={$fieldState.fieldId}
-        class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
-        {label || ''}
-      </label>
-      <div class="spectrum-Form-itemField">
+<FieldGroupFallback>
+  <div class="spectrum-Form-item" use:styleable={$component.styles}>
+    <label
+      for={$fieldState?.fieldId}
+      class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
+      {label || ''}
+    </label>
+    <div class="spectrum-Form-itemField">
+      {#if !formContext}
+        <Placeholder>Form components need to be wrapped in a Form</Placeholder>
+      {:else if !fieldState}
+        <Placeholder>
+          Add the Field setting to start using your component
+        </Placeholder>
+      {:else}
         <slot />
         {#if $fieldState.error}
           <div class="error">{$fieldState.error}</div>
         {/if}
-      </div>
+      {/if}
     </div>
-  </FieldGroupFallback>
-{/if}
+  </div>
+</FieldGroupFallback>
 
 <style>
   .error {
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index caaf0bc276..aa97bd61d4 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/packages/standard-components/src/forms/index.js
@@ -6,3 +6,4 @@ export { default as optionsfield } from "./OptionsField.svelte"
 export { default as booleanfield } from "./BooleanField.svelte"
 export { default as longformfield } from "./LongFormField.svelte"
 export { default as datetimefield } from "./DateTimeField.svelte"
+export { default as attachmentfield } from "./AttachmentField.svelte"

From 28fb04b31ec1e0e27fc8c34ce9e74affbe6c1a53 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 29 Jan 2021 13:24:43 +0000
Subject: [PATCH 14/86] Fix max string length validation

---
 packages/standard-components/src/forms/validation.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index 2d265c0879..bc09d1f95a 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -13,8 +13,8 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
     }
 
     // String length constraint
-    if (constraints.length?.maximum != null) {
-      const length = constraints.length?.maximum
+    if (constraints.length?.maximum) {
+      const length = constraints.length.maximum
       checks.push(lengthConstraint(length))
     }
 

From 0b64a81242290d3fdff35e32834fdb0970f1a419 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 29 Jan 2021 16:40:19 +0000
Subject: [PATCH 15/86] Automatically make forms use latest data context if it
 matches

---
 packages/standard-components/manifest.json    |  4 ---
 .../standard-components/src/forms/Form.svelte | 25 ++++++++++++++++---
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index a0d39b82d4..107eead5f7 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1132,7 +1132,6 @@
     "name": "Text Field",
     "icon": "ri-edit-box-line",
     "styleable": true,
-    "bindable": true,
     "settings": [
       {
         "type": "field/string",
@@ -1155,7 +1154,6 @@
     "name": "Number Field",
     "icon": "ri-edit-box-line",
     "styleable": true,
-    "bindable": true,
     "settings": [
       {
         "type": "field/number",
@@ -1178,7 +1176,6 @@
     "name": "Options Picker",
     "icon": "ri-edit-box-line",
     "styleable": true,
-    "bindable": true,
     "settings": [
       {
         "type": "field/options",
@@ -1202,7 +1199,6 @@
     "name": "Checkbox",
     "icon": "ri-edit-box-line",
     "styleable": true,
-    "bindable": true,
     "settings": [
       {
         "type": "field/boolean",
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 5edeb10447..bcbe084986 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -10,16 +10,27 @@
 
   const { styleable, API, setBindableValue, DataProvider } = getContext("sdk")
   const component = getContext("component")
+  const dataContext = getContext("data")
 
   let loaded = false
   let schema
   let table
   let fieldMap = {}
 
+  // Checks if the closest data context matches the model for this forms
+  // datasource, and use it as the initial form values if so
+  const getInitialValues = context => {
+    return context && context.tableId === datasource?.tableId ? context : {}
+  }
+
+  // Use the closest data context as the initial form values if it matches
+  const initialValues = getInitialValues(
+    $dataContext[$dataContext.closestComponentId]
+  )
+
   // Form state contains observable data about the form
-  const formState = writable({ values: {}, errors: {}, valid: true })
+  const formState = writable({ values: initialValues, errors: {}, valid: true })
   $: updateFormState(fieldMap)
-  $: setBindableValue($component.id, $formState.values)
 
   // Form API contains functions to control the form
   const formApi = {
@@ -71,7 +82,7 @@
       fieldId: `${Math.random()
         .toString(32)
         .substr(2)}/${field}`,
-      value: null,
+      value: initialValues[field] ?? null,
       error: null,
       valid: true,
     })
@@ -79,7 +90,7 @@
 
   // Updates the form states from the field data
   const updateFormState = fieldMap => {
-    let values = {}
+    let values = { ...initialValues }
     let errors = {}
     Object.entries(fieldMap).forEach(([field, formField]) => {
       const fieldState = get(formField.fieldState)
@@ -126,3 +137,9 @@
     {/if}
   </div>
 </DataProvider>
+
+<style>
+  div {
+    padding: 20px;
+  }
+</style>

From c9bf2700e342fa2b42005f663d3cb073f233b768 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Feb 2021 11:14:24 +0000
Subject: [PATCH 16/86] Add form support for fields which can only use bindings
 rather than explicit onchange handlers

---
 .../src/forms/AttachmentField.svelte          | 29 ++++++++++---------
 .../src/forms/BooleanField.svelte             | 13 +++++----
 .../standard-components/src/forms/Form.svelte | 19 +++++++-----
 .../src/forms/LongFormField.svelte            | 25 ++++++++--------
 .../src/forms/SpectrumField.svelte            | 15 +++++-----
 5 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte
index ba1945173d..eebcc65f97 100644
--- a/packages/standard-components/src/forms/AttachmentField.svelte
+++ b/packages/standard-components/src/forms/AttachmentField.svelte
@@ -1,27 +1,28 @@
 <script>
   import SpectrumField from "./SpectrumField.svelte"
   import Dropzone from "../attachments/Dropzone.svelte"
+  import { onMount } from "svelte"
 
   export let field
   export let label
 
-  let previousFiles = []
-  let files = []
-  $: {
-    // Only actually update the value when it changes, so that we don't trigger
-    // validation unnecessarily
-    if (files !== previousFiles) {
-      fieldApi?.setValue(files)
-      previousFiles = files
-    }
-  }
-
   let fieldState
   let fieldApi
+
+  // Update form value from bound value after we've mounted
+  let value
+  let mounted = false
+  $: mounted && fieldApi?.setValue(value)
+
+  // Get the fields initial value after initialising
+  onMount(() => {
+    value = $fieldState?.value
+    mounted = true
+  })
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
-  {#if fieldState}
-    <Dropzone bind:files />
+<SpectrumField {label} {field} bind:fieldState bind:fieldApi defaultValue={[]}>
+  {#if mounted}
+    <Dropzone bind:files={value} />
   {/if}
 </SpectrumField>
diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte
index 4292eedcbe..279542e612 100644
--- a/packages/standard-components/src/forms/BooleanField.svelte
+++ b/packages/standard-components/src/forms/BooleanField.svelte
@@ -13,18 +13,19 @@
   const onChange = event => {
     fieldApi.setValue(event.target.checked)
   }
-
-  // Ensure a valid boolean value is set
-  onMount(() => {
-    fieldApi.setValue($fieldState.value || false)
-  })
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+<SpectrumField
+  {label}
+  {field}
+  bind:fieldState
+  bind:fieldApi
+  defaultValue={false}>
   {#if fieldState}
     <div class="spectrum-FieldGroup spectrum-FieldGroup--horizontal">
       <label class="spectrum-Checkbox" class:is-invalid={!$fieldState.valid}>
         <input
+          checked={$fieldState.value}
           on:change={onChange}
           type="checkbox"
           class="spectrum-Checkbox-input"
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index bcbe084986..c229f30df8 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -34,7 +34,7 @@
 
   // Form API contains functions to control the form
   const formApi = {
-    registerField: field => {
+    registerField: (field, defaultValue = null) => {
       if (!field) {
         return
       }
@@ -47,8 +47,8 @@
       const validate = createValidatorFromConstraints(constraints, field, table)
 
       fieldMap[field] = {
-        fieldState: makeFieldState(field),
-        fieldApi: makeFieldApi(field, validate),
+        fieldState: makeFieldState(field, defaultValue),
+        fieldApi: makeFieldApi(field, defaultValue, validate),
         fieldSchema: schema?.[field] ?? {},
       }
       fieldMap = fieldMap
@@ -60,13 +60,16 @@
   setContext("form", { formApi, formState })
 
   // Creates an API for a specific field
-  const makeFieldApi = (field, validate) => {
+  const makeFieldApi = (field, defaultValue, validate) => {
     return {
       setValue: value => {
         const { fieldState } = fieldMap[field]
         fieldState.update(state => {
-          state.value = value
-          state.error = validate ? validate(value) : null
+          if (state.value === value) {
+            return state
+          }
+          state.value = value == null ? defaultValue : value
+          state.error = validate ? validate(state.value) : null
           state.valid = !state.error
           return state
         })
@@ -76,13 +79,13 @@
   }
 
   // Creates observable state data about a specific field
-  const makeFieldState = field => {
+  const makeFieldState = (field, defaultValue) => {
     return writable({
       field,
       fieldId: `${Math.random()
         .toString(32)
         .substr(2)}/${field}`,
-      value: initialValues[field] ?? null,
+      value: initialValues[field] ?? defaultValue,
       error: null,
       valid: true,
     })
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index c3bc8df26a..8c475e7b28 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from "svelte"
   import { RichText } from "@budibase/bbui"
   import SpectrumField from "./SpectrumField.svelte"
 
@@ -8,17 +9,17 @@
 
   let fieldState
   let fieldApi
-  let previousValue = ""
-  let value = ""
 
-  $: {
-    // Only actually update the value when it changes, so that we don't trigger
-    // validation unnecessarily
-    if (value !== previousValue) {
-      fieldApi?.setValue(value)
-      previousValue = value
-    }
-  }
+  // Update form value from bound value after we've mounted
+  let value
+  let mounted = false
+  $: mounted && fieldApi?.setValue(value)
+
+  // Get the fields initial value after initialising
+  onMount(() => {
+    value = $fieldState?.value
+    mounted = true
+  })
 
   // Options for rich text component
   const options = {
@@ -37,8 +38,8 @@
   }
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
-  {#if fieldState}
+<SpectrumField {label} {field} bind:fieldState bind:fieldApi defaultValue="">
+  {#if mounted}
     <div>
       <RichText bind:value {options} />
     </div>
diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte
index ca5ddf84db..40f401eb64 100644
--- a/packages/standard-components/src/forms/SpectrumField.svelte
+++ b/packages/standard-components/src/forms/SpectrumField.svelte
@@ -8,6 +8,7 @@
   export let fieldState
   export let fieldApi
   export let fieldSchema
+  export let defaultValue
 
   // Get contexts
   const formContext = getContext("form")
@@ -16,16 +17,14 @@
   const component = getContext("component")
 
   // Register field with form
-  $: formApi = formContext?.formApi
-  $: labelPosition = fieldGroupContext?.labelPosition || "above"
-  $: formField = formApi?.registerField(field)
+  const formApi = formContext?.formApi
+  const labelPosition = fieldGroupContext?.labelPosition || "above"
+  const formField = formApi?.registerField(field, defaultValue)
 
   // Expose field properties to parent component
-  $: {
-    fieldState = formField?.fieldState
-    fieldApi = formField?.fieldApi
-    fieldSchema = formField?.fieldSchema
-  }
+  fieldState = formField?.fieldState
+  fieldApi = formField?.fieldApi
+  fieldSchema = formField?.fieldSchema
 
   // Extract label position from field group context
   $: labelPositionClass =

From b1c2780a728a55e90e5c06e0043de0b1d7c05555 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Feb 2021 13:15:35 +0000
Subject: [PATCH 17/86] Add reltationship field. Add common picker component to
 dedupe options and relationship fields. Add better animation and position to
 picker dropdowns

---
 .../design/AppPreview/componentStructure.json |   3 +-
 .../RelationshipFieldSelect.svelte            |   5 +
 .../PropertiesPanel/SettingsView.svelte       |   2 +
 packages/standard-components/manifest.json    |  23 ++++
 .../src/forms/OptionsField.svelte             |  76 ++-----------
 .../src/forms/Picker.svelte                   | 103 ++++++++++++++++++
 .../src/forms/RelationshipField.svelte        |  76 +++++++++++++
 .../standard-components/src/forms/index.js    |   1 +
 8 files changed, 223 insertions(+), 66 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
 create mode 100644 packages/standard-components/src/forms/Picker.svelte
 create mode 100644 packages/standard-components/src/forms/RelationshipField.svelte

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 53d657d4a2..485b429b23 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -15,7 +15,8 @@
       "booleanfield",
       "longformfield",
       "datetimefield",
-      "attachmentfield"
+      "attachmentfield",
+      "relationshipfield"
     ]
   },
   {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
new file mode 100644
index 0000000000..94e376dc27
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="link" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index bfb97ea293..154e175f60 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -24,6 +24,7 @@
   import LongFormFieldSelect from "./PropertyControls/LongFormFieldSelect.svelte"
   import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
   import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
+  import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
 
   export let componentDefinition = {}
   export let componentInstance = {}
@@ -72,6 +73,7 @@
     "field/longform": LongFormFieldSelect,
     "field/datetime": DateTimeFieldSelect,
     "field/attachment": AttachmentFieldSelect,
+    "field/relationship": RelationshipFieldSelect,
   }
 
   const getControl = type => {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 107eead5f7..9733007bb9 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1284,5 +1284,28 @@
         "key": "label"
       }
     ]
+  },
+  "relationshipfield": {
+    "name": "Relationship Picker",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "field/relationship",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder",
+        "placeholder": "Choose an option"
+      }
+    ]
   }
 }
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 6ff204b175..c7afc45fab 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -3,6 +3,7 @@
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
   import SpectrumField from "./SpectrumField.svelte"
+  import Picker from "./Picker.svelte"
 
   export let field
   export let label
@@ -17,6 +18,7 @@
   $: options = fieldSchema?.constraints?.inclusion ?? []
   $: placeholderText = placeholder || "Choose an option"
   $: isNull = $fieldState?.value == null || $fieldState?.value === ""
+  $: fieldText = isNull ? placeholderText : $fieldState?.value
 
   const selectOption = value => {
     fieldApi.setValue(value)
@@ -26,70 +28,14 @@
 
 <SpectrumField {field} {label} bind:fieldState bind:fieldApi bind:fieldSchema>
   {#if fieldState}
-    <button
-      id={$fieldState.fieldId}
-      class="spectrum-Picker"
-      class:is-invalid={!$fieldState.valid}
-      class:is-open={open}
-      aria-haspopup="listbox"
-      on:click={() => (open = true)}>
-      <span class="spectrum-Picker-label" class:is-placeholder={isNull}>
-        {isNull ? placeholderText : $fieldState.value}
-      </span>
-      {#if !$fieldState.valid}
-        <svg
-          class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
-          focusable="false"
-          aria-hidden="true"
-          aria-label="Folder">
-          <use xlink:href="#spectrum-icon-18-Alert" />
-        </svg>
-      {/if}
-      <svg
-        class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
-        focusable="false"
-        aria-hidden="true">
-        <use xlink:href="#spectrum-css-icon-Chevron100" />
-      </svg>
-    </button>
-    <div
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover"
-      class:is-open={open}
-      style="z-index: 1;">
-      <ul class="spectrum-Menu" role="listbox">
-        <li
-          class="spectrum-Menu-item"
-          class:is-selected={isNull}
-          role="option"
-          aria-selected="true"
-          tabindex="0"
-          on:click={() => selectOption(null)}>
-          <span class="spectrum-Menu-itemLabel">{placeholderText}</span>
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-            focusable="false"
-            aria-hidden="true">
-            <use xlink:href="#spectrum-css-icon-Checkmark100" />
-          </svg>
-        </li>
-        {#each options as option}
-          <li
-            class="spectrum-Menu-item"
-            class:is-selected={option === $fieldState.value}
-            role="option"
-            aria-selected="true"
-            tabindex="0"
-            on:click={() => selectOption(option)}>
-            <span class="spectrum-Menu-itemLabel">{option}</span>
-            <svg
-              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-              focusable="false"
-              aria-hidden="true">
-              <use xlink:href="#spectrum-css-icon-Checkmark100" />
-            </svg>
-          </li>
-        {/each}
-      </ul>
-    </div>
+    <Picker
+      bind:open
+      {fieldState}
+      {fieldText}
+      {options}
+      isPlaceholder={isNull}
+      placeholderOption={placeholderText}
+      isOptionSelected={option => option === $fieldState.value}
+      onSelectOption={selectOption} />
   {/if}
 </SpectrumField>
diff --git a/packages/standard-components/src/forms/Picker.svelte b/packages/standard-components/src/forms/Picker.svelte
new file mode 100644
index 0000000000..a4a3804939
--- /dev/null
+++ b/packages/standard-components/src/forms/Picker.svelte
@@ -0,0 +1,103 @@
+<script>
+  import { fly } from "svelte/transition"
+
+  export let fieldState
+  export let fieldText = ""
+  export let isPlaceholder = false
+  export let placeholderOption = null
+  export let options = []
+  export let isOptionSelected = () => false
+  export let onSelectOption = () => {}
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+  export let open = false
+</script>
+
+{#if fieldState}
+  <button
+    id={$fieldState.fieldId}
+    class="spectrum-Picker"
+    class:is-invalid={!$fieldState.valid}
+    class:is-open={open}
+    aria-haspopup="listbox"
+    on:click={() => (open = true)}>
+    <span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
+      {fieldText}
+    </span>
+    {#if !$fieldState.valid}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder">
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
+    </svg>
+  </button>
+  {#if open}
+    <div class="overlay" on:mousedown|self={() => (open = false)} />
+    <div
+      transition:fly={{ y: -20, duration: 200 }}
+      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
+      <ul class="spectrum-Menu" role="listbox">
+        {#if placeholderOption}
+          <li
+            class="spectrum-Menu-item"
+            class:is-selected={isPlaceholder}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
+            on:click={() => onSelectOption(null)}>
+            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+            <svg
+              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+              focusable="false"
+              aria-hidden="true">
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
+            </svg>
+          </li>
+        {/if}
+        {#each options as option}
+          <li
+            class="spectrum-Menu-item"
+            class:is-selected={isOptionSelected(getOptionValue(option))}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
+            on:click={() => onSelectOption(getOptionValue(option))}>
+            <span
+              class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span>
+            <svg
+              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+              focusable="false"
+              aria-hidden="true">
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
+            </svg>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+{/if}
+
+<style>
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+  }
+  .spectrum-Popover {
+    max-height: 240px;
+    width: var(--spectrum-global-dimension-size-2400);
+    z-index: 999;
+  }
+</style>
diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
new file mode 100644
index 0000000000..f015954575
--- /dev/null
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -0,0 +1,76 @@
+<script>
+  import { getContext } from "svelte"
+  import SpectrumField from "./SpectrumField.svelte"
+  import Picker from "./Picker.svelte"
+
+  const { API } = getContext("sdk")
+
+  export let field
+  export let label
+
+  let fieldState
+  let fieldApi
+  let fieldSchema
+
+  // Picker state
+  let options = []
+  let tableDefinition
+
+  $: fieldText = `${$fieldState?.value?.length ?? 0} selected rows`
+  $: valueLookupMap = getValueLookupMap($fieldState?.value)
+  $: isOptionSelected = option => valueLookupMap[option] === true
+  $: linkedTableId = fieldSchema?.tableId
+  $: fetchRows(linkedTableId)
+  $: fetchTable(linkedTableId)
+
+  const fetchTable = async id => {
+    if (id != null) {
+      tableDefinition = await API.fetchTableDefinition(id)
+    }
+  }
+
+  const fetchRows = async id => {
+    if (id != null) {
+      options = await API.fetchTableData(id)
+    }
+  }
+
+  const getDisplayName = row => {
+    return row[tableDefinition?.primaryDisplay || "_id"]
+  }
+
+  const getValueLookupMap = value => {
+    let map = {}
+    if (value?.length) {
+      value.forEach(option => {
+        map[option] = true
+      })
+    }
+    return map
+  }
+
+  const toggleOption = option => {
+    if ($fieldState.value.includes(option)) {
+      fieldApi.setValue($fieldState.value.filter(x => x !== option))
+    } else {
+      fieldApi.setValue([...$fieldState.value, option])
+    }
+  }
+</script>
+
+<SpectrumField
+  {label}
+  {field}
+  bind:fieldState
+  bind:fieldApi
+  bind:fieldSchema
+  defaultValue={[]}>
+  <Picker
+    {fieldState}
+    {fieldText}
+    {options}
+    {isOptionSelected}
+    onSelectOption={toggleOption}
+    getOptionLabel={getDisplayName}
+    getOptionValue={option => option._id} />
+</SpectrumField>
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index aa97bd61d4..3998424db3 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/packages/standard-components/src/forms/index.js
@@ -7,3 +7,4 @@ export { default as booleanfield } from "./BooleanField.svelte"
 export { default as longformfield } from "./LongFormField.svelte"
 export { default as datetimefield } from "./DateTimeField.svelte"
 export { default as attachmentfield } from "./AttachmentField.svelte"
+export { default as relationshipfield } from "./RelationshipField.svelte"

From abd99f859aa72823855badeb3dc04ed0fb2bed6f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Feb 2021 13:23:18 +0000
Subject: [PATCH 18/86] Improve validation around loading options for
 relationship field

---
 .../src/forms/RelationshipField.svelte                    | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
index f015954575..84842a02c3 100644
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -25,13 +25,17 @@
 
   const fetchTable = async id => {
     if (id != null) {
-      tableDefinition = await API.fetchTableDefinition(id)
+      const result = await API.fetchTableDefinition(id)
+      if (!result.error) {
+        tableDefinition = result
+      }
     }
   }
 
   const fetchRows = async id => {
     if (id != null) {
-      options = await API.fetchTableData(id)
+      const rows = await API.fetchTableData(id)
+      options = rows && !rows.error ? rows : []
     }
   }
 

From 260cecb5e5f02a28e134eb1e1d111ff3e729fe24 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Feb 2021 14:10:38 +0000
Subject: [PATCH 19/86] Update form field ID's to always be safe

---
 .../standard-components/src/forms/Form.svelte |  5 ++-
 packages/standard-components/src/helpers.js   | 32 +++++++++++++++++++
 packages/standard-components/yarn.lock        |  5 +++
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index c229f30df8..9edb749088 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -3,6 +3,7 @@
   import { setContext, getContext, onMount } from "svelte"
   import { writable, get } from "svelte/store"
   import { createValidatorFromConstraints } from "./validation"
+  import { generateID } from "../helpers"
 
   export let datasource
   export let theme
@@ -82,9 +83,7 @@
   const makeFieldState = (field, defaultValue) => {
     return writable({
       field,
-      fieldId: `${Math.random()
-        .toString(32)
-        .substr(2)}/${field}`,
+      fieldId: `id-${generateID()}-${field}`,
       value: initialValues[field] ?? defaultValue,
       error: null,
       valid: true,
diff --git a/packages/standard-components/src/helpers.js b/packages/standard-components/src/helpers.js
index 02f3229467..af98473ac9 100644
--- a/packages/standard-components/src/helpers.js
+++ b/packages/standard-components/src/helpers.js
@@ -31,3 +31,35 @@ export const cssVars = (node, props) => {
     },
   }
 }
+
+/**
+ * Generates a short random ID.
+ * This is "nanoid" but rollup was derping attempting to bundle it, so the
+ * source has just been extracted manually since it's tiny.
+ */
+export const generateID = (size = 21) => {
+  let id = ""
+  let bytes = crypto.getRandomValues(new Uint8Array(size))
+
+  // A compact alternative for `for (var i = 0; i < step; i++)`.
+  while (size--) {
+    // It is incorrect to use bytes exceeding the alphabet size.
+    // The following mask reduces the random byte in the 0-255 value
+    // range to the 0-63 value range. Therefore, adding hacks, such
+    // as empty string fallback or magic numbers, is unneccessary because
+    // the bitmask trims bytes down to the alphabet size.
+    let byte = bytes[size] & 63
+    if (byte < 36) {
+      // `0-9a-z`
+      id += byte.toString(36)
+    } else if (byte < 62) {
+      // `A-Z`
+      id += (byte - 26).toString(36).toUpperCase()
+    } else if (byte < 63) {
+      id += "_"
+    } else {
+      id += "-"
+    }
+  }
+  return id
+}
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 3e5d933b3b..fd9043e58f 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -1768,6 +1768,11 @@ mri@^1.1.0:
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
   integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
 
+nanoid@^3.1.20:
+  version "3.1.20"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
+  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+
 node-releases@^1.1.60:
   version "1.1.60"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"

From 22cad32a2d359f0554b43c5c05a3f631451dacc9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Feb 2021 14:10:55 +0000
Subject: [PATCH 20/86] Update date picker to fix horrible flatpickr event
 handling

---
 .../src/forms/DateTimeField.svelte            | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index e4beda5d3e..591acededb 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -37,7 +37,9 @@
     // duplicate input field.
     // We need to blur both because the focus styling does not get properly
     // applied.
-    const els = document.querySelectorAll(`#${$fieldState.id}-wrapper input`)
+    const els = document.querySelectorAll(
+      `#${$fieldState.fieldId}-wrapper input`
+    )
     els.forEach(el => el.blur())
   }
 </script>
@@ -51,9 +53,9 @@
       on:close={onClose}
       options={flatpickrOptions}
       on:change={handleChange}
-      element={`#${$fieldState.id}-wrapper`}>
+      element={`#${$fieldState.fieldId}-wrapper`}>
       <div
-        id={`${$fieldState.id}-wrapper`}
+        id={`${$fieldState.fieldId}-wrapper`}
         aria-disabled="false"
         aria-invalid="false"
         class="flatpickr spectrum-InputGroup spectrum-Datepicker"
@@ -61,14 +63,16 @@
         aria-readonly="false"
         aria-required="false"
         aria-haspopup="true">
-        <div class="spectrum-Textfield spectrum-InputGroup-textfield">
+        <div
+          on:click={flatpickr?.open}
+          class="spectrum-Textfield spectrum-InputGroup-textfield">
           <input
             data-input
             type="text"
             class="spectrum-Textfield-input spectrum-InputGroup-input"
             aria-invalid="false"
             {placeholder}
-            id={$fieldState.id}
+            id={$fieldState.fieldId}
             value={$fieldState.value} />
         </div>
         <button
@@ -86,10 +90,19 @@
         </button>
       </div>
     </Flatpickr>
+    {#if open}
+      <div class="overlay" on:mousedown|self={flatpickr?.close} />
+    {/if}
   {/if}
 </SpectrumField>
 
 <style>
+  .spectrum-Textfield-input {
+    pointer-events: none;
+  }
+  .spectrum-Textfield:hover {
+    cursor: pointer;
+  }
   .flatpickr {
     width: var(
       --spectrum-alias-single-line-width,
@@ -99,4 +112,12 @@
   .flatpickr .spectrum-Textfield {
     width: auto;
   }
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+  }
 </style>

From 9214157ea46eb814b166275274b7819e556583c5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Feb 2021 18:00:38 +0000
Subject: [PATCH 21/86] Fix long form field width

---
 packages/standard-components/src/forms/LongFormField.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index 8c475e7b28..81038c0355 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -50,6 +50,9 @@
   div {
     background-color: white;
   }
+  div :global(> div) {
+    width: auto !important;
+  }
   div :global(.ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after) {
     display: none;
   }

From 9c0e417408a9f66525de7b38a61b4e811c869ac9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Feb 2021 18:51:22 +0000
Subject: [PATCH 22/86] Add custom component actions. Simplify client context.
 Add form validation action

---
 .../builder/src/builderStore/dataBinding.js   | 54 ++++++------
 .../EventsEditor/EventEditor.svelte           | 11 +--
 .../EventsEditor/actions/ValidateForm.svelte  | 39 ++++++++
 .../EventsEditor/actions/index.js             |  5 ++
 .../client/src/components/ClientApp.svelte    |  9 +-
 .../client/src/components/Component.svelte    | 10 +--
 .../client/src/components/DataProvider.svelte | 15 ----
 .../client/src/components/Provider.svelte     | 29 ++++++
 packages/client/src/constants.js              |  4 +
 packages/client/src/sdk.js                    |  8 +-
 packages/client/src/store/binding.js          | 21 -----
 packages/client/src/store/context.js          | 34 +++++++
 packages/client/src/store/data.js             | 26 ------
 packages/client/src/store/index.js            |  5 +-
 packages/client/src/utils/buttonActions.js    | 23 ++++-
 packages/client/src/utils/componentProps.js   | 18 ++--
 packages/standard-components/manifest.json    | 17 ++--
 packages/standard-components/src/Form.svelte  |  6 +-
 packages/standard-components/src/Input.svelte | 14 ---
 packages/standard-components/src/List.svelte  |  6 +-
 .../standard-components/src/NewRow.svelte     |  6 +-
 .../standard-components/src/RowDetail.svelte  |  6 +-
 .../src/charts/BarChart.svelte                |  1 -
 .../src/charts/CandleStickChart.svelte        |  1 -
 .../src/charts/LineChart.svelte               |  1 -
 .../src/charts/PieChart.svelte                |  1 -
 .../standard-components/src/forms/Form.svelte | 88 ++++++++++++-------
 .../src/grid/Component.svelte                 |  1 -
 28 files changed, 264 insertions(+), 195 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
 delete mode 100644 packages/client/src/components/DataProvider.svelte
 create mode 100644 packages/client/src/components/Provider.svelte
 delete mode 100644 packages/client/src/store/binding.js
 create mode 100644 packages/client/src/store/context.js
 delete mode 100644 packages/client/src/store/data.js
 delete mode 100644 packages/standard-components/src/Input.svelte

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 679a77ca2b..65241b7875 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -1,7 +1,7 @@
 import { cloneDeep } from "lodash/fp"
 import { get } from "svelte/store"
 import { backendUiStore, store } from "builderStore"
-import { findAllMatchingComponents, findComponentPath } from "./storeUtils"
+import { findComponentPath } from "./storeUtils"
 import { TableNames } from "../constants"
 
 // Regex to match all instances of template strings
@@ -11,9 +11,7 @@ const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g
  * Gets all bindable data context fields and instance fields.
  */
 export const getBindableProperties = (rootComponent, componentId) => {
-  const contextBindings = getContextBindings(rootComponent, componentId)
-  const componentBindings = getComponentBindings(rootComponent)
-  return [...contextBindings, ...componentBindings]
+  return getContextBindings(rootComponent, componentId)
 }
 
 /**
@@ -36,6 +34,30 @@ export const getDataProviderComponents = (rootComponent, componentId) => {
   })
 }
 
+/**
+ * Gets all data provider components above a component.
+ */
+export const getActionProviderComponents = (
+  rootComponent,
+  componentId,
+  actionType
+) => {
+  if (!rootComponent || !componentId) {
+    return []
+  }
+
+  // Get the component tree leading up to this component, ignoring the component
+  // itself
+  const path = findComponentPath(rootComponent, componentId)
+  path.pop()
+
+  // Filter by only data provider components
+  return path.filter(component => {
+    const def = store.actions.components.getDefinition(component._component)
+    return def?.actions?.includes(actionType)
+  })
+}
+
 /**
  * Gets a datasource object for a certain data provider component
  */
@@ -149,30 +171,6 @@ export const getContextBindings = (rootComponent, componentId) => {
   return contextBindings
 }
 
-/**
- * Gets all bindable components. These are form components which allow their
- * values to be bound to.
- */
-export const getComponentBindings = rootComponent => {
-  if (!rootComponent) {
-    return []
-  }
-  const componentSelector = component => {
-    const type = component._component
-    const definition = store.actions.components.getDefinition(type)
-    return definition?.bindable
-  }
-  const components = findAllMatchingComponents(rootComponent, componentSelector)
-  return components.map(component => {
-    return {
-      type: "instance",
-      providerId: component._id,
-      runtimeBinding: `${component._id}`,
-      readableBinding: `${component._instanceName}`,
-    }
-  })
-}
-
 /**
  * Gets a schema for a datasource object.
  */
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 0e52aa8f76..7dd7fc5044 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -1,15 +1,6 @@
 <script>
-  import {
-    Button,
-    Body,
-    DropdownMenu,
-    ModalContent,
-    Spacer,
-  } from "@budibase/bbui"
-  import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
+  import { Button, DropdownMenu, Spacer } from "@budibase/bbui"
   import actionTypes from "./actions"
-  import { createEventDispatcher } from "svelte"
-  import { automationStore } from "builderStore"
 
   const EVENT_TYPE_KEY = "##eventHandlerType"
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
new file mode 100644
index 0000000000..72890c584a
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { DataList, Label } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { getActionProviderComponents } from "builderStore/dataBinding"
+
+  export let parameters
+
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset.props,
+    $store.selectedComponentId,
+    "ValidateForm"
+  )
+  $: console.log(actionProviders)
+</script>
+
+<div class="root">
+  <Label size="m" color="dark">Form</Label>
+  <DataList secondary bind:value={parameters.componentId} label="asd">
+    <option value="" />
+    {#if actionProviders}
+      {#each actionProviders as component}
+        <option value={component._id}>{component._instanceName}</option>
+      {/each}
+    {/if}
+  </DataList>
+</div>
+
+<style>
+  .root {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }
+
+  .root :global(> div) {
+    flex: 1;
+    margin-left: var(--spacing-l);
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index 677c646728..e851bdb4be 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -3,6 +3,7 @@ import SaveRow from "./SaveRow.svelte"
 import DeleteRow from "./DeleteRow.svelte"
 import ExecuteQuery from "./ExecuteQuery.svelte"
 import TriggerAutomation from "./TriggerAutomation.svelte"
+import ValidateForm from "./ValidateForm.svelte"
 
 // defines what actions are available, when adding a new one
 // the component is the setup panel for the action
@@ -30,4 +31,8 @@ export default [
     name: "Trigger Automation",
     component: TriggerAutomation,
   },
+  {
+    name: "Validate Form",
+    component: ValidateForm,
+  },
 ]
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 92a050a91e..cad74a3e63 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -4,12 +4,17 @@
   import Component from "./Component.svelte"
   import NotificationDisplay from "./NotificationDisplay.svelte"
   import SDK from "../sdk"
-  import { createDataStore, initialise, screenStore, authStore } from "../store"
+  import {
+    createContextStore,
+    initialise,
+    screenStore,
+    authStore,
+  } from "../store"
 
   // Provide contexts
   setContext("sdk", SDK)
   setContext("component", writable({}))
-  setContext("data", createDataStore())
+  setContext("context", createContextStore())
 
   let loaded = false
 
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index c57a85b7e3..a9d80a3c5f 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -4,7 +4,7 @@
   import * as ComponentLibrary from "@budibase/standard-components"
   import Router from "./Router.svelte"
   import { enrichProps, propsAreSame } from "../utils/componentProps"
-  import { authStore, bindingStore, builderStore } from "../store"
+  import { authStore, builderStore } from "../store"
   import { hashString } from "../utils/hash"
 
   export let definition = {}
@@ -22,7 +22,7 @@
   let latestUpdateTime
 
   // Get contexts
-  const dataContext = getContext("data")
+  const context = getContext("context")
 
   // Create component context
   const componentStore = writable({})
@@ -32,7 +32,7 @@
   $: constructor = getComponentConstructor(definition._component)
   $: children = definition._children || []
   $: id = definition._id
-  $: updateComponentProps(definition, $dataContext, $bindingStore, $authStore)
+  $: updateComponentProps(definition, $context, $authStore)
   $: styles = definition._styles
 
   // Update component context
@@ -53,13 +53,13 @@
   }
 
   // Enriches any string component props using handlebars
-  const updateComponentProps = async (definition, context, bindings, user) => {
+  const updateComponentProps = async (definition, context, user) => {
     // Record the timestamp so we can reference it after enrichment
     latestUpdateTime = Date.now()
     const enrichmentTime = latestUpdateTime
 
     // Enrich props with context
-    const enrichedProps = await enrichProps(definition, context, bindings, user)
+    const enrichedProps = await enrichProps(definition, context, user)
 
     // Abandon this update if a newer update has started
     if (enrichmentTime !== latestUpdateTime) {
diff --git a/packages/client/src/components/DataProvider.svelte b/packages/client/src/components/DataProvider.svelte
deleted file mode 100644
index 0e926b4973..0000000000
--- a/packages/client/src/components/DataProvider.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  import { getContext, setContext } from "svelte"
-  import { createDataStore } from "../store"
-
-  export let row
-
-  // Clone and create new data context for this component tree
-  const dataContext = getContext("data")
-  const component = getContext("component")
-  const newData = createDataStore($dataContext)
-  setContext("data", newData)
-  $: newData.actions.addContext(row, $component.id)
-</script>
-
-<slot />
diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte
new file mode 100644
index 0000000000..f1349796eb
--- /dev/null
+++ b/packages/client/src/components/Provider.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { getContext, setContext } from "svelte"
+  import { createContextStore } from "../store"
+
+  export let data
+  export let actions
+
+  // Clone and create new data context for this component tree
+  const context = getContext("context")
+  const component = getContext("component")
+  const newContext = createContextStore($context)
+  setContext("context", newContext)
+
+  // Add data context
+  $: {
+    if (data !== undefined) {
+      newContext.actions.provideData($component.id, data)
+    }
+  }
+
+  // Add actions context
+  $: {
+    actions?.forEach(({ type, callback }) => {
+      newContext.actions.provideAction($component.id, type, callback)
+    })
+  }
+</script>
+
+<slot />
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index f5bdb4bb10..effb8f2449 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -1,3 +1,7 @@
 export const TableNames = {
   USERS: "ta_users",
 }
+
+export const ActionTypes = {
+  ValidateForm: "ValidateForm",
+}
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index b5efe1257c..1a3a4177a8 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -4,12 +4,12 @@ import {
   notificationStore,
   routeStore,
   screenStore,
-  bindingStore,
   builderStore,
 } from "./store"
 import { styleable } from "./utils/styleable"
 import { linkable } from "./utils/linkable"
-import DataProvider from "./components/DataProvider.svelte"
+import Provider from "./components/Provider.svelte"
+import { ActionTypes } from "./constants"
 
 export default {
   API,
@@ -20,6 +20,6 @@ export default {
   builderStore,
   styleable,
   linkable,
-  DataProvider,
-  setBindableValue: bindingStore.actions.setBindableValue,
+  Provider,
+  ActionTypes,
 }
diff --git a/packages/client/src/store/binding.js b/packages/client/src/store/binding.js
deleted file mode 100644
index e9ab28831d..0000000000
--- a/packages/client/src/store/binding.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { writable } from "svelte/store"
-
-const createBindingStore = () => {
-  const store = writable({})
-
-  const setBindableValue = (componentId, value) => {
-    store.update(state => {
-      if (componentId) {
-        state[componentId] = value
-      }
-      return state
-    })
-  }
-
-  return {
-    subscribe: store.subscribe,
-    actions: { setBindableValue },
-  }
-}
-
-export const bindingStore = createBindingStore()
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
new file mode 100644
index 0000000000..a040c5bd20
--- /dev/null
+++ b/packages/client/src/store/context.js
@@ -0,0 +1,34 @@
+import { writable } from "svelte/store"
+import { cloneDeep } from "lodash/fp"
+
+export const createContextStore = existingContext => {
+  const store = writable({ ...existingContext })
+
+  // Adds a data context layer to the tree
+  const provideData = (componentId, data) => {
+    store.update(state => {
+      if (componentId) {
+        state[componentId] = data
+        state[`${componentId}_draft`] = cloneDeep(data)
+        state.closestComponentId = componentId
+      }
+      return state
+    })
+  }
+
+  // Adds an action context layer to the tree
+  const provideAction = (componentId, actionType, callback) => {
+    store.update(state => {
+      if (actionType && componentId) {
+        state[`${componentId}_${actionType}`] = callback
+      }
+      return state
+    })
+  }
+
+  return {
+    subscribe: store.subscribe,
+    update: store.update,
+    actions: { provideData, provideAction },
+  }
+}
diff --git a/packages/client/src/store/data.js b/packages/client/src/store/data.js
deleted file mode 100644
index 5ff2b9b631..0000000000
--- a/packages/client/src/store/data.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { writable } from "svelte/store"
-import { cloneDeep } from "lodash/fp"
-
-export const createDataStore = existingContext => {
-  const store = writable({ ...existingContext })
-
-  // Adds a context layer to the data context tree
-  const addContext = (row, componentId) => {
-    store.update(state => {
-      if (componentId) {
-        state[componentId] = row
-        state[`${componentId}_draft`] = cloneDeep(row)
-        state.closestComponentId = componentId
-      }
-      return state
-    })
-  }
-
-  return {
-    subscribe: store.subscribe,
-    update: store.update,
-    actions: { addContext },
-  }
-}
-
-export const dataStore = createDataStore()
diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js
index ae1a477c8f..575c5d98f2 100644
--- a/packages/client/src/store/index.js
+++ b/packages/client/src/store/index.js
@@ -3,10 +3,9 @@ export { notificationStore } from "./notification"
 export { routeStore } from "./routes"
 export { screenStore } from "./screens"
 export { builderStore } from "./builder"
-export { bindingStore } from "./binding"
 
-// Data stores are layered and duplicated, so it is not a singleton
-export { createDataStore, dataStore } from "./data"
+// Context stores are layered and duplicated, so it is not a singleton
+export { createContextStore } from "./context"
 
 // Initialises an app by loading screens and routes
 export { initialise } from "./initialise"
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 178abd328d..e293223c5d 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -2,6 +2,7 @@ import { get } from "svelte/store"
 import { enrichDataBinding, enrichDataBindings } from "./enrichDataBinding"
 import { routeStore, builderStore } from "../store"
 import { saveRow, deleteRow, executeQuery, triggerAutomation } from "../api"
+import { ActionTypes } from "../constants"
 
 const saveRowHandler = async (action, context) => {
   const { fields, providerId } = action.parameters
@@ -59,12 +60,21 @@ const queryExecutionHandler = async (action, context) => {
   })
 }
 
+const validateFormHandler = async (action, context) => {
+  const { componentId } = action.parameters
+  const fn = context[`${componentId}_${ActionTypes.ValidateForm}`]
+  if (fn) {
+    return await fn()
+  }
+}
+
 const handlerMap = {
   ["Save Row"]: saveRowHandler,
   ["Delete Row"]: deleteRowHandler,
   ["Navigate To"]: navigationHandler,
   ["Execute Query"]: queryExecutionHandler,
   ["Trigger Automation"]: triggerAutomationHandler,
+  ["Validate Form"]: validateFormHandler,
 }
 
 /**
@@ -79,7 +89,18 @@ export const enrichButtonActions = (actions, context) => {
   const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
   return async () => {
     for (let i = 0; i < handlers.length; i++) {
-      await handlers[i](actions[i], context)
+      try {
+        const result = await handlers[i](actions[i], context)
+        // A handler returning `false` is a flag to stop execution of handlers
+        if (result === false) {
+          return
+        }
+      } catch (error) {
+        console.error("Error while executing button handler")
+        console.error(error)
+        // Stop executing on an error
+        return
+      }
     }
   }
 }
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index fb421ca9fb..c4d2d668b1 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -21,7 +21,7 @@ export const propsAreSame = (a, b) => {
  * Enriches component props.
  * Data bindings are enriched, and button actions are enriched.
  */
-export const enrichProps = async (props, dataContexts, dataBindings, user) => {
+export const enrichProps = async (props, context, user) => {
   // Exclude all private props that start with an underscore
   let validProps = {}
   Object.entries(props)
@@ -32,20 +32,22 @@ export const enrichProps = async (props, dataContexts, dataBindings, user) => {
 
   // Create context of all bindings and data contexts
   // Duplicate the closest context as "data" which the builder requires
-  const context = {
-    ...dataContexts,
-    ...dataBindings,
+  const totalContext = {
+    ...context,
     user,
-    data: dataContexts[dataContexts.closestComponentId],
-    data_draft: dataContexts[`${dataContexts.closestComponentId}_draft`],
+    data: context[context.closestComponentId],
+    data_draft: context[`${context.closestComponentId}_draft`],
   }
 
   // Enrich all data bindings in top level props
-  let enrichedProps = await enrichDataBindings(validProps, context)
+  let enrichedProps = await enrichDataBindings(validProps, totalContext)
 
   // Enrich button actions if they exist
   if (props._component.endsWith("/button") && enrichedProps.onClick) {
-    enrichedProps.onClick = enrichButtonActions(enrichedProps.onClick, context)
+    enrichedProps.onClick = enrichButtonActions(
+      enrichedProps.onClick,
+      totalContext
+    )
   }
 
   return enrichedProps
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 9733007bb9..0d5a61ad4c 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1051,11 +1051,12 @@
   },
   "form": {
     "name": "Form",
-    "icon": "ri-file-edit-line",
+    "icon": "ri-file-text-line",
     "styleable": true,
     "hasChildren": true,
     "dataProvider": true,
     "datasourceSetting": "datasource",
+    "actions": ["ValidateForm"],
     "settings": [
       {
         "type": "datasource",
@@ -1102,7 +1103,7 @@
   },
   "fieldgroup": {
     "name": "Field Group",
-    "icon": "ri-edit-box-line",
+    "icon": "ri-layout-row-line",
     "styleable": true,
     "hasChildren": true,
     "settings": [
@@ -1130,7 +1131,7 @@
   },
   "stringfield": {
     "name": "Text Field",
-    "icon": "ri-edit-box-line",
+    "icon": "ri-t-box-line",
     "styleable": true,
     "settings": [
       {
@@ -1174,7 +1175,7 @@
   },
   "optionsfield": {
     "name": "Options Picker",
-    "icon": "ri-edit-box-line",
+    "icon": "ri-file-list-line",
     "styleable": true,
     "settings": [
       {
@@ -1197,7 +1198,7 @@
   },
   "booleanfield": {
     "name": "Checkbox",
-    "icon": "ri-edit-box-line",
+    "icon": "ri-checkbox-line",
     "styleable": true,
     "settings": [
       {
@@ -1219,7 +1220,7 @@
   },
   "longformfield": {
     "name": "Rich Text",
-    "icon": "ri-edit-box-line",
+    "icon": "ri-file-edit-line",
     "styleable": true,
     "settings": [
       {
@@ -1270,7 +1271,7 @@
   },
   "attachmentfield": {
     "name": "Attachment",
-    "icon": "ri-calendar-line",
+    "icon": "ri-image-edit-line",
     "styleable": true,
     "settings": [
       {
@@ -1287,7 +1288,7 @@
   },
   "relationshipfield": {
     "name": "Relationship Picker",
-    "icon": "ri-edit-box-line",
+    "icon": "ri-links-line",
     "styleable": true,
     "settings": [
       {
diff --git a/packages/standard-components/src/Form.svelte b/packages/standard-components/src/Form.svelte
index 0da894b31e..bec99de553 100644
--- a/packages/standard-components/src/Form.svelte
+++ b/packages/standard-components/src/Form.svelte
@@ -14,7 +14,7 @@
 
   const { styleable, API } = getContext("sdk")
   const component = getContext("component")
-  const dataContext = getContext("data")
+  const context = getContext("context")
 
   export let wide = false
 
@@ -23,7 +23,7 @@
   let fields = []
 
   // Fetch info about the closest data context
-  $: getFormData($dataContext[$dataContext.closestComponentId])
+  $: getFormData($context[$context.closestComponentId])
 
   const getFormData = async context => {
     if (context) {
@@ -32,7 +32,7 @@
       fields = Object.keys(schema ?? {})
 
       // Use the draft version for editing
-      row = $dataContext[`${$dataContext.closestComponentId}_draft`]
+      row = $context[`${$context.closestComponentId}_draft`]
     }
   }
 </script>
diff --git a/packages/standard-components/src/Input.svelte b/packages/standard-components/src/Input.svelte
deleted file mode 100644
index 03dd6ea023..0000000000
--- a/packages/standard-components/src/Input.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  const { styleable, setBindableValue } = getContext("sdk")
-  const component = getContext("component")
-
-  let value
-
-  function onBlur() {
-    setBindableValue($component.id, value)
-  }
-</script>
-
-<input bind:value on:blur={onBlur} use:styleable={$component.styles} />
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 9ee59a79b7..ca484d75d3 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { isEmpty } from "lodash/fp"
 
-  const { API, styleable, DataProvider, builderStore } = getContext("sdk")
+  const { API, styleable, Provider, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let datasource = []
@@ -26,9 +26,9 @@
       <p>Add some components too</p>
     {:else}
       {#each rows as row}
-        <DataProvider {row}>
+        <Provider data={row}>
           <slot />
-        </DataProvider>
+        </Provider>
       {/each}
     {/if}
   {:else if loaded && $builderStore.inBuilder}
diff --git a/packages/standard-components/src/NewRow.svelte b/packages/standard-components/src/NewRow.svelte
index 68dcac0b11..9830c87015 100644
--- a/packages/standard-components/src/NewRow.svelte
+++ b/packages/standard-components/src/NewRow.svelte
@@ -1,14 +1,14 @@
 <script>
   import { getContext } from "svelte"
 
-  const { DataProvider, styleable } = getContext("sdk")
+  const { Provider, styleable } = getContext("sdk")
   const component = getContext("component")
 
   export let table
 </script>
 
 <div use:styleable={$component.styles}>
-  <DataProvider row={{ tableId: table }}>
+  <Provider data={{ tableId: table }}>
     <slot />
-  </DataProvider>
+  </Provider>
 </div>
diff --git a/packages/standard-components/src/RowDetail.svelte b/packages/standard-components/src/RowDetail.svelte
index 7f01341665..ed46fd6927 100644
--- a/packages/standard-components/src/RowDetail.svelte
+++ b/packages/standard-components/src/RowDetail.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount, getContext } from "svelte"
 
-  const { API, screenStore, routeStore, DataProvider, styleable } = getContext(
+  const { API, screenStore, routeStore, Provider, styleable } = getContext(
     "sdk"
   )
   const component = getContext("component")
@@ -39,8 +39,8 @@
 
 {#if row}
   <div use:styleable={$component.styles}>
-    <DataProvider {row}>
+    <Provider data={row}>
       <slot />
-    </DataProvider>
+    </Provider>
   </div>
 {/if}
diff --git a/packages/standard-components/src/charts/BarChart.svelte b/packages/standard-components/src/charts/BarChart.svelte
index 51bc91046e..872f7e624d 100644
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@@ -5,7 +5,6 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
-  const dataContext = getContext("data")
 
   export let title
   export let datasource
diff --git a/packages/standard-components/src/charts/CandleStickChart.svelte b/packages/standard-components/src/charts/CandleStickChart.svelte
index fbad22feaf..c5ca0ebd49 100644
--- a/packages/standard-components/src/charts/CandleStickChart.svelte
+++ b/packages/standard-components/src/charts/CandleStickChart.svelte
@@ -5,7 +5,6 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
-  const dataContext = getContext("data")
 
   export let title
   export let datasource
diff --git a/packages/standard-components/src/charts/LineChart.svelte b/packages/standard-components/src/charts/LineChart.svelte
index 256ec70fe6..cdfb4f5fbf 100644
--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@@ -5,7 +5,6 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
-  const dataContext = getContext("data")
 
   // Common props
   export let title
diff --git a/packages/standard-components/src/charts/PieChart.svelte b/packages/standard-components/src/charts/PieChart.svelte
index 65ac8ac490..7b8df25b01 100644
--- a/packages/standard-components/src/charts/PieChart.svelte
+++ b/packages/standard-components/src/charts/PieChart.svelte
@@ -5,7 +5,6 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
-  const dataContext = getContext("data")
 
   export let title
   export let datasource
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 9edb749088..01004f2a72 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -9,9 +9,9 @@
   export let theme
   export let size
 
-  const { styleable, API, setBindableValue, DataProvider } = getContext("sdk")
   const component = getContext("component")
-  const dataContext = getContext("data")
+  const context = getContext("context")
+  const { styleable, API, Provider, ActionTypes } = getContext("sdk")
 
   let loaded = false
   let schema
@@ -26,12 +26,11 @@
 
   // Use the closest data context as the initial form values if it matches
   const initialValues = getInitialValues(
-    $dataContext[$dataContext.closestComponentId]
+    $context[`${$context.closestComponentId}`]
   )
 
   // Form state contains observable data about the form
   const formState = writable({ values: initialValues, errors: {}, valid: true })
-  $: updateFormState(fieldMap)
 
   // Form API contains functions to control the form
   const formApi = {
@@ -52,29 +51,65 @@
         fieldApi: makeFieldApi(field, defaultValue, validate),
         fieldSchema: schema?.[field] ?? {},
       }
-      fieldMap = fieldMap
       return fieldMap[field]
     },
+    validate: () => {
+      const fields = Object.keys(fieldMap)
+      fields.forEach(field => {
+        const { fieldApi } = fieldMap[field]
+        fieldApi.validate()
+      })
+      return get(formState).valid
+    },
   }
 
   // Provide both form API and state to children
   setContext("form", { formApi, formState })
 
+  // Action context to pass to children
+  $: actions = [{ type: ActionTypes.ValidateForm, callback: formApi.validate }]
+
   // Creates an API for a specific field
   const makeFieldApi = (field, defaultValue, validate) => {
+    const setValue = (value, skipCheck = false) => {
+      const { fieldState } = fieldMap[field]
+
+      // Skip if the value is the same
+      if (!skipCheck && get(fieldState).value === value) {
+        return
+      }
+
+      const newValue = value == null ? defaultValue : value
+      const newError = validate ? validate(newValue) : null
+      const newValid = !newError
+
+      // Update field state
+      fieldState.update(state => {
+        state.value = newValue
+        state.error = newError
+        state.valid = newValid
+        return state
+      })
+
+      // Update form state
+      formState.update(state => {
+        state.values = { ...state.values, [field]: newValue }
+        if (newError) {
+          state.errors = { ...state.errors, [field]: newError }
+        } else {
+          delete state.errors[field]
+        }
+        state.valid = Object.keys(state.errors).length === 0
+        return state
+      })
+
+      return newValid
+    }
     return {
-      setValue: value => {
+      setValue,
+      validate: () => {
         const { fieldState } = fieldMap[field]
-        fieldState.update(state => {
-          if (state.value === value) {
-            return state
-          }
-          state.value = value == null ? defaultValue : value
-          state.error = validate ? validate(state.value) : null
-          state.valid = !state.error
-          return state
-        })
-        fieldMap = fieldMap
+        setValue(get(fieldState).value, true)
       },
     }
   }
@@ -90,21 +125,6 @@
     })
   }
 
-  // Updates the form states from the field data
-  const updateFormState = fieldMap => {
-    let values = { ...initialValues }
-    let errors = {}
-    Object.entries(fieldMap).forEach(([field, formField]) => {
-      const fieldState = get(formField.fieldState)
-      values[field] = fieldState.value
-      if (fieldState.error) {
-        errors[field] = fieldState.error
-      }
-    })
-    const valid = Object.keys(errors).length === 0
-    formState.set({ values, errors, valid })
-  }
-
   // Fetches the form schema from this form's datasource, if one exists
   const fetchSchema = async () => {
     if (!datasource?.tableId) {
@@ -128,7 +148,9 @@
   onMount(fetchSchema)
 </script>
 
-<DataProvider row={{ ...$formState.values, tableId: datasource?.tableId }}>
+<Provider
+  {actions}
+  data={{ ...$formState.values, tableId: datasource?.tableId }}>
   <div
     lang="en"
     dir="ltr"
@@ -138,7 +160,7 @@
       <slot />
     {/if}
   </div>
-</DataProvider>
+</Provider>
 
 <style>
   div {
diff --git a/packages/standard-components/src/grid/Component.svelte b/packages/standard-components/src/grid/Component.svelte
index 3004622bfd..2958282293 100644
--- a/packages/standard-components/src/grid/Component.svelte
+++ b/packages/standard-components/src/grid/Component.svelte
@@ -16,7 +16,6 @@
   const setters = new Map([["number", number]])
   const SDK = getContext("sdk")
   const component = getContext("component")
-  const dataContext = getContext("data")
   const { API, styleable } = SDK
 
   export let datasource = {}

From 56dfaba6246135ba51baee37c93b01af9b3197b4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Feb 2021 19:01:43 +0000
Subject: [PATCH 23/86] Add error state styles to date picker field

---
 .../src/forms/DateTimeField.svelte             | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index 591acededb..7bf6bf7ac1 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -57,7 +57,8 @@
       <div
         id={`${$fieldState.fieldId}-wrapper`}
         aria-disabled="false"
-        aria-invalid="false"
+        aria-invalid={!$fieldState.valid}
+        class:is-invalid={!$fieldState.valid}
         class="flatpickr spectrum-InputGroup spectrum-Datepicker"
         class:is-focused={open}
         aria-readonly="false"
@@ -65,12 +66,21 @@
         aria-haspopup="true">
         <div
           on:click={flatpickr?.open}
-          class="spectrum-Textfield spectrum-InputGroup-textfield">
+          class="spectrum-Textfield spectrum-InputGroup-textfield"
+          class:is-invalid={!$fieldState.valid}>
+          {#if !$fieldState.valid}
+            <svg
+              class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+              focusable="false"
+              aria-hidden="true">
+              <use xlink:href="#spectrum-icon-18-Alert" />
+            </svg>
+          {/if}
           <input
             data-input
             type="text"
             class="spectrum-Textfield-input spectrum-InputGroup-input"
-            aria-invalid="false"
+            aria-invalid={!$fieldState.valid}
             {placeholder}
             id={$fieldState.fieldId}
             value={$fieldState.value} />
@@ -79,6 +89,7 @@
           type="button"
           class="spectrum-Picker spectrum-InputGroup-button"
           tabindex="-1"
+          class:is-invalid={!$fieldState.valid}
           on:click={flatpickr?.open}>
           <svg
             class="spectrum-Icon spectrum-Icon--sizeM"
@@ -108,6 +119,7 @@
       --spectrum-alias-single-line-width,
       var(--spectrum-global-dimension-size-2400)
     );
+    overflow: hidden;
   }
   .flatpickr .spectrum-Textfield {
     width: auto;

From 17ad44369cc9d969eb670d2ab796e202818e88fe Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Feb 2021 10:35:00 +0000
Subject: [PATCH 24/86] Ensure fetching datasources always returns an array
 result

---
 packages/client/src/api/datasources.js | 7 +++----
 packages/client/src/api/rows.js        | 5 ++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/api/datasources.js b/packages/client/src/api/datasources.js
index 7e5e11cd08..c2af90592e 100644
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@@ -3,7 +3,6 @@ import { fetchTableData } from "./tables"
 import { fetchViewData } from "./views"
 import { fetchRelationshipData } from "./relationships"
 import { executeQuery } from "./queries"
-import { enrichRows } from "./rows"
 
 /**
  * Fetches all rows for a particular Budibase data source.
@@ -28,7 +27,7 @@ export const fetchDatasource = async datasource => {
         parameters[param.name] = param.default
       }
     }
-    return await executeQuery({ queryId: datasource._id, parameters })
+    rows = await executeQuery({ queryId: datasource._id, parameters })
   } else if (type === "link") {
     rows = await fetchRelationshipData({
       rowId: datasource.rowId,
@@ -37,6 +36,6 @@ export const fetchDatasource = async datasource => {
     })
   }
 
-  // Enrich rows so they can displayed properly
-  return await enrichRows(rows, tableId)
+  // Enrich the result is always an array
+  return Array.isArray(rows) ? rows : []
 }
diff --git a/packages/client/src/api/rows.js b/packages/client/src/api/rows.js
index 3ebc191ff6..6930105d78 100644
--- a/packages/client/src/api/rows.js
+++ b/packages/client/src/api/rows.js
@@ -75,7 +75,10 @@ export const deleteRows = async ({ tableId, rows }) => {
  * be properly displayed.
  */
 export const enrichRows = async (rows, tableId) => {
-  if (rows && rows.length && tableId) {
+  if (!Array.isArray(rows)) {
+    return []
+  }
+  if (rows.length && tableId) {
     // Fetch table schema so we can check column types
     const tableDefinition = await fetchTableDefinition(tableId)
     const schema = tableDefinition && tableDefinition.schema

From 3faef71ff427259b019c9a071de94ba72c187530 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Feb 2021 13:50:13 +0000
Subject: [PATCH 25/86] Fix presence validation for array values

---
 packages/standard-components/src/forms/validation.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index bc09d1f95a..0bc926efa6 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -58,7 +58,13 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
 }
 
 const presenceConstraint = value => {
-  return value == null || value === "" ? "Required" : null
+  let invalid
+  if (Array.isArray(value)) {
+    invalid = value.length === 0
+  } else {
+    invalid = value == null || value === ""
+  }
+  return invalid ? "Required" : null
 }
 
 const lengthConstraint = maxLength => value => {

From 48f49dd94758c4ee16c252469b83eff9a47dfe1c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Feb 2021 13:50:46 +0000
Subject: [PATCH 26/86] Ensure consistent size of form fields regardless of
 label position

---
 packages/standard-components/src/forms/FieldGroup.svelte    | 4 ++--
 packages/standard-components/src/forms/SpectrumField.svelte | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/forms/FieldGroup.svelte b/packages/standard-components/src/forms/FieldGroup.svelte
index ec5979ed30..05bad90704 100644
--- a/packages/standard-components/src/forms/FieldGroup.svelte
+++ b/packages/standard-components/src/forms/FieldGroup.svelte
@@ -9,9 +9,9 @@
 </script>
 
 <div use:styleable={$component.styles}>
-  <form
+  <div
     class="spectrum-Form"
     class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
     <slot />
-  </form>
+  </div>
 </div>
diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte
index 40f401eb64..d910e5ee46 100644
--- a/packages/standard-components/src/forms/SpectrumField.svelte
+++ b/packages/standard-components/src/forms/SpectrumField.svelte
@@ -56,6 +56,10 @@
 </FieldGroupFallback>
 
 <style>
+  .spectrum-Form-itemField {
+    width: 360px;
+  }
+
   .error {
     color: var(
       --spectrum-semantic-negative-color-default,

From 3dd67697773eb29e88b2888ff8cbabeb0787e805 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Feb 2021 13:51:16 +0000
Subject: [PATCH 27/86] Fix label in form validation action

---
 .../PropertyControls/EventsEditor/actions/ValidateForm.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
index 72890c584a..9c50bd8694 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@@ -15,7 +15,7 @@
 
 <div class="root">
   <Label size="m" color="dark">Form</Label>
-  <DataList secondary bind:value={parameters.componentId} label="asd">
+  <DataList secondary bind:value={parameters.componentId}>
     <option value="" />
     {#if actionProviders}
       {#each actionProviders as component}

From e3b0de680567fae82e4e971b9fbb8b2de37d01ea Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Feb 2021 14:32:58 +0000
Subject: [PATCH 28/86] Update screen templates to support full form
 generation. Fix issues with screen templates

---
 .../createFromScratchScreen.js                |   1 +
 .../screenTemplates/emptyNewRowScreen.js      |  13 ---
 .../screenTemplates/emptyRowDetailScreen.js   |  13 ---
 .../store/screenTemplates/index.js            |  21 ++--
 .../store/screenTemplates/newRowScreen.js     |  53 ++++++---
 .../store/screenTemplates/rowDetailScreen.js  |  59 ++++++----
 .../store/screenTemplates/utils/Component.js  |  24 ++--
 .../screenTemplates/utils/commonComponents.js |  86 ++++++++++++++-
 .../design/AppPreview/componentStructure.json |   3 +-
 packages/client/src/store/context.js          |   5 +-
 packages/client/src/utils/buttonActions.js    |   2 +-
 packages/client/src/utils/componentProps.js   |   4 +-
 packages/standard-components/src/Form.svelte  | 103 ------------------
 .../standard-components/src/NewRow.svelte     |  14 ---
 packages/standard-components/src/index.js     |   1 -
 15 files changed, 190 insertions(+), 212 deletions(-)
 delete mode 100644 packages/builder/src/builderStore/store/screenTemplates/emptyNewRowScreen.js
 delete mode 100644 packages/builder/src/builderStore/store/screenTemplates/emptyRowDetailScreen.js
 delete mode 100644 packages/standard-components/src/Form.svelte
 delete mode 100644 packages/standard-components/src/NewRow.svelte

diff --git a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js
index b25562758e..1f30d974ef 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js
@@ -9,5 +9,6 @@ const createScreen = () => {
   return new Screen()
     .mainType("div")
     .component("@budibase/standard-components/container")
+    .instanceName("New Screen")
     .json()
 }
diff --git a/packages/builder/src/builderStore/store/screenTemplates/emptyNewRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/emptyNewRowScreen.js
deleted file mode 100644
index a2f2f6df67..0000000000
--- a/packages/builder/src/builderStore/store/screenTemplates/emptyNewRowScreen.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Screen } from "./utils/Screen"
-
-export default {
-  name: `New Row (Empty)`,
-  create: () => createScreen(),
-}
-
-const createScreen = () => {
-  return new Screen()
-    .component("@budibase/standard-components/newrow")
-    .table("")
-    .json()
-}
diff --git a/packages/builder/src/builderStore/store/screenTemplates/emptyRowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/emptyRowDetailScreen.js
deleted file mode 100644
index 5dbdcf4e69..0000000000
--- a/packages/builder/src/builderStore/store/screenTemplates/emptyRowDetailScreen.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Screen } from "./utils/Screen"
-
-export default {
-  name: `Row Detail (Empty)`,
-  create: () => createScreen(),
-}
-
-const createScreen = () => {
-  return new Screen()
-    .component("@budibase/standard-components/rowdetail")
-    .table("")
-    .json()
-}
diff --git a/packages/builder/src/builderStore/store/screenTemplates/index.js b/packages/builder/src/builderStore/store/screenTemplates/index.js
index 7272f3514c..38ae434753 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/index.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/index.js
@@ -1,17 +1,12 @@
 import newRowScreen from "./newRowScreen"
 import rowDetailScreen from "./rowDetailScreen"
 import rowListScreen from "./rowListScreen"
-import emptyNewRowScreen from "./emptyNewRowScreen"
 import createFromScratchScreen from "./createFromScratchScreen"
-import emptyRowDetailScreen from "./emptyRowDetailScreen"
 
 const allTemplates = tables => [
-  createFromScratchScreen,
   ...newRowScreen(tables),
   ...rowDetailScreen(tables),
   ...rowListScreen(tables),
-  emptyNewRowScreen,
-  emptyRowDetailScreen,
 ]
 
 // Allows us to apply common behaviour to all create() functions
@@ -22,8 +17,18 @@ const createTemplateOverride = (frontendState, create) => () => {
   return screen
 }
 
-export default (frontendState, tables) =>
-  allTemplates(tables).map(template => ({
+export default (frontendState, tables) => {
+  const enrichTemplate = template => ({
     ...template,
     create: createTemplateOverride(frontendState, template.create),
-  }))
+  })
+
+  const fromScratch = enrichTemplate(createFromScratchScreen)
+  const tableTemplates = allTemplates(tables).map(enrichTemplate)
+  return [
+    fromScratch,
+    ...tableTemplates.sort((templateA, templateB) => {
+      return templateA.name > templateB.name ? 1 : -1
+    }),
+  ]
+}
diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 2790a68677..21754256cd 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -1,11 +1,12 @@
 import sanitizeUrl from "./utils/sanitizeUrl"
-import { Component } from "./utils/Component"
 import { Screen } from "./utils/Screen"
+import { Component } from "./utils/Component"
 import {
   makeBreadcrumbContainer,
-  makeMainContainer,
+  makeMainForm,
   makeTitleContainer,
   makeSaveButton,
+  makeSchemaFormComponents,
 } from "./utils/commonComponents"
 
 export default function(tables) {
@@ -21,29 +22,45 @@ export default function(tables) {
 export const newRowUrl = table => sanitizeUrl(`/${table.name}/new/row`)
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
 
-function generateTitleContainer(table, providerId) {
-  return makeTitleContainer("New Row").addChild(
-    makeSaveButton(table, providerId)
-  )
+function generateTitleContainer(table, formId) {
+  return makeTitleContainer("New Row").addChild(makeSaveButton(table, formId))
 }
 
 const createScreen = table => {
   const screen = new Screen()
-    .component("@budibase/standard-components/newrow")
-    .table(table._id)
-    .route(newRowUrl(table))
+    .component("@budibase/standard-components/container")
     .instanceName(`${table.name} - New`)
-    .name("")
+    .route(newRowUrl(table))
 
-  const dataform = new Component(
-    "@budibase/standard-components/dataformwide"
-  ).instanceName("Form")
+  const form = makeMainForm()
+    .instanceName("Form")
+    .customProps({
+      theme: "spectrum--light",
+      size: "spectrum--medium",
+      datasource: {
+        label: table.name,
+        tableId: table._id,
+        type: "table",
+      },
+    })
 
-  const providerId = screen._json.props._id
-  const container = makeMainContainer()
+  const fieldGroup = new Component("@budibase/standard-components/fieldgroup")
+    .instanceName("Field Group")
+    .customProps({
+      labelPosition: "left",
+    })
+
+  // Add all form fields from this schema to the field group
+  makeSchemaFormComponents(table._id).forEach(component => {
+    fieldGroup.addChild(component)
+  })
+
+  // Add all children to the form
+  const formId = form._json._id
+  form
     .addChild(makeBreadcrumbContainer(table.name, "New"))
-    .addChild(generateTitleContainer(table, providerId))
-    .addChild(dataform)
+    .addChild(generateTitleContainer(table, formId))
+    .addChild(fieldGroup)
 
-  return screen.addChild(container).json()
+  return screen.addChild(form).json()
 }
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 0a9148eaf8..02502dbb44 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -3,20 +3,18 @@ import { rowListUrl } from "./rowListScreen"
 import { Screen } from "./utils/Screen"
 import { Component } from "./utils/Component"
 import {
-  makeMainContainer,
   makeBreadcrumbContainer,
   makeTitleContainer,
   makeSaveButton,
+  makeSchemaFormComponents,
+  makeMainForm,
 } from "./utils/commonComponents"
 
 export default function(tables) {
   return tables.map(table => {
-    const heading = table.primaryDisplay
-      ? `{{ data.${table.primaryDisplay} }}`
-      : null
     return {
       name: `${table.name} - Detail`,
-      create: () => createScreen(table, heading),
+      create: () => createScreen(table),
       id: ROW_DETAIL_TEMPLATE,
     }
   })
@@ -25,9 +23,9 @@ export default function(tables) {
 export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
 export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
 
-function generateTitleContainer(table, title, providerId) {
+function generateTitleContainer(table, title, formId) {
   // have to override style for this, its missing margin
-  const saveButton = makeSaveButton(table, providerId).normalStyle({
+  const saveButton = makeSaveButton(table, formId).normalStyle({
     background: "#000000",
     "border-width": "0",
     "border-style": "None",
@@ -60,8 +58,8 @@ function generateTitleContainer(table, title, providerId) {
       onClick: [
         {
           parameters: {
-            rowId: `{{ ${providerId}._id }}`,
-            revId: `{{ ${providerId}._rev }}`,
+            rowId: `{{ ${formId}._id }}`,
+            revId: `{{ ${formId}._rev }}`,
             tableId: table._id,
           },
           "##eventHandlerType": "Delete Row",
@@ -81,23 +79,46 @@ function generateTitleContainer(table, title, providerId) {
     .addChild(saveButton)
 }
 
-const createScreen = (table, heading) => {
+const createScreen = table => {
   const screen = new Screen()
     .component("@budibase/standard-components/rowdetail")
     .table(table._id)
     .instanceName(`${table.name} - Detail`)
     .route(rowDetailUrl(table))
-    .name("")
 
-  const dataform = new Component(
-    "@budibase/standard-components/dataformwide"
-  ).instanceName("Form")
+  const form = makeMainForm()
+    .instanceName("Form")
+    .customProps({
+      theme: "spectrum--light",
+      size: "spectrum--medium",
+      datasource: {
+        label: table.name,
+        tableId: table._id,
+        type: "table",
+      },
+    })
 
-  const providerId = screen._json.props._id
-  const container = makeMainContainer()
+  const fieldGroup = new Component("@budibase/standard-components/fieldgroup")
+    .instanceName("Field Group")
+    .customProps({
+      labelPosition: "left",
+    })
+
+  // Add all form fields from this schema to the field group
+  makeSchemaFormComponents(table._id).forEach(component => {
+    fieldGroup.addChild(component)
+  })
+
+  // Add all children to the form
+  const formId = form._json._id
+  const rowDetailId = screen._json.props._id
+  const heading = table.primaryDisplay
+    ? `{{ ${rowDetailId}.${table.primaryDisplay} }}`
+    : null
+  form
     .addChild(makeBreadcrumbContainer(table.name, heading || "Edit"))
-    .addChild(generateTitleContainer(table, heading || "Edit Row", providerId))
-    .addChild(dataform)
+    .addChild(generateTitleContainer(table, heading || "Edit Row", formId))
+    .addChild(fieldGroup)
 
-  return screen.addChild(container).json()
+  return screen.addChild(form).json()
 }
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
index a74ea526f7..1e588895af 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
@@ -14,17 +14,11 @@ export class Component extends BaseStructure {
         active: {},
         selected: {},
       },
-      type: "",
       _instanceName: "",
       _children: [],
     }
   }
 
-  type(type) {
-    this._json.type = type
-    return this
-  }
-
   normalStyle(styling) {
     this._json._styles.normal = styling
     return this
@@ -35,14 +29,20 @@ export class Component extends BaseStructure {
     return this
   }
 
-  text(text) {
-    this._json.text = text
-    return this
-  }
-
-  // TODO: do we need this
   instanceName(name) {
     this._json._instanceName = name
     return this
   }
+
+  // Shorthand for custom props "type"
+  type(type) {
+    this._json.type = type
+    return this
+  }
+
+  // Shorthand for custom props "text"
+  text(text) {
+    this._json.text = text
+    return this
+  }
 }
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index a00f66f828..f0bd52d53c 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -1,5 +1,15 @@
+import { get } from "svelte/store"
 import { Component } from "./Component"
 import { rowListUrl } from "../rowListScreen"
+import { backendUiStore } from "builderStore"
+import StringFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte"
+import NumberFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte"
+import OptionsFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte"
+import BooleanFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte"
+import LongFormFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte"
+import DateTimeFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte"
+import AttachmentFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte"
+import RelationshipFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte"
 
 export function makeLinkComponent(tableName) {
   return new Component("@budibase/standard-components/link")
@@ -22,13 +32,12 @@ export function makeLinkComponent(tableName) {
     })
 }
 
-export function makeMainContainer() {
-  return new Component("@budibase/standard-components/container")
+export function makeMainForm() {
+  return new Component("@budibase/standard-components/form")
     .type("div")
     .normalStyle({
       width: "700px",
       padding: "0px",
-      background: "white",
       "border-radius": "0.5rem",
       "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
       margin: "auto",
@@ -39,7 +48,26 @@ export function makeMainContainer() {
       "padding-left": "48px",
       "margin-bottom": "20px",
     })
-    .instanceName("Container")
+    .instanceName("Form")
+}
+
+export function makeMainContainer() {
+  return new Component("@budibase/standard-components/container")
+    .type("div")
+    .normalStyle({
+      width: "700px",
+      padding: "0px",
+      "border-radius": "0.5rem",
+      "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      margin: "auto",
+      "margin-top": "20px",
+      "padding-top": "48px",
+      "padding-bottom": "48px",
+      "padding-right": "48px",
+      "padding-left": "48px",
+      "margin-bottom": "20px",
+    })
+    .instanceName("Form")
 }
 
 export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
@@ -78,7 +106,7 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
     .addChild(identifierText)
 }
 
-export function makeSaveButton(table, providerId) {
+export function makeSaveButton(table, formId) {
   return new Component("@budibase/standard-components/button")
     .normalStyle({
       background: "#000000",
@@ -99,8 +127,14 @@ export function makeSaveButton(table, providerId) {
       disabled: false,
       onClick: [
         {
+          "##eventHandlerType": "Validate Form",
           parameters: {
-            providerId,
+            componentId: formId,
+          },
+        },
+        {
+          parameters: {
+            providerId: formId,
           },
           "##eventHandlerType": "Save Row",
         },
@@ -142,3 +176,43 @@ export function makeTitleContainer(title) {
     .instanceName("Title Container")
     .addChild(heading)
 }
+
+const fieldTypeToComponentMap = {
+  string: "stringfield",
+  number: "numberfield",
+  options: "optionsfield",
+  boolean: "booleanfield",
+  longform: "longformfield",
+  datetime: "datetimefield",
+  attachment: "attachmentfield",
+  link: "relationshipfield",
+}
+
+export function makeSchemaFormComponents(tableId) {
+  const tables = get(backendUiStore).tables
+  const schema = tables.find(table => table._id === tableId)?.schema ?? {}
+  let components = []
+  let fields = Object.keys(schema)
+  fields.forEach(field => {
+    const fieldSchema = schema[field]
+    const componentType = fieldTypeToComponentMap[fieldSchema.type]
+    const fullComponentType = `@budibase/standard-components/${componentType}`
+    if (componentType) {
+      const component = new Component(fullComponentType)
+        .instanceName(field)
+        .customProps({
+          field,
+          label: field,
+          placeholder: field,
+        })
+      if (fieldSchema.type === "options") {
+        component.customProps({ placeholder: "Choose an option " })
+      }
+      if (fieldSchema.type === "boolean") {
+        component.customProps({ text: field, label: "" })
+      }
+      components.push(component)
+    }
+  })
+  return components
+}
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 485b429b23..61dc241d2f 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -60,8 +60,7 @@
       "screenslot",
       "navigation",
       "login",
-      "rowdetail",
-      "newrow"
+      "rowdetail"
     ]
   }
 ]
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
index a040c5bd20..f6c07bf41d 100644
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@@ -9,7 +9,10 @@ export const createContextStore = existingContext => {
     store.update(state => {
       if (componentId) {
         state[componentId] = data
-        state[`${componentId}_draft`] = cloneDeep(data)
+
+        // Keep track of the closest component ID so we can later hydrate a "data" prop.
+        // This is only required for legacy bindings that used "data" rather than a
+        // component ID.
         state.closestComponentId = componentId
       }
       return state
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index e293223c5d..fdeb65ffb0 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -7,7 +7,7 @@ import { ActionTypes } from "../constants"
 const saveRowHandler = async (action, context) => {
   const { fields, providerId } = action.parameters
   if (providerId) {
-    let draft = context[`${providerId}_draft`]
+    let draft = context[providerId]
     if (fields) {
       for (let [key, entry] of Object.entries(fields)) {
         draft[key] = await enrichDataBinding(entry.value, context)
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index c4d2d668b1..42bb6e624a 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -35,8 +35,10 @@ export const enrichProps = async (props, context, user) => {
   const totalContext = {
     ...context,
     user,
+
+    // This is only required for legacy bindings that used "data" rather than a
+    // component ID.
     data: context[context.closestComponentId],
-    data_draft: context[`${context.closestComponentId}_draft`],
   }
 
   // Enrich all data bindings in top level props
diff --git a/packages/standard-components/src/Form.svelte b/packages/standard-components/src/Form.svelte
deleted file mode 100644
index bec99de553..0000000000
--- a/packages/standard-components/src/Form.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import {
-    Label,
-    DatePicker,
-    Input,
-    Select,
-    Toggle,
-    RichText,
-  } from "@budibase/bbui"
-  import Dropzone from "./attachments/Dropzone.svelte"
-  import LinkedRowSelector from "./LinkedRowSelector.svelte"
-  import { capitalise } from "./helpers"
-
-  const { styleable, API } = getContext("sdk")
-  const component = getContext("component")
-  const context = getContext("context")
-
-  export let wide = false
-
-  let row
-  let schema
-  let fields = []
-
-  // Fetch info about the closest data context
-  $: getFormData($context[$context.closestComponentId])
-
-  const getFormData = async context => {
-    if (context) {
-      const tableDefinition = await API.fetchTableDefinition(context.tableId)
-      schema = tableDefinition?.schema
-      fields = Object.keys(schema ?? {})
-
-      // Use the draft version for editing
-      row = $context[`${$context.closestComponentId}_draft`]
-    }
-  }
-</script>
-
-<div class="form-content" use:styleable={$component.styles}>
-  <!--  <ErrorsBox errors={$store.saveRowErrors || {}} />-->
-  {#each fields as field}
-    <div class="form-field" class:wide>
-      {#if !(schema[field].type === 'boolean' && !wide)}
-        <Label extraSmall={!wide} grey>{capitalise(schema[field].name)}</Label>
-      {/if}
-      {#if schema[field].type === 'options'}
-        <Select secondary bind:value={row[field]}>
-          <option value="">Choose an option</option>
-          {#each schema[field].constraints.inclusion as opt}
-            <option>{opt}</option>
-          {/each}
-        </Select>
-      {:else if schema[field].type === 'datetime'}
-        <DatePicker bind:value={row[field]} />
-      {:else if schema[field].type === 'boolean'}
-        <Toggle
-          text={wide ? null : capitalise(schema[field].name)}
-          bind:checked={row[field]} />
-      {:else if schema[field].type === 'number'}
-        <Input type="number" bind:value={row[field]} />
-      {:else if schema[field].type === 'string'}
-        <Input bind:value={row[field]} />
-      {:else if schema[field].type === 'longform'}
-        <RichText bind:value={row[field]} />
-      {:else if schema[field].type === 'attachment'}
-        <Dropzone bind:files={row[field]} />
-      {:else if schema[field].type === 'link'}
-        <LinkedRowSelector
-          secondary
-          showLabel={false}
-          bind:linkedRows={row[field]}
-          schema={schema[field]} />
-      {/if}
-    </div>
-  {/each}
-</div>
-
-<style>
-  .form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .form-content {
-    display: grid;
-    gap: var(--spacing-xl);
-    width: 100%;
-  }
-
-  .form-field {
-    display: grid;
-  }
-  .form-field.wide {
-    align-items: center;
-    grid-template-columns: 20% 1fr;
-    gap: var(--spacing-xl);
-  }
-  .form-field.wide :global(label) {
-    margin-bottom: 0;
-  }
-</style>
diff --git a/packages/standard-components/src/NewRow.svelte b/packages/standard-components/src/NewRow.svelte
deleted file mode 100644
index 9830c87015..0000000000
--- a/packages/standard-components/src/NewRow.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  const { Provider, styleable } = getContext("sdk")
-  const component = getContext("component")
-
-  export let table
-</script>
-
-<div use:styleable={$component.styles}>
-  <Provider data={{ tableId: table }}>
-    <slot />
-  </Provider>
-</div>
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index e100a0d6bd..a30e747363 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -28,7 +28,6 @@ export { default as image } from "./Image.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as cardstat } from "./CardStat.svelte"
-export { default as newrow } from "./NewRow.svelte"
 export { default as icon } from "./Icon.svelte"
 export * from "./charts"
 export * from "./forms"

From 772fdfa83775fda0dbaaefcc85149838d4902920 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Feb 2021 15:24:15 +0000
Subject: [PATCH 29/86] Remove unused vars and lint

---
 .../store/screenTemplates/utils/commonComponents.js       | 8 --------
 packages/client/src/store/context.js                      | 1 -
 2 files changed, 9 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index f0bd52d53c..f777c12334 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -2,14 +2,6 @@ import { get } from "svelte/store"
 import { Component } from "./Component"
 import { rowListUrl } from "../rowListScreen"
 import { backendUiStore } from "builderStore"
-import StringFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte"
-import NumberFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte"
-import OptionsFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte"
-import BooleanFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte"
-import LongFormFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte"
-import DateTimeFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte"
-import AttachmentFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte"
-import RelationshipFieldSelect from "../../../../components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte"
 
 export function makeLinkComponent(tableName) {
   return new Component("@budibase/standard-components/link")
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
index f6c07bf41d..63aaee3b14 100644
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@@ -1,5 +1,4 @@
 import { writable } from "svelte/store"
-import { cloneDeep } from "lodash/fp"
 
 export const createContextStore = existingContext => {
   const store = writable({ ...existingContext })

From aba4b4ea606f437c32b8348ce6c811bc4c631744 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Feb 2021 15:38:43 +0000
Subject: [PATCH 30/86] Use select for selecting form to validate in button
 actions to fix issue showing component ID

---
 .../EventsEditor/actions/ValidateForm.svelte                | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
index 9c50bd8694..b0c8ff758f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { DataList, Label } from "@budibase/bbui"
+  import { Select, Label } from "@budibase/bbui"
   import { currentAsset, store } from "builderStore"
   import { getActionProviderComponents } from "builderStore/dataBinding"
 
@@ -15,14 +15,14 @@
 
 <div class="root">
   <Label size="m" color="dark">Form</Label>
-  <DataList secondary bind:value={parameters.componentId}>
+  <Select secondary bind:value={parameters.componentId}>
     <option value="" />
     {#if actionProviders}
       {#each actionProviders as component}
         <option value={component._id}>{component._instanceName}</option>
       {/each}
     {/if}
-  </DataList>
+  </Select>
 </div>
 
 <style>

From 3d5876f8bda8616e73fe5e37be6776e27a90bbfd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Feb 2021 15:39:07 +0000
Subject: [PATCH 31/86] Remove console log statement

---
 .../PropertyControls/EventsEditor/actions/ValidateForm.svelte    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
index b0c8ff758f..1d4f789a85 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@@ -10,7 +10,6 @@
     $store.selectedComponentId,
     "ValidateForm"
   )
-  $: console.log(actionProviders)
 </script>
 
 <div class="root">

From ed2ada720efb9389857d64e7a63d7c6554b00fc9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Feb 2021 17:26:14 +0000
Subject: [PATCH 32/86] Add button to fieldgroups to automatically update from
 schema

---
 .../PropertiesPanel/SettingsView.svelte       | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 154e175f60..948412b004 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -1,7 +1,10 @@
 <script>
   import { get } from "lodash"
   import { isEmpty } from "lodash/fp"
-
+  import { Button } from "@budibase/bbui"
+  import { currentAsset } from "builderStore"
+  import { findClosestMatchingComponent } from "builderStore/storeUtils"
+  import { makeSchemaFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import Input from "./PropertyControls/Input.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
@@ -94,6 +97,17 @@
   const onInstanceNameChange = name => {
     onChange("_instanceName", name)
   }
+
+  const resetFormFields = () => {
+    const form = findClosestMatchingComponent(
+      $currentAsset.props,
+      componentInstance._id,
+      component => component._component.endsWith("/form")
+    )
+    const tableId = form?.datasource?.tableId
+    const fields = makeSchemaFormComponents(tableId).map(field => field.json())
+    onChange("_children", fields)
+  }
 </script>
 
 <div class="settings-view-container">
@@ -138,6 +152,10 @@
       This component doesn't have any additional settings.
     </div>
   {/if}
+
+  {#if componentDefinition?.component?.endsWith('/fieldgroup')}
+    <Button secondary wide on:click={resetFormFields}>Reset Fields</Button>
+  {/if}
 </div>
 
 <style>

From fa20f5dec75cd03b445b21f8de53babd7c9e52b0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 10:05:32 +0000
Subject: [PATCH 33/86] Fix form validation sometimes being applied erroneously

---
 packages/standard-components/src/forms/validation.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index 0bc926efa6..ee21dc69e8 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -1,4 +1,5 @@
 import flatpickr from "flatpickr"
+import { isEmpty } from "lodash/fp"
 
 export const createValidatorFromConstraints = (constraints, field, table) => {
   let checks = []
@@ -19,27 +20,27 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
     }
 
     // Min / max number constraint
-    if (constraints.numericality?.greaterThanOrEqualTo != null) {
+    if (!isEmpty(constraints.numericality?.greaterThanOrEqualTo)) {
       const min = constraints.numericality.greaterThanOrEqualTo
       checks.push(numericalConstraint(x => x >= min, `Minimum value is ${min}`))
     }
-    if (constraints.numericality?.lessThanOrEqualTo != null) {
+    if (!isEmpty(constraints.numericality?.lessThanOrEqualTo)) {
       const max = constraints.numericality.lessThanOrEqualTo
       checks.push(numericalConstraint(x => x <= max, `Maximum value is ${max}`))
     }
 
     // Inclusion constraint
-    if (constraints.inclusion != null) {
+    if (!isEmpty(constraints.inclusion)) {
       const options = constraints.inclusion
       checks.push(inclusionConstraint(options))
     }
 
     // Date constraint
-    if (constraints.datetime?.earliest != null) {
+    if (!isEmpty(constraints.datetime?.earliest)) {
       const limit = constraints.datetime.earliest
       checks.push(dateConstraint(limit, true))
     }
-    if (constraints.datetime?.latest != null) {
+    if (!isEmpty(constraints.datetime?.latest)) {
       const limit = constraints.datetime.latest
       checks.push(dateConstraint(limit, false))
     }

From 8d8cffc7fc3b145397fce53c3a9e53b154cab223 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 10:05:49 +0000
Subject: [PATCH 34/86] Add confirmation dialog before resetting form fields
 manually

---
 .../design/PropertiesPanel/SettingsView.svelte       | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 948412b004..fb8ebbf8e4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -2,6 +2,7 @@
   import { get } from "lodash"
   import { isEmpty } from "lodash/fp"
   import { Button } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { currentAsset } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/storeUtils"
   import { makeSchemaFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
@@ -50,6 +51,7 @@
     "layoutId",
     "routing.roleId",
   ]
+  let confirmResetFieldsDialog
 
   $: settings = componentDefinition?.settings ?? []
   $: isLayout = assetInstance && assetInstance.favicon
@@ -154,9 +156,17 @@
   {/if}
 
   {#if componentDefinition?.component?.endsWith('/fieldgroup')}
-    <Button secondary wide on:click={resetFormFields}>Reset Fields</Button>
+    <Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
+      Reset Fields
+    </Button>
   {/if}
 </div>
+<ConfirmDialog
+  bind:this={confirmResetFieldsDialog}
+  body={`All components inside this group will be deleted and replaced with fields to match the schema. Are you sure you want to reset this Field Group?`}
+  okText="Reset"
+  onOk={resetFormFields}
+  title="Confirm Reset Fields" />
 
 <style>
   .settings-view-container {

From ba8d8b532763f35e38deac17fac369ad824fa006 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 10:32:21 +0000
Subject: [PATCH 35/86] Ensure field ID's are always safe to be used as DOM
 ID's

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

diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 01004f2a72..276323d3b0 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -118,7 +118,7 @@
   const makeFieldState = (field, defaultValue) => {
     return writable({
       field,
-      fieldId: `id-${generateID()}-${field}`,
+      fieldId: `id-${generateID()}`,
       value: initialValues[field] ?? defaultValue,
       error: null,
       valid: true,

From e700b99fcf6a2e3c246fa3455b6a0371caacb451 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 10:53:48 +0000
Subject: [PATCH 36/86] Force number field to set numerical values only

---
 packages/standard-components/src/forms/StringField.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index c0a5684eae..40d33cc976 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -11,7 +11,12 @@
   let fieldApi
 
   const onBlur = event => {
-    fieldApi.setValue(event.target.value)
+    let value = event.target.value
+    if (type === "number") {
+      const float = parseFloat(value)
+      value = isNaN(float) ? null : float
+    }
+    fieldApi.setValue(value)
   }
 </script>
 

From ea2f5ebbf96beae64d1ae6dda70b6bbea8eac58b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 11:10:47 +0000
Subject: [PATCH 37/86] Add listener to clear date pickers on certain
 keystrokes

---
 .../standard-components/src/forms/DateTimeField.svelte   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index 7bf6bf7ac1..4924e5e383 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -26,12 +26,21 @@
     fieldApi.setValue(dates[0])
   }
 
+  const clearDateOnBackspace = event => {
+    if (["Backspace", "Clear", "Delete"].includes(event.key)) {
+      fieldApi.setValue(null)
+      flatpickr.close()
+    }
+  }
+
   const onOpen = () => {
     open = true
+    document.addEventListener("keyup", clearDateOnBackspace)
   }
 
   const onClose = () => {
     open = false
+    document.removeEventListener("keyup", clearDateOnBackspace)
 
     // Manually blur all input fields since flatpickr creates a second
     // duplicate input field.

From d85665d21c43c4a4e07ddec3f3e21ed194cc2196 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 14:53:13 +0000
Subject: [PATCH 38/86] Allow forms to generate query schemas. Fix query
 execution action

---
 .../store/screenTemplates/newRowScreen.js     |  4 +-
 .../store/screenTemplates/rowDetailScreen.js  |  4 +-
 .../screenTemplates/utils/commonComponents.js | 42 +++++++++----------
 .../SetupPanel/GenericBindingPopover.svelte   |  1 -
 .../PropertiesPanel/SettingsView.svelte       | 11 +++--
 packages/client/src/api/queries.js            |  4 +-
 packages/client/src/utils/buttonActions.js    |  6 +--
 packages/client/src/utils/componentProps.js   |  5 +--
 .../standard-components/src/forms/Form.svelte |  7 +---
 9 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 21754256cd..5c32144190 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -6,7 +6,7 @@ import {
   makeMainForm,
   makeTitleContainer,
   makeSaveButton,
-  makeSchemaFormComponents,
+  makeTableFormComponents,
 } from "./utils/commonComponents"
 
 export default function(tables) {
@@ -51,7 +51,7 @@ const createScreen = table => {
     })
 
   // Add all form fields from this schema to the field group
-  makeSchemaFormComponents(table._id).forEach(component => {
+  makeTableFormComponents(table._id).forEach(component => {
     fieldGroup.addChild(component)
   })
 
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index dc629d057f..f15f188681 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -7,7 +7,7 @@ import {
   makeBreadcrumbContainer,
   makeTitleContainer,
   makeSaveButton,
-  makeSchemaFormComponents,
+  makeTableFormComponents,
   makeMainForm,
 } from "./utils/commonComponents"
 
@@ -106,7 +106,7 @@ const createScreen = table => {
     })
 
   // Add all form fields from this schema to the field group
-  makeSchemaFormComponents(table._id).forEach(component => {
+  makeTableFormComponents(table._id).forEach(component => {
     fieldGroup.addChild(component)
   })
 
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index f777c12334..d2757ec054 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -43,25 +43,6 @@ export function makeMainForm() {
     .instanceName("Form")
 }
 
-export function makeMainContainer() {
-  return new Component("@budibase/standard-components/container")
-    .type("div")
-    .normalStyle({
-      width: "700px",
-      padding: "0px",
-      "border-radius": "0.5rem",
-      "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-      margin: "auto",
-      "margin-top": "20px",
-      "padding-top": "48px",
-      "padding-bottom": "48px",
-      "padding-right": "48px",
-      "padding-left": "48px",
-      "margin-bottom": "20px",
-    })
-    .instanceName("Form")
-}
-
 export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
   const link = makeLinkComponent(tableName).instanceName("Back Link")
 
@@ -180,11 +161,30 @@ const fieldTypeToComponentMap = {
   link: "relationshipfield",
 }
 
-export function makeSchemaFormComponents(tableId) {
+export function makeTableFormComponents(tableId) {
   const tables = get(backendUiStore).tables
   const schema = tables.find(table => table._id === tableId)?.schema ?? {}
+  return makeSchemaFormComponents(schema)
+}
+
+export function makeQueryFormComponents(queryId) {
+  const queries = get(backendUiStore).queries
+  const schema = queries.find(query => query._id === queryId)?.schema ?? []
+  return makeSchemaFormComponents(schema)
+}
+
+export function makeDatasourceFormComponents(datasource) {
+  if (!datasource) {
+    return []
+  }
+  return datasource.type === "table"
+    ? makeTableFormComponents(datasource.tableId)
+    : makeQueryFormComponents(datasource._id)
+}
+
+function makeSchemaFormComponents(schema) {
   let components = []
-  let fields = Object.keys(schema)
+  let fields = Object.keys(schema || {})
   fields.forEach(field => {
     const fieldSchema = schema[field]
     const componentType = fieldTypeToComponentMap[fieldSchema.type]
diff --git a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
index 3956e765ee..2a58255e57 100644
--- a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
@@ -2,7 +2,6 @@
   import groupBy from "lodash/fp/groupBy"
   import {
     TextArea,
-    Label,
     Input,
     Heading,
     Body,
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index fb8ebbf8e4..9f16578ce5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -5,7 +5,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { currentAsset } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/storeUtils"
-  import { makeSchemaFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
+  import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import Input from "./PropertyControls/Input.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
@@ -106,9 +106,12 @@
       componentInstance._id,
       component => component._component.endsWith("/form")
     )
-    const tableId = form?.datasource?.tableId
-    const fields = makeSchemaFormComponents(tableId).map(field => field.json())
-    onChange("_children", fields)
+    const datasource = form?.datasource
+    const fields = makeDatasourceFormComponents(datasource)
+    onChange(
+      "_children",
+      fields.map(field => field.json())
+    )
   }
 </script>
 
diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index 4e89921bb6..9b213d5c46 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -4,7 +4,7 @@ import API from "./api"
 /**
  * Executes a query against an external data connector.
  */
-export const executeQuery = async ({ queryId, parameters }) => {
+export const executeQuery = async ({ queryId, parameters, notify = false }) => {
   const res = await API.post({
     url: `/api/queries/${queryId}`,
     body: {
@@ -13,6 +13,8 @@ export const executeQuery = async ({ queryId, parameters }) => {
   })
   if (res.error) {
     notificationStore.danger("An error has occurred")
+  } else if (notify) {
+    notificationStore.success("Query executed successfully")
   }
   return res
 }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index fdeb65ffb0..4b12823d2b 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -50,13 +50,13 @@ const navigationHandler = action => {
   }
 }
 
-const queryExecutionHandler = async (action, context) => {
+const queryExecutionHandler = async action => {
   const { datasourceId, queryId, queryParams } = action.parameters
-  const enrichedQueryParameters = enrichDataBindings(queryParams || {}, context)
   await executeQuery({
     datasourceId,
     queryId,
-    parameters: enrichedQueryParameters,
+    parameters: queryParams,
+    notify: true,
   })
 }
 
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 42bb6e624a..938ed59ac1 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -46,10 +46,7 @@ export const enrichProps = async (props, context, user) => {
 
   // Enrich button actions if they exist
   if (props._component.endsWith("/button") && enrichedProps.onClick) {
-    enrichedProps.onClick = enrichButtonActions(
-      enrichedProps.onClick,
-      totalContext
-    )
+    enrichedProps.onClick = enrichButtonActions(enrichedProps.onClick)
   }
 
   return enrichedProps
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 276323d3b0..31623d30f6 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -133,12 +133,7 @@
     } else {
       table = await API.fetchTableDefinition(datasource?.tableId)
       if (table) {
-        if (datasource.type === "query") {
-          console.log("No implementation for queries yet")
-          schema = {}
-        } else {
-          schema = table.schema || {}
-        }
+        schema = table.schema || {}
       }
     }
     loaded = true

From b701416f7c8ebd36d5b91534bcc0f5da9de7e7bf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 14:56:37 +0000
Subject: [PATCH 39/86] Require spectrum css files from correct picker
 component

---
 packages/standard-components/src/forms/OptionsField.svelte | 3 ---
 packages/standard-components/src/forms/Picker.svelte       | 3 +++
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index c7afc45fab..af719191b2 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -1,7 +1,4 @@
 <script>
-  import "@spectrum-css/picker/dist/index-vars.css"
-  import "@spectrum-css/popover/dist/index-vars.css"
-  import "@spectrum-css/menu/dist/index-vars.css"
   import SpectrumField from "./SpectrumField.svelte"
   import Picker from "./Picker.svelte"
 
diff --git a/packages/standard-components/src/forms/Picker.svelte b/packages/standard-components/src/forms/Picker.svelte
index a4a3804939..8ab50a1b94 100644
--- a/packages/standard-components/src/forms/Picker.svelte
+++ b/packages/standard-components/src/forms/Picker.svelte
@@ -1,4 +1,7 @@
 <script>
+  import "@spectrum-css/picker/dist/index-vars.css"
+  import "@spectrum-css/popover/dist/index-vars.css"
+  import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
 
   export let fieldState

From 7efdff487e620016140897e2c8050ac0d594600c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 15:02:50 +0000
Subject: [PATCH 40/86] Update text field values on Enter press

---
 .../src/forms/StringField.svelte                | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index 40d33cc976..dbf5ace61c 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from "svelte"
   import "@spectrum-css/textfield/dist/index-vars.css"
   import SpectrumField from "./SpectrumField.svelte"
 
@@ -9,15 +10,25 @@
 
   let fieldState
   let fieldApi
+  let input
 
-  const onBlur = event => {
-    let value = event.target.value
+  const updateValue = value => {
     if (type === "number") {
       const float = parseFloat(value)
       value = isNaN(float) ? null : float
     }
     fieldApi.setValue(value)
   }
+
+  const onBlur = event => {
+    updateValue(event.target.value)
+  }
+
+  const updateValueOnEnter = event => {
+    if (event.key === "Enter") {
+      updateValue(event.target.value)
+    }
+  }
 </script>
 
 <SpectrumField {label} {field} bind:fieldState bind:fieldApi>
@@ -32,6 +43,8 @@
         </svg>
       {/if}
       <input
+        on:keyup={updateValueOnEnter}
+        bind:this={input}
         id={$fieldState.fieldId}
         value={$fieldState.value || ''}
         placeholder={placeholder || ''}

From 5b10482fa7aae2940cb066ab27240432e770ffef Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 15:28:56 +0000
Subject: [PATCH 41/86] Don't render anything from repeater if no rows exist

---
 packages/standard-components/src/List.svelte | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index ca484d75d3..0c09e0b884 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -20,8 +20,8 @@
   }
 </script>
 
-<div use:styleable={$component.styles}>
-  {#if rows.length > 0}
+{#if rows.length > 0}
+  <div use:styleable={$component.styles}>
     {#if $component.children === 0 && $builderStore.inBuilder}
       <p>Add some components too</p>
     {:else}
@@ -31,10 +31,12 @@
         </Provider>
       {/each}
     {/if}
-  {:else if loaded && $builderStore.inBuilder}
+  </div>
+{:else if loaded && $builderStore.inBuilder}
+  <div use:styleable={$component.styles}>
     <p>Feed me some data</p>
-  {/if}
-</div>
+  </div>
+{/if}
 
 <style>
   p {

From e42b12668ab62af374f8871e5f1fa2f66fe4fc1a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 15:53:25 +0000
Subject: [PATCH 42/86] Fix button action enrichment

---
 packages/client/src/utils/componentProps.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 938ed59ac1..42bb6e624a 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -46,7 +46,10 @@ export const enrichProps = async (props, context, user) => {
 
   // Enrich button actions if they exist
   if (props._component.endsWith("/button") && enrichedProps.onClick) {
-    enrichedProps.onClick = enrichButtonActions(enrichedProps.onClick)
+    enrichedProps.onClick = enrichButtonActions(
+      enrichedProps.onClick,
+      totalContext
+    )
   }
 
   return enrichedProps

From c36ddceb7eac432116aa7f865507f890dbccf232 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Feb 2021 13:01:49 +0000
Subject: [PATCH 43/86] Pull form bindable properties from field definitions
 rather than schema

---
 .../builder/src/builderStore/dataBinding.js   | 54 +++++++++++++++++--
 .../screenTemplates/utils/commonComponents.js |  6 ++-
 .../PropertiesPanel/SettingsView.svelte       |  2 +-
 packages/client/src/utils/buttonActions.js    |  2 +-
 packages/standard-components/manifest.json    |  2 +-
 .../standard-components/src/forms/Form.svelte | 10 +++-
 6 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 6eb6e6a0d8..7e82a40c41 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -105,11 +105,27 @@ export const getContextBindings = (rootComponent, componentId) => {
       return
     }
 
-    // Get schema and add _id and _rev fields for certain types
-    let { schema, table } = getSchemaForDatasource(datasource)
+    // Get schema and table for the datasource
+    const isForm = component._component.endsWith("/form")
+    let { schema, table } = getSchemaForDatasource(datasource, isForm)
     if (!schema || !table) {
       return
     }
+
+    // Forms are an edge case. They can have a schema which will be exposed as
+    // bindable properties, but they can also have custom fields which we need
+    // to find and provide.
+    if (isForm) {
+      const formSchema = buildFormSchema(component)
+      console.log(formSchema)
+      Object.keys(formSchema).forEach(field => {
+        if (!schema[field]) {
+          schema[field] = formSchema[field]
+        }
+      })
+    }
+
+    // Add _id and _rev fields for certain types
     if (datasource.type === "table" || datasource.type === "link") {
       schema["_id"] = { type: "string" }
       schema["_rev"] = { type: "string " }
@@ -177,7 +193,7 @@ export const getContextBindings = (rootComponent, componentId) => {
 /**
  * Gets a schema for a datasource object.
  */
-export const getSchemaForDatasource = datasource => {
+export const getSchemaForDatasource = (datasource, isForm = false) => {
   let schema, table
   if (datasource) {
     const { type } = datasource
@@ -191,6 +207,12 @@ export const getSchemaForDatasource = datasource => {
     if (table) {
       if (type === "view") {
         schema = cloneDeep(table.views?.[datasource.name]?.schema)
+      } else if (type === "query" && isForm) {
+        schema = {}
+        const params = table.parameters || []
+        params.forEach(param => {
+          schema[param.name] = { ...param, type: "string" }
+        })
       } else {
         schema = cloneDeep(table.schema)
       }
@@ -199,6 +221,32 @@ export const getSchemaForDatasource = datasource => {
   return { schema, table }
 }
 
+/**
+ * Builds a form schema given a form component.
+ * A form schema is a schema of all the fields nested anywhere within a form.
+ */
+const buildFormSchema = component => {
+  let schema = {}
+  if (!component) {
+    return schema
+  }
+  const def = store.actions.components.getDefinition(component._component)
+  const fieldSetting = def?.settings?.find(
+    setting => setting.key === "field" && setting.type.startsWith("field/")
+  )
+  if (fieldSetting && component.field) {
+    const type = fieldSetting.type.split("field/")[1]
+    if (type) {
+      schema[component.field] = { name: component.field, type }
+    }
+  }
+  component._children?.forEach(child => {
+    const childSchema = buildFormSchema(child)
+    schema = { ...schema, ...childSchema }
+  })
+  return schema
+}
+
 /**
  * utility function for the readableToRuntimeBinding and runtimeToReadableBinding.
  */
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index d2757ec054..8c6bfe646b 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -169,7 +169,11 @@ export function makeTableFormComponents(tableId) {
 
 export function makeQueryFormComponents(queryId) {
   const queries = get(backendUiStore).queries
-  const schema = queries.find(query => query._id === queryId)?.schema ?? []
+  const params = queries.find(query => query._id === queryId)?.parameters ?? []
+  let schema = {}
+  params.forEach(param => {
+    schema[param.name] = { ...param, type: "string" }
+  })
   return makeSchemaFormComponents(schema)
 }
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 9f16578ce5..c3577e3259 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -78,7 +78,7 @@
     "field/longform": LongFormFieldSelect,
     "field/datetime": DateTimeFieldSelect,
     "field/attachment": AttachmentFieldSelect,
-    "field/relationship": RelationshipFieldSelect,
+    "field/link": RelationshipFieldSelect,
   }
 
   const getControl = type => {
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 4b12823d2b..ba91f44f75 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -34,7 +34,7 @@ const deleteRowHandler = async (action, context) => {
 }
 
 const triggerAutomationHandler = async (action, context) => {
-  const { fields } = action.parameters()
+  const { fields } = action.parameters
   if (fields) {
     const params = {}
     for (let field in fields) {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 9e8652f450..b97c37c9f7 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1282,7 +1282,7 @@
     "styleable": true,
     "settings": [
       {
-        "type": "field/relationship",
+        "type": "field/link",
         "label": "Field",
         "key": "field"
       },
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 31623d30f6..d65c851f43 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -133,7 +133,15 @@
     } else {
       table = await API.fetchTableDefinition(datasource?.tableId)
       if (table) {
-        schema = table.schema || {}
+        if (datasource?.type === "query") {
+          schema = {}
+          const params = table.parameters || []
+          params.forEach(param => {
+            schema[param.name] = { ...param, type: "string" }
+          })
+        } else {
+          schema = table.schema || {}
+        }
       }
     }
     loaded = true

From c7f2a989ad5904bdd88d88b28aecd83fbf6183fa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Feb 2021 15:10:51 +0000
Subject: [PATCH 44/86] Update auto screens to use new lightest spectrum theme

---
 .../src/builderStore/store/screenTemplates/newRowScreen.js    | 2 +-
 .../src/builderStore/store/screenTemplates/rowDetailScreen.js | 2 +-
 packages/standard-components/manifest.json                    | 4 ++++
 packages/standard-components/src/index.js                     | 1 +
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 5c32144190..2ee537ac0c 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -35,7 +35,7 @@ const createScreen = table => {
   const form = makeMainForm()
     .instanceName("Form")
     .customProps({
-      theme: "spectrum--light",
+      theme: "spectrum--lightest",
       size: "spectrum--medium",
       datasource: {
         label: table.name,
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index f15f188681..1d60cb63be 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -90,7 +90,7 @@ const createScreen = table => {
   const form = makeMainForm()
     .instanceName("Form")
     .customProps({
-      theme: "spectrum--light",
+      theme: "spectrum--lightest",
       size: "spectrum--medium",
       datasource: {
         label: table.name,
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index b97c37c9f7..624fcd5829 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1059,6 +1059,10 @@
         "key": "theme",
         "defaultValue": "spectrum--light",
         "options": [
+          {
+            "label": "Lightest",
+            "value": "spectrum--lightest"
+          },
           {
             "label": "Light",
             "value": "spectrum--light"
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index a30e747363..4c18701145 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -2,6 +2,7 @@ import "@budibase/bbui/dist/bbui.css"
 import "@spectrum-css/vars/dist/spectrum-global.css"
 import "@spectrum-css/vars/dist/spectrum-medium.css"
 import "@spectrum-css/vars/dist/spectrum-large.css"
+import "@spectrum-css/vars/dist/spectrum-lightest.css"
 import "@spectrum-css/vars/dist/spectrum-light.css"
 import "@spectrum-css/vars/dist/spectrum-dark.css"
 import "@spectrum-css/vars/dist/spectrum-darkest.css"

From 4d9f4cc2116782131772cf080aaa374b8696caee Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Feb 2021 15:11:05 +0000
Subject: [PATCH 45/86] Update bindable properties to pull directly from form
 children

---
 .../builder/src/builderStore/dataBinding.js   | 66 ++++++++++---------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 7e82a40c41..956b868fbf 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -99,37 +99,37 @@ export const getContextBindings = (rootComponent, componentId) => {
   // Extract any components which provide data contexts
   const dataProviders = getDataProviderComponents(rootComponent, componentId)
   let contextBindings = []
+
+  // Create bindings for each data provider
   dataProviders.forEach(component => {
-    const datasource = getDatasourceForProvider(component)
-    if (!datasource) {
-      return
-    }
-
-    // Get schema and table for the datasource
     const isForm = component._component.endsWith("/form")
-    let { schema, table } = getSchemaForDatasource(datasource, isForm)
-    if (!schema || !table) {
+    const datasource = getDatasourceForProvider(component)
+    let tableName, schema
+
+    // Forms are an edge case which do not need table schemas
+    if (isForm) {
+      schema = buildFormSchema(component)
+      tableName = "Schema"
+    } else {
+      if (!datasource) {
+        return
+      }
+
+      // Get schema and table for the datasource
+      const info = getSchemaForDatasource(datasource, isForm)
+      schema = info.schema
+      tableName = info.table?.name
+
+      // Add _id and _rev fields for certain types
+      if (datasource.type === "table" || datasource.type === "link") {
+        schema["_id"] = { type: "string" }
+        schema["_rev"] = { type: "string " }
+      }
+    }
+    if (!schema || !tableName) {
       return
     }
 
-    // Forms are an edge case. They can have a schema which will be exposed as
-    // bindable properties, but they can also have custom fields which we need
-    // to find and provide.
-    if (isForm) {
-      const formSchema = buildFormSchema(component)
-      console.log(formSchema)
-      Object.keys(formSchema).forEach(field => {
-        if (!schema[field]) {
-          schema[field] = formSchema[field]
-        }
-      })
-    }
-
-    // Add _id and _rev fields for certain types
-    if (datasource.type === "table" || datasource.type === "link") {
-      schema["_id"] = { type: "string" }
-      schema["_rev"] = { type: "string " }
-    }
     const keys = Object.keys(schema).sort()
 
     // Create bindable properties for each schema field
@@ -148,11 +148,13 @@ export const getContextBindings = (rootComponent, componentId) => {
         runtimeBinding: `${makePropSafe(component._id)}.${makePropSafe(
           runtimeBoundKey
         )}`,
-        readableBinding: `${component._instanceName}.${table.name}.${key}`,
+        readableBinding: `${component._instanceName}.${tableName}.${key}`,
+        // Field schema and provider are required to construct relationship
+        // datasource options, based on bindable properties
         fieldSchema,
         providerId: component._id,
-        tableId: datasource.tableId,
-        field: key,
+        // tableId: table._id,
+        // field: key,
       })
     })
   })
@@ -180,10 +182,12 @@ export const getContextBindings = (rootComponent, componentId) => {
       type: "context",
       runtimeBinding: `user.${runtimeBoundKey}`,
       readableBinding: `Current User.${key}`,
+      // Field schema and provider are required to construct relationship
+      // datasource options, based on bindable properties
       fieldSchema,
       providerId: "user",
-      tableId: TableNames.USERS,
-      field: key,
+      // tableId: TableNames.USERS,
+      // field: key,
     })
   })
 

From d1df8aca41d048eabd8448e2bbcdd1c3e5c59ccf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Feb 2021 15:23:26 +0000
Subject: [PATCH 46/86] Fix form constraints not being applied correctly

---
 .../standard-components/src/forms/validation.js   | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index ee21dc69e8..5b49fa0848 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -1,5 +1,4 @@
 import flatpickr from "flatpickr"
-import { isEmpty } from "lodash/fp"
 
 export const createValidatorFromConstraints = (constraints, field, table) => {
   let checks = []
@@ -14,33 +13,33 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
     }
 
     // String length constraint
-    if (constraints.length?.maximum) {
+    if (exists(constraints.length?.maximum)) {
       const length = constraints.length.maximum
       checks.push(lengthConstraint(length))
     }
 
     // Min / max number constraint
-    if (!isEmpty(constraints.numericality?.greaterThanOrEqualTo)) {
+    if (exists(constraints.numericality?.greaterThanOrEqualTo)) {
       const min = constraints.numericality.greaterThanOrEqualTo
       checks.push(numericalConstraint(x => x >= min, `Minimum value is ${min}`))
     }
-    if (!isEmpty(constraints.numericality?.lessThanOrEqualTo)) {
+    if (exists(constraints.numericality?.lessThanOrEqualTo)) {
       const max = constraints.numericality.lessThanOrEqualTo
       checks.push(numericalConstraint(x => x <= max, `Maximum value is ${max}`))
     }
 
     // Inclusion constraint
-    if (!isEmpty(constraints.inclusion)) {
+    if (exists(constraints.inclusion)) {
       const options = constraints.inclusion
       checks.push(inclusionConstraint(options))
     }
 
     // Date constraint
-    if (!isEmpty(constraints.datetime?.earliest)) {
+    if (exists(constraints.datetime?.earliest)) {
       const limit = constraints.datetime.earliest
       checks.push(dateConstraint(limit, true))
     }
-    if (!isEmpty(constraints.datetime?.latest)) {
+    if (exists(constraints.datetime?.latest)) {
       const limit = constraints.datetime.latest
       checks.push(dateConstraint(limit, false))
     }
@@ -58,6 +57,8 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
   }
 }
 
+const exists = value => value != null && value !== ""
+
 const presenceConstraint = value => {
   let invalid
   if (Array.isArray(value)) {

From d939acbd4f45e1020c2c23ed519ef3a3fbce1847 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Feb 2021 15:48:32 +0000
Subject: [PATCH 47/86] Fix typo in _rev schema field type

---
 packages/builder/src/builderStore/dataBinding.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 956b868fbf..838bfc3fce 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -123,7 +123,7 @@ export const getContextBindings = (rootComponent, componentId) => {
       // Add _id and _rev fields for certain types
       if (datasource.type === "table" || datasource.type === "link") {
         schema["_id"] = { type: "string" }
-        schema["_rev"] = { type: "string " }
+        schema["_rev"] = { type: "string" }
       }
     }
     if (!schema || !tableName) {

From 45b65c6a111f70f49d89236b413e00670896a7f4 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 4 Feb 2021 17:17:05 +0000
Subject: [PATCH 48/86] Updating so that strings get coerced into arrays for
 relationships.

---
 packages/server/src/utilities/index.js | 16 +++++++++++-----
 packages/standard-components/yarn.lock |  5 -----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/server/src/utilities/index.js b/packages/server/src/utilities/index.js
index 31cc74b5e6..cba2e81094 100644
--- a/packages/server/src/utilities/index.js
+++ b/packages/server/src/utilities/index.js
@@ -16,6 +16,12 @@ const TYPE_TRANSFORM_MAP = {
     "": [],
     [null]: [],
     [undefined]: undefined,
+    parse: link => {
+      if (typeof link === "string") {
+        return [link]
+      }
+      return link
+    },
   },
   options: {
     "": "",
@@ -165,15 +171,15 @@ exports.walkDir = (dirPath, callback) => {
  * @param {object} type The type fo coerce to
  * @returns {object} The coerced value
  */
-exports.coerceValue = (value, type) => {
+exports.coerceValue = (row, type) => {
   // eslint-disable-next-line no-prototype-builtins
-  if (TYPE_TRANSFORM_MAP[type].hasOwnProperty(value)) {
-    return TYPE_TRANSFORM_MAP[type][value]
+  if (TYPE_TRANSFORM_MAP[type].hasOwnProperty(row)) {
+    return TYPE_TRANSFORM_MAP[type][row]
   } else if (TYPE_TRANSFORM_MAP[type].parse) {
-    return TYPE_TRANSFORM_MAP[type].parse(value)
+    return TYPE_TRANSFORM_MAP[type].parse(row)
   }
 
-  return value
+  return row
 }
 
 /**
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index dfd6154fb7..f0864bff24 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -1773,11 +1773,6 @@ mri@^1.1.0:
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
   integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
 
-nanoid@^3.1.20:
-  version "3.1.20"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
-  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
-
 node-releases@^1.1.60:
   version "1.1.60"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"

From 9aac519351244c384cd19e2501af15dc1035ab09 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Feb 2021 18:00:02 +0000
Subject: [PATCH 49/86] Update form settings to be called Schema and add custom
 schema option

---
 ...wSelect.svelte => DatasourceSelect.svelte} | 19 ++++++++++++++++++-
 ...wFieldSelect.svelte => FieldSelect.svelte} |  0
 .../PropertyControls/MultiFieldSelect.svelte  |  5 +++++
 .../MultiTableViewFieldSelect.svelte          |  5 -----
 .../PropertyControls/SchemaSelect.svelte      |  7 +++++++
 .../PropertiesPanel/SettingsView.svelte       | 14 ++++++++------
 packages/standard-components/manifest.json    |  5 ++---
 7 files changed, 40 insertions(+), 15 deletions(-)
 rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{TableViewSelect.svelte => DatasourceSelect.svelte} (93%)
 rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{TableViewFieldSelect.svelte => FieldSelect.svelte} (100%)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/SchemaSelect.svelte

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte
similarity index 93%
rename from packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte
index a467a954a2..75702b7cdb 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte
@@ -19,6 +19,7 @@
   let drawer
 
   export let value = {}
+  export let otherSources
 
   $: tables = $backendUiStore.tables.map(m => ({
     label: m.name,
@@ -88,7 +89,7 @@
   class="dropdownbutton"
   bind:this={anchorRight}
   on:click={dropdownRight.show}>
-  <span>{value?.label ? value.label : 'Choose option'}</span>
+  <span>{value?.label ?? 'Choose option'}</span>
   <Icon name="arrowdown" />
 </div>
 {#if value?.type === 'query'}
@@ -175,6 +176,22 @@
         </li>
       {/each}
     </ul>
+
+    {#if otherSources?.length}
+      <hr />
+      <div class="title">
+        <Heading extraSmall>Other</Heading>
+      </div>
+      <ul>
+        {#each otherSources as source}
+          <li
+            class:selected={value === source}
+            on:click={() => handleSelected(source)}>
+            {source.label}
+          </li>
+        {/each}
+      </ul>
+    {/if}
   </div>
 </DropdownMenu>
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
similarity index 100%
rename from packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewFieldSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
new file mode 100644
index 0000000000..a735cc5f18
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import FieldSelect from "./FieldSelect.svelte"
+</script>
+
+<FieldSelect {...$$props} multiselect />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte
deleted file mode 100644
index 7d2f17a02b..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import TableViewFieldSelect from "./TableViewFieldSelect.svelte"
-</script>
-
-<TableViewFieldSelect {...$$props} multiselect />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/SchemaSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/SchemaSelect.svelte
new file mode 100644
index 0000000000..d1890f883f
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/SchemaSelect.svelte
@@ -0,0 +1,7 @@
+<script>
+  import DatasourceSelect from "./DatasourceSelect.svelte"
+
+  const otherSources = [{ name: "Custom", label: "Custom" }]
+</script>
+
+<DatasourceSelect on:change {...$$props} {otherSources} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index c3577e3259..430e622c4f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -11,11 +11,12 @@
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
   import OptionSelect from "./PropertyControls/OptionSelect.svelte"
-  import MultiTableViewFieldSelect from "./PropertyControls/MultiTableViewFieldSelect.svelte"
   import Checkbox from "./PropertyControls/Checkbox.svelte"
   import TableSelect from "./PropertyControls/TableSelect.svelte"
-  import TableViewSelect from "./PropertyControls/TableViewSelect.svelte"
-  import TableViewFieldSelect from "./PropertyControls/TableViewFieldSelect.svelte"
+  import DatasourceSelect from "./PropertyControls/DatasourceSelect.svelte"
+  import FieldSelect from "./PropertyControls/FieldSelect.svelte"
+  import MultiFieldSelect from "./PropertyControls/MultiFieldSelect.svelte"
+  import SchemaSelect from "./PropertyControls/SchemaSelect.svelte"
   import EventsEditor from "./PropertyControls/EventsEditor"
   import ScreenSelect from "./PropertyControls/ScreenSelect.svelte"
   import DetailScreenSelect from "./PropertyControls/DetailScreenSelect.svelte"
@@ -60,7 +61,7 @@
   const controlMap = {
     text: Input,
     select: OptionSelect,
-    datasource: TableViewSelect,
+    datasource: DatasourceSelect,
     screen: ScreenSelect,
     detailScreen: DetailScreenSelect,
     boolean: Checkbox,
@@ -69,8 +70,9 @@
     table: TableSelect,
     color: ColorPicker,
     icon: IconSelect,
-    field: TableViewFieldSelect,
-    multifield: MultiTableViewFieldSelect,
+    field: FieldSelect,
+    multifield: MultiFieldSelect,
+    schema: SchemaSelect,
     "field/string": StringFieldSelect,
     "field/number": NumberFieldSelect,
     "field/options": OptionsFieldSelect,
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 624fcd5829..a57acf0114 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1045,12 +1045,11 @@
     "styleable": true,
     "hasChildren": true,
     "dataProvider": true,
-    "datasourceSetting": "datasource",
     "actions": ["ValidateForm"],
     "settings": [
       {
-        "type": "datasource",
-        "label": "Data",
+        "type": "schema",
+        "label": "Schema",
         "key": "datasource"
       },
       {

From 89624409017f913b3f38dec6ffc5c6b81da2e380 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Feb 2021 18:00:16 +0000
Subject: [PATCH 50/86] Fix ID's not being made unique when copying components

---
 packages/builder/src/builderStore/store/frontend.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 340e2829aa..64fefbcd10 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -416,7 +416,14 @@ export const getFrontendStore = () => {
           if (cut) {
             state.componentToPaste = null
           } else {
-            componentToPaste._id = uuid()
+            const randomizeIds = component => {
+              if (!component) {
+                return
+              }
+              component._id = uuid()
+              component.children?.forEach(randomizeIds)
+            }
+            randomizeIds(componentToPaste)
           }
 
           if (mode === "inside") {

From 02d53cad5a1fef3e2e14986871ab4eb8cb4c1dce Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Feb 2021 18:05:05 +0000
Subject: [PATCH 51/86] Fix typo

---
 packages/builder/src/builderStore/store/frontend.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 64fefbcd10..27427c6ef0 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -421,7 +421,7 @@ export const getFrontendStore = () => {
                 return
               }
               component._id = uuid()
-              component.children?.forEach(randomizeIds)
+              component._children?.forEach(randomizeIds)
             }
             randomizeIds(componentToPaste)
           }

From 1185756622b1828c85457bbbfca30318998dcae5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Feb 2021 18:11:56 +0000
Subject: [PATCH 52/86] Fix forms not providing correct datasource object

---
 packages/builder/src/builderStore/dataBinding.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 838bfc3fce..c57099fe1c 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -69,8 +69,9 @@ export const getDatasourceForProvider = component => {
   }
 
   // Extract datasource from component instance
+  const validSettingTypes = ["datasource", "table", "schema"]
   const datasourceSetting = def.settings.find(setting => {
-    return setting.type === "datasource" || setting.type === "table"
+    return validSettingTypes.includes(setting.type)
   })
   if (!datasourceSetting) {
     return null
@@ -80,15 +81,14 @@ export const getDatasourceForProvider = component => {
   // example an actual datasource object, or a table ID string.
   // Convert the datasource setting into a proper datasource object so that
   // we can use it properly
-  if (datasourceSetting.type === "datasource") {
-    return component[datasourceSetting?.key]
-  } else if (datasourceSetting.type === "table") {
+  if (datasourceSetting.type === "table") {
     return {
       tableId: component[datasourceSetting?.key],
       type: "table",
     }
+  } else {
+    return component[datasourceSetting?.key]
   }
-  return null
 }
 
 /**

From 5244ce1a62cd2b88bf71edd71b3b487545916a43 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Feb 2021 19:18:32 +0000
Subject: [PATCH 53/86] Fix delete row action

---
 .../EventsEditor/actions/DeleteRow.svelte           | 11 +++++------
 packages/client/src/utils/buttonActions.js          | 13 ++-----------
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
index e61fadd57b..287f76d9e3 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
@@ -15,8 +15,9 @@
   )
   $: {
     // Automatically set rev and table ID based on row ID
-    if (parameters.rowId) {
-      parameters.revId = parameters.rowId.replace("_id", "_rev")
+    if (parameters.providerId) {
+      parameters.rowId = `{{ ${parameters.providerId}._id }}`
+      parameters.revId = `{{ ${parameters.providerId}._rev }}`
       const providerComponent = dataProviderComponents.find(
         provider => provider._id === parameters.providerId
       )
@@ -37,12 +38,10 @@
     </div>
   {:else}
     <Label size="m" color="dark">Datasource</Label>
-    <Select secondary bind:value={parameters.rowId}>
+    <Select secondary bind:value={parameters.providerId}>
       <option value="" />
       {#each dataProviderComponents as provider}
-        <option value={`{{ ${provider._id}._id }}`}>
-          {provider._instanceName}
-        </option>
+        <option value={provider._id}>{provider._instanceName}</option>
       {/each}
     </Select>
   {/if}
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index ba91f44f75..f252a724d7 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -17,19 +17,10 @@ const saveRowHandler = async (action, context) => {
   }
 }
 
-const deleteRowHandler = async (action, context) => {
+const deleteRowHandler = async action => {
   const { tableId, revId, rowId } = action.parameters
   if (tableId && revId && rowId) {
-    const [enrichTable, enrichRow, enrichRev] = await Promise.all([
-      enrichDataBinding(tableId, context),
-      enrichDataBinding(rowId, context),
-      enrichDataBinding(revId, context),
-    ])
-    await deleteRow({
-      tableId: enrichTable,
-      rowId: enrichRow,
-      revId: enrichRev,
-    })
+    await deleteRow({ tableId, rowId, revId })
   }
 }
 

From 2c465bb922e35b8b0894949ef81cb5b6e930a69c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 10:26:24 +0000
Subject: [PATCH 54/86] Allow form fields to have custom names

---
 .../PropertyControls/FormFieldSelect.svelte   | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
index 2c6119eb00..0e72cc4665 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import OptionSelect from "./OptionSelect.svelte"
+  import { DataList } from "@budibase/bbui"
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
@@ -18,7 +18,7 @@
     component => component._component === "@budibase/standard-components/form"
   )
   $: datasource = getDatasourceForProvider(form)
-  $: schema = getSchemaForDatasource(datasource).schema
+  $: schema = getSchemaForDatasource(datasource, true).schema
   $: options = getOptions(schema, type)
 
   const getOptions = (schema, fieldType) => {
@@ -28,6 +28,32 @@
     }
     return entries.map(entry => entry[0])
   }
+
+  const handleBlur = () => onChange(value)
 </script>
 
-<OptionSelect {value} {onChange} {options} />
+<div>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
+    <option value="" />
+    {#each options as option}
+      <option value={option}>{option}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>

From 64fb8f709ce78e92d871d2a85db2f2cf36ece6a5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 10:26:38 +0000
Subject: [PATCH 55/86] Fix padding in builder setting icons to be more in line

---
 .../PropertiesPanel/PropertyControls/PropertyControl.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 6f78484339..353a69d509 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -138,7 +138,7 @@
     align-items: center;
     display: flex;
     box-sizing: border-box;
-    padding-left: var(--spacing-xs);
+    padding-left: 7px;
     border-left: 1px solid var(--grey-4);
     background-color: var(--grey-2);
     border-top-right-radius: var(--border-radius-m);

From 1fb4203b3a5665c6778d271b57166c32b59a7a57 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 10:53:25 +0000
Subject: [PATCH 56/86] Adding validation to forms to ensure custom fields
 can't be the wrong type

---
 .../src/forms/AttachmentField.svelte                 | 12 +++++++++---
 .../src/forms/BooleanField.svelte                    |  8 ++++----
 .../src/forms/DateTimeField.svelte                   |  6 +++---
 .../src/forms/{SpectrumField.svelte => Field.svelte} |  5 +++++
 .../src/forms/LongFormField.svelte                   | 12 +++++++++---
 .../src/forms/OptionsField.svelte                    | 12 +++++++++---
 .../src/forms/RelationshipField.svelte               |  7 ++++---
 .../standard-components/src/forms/StringField.svelte | 12 ++++++++----
 8 files changed, 51 insertions(+), 23 deletions(-)
 rename packages/standard-components/src/forms/{SpectrumField.svelte => Field.svelte} (91%)

diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte
index eebcc65f97..6cf16c109e 100644
--- a/packages/standard-components/src/forms/AttachmentField.svelte
+++ b/packages/standard-components/src/forms/AttachmentField.svelte
@@ -1,5 +1,5 @@
 <script>
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
   import Dropzone from "../attachments/Dropzone.svelte"
   import { onMount } from "svelte"
 
@@ -21,8 +21,14 @@
   })
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi defaultValue={[]}>
+<Field
+  {label}
+  {field}
+  type="attachment"
+  bind:fieldState
+  bind:fieldApi
+  defaultValue={[]}>
   {#if mounted}
     <Dropzone bind:files={value} />
   {/if}
-</SpectrumField>
+</Field>
diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte
index 279542e612..33360474df 100644
--- a/packages/standard-components/src/forms/BooleanField.svelte
+++ b/packages/standard-components/src/forms/BooleanField.svelte
@@ -1,7 +1,6 @@
 <script>
-  import { onMount } from "svelte"
   import "@spectrum-css/checkbox/dist/index-vars.css"
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
 
   export let field
   export let label
@@ -15,9 +14,10 @@
   }
 </script>
 
-<SpectrumField
+<Field
   {label}
   {field}
+  type="boolean"
   bind:fieldState
   bind:fieldApi
   defaultValue={false}>
@@ -48,4 +48,4 @@
       </label>
     </div>
   {/if}
-</SpectrumField>
+</Field>
diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index 4924e5e383..e58c0ae6bb 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -1,6 +1,6 @@
 <script>
   import Flatpickr from "svelte-flatpickr"
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
   import "flatpickr/dist/flatpickr.css"
   import "@spectrum-css/inputgroup/dist/index-vars.css"
 
@@ -53,7 +53,7 @@
   }
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+<Field {label} {field} type="datetime" bind:fieldState bind:fieldApi>
   {#if fieldState}
     <Flatpickr
       bind:flatpickr
@@ -114,7 +114,7 @@
       <div class="overlay" on:mousedown|self={flatpickr?.close} />
     {/if}
   {/if}
-</SpectrumField>
+</Field>
 
 <style>
   .spectrum-Textfield-input {
diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/Field.svelte
similarity index 91%
rename from packages/standard-components/src/forms/SpectrumField.svelte
rename to packages/standard-components/src/forms/Field.svelte
index d910e5ee46..9b7339e97e 100644
--- a/packages/standard-components/src/forms/SpectrumField.svelte
+++ b/packages/standard-components/src/forms/Field.svelte
@@ -9,6 +9,7 @@
   export let fieldApi
   export let fieldSchema
   export let defaultValue
+  export let type
 
   // Get contexts
   const formContext = getContext("form")
@@ -45,6 +46,10 @@
         <Placeholder>
           Add the Field setting to start using your component
         </Placeholder>
+      {:else if fieldSchema?.type && fieldSchema?.type !== type}
+        <Placeholder>
+          This Field setting is the wrong data type for this component
+        </Placeholder>
       {:else}
         <slot />
         {#if $fieldState.error}
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index 81038c0355..2d6f72874f 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { RichText } from "@budibase/bbui"
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
 
   export let field
   export let label
@@ -38,13 +38,19 @@
   }
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi defaultValue="">
+<Field
+  {label}
+  {field}
+  type="longform"
+  bind:fieldState
+  bind:fieldApi
+  defaultValue="">
   {#if mounted}
     <div>
       <RichText bind:value {options} />
     </div>
   {/if}
-</SpectrumField>
+</Field>
 
 <style>
   div {
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index af719191b2..48feb77b54 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -1,5 +1,5 @@
 <script>
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
   import Picker from "./Picker.svelte"
 
   export let field
@@ -23,7 +23,13 @@
   }
 </script>
 
-<SpectrumField {field} {label} bind:fieldState bind:fieldApi bind:fieldSchema>
+<Field
+  {field}
+  {label}
+  type="options"
+  bind:fieldState
+  bind:fieldApi
+  bind:fieldSchema>
   {#if fieldState}
     <Picker
       bind:open
@@ -35,4 +41,4 @@
       isOptionSelected={option => option === $fieldState.value}
       onSelectOption={selectOption} />
   {/if}
-</SpectrumField>
+</Field>
diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
index 84842a02c3..f09595606f 100644
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
   import Picker from "./Picker.svelte"
 
   const { API } = getContext("sdk")
@@ -62,9 +62,10 @@
   }
 </script>
 
-<SpectrumField
+<Field
   {label}
   {field}
+  type="link"
   bind:fieldState
   bind:fieldApi
   bind:fieldSchema
@@ -77,4 +78,4 @@
     onSelectOption={toggleOption}
     getOptionLabel={getDisplayName}
     getOptionValue={option => option._id} />
-</SpectrumField>
+</Field>
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index dbf5ace61c..65693418b1 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -1,7 +1,6 @@
 <script>
-  import { onMount } from "svelte"
   import "@spectrum-css/textfield/dist/index-vars.css"
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
 
   export let field
   export let label
@@ -31,7 +30,12 @@
   }
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+<Field
+  {label}
+  {field}
+  type={type === 'number' ? 'number' : 'string'}
+  bind:fieldState
+  bind:fieldApi>
   {#if fieldState}
     <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
       {#if !$fieldState.valid}
@@ -53,4 +57,4 @@
         class="spectrum-Textfield-input" />
     </div>
   {/if}
-</SpectrumField>
+</Field>

From 5846e2ef7c982d3ea775a336a5ea36cee8626614 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 11:44:33 +0000
Subject: [PATCH 57/86] Change how client provides the current user so that the
 whole app is actually wrapped in a provider which provides the current user

---
 .../client/src/components/ClientApp.svelte    |  7 +++--
 .../client/src/components/Component.svelte    |  8 +++---
 .../client/src/components/Provider.svelte     | 10 +++----
 packages/client/src/store/context.js          | 26 ++++++++++---------
 packages/client/src/utils/componentProps.js   |  3 +--
 5 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index cad74a3e63..e204209526 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -3,6 +3,7 @@
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
   import NotificationDisplay from "./NotificationDisplay.svelte"
+  import Provider from "./Provider.svelte"
   import SDK from "../sdk"
   import {
     createContextStore,
@@ -27,6 +28,8 @@
 </script>
 
 {#if loaded && $screenStore.activeLayout}
-  <Component definition={$screenStore.activeLayout.props} />
-  <NotificationDisplay />
+  <Provider key="user" data={$authStore}>
+    <Component definition={$screenStore.activeLayout.props} />
+    <NotificationDisplay />
+  </Provider>
 {/if}
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a9d80a3c5f..6980313312 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -4,7 +4,7 @@
   import * as ComponentLibrary from "@budibase/standard-components"
   import Router from "./Router.svelte"
   import { enrichProps, propsAreSame } from "../utils/componentProps"
-  import { authStore, builderStore } from "../store"
+  import { builderStore } from "../store"
   import { hashString } from "../utils/hash"
 
   export let definition = {}
@@ -32,7 +32,7 @@
   $: constructor = getComponentConstructor(definition._component)
   $: children = definition._children || []
   $: id = definition._id
-  $: updateComponentProps(definition, $context, $authStore)
+  $: updateComponentProps(definition, $context)
   $: styles = definition._styles
 
   // Update component context
@@ -53,13 +53,13 @@
   }
 
   // Enriches any string component props using handlebars
-  const updateComponentProps = async (definition, context, user) => {
+  const updateComponentProps = async (definition, context) => {
     // Record the timestamp so we can reference it after enrichment
     latestUpdateTime = Date.now()
     const enrichmentTime = latestUpdateTime
 
     // Enrich props with context
-    const enrichedProps = await enrichProps(definition, context, user)
+    const enrichedProps = await enrichProps(definition, context)
 
     // Abandon this update if a newer update has started
     if (enrichmentTime !== latestUpdateTime) {
diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte
index f1349796eb..13dd70667b 100644
--- a/packages/client/src/components/Provider.svelte
+++ b/packages/client/src/components/Provider.svelte
@@ -4,24 +4,22 @@
 
   export let data
   export let actions
+  export let key
 
   // Clone and create new data context for this component tree
   const context = getContext("context")
   const component = getContext("component")
   const newContext = createContextStore($context)
   setContext("context", newContext)
+  $: providerKey = key || $component.id
 
   // Add data context
-  $: {
-    if (data !== undefined) {
-      newContext.actions.provideData($component.id, data)
-    }
-  }
+  $: newContext.actions.provideData(providerKey, data)
 
   // Add actions context
   $: {
     actions?.forEach(({ type, callback }) => {
-      newContext.actions.provideAction($component.id, type, callback)
+      newContext.actions.provideAction(providerKey, type, callback)
     })
   }
 </script>
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
index 63aaee3b14..5092161037 100644
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@@ -4,26 +4,28 @@ export const createContextStore = existingContext => {
   const store = writable({ ...existingContext })
 
   // Adds a data context layer to the tree
-  const provideData = (componentId, data) => {
+  const provideData = (key, data) => {
+    if (!key) {
+      return
+    }
     store.update(state => {
-      if (componentId) {
-        state[componentId] = data
+      state[key] = data
 
-        // Keep track of the closest component ID so we can later hydrate a "data" prop.
-        // This is only required for legacy bindings that used "data" rather than a
-        // component ID.
-        state.closestComponentId = componentId
-      }
+      // Keep track of the closest component ID so we can later hydrate a "data" prop.
+      // This is only required for legacy bindings that used "data" rather than a
+      // component ID.
+      state.closestComponentId = key
       return state
     })
   }
 
   // Adds an action context layer to the tree
-  const provideAction = (componentId, actionType, callback) => {
+  const provideAction = (key, actionType, callback) => {
+    if (!key || !actionType) {
+      return
+    }
     store.update(state => {
-      if (actionType && componentId) {
-        state[`${componentId}_${actionType}`] = callback
-      }
+      state[`${key}_${actionType}`] = callback
       return state
     })
   }
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 42bb6e624a..18a894beaa 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -21,7 +21,7 @@ export const propsAreSame = (a, b) => {
  * Enriches component props.
  * Data bindings are enriched, and button actions are enriched.
  */
-export const enrichProps = async (props, context, user) => {
+export const enrichProps = async (props, context) => {
   // Exclude all private props that start with an underscore
   let validProps = {}
   Object.entries(props)
@@ -34,7 +34,6 @@ export const enrichProps = async (props, context, user) => {
   // Duplicate the closest context as "data" which the builder requires
   const totalContext = {
     ...context,
-    user,
 
     // This is only required for legacy bindings that used "data" rather than a
     // component ID.

From 185f4ec468811c125ea5c6d1b8cda2d513e61dc0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 11:51:07 +0000
Subject: [PATCH 58/86] Remove unnecessary enrichment from button action calls

---
 packages/client/src/utils/buttonActions.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index f252a724d7..b769b688d6 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -1,5 +1,4 @@
 import { get } from "svelte/store"
-import { enrichDataBinding, enrichDataBindings } from "./enrichDataBinding"
 import { routeStore, builderStore } from "../store"
 import { saveRow, deleteRow, executeQuery, triggerAutomation } from "../api"
 import { ActionTypes } from "../constants"
@@ -10,7 +9,7 @@ const saveRowHandler = async (action, context) => {
     let draft = context[providerId]
     if (fields) {
       for (let [key, entry] of Object.entries(fields)) {
-        draft[key] = await enrichDataBinding(entry.value, context)
+        draft[key] = entry.value
       }
     }
     await saveRow(draft)
@@ -24,12 +23,12 @@ const deleteRowHandler = async action => {
   }
 }
 
-const triggerAutomationHandler = async (action, context) => {
+const triggerAutomationHandler = async action => {
   const { fields } = action.parameters
   if (fields) {
     const params = {}
     for (let field in fields) {
-      params[field] = await enrichDataBinding(fields[field].value, context)
+      params[field] = fields[field].value
     }
     await triggerAutomation(action.parameters.automationId, params)
   }

From af74e6a5922d36b4e09a637271f1474ed74523df Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 11:55:53 +0000
Subject: [PATCH 59/86] Fix row detail autoscreen not having correct delete row
 definition

---
 .../src/builderStore/store/screenTemplates/rowDetailScreen.js    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 1d60cb63be..783bcf40aa 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -59,6 +59,7 @@ function generateTitleContainer(table, title, formId) {
       onClick: [
         {
           parameters: {
+            providerId: formId,
             rowId: `{{ ${makePropSafe(formId)}._id }}`,
             revId: `{{ ${makePropSafe(formId)}._rev }}`,
             tableId: table._id,

From 6bdde675a20747980afb35479e1948d642ec08a5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 12:54:36 +0000
Subject: [PATCH 60/86] Add button action to refresh a datasource

---
 .../actions/RefreshDatasource.svelte          | 37 +++++++++++++++
 .../EventsEditor/actions/index.js             |  5 ++
 .../client/src/components/Provider.svelte     |  2 +-
 packages/client/src/constants.js              |  1 +
 packages/client/src/utils/buttonActions.js    | 22 +++++++--
 packages/standard-components/manifest.json    |  1 +
 packages/standard-components/src/List.svelte  | 47 ++++++++++++-------
 7 files changed, 93 insertions(+), 22 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte
new file mode 100644
index 0000000000..c052a9588f
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { getDataProviderComponents } from "builderStore/dataBinding"
+
+  export let parameters
+
+  $: dataProviders = getDataProviderComponents(
+    $currentAsset.props,
+    $store.selectedComponentId
+  )
+</script>
+
+<div class="root">
+  <Label size="m" color="dark">Form</Label>
+  <Select secondary bind:value={parameters.componentId}>
+    <option value="" />
+    {#if dataProviders}
+      {#each dataProviders as component}
+        <option value={component._id}>{component._instanceName}</option>
+      {/each}
+    {/if}
+  </Select>
+</div>
+
+<style>
+  .root {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }
+
+  .root :global(> div) {
+    flex: 1;
+    margin-left: var(--spacing-l);
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index e851bdb4be..b267b8ab3e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -4,6 +4,7 @@ import DeleteRow from "./DeleteRow.svelte"
 import ExecuteQuery from "./ExecuteQuery.svelte"
 import TriggerAutomation from "./TriggerAutomation.svelte"
 import ValidateForm from "./ValidateForm.svelte"
+import RefreshDatasource from "./RefreshDatasource.svelte"
 
 // defines what actions are available, when adding a new one
 // the component is the setup panel for the action
@@ -35,4 +36,8 @@ export default [
     name: "Validate Form",
     component: ValidateForm,
   },
+  {
+    name: "Refresh Datasource",
+    component: RefreshDatasource,
+  },
 ]
diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte
index 13dd70667b..8c50eeeb01 100644
--- a/packages/client/src/components/Provider.svelte
+++ b/packages/client/src/components/Provider.svelte
@@ -14,7 +14,7 @@
   $: providerKey = key || $component.id
 
   // Add data context
-  $: newContext.actions.provideData(providerKey, data)
+  $: data !== undefined && newContext.actions.provideData(providerKey, data)
 
   // Add actions context
   $: {
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index effb8f2449..3aa302bec9 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -4,4 +4,5 @@ export const TableNames = {
 
 export const ActionTypes = {
   ValidateForm: "ValidateForm",
+  RefreshDatasource: "RefreshDatasource",
 }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index b769b688d6..f96d18269d 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -50,14 +50,29 @@ const queryExecutionHandler = async action => {
   })
 }
 
-const validateFormHandler = async (action, context) => {
-  const { componentId } = action.parameters
-  const fn = context[`${componentId}_${ActionTypes.ValidateForm}`]
+const executeActionHandler = async (context, componentId, actionType) => {
+  const fn = context[`${componentId}_${actionType}`]
   if (fn) {
     return await fn()
   }
 }
 
+const validateFormHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.ValidateForm
+  )
+}
+
+const refreshDatasourceHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.RefreshDatasource
+  )
+}
+
 const handlerMap = {
   ["Save Row"]: saveRowHandler,
   ["Delete Row"]: deleteRowHandler,
@@ -65,6 +80,7 @@ const handlerMap = {
   ["Execute Query"]: queryExecutionHandler,
   ["Trigger Automation"]: triggerAutomationHandler,
   ["Validate Form"]: validateFormHandler,
+  ["Refresh Datasource"]: refreshDatasourceHandler,
 }
 
 /**
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index a57acf0114..5694e3c5b3 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -106,6 +106,7 @@
     "styleable": true,
     "hasChildren": true,
     "dataProvider": true,
+    "actions": ["RefreshDatasource"],
     "settings": [
       {
         "type": "datasource",
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 0c09e0b884..4ba10cc28c 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -2,7 +2,9 @@
   import { getContext } from "svelte"
   import { isEmpty } from "lodash/fp"
 
-  const { API, styleable, Provider, builderStore } = getContext("sdk")
+  const { API, styleable, Provider, builderStore, ActionTypes } = getContext(
+    "sdk"
+  )
   const component = getContext("component")
 
   export let datasource = []
@@ -18,25 +20,34 @@
     }
     loaded = true
   }
+
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => fetchData(datasource),
+    },
+  ]
 </script>
 
-{#if rows.length > 0}
-  <div use:styleable={$component.styles}>
-    {#if $component.children === 0 && $builderStore.inBuilder}
-      <p>Add some components too</p>
-    {:else}
-      {#each rows as row}
-        <Provider data={row}>
-          <slot />
-        </Provider>
-      {/each}
-    {/if}
-  </div>
-{:else if loaded && $builderStore.inBuilder}
-  <div use:styleable={$component.styles}>
-    <p>Feed me some data</p>
-  </div>
-{/if}
+<Provider {actions}>
+  {#if rows.length > 0}
+    <div use:styleable={$component.styles}>
+      {#if $component.children === 0 && $builderStore.inBuilder}
+        <p>Add some components too</p>
+      {:else}
+        {#each rows as row}
+          <Provider data={row}>
+            <slot />
+          </Provider>
+        {/each}
+      {/if}
+    </div>
+  {:else if loaded && $builderStore.inBuilder}
+    <div use:styleable={$component.styles}>
+      <p>Feed me some data</p>
+    </div>
+  {/if}
+</Provider>
 
 <style>
   p {

From 5adc1443300d98bc635bb58a9ac31f6b49d1ba80 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 13:48:26 +0000
Subject: [PATCH 61/86] Key property group components so that they fully
 remount on component change

---
 .../PropertiesPanel/PropertyControls/PropertyGroup.svelte       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
index 9d0bb4a40d..b04954c06f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
@@ -25,7 +25,7 @@
 <DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
   {#if open}
     <div>
-      {#each properties as prop}
+      {#each properties as prop (`${componentInstance._id}-${prop.key}`)}
         <PropertyControl
           bindable={false}
           label={`${prop.label}${hasPropChanged(style, prop) ? ' *' : ''}`}

From c0555745e1594a1b527299202f4f58c3a6c67f5c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 16:16:41 +0000
Subject: [PATCH 62/86] Automatically refresh data when related data changes

---
 packages/client/src/api/rows.js               | 33 +++++++-
 .../client/src/components/Provider.svelte     | 37 +++++++--
 packages/client/src/store/context.js          | 14 ++--
 packages/client/src/store/datasource.js       | 80 +++++++++++++++++++
 packages/client/src/store/index.js            |  1 +
 packages/standard-components/src/List.svelte  | 19 +++--
 6 files changed, 161 insertions(+), 23 deletions(-)
 create mode 100644 packages/client/src/store/datasource.js

diff --git a/packages/client/src/api/rows.js b/packages/client/src/api/rows.js
index 6930105d78..e6dc8879fa 100644
--- a/packages/client/src/api/rows.js
+++ b/packages/client/src/api/rows.js
@@ -1,4 +1,4 @@
-import { notificationStore } from "../store/notification"
+import { notificationStore, datasourceStore } from "../store"
 import API from "./api"
 import { fetchTableDefinition } from "./tables"
 
@@ -6,6 +6,9 @@ import { fetchTableDefinition } from "./tables"
  * Fetches data about a certain row in a table.
  */
 export const fetchRow = async ({ tableId, rowId }) => {
+  if (!tableId || !rowId) {
+    return
+  }
   const row = await API.get({
     url: `/api/${tableId}/rows/${rowId}`,
   })
@@ -16,6 +19,9 @@ export const fetchRow = async ({ tableId, rowId }) => {
  * Creates a row in a table.
  */
 export const saveRow = async row => {
+  if (!row?.tableId) {
+    return
+  }
   const res = await API.post({
     url: `/api/${row.tableId}/rows`,
     body: row,
@@ -23,6 +29,10 @@ export const saveRow = async row => {
   res.error
     ? notificationStore.danger("An error has occurred")
     : notificationStore.success("Row saved")
+
+  // Refresh related datasources
+  datasourceStore.actions.invalidateDatasource(row.tableId)
+
   return res
 }
 
@@ -30,6 +40,9 @@ export const saveRow = async row => {
  * Updates a row in a table.
  */
 export const updateRow = async row => {
+  if (!row?.tableId || !row?._id) {
+    return
+  }
   const res = await API.patch({
     url: `/api/${row.tableId}/rows/${row._id}`,
     body: row,
@@ -37,6 +50,10 @@ export const updateRow = async row => {
   res.error
     ? notificationStore.danger("An error has occurred")
     : notificationStore.success("Row updated")
+
+  // Refresh related datasources
+  datasourceStore.actions.invalidateDatasource(row.tableId)
+
   return res
 }
 
@@ -44,12 +61,19 @@ export const updateRow = async row => {
  * Deletes a row from a table.
  */
 export const deleteRow = async ({ tableId, rowId, revId }) => {
+  if (!tableId || !rowId || !revId) {
+    return
+  }
   const res = await API.del({
     url: `/api/${tableId}/rows/${rowId}/${revId}`,
   })
   res.error
     ? notificationStore.danger("An error has occurred")
     : notificationStore.success("Row deleted")
+
+  // Refresh related datasources
+  datasourceStore.actions.invalidateDatasource(tableId)
+
   return res
 }
 
@@ -57,6 +81,9 @@ export const deleteRow = async ({ tableId, rowId, revId }) => {
  * Deletes many rows from a table.
  */
 export const deleteRows = async ({ tableId, rows }) => {
+  if (!tableId || !rows) {
+    return
+  }
   const res = await API.post({
     url: `/api/${tableId}/rows`,
     body: {
@@ -67,6 +94,10 @@ export const deleteRows = async ({ tableId, rows }) => {
   res.error
     ? notificationStore.danger("An error has occurred")
     : notificationStore.success(`${rows.length} row(s) deleted`)
+
+  // Refresh related datasources
+  datasourceStore.actions.invalidateDatasource(tableId)
+
   return res
 }
 
diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte
index 8c50eeeb01..bc95412bab 100644
--- a/packages/client/src/components/Provider.svelte
+++ b/packages/client/src/components/Provider.svelte
@@ -1,6 +1,8 @@
 <script>
-  import { getContext, setContext } from "svelte"
-  import { createContextStore } from "../store"
+  import { getContext, setContext, onMount } from "svelte"
+  import { datasourceStore, createContextStore } from "../store"
+  import { ActionTypes } from "../constants"
+  import { generate } from "shortid"
 
   export let data
   export let actions
@@ -13,15 +15,40 @@
   setContext("context", newContext)
   $: providerKey = key || $component.id
 
+  // Instance ID is unique to each instance of a provider
+  let instanceId
+
   // Add data context
   $: data !== undefined && newContext.actions.provideData(providerKey, data)
 
   // Add actions context
   $: {
-    actions?.forEach(({ type, callback }) => {
-      newContext.actions.provideAction(providerKey, type, callback)
-    })
+    if (instanceId) {
+      actions?.forEach(({ type, callback, metadata }) => {
+        newContext.actions.provideAction(providerKey, type, callback)
+
+        // Register any "refresh datasource" actions with a singleton store
+        // so we can easily refresh data at all levels for any datasource
+        if (type === ActionTypes.RefreshDatasource) {
+          const { datasource } = metadata || {}
+          datasourceStore.actions.registerDatasource(
+            datasource,
+            instanceId,
+            callback
+          )
+        }
+      })
+    }
   }
+
+  onMount(() => {
+    // Generate a permanent unique ID for this component and use it to register
+    // any datasource actions
+    instanceId = generate()
+
+    // Unregister all datasource instances when unmounting this provider
+    return () => datasourceStore.actions.unregisterInstance(instanceId)
+  })
 </script>
 
 <slot />
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
index 5092161037..80777cbeff 100644
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@@ -4,28 +4,28 @@ export const createContextStore = existingContext => {
   const store = writable({ ...existingContext })
 
   // Adds a data context layer to the tree
-  const provideData = (key, data) => {
-    if (!key) {
+  const provideData = (providerId, data) => {
+    if (!providerId) {
       return
     }
     store.update(state => {
-      state[key] = data
+      state[providerId] = data
 
       // Keep track of the closest component ID so we can later hydrate a "data" prop.
       // This is only required for legacy bindings that used "data" rather than a
       // component ID.
-      state.closestComponentId = key
+      state.closestComponentId = providerId
       return state
     })
   }
 
   // Adds an action context layer to the tree
-  const provideAction = (key, actionType, callback) => {
-    if (!key || !actionType) {
+  const provideAction = (providerId, actionType, callback) => {
+    if (!providerId || !actionType) {
       return
     }
     store.update(state => {
-      state[`${key}_${actionType}`] = callback
+      state[`${providerId}_${actionType}`] = callback
       return state
     })
   }
diff --git a/packages/client/src/store/datasource.js b/packages/client/src/store/datasource.js
new file mode 100644
index 0000000000..58fa632c49
--- /dev/null
+++ b/packages/client/src/store/datasource.js
@@ -0,0 +1,80 @@
+import { writable, get } from "svelte/store"
+
+export const createDatasourceStore = () => {
+  const store = writable([])
+
+  // Registers a new datasource instance
+  const registerDatasource = (datasource, instanceId, refresh) => {
+    if (!datasource || !instanceId || !refresh) {
+      return
+    }
+
+    // Create a list of all relevant datasource IDs which would require that
+    // this datasource is refreshed
+    let datasourceIds = []
+
+    // Extract table ID
+    if (datasource.type === "table") {
+      if (datasource.tableId) {
+        datasourceIds.push(datasource.tableId)
+      }
+    }
+
+    // Extract both table IDs from both sides of the relationship
+    else if (datasource.type === "link") {
+      if (datasource.rowTableId) {
+        datasourceIds.push(datasource.rowTableId)
+      }
+      if (datasource.tableId) {
+        datasourceIds.push(datasource.tableId)
+      }
+    }
+
+    // Extract the datasource ID (not the query ID) for queries
+    else if (datasource.type === "query") {
+      if (datasource.datasourceId) {
+        datasourceIds.push(datasource.datasourceId)
+      }
+    }
+
+    // Store configs for each relevant datasource ID
+    if (datasourceIds.length) {
+      store.update(state => {
+        datasourceIds.forEach(id => {
+          state.push({
+            datasourceId: id,
+            instanceId,
+            refresh,
+          })
+        })
+        return state
+      })
+    }
+  }
+
+  // Removes all registered datasource instances belonging to a particular
+  // instance ID
+  const unregisterInstance = instanceId => {
+    store.update(state => {
+      return state.filter(instance => instance.instanceId !== instanceId)
+    })
+  }
+
+  // Invalidates a specific datasource ID by refreshing all instances
+  // which depend on data from that datasource
+  const invalidateDatasource = datasourceId => {
+    const relatedInstances = get(store).filter(instance => {
+      return instance.datasourceId === datasourceId
+    })
+    relatedInstances?.forEach(instance => {
+      instance.refresh()
+    })
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { registerDatasource, unregisterInstance, invalidateDatasource },
+  }
+}
+
+export const datasourceStore = createDatasourceStore()
diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js
index 575c5d98f2..9d08423374 100644
--- a/packages/client/src/store/index.js
+++ b/packages/client/src/store/index.js
@@ -3,6 +3,7 @@ export { notificationStore } from "./notification"
 export { routeStore } from "./routes"
 export { screenStore } from "./screens"
 export { builderStore } from "./builder"
+export { datasourceStore } from "./datasource"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 4ba10cc28c..b117bbdb70 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -2,17 +2,23 @@
   import { getContext } from "svelte"
   import { isEmpty } from "lodash/fp"
 
+  export let datasource = []
+
   const { API, styleable, Provider, builderStore, ActionTypes } = getContext(
     "sdk"
   )
   const component = getContext("component")
-
-  export let datasource = []
-
   let rows = []
   let loaded = false
 
   $: fetchData(datasource)
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => fetchData(datasource),
+      metadata: { datasource },
+    },
+  ]
 
   async function fetchData(datasource) {
     if (!isEmpty(datasource)) {
@@ -20,13 +26,6 @@
     }
     loaded = true
   }
-
-  $: actions = [
-    {
-      type: ActionTypes.RefreshDatasource,
-      callback: () => fetchData(datasource),
-    },
-  ]
 </script>
 
 <Provider {actions}>

From 98b23c999dcbda6ceaf1793f4beca75f852cf17a Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 5 Feb 2021 16:45:23 +0000
Subject: [PATCH 63/86] Update to add readable prop to every 'read' query to
 follow a consistent pattern as well as adding a get endpoint for a single
 query.

---
 packages/server/src/api/controllers/query.js | 28 +++++++++++++++++++-
 packages/server/src/api/routes/query.js      | 16 +++++------
 packages/server/src/constants/index.js       |  6 +++++
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index 66de67e093..00a14a704a 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -2,6 +2,20 @@ const { processString } = require("@budibase/string-templates")
 const CouchDB = require("../../db")
 const { generateQueryID, getQueryParams } = require("../../db/utils")
 const { integrations } = require("../../integrations")
+const { BaseQueryVerbs } = require("../../constants")
+const env = require("../../environment")
+
+// simple function to append "readable" to all read queries
+function enrichQueries(input) {
+  const wasArray = Array.isArray(input)
+  const queries = wasArray ? input : [input]
+  for (let query of queries) {
+    if (query.queryVerb === BaseQueryVerbs.READ) {
+      query.readable = true
+    }
+  }
+  return wasArray ? queries : queries[0]
+}
 
 function formatResponse(resp) {
   if (typeof resp === "string") {
@@ -21,7 +35,7 @@ exports.fetch = async function(ctx) {
       include_docs: true,
     })
   )
-  ctx.body = body.rows.map(row => row.doc)
+  ctx.body = enrichQueries(body.rows.map(row => row.doc))
 }
 
 exports.save = async function(ctx) {
@@ -61,6 +75,18 @@ async function enrichQueryFields(fields, parameters) {
   return enrichedQuery
 }
 
+exports.find = async function(ctx) {
+  const db = new CouchDB(ctx.user.appId)
+  const query = enrichQueries(await db.get(ctx.params.queryId))
+  // remove properties that could be dangerous in real app
+  if (env.CLOUD) {
+    delete query.fields
+    delete query.parameters
+    delete query.schema
+  }
+  ctx.body = query
+}
+
 exports.preview = async function(ctx) {
   const db = new CouchDB(ctx.user.appId)
 
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index 8a84138af5..0238732e57 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -11,13 +11,6 @@ const joiValidator = require("../../middleware/joi-validator")
 
 const router = Router()
 
-const QueryVerb = {
-  Create: "create",
-  Read: "read",
-  Update: "update",
-  Delete: "delete",
-}
-
 function generateQueryValidation() {
   // prettier-ignore
   return joiValidator.body(Joi.object({
@@ -31,7 +24,7 @@ function generateQueryValidation() {
       name: Joi.string(),
       default: Joi.string()
     })),
-    queryVerb: Joi.string().allow(...Object.values(QueryVerb)).required(),
+    queryVerb: Joi.string().allow().required(),
     schema: Joi.object({}).required().unknown(true)
   }))
 }
@@ -40,7 +33,7 @@ function generateQueryPreviewValidation() {
   // prettier-ignore
   return joiValidator.body(Joi.object({
     fields: Joi.object().required(),
-    queryVerb: Joi.string().allow(...Object.values(QueryVerb)).required(),
+    queryVerb: Joi.string().allow().required(),
     datasourceId: Joi.string().required(),
     parameters: Joi.object({}).required().unknown(true)
   }))
@@ -60,6 +53,11 @@ router
     generateQueryPreviewValidation(),
     queryController.preview
   )
+  .get(
+    "/api/queries/:queryId",
+    authorized(PermissionTypes.QUERY, PermissionLevels.READ),
+    queryController.find
+  )
   .post(
     "/api/queries/:queryId",
     authorized(PermissionTypes.QUERY, PermissionLevels.WRITE),
diff --git a/packages/server/src/constants/index.js b/packages/server/src/constants/index.js
index 2e18de98af..9e2c08484a 100644
--- a/packages/server/src/constants/index.js
+++ b/packages/server/src/constants/index.js
@@ -44,3 +44,9 @@ exports.USERS_TABLE_SCHEMA = USERS_TABLE_SCHEMA
 exports.BUILDER_CONFIG_DB = "builder-config-db"
 exports.HOSTING_DOC = "hosting-doc"
 exports.OBJ_STORE_DIRECTORY = "/app-assets/assets"
+exports.BaseQueryVerbs = {
+  CREATE: "create",
+  READ: "read",
+  UPDATE: "update",
+  DELETE: "delete",
+}

From bd1bd8ee2a88436dc6e20693437b8b1b232c8696 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 8 Feb 2021 09:51:20 +0000
Subject: [PATCH 64/86] Add hot reloading of related datasources for external
 queries

---
 packages/client/src/api/queries.js         | 12 +++++++++---
 packages/client/src/utils/buttonActions.js |  1 -
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index 9b213d5c46..9876c85a63 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -1,10 +1,15 @@
-import { notificationStore } from "../store/notification"
+import { notificationStore, datasourceStore } from "../store"
 import API from "./api"
 
 /**
  * Executes a query against an external data connector.
  */
-export const executeQuery = async ({ queryId, parameters, notify = false }) => {
+export const executeQuery = async ({ queryId, parameters }) => {
+  const query = await API.get({ url: `/api/queries/${queryId}` })
+  if (query?.datasourceId == null) {
+    notificationStore.danger("That query couldn't be found")
+    return
+  }
   const res = await API.post({
     url: `/api/queries/${queryId}`,
     body: {
@@ -13,8 +18,9 @@ export const executeQuery = async ({ queryId, parameters, notify = false }) => {
   })
   if (res.error) {
     notificationStore.danger("An error has occurred")
-  } else if (notify) {
+  } else if (!query.readable) {
     notificationStore.success("Query executed successfully")
+    datasourceStore.actions.invalidateDatasource(query.datasourceId)
   }
   return res
 }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index f96d18269d..4791ff8a88 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -46,7 +46,6 @@ const queryExecutionHandler = async action => {
     datasourceId,
     queryId,
     parameters: queryParams,
-    notify: true,
   })
 }
 

From 79351d1bf0b947f044d45b9eb39dfd810261f86f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 8 Feb 2021 10:01:38 +0000
Subject: [PATCH 65/86] Remove empty field in saving row action to make it more
 clear that it's optional

---
 .../PropertyControls/EventsEditor/actions/SaveFields.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
index a27acab956..c8e3d5b4d5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@@ -32,7 +32,7 @@
   // this statement initialises fields from parameters.fields
   $: fields =
     fields ||
-    Object.keys(parameterFields || { "": "" }).map(name => ({
+    Object.keys(parameterFields || {}).map(name => ({
       name,
       value:
         (parameterFields &&

From 592348a5a02ff04b4c469956e8d654f7f90f61f5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 10:49:22 +0000
Subject: [PATCH 66/86] Use real component name in deletion confirmation modal

---
 .../design/NavigationPanel/ComponentDropdownMenu.svelte    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
index a027beab18..750ccef872 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
@@ -13,9 +13,8 @@
   let dropdown
   let anchor
 
-  $: noChildrenAllowed =
-    !component ||
-    !store.actions.components.getDefinition(component._component)?.hasChildren
+  $: definition = store.actions.components.getDefinition(component?._component)
+  $: noChildrenAllowed = !component || !definition?.hasChildren
   $: noPaste = !$store.componentToPaste
 
   const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
@@ -130,7 +129,7 @@
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Deletion"
-  body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`}
+  body={`Are you sure you wish to delete this '${definition?.name}' component?`}
   okText="Delete Component"
   onOk={deleteComponent} />
 

From 2c125bc671b3f899d4f85f7978ff23cbaec77424 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 12:41:21 +0000
Subject: [PATCH 67/86] Ensure client data contexts are correctly updated if a
 parent context is updated

---
 .../client/src/components/Provider.svelte     | 17 +++++--
 packages/client/src/store/context.js          | 21 ++++----
 .../standard-components/src/RowDetail.svelte  | 51 +++++++++++--------
 3 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte
index bc95412bab..3c894f6723 100644
--- a/packages/client/src/components/Provider.svelte
+++ b/packages/client/src/components/Provider.svelte
@@ -11,16 +11,21 @@
   // Clone and create new data context for this component tree
   const context = getContext("context")
   const component = getContext("component")
-  const newContext = createContextStore($context)
+  const newContext = createContextStore()
   setContext("context", newContext)
+
+  let initiated = false
   $: providerKey = key || $component.id
 
+  // Add data context
+  $: {
+    newContext.actions.provideData(providerKey, $context, data)
+    initiated = true
+  }
+
   // Instance ID is unique to each instance of a provider
   let instanceId
 
-  // Add data context
-  $: data !== undefined && newContext.actions.provideData(providerKey, data)
-
   // Add actions context
   $: {
     if (instanceId) {
@@ -51,4 +56,6 @@
   })
 </script>
 
-<slot />
+{#if initiated}
+  <slot />
+{/if}
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
index 80777cbeff..5725f94231 100644
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@@ -1,22 +1,20 @@
 import { writable } from "svelte/store"
 
-export const createContextStore = existingContext => {
-  const store = writable({ ...existingContext })
+export const createContextStore = () => {
+  const store = writable({})
 
   // Adds a data context layer to the tree
-  const provideData = (providerId, data) => {
-    if (!providerId) {
-      return
-    }
-    store.update(state => {
-      state[providerId] = data
+  const provideData = (providerId, context, data) => {
+    let newData = { ...context }
+    if (providerId && data !== undefined) {
+      newData[providerId] = data
 
       // Keep track of the closest component ID so we can later hydrate a "data" prop.
       // This is only required for legacy bindings that used "data" rather than a
       // component ID.
-      state.closestComponentId = providerId
-      return state
-    })
+      newData.closestComponentId = providerId
+    }
+    store.set(newData)
   }
 
   // Adds an action context layer to the tree
@@ -32,7 +30,6 @@ export const createContextStore = existingContext => {
 
   return {
     subscribe: store.subscribe,
-    update: store.update,
     actions: { provideData, provideAction },
   }
 }
diff --git a/packages/standard-components/src/RowDetail.svelte b/packages/standard-components/src/RowDetail.svelte
index ed46fd6927..8a413dfb43 100644
--- a/packages/standard-components/src/RowDetail.svelte
+++ b/packages/standard-components/src/RowDetail.svelte
@@ -1,46 +1,57 @@
 <script>
   import { onMount, getContext } from "svelte"
 
-  const { API, screenStore, routeStore, Provider, styleable } = getContext(
-    "sdk"
-  )
-  const component = getContext("component")
-
   export let table
 
+  const {
+    API,
+    screenStore,
+    routeStore,
+    Provider,
+    styleable,
+    ActionTypes,
+  } = getContext("sdk")
+  const component = getContext("component")
   let headers = []
   let row
 
-  async function fetchFirstRow() {
-    const rows = await API.fetchTableData(table)
-    return Array.isArray(rows) && rows.length ? rows[0] : { tableId: table }
+  const fetchFirstRow = async tableId => {
+    const rows = await API.fetchTableData(tableId)
+    return Array.isArray(rows) && rows.length ? rows[0] : { tableId }
   }
 
-  async function fetchData() {
-    if (!table) {
+  const fetchData = async (rowId, tableId) => {
+    if (!tableId) {
       return
     }
 
     const pathParts = window.location.pathname.split("/")
-    const routeParamId = $routeStore.routeParams.id
 
     // if srcdoc, then we assume this is the builder preview
-    if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && table) {
-      row = await fetchFirstRow()
-    } else if (routeParamId) {
-      row = await API.fetchRow({ tableId: table, rowId: routeParamId })
+    if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && tableId) {
+      row = await fetchFirstRow(tableId)
+    } else if (rowId) {
+      row = await API.fetchRow({ tableId, rowId })
     } else {
       throw new Error("Row ID was not supplied to RowDetail")
     }
   }
 
-  onMount(fetchData)
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => fetchData($routeStore.routeParams.id, table),
+      metadata: { datasource: { type: "table", tableId: table } },
+    },
+  ]
+
+  onMount(() => fetchData($routeStore.routeParams.id, table))
 </script>
 
 {#if row}
-  <div use:styleable={$component.styles}>
-    <Provider data={row}>
+  <Provider data={row} {actions}>
+    <div use:styleable={$component.styles}>
       <slot />
-    </Provider>
-  </div>
+    </div>
+  </Provider>
 {/if}

From 726ade0ebe05ade360be9360fde77fdc2f44f826 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 12:43:33 +0000
Subject: [PATCH 68/86] Update BBUI version

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

diff --git a/packages/builder/package.json b/packages/builder/package.json
index bd76d10ee1..09fd4dac48 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.58.2",
+    "@budibase/bbui": "^1.58.3",
     "@budibase/client": "^0.7.6",
     "@budibase/colorpicker": "1.0.1",
     "@budibase/string-templates": "^0.7.6",
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 9946326ed4..648ebf1155 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.58.2":
-  version "1.58.2"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.2.tgz#1b9a5b1bf20597c1ea85ebba69acfec01ef6edce"
-  integrity sha512-Gn4yCNpoVhtVhRDuWEYdaBK/oAfccTvehywgbyH4sHKaY7aQ7v0679nsJsOHBjNPleKy5YN3ZLhneh5k3F1O2Q==
+"@budibase/bbui@^1.58.3":
+  version "1.58.3"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.3.tgz#86ad6aa68eec7426e1ccdf1f7e7fc957cb57d3a3"
+  integrity sha512-PpbxfBhVpmP0EO1nPBhrz486EHCIgtJlXELC/ElzjG+FCQZSCvDSM7mq/97FOW35iYdTiQTlwFgOtvOgT1P8IQ==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 44db22348d..81101efd3a 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -40,7 +40,7 @@
   "gitHead": "1a80b09fd093f2599a68f7db72ad639dd50922dd",
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.1.0",
-    "@budibase/bbui": "^1.55.1",
+    "@budibase/bbui": "^1.58.3",
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@spectrum-css/actionbutton": "^1.0.0-beta.1",
     "@spectrum-css/button": "^3.0.0-beta.6",
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index f0864bff24..5c8703c996 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -44,10 +44,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.55.1":
-  version "1.56.2"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.56.2.tgz#bb8f7d9b9b5ed06a22df877fbe028780d7602471"
-  integrity sha512-cWYkT1FNwNGTjisxtC5/MlQ1zeu7MYbMJsD6UyCEW3Ku6JIQZ6jyOkV6HKrmNND8VzVfddEGpzR37q+NoDpDFQ==
+"@budibase/bbui@^1.58.3":
+  version "1.58.3"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.3.tgz#86ad6aa68eec7426e1ccdf1f7e7fc957cb57d3a3"
+  integrity sha512-PpbxfBhVpmP0EO1nPBhrz486EHCIgtJlXELC/ElzjG+FCQZSCvDSM7mq/97FOW35iYdTiQTlwFgOtvOgT1P8IQ==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

From ae3a4aefbf4625a8d5cbc899a2a0d691acc485cc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 12:57:01 +0000
Subject: [PATCH 69/86] Update BBUI version

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

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 09fd4dac48..bc1abf3ff1 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.58.3",
+    "@budibase/bbui": "^1.58.4",
     "@budibase/client": "^0.7.6",
     "@budibase/colorpicker": "1.0.1",
     "@budibase/string-templates": "^0.7.6",
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 648ebf1155..93044268ba 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.58.3":
-  version "1.58.3"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.3.tgz#86ad6aa68eec7426e1ccdf1f7e7fc957cb57d3a3"
-  integrity sha512-PpbxfBhVpmP0EO1nPBhrz486EHCIgtJlXELC/ElzjG+FCQZSCvDSM7mq/97FOW35iYdTiQTlwFgOtvOgT1P8IQ==
+"@budibase/bbui@^1.58.4":
+  version "1.58.4"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
+  integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 81101efd3a..ec179f934a 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -40,7 +40,7 @@
   "gitHead": "1a80b09fd093f2599a68f7db72ad639dd50922dd",
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.1.0",
-    "@budibase/bbui": "^1.58.3",
+    "@budibase/bbui": "^1.58.4",
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@spectrum-css/actionbutton": "^1.0.0-beta.1",
     "@spectrum-css/button": "^3.0.0-beta.6",
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 5c8703c996..069baf04b2 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -44,10 +44,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.58.3":
-  version "1.58.3"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.3.tgz#86ad6aa68eec7426e1ccdf1f7e7fc957cb57d3a3"
-  integrity sha512-PpbxfBhVpmP0EO1nPBhrz486EHCIgtJlXELC/ElzjG+FCQZSCvDSM7mq/97FOW35iYdTiQTlwFgOtvOgT1P8IQ==
+"@budibase/bbui@^1.58.4":
+  version "1.58.4"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
+  integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

From 04035a24e92038acae5f602701749623618569b4 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 9 Feb 2021 13:18:59 +0000
Subject: [PATCH 70/86] Quick fix to make sure all relationships link to a
 valid, existing doc.

---
 packages/server/src/db/linkedRows/LinkController.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/server/src/db/linkedRows/LinkController.js b/packages/server/src/db/linkedRows/LinkController.js
index 061a9ac1ae..dd55ed898f 100644
--- a/packages/server/src/db/linkedRows/LinkController.js
+++ b/packages/server/src/db/linkedRows/LinkController.js
@@ -138,6 +138,13 @@ class LinkController {
         // iterate through the link IDs in the row field, see if any don't exist already
         for (let linkId of rowField) {
           if (linkId && linkId !== "" && linkDocIds.indexOf(linkId) === -1) {
+            // first check the doc we're linking to exists
+            try {
+              await this._db.get(linkId)
+            } catch (err) {
+              // skip links that don't exist
+              continue
+            }
             operations.push(
               new LinkDocument(
                 table._id,

From 3712de65ee268d412f450ec10477d4c70f340bdb Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 9 Feb 2021 13:20:53 +0000
Subject: [PATCH 71/86] Make sure both directions exist.

---
 packages/server/src/db/linkedRows/LinkController.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/db/linkedRows/LinkController.js b/packages/server/src/db/linkedRows/LinkController.js
index dd55ed898f..5102e50f02 100644
--- a/packages/server/src/db/linkedRows/LinkController.js
+++ b/packages/server/src/db/linkedRows/LinkController.js
@@ -140,7 +140,7 @@ class LinkController {
           if (linkId && linkId !== "" && linkDocIds.indexOf(linkId) === -1) {
             // first check the doc we're linking to exists
             try {
-              await this._db.get(linkId)
+              await Promise.all([this._db.get(linkId), this._db.get(row._id)])
             } catch (err) {
               // skip links that don't exist
               continue

From 9054e764e0cf1a8773eec838ff950ed0c71273ab Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 13:31:20 +0000
Subject: [PATCH 72/86] Fix keying in component design properties

---
 .../PropertiesPanel/PropertyControls/PropertyGroup.svelte       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
index b04954c06f..93be958d55 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
@@ -25,7 +25,7 @@
 <DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
   {#if open}
     <div>
-      {#each properties as prop (`${componentInstance._id}-${prop.key}`)}
+      {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
         <PropertyControl
           bindable={false}
           label={`${prop.label}${hasPropChanged(style, prop) ? ' *' : ''}`}

From 1deeb2ac3ea6c8c3120fae305a2d2e2082a55f99 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 14:01:54 +0000
Subject: [PATCH 73/86] Add sprectrum theme compatibility to autoscreens form
 text

---
 .../store/screenTemplates/rowDetailScreen.js        |  2 ++
 .../store/screenTemplates/utils/Component.js        |  5 +++++
 .../store/screenTemplates/utils/commonComponents.js | 13 +++++++++++++
 3 files changed, 20 insertions(+)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 783bcf40aa..0ffb1de59f 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -9,6 +9,7 @@ import {
   makeSaveButton,
   makeTableFormComponents,
   makeMainForm,
+  spectrumColor,
 } from "./utils/commonComponents"
 
 export default function(tables) {
@@ -52,6 +53,7 @@ function generateTitleContainer(table, title, formId) {
       background: "transparent",
       color: "#4285f4",
     })
+    .customStyle(spectrumColor(700))
     .text("Delete")
     .customProps({
       className: "",
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
index 1e588895af..182736a1d5 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
@@ -29,6 +29,11 @@ export class Component extends BaseStructure {
     return this
   }
 
+  customStyle(styling) {
+    this._json._styles.custom = styling
+    return this
+  }
+
   instanceName(name) {
     this._json._instanceName = name
     return this
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index 8c6bfe646b..391d1b3c11 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -3,6 +3,15 @@ import { Component } from "./Component"
 import { rowListUrl } from "../rowListScreen"
 import { backendUiStore } from "builderStore"
 
+export function spectrumColor(number) {
+  // Acorn throws a parsing error in this file if the word g-l-o-b-a-l is found
+  // (without dashes - I can't even type it in a comment).
+  // God knows why. It seems to think optional chaining further down the
+  // file is invalid if the word g-l-o-b-a-l is found - hence the reason this
+  // statement is split into parts.
+  return "color: var(--spectrum-glo" + `bal-color-gray-${number});`
+}
+
 export function makeLinkComponent(tableName) {
   return new Component("@budibase/standard-components/link")
     .normalStyle({
@@ -12,6 +21,7 @@ export function makeLinkComponent(tableName) {
     .hoverStyle({
       color: "#4285f4",
     })
+    .customStyle(spectrumColor(700))
     .text(tableName)
     .customProps({
       url: `/${tableName.toLowerCase()}`,
@@ -52,6 +62,7 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
       "margin-right": "4px",
       "margin-left": "4px",
     })
+    .customStyle(spectrumColor(700))
     .text(">")
     .instanceName("Arrow")
 
@@ -64,6 +75,7 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
   const identifierText = new Component("@budibase/standard-components/text")
     .type("none")
     .normalStyle(textStyling)
+    .customStyle(spectrumColor(700))
     .text(text)
     .instanceName("Identifier")
 
@@ -132,6 +144,7 @@ export function makeTitleContainer(title) {
       "margin-left": "0px",
       flex: "1 1 auto",
     })
+    .customStyle(spectrumColor(900))
     .type("h3")
     .instanceName("Title")
     .text(title)

From 881303cdd3fad6365051173664124a4773bcce2f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 14:07:33 +0000
Subject: [PATCH 74/86] Remove placeholder setting from relationship field as
 it is never displayed

---
 packages/standard-components/manifest.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 5694e3c5b3..cbebe1986c 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1294,12 +1294,6 @@
         "type": "text",
         "label": "Label",
         "key": "label"
-      },
-      {
-        "type": "text",
-        "label": "Placeholder",
-        "key": "placeholder",
-        "placeholder": "Choose an option"
       }
     ]
   }

From c635956e304b05a4ef9c7681e035ccbf1a464dbb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 14:37:42 +0000
Subject: [PATCH 75/86] Fix multiselect not being wrapped in CreateEditRow
 modal

---
 .../src/components/backend/DataTable/RowFieldControl.svelte   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index bddb66e4c9..3390b95288 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -36,7 +36,9 @@
 {:else if type === 'boolean'}
   <Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
 {:else if type === 'link'}
-  <LinkedRowSelector bind:linkedRows={value} schema={meta} />
+  <div>
+    <LinkedRowSelector bind:linkedRows={value} schema={meta} />
+  </div>
 {:else if type === 'longform'}
   <div>
     <Label extraSmall grey>{label}</Label>

From 10a9b8034a35f4dae8e48e4eb3ce4ee7c86199f2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 14:50:02 +0000
Subject: [PATCH 76/86] Fix relationships not being saved for new rows

---
 packages/server/src/db/linkedRows/LinkController.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/db/linkedRows/LinkController.js b/packages/server/src/db/linkedRows/LinkController.js
index 5102e50f02..dd55ed898f 100644
--- a/packages/server/src/db/linkedRows/LinkController.js
+++ b/packages/server/src/db/linkedRows/LinkController.js
@@ -140,7 +140,7 @@ class LinkController {
           if (linkId && linkId !== "" && linkDocIds.indexOf(linkId) === -1) {
             // first check the doc we're linking to exists
             try {
-              await Promise.all([this._db.get(linkId), this._db.get(row._id)])
+              await this._db.get(linkId)
             } catch (err) {
               // skip links that don't exist
               continue

From da0fce0e8d7f9a7222e393f118d4ebf9a124cf5c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 15:24:56 +0000
Subject: [PATCH 77/86] Fix server query tests

---
 .../server/src/api/routes/tests/query.spec.js | 87 ++++++++++---------
 1 file changed, 45 insertions(+), 42 deletions(-)

diff --git a/packages/server/src/api/routes/tests/query.spec.js b/packages/server/src/api/routes/tests/query.spec.js
index 3262845ca3..e97887846e 100644
--- a/packages/server/src/api/routes/tests/query.spec.js
+++ b/packages/server/src/api/routes/tests/query.spec.js
@@ -1,10 +1,10 @@
-const { 
+const {
   supertest,
   createApplication,
   defaultHeaders,
   builderEndpointShouldBlockNormalUsers,
   getDocument,
-  insertDocument
+  insertDocument,
 } = require("./couchTestUtils")
 let { generateDatasourceID, generateQueryID } = require("../../../db/utils")
 
@@ -21,11 +21,11 @@ const TEST_DATASOURCE = {
 const TEST_QUERY = {
   _id: generateQueryID(DATASOURCE_ID),
   datasourceId: DATASOURCE_ID,
-  name:"New Query",
-  parameters:[],
-  fields:{},
-  schema:{},
-  queryVerb:"read",
+  name: "New Query",
+  parameters: [],
+  fields: {},
+  schema: {},
+  queryVerb: "read",
 }
 
 describe("/queries", () => {
@@ -37,8 +37,8 @@ describe("/queries", () => {
   let query
 
   beforeAll(async () => {
-    ({ request, server } = await supertest())
-  });
+    ;({ request, server } = await supertest())
+  })
 
   afterAll(() => {
     server.close()
@@ -47,7 +47,7 @@ describe("/queries", () => {
   beforeEach(async () => {
     app = await createApplication(request)
     appId = app.instance._id
-  });
+  })
 
   async function createDatasource() {
     return await insertDocument(appId, TEST_DATASOURCE)
@@ -63,65 +63,68 @@ describe("/queries", () => {
         .post(`/api/queries`)
         .send(TEST_QUERY)
         .set(defaultHeaders(appId))
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
 
-        expect(res.res.statusMessage).toEqual(`Query ${TEST_QUERY.name} saved successfully.`);            
-        expect(res.body).toEqual({
-          _rev: res.body._rev,
-          ...TEST_QUERY,
-        });
+      expect(res.res.statusMessage).toEqual(
+        `Query ${TEST_QUERY.name} saved successfully.`
+      )
+      expect(res.body).toEqual({
+        _rev: res.body._rev,
+        ...TEST_QUERY,
       })
-    });
+    })
+  })
 
   describe("fetch", () => {
     let datasource
 
     beforeEach(async () => {
       datasource = await createDatasource()
-    });
+    })
 
     afterEach(() => {
       delete datasource._rev
-    });
+    })
 
     it("returns all the queries from the server", async () => {
       const query = await createQuery()
       const res = await request
         .get(`/api/queries`)
         .set(defaultHeaders(appId))
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
 
-        const queries = res.body;
-        expect(queries).toEqual([
-          {
-            "_rev": query.rev,
-            ...TEST_QUERY
-          }
-        ]);            
+      const queries = res.body
+      expect(queries).toEqual([
+        {
+          _rev: query.rev,
+          ...TEST_QUERY,
+          readable: true,
+        },
+      ])
     })
 
     it("should apply authorization to endpoint", async () => {
-        await builderEndpointShouldBlockNormalUsers({
-          request,
-          method: "GET",
-          url: `/api/datasources`,
-          appId: appId,
-        })
+      await builderEndpointShouldBlockNormalUsers({
+        request,
+        method: "GET",
+        url: `/api/datasources`,
+        appId: appId,
       })
-    });
+    })
+  })
 
   describe("destroy", () => {
-    let datasource;
+    let datasource
 
     beforeEach(async () => {
       datasource = await createDatasource()
-    });
+    })
 
     afterEach(() => {
       delete datasource._rev
-    });
+    })
 
     it("deletes a query and returns a success message", async () => {
       const query = await createQuery()
@@ -134,10 +137,10 @@ describe("/queries", () => {
       const res = await request
         .get(`/api/queries`)
         .set(defaultHeaders(appId))
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
-      
-        expect(res.body).toEqual([])
+
+      expect(res.body).toEqual([])
     })
 
     it("should apply authorization to endpoint", async () => {
@@ -148,5 +151,5 @@ describe("/queries", () => {
         appId: appId,
       })
     })
-  });
-});
+  })
+})

From 1eb216ace34a417b606ac04005b36b8aebfb06d8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 16:03:45 +0000
Subject: [PATCH 78/86] Fix conflict in yarn lock

---
 packages/builder/yarn.lock | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index fa94386f00..c95e2da250 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,17 +842,11 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-<<<<<<< HEAD
 "@budibase/bbui@^1.58.4":
   version "1.58.4"
   resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
   integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
-=======
-"@budibase/bbui@^1.58.3":
-  version "1.58.3"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.3.tgz#86ad6aa68eec7426e1ccdf1f7e7fc957cb57d3a3"
-  integrity sha512-PpbxfBhVpmP0EO1nPBhrz486EHCIgtJlXELC/ElzjG+FCQZSCvDSM7mq/97FOW35iYdTiQTlwFgOtvOgT1P8IQ==
->>>>>>> 10f6d871354dace180c86aefb389a97f7925b902
+
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

From 4493a0896f4a34601997d3b1e44dd03adebd8b83 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 9 Feb 2021 16:55:59 +0000
Subject: [PATCH 79/86] Remove commented out lines

---
 packages/builder/src/builderStore/dataBinding.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index c57099fe1c..b94d0d841a 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -153,8 +153,6 @@ export const getContextBindings = (rootComponent, componentId) => {
         // datasource options, based on bindable properties
         fieldSchema,
         providerId: component._id,
-        // tableId: table._id,
-        // field: key,
       })
     })
   })
@@ -186,8 +184,6 @@ export const getContextBindings = (rootComponent, componentId) => {
       // datasource options, based on bindable properties
       fieldSchema,
       providerId: "user",
-      // tableId: TableNames.USERS,
-      // field: key,
     })
   })
 

From fb79a78164b96acb63c894f0d3b95f7a925a58e3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 10 Feb 2021 19:23:53 +0000
Subject: [PATCH 80/86] Make all form components use fill width of container

---
 packages/builder/package.json                 |  2 +-
 packages/builder/yarn.lock                    |  9 +++---
 packages/standard-components/package.json     |  2 +-
 .../standard-components/src/Search.svelte     | 30 +++++++++++--------
 .../src/forms/BooleanField.svelte             |  6 ++++
 .../src/forms/DateTimeField.svelte            | 19 +++++-------
 .../src/forms/Field.svelte                    | 12 +++++++-
 .../src/forms/FieldGroup.svelte               | 12 +++++++-
 .../standard-components/src/forms/Form.svelte |  1 +
 .../src/forms/LongFormField.svelte            |  3 ++
 .../src/forms/Picker.svelte                   |  5 +++-
 .../src/forms/StringField.svelte              |  6 ++++
 packages/standard-components/yarn.lock        |  8 ++---
 13 files changed, 78 insertions(+), 37 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index bc1abf3ff1..267e4f5d72 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.58.4",
+    "@budibase/bbui": "^1.58.5",
     "@budibase/client": "^0.7.6",
     "@budibase/colorpicker": "1.0.1",
     "@budibase/string-templates": "^0.7.6",
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index c95e2da250..d44a9e63c0 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,11 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.58.4":
-  version "1.58.4"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
-  integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
-
+"@budibase/bbui@^1.58.5":
+  version "1.58.5"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.5.tgz#c9ce712941760825c7774a1de77594e989db4561"
+  integrity sha512-0j1I7BetJ2GzB1BXKyvvlkuFphLmADJh2U/Ihubwxx5qUDY8REoVzLgAB4c24zt0CGVTF9VMmOoMLd0zD0QwdQ==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index ec179f934a..cb56664bbd 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -40,7 +40,7 @@
   "gitHead": "1a80b09fd093f2599a68f7db72ad639dd50922dd",
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.1.0",
-    "@budibase/bbui": "^1.58.4",
+    "@budibase/bbui": "^1.58.5",
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@spectrum-css/actionbutton": "^1.0.0-beta.1",
     "@spectrum-css/button": "^3.0.0-beta.6",
diff --git a/packages/standard-components/src/Search.svelte b/packages/standard-components/src/Search.svelte
index cbe4ece78f..affedccd2c 100644
--- a/packages/standard-components/src/Search.svelte
+++ b/packages/standard-components/src/Search.svelte
@@ -10,7 +10,7 @@
     Input,
   } from "@budibase/bbui"
 
-  const { API, styleable, DataProvider, builderStore } = getContext("sdk")
+  const { API, styleable, Provider, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let table = []
@@ -39,7 +39,7 @@
     if (!isEmpty(table)) {
       const tableDef = await API.fetchTableDefinition(table)
       schema = tableDef.schema
-      rows = await API.searchTable({
+      rows = await API.searchTableData({
         tableId: table,
         search: parsedSearch,
         pagination: {
@@ -107,18 +107,16 @@
   {#if loaded}
     {#if rows.length > 0}
       {#if $component.children === 0 && $builderStore.inBuilder}
-        <p>Add some components too</p>
+        <p><i class="ri-image-line" />Add some components to display</p>
       {:else}
         {#each rows as row}
-          <DataProvider {row}>
+          <Provider data={row}>
             <slot />
-          </DataProvider>
+          </Provider>
         {/each}
       {/if}
-    {:else if $builderStore.inBuilder}
-      <p>Feed me some data</p>
-    {:else}
-      <p>{noRowsMessage}</p>
+    {:else if noRowsMessage}
+      <p><i class="ri-search-2-line" />{noRowsMessage}</p>
     {/if}
   {/if}
   <div class="pagination">
@@ -133,11 +131,19 @@
 
 <style>
   p {
+    margin: 0 var(--spacing-m);
+    background-color: var(--grey-2);
+    color: var(--grey-6);
+    font-size: var(--font-size-s);
+    padding: var(--spacing-l);
+    border-radius: var(--border-radius-s);
     display: grid;
     place-items: center;
-    background: #f5f5f5;
-    border: #ccc 1px solid;
-    padding: var(--spacing-m);
+  }
+  p i {
+    margin-bottom: var(--spacing-m);
+    font-size: 1.5rem;
+    color: var(--grey-5);
   }
 
   .query-builder {
diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte
index 33360474df..d7c43ea63c 100644
--- a/packages/standard-components/src/forms/BooleanField.svelte
+++ b/packages/standard-components/src/forms/BooleanField.svelte
@@ -49,3 +49,9 @@
     </div>
   {/if}
 </Field>
+
+<style>
+  .spectrum-Checkbox {
+    width: 100%;
+  }
+</style>
diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index e58c0ae6bb..1826c77724 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -3,6 +3,7 @@
   import Field from "./Field.svelte"
   import "flatpickr/dist/flatpickr.css"
   import "@spectrum-css/inputgroup/dist/index-vars.css"
+  import { generateID } from "../helpers"
 
   export let field
   export let label
@@ -14,8 +15,9 @@
   let open = false
   let flatpickr
 
+  $: flatpickrId = `${$fieldState?.id}-${generateID()}-wrapper`
   $: flatpickrOptions = {
-    element: `#${$fieldState?.id}-wrapper`,
+    element: `#${flatpickrId}`,
     enableTime: enableTime || false,
     altInput: true,
     altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
@@ -46,9 +48,7 @@
     // duplicate input field.
     // We need to blur both because the focus styling does not get properly
     // applied.
-    const els = document.querySelectorAll(
-      `#${$fieldState.fieldId}-wrapper input`
-    )
+    const els = document.querySelectorAll(`#${flatpickrId} input`)
     els.forEach(el => el.blur())
   }
 </script>
@@ -62,9 +62,9 @@
       on:close={onClose}
       options={flatpickrOptions}
       on:change={handleChange}
-      element={`#${$fieldState.fieldId}-wrapper`}>
+      element={`#${flatpickrId}`}>
       <div
-        id={`${$fieldState.fieldId}-wrapper`}
+        id={flatpickrId}
         aria-disabled="false"
         aria-invalid={!$fieldState.valid}
         class:is-invalid={!$fieldState.valid}
@@ -124,14 +124,11 @@
     cursor: pointer;
   }
   .flatpickr {
-    width: var(
-      --spectrum-alias-single-line-width,
-      var(--spectrum-global-dimension-size-2400)
-    );
+    width: 100%;
     overflow: hidden;
   }
   .flatpickr .spectrum-Textfield {
-    width: auto;
+    width: 100%;
   }
   .overlay {
     position: fixed;
diff --git a/packages/standard-components/src/forms/Field.svelte b/packages/standard-components/src/forms/Field.svelte
index 9b7339e97e..597cad02c0 100644
--- a/packages/standard-components/src/forms/Field.svelte
+++ b/packages/standard-components/src/forms/Field.svelte
@@ -61,8 +61,13 @@
 </FieldGroupFallback>
 
 <style>
+  label {
+    white-space: nowrap;
+  }
+
   .spectrum-Form-itemField {
-    width: 360px;
+    position: relative;
+    width: 100%;
   }
 
   .error {
@@ -73,4 +78,9 @@
     font-size: var(--spectrum-global-dimension-font-size-75);
     margin-top: var(--spectrum-global-dimension-size-75);
   }
+
+  .spectrum-FieldLabel--right,
+  .spectrum-FieldLabel--left {
+    padding-right: var(--spectrum-global-dimension-size-200);
+  }
 </style>
diff --git a/packages/standard-components/src/forms/FieldGroup.svelte b/packages/standard-components/src/forms/FieldGroup.svelte
index 05bad90704..79e1ecad62 100644
--- a/packages/standard-components/src/forms/FieldGroup.svelte
+++ b/packages/standard-components/src/forms/FieldGroup.svelte
@@ -8,10 +8,20 @@
   setContext("fieldGroup", { labelPosition })
 </script>
 
-<div use:styleable={$component.styles}>
+<div class="wrapper" use:styleable={$component.styles}>
   <div
     class="spectrum-Form"
     class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
     <slot />
   </div>
 </div>
+
+<style>
+  .wrapper {
+    width: 100%;
+    position: relative;
+  }
+  .spectrum-Form {
+    width: 100%;
+  }
+</style>
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index d65c851f43..77008bd8b6 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -168,5 +168,6 @@
 <style>
   div {
     padding: 20px;
+    position: relative;
   }
 </style>
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index 2d6f72874f..d22be1b6a9 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -65,4 +65,7 @@
   div :global(.ql-snow .ql-formats:after) {
     display: none;
   }
+  div :global(.ql-editor p) {
+    word-break: break-all;
+  }
 </style>
diff --git a/packages/standard-components/src/forms/Picker.svelte b/packages/standard-components/src/forms/Picker.svelte
index 8ab50a1b94..153d4f4ea7 100644
--- a/packages/standard-components/src/forms/Picker.svelte
+++ b/packages/standard-components/src/forms/Picker.svelte
@@ -100,7 +100,10 @@
   }
   .spectrum-Popover {
     max-height: 240px;
-    width: var(--spectrum-global-dimension-size-2400);
+    width: 100%;
     z-index: 999;
   }
+  .spectrum-Picker {
+    width: 100%;
+  }
 </style>
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index 65693418b1..416a037fb7 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -58,3 +58,9 @@
     </div>
   {/if}
 </Field>
+
+<style>
+  .spectrum-Textfield {
+    width: 100%;
+  }
+</style>
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 069baf04b2..8b0ca17cdc 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -44,10 +44,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.58.4":
-  version "1.58.4"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
-  integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
+"@budibase/bbui@^1.58.5":
+  version "1.58.5"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.5.tgz#c9ce712941760825c7774a1de77594e989db4561"
+  integrity sha512-0j1I7BetJ2GzB1BXKyvvlkuFphLmADJh2U/Ihubwxx5qUDY8REoVzLgAB4c24zt0CGVTF9VMmOoMLd0zD0QwdQ==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

From 2e9122ca8107cc9bb8405b511ca6ba384bd7b122 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 10 Feb 2021 19:42:56 +0000
Subject: [PATCH 81/86] Fix reactive store derivation overriding actions

---
 .../client/src/components/Provider.svelte     | 12 ++-----
 packages/client/src/store/context.js          | 31 ++++++++++++-------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte
index 3c894f6723..6f56e62abe 100644
--- a/packages/client/src/components/Provider.svelte
+++ b/packages/client/src/components/Provider.svelte
@@ -11,17 +11,13 @@
   // Clone and create new data context for this component tree
   const context = getContext("context")
   const component = getContext("component")
-  const newContext = createContextStore()
+  const newContext = createContextStore(context)
   setContext("context", newContext)
 
-  let initiated = false
   $: providerKey = key || $component.id
 
   // Add data context
-  $: {
-    newContext.actions.provideData(providerKey, $context, data)
-    initiated = true
-  }
+  $: newContext.actions.provideData(providerKey, data)
 
   // Instance ID is unique to each instance of a provider
   let instanceId
@@ -56,6 +52,4 @@
   })
 </script>
 
-{#if initiated}
-  <slot />
-{/if}
+<slot />
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
index 5725f94231..e9d307d4f3 100644
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@@ -1,20 +1,27 @@
-import { writable } from "svelte/store"
+import { writable, derived } from "svelte/store"
 
-export const createContextStore = () => {
-  const store = writable({})
+export const createContextStore = oldContext => {
+  const newContext = writable({})
+  const contexts = oldContext ? [oldContext, newContext] : [newContext]
+  const totalContext = derived(contexts, $contexts => {
+    return $contexts.reduce((total, context) => ({ ...total, ...context }), {})
+  })
 
   // Adds a data context layer to the tree
-  const provideData = (providerId, context, data) => {
-    let newData = { ...context }
-    if (providerId && data !== undefined) {
-      newData[providerId] = data
+  const provideData = (providerId, data) => {
+    if (!providerId || data === undefined) {
+      return
+    }
+    newContext.update(state => {
+      state[providerId] = data
 
       // Keep track of the closest component ID so we can later hydrate a "data" prop.
       // This is only required for legacy bindings that used "data" rather than a
       // component ID.
-      newData.closestComponentId = providerId
-    }
-    store.set(newData)
+      state.closestComponentId = providerId
+
+      return state
+    })
   }
 
   // Adds an action context layer to the tree
@@ -22,14 +29,14 @@ export const createContextStore = () => {
     if (!providerId || !actionType) {
       return
     }
-    store.update(state => {
+    newContext.update(state => {
       state[`${providerId}_${actionType}`] = callback
       return state
     })
   }
 
   return {
-    subscribe: store.subscribe,
+    subscribe: totalContext.subscribe,
     actions: { provideData, provideAction },
   }
 }

From 24c3f3019f7ae364418c81556ab5e224f5af7960 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 11 Feb 2021 09:17:36 +0000
Subject: [PATCH 82/86] Fix automatic form generation from relationship and
 calculated view schemas

---
 .../builder/src/builderStore/dataBinding.js   |  4 +-
 .../store/screenTemplates/newRowScreen.js     |  5 ++-
 .../store/screenTemplates/rowDetailScreen.js  |  5 ++-
 .../screenTemplates/utils/commonComponents.js | 37 ++++---------------
 4 files changed, 16 insertions(+), 35 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index b94d0d841a..abd8fdce85 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -211,7 +211,9 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
         schema = {}
         const params = table.parameters || []
         params.forEach(param => {
-          schema[param.name] = { ...param, type: "string" }
+          if (param?.name) {
+            schema[param.name] = { ...param, type: "string" }
+          }
         })
       } else {
         schema = cloneDeep(table.schema)
diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 2ee537ac0c..aeac80e7c1 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -6,7 +6,7 @@ import {
   makeMainForm,
   makeTitleContainer,
   makeSaveButton,
-  makeTableFormComponents,
+  makeDatasourceFormComponents,
 } from "./utils/commonComponents"
 
 export default function(tables) {
@@ -51,7 +51,8 @@ const createScreen = table => {
     })
 
   // Add all form fields from this schema to the field group
-  makeTableFormComponents(table._id).forEach(component => {
+  const datasource = { type: "table", tableId: table._id }
+  makeDatasourceFormComponents(datasource).forEach(component => {
     fieldGroup.addChild(component)
   })
 
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 0ffb1de59f..0e48cf307e 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -7,9 +7,9 @@ import {
   makeBreadcrumbContainer,
   makeTitleContainer,
   makeSaveButton,
-  makeTableFormComponents,
   makeMainForm,
   spectrumColor,
+  makeDatasourceFormComponents,
 } from "./utils/commonComponents"
 
 export default function(tables) {
@@ -109,7 +109,8 @@ const createScreen = table => {
     })
 
   // Add all form fields from this schema to the field group
-  makeTableFormComponents(table._id).forEach(component => {
+  const datasource = { type: "table", tableId: table._id }
+  makeDatasourceFormComponents(datasource).forEach(component => {
     fieldGroup.addChild(component)
   })
 
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index 391d1b3c11..4c127fbe0b 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -1,7 +1,6 @@
-import { get } from "svelte/store"
 import { Component } from "./Component"
 import { rowListUrl } from "../rowListScreen"
-import { backendUiStore } from "builderStore"
+import { getSchemaForDatasource } from "../../../dataBinding"
 
 export function spectrumColor(number) {
   // Acorn throws a parsing error in this file if the word g-l-o-b-a-l is found
@@ -174,37 +173,15 @@ const fieldTypeToComponentMap = {
   link: "relationshipfield",
 }
 
-export function makeTableFormComponents(tableId) {
-  const tables = get(backendUiStore).tables
-  const schema = tables.find(table => table._id === tableId)?.schema ?? {}
-  return makeSchemaFormComponents(schema)
-}
-
-export function makeQueryFormComponents(queryId) {
-  const queries = get(backendUiStore).queries
-  const params = queries.find(query => query._id === queryId)?.parameters ?? []
-  let schema = {}
-  params.forEach(param => {
-    schema[param.name] = { ...param, type: "string" }
-  })
-  return makeSchemaFormComponents(schema)
-}
-
 export function makeDatasourceFormComponents(datasource) {
-  if (!datasource) {
-    return []
-  }
-  return datasource.type === "table"
-    ? makeTableFormComponents(datasource.tableId)
-    : makeQueryFormComponents(datasource._id)
-}
-
-function makeSchemaFormComponents(schema) {
+  const { schema } = getSchemaForDatasource(datasource, true)
   let components = []
   let fields = Object.keys(schema || {})
   fields.forEach(field => {
     const fieldSchema = schema[field]
-    const componentType = fieldTypeToComponentMap[fieldSchema.type]
+    const fieldType =
+      typeof fieldSchema === "object" ? fieldSchema.type : fieldSchema
+    const componentType = fieldTypeToComponentMap[fieldType]
     const fullComponentType = `@budibase/standard-components/${componentType}`
     if (componentType) {
       const component = new Component(fullComponentType)
@@ -214,10 +191,10 @@ function makeSchemaFormComponents(schema) {
           label: field,
           placeholder: field,
         })
-      if (fieldSchema.type === "options") {
+      if (fieldType === "options") {
         component.customProps({ placeholder: "Choose an option " })
       }
-      if (fieldSchema.type === "boolean") {
+      if (fieldType === "boolean") {
         component.customProps({ text: field, label: "" })
       }
       components.push(component)

From c625dcad11c950f6bdcf2df79b55d0d4fca39b10 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 11 Feb 2021 09:19:09 +0000
Subject: [PATCH 83/86] Shrink some settings names to fit in one line

---
 packages/standard-components/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 5d7e111eca..a7f237a790 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -142,7 +142,7 @@
       },
       {
         "type": "number",
-        "label": "Rows Per Page",
+        "label": "Rows/Page",
         "defaultValue": 25,
         "key": "pageSize"
       },

From a16614782669596c573802a2b79f59e0f5c1ec24 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 11 Feb 2021 09:20:25 +0000
Subject: [PATCH 84/86] Update some empty state text

---
 packages/standard-components/src/List.svelte   | 2 +-
 packages/standard-components/src/Search.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 045208f06d..9923851abb 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -33,7 +33,7 @@
   <div use:styleable={$component.styles}>
     {#if rows.length > 0}
       {#if $component.children === 0 && $builderStore.inBuilder}
-        <p><i class="ri-image-line" />Add some components to display</p>
+        <p><i class="ri-image-line" />Add some components to display.</p>
       {:else}
         {#each rows as row}
           <Provider data={row}>
diff --git a/packages/standard-components/src/Search.svelte b/packages/standard-components/src/Search.svelte
index affedccd2c..195479cdd9 100644
--- a/packages/standard-components/src/Search.svelte
+++ b/packages/standard-components/src/Search.svelte
@@ -107,7 +107,7 @@
   {#if loaded}
     {#if rows.length > 0}
       {#if $component.children === 0 && $builderStore.inBuilder}
-        <p><i class="ri-image-line" />Add some components to display</p>
+        <p><i class="ri-image-line" />Add some components to display.</p>
       {:else}
         {#each rows as row}
           <Provider data={row}>

From 81e779c8b5e168f45f05c1567775d07879666972 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 11 Feb 2021 09:30:05 +0000
Subject: [PATCH 85/86] Add hot reloading to search results

---
 .../standard-components/src/Search.svelte     | 146 ++++++++++--------
 1 file changed, 78 insertions(+), 68 deletions(-)

diff --git a/packages/standard-components/src/Search.svelte b/packages/standard-components/src/Search.svelte
index 195479cdd9..509205f8f1 100644
--- a/packages/standard-components/src/Search.svelte
+++ b/packages/standard-components/src/Search.svelte
@@ -1,6 +1,5 @@
 <script>
   import { getContext } from "svelte"
-  import { isEmpty } from "lodash/fp"
   import {
     Button,
     DatePicker,
@@ -10,10 +9,12 @@
     Input,
   } from "@budibase/bbui"
 
-  const { API, styleable, Provider, builderStore } = getContext("sdk")
+  const { API, styleable, Provider, builderStore, ActionTypes } = getContext(
+    "sdk"
+  )
   const component = getContext("component")
 
-  export let table = []
+  export let table
   export let columns = []
   export let pageSize
   export let noRowsMessage
@@ -34,9 +35,16 @@
       search[next] === "" ? acc : { ...acc, [next]: search[next] },
     {}
   )
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => fetchData(table, page),
+      metadata: { datasource: { type: "table", tableId: table } },
+    },
+  ]
 
   async function fetchData(table, page) {
-    if (!isEmpty(table)) {
+    if (table) {
       const tableDef = await API.fetchTableDefinition(table)
       schema = tableDef.schema
       rows = await API.searchTableData({
@@ -60,74 +68,76 @@
   }
 </script>
 
-<div use:styleable={$component.styles}>
-  <div class="query-builder">
-    {#if schema}
-      {#each columns as field}
-        <div class="form-field">
-          <Label extraSmall grey>{schema[field].name}</Label>
-          {#if schema[field].type === 'options'}
-            <Select secondary bind:value={search[field]}>
-              <option value="">Choose an option</option>
-              {#each schema[field].constraints.inclusion as opt}
-                <option>{opt}</option>
-              {/each}
-            </Select>
-          {:else if schema[field].type === 'datetime'}
-            <DatePicker bind:value={search[field]} />
-          {:else if schema[field].type === 'boolean'}
-            <Toggle text={schema[field].name} bind:checked={search[field]} />
-          {:else if schema[field].type === 'number'}
-            <Input type="number" bind:value={search[field]} />
-          {:else if schema[field].type === 'string'}
-            <Input bind:value={search[field]} />
-          {/if}
-        </div>
-      {/each}
-    {/if}
-    <div class="actions">
-      <Button
-        secondary
-        on:click={() => {
-          search = {}
-          page = 0
-        }}>
-        Reset
-      </Button>
-      <Button
-        primary
-        on:click={() => {
-          page = 0
-          fetchData(table, page)
-        }}>
-        Search
-      </Button>
-    </div>
-  </div>
-  {#if loaded}
-    {#if rows.length > 0}
-      {#if $component.children === 0 && $builderStore.inBuilder}
-        <p><i class="ri-image-line" />Add some components to display.</p>
-      {:else}
-        {#each rows as row}
-          <Provider data={row}>
-            <slot />
-          </Provider>
+<Provider {actions}>
+  <div use:styleable={$component.styles}>
+    <div class="query-builder">
+      {#if schema}
+        {#each columns as field}
+          <div class="form-field">
+            <Label extraSmall grey>{schema[field].name}</Label>
+            {#if schema[field].type === 'options'}
+              <Select secondary bind:value={search[field]}>
+                <option value="">Choose an option</option>
+                {#each schema[field].constraints.inclusion as opt}
+                  <option>{opt}</option>
+                {/each}
+              </Select>
+            {:else if schema[field].type === 'datetime'}
+              <DatePicker bind:value={search[field]} />
+            {:else if schema[field].type === 'boolean'}
+              <Toggle text={schema[field].name} bind:checked={search[field]} />
+            {:else if schema[field].type === 'number'}
+              <Input type="number" bind:value={search[field]} />
+            {:else if schema[field].type === 'string'}
+              <Input bind:value={search[field]} />
+            {/if}
+          </div>
         {/each}
       {/if}
-    {:else if noRowsMessage}
-      <p><i class="ri-search-2-line" />{noRowsMessage}</p>
-    {/if}
-  {/if}
-  <div class="pagination">
-    {#if page > 0}
-      <Button primary on:click={previousPage}>Back</Button>
-    {/if}
-    {#if rows.length === pageSize}
-      <Button primary on:click={nextPage}>Next</Button>
+      <div class="actions">
+        <Button
+          secondary
+          on:click={() => {
+            search = {}
+            page = 0
+          }}>
+          Reset
+        </Button>
+        <Button
+          primary
+          on:click={() => {
+            page = 0
+            fetchData(table, page)
+          }}>
+          Search
+        </Button>
+      </div>
+    </div>
+    {#if loaded}
+      {#if rows.length > 0}
+        {#if $component.children === 0 && $builderStore.inBuilder}
+          <p><i class="ri-image-line" />Add some components to display.</p>
+        {:else}
+          {#each rows as row}
+            <Provider data={row}>
+              <slot />
+            </Provider>
+          {/each}
+        {/if}
+      {:else if noRowsMessage}
+        <p><i class="ri-search-2-line" />{noRowsMessage}</p>
+      {/if}
     {/if}
+    <div class="pagination">
+      {#if page > 0}
+        <Button primary on:click={previousPage}>Back</Button>
+      {/if}
+      {#if rows.length === pageSize}
+        <Button primary on:click={nextPage}>Next</Button>
+      {/if}
+    </div>
   </div>
-</div>
+</Provider>
 
 <style>
   p {

From 9a73a16b0c9d7b0299769ceab3dd6ffa1c85e0f1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 11 Feb 2021 09:39:35 +0000
Subject: [PATCH 86/86] Block notifications following a datasource invalidation
 so that unnecessary notification don't get shown

---
 packages/client/src/store/datasource.js   |  4 ++++
 packages/client/src/store/notification.js | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/packages/client/src/store/datasource.js b/packages/client/src/store/datasource.js
index 58fa632c49..ac129efc10 100644
--- a/packages/client/src/store/datasource.js
+++ b/packages/client/src/store/datasource.js
@@ -1,4 +1,5 @@
 import { writable, get } from "svelte/store"
+import { notificationStore } from "./notification"
 
 export const createDatasourceStore = () => {
   const store = writable([])
@@ -66,6 +67,9 @@ export const createDatasourceStore = () => {
     const relatedInstances = get(store).filter(instance => {
       return instance.datasourceId === datasourceId
     })
+    if (relatedInstances?.length) {
+      notificationStore.blockNotifications(1000)
+    }
     relatedInstances?.forEach(instance => {
       instance.refresh()
     })
diff --git a/packages/client/src/store/notification.js b/packages/client/src/store/notification.js
index 8e8f465e07..64757569ed 100644
--- a/packages/client/src/store/notification.js
+++ b/packages/client/src/store/notification.js
@@ -5,13 +5,22 @@ const NOTIFICATION_TIMEOUT = 3000
 
 const createNotificationStore = () => {
   const _notifications = writable([])
+  let block = false
 
   const send = (message, type = "default") => {
+    if (block) {
+      return
+    }
     _notifications.update(state => {
       return [...state, { id: generate(), type, message }]
     })
   }
 
+  const blockNotifications = (timeout = 1000) => {
+    block = true
+    setTimeout(() => (block = false), timeout)
+  }
+
   const notifications = derived(_notifications, ($_notifications, set) => {
     set($_notifications)
     if ($_notifications.length > 0) {
@@ -36,6 +45,7 @@ const createNotificationStore = () => {
     warning: msg => send(msg, "warning"),
     info: msg => send(msg, "info"),
     success: msg => send(msg, "success"),
+    blockNotifications,
   }
 }