From d03f96ceb8327d46245700c404831e8afd9c3bbc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 28 Apr 2023 09:03:09 +0100
Subject: [PATCH 01/43] Make all blindings global and improve client component
 performance

---
 .../builder/src/builderStore/dataBinding.js   | 34 ++++++---
 .../src/builderStore/store/frontend.js        |  7 +-
 .../controls/DataProviderSelect.svelte        |  9 +--
 packages/client/manifest.json                 | 11 ---
 .../client/src/components/Component.svelte    | 71 ++++++++++++++-----
 .../src/components/context/Provider.svelte    |  6 +-
 packages/client/src/stores/context.js         | 61 +++++++---------
 packages/client/src/utils/componentProps.js   | 16 +----
 .../client/src/utils/enrichDataBinding.js     |  1 +
 yarn.lock                                     | 12 ++--
 10 files changed, 127 insertions(+), 101 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 0d41931a55..9f253f9f75 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -199,15 +199,7 @@ export const getContextProviderComponents = (
     return []
   }
 
-  // Get the component tree leading up to this component, ignoring the component
-  // itself
-  const path = findComponentPath(asset.props, componentId)
-  if (!options?.includeSelf) {
-    path.pop()
-  }
-
-  // Filter by only data provider components
-  return path.filter(component => {
+  return findAllMatchingComponents(asset.props, component => {
     const def = store.actions.components.getDefinition(component._component)
     if (!def?.context) {
       return false
@@ -222,6 +214,30 @@ export const getContextProviderComponents = (
     const contexts = Array.isArray(def.context) ? def.context : [def.context]
     return contexts.find(context => context.type === type) != null
   })
+  //
+  // // Get the component tree leading up to this component, ignoring the component
+  // // itself
+  // const path = findComponentPath(asset.props, componentId)
+  // if (!options?.includeSelf) {
+  //   path.pop()
+  // }
+  //
+  // // Filter by only data provider components
+  // return path.filter(component => {
+  //   const def = store.actions.components.getDefinition(component._component)
+  //   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
+  // })
 }
 
 /**
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index e264dc099b..fb3eb8f1d9 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -621,10 +621,9 @@ export const getFrontendStore = () => {
           else {
             if (setting.type === "dataProvider") {
               // Validate data provider exists, or else clear it
-              const treeId = parent?._id || component._id
-              const path = findComponentPath(screen?.props, treeId)
-              const providers = path.filter(component =>
-                component._component?.endsWith("/dataprovider")
+              const providers = findAllMatchingComponents(
+                screen?.props,
+                component => component._component?.endsWith("/dataprovider")
               )
               // Validate non-empty values
               const valid = providers?.some(dp => value.includes?.(dp._id))
diff --git a/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte b/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte
index 83255ec325..9fd220e798 100644
--- a/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte
@@ -1,15 +1,16 @@
 <script>
   import { Select } from "@budibase/bbui"
   import { makePropSafe } from "@budibase/string-templates"
-  import { currentAsset, store } from "builderStore"
-  import { findComponentPath } from "builderStore/componentUtils"
+  import { currentAsset } from "builderStore"
+  import { findAllMatchingComponents } from "builderStore/componentUtils"
 
   export let value
 
   const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
 
-  $: path = findComponentPath($currentAsset?.props, $store.selectedComponentId)
-  $: providers = path.filter(c => c._component?.endsWith("/dataprovider"))
+  $: providers = findAllMatchingComponents($currentAsset?.props, c =>
+    c._component?.endsWith("/dataprovider")
+  )
 </script>
 
 <Select
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 71637723c1..3db651f7af 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -394,7 +394,6 @@
     "description": "A configurable data list that attaches to your backend tables.",
     "icon": "JourneyData",
     "illegalChildren": ["section"],
-    "requiredAncestors": ["dataprovider"],
     "hasChildren": true,
     "size": {
       "width": 400,
@@ -1385,7 +1384,6 @@
     "name": "Bar Chart",
     "description": "Bar chart",
     "icon": "GraphBarVertical",
-    "requiredAncestors": ["dataprovider"],
     "size": {
       "width": 600,
       "height": 400
@@ -1548,7 +1546,6 @@
       "width": 600,
       "height": 400
     },
-    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -1702,7 +1699,6 @@
       "width": 600,
       "height": 400
     },
-    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -1868,7 +1864,6 @@
       "width": 600,
       "height": 400
     },
-    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -1998,7 +1993,6 @@
       "width": 600,
       "height": 400
     },
-    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -2128,7 +2122,6 @@
       "width": 600,
       "height": 400
     },
-    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -3177,7 +3170,6 @@
       "width": 400,
       "height": 320
     },
-    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "dataProvider",
@@ -3601,7 +3593,6 @@
     "name": "Table",
     "icon": "Table",
     "illegalChildren": ["section"],
-    "requiredAncestors": ["dataprovider"],
     "hasChildren": true,
     "showEmptyState": false,
     "size": {
@@ -3692,7 +3683,6 @@
     "name": "Date Range",
     "icon": "Calendar",
     "styles": ["size"],
-    "requiredAncestors": ["dataprovider"],
     "hasChildren": false,
     "size": {
       "width": 200,
@@ -3800,7 +3790,6 @@
       "width": 100,
       "height": 35
     },
-    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "dataProvider",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 97e6808912..cc0f9f8d5d 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -30,6 +30,11 @@
   import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
   import ComponentErrorState from "components/error-states/ComponentErrorState.svelte"
   import { BudibasePrefix } from "../stores/components.js"
+  import {
+    decodeJSBinding,
+    findHBSBlocks,
+    isJSBinding,
+  } from "@budibase/string-templates"
 
   export let instance = {}
   export let isLayout = false
@@ -98,6 +103,13 @@
   // We clear these whenever a new instance is received.
   let ephemeralStyles
 
+  // Single string of all HBS blocks, used to check if we use a certain binding
+  // or not
+  let bindingString = ""
+
+  // List of context keys which we use inside bindings
+  let knownContextKeyMap = {}
+
   // Set up initial state for each new component instance
   $: initialise(instance)
 
@@ -155,7 +167,7 @@
   $: emptyState = empty && showEmptyState
 
   // Enrich component settings
-  $: enrichComponentSettings($context, settingsDefinitionMap)
+  // $: enrichComponentSettings($context, settingsDefinitionMap)
 
   // Evaluate conditional UI settings and store any component setting changes
   // which need to be made
@@ -212,7 +224,8 @@
     }
 
     // Ensure we're processing a new instance
-    const instanceKey = Helpers.hashString(JSON.stringify(instance))
+    const stringifiedInstance = JSON.stringify(instance)
+    const instanceKey = Helpers.hashString(stringifiedInstance)
     if (instanceKey === lastInstanceKey && !force) {
       return
     } else {
@@ -272,10 +285,22 @@
       return missing
     })
 
-    // Force an initial enrichment of the new settings
-    enrichComponentSettings(get(context), settingsDefinitionMap, {
-      force: true,
+    // When considering bindings we can ignore children, so we remove that
+    // before storing the reference stringified version
+    const noChildren = JSON.stringify({ ...instance, _children: null })
+    const bindings = findHBSBlocks(noChildren).map(binding => {
+      let sanitizedBinding = binding.replace(/\\"/g, '"')
+      if (isJSBinding(sanitizedBinding)) {
+        return decodeJSBinding(sanitizedBinding)
+      } else {
+        return sanitizedBinding
+      }
     })
+    bindingString = bindings.join(" ")
+    knownContextKeyMap = {}
+
+    // Force an initial enrichment of the new settings
+    enrichComponentSettings($context, settingsDefinitionMap)
   }
 
   const getSettingsDefinitionMap = settingsDefinition => {
@@ -355,17 +380,7 @@
   }
 
   // Enriches any string component props using handlebars
-  const enrichComponentSettings = (
-    context,
-    settingsDefinitionMap,
-    options = { force: false }
-  ) => {
-    const contextChanged = context.key !== lastContextKey
-    if (!contextChanged && !options?.force) {
-      return
-    }
-    lastContextKey = context.key
-
+  const enrichComponentSettings = (context, settingsDefinitionMap) => {
     // Record the timestamp so we can reference it after enrichment
     latestUpdateTime = Date.now()
     const enrichmentTime = latestUpdateTime
@@ -480,6 +495,28 @@
     })
   }
 
+  const handleContextChange = key => {
+    // Check if we already know if this key is used
+    let used = knownContextKeyMap[key]
+
+    // If we don't know, check
+    if (used == null) {
+      // Check HBS
+      if (bindingString.indexOf(`[${key}]`) !== -1) {
+        used = true
+      } else {
+        used = false
+      }
+      // Cache result
+      knownContextKeyMap[key] = used
+    }
+
+    // Enrich settings if we use this key
+    if (used) {
+      enrichComponentSettings($context, settingsDefinitionMap)
+    }
+  }
+
   onMount(() => {
     if (
       $appStore.isDevApp &&
@@ -497,6 +534,8 @@
     }
   })
 
+  onMount(() => context.actions.observeChanges(handleContextChange))
+
   onDestroy(() => {
     if (
       $appStore.isDevApp &&
diff --git a/packages/client/src/components/context/Provider.svelte b/packages/client/src/components/context/Provider.svelte
index 19a5c3a462..d0145da54b 100644
--- a/packages/client/src/components/context/Provider.svelte
+++ b/packages/client/src/components/context/Provider.svelte
@@ -11,8 +11,6 @@
   // Clone and create new data context for this component tree
   const context = getContext("context")
   const component = getContext("component")
-  const newContext = createContextStore(context)
-  setContext("context", newContext)
 
   const providerKey = key || $component.id
 
@@ -30,7 +28,7 @@
   const provideData = newData => {
     const dataKey = JSON.stringify(newData)
     if (dataKey !== lastDataKey) {
-      newContext.actions.provideData(providerKey, newData)
+      context.actions.provideData(providerKey, newData)
       lastDataKey = dataKey
     }
   }
@@ -40,7 +38,7 @@
     if (actionsKey !== lastActionsKey) {
       lastActionsKey = actionsKey
       newActions?.forEach(({ type, callback, metadata }) => {
-        newContext.actions.provideAction(providerKey, type, callback)
+        context.actions.provideAction(providerKey, type, callback)
 
         // Register any "refresh datasource" actions with a singleton store
         // so we can easily refresh data at all levels for any datasource
diff --git a/packages/client/src/stores/context.js b/packages/client/src/stores/context.js
index 9c35bc4862..c1a2f67a8d 100644
--- a/packages/client/src/stores/context.js
+++ b/packages/client/src/stores/context.js
@@ -1,44 +1,21 @@
-import { writable, derived } from "svelte/store"
-import { Helpers } from "@budibase/bbui"
+import { writable } from "svelte/store"
 
-export const createContextStore = oldContext => {
-  const newContext = writable({})
-  const contexts = oldContext ? [oldContext, newContext] : [newContext]
-  const totalContext = derived(contexts, $contexts => {
-    // The key is the serialized representation of context
-    let key = ""
-    for (let i = 0; i < $contexts.length - 1; i++) {
-      key += $contexts[i].key
-    }
-    key = Helpers.hashString(
-      key + JSON.stringify($contexts[$contexts.length - 1])
-    )
-
-    // Reduce global state
-    const reducer = (total, context) => ({ ...total, ...context })
-    const context = $contexts.reduce(reducer, {})
-
-    return {
-      ...context,
-      key,
-    }
-  })
+export const createContextStore = () => {
+  const context = writable({})
+  let observers = []
 
   // Adds a data context layer to the tree
   const provideData = (providerId, data) => {
     if (!providerId || data === undefined) {
       return
     }
-    newContext.update(state => {
+    // console.log(`[${providerId}]`, data)
+    context.update(state => {
       state[providerId] = data
-
-      // Keep track of the closest component ID so we can later hydrate a "data" prop.
-      // This is only required for legacy bindings that used "data" rather than a
-      // component ID.
-      state.closestComponentId = providerId
-
       return state
     })
+
+    broadcastChange(providerId)
   }
 
   // Adds an action context layer to the tree
@@ -46,14 +23,30 @@ export const createContextStore = oldContext => {
     if (!providerId || !actionType) {
       return
     }
-    newContext.update(state => {
+    context.update(state => {
       state[`${providerId}_${actionType}`] = callback
       return state
     })
   }
 
+  const observeChanges = callback => {
+    observers.push(callback)
+
+    return () => {
+      observers = observers.filter(cb => cb !== callback)
+    }
+  }
+
+  const broadcastChange = key => {
+    observers.forEach(cb => cb(key))
+  }
+
   return {
-    subscribe: totalContext.subscribe,
-    actions: { provideData, provideAction },
+    subscribe: context.subscribe,
+    actions: {
+      provideData,
+      provideAction,
+      observeChanges,
+    },
   }
 }
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 38eaf77885..efe69938e7 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -23,16 +23,6 @@ export const propsAreSame = (a, b) => {
  * Data bindings are enriched, and button actions are enriched.
  */
 export const enrichProps = (props, context, settingsDefinitionMap) => {
-  // Create context of all bindings and data contexts
-  // Duplicate the closest context as "data" which the builder requires
-  const totalContext = {
-    ...context,
-
-    // This is only required for legacy bindings that used "data" rather than a
-    // component ID.
-    data: context[context.closestComponentId],
-  }
-
   // We want to exclude any button actions from enrichment at this stage.
   // Extract top level button action settings.
   let normalProps = { ...props }
@@ -49,13 +39,13 @@ export const enrichProps = (props, context, settingsDefinitionMap) => {
   let rawConditions = normalProps._conditions
 
   // Enrich all props except button actions
-  let enrichedProps = enrichDataBindings(normalProps, totalContext)
+  let enrichedProps = enrichDataBindings(normalProps, context)
 
   // Enrich button actions.
   // Actions are enriched into a function at this stage, but actual data
   // binding enrichment is done dynamically at runtime.
   Object.keys(actionProps).forEach(prop => {
-    enrichedProps[prop] = enrichButtonActions(actionProps[prop], totalContext)
+    enrichedProps[prop] = enrichButtonActions(actionProps[prop], context)
   })
 
   // Conditions
@@ -66,7 +56,7 @@ export const enrichProps = (props, context, settingsDefinitionMap) => {
         // action
         condition.settingValue = enrichButtonActions(
           rawConditions[idx].settingValue,
-          totalContext
+          context
         )
 
         // Since we can't compare functions, we need to assume that conditions
diff --git a/packages/client/src/utils/enrichDataBinding.js b/packages/client/src/utils/enrichDataBinding.js
index 0f142ab297..9025a505d9 100644
--- a/packages/client/src/utils/enrichDataBinding.js
+++ b/packages/client/src/utils/enrichDataBinding.js
@@ -24,5 +24,6 @@ export const enrichDataBinding = async (input, context) => {
  * Props are deeply cloned so that no mutation is done to the source object.
  */
 export const enrichDataBindings = (props, context) => {
+  console.log("enrich")
   return processObjectSync(Helpers.cloneDeep(props), context, { cache: true })
 }
diff --git a/yarn.lock b/yarn.lock
index fff37f62e4..37947af3b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1486,15 +1486,15 @@
     pouchdb-promise "^6.0.4"
     through2 "^2.0.0"
 
-"@budibase/pro@2.5.6-alpha.36":
-  version "2.5.6-alpha.36"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-2.5.6-alpha.36.tgz#361afe64b0881ee436a5ef294fb315c05ea94ce6"
-  integrity sha512-uX1wgOk47aVGl/yIJZiZS8x31sTS6wGDEFv0AMZ2h6rwIp6GwHDGq2/QT6a8hRMsAM4sqr8R2GkyyAG+dm0DGQ==
+"@budibase/pro@2.5.6-alpha.37":
+  version "2.5.6-alpha.37"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-2.5.6-alpha.37.tgz#3f4c7ba36bd01e2f7cbc56461c1249cc4098bc38"
+  integrity sha512-D0P4ePioE43yZ+CvLE5XdO84x6/UcF8oY3rHIhd8+bS1LW1yrzAf4kG9lyBRsNUPZoTMPmJeD9zqGRw67pdjzA==
   dependencies:
-    "@budibase/backend-core" "2.5.6-alpha.36"
+    "@budibase/backend-core" "2.5.6-alpha.37"
     "@budibase/shared-core" "2.4.44-alpha.1"
     "@budibase/string-templates" "2.4.44-alpha.1"
-    "@budibase/types" "2.5.6-alpha.36"
+    "@budibase/types" "2.5.6-alpha.37"
     "@koa/router" "8.0.8"
     bull "4.10.1"
     joi "17.6.0"

From b7c78825972ab9e9244f384ecbe6109910910388 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 28 Apr 2023 10:22:02 +0100
Subject: [PATCH 02/43] Add manifest entry for grid layout component

---
 packages/client/manifest.json | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 3db651f7af..59062e3b95 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5214,5 +5214,22 @@
       "type": "schema",
       "suffix": "repeater"
     }
+  },
+  "grid": {
+    "name": "Grid",
+    "icon": "ViewGrid",
+    "hasChildren": true,
+    "settings": [
+      {
+        "type": "number",
+        "key": "cols",
+        "label": "Columns"
+      },
+      {
+        "type": "number",
+        "key": "rows",
+        "label": "Rows"
+      }
+    ]
   }
 }

From b82a34d7e14d06db72fb896f867c5ea29d0be81e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 25 Jul 2023 15:35:58 +0100
Subject: [PATCH 03/43] Tidy up

---
 packages/client/src/components/Component.svelte        | 10 ++--------
 packages/client/src/components/context/Provider.svelte |  2 --
 packages/client/src/stores/context.js                  |  3 ---
 packages/client/src/utils/enrichDataBinding.js         |  1 -
 packages/server/package.json                           |  2 +-
 packages/worker/package.json                           |  2 +-
 6 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a17d637279..d55c23161c 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -499,15 +499,9 @@
     // Check if we already know if this key is used
     let used = knownContextKeyMap[key]
 
-    // If we don't know, check
+    // If we don't know, check and cache
     if (used == null) {
-      // Check HBS
-      if (bindingString.indexOf(`[${key}]`) !== -1) {
-        used = true
-      } else {
-        used = false
-      }
-      // Cache result
+      used = bindingString.indexOf(`[${key}]`) !== -1
       knownContextKeyMap[key] = used
     }
 
diff --git a/packages/client/src/components/context/Provider.svelte b/packages/client/src/components/context/Provider.svelte
index d0145da54b..b3e9d1e9fc 100644
--- a/packages/client/src/components/context/Provider.svelte
+++ b/packages/client/src/components/context/Provider.svelte
@@ -8,10 +8,8 @@
   export let actions
   export let key
 
-  // Clone and create new data context for this component tree
   const context = getContext("context")
   const component = getContext("component")
-
   const providerKey = key || $component.id
 
   // Generate a permanent unique ID for this component and use it to register
diff --git a/packages/client/src/stores/context.js b/packages/client/src/stores/context.js
index c1a2f67a8d..0363fbf7a6 100644
--- a/packages/client/src/stores/context.js
+++ b/packages/client/src/stores/context.js
@@ -9,12 +9,10 @@ export const createContextStore = () => {
     if (!providerId || data === undefined) {
       return
     }
-    // console.log(`[${providerId}]`, data)
     context.update(state => {
       state[providerId] = data
       return state
     })
-
     broadcastChange(providerId)
   }
 
@@ -31,7 +29,6 @@ export const createContextStore = () => {
 
   const observeChanges = callback => {
     observers.push(callback)
-
     return () => {
       observers = observers.filter(cb => cb !== callback)
     }
diff --git a/packages/client/src/utils/enrichDataBinding.js b/packages/client/src/utils/enrichDataBinding.js
index 9025a505d9..0f142ab297 100644
--- a/packages/client/src/utils/enrichDataBinding.js
+++ b/packages/client/src/utils/enrichDataBinding.js
@@ -24,6 +24,5 @@ export const enrichDataBinding = async (input, context) => {
  * Props are deeply cloned so that no mutation is done to the source object.
  */
 export const enrichDataBindings = (props, context) => {
-  console.log("enrich")
   return processObjectSync(Helpers.cloneDeep(props), context, { cache: true })
 }
diff --git a/packages/server/package.json b/packages/server/package.json
index 52f209a403..41a11008b8 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -48,7 +48,7 @@
     "@apidevtools/swagger-parser": "10.0.3",
     "@budibase/backend-core": "0.0.0",
     "@budibase/client": "0.0.0",
-    "@budibase/pro": "0.0.0",
+    "@budibase/pro": "develop",
     "@budibase/shared-core": "0.0.0",
     "@budibase/string-templates": "0.0.0",
     "@budibase/types": "0.0.0",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 8d4844fa12..130713bbd5 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -39,7 +39,7 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@budibase/backend-core": "0.0.0",
-    "@budibase/pro": "0.0.0",
+    "@budibase/pro": "develop",
     "@budibase/string-templates": "0.0.0",
     "@budibase/types": "0.0.0",
     "@koa/router": "8.0.8",

From a9819dfc47d52c969002bf8a01579cd5c5798d3e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Aug 2023 13:20:02 +0100
Subject: [PATCH 04/43] Bump pro

---
 packages/pro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pro b/packages/pro
index 347ee53268..cf3bef2aad 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 347ee5326812c01ef07f0e744f691ab4823e185a
+Subproject commit cf3bef2aad9c739111b306fd0712397adc363f81

From 071a80864dd39b3385217aac12a66df03ae3c3dc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 12 Sep 2023 17:09:53 +0100
Subject: [PATCH 05/43] Update data binding generation to support both local
 and global binding scopes

---
 .../src/builderStore/componentUtils.js        |   7 +
 .../builder/src/builderStore/dataBinding.js   | 378 ++++++++++--------
 packages/client/manifest.json                 |   4 +-
 packages/pro                                  |   2 +-
 yarn.lock                                     |  37 --
 5 files changed, 218 insertions(+), 210 deletions(-)

diff --git a/packages/builder/src/builderStore/componentUtils.js b/packages/builder/src/builderStore/componentUtils.js
index 16b972058e..da27a43c7a 100644
--- a/packages/builder/src/builderStore/componentUtils.js
+++ b/packages/builder/src/builderStore/componentUtils.js
@@ -89,6 +89,13 @@ export const findAllMatchingComponents = (rootComponent, selector) => {
   return components.reverse()
 }
 
+/**
+ * Recurses through the component tree and finds all components.
+ */
+export const findAllComponents = rootComponent => {
+  return findAllMatchingComponents(rootComponent, () => true)
+}
+
 /**
  * Finds the closes parent component which matches certain criteria
  */
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 6e0223b86a..194d1b2e39 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -1,6 +1,7 @@
 import { cloneDeep } from "lodash/fp"
 import { get } from "svelte/store"
 import {
+  findAllComponents,
   findAllMatchingComponents,
   findComponent,
   findComponentPath,
@@ -156,7 +157,7 @@ export const readableToRuntimeMap = (bindings, ctx) => {
 }
 
 /**
- * Utility - coverting a map of runtime bindings to readable
+ * Utility to covert a map of runtime bindings to readable bindings
  */
 export const runtimeToReadableMap = (bindings, ctx) => {
   if (!bindings || !ctx) {
@@ -182,9 +183,69 @@ export const getComponentBindableProperties = (asset, componentId) => {
   if (!def?.context) {
     return []
   }
+  const contexts = Array.isArray(def.context) ? def.context : [def.context]
 
   // Get the bindings for the component
-  return getProviderContextBindings(asset, component)
+  const componentContext = {
+    component,
+    definition: def,
+    contexts,
+  }
+  return generateComponentContextBindings(asset, componentContext)
+}
+
+/**
+ * Gets all component contexts available to a certain component. This handles
+ * both global and local bindings, taking into account a component's position
+ * in the component tree.
+ */
+const getComponentContexts = (asset, componentId, type) => {
+  if (!asset || !componentId) {
+    return []
+  }
+  let map = {}
+
+  // Processes all contexts exposed by a component
+  const processContexts = scope => component => {
+    const def = store.actions.components.getDefinition(component._component)
+    if (!def?.context) {
+      return
+    }
+    if (!map[component._id]) {
+      map[component._id] = {
+        component,
+        definition: def,
+        contexts: [],
+      }
+    }
+    const contexts = Array.isArray(def.context) ? def.context : [def.context]
+    contexts.forEach(context => {
+      // Ensure type matches
+      if (type && context.type !== type) {
+        return
+      }
+      // Ensure scope matches
+      let contextScope = context.scope || "global"
+      if (contextScope !== scope) {
+        return
+      }
+      // Ensure the context is compatible with the component's current settings
+      if (!isContextCompatibleWithComponent(context, component)) {
+        return
+      }
+      map[component._id].contexts.push(context)
+    })
+  }
+
+  // Process all global contexts
+  const allComponents = findAllComponents(asset.props)
+  allComponents.forEach(processContexts("global"))
+
+  // Process all local contexts
+  const localComponents = findComponentPath(asset.props, componentId)
+  localComponents.forEach(processContexts("local"))
+
+  return Object.values(map)
 }
 
 /**
@@ -196,49 +257,17 @@ export const getContextProviderComponents = (
   type,
   options = { includeSelf: false }
 ) => {
-  if (!asset || !componentId) {
-    return []
+  let componentContexts = getComponentContexts(asset, componentId, type)
+
+  // Exclude self if required
+  if (!options?.includeSelf) {
+    componentContexts = componentContexts.filter(
+      entry => entry.component._id !== componentId
+    )
   }
 
-  return findAllMatchingComponents(asset.props, component => {
-    const def = store.actions.components.getDefinition(component._component)
-    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
-  })
-  //
-  // // Get the component tree leading up to this component, ignoring the component
-  // // itself
-  // const path = findComponentPath(asset.props, componentId)
-  // if (!options?.includeSelf) {
-  //   path.pop()
-  // }
-  //
-  // // Filter by only data provider components
-  // return path.filter(component => {
-  //   const def = store.actions.components.getDefinition(component._component)
-  //   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
-  // })
+  // Ignore contexts and just return the component instances
+  return componentContexts.map(entry => entry.component)
 }
 
 /**
@@ -305,142 +334,132 @@ export const getDatasourceForProvider = (asset, component) => {
  * Gets all bindable data properties from component data contexts.
  */
 const getContextBindings = (asset, componentId) => {
-  // Extract any components which provide data contexts
-  const dataProviders = getContextProviderComponents(asset, componentId)
+  // Get all available contexts for this component
+  const componentContexts = getComponentContexts(asset, componentId)
 
-  // Generate bindings for all matching components
-  return getProviderContextBindings(asset, dataProviders)
+  // Generate bindings for each context
+  return componentContexts
+    .map(componentContext => {
+      return generateComponentContextBindings(asset, componentContext)
+    })
+    .flat()
 }
 
-/**
- * Gets the context bindings exposed by a set of data provider components.
- */
-const getProviderContextBindings = (asset, dataProviders) => {
-  if (!asset || !dataProviders) {
+const generateComponentContextBindings = (asset, componentContext) => {
+  const { component, definition, contexts } = componentContext
+  if (!component || !definition || !contexts?.length) {
     return []
   }
 
-  // Ensure providers is an array
-  if (!Array.isArray(dataProviders)) {
-    dataProviders = [dataProviders]
-  }
-
   // Create bindings for each data provider
   let bindings = []
-  dataProviders.forEach(component => {
-    const def = store.actions.components.getDefinition(component._component)
-    const contexts = Array.isArray(def.context) ? def.context : [def.context]
+  contexts.forEach(context => {
+    if (!context?.type) {
+      return
+    }
 
-    // Create bindings for each context block provided by this data provider
-    contexts.forEach(context => {
-      if (!context?.type) {
+    let schema
+    let table
+    let readablePrefix
+    let runtimeSuffix = context.suffix
+
+    if (context.type === "form") {
+      // Forms do not need table schemas
+      // Their schemas are built from their component field names
+      schema = buildFormSchema(component, asset)
+      readablePrefix = "Fields"
+    } else if (context.type === "static") {
+      // Static contexts are fully defined by the components
+      schema = {}
+      const values = context.values || []
+      values.forEach(value => {
+        schema[value.key] = {
+          name: value.label,
+          type: value.type || "string",
+        }
+      })
+    } else if (context.type === "schema") {
+      // Schema contexts are generated dynamically depending on their data
+      const datasource = getDatasourceForProvider(asset, component)
+      if (!datasource) {
         return
       }
+      const info = getSchemaForDatasource(asset, datasource)
+      schema = info.schema
+      table = info.table
 
-      let schema
-      let table
-      let readablePrefix
-      let runtimeSuffix = context.suffix
-
-      if (context.type === "form") {
-        // Forms do not need table schemas
-        // Their schemas are built from their component field names
-        schema = buildFormSchema(component, asset)
-        readablePrefix = "Fields"
-      } else if (context.type === "static") {
-        // Static contexts are fully defined by the components
-        schema = {}
-        const values = context.values || []
-        values.forEach(value => {
-          schema[value.key] = {
-            name: value.label,
-            type: value.type || "string",
-          }
-        })
-      } else if (context.type === "schema") {
-        // Schema contexts are generated dynamically depending on their data
-        const datasource = getDatasourceForProvider(asset, component)
-        if (!datasource) {
-          return
-        }
-        const info = getSchemaForDatasource(asset, datasource)
-        schema = info.schema
-        table = info.table
-
-        // Determine what to prefix bindings with
-        if (datasource.type === "jsonarray") {
-          // For JSON arrays, use the array name as the readable prefix
-          const split = datasource.label.split(".")
-          readablePrefix = split[split.length - 1]
-        } else if (datasource.type === "viewV2") {
-          // For views, use the view name
-          const view = Object.values(table?.views || {}).find(
-            view => view.id === datasource.id
-          )
-          readablePrefix = view?.name
-        } else {
-          // Otherwise use the table name
-          readablePrefix = info.table?.name
-        }
-      }
-      if (!schema) {
-        return
-      }
-
-      const keys = Object.keys(schema).sort()
-
-      // Generate safe unique runtime prefix
-      let providerId = component._id
-      if (runtimeSuffix) {
-        providerId += `-${runtimeSuffix}`
-      }
-
-      if (!filterCategoryByContext(component, context)) {
-        return
-      }
-
-      const safeComponentId = makePropSafe(providerId)
-
-      // Create bindable properties for each schema field
-      keys.forEach(key => {
-        const fieldSchema = schema[key]
-
-        // Make safe runtime binding
-        const safeKey = key.split(".").map(makePropSafe).join(".")
-        const runtimeBinding = `${safeComponentId}.${safeKey}`
-
-        // Optionally use a prefix with readable bindings
-        let readableBinding = component._instanceName
-        if (readablePrefix) {
-          readableBinding += `.${readablePrefix}`
-        }
-        readableBinding += `.${fieldSchema.name || key}`
-
-        const bindingCategory = getComponentBindingCategory(
-          component,
-          context,
-          def
+      // Determine what to prefix bindings with
+      if (datasource.type === "jsonarray") {
+        // For JSON arrays, use the array name as the readable prefix
+        const split = datasource.label.split(".")
+        readablePrefix = split[split.length - 1]
+      } else if (datasource.type === "viewV2") {
+        // For views, use the view name
+        const view = Object.values(table?.views || {}).find(
+          view => view.id === datasource.id
         )
+        readablePrefix = view?.name
+      } else {
+        // Otherwise use the table name
+        readablePrefix = info.table?.name
+      }
+    }
+    if (!schema) {
+      return
+    }
 
-        // Create the binding object
-        bindings.push({
-          type: "context",
-          runtimeBinding,
-          readableBinding,
-          // Field schema and provider are required to construct relationship
-          // datasource options, based on bindable properties
-          fieldSchema,
-          providerId,
-          // Table ID is used by JSON fields to know what table the field is in
-          tableId: table?._id,
-          component: component._component,
-          category: bindingCategory.category,
-          icon: bindingCategory.icon,
-          display: {
-            name: fieldSchema.name || key,
-            type: fieldSchema.type,
-          },
-        })
+    const keys = Object.keys(schema).sort()
+
+    // Generate safe unique runtime prefix
+    let providerId = component._id
+    if (runtimeSuffix) {
+      providerId += `-${runtimeSuffix}`
+    }
+    const safeComponentId = makePropSafe(providerId)
+
+    // Create bindable properties for each schema field
+    keys.forEach(key => {
+      const fieldSchema = schema[key]
+
+      // Make safe runtime binding
+      const safeKey = key.split(".").map(makePropSafe).join(".")
+      const runtimeBinding = `${safeComponentId}.${safeKey}`
+
+      // Optionally use a prefix with readable bindings
+      let readableBinding = component._instanceName
+      if (readablePrefix) {
+        readableBinding += `.${readablePrefix}`
+      }
+      readableBinding += `.${fieldSchema.name || key}`
+
+      // Determine which category this binding belongs in
+      const bindingCategory = getComponentBindingCategory(
+        component,
+        context,
+        definition
+      )
+
+      // Temporarily append scope for debugging
+      const scope = `[${(context.scope || "global").toUpperCase()}]`
+
+      // Create the binding object
+      bindings.push({
+        type: "context",
+        runtimeBinding,
+        readableBinding: `${scope} ${readableBinding}`,
+        // Field schema and provider are required to construct relationship
+        // datasource options, based on bindable properties
+        fieldSchema,
+        providerId,
+        // Table ID is used by JSON fields to know what table the field is in
+        tableId: table?._id,
+        component: component._component,
+        category: bindingCategory.category,
+        icon: bindingCategory.icon,
+        display: {
+          name: `${scope} ${fieldSchema.name || key}`,
+          type: fieldSchema.type,
+        },
       })
     })
   })
@@ -448,24 +467,40 @@ const getProviderContextBindings = (asset, dataProviders) => {
   return bindings
 }
 
-// Exclude a data context based on the component settings
-const filterCategoryByContext = (component, context) => {
-  const { _component } = component
+/**
+ * Checks if a certain data context is compatible with a certain instance of a
+ * configured component.
+ */
+const isContextCompatibleWithComponent = (context, component) => {
+  if (!component) {
+    return false
+  }
+  const { _component, actionType } = component
+  const { type } = context
+
+  // Certain types of form blocks only allow certain contexts
   if (_component.endsWith("formblock")) {
     if (
-      (component.actionType == "Create" && context.type === "schema") ||
-      (component.actionType == "View" && context.type === "form")
+      (actionType === "Create" && type === "schema") ||
+      (actionType === "View" && type === "form")
     ) {
       return false
     }
   }
+
+  // Allow the context by default
   return true
 }
 
+/**
+ * Determines the correct category for a given binding.
+ */
 const getComponentBindingCategory = (component, context, def) => {
+  // Default category to component name
   let icon = def.icon
   let category = component._instanceName
 
+  // Form block edge case
   if (component._component.endsWith("formblock")) {
     let contextCategorySuffix = {
       form: "Fields",
@@ -476,6 +511,7 @@ const getComponentBindingCategory = (component, context, def) => {
     }`
     icon = context.type === "form" ? "Form" : "Data"
   }
+
   return {
     icon,
     category,
@@ -483,7 +519,7 @@ const getComponentBindingCategory = (component, context, def) => {
 }
 
 /**
- * Gets all bindable properties from the logged in user.
+ * Gets all bindable properties from the logged-in user.
  */
 export const getUserBindings = () => {
   let bindings = []
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 1fe42f7ab8..83b701360f 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -531,10 +531,12 @@
     ],
     "context": [
       {
-        "type": "schema"
+        "type": "schema",
+        "scope": "local"
       },
       {
         "type": "static",
+        "scope": "local",
         "values": [
           {
             "label": "Row index",
diff --git a/packages/pro b/packages/pro
index cf3bef2aad..4638ae916e 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit cf3bef2aad9c739111b306fd0712397adc363f81
+Subproject commit 4638ae916e55ce89166095578cbd01745d0ee9ee
diff --git a/yarn.lock b/yarn.lock
index e6d75f4158..00f4dd547c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3610,13 +3610,6 @@
     strip-ansi "^6.0.0"
     v8-to-istanbul "^9.0.1"
 
-"@jest/schemas@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.1.3.tgz#ad8b86a66f11f33619e3d7e1dcddd7f2d40ff905"
-  integrity sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==
-  dependencies:
-    "@sinclair/typebox" "^0.24.1"
-
 "@jest/schemas@^29.4.3":
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.4.3.tgz#39cf1b8469afc40b6f5a2baaa146e332c4151788"
@@ -3703,18 +3696,6 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
-"@jest/types@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.3.tgz#b05de80996ff12512bc5ceb1d208285a7d11748b"
-  integrity sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==
-  dependencies:
-    "@jest/schemas" "^28.1.3"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^3.0.0"
-    "@types/node" "*"
-    "@types/yargs" "^17.0.8"
-    chalk "^4.0.0"
-
 "@jest/types@^29.4.3":
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.4.3.tgz#9069145f4ef09adf10cec1b2901b2d390031431f"
@@ -5139,11 +5120,6 @@
     make-fetch-happen "^11.0.1"
     tuf-js "^1.1.3"
 
-"@sinclair/typebox@^0.24.1":
-  version "0.24.51"
-  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
-  integrity sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==
-
 "@sinclair/typebox@^0.25.16":
   version "0.25.24"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
@@ -6293,14 +6269,6 @@
     "@types/tedious" "*"
     tarn "^3.0.1"
 
-"@types/node-fetch@2.6.1":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.1.tgz#8f127c50481db65886800ef496f20bbf15518975"
-  integrity sha512-oMqjURCaxoSIsHSr1E47QHzbmzNR5rK8McHuNb11BOM9cHcIK3Avy0s/b2JlXHoQGTYS3NsvWzV1M0iK7l0wbA==
-  dependencies:
-    "@types/node" "*"
-    form-data "^3.0.0"
-
 "@types/node-fetch@2.6.4":
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.4.tgz#1bc3a26de814f6bf466b25aeb1473fa1afe6a660"
@@ -6322,11 +6290,6 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.18.tgz#8dfb97f0da23c2293e554c5a50d61ef134d7697f"
   integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
 
-"@types/node@14.18.20":
-  version "14.18.20"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.20.tgz#268f028b36eaf51181c3300252f605488c4f0650"
-  integrity sha512-Q8KKwm9YqEmUBRsqJ2GWJDtXltBDxTdC4m5vTdXBolu2PeQh8LX+f6BTwU+OuXPu37fLxoN6gidqBmnky36FXA==
-
 "@types/node@16.9.1":
   version "16.9.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.1.tgz#0611b37db4246c937feef529ddcc018cf8e35708"

From 49948df9cdb7c908a37bcb46e3d3ea83ce682003 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Sep 2023 15:31:51 +0100
Subject: [PATCH 06/43] Support both global and local state simultaneously

---
 .../client/src/components/app/Repeater.svelte |  4 +-
 .../src/components/context/Provider.svelte    | 14 +++-
 packages/client/src/constants.js              |  5 ++
 packages/client/src/sdk.js                    |  3 +-
 packages/client/src/stores/context.js         | 81 +++++++++++++++----
 5 files changed, 85 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/components/app/Repeater.svelte b/packages/client/src/components/app/Repeater.svelte
index 39e11d12cf..16e1a5363e 100644
--- a/packages/client/src/components/app/Repeater.svelte
+++ b/packages/client/src/components/app/Repeater.svelte
@@ -10,7 +10,7 @@
   export let vAlign
   export let gap
 
-  const { Provider } = getContext("sdk")
+  const { Provider, ContextScopes } = getContext("sdk")
   const component = getContext("component")
 
   $: rows = dataProvider?.rows ?? []
@@ -22,7 +22,7 @@
     <Placeholder />
   {:else if rows.length > 0}
     {#each rows as row, index}
-      <Provider data={{ ...row, index }}>
+      <Provider data={{ ...row, index }} scope={ContextScopes.Local}>
         <slot />
       </Provider>
     {/each}
diff --git a/packages/client/src/components/context/Provider.svelte b/packages/client/src/components/context/Provider.svelte
index b3e9d1e9fc..45ba4deed4 100644
--- a/packages/client/src/components/context/Provider.svelte
+++ b/packages/client/src/components/context/Provider.svelte
@@ -3,15 +3,23 @@
   import { dataSourceStore, createContextStore } from "stores"
   import { ActionTypes } from "constants"
   import { generate } from "shortid"
+  import { ContextScopes } from "constants"
 
   export let data
   export let actions
   export let key
+  export let scope = ContextScopes.Global
 
-  const context = getContext("context")
+  let context = getContext("context")
   const component = getContext("component")
   const providerKey = key || $component.id
 
+  // Create a new layer of context if we are only locally scoped
+  if (scope === ContextScopes.Local) {
+    context = createContextStore(context)
+    setContext("context", context)
+  }
+
   // Generate a permanent unique ID for this component and use it to register
   // any datasource actions
   const instanceId = generate()
@@ -26,7 +34,7 @@
   const provideData = newData => {
     const dataKey = JSON.stringify(newData)
     if (dataKey !== lastDataKey) {
-      context.actions.provideData(providerKey, newData)
+      context.actions.provideData(providerKey, newData, scope)
       lastDataKey = dataKey
     }
   }
@@ -36,7 +44,7 @@
     if (actionsKey !== lastActionsKey) {
       lastActionsKey = actionsKey
       newActions?.forEach(({ type, callback, metadata }) => {
-        context.actions.provideAction(providerKey, type, callback)
+        context.actions.provideAction(providerKey, type, callback, scope)
 
         // Register any "refresh datasource" actions with a singleton store
         // so we can easily refresh data at all levels for any datasource
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index 37a45fbe5d..dfa7985599 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -32,5 +32,10 @@ export const ActionTypes = {
   ScrollTo: "ScrollTo",
 }
 
+export const ContextScopes = {
+  Local: "local",
+  Global: "global",
+}
+
 export const DNDPlaceholderID = "dnd-placeholder"
 export const ScreenslotType = "screenslot"
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 237334ca57..6ea1d1b46d 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -20,7 +20,7 @@ import { getAction } from "utils/getAction"
 import Provider from "components/context/Provider.svelte"
 import Block from "components/Block.svelte"
 import BlockComponent from "components/BlockComponent.svelte"
-import { ActionTypes } from "./constants"
+import { ActionTypes, ContextScopes } from "./constants"
 import { fetchDatasourceSchema } from "./utils/schema.js"
 import { getAPIKey } from "./utils/api.js"
 
@@ -44,6 +44,7 @@ export default {
   getAction,
   fetchDatasourceSchema,
   Provider,
+  ContextScopes,
   ActionTypes,
   getAPIKey,
   Block,
diff --git a/packages/client/src/stores/context.js b/packages/client/src/stores/context.js
index 0363fbf7a6..e54c773591 100644
--- a/packages/client/src/stores/context.js
+++ b/packages/client/src/stores/context.js
@@ -1,30 +1,79 @@
-import { writable } from "svelte/store"
+import { writable, derived } from "svelte/store"
+import { ContextScopes } from "constants"
 
-export const createContextStore = () => {
+export const createContextStore = parentContext => {
   const context = writable({})
   let observers = []
 
-  // Adds a data context layer to the tree
-  const provideData = (providerId, data) => {
+  // Derive the total context state at this point in the tree
+  const contexts = parentContext ? [parentContext, context] : [context]
+  const totalContext = derived(contexts, $contexts => {
+    return $contexts.reduce((total, context) => ({ ...total, ...context }), {})
+  })
+
+  // Subscribe to updates in the parent context, so that we can proxy on any
+  // change messages to our own subscribers
+  if (parentContext) {
+    parentContext.actions.observeChanges(key => {
+      broadcastChange(key)
+    })
+  }
+
+  // Provide some data in context
+  const provideData = (providerId, data, scope = ContextScopes.Global) => {
     if (!providerId || data === undefined) {
       return
     }
-    context.update(state => {
-      state[providerId] = data
-      return state
-    })
-    broadcastChange(providerId)
+
+    // Proxy message up the chain if we have a parent and are providing global
+    // context
+    if (scope === ContextScopes.Global && parentContext) {
+      parentContext.actions.provideData(providerId, data, scope)
+    }
+
+    // Otherwise this is either the context root, or we're providing a local
+    // context override, so we need to update the local context instead
+    else {
+      context.update(state => {
+        state[providerId] = data
+        return state
+      })
+      broadcastChange(providerId)
+    }
   }
 
-  // Adds an action context layer to the tree
-  const provideAction = (providerId, actionType, callback) => {
+  // Provides some action in context
+  const provideAction = (
+    providerId,
+    actionType,
+    callback,
+    scope = ContextScopes.Global
+  ) => {
     if (!providerId || !actionType) {
       return
     }
-    context.update(state => {
-      state[`${providerId}_${actionType}`] = callback
-      return state
-    })
+
+    // Proxy message up the chain if we have a parent and are providing global
+    // context
+    if (scope === ContextScopes.Global && parentContext) {
+      parentContext.actions.provideAction(
+        providerId,
+        actionType,
+        callback,
+        scope
+      )
+    }
+
+    // Otherwise this is either the context root, or we're providing a local
+    // context override, so we need to update the local context instead
+    else {
+      const key = `${providerId}_${actionType}`
+      context.update(state => {
+        state[key] = callback
+        return state
+      })
+      broadcastChange(key)
+    }
   }
 
   const observeChanges = callback => {
@@ -39,7 +88,7 @@ export const createContextStore = () => {
   }
 
   return {
-    subscribe: context.subscribe,
+    subscribe: totalContext.subscribe,
     actions: {
       provideData,
       provideAction,

From 46a9f98fe5a9d1f997ebf86e54345a24e896dc61 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 15 Sep 2023 08:02:14 +0100
Subject: [PATCH 07/43] Lint

---
 .../client/src/components/Component.svelte    | 44 +++++++++----------
 .../src/components/grid/cells/DateCell.svelte |  2 +-
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 29eb1b2a20..8c7d65bd1c 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <script>
-  import { getContext, setContext, onMount, onDestroy } from "svelte"
+  import { getContext, setContext, onMount } from "svelte"
   import { writable, get } from "svelte/store"
   import {
     enrichProps,
@@ -86,7 +86,6 @@
 
   // Keep track of stringified representations of context and instance
   // to avoid enriching bindings as much as possible
-  let lastContextKey
   let lastInstanceKey
 
   // Visibility flag used by conditional UI
@@ -540,33 +539,30 @@
     }
   }
 
+  // Register an unregister component instance
   onMount(() => {
-    if (
-      $appStore.isDevApp &&
-      !componentStore.actions.isComponentRegistered(id)
-    ) {
-      componentStore.actions.registerInstance(id, {
-        component: instance._component,
-        getSettings: () => cachedSettings,
-        getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
-        getDataContext: () => get(context),
-        reload: () => initialise(instance, true),
-        setEphemeralStyles: styles => (ephemeralStyles = styles),
-        state: store,
-      })
+    if ($appStore.isDevApp) {
+      if (!componentStore.actions.isComponentRegistered(id)) {
+        componentStore.actions.registerInstance(id, {
+          component: instance._component,
+          getSettings: () => cachedSettings,
+          getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
+          getDataContext: () => get(context),
+          reload: () => initialise(instance, true),
+          setEphemeralStyles: styles => (ephemeralStyles = styles),
+          state: store,
+        })
+      }
+      return () => {
+        if (componentStore.actions.isComponentRegistered(id)) {
+          componentStore.actions.unregisterInstance(id)
+        }
+      }
     }
   })
 
+  // Observe changes to context
   onMount(() => context.actions.observeChanges(handleContextChange))
-
-  onDestroy(() => {
-    if (
-      $appStore.isDevApp &&
-      componentStore.actions.isComponentRegistered(id)
-    ) {
-      componentStore.actions.unregisterInstance(id)
-    }
-  })
 </script>
 
 {#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
diff --git a/packages/frontend-core/src/components/grid/cells/DateCell.svelte b/packages/frontend-core/src/components/grid/cells/DateCell.svelte
index 9144f5b769..53b159ee30 100644
--- a/packages/frontend-core/src/components/grid/cells/DateCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DateCell.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { dayjs } from "dayjs"
+  import dayjs from "dayjs"
   import { CoreDatePicker, Icon } from "@budibase/bbui"
   import { onMount } from "svelte"
 

From b24c47d53dfd99acfc652c8430383f5e78e138f8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 15 Sep 2023 08:35:30 +0100
Subject: [PATCH 08/43] Update save row action to account for new context
 structure

---
 .../builder/src/builderStore/dataBinding.js   | 26 +++++-----
 .../ButtonActionEditor/actions/SaveRow.svelte | 49 +++++++------------
 2 files changed, 31 insertions(+), 44 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 194d1b2e39..d6d02ab979 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -199,7 +199,12 @@ export const getComponentBindableProperties = (asset, componentId) => {
  * both global and local bindings, taking into account a component's position
  * in the component tree.
  */
-const getComponentContexts = (asset, componentId, type) => {
+export const getComponentContexts = (
+  asset,
+  componentId,
+  type,
+  options = { includeSelf: false }
+) => {
   if (!asset || !componentId) {
     return []
   }
@@ -245,6 +250,11 @@ const getComponentContexts = (asset, componentId, type) => {
   const localComponents = findComponentPath(asset.props, componentId)
   localComponents.forEach(processContexts("local"))
 
+  // Exclude self if required
+  if (!options?.includeSelf) {
+    delete map[componentId]
+  }
+
   return Object.values(map)
 }
 
@@ -257,17 +267,9 @@ export const getContextProviderComponents = (
   type,
   options = { includeSelf: false }
 ) => {
-  let componentContexts = getComponentContexts(asset, componentId, type)
-
-  // Exclude self if required
-  if (!options?.includeSelf) {
-    componentContexts = componentContexts.filter(
-      entry => entry.component._id !== componentId
-    )
-  }
-
-  // Ignore contexts and just return the component instances
-  return componentContexts.map(entry => entry.component)
+  return getComponentContexts(asset, componentId, type, options).map(
+    entry => entry.component
+  )
 }
 
 /**
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..2657aa75e7 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
@@ -3,8 +3,8 @@
   import { store, currentAsset } from "builderStore"
   import { tables, viewsV2 } from "stores/backend"
   import {
-    getContextProviderComponents,
     getSchemaForDatasourcePlus,
+    getComponentContexts,
   } from "builderStore/dataBinding"
   import SaveFields from "./SaveFields.svelte"
 
@@ -12,18 +12,18 @@
   export let bindings = []
   export let nested
 
-  $: formComponents = getContextProviderComponents(
+  $: formContexts = getComponentContexts(
     $currentAsset,
     $store.selectedComponentId,
     "form",
     { includeSelf: nested }
   )
-  $: schemaComponents = getContextProviderComponents(
+  $: schemaContexts = getComponentContexts(
     $currentAsset,
     $store.selectedComponentId,
     "schema"
   )
-  $: providerOptions = getProviderOptions(formComponents, schemaComponents)
+  $: providerOptions = getProviderOptions(formContexts, schemaContexts)
   $: schemaFields = getSchemaFields(parameters?.tableId)
   $: tableOptions = $tables.list.map(table => ({
     label: table.name,
@@ -35,38 +35,23 @@
   }))
   $: options = [...(tableOptions || []), ...(viewOptions || [])]
 
-  // 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 getProviderOptions = (formContexts, schemaContexts) => {
     const allContexts = formContexts.concat(schemaContexts)
-
-    return allContexts.map(({ component, context }) => {
+    let options = []
+    allContexts.forEach(({ component, contexts }) => {
       let runtimeBinding = component._id
-      if (context.suffix) {
-        runtimeBinding += `-${context.suffix}`
-      }
-      return {
-        label: component._instanceName,
-        value: runtimeBinding,
-      }
+      contexts.forEach(context => {
+        if (context.suffix) {
+          runtimeBinding += `-${context.suffix}`
+        }
+        options.push({
+          label: component._instanceName,
+          value: runtimeBinding,
+        })
+      })
     })
+    return options
   }
 
   const getSchemaFields = resourceId => {

From b36b061bb2c01a6387c22a8b6e561983f90812c5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 15 Sep 2023 08:40:22 +0100
Subject: [PATCH 09/43] Update duplicate row action to use new context
 structure

---
 .../actions/DuplicateRow.svelte               | 58 ++++++++-----------
 1 file changed, 23 insertions(+), 35 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
index 18711497ff..f74ed04b38 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
@@ -3,7 +3,7 @@
   import { store, currentAsset } from "builderStore"
   import { tables, viewsV2 } from "stores/backend"
   import {
-    getContextProviderComponents,
+    getComponentContexts,
     getSchemaForDatasourcePlus,
   } from "builderStore/dataBinding"
   import SaveFields from "./SaveFields.svelte"
@@ -11,18 +11,18 @@
   export let parameters
   export let bindings = []
 
-  $: formComponents = getContextProviderComponents(
+  $: formContexts = getComponentContexts(
     $currentAsset,
     $store.selectedComponentId,
     "form"
   )
-  $: schemaComponents = getContextProviderComponents(
+  $: schemaContexts = getComponentContexts(
     $currentAsset,
     $store.selectedComponentId,
     "schema"
   )
-  $: providerOptions = getProviderOptions(formComponents, schemaComponents)
-  $: schemaFields = getSchemaFields($currentAsset, parameters?.tableId)
+  $: providerOptions = getProviderOptions(formContexts, schemaContexts)
+  $: schemaFields = getSchemaFields(parameters?.tableId)
   $: tableOptions = $tables.list.map(table => ({
     label: table.name,
     resourceId: table._id,
@@ -33,44 +33,32 @@
   }))
   $: options = [...(tableOptions || []), ...(viewOptions || [])]
 
-  // 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 getProviderOptions = (formContexts, schemaContexts) => {
     const allContexts = formContexts.concat(schemaContexts)
-
-    return allContexts.map(({ component, context }) => {
+    let options = []
+    allContexts.forEach(({ component, contexts }) => {
       let runtimeBinding = component._id
-      if (context.suffix) {
-        runtimeBinding += `-${context.suffix}`
-      }
-      return {
-        label: component._instanceName,
-        value: runtimeBinding,
-      }
+      contexts.forEach(context => {
+        if (context.suffix) {
+          runtimeBinding += `-${context.suffix}`
+        }
+        options.push({
+          label: component._instanceName,
+          value: runtimeBinding,
+        })
+      })
     })
+    return options
   }
 
-  const getSchemaFields = (asset, tableId) => {
-    const { schema } = getSchemaForDatasourcePlus(tableId)
+  const getSchemaFields = resourceId => {
+    let { schema } = getSchemaForDatasourcePlus(resourceId)
+
+    // Since we're duplicating, we don't want to allow changing the ID or rev
     delete schema._id
     delete schema._rev
+
     return Object.values(schema || {})
   }
 

From 0d0d96f5da8092c28d3d4010912a119cbd4f0808 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 15 Sep 2023 08:46:35 +0100
Subject: [PATCH 10/43] Remove last usage of legacy context util and update
 data providers to be able to use any data providers on the screen

---
 .../builder/src/builderStore/componentUtils.js   |  2 +-
 packages/builder/src/builderStore/dataBinding.js | 14 --------------
 .../settings/controls/DataSourceSelect.svelte    | 16 +++++++++-------
 3 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/builderStore/componentUtils.js b/packages/builder/src/builderStore/componentUtils.js
index da27a43c7a..363d61cf66 100644
--- a/packages/builder/src/builderStore/componentUtils.js
+++ b/packages/builder/src/builderStore/componentUtils.js
@@ -97,7 +97,7 @@ export const findAllComponents = rootComponent => {
 }
 
 /**
- * Finds the closes parent component which matches certain criteria
+ * Finds the closest parent component which matches certain criteria
  */
 export const findClosestMatchingComponent = (
   rootComponent,
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index d6d02ab979..44a690f26c 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -258,20 +258,6 @@ export const getComponentContexts = (
   return Object.values(map)
 }
 
-/**
- * Gets all data provider components above a component.
- */
-export const getContextProviderComponents = (
-  asset,
-  componentId,
-  type,
-  options = { includeSelf: false }
-) => {
-  return getComponentContexts(asset, componentId, type, options).map(
-    entry => entry.component
-  )
-}
-
 /**
  * Gets all data provider components above a component.
  */
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index d70929469a..aba5af00a5 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getContextProviderComponents } from "builderStore/dataBinding"
+  import { getComponentContexts } from "builderStore/dataBinding"
   import {
     Button,
     Popover,
@@ -22,6 +22,7 @@
   import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
+  import { findAllComponents } from "builderStore/componentUtils"
 
   export let value = {}
   export let otherSources
@@ -60,12 +61,13 @@
       ...query,
       type: "query",
     }))
-  $: contextProviders = getContextProviderComponents(
-    $currentAsset,
-    $store.selectedComponentId
-  )
-  $: dataProviders = contextProviders
-    .filter(component => component._component?.endsWith("/dataprovider"))
+  $: dataProviders = findAllComponents($currentAsset.props)
+    .filter(component => {
+      return (
+        component._component?.endsWith("/dataprovider") &&
+        component._id !== $store.selectedComponentId
+      )
+    })
     .map(provider => ({
       label: provider._instanceName,
       name: provider._instanceName,

From 429f2e0c5fb9f48371d4d16943217034776b2216 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 15 Sep 2023 08:52:46 +0100
Subject: [PATCH 11/43] Add comments to some data binding functions

---
 .../builder/src/builderStore/dataBinding.js   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 44a690f26c..c0e8109252 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -97,6 +97,9 @@ export const getAuthBindings = () => {
   return bindings
 }
 
+/**
+ * Gets all bindings for environment variables
+ */
 export const getEnvironmentBindings = () => {
   let envVars = get(environment).variables
   return envVars.map(variable => {
@@ -125,26 +128,22 @@ export const toBindingsArray = (valueMap, prefix, category) => {
     if (!binding) {
       return acc
     }
-
     let config = {
       type: "context",
       runtimeBinding: binding,
       readableBinding: `${prefix}.${binding}`,
       icon: "Brackets",
     }
-
     if (category) {
       config.category = category
     }
-
     acc.push(config)
-
     return acc
   }, [])
 }
 
 /**
- * Utility - coverting a map of readable bindings to runtime
+ * Utility to covert a map of readable bindings to runtime
  */
 export const readableToRuntimeMap = (bindings, ctx) => {
   if (!bindings || !ctx) {
@@ -333,6 +332,9 @@ const getContextBindings = (asset, componentId) => {
     .flat()
 }
 
+/**
+ * Generates a set of bindings for a given component context
+ */
 const generateComponentContextBindings = (asset, componentContext) => {
   const { component, definition, contexts } = componentContext
   if (!component || !definition || !contexts?.length) {
@@ -577,6 +579,7 @@ const getDeviceBindings = () => {
 
 /**
  * Gets all selected rows bindings for tables in the current asset.
+ * TODO: remove in future because we don't need a separate store for this
  */
 const getSelectedRowsBindings = asset => {
   let bindings = []
@@ -619,6 +622,9 @@ const getSelectedRowsBindings = asset => {
   return bindings
 }
 
+/**
+ * Generates a state binding for a certain key name
+ */
 export const makeStateBinding = key => {
   return {
     type: "context",
@@ -673,6 +679,9 @@ const getUrlBindings = asset => {
   return urlParamBindings.concat([queryParamsBinding])
 }
 
+/**
+ * Generates all bindings for role IDs
+ */
 const getRoleBindings = () => {
   return (get(rolesStore) || []).map(role => {
     return {

From 3839e26758bdc4e090d4d514a1c5fc1cb8c5f908 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 15 Sep 2023 09:06:40 +0100
Subject: [PATCH 12/43] Make all actions globally aware in component settings

---
 .../builder/src/builderStore/dataBinding.js     | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index c0e8109252..5138b21479 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -261,17 +261,16 @@ export const getComponentContexts = (
  * Gets all data provider components above a component.
  */
 export const getActionProviderComponents = (asset, componentId, actionType) => {
-  if (!asset || !componentId) {
+  if (!asset) {
     return []
   }
-
-  // Get the component tree leading up to this component, ignoring the component
-  // itself
-  const path = findComponentPath(asset.props, componentId)
-  path.pop()
-
-  // Filter by only data provider components
-  return path.filter(component => {
+  const components = findAllComponents(asset.props)
+  return components.filter(component => {
+    // Ignore ourselves
+    if (componentId && component._id === componentId) {
+      return false
+    }
+    // Find components when expose this action
     const def = store.actions.components.getDefinition(component._component)
     return def?.actions?.includes(actionType)
   })

From f78cc26a684e8cd7b1bcb4fe84762e2c64b5f623 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 15 Sep 2023 11:52:35 +0100
Subject: [PATCH 13/43] Integrate actions into new global context and greatly
 improve performance by only enriching when required

---
 .../client/src/components/Component.svelte    |  45 ++++--
 packages/client/src/utils/buttonActions.js    | 130 ++++++++----------
 2 files changed, 89 insertions(+), 86 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 8c7d65bd1c..3ac48146b3 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -35,6 +35,10 @@
     findHBSBlocks,
     isJSBinding,
   } from "@budibase/string-templates"
+  import {
+    getActionContextKey,
+    getActionDependentContextKeys,
+  } from "../utils/buttonActions.js"
 
   export let instance = {}
   export let isLayout = false
@@ -165,9 +169,6 @@
       hasMissingRequiredSettings)
   $: emptyState = empty && showEmptyState
 
-  // Enrich component settings
-  // $: enrichComponentSettings($context, settingsDefinitionMap)
-
   // Evaluate conditional UI settings and store any component setting changes
   // which need to be made
   $: evaluateConditions(conditions)
@@ -296,18 +297,42 @@
       }
     })
 
+    // The known context key map is built up at runtime, as changes to keys are
+    // encountered. We manually seed this to the required action keys as these
+    // are not encountered at runtime and so need computed in advance.
+    knownContextKeyMap = generateActionKeyMap(instance, settingsDefinition)
+    bindingString = bindings.join(" ")
+
     // Run any migrations
     runMigrations(instance, settingsDefinition)
 
     // Force an initial enrichment of the new settings
-    enrichComponentSettings(get(context), settingsDefinitionMap, {
-      force: true,
-    })
-    bindingString = bindings.join(" ")
-    knownContextKeyMap = {}
+    enrichComponentSettings(get(context), settingsDefinitionMap)
+  }
 
-    // Force an initial enrichment of the new settings
-    enrichComponentSettings($context, settingsDefinitionMap)
+  // Extracts a map of all context keys which are required by action settings
+  // to provide the functions to evaluate at runtime. This needs done manually
+  // as the action definitions themselves do not specify bindings for action
+  // keys, meaning we cannot do this while doing the other normal bindings.
+  const generateActionKeyMap = (instance, settingsDefinition) => {
+    let map = {}
+    settingsDefinition.forEach(setting => {
+      if (setting.type === "event") {
+        instance[setting.key]?.forEach(action => {
+          // We depend on the actual action key
+          const actionKey = getActionContextKey(action)
+          if (actionKey) {
+            map[actionKey] = true
+          }
+
+          // We also depend on any manually declared context keys
+          getActionDependentContextKeys(action)?.forEach(key => {
+            map[key] = true
+          })
+        })
+      }
+    })
+    return map
   }
 
   const runMigrations = (instance, settingsDefinition) => {
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 18d6b3de3c..cec47dad35 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -17,6 +17,54 @@ import { ActionTypes } from "constants"
 import { enrichDataBindings } from "./enrichDataBinding"
 import { Helpers } from "@budibase/bbui"
 
+// Default action handler, which extracts an action from context that was
+// provided by another component and executes it with all action parameters
+const contextActionHandler = async (action, context) => {
+  const key = getActionContextKey(action)
+  const fn = context[key]
+  if (fn) {
+    return await fn(action.parameters)
+  }
+}
+
+// Generates the context key, which is the key that this action depends on in
+// context to provide the function it will run. This is broken out as a util
+// because we reuse this inside the core Component.svelte file to determine
+// what the required action context keys are for all action settings.
+export const getActionContextKey = action => {
+  const type = action?.["##eventHandlerType"]
+  const key = (componentId, type) => `${componentId}_${type}`
+  switch (type) {
+    case "Scroll To Field":
+      return key(action.parameters.componentId, ActionTypes.ScrollTo)
+    case "Update Field Value":
+      return key(action.parameters.componentId, ActionTypes.UpdateFieldValue)
+    case "Validate Form":
+      return key(action.parameters.componentId, ActionTypes.ValidateForm)
+    case "Refresh Data Provider":
+      return key(action.parameters.componentId, ActionTypes.RefreshDatasource)
+    case "Clear Form":
+      return key(action.parameters.componentId, ActionTypes.ClearForm)
+    case "Change Form Step":
+      return key(action.parameters.componentId, ActionTypes.ChangeFormStep)
+    default:
+      return null
+  }
+}
+
+// If button actions depend on context, they must declare which keys they need
+export const getActionDependentContextKeys = action => {
+  const type = action?.["##eventHandlerType"]
+  switch (type) {
+    case "Save Row":
+    case "Duplicate Row":
+      if (action.parameters?.providerId) {
+        return [action.parameters.providerId]
+      }
+  }
+  return []
+}
+
 const saveRowHandler = async (action, context) => {
   const { fields, providerId, tableId, notificationOverride } =
     action.parameters
@@ -189,17 +237,6 @@ const navigationHandler = action => {
   routeStore.actions.navigate(url, peek, externalNewTab)
 }
 
-const scrollHandler = async (action, context) => {
-  return await executeActionHandler(
-    context,
-    action.parameters.componentId,
-    ActionTypes.ScrollTo,
-    {
-      field: action.parameters.field,
-    }
-  )
-}
-
 const queryExecutionHandler = async action => {
   const { datasourceId, queryId, queryParams, notificationOverride } =
     action.parameters
@@ -235,47 +272,6 @@ const queryExecutionHandler = async action => {
   }
 }
 
-const executeActionHandler = async (
-  context,
-  componentId,
-  actionType,
-  params
-) => {
-  const fn = context[`${componentId}_${actionType}`]
-  if (fn) {
-    return await fn(params)
-  }
-}
-
-const updateFieldValueHandler = async (action, context) => {
-  return await executeActionHandler(
-    context,
-    action.parameters.componentId,
-    ActionTypes.UpdateFieldValue,
-    {
-      type: action.parameters.type,
-      field: action.parameters.field,
-      value: action.parameters.value,
-    }
-  )
-}
-
-const validateFormHandler = async (action, context) => {
-  return await executeActionHandler(
-    context,
-    action.parameters.componentId,
-    ActionTypes.ValidateForm
-  )
-}
-
-const refreshDataProviderHandler = async (action, context) => {
-  return await executeActionHandler(
-    context,
-    action.parameters.componentId,
-    ActionTypes.RefreshDatasource
-  )
-}
-
 const logoutHandler = async action => {
   await authStore.actions.logOut()
   let redirectUrl = "/builder/auth/login"
@@ -292,23 +288,6 @@ const logoutHandler = async action => {
   }
 }
 
-const clearFormHandler = async (action, context) => {
-  return await executeActionHandler(
-    context,
-    action.parameters.componentId,
-    ActionTypes.ClearForm
-  )
-}
-
-const changeFormStepHandler = async (action, context) => {
-  return await executeActionHandler(
-    context,
-    action.parameters.componentId,
-    ActionTypes.ChangeFormStep,
-    action.parameters
-  )
-}
-
 const closeScreenModalHandler = action => {
   let url
   if (action?.parameters) {
@@ -416,16 +395,10 @@ const handlerMap = {
   ["Duplicate Row"]: duplicateRowHandler,
   ["Delete Row"]: deleteRowHandler,
   ["Navigate To"]: navigationHandler,
-  ["Scroll To Field"]: scrollHandler,
   ["Execute Query"]: queryExecutionHandler,
   ["Trigger Automation"]: triggerAutomationHandler,
-  ["Validate Form"]: validateFormHandler,
-  ["Update Field Value"]: updateFieldValueHandler,
-  ["Refresh Data Provider"]: refreshDataProviderHandler,
   ["Log Out"]: logoutHandler,
-  ["Clear Form"]: clearFormHandler,
   ["Close Screen Modal"]: closeScreenModalHandler,
-  ["Change Form Step"]: changeFormStepHandler,
   ["Update State"]: updateStateHandler,
   ["Upload File to S3"]: s3UploadHandler,
   ["Export Data"]: exportDataHandler,
@@ -460,7 +433,12 @@ export const enrichButtonActions = (actions, context) => {
     return actions
   }
 
-  const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
+  // Get handlers for each action. If no bespoke handler is configured, fall
+  // back to simply executing this action from context.
+  const handlers = actions.map(def => {
+    return handlerMap[def["##eventHandlerType"]] || contextActionHandler
+  })
+
   return async eventContext => {
     // Button context is built up as actions are executed.
     // Inherit any previous button context which may have come from actions

From 917e837ffc1b3c50fba82ff55ef299b4bcf1ba9a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 18 Sep 2023 18:27:58 +0100
Subject: [PATCH 14/43] Make update type forms to work with global bindings

---
 .../client/src/components/Component.svelte    |  1 +
 .../src/components/app/forms/Form.svelte      | 27 ++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 3ac48146b3..d7d6722e1a 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -216,6 +216,7 @@
     errorState,
     parent: id,
     ancestors: [...($component?.ancestors ?? []), instance._component],
+    path: [...($component?.path ?? []), id],
   })
 
   const initialise = (instance, force = false) => {
diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte
index 87883fe4b6..c973ff000d 100644
--- a/packages/client/src/components/app/forms/Form.svelte
+++ b/packages/client/src/components/app/forms/Form.svelte
@@ -20,6 +20,7 @@
   export let editAutoColumns = false
 
   const context = getContext("context")
+  const component = getContext("component")
   const { API, fetchDatasourceSchema } = getContext("sdk")
 
   const getInitialFormStep = () => {
@@ -37,28 +38,36 @@
 
   $: fetchSchema(dataSource)
   $: schemaKey = generateSchemaKey(schema)
-  $: initialValues = getInitialValues(actionType, dataSource, $context)
+  $: initialValues = getInitialValues(
+    actionType,
+    dataSource,
+    $component.path,
+    $context
+  )
   $: resetKey = Helpers.hashString(
     schemaKey + JSON.stringify(initialValues) + disabled
   )
 
   // Returns the closes data context which isn't a built in context
-  const getInitialValues = (type, dataSource, context) => {
+  const getInitialValues = (type, dataSource, path, context) => {
     // Only inherit values for update forms
     if (type !== "Update") {
       return {}
     }
     // Only inherit values for forms targeting internal tables
-    if (!dataSource?.tableId) {
+    const dsType = dataSource?.type
+    if (dsType !== "table" && dsType !== "viewV2") {
       return {}
     }
-    // Don't inherit values representing built in contexts
-    if (["user", "url"].includes(context.closestComponentId)) {
-      return {}
+    // Look up the component tree and find something that is provided by an
+    // ancestor that matches our datasource. This is for backwards compatibility
+    // as previously we could use the "closest" context.
+    for (let id of path.reverse().slice(1)) {
+      if (context[id]?.tableId === dataSource.tableId) {
+        return context[id]
+      }
     }
-    // Always inherit the closest datasource
-    const closestContext = context[`${context.closestComponentId}`] || {}
-    return closestContext || {}
+    return {}
   }
 
   // Fetches the form schema from this form's dataSource

From 3ae5216fd5be78a36f0ffe3c1765af723d576c95 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 18 Sep 2023 19:07:19 +0100
Subject: [PATCH 15/43] Make update forms work with view V2s

---
 .../client/src/components/app/forms/Form.svelte | 13 ++++++++++++-
 packages/client/src/utils/buttonActions.js      | 17 ++++++++++-------
 packages/frontend-core/src/api/rows.js          | 10 ++++++----
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte
index c973ff000d..3845d50748 100644
--- a/packages/client/src/components/app/forms/Form.svelte
+++ b/packages/client/src/components/app/forms/Form.svelte
@@ -63,7 +63,18 @@
     // ancestor that matches our datasource. This is for backwards compatibility
     // as previously we could use the "closest" context.
     for (let id of path.reverse().slice(1)) {
-      if (context[id]?.tableId === dataSource.tableId) {
+      // Check for matching view datasource
+      if (
+        dataSource.type === "viewV2" &&
+        context[id]?._viewId === dataSource.id
+      ) {
+        return context[id]
+      }
+      // Check for matching table datasource
+      if (
+        dataSource.type === "table" &&
+        context[id]?.tableId === dataSource.tableId
+      ) {
         return context[id]
       }
     }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index cec47dad35..87f6bb0170 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -80,20 +80,21 @@ const saveRowHandler = async (action, context) => {
     }
   }
   if (tableId) {
-    payload.tableId = tableId
+    if (tableId.startsWith("view")) {
+      payload._viewId = tableId
+    } else {
+      payload.tableId = tableId
+    }
   }
   try {
     const row = await API.saveRow(payload)
-
     if (!notificationOverride) {
       notificationStore.actions.success("Row saved")
     }
-
     // Refresh related datasources
     await dataSourceStore.actions.invalidateDataSource(tableId, {
       invalidateRelationships: true,
     })
-
     return { row }
   } catch (error) {
     // Abort next actions
@@ -112,7 +113,11 @@ const duplicateRowHandler = async (action, context) => {
       }
     }
     if (tableId) {
-      payload.tableId = tableId
+      if (tableId.startsWith("view")) {
+        payload._viewId = tableId
+      } else {
+        payload.tableId = tableId
+      }
     }
     delete payload._id
     delete payload._rev
@@ -121,12 +126,10 @@ const duplicateRowHandler = async (action, context) => {
       if (!notificationOverride) {
         notificationStore.actions.success("Row saved")
       }
-
       // Refresh related datasources
       await dataSourceStore.actions.invalidateDataSource(tableId, {
         invalidateRelationships: true,
       })
-
       return { row }
     } catch (error) {
       // Abort next actions
diff --git a/packages/frontend-core/src/api/rows.js b/packages/frontend-core/src/api/rows.js
index 475ef0e2a4..79f837e864 100644
--- a/packages/frontend-core/src/api/rows.js
+++ b/packages/frontend-core/src/api/rows.js
@@ -19,11 +19,12 @@ export const buildRowEndpoints = API => ({
    * @param suppressErrors whether or not to suppress error notifications
    */
   saveRow: async (row, suppressErrors = false) => {
-    if (!row?.tableId) {
+    const resourceId = row?._viewId || row?.tableId
+    if (!resourceId) {
       return
     }
     return await API.post({
-      url: `/api/${row._viewId || row.tableId}/rows`,
+      url: `/api/${resourceId}/rows`,
       body: row,
       suppressErrors,
     })
@@ -35,11 +36,12 @@ export const buildRowEndpoints = API => ({
    * @param suppressErrors whether or not to suppress error notifications
    */
   patchRow: async (row, suppressErrors = false) => {
-    if (!row?.tableId && !row?._viewId) {
+    const resourceId = row?._viewId || row?.tableId
+    if (!resourceId) {
       return
     }
     return await API.patch({
-      url: `/api/${row._viewId || row.tableId}/rows`,
+      url: `/api/${resourceId}/rows`,
       body: row,
       suppressErrors,
     })

From 9c7c46fb8adc269b5428b37ee03783fcecc33e87 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 Nov 2023 14:51:05 +0000
Subject: [PATCH 16/43] Update pro

---
 packages/pro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pro b/packages/pro
index 5ed0ee2aca..2cf6f28380 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 5ed0ee2aca9d754d80cd46bae412b24621afa47e
+Subproject commit 2cf6f28380d3ab22128b8a889d622fd5adfa31fc

From 3f40efea5370b3dcdce1d053ec589cb8847e669b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 28 Nov 2023 16:14:21 +0000
Subject: [PATCH 17/43] Merge with master, fix repeater block scope, fix grid
 block global actions

---
 .../builder/src/builderStore/dataBinding.js   |   2 +-
 .../ButtonActionEditor/actions/utils.js       |  66 +++++------
 packages/client/manifest.json                 |   3 +-
 .../src/components/app/GridBlock.svelte       | 106 +++++++++---------
 4 files changed, 85 insertions(+), 92 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 9f6362f0d7..f95c3ecf1b 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -254,7 +254,7 @@ export const getComponentContexts = (
     delete map[componentId]
   }
 
-  return Object.values(map)
+  return Object.values(map).filter(x => x.contexts.length > 0)
 }
 
 /**
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
index 0efe97d7fd..7a0315a2fd 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
@@ -1,5 +1,4 @@
 import { getComponentContexts } from "builderStore/dataBinding"
-import { store } from "builderStore"
 import { capitalise } from "helpers"
 
 // Generates bindings for all components that provider "datasource like"
@@ -8,52 +7,51 @@ import { capitalise } from "helpers"
 // Some examples are saving rows or duplicating rows.
 export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => {
   // Get all form context providers
-  const formComponents = getComponentContexts(asset, componentId, "form", {
-    includeSelf: nested,
-  })
-
+  const formComponentContexts = getComponentContexts(
+    asset,
+    componentId,
+    "form",
+    {
+      includeSelf: nested,
+    }
+  )
   // Get all schema context providers
-  const schemaComponents = getComponentContexts(asset, componentId, "schema", {
-    includeSelf: nested,
-  })
+  const schemaComponentContexts = getComponentContexts(
+    asset,
+    componentId,
+    "schema",
+    {
+      includeSelf: nested,
+    }
+  )
 
-  // Generate contexts for all form providers
-  const formContexts = formComponents.map(component => ({
-    component,
-    context: extractComponentContext(component, "form"),
-  }))
-
-  // Generate contexts for all schema providers
-  const schemaContexts = schemaComponents.map(component => ({
-    component,
-    context: extractComponentContext(component, "schema"),
-  }))
+  console.log(formComponentContexts)
 
   // Check for duplicate contexts by the same component. In this case, attempt
   // to label contexts with their suffixes
-  schemaContexts.forEach(schemaContext => {
+  schemaComponentContexts.forEach(schemaContext => {
     // Check if we have a form context for this component
     const id = schemaContext.component._id
-    const existing = formContexts.find(x => x.component._id === id)
+    const existing = formComponentContexts.find(x => x.component._id === id)
     if (existing) {
-      if (existing.context.suffix) {
-        const suffix = capitalise(existing.context.suffix)
+      if (existing.contexts[0].suffix) {
+        const suffix = capitalise(existing.contexts[0].suffix)
         existing.readableSuffix = ` - ${suffix}`
       }
-      if (schemaContext.context.suffix) {
-        const suffix = capitalise(schemaContext.context.suffix)
+      if (schemaContext.contexts[0].suffix) {
+        const suffix = capitalise(schemaContext.contexts[0].suffix)
         schemaContext.readableSuffix = ` - ${suffix}`
       }
     }
   })
 
   // Generate bindings for all contexts
-  const allContexts = formContexts.concat(schemaContexts)
-  return allContexts.map(({ component, context, readableSuffix }) => {
+  const allContexts = formComponentContexts.concat(schemaComponentContexts)
+  return allContexts.map(({ component, contexts, readableSuffix }) => {
     let readableBinding = component._instanceName
     let runtimeBinding = component._id
-    if (context.suffix) {
-      runtimeBinding += `-${context.suffix}`
+    if (contexts[0].suffix) {
+      runtimeBinding += `-${contexts[0].suffix}`
     }
     if (readableSuffix) {
       readableBinding += readableSuffix
@@ -64,13 +62,3 @@ export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => {
     }
   })
 }
-
-// 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)
-}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 825496d6d0..d2d1c5bd5d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -6003,7 +6003,8 @@
       },
       {
         "type": "schema",
-        "suffix": "repeater"
+        "suffix": "repeater",
+        "scope": "local"
       }
     ]
   },
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 30040bfe9c..0a343cac51 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -19,7 +19,36 @@
   export let onRowClick = null
   export let buttons = null
 
-  // parses columns to fix older formats
+  const context = getContext("context")
+  const component = getContext("component")
+  const {
+    styleable,
+    API,
+    builderStore,
+    notificationStore,
+    enrichButtonActions,
+    ActionTypes,
+    createContextStore,
+    Provider,
+  } = getContext("sdk")
+
+  let grid
+
+  $: columnWhitelist = parsedColumns
+    ?.filter(col => col.active)
+    ?.map(col => col.field)
+  $: schemaOverrides = getSchemaOverrides(parsedColumns)
+  $: enrichedButtons = enrichButtons(buttons)
+  $: parsedColumns = getParsedColumns(columns)
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => grid?.getContext()?.rows.actions.refreshData(),
+      metadata: { dataSource: table },
+    },
+  ]
+
+  // Parses columns to fix older formats
   const getParsedColumns = columns => {
     // If the first element has an active key all elements should be in the new format
     if (columns?.length && columns[0]?.active !== undefined) {
@@ -33,28 +62,6 @@
     }))
   }
 
-  $: parsedColumns = getParsedColumns(columns)
-
-  const context = getContext("context")
-  const component = getContext("component")
-  const {
-    styleable,
-    API,
-    builderStore,
-    notificationStore,
-    enrichButtonActions,
-    ActionTypes,
-    createContextStore,
-  } = getContext("sdk")
-
-  let grid
-
-  $: columnWhitelist = parsedColumns
-    ?.filter(col => col.active)
-    ?.map(col => col.field)
-  $: schemaOverrides = getSchemaOverrides(parsedColumns)
-  $: enrichedButtons = enrichButtons(buttons)
-
   const getSchemaOverrides = columns => {
     let overrides = {}
     columns?.forEach(column => {
@@ -78,11 +85,6 @@
         const id = get(component).id
         const gridContext = createContextStore(context)
         gridContext.actions.provideData(id, row)
-        gridContext.actions.provideAction(
-          id,
-          ActionTypes.RefreshDatasource,
-          () => grid?.getContext()?.rows.actions.refreshData()
-        )
         const fn = enrichButtonActions(settings.onClick, get(gridContext))
         return await fn?.({ row })
       },
@@ -94,29 +96,31 @@
   use:styleable={$component.styles}
   class:in-builder={$builderStore.inBuilder}
 >
-  <Grid
-    bind:this={grid}
-    datasource={table}
-    {API}
-    {stripeRows}
-    {initialFilter}
-    {initialSortColumn}
-    {initialSortOrder}
-    {fixedRowHeight}
-    {columnWhitelist}
-    {schemaOverrides}
-    canAddRows={allowAddRows}
-    canEditRows={allowEditRows}
-    canDeleteRows={allowDeleteRows}
-    canEditColumns={false}
-    canExpandRows={false}
-    canSaveSchema={false}
-    showControls={false}
-    notifySuccess={notificationStore.actions.success}
-    notifyError={notificationStore.actions.error}
-    buttons={enrichedButtons}
-    on:rowclick={e => onRowClick?.({ row: e.detail })}
-  />
+  <Provider {actions}>
+    <Grid
+      bind:this={grid}
+      datasource={table}
+      {API}
+      {stripeRows}
+      {initialFilter}
+      {initialSortColumn}
+      {initialSortOrder}
+      {fixedRowHeight}
+      {columnWhitelist}
+      {schemaOverrides}
+      canAddRows={allowAddRows}
+      canEditRows={allowEditRows}
+      canDeleteRows={allowDeleteRows}
+      canEditColumns={false}
+      canExpandRows={false}
+      canSaveSchema={false}
+      showControls={false}
+      notifySuccess={notificationStore.actions.success}
+      notifyError={notificationStore.actions.error}
+      buttons={enrichedButtons}
+      on:rowclick={e => onRowClick?.({ row: e.detail })}
+    />
+  </Provider>
 </div>
 
 <style>

From b7dbb2a76cf88c75131d5517714ad8cb286ac8e9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 Nov 2023 09:19:21 +0000
Subject: [PATCH 18/43] Remove log and add comments

---
 packages/builder/src/builderStore/dataBinding.js                | 1 +
 .../settings/controls/ButtonActionEditor/actions/utils.js       | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index f95c3ecf1b..b7d9bb82e4 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -254,6 +254,7 @@ export const getComponentContexts = (
     delete map[componentId]
   }
 
+  // Only return components which provide at least 1 matching context
   return Object.values(map).filter(x => x.contexts.length > 0)
 }
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
index 7a0315a2fd..bdcd3a7838 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
@@ -25,8 +25,6 @@ export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => {
     }
   )
 
-  console.log(formComponentContexts)
-
   // Check for duplicate contexts by the same component. In this case, attempt
   // to label contexts with their suffixes
   schemaComponentContexts.forEach(schemaContext => {

From 79eb0d6cc55654863fcd28c8722f07c47922f41a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 Nov 2023 09:27:15 +0000
Subject: [PATCH 19/43] Standardise field help text and error icon size and
 colors

---
 packages/bbui/src/Form/Field.svelte           |  8 +++-----
 .../src/components/app/forms/Field.svelte     | 19 +++++++++----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/bbui/src/Form/Field.svelte b/packages/bbui/src/Form/Field.svelte
index 0c031b0235..1770438c3c 100644
--- a/packages/bbui/src/Form/Field.svelte
+++ b/packages/bbui/src/Form/Field.svelte
@@ -51,15 +51,13 @@
     margin-top: var(--spectrum-global-dimension-size-75);
     align-items: center;
   }
-
   .helpText :global(svg) {
-    width: 14px;
-    color: var(--grey-5);
+    width: 13px;
+    color: var(--spectrum-global-color-gray-600);
     margin-right: 6px;
   }
-
   .helpText span {
-    color: var(--grey-7);
+    color: var(--spectrum-global-color-gray-800);
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
 </style>
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 22420b7430..adf5d10df7 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -137,21 +137,23 @@
     width: 100%;
   }
 
+  .error :global(svg),
+  .helpText :global(svg) {
+    width: 13px;
+    margin-right: 6px;
+  }
+
   .error {
     display: flex;
     margin-top: var(--spectrum-global-dimension-size-75);
     align-items: center;
   }
-
   .error :global(svg) {
-    width: 14px;
     color: var(
       --spectrum-semantic-negative-color-default,
       var(--spectrum-global-color-red-500)
     );
-    margin-right: 4px;
   }
-
   .error span {
     color: var(
       --spectrum-semantic-negative-color-default,
@@ -165,17 +167,14 @@
     margin-top: var(--spectrum-global-dimension-size-75);
     align-items: center;
   }
-
   .helpText :global(svg) {
-    width: 14px;
-    color: var(--grey-7);
-    margin-right: 6px;
+    color: var(--spectrum-global-color-gray-600);
   }
-
   .helpText span {
-    color: var(--grey-5);
+    color: var(--spectrum-global-color-gray-800);
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
+
   .spectrum-FieldLabel--right,
   .spectrum-FieldLabel--left {
     padding-right: var(--spectrum-global-dimension-size-200);

From 0220a16bc39eb771b9bb8160e580d16a6e952f4f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Dec 2023 13:27:09 +0000
Subject: [PATCH 20/43] Remove placeholders prompting users to add components
 inside other components

---
 .../components/app/EmptyPlaceholder.svelte    | 20 +------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/packages/client/src/components/app/EmptyPlaceholder.svelte b/packages/client/src/components/app/EmptyPlaceholder.svelte
index 7e9920510a..dde133cd8b 100644
--- a/packages/client/src/components/app/EmptyPlaceholder.svelte
+++ b/packages/client/src/components/app/EmptyPlaceholder.svelte
@@ -10,15 +10,7 @@
 
 {#if $builderStore.inBuilder}
   <div class="component-placeholder">
-    <Icon name="Help" color="var(--spectrum-global-color-blue-600)" />
-    <span
-      class="spectrum-Link"
-      on:click={() => {
-        builderStore.actions.requestAddComponent()
-      }}
-    >
-      Add components inside your {definition?.name || $component.type}
-    </span>
+    {$component.name || definition?.name || "Component"}
   </div>
 {/if}
 
@@ -32,14 +24,4 @@
     font-size: var(--font-size-s);
     gap: var(--spacing-s);
   }
-
-  /* Common styles for all error states to use */
-  .component-placeholder :global(mark) {
-    background-color: var(--spectrum-global-color-gray-400);
-    padding: 0 4px;
-    border-radius: 2px;
-  }
-  .component-placeholder :global(.spectrum-Link) {
-    cursor: pointer;
-  }
 </style>

From 2637a95b3d2e38af7e41a6054358dde49a723b9d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Dec 2023 13:29:10 +0000
Subject: [PATCH 21/43] Remove unused icon

---
 packages/client/src/components/app/EmptyPlaceholder.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/app/EmptyPlaceholder.svelte b/packages/client/src/components/app/EmptyPlaceholder.svelte
index dde133cd8b..2c3596aadf 100644
--- a/packages/client/src/components/app/EmptyPlaceholder.svelte
+++ b/packages/client/src/components/app/EmptyPlaceholder.svelte
@@ -1,6 +1,5 @@
 <script>
   import { getContext } from "svelte"
-  import { Icon } from "@budibase/bbui"
 
   const component = getContext("component")
   const { builderStore, componentStore } = getContext("sdk")

From eac79f754d81e115e2c2ba40623093991ac1abd3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Dec 2023 15:51:06 +0000
Subject: [PATCH 22/43] Update new component naming to provide unique names
 within the context of a screen

---
 packages/builder/src/builderStore/store/frontend.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 32f154a9ae..2e22276e50 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -23,6 +23,7 @@ import {
   getComponentSettings,
   makeComponentUnique,
   findComponentPath,
+  findComponentType,
 } from "../componentUtils"
 import { Helpers } from "@budibase/bbui"
 import { Utils } from "@budibase/frontend-core"
@@ -701,6 +702,16 @@ export const getFrontendStore = () => {
           return null
         }
 
+        // Find all existing components of this type so that we can give this
+        // component a unique name
+        const screen = get(selectedScreen).props
+        const otherComponents = findAllMatchingComponents(
+          screen,
+          x => x._component === definition.component && x._id !== screen._id
+        )
+        let name = definition.friendlyName || definition.name
+        name = `${name} ${otherComponents.length + 1}`
+
         // Generate basic component structure
         let instance = {
           _id: Helpers.uuid(),
@@ -710,7 +721,7 @@ export const getFrontendStore = () => {
             hover: {},
             active: {},
           },
-          _instanceName: `New ${definition.friendlyName || definition.name}`,
+          _instanceName: name,
           ...presetProps,
         }
 

From a459965e75b3ad2e48be5956d0a9d9e571f3a53f Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 5 Jan 2024 12:16:21 +0000
Subject: [PATCH 23/43] Update pro module to latest

---
 packages/pro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pro b/packages/pro
index 2cf6f28380..b1c10c2daf 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 2cf6f28380d3ab22128b8a889d622fd5adfa31fc
+Subproject commit b1c10c2daf808d103724c324256cbff67f33fb46

From 659a01dd82d9b74ef61535b6fc10f4cadd6792ba Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 5 Jan 2024 12:29:54 +0000
Subject: [PATCH 24/43] Lint

---
 packages/builder/src/builderStore/store/frontend.js    | 1 -
 packages/client/src/components/context/Provider.svelte | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index ce15524bd4..dff0957d1b 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -23,7 +23,6 @@ import {
   getComponentSettings,
   makeComponentUnique,
   findComponentPath,
-  findComponentType,
 } from "../componentUtils"
 import { Helpers } from "@budibase/bbui"
 import { Utils } from "@budibase/frontend-core"
diff --git a/packages/client/src/components/context/Provider.svelte b/packages/client/src/components/context/Provider.svelte
index 91fdbded99..1b6a073512 100644
--- a/packages/client/src/components/context/Provider.svelte
+++ b/packages/client/src/components/context/Provider.svelte
@@ -1,9 +1,8 @@
 <script>
   import { getContext, setContext, onDestroy } from "svelte"
   import { dataSourceStore, createContextStore } from "stores"
-  import { ActionTypes } from "constants"
+  import { ActionTypes, ContextScopes } from "constants"
   import { generate } from "shortid"
-  import { ContextScopes } from "constants"
 
   export let data
   export let actions

From bca37f3e75386cbd25243146c0d7c039469facdd Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 8 Jan 2024 16:29:52 +0000
Subject: [PATCH 25/43] Update account portal submodule

---
 packages/account-portal | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/account-portal b/packages/account-portal
index bcd86d9034..b23fb3b179 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit bcd86d9034ba954f013da4c10171bf495ab88189
+Subproject commit b23fb3b17961fb04badd9487913a683fcf26dbe6

From c039b0421dbceac6d7eb2426aaf09ff2a1121acd Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 9 Jan 2024 10:08:58 +0000
Subject: [PATCH 26/43] Trigger a redraw of the form step contents when the
 step index change

---
 .../app/blocks/MultiStepFormblock.svelte      | 131 +++++++++---------
 1 file changed, 67 insertions(+), 64 deletions(-)

diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index b90d0d4c7b..5087e9bdee 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -122,75 +122,78 @@
   }
 </script>
 
-<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
-  <BlockComponent
-    type="form"
-    context="form"
-    props={{
-      dataSource,
-      actionType: actionType === "Create" ? "Create" : "Update",
-      readonly: actionType === "View",
-    }}
-    styles={{
-      normal: {
-        width: "600px",
-        "margin-left": "auto",
-        "margin-right": "auto",
-      },
-    }}
-  >
-    {#each enrichedSteps as step, stepIdx}
-      <BlockComponent
-        type="formstep"
-        props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
-      >
+{#key $currentStep}
+  <FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
+    <BlockComponent
+      type="form"
+      context="form"
+      props={{
+        dataSource,
+        actionType: actionType === "Create" ? "Create" : "Update",
+        readonly: actionType === "View",
+      }}
+      styles={{
+        normal: {
+          width: "600px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+      }}
+    >
+      {`Current step internal ${$currentStep + ""}`}
+      {#each enrichedSteps as step, stepIdx}
         <BlockComponent
-          type="container"
-          props={{
-            gap: "M",
-            direction: "column",
-            hAlign: "stretch",
-            vAlign: "top",
-            size: "shrink",
-          }}
+          type="formstep"
+          props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
         >
-          <BlockComponent type="container" order={0}>
-            <BlockComponent type="heading" props={{ text: step.title }} />
-          </BlockComponent>
-          <BlockComponent type="text" props={{ text: step.desc }} order={1} />
-          <BlockComponent type="container" order={2}>
-            <div
-              class="form-block fields"
-              class:mobile={$context.device.mobile}
-            >
-              {#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
-                {#if getComponentForField(field)}
-                  <BlockComponent
-                    type={getComponentForField(field)}
-                    props={getPropsForField(field)}
-                    order={fieldIdx}
-                    interactive
-                    name={field.field}
-                  />
-                {/if}
-              {/each}
-            </div>
-          </BlockComponent>
           <BlockComponent
-            type="buttongroup"
-            props={{ buttons: step.buttons }}
-            styles={{
-              normal: {
-                "margin-top": "16px",
-              },
+            type="container"
+            props={{
+              gap: "M",
+              direction: "column",
+              hAlign: "stretch",
+              vAlign: "top",
+              size: "shrink",
             }}
-            order={3}
-          />
+          >
+            <BlockComponent type="container" order={0}>
+              <BlockComponent type="heading" props={{ text: step.title }} />
+            </BlockComponent>
+            <BlockComponent type="text" props={{ text: step.desc }} order={1} />
+            <BlockComponent type="container" order={2}>
+              <div
+                class="form-block fields"
+                class:mobile={$context.device.mobile}
+              >
+                {#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
+                  {#if getComponentForField(field)}
+                    <BlockComponent
+                      type={getComponentForField(field)}
+                      props={getPropsForField(field)}
+                      order={fieldIdx}
+                      interactive
+                      name={field.field}
+                    />
+                  {/if}
+                {/each}
+              </div>
+            </BlockComponent>
+            <BlockComponent
+              type="buttongroup"
+              props={{ buttons: step.buttons }}
+              styles={{
+                normal: {
+                  "margin-top": "16px",
+                },
+              }}
+              order={3}
+            />
+          </BlockComponent>
         </BlockComponent>
-      </BlockComponent>
-    {/each}
-  </BlockComponent>
-</FormBlockWrapper>
+      {/each}
+    </BlockComponent>
+  </FormBlockWrapper>
+{/key}
 
 <style>
   .fields {

From eedefbb69db5652bd97db88bdabd75bd9139e81f Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 9 Jan 2024 10:57:39 +0000
Subject: [PATCH 27/43] Remove debugging statement

---
 .../client/src/components/app/blocks/MultiStepFormblock.svelte   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index 5087e9bdee..62a1ce737b 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -140,7 +140,6 @@
         },
       }}
     >
-      {`Current step internal ${$currentStep + ""}`}
       {#each enrichedSteps as step, stepIdx}
         <BlockComponent
           type="formstep"

From 327d9ecb866d590613b759b4324939ee8082f9a4 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 10 Jan 2024 09:40:09 +0000
Subject: [PATCH 28/43] Fixes for rendering issues for Multistep in client and
 builder

---
 .../app/blocks/MultiStepFormblock.svelte      | 137 +++++++++---------
 1 file changed, 69 insertions(+), 68 deletions(-)

diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index 62a1ce737b..d25b399adb 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -1,5 +1,6 @@
 <script>
   import BlockComponent from "components/BlockComponent.svelte"
+  import { Helpers } from "@budibase/bbui"
   import { getContext, setContext } from "svelte"
   import { builderStore } from "stores"
   import { Utils } from "@budibase/frontend-core"
@@ -39,7 +40,7 @@
   let schema
 
   $: fetchSchema(dataSource)
-  $: enrichedSteps = enrichSteps(steps, schema, $component.id)
+  $: enrichedSteps = enrichSteps(steps, schema, $component.id, $currentStep)
   $: updateCurrentStep(enrichedSteps, $builderStore, $component)
 
   const updateCurrentStep = (steps, builderStore, component) => {
@@ -113,6 +114,7 @@
         dataSource,
       })
       return {
+        _stepId: Helpers.uuid(),
         fields: getDefaultFields(fields || [], schema),
         title: title ?? defaultProps.title,
         desc,
@@ -122,77 +124,76 @@
   }
 </script>
 
-{#key $currentStep}
-  <FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
-    <BlockComponent
-      type="form"
-      context="form"
-      props={{
-        dataSource,
-        actionType: actionType === "Create" ? "Create" : "Update",
-        readonly: actionType === "View",
-      }}
-      styles={{
-        normal: {
-          width: "600px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-        },
-      }}
-    >
-      {#each enrichedSteps as step, stepIdx}
+<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
+  <BlockComponent
+    type="form"
+    context="form"
+    props={{
+      dataSource,
+      actionType: actionType === "Create" ? "Create" : "Update",
+      readonly: actionType === "View",
+    }}
+    styles={{
+      normal: {
+        width: "600px",
+        "margin-left": "auto",
+        "margin-right": "auto",
+      },
+    }}
+  >
+    {#each enrichedSteps as step, stepIdx (step._stepId)}
+      <BlockComponent
+        type="formstep"
+        props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
+      >
         <BlockComponent
-          type="formstep"
-          props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
+          type="container"
+          props={{
+            gap: "M",
+            direction: "column",
+            hAlign: "stretch",
+            vAlign: "top",
+            size: "shrink",
+          }}
         >
-          <BlockComponent
-            type="container"
-            props={{
-              gap: "M",
-              direction: "column",
-              hAlign: "stretch",
-              vAlign: "top",
-              size: "shrink",
-            }}
-          >
-            <BlockComponent type="container" order={0}>
-              <BlockComponent type="heading" props={{ text: step.title }} />
-            </BlockComponent>
-            <BlockComponent type="text" props={{ text: step.desc }} order={1} />
-            <BlockComponent type="container" order={2}>
-              <div
-                class="form-block fields"
-                class:mobile={$context.device.mobile}
-              >
-                {#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
-                  {#if getComponentForField(field)}
-                    <BlockComponent
-                      type={getComponentForField(field)}
-                      props={getPropsForField(field)}
-                      order={fieldIdx}
-                      interactive
-                      name={field.field}
-                    />
-                  {/if}
-                {/each}
-              </div>
-            </BlockComponent>
-            <BlockComponent
-              type="buttongroup"
-              props={{ buttons: step.buttons }}
-              styles={{
-                normal: {
-                  "margin-top": "16px",
-                },
-              }}
-              order={3}
-            />
+          <BlockComponent type="container" order={0}>
+            <BlockComponent type="heading" props={{ text: step.title }} />
           </BlockComponent>
+          <BlockComponent type="text" props={{ text: step.desc }} order={1} />
+
+          <BlockComponent type="container" order={2}>
+            <div
+              class="form-block fields"
+              class:mobile={$context.device.mobile}
+            >
+              {#each step.fields as field, fieldIdx (`${field.field || field.name}_${fieldIdx}`)}
+                {#if getComponentForField(field)}
+                  <BlockComponent
+                    type={getComponentForField(field)}
+                    props={getPropsForField(field)}
+                    order={fieldIdx}
+                    interactive
+                    name={field.field}
+                  />
+                {/if}
+              {/each}
+            </div>
+          </BlockComponent>
+          <BlockComponent
+            type="buttongroup"
+            props={{ buttons: step.buttons }}
+            styles={{
+              normal: {
+                "margin-top": "16px",
+              },
+            }}
+            order={3}
+          />
         </BlockComponent>
-      {/each}
-    </BlockComponent>
-  </FormBlockWrapper>
-{/key}
+      </BlockComponent>
+    {/each}
+  </BlockComponent>
+</FormBlockWrapper>
 
 <style>
   .fields {

From f03d49f3d358ca5930444a642ecb5781c12c5b99 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 17 Jan 2024 10:04:40 +0000
Subject: [PATCH 29/43] Fix for Data provider pageNumber binding. Global
 repeater context flag. Add provider context to table block. Expose rows in
 form blocks

---
 packages/client/manifest.json                 | 37 ++++++++++++++++++-
 .../src/components/app/DataProvider.svelte    |  2 +-
 .../client/src/components/app/Repeater.svelte |  6 ++-
 .../components/app/blocks/TableBlock.svelte   |  1 +
 .../app/blocks/form/FormBlockWrapper.svelte   |  1 +
 5 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 09831a56c9..332d61f93d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5602,7 +5602,38 @@
           }
         ]
       }
-    ]
+    ],
+    "context": {
+      "type": "static",
+      "suffix": "provider",
+      "values": [
+        {
+          "label": "Rows",
+          "key": "rows",
+          "type": "array"
+        },
+        {
+          "label": "Extra Info",
+          "key": "info",
+          "type": "string"
+        },
+        {
+          "label": "Rows Length",
+          "key": "rowsLength",
+          "type": "number"
+        },
+        {
+          "label": "Schema",
+          "key": "schema",
+          "type": "object"
+        },
+        {
+          "label": "Page Number",
+          "key": "pageNumber",
+          "type": "number"
+        }
+      ]
+    }
   },
   "cardsblock": {
     "block": true,
@@ -6152,6 +6183,10 @@
         "type": "form",
         "suffix": "form"
       },
+      {
+        "type": "schema",
+        "suffix": "repeater"
+      },
       {
         "type": "static",
         "suffix": "form",
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 342194d5e2..1c6dfb32b7 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -71,7 +71,7 @@
     datasource: dataSource || {},
     schema,
     rowsLength: $fetch.rows.length,
-
+    pageNumber: $fetch.pageNumber + 1,
     // Undocumented properties. These aren't supposed to be used in builder
     // bindings, but are used internally by other components
     id: $component?.id,
diff --git a/packages/client/src/components/app/Repeater.svelte b/packages/client/src/components/app/Repeater.svelte
index 16e1a5363e..95f53a6d01 100644
--- a/packages/client/src/components/app/Repeater.svelte
+++ b/packages/client/src/components/app/Repeater.svelte
@@ -9,6 +9,7 @@
   export let hAlign
   export let vAlign
   export let gap
+  export let nested = false
 
   const { Provider, ContextScopes } = getContext("sdk")
   const component = getContext("component")
@@ -22,7 +23,10 @@
     <Placeholder />
   {:else if rows.length > 0}
     {#each rows as row, index}
-      <Provider data={{ ...row, index }} scope={ContextScopes.Local}>
+      <Provider
+        data={{ ...row, index }}
+        scope={nested ? ContextScopes.Global : ContextScopes.Local}
+      >
         <slot />
       </Provider>
     {/each}
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index 04a7134ca0..75434bdfcb 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@@ -231,6 +231,7 @@
           paginate,
           limit: rowCount,
         }}
+        context="provider"
         order={1}
       >
         <BlockComponent
diff --git a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
index 26767f84b3..666c8dbd73 100644
--- a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
@@ -55,6 +55,7 @@
           noRowsMessage: noRowsMessage || "We couldn't find a row to display",
           direction: "column",
           hAlign: "center",
+          nested: true,
         }}
       >
         <slot />

From cc9a9a3c395e77c8c93a78dd798b60c6fe4ab1c7 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 17 Jan 2024 10:14:39 +0000
Subject: [PATCH 30/43] Upgrade Pro submodule

---
 packages/pro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pro b/packages/pro
index 8c466d6ef2..9d80daaa5b 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 8c466d6ef2a0c09b843ef63276793ab5af2e96f7
+Subproject commit 9d80daaa5b79da68730d6c5f497f629c47a78ef8

From 45fa40496fe3190d6fc6ae30281814879a728f03 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 19 Jan 2024 14:53:39 +0000
Subject: [PATCH 31/43] Added default sizing for buttons in button group,
 swapped Multistep block component style props for consistency

---
 packages/client/manifest.json                 | 34 +++++++++----------
 .../src/components/app/ButtonGroup.svelte     |  2 +-
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 676d161864..2a9bc6f258 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -6098,23 +6098,6 @@
           }
         ]
       },
-      {
-        "tag": "style",
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ],
-        "defaultValue": "spectrum--medium"
-      },
       {
         "tag": "style",
         "type": "select",
@@ -6131,6 +6114,23 @@
           }
         ],
         "defaultValue": "bottom"
+      },
+      {
+        "tag": "style",
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ],
+        "defaultValue": "spectrum--medium"
       }
     ],
     "actions": [
diff --git a/packages/client/src/components/app/ButtonGroup.svelte b/packages/client/src/components/app/ButtonGroup.svelte
index 4954704b1b..3ee703e253 100644
--- a/packages/client/src/components/app/ButtonGroup.svelte
+++ b/packages/client/src/components/app/ButtonGroup.svelte
@@ -29,7 +29,7 @@
           type,
           quiet,
           disabled,
-          size,
+          size: size || "M",
         }}
       />
     {/each}

From 6ad865aa2b3c10e1c0ead6eac164eec2a9af7c82 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 19 Jan 2024 15:08:53 +0000
Subject: [PATCH 32/43] Updated submodules

---
 packages/account-portal | 2 +-
 packages/pro            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/account-portal b/packages/account-portal
index 11469c40d7..05c90ce551 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit 11469c40d73ea58f2aec80c12c1946289b67c6f2
+Subproject commit 05c90ce55144e260da6688335c16783eab79bf96
diff --git a/packages/pro b/packages/pro
index 31f11bcd33..ce7722ed44 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 31f11bcd3323d2105a83ebfdee8facc2900bb879
+Subproject commit ce7722ed4474718596b465dcfd49bef36cab2e42

From 3ab791710cc60b4ff3aec77c2c06a81869ef1a18 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 22 Jan 2024 09:40:56 +0000
Subject: [PATCH 33/43] fix issue where readable binding wasn't working
 correctly with named steps

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index a5a3165aeb..2f9907794e 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -184,7 +184,8 @@
       }
 
       if (
-        (idx === 0 && automation.trigger?.event === "row:update") ||
+        idx === 0 &&
+        automation.trigger?.event === "row:update" &&
         automation.trigger?.event === "row:save"
       ) {
         if (name !== "id" && name !== "revision") return `trigger.row.${name}`

From 64951d6f29c39d054197133e82b251c4735d8e8c Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 22 Jan 2024 09:44:57 +0000
Subject: [PATCH 34/43] PR feedback

---
 packages/client/src/components/app/Repeater.svelte     | 10 ++++------
 .../components/app/blocks/form/FormBlockWrapper.svelte |  3 ++-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/app/Repeater.svelte b/packages/client/src/components/app/Repeater.svelte
index 95f53a6d01..8796078311 100644
--- a/packages/client/src/components/app/Repeater.svelte
+++ b/packages/client/src/components/app/Repeater.svelte
@@ -2,6 +2,7 @@
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
   import Container from "./Container.svelte"
+  import { ContextScopes } from "constants"
 
   export let dataProvider
   export let noRowsMessage
@@ -9,9 +10,9 @@
   export let hAlign
   export let vAlign
   export let gap
-  export let nested = false
+  export let scope = ContextScopes.Local
 
-  const { Provider, ContextScopes } = getContext("sdk")
+  const { Provider } = getContext("sdk")
   const component = getContext("component")
 
   $: rows = dataProvider?.rows ?? []
@@ -23,10 +24,7 @@
     <Placeholder />
   {:else if rows.length > 0}
     {#each rows as row, index}
-      <Provider
-        data={{ ...row, index }}
-        scope={nested ? ContextScopes.Global : ContextScopes.Local}
-      >
+      <Provider data={{ ...row, index }} {scope}>
         <slot />
       </Provider>
     {/each}
diff --git a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
index 666c8dbd73..5b89018fdf 100644
--- a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
@@ -10,6 +10,7 @@
   export let noRowsMessage
 
   const component = getContext("component")
+  const { ContextScopes } = getContext("sdk")
 
   $: providerId = `${$component.id}-provider`
   $: dataProvider = `{{ literal ${safe(providerId)} }}`
@@ -55,7 +56,7 @@
           noRowsMessage: noRowsMessage || "We couldn't find a row to display",
           direction: "column",
           hAlign: "center",
-          nested: true,
+          scope: ContextScopes.Global,
         }}
       >
         <slot />

From bd0202e7b5b74b6139302c8b64aafe77e595faee Mon Sep 17 00:00:00 2001
From: melohagan <101575380+melohagan@users.noreply.github.com>
Date: Mon, 22 Jan 2024 10:25:21 +0000
Subject: [PATCH 35/43] Error deleting datasource on first attempt at deleting
 (#12819)

* Add badge photo to the employee import

* Update revisions from relationships when loop deleting tables
---
 .../server/src/api/controllers/datasource.ts  | 22 ++++++++++++++++++-
 .../src/db/defaultData/employeeImport.ts      | 10 +++++++++
 .../src/db/linkedRows/LinkController.ts       |  2 +-
 .../types/src/documents/app/table/schema.ts   |  1 +
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/server/src/api/controllers/datasource.ts b/packages/server/src/api/controllers/datasource.ts
index a702a8cd84..d70c13f800 100644
--- a/packages/server/src/api/controllers/datasource.ts
+++ b/packages/server/src/api/controllers/datasource.ts
@@ -9,8 +9,11 @@ import {
   CreateDatasourceResponse,
   Datasource,
   DatasourcePlus,
+  Document,
   FetchDatasourceInfoRequest,
   FetchDatasourceInfoResponse,
+  FieldType,
+  RelationshipFieldMetadata,
   SourceName,
   UpdateDatasourceResponse,
   UserCtx,
@@ -218,9 +221,26 @@ async function destroyInternalTablesBySourceId(datasourceId: string) {
     []
   )
 
+  function updateRevisions(deletedLinks: RelationshipFieldMetadata[]) {
+    for (const link of deletedLinks) {
+      datasourceTableDocs.forEach((doc: Document) => {
+        if (doc._id === link.tableId) {
+          doc._rev = link.tableRev
+        }
+      })
+    }
+  }
+
   // Destroy the tables.
   for (const table of datasourceTableDocs) {
-    await sdk.tables.internal.destroy(table)
+    const deleted = await sdk.tables.internal.destroy(table)
+    // Update the revisions of any tables that remain to be deleted
+    const deletedLinks: RelationshipFieldMetadata[] = Object.values(
+      deleted.table.schema
+    )
+      .filter(field => field.type === FieldType.LINK)
+      .map(field => field as RelationshipFieldMetadata)
+    updateRevisions(deletedLinks)
   }
 }
 
diff --git a/packages/server/src/db/defaultData/employeeImport.ts b/packages/server/src/db/defaultData/employeeImport.ts
index d2bab601a0..c3c2082285 100644
--- a/packages/server/src/db/defaultData/employeeImport.ts
+++ b/packages/server/src/db/defaultData/employeeImport.ts
@@ -13,6 +13,7 @@ export const employeeImport = [
     type: "row",
     "Employee Level": ["Senior"],
     "Start Date": "2015-02-12T12:00:00.000",
+    "Badge Photo": [],
   },
   {
     "First Name": "Mandy",
@@ -28,6 +29,7 @@ export const employeeImport = [
     type: "row",
     "Employee Level": ["Senior"],
     "Start Date": "2017-09-10T12:00:00.000",
+    "Badge Photo": [],
   },
   {
     "First Name": "Holly",
@@ -43,6 +45,7 @@ export const employeeImport = [
     type: "row",
     "Employee Level": ["Senior"],
     "Start Date": "2022-02-12T12:00:00.000",
+    "Badge Photo": [],
   },
   {
     "First Name": "Francis",
@@ -58,6 +61,7 @@ export const employeeImport = [
     type: "row",
     "Employee Level": ["Apprentice"],
     "Start Date": "2021-03-10T12:00:00.000",
+    "Badge Photo": [],
   },
   {
     "First Name": "Richard",
@@ -73,6 +77,7 @@ export const employeeImport = [
     type: "row",
     "Employee Level": ["Apprentice"],
     "Start Date": "2020-07-09T12:00:00.000",
+    "Badge Photo": [],
   },
   {
     "First Name": "Donald",
@@ -88,6 +93,7 @@ export const employeeImport = [
     type: "row",
     "Employee Level": ["Junior"],
     "Start Date": "2018-04-13T12:00:00.000",
+    "Badge Photo": [],
   },
   {
     "First Name": "Maria",
@@ -103,6 +109,7 @@ export const employeeImport = [
     type: "row",
     "Employee Level": ["Manager"],
     "Start Date": "2016-05-22T12:00:00.000",
+    "Badge Photo": [],
   },
   {
     "First Name": "Suzy",
@@ -118,6 +125,7 @@ export const employeeImport = [
     type: "row",
     "Employee Level": ["Senior", "Manager"],
     "Start Date": "2019-05-01T12:00:00.000",
+    "Badge Photo": [],
   },
   {
     "First Name": "Patrick",
@@ -133,6 +141,7 @@ export const employeeImport = [
     type: "row",
     "Employee Level": ["Apprentice"],
     "Start Date": "2014-08-30T12:00:00.000",
+    "Badge Photo": [],
   },
   {
     "First Name": "Brayden",
@@ -148,5 +157,6 @@ export const employeeImport = [
     type: "row",
     "Employee Level": ["Contractor"],
     "Start Date": "2022-11-09T12:00:00.000",
+    "Badge Photo": [],
   },
 ]
diff --git a/packages/server/src/db/linkedRows/LinkController.ts b/packages/server/src/db/linkedRows/LinkController.ts
index f52694465f..a7de3ff8d8 100644
--- a/packages/server/src/db/linkedRows/LinkController.ts
+++ b/packages/server/src/db/linkedRows/LinkController.ts
@@ -440,7 +440,7 @@ class LinkController {
         if (field.type === FieldTypes.LINK && field.fieldName) {
           const linkedTable = await this._db.get<Table>(field.tableId)
           delete linkedTable.schema[field.fieldName]
-          await this._db.put(linkedTable)
+          field.tableRev = (await this._db.put(linkedTable)).rev
         }
       } catch (err: any) {
         logging.logWarn(err?.message, err)
diff --git a/packages/types/src/documents/app/table/schema.ts b/packages/types/src/documents/app/table/schema.ts
index 19a7303072..e9eb139ebc 100644
--- a/packages/types/src/documents/app/table/schema.ts
+++ b/packages/types/src/documents/app/table/schema.ts
@@ -21,6 +21,7 @@ interface BaseRelationshipFieldMetadata
   main?: boolean
   fieldName: string
   tableId: string
+  tableRev?: string
   subtype?: AutoFieldSubTypes.CREATED_BY | AutoFieldSubTypes.UPDATED_BY
 }
 

From fa36701f0fdf2f7c1b3290ca847e041d9d567386 Mon Sep 17 00:00:00 2001
From: Conor Webb <126772285+ConorWebb96@users.noreply.github.com>
Date: Mon, 22 Jan 2024 10:54:47 +0000
Subject: [PATCH 36/43] Added function to get correct plan display name
 (#12810)

* Changed minPlan BUSINESS to PREMIUM_PLUS

* Added new helper to display the correct string plan

* Changed ManageAccessModal to use the new helper

* Refactored to use plan title helper, removed title function

* Removed capitalised function from svelte template

* Fixed linting issues

* Ran yarn lint. Fixed linting issues.
---
 .../DataTable/modals/ManageAccessModal.svelte |  5 ++++-
 packages/builder/src/helpers/planTitle.js     | 11 ++++++++++
 .../pages/builder/portal/account/usage.svelte | 21 ++-----------------
 .../server/src/sdk/app/permissions/index.ts   |  2 +-
 4 files changed, 18 insertions(+), 21 deletions(-)
 create mode 100644 packages/builder/src/helpers/planTitle.js

diff --git a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
index 161757c570..09553c1bcd 100644
--- a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
@@ -13,6 +13,7 @@
     Icon,
   } from "@budibase/bbui"
   import { capitalise } from "helpers"
+  import { getFormattedPlanName } from "helpers/planTitle"
   import { get } from "svelte/store"
 
   export let resourceId
@@ -99,7 +100,9 @@
     {#if requiresPlanToModify}
       <span class="lock-tag">
         <Tags>
-          <Tag icon="LockClosed">{capitalise(requiresPlanToModify)}</Tag>
+          <Tag icon="LockClosed"
+            >{getFormattedPlanName(requiresPlanToModify)}</Tag
+          >
         </Tags>
       </span>
     {/if}
diff --git a/packages/builder/src/helpers/planTitle.js b/packages/builder/src/helpers/planTitle.js
new file mode 100644
index 0000000000..dc07e8be2f
--- /dev/null
+++ b/packages/builder/src/helpers/planTitle.js
@@ -0,0 +1,11 @@
+import { PlanType } from "@budibase/types"
+
+export function getFormattedPlanName(userPlanType) {
+  let planName = "Free"
+  if (userPlanType === PlanType.PREMIUM_PLUS) {
+    planName = "Premium"
+  } else if (userPlanType === PlanType.ENTERPRISE_BASIC) {
+    planName = "Enterprise"
+  }
+  return `${planName} Plan`
+}
diff --git a/packages/builder/src/pages/builder/portal/account/usage.svelte b/packages/builder/src/pages/builder/portal/account/usage.svelte
index 9e7c402e91..8eb26c20d6 100644
--- a/packages/builder/src/pages/builder/portal/account/usage.svelte
+++ b/packages/builder/src/pages/builder/portal/account/usage.svelte
@@ -15,7 +15,7 @@
   import { DashCard, Usage } from "components/usage"
   import { PlanModel } from "constants"
   import { sdk } from "@budibase/shared-core"
-  import { PlanType } from "@budibase/types"
+  import { getFormattedPlanName } from "helpers/planTitle"
 
   let staticUsage = []
   let monthlyUsage = []
@@ -100,23 +100,6 @@
     cancelAt = license?.billing?.subscription?.cancelAt
   }
 
-  const capitalise = string => {
-    if (string) {
-      return string.charAt(0).toUpperCase() + string.slice(1)
-    }
-  }
-
-  const planTitle = () => {
-    const planType = license?.plan.type
-    let planName = license?.plan.type
-    if (planType === PlanType.PREMIUM_PLUS) {
-      planName = "Premium"
-    } else if (planType === PlanType.ENTERPRISE_BASIC) {
-      planName = "Enterprise"
-    }
-    return `${capitalise(planName)} Plan`
-  }
-
   const getDaysRemaining = timestamp => {
     if (!timestamp) {
       return
@@ -227,7 +210,7 @@
 
     <DashCard
       description="YOUR CURRENT PLAN"
-      title={planTitle()}
+      title={getFormattedPlanName(license?.plan.type)}
       {primaryActionText}
       primaryAction={showButton ? goToAccountPortal : undefined}
       {textRows}
diff --git a/packages/server/src/sdk/app/permissions/index.ts b/packages/server/src/sdk/app/permissions/index.ts
index b62a7fb459..a6d8f338a1 100644
--- a/packages/server/src/sdk/app/permissions/index.ts
+++ b/packages/server/src/sdk/app/permissions/index.ts
@@ -61,7 +61,7 @@ export async function getInheritablePermissions(
 export async function allowsExplicitPermissions(resourceId: string) {
   if (isViewID(resourceId)) {
     const allowed = await features.isViewPermissionEnabled()
-    const minPlan = !allowed ? PlanType.BUSINESS : undefined
+    const minPlan = !allowed ? PlanType.PREMIUM_PLUS : undefined
 
     return {
       allowed,

From b2c790650be6c45f9eb9e03e6cf5ca36c5d91b1b Mon Sep 17 00:00:00 2001
From: deanhannigan <deanhannigan@gmail.com>
Date: Mon, 22 Jan 2024 11:03:05 +0000
Subject: [PATCH 37/43] Revert "Global bindings"

---
 .../src/builderStore/componentUtils.js        |   9 +-
 .../builder/src/builderStore/dataBinding.js   | 367 ++++++++----------
 .../src/builderStore/store/frontend.js        |  19 +-
 .../ButtonActionEditor/actions/utils.js       |  58 ++-
 .../controls/DataProviderSelect.svelte        |   9 +-
 .../DataSourceSelect/DataSourceSelect.svelte  |  15 +-
 packages/client/manifest.json                 |  72 +---
 .../client/src/components/Component.svelte    | 140 ++-----
 .../src/components/app/DataProvider.svelte    |   2 +-
 .../components/app/EmptyPlaceholder.svelte    |  21 +-
 .../src/components/app/GridBlock.svelte       | 106 +++--
 .../client/src/components/app/Repeater.svelte |   4 +-
 .../app/blocks/MultiStepFormblock.svelte      |   9 +-
 .../components/app/blocks/TableBlock.svelte   |   1 -
 .../app/blocks/form/FormBlockWrapper.svelte   |   2 -
 .../src/components/app/forms/Form.svelte      |  38 +-
 .../src/components/context/Provider.svelte    |  19 +-
 packages/client/src/constants.js              |   5 -
 packages/client/src/sdk.js                    |   3 +-
 packages/client/src/stores/context.js         | 115 ++----
 packages/client/src/utils/buttonActions.js    | 147 ++++---
 packages/client/src/utils/componentProps.js   |  16 +-
 packages/frontend-core/src/api/rows.js        |  10 +-
 23 files changed, 503 insertions(+), 684 deletions(-)

diff --git a/packages/builder/src/builderStore/componentUtils.js b/packages/builder/src/builderStore/componentUtils.js
index 733ce0948e..a7ee3ff351 100644
--- a/packages/builder/src/builderStore/componentUtils.js
+++ b/packages/builder/src/builderStore/componentUtils.js
@@ -92,14 +92,7 @@ export const findAllMatchingComponents = (rootComponent, selector) => {
 }
 
 /**
- * Recurses through the component tree and finds all components.
- */
-export const findAllComponents = rootComponent => {
-  return findAllMatchingComponents(rootComponent, () => true)
-}
-
-/**
- * Finds the closest parent component which matches certain criteria
+ * Finds the closes parent component which matches certain criteria
  */
 export const findClosestMatchingComponent = (
   rootComponent,
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 85d5046d8c..52368a0723 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -1,7 +1,6 @@
 import { cloneDeep } from "lodash/fp"
 import { get } from "svelte/store"
 import {
-  findAllComponents,
   findAllMatchingComponents,
   findComponent,
   findComponentPath,
@@ -103,9 +102,6 @@ export const getAuthBindings = () => {
   return bindings
 }
 
-/**
- * Gets all bindings for environment variables
- */
 export const getEnvironmentBindings = () => {
   let envVars = get(environment).variables
   return envVars.map(variable => {
@@ -134,22 +130,26 @@ export const toBindingsArray = (valueMap, prefix, category) => {
     if (!binding) {
       return acc
     }
+
     let config = {
       type: "context",
       runtimeBinding: binding,
       readableBinding: `${prefix}.${binding}`,
       icon: "Brackets",
     }
+
     if (category) {
       config.category = category
     }
+
     acc.push(config)
+
     return acc
   }, [])
 }
 
 /**
- * Utility to covert a map of readable bindings to runtime
+ * Utility - coverting a map of readable bindings to runtime
  */
 export const readableToRuntimeMap = (bindings, ctx) => {
   if (!bindings || !ctx) {
@@ -162,7 +162,7 @@ export const readableToRuntimeMap = (bindings, ctx) => {
 }
 
 /**
- * Utility to covert a map of runtime bindings to readable bindings
+ * Utility - coverting a map of runtime bindings to readable
  */
 export const runtimeToReadableMap = (bindings, ctx) => {
   if (!bindings || !ctx) {
@@ -188,23 +188,15 @@ export const getComponentBindableProperties = (asset, componentId) => {
   if (!def?.context) {
     return []
   }
-  const contexts = Array.isArray(def.context) ? def.context : [def.context]
 
   // Get the bindings for the component
-  const componentContext = {
-    component,
-    definition: def,
-    contexts,
-  }
-  return generateComponentContextBindings(asset, componentContext)
+  return getProviderContextBindings(asset, component)
 }
 
 /**
- * Gets all component contexts available to a certain component. This handles
- * both global and local bindings, taking into account a component's position
- * in the component tree.
+ * Gets all data provider components above a component.
  */
-export const getComponentContexts = (
+export const getContextProviderComponents = (
   asset,
   componentId,
   type,
@@ -213,55 +205,30 @@ export const getComponentContexts = (
   if (!asset || !componentId) {
     return []
   }
-  let map = {}
 
-  // Processes all contexts exposed by a component
-  const processContexts = scope => component => {
+  // Get the component tree leading up to this component, ignoring the component
+  // itself
+  const path = findComponentPath(asset.props, componentId)
+  if (!options?.includeSelf) {
+    path.pop()
+  }
+
+  // Filter by only data provider components
+  return path.filter(component => {
     const def = store.actions.components.getDefinition(component._component)
     if (!def?.context) {
-      return
+      return false
     }
-    if (!map[component._id]) {
-      map[component._id] = {
-        component,
-        definition: def,
-        contexts: [],
-      }
+
+    // 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]
-    contexts.forEach(context => {
-      // Ensure type matches
-      if (type && context.type !== type) {
-        return
-      }
-      // Ensure scope matches
-      let contextScope = context.scope || "global"
-      if (contextScope !== scope) {
-        return
-      }
-      // Ensure the context is compatible with the component's current settings
-      if (!isContextCompatibleWithComponent(context, component)) {
-        return
-      }
-      map[component._id].contexts.push(context)
-    })
-  }
-
-  // Process all global contexts
-  const allComponents = findAllComponents(asset.props)
-  allComponents.forEach(processContexts("global"))
-
-  // Process all local contexts
-  const localComponents = findComponentPath(asset.props, componentId)
-  localComponents.forEach(processContexts("local"))
-
-  // Exclude self if required
-  if (!options?.includeSelf) {
-    delete map[componentId]
-  }
-
-  // Only return components which provide at least 1 matching context
-  return Object.values(map).filter(x => x.contexts.length > 0)
+    return contexts.find(context => context.type === type) != null
+  })
 }
 
 /**
@@ -273,19 +240,20 @@ export const getActionProviders = (
   actionType,
   options = { includeSelf: false }
 ) => {
-  if (!asset) {
+  if (!asset || !componentId) {
     return []
   }
 
-  // Get all components
-  const components = findAllComponents(asset.props)
+  // Get the component tree leading up to this component, ignoring the component
+  // itself
+  const path = findComponentPath(asset.props, componentId)
+  if (!options?.includeSelf) {
+    path.pop()
+  }
 
   // Find matching contexts and generate bindings
   let providers = []
-  components.forEach(component => {
-    if (!options?.includeSelf && component._id === componentId) {
-      return
-    }
+  path.forEach(component => {
     const def = store.actions.components.getDefinition(component._component)
     const actions = (def?.actions || []).map(action => {
       return typeof action === "string" ? { type: action } : action
@@ -349,135 +317,142 @@ export const getDatasourceForProvider = (asset, component) => {
  * Gets all bindable data properties from component data contexts.
  */
 const getContextBindings = (asset, componentId) => {
-  // Get all available contexts for this component
-  const componentContexts = getComponentContexts(asset, componentId)
+  // Extract any components which provide data contexts
+  const dataProviders = getContextProviderComponents(asset, componentId)
 
-  // Generate bindings for each context
-  return componentContexts
-    .map(componentContext => {
-      return generateComponentContextBindings(asset, componentContext)
-    })
-    .flat()
+  // Generate bindings for all matching components
+  return getProviderContextBindings(asset, dataProviders)
 }
 
 /**
- * Generates a set of bindings for a given component context
+ * Gets the context bindings exposed by a set of data provider components.
  */
-const generateComponentContextBindings = (asset, componentContext) => {
-  const { component, definition, contexts } = componentContext
-  if (!component || !definition || !contexts?.length) {
+const getProviderContextBindings = (asset, dataProviders) => {
+  if (!asset || !dataProviders) {
     return []
   }
 
+  // Ensure providers is an array
+  if (!Array.isArray(dataProviders)) {
+    dataProviders = [dataProviders]
+  }
+
   // Create bindings for each data provider
   let bindings = []
-  contexts.forEach(context => {
-    if (!context?.type) {
-      return
-    }
+  dataProviders.forEach(component => {
+    const def = store.actions.components.getDefinition(component._component)
+    const contexts = Array.isArray(def.context) ? def.context : [def.context]
 
-    let schema
-    let table
-    let readablePrefix
-    let runtimeSuffix = context.suffix
-
-    if (context.type === "form") {
-      // Forms do not need table schemas
-      // Their schemas are built from their component field names
-      schema = buildFormSchema(component, asset)
-      readablePrefix = "Fields"
-    } else if (context.type === "static") {
-      // Static contexts are fully defined by the components
-      schema = {}
-      const values = context.values || []
-      values.forEach(value => {
-        schema[value.key] = {
-          name: value.label,
-          type: value.type || "string",
-        }
-      })
-    } else if (context.type === "schema") {
-      // Schema contexts are generated dynamically depending on their data
-      const datasource = getDatasourceForProvider(asset, component)
-      if (!datasource) {
+    // Create bindings for each context block provided by this data provider
+    contexts.forEach(context => {
+      if (!context?.type) {
         return
       }
-      const info = getSchemaForDatasource(asset, datasource)
-      schema = info.schema
-      table = info.table
 
-      // Determine what to prefix bindings with
-      if (datasource.type === "jsonarray") {
-        // For JSON arrays, use the array name as the readable prefix
-        const split = datasource.label.split(".")
-        readablePrefix = split[split.length - 1]
-      } else if (datasource.type === "viewV2") {
-        // For views, use the view name
-        const view = Object.values(table?.views || {}).find(
-          view => view.id === datasource.id
+      let schema
+      let table
+      let readablePrefix
+      let runtimeSuffix = context.suffix
+
+      if (context.type === "form") {
+        // Forms do not need table schemas
+        // Their schemas are built from their component field names
+        schema = buildFormSchema(component, asset)
+        readablePrefix = "Fields"
+      } else if (context.type === "static") {
+        // Static contexts are fully defined by the components
+        schema = {}
+        const values = context.values || []
+        values.forEach(value => {
+          schema[value.key] = {
+            name: value.label,
+            type: value.type || "string",
+          }
+        })
+      } else if (context.type === "schema") {
+        // Schema contexts are generated dynamically depending on their data
+        const datasource = getDatasourceForProvider(asset, component)
+        if (!datasource) {
+          return
+        }
+        const info = getSchemaForDatasource(asset, datasource)
+        schema = info.schema
+        table = info.table
+
+        // Determine what to prefix bindings with
+        if (datasource.type === "jsonarray") {
+          // For JSON arrays, use the array name as the readable prefix
+          const split = datasource.label.split(".")
+          readablePrefix = split[split.length - 1]
+        } else if (datasource.type === "viewV2") {
+          // For views, use the view name
+          const view = Object.values(table?.views || {}).find(
+            view => view.id === datasource.id
+          )
+          readablePrefix = view?.name
+        } else {
+          // Otherwise use the table name
+          readablePrefix = info.table?.name
+        }
+      }
+      if (!schema) {
+        return
+      }
+
+      const keys = Object.keys(schema).sort()
+
+      // Generate safe unique runtime prefix
+      let providerId = component._id
+      if (runtimeSuffix) {
+        providerId += `-${runtimeSuffix}`
+      }
+
+      if (!filterCategoryByContext(component, context)) {
+        return
+      }
+
+      const safeComponentId = makePropSafe(providerId)
+
+      // Create bindable properties for each schema field
+      keys.forEach(key => {
+        const fieldSchema = schema[key]
+
+        // Make safe runtime binding
+        const safeKey = key.split(".").map(makePropSafe).join(".")
+        const runtimeBinding = `${safeComponentId}.${safeKey}`
+
+        // Optionally use a prefix with readable bindings
+        let readableBinding = component._instanceName
+        if (readablePrefix) {
+          readableBinding += `.${readablePrefix}`
+        }
+        readableBinding += `.${fieldSchema.name || key}`
+
+        const bindingCategory = getComponentBindingCategory(
+          component,
+          context,
+          def
         )
-        readablePrefix = view?.name
-      } else {
-        // Otherwise use the table name
-        readablePrefix = info.table?.name
-      }
-    }
-    if (!schema) {
-      return
-    }
 
-    const keys = Object.keys(schema).sort()
-
-    // Generate safe unique runtime prefix
-    let providerId = component._id
-    if (runtimeSuffix) {
-      providerId += `-${runtimeSuffix}`
-    }
-    const safeComponentId = makePropSafe(providerId)
-
-    // Create bindable properties for each schema field
-    keys.forEach(key => {
-      const fieldSchema = schema[key]
-
-      // Make safe runtime binding
-      const safeKey = key.split(".").map(makePropSafe).join(".")
-      const runtimeBinding = `${safeComponentId}.${safeKey}`
-
-      // Optionally use a prefix with readable bindings
-      let readableBinding = component._instanceName
-      if (readablePrefix) {
-        readableBinding += `.${readablePrefix}`
-      }
-      readableBinding += `.${fieldSchema.name || key}`
-
-      // Determine which category this binding belongs in
-      const bindingCategory = getComponentBindingCategory(
-        component,
-        context,
-        definition
-      )
-
-      // Temporarily append scope for debugging
-      const scope = `[${(context.scope || "global").toUpperCase()}]`
-
-      // Create the binding object
-      bindings.push({
-        type: "context",
-        runtimeBinding,
-        readableBinding: `${scope} ${readableBinding}`,
-        // Field schema and provider are required to construct relationship
-        // datasource options, based on bindable properties
-        fieldSchema,
-        providerId,
-        // Table ID is used by JSON fields to know what table the field is in
-        tableId: table?._id,
-        component: component._component,
-        category: bindingCategory.category,
-        icon: bindingCategory.icon,
-        display: {
-          name: `${scope} ${fieldSchema.name || key}`,
-          type: fieldSchema.type,
-        },
+        // Create the binding object
+        bindings.push({
+          type: "context",
+          runtimeBinding,
+          readableBinding,
+          // Field schema and provider are required to construct relationship
+          // datasource options, based on bindable properties
+          fieldSchema,
+          providerId,
+          // Table ID is used by JSON fields to know what table the field is in
+          tableId: table?._id,
+          component: component._component,
+          category: bindingCategory.category,
+          icon: bindingCategory.icon,
+          display: {
+            name: fieldSchema.name || key,
+            type: fieldSchema.type,
+          },
+        })
       })
     })
   })
@@ -485,38 +460,25 @@ const generateComponentContextBindings = (asset, componentContext) => {
   return bindings
 }
 
-/**
- * Checks if a certain data context is compatible with a certain instance of a
- * configured component.
- */
-const isContextCompatibleWithComponent = (context, component) => {
-  if (!component) {
-    return false
-  }
-  const { _component, actionType } = component
-  const { type } = context
-
-  // Certain types of form blocks only allow certain contexts
+// Exclude a data context based on the component settings
+const filterCategoryByContext = (component, context) => {
+  const { _component } = component
   if (_component.endsWith("formblock")) {
     if (
-      (actionType === "Create" && type === "schema") ||
-      (actionType === "View" && type === "form")
+      (component.actionType === "Create" && context.type === "schema") ||
+      (component.actionType === "View" && context.type === "form")
     ) {
       return false
     }
   }
-
-  // Allow the context by default
   return true
 }
 
 // Enrich binding category information for certain components
 const getComponentBindingCategory = (component, context, def) => {
-  // Default category to component name
   let icon = def.icon
   let category = component._instanceName
 
-  // Form block edge case
   if (component._component.endsWith("formblock")) {
     if (context.type === "form") {
       category = `${component._instanceName} - Fields`
@@ -534,7 +496,7 @@ const getComponentBindingCategory = (component, context, def) => {
 }
 
 /**
- * Gets all bindable properties from the logged-in user.
+ * Gets all bindable properties from the logged in user.
  */
 export const getUserBindings = () => {
   let bindings = []
@@ -604,7 +566,6 @@ const getDeviceBindings = () => {
 
 /**
  * Gets all selected rows bindings for tables in the current asset.
- * TODO: remove in future because we don't need a separate store for this
  */
 const getSelectedRowsBindings = asset => {
   let bindings = []
@@ -647,9 +608,6 @@ const getSelectedRowsBindings = asset => {
   return bindings
 }
 
-/**
- * Generates a state binding for a certain key name
- */
 export const makeStateBinding = key => {
   return {
     type: "context",
@@ -704,9 +662,6 @@ const getUrlBindings = asset => {
   return urlParamBindings.concat([queryParamsBinding])
 }
 
-/**
- * Generates all bindings for role IDs
- */
 const getRoleBindings = () => {
   return (get(rolesStore) || []).map(role => {
     return {
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index ce2cac9781..b05b127b1c 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -709,9 +709,10 @@ export const getFrontendStore = () => {
           else {
             if (setting.type === "dataProvider") {
               // Validate data provider exists, or else clear it
-              const providers = findAllMatchingComponents(
-                screen?.props,
-                component => component._component?.endsWith("/dataprovider")
+              const treeId = parent?._id || component._id
+              const path = findComponentPath(screen?.props, treeId)
+              const providers = path.filter(component =>
+                component._component?.endsWith("/dataprovider")
               )
               // Validate non-empty values
               const valid = providers?.some(dp => value.includes?.(dp._id))
@@ -733,16 +734,6 @@ export const getFrontendStore = () => {
           return null
         }
 
-        // Find all existing components of this type so that we can give this
-        // component a unique name
-        const screen = get(selectedScreen).props
-        const otherComponents = findAllMatchingComponents(
-          screen,
-          x => x._component === definition.component && x._id !== screen._id
-        )
-        let name = definition.friendlyName || definition.name
-        name = `${name} ${otherComponents.length + 1}`
-
         // Generate basic component structure
         let instance = {
           _id: Helpers.uuid(),
@@ -752,7 +743,7 @@ export const getFrontendStore = () => {
             hover: {},
             active: {},
           },
-          _instanceName: name,
+          _instanceName: `New ${definition.friendlyName || definition.name}`,
           ...presetProps,
         }
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
index bdcd3a7838..aa076fdd3e 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
@@ -1,4 +1,5 @@
-import { getComponentContexts } from "builderStore/dataBinding"
+import { getContextProviderComponents } from "builderStore/dataBinding"
+import { store } from "builderStore"
 import { capitalise } from "helpers"
 
 // Generates bindings for all components that provider "datasource like"
@@ -7,49 +8,58 @@ import { capitalise } from "helpers"
 // Some examples are saving rows or duplicating rows.
 export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => {
   // Get all form context providers
-  const formComponentContexts = getComponentContexts(
+  const formComponents = getContextProviderComponents(
     asset,
     componentId,
     "form",
-    {
-      includeSelf: nested,
-    }
+    { includeSelf: nested }
   )
+
   // Get all schema context providers
-  const schemaComponentContexts = getComponentContexts(
+  const schemaComponents = getContextProviderComponents(
     asset,
     componentId,
     "schema",
-    {
-      includeSelf: nested,
-    }
+    { includeSelf: nested }
   )
 
+  // Generate contexts for all form providers
+  const formContexts = formComponents.map(component => ({
+    component,
+    context: extractComponentContext(component, "form"),
+  }))
+
+  // Generate contexts for all schema providers
+  const schemaContexts = schemaComponents.map(component => ({
+    component,
+    context: extractComponentContext(component, "schema"),
+  }))
+
   // Check for duplicate contexts by the same component. In this case, attempt
   // to label contexts with their suffixes
-  schemaComponentContexts.forEach(schemaContext => {
+  schemaContexts.forEach(schemaContext => {
     // Check if we have a form context for this component
     const id = schemaContext.component._id
-    const existing = formComponentContexts.find(x => x.component._id === id)
+    const existing = formContexts.find(x => x.component._id === id)
     if (existing) {
-      if (existing.contexts[0].suffix) {
-        const suffix = capitalise(existing.contexts[0].suffix)
+      if (existing.context.suffix) {
+        const suffix = capitalise(existing.context.suffix)
         existing.readableSuffix = ` - ${suffix}`
       }
-      if (schemaContext.contexts[0].suffix) {
-        const suffix = capitalise(schemaContext.contexts[0].suffix)
+      if (schemaContext.context.suffix) {
+        const suffix = capitalise(schemaContext.context.suffix)
         schemaContext.readableSuffix = ` - ${suffix}`
       }
     }
   })
 
   // Generate bindings for all contexts
-  const allContexts = formComponentContexts.concat(schemaComponentContexts)
-  return allContexts.map(({ component, contexts, readableSuffix }) => {
+  const allContexts = formContexts.concat(schemaContexts)
+  return allContexts.map(({ component, context, readableSuffix }) => {
     let readableBinding = component._instanceName
     let runtimeBinding = component._id
-    if (contexts[0].suffix) {
-      runtimeBinding += `-${contexts[0].suffix}`
+    if (context.suffix) {
+      runtimeBinding += `-${context.suffix}`
     }
     if (readableSuffix) {
       readableBinding += readableSuffix
@@ -60,3 +70,13 @@ export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => {
     }
   })
 }
+
+// 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)
+}
diff --git a/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte b/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte
index 9fd220e798..83255ec325 100644
--- a/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte
@@ -1,16 +1,15 @@
 <script>
   import { Select } from "@budibase/bbui"
   import { makePropSafe } from "@budibase/string-templates"
-  import { currentAsset } from "builderStore"
-  import { findAllMatchingComponents } from "builderStore/componentUtils"
+  import { currentAsset, store } from "builderStore"
+  import { findComponentPath } from "builderStore/componentUtils"
 
   export let value
 
   const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
 
-  $: providers = findAllMatchingComponents($currentAsset?.props, c =>
-    c._component?.endsWith("/dataprovider")
-  )
+  $: path = findComponentPath($currentAsset?.props, $store.selectedComponentId)
+  $: providers = path.filter(c => c._component?.endsWith("/dataprovider"))
 </script>
 
 <Select
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
index 3eb69e9a3b..25aa37365c 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
@@ -1,5 +1,6 @@
 <script>
   import {
+    getContextProviderComponents,
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
@@ -29,7 +30,6 @@
   import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
-  import { findAllComponents } from "builderStore/componentUtils"
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import DataSourceCategory from "components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
   import { API } from "api"
@@ -75,13 +75,12 @@
       ...query,
       type: "query",
     }))
-  $: dataProviders = findAllComponents($currentAsset.props)
-    .filter(component => {
-      return (
-        component._component?.endsWith("/dataprovider") &&
-        component._id !== $store.selectedComponentId
-      )
-    })
+  $: contextProviders = getContextProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId
+  )
+  $: dataProviders = contextProviders
+    .filter(component => component._component?.endsWith("/dataprovider"))
     .map(provider => ({
       label: provider._instanceName,
       name: provider._instanceName,
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index fe95f5536c..2a9bc6f258 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -573,6 +573,7 @@
     "description": "A configurable data list that attaches to your backend tables.",
     "icon": "JourneyData",
     "illegalChildren": ["section"],
+    "requiredAncestors": ["dataprovider"],
     "hasChildren": true,
     "size": {
       "width": 400,
@@ -710,12 +711,10 @@
     ],
     "context": [
       {
-        "type": "schema",
-        "scope": "local"
+        "type": "schema"
       },
       {
         "type": "static",
-        "scope": "local",
         "values": [
           {
             "label": "Row index",
@@ -1565,6 +1564,7 @@
     "name": "Bar Chart",
     "description": "Bar chart",
     "icon": "GraphBarVertical",
+    "requiredAncestors": ["dataprovider"],
     "size": {
       "width": 600,
       "height": 400
@@ -1727,6 +1727,7 @@
       "width": 600,
       "height": 400
     },
+    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -1880,6 +1881,7 @@
       "width": 600,
       "height": 400
     },
+    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -2045,6 +2047,7 @@
       "width": 600,
       "height": 400
     },
+    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -2174,6 +2177,7 @@
       "width": 600,
       "height": 400
     },
+    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -2303,6 +2307,7 @@
       "width": 600,
       "height": 400
     },
+    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -4076,6 +4081,7 @@
       "width": 400,
       "height": 320
     },
+    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "dataProvider",
@@ -4631,6 +4637,7 @@
     "name": "Table",
     "icon": "Table",
     "illegalChildren": ["section"],
+    "requiredAncestors": ["dataprovider"],
     "hasChildren": true,
     "showEmptyState": false,
     "size": {
@@ -4721,6 +4728,7 @@
     "name": "Date Range",
     "icon": "Calendar",
     "styles": ["size"],
+    "requiredAncestors": ["dataprovider"],
     "hasChildren": false,
     "size": {
       "width": 200,
@@ -4828,6 +4836,7 @@
       "width": 100,
       "height": 35
     },
+    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "dataProvider",
@@ -5602,38 +5611,7 @@
           }
         ]
       }
-    ],
-    "context": {
-      "type": "static",
-      "suffix": "provider",
-      "values": [
-        {
-          "label": "Rows",
-          "key": "rows",
-          "type": "array"
-        },
-        {
-          "label": "Extra Info",
-          "key": "info",
-          "type": "string"
-        },
-        {
-          "label": "Rows Length",
-          "key": "rowsLength",
-          "type": "number"
-        },
-        {
-          "label": "Schema",
-          "key": "schema",
-          "type": "object"
-        },
-        {
-          "label": "Page Number",
-          "key": "pageNumber",
-          "type": "number"
-        }
-      ]
-    }
+    ]
   },
   "cardsblock": {
     "block": true,
@@ -6036,8 +6014,7 @@
       },
       {
         "type": "schema",
-        "suffix": "repeater",
-        "scope": "local"
+        "suffix": "repeater"
       }
     ]
   },
@@ -6183,10 +6160,6 @@
         "type": "form",
         "suffix": "form"
       },
-      {
-        "type": "schema",
-        "suffix": "repeater"
-      },
       {
         "type": "static",
         "suffix": "form",
@@ -6503,23 +6476,6 @@
       "suffix": "repeater"
     }
   },
-  "grid": {
-    "name": "Grid",
-    "icon": "ViewGrid",
-    "hasChildren": true,
-    "settings": [
-      {
-        "type": "number",
-        "key": "cols",
-        "label": "Columns"
-      },
-      {
-        "type": "number",
-        "key": "rows",
-        "label": "Rows"
-      }
-    ]
-  },
   "gridblock": {
     "name": "Grid Block",
     "icon": "Table",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6694022b98..63ce8dc152 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <script>
-  import { getContext, setContext, onMount } from "svelte"
+  import { getContext, setContext, onMount, onDestroy } from "svelte"
   import { writable, get } from "svelte/store"
   import {
     enrichProps,
@@ -30,15 +30,6 @@
   import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
   import ComponentErrorState from "components/error-states/ComponentErrorState.svelte"
   import { BudibasePrefix } from "../stores/components.js"
-  import {
-    decodeJSBinding,
-    findHBSBlocks,
-    isJSBinding,
-  } from "@budibase/string-templates"
-  import {
-    getActionContextKey,
-    getActionDependentContextKeys,
-  } from "../utils/buttonActions.js"
 
   export let instance = {}
   export let isLayout = false
@@ -90,6 +81,7 @@
 
   // Keep track of stringified representations of context and instance
   // to avoid enriching bindings as much as possible
+  let lastContextKey
   let lastInstanceKey
 
   // Visibility flag used by conditional UI
@@ -106,13 +98,6 @@
   // We clear these whenever a new instance is received.
   let ephemeralStyles
 
-  // Single string of all HBS blocks, used to check if we use a certain binding
-  // or not
-  let bindingString = ""
-
-  // List of context keys which we use inside bindings
-  let knownContextKeyMap = {}
-
   // Set up initial state for each new component instance
   $: initialise(instance)
 
@@ -170,6 +155,9 @@
       hasMissingRequiredSettings)
   $: emptyState = empty && showEmptyState
 
+  // Enrich component settings
+  $: enrichComponentSettings($context, settingsDefinitionMap)
+
   // Evaluate conditional UI settings and store any component setting changes
   // which need to be made
   $: evaluateConditions(conditions)
@@ -218,7 +206,6 @@
     errorState,
     parent: id,
     ancestors: [...($component?.ancestors ?? []), instance._component],
-    path: [...($component?.path ?? []), id],
   })
 
   const initialise = (instance, force = false) => {
@@ -227,8 +214,7 @@
     }
 
     // Ensure we're processing a new instance
-    const stringifiedInstance = JSON.stringify(instance)
-    const instanceKey = Helpers.hashString(stringifiedInstance)
+    const instanceKey = Helpers.hashString(JSON.stringify(instance))
     if (instanceKey === lastInstanceKey && !force) {
       return
     } else {
@@ -288,54 +274,13 @@
       return missing
     })
 
-    // When considering bindings we can ignore children, so we remove that
-    // before storing the reference stringified version
-    const noChildren = JSON.stringify({ ...instance, _children: null })
-    const bindings = findHBSBlocks(noChildren).map(binding => {
-      let sanitizedBinding = binding.replace(/\\"/g, '"')
-      if (isJSBinding(sanitizedBinding)) {
-        return decodeJSBinding(sanitizedBinding)
-      } else {
-        return sanitizedBinding
-      }
-    })
-
-    // The known context key map is built up at runtime, as changes to keys are
-    // encountered. We manually seed this to the required action keys as these
-    // are not encountered at runtime and so need computed in advance.
-    knownContextKeyMap = generateActionKeyMap(instance, settingsDefinition)
-    bindingString = bindings.join(" ")
-
     // Run any migrations
     runMigrations(instance, settingsDefinition)
 
     // Force an initial enrichment of the new settings
-    enrichComponentSettings(get(context), settingsDefinitionMap)
-  }
-
-  // Extracts a map of all context keys which are required by action settings
-  // to provide the functions to evaluate at runtime. This needs done manually
-  // as the action definitions themselves do not specify bindings for action
-  // keys, meaning we cannot do this while doing the other normal bindings.
-  const generateActionKeyMap = (instance, settingsDefinition) => {
-    let map = {}
-    settingsDefinition.forEach(setting => {
-      if (setting.type === "event") {
-        instance[setting.key]?.forEach(action => {
-          // We depend on the actual action key
-          const actionKey = getActionContextKey(action)
-          if (actionKey) {
-            map[actionKey] = true
-          }
-
-          // We also depend on any manually declared context keys
-          getActionDependentContextKeys(action)?.forEach(key => {
-            map[key] = true
-          })
-        })
-      }
+    enrichComponentSettings(get(context), settingsDefinitionMap, {
+      force: true,
     })
-    return map
   }
 
   const runMigrations = (instance, settingsDefinition) => {
@@ -436,7 +381,17 @@
   }
 
   // Enriches any string component props using handlebars
-  const enrichComponentSettings = (context, settingsDefinitionMap) => {
+  const enrichComponentSettings = (
+    context,
+    settingsDefinitionMap,
+    options = { force: false }
+  ) => {
+    const contextChanged = context.key !== lastContextKey
+    if (!contextChanged && !options?.force) {
+      return
+    }
+    lastContextKey = context.key
+
     // Record the timestamp so we can reference it after enrichment
     latestUpdateTime = Date.now()
     const enrichmentTime = latestUpdateTime
@@ -551,46 +506,31 @@
     })
   }
 
-  const handleContextChange = key => {
-    // Check if we already know if this key is used
-    let used = knownContextKeyMap[key]
-
-    // If we don't know, check and cache
-    if (used == null) {
-      used = bindingString.indexOf(`[${key}]`) !== -1
-      knownContextKeyMap[key] = used
-    }
-
-    // Enrich settings if we use this key
-    if (used) {
-      enrichComponentSettings($context, settingsDefinitionMap)
-    }
-  }
-
-  // Register an unregister component instance
   onMount(() => {
-    if ($appStore.isDevApp) {
-      if (!componentStore.actions.isComponentRegistered(id)) {
-        componentStore.actions.registerInstance(id, {
-          component: instance._component,
-          getSettings: () => cachedSettings,
-          getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
-          getDataContext: () => get(context),
-          reload: () => initialise(instance, true),
-          setEphemeralStyles: styles => (ephemeralStyles = styles),
-          state: store,
-        })
-      }
-      return () => {
-        if (componentStore.actions.isComponentRegistered(id)) {
-          componentStore.actions.unregisterInstance(id)
-        }
-      }
+    if (
+      $appStore.isDevApp &&
+      !componentStore.actions.isComponentRegistered(id)
+    ) {
+      componentStore.actions.registerInstance(id, {
+        component: instance._component,
+        getSettings: () => cachedSettings,
+        getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
+        getDataContext: () => get(context),
+        reload: () => initialise(instance, true),
+        setEphemeralStyles: styles => (ephemeralStyles = styles),
+        state: store,
+      })
     }
   })
 
-  // Observe changes to context
-  onMount(() => context.actions.observeChanges(handleContextChange))
+  onDestroy(() => {
+    if (
+      $appStore.isDevApp &&
+      componentStore.actions.isComponentRegistered(id)
+    ) {
+      componentStore.actions.unregisterInstance(id)
+    }
+  })
 </script>
 
 {#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 1c6dfb32b7..342194d5e2 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -71,7 +71,7 @@
     datasource: dataSource || {},
     schema,
     rowsLength: $fetch.rows.length,
-    pageNumber: $fetch.pageNumber + 1,
+
     // Undocumented properties. These aren't supposed to be used in builder
     // bindings, but are used internally by other components
     id: $component?.id,
diff --git a/packages/client/src/components/app/EmptyPlaceholder.svelte b/packages/client/src/components/app/EmptyPlaceholder.svelte
index 2c3596aadf..7e9920510a 100644
--- a/packages/client/src/components/app/EmptyPlaceholder.svelte
+++ b/packages/client/src/components/app/EmptyPlaceholder.svelte
@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import { Icon } from "@budibase/bbui"
 
   const component = getContext("component")
   const { builderStore, componentStore } = getContext("sdk")
@@ -9,7 +10,15 @@
 
 {#if $builderStore.inBuilder}
   <div class="component-placeholder">
-    {$component.name || definition?.name || "Component"}
+    <Icon name="Help" color="var(--spectrum-global-color-blue-600)" />
+    <span
+      class="spectrum-Link"
+      on:click={() => {
+        builderStore.actions.requestAddComponent()
+      }}
+    >
+      Add components inside your {definition?.name || $component.type}
+    </span>
   </div>
 {/if}
 
@@ -23,4 +32,14 @@
     font-size: var(--font-size-s);
     gap: var(--spacing-s);
   }
+
+  /* Common styles for all error states to use */
+  .component-placeholder :global(mark) {
+    background-color: var(--spectrum-global-color-gray-400);
+    padding: 0 4px;
+    border-radius: 2px;
+  }
+  .component-placeholder :global(.spectrum-Link) {
+    cursor: pointer;
+  }
 </style>
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 0a343cac51..30040bfe9c 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -19,36 +19,7 @@
   export let onRowClick = null
   export let buttons = null
 
-  const context = getContext("context")
-  const component = getContext("component")
-  const {
-    styleable,
-    API,
-    builderStore,
-    notificationStore,
-    enrichButtonActions,
-    ActionTypes,
-    createContextStore,
-    Provider,
-  } = getContext("sdk")
-
-  let grid
-
-  $: columnWhitelist = parsedColumns
-    ?.filter(col => col.active)
-    ?.map(col => col.field)
-  $: schemaOverrides = getSchemaOverrides(parsedColumns)
-  $: enrichedButtons = enrichButtons(buttons)
-  $: parsedColumns = getParsedColumns(columns)
-  $: actions = [
-    {
-      type: ActionTypes.RefreshDatasource,
-      callback: () => grid?.getContext()?.rows.actions.refreshData(),
-      metadata: { dataSource: table },
-    },
-  ]
-
-  // Parses columns to fix older formats
+  // parses columns to fix older formats
   const getParsedColumns = columns => {
     // If the first element has an active key all elements should be in the new format
     if (columns?.length && columns[0]?.active !== undefined) {
@@ -62,6 +33,28 @@
     }))
   }
 
+  $: parsedColumns = getParsedColumns(columns)
+
+  const context = getContext("context")
+  const component = getContext("component")
+  const {
+    styleable,
+    API,
+    builderStore,
+    notificationStore,
+    enrichButtonActions,
+    ActionTypes,
+    createContextStore,
+  } = getContext("sdk")
+
+  let grid
+
+  $: columnWhitelist = parsedColumns
+    ?.filter(col => col.active)
+    ?.map(col => col.field)
+  $: schemaOverrides = getSchemaOverrides(parsedColumns)
+  $: enrichedButtons = enrichButtons(buttons)
+
   const getSchemaOverrides = columns => {
     let overrides = {}
     columns?.forEach(column => {
@@ -85,6 +78,11 @@
         const id = get(component).id
         const gridContext = createContextStore(context)
         gridContext.actions.provideData(id, row)
+        gridContext.actions.provideAction(
+          id,
+          ActionTypes.RefreshDatasource,
+          () => grid?.getContext()?.rows.actions.refreshData()
+        )
         const fn = enrichButtonActions(settings.onClick, get(gridContext))
         return await fn?.({ row })
       },
@@ -96,31 +94,29 @@
   use:styleable={$component.styles}
   class:in-builder={$builderStore.inBuilder}
 >
-  <Provider {actions}>
-    <Grid
-      bind:this={grid}
-      datasource={table}
-      {API}
-      {stripeRows}
-      {initialFilter}
-      {initialSortColumn}
-      {initialSortOrder}
-      {fixedRowHeight}
-      {columnWhitelist}
-      {schemaOverrides}
-      canAddRows={allowAddRows}
-      canEditRows={allowEditRows}
-      canDeleteRows={allowDeleteRows}
-      canEditColumns={false}
-      canExpandRows={false}
-      canSaveSchema={false}
-      showControls={false}
-      notifySuccess={notificationStore.actions.success}
-      notifyError={notificationStore.actions.error}
-      buttons={enrichedButtons}
-      on:rowclick={e => onRowClick?.({ row: e.detail })}
-    />
-  </Provider>
+  <Grid
+    bind:this={grid}
+    datasource={table}
+    {API}
+    {stripeRows}
+    {initialFilter}
+    {initialSortColumn}
+    {initialSortOrder}
+    {fixedRowHeight}
+    {columnWhitelist}
+    {schemaOverrides}
+    canAddRows={allowAddRows}
+    canEditRows={allowEditRows}
+    canDeleteRows={allowDeleteRows}
+    canEditColumns={false}
+    canExpandRows={false}
+    canSaveSchema={false}
+    showControls={false}
+    notifySuccess={notificationStore.actions.success}
+    notifyError={notificationStore.actions.error}
+    buttons={enrichedButtons}
+    on:rowclick={e => onRowClick?.({ row: e.detail })}
+  />
 </div>
 
 <style>
diff --git a/packages/client/src/components/app/Repeater.svelte b/packages/client/src/components/app/Repeater.svelte
index 8796078311..39e11d12cf 100644
--- a/packages/client/src/components/app/Repeater.svelte
+++ b/packages/client/src/components/app/Repeater.svelte
@@ -2,7 +2,6 @@
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
   import Container from "./Container.svelte"
-  import { ContextScopes } from "constants"
 
   export let dataProvider
   export let noRowsMessage
@@ -10,7 +9,6 @@
   export let hAlign
   export let vAlign
   export let gap
-  export let scope = ContextScopes.Local
 
   const { Provider } = getContext("sdk")
   const component = getContext("component")
@@ -24,7 +22,7 @@
     <Placeholder />
   {:else if rows.length > 0}
     {#each rows as row, index}
-      <Provider data={{ ...row, index }} {scope}>
+      <Provider data={{ ...row, index }}>
         <slot />
       </Provider>
     {/each}
diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index b24c2f418a..50f2823b97 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -1,6 +1,5 @@
 <script>
   import BlockComponent from "components/BlockComponent.svelte"
-  import { Helpers } from "@budibase/bbui"
   import { getContext, setContext } from "svelte"
   import { builderStore } from "stores"
   import { Utils } from "@budibase/frontend-core"
@@ -42,7 +41,7 @@
   let schema
 
   $: fetchSchema(dataSource)
-  $: enrichedSteps = enrichSteps(steps, schema, $component.id, $currentStep)
+  $: enrichedSteps = enrichSteps(steps, schema, $component.id)
   $: updateCurrentStep(enrichedSteps, $builderStore, $component)
 
   const updateCurrentStep = (steps, builderStore, component) => {
@@ -116,7 +115,6 @@
         dataSource,
       })
       return {
-        _stepId: Helpers.uuid(),
         fields: getDefaultFields(fields || [], schema),
         title: title ?? defaultProps.title,
         desc,
@@ -144,7 +142,7 @@
       },
     }}
   >
-    {#each enrichedSteps as step, stepIdx (step._stepId)}
+    {#each enrichedSteps as step, stepIdx}
       <BlockComponent
         type="formstep"
         props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
@@ -188,13 +186,12 @@
             </BlockComponent>
           </BlockComponent>
           <BlockComponent type="text" props={{ text: step.desc }} order={1} />
-
           <BlockComponent type="container" order={2}>
             <div
               class="form-block fields"
               class:mobile={$context.device.mobile}
             >
-              {#each step.fields as field, fieldIdx (`${field.field || field.name}_${fieldIdx}`)}
+              {#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
                 {#if getComponentForField(field)}
                   <BlockComponent
                     type={getComponentForField(field)}
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index 7c58f90508..0597f9947f 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@@ -231,7 +231,6 @@
           paginate,
           limit: rowCount,
         }}
-        context="provider"
         order={1}
       >
         <BlockComponent
diff --git a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
index 5b89018fdf..26767f84b3 100644
--- a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
@@ -10,7 +10,6 @@
   export let noRowsMessage
 
   const component = getContext("component")
-  const { ContextScopes } = getContext("sdk")
 
   $: providerId = `${$component.id}-provider`
   $: dataProvider = `{{ literal ${safe(providerId)} }}`
@@ -56,7 +55,6 @@
           noRowsMessage: noRowsMessage || "We couldn't find a row to display",
           direction: "column",
           hAlign: "center",
-          scope: ContextScopes.Global,
         }}
       >
         <slot />
diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte
index 464ca95829..2cbf2ec877 100644
--- a/packages/client/src/components/app/forms/Form.svelte
+++ b/packages/client/src/components/app/forms/Form.svelte
@@ -21,7 +21,6 @@
   export let editAutoColumns = false
 
   const context = getContext("context")
-  const component = getContext("component")
   const { API, fetchDatasourceSchema } = getContext("sdk")
 
   const getInitialFormStep = () => {
@@ -39,47 +38,28 @@
 
   $: fetchSchema(dataSource)
   $: schemaKey = generateSchemaKey(schema)
-  $: initialValues = getInitialValues(
-    actionType,
-    dataSource,
-    $component.path,
-    $context
-  )
+  $: initialValues = getInitialValues(actionType, dataSource, $context)
   $: resetKey = Helpers.hashString(
     schemaKey + JSON.stringify(initialValues) + disabled + readonly
   )
 
   // Returns the closes data context which isn't a built in context
-  const getInitialValues = (type, dataSource, path, context) => {
+  const getInitialValues = (type, dataSource, context) => {
     // Only inherit values for update forms
     if (type !== "Update") {
       return {}
     }
     // Only inherit values for forms targeting internal tables
-    const dsType = dataSource?.type
-    if (dsType !== "table" && dsType !== "viewV2") {
+    if (!dataSource?.tableId) {
       return {}
     }
-    // Look up the component tree and find something that is provided by an
-    // ancestor that matches our datasource. This is for backwards compatibility
-    // as previously we could use the "closest" context.
-    for (let id of path.reverse().slice(1)) {
-      // Check for matching view datasource
-      if (
-        dataSource.type === "viewV2" &&
-        context[id]?._viewId === dataSource.id
-      ) {
-        return context[id]
-      }
-      // Check for matching table datasource
-      if (
-        dataSource.type === "table" &&
-        context[id]?.tableId === dataSource.tableId
-      ) {
-        return context[id]
-      }
+    // Don't inherit values representing built in contexts
+    if (["user", "url"].includes(context.closestComponentId)) {
+      return {}
     }
-    return {}
+    // Always inherit the closest datasource
+    const closestContext = context[`${context.closestComponentId}`] || {}
+    return closestContext || {}
   }
 
   // Fetches the form schema from this form's dataSource
diff --git a/packages/client/src/components/context/Provider.svelte b/packages/client/src/components/context/Provider.svelte
index 1b6a073512..3fffaaf7fa 100644
--- a/packages/client/src/components/context/Provider.svelte
+++ b/packages/client/src/components/context/Provider.svelte
@@ -1,23 +1,20 @@
 <script>
   import { getContext, setContext, onDestroy } from "svelte"
   import { dataSourceStore, createContextStore } from "stores"
-  import { ActionTypes, ContextScopes } from "constants"
+  import { ActionTypes } from "constants"
   import { generate } from "shortid"
 
   export let data
   export let actions
   export let key
-  export let scope = ContextScopes.Global
 
-  let context = getContext("context")
+  // Clone and create new data context for this component tree
+  const context = getContext("context")
   const component = getContext("component")
-  const providerKey = key || $component.id
+  const newContext = createContextStore(context)
+  setContext("context", newContext)
 
-  // Create a new layer of context if we are only locally scoped
-  if (scope === ContextScopes.Local) {
-    context = createContextStore(context)
-    setContext("context", context)
-  }
+  const providerKey = key || $component.id
 
   // Generate a permanent unique ID for this component and use it to register
   // any datasource actions
@@ -33,7 +30,7 @@
   const provideData = newData => {
     const dataKey = JSON.stringify(newData)
     if (dataKey !== lastDataKey) {
-      context.actions.provideData(providerKey, newData, scope)
+      newContext.actions.provideData(providerKey, newData)
       lastDataKey = dataKey
     }
   }
@@ -43,7 +40,7 @@
     if (actionsKey !== lastActionsKey) {
       lastActionsKey = actionsKey
       newActions?.forEach(({ type, callback, metadata }) => {
-        context.actions.provideAction(providerKey, type, callback, scope)
+        newContext.actions.provideAction(providerKey, type, callback)
 
         // Register any "refresh datasource" actions with a singleton store
         // so we can easily refresh data at all levels for any datasource
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index 4c9df42809..a4d7411bbd 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -12,10 +12,5 @@ export const ActionTypes = {
   ScrollTo: "ScrollTo",
 }
 
-export const ContextScopes = {
-  Local: "local",
-  Global: "global",
-}
-
 export const DNDPlaceholderID = "dnd-placeholder"
 export const ScreenslotType = "screenslot"
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 2b8ba41cbd..04499c01ab 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -23,7 +23,7 @@ import { getAction } from "utils/getAction"
 import Provider from "components/context/Provider.svelte"
 import Block from "components/Block.svelte"
 import BlockComponent from "components/BlockComponent.svelte"
-import { ActionTypes, ContextScopes } from "./constants"
+import { ActionTypes } from "./constants"
 import { fetchDatasourceSchema } from "./utils/schema.js"
 import { getAPIKey } from "./utils/api.js"
 import { enrichButtonActions } from "./utils/buttonActions.js"
@@ -54,7 +54,6 @@ export default {
   linkable,
   getAction,
   fetchDatasourceSchema,
-  ContextScopes,
   getAPIKey,
   enrichButtonActions,
   processStringSync,
diff --git a/packages/client/src/stores/context.js b/packages/client/src/stores/context.js
index e54c773591..9c35bc4862 100644
--- a/packages/client/src/stores/context.js
+++ b/packages/client/src/stores/context.js
@@ -1,98 +1,59 @@
 import { writable, derived } from "svelte/store"
-import { ContextScopes } from "constants"
+import { Helpers } from "@budibase/bbui"
 
-export const createContextStore = parentContext => {
-  const context = writable({})
-  let observers = []
-
-  // Derive the total context state at this point in the tree
-  const contexts = parentContext ? [parentContext, context] : [context]
+export const createContextStore = oldContext => {
+  const newContext = writable({})
+  const contexts = oldContext ? [oldContext, newContext] : [newContext]
   const totalContext = derived(contexts, $contexts => {
-    return $contexts.reduce((total, context) => ({ ...total, ...context }), {})
+    // The key is the serialized representation of context
+    let key = ""
+    for (let i = 0; i < $contexts.length - 1; i++) {
+      key += $contexts[i].key
+    }
+    key = Helpers.hashString(
+      key + JSON.stringify($contexts[$contexts.length - 1])
+    )
+
+    // Reduce global state
+    const reducer = (total, context) => ({ ...total, ...context })
+    const context = $contexts.reduce(reducer, {})
+
+    return {
+      ...context,
+      key,
+    }
   })
 
-  // Subscribe to updates in the parent context, so that we can proxy on any
-  // change messages to our own subscribers
-  if (parentContext) {
-    parentContext.actions.observeChanges(key => {
-      broadcastChange(key)
-    })
-  }
-
-  // Provide some data in context
-  const provideData = (providerId, data, scope = ContextScopes.Global) => {
+  // Adds a data context layer to the tree
+  const provideData = (providerId, data) => {
     if (!providerId || data === undefined) {
       return
     }
+    newContext.update(state => {
+      state[providerId] = data
 
-    // Proxy message up the chain if we have a parent and are providing global
-    // context
-    if (scope === ContextScopes.Global && parentContext) {
-      parentContext.actions.provideData(providerId, data, scope)
-    }
+      // Keep track of the closest component ID so we can later hydrate a "data" prop.
+      // This is only required for legacy bindings that used "data" rather than a
+      // component ID.
+      state.closestComponentId = providerId
 
-    // Otherwise this is either the context root, or we're providing a local
-    // context override, so we need to update the local context instead
-    else {
-      context.update(state => {
-        state[providerId] = data
-        return state
-      })
-      broadcastChange(providerId)
-    }
+      return state
+    })
   }
 
-  // Provides some action in context
-  const provideAction = (
-    providerId,
-    actionType,
-    callback,
-    scope = ContextScopes.Global
-  ) => {
+  // Adds an action context layer to the tree
+  const provideAction = (providerId, actionType, callback) => {
     if (!providerId || !actionType) {
       return
     }
-
-    // Proxy message up the chain if we have a parent and are providing global
-    // context
-    if (scope === ContextScopes.Global && parentContext) {
-      parentContext.actions.provideAction(
-        providerId,
-        actionType,
-        callback,
-        scope
-      )
-    }
-
-    // Otherwise this is either the context root, or we're providing a local
-    // context override, so we need to update the local context instead
-    else {
-      const key = `${providerId}_${actionType}`
-      context.update(state => {
-        state[key] = callback
-        return state
-      })
-      broadcastChange(key)
-    }
-  }
-
-  const observeChanges = callback => {
-    observers.push(callback)
-    return () => {
-      observers = observers.filter(cb => cb !== callback)
-    }
-  }
-
-  const broadcastChange = key => {
-    observers.forEach(cb => cb(key))
+    newContext.update(state => {
+      state[`${providerId}_${actionType}`] = callback
+      return state
+    })
   }
 
   return {
     subscribe: totalContext.subscribe,
-    actions: {
-      provideData,
-      provideAction,
-      observeChanges,
-    },
+    actions: { provideData, provideAction },
   }
 }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 68b7c84878..9b4640dbb4 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -17,54 +17,6 @@ import { ActionTypes } from "constants"
 import { enrichDataBindings } from "./enrichDataBinding"
 import { Helpers } from "@budibase/bbui"
 
-// Default action handler, which extracts an action from context that was
-// provided by another component and executes it with all action parameters
-const contextActionHandler = async (action, context) => {
-  const key = getActionContextKey(action)
-  const fn = context[key]
-  if (fn) {
-    return await fn(action.parameters)
-  }
-}
-
-// Generates the context key, which is the key that this action depends on in
-// context to provide the function it will run. This is broken out as a util
-// because we reuse this inside the core Component.svelte file to determine
-// what the required action context keys are for all action settings.
-export const getActionContextKey = action => {
-  const type = action?.["##eventHandlerType"]
-  const key = (componentId, type) => `${componentId}_${type}`
-  switch (type) {
-    case "Scroll To Field":
-      return key(action.parameters.componentId, ActionTypes.ScrollTo)
-    case "Update Field Value":
-      return key(action.parameters.componentId, ActionTypes.UpdateFieldValue)
-    case "Validate Form":
-      return key(action.parameters.componentId, ActionTypes.ValidateForm)
-    case "Refresh Data Provider":
-      return key(action.parameters.componentId, ActionTypes.RefreshDatasource)
-    case "Clear Form":
-      return key(action.parameters.componentId, ActionTypes.ClearForm)
-    case "Change Form Step":
-      return key(action.parameters.componentId, ActionTypes.ChangeFormStep)
-    default:
-      return null
-  }
-}
-
-// If button actions depend on context, they must declare which keys they need
-export const getActionDependentContextKeys = action => {
-  const type = action?.["##eventHandlerType"]
-  switch (type) {
-    case "Save Row":
-    case "Duplicate Row":
-      if (action.parameters?.providerId) {
-        return [action.parameters.providerId]
-      }
-  }
-  return []
-}
-
 const saveRowHandler = async (action, context) => {
   const { fields, providerId, tableId, notificationOverride } =
     action.parameters
@@ -80,21 +32,20 @@ const saveRowHandler = async (action, context) => {
     }
   }
   if (tableId) {
-    if (tableId.startsWith("view")) {
-      payload._viewId = tableId
-    } else {
-      payload.tableId = tableId
-    }
+    payload.tableId = tableId
   }
   try {
     const row = await API.saveRow(payload)
+
     if (!notificationOverride) {
       notificationStore.actions.success("Row saved")
     }
+
     // Refresh related datasources
     await dataSourceStore.actions.invalidateDataSource(tableId, {
       invalidateRelationships: true,
     })
+
     return { row }
   } catch (error) {
     // Abort next actions
@@ -113,11 +64,7 @@ const duplicateRowHandler = async (action, context) => {
       }
     }
     if (tableId) {
-      if (tableId.startsWith("view")) {
-        payload._viewId = tableId
-      } else {
-        payload.tableId = tableId
-      }
+      payload.tableId = tableId
     }
     delete payload._id
     delete payload._rev
@@ -126,10 +73,12 @@ const duplicateRowHandler = async (action, context) => {
       if (!notificationOverride) {
         notificationStore.actions.success("Row saved")
       }
+
       // Refresh related datasources
       await dataSourceStore.actions.invalidateDataSource(tableId, {
         invalidateRelationships: true,
       })
+
       return { row }
     } catch (error) {
       // Abort next actions
@@ -241,6 +190,17 @@ const navigationHandler = action => {
   routeStore.actions.navigate(url, peek, externalNewTab)
 }
 
+const scrollHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.ScrollTo,
+    {
+      field: action.parameters.field,
+    }
+  )
+}
+
 const queryExecutionHandler = async action => {
   const { datasourceId, queryId, queryParams, notificationOverride } =
     action.parameters
@@ -276,6 +236,47 @@ const queryExecutionHandler = async action => {
   }
 }
 
+const executeActionHandler = async (
+  context,
+  componentId,
+  actionType,
+  params
+) => {
+  const fn = context[`${componentId}_${actionType}`]
+  if (fn) {
+    return await fn(params)
+  }
+}
+
+const updateFieldValueHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.UpdateFieldValue,
+    {
+      type: action.parameters.type,
+      field: action.parameters.field,
+      value: action.parameters.value,
+    }
+  )
+}
+
+const validateFormHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.ValidateForm
+  )
+}
+
+const refreshDataProviderHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.RefreshDatasource
+  )
+}
+
 const logoutHandler = async action => {
   await authStore.actions.logOut()
   let redirectUrl = "/builder/auth/login"
@@ -292,6 +293,23 @@ const logoutHandler = async action => {
   }
 }
 
+const clearFormHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.ClearForm
+  )
+}
+
+const changeFormStepHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.ChangeFormStep,
+    action.parameters
+  )
+}
+
 const closeScreenModalHandler = action => {
   let url
   if (action?.parameters) {
@@ -399,10 +417,16 @@ const handlerMap = {
   ["Duplicate Row"]: duplicateRowHandler,
   ["Delete Row"]: deleteRowHandler,
   ["Navigate To"]: navigationHandler,
+  ["Scroll To Field"]: scrollHandler,
   ["Execute Query"]: queryExecutionHandler,
   ["Trigger Automation"]: triggerAutomationHandler,
+  ["Validate Form"]: validateFormHandler,
+  ["Update Field Value"]: updateFieldValueHandler,
+  ["Refresh Data Provider"]: refreshDataProviderHandler,
   ["Log Out"]: logoutHandler,
+  ["Clear Form"]: clearFormHandler,
   ["Close Screen Modal"]: closeScreenModalHandler,
+  ["Change Form Step"]: changeFormStepHandler,
   ["Update State"]: updateStateHandler,
   ["Upload File to S3"]: s3UploadHandler,
   ["Export Data"]: exportDataHandler,
@@ -437,12 +461,7 @@ export const enrichButtonActions = (actions, context) => {
     return actions
   }
 
-  // Get handlers for each action. If no bespoke handler is configured, fall
-  // back to simply executing this action from context.
-  const handlers = actions.map(def => {
-    return handlerMap[def["##eventHandlerType"]] || contextActionHandler
-  })
-
+  const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
   return async eventContext => {
     // Button context is built up as actions are executed.
     // Inherit any previous button context which may have come from actions
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index efe69938e7..38eaf77885 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -23,6 +23,16 @@ export const propsAreSame = (a, b) => {
  * Data bindings are enriched, and button actions are enriched.
  */
 export const enrichProps = (props, context, settingsDefinitionMap) => {
+  // Create context of all bindings and data contexts
+  // Duplicate the closest context as "data" which the builder requires
+  const totalContext = {
+    ...context,
+
+    // This is only required for legacy bindings that used "data" rather than a
+    // component ID.
+    data: context[context.closestComponentId],
+  }
+
   // We want to exclude any button actions from enrichment at this stage.
   // Extract top level button action settings.
   let normalProps = { ...props }
@@ -39,13 +49,13 @@ export const enrichProps = (props, context, settingsDefinitionMap) => {
   let rawConditions = normalProps._conditions
 
   // Enrich all props except button actions
-  let enrichedProps = enrichDataBindings(normalProps, context)
+  let enrichedProps = enrichDataBindings(normalProps, totalContext)
 
   // Enrich button actions.
   // Actions are enriched into a function at this stage, but actual data
   // binding enrichment is done dynamically at runtime.
   Object.keys(actionProps).forEach(prop => {
-    enrichedProps[prop] = enrichButtonActions(actionProps[prop], context)
+    enrichedProps[prop] = enrichButtonActions(actionProps[prop], totalContext)
   })
 
   // Conditions
@@ -56,7 +66,7 @@ export const enrichProps = (props, context, settingsDefinitionMap) => {
         // action
         condition.settingValue = enrichButtonActions(
           rawConditions[idx].settingValue,
-          context
+          totalContext
         )
 
         // Since we can't compare functions, we need to assume that conditions
diff --git a/packages/frontend-core/src/api/rows.js b/packages/frontend-core/src/api/rows.js
index 79f837e864..475ef0e2a4 100644
--- a/packages/frontend-core/src/api/rows.js
+++ b/packages/frontend-core/src/api/rows.js
@@ -19,12 +19,11 @@ export const buildRowEndpoints = API => ({
    * @param suppressErrors whether or not to suppress error notifications
    */
   saveRow: async (row, suppressErrors = false) => {
-    const resourceId = row?._viewId || row?.tableId
-    if (!resourceId) {
+    if (!row?.tableId) {
       return
     }
     return await API.post({
-      url: `/api/${resourceId}/rows`,
+      url: `/api/${row._viewId || row.tableId}/rows`,
       body: row,
       suppressErrors,
     })
@@ -36,12 +35,11 @@ export const buildRowEndpoints = API => ({
    * @param suppressErrors whether or not to suppress error notifications
    */
   patchRow: async (row, suppressErrors = false) => {
-    const resourceId = row?._viewId || row?.tableId
-    if (!resourceId) {
+    if (!row?.tableId && !row?._viewId) {
       return
     }
     return await API.patch({
-      url: `/api/${resourceId}/rows`,
+      url: `/api/${row._viewId || row.tableId}/rows`,
       body: row,
       suppressErrors,
     })

From 165eb206d9c03e370d8f106fd0908677f81c335d Mon Sep 17 00:00:00 2001
From: melohagan <101575380+melohagan@users.noreply.github.com>
Date: Mon, 22 Jan 2024 11:29:34 +0000
Subject: [PATCH 38/43] If the filter has changed, re-fetch (#12625)

* If the filter has changed, re-fetch

* lint

* Clear value when filter changes
---
 .../src/components/app/forms/RelationshipField.svelte     | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index fcdc93020e..af48183c20 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -108,8 +108,16 @@
     }
   }
 
+  $: forceFetchRows(filter)
   $: debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
 
+  const forceFetchRows = async () => {
+    // if the filter has changed, then we need to reset the options, clear the selection, and re-fetch
+    optionsObj = {}
+    fieldApi.setValue([])
+    selectedValue = []
+    debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
+  }
   const fetchRows = async (searchTerm, primaryDisplay, defaultVal) => {
     const allRowsFetched =
       $fetch.loaded &&

From e2620af76c7982a9efb1fd202c172fff14d7c675 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Mon, 22 Jan 2024 11:46:55 +0000
Subject: [PATCH 39/43] Bump version to 2.15.3

---
 lerna.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index 3ab56dc0b1..6663aebfe6 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.15.2",
+  "version": "2.15.3",
   "npmClient": "yarn",
   "packages": [
     "packages/*",

From 2a24c8537857af19c99ceb48fe111c814a8f29c6 Mon Sep 17 00:00:00 2001
From: melohagan <101575380+melohagan@users.noreply.github.com>
Date: Mon, 22 Jan 2024 15:30:21 +0000
Subject: [PATCH 40/43] Surface email error (#12837)

---
 packages/server/src/utilities/workerRequests.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/server/src/utilities/workerRequests.ts b/packages/server/src/utilities/workerRequests.ts
index 56ceff226c..1604a724d2 100644
--- a/packages/server/src/utilities/workerRequests.ts
+++ b/packages/server/src/utilities/workerRequests.ts
@@ -48,6 +48,9 @@ async function checkResponse(
     let error
     try {
       error = await response.json()
+      if (!error.message) {
+        error = JSON.stringify(error)
+      }
     } catch (err) {
       error = await response.text()
     }

From 6e86f3e27158e55168a063b6f8ef5bc89f298280 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Mon, 22 Jan 2024 15:32:13 +0000
Subject: [PATCH 41/43] Bump version to 2.15.4

---
 lerna.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index 6663aebfe6..480b577bb4 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.15.3",
+  "version": "2.15.4",
   "npmClient": "yarn",
   "packages": [
     "packages/*",

From 3f9d1402f31ca5f640d007dcd4b1963ee1b84f5c Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 23 Jan 2024 09:21:04 +0000
Subject: [PATCH 42/43] fix operand issue

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 2f9907794e..af54e4d2da 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -185,8 +185,8 @@
 
       if (
         idx === 0 &&
-        automation.trigger?.event === "row:update" &&
-        automation.trigger?.event === "row:save"
+        (automation.trigger?.event === "row:update" ||
+          automation.trigger?.event === "row:save")
       ) {
         if (name !== "id" && name !== "revision") return `trigger.row.${name}`
       }

From 89502accb255564bdffa93866d078c4249f27729 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Tue, 23 Jan 2024 10:11:37 +0000
Subject: [PATCH 43/43] Bump version to 2.15.5

---
 lerna.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index 480b577bb4..587a678788 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.15.4",
+  "version": "2.15.5",
   "npmClient": "yarn",
   "packages": [
     "packages/*",