From b6e3c537e919b64570d0275788a109e6335b26e2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 16 Aug 2021 11:24:25 +0100
Subject: [PATCH 1/6] Add ability for select options to be loaded from a data
 provider

---
 .../ComponentSettingsSection.svelte           | 24 ++++++++-
 packages/standard-components/manifest.json    | 49 +++++++++++++++++++
 .../src/forms/OptionsField.svelte             | 45 ++++++++++++++++-
 3 files changed, 115 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index 972a2bb7fe..6944163f26 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -32,9 +32,29 @@
     if (!control) {
       return false
     }
-    if (setting.dependsOn && isEmpty(componentInstance[setting.dependsOn])) {
-      return false
+
+    // Parse dependant settings
+    if (setting.dependsOn) {
+      let dependantSetting = setting.dependsOn
+      let dependantValue = null
+      if (typeof setting.dependsOn === "object") {
+        dependantSetting = setting.dependsOn.setting
+        dependantValue = setting.dependsOn.value
+      }
+      if (!dependantSetting) {
+        return false
+      }
+
+      // If no specific value is depended upon, check if a value exists at all
+      // for the dependent setting
+      if (dependantValue == null) {
+        return !isEmpty(componentInstance[dependantSetting])
+      }
+
+      // Otherwise check the value matches
+      return componentInstance[dependantSetting] === dependantValue
     }
+
     return true
   }
 </script>
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index a45283d63a..ede9bdd2b4 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1893,6 +1893,7 @@
         "type": "select",
         "label": "Type",
         "key": "optionsType",
+        "defaultValue": "select",
         "placeholder": "Pick an options type",
         "options": [
           {
@@ -1915,6 +1916,54 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Options source",
+        "key": "optionsSource",
+        "defaultValue": "schema",
+        "placeholder": "Pick an options source",
+        "options": [
+          {
+            "label": "Schema",
+            "value": "schema"
+          },
+          {
+            "label": "Data provider",
+            "value": "provider"
+          },
+          {
+            "label": "Custom",
+            "value": "custom"
+          }
+        ]
+      },
+      {
+        "type": "dataProvider",
+        "label": "Options Provider",
+        "key": "dataProvider",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "provider"
+        }
+      },
+      {
+        "type": "field",
+        "label": "Label Column",
+        "key": "labelColumn",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "provider"
+        }
+      },
+      {
+        "type": "field",
+        "label": "Value Column",
+        "key": "valueColumn",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "provider"
+        }
       }
     ]
   },
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 18debfb23d..f745e07012 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -8,10 +8,51 @@
   export let disabled = false
   export let optionsType = "select"
   export let defaultValue
+  export let optionsSource = "schema"
+  export let dataProvider
+  export let labelColumn
+  export let valueColumn
 
   let fieldState
   let fieldApi
   let fieldSchema
+
+  $: flatOptions = optionsSource == null || optionsSource === "schema"
+  $: options = getOptions(
+    optionsSource,
+    fieldSchema,
+    dataProvider,
+    labelColumn,
+    valueColumn
+  )
+
+  const getOptions = (
+    optionsSource,
+    fieldSchema,
+    dataProvider,
+    labelColumn,
+    valueColumn
+  ) => {
+    // Take options from schema
+    if (optionsSource == null || optionsSource === "schema") {
+      return fieldSchema?.constraints?.inclusion ?? []
+    }
+
+    // Extract options from data provider
+    if (optionsSource === "provider" && valueColumn) {
+      let optionsSet = {}
+      dataProvider?.rows?.forEach(row => {
+        const value = row?.[valueColumn]
+        if (value) {
+          const label = row[labelColumn] || value
+          optionsSet[value] = { value, label }
+        }
+      })
+      return Object.values(optionsSet)
+    }
+
+    return []
+  }
 </script>
 
 <Field
@@ -31,9 +72,11 @@
         id={$fieldState.fieldId}
         disabled={$fieldState.disabled}
         error={$fieldState.error}
-        options={fieldSchema?.constraints?.inclusion ?? []}
+        {options}
         {placeholder}
         on:change={e => fieldApi.setValue(e.detail)}
+        getOptionLabel={flatOptions ? x => x : x => x.label}
+        getOptionValue={flatOptions ? x => x : x => x.value}
       />
     {:else if optionsType === "radio"}
       <RadioGroup

From 4c3736554922c73384736094ccdfc6ab086dfc42 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 17 Aug 2021 10:32:01 +0100
Subject: [PATCH 2/6] Allow users to define custom picker options

---
 .../OptionsEditor/OptionsDrawer.svelte        | 83 +++++++++++++++++++
 .../OptionsEditor/OptionsEditor.svelte        | 29 +++++++
 .../PropertyControls/componentSettings.js     |  3 +
 packages/standard-components/manifest.json    |  8 ++
 .../src/forms/OptionsField.svelte             |  6 ++
 5 files changed, 129 insertions(+)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
new file mode 100644
index 0000000000..e3b3fa1ab9
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
@@ -0,0 +1,83 @@
+<script>
+  import {
+    Icon,
+    Button,
+    Input,
+    DrawerContent,
+    Layout,
+    Body,
+  } from "@budibase/bbui"
+  import { generate } from "shortid"
+
+  export let options = []
+
+  const removeOption = id => {
+    options = options.filter(option => option.id !== id)
+  }
+
+  const addOption = () => {
+    options = [
+      ...options,
+      {
+        id: generate(),
+        label: null,
+        value: null,
+      },
+    ]
+  }
+</script>
+
+<DrawerContent>
+  <div class="container">
+    <Layout noPadding>
+      <Body size="S">
+        {#if !options.length}
+          Add a custom option.
+        {/if}
+      </Body>
+
+      <div class="options">
+        {#each options as option (option.id)}
+          <Input
+            placeholder="Label"
+            bind:value={option.label}
+            label="Label"
+            labelPosition="left"
+          />
+          <Input
+            placeholder="Value"
+            bind:value={option.value}
+            label="Value"
+            labelPosition="left"
+          />
+          <Icon
+            name="Close"
+            hoverable
+            size="S"
+            on:click={() => removeOption(option.id)}
+          />
+        {/each}
+      </div>
+      <div>
+        <Button icon="AddCircle" size="M" on:click={addOption} secondary
+          >Add Option</Button
+        >
+      </div>
+    </Layout>
+  </div>
+</DrawerContent>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+  .options {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    align-items: center;
+    grid-template-columns: auto auto 20px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
new file mode 100644
index 0000000000..78d2dc5302
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { notifications, ActionButton, Button, Drawer } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import OptionsDrawer from "./OptionsDrawer.svelte"
+
+  const dispatch = createEventDispatcher()
+
+  export let value
+
+  let drawer
+  let tempValue = value || []
+
+  const saveFilter = async () => {
+    // Filter out null objects
+    tempValue = tempValue.filter(optionValue => optionValue.value)
+    dispatch("change", tempValue)
+    notifications.success("Options saved.")
+    drawer.hide()
+  }
+</script>
+
+<ActionButton on:click={drawer.show}>Define Options</ActionButton>
+<Drawer bind:this={drawer} title="Options">
+  <svelte:fragment slot="description">
+    Add custom picker otpions
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
+  <OptionsDrawer bind:options={tempValue} slot="body" />
+</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..641ae9edb3 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@@ -20,6 +20,8 @@ import LongFormFieldSelect from "./LongFormFieldSelect.svelte"
 import DateTimeFieldSelect from "./DateTimeFieldSelect.svelte"
 import AttachmentFieldSelect from "./AttachmentFieldSelect.svelte"
 import RelationshipFieldSelect from "./RelationshipFieldSelect.svelte"
+import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
+
 
 const componentMap = {
   text: Input,
@@ -34,6 +36,7 @@ const componentMap = {
   icon: IconSelect,
   field: FieldSelect,
   multifield: MultiFieldSelect,
+  options: OptionsEditor,
   schema: SchemaSelect,
   section: SectionSelect,
   navigation: NavigationEditor,
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index ede9bdd2b4..283ef1e056 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1964,7 +1964,15 @@
           "setting": "optionsSource",
           "value": "provider"
         }
+      }, 
+      {
+        "type": "options",
+        "key": "customOptions",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "custom"
       }
+    }
     ]
   },
   "booleanfield": {
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index f745e07012..6078984990 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -12,6 +12,7 @@
   export let dataProvider
   export let labelColumn
   export let valueColumn
+  export let customOptions
 
   let fieldState
   let fieldApi
@@ -51,6 +52,11 @@
       return Object.values(optionsSet)
     }
 
+    // Extract custom options
+    if (optionsSource === "custom" && customOptions) {
+      return customOptions
+    }
+
     return []
   }
 </script>

From ac850fdc19b5652d49f7c25e45f291e6c905f0dd Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 17 Aug 2021 11:17:03 +0100
Subject: [PATCH 3/6] text updates

---
 .../PropertyControls/OptionsEditor/OptionsDrawer.svelte         | 2 +-
 .../PropertyControls/OptionsEditor/OptionsEditor.svelte         | 2 +-
 .../PropertiesPanel/PropertyControls/componentSettings.js       | 1 -
 3 files changed, 2 insertions(+), 3 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 e3b3fa1ab9..52fe51912c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
@@ -32,7 +32,7 @@
     <Layout noPadding>
       <Body size="S">
         {#if !options.length}
-          Add a custom option.
+          Add an option to get started.
         {/if}
       </Body>
 
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 78d2dc5302..3ab3f9a24a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@@ -22,7 +22,7 @@
 <ActionButton on:click={drawer.show}>Define Options</ActionButton>
 <Drawer bind:this={drawer} title="Options">
   <svelte:fragment slot="description">
-    Add custom picker otpions
+    Add custom picker options
   </svelte:fragment>
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <OptionsDrawer bind:options={tempValue} slot="body" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
index 641ae9edb3..edea13ddf9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@@ -22,7 +22,6 @@ import AttachmentFieldSelect from "./AttachmentFieldSelect.svelte"
 import RelationshipFieldSelect from "./RelationshipFieldSelect.svelte"
 import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
 
-
 const componentMap = {
   text: Input,
   select: Select,

From e274eeffce37ed200d58ac8d2250bfe7f5bb0824 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 17 Aug 2021 11:33:09 +0100
Subject: [PATCH 4/6] Tidy up options drawer styles

---
 .../OptionsEditor/OptionsDrawer.svelte        | 67 +++++++++----------
 .../OptionsEditor/OptionsEditor.svelte        |  2 +-
 2 files changed, 34 insertions(+), 35 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 52fe51912c..340c1eb107 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
@@ -29,39 +29,38 @@
 
 <DrawerContent>
   <div class="container">
-    <Layout noPadding>
-      <Body size="S">
-        {#if !options.length}
-          Add an option to get started.
-        {/if}
-      </Body>
-
-      <div class="options">
-        {#each options as option (option.id)}
-          <Input
-            placeholder="Label"
-            bind:value={option.label}
-            label="Label"
-            labelPosition="left"
-          />
-          <Input
-            placeholder="Value"
-            bind:value={option.value}
-            label="Value"
-            labelPosition="left"
-          />
-          <Icon
-            name="Close"
-            hoverable
-            size="S"
-            on:click={() => removeOption(option.id)}
-          />
-        {/each}
-      </div>
+    <Layout noPadding gap="S">
+      {#if !options.length}
+        <Body size="S">Add an option to get started.</Body>
+      {/if}
+      {#if options?.length}
+        <div class="options">
+          {#each options as option (option.id)}
+            <Input
+              placeholder="Label"
+              bind:value={option.label}
+              label="Label"
+              labelPosition="left"
+            />
+            <Input
+              placeholder="Value"
+              bind:value={option.value}
+              label="Value"
+              labelPosition="left"
+            />
+            <Icon
+              name="Close"
+              hoverable
+              size="S"
+              on:click={() => removeOption(option.id)}
+            />
+          {/each}
+        </div>
+      {/if}
       <div>
-        <Button icon="AddCircle" size="M" on:click={addOption} secondary
-          >Add Option</Button
-        >
+        <Button icon="AddCircle" size="M" on:click={addOption} secondary>
+          Add Option
+        </Button>
       </div>
     </Layout>
   </div>
@@ -70,7 +69,7 @@
 <style>
   .container {
     width: 100%;
-    max-width: 1000px;
+    max-width: 800px;
     margin: 0 auto;
   }
   .options {
@@ -78,6 +77,6 @@
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
     align-items: center;
-    grid-template-columns: auto auto 20px;
+    grid-template-columns: 1fr 1fr auto;
   }
 </style>
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 3ab3f9a24a..e486312fe9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@@ -22,7 +22,7 @@
 <ActionButton on:click={drawer.show}>Define Options</ActionButton>
 <Drawer bind:this={drawer} title="Options">
   <svelte:fragment slot="description">
-    Add custom picker options
+    Define the options for this picker.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <OptionsDrawer bind:options={tempValue} slot="body" />

From e92455dc88c77f2bdff4c897c972e514260e58eb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 17 Aug 2021 11:34:46 +0100
Subject: [PATCH 5/6] Ensure both label and value are set when defining custom
 options

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

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 e486312fe9..aa3d8c69cf 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@@ -12,7 +12,7 @@
 
   const saveFilter = async () => {
     // Filter out null objects
-    tempValue = tempValue.filter(optionValue => optionValue.value)
+    tempValue = tempValue.filter(option => option.value && option.label)
     dispatch("change", tempValue)
     notifications.success("Options saved.")
     drawer.hide()

From 8a12aaf27a2a8189b8ad0ce6435859a9d6fdac7c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 17 Aug 2021 11:36:33 +0100
Subject: [PATCH 6/6] Remove notification when saving custom options

---
 .../PropertyControls/OptionsEditor/OptionsEditor.svelte      | 5 ++---
 1 file changed, 2 insertions(+), 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 aa3d8c69cf..4d74ea9940 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { notifications, ActionButton, Button, Drawer } from "@budibase/bbui"
+  import { ActionButton, Button, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import OptionsDrawer from "./OptionsDrawer.svelte"
 
@@ -11,10 +11,9 @@
   let tempValue = value || []
 
   const saveFilter = async () => {
-    // Filter out null objects
+    // Filter out incomplete options
     tempValue = tempValue.filter(option => option.value && option.label)
     dispatch("change", tempValue)
-    notifications.success("Options saved.")
     drawer.hide()
   }
 </script>