Expose schema context from grid and allow usage in buttons

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)

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 => {

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>

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",

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 })
       },
     }))

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>

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