From cb2a19620bea0c00cc649506c390c59dac55abb6 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 3 Aug 2023 09:29:12 +0100
Subject: [PATCH 01/17] Initial commit

---
 .../src/DetailSummary/DetailSummary.svelte    |   4 +-
 .../src/builderStore/store/frontend.js        |  89 ++++++----
 .../EditFieldPopover.svelte                   | 161 ++++++++++++++++++
 .../FieldConfiguration.svelte                 | 155 +++++++++++++----
 .../settings/controls/SettingsList.svelte     | 133 +++++++++++++++
 .../settings/ComponentSettingsSection.svelte  |  36 ++--
 packages/client/manifest.json                 | 110 ++++++------
 .../app/blocks/form/FormBlock.svelte          |  30 +++-
 .../app/blocks/form/InnerFormBlock.svelte     |  34 ++--
 9 files changed, 591 insertions(+), 161 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/SettingsList.svelte

diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index f7e2611792..daa9f3f5ca 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -44,7 +44,9 @@
     align-items: stretch;
     border-bottom: var(--border-light);
   }
-
+  .property-group-container:last-child {
+    border-bottom: 0px;
+  }
   .property-group-name {
     cursor: pointer;
     display: flex;
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index f312a58e97..4df26182e6 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -93,6 +93,40 @@ const INITIAL_FRONTEND_STATE = {
   tourNodes: null,
 }
 
+export const updateComponentSetting = (name, value) => {
+  return component => {
+    if (!name || !component) {
+      return false
+    }
+    // Skip update if the value is the same
+    if (component[name] === value) {
+      return false
+    }
+
+    const settings = getComponentSettings(component._component)
+    const updatedSetting = settings.find(setting => setting.key === name)
+
+    if (
+      updatedSetting?.type === "dataSource" ||
+      updatedSetting?.type === "table"
+    ) {
+      const { schema } = getSchemaForDatasource(null, value)
+      const columnNames = Object.keys(schema || {})
+      const multifieldKeysToSelectAll = settings
+        .filter(setting => {
+          return setting.type === "multifield" && setting.selectAllFields
+        })
+        .map(setting => setting.key)
+
+      multifieldKeysToSelectAll.forEach(key => {
+        component[key] = columnNames
+      })
+    }
+
+    component[name] = value
+  }
+}
+
 export const getFrontendStore = () => {
   const store = writable({ ...INITIAL_FRONTEND_STATE })
   let websocket
@@ -111,13 +145,18 @@ export const getFrontendStore = () => {
     }
     let clone = cloneDeep(screen)
     const result = patchFn(clone)
+    console.log("sequentialScreenPatch ", result)
     if (result === false) {
       return
     }
-    return await store.actions.screens.save(clone)
+    return
+    //return await store.actions.screens.save(clone)
   })
 
   store.actions = {
+    tester: (name, value) => {
+      return updateComponentSetting(name, value)
+    },
     reset: () => {
       store.set({ ...INITIAL_FRONTEND_STATE })
       websocket?.disconnect()
@@ -825,6 +864,7 @@ export const getFrontendStore = () => {
       },
       patch: async (patchFn, componentId, screenId) => {
         // Use selected component by default
+        console.log("front end patch")
         if (!componentId || !screenId) {
           const state = get(store)
           componentId = componentId || state.selectedComponentId
@@ -834,6 +874,7 @@ export const getFrontendStore = () => {
           return
         }
         const patchScreen = screen => {
+          // findComponent looks in the tree not comp.settings[0]
           let component = findComponent(screen.props, componentId)
           if (!component) {
             return false
@@ -842,6 +883,18 @@ export const getFrontendStore = () => {
         }
         await store.actions.screens.patch(patchScreen, screenId)
       },
+      // Temporary
+      customPatch: async (patchFn, componentId, screenId) => {
+        console.log("patchUpdate :")
+        if (!componentId || !screenId) {
+          const state = get(store)
+          componentId = componentId || state.selectedComponentId
+          screenId = screenId || state.selectedScreenId
+        }
+        if (!componentId || !screenId || !patchFn) {
+          return
+        }
+      },
       delete: async component => {
         if (!component) {
           return
@@ -1207,37 +1260,9 @@ export const getFrontendStore = () => {
         })
       },
       updateSetting: async (name, value) => {
-        await store.actions.components.patch(component => {
-          if (!name || !component) {
-            return false
-          }
-          // Skip update if the value is the same
-          if (component[name] === value) {
-            return false
-          }
-
-          const settings = getComponentSettings(component._component)
-          const updatedSetting = settings.find(setting => setting.key === name)
-
-          if (
-            updatedSetting?.type === "dataSource" ||
-            updatedSetting?.type === "table"
-          ) {
-            const { schema } = getSchemaForDatasource(null, value)
-            const columnNames = Object.keys(schema || {})
-            const multifieldKeysToSelectAll = settings
-              .filter(setting => {
-                return setting.type === "multifield" && setting.selectAllFields
-              })
-              .map(setting => setting.key)
-
-            multifieldKeysToSelectAll.forEach(key => {
-              component[key] = columnNames
-            })
-          }
-
-          component[name] = value
-        })
+        await store.actions.components.patch(
+          updateComponentSetting(name, value)
+        )
       },
       requestEjectBlock: componentId => {
         store.actions.preview.sendEvent("eject-block", componentId)
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
new file mode 100644
index 0000000000..859f019a26
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -0,0 +1,161 @@
+<!-- FormBlockFieldSettingsPopover -->
+<script>
+  import { Icon, Popover, Layout } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import { cloneDeep } from "lodash/fp"
+
+  import ComponentSettingsSection from "../../../../../pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte"
+
+  export let anchor
+  export let field
+
+  export let componentBindings
+  export let bindings
+  export let parent
+
+  let popover
+
+  $: sudoComponentInstance = buildSudoInstance(field)
+  $: componentDef = store.actions.components.getDefinition(field._component)
+  $: parsedComponentDef = processComponentDefinitionSettings(componentDef)
+
+  const buildSudoInstance = instance => {
+    let clone = cloneDeep(instance)
+
+    // only do this IF necessary
+    const instanceCheck = store.actions.components.createInstance(
+      clone._component,
+      {
+        _instanceName: instance.displayName,
+        field: instance.name, //Must be fixed
+        label: instance.displayName,
+        placeholder: instance.displayName,
+      },
+      {} //?
+    )
+
+    // mutating on load would achieve this.
+    // Would need to replace the entire config at this point
+    // console.log(instanceCheck)
+
+    return instanceCheck
+  }
+
+  // Ensures parent bindings are pushed down
+  // Confirm this
+  const processComponentDefinitionSettings = componentDef => {
+    const clone = cloneDeep(componentDef)
+    clone.settings.forEach(setting => {
+      if (setting.type === "text") {
+        setting.nested = true
+      }
+    })
+    return clone
+  }
+
+  // Current core update setting fn
+  const updateSetting = async (setting, value) => {
+    console.log("Custom Save Setting", setting, value)
+    console.log("The parent", parent)
+
+    //updateBlockFieldSetting in frontend?
+    const nestedFieldInstance = cloneDeep(sudoComponentInstance)
+
+    // Parse the current fields on load and check for unbuilt instances
+    // This is icky
+    let parentFieldsSettings = parent.fields.find(
+      pSetting => pSetting.name === nestedFieldInstance.field
+    )
+
+    //In this scenario it may be best to extract
+    store.actions.tester(setting.key, value)(nestedFieldInstance) //mods the internal val
+
+    parentFieldsSettings = cloneDeep(nestedFieldInstance)
+
+    console.log("UPDATED nestedFieldInstance", nestedFieldInstance)
+
+    //Overwrite all the fields
+    await store.actions.components.updateSetting("fields", parent.fields)
+
+    /*
+      ignore/disabled _instanceName > this will be handled in the new header field.
+      ignore/disabled field > this should be populated and hidden.
+    */
+  }
+</script>
+
+<Icon
+  name="Settings"
+  hoverable
+  size="S"
+  on:click={() => {
+    popover.show()
+  }}
+/>
+
+<Popover bind:this={popover} {anchor} align="left-outside">
+  <Layout noPadding>
+    <!--
+      property-group-container - has a border, is there a scenario where it doesnt render?
+
+      FormBlock Default behaviour.
+        
+        validation: field.validation,
+        field: field.name,
+        label: field.displayName,
+        placeholder: field.displayName,
+
+      Block differences
+        _instanceName:
+          Filtered as it has been moved to own area.
+        field:
+          Fixed - not visible.
+
+      componentBindings 
+        These appear to be removed/invalid
+
+      Bindings
+        {bindings} - working
+        {componentBindings}
+          componentdefinition.settings[x].nested needs to be true
+          Are these appropriate for the form block
+
+      FormBlock will have to pull the settings from fields:[]
+      
+      Frontend Store > updateSetting: async (name, value)
+        Performs a patch for the component settings change
+      
+      PropertyControl
+        Would this behaviour require a flag?
+          highlighted={$store.highlightedSettingKey === setting.key}
+          propertyFocus={$store.propertyFocus === setting.key}
+
+      Mode filtering of fields
+        Create
+        Update 
+        View > do we filter fields here or disable them?
+          Default value?? Makes no sense
+
+      Drawer actions 
+        CRUD - how to persist to the correct location?
+        Its just not a thing now
+        - Validation
+        - Bindings
+        - Custom options.
+
+      ** Options source - should this be shaped too?
+        Schema,
+        Datasource
+        Custom
+    -->
+
+    <ComponentSettingsSection
+      componentInstance={sudoComponentInstance}
+      componentDefinition={parsedComponentDef}
+      isScreen={false}
+      {bindings}
+      {componentBindings}
+      onUpdateSetting={updateSetting}
+    />
+  </Layout>
+</Popover>
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 f9dccf586c..922b994c5a 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@@ -1,45 +1,125 @@
 <script>
-  import { Button, ActionButton, Drawer } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import ColumnDrawer from "./ColumnDrawer.svelte"
   import { cloneDeep } from "lodash/fp"
+  import { generate } from "shortid"
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
   } from "builderStore/dataBinding"
   import { currentAsset } from "builderStore"
+  import SettingsList from "../SettingsList.svelte"
+  import { createEventDispatcher } from "svelte"
+  import { store, selectedScreen } from "builderStore"
+  import {
+    getBindableProperties,
+    getComponentBindableProperties,
+  } from "builderStore/dataBinding"
+
+  import EditFieldPopover from "./EditFieldPopover.svelte"
 
   export let componentInstance
-  export let value = []
+  export let value
 
   const dispatch = createEventDispatcher()
 
-  let drawer
-  let boundValue
+  // Dean - From the inner form block - make a util
+  const FieldTypeToComponentMap = {
+    string: "stringfield",
+    number: "numberfield",
+    bigint: "bigintfield",
+    options: "optionsfield",
+    array: "multifieldselect",
+    boolean: "booleanfield",
+    longform: "longformfield",
+    datetime: "datetimefield",
+    attachment: "attachmentfield",
+    link: "relationshipfield",
+    json: "jsonfield",
+    barcodeqr: "codescanner",
+  }
+
+  // Dean - From the inner form block - make a util
+  const getComponentForField = field => {
+    if (!field || !schema?.[field]) {
+      return null
+    }
+    const type = schema[field].type
+    return FieldTypeToComponentMap[type]
+  }
+
+  let fieldConfigList
 
-  $: text = getText(value)
-  $: convertOldColumnFormat(value)
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchema($currentAsset, datasource)
   $: options = Object.keys(schema || {})
-  $: sanitisedValue = getValidColumns(value, options)
+  $: sanitisedValue = getValidColumns(convertOldFieldFormat(value), options)
   $: updateBoundValue(sanitisedValue)
 
-  const getText = value => {
-    if (!value?.length) {
-      return "All fields"
+  $: fieldConfigList.forEach(column => {
+    if (!column.id) {
+      column.id = generate()
     }
-    let text = `${value.length} field`
-    if (value.length !== 1) {
-      text += "s"
-    }
-    return text
+  })
+
+  $: bindings = getBindableProperties(
+    $selectedScreen,
+    $store.selectedComponentId
+  )
+  $: console.log("bindings ", bindings)
+
+  $: componentBindings = getComponentBindableProperties(
+    $selectedScreen,
+    $store.selectedComponentId
+  )
+  $: console.log("componentBindings ", componentBindings)
+
+  // Builds unused ones only
+  const buildListOptions = (schema, selected) => {
+    let schemaClone = cloneDeep(schema)
+    selected.forEach(val => {
+      delete schemaClone[val.name]
+    })
+
+    return Object.keys(schemaClone)
+      .filter(key => !schemaClone[key].autocolumn)
+      .map(key => {
+        const col = schemaClone[key]
+        return {
+          name: key,
+          displayName: key,
+          id: generate(),
+          active: typeof col.active != "boolean" ? !value : col.active,
+        }
+      })
   }
 
-  const convertOldColumnFormat = oldColumns => {
-    if (typeof oldColumns?.[0] === "string") {
-      value = oldColumns.map(field => ({ name: field, displayName: field }))
+  /*
+    SUPPORT 
+      - ["FIELD1", "FIELD2"...]
+          "fields": [ "First Name", "Last Name" ]
+
+      - [{name: "FIELD1", displayName: "FIELD1"}, ... only the currentlyadded fields]
+      * [{name: "FIELD1", displayName: "FIELD1", active: true|false}, all currently available fields] 
+  */
+
+  $: unconfigured = buildListOptions(schema, fieldConfigList)
+
+  const convertOldFieldFormat = fields => {
+    let formFields
+    if (typeof fields?.[0] === "string") {
+      formFields = fields.map(field => ({
+        name: field,
+        displayName: field,
+        active: true,
+      }))
+    } else {
+      formFields = fields
     }
+    return (formFields || []).map(field => {
+      return {
+        ...field,
+        active: typeof field?.active != "boolean" ? true : field?.active,
+      }
+    })
   }
 
   const getSchema = (asset, datasource) => {
@@ -55,7 +135,7 @@
   }
 
   const updateBoundValue = value => {
-    boundValue = cloneDeep(value)
+    fieldConfigList = cloneDeep(value)
   }
 
   const getValidColumns = (columns, options) => {
@@ -75,29 +155,32 @@
     })
   }
 
-  const open = () => {
-    updateBoundValue(sanitisedValue)
-    drawer.show()
+  let listOptions
+  $: if (fieldConfigList) {
+    listOptions = [...fieldConfigList, ...unconfigured].map(column => {
+      const type = getComponentForField(column.name)
+      const _component = `@budibase/standard-components/${type}`
+
+      return { ...column, _component } //only necessary if it doesnt exist
+    })
+    console.log(listOptions)
   }
 
-  const save = () => {
-    dispatch("change", getValidColumns(boundValue, options))
-    drawer.hide()
+  const listUpdated = e => {
+    const parsedColumns = getValidColumns(e.detail, options)
+    dispatch("change", parsedColumns)
   }
 </script>
 
 <div class="field-configuration">
-  <ActionButton on:click={open}>{text}</ActionButton>
+  <SettingsList
+    value={listOptions}
+    on:change={listUpdated}
+    rightButton={EditFieldPopover}
+    rightProps={{ componentBindings, bindings, parent: componentInstance }}
+  />
 </div>
 
-<Drawer bind:this={drawer} title="Form Fields">
-  <svelte:fragment slot="description">
-    Configure the fields in your form.
-  </svelte:fragment>
-  <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%;
diff --git a/packages/builder/src/components/design/settings/controls/SettingsList.svelte b/packages/builder/src/components/design/settings/controls/SettingsList.svelte
new file mode 100644
index 0000000000..0025bcdefc
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/SettingsList.svelte
@@ -0,0 +1,133 @@
+<script>
+  import { Toggle, Icon } from "@budibase/bbui"
+  import { dndzone } from "svelte-dnd-action"
+  import { flip } from "svelte/animate"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = []
+  export let showHandle = true
+  export let rightButton
+  export let rightProps = {}
+
+  const dispatch = createEventDispatcher()
+  const flipDurationMs = 150
+  let dragDisabled = false
+  let listOptions = [...value]
+  let anchors = {}
+
+  const updateColumnOrder = e => {
+    listOptions = e.detail.items
+  }
+
+  const handleFinalize = e => {
+    updateColumnOrder(e)
+    dispatch("change", listOptions)
+    dragDisabled = false
+  }
+
+  // This is optional and should be moved.
+  const onToggle = item => {
+    return e => {
+      console.log(`${item.name} toggled: ${e.detail}`)
+      item.active = e.detail
+      dispatch("change", listOptions)
+    }
+  }
+</script>
+
+<ul
+  class="list-wrap"
+  use:dndzone={{
+    items: listOptions,
+    flipDurationMs,
+    dropTargetStyle: { outline: "none" },
+    dragDisabled,
+  }}
+  on:finalize={handleFinalize}
+  on:consider={updateColumnOrder}
+>
+  {#each listOptions as item (item.id)}
+    <li
+      animate:flip={{ duration: flipDurationMs }}
+      bind:this={anchors[item.id]}
+    >
+      <div class="left-content">
+        {#if showHandle}
+          <div
+            class="handle"
+            aria-label="drag-handle"
+            style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
+          >
+            <Icon name="DragHandle" size="XL" />
+          </div>
+        {/if}
+        <!-- slot - left action -->
+        <Toggle on:change={onToggle(item)} text="" value={item.active} thin />
+        {item.name}
+      </div>
+      <!-- slot - right action -->
+      <div class="right-content">
+        {#if rightButton}
+          <svelte:component
+            this={rightButton}
+            anchor={anchors[item.id]}
+            field={item}
+            componentBindings={rightProps.componentBindings}
+            bindings={rightProps.bindings}
+            parent={rightProps.parent}
+          />
+        {/if}
+      </div>
+    </li>
+  {/each}
+</ul>
+
+<style>
+  .list-wrap {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    border-radius: 4px;
+    background-color: var(
+      --spectrum-table-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    border: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+  }
+  .list-wrap > li {
+    background-color: var(
+      --spectrum-table-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    transition: background-color ease-in-out 130ms;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+  }
+  .list-wrap > li:hover {
+    background-color: var(
+      --spectrum-table-row-background-color-hover,
+      var(--spectrum-alias-highlight-hover)
+    );
+  }
+  .list-wrap > li:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .list-wrap > li:last-child {
+    border-top-left-radius: var(--spectrum-table-regular-border-radius);
+    border-top-right-radius: var(--spectrum-table-regular-border-radius);
+  }
+  .left-content {
+    display: flex;
+    align-items: center;
+  }
+  .list-wrap li {
+    padding-left: var(--spacing-s);
+    padding-right: var(--spacing-s);
+  }
+</style>
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 78eecea76e..72383fcf3c 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
@@ -13,11 +13,16 @@
   export let bindings
   export let componentBindings
   export let isScreen = false
+  export let onUpdateSetting
 
   $: sections = getSections(componentInstance, componentDefinition, isScreen)
 
   const getSections = (instance, definition, isScreen) => {
     const settings = definition?.settings ?? []
+    console.log(
+      "ComponentSettingsSection::definition?.settings",
+      definition?.settings
+    )
     const generalSettings = settings.filter(setting => !setting.section)
     const customSections = settings.filter(setting => setting.section)
     let sections = [
@@ -46,19 +51,23 @@
   }
 
   const updateSetting = async (setting, value) => {
-    try {
-      await store.actions.components.updateSetting(setting.key, value)
+    if (typeof onUpdateSetting === "function") {
+      onUpdateSetting(setting, value)
+    } else {
+      try {
+        await store.actions.components.updateSetting(setting.key, value)
 
-      // Send event if required
-      if (setting.sendEvents) {
-        analytics.captureEvent(Events.COMPONENT_UPDATED, {
-          name: componentInstance._component,
-          setting: setting.key,
-          value,
-        })
+        // Send event if required
+        if (setting.sendEvents) {
+          analytics.captureEvent(Events.COMPONENT_UPDATED, {
+            name: componentInstance._component,
+            setting: setting.key,
+            value,
+          })
+        }
+      } catch (error) {
+        notifications.error("Error updating component prop")
       }
-    } catch (error) {
-      notifications.error("Error updating component prop")
     }
   }
 
@@ -129,10 +138,13 @@
         {/if}
         {#each section.settings as setting (setting.key)}
           {#if setting.visible}
+            <!-- DEAN - Remove fieldConfiguration label config -->
             <PropertyControl
               type={setting.type}
               control={getComponentForSetting(setting)}
-              label={setting.label}
+              label={setting.type != "fieldConfiguration"
+                ? setting.label
+                : undefined}
               labelHidden={setting.labelHidden}
               key={setting.key}
               value={componentInstance[setting.key]}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 1e4c443f06..964ad370a8 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5106,22 +5106,6 @@
         "key": "title",
         "nested": true
       },
-      {
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ],
-        "defaultValue": "spectrum--medium"
-      },
       {
         "type": "text",
         "label": "Empty text",
@@ -5133,45 +5117,6 @@
           "invert": true
         }
       },
-      {
-        "section": true,
-        "name": "Fields",
-        "settings": [
-          {
-            "type": "fieldConfiguration",
-            "label": "Fields",
-            "key": "fields",
-            "selectAllFields": true
-          },
-          {
-            "type": "select",
-            "label": "Field labels",
-            "key": "labelPosition",
-            "defaultValue": "left",
-            "options": [
-              {
-                "label": "Left",
-                "value": "left"
-              },
-              {
-                "label": "Above",
-                "value": "above"
-              }
-            ]
-          },
-          {
-            "type": "boolean",
-            "label": "Disabled",
-            "key": "disabled",
-            "defaultValue": false,
-            "dependsOn": {
-              "setting": "actionType",
-              "value": "View",
-              "invert": true
-            }
-          }
-        ]
-      },
       {
         "section": true,
         "name": "Buttons",
@@ -5241,6 +5186,61 @@
             }
           }
         ]
+      },
+      {
+        "section": true,
+        "name": "Fields",
+        "settings": [
+          {
+            "type": "select",
+            "label": "Align labels",
+            "key": "labelPosition",
+            "defaultValue": "left",
+            "options": [
+              {
+                "label": "Left",
+                "value": "left"
+              },
+              {
+                "label": "Above",
+                "value": "above"
+              }
+            ]
+          },
+          {
+            "type": "select",
+            "label": "Size",
+            "key": "size",
+            "options": [
+              {
+                "label": "Medium",
+                "value": "spectrum--medium"
+              },
+              {
+                "label": "Large",
+                "value": "spectrum--large"
+              }
+            ],
+            "defaultValue": "spectrum--medium"
+          },
+          {
+            "type": "fieldConfiguration",
+            "label": "Fields",
+            "key": "fields",
+            "selectAllFields": true
+          },
+          {
+            "type": "boolean",
+            "label": "Disabled",
+            "key": "disabled",
+            "defaultValue": false,
+            "dependsOn": {
+              "setting": "actionType",
+              "value": "View",
+              "invert": true
+            }
+          }
+        ]
       }
     ],
     "context": [
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
index 20faee9013..c6a149e57c 100644
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -24,14 +24,20 @@
   const { fetchDatasourceSchema } = getContext("sdk")
 
   const convertOldFieldFormat = fields => {
-    if (typeof fields?.[0] === "string") {
-      return fields.map(field => ({ name: field, displayName: field }))
-    }
-
-    return fields
+    return typeof fields?.[0] === "string"
+      ? fields.map(field => ({
+          name: field,
+          displayName: field,
+          active: true,
+        }))
+      : fields
   }
 
+  //All settings need to derive from the block config now
+
+  // Parse the fields here too. Not present means false.
   const getDefaultFields = (fields, schema) => {
+    let formFields
     if (schema && (!fields || fields.length === 0)) {
       const defaultFields = []
 
@@ -41,13 +47,20 @@
         defaultFields.push({
           name: field.name,
           displayName: field.name,
+          active: true,
         })
       })
-
-      return defaultFields
+      formFields = [...defaultFields]
+    } else {
+      formFields = (fields || []).map(field => {
+        return {
+          ...field,
+          active: typeof field?.active != "boolean" ? true : field?.active,
+        }
+      })
     }
 
-    return fields
+    return formFields.filter(field => field.active)
   }
 
   let schema
@@ -56,7 +69,6 @@
 
   $: formattedFields = convertOldFieldFormat(fields)
   $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
-
   $: fetchSchema(dataSource)
   $: dataProvider = `{{ literal ${safe(providerId)} }}`
   $: filter = [
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 5e4a156949..b2870b02bf 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -197,22 +197,24 @@
           {/if}
         </BlockComponent>
       {/if}
-      <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
-        {#each fields as field, idx}
-          {#if getComponentForField(field.name)}
-            <BlockComponent
-              type={getComponentForField(field.name)}
-              props={{
-                validation: field.validation,
-                field: field.name,
-                label: field.displayName,
-                placeholder: field.displayName,
-              }}
-              order={idx}
-            />
-          {/if}
-        {/each}
-      </BlockComponent>
+      {#key fields}
+        <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
+          {#each fields as field, idx}
+            {#if getComponentForField(field.name)}
+              <BlockComponent
+                type={getComponentForField(field.name)}
+                props={{
+                  validation: field.validation,
+                  field: field.name,
+                  label: field.displayName,
+                  placeholder: field.displayName,
+                }}
+                order={idx}
+              />
+            {/if}
+          {/each}
+        </BlockComponent>
+      {/key}
     </BlockComponent>
   </BlockComponent>
 {:else}

From 8d4bb0e5fd7264c733469554561697aca3a12ee8 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 11 Aug 2023 14:19:54 +0100
Subject: [PATCH 02/17] A

---
 packages/client/manifest.json | 75 ++++++++++++++---------------------
 1 file changed, 30 insertions(+), 45 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 9cd23d6eb4..5de05d1e4a 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5275,17 +5275,6 @@
         "label": "Table",
         "key": "dataSource"
       },
-      {
-        "type": "text",
-        "label": "Row ID",
-        "key": "rowId",
-        "nested": true,
-        "dependsOn": {
-          "setting": "actionType",
-          "value": "Create",
-          "invert": true
-        }
-      },
       {
         "type": "text",
         "label": "Title",
@@ -5293,10 +5282,23 @@
         "nested": true
       },
       {
-        "type": "text",
-        "label": "Empty text",
-        "key": "noRowsMessage",
-        "defaultValue": "We couldn't find a row to display",
+        "section": true,
+        "name": "Row details",
+        "info": "<a href='https://docs.budibase.com/docs/form-block' target='_blank'>How to pass a row ID using bindings</a>",
+        "settings": [
+          {
+            "type": "text",
+            "label": "Row ID",
+            "key": "rowId",
+            "nested": true
+          },
+          {
+            "type": "text",
+            "label": "Empty text",
+            "key": "noRowsMessage",
+            "defaultValue": "We couldn't find a row to display"
+          }
+        ],
         "dependsOn": {
           "setting": "actionType",
           "value": "Create",
@@ -5308,46 +5310,26 @@
         "name": "Buttons",
         "settings": [
           {
-            "type": "boolean",
-            "label": "Show save button",
-            "key": "showSaveButton",
-            "defaultValue": true,
+            "type": "text",
+            "key": "saveButtonLabel",
+            "label": "Save button",
+            "nested": true,
+            "defaultValue": "Save",
             "dependsOn": {
               "setting": "actionType",
               "value": "View",
               "invert": true
             }
           },
-          {
-            "type": "text",
-            "key": "saveButtonLabel",
-            "label": "Save button label",
-            "nested": true,
-            "defaultValue": "Save",
-            "dependsOn": {
-              "setting": "showSaveButton",
-              "value": true
-            }
-          },
-          {
-            "type": "boolean",
-            "label": "Allow delete",
-            "key": "showDeleteButton",
-            "defaultValue": false,
-            "dependsOn": {
-              "setting": "actionType",
-              "value": "Update"
-            }
-          },
           {
             "type": "text",
             "key": "deleteButtonLabel",
-            "label": "Delete button label",
+            "label": "Delete button",
             "nested": true,
             "defaultValue": "Delete",
             "dependsOn": {
-              "setting": "showDeleteButton",
-              "value": true
+              "setting": "actionType",
+              "value": "Update"
             }
           },
           {
@@ -5365,7 +5347,11 @@
             "type": "boolean",
             "label": "Hide notifications",
             "key": "notificationOverride",
-            "defaultValue": false
+            "defaultValue": false,
+            "dependsOn": {
+              "setting": "actionType",
+              "value": "Update"
+            }
           }
         ]
       },
@@ -5407,7 +5393,6 @@
           },
           {
             "type": "fieldConfiguration",
-            "label": "Fields",
             "key": "fields",
             "selectAllFields": true
           },

From ccfba675f2dae944c9b3d10c89a4447eb4836abc Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 16 Aug 2023 17:18:04 +0100
Subject: [PATCH 03/17] Merge commit

---
 packages/client/manifest.json | 40 ++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index b4345f7684..31a68444b1 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -4730,7 +4730,7 @@
             ]
           },
           {
-            "label": "Fields",
+            "label": "",
             "type": "fieldConfiguration",
             "key": "sidePanelFields",
             "nested": true,
@@ -4740,17 +4740,7 @@
             }
           },
           {
-            "label": "Show delete",
-            "type": "boolean",
-            "key": "sidePanelShowDelete",
-            "nested": true,
-            "dependsOn": {
-              "setting": "clickBehaviour",
-              "value": "details"
-            }
-          },
-          {
-            "label": "Save label",
+            "label": "Save button",
             "type": "text",
             "key": "sidePanelSaveLabel",
             "defaultValue": "Save",
@@ -4761,7 +4751,7 @@
             }
           },
           {
-            "label": "Delete label",
+            "label": "Delete button",
             "type": "text",
             "key": "sidePanelDeleteLabel",
             "defaultValue": "Delete",
@@ -5292,20 +5282,25 @@
             "type": "text",
             "label": "Row ID",
             "key": "rowId",
-            "nested": true
+            "nested": true,
+            "dependsOn": {
+              "setting": "actionType",
+              "value": "Create",
+              "invert": true
+            }
           },
           {
             "type": "text",
             "label": "Empty text",
             "key": "noRowsMessage",
-            "defaultValue": "We couldn't find a row to display"
+            "defaultValue": "We couldn't find a row to display",
+            "dependsOn": {
+              "setting": "actionType",
+              "value": "Create",
+              "invert": true
+            }
           }
-        ],
-        "dependsOn": {
-          "setting": "actionType",
-          "value": "Create",
-          "invert": true
-        }
+        ]
       },
       {
         "section": true,
@@ -5352,7 +5347,8 @@
             "defaultValue": false,
             "dependsOn": {
               "setting": "actionType",
-              "value": "Update"
+              "value": "View",
+              "invert": true
             }
           }
         ]

From cad624a9a41f7b2b96821bf70aa21755bbd0bded Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 21 Aug 2023 12:50:16 +0100
Subject: [PATCH 04/17] Merge Commit

---
 packages/bbui/src/Drawer/Drawer.svelte      |  7 +++++++
 packages/bbui/src/Form/Core/Combobox.svelte | 15 ++++-----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 4ff4df854b..421d12615f 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -4,6 +4,8 @@
   import Body from "../Typography/Body.svelte"
   import Heading from "../Typography/Heading.svelte"
   import { setContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
+  import { generate } from "shortid"
 
   export let title
   export let fillWidth
@@ -11,13 +13,17 @@
   export let width = "calc(100% - 626px)"
   export let headless = false
 
+  const dispatch = createEventDispatcher()
+
   let visible = false
+  let drawerId = generate()
 
   export function show() {
     if (visible) {
       return
     }
     visible = true
+    dispatch("drawerShow", drawerId)
   }
 
   export function hide() {
@@ -25,6 +31,7 @@
       return
     }
     visible = false
+    dispatch("drawerHide", drawerId)
   }
 
   setContext("drawer-actions", {
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index b68a24d8db..b1b264a9b7 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -2,8 +2,8 @@
   import "@spectrum-css/inputgroup/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
-  import { fly } from "svelte/transition"
   import { createEventDispatcher } from "svelte"
+  import clickOutside from "../../Actions/click_outside"
 
   export let value = null
   export let id = null
@@ -80,10 +80,11 @@
     </svg>
   </button>
   {#if open}
-    <div class="overlay" on:mousedown|self={() => (open = false)} />
     <div
-      transition:fly|local={{ y: -20, duration: 200 }}
       class="spectrum-Popover spectrum-Popover--bottom is-open"
+      use:clickOutside={() => {
+        open = false
+      }}
     >
       <ul class="spectrum-Menu" role="listbox">
         {#if options && Array.isArray(options)}
@@ -125,14 +126,6 @@
   .spectrum-Textfield-input {
     width: 0;
   }
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999;
-  }
   .spectrum-Popover {
     max-height: 240px;
     width: 100%;

From 1ec2faf74d3561d52727b2477952238de9096b9e Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 24 Aug 2023 14:39:53 +0100
Subject: [PATCH 05/17] List refinement, Form Block UX updates for action type.
 Bug fixes for FormBlock bindings. TableBlock UX updates and Component Setting
 updates

---
 packages/bbui/src/Popover/Popover.svelte      |  14 ++
 .../builder/src/builderStore/dataBinding.js   |  86 ++++++-
 .../src/builderStore/store/frontend.js        |  89 +++-----
 .../bindings/DrawerBindableInput.svelte       |   2 +
 .../ButtonActionEditor.svelte                 |   2 +-
 ...ttingsList.svelte => DraggableList.svelte} | 106 +++++----
 .../EditFieldPopover.svelte                   | 207 +++++++----------
 .../FieldConfiguration.svelte                 | 209 ++++++++----------
 .../FieldConfiguration/FieldSetting.svelte    |  56 +++++
 .../controls/FieldConfiguration/utils.js      |  46 ++++
 .../OptionsEditor/OptionsEditor.svelte        |  15 +-
 .../settings/controls/PropertyControl.svelte  |   2 +
 .../ValidationEditor/ValidationEditor.svelte  |   7 +-
 .../settings/ComponentInfoSection.svelte      |  38 +---
 .../settings/ComponentSettingsPanel.svelte    |   5 +-
 .../settings/ComponentSettingsSection.svelte  |  62 +++---
 .../_components/settings/InfoDisplay.svelte   |  61 +++++
 packages/client/manifest.json                 |  20 +-
 .../components/app/blocks/TableBlock.svelte   |   9 +-
 .../app/blocks/form/FormBlock.svelte          |  75 +++----
 .../app/blocks/form/InnerFormBlock.svelte     |  40 ++--
 21 files changed, 666 insertions(+), 485 deletions(-)
 rename packages/builder/src/components/design/settings/controls/{SettingsList.svelte => DraggableList.svelte} (55%)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/InfoDisplay.svelte

diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 6706bf7a8b..198f96c672 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -23,6 +23,9 @@
   export let animate = true
   export let customZindex
 
+  export let showPopover = true
+  export let clickOutsideOverride = false
+
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
   export const show = () => {
@@ -36,6 +39,9 @@
   }
 
   const handleOutsideClick = e => {
+    if (clickOutsideOverride) {
+      return
+    }
     if (open) {
       // Stop propagation if the source is the anchor
       let node = e.target
@@ -54,6 +60,9 @@
   }
 
   function handleEscape(e) {
+    if (!clickOutsideOverride) {
+      return
+    }
     if (open && e.key === "Escape") {
       hide()
     }
@@ -79,6 +88,7 @@
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
       class:customZindex
+      class:hide-popover={open && !showPopover}
       role="presentation"
       style="height: {customHeight}; --customZindex: {customZindex};"
       transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
@@ -89,6 +99,10 @@
 {/if}
 
 <style>
+  .hide-popover {
+    display: contents;
+  }
+
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000);
     border-color: var(--spectrum-global-color-gray-300);
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index bbe116721a..aab312b9d0 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -22,6 +22,10 @@ import { TableNames } from "../constants"
 import { JSONUtils } from "@budibase/frontend-core"
 import ActionDefinitions from "components/design/settings/controls/ButtonActionEditor/manifest.json"
 import { environment, licensing } from "stores/portal"
+import {
+  convertOldFieldFormat,
+  getComponentForField,
+} from "components/design/settings/controls/FieldConfiguration/utils"
 
 // Regex to match all instances of template strings
 const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g
@@ -328,7 +332,7 @@ const getProviderContextBindings = (asset, dataProviders) => {
       if (context.type === "form") {
         // Forms do not need table schemas
         // Their schemas are built from their component field names
-        schema = buildFormSchema(component)
+        schema = buildFormSchema(component, asset)
         readablePrefix = "Fields"
       } else if (context.type === "static") {
         // Static contexts are fully defined by the components
@@ -370,6 +374,11 @@ const getProviderContextBindings = (asset, dataProviders) => {
       if (runtimeSuffix) {
         providerId += `-${runtimeSuffix}`
       }
+
+      if (!filterCategoryByContext(component, context)) {
+        return
+      }
+
       const safeComponentId = makePropSafe(providerId)
 
       // Create bindable properties for each schema field
@@ -387,6 +396,12 @@ const getProviderContextBindings = (asset, dataProviders) => {
         }
         readableBinding += `.${fieldSchema.name || key}`
 
+        const bindingCategory = getComponentBindingCategory(
+          component,
+          context,
+          def
+        )
+
         // Create the binding object
         bindings.push({
           type: "context",
@@ -399,8 +414,8 @@ const getProviderContextBindings = (asset, dataProviders) => {
           // Table ID is used by JSON fields to know what table the field is in
           tableId: table?._id,
           component: component._component,
-          category: component._instanceName,
-          icon: def.icon,
+          category: bindingCategory.category,
+          icon: bindingCategory.icon,
           display: {
             name: fieldSchema.name || key,
             type: fieldSchema.type,
@@ -413,6 +428,40 @@ const getProviderContextBindings = (asset, dataProviders) => {
   return bindings
 }
 
+// Exclude a data context based on the component settings
+const filterCategoryByContext = (component, context) => {
+  const { _component } = component
+  if (_component.endsWith("formblock")) {
+    if (
+      (component.actionType == "Create" && context.type === "schema") ||
+      (component.actionType == "View" && context.type === "form")
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
+const getComponentBindingCategory = (component, context, def) => {
+  let icon = def.icon
+  let category = component._instanceName
+
+  if (component._component.endsWith("formblock")) {
+    let contextCategorySuffix = {
+      form: "Fields",
+      schema: "Row",
+    }
+    category = `${component._instanceName} - ${
+      contextCategorySuffix[context.type]
+    }`
+    icon = context.type === "form" ? "Form" : "Data"
+  }
+  return {
+    icon,
+    category,
+  }
+}
+
 /**
  * Gets all bindable properties from the logged in user.
  */
@@ -507,6 +556,7 @@ const getSelectedRowsBindings = asset => {
         )}.${makePropSafe("selectedRows")}`,
         readableBinding: `${block._instanceName}.Selected rows`,
         category: "Selected rows",
+        icon: "ViewRow",
         display: { name: block._instanceName },
       }))
     )
@@ -835,18 +885,36 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
  * Builds a form schema given a form component.
  * A form schema is a schema of all the fields nested anywhere within a form.
  */
-export const buildFormSchema = component => {
+export const buildFormSchema = (component, asset) => {
   let schema = {}
   if (!component) {
     return schema
   }
 
-  // If this is a form block, simply use the fields setting
   if (component._component.endsWith("formblock")) {
     let schema = {}
-    component.fields?.forEach(field => {
-      schema[field] = { type: "string" }
-    })
+
+    const datasource = getDatasourceForProvider(asset, component)
+    const info = getSchemaForDatasource(component, datasource)
+
+    if (!component.fields) {
+      Object.values(info?.schema)
+        .filter(
+          ({ autocolumn, name }) =>
+            !autocolumn && !["_rev", "_id"].includes(name)
+        )
+        .forEach(({ name }) => {
+          schema[name] = { type: info?.schema[name].type }
+        })
+    } else {
+      // Field conversion
+      const patched = convertOldFieldFormat(component.fields || [])
+      patched?.forEach(({ field, active }) => {
+        if (!active) return
+        schema[field] = { type: info?.schema[field].type }
+      })
+    }
+
     return schema
   }
 
@@ -862,7 +930,7 @@ export const buildFormSchema = component => {
     }
   }
   component._children?.forEach(child => {
-    const childSchema = buildFormSchema(child)
+    const childSchema = buildFormSchema(child, asset)
     schema = { ...schema, ...childSchema }
   })
   return schema
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 4df26182e6..a72d735873 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -93,40 +93,6 @@ const INITIAL_FRONTEND_STATE = {
   tourNodes: null,
 }
 
-export const updateComponentSetting = (name, value) => {
-  return component => {
-    if (!name || !component) {
-      return false
-    }
-    // Skip update if the value is the same
-    if (component[name] === value) {
-      return false
-    }
-
-    const settings = getComponentSettings(component._component)
-    const updatedSetting = settings.find(setting => setting.key === name)
-
-    if (
-      updatedSetting?.type === "dataSource" ||
-      updatedSetting?.type === "table"
-    ) {
-      const { schema } = getSchemaForDatasource(null, value)
-      const columnNames = Object.keys(schema || {})
-      const multifieldKeysToSelectAll = settings
-        .filter(setting => {
-          return setting.type === "multifield" && setting.selectAllFields
-        })
-        .map(setting => setting.key)
-
-      multifieldKeysToSelectAll.forEach(key => {
-        component[key] = columnNames
-      })
-    }
-
-    component[name] = value
-  }
-}
-
 export const getFrontendStore = () => {
   const store = writable({ ...INITIAL_FRONTEND_STATE })
   let websocket
@@ -145,18 +111,14 @@ export const getFrontendStore = () => {
     }
     let clone = cloneDeep(screen)
     const result = patchFn(clone)
-    console.log("sequentialScreenPatch ", result)
+
     if (result === false) {
       return
     }
-    return
-    //return await store.actions.screens.save(clone)
+    return await store.actions.screens.save(clone)
   })
 
   store.actions = {
-    tester: (name, value) => {
-      return updateComponentSetting(name, value)
-    },
     reset: () => {
       store.set({ ...INITIAL_FRONTEND_STATE })
       websocket?.disconnect()
@@ -864,7 +826,6 @@ export const getFrontendStore = () => {
       },
       patch: async (patchFn, componentId, screenId) => {
         // Use selected component by default
-        console.log("front end patch")
         if (!componentId || !screenId) {
           const state = get(store)
           componentId = componentId || state.selectedComponentId
@@ -883,18 +844,6 @@ export const getFrontendStore = () => {
         }
         await store.actions.screens.patch(patchScreen, screenId)
       },
-      // Temporary
-      customPatch: async (patchFn, componentId, screenId) => {
-        console.log("patchUpdate :")
-        if (!componentId || !screenId) {
-          const state = get(store)
-          componentId = componentId || state.selectedComponentId
-          screenId = screenId || state.selectedScreenId
-        }
-        if (!componentId || !screenId || !patchFn) {
-          return
-        }
-      },
       delete: async component => {
         if (!component) {
           return
@@ -1261,9 +1210,41 @@ export const getFrontendStore = () => {
       },
       updateSetting: async (name, value) => {
         await store.actions.components.patch(
-          updateComponentSetting(name, value)
+          store.actions.components.updateComponentSetting(name, value)
         )
       },
+      updateComponentSetting: (name, value) => {
+        return component => {
+          if (!name || !component) {
+            return false
+          }
+          // Skip update if the value is the same
+          if (component[name] === value) {
+            return false
+          }
+
+          const settings = getComponentSettings(component._component)
+          const updatedSetting = settings.find(setting => setting.key === name)
+
+          if (
+            updatedSetting?.type === "dataSource" ||
+            updatedSetting?.type === "table"
+          ) {
+            const { schema } = getSchemaForDatasource(null, value)
+            const columnNames = Object.keys(schema || {})
+            const multifieldKeysToSelectAll = settings
+              .filter(setting => {
+                return setting.type === "multifield" && setting.selectAllFields
+              })
+              .map(setting => setting.key)
+
+            multifieldKeysToSelectAll.forEach(key => {
+              component[key] = columnNames
+            })
+          }
+          component[name] = value
+        }
+      },
       requestEjectBlock: componentId => {
         store.actions.preview.sendEvent("eject-block", componentId)
       },
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index dacb076bdb..5c4f90606d 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -74,6 +74,8 @@
   {/if}
 </div>
 <Drawer
+  on:drawerHide
+  on:drawerShow
   {fillWidth}
   bind:this={bindingDrawer}
   {title}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
index 3fefb60387..8a1b896071 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
@@ -74,7 +74,7 @@
   <ActionButton on:click={openDrawer}>{actionText}</ActionButton>
 </div>
 
-<Drawer bind:this={drawer} title={"Actions"}>
+<Drawer bind:this={drawer} title={"Actions"} on:drawerHide on:drawerShow>
   <svelte:fragment slot="description">
     Define what actions to run.
   </svelte:fragment>
diff --git a/packages/builder/src/components/design/settings/controls/SettingsList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList.svelte
similarity index 55%
rename from packages/builder/src/components/design/settings/controls/SettingsList.svelte
rename to packages/builder/src/components/design/settings/controls/DraggableList.svelte
index 0025bcdefc..4a227d9ff6 100644
--- a/packages/builder/src/components/design/settings/controls/SettingsList.svelte
+++ b/packages/builder/src/components/design/settings/controls/DraggableList.svelte
@@ -1,82 +1,88 @@
 <script>
-  import { Toggle, Icon } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
   import { dndzone } from "svelte-dnd-action"
-  import { flip } from "svelte/animate"
   import { createEventDispatcher } from "svelte"
+  import { generate } from "shortid"
 
-  export let value = []
+  export let items = []
   export let showHandle = true
-  export let rightButton
-  export let rightProps = {}
+  export let highlighted
+  export let listType
+  export let listTypeProps = {}
+  export let listItemKey
+  export let draggable = true
 
   const dispatch = createEventDispatcher()
   const flipDurationMs = 150
-  let dragDisabled = false
-  let listOptions = [...value]
-  let anchors = {}
 
-  const updateColumnOrder = e => {
-    listOptions = e.detail.items
+  let anchors = {}
+  let draggableItems = []
+
+  const buildDragable = items => {
+    return items.map(item => {
+      return {
+        id: listItemKey ? item[listItemKey] : generate(),
+        item,
+      }
+    })
+  }
+
+  $: if (items) {
+    draggableItems = buildDragable(items)
+  }
+
+  const updateRowOrder = e => {
+    draggableItems = e.detail.items
+  }
+
+  const serialiseUpdate = () => {
+    return draggableItems.reduce((acc, ele) => {
+      acc.push(ele.item)
+      return acc
+    }, [])
   }
 
   const handleFinalize = e => {
-    updateColumnOrder(e)
-    dispatch("change", listOptions)
-    dragDisabled = false
+    updateRowOrder(e)
+    dispatch("change", serialiseUpdate())
   }
 
-  // This is optional and should be moved.
-  const onToggle = item => {
-    return e => {
-      console.log(`${item.name} toggled: ${e.detail}`)
-      item.active = e.detail
-      dispatch("change", listOptions)
-    }
+  const onItemChanged = e => {
+    dispatch("itemChange", e.detail)
   }
 </script>
 
 <ul
   class="list-wrap"
   use:dndzone={{
-    items: listOptions,
+    items: draggableItems,
     flipDurationMs,
     dropTargetStyle: { outline: "none" },
-    dragDisabled,
+    dragDisabled: !draggable,
   }}
   on:finalize={handleFinalize}
-  on:consider={updateColumnOrder}
+  on:consider={updateRowOrder}
 >
-  {#each listOptions as item (item.id)}
+  {#each draggableItems as draggable (draggable.id)}
     <li
-      animate:flip={{ duration: flipDurationMs }}
-      bind:this={anchors[item.id]}
+      bind:this={anchors[draggable.id]}
+      class:highlighted={draggable.id === highlighted}
     >
       <div class="left-content">
         {#if showHandle}
-          <div
-            class="handle"
-            aria-label="drag-handle"
-            style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
-          >
+          <div class="handle" aria-label="drag-handle">
             <Icon name="DragHandle" size="XL" />
           </div>
         {/if}
-        <!-- slot - left action -->
-        <Toggle on:change={onToggle(item)} text="" value={item.active} thin />
-        {item.name}
       </div>
-      <!-- slot - right action -->
       <div class="right-content">
-        {#if rightButton}
-          <svelte:component
-            this={rightButton}
-            anchor={anchors[item.id]}
-            field={item}
-            componentBindings={rightProps.componentBindings}
-            bindings={rightProps.bindings}
-            parent={rightProps.parent}
-          />
-        {/if}
+        <svelte:component
+          this={listType}
+          anchor={anchors[draggable.item._id]}
+          item={draggable.item}
+          {...listTypeProps}
+          on:change={onItemChanged}
+        />
       </div>
     </li>
   {/each}
@@ -104,7 +110,6 @@
     transition: background-color ease-in-out 130ms;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     border-bottom: 1px solid
       var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
   }
@@ -122,12 +127,15 @@
     border-top-left-radius: var(--spectrum-table-regular-border-radius);
     border-top-right-radius: var(--spectrum-table-regular-border-radius);
   }
-  .left-content {
-    display: flex;
-    align-items: center;
+  .right-content {
+    flex: 1;
+    min-width: 0;
   }
   .list-wrap li {
     padding-left: var(--spacing-s);
     padding-right: var(--spacing-s);
   }
+  li.highlighted {
+    background-color: pink;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
index 859f019a26..94fd98c707 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -1,86 +1,58 @@
-<!-- FormBlockFieldSettingsPopover -->
 <script>
   import { Icon, Popover, Layout } from "@budibase/bbui"
   import { store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
-
+  import { createEventDispatcher } from "svelte"
   import ComponentSettingsSection from "../../../../../pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte"
 
   export let anchor
   export let field
-
   export let componentBindings
   export let bindings
-  export let parent
+
+  const dispatch = createEventDispatcher()
 
   let popover
+  let drawers = []
+  let sudoComponentInstance
 
-  $: sudoComponentInstance = buildSudoInstance(field)
-  $: componentDef = store.actions.components.getDefinition(field._component)
+  $: if (field) {
+    sudoComponentInstance = field
+  }
+  $: componentDef = store.actions.components.getDefinition(
+    sudoComponentInstance._component
+  )
   $: parsedComponentDef = processComponentDefinitionSettings(componentDef)
 
-  const buildSudoInstance = instance => {
-    let clone = cloneDeep(instance)
-
-    // only do this IF necessary
-    const instanceCheck = store.actions.components.createInstance(
-      clone._component,
-      {
-        _instanceName: instance.displayName,
-        field: instance.name, //Must be fixed
-        label: instance.displayName,
-        placeholder: instance.displayName,
-      },
-      {} //?
-    )
-
-    // mutating on load would achieve this.
-    // Would need to replace the entire config at this point
-    // console.log(instanceCheck)
-
-    return instanceCheck
-  }
-
-  // Ensures parent bindings are pushed down
-  // Confirm this
   const processComponentDefinitionSettings = componentDef => {
+    if (!componentDef) {
+      return {}
+    }
     const clone = cloneDeep(componentDef)
-    clone.settings.forEach(setting => {
-      if (setting.type === "text") {
-        setting.nested = true
-      }
-    })
+    const updatedSettings = clone.settings
+      .filter(setting => setting.key !== "field")
+      .map(setting => {
+        return { ...setting, nested: true }
+      })
+    clone.settings = updatedSettings
     return clone
   }
 
-  // Current core update setting fn
   const updateSetting = async (setting, value) => {
-    console.log("Custom Save Setting", setting, value)
-    console.log("The parent", parent)
+    const nestedComponentInstance = cloneDeep(sudoComponentInstance)
 
-    //updateBlockFieldSetting in frontend?
-    const nestedFieldInstance = cloneDeep(sudoComponentInstance)
-
-    // Parse the current fields on load and check for unbuilt instances
-    // This is icky
-    let parentFieldsSettings = parent.fields.find(
-      pSetting => pSetting.name === nestedFieldInstance.field
+    const patchFn = store.actions.components.updateComponentSetting(
+      setting.key,
+      value
     )
+    patchFn(nestedComponentInstance)
 
-    //In this scenario it may be best to extract
-    store.actions.tester(setting.key, value)(nestedFieldInstance) //mods the internal val
+    const update = {
+      ...nestedComponentInstance,
+      active: sudoComponentInstance.active,
+    }
 
-    parentFieldsSettings = cloneDeep(nestedFieldInstance)
-
-    console.log("UPDATED nestedFieldInstance", nestedFieldInstance)
-
-    //Overwrite all the fields
-    await store.actions.components.updateSetting("fields", parent.fields)
-
-    /*
-      ignore/disabled _instanceName > this will be handled in the new header field.
-      ignore/disabled field > this should be populated and hidden.
-    */
+    dispatch("change", update)
   }
 </script>
 
@@ -93,69 +65,60 @@
   }}
 />
 
-<Popover bind:this={popover} {anchor} align="left-outside">
-  <Layout noPadding>
-    <!--
-      property-group-container - has a border, is there a scenario where it doesnt render?
-
-      FormBlock Default behaviour.
-        
-        validation: field.validation,
-        field: field.name,
-        label: field.displayName,
-        placeholder: field.displayName,
-
-      Block differences
-        _instanceName:
-          Filtered as it has been moved to own area.
-        field:
-          Fixed - not visible.
-
-      componentBindings 
-        These appear to be removed/invalid
-
-      Bindings
-        {bindings} - working
+<Popover
+  bind:this={popover}
+  on:open={() => {
+    drawers = []
+  }}
+  {anchor}
+  align="left-outside"
+  showPopover={drawers.length == 0}
+  clickOutsideOverride={drawers.length > 0}
+>
+  <span class="popover-wrap">
+    <Layout noPadding noGap>
+      <div class="type-icon">
+        <Icon name={parsedComponentDef.icon} />
+        <span>{parsedComponentDef.name}</span>
+      </div>
+      <ComponentSettingsSection
+        componentInstance={sudoComponentInstance}
+        componentDefinition={parsedComponentDef}
+        isScreen={false}
+        onUpdateSetting={updateSetting}
+        showSectionTitle={false}
+        showInstanceName={false}
+        {bindings}
         {componentBindings}
-          componentdefinition.settings[x].nested needs to be true
-          Are these appropriate for the form block
-
-      FormBlock will have to pull the settings from fields:[]
-      
-      Frontend Store > updateSetting: async (name, value)
-        Performs a patch for the component settings change
-      
-      PropertyControl
-        Would this behaviour require a flag?
-          highlighted={$store.highlightedSettingKey === setting.key}
-          propertyFocus={$store.propertyFocus === setting.key}
-
-      Mode filtering of fields
-        Create
-        Update 
-        View > do we filter fields here or disable them?
-          Default value?? Makes no sense
-
-      Drawer actions 
-        CRUD - how to persist to the correct location?
-        Its just not a thing now
-        - Validation
-        - Bindings
-        - Custom options.
-
-      ** Options source - should this be shaped too?
-        Schema,
-        Datasource
-        Custom
-    -->
-
-    <ComponentSettingsSection
-      componentInstance={sudoComponentInstance}
-      componentDefinition={parsedComponentDef}
-      isScreen={false}
-      {bindings}
-      {componentBindings}
-      onUpdateSetting={updateSetting}
-    />
-  </Layout>
+        on:drawerShow={e => {
+          drawers = [...drawers, e.detail]
+        }}
+        on:drawerHide={e => {
+          drawers = drawers.slice(0, -1)
+        }}
+      />
+    </Layout>
+  </span>
 </Popover>
+
+<style>
+  .popover-wrap {
+    background-color: var(--spectrum-alias-background-color-secondary);
+  }
+  .type-icon {
+    display: flex;
+    gap: var(--spacing-m);
+    margin: var(--spacing-xl);
+    margin-bottom: 0px;
+    height: var(--spectrum-alias-item-height-m);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+    border-width: var(--spectrum-actionbutton-border-size);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    border: 1px solid
+      var(
+        --spectrum-actionbutton-m-border-color,
+        var(--spectrum-alias-border-color)
+      );
+    align-items: center;
+  }
+</style>
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 922b994c5a..596bb95639 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@@ -1,127 +1,76 @@
 <script>
-  import { cloneDeep } from "lodash/fp"
-  import { generate } from "shortid"
+  import { cloneDeep, isEqual } from "lodash/fp"
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
-  } from "builderStore/dataBinding"
-  import { currentAsset } from "builderStore"
-  import SettingsList from "../SettingsList.svelte"
-  import { createEventDispatcher } from "svelte"
-  import { store, selectedScreen } from "builderStore"
-  import {
     getBindableProperties,
     getComponentBindableProperties,
   } from "builderStore/dataBinding"
-
-  import EditFieldPopover from "./EditFieldPopover.svelte"
+  import { currentAsset } from "builderStore"
+  import DraggableList from "../DraggableList.svelte"
+  import { createEventDispatcher } from "svelte"
+  import { store, selectedScreen } from "builderStore"
+  import FieldSetting from "./FieldSetting.svelte"
+  import { convertOldFieldFormat, getComponentForField } from "./utils"
 
   export let componentInstance
   export let value
 
   const dispatch = createEventDispatcher()
+  let sanitisedFields
+  let fieldList
+  let schema
+  // let assetIdCache
+  let cachedValue
+  // $: value, console.log("VALUE UPDATED")
+  // $: $currentAsset, console.log("currentAsset updated ", $currentAsset)
 
-  // Dean - From the inner form block - make a util
-  const FieldTypeToComponentMap = {
-    string: "stringfield",
-    number: "numberfield",
-    bigint: "bigintfield",
-    options: "optionsfield",
-    array: "multifieldselect",
-    boolean: "booleanfield",
-    longform: "longformfield",
-    datetime: "datetimefield",
-    attachment: "attachmentfield",
-    link: "relationshipfield",
-    json: "jsonfield",
-    barcodeqr: "codescanner",
+  $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
+  $: actionType = componentInstance.actionType
+  let componentBindings = []
+
+  $: if (actionType) {
+    componentBindings = getComponentBindableProperties(
+      $selectedScreen,
+      componentInstance._id
+    )
   }
 
-  // Dean - From the inner form block - make a util
-  const getComponentForField = field => {
-    if (!field || !schema?.[field]) {
-      return null
-    }
-    const type = schema[field].type
-    return FieldTypeToComponentMap[type]
-  }
-
-  let fieldConfigList
-
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
-  $: schema = getSchema($currentAsset, datasource)
+
+  $: if (!isEqual(value, cachedValue)) {
+    cachedValue = value
+    schema = getSchema($currentAsset, datasource)
+  }
+
   $: options = Object.keys(schema || {})
   $: sanitisedValue = getValidColumns(convertOldFieldFormat(value), options)
-  $: updateBoundValue(sanitisedValue)
+  $: updateSanitsedFields(sanitisedValue)
 
-  $: fieldConfigList.forEach(column => {
-    if (!column.id) {
-      column.id = generate()
-    }
-  })
-
-  $: bindings = getBindableProperties(
-    $selectedScreen,
-    $store.selectedComponentId
-  )
-  $: console.log("bindings ", bindings)
-
-  $: componentBindings = getComponentBindableProperties(
-    $selectedScreen,
-    $store.selectedComponentId
-  )
-  $: console.log("componentBindings ", componentBindings)
+  $: unconfigured = buildUnconfiguredOptions(schema, sanitisedFields)
 
   // Builds unused ones only
-  const buildListOptions = (schema, selected) => {
+  const buildUnconfiguredOptions = (schema, selected) => {
+    if (!schema) {
+      return []
+    }
     let schemaClone = cloneDeep(schema)
     selected.forEach(val => {
-      delete schemaClone[val.name]
+      delete schemaClone[val.field]
     })
 
     return Object.keys(schemaClone)
       .filter(key => !schemaClone[key].autocolumn)
       .map(key => {
         const col = schemaClone[key]
+        let toggleOn = !value
         return {
-          name: key,
-          displayName: key,
-          id: generate(),
-          active: typeof col.active != "boolean" ? !value : col.active,
+          field: key,
+          active: typeof col.active != "boolean" ? toggleOn : col.active,
         }
       })
   }
 
-  /*
-    SUPPORT 
-      - ["FIELD1", "FIELD2"...]
-          "fields": [ "First Name", "Last Name" ]
-
-      - [{name: "FIELD1", displayName: "FIELD1"}, ... only the currentlyadded fields]
-      * [{name: "FIELD1", displayName: "FIELD1", active: true|false}, all currently available fields] 
-  */
-
-  $: unconfigured = buildListOptions(schema, fieldConfigList)
-
-  const convertOldFieldFormat = fields => {
-    let formFields
-    if (typeof fields?.[0] === "string") {
-      formFields = fields.map(field => ({
-        name: field,
-        displayName: field,
-        active: true,
-      }))
-    } else {
-      formFields = fields
-    }
-    return (formFields || []).map(field => {
-      return {
-        ...field,
-        active: typeof field?.active != "boolean" ? true : field?.active,
-      }
-    })
-  }
-
   const getSchema = (asset, datasource) => {
     const schema = getSchemaForDatasource(asset, datasource).schema
 
@@ -134,36 +83,61 @@
     return schema
   }
 
-  const updateBoundValue = value => {
-    fieldConfigList = cloneDeep(value)
+  const updateSanitsedFields = value => {
+    sanitisedFields = cloneDeep(value)
   }
 
   const getValidColumns = (columns, options) => {
     if (!Array.isArray(columns) || !columns.length) {
       return []
     }
-    // We need to account for legacy configs which would just be an array
-    // of strings
-    if (typeof columns[0] === "string") {
-      columns = columns.map(col => ({
-        name: col,
-        displayName: col,
-      }))
-    }
+
     return columns.filter(column => {
-      return options.includes(column.name)
+      return options.includes(column.field)
     })
   }
 
-  let listOptions
-  $: if (fieldConfigList) {
-    listOptions = [...fieldConfigList, ...unconfigured].map(column => {
-      const type = getComponentForField(column.name)
-      const _component = `@budibase/standard-components/${type}`
+  const buildSudoInstance = instance => {
+    if (instance._component) {
+      return instance
+    }
 
-      return { ...column, _component } //only necessary if it doesnt exist
+    const type = getComponentForField(instance.field, schema)
+    instance._component = `@budibase/standard-components/${type}`
+
+    const sudoComponentInstance = store.actions.components.createInstance(
+      instance._component,
+      {
+        _instanceName: instance.field,
+        field: instance.field,
+        label: instance.field,
+        placeholder: instance.field,
+      },
+      {}
+    )
+
+    return { ...instance, ...sudoComponentInstance }
+  }
+
+  $: if (sanitisedFields) {
+    fieldList = [...sanitisedFields, ...unconfigured].map(buildSudoInstance)
+  }
+
+  const processItemUpdate = e => {
+    const updatedField = e.detail
+    const parentFieldsUpdated = fieldList ? cloneDeep(fieldList) : []
+
+    let parentFieldIdx = parentFieldsUpdated.findIndex(pSetting => {
+      return pSetting.field === updatedField?.field
     })
-    console.log(listOptions)
+
+    if (parentFieldIdx == -1) {
+      parentFieldsUpdated.push(updatedField)
+    } else {
+      parentFieldsUpdated[parentFieldIdx] = updatedField
+    }
+    // fieldList = parentFieldsUpdated
+    dispatch("change", getValidColumns(parentFieldsUpdated, options))
   }
 
   const listUpdated = e => {
@@ -173,12 +147,19 @@
 </script>
 
 <div class="field-configuration">
-  <SettingsList
-    value={listOptions}
-    on:change={listUpdated}
-    rightButton={EditFieldPopover}
-    rightProps={{ componentBindings, bindings, parent: componentInstance }}
-  />
+  {#if fieldList?.length}
+    <DraggableList
+      on:change={listUpdated}
+      on:itemChange={processItemUpdate}
+      items={fieldList}
+      listItemKey={"_id"}
+      listType={FieldSetting}
+      listTypeProps={{
+        componentBindings,
+        bindings,
+      }}
+    />
+  {/if}
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
new file mode 100644
index 0000000000..b5cfcb12d9
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
@@ -0,0 +1,56 @@
+<script>
+  import EditFieldPopover from "./EditFieldPopover.svelte"
+  import { Toggle } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { cloneDeep } from "lodash/fp"
+
+  export let item
+  export let componentBindings
+  export let bindings
+  export let anchor
+
+  const dispatch = createEventDispatcher()
+  const onToggle = item => {
+    return e => {
+      item.active = e.detail
+      dispatch("change", { ...cloneDeep(item), active: e.detail })
+    }
+  }
+</script>
+
+<div class="list-item-body">
+  <div class="list-item-left">
+    <EditFieldPopover
+      {anchor}
+      field={item}
+      {componentBindings}
+      {bindings}
+      on:change
+    />
+    <div class="field-label">{item.label || item.field}</div>
+  </div>
+  <div class="list-item-right">
+    <Toggle on:change={onToggle(item)} text="" value={item.active} thin />
+  </div>
+</div>
+
+<style>
+  .field-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .list-item-body,
+  .list-item-left {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+    min-width: 0;
+  }
+  .list-item-right :global(div.spectrum-Switch) {
+    margin: 0px;
+  }
+  .list-item-body {
+    justify-content: space-between;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js b/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
new file mode 100644
index 0000000000..d4a8963dba
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
@@ -0,0 +1,46 @@
+export const convertOldFieldFormat = fields => {
+  if (!fields) {
+    return []
+  }
+  const converted = fields.map(field => {
+    if (typeof field === "string") {
+      // existed but was a string
+      return {
+        field,
+        active: true,
+      }
+    } else if (typeof field?.active != "boolean") {
+      // existed but had no state
+      return {
+        field: field.name,
+        active: true,
+      }
+    } else {
+      return field
+    }
+  })
+  return converted
+}
+
+export const getComponentForField = (field, schema) => {
+  if (!field || !schema?.[field]) {
+    return null
+  }
+  const type = schema[field].type
+  return FieldTypeToComponentMap[type]
+}
+
+export const FieldTypeToComponentMap = {
+  string: "stringfield",
+  number: "numberfield",
+  bigint: "bigintfield",
+  options: "optionsfield",
+  array: "multifieldselect",
+  boolean: "booleanfield",
+  longform: "longformfield",
+  datetime: "datetimefield",
+  attachment: "attachmentfield",
+  link: "relationshipfield",
+  json: "jsonfield",
+  barcodeqr: "codescanner",
+}
diff --git a/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsEditor.svelte b/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsEditor.svelte
index 1201edd31e..c626081042 100644
--- a/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsEditor.svelte
@@ -24,11 +24,22 @@
   }
 </script>
 
-<ActionButton on:click={drawer.show}>Define Options</ActionButton>
-<Drawer bind:this={drawer} title="Options">
+<div class="options-wrap">
+  <div />
+  <div><ActionButton on:click={drawer.show}>Define Options</ActionButton></div>
+</div>
+<Drawer bind:this={drawer} title="Options" on:drawerHide on:drawerShow>
   <svelte:fragment slot="description">
     Define the options for this picker.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={saveOptions}>Save</Button>
   <OptionsDrawer bind:options={tempValue} slot="body" />
 </Drawer>
+
+<style>
+  .options-wrap {
+    gap: 8px;
+    display: grid;
+    grid-template-columns: 90px 1fr;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 5125c3bade..c8135b4f61 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -100,6 +100,8 @@
       {key}
       {type}
       {...props}
+      on:drawerHide
+      on:drawerShow
     />
   </div>
   {#if info}
diff --git a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
index 6db24e8d69..96953b56b8 100644
--- a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
@@ -5,9 +5,8 @@
 
   export let value = []
   export let bindings = []
-  export let componentDefinition
+  export let componentInstance
   export let type
-
   const dispatch = createEventDispatcher()
   let drawer
 
@@ -31,7 +30,7 @@
   <ActionButton on:click={drawer.show}>{text}</ActionButton>
 </div>
 
-<Drawer bind:this={drawer} title="Validation Rules">
+<Drawer bind:this={drawer} title="Validation Rules" on:drawerHide on:drawerShow>
   <svelte:fragment slot="description">
     Configure validation rules for this field.
   </svelte:fragment>
@@ -41,7 +40,7 @@
     bind:rules={value}
     {type}
     {bindings}
-    {componentDefinition}
+    fieldName={componentInstance?.field}
   />
 </Drawer>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte
index f0288f0059..e73e6d7841 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte
@@ -1,36 +1,12 @@
 <script>
-  import { DetailSummary, Icon } from "@budibase/bbui"
-
+  import { DetailSummary } from "@budibase/bbui"
+  import InfoDisplay from "./InfoDisplay.svelte"
   export let componentDefinition
 </script>
 
-<DetailSummary collapsible={false}>
-  <div class="info">
-    <div class="title">
-      <Icon name="HelpOutline" />
-      {componentDefinition.name}
-    </div>
-    {componentDefinition.info}
-  </div>
+<DetailSummary collapsible={false} noPadding={true}>
+  <InfoDisplay
+    title={componentDefinition.name}
+    body={componentDefinition.info}
+  />
 </DetailSummary>
-
-<style>
-  .title {
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    margin-bottom: var(--spacing-m);
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-s);
-    color: var(--spectrum-global-color-gray-600);
-  }
-  .info {
-    padding: var(--spacing-m) var(--spacing-l) var(--spacing-l) var(--spacing-l);
-    background-color: var(--background-alt);
-    border-radius: var(--border-radius-s);
-    font-size: 13px;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
index 2ff605cc77..581e69cfaf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
@@ -5,7 +5,7 @@
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ConditionalUISection from "./ConditionalUISection.svelte"
-  import ComponentInfoSection from "./ComponentInfoSection.svelte"
+
   import {
     getBindableProperties,
     getComponentBindableProperties,
@@ -55,9 +55,6 @@
         </div>
       </span>
       {#if section == "settings"}
-        {#if componentDefinition?.info}
-          <ComponentInfoSection {componentDefinition} />
-        {/if}
         <ComponentSettingsSection
           {componentInstance}
           {componentDefinition}
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 72383fcf3c..b4ed8995a0 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,6 +6,7 @@
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
   import EjectBlockButton from "components/design/settings/controls/EjectBlockButton.svelte"
   import { getComponentForSetting } from "components/design/settings/componentSettings"
+  import InfoDisplay from "./InfoDisplay.svelte"
   import analytics, { Events } from "analytics"
 
   export let componentDefinition
@@ -14,15 +15,13 @@
   export let componentBindings
   export let isScreen = false
   export let onUpdateSetting
+  export let showSectionTitle = true
+  export let showInstanceName = true
 
   $: sections = getSections(componentInstance, componentDefinition, isScreen)
 
   const getSections = (instance, definition, isScreen) => {
     const settings = definition?.settings ?? []
-    console.log(
-      "ComponentSettingsSection::definition?.settings",
-      definition?.settings
-    )
     const generalSettings = settings.filter(setting => !setting.section)
     const customSections = settings.filter(setting => setting.section)
     let sections = [
@@ -51,23 +50,22 @@
   }
 
   const updateSetting = async (setting, value) => {
-    if (typeof onUpdateSetting === "function") {
-      onUpdateSetting(setting, value)
-    } else {
-      try {
+    try {
+      if (typeof onUpdateSetting === "function") {
+        await onUpdateSetting(setting, value)
+      } else {
         await store.actions.components.updateSetting(setting.key, value)
-
-        // Send event if required
-        if (setting.sendEvents) {
-          analytics.captureEvent(Events.COMPONENT_UPDATED, {
-            name: componentInstance._component,
-            setting: setting.key,
-            value,
-          })
-        }
-      } catch (error) {
-        notifications.error("Error updating component prop")
       }
+      // Send event if required
+      if (setting.sendEvents) {
+        analytics.captureEvent(Events.COMPONENT_UPDATED, {
+          name: componentInstance._component,
+          setting: setting.key,
+          value,
+        })
+      }
+    } catch (error) {
+      notifications.error("Error updating component prop")
     }
   }
 
@@ -106,7 +104,7 @@
       }
     }
 
-    return true
+    return typeof setting.visible == "boolean" ? setting.visible : true
   }
 
   const canRenderControl = (instance, setting, isScreen) => {
@@ -125,9 +123,22 @@
 
 {#each sections as section, idx (section.name)}
   {#if section.visible}
-    <DetailSummary name={section.name} collapsible={false}>
+    <DetailSummary
+      name={showSectionTitle ? section.name : ""}
+      collapsible={false}
+    >
+      {#if section.info}
+        <div class="section-info">
+          <InfoDisplay body={section.info} />
+        </div>
+      {:else if idx === 0 && section.name === "General" && componentDefinition.info}
+        <InfoDisplay
+          title={componentDefinition.name}
+          body={componentDefinition.info}
+        />
+      {/if}
       <div class="settings">
-        {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
+        {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen && showInstanceName}
           <PropertyControl
             control={Input}
             label="Name"
@@ -138,13 +149,10 @@
         {/if}
         {#each section.settings as setting (setting.key)}
           {#if setting.visible}
-            <!-- DEAN - Remove fieldConfiguration label config -->
             <PropertyControl
               type={setting.type}
               control={getComponentForSetting(setting)}
-              label={setting.type != "fieldConfiguration"
-                ? setting.label
-                : undefined}
+              label={setting.label}
               labelHidden={setting.labelHidden}
               key={setting.key}
               value={componentInstance[setting.key]}
@@ -169,6 +177,8 @@
               {componentBindings}
               {componentInstance}
               {componentDefinition}
+              on:drawerShow
+              on:drawerHide
             />
           {/if}
         {/each}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/InfoDisplay.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/InfoDisplay.svelte
new file mode 100644
index 0000000000..a48f5d92b8
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/InfoDisplay.svelte
@@ -0,0 +1,61 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let title
+  export let body
+  export let icon = "HelpOutline"
+</script>
+
+<div class="info" class:noTitle={!title}>
+  {#if title}
+    <div class="title">
+      <Icon name={icon} />
+      {title || ""}
+    </div>
+    {@html body}
+  {:else}
+    <span class="icon">
+      <Icon name={icon} />
+    </span>
+    {@html body}
+  {/if}
+</div>
+
+<style>
+  .title {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: var(--spacing-m);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+  .title,
+  .icon {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .info {
+    padding: var(--spacing-m) var(--spacing-l) var(--spacing-l) var(--spacing-l);
+    background-color: var(--background-alt);
+    border-radius: var(--border-radius-s);
+    font-size: 13px;
+  }
+  .noTitle {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+  .info :global(a) {
+    color: inherit;
+    transition: color 130ms ease-out;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .info :global(a:hover) {
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index a03b6be8af..d1f718aaf3 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5282,6 +5282,11 @@
       },
       {
         "section": true,
+        "dependsOn": {
+          "setting": "actionType",
+          "value": "Create",
+          "invert": true
+        },
         "name": "Row details",
         "info": "<a href='https://docs.budibase.com/docs/form-block' target='_blank'>How to pass a row ID using bindings</a>",
         "settings": [
@@ -5289,23 +5294,13 @@
             "type": "text",
             "label": "Row ID",
             "key": "rowId",
-            "nested": true,
-            "dependsOn": {
-              "setting": "actionType",
-              "value": "Create",
-              "invert": true
-            }
+            "nested": true
           },
           {
             "type": "text",
             "label": "Empty text",
             "key": "noRowsMessage",
-            "defaultValue": "We couldn't find a row to display",
-            "dependsOn": {
-              "setting": "actionType",
-              "value": "Create",
-              "invert": true
-            }
+            "defaultValue": "We couldn't find a row to display"
           }
         ]
       },
@@ -5399,6 +5394,7 @@
           {
             "type": "fieldConfiguration",
             "key": "fields",
+            "nested": true,
             "selectAllFields": true
           },
           {
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index efc83fd5ac..e07c26544c 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@@ -45,6 +45,9 @@
   let enrichedSearchColumns
   let schemaLoaded = false
 
+  // Accommodate old config to ensure delete button does not reappear
+  $: deleteLabel = sidePanelShowDelete === false ? "" : sidePanelDeleteLabel
+
   $: fetchSchema(dataSource)
   $: enrichSearchColumns(searchColumns, schema).then(
     val => (enrichedSearchColumns = val)
@@ -245,10 +248,8 @@
             bind:id={detailsFormBlockId}
             props={{
               dataSource,
-              showSaveButton: true,
-              showDeleteButton: sidePanelShowDelete,
-              saveButtonLabel: sidePanelSaveLabel,
-              deleteButtonLabel: sidePanelDeleteLabel,
+              saveButtonLabel: sidePanelSaveLabel || "Save", //always show
+              deleteButtonLabel: deleteLabel, //respect config
               actionType: "Update",
               rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
               fields: sidePanelFields || normalFields,
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
index c6a149e57c..5d57d10ab6 100644
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -12,55 +12,59 @@
   export let fields
   export let labelPosition
   export let title
+  export let showDeleteButton
+  export let showSaveButton
   export let saveButtonLabel
   export let deleteButtonLabel
-  export let showSaveButton
-  export let showDeleteButton
   export let rowId
   export let actionUrl
   export let noRowsMessage
   export let notificationOverride
 
+  // Accommodate old config to ensure delete button does not reappear
+  $: deleteLabel = showDeleteButton === false ? "" : deleteButtonLabel?.trim()
+  $: saveLabel = showSaveButton === false ? "" : saveButtonLabel?.trim()
+
   const { fetchDatasourceSchema } = getContext("sdk")
 
   const convertOldFieldFormat = fields => {
-    return typeof fields?.[0] === "string"
-      ? fields.map(field => ({
+    if (!fields) {
+      return []
+    }
+    return fields.map(field => {
+      if (typeof field === "string") {
+        // existed but was a string
+        return {
           name: field,
-          displayName: field,
           active: true,
-        }))
-      : fields
-  }
-
-  //All settings need to derive from the block config now
-
-  // Parse the fields here too. Not present means false.
-  const getDefaultFields = (fields, schema) => {
-    let formFields
-    if (schema && (!fields || fields.length === 0)) {
-      const defaultFields = []
-
-      Object.values(schema).forEach(field => {
-        if (field.autocolumn) return
-
-        defaultFields.push({
-          name: field.name,
-          displayName: field.name,
-          active: true,
-        })
-      })
-      formFields = [...defaultFields]
-    } else {
-      formFields = (fields || []).map(field => {
+        }
+      } else {
+        // existed but had no state
         return {
           ...field,
           active: typeof field?.active != "boolean" ? true : field?.active,
         }
-      })
-    }
+      }
+    })
+  }
 
-    return formFields.filter(field => field.active)
+  const getDefaultFields = (fields, schema) => {
+    if (!schema) {
+      return []
+    }
+    let defaultFields = []
+
+    if (!fields || fields.length === 0) {
+      Object.values(schema)
+        .filter(field => !field.autocolumn)
+        .forEach(field => {
+          defaultFields.push({
+            name: field.name,
+            active: true,
+          })
+        })
+    }
+    return [...fields, ...defaultFields].filter(field => field.active)
   }
 
   let schema
@@ -94,15 +98,12 @@
     fields: fieldsOrDefault,
     labelPosition,
     title,
-    saveButtonLabel,
-    deleteButtonLabel,
-    showSaveButton,
-    showDeleteButton,
+    saveButtonLabel: saveLabel,
+    deleteButtonLabel: deleteLabel,
     schema,
     repeaterId,
     notificationOverride,
   }
-
   const fetchSchema = async () => {
     schema = (await fetchDatasourceSchema(dataSource)) || {}
   }
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 5415768dc9..1f69645280 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -13,8 +13,6 @@
   export let title
   export let saveButtonLabel
   export let deleteButtonLabel
-  export let showSaveButton
-  export let showDeleteButton
   export let schema
   export let repeaterId
   export let notificationOverride
@@ -100,18 +98,33 @@
     },
   ]
 
-  $: renderDeleteButton = showDeleteButton && actionType === "Update"
-  $: renderSaveButton = showSaveButton && actionType !== "View"
+  $: renderDeleteButton = deleteButtonLabel && actionType === "Update"
+  $: renderSaveButton = saveButtonLabel && actionType !== "View"
   $: renderButtons = renderDeleteButton || renderSaveButton
   $: renderHeader = renderButtons || title
 
   const getComponentForField = field => {
-    if (!field || !schema?.[field]) {
+    const fieldSchemaName = field.field || field.name
+    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
       return null
     }
-    const type = schema[field].type
+    const type = schema[fieldSchemaName].type
     return FieldTypeToComponentMap[type]
   }
+
+  const getPropsForField = field => {
+    let fieldProps = field._component
+      ? {
+          ...field,
+        }
+      : {
+          field: field.name,
+          label: field.name,
+          placeholder: field.name,
+          _instanceName: field.name,
+        }
+    return fieldProps
+  }
 </script>
 
 {#if fields?.length}
@@ -175,7 +188,7 @@
                 <BlockComponent
                   type="button"
                   props={{
-                    text: deleteButtonLabel || "Delete",
+                    text: deleteButtonLabel,
                     onClick: onDelete,
                     quiet: true,
                     type: "secondary",
@@ -187,7 +200,7 @@
                 <BlockComponent
                   type="button"
                   props={{
-                    text: saveButtonLabel || "Save",
+                    text: saveButtonLabel,
                     onClick: onSave,
                     type: "cta",
                   }}
@@ -201,15 +214,10 @@
       {#key fields}
         <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
           {#each fields as field, idx}
-            {#if getComponentForField(field.name)}
+            {#if getComponentForField(field) && field.active}
               <BlockComponent
-                type={getComponentForField(field.name)}
-                props={{
-                  validation: field.validation,
-                  field: field.name,
-                  label: field.displayName,
-                  placeholder: field.displayName,
-                }}
+                type={getComponentForField(field)}
+                props={getPropsForField(field)}
                 order={idx}
               />
             {/if}

From 38e46dfa153a22a6e2e879205b9b0ec53cab9612 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 24 Aug 2023 15:26:00 +0100
Subject: [PATCH 06/17] Added fix for ComponentSettingSection component
 location

---
 .../controls/FieldConfiguration/EditFieldPopover.svelte         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
index 94fd98c707..d25608691a 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -3,7 +3,7 @@
   import { store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher } from "svelte"
-  import ComponentSettingsSection from "../../../../../pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte"
+  import ComponentSettingsSection from "../../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
 
   export let anchor
   export let field

From 3f51b5aa9086b42a244c9874123b923116c7451b Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 24 Aug 2023 15:35:12 +0100
Subject: [PATCH 07/17] Fix for buttons section display config.

---
 packages/client/manifest.json | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index d1f718aaf3..9194ac0838 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5300,25 +5300,26 @@
             "type": "text",
             "label": "Empty text",
             "key": "noRowsMessage",
-            "defaultValue": "We couldn't find a row to display"
+            "defaultValue": "We couldn't find a row to display",
+            "nested": true
           }
         ]
       },
       {
         "section": true,
         "name": "Buttons",
+        "dependsOn": {
+          "setting": "actionType",
+          "value": "View",
+          "invert": true
+        },
         "settings": [
           {
             "type": "text",
             "key": "saveButtonLabel",
             "label": "Save button",
             "nested": true,
-            "defaultValue": "Save",
-            "dependsOn": {
-              "setting": "actionType",
-              "value": "View",
-              "invert": true
-            }
+            "defaultValue": "Save"
           },
           {
             "type": "text",

From 32f8638ffdc6e38b3e2490e7e3e6e05e0a860e42 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 24 Aug 2023 15:40:03 +0100
Subject: [PATCH 08/17] Removed comment

---
 .../controls/FieldConfiguration/FieldConfiguration.svelte       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 596bb95639..a54e8f7164 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@@ -136,7 +136,7 @@
     } else {
       parentFieldsUpdated[parentFieldIdx] = updatedField
     }
-    // fieldList = parentFieldsUpdated
+
     dispatch("change", getValidColumns(parentFieldsUpdated, options))
   }
 

From 13f6fed101414142ce02dce3cdf09b95ff1e11b3 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 25 Aug 2023 11:19:28 +0100
Subject: [PATCH 09/17] UX Enhancements and custom positioning behaviour for
 the popover

---
 .../bbui/src/Actions/position_dropdown.js     | 60 +++++++++++--------
 packages/bbui/src/Popover/Popover.svelte      |  2 +
 .../settings/controls/DraggableList.svelte    | 25 ++++++--
 .../EditFieldPopover.svelte                   | 38 +++++++++++-
 4 files changed, 93 insertions(+), 32 deletions(-)

diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index 4a5ef890bf..cc169eac09 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -17,6 +17,7 @@ export default function positionDropdown(element, opts) {
       maxWidth,
       useAnchorWidth,
       offset = 5,
+      customUpdate,
     } = opts
     if (!anchor) {
       return
@@ -32,33 +33,42 @@ export default function positionDropdown(element, opts) {
       left: null,
       top: null,
     }
-    // Determine vertical styles
-    if (align === "right-outside") {
-      styles.top = anchorBounds.top
-    } else if (window.innerHeight - anchorBounds.bottom < (maxHeight || 100)) {
-      styles.top = anchorBounds.top - elementBounds.height - offset
-      styles.maxHeight = maxHeight || 240
-    } else {
-      styles.top = anchorBounds.bottom + offset
-      styles.maxHeight =
-        maxHeight || window.innerHeight - anchorBounds.bottom - 20
-    }
 
-    // Determine horizontal styles
-    if (!maxWidth && useAnchorWidth) {
-      styles.maxWidth = anchorBounds.width
-    }
-    if (useAnchorWidth) {
-      styles.minWidth = anchorBounds.width
-    }
-    if (align === "right") {
-      styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
-    } else if (align === "right-outside") {
-      styles.left = anchorBounds.right + offset
-    } else if (align === "left-outside") {
-      styles.left = anchorBounds.left - elementBounds.width - offset
+    if (typeof customUpdate === "function") {
+      styles = customUpdate(anchorBounds, elementBounds, styles)
     } else {
-      styles.left = anchorBounds.left
+      // Determine vertical styles
+      if (align === "right-outside") {
+        styles.top = anchorBounds.top
+      } else if (
+        window.innerHeight - anchorBounds.bottom <
+        (maxHeight || 100)
+      ) {
+        styles.top = anchorBounds.top - elementBounds.height - offset
+        styles.maxHeight = maxHeight || 240
+      } else {
+        styles.top = anchorBounds.bottom + offset
+        styles.maxHeight =
+          maxHeight || window.innerHeight - anchorBounds.bottom - 20
+      }
+
+      // Determine horizontal styles
+      if (!maxWidth && useAnchorWidth) {
+        styles.maxWidth = anchorBounds.width
+      }
+      if (useAnchorWidth) {
+        styles.minWidth = anchorBounds.width
+      }
+      if (align === "right") {
+        styles.left =
+          anchorBounds.left + anchorBounds.width - elementBounds.width
+      } else if (align === "right-outside") {
+        styles.left = anchorBounds.right + offset
+      } else if (align === "left-outside") {
+        styles.left = anchorBounds.left - elementBounds.width - offset
+      } else {
+        styles.left = anchorBounds.left
+      }
     }
 
     // Apply styles
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index b2c9cd1dbe..13a6822853 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -23,6 +23,7 @@
   export let animate = true
   export let customZindex
 
+  export let handlePostionUpdate
   export let showPopover = true
   export let clickOutsideOverride = false
 
@@ -88,6 +89,7 @@
         maxWidth,
         useAnchorWidth,
         offset,
+        customUpdate: handlePostionUpdate,
       }}
       use:clickOutside={{
         callback: dismissible ? handleOutsideClick : () => {},
diff --git a/packages/builder/src/components/design/settings/controls/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList.svelte
index 4a227d9ff6..b1f0e83654 100644
--- a/packages/builder/src/components/design/settings/controls/DraggableList.svelte
+++ b/packages/builder/src/components/design/settings/controls/DraggableList.svelte
@@ -3,15 +3,30 @@
   import { dndzone } from "svelte-dnd-action"
   import { createEventDispatcher } from "svelte"
   import { generate } from "shortid"
+  import { setContext } from "svelte"
+  import { writable } from "svelte/store"
 
   export let items = []
   export let showHandle = true
-  export let highlighted
   export let listType
   export let listTypeProps = {}
   export let listItemKey
   export let draggable = true
 
+  let store = writable({
+    selected: null,
+    actions: {
+      select: id => {
+        store.update(state => ({
+          ...state,
+          selected: id,
+        }))
+      },
+    },
+  })
+
+  setContext("draggable", store)
+
   const dispatch = createEventDispatcher()
   const flipDurationMs = 150
 
@@ -66,7 +81,7 @@
   {#each draggableItems as draggable (draggable.id)}
     <li
       bind:this={anchors[draggable.id]}
-      class:highlighted={draggable.id === highlighted}
+      class:highlighted={draggable.id === $store.selected}
     >
       <div class="left-content">
         {#if showHandle}
@@ -113,7 +128,8 @@
     border-bottom: 1px solid
       var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
   }
-  .list-wrap > li:hover {
+  .list-wrap > li:hover,
+  li.highlighted {
     background-color: var(
       --spectrum-table-row-background-color-hover,
       var(--spectrum-alias-highlight-hover)
@@ -135,7 +151,4 @@
     padding-left: var(--spacing-s);
     padding-right: var(--spacing-s);
   }
-  li.highlighted {
-    background-color: pink;
-  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
index d25608691a..72eb29cba7 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -4,17 +4,24 @@
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher } from "svelte"
   import ComponentSettingsSection from "../../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
+  import { getContext } from "svelte"
 
   export let anchor
   export let field
   export let componentBindings
   export let bindings
 
+  const draggable = getContext("draggable")
   const dispatch = createEventDispatcher()
 
   let popover
   let drawers = []
   let sudoComponentInstance
+  let open = false
+
+  $: if (open && $draggable.selected && $draggable.selected != field._id) {
+    popover.hide()
+  }
 
   $: if (field) {
     sudoComponentInstance = field
@@ -61,7 +68,10 @@
   hoverable
   size="S"
   on:click={() => {
-    popover.show()
+    if (!open) {
+      popover.show()
+      open = true
+    }
   }}
 />
 
@@ -69,11 +79,37 @@
   bind:this={popover}
   on:open={() => {
     drawers = []
+    $draggable.actions.select(field._id)
+  }}
+  on:close={() => {
+    open = false
+    if ($draggable.selected == field._id) {
+      $draggable.actions.select()
+    }
   }}
   {anchor}
   align="left-outside"
   showPopover={drawers.length == 0}
   clickOutsideOverride={drawers.length > 0}
+  maxHeight={600}
+  handlePostionUpdate={(anchorBounds, eleBounds, cfg) => {
+    let { left, top } = cfg
+    let percentageOffset = 30
+    // left-outside
+    left = anchorBounds.left - eleBounds.width - 5
+
+    // shift up from the anchor, if space allows
+    let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset
+    let defaultTop = anchorBounds.top - offsetPos
+
+    if (window.innerHeight - defaultTop < eleBounds.height) {
+      top = window.innerHeight - eleBounds.height - 5
+    } else {
+      top = anchorBounds.top - offsetPos
+    }
+
+    return { ...cfg, left, top }
+  }}
 >
   <span class="popover-wrap">
     <Layout noPadding noGap>

From ef6f8e2abf3c042236f0714647a29fb1bfc0ae8e Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 25 Aug 2023 15:14:49 +0100
Subject: [PATCH 10/17] Lint fixes

---
 packages/builder/src/builderStore/dataBinding.js             | 5 +----
 .../controls/FieldConfiguration/EditFieldPopover.svelte      | 2 +-
 .../[componentId]/_components/Component/InfoDisplay.svelte   | 2 ++
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index aab312b9d0..9afd892c72 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -22,10 +22,7 @@ import { TableNames } from "../constants"
 import { JSONUtils } from "@budibase/frontend-core"
 import ActionDefinitions from "components/design/settings/controls/ButtonActionEditor/manifest.json"
 import { environment, licensing } from "stores/portal"
-import {
-  convertOldFieldFormat,
-  getComponentForField,
-} from "components/design/settings/controls/FieldConfiguration/utils"
+import { convertOldFieldFormat } from "components/design/settings/controls/FieldConfiguration/utils"
 
 // Regex to match all instances of template strings
 const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
index 72eb29cba7..7235bd9bdf 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -129,7 +129,7 @@
         on:drawerShow={e => {
           drawers = [...drawers, e.detail]
         }}
-        on:drawerHide={e => {
+        on:drawerHide={() => {
           drawers = drawers.slice(0, -1)
         }}
       />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
index a48f5d92b8..488b41036d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
@@ -12,11 +12,13 @@
       <Icon name={icon} />
       {title || ""}
     </div>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {@html body}
   {:else}
     <span class="icon">
       <Icon name={icon} />
     </span>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {@html body}
   {/if}
 </div>

From 26e5648602407d58d95dd0e65a2b72ea8b7694ef Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 29 Aug 2023 12:13:48 +0200
Subject: [PATCH 11/17] Update pro ref

---
 packages/pro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pro b/packages/pro
index b7815e099b..6ee4824462 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit b7815e099bbd5e1410185c464dbd54f7287e732f
+Subproject commit 6ee4824462c13b407b837758e08e46cbc2373935

From d1e346f5e52c711f3139f26e31e8548e7ca0057d Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 29 Aug 2023 12:36:59 +0200
Subject: [PATCH 12/17] Update pro ref

---
 packages/pro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pro b/packages/pro
index 6ee4824462..140386c7ad 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 6ee4824462c13b407b837758e08e46cbc2373935
+Subproject commit 140386c7ad7e3d50bd361fc702e49b288c1747c2

From ff0fe5d45f16c8f86d0fee864260a0686624f0d0 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 29 Aug 2023 10:44:43 +0000
Subject: [PATCH 13/17] Bump version to 2.9.33-alpha.1

---
 lerna.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index c379dfe567..6a117a099e 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.9.33-alpha.0",
+  "version": "2.9.33-alpha.1",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

From 3bdb1ea877c0c633686489dcdec15c17059b373e Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 29 Aug 2023 17:11:25 +0100
Subject: [PATCH 14/17] PR Feedback updates

---
 .../builder/src/builderStore/dataBinding.js   | 48 +++++++++++++------
 .../ButtonActionDrawer.svelte                 | 21 ++++----
 .../ButtonActionEditor.svelte                 |  2 +
 .../EditFieldPopover.svelte                   | 18 +++----
 .../FieldConfiguration.svelte                 |  8 +---
 .../_components/Component/InfoDisplay.svelte  |  3 ++
 .../app/blocks/form/InnerFormBlock.svelte     | 24 +++++-----
 7 files changed, 74 insertions(+), 50 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 9afd892c72..20172e4f9c 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -6,7 +6,7 @@ import {
   findComponentPath,
   getComponentSettings,
 } from "./componentUtils"
-import { store } from "builderStore"
+import { store, currentAsset } from "builderStore"
 import {
   queries as queriesStores,
   tables as tablesStore,
@@ -629,24 +629,36 @@ const getRoleBindings = () => {
 }
 
 /**
- * Gets all bindable properties exposed in an event action flow up until
- * the specified action ID, as well as context provided for the action
- * setting as a whole by the component.
+ * Gets all bindable event context properties provided in the component
+ * setting
  */
-export const getEventContextBindings = (
-  asset,
-  componentId,
+export const getEventContextBindings = ({
   settingKey,
-  actions,
-  actionId
-) => {
+  componentInstance,
+  componentId,
+  componentDefinition,
+  asset,
+}) => {
   let bindings = []
+
+  const selectedAsset = asset ?? get(currentAsset)
+
   // Check if any context bindings are provided by the component for this
   // setting
-  const component = findComponent(asset.props, componentId)
-  const def = store.actions.components.getDefinition(component?._component)
+  const component =
+    componentInstance ?? findComponent(selectedAsset.props, componentId)
+
+  if (!component) {
+    return bindings
+  }
+
+  const definition =
+    componentDefinition ??
+    store.actions.components.getDefinition(component?._component)
+
   const settings = getComponentSettings(component?._component)
   const eventSetting = settings.find(setting => setting.key === settingKey)
+
   if (eventSetting?.context?.length) {
     eventSetting.context.forEach(contextEntry => {
       bindings.push({
@@ -655,14 +667,23 @@ export const getEventContextBindings = (
           contextEntry.key
         )}`,
         category: component._instanceName,
-        icon: def.icon,
+        icon: definition.icon,
         display: {
           name: contextEntry.label,
         },
       })
     })
   }
+  return bindings
+}
 
+/**
+ * Gets all bindable properties exposed in an event action flow up until
+ * the specified action ID, as well as context provided for the action
+ * setting as a whole by the component.
+ */
+export const getActionBindings = (actions, actionId) => {
+  let bindings = []
   // Get the steps leading up to this value
   const index = actions?.findIndex(action => action.id === actionId)
   if (index == null || index === -1) {
@@ -689,7 +710,6 @@ export const getEventContextBindings = (
       })
     }
   })
-
   return bindings
 }
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
index ef6410abca..f9541ea79f 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
@@ -13,9 +13,9 @@
   import { generate } from "shortid"
   import {
     getEventContextBindings,
+    getActionBindings,
     makeStateBinding,
   } from "builderStore/dataBinding"
-  import { currentAsset, store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
 
   const flipDurationMs = 150
@@ -26,6 +26,7 @@
   export let actions
   export let bindings = []
   export let nested
+  export let componentInstance
 
   let actionQuery
   let selectedAction = actions?.length ? actions[0] : null
@@ -68,15 +69,19 @@
     acc[action.type].push(action)
     return acc
   }, {})
+
   // These are ephemeral bindings which only exist while executing actions
-  $: eventContexBindings = getEventContextBindings(
-    $currentAsset,
-    $store.selectedComponentId,
-    key,
-    actions,
-    selectedAction?.id
+  $: eventContextBindings = getEventContextBindings({
+    componentInstance,
+    settingKey: key,
+  })
+  $: actionContextBindings = getActionBindings(actions, selectedAction?.id)
+
+  $: allBindings = getAllBindings(
+    bindings,
+    [...eventContextBindings, ...actionContextBindings],
+    actions
   )
-  $: allBindings = getAllBindings(bindings, eventContexBindings, actions)
   $: {
     // Ensure each action has a unique ID
     if (actions) {
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
index 8a1b896071..792777349c 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
@@ -13,6 +13,7 @@
   export let name
   export let bindings
   export let nested
+  export let componentInstance
 
   let drawer
   let tmpValue
@@ -86,6 +87,7 @@
     {bindings}
     {key}
     {nested}
+    {componentInstance}
   />
 </Drawer>
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
index 7235bd9bdf..7d2eaae478 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -16,7 +16,7 @@
 
   let popover
   let drawers = []
-  let sudoComponentInstance
+  let pseudoComponentInstance
   let open = false
 
   $: if (open && $draggable.selected && $draggable.selected != field._id) {
@@ -24,10 +24,10 @@
   }
 
   $: if (field) {
-    sudoComponentInstance = field
+    pseudoComponentInstance = field
   }
   $: componentDef = store.actions.components.getDefinition(
-    sudoComponentInstance._component
+    pseudoComponentInstance._component
   )
   $: parsedComponentDef = processComponentDefinitionSettings(componentDef)
 
@@ -46,7 +46,7 @@
   }
 
   const updateSetting = async (setting, value) => {
-    const nestedComponentInstance = cloneDeep(sudoComponentInstance)
+    const nestedComponentInstance = cloneDeep(pseudoComponentInstance)
 
     const patchFn = store.actions.components.updateComponentSetting(
       setting.key,
@@ -56,7 +56,7 @@
 
     const update = {
       ...nestedComponentInstance,
-      active: sudoComponentInstance.active,
+      active: pseudoComponentInstance.active,
     }
 
     dispatch("change", update)
@@ -96,7 +96,7 @@
     let { left, top } = cfg
     let percentageOffset = 30
     // left-outside
-    left = anchorBounds.left - eleBounds.width - 5
+    left = anchorBounds.left - eleBounds.width - 18
 
     // shift up from the anchor, if space allows
     let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset
@@ -115,10 +115,10 @@
     <Layout noPadding noGap>
       <div class="type-icon">
         <Icon name={parsedComponentDef.icon} />
-        <span>{parsedComponentDef.name}</span>
+        <span>{field.field}</span>
       </div>
       <ComponentSettingsSection
-        componentInstance={sudoComponentInstance}
+        componentInstance={pseudoComponentInstance}
         componentDefinition={parsedComponentDef}
         isScreen={false}
         onUpdateSetting={updateSetting}
@@ -139,7 +139,7 @@
 
 <style>
   .popover-wrap {
-    background-color: var(--spectrum-alias-background-color-secondary);
+    background-color: var(--spectrum-alias-background-color-primary);
   }
   .type-icon {
     display: flex;
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 a54e8f7164..255f46ec7b 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@@ -20,10 +20,7 @@
   let sanitisedFields
   let fieldList
   let schema
-  // let assetIdCache
   let cachedValue
-  // $: value, console.log("VALUE UPDATED")
-  // $: $currentAsset, console.log("currentAsset updated ", $currentAsset)
 
   $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
   $: actionType = componentInstance.actionType
@@ -46,7 +43,6 @@
   $: options = Object.keys(schema || {})
   $: sanitisedValue = getValidColumns(convertOldFieldFormat(value), options)
   $: updateSanitsedFields(sanitisedValue)
-
   $: unconfigured = buildUnconfiguredOptions(schema, sanitisedFields)
 
   // Builds unused ones only
@@ -105,7 +101,7 @@
     const type = getComponentForField(instance.field, schema)
     instance._component = `@budibase/standard-components/${type}`
 
-    const sudoComponentInstance = store.actions.components.createInstance(
+    const pseudoComponentInstance = store.actions.components.createInstance(
       instance._component,
       {
         _instanceName: instance.field,
@@ -116,7 +112,7 @@
       {}
     )
 
-    return { ...instance, ...sudoComponentInstance }
+    return { ...instance, ...pseudoComponentInstance }
   }
 
   $: if (sanitisedFields) {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
index 488b41036d..03bf771beb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
@@ -60,4 +60,7 @@
   .info :global(a:hover) {
     color: var(--spectrum-global-color-gray-900);
   }
+  .info :global(a) {
+    text-decoration: underline;
+  }
 </style>
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 1f69645280..3c194e0f82 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -211,19 +211,17 @@
           {/if}
         </BlockComponent>
       {/if}
-      {#key fields}
-        <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
-          {#each fields as field, idx}
-            {#if getComponentForField(field) && field.active}
-              <BlockComponent
-                type={getComponentForField(field)}
-                props={getPropsForField(field)}
-                order={idx}
-              />
-            {/if}
-          {/each}
-        </BlockComponent>
-      {/key}
+      <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
+        {#each fields as field, idx}
+          {#if getComponentForField(field) && field.active}
+            <BlockComponent
+              type={getComponentForField(field)}
+              props={getPropsForField(field)}
+              order={idx}
+            />
+          {/if}
+        {/each}
+      </BlockComponent>
     </BlockComponent>
   </BlockComponent>
 {:else}

From 0d07329e81dfaad3d016fa0e4f48bae4031217cf Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 29 Aug 2023 16:45:29 +0000
Subject: [PATCH 15/17] Bump version to 2.9.33-alpha.2

---
 lerna.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index 6a117a099e..d6565be99b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.9.33-alpha.1",
+  "version": "2.9.33-alpha.2",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

From 5726fa86be3089fd313537284b95c1c841aa7aee Mon Sep 17 00:00:00 2001
From: Rory Powell <rory.codes@gmail.com>
Date: Wed, 30 Aug 2023 08:37:29 +0100
Subject: [PATCH 16/17] Update CLI PH Token

---
 packages/cli/src/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/src/constants.ts b/packages/cli/src/constants.ts
index 6fa5822986..62ce0dc4d9 100644
--- a/packages/cli/src/constants.ts
+++ b/packages/cli/src/constants.ts
@@ -1,4 +1,4 @@
 export { CommandWord, InitType, AnalyticsEvent } from "@budibase/types"
 
-export const POSTHOG_TOKEN = "phc_yGOn4i7jWKaCTapdGR6lfA4AvmuEQ2ijn5zAVSFYPlS"
+export const POSTHOG_TOKEN = "phc_bIjZL7oh2GEUd2vqvTBH8WvrX0fWTFQMs6H5KQxiUxU"
 export const GENERATED_USER_EMAIL = "admin@admin.com"

From defa424a12fadc695bbc1313429a6970d1b3b290 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Wed, 30 Aug 2023 07:44:43 +0000
Subject: [PATCH 17/17] Bump version to 2.9.33-alpha.3

---
 lerna.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index d6565be99b..7205c201e6 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.9.33-alpha.2",
+  "version": "2.9.33-alpha.3",
   "npmClient": "yarn",
   "packages": [
     "packages/*"