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

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

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