From 3aa7b4e2c90a948fda17f0e13f060f3137042fc0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 8 Jun 2022 15:13:47 +0100
Subject: [PATCH] Update select settings to match the settings bar style where
 possible

---
 .../bbui/src/ActionButton/ActionButton.svelte |  3 +++
 .../design/settings/componentSettings.js      | 13 +++++++++++-
 .../settings/controls/BarButtonList.svelte    | 17 +++++++++++++++
 .../settings/ComponentSettingsSection.svelte  | 13 ++++++++----
 .../settings/ConditionalUIDrawer.svelte       | 21 +++++++------------
 5 files changed, 49 insertions(+), 18 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/BarButtonList.svelte

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index b518ac3d92..2b4d1076c2 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -80,4 +80,7 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
+  :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
+    margin-left: 0;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 7f504c4ea8..56ae3de490 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -18,6 +18,7 @@ import FormFieldSelect from "./controls/FormFieldSelect.svelte"
 import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelte"
 import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
 import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte"
+import BarButtonList from "./controls/BarButtonList.svelte"
 
 const componentMap = {
   text: DrawerBindableCombobox,
@@ -61,6 +62,16 @@ const componentMap = {
   "validation/link": ValidationEditor,
 }
 
-export const getComponentForSettingType = type => {
+export const getComponentForSetting = setting => {
+  const { type, showInBar, barStyle } = setting || {}
+  if (!type) {
+    return null
+  }
+
+  // We can show a clone of the bar settings for certain select settings
+  if (showInBar && type === "select" && barStyle === "buttons") {
+    return BarButtonList
+  }
+
   return componentMap[type]
 }
diff --git a/packages/builder/src/components/design/settings/controls/BarButtonList.svelte b/packages/builder/src/components/design/settings/controls/BarButtonList.svelte
new file mode 100644
index 0000000000..01f198c5ec
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/BarButtonList.svelte
@@ -0,0 +1,17 @@
+<script>
+  import { ActionButton, ActionGroup } from "@budibase/bbui"
+
+  export let value
+  export let onChange
+  export let options
+</script>
+
+<ActionGroup>
+  {#each options as option}
+    <ActionButton
+      icon={option.barIcon}
+      quiet={option.value !== value}
+      on:click={() => onChange(option.value)}
+    />
+  {/each}
+</ActionGroup>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
index 2e04401b0a..60b0b1b5df 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
@@ -6,7 +6,7 @@
   import LayoutSelect from "components/design/settings/controls/LayoutSelect.svelte"
   import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
-  import { getComponentForSettingType } from "components/design/settings/componentSettings"
+  import { getComponentForSetting } from "components/design/settings/componentSettings"
   import { Utils } from "@budibase/frontend-core"
 
   export let componentDefinition
@@ -51,7 +51,7 @@
   })
 
   const canRenderControl = setting => {
-    const control = getComponentForSettingType(setting?.type)
+    const control = getComponentForSetting(setting)
     if (!control) {
       return false
     }
@@ -104,7 +104,7 @@
       {#if canRenderControl(setting)}
         <PropertyControl
           type={setting.type}
-          control={getComponentForSettingType(setting.type)}
+          control={getComponentForSetting(setting)}
           label={setting.label}
           key={setting.key}
           value={componentInstance[setting.key] ??
@@ -112,8 +112,13 @@
           nested={setting.nested}
           onChange={val => updateProp(setting.key, val)}
           props={{
-            options: setting.options || [],
+            // Generic settings
             placeholder: setting.placeholder || null,
+
+            // Select settings
+            options: setting.options || [],
+
+            // Number fields
             min: setting.min || null,
             max: setting.max || null,
           }}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
index 2605343c45..b40b33744f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
@@ -14,7 +14,7 @@
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { LuceneUtils, Constants } from "@budibase/frontend-core"
   import { selectedComponent } from "builderStore"
-  import { getComponentForSettingType } from "components/design/settings/componentSettings"
+  import { getComponentForSetting } from "components/design/settings/componentSettings"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import { getComponentSettings } from "builderStore/componentUtils"
 
@@ -71,11 +71,6 @@
     return settings.find(setting => setting.key === key)
   }
 
-  const getComponentForSetting = key => {
-    const settingDefinition = getSettingDefinition(key)
-    return getComponentForSettingType(settingDefinition?.type || "text")
-  }
-
   const addCondition = () => {
     conditions = [
       ...conditions,
@@ -154,6 +149,7 @@
           on:consider={updateConditions}
         >
           {#each conditions as condition (condition.id)}
+            {@const definition = getSettingDefinition(condition.setting)}
             <div
               class="condition"
               class:update={condition.action === "update"}
@@ -178,18 +174,17 @@
                   bind:value={condition.setting}
                 />
                 <div>TO</div>
-                {#if getSettingDefinition(condition.setting)}
+                {#if definition}
                   <PropertyControl
-                    type={getSettingDefinition(condition.setting).type}
-                    control={getComponentForSetting(condition.setting)}
-                    key={getSettingDefinition(condition.setting).key}
+                    type={definition.type}
+                    control={getComponentForSetting(definition)}
+                    key={definition.key}
                     value={condition.settingValue}
                     componentInstance={$selectedComponent}
                     onChange={val => (condition.settingValue = val)}
                     props={{
-                      options: getSettingDefinition(condition.setting).options,
-                      placeholder: getSettingDefinition(condition.setting)
-                        .placeholder,
+                      options: definition.options,
+                      placeholder: definition.placeholder,
                     }}
                     {bindings}
                   />