Generate button context bindings for all button actions

packages/builder/src/builderStore/componentUtils.js

@@ -132,6 +132,10 @@ const searchComponentTree = (rootComponent, matchComponent) => {
  */
 let componentSettingCache = {}
 export const getComponentSettings = componentType => {
+  if (!componentType) {
+    return []
+  }
+
   // Ensure whole component name is used
   if (!componentType.startsWith("@budibase")) {
     componentType = `@budibase/standard-components/${componentType}`

packages/builder/src/builderStore/dataBinding.js

@@ -381,28 +381,13 @@ const getUrlBindings = asset => {
  * Gets all bindable properties exposed in a button actions flow up until
  * the specified action ID.
  */
-export const getButtonContextBindings = (component, actionId) => {
-  // Find the setting we are working on
-  let settingValue = []
-  const settings = getComponentSettings(component._component)
-  const eventSettings = settings.filter(setting => setting.type === "event")
-  for (let i = 0; i < eventSettings.length; i++) {
-    const setting = component[eventSettings[i].key]
-    if (
-      Array.isArray(setting) &&
-      setting.find(action => action.id === actionId)
-    ) {
-      settingValue = setting
-      break
-    }
-  }
-  if (!settingValue?.length) {
+export const getButtonContextBindings = (actions, actionId) => {
+  // Get the steps leading up to this value
+  const index = actions?.findIndex(action => action.id === actionId)
+  if (index == null || index === -1) {
     return []
   }
-
-  // Get the steps leading up to this value
-  const index = settingValue.findIndex(action => action.id === actionId)
-  const prevActions = settingValue.slice(0, index)
+  const prevActions = actions.slice(0, index)
 
   // Generate bindings for any steps which provide context
   let bindings = []

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -11,6 +11,7 @@
   } from "@budibase/bbui"
   import { getAvailableActions } from "./actions"
   import { generate } from "shortid"
+  import { getButtonContextBindings } from "builderStore/dataBinding"
 
   const flipDurationMs = 150
   const EVENT_TYPE_KEY = "##eventHandlerType"
@@ -19,7 +20,17 @@
   export let actions
   export let bindings = []
 
-  // dndzone needs an id on the array items, so this adds some temporary ones.
+  let selectedAction = actions?.length ? actions[0] : null
+
+  // These are ephemeral bindings which only exist while executing actions
+  $: buttonContextBindings = getButtonContextBindings(
+    actions,
+    selectedAction?.id
+  )
+  $: console.log(buttonContextBindings)
+  $: allBindings = buttonContextBindings.concat(bindings)
+
+  // Assign a unique ID to each action
   $: {
     if (actions) {
       actions.forEach(action => {
@@ -30,8 +41,6 @@
     }
   }
 
-  let selectedAction = actions?.length ? actions[0] : null
-
   $: selectedActionComponent =
     selectedAction &&
     actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY])?.component
@@ -121,9 +130,8 @@
       <div class="selected-action-container">
         <svelte:component
           this={selectedActionComponent}
-          selectedActionId={selectedAction.id}
           parameters={selectedAction.parameters}
-          {bindings}
+          bindings={allBindings}
         />
       </div>
     {/if}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte

@@ -1,15 +1,13 @@
 <script>
   import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
-  import { store, currentAsset, selectedComponent } from "builderStore"
+  import { store, currentAsset } from "builderStore"
   import { tables } from "stores/backend"
   import {
-    getButtonContextBindings,
     getContextProviderComponents,
     getSchemaForDatasource,
   } from "builderStore/dataBinding"
   import SaveFields from "./SaveFields.svelte"
 
-  export let selectedActionId
   export let parameters
   export let bindings = []
 
@@ -26,11 +24,6 @@
   $: providerOptions = getProviderOptions(formComponents, schemaComponents)
   $: schemaFields = getSchemaFields($currentAsset, parameters?.tableId)
   $: tableOptions = $tables.list || []
-  $: buttonContextBindings = getButtonContextBindings(
-    $selectedComponent,
-    selectedActionId
-  )
-  $: console.log(buttonContextBindings)
 
   // Gets a context definition of a certain type from a component definition
   const extractComponentContext = (component, contextType) => {