From 4406cc573a12679fd686b5e462d3684236e78490 Mon Sep 17 00:00:00 2001
From: ramki-bruno <ramki@usebruno.com>
Date: Thu, 27 Feb 2025 11:59:50 +0530
Subject: [PATCH] Fix: Inconsistent JSON formatting in preview when encoded
 value is a string

---
 .../ResponsePane/QueryResult/index.js         | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
index f808e6eea..4ef6b1cfd 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -11,26 +11,23 @@ import { useState, useMemo, useEffect } from 'react';
 import { useTheme } from 'providers/Theme/index';
 import { uuid } from 'utils/common/index';
 
-const formatResponse = (data, mode, filter) => {
-  if (data === undefined) {
+const formatResponse = (data, dataBuffer, mode, filter) => {
+  if (data === undefined || !dataBuffer) {
     return '';
   }
 
-  if (data === null) {
-    return data;
-  }
+  // TODO: We need a better way to get the raw response-data here instead
+  // of using this dataBuffer param.
+  // Also, we only need the raw response-data and content-type to show the preview.
+  const rawData = Buffer.from(dataBuffer, "base64").toString();
 
   if (mode.includes('json')) {
-    let isValidJSON = false;
-
     try {
-      isValidJSON = typeof JSON.parse(JSON.stringify(data)) === 'object';
+      JSON.parse(rawData);
     } catch (error) {
-      console.log('Error parsing JSON: ', error.message);
-    }
-
-    if (!isValidJSON && typeof data === 'string') {
-      return data;
+      // If the response content-type is JSON and it fails parsing, its an invalid JSON.
+      // In that case, just show the response as it is in the preview.
+      return rawData;
     }
 
     if (filter) {
@@ -76,7 +73,7 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
   const contentType = getContentType(headers);
   const mode = getCodeMirrorModeBasedOnContentType(contentType, data);
   const [filter, setFilter] = useState(null);
-  const formattedData = formatResponse(data, mode, filter);
+  const formattedData = formatResponse(data, dataBuffer, mode, filter);
   const { displayedTheme } = useTheme();
 
   const debouncedResultFilterOnChange = debounce((e) => {