From 5010c4fe4ef69d4b846e5cb374f25c0991486b08 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 17:00:06 +0000
Subject: [PATCH] Improve handling of nullish expression to provide a more
 reliable match to the real evaluation

---
 .../common/bindings/BindingPanel.svelte       | 24 +++++++------------
 .../common/bindings/BindingSidePanel.svelte   |  2 +-
 .../bindings/EvaluationSidePanel.svelte       | 12 ++++++----
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 15cbec667a..2e4a7a63a8 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -12,13 +12,9 @@
     isValid,
     decodeJSBinding,
     encodeJSBinding,
-    convertToJS,
     processStringSync,
   } from "@budibase/string-templates"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "dataBinding"
+  import { readableToRuntimeBinding } from "dataBinding"
   import CodeEditor from "../CodeEditor/CodeEditor.svelte"
   import {
     getHelperCompletions,
@@ -93,7 +89,8 @@
   }
 
   const getBindingValue = (binding, context) => {
-    const hbs = `{{ literal ${binding.runtimeBinding} }}`
+    const js = `return $("${binding.runtimeBinding}")`
+    const hbs = encodeJSBinding(js)
     const res = processStringSync(hbs, context)
     return JSON.stringify(res, null, 2)
   }
@@ -171,15 +168,6 @@
     updateValue(jsValue)
   }
 
-  const convert = () => {
-    const runtime = readableToRuntimeBinding(enrichedBindings, hbsValue)
-    const runtimeJs = encodeJSBinding(convertToJS(runtime))
-    jsValue = runtimeToReadableBinding(enrichedBindings, runtimeJs)
-    hbsValue = null
-    mode = "JavaScript"
-    onSelectBinding("", { forceJS: true })
-  }
-
   onMount(() => {
     valid = isValid(readableToRuntimeBinding(enrichedBindings, value))
   })
@@ -296,7 +284,11 @@
           mode={editorMode}
         />
       {:else if sidePanel === SidePanels.Evaluation}
-        <EvaluationSidePanel {expressionResult} {evaluating} />
+        <EvaluationSidePanel
+          {expressionResult}
+          {evaluating}
+          expression={editorValue}
+        />
       {/if}
     </div>
   </div>
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index c5020afee7..87fcb7cb5b 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -71,7 +71,7 @@
   }
 
   const showBindingPopover = (binding, target) => {
-    if (!context) {
+    if (!context || !binding.value || binding.value === "") {
       return
     }
     stopHidingPopover()
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index 3d80b05b07..37f9deda14 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -6,13 +6,17 @@
 
   export let expressionResult
   export let evaluating = false
+  export let expression = null
 
   $: error = expressionResult === "Error while executing JS"
-  $: empty = expressionResult == null || expressionResult === ""
+  $: empty = expression == null || expression?.trim() === ""
   $: success = !error && !empty
   $: highlightedResult = highlight(expressionResult)
 
   const highlight = json => {
+    if (json == null) {
+      return ""
+    }
     // Attempt to parse and then stringify, in case this is valid JSON
     try {
       json = JSON.stringify(JSON.parse(json), null, 2)
@@ -67,10 +71,10 @@
     </div>
   </div>
   <div class="body">
-    {#if expressionResult}
-      {@html highlightedResult}
-    {:else}
+    {#if empty}
       Your expression will be evaluated here
+    {:else}
+      {@html highlightedResult}
     {/if}
   </div>
 </div>