From 83e23ef5789831d2ff4e68a3413f0d70b89dce62 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Feb 2025 16:17:13 +0000
Subject: [PATCH] Restore format setting, fix conditional UI missing nested
 flag and component bindings, restrict format setting to own context only

---
 .../settings/controls/PropertyControl.svelte  |  8 ++++++--
 .../Component/ComponentSettingsPanel.svelte   |  1 +
 .../Component/ComponentSettingsSection.svelte |  1 +
 .../Component/ConditionalUIDrawer.svelte      |  5 +++++
 .../Component/ConditionalUISection.svelte     |  7 ++++++-
 packages/client/manifest.json                 | 10 +++++++++-
 .../src/components/app/GridBlock.svelte       | 19 +++++++++++--------
 packages/types/src/ui/components/index.ts     |  2 ++
 8 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 2b63cdd748..c4eb3f04e6 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -23,11 +23,12 @@
   export let info = null
   export let disableBindings = false
   export let wide
+  export let isolated = false
 
   let highlightType
 
   $: highlightedProp = $builderStore.highlightedSetting
-  $: allBindings = getAllBindings(bindings, componentBindings, nested)
+  $: allBindings = getAllBindings(bindings, componentBindings, nested, isolated)
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
@@ -36,7 +37,10 @@
       highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
   }
 
-  const getAllBindings = (bindings, componentBindings, nested) => {
+  const getAllBindings = (bindings, componentBindings, nested, isolated) => {
+    if (isolated) {
+      bindings = []
+    }
     if (!nested) {
       return bindings
     }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index de6993c661..020f86357b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -147,6 +147,7 @@
           {componentInstance}
           {componentDefinition}
           {bindings}
+          {componentBindings}
         />
       {/if}
     </Panel>
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 0b147e867c..6940c8b6fc 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
@@ -151,6 +151,7 @@
               propertyFocus={$builderStore.propertyFocus === setting.key}
               info={setting.info}
               disableBindings={setting.disableBindings}
+              isolated={setting.isolated}
               props={{
                 // Generic settings
                 placeholder: setting.placeholder || null,
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
index 863333e91d..4b39022880 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
@@ -19,6 +19,7 @@
 
   export let conditions = []
   export let bindings = []
+  export let componentBindings = []
 
   const flipDurationMs = 150
   const actionOptions = [
@@ -55,6 +56,7 @@
   ]
 
   let dragDisabled = true
+
   $: settings = componentStore
     .getComponentSettings($selectedComponent?._component)
     ?.concat({
@@ -213,7 +215,10 @@
                       options: definition.options,
                       placeholder: definition.placeholder,
                     }}
+                    nested={definition.nested}
+                    isolated={definition.isolated}
                     {bindings}
+                    {componentBindings}
                   />
                 {:else}
                   <Select disabled placeholder=" " />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
index 07b9d35a64..550d7042a7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
@@ -64,7 +64,12 @@
     Show, hide and update components in response to conditions being met.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={() => save()}>Save</Button>
-  <ConditionalUIDrawer slot="body" bind:conditions={tempValue} {bindings} />
+  <ConditionalUIDrawer
+    slot="body"
+    bind:conditions={tempValue}
+    {bindings}
+    {componentBindings}
+  />
 </Drawer>
 
 <style>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index c236dd1ad9..711f2000aa 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -3089,6 +3089,12 @@
         "type": "tableConditions",
         "label": "Conditions",
         "key": "conditions"
+      },
+      {
+        "type": "text",
+        "label": "Format",
+        "key": "format",
+        "info": "Changing format will display values as text"
       }
     ]
   },
@@ -7685,7 +7691,9 @@
           {
             "type": "columns/grid",
             "key": "columns",
-            "resetOn": "table"
+            "resetOn": "table",
+            "nested": true,
+            "isolated": true
           }
         ]
       },
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index b75ca46223..1ff273548a 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -5,7 +5,7 @@
   import { get, derived, readable } from "svelte/store"
   import { featuresStore } from "stores"
   import { Grid } from "@budibase/frontend-core"
-  // import { processStringSync } from "@budibase/string-templates"
+  import { processStringSync } from "@budibase/string-templates"
 
   // table is actually any datasource, but called table for legacy compatibility
   export let table
@@ -105,7 +105,10 @@
         order: idx,
         conditions: column.conditions,
         visible: !!column.active,
-        // format: createFormatter(column),
+        format: createFormatter(column),
+
+        // Small hack to ensure we react to all changes when inside the builder
+        rand: Math.random(),
       }
       if (column.width) {
         overrides[column.field].width = column.width
@@ -114,12 +117,12 @@
     return overrides
   }
 
-  // const createFormatter = column => {
-  //   if (typeof column.format !== "string" || !column.format.trim().length) {
-  //     return null
-  //   }
-  //   return row => processStringSync(column.format, { [id]: row })
-  // }
+  const createFormatter = column => {
+    if (typeof column.format !== "string" || !column.format.trim().length) {
+      return null
+    }
+    return row => processStringSync(column.format, { [id]: row })
+  }
 
   const enrichButtons = buttons => {
     if (!buttons?.length) {
diff --git a/packages/types/src/ui/components/index.ts b/packages/types/src/ui/components/index.ts
index 283ceb47da..ca4fcc3936 100644
--- a/packages/types/src/ui/components/index.ts
+++ b/packages/types/src/ui/components/index.ts
@@ -25,6 +25,8 @@ export interface ComponentSetting {
   selectAllFields?: boolean
   resetOn?: string | string[]
   settings?: ComponentSetting[]
+  nested?: boolean
+  isolated?: boolean
   dependsOn?:
     | string
     | {