From ec5e533063e27b56f44ba622e919b77968aeac65 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 7 Feb 2024 15:13:48 +0100
Subject: [PATCH] Display ... when large array

---
 .../QueryViewerSidePanel/JSONPanel.svelte            | 12 +++++++++++-
 .../integration/QueryViewerSidePanel/index.svelte    |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/integration/QueryViewerSidePanel/JSONPanel.svelte b/packages/builder/src/components/integration/QueryViewerSidePanel/JSONPanel.svelte
index 433b8d41ab..cc56571bed 100644
--- a/packages/builder/src/components/integration/QueryViewerSidePanel/JSONPanel.svelte
+++ b/packages/builder/src/components/integration/QueryViewerSidePanel/JSONPanel.svelte
@@ -1,7 +1,17 @@
 <script>
   export let data
+  export let maxRowsToDisplay = 5
 
-  $: string = JSON.stringify(data || {}, null, 2)
+  let string
+  $: {
+    string = JSON.stringify(data || {}, null, 2)
+    if (Array.isArray(data) && data.length > maxRowsToDisplay) {
+      string = JSON.stringify(data.slice(0, maxRowsToDisplay) || {}, null, 2)
+
+      // Display '...' at the end of the array
+      string = string.replace(/(}\n])/, "},\n  ...\n]")
+    }
+  }
 </script>
 
 <textarea class="json" disabled value={string} />
diff --git a/packages/builder/src/components/integration/QueryViewerSidePanel/index.svelte b/packages/builder/src/components/integration/QueryViewerSidePanel/index.svelte
index aaa723cec5..c08dc5801c 100644
--- a/packages/builder/src/components/integration/QueryViewerSidePanel/index.svelte
+++ b/packages/builder/src/components/integration/QueryViewerSidePanel/index.svelte
@@ -41,7 +41,7 @@
   </div>
   <div class="content">
     {#if activeTab === "JSON"}
-      <JSONPanel data={rows || {}} />
+      <JSONPanel data={rows?.length === 1 ? rows[0] : rows || {}} />
     {:else if activeTab === "Schema"}
       <SchemaPanel {onSchemaChange} {schema} />
     {:else}