feat: add json body prettify

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

@@ -6,12 +6,15 @@ import { useDispatch } from 'react-redux';
 import { updateRequestBodyMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestBodyMode } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
+import { updateRequestBody } from 'providers/ReduxStore/slices/collections/index';
+import { toastError } from 'utils/common/error';
 
 const RequestBodyMode = ({ item, collection }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
+  const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
+  const bodyMode = body?.mode;
 
   const Icon = forwardRef((props, ref) => {
     return (
@@ -31,6 +34,24 @@ const RequestBodyMode = ({ item, collection }) => {
     );
   };
 
+  const onPrettify = () => {
+    if (body?.json && bodyMode === 'json') {
+      try {
+        const bodyJson = JSON.parse(body.json);
+        const prettyBodyJson = JSON.stringify(bodyJson, null, 2);
+        dispatch(
+          updateRequestBody({
+            content: prettyBodyJson,
+            itemUid: item.uid,
+            collectionUid: collection.uid
+          })
+        );
+      } catch (e) {
+        toastError(new Error('Unable to prettify. Invalid JSON format.'));
+      }
+    }
+  };
+
   return (
     <StyledWrapper>
       <div className="inline-flex items-center cursor-pointer body-mode-selector">
@@ -103,6 +124,11 @@ const RequestBodyMode = ({ item, collection }) => {
           </div>
         </Dropdown>
       </div>
+      {bodyMode === 'json' && (
+        <button className="ml-1" onClick={onPrettify}>
+          Prettify
+        </button>
+      )}
     </StyledWrapper>
   );
 };