Merge pull request #3618 from Budibase/fix/block-context

Fixes for button actions, block contexts and nester data provider settings

packages/builder/src/builderStore/dataBinding.js

@@ -61,7 +61,7 @@ export const getComponentBindableProperties = (asset, componentId) => {
 /**
  * Gets all data provider components above a component.
  */
-export const getDataProviderComponents = (asset, componentId) => {
+export const getContextProviderComponents = (asset, componentId, type) => {
   if (!asset || !componentId) {
     return []
   }
@@ -74,7 +74,18 @@ export const getDataProviderComponents = (asset, componentId) => {
   // Filter by only data provider components
   return path.filter(component => {
     const def = store.actions.components.getDefinition(component._component)
-    return def?.context != null
+    if (!def?.context) {
+      return false
+    }
+
+    // If no type specified, return anything that exposes context
+    if (!type) {
+      return true
+    }
+
+    // Otherwise only match components with the specific context type
+    const contexts = Array.isArray(def.context) ? def.context : [def.context]
+    return contexts.find(context => context.type === type) != null
   })
 }
 
@@ -143,7 +154,7 @@ export const getDatasourceForProvider = (asset, component) => {
  */
 const getContextBindings = (asset, componentId) => {
   // Extract any components which provide data contexts
-  const dataProviders = getDataProviderComponents(asset, componentId)
+  const dataProviders = getContextProviderComponents(asset, componentId)
 
   // Generate bindings for all matching components
   return getProviderContextBindings(asset, dataProviders)

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getDataProviderComponents } from "builderStore/dataBinding"
+  import { getContextProviderComponents } from "builderStore/dataBinding"
   import {
     Button,
     Popover,
@@ -58,10 +58,13 @@
       ...query,
       type: "query",
     }))
-  $: dataProviders = getDataProviderComponents(
+  $: contextProviders = getContextProviderComponents(
     $currentAsset,
     $store.selectedComponentId
-  ).map(provider => ({
+  )
+  $: dataProviders = contextProviders
+    .filter(component => component._component?.endsWith("/dataprovider"))
+    .map(provider => ({
       label: provider._instanceName,
       name: provider._instanceName,
       providerId: provider._id,

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

@@ -4,6 +4,7 @@
   import { notifications } from "@budibase/bbui"
   import EventEditor from "./EventEditor.svelte"
   import { automationStore } from "builderStore"
+  import { cloneDeep } from "lodash/fp"
 
   const dispatch = createEventDispatcher()
 
@@ -12,17 +13,23 @@
   export let bindings
 
   let drawer
+  let tmpValue
+
+  const openDrawer = () => {
+    tmpValue = cloneDeep(value)
+    drawer.show()
+  }
 
   const saveEventData = async () => {
     // any automations that need created from event triggers
-    const automationsToCreate = value.filter(
+    const automationsToCreate = tmpValue.filter(
       action => action["##eventHandlerType"] === "Trigger Automation"
     )
     for (let action of automationsToCreate) {
       await createAutomation(action.parameters)
     }
 
-    dispatch("change", value)
+    dispatch("change", tmpValue)
     notifications.success("Component actions saved.")
     drawer.hide()
   }
@@ -54,11 +61,16 @@
   }
 </script>
 
-<ActionButton on:click={drawer.show}>Define actions</ActionButton>
+<ActionButton on:click={openDrawer}>Define actions</ActionButton>
 <Drawer bind:this={drawer} title={"Actions"}>
   <svelte:fragment slot="description">
     Define what actions to run.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={saveEventData}>Save</Button>
-  <EventEditor slot="body" bind:actions={value} eventType={name} {bindings} />
+  <EventEditor
+    slot="body"
+    bind:actions={tmpValue}
+    eventType={name}
+    {bindings}
+  />
 </Drawer>

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

@@ -3,7 +3,7 @@
   import { store, currentAsset } from "builderStore"
   import { tables } from "stores/backend"
   import {
-    getDataProviderComponents,
+    getContextProviderComponents,
     getSchemaForDatasource,
   } from "builderStore/dataBinding"
   import SaveFields from "./SaveFields.svelte"
@@ -11,13 +11,54 @@
   export let parameters
   export let bindings = []
 
-  $: dataProviderComponents = getDataProviderComponents(
+  $: formComponents = getContextProviderComponents(
     $currentAsset,
-    $store.selectedComponentId
+    $store.selectedComponentId,
+    "form"
   )
+  $: schemaComponents = getContextProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "schema"
+  )
+  $: providerOptions = getProviderOptions(formComponents, schemaComponents)
   $: schemaFields = getSchemaFields($currentAsset, parameters?.tableId)
   $: tableOptions = $tables.list || []
 
+  // Gets a context definition of a certain type from a component definition
+  const extractComponentContext = (component, contextType) => {
+    const def = store.actions.components.getDefinition(component?._component)
+    if (!def) {
+      return null
+    }
+    const contexts = Array.isArray(def.context) ? def.context : [def.context]
+    return contexts.find(context => context?.type === contextType)
+  }
+
+  // Gets options for valid context keys which provide valid data to submit
+  const getProviderOptions = (formComponents, schemaComponents) => {
+    const formContexts = formComponents.map(component => ({
+      component,
+      context: extractComponentContext(component, "form"),
+    }))
+    const schemaContexts = schemaComponents.map(component => ({
+      component,
+      context: extractComponentContext(component, "schema"),
+    }))
+    const allContexts = formContexts.concat(schemaContexts)
+
+    return allContexts.map(({ component, context }) => {
+      let runtimeBinding = component._id
+      if (context.suffix) {
+        runtimeBinding += `-${context.suffix}`
+      }
+      return {
+        label: component._instanceName,
+        value: runtimeBinding,
+      }
+    })
+  }
+
   const getSchemaFields = (asset, tableId) => {
     const { schema } = getSchemaForDatasource(asset, { type: "table", tableId })
     return Object.values(schema || {})
@@ -39,10 +80,8 @@
     <Label small>Data Source</Label>
     <Select
       bind:value={parameters.providerId}
-      options={dataProviderComponents}
+      options={providerOptions}
       placeholder="None"
-      getOptionLabel={option => option._instanceName}
-      getOptionValue={option => option._id}
     />
 
     <Label small>Table</Label>