Update button actions to support suffixed actions from blocks

packages/builder/src/builderStore/dataBinding.js

@@ -228,7 +228,12 @@ export const getContextProviderComponents = (
 /**
  * Gets all data provider components above a component.
  */
-export const getActionProviderComponents = (asset, componentId, actionType) => {
+export const getActionProviders = (
+  asset,
+  componentId,
+  actionType,
+  options = { includeSelf: false }
+) => {
   if (!asset || !componentId) {
     return []
   }
@@ -236,13 +241,30 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
   // Get the component tree leading up to this component, ignoring the component
   // itself
   const path = findComponentPath(asset.props, componentId)
-  path.pop()
+  if (!options?.includeSelf) {
+    path.pop()
+  }
 
-  // Filter by only data provider components
-  return path.filter(component => {
+  // Find matching contexts and generate bindings
+  let providers = []
+  path.forEach(component => {
     const def = store.actions.components.getDefinition(component._component)
-    return def?.actions?.includes(actionType)
+    const actions = (def?.actions || []).map(action => {
+      return typeof action === "string" ? { type: action } : action
+    })
+    const action = actions.find(x => x.type === actionType)
+    if (action) {
+      let runtimeBinding = component._id
+      if (action.suffix) {
+        runtimeBinding += `-${action.suffix}`
+      }
+      providers.push({
+        readableBinding: component._instanceName,
+        runtimeBinding,
+      })
+    }
   })
+  return providers
 }
 
 /**

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ChangeFormStep.svelte

@@ -1,17 +1,19 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
   import { currentAsset, store } from "builderStore"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { getActionProviders } from "builderStore/dataBinding"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings = []
+  export let nested
 
-  $: actionProviders = getActionProviderComponents(
+  $: actionProviders = getActionProviders(
     $currentAsset,
     $store.selectedComponentId,
-    "ChangeFormStep"
+    "ChangeFormStep",
+    { includeSelf: nested }
   )
 
   const typeOptions = [
@@ -46,8 +48,8 @@
     placeholder={null}
     bind:value={parameters.componentId}
     options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
+    getOptionLabel={x => x.readableBinding}
+    getOptionValue={x => x.runtimeBinding}
   />
   <Label small>Step</Label>
   <Select bind:value={parameters.type} options={typeOptions} />

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearForm.svelte

@@ -1,14 +1,16 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
   import { currentAsset, store } from "builderStore"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { getActionProviders } from "builderStore/dataBinding"
 
   export let parameters
+  export let nested
 
-  $: actionProviders = getActionProviderComponents(
+  $: actionProviders = getActionProviders(
     $currentAsset,
     $store.selectedComponentId,
-    "ClearForm"
+    "ClearForm",
+    { includeSelf: nested }
   )
 </script>
 
@@ -17,8 +19,8 @@
   <Select
     bind:value={parameters.componentId}
     options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
+    getOptionLabel={x => x.readableBinding}
+    getOptionValue={x => x.runtimeBinding}
   />
 </div>
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RefreshDataProvider.svelte

@@ -1,14 +1,16 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
   import { currentAsset, store } from "builderStore"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { getActionProviders } from "builderStore/dataBinding"
 
   export let parameters
+  export let nested
 
-  $: actionProviders = getActionProviderComponents(
+  $: actionProviders = getActionProviders(
     $currentAsset,
     $store.selectedComponentId,
-    "RefreshDatasource"
+    "RefreshDatasource",
+    { includeSelf: nested }
   )
 </script>
 
@@ -17,8 +19,8 @@
   <Select
     bind:value={parameters.componentId}
     options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
+    getOptionLabel={x => x.readableBinding}
+    getOptionValue={x => x.runtimeBinding}
   />
 </div>
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ScrollTo.svelte

@@ -1,22 +1,36 @@
 <script>
   import { currentAsset, store } from "builderStore"
   import { Label, Combobox, Select } from "@budibase/bbui"
-  import {
-    getActionProviderComponents,
-    buildFormSchema,
-  } from "builderStore/dataBinding"
+  import { getActionProviders, buildFormSchema } from "builderStore/dataBinding"
   import { findComponent } from "builderStore/componentUtils"
 
   export let parameters
+  export let nested
 
-  $: formComponent = findComponent($currentAsset.props, parameters.componentId)
+  $: formComponent = getFormComponent(
+    $currentAsset.props,
+    parameters.componentId
+  )
   $: formSchema = buildFormSchema(formComponent)
   $: fieldOptions = Object.keys(formSchema || {})
-  $: actionProviders = getActionProviderComponents(
+  $: actionProviders = getActionProviders(
     $currentAsset,
     $store.selectedComponentId,
-    "ScrollTo"
+    "ScrollTo",
+    { includeSelf: nested }
   )
+
+  const getFormComponent = (asset, id) => {
+    let component = findComponent(asset, id)
+    if (component) {
+      return component
+    }
+    // Check for block component IDs, and use the block itself instead
+    if (id?.includes("-")) {
+      return findComponent(asset, id.split("-")[0])
+    }
+    return null
+  }
 </script>
 
 <div class="root">
@@ -24,8 +38,8 @@
   <Select
     bind:value={parameters.componentId}
     options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
+    getOptionLabel={x => x.readableBinding}
+    getOptionValue={x => x.runtimeBinding}
   />
   <Label small>Field</Label>
   <Combobox bind:value={parameters.field} options={fieldOptions} />

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte

@@ -3,14 +3,12 @@
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { currentAsset, store } from "builderStore"
-  import {
-    getActionProviderComponents,
-    buildFormSchema,
-  } from "builderStore/dataBinding"
+  import { getActionProviders, buildFormSchema } from "builderStore/dataBinding"
   import { findComponent } from "builderStore/componentUtils"
 
   export let parameters
   export let bindings = []
+  export let nested
 
   const typeOptions = [
     {
@@ -23,15 +21,31 @@
     },
   ]
 
-  $: formComponent = findComponent($currentAsset.props, parameters.componentId)
+  $: formComponent = getFormComponent(
+    $currentAsset.props,
+    parameters.componentId
+  )
   $: formSchema = buildFormSchema(formComponent)
   $: fieldOptions = Object.keys(formSchema || {})
-  $: actionProviders = getActionProviderComponents(
+  $: actionProviders = getActionProviders(
     $currentAsset,
     $store.selectedComponentId,
-    "ValidateForm"
+    "ValidateForm",
+    { includeSelf: nested }
   )
 
+  const getFormComponent = (asset, id) => {
+    let component = findComponent(asset, id)
+    if (component) {
+      return component
+    }
+    // Check for block component IDs, and use the block itself instead
+    if (id?.includes("-")) {
+      return findComponent(asset, id.split("-")[0])
+    }
+    return null
+  }
+
   onMount(() => {
     if (!parameters.type) {
       parameters.type = "set"
@@ -44,8 +58,8 @@
   <Select
     bind:value={parameters.componentId}
     options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
+    getOptionLabel={x => x.readableBinding}
+    getOptionValue={x => x.runtimeBinding}
   />
   <Label small>Type</Label>
   <Select

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ValidateForm.svelte

@@ -1,14 +1,16 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
   import { currentAsset, store } from "builderStore"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { getActionProviders } from "builderStore/dataBinding"
 
   export let parameters
+  export let nested
 
-  $: actionProviders = getActionProviderComponents(
+  $: actionProviders = getActionProviders(
     $currentAsset,
     $store.selectedComponentId,
-    "ValidateForm"
+    "ValidateForm",
+    { includeSelf: nested }
   )
 </script>
 
@@ -17,8 +19,8 @@
   <Select
     bind:value={parameters.componentId}
     options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
+    getOptionLabel={x => x.readableBinding}
+    getOptionValue={x => x.runtimeBinding}
   />
   <div />
 </div>