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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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 64951d6f29c39d054197133e82b251c4735d8e8c Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 22 Jan 2024 09:44:57 +0000
Subject: [PATCH 31/31] 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 />