From c44ba8b995d3dff1e4d2eb0d4b7d945780d020aa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 16 Sep 2020 14:38:18 +0100
Subject: [PATCH] Use bbui selects for all selects in workflow steps

---
 .../ParamInputs/ModelSelector.svelte          |  5 +-
 .../ParamInputs/RecordSelector.svelte         | 46 ++++++++++++++-----
 .../SetupPanel/WorkflowBlockSetup.svelte      |  2 +-
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
index e95306306e..8251e605c3 100644
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
@@ -1,14 +1,15 @@
 <script>
   import { backendUiStore } from "builderStore"
+  import { Select } from "@budibase/bbui"
 
   export let value
 </script>
 
 <div class="block-field">
-  <select class="budibase__input" bind:value>
+  <Select bind:value secondary thin>
     <option value="">Choose an option</option>
     {#each $backendUiStore.models as model}
       <option value={model._id}>{model.name}</option>
     {/each}
-  </select>
+  </Select>
 </div>
diff --git a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
index 809d5847b5..f0b278da89 100644
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
@@ -1,11 +1,11 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { Input, Label } from "@budibase/bbui"
+  import { Input, Select, Label } from "@budibase/bbui"
 
   export let value
   $: value = value || {}
   $: model = $backendUiStore.models.find(model => model._id === value?.modelId)
-  $: schemaFields = Object.keys(model?.schema ?? {})
+  $: schemaFields = Object.entries(model?.schema ?? {})
 
   function setParsedValue(evt, field) {
     const fieldSchema = model?.schema[field]
@@ -20,30 +20,52 @@
 </script>
 
 <div class="block-field">
-  <select class="budibase__input" bind:value={value.modelId}>
+  <Select bind:value={value.modelId} thin secondary>
     <option value="">Choose an option</option>
     {#each $backendUiStore.models as model}
       <option value={model._id}>{model.name}</option>
     {/each}
-  </select>
+  </Select>
 </div>
 
 {#if schemaFields.length}
   <div class="bb-margin-xl block-field">
-    {#each schemaFields as field}
+    {#each schemaFields as [field, schema]}
       <div class="bb-margin-xl capitalise">
-        <Input
-          thin
-          value={value[field]}
-          label={field}
-          on:change={e => setParsedValue(e, field)} />
+        {#if schema.constraints?.inclusion?.length}
+          <div class="field-label">{field}</div>
+          <Select
+            thin
+            secondary
+            bind:value={value[field]}>
+            <option value="">Choose an option</option>
+            {#each schema.constraints.inclusion as option}
+              <option value={option}>{option}</option>
+            {/each}
+          </Select>
+        {:else}
+          <Input
+            thin
+            value={value[field]}
+            label={field}
+            on:change={e => setParsedValue(e, field)} />
+        {/if}
       </div>
     {/each}
   </div>
 {/if}
 
 <style>
-  .capitalise :global(label) {
-    text-transform: capitalize !important;
+  .field-label {
+    color: var(--ink);
+    margin-bottom: 12px;
+    display: flex;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: sans-serif;
+  }
+
+  .capitalise :global(label), .field-label {
+    text-transform: capitalize;
   }
 </style>
diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
index 79057fd845..ea11199c69 100644
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@@ -12,7 +12,7 @@
   {#each inputs as [key, value]}
     <div class="bb-margin-xl block-field">
       <div class="field-label">{value.title}</div>
-      {#if value.type === 'string' && value.enum}
+      {#if value.type === 'string' && value.enum?.length}
         <Select bind:value={block.inputs[key]} thin secondary>
           <option value="">Choose an option</option>
           {#each value.enum as option}