From dc077da5ae1e213cd4609ea0878aa3e9072129ef Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 16 Feb 2024 14:21:03 +0000
Subject: [PATCH] Improve how component context is retrieved for live eval and
 provide extra context from grid and card blocks

---
 .../common/bindings/ClientBindingPanel.svelte     |  3 +++
 .../Component/ComponentSettingsSection.svelte     |  7 +------
 packages/builder/src/stores/builder/preview.js    |  5 +++++
 .../client/src/components/app/GridBlock.svelte    |  2 +-
 .../src/components/app/blocks/CardsBlock.svelte   | 15 ++++++++++++++-
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 39d8aaf2f5..97cb097a51 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -1,6 +1,7 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
   import { previewStore } from "stores/builder"
+  import { onMount } from "svelte"
 
   export let bindings = []
   export let valid
@@ -21,6 +22,8 @@
       type: null,
     }))
   }
+
+  onMount(previewStore.requestComponentContext)
 </script>
 
 <BindingPanel
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index 1e01ec1840..b5a960a533 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -1,14 +1,13 @@
 <script>
   import { helpers } from "@budibase/shared-core"
   import { DetailSummary, notifications } from "@budibase/bbui"
-  import { componentStore, previewStore } from "stores/builder"
+  import { componentStore } from "stores/builder"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
   import EjectBlockButton from "components/design/settings/controls/EjectBlockButton.svelte"
   import { getComponentForSetting } from "components/design/settings/componentSettings"
   import InfoDisplay from "./InfoDisplay.svelte"
   import analytics, { Events } from "analytics"
-  import { onMount } from "svelte"
 
   export let componentDefinition
   export let componentInstance
@@ -145,10 +144,6 @@
     }
     return shouldDisplay(instance, setting)
   }
-
-  onMount(() => {
-    previewStore.sendEvent("request-context")
-  })
 </script>
 
 {#each sections as section, idx (section.name)}
diff --git a/packages/builder/src/stores/builder/preview.js b/packages/builder/src/stores/builder/preview.js
index eca69d56d7..4923185ee7 100644
--- a/packages/builder/src/stores/builder/preview.js
+++ b/packages/builder/src/stores/builder/preview.js
@@ -60,6 +60,10 @@ export const createPreviewStore = () => {
     })
   }
 
+  const requestComponentContext = () => {
+    sendEvent("request-context")
+  }
+
   return {
     subscribe: store.subscribe,
     setDevice,
@@ -69,6 +73,7 @@ export const createPreviewStore = () => {
     stopDrag,
     showPreview,
     setSelectedComponentContext,
+    requestComponentContext,
   }
 }
 
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index c2bc9f3989..46a507387d 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -53,7 +53,7 @@
   export const getAdditionalDataContext = () => {
     const rows = get(grid?.getContext()?.rows)
     const goldenRow = generateGoldenSample(rows)
-    const id = [get(component).id]
+    const id = get(component).id
     return {
       [id]: goldenRow,
       eventContext: {
diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte
index 008fa7e730..bd2b69d352 100644
--- a/packages/client/src/components/app/blocks/CardsBlock.svelte
+++ b/packages/client/src/components/app/blocks/CardsBlock.svelte
@@ -4,6 +4,7 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { enrichSearchColumns, enrichFilter } from "utils/blocks.js"
+  import { get } from "svelte/store"
 
   export let title
   export let dataSource
@@ -31,7 +32,9 @@
   export let linkColumn
   export let noRowsMessage
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const context = getContext("context")
+  const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
+  const component = getContext("component")
 
   let formId
   let dataProviderId
@@ -62,6 +65,16 @@
     },
   ]
 
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const rows = get(context)[dataProviderId]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    const id = get(component).id
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
+
   // Builds a full details page URL for the card title
   const buildFullCardUrl = (link, url, repeaterId, linkColumn) => {
     if (!link || !url || !repeaterId) {