From 83f7b28fdd0990963e718a461ed14a4c0857e50e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 11 Jul 2023 11:17:11 +0100
Subject: [PATCH] Update field configuration setting to be full width and show
 number of fields

---
 .../FieldConfiguration.svelte                 | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
index 2778ce4f74..f9dccf586c 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/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>