Merge branch 'main' into feature/proxy-global-and-collection

# Conflicts:
#	packages/bruno-electron/src/ipc/network/index.js

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js

@@ -5,7 +5,7 @@ import { toastError } from 'utils/common/error';
 import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
 import CreateEnvironment from '../CreateEnvironment';
-import { IconUpload } from '@tabler/icons';
+import { IconDownload } from '@tabler/icons';
 import ImportEnvironment from '../ImportEnvironment';
 import StyledWrapper from './StyledWrapper';
 
@@ -73,7 +73,7 @@ const EnvironmentList = ({ collection }) => {
             </div>
 
             <div className="mt-auto flex items-center btn-import-environment" onClick={() => setOpenImportModal(true)}>
-              <IconUpload size={12} strokeWidth={2} />
+              <IconDownload size={12} strokeWidth={2} />
               <span className="label ml-1 text-xs">Import</span>
             </div>
           </div>

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

@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   font-size: 0.8125rem;
 
   .body-mode-selector {
-    background: ${(props) => props.theme.requestTabPanel.bodyModeSelect.color};
+    background: transparent;
     border-radius: 3px;
 
     .dropdown-item {
@@ -15,6 +15,10 @@ const Wrapper = styled.div`
     .label-item {
       padding: 0.2rem 0.6rem !important;
     }
+
+    .selected-body-mode {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
   }
 
   .caret {

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

@@ -6,16 +6,19 @@ 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 (
-      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none">
+      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
         {humanizeRequestBodyMode(bodyMode)} <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
       </div>
     );
@@ -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>
   );
 };

packages/bruno-app/src/components/Welcome/index.js

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { useDispatch } from 'react-redux';
 import { openCollection, importCollection } from 'providers/ReduxStore/slices/collections/actions';
-import { IconBrandGithub, IconPlus, IconUpload, IconFolders, IconSpeakerphone, IconBook } from '@tabler/icons';
+import { IconBrandGithub, IconPlus, IconDownload, IconFolders, IconSpeakerphone, IconBook } from '@tabler/icons';
 
 import Bruno from 'components/Bruno';
 import CreateCollection from 'components/Sidebar/CreateCollection';
@@ -69,7 +69,7 @@ const Welcome = () => {
           <span className="label ml-2">Open Collection</span>
         </div>
         <div className="flex items-center ml-6" onClick={() => setImportCollectionModalOpen(true)}>
-          <IconUpload size={18} strokeWidth={2} />
+          <IconDownload size={18} strokeWidth={2} />
           <span className="label ml-2" id="import-collection">
             Import Collection
           </span>

packages/bruno-electron/src/ipc/network/index.js

@@ -748,7 +748,7 @@ const registerNetworkIpc = (mainWindow) => {
               get(collectionRoot, 'request.script.res'),
               get(request, 'script.res')
             ]).join(os.EOL);
-            if (responseScript?.length) {
+            if (responseScript && responseScript.length) {
               const scriptRuntime = new ScriptRuntime();
               const result = await scriptRuntime.runResponseScript(
                 decomment(responseScript),