fix: use fast-json-format for prettifying json (#6026)

Author: lohit-bruno

packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js

@@ -8,7 +8,7 @@ import { humanizeRequestBodyMode } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections/index';
 import { toastError } from 'utils/common/error';
-import { prettifyJSON } from 'utils/common';
+import fastJsonFormat from 'fast-json-format';
 import xmlFormat from 'xml-formatter';
 
 const RequestBodyMode = ({ item, collection }) => {
@@ -39,7 +39,7 @@ const RequestBodyMode = ({ item, collection }) => {
   const onPrettify = () => {
     if (body?.json && bodyMode === 'json') {
       try {
-        const prettyBodyJson = prettifyJSON(body.json);
+        const prettyBodyJson = fastJsonFormat(body.json);
         dispatch(
           updateRequestBody({
             content: prettyBodyJson,

packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/index.js

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { autoDetectLang } from 'utils/codemirror/lang-detect';
 import { toastError } from 'utils/common/error';
-import { prettifyJSON } from 'utils/common/index';
+import fastJsonFormat from 'fast-json-format';
 import xmlFormat from 'xml-formatter';
 import WSRequestBodyMode from '../BodyMode/index';
 
@@ -105,7 +105,7 @@ export const SingleWSMessage = ({
   const onPrettify = () => {
     if (codeType === 'json') {
       try {
-        const prettyBodyJson = prettifyJSON(content);
+        const prettyBodyJson = fastJsonFormat(content);
         const currentMessages = [...(body.ws || [])];
         currentMessages[index] = {
           ...currentMessages[index],

packages/bruno-app/src/utils/common/index.js

@@ -1,6 +1,5 @@
 import { customAlphabet } from 'nanoid';
 import xmlFormat from 'xml-formatter';
-import { format, applyEdits } from 'jsonc-parser';
 import { JSONPath } from 'jsonpath-plus';
 import fastJsonFormat from 'fast-json-format';
 
@@ -54,34 +53,6 @@ export const safeStringifyJSON = (obj, indent = false) => {
   }
 };
 
-export const prettifyJSON = (obj, spaces = 2) => {
-  try {
-    const text = obj.replace(/\\"/g, '"').replace(/\\'/g, '\'');
-
-    const placeholders = [];
-    const modifiedJson = text.replace(/"[^"]*?"|{{[^{}]+}}/g, (match) => {
-      if (match.startsWith('{{')) {
-        const placeholder = `__BRUNO_VAR_PLACEHOLDER_${placeholders.length}__`;
-        placeholders.push(match);
-        return `"${placeholder}"`; // Wrap bare variable in quotes to make it a valid JSON string
-      }
-      return match;
-    });
-
-    const edits = format(modifiedJson, undefined, { tabSize: spaces, insertSpaces: true });
-    let result = applyEdits(modifiedJson, edits);
-
-    for (let i = 0; i < placeholders.length; i++) {
-      const placeholder = `__BRUNO_VAR_PLACEHOLDER_${i}__`;
-      result = result.replace(`"${placeholder}"`, placeholders[i]);
-    }
-
-    return result;
-  } catch (e) {
-    return obj;
-  }
-};
-
 export const safeParseXML = (str, options) => {
   if (!str || !str.length || typeof str !== 'string') {
     return str;

packages/bruno-app/src/utils/common/index.spec.js

@@ -6,8 +6,7 @@ import {
   humanizeDate,
   relativeDate,
   getContentType,
-  formatSize,
-  prettifyJSON
+  formatSize
 } from './index';
 
 describe('common utils', () => {
@@ -192,30 +191,4 @@ describe('common utils', () => {
       expect(formatSize(NaN)).toBe('0B');
     });
   });
-
-  describe('prettifyJSON', () => {
-    it('should prettify a standard JSON string', () => {
-      const input = '{"key":"value","number":123}';
-      const expected = '{\n  "key": "value",\n  "number": 123\n}';
-      expect(prettifyJSON(input)).toBe(expected);
-    });
-
-    it('should handle JSON with a Bruno variable as a value', () => {
-      const input = '{"id":{{request_id}}}';
-      const expected = '{\n  "id": {{request_id}}\n}';
-      expect(prettifyJSON(input)).toBe(expected);
-    });
-
-    it('should handle JSON with a Bruno variable inside a string value', () => {
-      const input = '{"url":"https://example.com/{{path}}"}';
-      const expected = '{\n  "url": "https://example.com/{{path}}"\n}';
-      expect(prettifyJSON(input)).toBe(expected);
-    });
-
-    it('should return the original string for invalid JSON', () => {
-      const input = '{"key":"value",';
-      const expected = '{\n  "key": "value",';
-      expect(prettifyJSON(input)).toBe(expected);
-    });
-  });
 });

packages/bruno-app/src/utils/curl/index.js

@@ -1,6 +1,6 @@
 import { forOwn } from 'lodash';
-import { prettifyJSON } from 'utils/common';
 import curlToJson from './curl-to-json';
+import fastJsonFormat from 'fast-json-format';
 
 export const getRequestFromCurlCommand = (curlCommand, requestType = 'http-request') => {
   const parseFormData = (parsedBody) => {
@@ -67,7 +67,7 @@ export const getRequestFromCurlCommand = (curlCommand, requestType = 'http-reque
         body.file = parsedBody;
       }else if (contentType.includes('application/json')) {
         body.mode = 'json';
-        body.json = prettifyJSON(parsedBody);
+        body.json = fastJsonFormat(parsedBody);
       } else if (contentType.includes('xml')) {
         body.mode = 'xml';
         body.xml = parsedBody;