Merge pull request #11193 from Budibase/action-setting-update

Settings updates

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte

@@ -70,8 +70,9 @@
   } set`
 </script>
 
-<div class="action-count">{actionText}</div>
-<ActionButton on:click={openDrawer}>Define actions</ActionButton>
+<div class="action-editor">
+  <ActionButton on:click={openDrawer}>{actionText}</ActionButton>
+</div>
 
 <Drawer bind:this={drawer} title={"Actions"}>
   <svelte:fragment slot="description">
@@ -89,9 +90,7 @@
 </Drawer>
 
 <style>
-  .action-count {
-    padding-top: 6px;
-    padding-bottom: var(--spacing-s);
-    font-weight: 600;
+  .action-editor :global(.spectrum-ActionButton) {
+    width: 100%;
   }
 </style>

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte

@@ -20,6 +20,7 @@
   let drawer
   let boundValue
 
+  $: text = getText(value)
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchema($currentAsset, datasource)
   $: options = allowCellEditing
@@ -31,6 +32,17 @@
     allowLinks: true,
   })
 
+  const getText = value => {
+    if (!value?.length) {
+      return "All columns"
+    }
+    let text = `${value.length} column`
+    if (value.length !== 1) {
+      text += "s"
+    }
+    return text
+  }
+
   const getSchema = (asset, datasource) => {
     const schema = getSchemaForDatasource(asset, datasource).schema
 
@@ -76,7 +88,7 @@
 </script>
 
 <div class="column-editor">
-  <ActionButton on:click={open}>Configure columns</ActionButton>
+  <ActionButton on:click={open}>{text}</ActionButton>
 </div>
 <Drawer bind:this={drawer} title="Columns">
   <Button cta slot="buttons" on:click={save}>Save</Button>

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte

@@ -12,25 +12,36 @@
   export let componentInstance
   export let value = []
 
-  const convertOldColumnFormat = oldColumns => {
-    if (typeof oldColumns?.[0] === "string") {
-      value = oldColumns.map(field => ({ name: field, displayName: field }))
-    }
-  }
-
-  $: convertOldColumnFormat(value)
-
   const dispatch = createEventDispatcher()
 
   let drawer
   let boundValue
 
+  $: text = getText(value)
+  $: convertOldColumnFormat(value)
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchema($currentAsset, datasource)
   $: options = Object.keys(schema || {})
   $: sanitisedValue = getValidColumns(value, options)
   $: updateBoundValue(sanitisedValue)
 
+  const getText = value => {
+    if (!value?.length) {
+      return "All fields"
+    }
+    let text = `${value.length} field`
+    if (value.length !== 1) {
+      text += "s"
+    }
+    return text
+  }
+
+  const convertOldColumnFormat = oldColumns => {
+    if (typeof oldColumns?.[0] === "string") {
+      value = oldColumns.map(field => ({ name: field, displayName: field }))
+    }
+  }
+
   const getSchema = (asset, datasource) => {
     const schema = getSchemaForDatasource(asset, datasource).schema
 
@@ -75,7 +86,10 @@
   }
 </script>
 
-<ActionButton on:click={open}>Configure fields</ActionButton>
+<div class="field-configuration">
+  <ActionButton on:click={open}>{text}</ActionButton>
+</div>
+
 <Drawer bind:this={drawer} title="Form Fields">
   <svelte:fragment slot="description">
     Configure the fields in your form.
@@ -83,3 +97,9 @@
   <Button cta slot="buttons" on:click={save}>Save</Button>
   <ColumnDrawer slot="body" bind:columns={boundValue} {options} {schema} />
 </Drawer>
+
+<style>
+  .field-configuration :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+</style>