From 3bd8becab1c1374f1937c137a4e62f3b964d3b1b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 21 Jan 2025 10:57:51 +0000
Subject: [PATCH] Make binding viewer a more generic JSON viewer

---
 .../common/JSONViewer.svelte}                 | 51 ++++++++++++-------
 .../_components/BindingsPanel.svelte          | 14 +++--
 2 files changed, 45 insertions(+), 20 deletions(-)
 rename packages/builder/src/{pages/builder/app/[application]/design/[screenId]/_components/BindingNode.svelte => components/common/JSONViewer.svelte} (85%)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingNode.svelte b/packages/builder/src/components/common/JSONViewer.svelte
similarity index 85%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingNode.svelte
rename to packages/builder/src/components/common/JSONViewer.svelte
index 0b7b54214c..af90a4451a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingNode.svelte
+++ b/packages/builder/src/components/common/JSONViewer.svelte
@@ -1,11 +1,24 @@
+<script context="module" lang="ts">
+  export interface JSONViewerClickEvent {
+    detail: {
+      label: string | undefined
+      value: any
+      path: (string | number)[]
+    }
+  }
+</script>
+
 <script lang="ts">
-  import { Icon, notifications, Helpers } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
 
   export let label: string | undefined = undefined
   export let value: any = undefined
   export let root: boolean = true
   export let path: (string | number)[] = []
+  export let showCopyIcon: boolean = false
 
+  const dispatch = createEventDispatcher()
   const Colors = {
     Array: "var(--spectrum-global-color-gray-600)",
     Object: "var(--spectrum-global-color-gray-600)",
@@ -21,6 +34,7 @@
 
   let expanded = false
   let valueExpanded = false
+  let clickContext: JSONViewerClickContext
 
   $: isArray = Array.isArray(value)
   $: isObject = value?.toString?.() === "[object Object]"
@@ -29,7 +43,7 @@
   $: expandable = keys.length > 0
   $: displayValue = getDisplayValue(isArray, isObject, keys, value)
   $: style = getStyle(isArray, isObject, value)
-  $: readableBinding = `{{ ${path.join(".")} }}`
+  $: clickContext = { value, label, path }
 
   const getKeys = (isArray: boolean, isObject: boolean, value: any) => {
     if (isArray) {
@@ -96,11 +110,6 @@
     }
     return Colors.Other
   }
-
-  const copyBinding = () => {
-    Helpers.copyToClipboard(readableBinding)
-    notifications.success("Binding copied to clipboard")
-  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -124,6 +133,7 @@
         class:primitive
         class:expandable
         on:click={() => (expanded = !expanded)}
+        on:click={() => dispatch("click-label", clickContext)}
       >
         {label}
       </div>
@@ -133,19 +143,22 @@
         class:expanded={valueExpanded}
         {style}
         on:click={() => (valueExpanded = !valueExpanded)}
+        on:click={() => dispatch("click-value", clickContext)}
       >
         {displayValue}
       </div>
-      <div class="copy-value-icon">
-        <Icon
-          name="Copy"
-          size="XS"
-          hoverable
-          color="var(--spectrum-global-color-gray-600)"
-          hoverColor="var(--spectrum-global-color-gray-900)"
-          on:click={copyBinding}
-        />
-      </div>
+      {#if showCopyIcon}
+        <div class="copy-value-icon">
+          <Icon
+            name="Copy"
+            size="XS"
+            hoverable
+            color="var(--spectrum-global-color-gray-600)"
+            hoverColor="var(--spectrum-global-color-gray-900)"
+            on:click={() => dispatch("click-copy", clickContext)}
+          />
+        </div>
+      {/if}
     </div>
   {/if}
   {#if expandable && (expanded || label == null)}
@@ -156,6 +169,10 @@
           value={value[key]}
           root={false}
           path={[...path, key]}
+          {showCopyIcon}
+          on:click-label
+          on:click-value
+          on:click-copy
         />
       {/each}
     </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
index 6e19cab955..9bfabe0584 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte"
-  import { Link, Body, Helpers, Layout } from "@budibase/bbui"
+  import { Link, Body, Helpers, Layout, notifications } from "@budibase/bbui"
   import { processObjectSync } from "@budibase/string-templates"
   import {
     previewStore,
@@ -9,7 +9,9 @@
     snippets,
   } from "@/stores/builder"
   import { getBindableProperties } from "@/dataBinding"
-  import BindingNode from "./BindingNode.svelte"
+  import JSONViewer, {
+    type JSONViewerClickEvent,
+  } from "@/components/common/JSONViewer.svelte"
 
   // Minimal typing for the real data binding structure, as none exists
   type DataBinding = {
@@ -56,6 +58,12 @@
     return context
   }
 
+  const copyBinding = (e: JSONViewerClickEvent) => {
+    const readableBinding = `{{ ${e.detail.path.join(".")} }}`
+    Helpers.copyToClipboard(readableBinding)
+    notifications.success("Binding copied to clipboard")
+  }
+
   onMount(previewStore.requestComponentContext)
 </script>
 
@@ -70,7 +78,7 @@
         Learn more.
       </Link>
     </div>
-    <BindingNode value={context} />
+    <JSONViewer value={context} showCopyIcon on:click-copy={copyBinding} />
   </Layout>
 </div>