From b7af4ed65f17411fdac4adc03f58ad80e91ecea1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 6 Aug 2021 14:54:00 +0100
Subject: [PATCH 01/22] Add validation drawer and simplify HOC's for different
 field types

---
 packages/bbui/src/Layout/Layout.svelte        |   3 +
 .../ComponentSettingsSection.svelte           |   1 +
 .../AttachmentFieldSelect.svelte              |   5 -
 .../BooleanFieldSelect.svelte                 |   5 -
 .../DateTimeFieldSelect.svelte                |   5 -
 .../PropertyControls/FormFieldSelect.svelte   |   1 +
 .../LongFormFieldSelect.svelte                |   5 -
 .../PropertyControls/NumberFieldSelect.svelte |   5 -
 .../OptionsFieldSelect.svelte                 |   5 -
 .../RelationshipFieldSelect.svelte            |   5 -
 .../PropertyControls/StringFieldSelect.svelte |   5 -
 .../ValidationEditor/ValidationDrawer.svelte  | 288 ++++++++++++++++++
 .../ValidationEditor/ValidationEditor.svelte  |  33 ++
 .../PropertyControls/componentSettings.js     |  34 ++-
 packages/standard-components/manifest.json    |  45 +++
 .../src/forms/validation.js                   |   2 +-
 16 files changed, 390 insertions(+), 57 deletions(-)
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationEditor.svelte

diff --git a/packages/bbui/src/Layout/Layout.svelte b/packages/bbui/src/Layout/Layout.svelte
index 86fd844ca1..af60675582 100644
--- a/packages/bbui/src/Layout/Layout.svelte
+++ b/packages/bbui/src/Layout/Layout.svelte
@@ -48,6 +48,9 @@
     padding-top: var(--spacing-l);
     padding-bottom: var(--spacing-l);
   }
+  .gap-XXS {
+    grid-gap: var(--spacing-xs);
+  }
   .gap-XS {
     grid-gap: var(--spacing-s);
   }
diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index 972a2bb7fe..35a4a9db19 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -67,6 +67,7 @@
             placeholder: setting.placeholder,
           }}
           {bindings}
+          {componentDefinition}
         />
       {/if}
     {/each}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
deleted file mode 100644
index 44557157ba..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import FormFieldSelect from "./FormFieldSelect.svelte"
-</script>
-
-<FormFieldSelect {...$$props} on:change type="attachment" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
deleted file mode 100644
index 131a375b22..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import FormFieldSelect from "./FormFieldSelect.svelte"
-</script>
-
-<FormFieldSelect {...$$props} on:change type="boolean" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
deleted file mode 100644
index c3b9b052c4..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import FormFieldSelect from "./FormFieldSelect.svelte"
-</script>
-
-<FormFieldSelect {...$$props} on:change type="datetime" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
index 0926561640..f8e4b18fe4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@@ -23,6 +23,7 @@
   const getOptions = (schema, fieldType) => {
     let entries = Object.entries(schema ?? {})
     if (fieldType) {
+      fieldType = fieldType.split("/")[1]
       entries = entries.filter(entry => entry[1].type === fieldType)
     }
     return entries.map(entry => entry[0])
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
deleted file mode 100644
index 65dd54d53a..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import FormFieldSelect from "./FormFieldSelect.svelte"
-</script>
-
-<FormFieldSelect {...$$props} on:change type="longform" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
deleted file mode 100644
index 2006aca0bb..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import FormFieldSelect from "./FormFieldSelect.svelte"
-</script>
-
-<FormFieldSelect {...$$props} on:change type="number" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
deleted file mode 100644
index a01b837797..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import FormFieldSelect from "./FormFieldSelect.svelte"
-</script>
-
-<FormFieldSelect {...$$props} on:change type="options" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
deleted file mode 100644
index 5cdb25a112..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import FormFieldSelect from "./FormFieldSelect.svelte"
-</script>
-
-<FormFieldSelect {...$$props} on:change type="link" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
deleted file mode 100644
index 62765676e3..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import FormFieldSelect from "./FormFieldSelect.svelte"
-</script>
-
-<FormFieldSelect {...$$props} on:change type="string" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
new file mode 100644
index 0000000000..b769e1f60e
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
@@ -0,0 +1,288 @@
+<script>
+  import {
+    Button,
+    Icon,
+    DrawerContent,
+    Layout,
+    Select,
+    Heading,
+    Body,
+  } from "@budibase/bbui"
+  import { currentAsset, selectedComponent } from "builderStore"
+  import { findClosestMatchingComponent } from "builderStore/storeUtils"
+  import { getSchemaForDatasource } from "builderStore/dataBinding"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+
+  export let rules = []
+  export let bindings = []
+  export let type
+
+  const Constraints = {
+    Required: {
+      label: "Required",
+      value: "required",
+    },
+    MaxLength: {
+      label: "Max length",
+      value: "maxLength",
+    },
+    MaxValue: {
+      label: "Max value",
+      value: "maxValue",
+    },
+    MinValue: {
+      label: "Min value",
+      value: "minValue",
+    },
+    Equal: {
+      label: "Must equal",
+      value: "equal",
+    },
+    NotEqual: {
+      label: "Must not equal",
+      value: "notEqual",
+    },
+    Regex: {
+      label: "Must match regex",
+      value: "regex",
+    },
+    NotRegex: {
+      label: "Must not match regex",
+      value: "notRegex",
+    },
+    Contains: {
+      label: "Must contain row ID",
+      value: "contains",
+    },
+    NotContains: {
+      label: "Must not contain row ID",
+      value: "notContains",
+    },
+  }
+  const ConstraintMap = {
+    ["string"]: [
+      Constraints.Required,
+      Constraints.MaxLength,
+      Constraints.Equal,
+      Constraints.NotEqual,
+      Constraints.Regex,
+      Constraints.NotRegex,
+    ],
+    ["number"]: [
+      Constraints.Required,
+      Constraints.MaxValue,
+      Constraints.MinValue,
+      Constraints.Equal,
+      Constraints.NotEqual,
+    ],
+    ["boolean"]: [
+      Constraints.Required,
+      Constraints.Equal,
+      Constraints.NotEqual,
+    ],
+    ["datetime"]: [
+      Constraints.Required,
+      Constraints.MaxValue,
+      Constraints.MinValue,
+      Constraints.Equal,
+      Constraints.NotEqual,
+    ],
+    ["attachment"]: [Constraints.Required],
+    ["link"]: [
+      Constraints.Required,
+      Constraints.Equal,
+      Constraints.NotEqual,
+      Constraints.Contains,
+      Constraints.NotContains,
+    ],
+  }
+
+  $: dataSourceSchema = getDataSourceSchema($currentAsset, $selectedComponent)
+  $: field = $selectedComponent?.field
+  $: schemaRules = parseRulesFromSchema(field, dataSourceSchema || {})
+  $: constraintOptions = getConstraintsForType(type)
+
+  const getConstraintsForType = type => {
+    return ConstraintMap[type?.split("/")[1] || "string"]
+  }
+
+  const getDataSourceSchema = (asset, component) => {
+    if (!asset || !component) {
+      return null
+    }
+    const formParent = findClosestMatchingComponent(
+      asset.props,
+      component._id,
+      component => component._component.endsWith("/form")
+    )
+    return getSchemaForDatasource(asset, formParent?.dataSource)
+  }
+
+  const parseRulesFromSchema = (field, dataSourceSchema) => {
+    if (!field || !dataSourceSchema) {
+      return []
+    }
+    const fieldSchema = dataSourceSchema.schema?.[field]
+    const constraints = fieldSchema?.constraints
+    if (!constraints) {
+      return []
+    }
+    let rules = []
+
+    // Required constraint
+    if (
+      field === dataSourceSchema?.table?.primaryDisplay ||
+      constraints.presence?.allowEmpty === false
+    ) {
+      rules.push({
+        constraint: "required",
+        error: "Required field",
+      })
+    }
+
+    // String length constraint
+    if (exists(constraints.length?.maximum)) {
+      const length = constraints.length.maximum
+      rules.push({
+        constraint: "maxLength",
+        constraintValue: length,
+        error: `Maximum ${length} characters`,
+      })
+    }
+
+    // Min / max number constraint
+    if (exists(constraints.numericality?.greaterThanOrEqualTo)) {
+      const min = constraints.numericality.greaterThanOrEqualTo
+      rules.push({
+        constraint: "minValue",
+        constraintValue: min,
+        error: `Minimum value is ${min}`,
+      })
+    }
+    if (exists(constraints.numericality?.lessThanOrEqualTo)) {
+      const max = constraints.numericality.lessThanOrEqualTo
+      rules.push({
+        constraint: "maxValue",
+        constraintValue: max,
+        error: `Maximum value is ${max}`,
+      })
+    }
+
+    return rules
+  }
+
+  const exists = value => {
+    return value != null && value !== ""
+  }
+
+  const addRule = () => {
+    rules = [...(rules || []), {}]
+  }
+
+  const removeRule = id => {
+    rules = rules.filter(link => link.id !== id)
+  }
+</script>
+
+<DrawerContent>
+  <div class="container">
+    <Layout noPadding gap="M">
+      <Layout noPadding gap={schemaRules?.length ? "S" : "XS"}>
+        <Heading size="XS">Schema validation rules</Heading>
+        {#if schemaRules?.length}
+          <div class="links">
+            {#each schemaRules as rule}
+              <div class="rule schema">
+                <Select
+                  placeholder="Constraint"
+                  value={rule.constraint}
+                  options={constraintOptions}
+                  disabled
+                />
+                <DrawerBindableInput
+                  placeholder="Constraint value"
+                  value={rule.constraintValue}
+                  {bindings}
+                  disabled
+                />
+                <DrawerBindableInput
+                  placeholder="Error message"
+                  value={rule.error}
+                  {bindings}
+                  disabled
+                />
+                <div />
+              </div>
+            {/each}
+          </div>
+        {:else}
+          <Body size="S">
+            There are no built-in validation rules from the schema.
+          </Body>
+        {/if}
+      </Layout>
+      <Layout noPadding gap="S">
+        <Heading size="XS">Custom validation rules</Heading>
+        {#if rules?.length}
+          <div class="links">
+            {#each rules as rule}
+              <div class="rule">
+                <Select
+                  bind:value={rule.constraint}
+                  options={constraintOptions}
+                  placeholder="Constraint"
+                />
+                <DrawerBindableInput
+                  placeholder="Constraint value"
+                  value={rule.constraintValue}
+                  {bindings}
+                  disabled={rule.constraint === "required"}
+                  on:change={e => (rule.constraintValue = e.detail)}
+                />
+                <DrawerBindableInput
+                  placeholder="Error message"
+                  value={rule.error}
+                  {bindings}
+                  on:change={e => (rule.error = e.detail)}
+                />
+                <Icon
+                  name="Close"
+                  hoverable
+                  size="S"
+                  on:click={() => removeRule(rule.id)}
+                />
+              </div>
+            {/each}
+          </div>
+        {/if}
+        <div class="button">
+          <Button secondary icon="Add" on:click={addRule}>Add Rule</Button>
+        </div>
+      </Layout>
+    </Layout>
+  </div>
+</DrawerContent>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .links {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+
+  .rule {
+    gap: var(--spacing-l);
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr 1fr 1fr 20px;
+    border-radius: var(--border-radius-s);
+    transition: background-color ease-in-out 130ms;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationEditor.svelte
new file mode 100644
index 0000000000..0b7fd12de2
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationEditor.svelte
@@ -0,0 +1,33 @@
+<script>
+  import { Button, ActionButton, Drawer } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import ValidationDrawer from "./ValidationDrawer.svelte"
+
+  export let value = []
+  export let bindings = []
+  export let componentDefinition
+  export let type
+
+  let drawer
+
+  const dispatch = createEventDispatcher()
+  const save = () => {
+    dispatch("change", value)
+    drawer.hide()
+  }
+</script>
+
+<ActionButton on:click={drawer.show}>Configure Validation</ActionButton>
+<Drawer bind:this={drawer} title="Validation Rules">
+  <svelte:fragment slot="description">
+    Configure validation rules for this field.
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <ValidationDrawer
+    slot="body"
+    bind:rules={value}
+    {type}
+    {bindings}
+    {componentDefinition}
+  />
+</Drawer>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
index 8435971714..6cf2d7e056 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@@ -12,14 +12,8 @@ import SectionSelect from "./SectionSelect.svelte"
 import NavigationEditor from "./NavigationEditor/NavigationEditor.svelte"
 import FilterEditor from "./FilterEditor/FilterEditor.svelte"
 import URLSelect from "./URLSelect.svelte"
-import StringFieldSelect from "./StringFieldSelect.svelte"
-import NumberFieldSelect from "./NumberFieldSelect.svelte"
-import OptionsFieldSelect from "./OptionsFieldSelect.svelte"
-import BooleanFieldSelect from "./BooleanFieldSelect.svelte"
-import LongFormFieldSelect from "./LongFormFieldSelect.svelte"
-import DateTimeFieldSelect from "./DateTimeFieldSelect.svelte"
-import AttachmentFieldSelect from "./AttachmentFieldSelect.svelte"
-import RelationshipFieldSelect from "./RelationshipFieldSelect.svelte"
+import FormFieldSelect from "./FormFieldSelect.svelte"
+import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte"
 
 const componentMap = {
   text: Input,
@@ -39,14 +33,22 @@ const componentMap = {
   navigation: NavigationEditor,
   filter: FilterEditor,
   url: URLSelect,
-  "field/string": StringFieldSelect,
-  "field/number": NumberFieldSelect,
-  "field/options": OptionsFieldSelect,
-  "field/boolean": BooleanFieldSelect,
-  "field/longform": LongFormFieldSelect,
-  "field/datetime": DateTimeFieldSelect,
-  "field/attachment": AttachmentFieldSelect,
-  "field/link": RelationshipFieldSelect,
+  "field/string": FormFieldSelect,
+  "field/number": FormFieldSelect,
+  "field/options": FormFieldSelect,
+  "field/boolean": FormFieldSelect,
+  "field/longform": FormFieldSelect,
+  "field/datetime": FormFieldSelect,
+  "field/attachment": FormFieldSelect,
+  "field/link": FormFieldSelect,
+  // Some validation types are the same as others, so not all types are
+  // explicitly listed here. e.g. options uses string validation
+  "validation/string": ValidationEditor,
+  "validation/number": ValidationEditor,
+  "validation/boolean": ValidationEditor,
+  "validation/datetime": ValidationEditor,
+  "validation/attachment": ValidationEditor,
+  "validation/link": ValidationEditor,
 }
 
 export const getComponentForSettingType = type => {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index bb50c7a7e3..53aeb969fb 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1758,6 +1758,11 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "validation/string",
+        "label": "Validation",
+        "key": "validation"
       }
     ]
   },
@@ -1787,6 +1792,11 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "validation/number",
+        "label": "Validation",
+        "key": "validation"
       }
     ]
   },
@@ -1816,6 +1826,11 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "validation/string",
+        "label": "Validation",
+        "key": "validation"
       }
     ]
   },
@@ -1862,6 +1877,11 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "validation/string",
+        "label": "Validation",
+        "key": "validation"
       }
     ]
   },
@@ -1891,6 +1911,11 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "validation/boolean",
+        "label": "Validation",
+        "key": "validation"
       }
     ]
   },
@@ -1921,6 +1946,11 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "validation/string",
+        "label": "Validation",
+        "key": "validation"
       }
     ]
   },
@@ -1956,6 +1986,11 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "validation/datetime",
+        "label": "Validation",
+        "key": "validation"
       }
     ]
   },
@@ -1980,6 +2015,11 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "validation/attachment",
+        "label": "Validation",
+        "key": "validation"
       }
     ]
   },
@@ -2009,6 +2049,11 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "validation/link",
+        "label": "Validation",
+        "key": "validation"
       }
     ]
   },
diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index b1df80509f..351a610912 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -66,7 +66,7 @@ const presenceConstraint = value => {
   } else {
     invalid = value == null || value === ""
   }
-  return invalid ? "Required" : null
+  return invalid ? "Required field" : null
 }
 
 const lengthConstraint = maxLength => value => {

From d79748bfd90eb1084248a490ac8ee441de6621cf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 10 Aug 2021 14:36:00 +0100
Subject: [PATCH 02/22] Allow custom validation rules to use bindings or raw
 values

---
 .../ValidationEditor/ValidationDrawer.svelte  |  78 +++-
 .../src/forms/validation.js                   | 334 ++++++++++++++----
 2 files changed, 321 insertions(+), 91 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
index b769e1f60e..70f9afe65a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
@@ -7,11 +7,14 @@
     Select,
     Heading,
     Body,
+    Input,
+    DatePicker,
   } from "@budibase/bbui"
   import { currentAsset, selectedComponent } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/storeUtils"
   import { getSchemaForDatasource } from "builderStore/dataBinding"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { generate } from "shortid"
 
   export let rules = []
   export let bindings = []
@@ -100,10 +103,11 @@
   $: dataSourceSchema = getDataSourceSchema($currentAsset, $selectedComponent)
   $: field = $selectedComponent?.field
   $: schemaRules = parseRulesFromSchema(field, dataSourceSchema || {})
-  $: constraintOptions = getConstraintsForType(type)
+  $: fieldType = type?.split("/")[1] || "string"
+  $: constraintOptions = getConstraintsForType(fieldType)
 
   const getConstraintsForType = type => {
-    return ConstraintMap[type?.split("/")[1] || "string"]
+    return ConstraintMap[type]
   }
 
   const getDataSourceSchema = (asset, component) => {
@@ -145,7 +149,7 @@
       const length = constraints.length.maximum
       rules.push({
         constraint: "maxLength",
-        constraintValue: length,
+        value: length,
         error: `Maximum ${length} characters`,
       })
     }
@@ -155,7 +159,7 @@
       const min = constraints.numericality.greaterThanOrEqualTo
       rules.push({
         constraint: "minValue",
-        constraintValue: min,
+        value: min,
         error: `Minimum value is ${min}`,
       })
     }
@@ -163,7 +167,7 @@
       const max = constraints.numericality.lessThanOrEqualTo
       rules.push({
         constraint: "maxValue",
-        constraintValue: max,
+        value: max,
         error: `Maximum value is ${max}`,
       })
     }
@@ -176,7 +180,14 @@
   }
 
   const addRule = () => {
-    rules = [...(rules || []), {}]
+    rules = [
+      ...(rules || []),
+      {
+        valueType: "Binding",
+        type: fieldType,
+        id: generate(),
+      },
+    ]
   }
 
   const removeRule = id => {
@@ -199,9 +210,15 @@
                   options={constraintOptions}
                   disabled
                 />
+                <Select
+                  placeholder={null}
+                  value="Value"
+                  options={["Binding", "Value"]}
+                  disabled
+                />
                 <DrawerBindableInput
                   placeholder="Constraint value"
-                  value={rule.constraintValue}
+                  value={rule.value}
                   {bindings}
                   disabled
                 />
@@ -225,20 +242,51 @@
         <Heading size="XS">Custom validation rules</Heading>
         {#if rules?.length}
           <div class="links">
-            {#each rules as rule}
+            {#each rules as rule (rule.id)}
               <div class="rule">
                 <Select
                   bind:value={rule.constraint}
                   options={constraintOptions}
                   placeholder="Constraint"
                 />
-                <DrawerBindableInput
-                  placeholder="Constraint value"
-                  value={rule.constraintValue}
-                  {bindings}
+                <Select
                   disabled={rule.constraint === "required"}
-                  on:change={e => (rule.constraintValue = e.detail)}
+                  placeholder={null}
+                  bind:value={rule.valueType}
+                  options={["Binding", "Value"]}
                 />
+                {#if rule.valueType === "Binding"}
+                  <DrawerBindableInput
+                    placeholder="Constraint value"
+                    value={rule.value}
+                    {bindings}
+                    disabled={rule.constraint === "required"}
+                    on:change={e => (rule.value = e.detail)}
+                  />
+                {:else if ["string", "number", "options", "longform"].includes(rule.type)}
+                  <Input
+                    disabled={rule.constraint === "required"}
+                    bind:value={rule.value}
+                    placeholder="Constraint value"
+                  />
+                {:else if fieldType === "boolean"}
+                  <Select
+                    disabled={rule.constraint === "required"}
+                    options={[
+                      { label: "True", value: "true" },
+                      { label: "False", value: "false" },
+                    ]}
+                    bind:value={rule.value}
+                  />
+                {:else if fieldType === "datetime"}
+                  <DatePicker
+                    enableTime={false}
+                    disabled={rule.constraint === "required"}
+                    bind:value={rule.value}
+                  />
+                {:else}
+                  <DrawerBindableInput disabled />
+                {/if}
                 <DrawerBindableInput
                   placeholder="Error message"
                   value={rule.error}
@@ -266,7 +314,7 @@
 <style>
   .container {
     width: 100%;
-    max-width: 800px;
+    max-width: 1000px;
     margin: 0 auto;
   }
   .links {
@@ -281,7 +329,7 @@
     gap: var(--spacing-l);
     display: grid;
     align-items: center;
-    grid-template-columns: 1fr 1fr 1fr 20px;
+    grid-template-columns: 1fr 1fr 1fr 1fr 20px;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
   }
diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index 351a610912..6d67df2d6a 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -1,54 +1,112 @@
 import flatpickr from "flatpickr"
 
-export const createValidatorFromConstraints = (constraints, field, table) => {
-  let checks = []
+/**
+ * Creates a validation function from a combination of schema-level constraints
+ * and custom validation rules
+ * @param schemaConstraints any schema level constraints from the table
+ * @param customRules any custom validation rules
+ * @param field the field name we are evaluating
+ * @param table the definition of the table we are evaluating
+ * @returns {function} a validator function which accepts test values
+ */
+export const createValidatorFromConstraints = (
+  schemaConstraints,
+  customRules,
+  field,
+  table
+) => {
+  let rules = []
 
-  if (constraints) {
+  // Convert schema constraints into validation rules
+  if (schemaConstraints) {
     // Required constraint
     if (
       field === table?.primaryDisplay ||
-      constraints.presence?.allowEmpty === false
+      schemaConstraints.presence?.allowEmpty === false
     ) {
-      checks.push(presenceConstraint)
+      rules.push({
+        type: "string",
+        constraint: "required",
+        error: "Required",
+      })
     }
 
     // String length constraint
-    if (exists(constraints.length?.maximum)) {
-      const length = constraints.length.maximum
-      checks.push(lengthConstraint(length))
+    if (exists(schemaConstraints.length?.maximum)) {
+      const length = schemaConstraints.length.maximum
+      rules.push({
+        type: "string",
+        constraint: "length",
+        value: length,
+        error: val => `Maximum length is ${val}`,
+      })
     }
 
     // Min / max number constraint
-    if (exists(constraints.numericality?.greaterThanOrEqualTo)) {
-      const min = constraints.numericality.greaterThanOrEqualTo
-      checks.push(numericalConstraint(x => x >= min, `Minimum value is ${min}`))
+    if (exists(schemaConstraints.numericality?.greaterThanOrEqualTo)) {
+      const min = schemaConstraints.numericality.greaterThanOrEqualTo
+      rules.push({
+        type: "number",
+        constraint: "minValue",
+        value: min,
+        error: val => `Minimum value is ${val}`,
+      })
     }
-    if (exists(constraints.numericality?.lessThanOrEqualTo)) {
-      const max = constraints.numericality.lessThanOrEqualTo
-      checks.push(numericalConstraint(x => x <= max, `Maximum value is ${max}`))
+    if (exists(schemaConstraints.numericality?.lessThanOrEqualTo)) {
+      const max = schemaConstraints.numericality.lessThanOrEqualTo
+      rules.push({
+        type: "number",
+        constraint: "maxValue",
+        value: max,
+        error: val => `Maximum value is ${val}`,
+      })
     }
 
     // Inclusion constraint
-    if (exists(constraints.inclusion)) {
-      const options = constraints.inclusion
-      checks.push(inclusionConstraint(options))
+    if (exists(schemaConstraints.inclusion)) {
+      const options = schemaConstraints.inclusion
+      rules.push({
+        type: "string",
+        constraint: "inclusion",
+        value: options,
+        error: "Invalid value",
+      })
     }
 
     // Date constraint
-    if (exists(constraints.datetime?.earliest)) {
-      const limit = constraints.datetime.earliest
-      checks.push(dateConstraint(limit, true))
+    if (exists(schemaConstraints.datetime?.earliest)) {
+      const limit = schemaConstraints.datetime.earliest
+      rules.push({
+        type: "datetime",
+        constraint: "minValue",
+        value: limit,
+        error: val => {
+          const date = flatpickr.formatDate(new Date(val), "F j Y, H:i")
+          return `Earliest date is ${date}`
+        },
+      })
     }
-    if (exists(constraints.datetime?.latest)) {
-      const limit = constraints.datetime.latest
-      checks.push(dateConstraint(limit, false))
+    if (exists(schemaConstraints.datetime?.latest)) {
+      const limit = schemaConstraints.datetime.latest
+      rules.push({
+        type: "datetime",
+        constraint: "maxValue",
+        value: limit,
+        error: val => {
+          const date = flatpickr.formatDate(new Date(val), "F j Y, H:i")
+          return `Latest date is ${date}`
+        },
+      })
     }
   }
 
+  // Add custom validation rules
+  rules = rules.concat(customRules || [])
+
   // Evaluate each constraint
   return value => {
-    for (let check of checks) {
-      const error = check(value)
+    for (let rule of rules) {
+      const error = evaluateRule(rule, value)
       if (error) {
         return error
       }
@@ -57,61 +115,185 @@ export const createValidatorFromConstraints = (constraints, field, table) => {
   }
 }
 
-const exists = value => value != null && value !== ""
-
-const presenceConstraint = value => {
-  let invalid
-  if (Array.isArray(value)) {
-    invalid = value.length === 0
-  } else {
-    invalid = value == null || value === ""
-  }
-  return invalid ? "Required field" : null
-}
-
-const lengthConstraint = maxLength => value => {
-  if (value && value.length > maxLength) {
-    return `Maximum ${maxLength} characters`
-  }
-  return null
-}
-
-const numericalConstraint = (constraint, error) => value => {
-  if (value == null || value === "") {
-    return null
-  }
-  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"
-    }
+/**
+ * Evaluates a validation rule against a value and optionally returns
+ * an error if the validation fails.
+ * @param rule the rule object to evaluate
+ * @param value the value to validate against
+ * @returns {null|*} an error if validation fails or null if it passes
+ */
+const evaluateRule = (rule, value) => {
+  if (!rule) {
     return null
   }
 
-const dateConstraint = (dateString, isEarliest) => {
-  const dateLimit = Date.parse(dateString)
-  return value => {
-    if (value == null || value === "") {
+  // Determine the correct handler for this rule
+  const handler = handlerMap[rule.constraint]
+  if (!handler) {
+    return null
+  }
+
+  // Coerce values into correct types
+  const parsedValue = parseType(value, rule.type)
+  const parsedRuleValue = parseType(rule.value, rule.type)
+
+  // Evaluate the rule
+  const pass = handler(parsedValue, parsedRuleValue)
+  if (pass) {
+    return null
+  }
+
+  // Return an error if the validation failed
+  let error = rule.error
+  if (typeof error === "function") {
+    error = rule.error(parsedRuleValue)
+  }
+  return error || "Error"
+}
+
+/**
+ * Parses a value to the specified type so that values are always compared
+ * in the same format.
+ * @param value the value to parse
+ * @param type the type to parse
+ * @returns {boolean|string|*|number|null} the parsed value, or null if invalid
+ */
+const parseType = (value, type) => {
+  // Treat nulls or empty strings as null
+  if (!exists(value) || !type) {
+    return null
+  }
+
+  // Parse as string
+  if (type === "string") {
+    if (typeof value === "string" || Array.isArray(value)) {
+      return value
+    }
+    if (value.length === 0) {
       return null
     }
-    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")
-    return valid ? null : `${adjective} is ${limitString}`
+    return `${value}`
   }
+
+  // Parse as number
+  if (type === "number") {
+    if (isNaN(value)) {
+      return null
+    }
+    return parseFloat(value)
+  }
+
+  // Parse as date
+  if (type === "datetime") {
+    if (value instanceof Date) {
+      return value.getTime()
+    }
+    const time = isNaN(value) ? Date.parse(value) : new Date(value).getTime()
+    return isNaN(time) ? null : time
+  }
+
+  // Parse as boolean
+  if (type === "boolean") {
+    if (typeof value === "string") {
+      return value.toLowerCase() === "true"
+    }
+    return value === true
+  }
+
+  // Parse attachments, treating no elements as null
+  if (type === "attachment") {
+    if (!Array.isArray(value) || !value.length) {
+      return null
+    }
+    return value
+  }
+
+  // Parse links, treating no elements as null
+  if (type === "link") {
+    if (!Array.isArray(value) || !value.length) {
+      return null
+    }
+    return value
+  }
+
+  // If some unknown type, treat as null to avoid breaking validators
+  return null
+}
+
+// Evaluates a required constraint
+const requiredHandler = value => {
+  return value != null
+}
+
+// Evaluates a max length constraint
+const maxLengthHandler = (value, maxLength) => {
+  if (value == null) {
+    return true
+  }
+  return value.length <= maxLength
+}
+
+// Evaluates a min value constraint
+const minValueHandler = (value, minValue) => {
+  if (value == null) {
+    return true
+  }
+  return value >= minValue
+}
+
+// Evaluates a max value constraint
+const maxValueHandler = (value, maxValue) => {
+  if (value == null) {
+    return true
+  }
+  return value <= maxValue
+}
+
+// Evaluates an inclusion constraint
+const inclusionHandler = (value, options) => {
+  return options.includes(value)
+}
+
+// Evaluates an equal constraint
+const equalHandler = (value, referenceValue) => {
+  return value === referenceValue
+}
+
+// Evaluates a not equal constraint
+const notEqualHandler = (value, referenceValue) => {
+  return !equalHandler(value, referenceValue)
+}
+
+// Evaluates a regex constraint
+const regexHandler = (value, regex) => {
+  return new RegExp(regex).test(value)
+}
+
+// Evaluates a not regex constraint
+const notRegexHandler = (value, regex) => {
+  return !regexHandler(value, regex)
+}
+
+/**
+ * Map of constraint types to handlers.
+ */
+const handlerMap = {
+  required: requiredHandler,
+  maxLength: maxLengthHandler,
+  minValue: minValueHandler,
+  maxValue: maxValueHandler,
+  inclusion: inclusionHandler,
+  equal: equalHandler,
+  notEqual: notEqualHandler,
+  regex: regexHandler,
+  notRegex: notRegexHandler,
+}
+
+/**
+ * Helper to check for null, undefined or empty string values
+ * @param value the value to test
+ * @returns {boolean} whether the value exists or not
+ */
+const exists = value => {
+  return value != null && value !== ""
 }

From b4f51d44d5d344c3e89a15f04c8e70420da616f5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 10 Aug 2021 14:36:47 +0100
Subject: [PATCH 03/22] Combine table schema validation rules with custom
 validation rules when validating form fields

---
 .../src/forms/InnerForm.svelte                   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index f6fadfa5cb..61b646e449 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -21,7 +21,12 @@
 
   // Form API contains functions to control the form
   const formApi = {
-    registerField: (field, defaultValue = null, fieldDisabled = false) => {
+    registerField: (
+      field,
+      defaultValue = null,
+      fieldDisabled = false,
+      validationRules
+    ) => {
       if (!field) {
         return
       }
@@ -30,8 +35,13 @@
       const isAutoColumn = !!schema?.[field]?.autocolumn
 
       // Create validation function based on field schema
-      const constraints = schema?.[field]?.constraints
-      const validate = createValidatorFromConstraints(constraints, field, table)
+      const schemaConstraints = schema?.[field]?.constraints
+      const validate = createValidatorFromConstraints(
+        schemaConstraints,
+        validationRules,
+        field,
+        table
+      )
 
       // Construct field object
       fieldMap[field] = {

From 1b4a24fe83ae06645637029d14bcc335300e87de Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 10 Aug 2021 14:37:14 +0100
Subject: [PATCH 04/22] Add custom validation support to all fields except
 relationships

---
 .../src/forms/AttachmentField.svelte                  |  3 +++
 .../standard-components/src/forms/BooleanField.svelte |  2 ++
 .../src/forms/DateTimeField.svelte                    | 11 ++++++++++-
 packages/standard-components/src/forms/Field.svelte   |  8 +++++++-
 .../src/forms/LongFormField.svelte                    |  2 ++
 .../standard-components/src/forms/OptionsField.svelte |  2 ++
 .../src/forms/RelationshipField.svelte                |  2 ++
 .../standard-components/src/forms/StringField.svelte  |  2 ++
 8 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte
index 0b454f9800..f2c4a35030 100644
--- a/packages/standard-components/src/forms/AttachmentField.svelte
+++ b/packages/standard-components/src/forms/AttachmentField.svelte
@@ -6,6 +6,7 @@
   export let field
   export let label
   export let disabled = false
+  export let validation
 
   let fieldState
   let fieldApi
@@ -35,6 +36,7 @@
   {label}
   {field}
   {disabled}
+  {validation}
   type="attachment"
   bind:fieldState
   bind:fieldApi
@@ -44,6 +46,7 @@
     <CoreDropzone
       value={$fieldState.value}
       disabled={$fieldState.disabled}
+      error={$fieldState.error}
       on:change={e => {
         fieldApi.setValue(e.detail)
       }}
diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte
index 17a3c563bc..4634dd1062 100644
--- a/packages/standard-components/src/forms/BooleanField.svelte
+++ b/packages/standard-components/src/forms/BooleanField.svelte
@@ -6,6 +6,7 @@
   export let label
   export let text
   export let disabled = false
+  export let validation
 
   let fieldState
   let fieldApi
@@ -15,6 +16,7 @@
   {label}
   {field}
   {disabled}
+  {validation}
   type="boolean"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index 9332cfa721..9a5babae33 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -7,12 +7,21 @@
   export let placeholder
   export let disabled = false
   export let enableTime = false
+  export let validation
 
   let fieldState
   let fieldApi
 </script>
 
-<Field {label} {field} {disabled} type="datetime" bind:fieldState bind:fieldApi>
+<Field
+  {label}
+  {field}
+  {disabled}
+  {validation}
+  type="datetime"
+  bind:fieldState
+  bind:fieldApi
+>
   {#if fieldState}
     <CoreDatePicker
       value={$fieldState.value}
diff --git a/packages/standard-components/src/forms/Field.svelte b/packages/standard-components/src/forms/Field.svelte
index fd632c32d7..61b2e41f09 100644
--- a/packages/standard-components/src/forms/Field.svelte
+++ b/packages/standard-components/src/forms/Field.svelte
@@ -11,6 +11,7 @@
   export let defaultValue
   export let type
   export let disabled = false
+  export let validation
 
   // Get contexts
   const formContext = getContext("form")
@@ -21,7 +22,12 @@
   // Register field with form
   const formApi = formContext?.formApi
   const labelPosition = fieldGroupContext?.labelPosition || "above"
-  const formField = formApi?.registerField(field, defaultValue, disabled)
+  const formField = formApi?.registerField(
+    field,
+    defaultValue,
+    disabled,
+    validation
+  )
 
   // Expose field properties to parent component
   fieldState = formField?.fieldState
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index 45ea6aa034..8c502cc584 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -6,6 +6,7 @@
   export let label
   export let placeholder
   export let disabled = false
+  export let validation
 
   let fieldState
   let fieldApi
@@ -15,6 +16,7 @@
   {label}
   {field}
   {disabled}
+  {validation}
   type="longform"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 659326bb34..31c8ebae00 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -7,6 +7,7 @@
   export let placeholder
   export let disabled = false
   export let optionsType = "select"
+  export let validation
 
   let fieldState
   let fieldApi
@@ -17,6 +18,7 @@
   {field}
   {label}
   {disabled}
+  {validation}
   type="options"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
index b695994e75..f7d6581c7a 100644
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -9,6 +9,7 @@
   export let label
   export let placeholder
   export let disabled = false
+  export let validation
 
   let fieldState
   let fieldApi
@@ -64,6 +65,7 @@
   {label}
   {field}
   {disabled}
+  {validation}
   type="link"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index 30de8621e4..63d306253b 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -7,6 +7,7 @@
   export let placeholder
   export let type = "text"
   export let disabled = false
+  export let validation
 
   let fieldState
   let fieldApi
@@ -16,6 +17,7 @@
   {label}
   {field}
   {disabled}
+  {validation}
   type={type === "number" ? "number" : "string"}
   bind:fieldState
   bind:fieldApi

From 48059f6096636fd107f18531144d253661f9d690 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 11 Aug 2021 14:34:22 +0100
Subject: [PATCH 05/22] Add support for validating relationships

---
 .../ValidationEditor/ValidationDrawer.svelte  |  55 ++++++----
 .../src/forms/validation.js                   | 102 +++++++++---------
 2 files changed, 87 insertions(+), 70 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
index 70f9afe65a..16107eb70e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
@@ -25,6 +25,10 @@
       label: "Required",
       value: "required",
     },
+    MinLength: {
+      label: "Min length",
+      value: "minLength",
+    },
     MaxLength: {
       label: "Max length",
       value: "maxLength",
@@ -93,10 +97,10 @@
     ["attachment"]: [Constraints.Required],
     ["link"]: [
       Constraints.Required,
-      Constraints.Equal,
-      Constraints.NotEqual,
       Constraints.Contains,
       Constraints.NotContains,
+      Constraints.MinLength,
+      Constraints.MaxLength,
     ],
   }
 
@@ -255,7 +259,9 @@
                   bind:value={rule.valueType}
                   options={["Binding", "Value"]}
                 />
+
                 {#if rule.valueType === "Binding"}
+                  <!-- Bindings always get a bindable input -->
                   <DrawerBindableInput
                     placeholder="Constraint value"
                     value={rule.value}
@@ -263,29 +269,38 @@
                     disabled={rule.constraint === "required"}
                     on:change={e => (rule.value = e.detail)}
                   />
-                {:else if ["string", "number", "options", "longform"].includes(rule.type)}
+                {:else if ["maxLength", "minLength", "regex", "notRegex", "contains", "notContains"].includes(rule.constraint)}
+                  <!-- Certain constraints always need string values-->
                   <Input
-                    disabled={rule.constraint === "required"}
                     bind:value={rule.value}
                     placeholder="Constraint value"
                   />
-                {:else if fieldType === "boolean"}
-                  <Select
-                    disabled={rule.constraint === "required"}
-                    options={[
-                      { label: "True", value: "true" },
-                      { label: "False", value: "false" },
-                    ]}
-                    bind:value={rule.value}
-                  />
-                {:else if fieldType === "datetime"}
-                  <DatePicker
-                    enableTime={false}
-                    disabled={rule.constraint === "required"}
-                    bind:value={rule.value}
-                  />
                 {:else}
-                  <DrawerBindableInput disabled />
+                  <!-- Otherwise we render a component based on the type -->
+                  {#if ["string", "number", "options", "longform"].includes(rule.type) || ["contains"]}
+                    <Input
+                      disabled={rule.constraint === "required"}
+                      bind:value={rule.value}
+                      placeholder="Constraint value"
+                    />
+                  {:else if fieldType === "boolean"}
+                    <Select
+                      disabled={rule.constraint === "required"}
+                      options={[
+                        { label: "True", value: "true" },
+                        { label: "False", value: "false" },
+                      ]}
+                      bind:value={rule.value}
+                    />
+                  {:else if fieldType === "datetime"}
+                    <DatePicker
+                      enableTime={false}
+                      disabled={rule.constraint === "required"}
+                      bind:value={rule.value}
+                    />
+                  {:else}
+                    <DrawerBindableInput disabled />
+                  {/if}
                 {/if}
                 <DrawerBindableInput
                   placeholder="Error message"
diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index 6d67df2d6a..3332932eb9 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -38,7 +38,7 @@ export const createValidatorFromConstraints = (
         type: "string",
         constraint: "length",
         value: length,
-        error: val => `Maximum length is ${val}`,
+        error: `Maximum length is ${length}`,
       })
     }
 
@@ -49,7 +49,7 @@ export const createValidatorFromConstraints = (
         type: "number",
         constraint: "minValue",
         value: min,
-        error: val => `Minimum value is ${val}`,
+        error: `Minimum value is ${min}`,
       })
     }
     if (exists(schemaConstraints.numericality?.lessThanOrEqualTo)) {
@@ -58,13 +58,13 @@ export const createValidatorFromConstraints = (
         type: "number",
         constraint: "maxValue",
         value: max,
-        error: val => `Maximum value is ${val}`,
+        error: `Maximum value is ${max}`,
       })
     }
 
     // Inclusion constraint
     if (exists(schemaConstraints.inclusion)) {
-      const options = schemaConstraints.inclusion
+      const options = schemaConstraints.inclusion || []
       rules.push({
         type: "string",
         constraint: "inclusion",
@@ -76,26 +76,22 @@ export const createValidatorFromConstraints = (
     // Date constraint
     if (exists(schemaConstraints.datetime?.earliest)) {
       const limit = schemaConstraints.datetime.earliest
+      const limitString = flatpickr.formatDate(new Date(limit), "F j Y, H:i")
       rules.push({
         type: "datetime",
         constraint: "minValue",
         value: limit,
-        error: val => {
-          const date = flatpickr.formatDate(new Date(val), "F j Y, H:i")
-          return `Earliest date is ${date}`
-        },
+        error: `Earliest date is ${limitString}`,
       })
     }
     if (exists(schemaConstraints.datetime?.latest)) {
       const limit = schemaConstraints.datetime.latest
+      const limitString = flatpickr.formatDate(new Date(limit), "F j Y, H:i")
       rules.push({
         type: "datetime",
         constraint: "maxValue",
         value: limit,
-        error: val => {
-          const date = flatpickr.formatDate(new Date(val), "F j Y, H:i")
-          return `Latest date is ${date}`
-        },
+        error: `Latest date is ${limitString}`,
       })
     }
   }
@@ -133,22 +129,12 @@ const evaluateRule = (rule, value) => {
     return null
   }
 
-  // Coerce values into correct types
-  const parsedValue = parseType(value, rule.type)
-  const parsedRuleValue = parseType(rule.value, rule.type)
+  // Coerce input value into correct type
+  value = parseType(value, rule.type)
 
   // Evaluate the rule
-  const pass = handler(parsedValue, parsedRuleValue)
-  if (pass) {
-    return null
-  }
-
-  // Return an error if the validation failed
-  let error = rule.error
-  if (typeof error === "function") {
-    error = rule.error(parsedRuleValue)
-  }
-  return error || "Error"
+  const pass = handler(value, rule)
+  return pass ? null : rule.error || "Error"
 }
 
 /**
@@ -225,53 +211,66 @@ const requiredHandler = value => {
   return value != null
 }
 
+// Evaluates a min length constraint
+const minLengthHandler = (value, rule) => {
+  const limit = parseType(rule.value, "number")
+  return value && value.length >= limit
+}
+
 // Evaluates a max length constraint
-const maxLengthHandler = (value, maxLength) => {
-  if (value == null) {
-    return true
-  }
-  return value.length <= maxLength
+const maxLengthHandler = (value, rule) => {
+  const limit = parseType(rule.value, "number")
+  return value == null || value.length <= limit
 }
 
 // Evaluates a min value constraint
-const minValueHandler = (value, minValue) => {
-  if (value == null) {
-    return true
-  }
-  return value >= minValue
+const minValueHandler = (value, rule) => {
+  const limit = parseType(rule.value, "number")
+  return value && value >= limit
 }
 
 // Evaluates a max value constraint
-const maxValueHandler = (value, maxValue) => {
-  if (value == null) {
-    return true
-  }
-  return value <= maxValue
+const maxValueHandler = (value, rule) => {
+  const limit = parseType(rule.value, "number")
+  return value == null || value <= limit
 }
 
 // Evaluates an inclusion constraint
-const inclusionHandler = (value, options) => {
-  return options.includes(value)
+const inclusionHandler = (value, rule) => {
+  return value == null || rule.value.includes(value)
 }
 
 // Evaluates an equal constraint
-const equalHandler = (value, referenceValue) => {
-  return value === referenceValue
+const equalHandler = (value, rule) => {
+  const ruleValue = parseType(rule.value, rule.type)
+  return value === ruleValue
 }
 
 // Evaluates a not equal constraint
-const notEqualHandler = (value, referenceValue) => {
-  return !equalHandler(value, referenceValue)
+const notEqualHandler = (value, rule) => {
+  return !equalHandler(value, rule)
 }
 
 // Evaluates a regex constraint
-const regexHandler = (value, regex) => {
+const regexHandler = (value, rule) => {
+  const regex = parseType(rule.value, "string")
   return new RegExp(regex).test(value)
 }
 
 // Evaluates a not regex constraint
-const notRegexHandler = (value, regex) => {
-  return !regexHandler(value, regex)
+const notRegexHandler = (value, rule) => {
+  return !regexHandler(value, rule)
+}
+
+// Evaluates a contains constraint
+const containsHandler = (value, rule) => {
+  const expectedValue = parseType(rule.value, "string")
+  return value && value.includes(expectedValue)
+}
+
+// Evaluates a not contains constraint
+const notContainsHandler = (value, rule) => {
+  return !containsHandler(value, rule)
 }
 
 /**
@@ -279,6 +278,7 @@ const notRegexHandler = (value, regex) => {
  */
 const handlerMap = {
   required: requiredHandler,
+  minLength: minLengthHandler,
   maxLength: maxLengthHandler,
   minValue: minValueHandler,
   maxValue: maxValueHandler,
@@ -287,6 +287,8 @@ const handlerMap = {
   notEqual: notEqualHandler,
   regex: regexHandler,
   notRegex: notRegexHandler,
+  contains: containsHandler,
+  notContains: notContainsHandler,
 }
 
 /**

From a3629ce68cbcf5b2ea05314af129ec2bb0739b06 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 11 Aug 2021 14:59:12 +0100
Subject: [PATCH 06/22] Prevent not-equals from failing on fields that are both
 empty

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

diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index 3332932eb9..d52397f7c6 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -248,7 +248,11 @@ const equalHandler = (value, rule) => {
 
 // Evaluates a not equal constraint
 const notEqualHandler = (value, rule) => {
-  return !equalHandler(value, rule)
+  const ruleValue = parseType(rule.value, rule.type)
+  if (value == null && ruleValue == null) {
+    return true
+  }
+  return value !== ruleValue
 }
 
 // Evaluates a regex constraint

From 6accc723974c403eec63ace45ebeaf6a535e95a9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 11 Aug 2021 15:07:06 +0100
Subject: [PATCH 07/22] Allow fields to dynamically update validation rules so
 that other fields can be referenced

---
 .../src/forms/Field.svelte                    |  5 +-
 .../src/forms/InnerForm.svelte                | 48 +++++++++++++++++--
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/packages/standard-components/src/forms/Field.svelte b/packages/standard-components/src/forms/Field.svelte
index 61b2e41f09..e2c766a971 100644
--- a/packages/standard-components/src/forms/Field.svelte
+++ b/packages/standard-components/src/forms/Field.svelte
@@ -1,7 +1,7 @@
 <script>
   import Placeholder from "../Placeholder.svelte"
   import FieldGroupFallback from "./FieldGroupFallback.svelte"
-  import { getContext } from "svelte"
+  import { getContext, onMount } from "svelte"
 
   export let label
   export let field
@@ -34,6 +34,9 @@
   fieldApi = formField?.fieldApi
   fieldSchema = formField?.fieldSchema
 
+  // Keep validation rules up to date
+  $: fieldApi?.updateValidation(validation)
+
   // Extract label position from field group context
   $: labelPositionClass =
     labelPosition === "above" ? "" : `spectrum-FieldLabel--${labelPosition}`
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 61b646e449..53208d2065 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -36,7 +36,7 @@
 
       // Create validation function based on field schema
       const schemaConstraints = schema?.[field]?.constraints
-      const validate = createValidatorFromConstraints(
+      const validator = createValidatorFromConstraints(
         schemaConstraints,
         validationRules,
         field,
@@ -47,10 +47,11 @@
       fieldMap[field] = {
         fieldState: makeFieldState(
           field,
+          validator,
           defaultValue,
           disabled || fieldDisabled || isAutoColumn
         ),
-        fieldApi: makeFieldApi(field, defaultValue, validate),
+        fieldApi: makeFieldApi(field, defaultValue),
         fieldSchema: schema?.[field] ?? {},
       }
 
@@ -93,9 +94,11 @@
   ]
 
   // Creates an API for a specific field
-  const makeFieldApi = (field, defaultValue, validate) => {
+  const makeFieldApi = field => {
+    // Sets the value for a certain field and invokes validation
     const setValue = (value, skipCheck = false) => {
       const { fieldState } = fieldMap[field]
+      const { defaultValue, validator } = get(fieldState)
 
       // Skip if the value is the same
       if (!skipCheck && get(fieldState).value === value) {
@@ -103,7 +106,7 @@
       }
 
       const newValue = value == null ? defaultValue : value
-      const newError = validate ? validate(newValue) : null
+      const newError = validator ? validator(newValue) : null
 
       // Update field state
       fieldState.update(state => {
@@ -127,15 +130,20 @@
       return !newError
     }
 
+    // Clears the value of a certain field back to the initial value
     const clearValue = () => {
       const { fieldState } = fieldMap[field]
+      const { defaultValue } = get(fieldState)
       const newValue = initialValues[field] ?? defaultValue
+
+      // Update field state
       fieldState.update(state => {
         state.value = newValue
         state.error = null
         return state
       })
 
+      // Update form state
       formState.update(state => {
         state.values = { ...state.values, [field]: newValue }
         delete state.errors[field]
@@ -144,9 +152,37 @@
       })
     }
 
+    // Updates the validator rules for a certain field
+    const updateValidation = validationRules => {
+      const { fieldState } = fieldMap[field]
+      const { value, error } = get(fieldState)
+
+      // Create new validator
+      const schemaConstraints = schema?.[field]?.constraints
+      const validator = createValidatorFromConstraints(
+        schemaConstraints,
+        validationRules,
+        field,
+        table
+      )
+
+      // Update validator
+      fieldState.update(state => {
+        state.validator = validator
+        return state
+      })
+
+      // If there is currently an error, run the validator again in case
+      // the error should be cleared by the new validation rules
+      if (error) {
+        setValue(value, true)
+      }
+    }
+
     return {
       setValue,
       clearValue,
+      updateValidation,
       validate: () => {
         const { fieldState } = fieldMap[field]
         setValue(get(fieldState).value, true)
@@ -155,13 +191,15 @@
   }
 
   // Creates observable state data about a specific field
-  const makeFieldState = (field, defaultValue, fieldDisabled) => {
+  const makeFieldState = (field, validator, defaultValue, fieldDisabled) => {
     return writable({
       field,
       fieldId: `id-${generateID()}`,
       value: initialValues[field] ?? defaultValue,
       error: null,
       disabled: fieldDisabled,
+      defaultValue,
+      validator,
     })
   }
 

From e3545bd02edd8f060c5548519b9d9f06b2a1236c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 11 Aug 2021 15:56:21 +0100
Subject: [PATCH 08/22] Fix min and max value validation for date fields

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

diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index d52397f7c6..30b6fd7ca7 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -225,13 +225,15 @@ const maxLengthHandler = (value, rule) => {
 
 // Evaluates a min value constraint
 const minValueHandler = (value, rule) => {
-  const limit = parseType(rule.value, "number")
+  // Use same type as the value so that things can be compared
+  const limit = parseType(rule.value, rule.type)
   return value && value >= limit
 }
 
 // Evaluates a max value constraint
 const maxValueHandler = (value, rule) => {
-  const limit = parseType(rule.value, "number")
+  // Use same type as the value so that things can be compared
+  const limit = parseType(rule.value, rule.type)
   return value == null || value <= limit
 }
 

From 25e891c189c5c8ab12d92088fe15484dfd9e56d9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 11 Aug 2021 16:46:01 +0100
Subject: [PATCH 09/22] Fix validation value component always being an input

---
 .../ValidationEditor/ValidationDrawer.svelte              | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
index 16107eb70e..939b27df63 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
@@ -197,6 +197,8 @@
   const removeRule = id => {
     rules = rules.filter(link => link.id !== id)
   }
+
+  $: console.log(fieldType)
 </script>
 
 <DrawerContent>
@@ -277,13 +279,13 @@
                   />
                 {:else}
                   <!-- Otherwise we render a component based on the type -->
-                  {#if ["string", "number", "options", "longform"].includes(rule.type) || ["contains"]}
+                  {#if ["string", "number", "options", "longform"].includes(rule.type)}
                     <Input
                       disabled={rule.constraint === "required"}
                       bind:value={rule.value}
                       placeholder="Constraint value"
                     />
-                  {:else if fieldType === "boolean"}
+                  {:else if rule.type === "boolean"}
                     <Select
                       disabled={rule.constraint === "required"}
                       options={[
@@ -292,7 +294,7 @@
                       ]}
                       bind:value={rule.value}
                     />
-                  {:else if fieldType === "datetime"}
+                  {:else if rule.type === "datetime"}
                     <DatePicker
                       enableTime={false}
                       disabled={rule.constraint === "required"}

From 41afbe0a1be451466224a8a57ddba672e1deaf5c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 11 Aug 2021 18:13:40 +0100
Subject: [PATCH 10/22] Lint

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

diff --git a/packages/standard-components/src/forms/Field.svelte b/packages/standard-components/src/forms/Field.svelte
index e2c766a971..5de84f6777 100644
--- a/packages/standard-components/src/forms/Field.svelte
+++ b/packages/standard-components/src/forms/Field.svelte
@@ -1,7 +1,7 @@
 <script>
   import Placeholder from "../Placeholder.svelte"
   import FieldGroupFallback from "./FieldGroupFallback.svelte"
-  import { getContext, onMount } from "svelte"
+  import { getContext } from "svelte"
 
   export let label
   export let field

From 8db72ae52cea8be36971fb2d71d097dad105483b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 11 Aug 2021 18:16:30 +0100
Subject: [PATCH 11/22] Remove log statement

---
 .../PropertyControls/ValidationEditor/ValidationDrawer.svelte   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
index 939b27df63..e6a1e701b3 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
@@ -197,8 +197,6 @@
   const removeRule = id => {
     rules = rules.filter(link => link.id !== id)
   }
-
-  $: console.log(fieldType)
 </script>
 
 <DrawerContent>

From 02eafd8ca7c0d2d090bac559f39b488c3e97e3af Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 12 Aug 2021 12:25:54 +0100
Subject: [PATCH 12/22] Add duplicate button

---
 .../ValidationEditor/ValidationDrawer.svelte       | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
index e6a1e701b3..9f0cc1e40d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
@@ -197,6 +197,12 @@
   const removeRule = id => {
     rules = rules.filter(link => link.id !== id)
   }
+
+  const duplicateRule = id => {
+    const existingRule = rules.find(rule => rule.id === id)
+    const newRule = { ...existingRule, id: generate() }
+    rules = [...rules, newRule]
+  }
 </script>
 
 <DrawerContent>
@@ -308,6 +314,12 @@
                   {bindings}
                   on:change={e => (rule.error = e.detail)}
                 />
+                <Icon
+                  name="Duplicate"
+                  hoverable
+                  size="S"
+                  on:click={() => duplicateRule(rule.id)}
+                />
                 <Icon
                   name="Close"
                   hoverable
@@ -344,7 +356,7 @@
     gap: var(--spacing-l);
     display: grid;
     align-items: center;
-    grid-template-columns: 1fr 1fr 1fr 1fr 20px;
+    grid-template-columns: 180px 120px 1fr 1fr auto auto;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
   }

From a555eeea646a5af689aaa84494062bf0ca9a3cdb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 12 Aug 2021 12:27:50 +0100
Subject: [PATCH 13/22] Increase width of contraint select in custom validation
 drawer

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

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
index 9f0cc1e40d..b4da2e8e6e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
@@ -356,7 +356,7 @@
     gap: var(--spacing-l);
     display: grid;
     align-items: center;
-    grid-template-columns: 180px 120px 1fr 1fr auto auto;
+    grid-template-columns: 190px 120px 1fr 1fr auto auto;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
   }

From 1106241abce6399079674dbe5429337feedd9e3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20K=C3=A4stner?=
 <8317993+fabiankaestner@users.noreply.github.com>
Date: Fri, 13 Aug 2021 16:04:04 +0200
Subject: [PATCH 14/22] Add german translation for the README.

---
 i18n/README.de.md | 235 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 235 insertions(+)
 create mode 100644 i18n/README.de.md

diff --git a/i18n/README.de.md b/i18n/README.de.md
new file mode 100644
index 0000000000..34a9164c3f
--- /dev/null
+++ b/i18n/README.de.md
@@ -0,0 +1,235 @@
+<p align="center">
+  <a href="https://www.budibase.com">
+    <img alt="Budibase" src="https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg" width="60" />
+  </a>
+</p>
+<h1 align="center">
+  Budibase
+</h1>
+
+<h3 align="center">
+  Entwickle, automatisiere und stelle interne Tools in Minuten bereit.
+</h3>
+<p align="center">
+  Budibase ist eine quelloffene Low-Code Plattform, die es Entwicklern und IT-Profis ermöglicht interne Tools auf eigener Infrastruktur zu entwickeln, zu automatisieren und bereitzustellen.
+</p>
+
+<h3 align="center">
+ 🤖 🎨 🚀
+</h3>
+
+<p align="center">
+  <img alt="Budibase design ui" src="https://i.imgur.com/5BnXPsN.png">
+</p>
+
+<p align="center">
+  <a href="https://github.com/Budibase/budibase/releases">
+    <img alt="GitHub all releases" src="https://img.shields.io/github/downloads/Budibase/budibase/total">
+  </a>
+  <a href="https://github.com/Budibase/budibase/releases">
+    <img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/Budibase/budibase">
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=budibase">
+    <img src="https://img.shields.io/twitter/follow/budibase?style=social" alt="Follow @budibase" />
+  </a>
+  <img src="https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg" alt="Code of conduct" />
+  <a href="https://codecov.io/gh/Budibase/budibase">
+    <img src="https://codecov.io/gh/Budibase/budibase/graph/badge.svg?token=E8W2ZFXQOH"/>
+  </a>
+</p>
+
+<h3 align="center">
+  <a href="https://docs.budibase.com/getting-started">Los Geht's</a>
+  <span> · </span>
+  <a href="https://docs.budibase.com">Dokumentation</a>
+  <span> · </span>
+  <a href="https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas">Featureanfrage</a>
+  <span> · </span>
+  <a href="https://github.com/Budibase/budibase/issues">Einen Bug melden</a>
+  <span> · </span>
+  Support: <a href="https://github.com/Budibase/budibase/discussions">Github Discussions</a>
+</h3>
+
+<br /><br />
+## ✨ Features
+
+- **Entwickle echte Webanwendungen.** Anders als ähnliche Plattformen entwickelst du mit Budibase echte Single-Page Webapplikationen (SPAs). Deine Budibase-Apps sind standardmäßig hochperformant und haben ein Responsive-Design für eine großartige Benutzererfahrung.
+
+- **Quelloffen und erweiterbar.** Budibase ist quelloffen - lizenziert unter der GPL v3. Du kannst darauf vertrauen, dass Budibase auch in der Zukunft immer zur Verfügung steht. Budibase bietet eine Entwicklerfreundliche Plattform: du kannst Budibase erweitern, oder die Codebase forken und eigene Änderungen vornehmen.
+
+- **Datenquellen einbinden oder von Null starten.** Budibase kann Daten aus vielen Quellen einbinden, unter anderem aus MongoDB, CouchDB, PostgreSQL, MySQL, Airtable, S3, DynamoDB, oder einer REST API. Und anders als ähnliche Plattformen erlaubt Budibase auch die App-Entwicklung komplett ohne Datenquellen mit einer internen Datenbank. Deine Datenquelle noch nicht dabei? [Frag einfach nach](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
+
+- **Designe und entwickle Apps mit leistungsfähigen Komponenten.** Budibase kommt fertig mit optisch ansprechenden und leistungsfähigen Komponenten, die als Bausteine für deine UI dienen. Außerdem kannst du die UI mit vielen CSS-Styles nach deinem Geschmack anpassen. Fehlt dir eine Komponente? [Frag uns hier](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
+
+- **Automatisiere Prozesse, integriere andere Tools und binde Web-APIs ein.** Spar dir Zeit, indem du manuelle Prozesse einfach automatisierst: Vom Verbinden mit Web-Hooks bis zum automatischen Senden von E-Mails, Budibase kann alles für dich erledigen. Eine Automatisierung ist noch nicht dabei? Du kannst einfach [deine eigene erstellen](https://github.com/Budibase/automations) oder [uns deine Idee mitteilen](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
+
+- **Ein Paradies für Systemadministratoren** Budibase ist von Grund auf für das Skalieren ausgelegt. Du kannst Budibase einfach auf deiner eigenen Infrastruktur hosten und global Benutzer, Onboarding, SMTP, Applikationen, Gruppen, UI-Themes und mehr verwalten. Du kannst außerdem ein übersichtliches App-Portal für deine Benutzer bereitstellen und das Benutzermanagement an Gruppen-Manager delegieren.
+
+<br />
+
+---
+
+<br />
+
+## 🏁 Los geht's
+Momentan existieren zwei Optionen mit Budibase loszulegen: Digital Ocean und Docker.
+<br /><br />
+
+### Los geht's mit Digital Ocean
+Der einfachste und schnellste Weg loszulegen ist Digital Ocean:
+<a href="https://marketplace.digitalocean.com/apps/budibase">1-Click Deploy auf Digital Ocean</a>
+
+<a href="https://marketplace.digitalocean.com/apps/budibase">
+  <img src="https://user-images.githubusercontent.com/552074/87779219-5c3b7600-c824-11ea-9898-981a8ba94f6c.png" alt="digital ocean badge">
+</a>  
+<br /><br />
+
+### Los geht's mit Docker
+Um loszulegen musst du bereits `docker` und `docker compose` auf deinem Computer installiert haben.
+Sobald du Docker installiert hast brauchst du ca. 5 Minuten für diese 4 Schritte:
+
+1. Installiere das Budibase CLI Tool.
+```
+$ npm i -g @budibase/cli 
+```
+
+
+2. Installiere Budibase (wähle den Speicherort und den Port auf dem Budibase laufen soll.)
+```
+$ budi hosting --init 
+```
+
+
+3. Führe Budibase aus.
+```
+$ budi hosting --start 
+```
+
+
+4. Lege einen Admin-Benutzer an.
+Gib die E-Mail und das Passwort für den neuen Admin-Benutzer ein.
+
+Schon geschafft! Jetzt kann es losgehen mit der minutenschnellen Entwicklung deiner Tools. Für weitere Informationen und Tipps schau doch mal in unsere [Dokumentation](https://docs.budibase.com/getting-started).
+
+<br />
+
+---
+
+<br />
+
+## 🎓 Budibase lernen
+
+Die Budibase Dokumentation [findest du hier](https://docs.budibase.com).
+<br />
+
+---
+
+<br /><br />
+
+## 💬 Community
+
+Wenn du eine Frage hast, oder dich mit anderen Budibase-Nutzern unterhalten willst, schau doch mal in unsere
+[Github Discussions](https://github.com/Budibase/budibase/discussions).
+
+<img src="https://d33wubrfki0l68.cloudfront.net/e9241201fd89f9abbbdaac4fe44bb16312752abe/84013/img/hero-images/community.webp" />
+
+<br /><br />
+
+---
+
+<br />
+
+## ❗ Verhaltenskodex
+
+Budibase steht für eine einladende und vielfältige Community frei von Belästigung. Wir erwarten dass sich jeder in der Budibase-Community an unseren [**Verhaltenskodex**](https://github.com/Budibase/budibase/blob/HEAD/.github/CODE_OF_CONDUCT.md) hält. Bitte les ihn dir durch.
+<br />
+
+---
+
+<br />
+
+## 🙌 Zu Budibase beitragen
+
+Von einem gemeldeten Bug bis zum Erstellen einer Pull-Request: wir schätzen jeden Beitrag. Wenn du ein neues Feature implementieren willst oder eine Änderung an der API vornehmen willst, erstelle bitte zuerst ein Issue. So können wir sicherstellen, dass deine Arbeit nicht umsonst ist.
+
+### Unsicher wo du anfangen sollst?
+Gute Ideen für erste Beiträge zum Projekt [findest du hier](https://github.com/Budibase/budibase/projects/22).
+
+### Wie die Repository strukturiert ist.
+Budibase ist eine Monorepo, die von Lerna verwaltet wird. Lerna verwaltet das Erstellen und Veröffentlichen von Budibase-Paketen.
+Grob besteht Budibase aus folgenden Modulen:
+
+- [packages/builder](https://github.com/Budibase/budibase/tree/HEAD/packages/builder) - enthält Code für den clientseitigen Budibase Builder, mit dem Anwendungen erstellt werden.
+
+- [packages/client](https://github.com/Budibase/budibase/tree/HEAD/packages/client) - Ein Modul, das im Browser läuft und aus JSON-Definitionen funktionsfähige Web-Apps erstellt.
+
+- [packages/server](https://github.com/Budibase/budibase/tree/HEAD/packages/server) - Der Budibase Server. Diese Koa-Anwendung stellt den Javascript-Code für den Builder und den Client bereit, und bietet eine API für die Interaktion mit dem Budibase Backend, Datenbanken und dem Dateisystem.
+
+Für mehr Informationen schau in die [CONTRIBUTING.md](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md)
+<br /><br />
+
+---
+
+<br /><br />
+
+## 📝 Lizenz
+
+Budibase ist quelloffen, lizenziert unter der [GPL v3](https://www.gnu.org/licenses/gpl-3.0.en.html). Die Client- und Komponentenbibliotheken sind unter der [MPL](https://directory.fsf.org/wiki/License:MPL-2.0) lizenziert, damit du deine erstellten Apps unter deine präferierte Lizenz stellen kannst.
+<br /><br />
+
+---
+
+
+<br />
+
+## ⭐ Github-Sterne im Verlauf der Zeit
+
+[![Stargazers over time](https://starchart.cc/Budibase/budibase.svg)](https://starchart.cc/Budibase/budibase)
+
+Wenn du zwischen Updates des Builders Probleme auftreten, lies bitte den Guide [hier](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md#troubleshooting), um deine Umgebung zurückzusetzen.
+
+<br />
+
+---
+
+<br /><br />
+
+## Mitwirkende ✨
+
+Vielen Dank an alle wundervollen Menschen, die zu Budibase beigetragen haben ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="http://martinmck.com"><img src="https://avatars1.githubusercontent.com/u/11256663?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Martin McKeaveney</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=shogunpurple" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=shogunpurple" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=shogunpurple" title="Tests">⚠️</a> <a href="#infra-shogunpurple" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="http://www.michaeldrury.co.uk/"><img src="https://avatars2.githubusercontent.com/u/4407001?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael Drury</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=mike12345567" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=mike12345567" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=mike12345567" title="Tests">⚠️</a> <a href="#infra-mike12345567" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/aptkingston"><img src="https://avatars3.githubusercontent.com/u/9075550?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrew Kingston</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=aptkingston" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=aptkingston" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=aptkingston" title="Tests">⚠️</a> <a href="#design-aptkingston" title="Design">🎨</a></td>
+    <td align="center"><a href="https://budibase.com/"><img src="https://avatars3.githubusercontent.com/u/3524181?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael Shanks</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=mjashanks" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=mjashanks" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=mjashanks" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/kevmodrome"><img src="https://avatars3.githubusercontent.com/u/534488?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kevin Åberg Kultalahti</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=kevmodrome" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=kevmodrome" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=kevmodrome" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://www.budibase.com/"><img src="https://avatars2.githubusercontent.com/u/49767913?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Joe</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=joebudi" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=joebudi" title="Code">💻</a> <a href="#content-joebudi" title="Content">🖋</a> <a href="#design-joebudi" title="Design">🎨</a></td>
+    <td align="center"><a href="https://github.com/Rory-Powell"><img src="https://avatars.githubusercontent.com/u/8755148?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rory Powell</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Tests">⚠️</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/PClmnt"><img src="https://avatars.githubusercontent.com/u/5665926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Peter Clement</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=PClmnt" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=PClmnt" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=PClmnt" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/Conor-Mack"><img src="https://avatars1.githubusercontent.com/u/36074859?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Conor_Mack</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=Conor-Mack" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=Conor-Mack" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/pngwn"><img src="https://avatars1.githubusercontent.com/u/12937446?v=4?s=100" width="100px;" alt=""/><br /><sub><b>pngwn</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=pngwn" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=pngwn" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/HugoLd"><img src="https://avatars0.githubusercontent.com/u/26521848?v=4?s=100" width="100px;" alt=""/><br /><sub><b>HugoLd</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=HugoLd" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/victoriasloan"><img src="https://avatars.githubusercontent.com/u/9913651?v=4?s=100" width="100px;" alt=""/><br /><sub><b>victoriasloan</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=victoriasloan" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/yashank09"><img src="https://avatars.githubusercontent.com/u/37672190?v=4?s=100" width="100px;" alt=""/><br /><sub><b>yashank09</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=yashank09" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/SOVLOOKUP"><img src="https://avatars.githubusercontent.com/u/53158137?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SOVLOOKUP</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=SOVLOOKUP" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/seoulaja"><img src="https://avatars.githubusercontent.com/u/15101654?v=4?s=100" width="100px;" alt=""/><br /><sub><b>seoulaja</b></sub></a><br /><a href="#translation-seoulaja" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/mslourens"><img src="https://avatars.githubusercontent.com/u/1907152?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Maurits Lourens</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=mslourens" title="Tests">⚠️</a> <a href="https://github.com/Budibase/budibase/commits?author=mslourens" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Rory-Powell"><img src="https://avatars.githubusercontent.com/u/8755148?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rory Powell</b></sub></a><br /><a href="#infra-Rory-Powell" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Tests">⚠️</a> <a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+Dieses Projekt folgt der [All-Contributors](https://github.com/all-contributors/all-contributors) Spezifikation. Wir heißen Beiträge aller Art willkommen!

From 039c6ece6e8313a7ccf52cb0bb2af8231c86aeb7 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Mon, 16 Aug 2021 08:13:57 +0000
Subject: [PATCH 15/22] v0.9.105-alpha.10

---
 lerna.json                                |  2 +-
 packages/auth/package.json                |  2 +-
 packages/bbui/package.json                |  2 +-
 packages/builder/package.json             |  8 ++++----
 packages/cli/package.json                 |  2 +-
 packages/client/package.json              |  8 ++++----
 packages/server/package.json              | 10 +++++-----
 packages/standard-components/package.json |  4 ++--
 packages/string-templates/package.json    |  2 +-
 packages/worker/package.json              |  6 +++---
 10 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/lerna.json b/lerna.json
index 6bcd7a2dc4..c690222589 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.105-alpha.9",
+  "version": "0.9.105-alpha.10",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index d1d22f0ec5..4c84f81733 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.105-alpha.9",
+  "version": "0.9.105-alpha.10",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index cb451b2fbb..5f3858b506 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.105-alpha.9",
+  "version": "0.9.105-alpha.10",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 48dd72fbd3..9b6355d163 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.105-alpha.9",
+  "version": "0.9.105-alpha.10",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.9",
-    "@budibase/client": "^0.9.105-alpha.9",
+    "@budibase/bbui": "^0.9.105-alpha.10",
+    "@budibase/client": "^0.9.105-alpha.10",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.105-alpha.9",
+    "@budibase/string-templates": "^0.9.105-alpha.10",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 8e4f24d3b7..d2cacac244 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.105-alpha.9",
+  "version": "0.9.105-alpha.10",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index 1386df04aa..59901f6de9 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.105-alpha.9",
+  "version": "0.9.105-alpha.10",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -18,9 +18,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.9",
-    "@budibase/standard-components": "^0.9.105-alpha.9",
-    "@budibase/string-templates": "^0.9.105-alpha.9",
+    "@budibase/bbui": "^0.9.105-alpha.10",
+    "@budibase/standard-components": "^0.9.105-alpha.10",
+    "@budibase/string-templates": "^0.9.105-alpha.10",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index babde3aafd..3a709c4609 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.9",
+  "version": "0.9.105-alpha.10",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -62,9 +62,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.9",
-    "@budibase/client": "^0.9.105-alpha.9",
-    "@budibase/string-templates": "^0.9.105-alpha.9",
+    "@budibase/auth": "^0.9.105-alpha.10",
+    "@budibase/client": "^0.9.105-alpha.10",
+    "@budibase/string-templates": "^0.9.105-alpha.10",
     "@elastic/elasticsearch": "7.10.0",
     "@koa/router": "8.0.0",
     "@sendgrid/mail": "7.1.1",
@@ -117,7 +117,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/preset-env": "^7.14.4",
-    "@budibase/standard-components": "^0.9.105-alpha.9",
+    "@budibase/standard-components": "^0.9.105-alpha.10",
     "@jest/test-sequencer": "^24.8.0",
     "@types/bull": "^3.15.1",
     "@types/jest": "^26.0.23",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index dc73a87521..e8fc76a4a4 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -29,11 +29,11 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.9.105-alpha.9",
+  "version": "0.9.105-alpha.10",
   "license": "MIT",
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.9",
+    "@budibase/bbui": "^0.9.105-alpha.10",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 9174228bf5..c39494282a 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.105-alpha.9",
+  "version": "0.9.105-alpha.10",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index c343c1a2df..a0da12e1c1 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.9",
+  "version": "0.9.105-alpha.10",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -23,8 +23,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.9",
-    "@budibase/string-templates": "^0.9.105-alpha.9",
+    "@budibase/auth": "^0.9.105-alpha.10",
+    "@budibase/string-templates": "^0.9.105-alpha.10",
     "@koa/router": "^8.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",
     "aws-sdk": "^2.811.0",

From a5230e80a6a9116f6a9111305bec2847942774d5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 16 Aug 2021 17:01:34 +0100
Subject: [PATCH 16/22] Fix screen settings not being saved

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

diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
index 81c18d9f18..cfe225e0f6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
@@ -53,7 +53,7 @@
         label={def.label}
         key={def.key}
         value={deepGet($currentAsset, def.key)}
-        on:change={event => setAssetProps(def.key, event.detail, def.parser)}
+        onChange={val => setAssetProps(def.key, val, def.parser)}
         {bindings}
       />
     {/each}

From 8c871ea737a1d68539119b74081c68cc753b08d4 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Mon, 16 Aug 2021 16:22:24 +0000
Subject: [PATCH 17/22] v0.9.105-alpha.11

---
 lerna.json                                |  2 +-
 packages/auth/package.json                |  2 +-
 packages/bbui/package.json                |  2 +-
 packages/builder/package.json             |  8 ++++----
 packages/cli/package.json                 |  2 +-
 packages/client/package.json              |  8 ++++----
 packages/server/package.json              | 10 +++++-----
 packages/standard-components/package.json |  4 ++--
 packages/string-templates/package.json    |  2 +-
 packages/worker/package.json              |  6 +++---
 10 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/lerna.json b/lerna.json
index c690222589..e76714bfd6 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.105-alpha.10",
+  "version": "0.9.105-alpha.11",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index 4c84f81733..a5c5011da4 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.105-alpha.10",
+  "version": "0.9.105-alpha.11",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 5f3858b506..898b69bcde 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.105-alpha.10",
+  "version": "0.9.105-alpha.11",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 9b6355d163..842cb385aa 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.105-alpha.10",
+  "version": "0.9.105-alpha.11",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.10",
-    "@budibase/client": "^0.9.105-alpha.10",
+    "@budibase/bbui": "^0.9.105-alpha.11",
+    "@budibase/client": "^0.9.105-alpha.11",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.105-alpha.10",
+    "@budibase/string-templates": "^0.9.105-alpha.11",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index d2cacac244..dd35e8b715 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.105-alpha.10",
+  "version": "0.9.105-alpha.11",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index 59901f6de9..433e22a94b 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.105-alpha.10",
+  "version": "0.9.105-alpha.11",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -18,9 +18,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.10",
-    "@budibase/standard-components": "^0.9.105-alpha.10",
-    "@budibase/string-templates": "^0.9.105-alpha.10",
+    "@budibase/bbui": "^0.9.105-alpha.11",
+    "@budibase/standard-components": "^0.9.105-alpha.11",
+    "@budibase/string-templates": "^0.9.105-alpha.11",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index 3a709c4609..8dadeaff3c 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.10",
+  "version": "0.9.105-alpha.11",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -62,9 +62,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.10",
-    "@budibase/client": "^0.9.105-alpha.10",
-    "@budibase/string-templates": "^0.9.105-alpha.10",
+    "@budibase/auth": "^0.9.105-alpha.11",
+    "@budibase/client": "^0.9.105-alpha.11",
+    "@budibase/string-templates": "^0.9.105-alpha.11",
     "@elastic/elasticsearch": "7.10.0",
     "@koa/router": "8.0.0",
     "@sendgrid/mail": "7.1.1",
@@ -117,7 +117,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/preset-env": "^7.14.4",
-    "@budibase/standard-components": "^0.9.105-alpha.10",
+    "@budibase/standard-components": "^0.9.105-alpha.11",
     "@jest/test-sequencer": "^24.8.0",
     "@types/bull": "^3.15.1",
     "@types/jest": "^26.0.23",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index e8fc76a4a4..52fcef8862 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -29,11 +29,11 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.9.105-alpha.10",
+  "version": "0.9.105-alpha.11",
   "license": "MIT",
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.10",
+    "@budibase/bbui": "^0.9.105-alpha.11",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index c39494282a..df61768c5e 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.105-alpha.10",
+  "version": "0.9.105-alpha.11",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index a0da12e1c1..8ab52564b6 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.10",
+  "version": "0.9.105-alpha.11",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -23,8 +23,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.10",
-    "@budibase/string-templates": "^0.9.105-alpha.10",
+    "@budibase/auth": "^0.9.105-alpha.11",
+    "@budibase/string-templates": "^0.9.105-alpha.11",
     "@koa/router": "^8.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",
     "aws-sdk": "^2.811.0",

From dd7edd6f6bb5d7cd34f63bb7c8fe92c7b56cce2c Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Mon, 16 Aug 2021 17:37:03 +0000
Subject: [PATCH 18/22] v0.9.105-alpha.12

---
 lerna.json                                |  2 +-
 packages/auth/package.json                |  2 +-
 packages/bbui/package.json                |  2 +-
 packages/builder/package.json             |  8 ++++----
 packages/cli/package.json                 |  2 +-
 packages/client/package.json              |  8 ++++----
 packages/server/package.json              | 10 +++++-----
 packages/standard-components/package.json |  4 ++--
 packages/string-templates/package.json    |  2 +-
 packages/worker/package.json              |  6 +++---
 10 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/lerna.json b/lerna.json
index e76714bfd6..39bf5529e9 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.105-alpha.11",
+  "version": "0.9.105-alpha.12",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index a5c5011da4..67f729ff48 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.105-alpha.11",
+  "version": "0.9.105-alpha.12",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 898b69bcde..0c82052395 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.105-alpha.11",
+  "version": "0.9.105-alpha.12",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 842cb385aa..ab4bae4640 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.105-alpha.11",
+  "version": "0.9.105-alpha.12",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.11",
-    "@budibase/client": "^0.9.105-alpha.11",
+    "@budibase/bbui": "^0.9.105-alpha.12",
+    "@budibase/client": "^0.9.105-alpha.12",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.105-alpha.11",
+    "@budibase/string-templates": "^0.9.105-alpha.12",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index dd35e8b715..1e18287965 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.105-alpha.11",
+  "version": "0.9.105-alpha.12",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index 433e22a94b..b53341c980 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.105-alpha.11",
+  "version": "0.9.105-alpha.12",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -18,9 +18,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.11",
-    "@budibase/standard-components": "^0.9.105-alpha.11",
-    "@budibase/string-templates": "^0.9.105-alpha.11",
+    "@budibase/bbui": "^0.9.105-alpha.12",
+    "@budibase/standard-components": "^0.9.105-alpha.12",
+    "@budibase/string-templates": "^0.9.105-alpha.12",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index 8dadeaff3c..acd4b1618b 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.11",
+  "version": "0.9.105-alpha.12",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -62,9 +62,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.11",
-    "@budibase/client": "^0.9.105-alpha.11",
-    "@budibase/string-templates": "^0.9.105-alpha.11",
+    "@budibase/auth": "^0.9.105-alpha.12",
+    "@budibase/client": "^0.9.105-alpha.12",
+    "@budibase/string-templates": "^0.9.105-alpha.12",
     "@elastic/elasticsearch": "7.10.0",
     "@koa/router": "8.0.0",
     "@sendgrid/mail": "7.1.1",
@@ -117,7 +117,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/preset-env": "^7.14.4",
-    "@budibase/standard-components": "^0.9.105-alpha.11",
+    "@budibase/standard-components": "^0.9.105-alpha.12",
     "@jest/test-sequencer": "^24.8.0",
     "@types/bull": "^3.15.1",
     "@types/jest": "^26.0.23",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 52fcef8862..b94e1f9a01 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -29,11 +29,11 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.9.105-alpha.11",
+  "version": "0.9.105-alpha.12",
   "license": "MIT",
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.11",
+    "@budibase/bbui": "^0.9.105-alpha.12",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index df61768c5e..5ecfe78d50 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.105-alpha.11",
+  "version": "0.9.105-alpha.12",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 8ab52564b6..b96a5c6da9 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.11",
+  "version": "0.9.105-alpha.12",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -23,8 +23,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.11",
-    "@budibase/string-templates": "^0.9.105-alpha.11",
+    "@budibase/auth": "^0.9.105-alpha.12",
+    "@budibase/string-templates": "^0.9.105-alpha.12",
     "@koa/router": "^8.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",
     "aws-sdk": "^2.811.0",

From 8dfef0d3427922fd40d8c53970f4bc7360937973 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 16 Aug 2021 21:15:15 +0200
Subject: [PATCH 19/22] return validation errors

---
 .../components/backend/DataTable/modals/CreateEditRow.svelte | 5 ++++-
 packages/server/src/api/controllers/row/internal.js          | 4 ++--
 packages/server/src/api/index.js                             | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
index 06ab8fd4a9..e99f294380 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
@@ -31,7 +31,10 @@
         .flat()
       // Prevent modal closing if there were errors
       return false
-    } else if (rowResponse.status === 400 || rowResponse.status === 500) {
+    } else if (rowResponse.status === 400 && rowResponse.validationErrors) {
+      errors = Object.keys(rowResponse.validationErrors).map(field => ({message: `${field} ${rowResponse.validationErrors[field][0]}`}))
+      return false
+    } else if (rowResponse.status === 500) {
       errors = [{ message: rowResponse.message }]
       return false
     }
diff --git a/packages/server/src/api/controllers/row/internal.js b/packages/server/src/api/controllers/row/internal.js
index 28c88c1eac..e39bc2aff9 100644
--- a/packages/server/src/api/controllers/row/internal.js
+++ b/packages/server/src/api/controllers/row/internal.js
@@ -57,7 +57,7 @@ exports.patch = async ctx => {
   })
 
   if (!validateResult.valid) {
-    throw validateResult.errors
+    throw { validation: validateResult.errors }
   }
 
   // returned row is cleaned and prepared for writing to DB
@@ -105,7 +105,7 @@ exports.save = async function (ctx) {
   })
 
   if (!validateResult.valid) {
-    throw validateResult.errors
+    throw { validation: validateResult.errors }
   }
 
   // make sure link rows are up to date
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 81601eea1a..f6e5648a26 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -58,6 +58,7 @@ router.use(async (ctx, next) => {
     ctx.body = {
       message: err.message,
       status: ctx.status,
+      validationErrors: err.validation
     }
     if (env.NODE_ENV !== "jest") {
       ctx.log.error(err)

From a2e7fe91dd1d29b25ccec6157e4db3eda5cc1488 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 16 Aug 2021 22:07:15 +0200
Subject: [PATCH 20/22] fix lint issues

---
 .../components/backend/DataTable/modals/CreateEditRow.svelte  | 4 +++-
 packages/server/src/api/index.js                              | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
index e99f294380..ce52287c99 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
@@ -32,7 +32,9 @@
       // Prevent modal closing if there were errors
       return false
     } else if (rowResponse.status === 400 && rowResponse.validationErrors) {
-      errors = Object.keys(rowResponse.validationErrors).map(field => ({message: `${field} ${rowResponse.validationErrors[field][0]}`}))
+      errors = Object.keys(rowResponse.validationErrors).map(field => ({
+        message: `${field} ${rowResponse.validationErrors[field][0]}`,
+      }))
       return false
     } else if (rowResponse.status === 500) {
       errors = [{ message: rowResponse.message }]
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index f6e5648a26..c473bf619b 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -58,7 +58,7 @@ router.use(async (ctx, next) => {
     ctx.body = {
       message: err.message,
       status: ctx.status,
-      validationErrors: err.validation
+      validationErrors: err.validation,
     }
     if (env.NODE_ENV !== "jest") {
       ctx.log.error(err)

From 70600ca43894f512b47ea4b8e62718f45c90b7f4 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Mon, 16 Aug 2021 20:54:33 +0000
Subject: [PATCH 21/22] v0.9.105-alpha.13

---
 lerna.json                                |  2 +-
 packages/auth/package.json                |  2 +-
 packages/bbui/package.json                |  2 +-
 packages/builder/package.json             |  8 ++++----
 packages/cli/package.json                 |  2 +-
 packages/client/package.json              |  8 ++++----
 packages/server/package.json              | 10 +++++-----
 packages/standard-components/package.json |  4 ++--
 packages/string-templates/package.json    |  2 +-
 packages/worker/package.json              |  6 +++---
 10 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/lerna.json b/lerna.json
index 39bf5529e9..8f7438419b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.105-alpha.12",
+  "version": "0.9.105-alpha.13",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index 67f729ff48..a2df17e7fd 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.105-alpha.12",
+  "version": "0.9.105-alpha.13",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 0c82052395..4ee11689d1 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.105-alpha.12",
+  "version": "0.9.105-alpha.13",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index ab4bae4640..e07dd88d03 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.105-alpha.12",
+  "version": "0.9.105-alpha.13",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.12",
-    "@budibase/client": "^0.9.105-alpha.12",
+    "@budibase/bbui": "^0.9.105-alpha.13",
+    "@budibase/client": "^0.9.105-alpha.13",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.105-alpha.12",
+    "@budibase/string-templates": "^0.9.105-alpha.13",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 1e18287965..289fad1e2b 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.105-alpha.12",
+  "version": "0.9.105-alpha.13",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index b53341c980..5036b04ee3 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.105-alpha.12",
+  "version": "0.9.105-alpha.13",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -18,9 +18,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.12",
-    "@budibase/standard-components": "^0.9.105-alpha.12",
-    "@budibase/string-templates": "^0.9.105-alpha.12",
+    "@budibase/bbui": "^0.9.105-alpha.13",
+    "@budibase/standard-components": "^0.9.105-alpha.13",
+    "@budibase/string-templates": "^0.9.105-alpha.13",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index acd4b1618b..dfb069c7da 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.12",
+  "version": "0.9.105-alpha.13",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -62,9 +62,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.12",
-    "@budibase/client": "^0.9.105-alpha.12",
-    "@budibase/string-templates": "^0.9.105-alpha.12",
+    "@budibase/auth": "^0.9.105-alpha.13",
+    "@budibase/client": "^0.9.105-alpha.13",
+    "@budibase/string-templates": "^0.9.105-alpha.13",
     "@elastic/elasticsearch": "7.10.0",
     "@koa/router": "8.0.0",
     "@sendgrid/mail": "7.1.1",
@@ -117,7 +117,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/preset-env": "^7.14.4",
-    "@budibase/standard-components": "^0.9.105-alpha.12",
+    "@budibase/standard-components": "^0.9.105-alpha.13",
     "@jest/test-sequencer": "^24.8.0",
     "@types/bull": "^3.15.1",
     "@types/jest": "^26.0.23",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index b94e1f9a01..9b2954f063 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -29,11 +29,11 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.9.105-alpha.12",
+  "version": "0.9.105-alpha.13",
   "license": "MIT",
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.12",
+    "@budibase/bbui": "^0.9.105-alpha.13",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 5ecfe78d50..cce6f893d9 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.105-alpha.12",
+  "version": "0.9.105-alpha.13",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index b96a5c6da9..f43098f153 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.12",
+  "version": "0.9.105-alpha.13",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -23,8 +23,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.12",
-    "@budibase/string-templates": "^0.9.105-alpha.12",
+    "@budibase/auth": "^0.9.105-alpha.13",
+    "@budibase/string-templates": "^0.9.105-alpha.13",
     "@koa/router": "^8.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",
     "aws-sdk": "^2.811.0",

From a39c4b9d31c4c0eec465bb56add3c34631ee04e1 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 17 Aug 2021 08:36:18 +0000
Subject: [PATCH 22/22] v0.9.105-alpha.14

---
 lerna.json                                |  2 +-
 packages/auth/package.json                |  2 +-
 packages/bbui/package.json                |  2 +-
 packages/builder/package.json             |  8 ++++----
 packages/cli/package.json                 |  2 +-
 packages/client/package.json              |  8 ++++----
 packages/server/package.json              | 10 +++++-----
 packages/standard-components/package.json |  4 ++--
 packages/string-templates/package.json    |  2 +-
 packages/worker/package.json              |  6 +++---
 10 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/lerna.json b/lerna.json
index 8f7438419b..db33770675 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.105-alpha.13",
+  "version": "0.9.105-alpha.14",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index a2df17e7fd..cd20294ed2 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.105-alpha.13",
+  "version": "0.9.105-alpha.14",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 4ee11689d1..71199b780e 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.105-alpha.13",
+  "version": "0.9.105-alpha.14",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index e07dd88d03..ee84d7ff66 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.105-alpha.13",
+  "version": "0.9.105-alpha.14",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.13",
-    "@budibase/client": "^0.9.105-alpha.13",
+    "@budibase/bbui": "^0.9.105-alpha.14",
+    "@budibase/client": "^0.9.105-alpha.14",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.105-alpha.13",
+    "@budibase/string-templates": "^0.9.105-alpha.14",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 289fad1e2b..ef8b3d527d 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.105-alpha.13",
+  "version": "0.9.105-alpha.14",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index 5036b04ee3..624471f34b 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.105-alpha.13",
+  "version": "0.9.105-alpha.14",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -18,9 +18,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.13",
-    "@budibase/standard-components": "^0.9.105-alpha.13",
-    "@budibase/string-templates": "^0.9.105-alpha.13",
+    "@budibase/bbui": "^0.9.105-alpha.14",
+    "@budibase/standard-components": "^0.9.105-alpha.14",
+    "@budibase/string-templates": "^0.9.105-alpha.14",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index dfb069c7da..c10f9122fd 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.13",
+  "version": "0.9.105-alpha.14",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -62,9 +62,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.13",
-    "@budibase/client": "^0.9.105-alpha.13",
-    "@budibase/string-templates": "^0.9.105-alpha.13",
+    "@budibase/auth": "^0.9.105-alpha.14",
+    "@budibase/client": "^0.9.105-alpha.14",
+    "@budibase/string-templates": "^0.9.105-alpha.14",
     "@elastic/elasticsearch": "7.10.0",
     "@koa/router": "8.0.0",
     "@sendgrid/mail": "7.1.1",
@@ -117,7 +117,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/preset-env": "^7.14.4",
-    "@budibase/standard-components": "^0.9.105-alpha.13",
+    "@budibase/standard-components": "^0.9.105-alpha.14",
     "@jest/test-sequencer": "^24.8.0",
     "@types/bull": "^3.15.1",
     "@types/jest": "^26.0.23",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 9b2954f063..32b5197ebf 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -29,11 +29,11 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.9.105-alpha.13",
+  "version": "0.9.105-alpha.14",
   "license": "MIT",
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.13",
+    "@budibase/bbui": "^0.9.105-alpha.14",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index cce6f893d9..6caaffe7eb 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.105-alpha.13",
+  "version": "0.9.105-alpha.14",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index f43098f153..6b4f2c1fa2 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.13",
+  "version": "0.9.105-alpha.14",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -23,8 +23,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.13",
-    "@budibase/string-templates": "^0.9.105-alpha.13",
+    "@budibase/auth": "^0.9.105-alpha.14",
+    "@budibase/string-templates": "^0.9.105-alpha.14",
     "@koa/router": "^8.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",
     "aws-sdk": "^2.811.0",