feat: decode msgpack response type to JSON

packages/bruno-app/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@babel/preset-env": "^7.26.0",
     "@fontsource/inter": "^5.0.15",
+    "@msgpack/msgpack": "^3.1.1",
     "@prantlf/jsonlint": "^16.0.0",
     "@reduxjs/toolkit": "^1.8.0",
     "@tabler/icons": "^1.46.0",

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js

@@ -1,64 +1,15 @@
 import { debounce } from 'lodash';
 import QueryResultFilter from './QueryResultFilter';
-import { JSONPath } from 'jsonpath-plus';
 import React from 'react';
 import classnames from 'classnames';
-import iconv from 'iconv-lite';
-import { getContentType, safeStringifyJSON, safeParseXML } from 'utils/common';
+import { getContentType } from 'utils/common';
 import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
 import QueryResultPreview from './QueryResultPreview';
 import StyledWrapper from './StyledWrapper';
 import { useState, useMemo, useEffect } from 'react';
 import { useTheme } from 'providers/Theme/index';
 import { getEncoding, uuid } from 'utils/common/index';
-
-const formatResponse = (data, dataBuffer, encoding, mode, filter) => {
-  if (data === undefined || !dataBuffer || !mode) {
-    return '';
-  }
-
-  // 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 = iconv.decode(
-    Buffer.from(dataBuffer, "base64"),
-    iconv.encodingExists(encoding) ? encoding : "utf-8"
-  );
-
-  if (mode.includes('json')) {
-    try {
-      JSON.parse(rawData);
-    } catch (error) {
-      // 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) {
-      try {
-        data = JSONPath({ path: filter, json: data });
-      } catch (e) {
-        console.warn('Could not apply JSONPath filter:', e.message);
-      }
-    }
-
-    return safeStringifyJSON(data, true);
-  }
-
-  if (mode.includes('xml')) {
-    let parsed = safeParseXML(data, { collapseContent: true });
-    if (typeof parsed === 'string') {
-      return parsed;
-    }
-    return safeStringifyJSON(parsed, true);
-  }
-
-  if (typeof data === 'string') {
-    return data;
-  }
-
-  return safeStringifyJSON(data, true);
-};
+import { formatResponse } from './utils';
 
 const formatErrorMessage = (error) => {
   if (!error) return 'Something went wrong';

packages/bruno-app/src/components/ResponsePane/QueryResult/utils.js

@@ -0,0 +1,62 @@
+import { JSONPath } from 'jsonpath-plus';
+import { decode } from '@msgpack/msgpack';
+import iconv from 'iconv-lite';
+import { safeParseXML, safeStringifyJSON } from 'utils/common/index';
+
+export const formatResponse = (data, dataBuffer, encoding, mode, filter) => {
+  if (data === undefined || !dataBuffer || !mode) {
+    return '';
+  }
+
+  // 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 = iconv.decode(
+    Buffer.from(dataBuffer, "base64"),
+    iconv.encodingExists(encoding) ? encoding : "utf-8"
+  );
+
+  if (mode.includes('json')) {
+    try {
+      JSON.parse(rawData);
+    } catch (error) {
+      // 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) {
+      try {
+        data = JSONPath({ path: filter, json: data });
+      } catch (e) {
+        console.warn('Could not apply JSONPath filter:', e.message);
+      }
+    }
+
+    return safeStringifyJSON(data, true);
+  }
+
+  if (mode.includes('xml')) {
+    let parsed = safeParseXML(data, { collapseContent: true });
+    if (typeof parsed === 'string') {
+      return parsed;
+    }
+    return safeStringifyJSON(parsed, true);
+  }
+
+  if (mode.includes('msgpack')) {
+    try {
+      const decodedData = decode(Buffer.from(dataBuffer, "base64"));
+      return safeStringifyJSON(decodedData, true);
+    } catch (error) {
+      console.warn('Error decoding msgpack data:', error);
+      return rawData;
+    }
+  }
+
+  if (typeof data === 'string') {
+    return data;
+  }
+
+  return safeStringifyJSON(data, true);
+};

packages/bruno-app/src/components/ResponsePane/QueryResult/utils.spec.js

@@ -0,0 +1,26 @@
+const { describe, it, expect } = require('@jest/globals');
+
+import { formatResponse } from './utils';
+
+describe('formatResponse', () => {
+  describe('msgpack', () => {
+    it('should decode msgpack data and return a formatted string', () => {
+      const dataBuffer = Buffer.from([0x81, 0xa3, 0x66, 0x6f, 0x6f, 0xa3, 0x62, 0x61, 0x72]);
+      const encoding = 'utf-8';
+      const mode = 'msgpack';
+      const result = formatResponse(null, dataBuffer.toString('base64'), encoding, mode);
+      expect(result).toBe(`{
+  "foo": "bar"
+}`
+        );
+      });
+
+    it('should show raw data when invalid msgpack', () => {
+      const dataBuffer = Buffer.from([0x81, 0xa3, 0x66, 0x6f, 0x6f]);
+      const encoding = 'utf-8';
+      const mode = 'msgpack';
+      const result = formatResponse(null, dataBuffer.toString('base64'), encoding, mode);
+      expect(result).toBe('��foo');
+    });
+  })
+});

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

@@ -171,6 +171,8 @@ export const getCodeMirrorModeBasedOnContentType = (contentType, body) => {
     return 'application/xml';
   } else if (contentType.includes('yaml')) {
     return 'application/yaml';
+  } else if (contentType.includes('msgpack')) {
+    return 'application/msgpack';
   } else {
     return 'application/text';
   }