Change how client provides the current user so that the whole app is actually wrapped in a provider which provides the current user

packages/client/src/components/ClientApp.svelte

@@ -3,6 +3,7 @@
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
   import NotificationDisplay from "./NotificationDisplay.svelte"
+  import Provider from "./Provider.svelte"
   import SDK from "../sdk"
   import {
     createContextStore,
@@ -27,6 +28,8 @@
 </script>
 
 {#if loaded && $screenStore.activeLayout}
-  <Component definition={$screenStore.activeLayout.props} />
+  <Provider key="user" data={$authStore}>
-  <NotificationDisplay />
+    <Component definition={$screenStore.activeLayout.props} />
+    <NotificationDisplay />
+  </Provider>
 {/if}

packages/client/src/components/Component.svelte

@@ -4,7 +4,7 @@
   import * as ComponentLibrary from "@budibase/standard-components"
   import Router from "./Router.svelte"
   import { enrichProps, propsAreSame } from "../utils/componentProps"
-  import { authStore, builderStore } from "../store"
+  import { builderStore } from "../store"
   import { hashString } from "../utils/hash"
 
   export let definition = {}
@@ -32,7 +32,7 @@
   $: constructor = getComponentConstructor(definition._component)
   $: children = definition._children || []
   $: id = definition._id
-  $: updateComponentProps(definition, $context, $authStore)
+  $: updateComponentProps(definition, $context)
   $: styles = definition._styles
 
   // Update component context
@@ -53,13 +53,13 @@
   }
 
   // Enriches any string component props using handlebars
-  const updateComponentProps = async (definition, context, user) => {
+  const updateComponentProps = async (definition, context) => {
     // Record the timestamp so we can reference it after enrichment
     latestUpdateTime = Date.now()
     const enrichmentTime = latestUpdateTime
 
     // Enrich props with context
-    const enrichedProps = await enrichProps(definition, context, user)
+    const enrichedProps = await enrichProps(definition, context)
 
     // Abandon this update if a newer update has started
     if (enrichmentTime !== latestUpdateTime) {

packages/client/src/components/Provider.svelte

@@ -4,24 +4,22 @@
 
   export let data
   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 newContext = createContextStore($context)
   setContext("context", newContext)
+  $: providerKey = key || $component.id
 
   // Add data context
-  $: {
+  $: newContext.actions.provideData(providerKey, data)
-    if (data !== undefined) {
-      newContext.actions.provideData($component.id, data)
-    }
-  }
 
   // Add actions context
   $: {
     actions?.forEach(({ type, callback }) => {
-      newContext.actions.provideAction($component.id, type, callback)
+      newContext.actions.provideAction(providerKey, type, callback)
     })
   }
 </script>

packages/client/src/store/context.js

@@ -4,26 +4,28 @@ export const createContextStore = existingContext => {
   const store = writable({ ...existingContext })
 
   // Adds a data context layer to the tree
-  const provideData = (componentId, data) => {
+  const provideData = (key, data) => {
+    if (!key) {
+      return
+    }
     store.update(state => {
-      if (componentId) {
+      state[key] = data
-        state[componentId] = data
 
-        // Keep track of the closest component ID so we can later hydrate a "data" prop.
+      // 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
+      // This is only required for legacy bindings that used "data" rather than a
-        // component ID.
+      // component ID.
-        state.closestComponentId = componentId
+      state.closestComponentId = key
-      }
       return state
     })
   }
 
   // Adds an action context layer to the tree
-  const provideAction = (componentId, actionType, callback) => {
+  const provideAction = (key, actionType, callback) => {
+    if (!key || !actionType) {
+      return
+    }
     store.update(state => {
-      if (actionType && componentId) {
+      state[`${key}_${actionType}`] = callback
-        state[`${componentId}_${actionType}`] = callback
-      }
       return state
     })
   }

packages/client/src/utils/componentProps.js

@@ -21,7 +21,7 @@ export const propsAreSame = (a, b) => {
  * Enriches component props.
  * Data bindings are enriched, and button actions are enriched.
  */
-export const enrichProps = async (props, context, user) => {
+export const enrichProps = async (props, context) => {
   // Exclude all private props that start with an underscore
   let validProps = {}
   Object.entries(props)
@@ -34,7 +34,6 @@ export const enrichProps = async (props, context, user) => {
   // Duplicate the closest context as "data" which the builder requires
   const totalContext = {
     ...context,
-    user,
 
     // This is only required for legacy bindings that used "data" rather than a
     // component ID.