From fafce24d5b1aad697f9e2e8acba4b671cce3252d Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Fri, 8 Apr 2022 23:15:47 +0100
Subject: [PATCH 1/4] Error messaging for invalid options in editor

---
 packages/bbui/src/Drawer/Drawer.svelte        |  3 +-
 .../OptionsEditor/OptionsEditor.svelte        | 47 ++++++++++++++++---
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index e5eacb1a44..51408c793e 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -6,8 +6,7 @@
 
   export let title
   export let fillWidth
-
-  let visible = false
+  export let visible = false
 
   export function show() {
     if (visible) {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
index 4d74ea9940..4447240c01 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@@ -7,22 +7,57 @@
 
   export let value
 
+  let drawerVisible = false
   let drawer
+  let valid = true
   let tempValue = value || []
 
   const saveFilter = async () => {
-    // Filter out incomplete options
-    tempValue = tempValue.filter(option => option.value && option.label)
-    dispatch("change", tempValue)
-    drawer.hide()
+    // Filter out incomplete options, but if all are incomplete then show error
+    let filteredOptions = tempValue.filter(
+      option => option.value && option.label
+    )
+    if (filteredOptions.length > 0 || tempValue.length === 0) {
+      tempValue = filteredOptions
+      valid = true
+      dispatch("change", tempValue)
+      drawer.hide()
+    } else {
+      valid = false
+    }
+  }
+
+  //If the drawer is hidden or error corrected, reset the validation
+  $: {
+    if (
+      !drawerVisible ||
+      tempValue.some(
+        option => option.label?.length > 0 && option.value?.length > 0
+      )
+    ) {
+      valid = true
+    }
   }
 </script>
 
 <ActionButton on:click={drawer.show}>Define Options</ActionButton>
-<Drawer bind:this={drawer} title="Options">
+<Drawer bind:this={drawer} bind:visible={drawerVisible} title="Options">
   <svelte:fragment slot="description">
-    Define the options for this picker.
+    {#if !valid}
+      <span class="syntax-error"
+        >You must provide option labels and values.</span
+      >
+    {:else}
+      Define the options for this picker.
+    {/if}
   </svelte:fragment>
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <OptionsDrawer bind:options={tempValue} slot="body" />
 </Drawer>
+
+<style>
+  .syntax-error {
+    padding-top: var(--spacing-m);
+    color: var(--red);
+  }
+</style>

From fdca96609b3fbe1e07d2cbc2e9c3cd54486b3955 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Fri, 8 Apr 2022 23:24:46 +0100
Subject: [PATCH 2/4] Simplify condition

---
 .../PropertyControls/OptionsEditor/OptionsEditor.svelte       | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
index 4447240c01..7ee4c32239 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@@ -31,9 +31,7 @@
   $: {
     if (
       !drawerVisible ||
-      tempValue.some(
-        option => option.label?.length > 0 && option.value?.length > 0
-      )
+      tempValue.some(option => option.label && option.value)
     ) {
       valid = true
     }

From 6850bb77fdb4c796e2484444a03dbaf4021f761a Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Mon, 11 Apr 2022 16:08:25 +0100
Subject: [PATCH 3/4] Added error messages to inputs instead

---
 packages/bbui/src/Drawer/Drawer.svelte        |  3 +-
 .../OptionsEditor/OptionsDrawer.svelte        |  2 +
 .../OptionsEditor/OptionsEditor.svelte        | 73 ++++++++++---------
 3 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 51408c793e..e5eacb1a44 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -6,7 +6,8 @@
 
   export let title
   export let fillWidth
-  export let visible = false
+
+  let visible = false
 
   export function show() {
     if (visible) {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
index 340c1eb107..5fab1eaef4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
@@ -41,12 +41,14 @@
               bind:value={option.label}
               label="Label"
               labelPosition="left"
+              error={option.error?.label}
             />
             <Input
               placeholder="Value"
               bind:value={option.value}
               label="Value"
               labelPosition="left"
+              error={option.error?.value}
             />
             <Icon
               name="Close"
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
index 7ee4c32239..83cb3adcd5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@@ -7,55 +7,60 @@
 
   export let value
 
-  let drawerVisible = false
   let drawer
-  let valid = true
   let tempValue = value || []
 
   const saveFilter = async () => {
-    // Filter out incomplete options, but if all are incomplete then show error
-    let filteredOptions = tempValue.filter(
-      option => option.value && option.label
-    )
-    if (filteredOptions.length > 0 || tempValue.length === 0) {
-      tempValue = filteredOptions
-      valid = true
-      dispatch("change", tempValue)
+    let hasError = false
+    for (let i = 0; i < tempValue.length; i++) {
+      let option = tempValue[i]
+      if (!(option.label && option.value)) {
+        option.error = {
+          label: option.label ? undefined : "You must provide a label.",
+          value: option.value ? undefined : "You must provide a value.",
+        }
+        tempValue[i] = option
+        hasError = true
+      }
+    }
+    if (!hasError) {
       drawer.hide()
-    } else {
-      valid = false
+    }
+    dispatch("change", tempValue)
+  }
+
+  const clearOptionErrors = () => {
+    for (let i = 0; i < tempValue.length; i++) {
+      let option = tempValue[i]
+      option.error = undefined
+      tempValue[i] = option
     }
   }
 
-  //If the drawer is hidden or error corrected, reset the validation
   $: {
-    if (
-      !drawerVisible ||
-      tempValue.some(option => option.label && option.value)
-    ) {
-      valid = true
+    for (let i = 0; i < tempValue.length; i++) {
+      let option = tempValue[i]
+      if (option.error?.label && option.label) {
+        option.error.label = undefined
+      }
+      if (option.error?.value && option.value) {
+        option.error.value = undefined
+      }
+      tempValue[i] = option
     }
   }
 </script>
 
-<ActionButton on:click={drawer.show}>Define Options</ActionButton>
-<Drawer bind:this={drawer} bind:visible={drawerVisible} title="Options">
+<ActionButton
+  on:click={() => {
+    clearOptionErrors()
+    drawer.show()
+  }}>Define Options</ActionButton
+>
+<Drawer bind:this={drawer} title="Options">
   <svelte:fragment slot="description">
-    {#if !valid}
-      <span class="syntax-error"
-        >You must provide option labels and values.</span
-      >
-    {:else}
-      Define the options for this picker.
-    {/if}
+    Define the options for this picker.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <OptionsDrawer bind:options={tempValue} slot="body" />
 </Drawer>
-
-<style>
-  .syntax-error {
-    padding-top: var(--spacing-m);
-    color: var(--red);
-  }
-</style>

From 6ee859b04e711f515dc721b9ad944581691522e9 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Tue, 12 Apr 2022 14:54:15 +0100
Subject: [PATCH 4/4] Default option labels and values

---
 .../OptionsEditor/OptionsDrawer.svelte        |  2 -
 .../OptionsEditor/OptionsEditor.svelte        | 50 ++++---------------
 2 files changed, 9 insertions(+), 43 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
index 5fab1eaef4..340c1eb107 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
@@ -41,14 +41,12 @@
               bind:value={option.label}
               label="Label"
               labelPosition="left"
-              error={option.error?.label}
             />
             <Input
               placeholder="Value"
               bind:value={option.value}
               label="Value"
               labelPosition="left"
-              error={option.error?.value}
             />
             <Icon
               name="Close"
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
index 83cb3adcd5..1201edd31e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@@ -10,57 +10,25 @@
   let drawer
   let tempValue = value || []
 
-  const saveFilter = async () => {
-    let hasError = false
+  const saveOptions = async () => {
+    // Filter out incomplete options, default if needed
+    tempValue = tempValue.filter(option => option.value || option.label)
     for (let i = 0; i < tempValue.length; i++) {
       let option = tempValue[i]
-      if (!(option.label && option.value)) {
-        option.error = {
-          label: option.label ? undefined : "You must provide a label.",
-          value: option.value ? undefined : "You must provide a value.",
-        }
-        tempValue[i] = option
-        hasError = true
-      }
-    }
-    if (!hasError) {
-      drawer.hide()
+      option.label = option.label ? option.label : option.value
+      option.value = option.value ? option.value : option.label
+      tempValue[i] = option
     }
     dispatch("change", tempValue)
-  }
-
-  const clearOptionErrors = () => {
-    for (let i = 0; i < tempValue.length; i++) {
-      let option = tempValue[i]
-      option.error = undefined
-      tempValue[i] = option
-    }
-  }
-
-  $: {
-    for (let i = 0; i < tempValue.length; i++) {
-      let option = tempValue[i]
-      if (option.error?.label && option.label) {
-        option.error.label = undefined
-      }
-      if (option.error?.value && option.value) {
-        option.error.value = undefined
-      }
-      tempValue[i] = option
-    }
+    drawer.hide()
   }
 </script>
 
-<ActionButton
-  on:click={() => {
-    clearOptionErrors()
-    drawer.show()
-  }}>Define Options</ActionButton
->
+<ActionButton on:click={drawer.show}>Define Options</ActionButton>
 <Drawer bind:this={drawer} title="Options">
   <svelte:fragment slot="description">
     Define the options for this picker.
   </svelte:fragment>
-  <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
+  <Button cta slot="buttons" on:click={saveOptions}>Save</Button>
   <OptionsDrawer bind:options={tempValue} slot="body" />
 </Drawer>