From 0921bcf3334e6a77a67b8771005587e2f37a3af4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 1 Nov 2023 11:40:27 +0000
Subject: [PATCH 01/15] Add button setting to grid and allow removing all
 buttons

---
 .../ButtonConfiguration/ButtonConfiguration.svelte  | 13 ++++++++-----
 packages/client/manifest.json                       | 10 ++++++++++
 2 files changed, 18 insertions(+), 5 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 324418511b..6fed8abdba 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -19,7 +19,7 @@
     componentBindings: componentBindings || [],
     bindings,
     removeButton,
-    canRemove: buttonCount > 1,
+    canRemove: true,
   }
 
   const sanitizeValue = val => {
@@ -86,11 +86,11 @@
       focus={focusItem}
       draggable={buttonCount > 1}
     />
-
-    <div class="list-footer" on:click={addButton}>
-      <div class="add-button">Add button</div>
-    </div>
   {/if}
+
+  <div class="list-footer" on:click={addButton} class:empty={!buttonCount}>
+    <div class="add-button">Add button</div>
+  </div>
 </div>
 
 <style>
@@ -120,6 +120,9 @@
       var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
     cursor: pointer;
   }
+  .list-footer.empty {
+    border-radius: 4px;
+  }
 
   .add-button {
     margin: var(--spacing-s);
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index c8ef406472..43b2d1b81d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5858,6 +5858,16 @@
         "label": "High contrast",
         "key": "stripeRows",
         "defaultValue": false
+      },
+      {
+        "section": true,
+        "name": "Buttons",
+        "settings": [
+          {
+            "type": "buttonConfiguration",
+            "key": "buttons"
+          }
+        ]
       }
     ]
   },

From 2b8bbafcac4cb9aba6b79e89e2007ca4c6b708f0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 1 Nov 2023 16:45:37 +0000
Subject: [PATCH 02/15] Add support for buttons inside grids

---
 .../src/components/app/GridBlock.svelte       |  27 +++-
 packages/client/src/sdk.js                    |  14 +-
 .../src/components/grid/cells/GridCell.svelte |   2 +-
 .../grid/layout/ButtonColumn.svelte           | 137 ++++++++++++++++++
 .../src/components/grid/layout/Grid.svelte    |   2 +
 .../components/grid/layout/GridBody.svelte    |   5 +
 .../src/components/grid/stores/scroll.js      |  18 ++-
 .../src/components/grid/stores/ui.js          |   2 +
 8 files changed, 198 insertions(+), 9 deletions(-)
 create mode 100644 packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 8febaf44ff..9f93b6c4ff 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -2,6 +2,7 @@
   // NOTE: this is not a block - it's just named as such to avoid confusing users,
   // because it functions similarly to one
   import { getContext } from "svelte"
+  import { get } from "svelte/store"
   import { Grid } from "@budibase/frontend-core"
 
   // table is actually any datasource, but called table for legacy compatibility
@@ -16,12 +17,21 @@
   export let fixedRowHeight = null
   export let columns = null
   export let onRowClick = null
+  export let buttons = null
 
+  const context = getContext("context")
   const component = getContext("component")
-  const { styleable, API, builderStore, notificationStore } = getContext("sdk")
+  const {
+    styleable,
+    API,
+    builderStore,
+    notificationStore,
+    enrichButtonActions,
+  } = getContext("sdk")
 
   $: columnWhitelist = columns?.map(col => col.name)
   $: schemaOverrides = getSchemaOverrides(columns)
+  $: parsedButtons = parseButtons(buttons)
 
   const getSchemaOverrides = columns => {
     let overrides = {}
@@ -33,6 +43,20 @@
     })
     return overrides
   }
+
+  const parseButtons = buttons => {
+    if (!buttons?.length) {
+      return null
+    }
+    return buttons.map(settings => ({
+      size: "M",
+      text: settings.text,
+      type: settings.type,
+      onClick: async () => {
+        return await enrichButtonActions(settings.onClick, get(context))()
+      },
+    }))
+  }
 </script>
 
 <div
@@ -58,6 +82,7 @@
     showControls={false}
     notifySuccess={notificationStore.actions.success}
     notifyError={notificationStore.actions.error}
+    buttons={parsedButtons}
     on:rowclick={e => onRowClick?.({ row: e.detail })}
   />
 </div>
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 1d77f3e2da..77089d648b 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -24,9 +24,12 @@ import BlockComponent from "components/BlockComponent.svelte"
 import { ActionTypes } from "./constants"
 import { fetchDatasourceSchema } from "./utils/schema.js"
 import { getAPIKey } from "./utils/api.js"
+import { enrichButtonActions } from "./utils/buttonActions.js"
 
 export default {
   API,
+
+  // Stores
   authStore,
   notificationStore,
   routeStore,
@@ -41,13 +44,20 @@ export default {
   currentRole,
   confirmationStore,
   roleStore,
+
+  // Utils
   styleable,
   linkable,
   getAction,
   fetchDatasourceSchema,
-  Provider,
-  ActionTypes,
   getAPIKey,
+  enrichButtonActions,
+
+  // Components
+  Provider,
   Block,
   BlockComponent,
+
+  // Constants
+  ActionTypes,
 }
diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
index dcc76b9c75..d10eb25528 100644
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -15,7 +15,7 @@
   $: style = getStyle(width, selectedUser)
 
   const getStyle = (width, selectedUser) => {
-    let style = `flex: 0 0 ${width}px;`
+    let style = width === "auto" ? "width: auto;" : `flex: 0 0 ${width}px;`
     if (selectedUser) {
       style += `--user-color:${selectedUser.color};`
     }
diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
new file mode 100644
index 0000000000..4acd8b6b70
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -0,0 +1,137 @@
+<script>
+  import { getContext, onMount } from "svelte"
+  import { Button } from "@budibase/bbui"
+  import GridCell from "../cells/GridCell.svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
+
+  const {
+    renderedRows,
+    hoveredRowId,
+    props,
+    width,
+    focusedRow,
+    selectedRows,
+    visibleColumns,
+    scroll,
+    isDragging,
+    buttonColumnWidth,
+  } = getContext("grid")
+
+  let measureContainer
+
+  $: buttons = $props.buttons?.slice(0, 3) || []
+  $: columnsWidth = $visibleColumns.reduce(
+    (total, col) => (total += col.width),
+    0
+  )
+  $: end = columnsWidth - 1 - $scroll.left
+  $: left = Math.min($width - $buttonColumnWidth, end)
+
+  onMount(() => {
+    const observer = new ResizeObserver(entries => {
+      const width = entries?.[0]?.contentRect?.width ?? 0
+      buttonColumnWidth.set(width)
+    })
+    observer.observe(measureContainer)
+  })
+</script>
+
+<!-- Hidden copy of buttons to measure -->
+<div class="measure" bind:this={measureContainer}>
+  <GridCell width="auto">
+    <div class="buttons">
+      {#each buttons as button}
+        <Button size="S">
+          {button.text || "Button"}
+        </Button>
+      {/each}
+    </div>
+  </GridCell>
+</div>
+
+<div
+  class="button-column"
+  style="left:{left}px"
+  class:hidden={$buttonColumnWidth === 0}
+>
+  <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
+    <GridScrollWrapper scrollVertically attachHandlers>
+      {#each $renderedRows as row}
+        {@const rowSelected = !!$selectedRows[row._id]}
+        {@const rowHovered = $hoveredRowId === row._id}
+        {@const rowFocused = $focusedRow?._id === row._id}
+        <div
+          class="row"
+          on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
+          on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
+        >
+          <GridCell
+            width="auto"
+            rowIdx={row.__idx}
+            selected={rowSelected}
+            highlighted={rowHovered || rowFocused}
+          >
+            <div class="buttons">
+              {#each buttons as button}
+                <Button
+                  newStyles
+                  size="S"
+                  cta={button.type === "cta"}
+                  primary={button.type === "primary"}
+                  secondary={button.type === "secondary"}
+                  warning={button.type === "warning"}
+                  overBackground={button.type === "overBackground"}
+                  on:click={() => button.onClick?.(row)}
+                >
+                  {button.text || "Button"}
+                </Button>
+              {/each}
+            </div>
+          </GridCell>
+        </div>
+      {/each}
+    </GridScrollWrapper>
+  </div>
+</div>
+
+<style>
+  .button-column {
+    display: flex;
+    flex-direction: column;
+    background: var(--cell-background);
+    position: absolute;
+    top: 0;
+  }
+  .button-column.hidden {
+    opacity: 0;
+  }
+  .content {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .buttons {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--cell-padding);
+    gap: var(--cell-padding);
+    height: inherit;
+  }
+
+  /* Add left cell border */
+  .button-column :global(.cell) {
+    border-left: var(--cell-border);
+  }
+
+  /* Hidden copy of buttons to measure width against */
+  .measure {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+</style>
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index e2ecd0f968..285282ddf7 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -48,6 +48,7 @@
   export let fixedRowHeight = null
   export let notifySuccess = null
   export let notifyError = null
+  export let buttons = null
 
   // Unique identifier for DOM nodes inside this instance
   const rand = Math.random()
@@ -99,6 +100,7 @@
     fixedRowHeight,
     notifySuccess,
     notifyError,
+    buttons,
   })
 
   // Set context for children to consume
diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
index 0bb2a51fb4..559c465b86 100644
--- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
@@ -3,6 +3,7 @@
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import GridRow from "./GridRow.svelte"
   import { BlankRowID } from "../lib/constants"
+  import ButtonColumn from "./ButtonColumn.svelte"
 
   const {
     bounds,
@@ -13,6 +14,7 @@
     dispatch,
     isDragging,
     config,
+    props,
   } = getContext("grid")
 
   let body
@@ -54,6 +56,9 @@
       />
     {/if}
   </GridScrollWrapper>
+  {#if $props.buttons?.length}
+    <ButtonColumn />
+  {/if}
 </div>
 
 <style>
diff --git a/packages/frontend-core/src/components/grid/stores/scroll.js b/packages/frontend-core/src/components/grid/stores/scroll.js
index 89e759854f..88a676f078 100644
--- a/packages/frontend-core/src/components/grid/stores/scroll.js
+++ b/packages/frontend-core/src/components/grid/stores/scroll.js
@@ -20,8 +20,15 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { rows, visibleColumns, stickyColumn, rowHeight, width, height } =
-    context
+  const {
+    rows,
+    visibleColumns,
+    stickyColumn,
+    rowHeight,
+    width,
+    height,
+    buttonColumnWidth,
+  } = context
 
   // Memoize store primitives
   const stickyColumnWidth = derived(stickyColumn, $col => $col?.width || 0, 0)
@@ -40,9 +47,10 @@ export const deriveStores = context => {
 
   // Derive horizontal limits
   const contentWidth = derived(
-    [visibleColumns, stickyColumnWidth],
-    ([$visibleColumns, $stickyColumnWidth]) => {
-      let width = GutterWidth + Padding + $stickyColumnWidth
+    [visibleColumns, stickyColumnWidth, buttonColumnWidth],
+    ([$visibleColumns, $stickyColumnWidth, $buttonColumnWidth]) => {
+      const space = Math.max(Padding, $buttonColumnWidth - 1)
+      let width = GutterWidth + space + $stickyColumnWidth
       $visibleColumns.forEach(col => {
         width += col.width
       })
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index e10e96a722..129d6614e5 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/packages/frontend-core/src/components/grid/stores/ui.js
@@ -18,6 +18,7 @@ export const createStores = context => {
   const previousFocusedRowId = writable(null)
   const gridFocused = writable(false)
   const isDragging = writable(false)
+  const buttonColumnWidth = writable(0)
 
   // Derive the current focused row ID
   const focusedRowId = derived(
@@ -51,6 +52,7 @@ export const createStores = context => {
     rowHeight,
     gridFocused,
     isDragging,
+    buttonColumnWidth,
     selectedRows: {
       ...selectedRows,
       actions: {

From 4ab9af53a099405b4f5db138af386e565702644f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 2 Nov 2023 08:53:48 +0000
Subject: [PATCH 03/15] Add row to grid button click callback

---
 packages/client/src/components/app/GridBlock.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 9f93b6c4ff..2b06e41986 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -31,7 +31,7 @@
 
   $: columnWhitelist = columns?.map(col => col.name)
   $: schemaOverrides = getSchemaOverrides(columns)
-  $: parsedButtons = parseButtons(buttons)
+  $: enrichedButtons = enrichButtons(buttons)
 
   const getSchemaOverrides = columns => {
     let overrides = {}
@@ -44,7 +44,7 @@
     return overrides
   }
 
-  const parseButtons = buttons => {
+  const enrichButtons = buttons => {
     if (!buttons?.length) {
       return null
     }
@@ -52,8 +52,9 @@
       size: "M",
       text: settings.text,
       type: settings.type,
-      onClick: async () => {
-        return await enrichButtonActions(settings.onClick, get(context))()
+      onClick: async row => {
+        const fn = enrichButtonActions(settings.onClick, get(context))
+        return await fn({ row })
       },
     }))
   }
@@ -82,7 +83,7 @@
     showControls={false}
     notifySuccess={notificationStore.actions.success}
     notifyError={notificationStore.actions.error}
-    buttons={parsedButtons}
+    buttons={enrichedButtons}
     on:rowclick={e => onRowClick?.({ row: e.detail })}
   />
 </div>

From 57e3b1ad083cdc5fe8d25464c79619c72da651d1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Nov 2023 13:01:50 +0000
Subject: [PATCH 04/15] Fix issue with buttons inside grids when no actions are
 defined

---
 packages/client/src/components/app/GridBlock.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 2b06e41986..490caa622f 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -54,7 +54,7 @@
       type: settings.type,
       onClick: async row => {
         const fn = enrichButtonActions(settings.onClick, get(context))
-        return await fn({ row })
+        return await fn?.({ row })
       },
     }))
   }

From 9f285b32a73ba9b09dbd6d9aea51f206ec114418 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Nov 2023 13:21:13 +0000
Subject: [PATCH 05/15] Allow using ephemeral action context for 'buttons' type
 settings

---
 .../ButtonConfiguration/ButtonConfiguration.svelte     | 10 +++++++++-
 .../FieldConfiguration/FieldConfiguration.svelte       |  1 +
 packages/client/manifest.json                          |  9 ++++++++-
 3 files changed, 18 insertions(+), 2 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 6fed8abdba..9126fa0f77 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -4,10 +4,13 @@
   import { createEventDispatcher } from "svelte"
   import { store } from "builderStore"
   import { Helpers } from "@budibase/bbui"
+  import { getEventContextBindings } from "builderStore/dataBinding"
 
+  export let componentInstance
   export let componentBindings
   export let bindings
   export let value
+  export let key
 
   const dispatch = createEventDispatcher()
 
@@ -15,9 +18,14 @@
 
   $: buttonList = sanitizeValue(value) || []
   $: buttonCount = buttonList.length
+  $: eventContextBindings = getEventContextBindings({
+    componentInstance,
+    settingKey: key,
+  })
+  $: allBindings = [...bindings, ...eventContextBindings]
   $: itemProps = {
     componentBindings: componentBindings || [],
-    bindings,
+    bindings: allBindings,
     removeButton,
     canRemove: true,
   }
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 6c74705ab0..c1bf903584 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@@ -17,6 +17,7 @@
   export let value
 
   const dispatch = createEventDispatcher()
+
   let sanitisedFields
   let fieldList
   let schema
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 0627646c6f..6bd1643756 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -6346,7 +6346,14 @@
         "settings": [
           {
             "type": "buttonConfiguration",
-            "key": "buttons"
+            "key": "buttons",
+            "nested": true,
+            "context": [
+              {
+                "label": "Clicked row",
+                "key": "row"
+              }
+            ]
           }
         ]
       }

From c25b8a1448bf44b462fbf0a83268709c6dfdbab3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Nov 2023 14:10:16 +0000
Subject: [PATCH 06/15] Expose schema context from grid and allow usage in
 buttons

---
 .../ButtonActionEditor/actions/SaveRow.svelte  |  3 ++-
 .../ButtonConfiguration.svelte                 |  2 ++
 .../ButtonConfiguration/ButtonSetting.svelte   | 18 ++++++++++++++++++
 packages/client/manifest.json                  |  5 ++++-
 .../client/src/components/app/GridBlock.svelte |  6 +++++-
 .../components/grid/layout/ButtonColumn.svelte |  9 ++++++++-
 .../src/components/grid/stores/rows.js         |  8 ++++++--
 7 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
index c1917ad90f..27b6463ffa 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
@@ -21,7 +21,8 @@
   $: schemaComponents = getContextProviderComponents(
     $currentAsset,
     $store.selectedComponentId,
-    "schema"
+    "schema",
+    { includeSelf: nested }
   )
   $: providerOptions = getProviderOptions(formComponents, schemaComponents)
   $: schemaFields = getSchemaFields(parameters?.tableId)
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 9126fa0f77..3f1ea83d8c 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -11,6 +11,7 @@
   export let bindings
   export let value
   export let key
+  export let nested
 
   const dispatch = createEventDispatcher()
 
@@ -28,6 +29,7 @@
     bindings: allBindings,
     removeButton,
     canRemove: true,
+    nested,
   }
 
   const sanitizeValue = val => {
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 a05fd9a39b..17c9667c26 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
@@ -10,10 +10,27 @@
   export let anchor
   export let removeButton
   export let canRemove
+  export let nested
 
   $: readableText = isJSBinding(item.text)
     ? "(JavaScript function)"
     : runtimeToReadableBinding([...bindings, componentBindings], item.text)
+
+  // If this is a nested setting (for example inside a grid or form block) then
+  // we need to mark all the settings of the actual buttons as nested too, to
+  // allow up to reference context provided by the block
+  const updatedNestedFlags = settings => {
+    if (!nested) {
+      return settings
+    }
+    // Buttons do not currently have any sections, so this works.
+    // We will need to update this in future if the normal button component
+    // gets broken into multiple settings sections
+    return settings?.map(setting => ({
+      ...setting,
+      nested: true,
+    }))
+  }
 </script>
 
 <div class="list-item-body">
@@ -24,6 +41,7 @@
       {componentBindings}
       {bindings}
       on:change
+      parseSettings={updatedNestedFlags}
     />
     <div class="field-label">{readableText || "Button"}</div>
   </div>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 6bd1643756..d131cda8c3 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -6357,7 +6357,10 @@
           }
         ]
       }
-    ]
+    ],
+    "context": {
+      "type": "schema"
+    }
   },
   "bbreferencefield": {
     "devComment": "As bb reference is only used for user subtype for now, we are using user for icon and labels",
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 490caa622f..847f1e0768 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -53,7 +53,11 @@
       text: settings.text,
       type: settings.type,
       onClick: async row => {
-        const fn = enrichButtonActions(settings.onClick, get(context))
+        // We add a fake context binding in here, which allows us to pretend
+        // that the grid provides a "schema" binding - that lets us use the
+        // clicked row in things like save row actions
+        const enrichedContext = { ...get(context), [$component.id]: row }
+        const fn = enrichButtonActions(settings.onClick, enrichedContext)
         return await fn?.({ row })
       },
     }))
diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 4acd8b6b70..65b9d212ca 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -9,6 +9,7 @@
     hoveredRowId,
     props,
     width,
+    rows,
     focusedRow,
     selectedRows,
     visibleColumns,
@@ -27,6 +28,12 @@
   $: end = columnsWidth - 1 - $scroll.left
   $: left = Math.min($width - $buttonColumnWidth, end)
 
+  const handleClick = async (button, row) => {
+    await button.onClick?.(row)
+    // Refresh the row in case it changed
+    await rows.actions.refreshRow(row._id)
+  }
+
   onMount(() => {
     const observer = new ResizeObserver(entries => {
       const width = entries?.[0]?.contentRect?.width ?? 0
@@ -81,7 +88,7 @@
                   secondary={button.type === "secondary"}
                   warning={button.type === "warning"}
                   overBackground={button.type === "overBackground"}
-                  on:click={() => button.onClick?.(row)}
+                  on:click={() => handleClick(button, row)}
                 >
                   {button.text || "Button"}
                 </Button>
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index 82185d6b91..34ba77afa2 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -314,8 +314,12 @@ export const createActions = context => {
 
   // Refreshes a specific row
   const refreshRow = async id => {
-    const row = await datasource.actions.getRow(id)
-    replaceRow(id, row)
+    try {
+      const row = await datasource.actions.getRow(id)
+      replaceRow(id, row)
+    } catch {
+      // Do nothing - we probably just don't support refreshing individual rows
+    }
   }
 
   // Refreshes all data

From 8017dd592b518c695ba2dde3961b6bacbc10a40f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Nov 2023 14:12:06 +0000
Subject: [PATCH 07/15] Ensure rows are cleaned before being passed to button
 actions in grids

---
 .../src/components/grid/layout/ButtonColumn.svelte              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 65b9d212ca..d484f9408d 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -29,7 +29,7 @@
   $: left = Math.min($width - $buttonColumnWidth, end)
 
   const handleClick = async (button, row) => {
-    await button.onClick?.(row)
+    await button.onClick?.(rows.actions.cleanRow(row))
     // Refresh the row in case it changed
     await rows.actions.refreshRow(row._id)
   }

From 3f91d62b272c2de2a447b6a573eca85c45518ecf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Nov 2023 14:19:17 +0000
Subject: [PATCH 08/15] Allow button configuration settings to be cleared
 completely

---
 .../controls/ButtonConfiguration/ButtonConfiguration.svelte     | 1 -
 .../settings/controls/ButtonConfiguration/ButtonSetting.svelte  | 2 --
 2 files changed, 3 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 3f1ea83d8c..a24d18909f 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -28,7 +28,6 @@
     componentBindings: componentBindings || [],
     bindings: allBindings,
     removeButton,
-    canRemove: true,
     nested,
   }
 
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 17c9667c26..c84e86c8cc 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
@@ -9,7 +9,6 @@
   export let bindings
   export let anchor
   export let removeButton
-  export let canRemove
   export let nested
 
   $: readableText = isJSBinding(item.text)
@@ -47,7 +46,6 @@
   </div>
   <div class="list-item-right">
     <Icon
-      disabled={!canRemove}
       size="S"
       name="Close"
       hoverable

From 19a9318eac778cccdd77ccdc8ee014a4cab88f53 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Nov 2023 14:19:52 +0000
Subject: [PATCH 09/15] Type

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

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 c84e86c8cc..8e8c89ac14 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
@@ -17,7 +17,7 @@
 
   // If this is a nested setting (for example inside a grid or form block) then
   // we need to mark all the settings of the actual buttons as nested too, to
-  // allow up to reference context provided by the block
+  // allow us to reference context provided by the block
   const updatedNestedFlags = settings => {
     if (!nested) {
       return settings

From 3d2cd9cc0bf7810d5584b399f840353eb852aaf1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Nov 2023 14:22:09 +0000
Subject: [PATCH 10/15] Use explicit svelte store 'get' when clicking buttons
 in grids

---
 packages/client/src/components/app/GridBlock.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 847f1e0768..801e1a4d0a 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -56,7 +56,7 @@
         // We add a fake context binding in here, which allows us to pretend
         // that the grid provides a "schema" binding - that lets us use the
         // clicked row in things like save row actions
-        const enrichedContext = { ...get(context), [$component.id]: row }
+        const enrichedContext = { ...get(context), [get(component).id]: row }
         const fn = enrichButtonActions(settings.onClick, enrichedContext)
         return await fn?.({ row })
       },

From a3435728150c9a981fdb3b3f8b0919dcbd1eef27 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Nov 2023 14:36:57 +0000
Subject: [PATCH 11/15] Add utils to client lib

---
 packages/client/src/sdk.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 77089d648b..b83039df2a 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -14,6 +14,7 @@ import {
   dndIsDragging,
   confirmationStore,
   roleStore,
+  stateStore,
 } from "stores"
 import { styleable } from "utils/styleable"
 import { linkable } from "utils/linkable"
@@ -25,6 +26,7 @@ import { ActionTypes } from "./constants"
 import { fetchDatasourceSchema } from "./utils/schema.js"
 import { getAPIKey } from "./utils/api.js"
 import { enrichButtonActions } from "./utils/buttonActions.js"
+import { processStringSync } from "@budibase/string-templates"
 
 export default {
   API,
@@ -44,6 +46,7 @@ export default {
   currentRole,
   confirmationStore,
   roleStore,
+  stateStore,
 
   // Utils
   styleable,
@@ -52,6 +55,7 @@ export default {
   fetchDatasourceSchema,
   getAPIKey,
   enrichButtonActions,
+  processStringSync,
 
   // Components
   Provider,

From ace3b69971c67537cac012cfb6c4d06683757605 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Nov 2023 14:55:02 +0000
Subject: [PATCH 12/15] Limit grid buttons at 3

---
 .../ButtonConfiguration.svelte                | 20 ++++++++++++++-----
 packages/client/manifest.json                 |  1 +
 2 files changed, 16 insertions(+), 5 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 a24d18909f..ce91c8f7b5 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -12,6 +12,7 @@
   export let value
   export let key
   export let nested
+  export let max
 
   const dispatch = createEventDispatcher()
 
@@ -30,6 +31,7 @@
     removeButton,
     nested,
   }
+  $: canAddButtons = max == null || buttonList.length < max
 
   const sanitizeValue = val => {
     return val?.map(button => {
@@ -97,7 +99,12 @@
     />
   {/if}
 
-  <div class="list-footer" on:click={addButton} class:empty={!buttonCount}>
+  <div
+    class="list-footer"
+    class:disabled={!canAddButtons}
+    on:click={addButton}
+    class:empty={!buttonCount}
+  >
     <div class="add-button">Add button</div>
   </div>
 </div>
@@ -132,15 +139,18 @@
   .list-footer.empty {
     border-radius: 4px;
   }
-
-  .add-button {
-    margin: var(--spacing-s);
+  .list-footer.disabled {
+    color: var(--spectrum-global-color-gray-500);
+    pointer-events: none;
   }
-
   .list-footer:hover {
     background-color: var(
       --spectrum-table-row-background-color-hover,
       var(--spectrum-alias-highlight-hover)
     );
   }
+
+  .add-button {
+    margin: var(--spacing-s);
+  }
 </style>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index d131cda8c3..378d8c3493 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -6348,6 +6348,7 @@
             "type": "buttonConfiguration",
             "key": "buttons",
             "nested": true,
+            "max": 3,
             "context": [
               {
                 "label": "Clicked row",

From d92df57daa35ce814b224495b056d21b098976ae Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Nov 2023 16:20:05 +0000
Subject: [PATCH 13/15] Remove nested flag from buttongroup component since it
 isn't needed

---
 packages/client/manifest.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 378d8c3493..5979d177f4 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -270,7 +270,6 @@
           {
             "type": "buttonConfiguration",
             "key": "buttons",
-            "nested": true,
             "defaultValue": [
               {
                 "type": "cta",

From bb47b91064e17dd1a6ff2b4ddd1c71ff367b832b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Nov 2023 16:20:44 +0000
Subject: [PATCH 14/15] Add new disableBindings property to prevent a text
 field from being bindable when required

---
 .../common/bindings/DrawerBindableInput.svelte |  3 ++-
 .../ButtonConfiguration/ButtonSetting.svelte   | 18 ++++++++++++------
 .../settings/controls/PropertyControl.svelte   |  2 ++
 .../Component/ComponentSettingsSection.svelte  |  1 +
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 5c4f90606d..09732ce4f2 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -21,6 +21,7 @@
   export let allowHelpers = true
   export let updateOnChange = true
   export let drawerLeft
+  export let disableBindings = false
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -62,7 +63,7 @@
     {placeholder}
     {updateOnChange}
   />
-  {#if !disabled}
+  {#if !disabled && !disableBindings}
     <div
       class="icon"
       on:click={() => {
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 8e8c89ac14..56b5deace4 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
@@ -17,18 +17,24 @@
 
   // If this is a nested setting (for example inside a grid or form block) then
   // we need to mark all the settings of the actual buttons as nested too, to
-  // allow us to reference context provided by the block
+  // allow us to reference context provided by the block.
+  // We will need to update this in future if the normal button component
+  // gets broken into multiple settings sections, as we assume a flat array.
   const updatedNestedFlags = settings => {
-    if (!nested) {
+    if (!nested || !settings?.length) {
       return settings
     }
-    // Buttons do not currently have any sections, so this works.
-    // We will need to update this in future if the normal button component
-    // gets broken into multiple settings sections
-    return settings?.map(setting => ({
+    let newSettings = settings.map(setting => ({
       ...setting,
       nested: true,
     }))
+    // We need to prevent bindings for the button names because of how grid
+    // blocks work. This is an edge case but unavoidable.
+    let name = newSettings.find(x => x.key === "text")
+    if (name) {
+      name.disableBindings = true
+    }
+    return newSettings
   }
 </script>
 
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index c8135b4f61..a6f3d1b218 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -23,6 +23,7 @@
   export let highlighted = false
   export let propertyFocus = false
   export let info = null
+  export let disableBindings = false
 
   $: nullishValue = value == null || value === ""
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
@@ -99,6 +100,7 @@
       {nested}
       {key}
       {type}
+      {disableBindings}
       {...props}
       on:drawerHide
       on:drawerShow
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 65f010e4ec..6093d2a45e 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
@@ -179,6 +179,7 @@
               highlighted={$store.highlightedSettingKey === setting.key}
               propertyFocus={$store.propertyFocus === setting.key}
               info={setting.info}
+              disableBindings={setting.disableBindings}
               props={{
                 // Generic settings
                 placeholder: setting.placeholder || null,

From e04ea1a620ca5878b8affa043ff72fd3b70dbb5a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 Nov 2023 08:30:42 +0000
Subject: [PATCH 15/15] Add makePropSafe to client SDK

---
 packages/client/src/sdk.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index b83039df2a..69c2cc9fd4 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -26,7 +26,7 @@ import { ActionTypes } from "./constants"
 import { fetchDatasourceSchema } from "./utils/schema.js"
 import { getAPIKey } from "./utils/api.js"
 import { enrichButtonActions } from "./utils/buttonActions.js"
-import { processStringSync } from "@budibase/string-templates"
+import { processStringSync, makePropSafe } from "@budibase/string-templates"
 
 export default {
   API,
@@ -56,6 +56,7 @@ export default {
   getAPIKey,
   enrichButtonActions,
   processStringSync,
+  makePropSafe,
 
   // Components
   Provider,