From b4a8f22b2ee54914294eadb0259fde5f1006879a Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 11 Oct 2023 10:09:14 +0100
Subject: [PATCH 01/10] Initial commit

---
 .../design/settings/componentSettings.js      |   2 +
 .../ButtonConfiguration.svelte                | 104 ++++++++++
 .../ButtonConfiguration/ButtonSetting.svelte  |  61 ++++++
 .../controls/FieldConfiguration.svelte        |  91 ---------
 .../EditFieldPopover.svelte                   |  38 ++--
 .../FieldConfiguration.svelte                 |   4 +-
 .../new/_components/componentStructure.json   |   1 +
 packages/client/manifest.json                 | 183 ++++++++++++++++++
 .../components/app/forms/ButtonGroup.svelte   |  38 ++++
 .../client/src/components/app/forms/index.js  |   1 +
 10 files changed, 412 insertions(+), 111 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
 delete mode 100644 packages/builder/src/components/design/settings/controls/FieldConfiguration.svelte
 create mode 100644 packages/client/src/components/app/forms/ButtonGroup.svelte

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 4c49587372..232b4bef31 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -23,6 +23,7 @@ import BasicColumnEditor from "./controls/ColumnEditor/BasicColumnEditor.svelte"
 import GridColumnEditor from "./controls/ColumnEditor/GridColumnEditor.svelte"
 import BarButtonList from "./controls/BarButtonList.svelte"
 import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration.svelte"
+import ButtonConfiguration from "./controls/ButtonConfiguration/ButtonConfiguration.svelte"
 import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte"
 
 const componentMap = {
@@ -48,6 +49,7 @@ const componentMap = {
   "filter/relationship": RelationshipFilterEditor,
   url: URLSelect,
   fieldConfiguration: FieldConfiguration,
+  buttonConfiguration: ButtonConfiguration,
   columns: ColumnEditor,
   "columns/basic": BasicColumnEditor,
   "columns/grid": GridColumnEditor,
diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
new file mode 100644
index 0000000000..baa8ad733c
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -0,0 +1,104 @@
+<script>
+  import DraggableList from "../DraggableList.svelte"
+  import ButtonSetting from "./ButtonSetting.svelte"
+  import {
+    getBindableProperties,
+    getComponentBindableProperties,
+  } from "builderStore/dataBinding"
+  import { createEventDispatcher, onMount } from "svelte"
+  import { selectedScreen, store } from "builderStore"
+  import { isEqual, cloneDeep } from "lodash"
+
+  export let componentInstance
+  export let value
+
+  $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
+
+  const dispatch = createEventDispatcher()
+  let buttonList
+  let mounted
+  let cachedValue
+  let componentBindings = []
+
+  $: componentBindings = getComponentBindableProperties(
+    $selectedScreen,
+    componentInstance._id
+  )
+
+  $: if (!isEqual(value, cachedValue) && mounted) {
+    cachedValue = value
+      ? cloneDeep(value)
+      : [
+          buildPseudoInstance({ name: `Button 1`, type: "cta" }),
+          buildPseudoInstance({ name: `Button 2` }),
+        ]
+  }
+
+  const updateState = value => {
+    buttonList = value
+  }
+
+  $: updateState(cachedValue)
+
+  const processItemUpdate = e => {
+    const updatedField = e.detail
+    const parentButtonsUpdated = buttonList ? cloneDeep(buttonList) : []
+
+    let parentFieldIdx = parentButtonsUpdated.findIndex(pSetting => {
+      return pSetting._id === updatedField?._id
+    })
+
+    if (parentFieldIdx == -1) {
+      parentButtonsUpdated.push(updatedField)
+    } else {
+      parentButtonsUpdated[parentFieldIdx] = updatedField
+    }
+    console.log("On value update ", parentButtonsUpdated)
+    dispatch("change", parentButtonsUpdated)
+  }
+
+  const listUpdated = e => {
+    dispatch("change", [...e.detail])
+  }
+
+  // May not be necessary without
+  const buildPseudoInstance = cfg => {
+    const pseudoComponentInstance = store.actions.components.createInstance(
+      `@budibase/standard-components/button`,
+      {
+        _instanceName: cfg.name,
+        text: cfg.name,
+        type: cfg.type || "primary",
+      },
+      {}
+    )
+
+    return pseudoComponentInstance
+  }
+
+  onMount(() => {
+    mounted = true
+  })
+</script>
+
+<div class="button-configuration">
+  {#if buttonList?.length}
+    <DraggableList
+      on:change={listUpdated}
+      on:itemChange={processItemUpdate}
+      items={buttonList}
+      listItemKey={"_id"}
+      listType={ButtonSetting}
+      listTypeProps={{
+        componentBindings,
+        bindings,
+      }}
+    />
+  {/if}
+</div>
+
+<style>
+  .button-configuration :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
new file mode 100644
index 0000000000..851cbe289c
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
@@ -0,0 +1,61 @@
+<script>
+  import EditFieldPopover from "../FieldConfiguration/EditFieldPopover.svelte"
+  import { Icon } 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.text}</div>
+  </div>
+  <div class="list-item-right">
+    <Icon size="S" name="Close" hoverable on:click={() => {console.log("REMOVE ME")}}
+  />
+  </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-body {
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+  .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.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration.svelte
deleted file mode 100644
index 80f4829d71..0000000000
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script>
-  import { Button, ActionButton, Drawer } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import ColumnDrawer from "./ColumnEditor/ColumnDrawer.svelte"
-  import { cloneDeep } from "lodash/fp"
-  import {
-    getDatasourceForProvider,
-    getSchemaForDatasource,
-  } from "builderStore/dataBinding"
-  import { currentAsset } from "builderStore"
-  import { getFields } from "helpers/searchFields"
-
-  export let componentInstance
-  export let value = []
-  export let allowCellEditing = true
-  export let subject = "Table"
-
-  const dispatch = createEventDispatcher()
-
-  let drawer
-  let boundValue
-
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
-  $: schema = getSchema($currentAsset, datasource)
-  $: options = allowCellEditing
-    ? Object.keys(schema || {})
-    : enrichedSchemaFields?.map(field => field.name)
-  $: sanitisedValue = getValidColumns(value, options)
-  $: updateBoundValue(sanitisedValue)
-  $: enrichedSchemaFields = getFields(Object.values(schema || {}), {
-    allowLinks: true,
-  })
-
-  const getSchema = (asset, datasource) => {
-    const schema = getSchemaForDatasource(asset, datasource).schema
-
-    // Don't show ID and rev in tables
-    if (schema) {
-      delete schema._id
-      delete schema._rev
-    }
-
-    return schema
-  }
-
-  const updateBoundValue = value => {
-    boundValue = 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)
-    })
-  }
-
-  const open = () => {
-    updateBoundValue(sanitisedValue)
-    drawer.show()
-  }
-
-  const save = () => {
-    dispatch("change", getValidColumns(boundValue, options))
-    drawer.hide()
-  }
-</script>
-
-<ActionButton on:click={open}>Configure columns</ActionButton>
-<Drawer bind:this={drawer} title="{subject} Columns">
-  <svelte:fragment slot="description">
-    Configure the columns in your {subject.toLowerCase()}.
-  </svelte:fragment>
-  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <ColumnDrawer
-    slot="body"
-    bind:columns={boundValue}
-    {options}
-    {schema}
-    {allowCellEditing}
-  />
-</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 7d2eaae478..72e7784727 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -61,6 +61,25 @@
 
     dispatch("change", update)
   }
+
+  const customPositionHandler = (anchorBounds, eleBounds, cfg) => {
+    let { left, top } = cfg
+    let percentageOffset = 30
+    // left-outside
+    left = anchorBounds.left - eleBounds.width - 18
+
+    // 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 }
+  }
 </script>
 
 <Icon
@@ -92,24 +111,7 @@
   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 - 18
-
-    // 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 }
-  }}
+  handlePostionUpdate={customPositionHandler}
 >
   <span class="popover-wrap">
     <Layout noPadding noGap>
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 4169cb7d3d..42651a4d84 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@@ -50,7 +50,7 @@
     updateSanitsedFields(sanitisedValue)
     unconfigured = buildUnconfiguredOptions(schema, sanitisedFields)
     fieldList = [...sanitisedFields, ...unconfigured]
-      .map(buildSudoInstance)
+      .map(buildPseudoInstance)
       .filter(x => x != null)
   }
 
@@ -104,7 +104,7 @@
     })
   }
 
-  const buildSudoInstance = instance => {
+  const buildPseudoInstance = instance => {
     if (instance._component) {
       return instance
     }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
index 11a130490a..dd129be11e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
@@ -36,6 +36,7 @@
       "heading",
       "text",
       "button",
+      "buttongroup",
       "tag",
       "spectrumcard",
       "cardstat",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 4e56ca758d..27e56d94db 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -258,6 +258,189 @@
     "description": "Contains your app screens",
     "static": true
   },
+
+  "buttongroup": {
+    "name": "Button group",
+    "icon": "Button",
+    "hasChildren": false,
+    "settings": [
+      {
+        "section": true,
+        "name": "Buttons",
+        "settings": [
+          {
+            "type": "buttonConfiguration",
+            "key": "buttons",
+            "nested": true,
+            "defaultValue" : [{
+              "component" : "button",
+              "props" : {
+                "type": "cta"
+              }
+            },{
+              "component" : "button",
+              "props" : {
+                "type" : "primary"
+              }
+            }]
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Layout",
+        "settings": [
+          {
+            "type": "select",
+            "label": "Direction",
+            "key": "direction",
+            "showInBar": true,
+            "barStyle": "buttons",
+            "options": [
+              {
+                "label": "Column",
+                "value": "column",
+                "barIcon": "ViewColumn",
+                "barTitle": "Column layout"
+              },
+              {
+                "label": "Row",
+                "value": "row",
+                "barIcon": "ViewRow",
+                "barTitle": "Row layout"
+              }
+            ],
+            "defaultValue": "column"
+          },
+          {
+            "type": "select",
+            "label": "Horiz. align",
+            "key": "hAlign",
+            "showInBar": true,
+            "barStyle": "buttons",
+            "options": [
+              {
+                "label": "Left",
+                "value": "left",
+                "barIcon": "AlignLeft",
+                "barTitle": "Align left"
+              },
+              {
+                "label": "Center",
+                "value": "center",
+                "barIcon": "AlignCenter",
+                "barTitle": "Align center"
+              },
+              {
+                "label": "Right",
+                "value": "right",
+                "barIcon": "AlignRight",
+                "barTitle": "Align right"
+              },
+              {
+                "label": "Stretch",
+                "value": "stretch",
+                "barIcon": "MoveLeftRight",
+                "barTitle": "Align stretched horizontally"
+              }
+            ],
+            "defaultValue": "left"
+          },
+          {
+            "type": "select",
+            "label": "Vert. align",
+            "key": "vAlign",
+            "showInBar": true,
+            "barStyle": "buttons",
+            "options": [
+              {
+                "label": "Top",
+                "value": "top",
+                "barIcon": "AlignTop",
+                "barTitle": "Align top"
+              },
+              {
+                "label": "Middle",
+                "value": "middle",
+                "barIcon": "AlignMiddle",
+                "barTitle": "Align middle"
+              },
+              {
+                "label": "Bottom",
+                "value": "bottom",
+                "barIcon": "AlignBottom",
+                "barTitle": "Align bottom"
+              },
+              {
+                "label": "Stretch",
+                "value": "stretch",
+                "barIcon": "MoveUpDown",
+                "barTitle": "Align stretched vertically"
+              }
+            ],
+            "defaultValue": "top"
+          },
+          {
+            "type": "select",
+            "label": "Size",
+            "key": "size",
+            "showInBar": true,
+            "barStyle": "buttons",
+            "options": [
+              {
+                "label": "Shrink",
+                "value": "shrink",
+                "barIcon": "Minimize",
+                "barTitle": "Shrink container"
+              },
+              {
+                "label": "Grow",
+                "value": "grow",
+                "barIcon": "Maximize",
+                "barTitle": "Grow container"
+              }
+            ],
+            "defaultValue": "shrink"
+          },
+          {
+            "type": "select",
+            "label": "Gap",
+            "key": "gap",
+            "showInBar": true,
+            "barStyle": "picker",
+            "options": [
+              {
+                "label": "None",
+                "value": "N"
+              },
+              {
+                "label": "Small",
+                "value": "S"
+              },
+              {
+                "label": "Medium",
+                "value": "M"
+              },
+              {
+                "label": "Large",
+                "value": "L"
+              }
+            ],
+            "defaultValue": "M"
+          },
+          {
+            "type": "boolean",
+            "label": "Wrap",
+            "key": "wrap",
+            "showInBar": true,
+            "barIcon": "ModernGridView",
+            "barTitle": "Wrap"
+          }
+        ]
+      }
+    ]
+  },
+
   "button": {
     "name": "Button",
     "description": "A basic html button that is ready for styling",
diff --git a/packages/client/src/components/app/forms/ButtonGroup.svelte b/packages/client/src/components/app/forms/ButtonGroup.svelte
new file mode 100644
index 0000000000..222e91a55f
--- /dev/null
+++ b/packages/client/src/components/app/forms/ButtonGroup.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { getContext } from "svelte"
+  import Container from "components/app/Container.svelte"
+  import BlockComponent from "../../BlockComponent.svelte"
+  import Block from "../../Block.svelte"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+
+  export let buttons = []
+  export let direction
+  export let hAlign
+  export let vAlign
+  export let gap = "S"
+  export let wrap
+
+  $: console.log("client buttons/wrap", buttons, wrap)
+</script>
+
+<!-- <div use:styleable={$component.styles}> -->
+  <Block>
+    <Container {direction} {hAlign} {vAlign} {gap} {wrap}>
+      {#each buttons as { text, type, quiet, disabled, onClick, size }}
+        <BlockComponent
+          type="button"
+          props={{
+            text,
+            onClick,
+            type,
+            quiet,
+            disabled,
+            size
+          }}
+        />
+      {/each}
+    </Container>
+  </Block>
+<!-- </div> -->
diff --git a/packages/client/src/components/app/forms/index.js b/packages/client/src/components/app/forms/index.js
index 5804d3a79d..24d7f11c0c 100644
--- a/packages/client/src/components/app/forms/index.js
+++ b/packages/client/src/components/app/forms/index.js
@@ -16,3 +16,4 @@ export { default as jsonfield } from "./JSONField.svelte"
 export { default as s3upload } from "./S3Upload.svelte"
 export { default as codescanner } from "./CodeScannerField.svelte"
 export { default as bbreferencefield } from "./BBReferenceField.svelte"
+export { default as buttongroup } from "./ButtonGroup.svelte"
\ No newline at end of file

From b8c87224f76b0ec77e65072fd78df917bff7a7bf Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 13 Oct 2023 14:53:39 +0100
Subject: [PATCH 02/10] Add/Remove button behaviour, binding label support and
 default text behaviour. Refactoring and renaming of EditComponentPopoever
 component

---
 .../ButtonConfiguration.svelte                | 112 ++++++++++++++----
 .../ButtonConfiguration/ButtonSetting.svelte  |  33 +++---
 .../{ => DraggableList}/DraggableList.svelte  |  32 ++++-
 .../controls/DraggableList/drag-handle.svelte |  31 +++++
 ...ver.svelte => EditComponentPopover.svelte} |  65 ++++------
 .../FieldConfiguration.svelte                 |   2 +-
 .../FieldConfiguration/FieldSetting.svelte    |  56 ++++++++-
 packages/client/manifest.json                 |  22 ++--
 .../src/components/app/ButtonGroup.svelte     |  37 ++++++
 .../components/app/forms/ButtonGroup.svelte   |  38 ------
 .../client/src/components/app/forms/index.js  |   3 +-
 packages/client/src/components/app/index.js   |   1 +
 12 files changed, 281 insertions(+), 151 deletions(-)
 rename packages/builder/src/components/design/settings/controls/{ => DraggableList}/DraggableList.svelte (82%)
 create mode 100644 packages/builder/src/components/design/settings/controls/DraggableList/drag-handle.svelte
 rename packages/builder/src/components/design/settings/controls/{FieldConfiguration/EditFieldPopover.svelte => EditComponentPopover.svelte} (63%)
 create mode 100644 packages/client/src/components/app/ButtonGroup.svelte
 delete mode 100644 packages/client/src/components/app/forms/ButtonGroup.svelte

diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
index baa8ad733c..fde888d17b 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -1,5 +1,5 @@
 <script>
-  import DraggableList from "../DraggableList.svelte"
+  import DraggableList from "../DraggableList/DraggableList.svelte"
   import ButtonSetting from "./ButtonSetting.svelte"
   import {
     getBindableProperties,
@@ -8,37 +8,47 @@
   import { createEventDispatcher, onMount } from "svelte"
   import { selectedScreen, store } from "builderStore"
   import { isEqual, cloneDeep } from "lodash"
+  import { Helpers } from "@budibase/bbui"
 
   export let componentInstance
   export let value
 
-  $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
-
   const dispatch = createEventDispatcher()
-  let buttonList
+
   let mounted
   let cachedValue
   let componentBindings = []
+  let focusItem
 
+  const updateState = value => {
+    return (value || []).map((button, idx) => {
+      if (!button._component) {
+        return buildPseudoInstance({ ...button, name: `Button ${idx + 1}` })
+      }
+      return button
+    })
+  }
+
+  const buildItemProps = buttonList => {
+    return {
+      componentBindings,
+      bindings,
+      removeButton,
+      canRemove: buttonList?.length > 1,
+    }
+  }
+
+  $: if (!isEqual(value, cachedValue) && mounted) {
+    cachedValue = value ? cloneDeep(value) : []
+  }
+  $: buttonList = updateState(cachedValue)
+  $: buttonCount = buttonList?.length
+  $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
   $: componentBindings = getComponentBindableProperties(
     $selectedScreen,
     componentInstance._id
   )
-
-  $: if (!isEqual(value, cachedValue) && mounted) {
-    cachedValue = value
-      ? cloneDeep(value)
-      : [
-          buildPseudoInstance({ name: `Button 1`, type: "cta" }),
-          buildPseudoInstance({ name: `Button 2` }),
-        ]
-  }
-
-  const updateState = value => {
-    buttonList = value
-  }
-
-  $: updateState(cachedValue)
+  $: itemProps = buildItemProps(buttonList)
 
   const processItemUpdate = e => {
     const updatedField = e.detail
@@ -53,7 +63,6 @@
     } else {
       parentButtonsUpdated[parentFieldIdx] = updatedField
     }
-    console.log("On value update ", parentButtonsUpdated)
     dispatch("change", parentButtonsUpdated)
   }
 
@@ -61,12 +70,11 @@
     dispatch("change", [...e.detail])
   }
 
-  // May not be necessary without
   const buildPseudoInstance = cfg => {
     const pseudoComponentInstance = store.actions.components.createInstance(
       `@budibase/standard-components/button`,
       {
-        _instanceName: cfg.name,
+        _instanceName: Helpers.uuid(),
         text: cfg.name,
         type: cfg.type || "primary",
       },
@@ -76,6 +84,21 @@
     return pseudoComponentInstance
   }
 
+  const addButton = () => {
+    const newButton = buildPseudoInstance({
+      name: `Button ${buttonList.length + 1}`,
+    })
+    dispatch("change", [...buttonList, newButton])
+    focusItem = newButton._id
+  }
+
+  const removeButton = id => {
+    dispatch(
+      "change",
+      buttonList.filter(button => button._id !== id)
+    )
+  }
+
   onMount(() => {
     mounted = true
   })
@@ -89,11 +112,14 @@
       items={buttonList}
       listItemKey={"_id"}
       listType={ButtonSetting}
-      listTypeProps={{
-        componentBindings,
-        bindings,
-      }}
+      listTypeProps={itemProps}
+      focus={focusItem}
+      draggable={buttonCount > 1}
     />
+
+    <div class="list-footer" on:click={addButton}>
+      <div class="add-button">Add button</div>
+    </div>
   {/if}
 </div>
 
@@ -101,4 +127,38 @@
   .button-configuration :global(.spectrum-ActionButton) {
     width: 100%;
   }
+
+  .button-configuration :global(.list-wrap > li:last-child),
+  .button-configuration :global(.list-wrap) {
+    border-bottom-left-radius: unset;
+    border-bottom-right-radius: unset;
+    border-bottom: 0px;
+  }
+
+  .list-footer {
+    width: 100%;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background-color: var(
+      --spectrum-table-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    transition: background-color ease-in-out 130ms;
+    display: flex;
+    justify-content: center;
+    border: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+    cursor: pointer;
+  }
+
+  .add-button {
+    margin: var(--spacing-s);
+  }
+
+  .list-footer:hover {
+    background-color: var(
+      --spectrum-table-row-background-color-hover,
+      var(--spectrum-alias-highlight-hover)
+    );
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
index 851cbe289c..a05fd9a39b 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
@@ -1,37 +1,40 @@
 <script>
-  import EditFieldPopover from "../FieldConfiguration/EditFieldPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Icon } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  // import { cloneDeep } from "lodash/fp"
+  import { runtimeToReadableBinding } from "builderStore/dataBinding"
+  import { isJSBinding } from "@budibase/string-templates"
 
   export let item
   export let componentBindings
   export let bindings
   export let anchor
+  export let removeButton
+  export let canRemove
 
-  const dispatch = createEventDispatcher()
-  // const onToggle = item => {
-  //   return e => {
-  //     item.active = e.detail
-  //     dispatch("change", { ...cloneDeep(item), active: e.detail })
-  //   }
-  // }
+  $: readableText = isJSBinding(item.text)
+    ? "(JavaScript function)"
+    : runtimeToReadableBinding([...bindings, componentBindings], item.text)
 </script>
 
 <div class="list-item-body">
   <div class="list-item-left">
-    <EditFieldPopover
+    <EditComponentPopover
       {anchor}
-      field={item}
+      componentInstance={item}
       {componentBindings}
       {bindings}
       on:change
     />
-    <div class="field-label">{item.text}</div>
+    <div class="field-label">{readableText || "Button"}</div>
   </div>
   <div class="list-item-right">
-    <Icon size="S" name="Close" hoverable on:click={() => {console.log("REMOVE ME")}}
-  />
+    <Icon
+      disabled={!canRemove}
+      size="S"
+      name="Close"
+      hoverable
+      on:click={() => removeButton(item._id)}
+    />
   </div>
 </div>
 
diff --git a/packages/builder/src/components/design/settings/controls/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
similarity index 82%
rename from packages/builder/src/components/design/settings/controls/DraggableList.svelte
rename to packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
index c8395b2a1f..1992299e90 100644
--- a/packages/builder/src/components/design/settings/controls/DraggableList.svelte
+++ b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
@@ -1,10 +1,10 @@
 <script>
-  import { Icon } from "@budibase/bbui"
   import { dndzone } from "svelte-dnd-action"
   import { createEventDispatcher } from "svelte"
   import { generate } from "shortid"
   import { setContext } from "svelte"
-  import { writable } from "svelte/store"
+  import { writable, get } from "svelte/store"
+  import DragHandle from "./drag-handle.svelte"
 
   export let items = []
   export let showHandle = true
@@ -12,6 +12,7 @@
   export let listTypeProps = {}
   export let listItemKey
   export let draggable = true
+  export let focus
 
   let store = writable({
     selected: null,
@@ -27,6 +28,10 @@
 
   setContext("draggable", store)
 
+  $: if (focus && store) {
+    get(store).actions.select(focus)
+  }
+
   const dispatch = createEventDispatcher()
   const flipDurationMs = 150
 
@@ -82,13 +87,16 @@
 >
   {#each draggableItems as draggable (draggable.id)}
     <li
+      on:mousedown={() => {
+        get(store).actions.select()
+      }}
       bind:this={anchors[draggable.id]}
       class:highlighted={draggable.id === $store.selected}
     >
       <div class="left-content">
         {#if showHandle}
-          <div class="handle" aria-label="drag-handle">
-            <Icon name="DragHandle" size="XL" />
+          <div class="handle">
+            <DragHandle />
           </div>
         {/if}
       </div>
@@ -142,8 +150,9 @@
     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);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-bottom: 0px;
   }
   .right-content {
     flex: 1;
@@ -153,4 +162,15 @@
     padding-left: var(--spacing-s);
     padding-right: var(--spacing-s);
   }
+  .handle {
+    display: flex;
+    height: var(--spectrum-global-dimension-size-150);
+  }
+  .handle :global(svg) {
+    fill: var(--spectrum-global-color-gray-500);
+    margin-right: var(--spacing-m);
+    margin-left: 2px;
+    width: var(--spectrum-global-dimension-size-65);
+    height: 100%;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/DraggableList/drag-handle.svelte b/packages/builder/src/components/design/settings/controls/DraggableList/drag-handle.svelte
new file mode 100644
index 0000000000..5cfefdbe54
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/DraggableList/drag-handle.svelte
@@ -0,0 +1,31 @@
+<svg
+  class="drag-handle spectrum-Icon spectrum-Icon--sizeS"
+  focusable="false"
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="m1,11c0.55228,0 1,-0.4477 1,-1c0,-0.5523 -0.44772,-1 -1,-1c-0.55228,0 -1,0.4477 -1,1c0,0.5523 0.44772,1 1,1z"
+  />
+  <path
+    d="m1,8c0.55228,0 1,-0.4477 1,-1c0,-0.55228 -0.44772,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.5523 0.44772,1 1,1z"
+  />
+  <path
+    d="m1,5c0.55228,0 1,-0.44772 1,-1c0,-0.55228 -0.44772,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
+  />
+  <path
+    d="m1,2c0.55228,0 1,-0.44772 1,-1c0,-0.55228 -0.44772,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
+  />
+  <path
+    d="m4,11c0.5523,0 1,-0.4477 1,-1c0,-0.5523 -0.4477,-1 -1,-1c-0.55228,0 -1,0.4477 -1,1c0,0.5523 0.44772,1 1,1z"
+  />
+  <path
+    d="m4,8c0.5523,0 1,-0.4477 1,-1c0,-0.55228 -0.4477,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.5523 0.44772,1 1,1z"
+  />
+  <path
+    d="m4,5c0.5523,0 1,-0.44772 1,-1c0,-0.55228 -0.4477,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
+  />
+  <path
+    d="m4,2c0.5523,0 1,-0.44772 1,-1c0,-0.55228 -0.4477,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
+  />
+</svg>
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
similarity index 63%
rename from packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
rename to packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
index 72e7784727..1533c0d1d5 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
@@ -3,31 +3,35 @@
   import { store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher } from "svelte"
-  import ComponentSettingsSection from "../../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.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 componentInstance
   export let componentBindings
   export let bindings
+  export let parseSettings
 
   const draggable = getContext("draggable")
   const dispatch = createEventDispatcher()
 
   let popover
   let drawers = []
-  let pseudoComponentInstance
   let open = false
 
-  $: if (open && $draggable.selected && $draggable.selected != field._id) {
+  // Auto hide the component when another item is selected
+  $: if (open && $draggable.selected != componentInstance._id) {
     popover.hide()
   }
 
-  $: if (field) {
-    pseudoComponentInstance = field
+  // Open automatically if the component is marked as selected
+  $: if (!open && $draggable.selected === componentInstance._id && popover) {
+    popover.show()
+    open = true
   }
+
   $: componentDef = store.actions.components.getDefinition(
-    pseudoComponentInstance._component
+    componentInstance._component
   )
   $: parsedComponentDef = processComponentDefinitionSettings(componentDef)
 
@@ -36,17 +40,16 @@
       return {}
     }
     const clone = cloneDeep(componentDef)
-    const updatedSettings = clone.settings
-      .filter(setting => setting.key !== "field")
-      .map(setting => {
-        return { ...setting, nested: true }
-      })
-    clone.settings = updatedSettings
+
+    if (typeof parseSettings === "function") {
+      clone.settings = parseSettings(clone.settings)
+    }
+
     return clone
   }
 
   const updateSetting = async (setting, value) => {
-    const nestedComponentInstance = cloneDeep(pseudoComponentInstance)
+    const nestedComponentInstance = cloneDeep(componentInstance)
 
     const patchFn = store.actions.components.updateComponentSetting(
       setting.key,
@@ -54,12 +57,7 @@
     )
     patchFn(nestedComponentInstance)
 
-    const update = {
-      ...nestedComponentInstance,
-      active: pseudoComponentInstance.active,
-    }
-
-    dispatch("change", update)
+    dispatch("change", nestedComponentInstance)
   }
 
   const customPositionHandler = (anchorBounds, eleBounds, cfg) => {
@@ -98,11 +96,11 @@
   bind:this={popover}
   on:open={() => {
     drawers = []
-    $draggable.actions.select(field._id)
+    $draggable.actions.select(componentInstance._id)
   }}
   on:close={() => {
     open = false
-    if ($draggable.selected == field._id) {
+    if ($draggable.selected == componentInstance._id) {
       $draggable.actions.select()
     }
   }}
@@ -115,12 +113,9 @@
 >
   <span class="popover-wrap">
     <Layout noPadding noGap>
-      <div class="type-icon">
-        <Icon name={parsedComponentDef.icon} />
-        <span>{field.field}</span>
-      </div>
+      <slot name="header" />
       <ComponentSettingsSection
-        componentInstance={pseudoComponentInstance}
+        {componentInstance}
         componentDefinition={parsedComponentDef}
         isScreen={false}
         onUpdateSetting={updateSetting}
@@ -143,20 +138,4 @@
   .popover-wrap {
     background-color: var(--spectrum-alias-background-color-primary);
   }
-  .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 42651a4d84..6c74705ab0 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@@ -7,7 +7,7 @@
     getComponentBindableProperties,
   } from "builderStore/dataBinding"
   import { currentAsset } from "builderStore"
-  import DraggableList from "../DraggableList.svelte"
+  import DraggableList from "../DraggableList/DraggableList.svelte"
   import { createEventDispatcher } from "svelte"
   import { store, selectedScreen } from "builderStore"
   import FieldSetting from "./FieldSetting.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
index b5cfcb12d9..1d9ce733b8 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
@@ -1,8 +1,11 @@
 <script>
-  import EditFieldPopover from "./EditFieldPopover.svelte"
-  import { Toggle } from "@budibase/bbui"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
+  import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
+  import { store } from "builderStore"
+  import { runtimeToReadableBinding } from "builderStore/dataBinding"
+  import { isJSBinding } from "@budibase/string-templates"
 
   export let item
   export let componentBindings
@@ -16,18 +19,43 @@
       dispatch("change", { ...cloneDeep(item), active: e.detail })
     }
   }
+  const getReadableText = () => {
+    if (item.label) {
+      return isJSBinding(item.label)
+        ? "(JavaScript function)"
+        : runtimeToReadableBinding([...bindings, componentBindings], item.label)
+    }
+    return item.field
+  }
+
+  const parseSettings = settings => {
+    return settings
+      .filter(setting => setting.key !== "field")
+      .map(setting => {
+        return { ...setting, nested: true }
+      })
+  }
+
+  $: readableText = getReadableText(item)
+  $: componentDef = store.actions.components.getDefinition(item._component)
 </script>
 
 <div class="list-item-body">
   <div class="list-item-left">
-    <EditFieldPopover
+    <EditComponentPopover
       {anchor}
-      field={item}
+      componentInstance={item}
       {componentBindings}
       {bindings}
+      {parseSettings}
       on:change
-    />
-    <div class="field-label">{item.label || item.field}</div>
+    >
+      <div slot="header" class="type-icon">
+        <Icon name={componentDef.icon} />
+        <span>{item.field}</span>
+      </div>
+    </EditComponentPopover>
+    <div class="field-label">{readableText}</div>
   </div>
   <div class="list-item-right">
     <Toggle on:change={onToggle(item)} text="" value={item.active} thin />
@@ -53,4 +81,20 @@
   .list-item-body {
     justify-content: space-between;
   }
+  .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/client/manifest.json b/packages/client/manifest.json
index 27e56d94db..a8559d4f79 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -258,7 +258,6 @@
     "description": "Contains your app screens",
     "static": true
   },
-
   "buttongroup": {
     "name": "Button group",
     "icon": "Button",
@@ -272,17 +271,14 @@
             "type": "buttonConfiguration",
             "key": "buttons",
             "nested": true,
-            "defaultValue" : [{
-              "component" : "button",
-              "props" : {
+            "defaultValue": [
+              {
                 "type": "cta"
+              },
+              {
+                "type": "primary"
               }
-            },{
-              "component" : "button",
-              "props" : {
-                "type" : "primary"
-              }
-            }]
+            ]
           }
         ]
       },
@@ -310,7 +306,7 @@
                 "barTitle": "Row layout"
               }
             ],
-            "defaultValue": "column"
+            "defaultValue": "row"
           },
           {
             "type": "select",
@@ -440,7 +436,6 @@
       }
     ]
   },
-
   "button": {
     "name": "Button",
     "description": "A basic html button that is ready for styling",
@@ -2592,7 +2587,6 @@
         "key": "disabled",
         "defaultValue": false
       },
-
       {
         "type": "text",
         "label": "Initial form step",
@@ -5875,4 +5869,4 @@
       }
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/packages/client/src/components/app/ButtonGroup.svelte b/packages/client/src/components/app/ButtonGroup.svelte
new file mode 100644
index 0000000000..8d6cacd7a5
--- /dev/null
+++ b/packages/client/src/components/app/ButtonGroup.svelte
@@ -0,0 +1,37 @@
+<script>
+  import BlockComponent from "../../BlockComponent.svelte"
+  import Block from "../../Block.svelte"
+
+  export let buttons = []
+  export let direction
+  export let hAlign
+  export let vAlign
+  export let gap = "S"
+</script>
+
+<Block>
+  <BlockComponent
+    type="container"
+    props={{
+      direction,
+      hAlign,
+      vAlign,
+      gap,
+      wrap: true,
+    }}
+  >
+    {#each buttons as { text, type, quiet, disabled, onClick, size }, idx}
+      <BlockComponent
+        type="button"
+        props={{
+          text: text || `Button ${idx + 1}`,
+          onClick,
+          type,
+          quiet,
+          disabled,
+          size,
+        }}
+      />
+    {/each}
+  </BlockComponent>
+</Block>
diff --git a/packages/client/src/components/app/forms/ButtonGroup.svelte b/packages/client/src/components/app/forms/ButtonGroup.svelte
deleted file mode 100644
index 222e91a55f..0000000000
--- a/packages/client/src/components/app/forms/ButtonGroup.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import Container from "components/app/Container.svelte"
-  import BlockComponent from "../../BlockComponent.svelte"
-  import Block from "../../Block.svelte"
-
-  const { styleable } = getContext("sdk")
-  const component = getContext("component")
-
-  export let buttons = []
-  export let direction
-  export let hAlign
-  export let vAlign
-  export let gap = "S"
-  export let wrap
-
-  $: console.log("client buttons/wrap", buttons, wrap)
-</script>
-
-<!-- <div use:styleable={$component.styles}> -->
-  <Block>
-    <Container {direction} {hAlign} {vAlign} {gap} {wrap}>
-      {#each buttons as { text, type, quiet, disabled, onClick, size }}
-        <BlockComponent
-          type="button"
-          props={{
-            text,
-            onClick,
-            type,
-            quiet,
-            disabled,
-            size
-          }}
-        />
-      {/each}
-    </Container>
-  </Block>
-<!-- </div> -->
diff --git a/packages/client/src/components/app/forms/index.js b/packages/client/src/components/app/forms/index.js
index 24d7f11c0c..38372f32d4 100644
--- a/packages/client/src/components/app/forms/index.js
+++ b/packages/client/src/components/app/forms/index.js
@@ -15,5 +15,4 @@ export { default as formstep } from "./FormStep.svelte"
 export { default as jsonfield } from "./JSONField.svelte"
 export { default as s3upload } from "./S3Upload.svelte"
 export { default as codescanner } from "./CodeScannerField.svelte"
-export { default as bbreferencefield } from "./BBReferenceField.svelte"
-export { default as buttongroup } from "./ButtonGroup.svelte"
\ No newline at end of file
+export { default as bbreferencefield } from "./BBReferenceField.svelte"
\ No newline at end of file
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index 060c15a857..97df3741e1 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -19,6 +19,7 @@ export { default as dataprovider } from "./DataProvider.svelte"
 export { default as divider } from "./Divider.svelte"
 export { default as screenslot } from "./ScreenSlot.svelte"
 export { default as button } from "./Button.svelte"
+export { default as buttongroup } from "./ButtonGroup.svelte"
 export { default as repeater } from "./Repeater.svelte"
 export { default as text } from "./Text.svelte"
 export { default as layout } from "./Layout.svelte"

From 166c517ff82d4644f37f5e6fe3b4ff2fef2b0d94 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 13 Oct 2023 15:02:18 +0100
Subject: [PATCH 03/10] Fix Block import locations

---
 packages/client/src/components/app/ButtonGroup.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/ButtonGroup.svelte b/packages/client/src/components/app/ButtonGroup.svelte
index 8d6cacd7a5..0af16e6950 100644
--- a/packages/client/src/components/app/ButtonGroup.svelte
+++ b/packages/client/src/components/app/ButtonGroup.svelte
@@ -1,6 +1,6 @@
 <script>
-  import BlockComponent from "../../BlockComponent.svelte"
-  import Block from "../../Block.svelte"
+  import BlockComponent from "../BlockComponent.svelte"
+  import Block from "../Block.svelte"
 
   export let buttons = []
   export let direction

From e75624f51996d55775bad769cd46e3cc0df830ba Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 13 Oct 2023 16:55:50 +0100
Subject: [PATCH 04/10] Lint

---
 packages/client/src/components/app/forms/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/forms/index.js b/packages/client/src/components/app/forms/index.js
index 38372f32d4..5804d3a79d 100644
--- a/packages/client/src/components/app/forms/index.js
+++ b/packages/client/src/components/app/forms/index.js
@@ -15,4 +15,4 @@ export { default as formstep } from "./FormStep.svelte"
 export { default as jsonfield } from "./JSONField.svelte"
 export { default as s3upload } from "./S3Upload.svelte"
 export { default as codescanner } from "./CodeScannerField.svelte"
-export { default as bbreferencefield } from "./BBReferenceField.svelte"
\ No newline at end of file
+export { default as bbreferencefield } from "./BBReferenceField.svelte"

From ddda57fa2a030a3e15a09836047efa4b9c84d88a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 16 Oct 2023 12:01:07 +0100
Subject: [PATCH 05/10] Review comments and simplification

---
 .../ButtonConfiguration.svelte                | 82 ++++++-------------
 packages/client/manifest.json                 |  6 +-
 .../src/components/app/ButtonGroup.svelte     |  4 +-
 3 files changed, 32 insertions(+), 60 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
index fde888d17b..324418511b 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -1,69 +1,45 @@
 <script>
   import DraggableList from "../DraggableList/DraggableList.svelte"
   import ButtonSetting from "./ButtonSetting.svelte"
-  import {
-    getBindableProperties,
-    getComponentBindableProperties,
-  } from "builderStore/dataBinding"
-  import { createEventDispatcher, onMount } from "svelte"
-  import { selectedScreen, store } from "builderStore"
-  import { isEqual, cloneDeep } from "lodash"
+  import { createEventDispatcher } from "svelte"
+  import { store } from "builderStore"
   import { Helpers } from "@budibase/bbui"
 
-  export let componentInstance
+  export let componentBindings
+  export let bindings
   export let value
 
   const dispatch = createEventDispatcher()
 
-  let mounted
-  let cachedValue
-  let componentBindings = []
   let focusItem
 
-  const updateState = value => {
-    return (value || []).map((button, idx) => {
-      if (!button._component) {
-        return buildPseudoInstance({ ...button, name: `Button ${idx + 1}` })
-      }
-      return button
+  $: buttonList = sanitizeValue(value) || []
+  $: buttonCount = buttonList.length
+  $: itemProps = {
+    componentBindings: componentBindings || [],
+    bindings,
+    removeButton,
+    canRemove: buttonCount > 1,
+  }
+
+  const sanitizeValue = val => {
+    return val?.map(button => {
+      return button._component ? button : buildPseudoInstance(button)
     })
   }
 
-  const buildItemProps = buttonList => {
-    return {
-      componentBindings,
-      bindings,
-      removeButton,
-      canRemove: buttonList?.length > 1,
-    }
-  }
-
-  $: if (!isEqual(value, cachedValue) && mounted) {
-    cachedValue = value ? cloneDeep(value) : []
-  }
-  $: buttonList = updateState(cachedValue)
-  $: buttonCount = buttonList?.length
-  $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
-  $: componentBindings = getComponentBindableProperties(
-    $selectedScreen,
-    componentInstance._id
-  )
-  $: itemProps = buildItemProps(buttonList)
-
   const processItemUpdate = e => {
     const updatedField = e.detail
-    const parentButtonsUpdated = buttonList ? cloneDeep(buttonList) : []
-
-    let parentFieldIdx = parentButtonsUpdated.findIndex(pSetting => {
+    const newButtonList = [...buttonList]
+    const fieldIdx = newButtonList.findIndex(pSetting => {
       return pSetting._id === updatedField?._id
     })
-
-    if (parentFieldIdx == -1) {
-      parentButtonsUpdated.push(updatedField)
+    if (fieldIdx === -1) {
+      newButtonList.push(updatedField)
     } else {
-      parentButtonsUpdated[parentFieldIdx] = updatedField
+      newButtonList[fieldIdx] = updatedField
     }
-    dispatch("change", parentButtonsUpdated)
+    dispatch("change", newButtonList)
   }
 
   const listUpdated = e => {
@@ -71,22 +47,20 @@
   }
 
   const buildPseudoInstance = cfg => {
-    const pseudoComponentInstance = store.actions.components.createInstance(
+    return store.actions.components.createInstance(
       `@budibase/standard-components/button`,
       {
         _instanceName: Helpers.uuid(),
-        text: cfg.name,
+        text: cfg.text,
         type: cfg.type || "primary",
       },
       {}
     )
-
-    return pseudoComponentInstance
   }
 
   const addButton = () => {
     const newButton = buildPseudoInstance({
-      name: `Button ${buttonList.length + 1}`,
+      text: `Button ${buttonCount + 1}`,
     })
     dispatch("change", [...buttonList, newButton])
     focusItem = newButton._id
@@ -98,14 +72,10 @@
       buttonList.filter(button => button._id !== id)
     )
   }
-
-  onMount(() => {
-    mounted = true
-  })
 </script>
 
 <div class="button-configuration">
-  {#if buttonList?.length}
+  {#if buttonCount}
     <DraggableList
       on:change={listUpdated}
       on:itemChange={processItemUpdate}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 7cc7814462..8f78a123ea 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -273,10 +273,12 @@
             "nested": true,
             "defaultValue": [
               {
-                "type": "cta"
+                "type": "cta",
+                "text": "Button 1"
               },
               {
-                "type": "primary"
+                "type": "primary",
+                "text": "Button 2"
               }
             ]
           }
diff --git a/packages/client/src/components/app/ButtonGroup.svelte b/packages/client/src/components/app/ButtonGroup.svelte
index 0af16e6950..87b0990701 100644
--- a/packages/client/src/components/app/ButtonGroup.svelte
+++ b/packages/client/src/components/app/ButtonGroup.svelte
@@ -20,11 +20,11 @@
       wrap: true,
     }}
   >
-    {#each buttons as { text, type, quiet, disabled, onClick, size }, idx}
+    {#each buttons as { text, type, quiet, disabled, onClick, size }}
       <BlockComponent
         type="button"
         props={{
-          text: text || `Button ${idx + 1}`,
+          text: text || "Button",
           onClick,
           type,
           quiet,

From ad54b31667cffa18c9ccf7971fc1af8085a9e233 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 19 Oct 2023 12:00:47 +0100
Subject: [PATCH 06/10] Moved label align and button size into styles section
 of form block. Added tagged component  settings section to the style section.
 General settings and sections now have a tag property for filtering.

---
 .../Component/ComponentSettingsPanel.svelte   |  7 +-
 .../Component/ComponentSettingsSection.svelte | 20 ++++--
 .../Component/DesignSection.svelte            | 15 +++++
 packages/client/manifest.json                 | 66 ++++++++++---------
 4 files changed, 70 insertions(+), 38 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index afcada4138..8b9ff0ae2c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -65,7 +65,12 @@
         />
       {/if}
       {#if section == "styles"}
-        <DesignSection {componentInstance} {componentDefinition} {bindings} />
+        <DesignSection
+          {componentInstance}
+          {componentBindings}
+          {componentDefinition}
+          {bindings}
+        />
         <CustomStylesSection
           {componentInstance}
           {componentDefinition}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index b4ed8995a0..f2d6c9cb52 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -17,13 +17,23 @@
   export let onUpdateSetting
   export let showSectionTitle = true
   export let showInstanceName = true
+  export let tag
 
-  $: sections = getSections(componentInstance, componentDefinition, isScreen)
+  $: sections = getSections(
+    componentInstance,
+    componentDefinition,
+    isScreen,
+    tag
+  )
 
   const getSections = (instance, definition, isScreen) => {
     const settings = definition?.settings ?? []
-    const generalSettings = settings.filter(setting => !setting.section)
-    const customSections = settings.filter(setting => setting.section)
+    const generalSettings = settings.filter(
+      setting => !setting.section && setting.tag === tag
+    )
+    const customSections = settings.filter(
+      setting => setting.section && setting.tag === tag
+    )
     let sections = [
       {
         name: "General",
@@ -131,7 +141,7 @@
         <div class="section-info">
           <InfoDisplay body={section.info} />
         </div>
-      {:else if idx === 0 && section.name === "General" && componentDefinition.info}
+      {:else if idx === 0 && section.name === "General" && componentDefinition.info && !tag}
         <InfoDisplay
           title={componentDefinition.name}
           body={componentDefinition.info}
@@ -189,7 +199,7 @@
     </DetailSummary>
   {/if}
 {/each}
-{#if componentDefinition?.block}
+{#if componentDefinition?.block && !tag}
   <DetailSummary name="Eject" collapsible={false}>
     <EjectBlockButton />
   </DetailSummary>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
index 444ded7e1f..def1fcf24b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
@@ -1,10 +1,12 @@
 <script>
   import StyleSection from "./StyleSection.svelte"
   import * as ComponentStyles from "./componentStyles"
+  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
 
   export let componentDefinition
   export let componentInstance
   export let bindings
+  export let componentBindings
 
   const getStyles = def => {
     if (!def?.styles?.length) {
@@ -22,6 +24,19 @@
   $: styles = getStyles(componentDefinition)
 </script>
 
+<!--
+  Load any general settings or sections tagged as "style"
+-->
+<ComponentSettingsSection
+  {componentInstance}
+  {componentDefinition}
+  isScreen={false}
+  showInstanceName={false}
+  {bindings}
+  {componentBindings}
+  tag="style"
+/>
+
 {#if styles?.length > 0}
   {#each styles as style}
     <StyleSection
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 8d0a4e456f..33c11dc297 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5385,38 +5385,6 @@
         "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",
             "key": "fields",
@@ -5436,6 +5404,40 @@
             }
           }
         ]
+      },
+      {
+        "tag": "style",
+        "type": "select",
+        "label": "Align labels",
+        "key": "labelPosition",
+        "defaultValue": "left",
+        "options": [
+          {
+            "label": "Left",
+            "value": "left"
+          },
+          {
+            "label": "Above",
+            "value": "above"
+          }
+        ]
+      },
+      {
+        "tag": "style",
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ],
+        "defaultValue": "spectrum--medium"
       }
     ],
     "context": [

From 3e51557281a82383450e28e875ecb518852e8727 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 20 Oct 2023 10:38:34 +0100
Subject: [PATCH 07/10] Feedback update, add tag to getsections fn definition

---
 .../_components/Component/ComponentSettingsSection.svelte       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index f2d6c9cb52..6eb4b4c440 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -26,7 +26,7 @@
     tag
   )
 
-  const getSections = (instance, definition, isScreen) => {
+  const getSections = (instance, definition, isScreen, tag) => {
     const settings = definition?.settings ?? []
     const generalSettings = settings.filter(
       setting => !setting.section && setting.tag === tag

From 871891c2a2f2e25cb1e821a9dfe8b7c19c199aaf Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 20 Oct 2023 15:35:16 +0100
Subject: [PATCH 08/10] Parse view v1 schema to fix builder crashed caused by
 'groupedby' views

---
 .../components/backend/DataTable/Table.svelte | 44 ++++++++++---------
 .../backend/DataTable/ViewDataTable.svelte    | 16 ++++++-
 2 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index f8087d8a39..45e440eca5 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -24,17 +24,21 @@
 
   let selectedRows = []
   let customRenderers = []
+  let parsedSchema = {}
+
+  $: if (schema) {
+    parsedSchema = Object.keys(schema).reduce((acc, key) => {
+      acc[key] = { ...schema[key] }
+      if (!canBeSortColumn(acc[key].type)) {
+        acc[key].sortable = false
+      }
+      return acc
+    }, {})
+  }
 
   $: selectedRows, dispatch("selectionUpdated", selectedRows)
   $: isUsersTable = tableId === TableNames.USERS
   $: data && resetSelectedRows()
-  $: {
-    Object.values(schema || {}).forEach(col => {
-      if (!canBeSortColumn(col.type)) {
-        col.sortable = false
-      }
-    })
-  }
   $: {
     if (isUsersTable) {
       customRenderers = [
@@ -44,24 +48,24 @@
         },
       ]
       UNEDITABLE_USER_FIELDS.forEach(field => {
-        if (schema[field]) {
-          schema[field].editable = false
+        if (parsedSchema[field]) {
+          parsedSchema[field].editable = false
         }
       })
-      if (schema.email) {
-        schema.email.displayName = "Email"
+      if (parsedSchema.email) {
+        parsedSchema.email.displayName = "Email"
       }
-      if (schema.roleId) {
-        schema.roleId.displayName = "Role"
+      if (parsedSchema.roleId) {
+        parsedSchema.roleId.displayName = "Role"
       }
-      if (schema.firstName) {
-        schema.firstName.displayName = "First Name"
+      if (parsedSchema.firstName) {
+        parsedSchema.firstName.displayName = "First Name"
       }
-      if (schema.lastName) {
-        schema.lastName.displayName = "Last Name"
+      if (parsedSchema.lastName) {
+        parsedSchema.lastName.displayName = "Last Name"
       }
-      if (schema.status) {
-        schema.status.displayName = "Status"
+      if (parsedSchema.status) {
+        parsedSchema.status.displayName = "Status"
       }
     }
   }
@@ -97,7 +101,7 @@
     <div class="table-wrapper">
       <Table
         {data}
-        {schema}
+        schema={parsedSchema}
         {loading}
         {customRenderers}
         {rowCount}
diff --git a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
index f6160e3caa..12e4e3c270 100644
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -19,7 +19,21 @@
   let loading = false
   let type = "internal"
 
+  // Grouped views have a fixed schema layout
+  const parseSchema = view => {
+    if (!view.groupBy) {
+      return view.schema
+    }
+    const { group, field, value } = view.schema
+    return {
+      group,
+      field: { type: field },
+      value: { type: value },
+    }
+  }
+
   $: name = view.name
+  $: schema = parseSchema(view)
   $: calculation = view.calculation
 
   $: supportedFormats = Object.values(ROW_EXPORT_FORMATS).filter(key => {
@@ -61,7 +75,7 @@
 
 <Table
   title={decodeURI(name)}
-  schema={view.schema}
+  {schema}
   tableId={view.tableId}
   {data}
   {loading}

From b952892c42587c04d1bcc1608c156de215178d23 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 25 Oct 2023 12:08:56 +0100
Subject: [PATCH 09/10] Generalised the fix as not all calculations will have a
 groupby per PR feedback

---
 .../src/components/backend/DataTable/Table.svelte |  4 +++-
 .../backend/DataTable/ViewDataTable.svelte        | 15 +--------------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 45e440eca5..f7eccd5242 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -28,7 +28,9 @@
 
   $: if (schema) {
     parsedSchema = Object.keys(schema).reduce((acc, key) => {
-      acc[key] = { ...schema[key] }
+      acc[key] =
+        typeof schema[key] === "string" ? { type: schema[key] } : schema[key]
+
       if (!canBeSortColumn(acc[key].type)) {
         acc[key].sortable = false
       }
diff --git a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
index 12e4e3c270..6068439dbd 100644
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -19,21 +19,8 @@
   let loading = false
   let type = "internal"
 
-  // Grouped views have a fixed schema layout
-  const parseSchema = view => {
-    if (!view.groupBy) {
-      return view.schema
-    }
-    const { group, field, value } = view.schema
-    return {
-      group,
-      field: { type: field },
-      value: { type: value },
-    }
-  }
-
   $: name = view.name
-  $: schema = parseSchema(view)
+  $: schema = view.schema
   $: calculation = view.calculation
 
   $: supportedFormats = Object.values(ROW_EXPORT_FORMATS).filter(key => {

From 6032216e2f4b9f21fb640f554fe1a68c731cce9e Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 26 Oct 2023 10:13:22 +0100
Subject: [PATCH 10/10] Added fix for scenario where componentdefinition was
 queried befor it existed. Fix to ensure an empty general settings block is
 not shown

---
 .../Component/ComponentSettingsSection.svelte      | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index cd91e974ce..6dc9078f2c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -34,10 +34,14 @@
       setting => setting.section && setting.tag === tag
     )
     let sections = [
-      {
-        name: "General",
-        settings: generalSettings,
-      },
+      ...(generalSettings?.length
+        ? [
+            {
+              name: "General",
+              settings: generalSettings,
+            },
+          ]
+        : []),
       ...(customSections || []),
     ]
 
@@ -142,7 +146,7 @@
         <div class="section-info">
           <InfoDisplay body={section.info} />
         </div>
-      {:else if idx === 0 && section.name === "General" && componentDefinition.info && !tag}
+      {:else if idx === 0 && section.name === "General" && componentDefinition?.info && !tag}
         <InfoDisplay
           title={componentDefinition.name}
           body={componentDefinition.info}