From 12f56744c3836757fb69700424b77738f40662f4 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 25 Aug 2021 14:05:23 +0100
Subject: [PATCH] Add validation for array field

---
 .../ValidationEditor/ValidationDrawer.svelte  |  9 +++++--
 .../PropertyControls/componentSettings.js     |  1 +
 packages/standard-components/manifest.json    |  2 +-
 .../src/forms/MultiFieldSelect.svelte         | 17 +++++++-----
 .../src/forms/validation.js                   | 27 ++++++++++++++++---
 5 files changed, 43 insertions(+), 13 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 b4da2e8e6e..e24a779b62 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
@@ -9,6 +9,7 @@
     Body,
     Input,
     DatePicker,
+    Multiselect,
   } from "@budibase/bbui"
   import { currentAsset, selectedComponent } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/storeUtils"
@@ -102,6 +103,11 @@
       Constraints.MinLength,
       Constraints.MaxLength,
     ],
+    ["array"]: [
+      Constraints.Required,
+      Constraints.MinLength,
+      Constraints.MaxLength,
+    ],
   }
 
   $: dataSourceSchema = getDataSourceSchema($currentAsset, $selectedComponent)
@@ -109,7 +115,6 @@
   $: schemaRules = parseRulesFromSchema(field, dataSourceSchema || {})
   $: fieldType = type?.split("/")[1] || "string"
   $: constraintOptions = getConstraintsForType(fieldType)
-
   const getConstraintsForType = type => {
     return ConstraintMap[type]
   }
@@ -283,7 +288,7 @@
                   />
                 {:else}
                   <!-- Otherwise we render a component based on the type -->
-                  {#if ["string", "number", "options", "longform"].includes(rule.type)}
+                  {#if ["string", "number", "options", "longform", "array"].includes(rule.type)}
                     <Input
                       disabled={rule.constraint === "required"}
                       bind:value={rule.value}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
index 3ca3f7f5c9..ae7fe92527 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@@ -47,6 +47,7 @@ const componentMap = {
   // 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/array": ValidationEditor,
   "validation/number": ValidationEditor,
   "validation/boolean": ValidationEditor,
   "validation/datetime": ValidationEditor,
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 948ebc91d8..a16fe9efc6 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -2101,7 +2101,7 @@
         }
       },
       {
-        "type": "validation/string",
+        "type": "validation/array",
         "label": "Validation",
         "key": "validation"
       }
diff --git a/packages/standard-components/src/forms/MultiFieldSelect.svelte b/packages/standard-components/src/forms/MultiFieldSelect.svelte
index 4e6777d96c..293a29976d 100644
--- a/packages/standard-components/src/forms/MultiFieldSelect.svelte
+++ b/packages/standard-components/src/forms/MultiFieldSelect.svelte
@@ -40,10 +40,15 @@
   bind:fieldApi
   bind:fieldSchema
 >
-  <Multiselect
-    getOptionLabel={flatOptions ? x => x : x => x.label}
-    getOptionValue={flatOptions ? x => x : x => x.value}
-    {placeholder}
-    {options}
-  />
+  {#if fieldState}
+    <Multiselect
+      getOptionLabel={flatOptions ? x => x : x => x.label}
+      getOptionValue={flatOptions ? x => x : x => x.value}
+      id={$fieldState.fieldId}
+      disabled={$fieldState.disabled}
+      on:change={e => fieldApi.setValue(e.detail)}
+      {placeholder}
+      {options}
+    />
+  {/if}
 </Field>
diff --git a/packages/standard-components/src/forms/validation.js b/packages/standard-components/src/forms/validation.js
index 30b6fd7ca7..6109d7e2cb 100644
--- a/packages/standard-components/src/forms/validation.js
+++ b/packages/standard-components/src/forms/validation.js
@@ -25,7 +25,7 @@ export const createValidatorFromConstraints = (
       schemaConstraints.presence?.allowEmpty === false
     ) {
       rules.push({
-        type: "string",
+        type: schemaConstraints.type == "array" ? "array" : "string",
         constraint: "required",
         error: "Required",
       })
@@ -63,7 +63,7 @@ export const createValidatorFromConstraints = (
     }
 
     // Inclusion constraint
-    if (exists(schemaConstraints.inclusion)) {
+    if (!schemaConstraints.type == "array" ? exists(schemaConstraints.inclusion) : false) {
       const options = schemaConstraints.inclusion || []
       rules.push({
         type: "string",
@@ -73,6 +73,18 @@ export const createValidatorFromConstraints = (
       })
     }
 
+    // Inclusion constraint
+    if (schemaConstraints.type == "array" ? exists(schemaConstraints.inclusion[0]) : false ) {
+      const options = schemaConstraints.inclusion[0] || []
+      rules.push({
+        type: "array",
+        constraint: "inclusion",
+        value: options,
+        error: "Invalid value",
+      })
+    }
+    
+
     // Date constraint
     if (exists(schemaConstraints.datetime?.earliest)) {
       const limit = schemaConstraints.datetime.earliest
@@ -142,7 +154,7 @@ const evaluateRule = (rule, value) => {
  * 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
+ * @returns {boolean|string|*|number|null|array} the parsed value, or null if invalid
  */
 const parseType = (value, type) => {
   // Treat nulls or empty strings as null
@@ -202,6 +214,13 @@ const parseType = (value, type) => {
     return value
   }
 
+  if (type === "array") {
+    if (!Array.isArray(value) || !value.length) {
+      return null
+    }
+    return value
+    }
+
   // If some unknown type, treat as null to avoid breaking validators
   return null
 }
@@ -239,7 +258,7 @@ const maxValueHandler = (value, rule) => {
 
 // Evaluates an inclusion constraint
 const inclusionHandler = (value, rule) => {
-  return value == null || rule.value.includes(value)
+  return value == null || rule.type == "array" ? rule.value.map(val => val === value) : rule.value.includes(value)
 }
 
 // Evaluates an equal constraint