Fix: Passing the raw decoded data to Res-preview and avoid decoding twice

- Replace jsonc-parser with custom JSON formatting in Response-preview
- JSON-Format only first 5MiB of response to prevent blocking render
- Add a missing useMemo in QueryResult

Co-authored-by: Pragadesh-45 <temporaryg7904@gmail.com>

package-lock.json

@@ -25052,7 +25052,6 @@
         "graphql-request": "^3.7.0",
         "httpsnippet": "^3.0.9",
         "i18next": "24.1.2",
-        "iconv-lite": "^0.6.3",
         "idb": "^7.0.0",
         "immer": "^9.0.15",
         "jsesc": "^3.0.2",

packages/bruno-app/package.json

@@ -36,7 +36,6 @@
     "graphql-request": "^3.7.0",
     "httpsnippet": "^3.0.9",
     "i18next": "24.1.2",
-    "iconv-lite": "^0.6.3",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
     "jsesc": "^3.0.2",

packages/bruno-app/src/components/PathDisplay/StyledWrapper.js

@@ -24,7 +24,7 @@ const StyledWrapper = styled.div`
     }
 
     
-    .filename, .file-extension {
+    .name-container, .file-extension {
       color: ${(props) => props.theme.colors.text.yellow};
     }
 

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

@@ -4,36 +4,17 @@ import path from 'utils/common/path';
 import StyledWrapper from './StyledWrapper';
 
 const PathDisplay = ({ 
-  collection,
-  dirName = '',
-  baseName = ''
+  baseName = '',
+  iconType = 'file'
 }) => {
-  const extName = path.extname(baseName)
-  const hasExtension = Boolean(extName);
-  const pathSegments = dirName?.split(path.sep).filter(Boolean);
-
   return (
     <StyledWrapper>
         <div className="path-display mt-2">
         <div className="path-layout flex font-mono">
           <div className="icon-column flex">
-            {hasExtension ? <IconFile size={16} /> : <IconFolder size={16} />} 
+            {iconType === 'file' ? <IconFile size={16} /> : <IconFolder size={16} />} 
           </div>
-          {collection?.name && (
-            <div className="path-segment collection-segment">
-              {collection.name}
-              <span className="separator">/</span>
-            </div>
-          )}
-          {pathSegments?.map((segment, index) => (
-            <React.Fragment key={index}>
-              <div className="path-segment">
-                {segment}
-              </div>
-              <span className="separator">/</span>
-            </React.Fragment>
-          ))}
-          <span className="filename">
+          <span className="name-container">
             {baseName}
           </span>
         </div>

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

@@ -46,7 +46,7 @@ const Preferences = ({ onClose }) => {
   return (
     <StyledWrapper>
       <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className='flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem]'>
+        <div className='flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2'>
           <div className="flex flex-col items-center tabs" role="tablist">
             <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
               General

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

@@ -3,7 +3,6 @@ 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 { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
 import QueryResultPreview from './QueryResultPreview';
@@ -12,26 +11,18 @@ import { useState, useMemo, useEffect } from 'react';
 import { useTheme } from 'providers/Theme/index';
 import { getEncoding, prettifyJson, uuid } from 'utils/common/index';
 
-const formatResponse = (data, dataBuffer, encoding, mode, filter) => {
-  if (data === undefined || !dataBuffer) {
+const formatResponse = (data, dataRaw, mode, filter) => {
+  if (data === undefined || !dataRaw) {
     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);
+      JSON.parse(dataRaw);
     } 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;
+      return dataRaw;
     }
 
     if (filter) {
@@ -45,7 +36,7 @@ const formatResponse = (data, dataBuffer, encoding, mode, filter) => {
 
     // Prettify the JSON string directly instead of parse->stringify to avoid
     // issues like rounding numbers bigger than Number.MAX_SAFE_INTEGER etc.
-    return prettifyJson(rawData);
+    return prettifyJson(dataRaw);
   }
 
   if (mode.includes('xml')) {
@@ -60,7 +51,7 @@ const formatResponse = (data, dataBuffer, encoding, mode, filter) => {
     return data;
   }
 
-  return prettifyJson(rawData);
+  return prettifyJson(dataRaw);
 };
 
 const formatErrorMessage = (error) => {
@@ -76,11 +67,14 @@ const formatErrorMessage = (error) => {
   return error;
 };
 
-const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEventListener, headers, error }) => {
+const QueryResult = ({ item, collection, data, dataBuffer, dataRaw, width, disableRunEventListener, headers, error }) => {
   const contentType = getContentType(headers);
   const mode = getCodeMirrorModeBasedOnContentType(contentType, data);
   const [filter, setFilter] = useState(null);
-  const formattedData = formatResponse(data, dataBuffer, getEncoding(headers), mode, filter);
+  const formattedData = useMemo(
+    () => formatResponse(data, dataRaw, mode, filter),
+    [data, dataRaw, mode, filter]
+  );
   const { displayedTheme } = useTheme();
 
   const debouncedResultFilterOnChange = debounce((e) => {

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

@@ -53,6 +53,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
             width={rightPaneWidth}
             data={response.data}
             dataBuffer={response.dataBuffer}
+            dataRaw={response.dataRaw}
             headers={response.headers}
             error={response.error}
             key={item.filename}

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

@@ -35,6 +35,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
             disableRunEventListener={true}
             data={responseReceived.data}
             dataBuffer={responseReceived.dataBuffer}
+            dataRaw={responseReceived.dataRaw}
             headers={responseReceived.headers}
             error={error}
             key={item.filename}

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/StyledWrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .advanced-options {
+    .caret {
+      color: ${(props) => props.theme.textLink};
+      fill: ${(props) => props.theme.textLink};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, forwardRef } from 'react';
 import toast from 'react-hot-toast';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
@@ -6,11 +6,14 @@ import Modal from 'components/Modal';
 import { useDispatch } from 'react-redux';
 import { isItemAFolder } from 'utils/tabs';
 import { cloneItem } from 'providers/ReduxStore/slices/collections/actions';
-import { IconArrowBackUp, IconEdit } from "@tabler/icons";
+import { IconArrowBackUp, IconEdit, IconCaretDown } from "@tabler/icons";
 import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
 import Help from 'components/Help';
 import PathDisplay from 'components/PathDisplay/index';
 import path from 'utils/common/path';
+import Portal from 'components/Portal';
+import Dropdown from 'components/Dropdown';
+import StyledWrapper from './StyledWrapper';
 
 const CloneCollectionItem = ({ collection, item, onClose }) => {
   const dispatch = useDispatch();
@@ -19,6 +22,11 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
   const [isEditing, toggleEditing] = useState(false);
   const itemName = item?.name;
   const itemType = item?.type;
+  const [showFilesystemName, toggleShowFilesystemName] = useState(false);
+
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -58,112 +66,159 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
     }
   }, [inputRef]);
 
-  const onSubmit = () => formik.handleSubmit();
+  const AdvancedOptions = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex mr-2 text-link cursor-pointer items-center">
+        <button
+          className="btn-advanced"
+          type="button"
+        >
+          Options
+        </button>
+        <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
+      </div>
+    );
+  });
 
   return (
-    <Modal
-      size="md"
-      title={`Clone ${isFolder ? 'Folder' : 'Request'}`}
-      confirmText="Clone"
-      handleConfirm={onSubmit}
-      handleCancel={onClose}
-    >
-      <form className="bruno-form" onSubmit={e => e.preventDefault()}>
-        <div>
-          <label htmlFor="name" className="block font-semibold">
-            Name
-          </label>
-          <input
-            id="collection-item-name"
-            type="text"
-            name="name"
-            placeholder='Enter Item name'
-            ref={inputRef}
-            className="block textbox mt-2 w-full"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={e => {
-              formik.setFieldValue('name', e.target.value);
-              !isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));
-            }}
-            value={formik.values.name || ''}
-          />
-          {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
-        </div>
-        <div className="mt-4">
-          <div className="flex items-center justify-between">
-            <label htmlFor="filename" className="flex items-center font-semibold">
-              {isFolder ? 'Folder' : 'File'} Name
-              { isFolder ? (
-                <Help width="300">
-                  <p>
-                    Bruno stores folders in the UI as folders on your filesystem.
-                  </p>
-                  <p className="mt-2">
-                    You can specify a custom folder name if you'd prefer a different name or need one compatible with filesystem rules.
-                  </p>
-                </Help>
-              ) : (
-                <Help width="300">
-                  <p>
-                    Bruno saves each request as a file in your collection's folder.
-                  </p>
-                  <p className="mt-2">
-                    You can choose a file name different from your request's name or one compatible with filesystem rules.
-                  </p>
-                </Help>
-              )}
-            </label>
-            {isEditing ? (
-              <IconArrowBackUp 
-                className="cursor-pointer opacity-50 hover:opacity-80" 
-                size={16} 
-                strokeWidth={1.5} 
-                onClick={() => toggleEditing(false)} 
-              />
-            ) : (
-              <IconEdit
-                  className="cursor-pointer opacity-50 hover:opacity-80" 
-                  size={16} 
-                  strokeWidth={1.5}
-                  onClick={() => toggleEditing(true)} 
-                />
-            )}
-          </div>
-          {isEditing ? (
-            <div className='relative flex flex-row gap-1 items-center justify-between'>
+    <Portal>
+      <StyledWrapper>
+        <Modal
+          size="md"
+          title={`Clone ${isFolder ? 'Folder' : 'Request'}`}
+          handleCancel={onClose}
+          hideFooter
+        >
+          <form className="bruno-form" onSubmit={formik.handleSubmit}>
+            <div>
+              <label htmlFor="name" className="block font-semibold">
+                {isFolder ? 'Folder' : 'Request'} Name
+              </label>
               <input
-                id="file-name"
+                id="collection-item-name"
                 type="text"
-                name="filename"
-                placeholder={isFolder ? 'Folder Name' : 'File Name'}
-                className={`!pr-10 block textbox mt-2 w-full`}
+                name="name"
+                placeholder='Enter Item name'
+                ref={inputRef}
+                className="block textbox mt-2 w-full"
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck="false"
-                onChange={formik.handleChange}
-                value={formik.values.filename || ''}
+                onChange={e => {
+                  formik.setFieldValue('name', e.target.value);
+                  !isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));
+                }}
+                value={formik.values.name || ''}
               />
-              {itemType !== 'folder' && <span className='absolute right-2 top-4 flex justify-center items-center file-extension'>.bru</span>}
+              {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
             </div>
-          ) : (
-            <div className='relative flex flex-row gap-1 items-center justify-between'>
-              <PathDisplay
-                collection={collection}
-                dirName={path.relative(collection?.pathname, path.dirname(item?.pathname))}
-                baseName={formik.values.filename}
-              />
+            
+            {showFilesystemName && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="filename" className="flex items-center font-semibold">
+                    {isFolder ? 'Folder' : 'File'} Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+                    { isFolder ? (
+                      <Help width="300">
+                        <p>
+                          You can choose to save the folder as a different name on your file system versus what is displayed in the app.
+                        </p>
+                      </Help>
+                    ) : (
+                      <Help width="300">
+                        <p>
+                          Bruno saves each request as a file in your collection's folder.
+                        </p>
+                        <p className="mt-2">
+                          You can choose a file name different from your request's name or one compatible with filesystem rules.
+                        </p>
+                      </Help>
+                    )}
+                  </label>
+                  {isEditing ? (
+                    <IconArrowBackUp 
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5} 
+                      onClick={() => toggleEditing(false)} 
+                    />
+                  ) : (
+                    <IconEdit
+                        className="cursor-pointer opacity-50 hover:opacity-80" 
+                        size={16} 
+                        strokeWidth={1.5}
+                        onClick={() => toggleEditing(true)} 
+                      />
+                  )}
+                </div>
+                {isEditing ? (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <input
+                      id="file-name"
+                      type="text"
+                      name="filename"
+                      placeholder={isFolder ? 'Folder Name' : 'File Name'}
+                      className={`!pr-10 block textbox mt-2 w-full`}
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      onChange={formik.handleChange}
+                      value={formik.values.filename || ''}
+                    />
+                    {itemType !== 'folder' && <span className='absolute right-2 top-4 flex justify-center items-center file-extension'>.bru</span>}
+                  </div>
+                ) : (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <PathDisplay
+                      collection={collection}
+                      dirName={path.relative(collection?.pathname, path.dirname(item?.pathname))}
+                      baseName={formik.values.filename}
+                    />
+                  </div>
+                )}
+                {formik.touched.filename && formik.errors.filename ? (
+                  <div className="text-red-500">{formik.errors.filename}</div>
+                ) : null}
+              </div>
+            )}
+
+            <div className="flex justify-between items-center mt-8 bruno-modal-footer">
+              <div className='flex advanced-options'>
+                <Dropdown onCreate={onDropdownCreate} icon={<AdvancedOptions />} placement="bottom-start">
+                  <div 
+                    className="dropdown-item"
+                    key="show-filesystem-name"
+                    onClick={(e) => {
+                      dropdownTippyRef.current.hide();
+                      toggleShowFilesystemName(!showFilesystemName);
+                    }}
+                  >
+                    {showFilesystemName ? 'Hide Filesystem Name' : 'Show Filesystem Name'}
+                  </div>
+                </Dropdown>
+              </div>
+              <div className='flex justify-end'>
+                <span className='mr-2'>
+                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
+                    Cancel
+                  </button>
+                </span>
+                <span>
+                  <button
+                    type="submit"
+                    className="submit btn btn-md btn-secondary"
+                  >
+                    Clone
+                  </button>
+                </span>
+              </div>
             </div>
-          )}
-          {formik.touched.filename && formik.errors.filename ? (
-            <div className="text-red-500">{formik.errors.filename}</div>
-          ) : null}
-        </div>
-      </form>
-    </Modal>
+          </form>
+        </Modal>
+      </StyledWrapper>
+    </Portal>
   );
 };
 

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemInfo/index.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import Modal from 'components/Modal';
-import path from 'utils/common/path';
+import Help from 'components/Help';
+
+const CollectionItemInfo = ({ item, onClose }) => {
+  const { name, filename, type } = item;
 
-const CollectionItemInfo = ({ collection, item, onClose }) => {
-  const { pathname: collectionPathname } = collection;
-  const { name, filename, pathname, type } = item;
-  const relativePathname = path.relative(collectionPathname, pathname);
   return (
     <Modal
       size="md"
@@ -14,24 +13,43 @@ const CollectionItemInfo = ({ collection, item, onClose }) => {
       hideCancel={true}
       hideFooter={true}
     >
-        <div className="w-fit flex flex-col h-full">
-            <table className="w-full border-collapse">
-                <tbody>
-                <tr className="">
-                    <td className="py-2 px-2 text-right opacity-50">Name&nbsp;:</td>
-                    <td className="py-2 px-2 text-nowrap truncate max-w-[500px]" title={name}>{name}</td>
-                </tr>
-                <tr className="">
-                    <td className="py-2 px-2 text-right opacity-50">{type=='folder' ? 'Directory Name' : 'File Name'}&nbsp;:</td>
-                    <td className="py-2 px-2 break-all text-nowrap truncate max-w-[500px]" title={filename}>{filename}</td>
-                </tr>
-                <tr className="">
-                    <td className="py-2 px-2 text-right opacity-50">Pathname&nbsp;:</td>
-                    <td className="py-2 px-2 break-all text-nowrap truncate max-w-[500px]" title={relativePathname}>{relativePathname}</td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
+      <div className="w-fit flex flex-col h-full">
+        <table className="w-full border-collapse">
+          <tbody>
+          <tr className="">
+            <td className="py-2 px-2 text-left text-muted ">
+              {type=='folder' ? 'Folder Name' : 'Request Name'}
+            </td>
+            <td className="py-2 px-2 text-nowrap truncate max-w-[500px]" title={name}>
+              <span className="mr-2">:</span>{name}
+            </td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-left text-muted flex items-center">
+              {type == 'folder' ? 'Folder Name' : 'File Name'}
+              <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+              {type == 'folder' ? (
+                <Help width="300">
+                  <p>
+                    The name of the folder on your filesystem.
+                  </p>
+                </Help>
+              ) : (
+                <Help width="300">
+                  <p>
+                    Bruno saves each request as a file in your collection's folder.
+                  </p>
+                </Help>
+              )}
+            </td>
+            <td className="py-2 px-2 break-all text-nowrap truncate max-w-[500px]" title={filename}>
+              <span className="mr-2">:</span>
+              {filename}
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
     </Modal>
   );
 };

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/StyledWrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .advanced-options {
+    .caret {
+      color: ${(props) => props.theme.textLink};
+      fill: ${(props) => props.theme.textLink};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, forwardRef } from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import Modal from 'components/Modal';
@@ -6,12 +6,15 @@ import { useDispatch } from 'react-redux';
 import { isItemAFolder } from 'utils/tabs';
 import { renameItem, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import path from 'utils/common/path';
-import { IconArrowBackUp, IconEdit } from '@tabler/icons';
+import { IconArrowBackUp, IconEdit, IconCaretDown } from '@tabler/icons';
 import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import { closeTabs } from 'providers/ReduxStore/slices/tabs';
 import Help from 'components/Help';
 import PathDisplay from 'components/PathDisplay';
+import Portal from 'components/Portal';
+import Dropdown from 'components/Dropdown';
+import StyledWrapper from './StyledWrapper';
 
 const RenameCollectionItem = ({ collection, item, onClose }) => {
   const dispatch = useDispatch();
@@ -21,6 +24,11 @@ const RenameCollectionItem = ({ collection, item, onClose }) => {
   const itemName = item?.name;
   const itemType = item?.type;
   const itemFilename = item?.filename ? path.parse(item?.filename).name : '';
+  const [showFilesystemName, toggleShowFilesystemName] = useState(false);
+
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -78,112 +86,157 @@ const RenameCollectionItem = ({ collection, item, onClose }) => {
     }
   }, [inputRef]);
 
-  const onSubmit = () => formik.handleSubmit();
+  const AdvancedOptions = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex mr-2 text-link cursor-pointer items-center">
+        <button
+          className="btn-advanced"
+          type="button"
+        >
+          Options
+        </button>
+        <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
+      </div>
+    );
+  });
 
   return (
-    <Modal
-      size="md"
-      title={`Rename ${isFolder ? 'Folder' : 'Request'}`}
-      confirmText="Rename"
-      handleConfirm={onSubmit}
-      handleCancel={onClose}
-    >
-      <form className="bruno-form" onSubmit={e => {e.preventDefault()}}>
-        <div className='flex flex-col mt-2'>
-          <label htmlFor="name" className="block font-semibold">
-            Name
-          </label>
-          <input
-            id="collection-item-name"
-            type="text"
-            name="name"
-            ref={inputRef}
-            className="block textbox mt-2 w-full"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={e => {
-              formik.setFieldValue('name', e.target.value);
-              !isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));
-            }}
-            value={formik.values.name || ''}
-          />
-          {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
-        </div>
-
-        <div className="mt-4">
-          <div className="flex items-center justify-between">
-            <label htmlFor="filename" className="flex items-center font-semibold">
-              {isFolder ? 'Folder' : 'File'} Name
-              { isFolder ? (
-                <Help width="300">
-                  <p>
-                    Bruno stores folders in the UI as folders on your filesystem.
-                  </p>
-                  <p className="mt-2">
-                    You can specify a custom folder name if you'd prefer a different name or need one compatible with filesystem rules.
-                  </p>
-                </Help>
-              ) : (
-                <Help width="300">
-                  <p>
-                    Bruno saves each request as a file in your collection's folder.
-                  </p>
-                  <p className="mt-2">
-                    You can choose a file name different from your request's name or one compatible with filesystem rules.
-                  </p>
-                </Help>
-              )}
-            </label>
-            {isEditing ? (
-              <IconArrowBackUp 
-                className="cursor-pointer opacity-50 hover:opacity-80"
-                size={16} 
-                strokeWidth={1.5} 
-                onClick={() => toggleEditing(false)} 
-              />
-            ) : (
-              <IconEdit
-                className="cursor-pointer opacity-50 hover:opacity-80" 
-                size={16} 
-                strokeWidth={1.5}
-                onClick={() => toggleEditing(true)} 
-              />
-            )}
-          </div>
-          {isEditing ? (
-            <div className='relative flex flex-row gap-1 items-center justify-between'>
+    <Portal>
+      <StyledWrapper>
+        <Modal
+          size="md"
+          title={`Rename ${isFolder ? 'Folder' : 'Request'}`}
+          handleCancel={onClose}
+          hideFooter
+        >
+          <form className="bruno-form" onSubmit={formik.handleSubmit}>
+            <div className='flex flex-col mt-2'>
+              <label htmlFor="name" className="block font-semibold">
+                {isFolder ? 'Folder' : 'Request'} Name
+              </label>
               <input
-                id="file-name"
+                id="collection-item-name"
                 type="text"
-                name="filename"
-                placeholder={isFolder ? 'Folder Name' : 'File Name'}
-                className={`!pr-10 block textbox mt-2 w-full`}
+                name="name"
+                ref={inputRef}
+                className="block textbox mt-2 w-full"
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck="false"
-                onChange={formik.handleChange}
-                value={formik.values.filename || ''}
+                onChange={e => {
+                  formik.setFieldValue('name', e.target.value);
+                  !isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));
+                }}
+                value={formik.values.name || ''}
               />
-              {itemType !== 'folder' && <span className='absolute right-2 top-4 flex justify-center items-center file-extension'>.bru</span>}
+              {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
             </div>
-          ) : (
-            <div className='relative flex flex-row gap-1 items-center justify-between'>
-              <PathDisplay
-                collection={collection}
-                dirName={path.relative(collection?.pathname, path.dirname(item?.pathname))}
-                baseName={formik.values.filename}
-              />
+
+            {showFilesystemName && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="filename" className="flex items-center font-semibold">
+                    {isFolder ? 'Folder' : 'File'} Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+                    { isFolder ? (
+                      <Help width="300">
+                        <p>
+                          You can choose to save the folder as a different name on your file system versus what is displayed in the app.
+                        </p>
+                      </Help>
+                    ) : (
+                      <Help width="300">
+                        <p>
+                          Bruno saves each request as a file in your collection's folder.
+                        </p>
+                        <p className="mt-2">
+                          You can choose a file name different from your request's name or one compatible with filesystem rules.
+                        </p>
+                      </Help>
+                    )}
+                  </label>
+                  {isEditing ? (
+                    <IconArrowBackUp 
+                      className="cursor-pointer opacity-50 hover:opacity-80"
+                      size={16} 
+                      strokeWidth={1.5} 
+                      onClick={() => toggleEditing(false)} 
+                    />
+                  ) : (
+                    <IconEdit
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5}
+                      onClick={() => toggleEditing(true)} 
+                    />
+                  )}
+                </div>
+                {isEditing ? (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <input
+                      id="file-name"
+                      type="text"
+                      name="filename"
+                      placeholder={isFolder ? 'Folder Name' : 'File Name'}
+                      className={`!pr-10 block textbox mt-2 w-full`}
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      onChange={formik.handleChange}
+                      value={formik.values.filename || ''}
+                    />
+                    {itemType !== 'folder' && <span className='absolute right-2 top-4 flex justify-center items-center file-extension'>.bru</span>}
+                  </div>
+                ) : (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <PathDisplay
+                      collection={collection}
+                      dirName={path.relative(collection?.pathname, path.dirname(item?.pathname))}
+                      baseName={formik.values.filename}
+                    />
+                  </div>
+                )}
+                {formik.touched.filename && formik.errors.filename ? (
+                  <div className="text-red-500">{formik.errors.filename}</div>
+                ) : null}
+              </div>
+            )}
+            <div className="flex justify-between items-center mt-8 bruno-modal-footer">
+              <div className='flex advanced-options'>
+                <Dropdown onCreate={onDropdownCreate} icon={<AdvancedOptions />} placement="bottom-start">
+                  <div 
+                    className="dropdown-item"
+                    key="show-filesystem-name"
+                    onClick={(e) => {
+                      dropdownTippyRef.current.hide();
+                      toggleShowFilesystemName(!showFilesystemName);
+                    }}
+                  >
+                    {showFilesystemName ? 'Hide Filesystem Name' : 'Show Filesystem Name'}
+                  </div>
+                </Dropdown>
+              </div>
+              <div className='flex justify-end'>
+                <span className='mr-2'>
+                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
+                    Cancel
+                  </button>
+                </span>
+                <span>
+                  <button
+                    type="submit"
+                    className="submit btn btn-md btn-secondary"
+                  >
+                    Rename
+                  </button>
+                </span>
+              </div>
             </div>
-          )}
-          {formik.touched.filename && formik.errors.filename ? (
-            <div className="text-red-500">{formik.errors.filename}</div>
-          ) : null}
-        </div>
-      </form>
-    </Modal>
+          </form>
+        </Modal>
+      </StyledWrapper>
+    </Portal>
   );
 };
 

packages/bruno-app/src/components/Sidebar/NewFolder/StyledWrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .advanced-options {
+    .caret {
+      color: ${(props) => props.theme.textLink};
+      fill: ${(props) => props.theme.textLink};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/NewFolder/index.js

@@ -1,19 +1,27 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, forwardRef } from 'react';
 import { useFormik } from 'formik';
 import toast from 'react-hot-toast';
 import * as Yup from 'yup';
+import Portal from 'components/Portal';
 import Modal from 'components/Modal';
 import { useDispatch } from 'react-redux';
 import { newFolder } from 'providers/ReduxStore/slices/collections/actions';
 import { IconArrowBackUp, IconEdit} from '@tabler/icons';
 import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
 import PathDisplay from 'components/PathDisplay/index';
-import path from "utils/common/path";
 import Help from 'components/Help';
+import Dropdown from "components/Dropdown";
+import { IconCaretDown } from "@tabler/icons";
+import StyledWrapper from './StyledWrapper';
+
 const NewFolder = ({ collection, item, onClose }) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
   const [isEditing, toggleEditing] = useState(false);
+  const [showFilesystemName, toggleShowFilesystemName] = useState(false);
+
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -59,96 +67,139 @@ const NewFolder = ({ collection, item, onClose }) => {
     }
   }, [inputRef]);
 
-  const onSubmit = () => formik.handleSubmit();
+  const AdvancedOptions = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex mr-2 text-link cursor-pointer items-center">
+        <button
+          className="btn-advanced"
+          type="button"
+        >
+          Options
+        </button>
+        <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
+      </div>
+    );
+  });
 
   return (
-    <Modal size="md" title="New Folder" confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div>
-          <label htmlFor="folderName" className="block font-semibold">
-            Name
-          </label>
-          <input
-            id="collection-name"
-            type="text"
-            name="folderName"
-            ref={inputRef}
-            className="block textbox mt-2 w-full"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={e => {
-              formik.setFieldValue('folderName', e.target.value);
-              !isEditing && formik.setFieldValue('directoryName', sanitizeName(e.target.value));
-            }}
-            value={formik.values.folderName || ''}
-          />
-          {formik.touched.folderName && formik.errors.folderName ? (
-            <div className="text-red-500">{formik.errors.folderName}</div>
-          ) : null}
-        </div>
-
-        <div className="mt-4">
-          <div className="flex items-center justify-between">
-            <label htmlFor="directoryName" className="flex items-center font-semibold">
+    <Portal>
+      <StyledWrapper>
+        <Modal size="md" title="New Folder" hideFooter={true} handleCancel={onClose}>
+          <form className="bruno-form" onSubmit={formik.handleSubmit}>
+            <label htmlFor="folderName" className="block font-semibold">
               Folder Name
-              <Help width="300">
-                <p>
-                  Bruno stores folders in the UI as folders on your filesystem.
-                </p>
-                <p className="mt-2">
-                  You can specify a custom folder name if you'd prefer a different name or need one compatible with filesystem rules.
-                </p>
-              </Help>
             </label>
-            {isEditing ? (
-              <IconArrowBackUp 
-                className="cursor-pointer opacity-50 hover:opacity-80" 
-                size={16} 
-                strokeWidth={1.5} 
-                onClick={() => toggleEditing(false)} 
-              />
-            ): (
-              <IconEdit
-                className="cursor-pointer opacity-50 hover:opacity-80" 
-                size={16} 
-                strokeWidth={1.5}
-                onClick={() => toggleEditing(true)} 
-              />
+            <input
+              id="collection-name"
+              type="text"
+              name="folderName"
+              ref={inputRef}
+              className="block textbox mt-2 w-full"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              onChange={e => {
+                formik.setFieldValue('folderName', e.target.value);
+                !isEditing && formik.setFieldValue('directoryName', sanitizeName(e.target.value));
+              }}
+              value={formik.values.folderName || ''}
+            />
+            {formik.touched.folderName && formik.errors.folderName ? (
+              <div className="text-red-500">{formik.errors.folderName}</div>
+            ) : null}
+
+            {showFilesystemName && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="directoryName" className="flex items-center font-semibold">
+                    Folder Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+                    <Help width="300">
+                      <p>
+                        You can choose to save the folder as a different name on your file system versus what is displayed in the app.
+                      </p>
+                    </Help>
+                  </label>
+                  {isEditing ? (
+                    <IconArrowBackUp 
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5} 
+                      onClick={() => toggleEditing(false)} 
+                    />
+                  ): (
+                    <IconEdit
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5}
+                      onClick={() => toggleEditing(true)} 
+                    />
+                  )}
+                </div>
+                {isEditing ? (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <input
+                      id="file-name"
+                      type="text"
+                      name="directoryName"
+                      placeholder="Folder Name"
+                      className={`block textbox mt-2 w-full`}
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      onChange={formik.handleChange}
+                      value={formik.values.directoryName || ''}
+                    />
+                  </div>
+                ) : (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <PathDisplay
+                      iconType="folder"
+                      baseName={formik.values.directoryName}
+                    />
+                  </div>
+                )}
+                {formik.touched.directoryName && formik.errors.directoryName ? (
+                  <div className="text-red-500">{formik.errors.directoryName}</div>
+                ) : null}
+              </div>
             )}
-          </div>
-          {isEditing ? (
-            <div className='relative flex flex-row gap-1 items-center justify-between'>
-              <input
-                id="file-name"
-                type="text"
-                name="directoryName"
-                placeholder="Directory Name"
-                className={`block textbox mt-2 w-full`}
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                onChange={formik.handleChange}
-                value={formik.values.directoryName || ''}
-              />
+            <div className="flex justify-between items-center mt-8 bruno-modal-footer">
+              <div className='flex advanced-options'>
+                <Dropdown onCreate={onDropdownCreate} icon={<AdvancedOptions />} placement="bottom-start">
+                  <div 
+                    className="dropdown-item"
+                    key="show-filesystem-name"
+                    onClick={(e) => {
+                      dropdownTippyRef.current.hide();
+                      toggleShowFilesystemName(!showFilesystemName);
+                    }}
+                  >
+                    {showFilesystemName ? 'Hide Filesystem Name' : 'Show Filesystem Name'}
+                  </div>
+                </Dropdown>
+              </div>
+              <div className='flex justify-end'>
+                <span className='mr-2'>
+                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
+                    Cancel
+                  </button>
+                </span>
+                <span>
+                  <button
+                    type="submit"
+                    className="submit btn btn-md btn-secondary"
+                  >
+                    Create
+                  </button>
+                </span>
+              </div>
             </div>
-          ) : (
-            <div className='relative flex flex-row gap-1 items-center justify-between'>
-              <PathDisplay
-                collection={collection}
-                dirName={path.relative(collection?.pathname, item?.pathname || collection?.pathname)}
-                baseName={formik.values.directoryName}
-              />
-            </div>
-          )}
-          {formik.touched.directoryName && formik.errors.directoryName ? (
-            <div className="text-red-500">{formik.errors.directoryName}</div>
-          ) : null}
-        </div>
-      </form>
-    </Modal>
+          </form>
+        </Modal>
+      </StyledWrapper>
+    </Portal>
   );
 };
 

packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js

@@ -1,45 +1,53 @@
 import styled from 'styled-components';
 
- const StyledWrapper = styled.div`
-   div.method-selector-container {
-     border: solid 1px ${(props) => props.theme.modal.input.border};
-     border-right: none;
-     background-color: ${(props) => props.theme.modal.input.bg};
-     border-top-left-radius: 3px;
-     border-bottom-left-radius: 3px;
-     .method-selector {
-       min-width: 80px;
-     }
-   }
-   div.method-selector-container,
-   div.input-container {
-     background-color: ${(props) => props.theme.modal.input.bg};
-     height: 2.3rem;
-   }
-   div.input-container {
-     border: solid 1px ${(props) => props.theme.modal.input.border};
-     border-top-right-radius: 3px;
-     border-bottom-right-radius: 3px;
-     input {
-       background-color: ${(props) => props.theme.modal.input.bg};
-       outline: none;
-       box-shadow: none;
-       &:focus {
-         outline: none !important;
-         box-shadow: none !important;
-       }
-     }
-   }
-   textarea.curl-command {
-     min-height: 150px;
-   }
-   .dropdown {
-     width: fit-content;
-   
-    .dropdown-item {
-     padding: 0.2rem 0.6rem !important;
-     }
-   }
- `;
+const StyledWrapper = styled.div`
+  div.method-selector-container {
+    border: solid 1px ${(props) => props.theme.modal.input.border};
+    border-right: none;
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    .method-selector {
+      min-width: 80px;
+    }
+  }
+  div.method-selector-container,
+  div.input-container {
+    background-color: ${(props) => props.theme.modal.input.bg};
+    height: 2.3rem;
+  }
+  div.input-container {
+    border: solid 1px ${(props) => props.theme.modal.input.border};
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    input {
+      background-color: ${(props) => props.theme.modal.input.bg};
+      outline: none;
+      box-shadow: none;
+      &:focus {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+    }
+  }
 
- export default StyledWrapper;
+  textarea.curl-command {
+    min-height: 150px;
+  }
+  .dropdown {
+    width: fit-content;
+  
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+  }
+
+  .advanced-options {
+    .caret {
+      color: ${(props) => props.theme.textLink};
+      fill: ${(props) => props.theme.textLink};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/NewRequest/index.js

@@ -16,6 +16,7 @@ import { IconArrowBackUp, IconCaretDown, IconEdit } from '@tabler/icons';
 import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
 import Dropdown from 'components/Dropdown';
 import PathDisplay from 'components/PathDisplay';
+import Portal from 'components/Portal';
 import Help from 'components/Help';
 import StyledWrapper from './StyledWrapper';
 
@@ -26,10 +27,14 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
     brunoConfig: { presets: collectionPresets = {} }
   } = collection;
   const [curlRequestTypeDetected, setCurlRequestTypeDetected] = useState(null);
+  const [showFilesystemName, toggleShowFilesystemName] = useState(false);
 
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
+  const advancedDropdownTippyRef = useRef();
+  const onAdvancedDropdownCreate = (ref) => (advancedDropdownTippyRef.current = ref);
+
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex items-center justify-end auth-type-label select-none">
@@ -231,230 +236,279 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
     }
   };
 
-  return (
-    <StyledWrapper>
-      <Modal size="md" title="New Request" confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
-        <form
-          className="bruno-form"
-          onSubmit={formik.handleSubmit}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              formik.handleSubmit();
-            }
-          }}
+  const AdvancedOptions = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex mr-2 text-link cursor-pointer items-center">
+        <button
+          className="btn-advanced"
+          type="button"
         >
-          <div>
-            <label htmlFor="requestName" className="block font-semibold">
-              Type
-            </label>
+          Options
+        </button>
+        <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
+      </div>
+    );
+  });
 
-            <div className="flex items-center mt-2">
-              <input
-                id="http-request"
-                className="cursor-pointer"
-                type="radio"
-                name="requestType"
-                onChange={formik.handleChange}
-                value="http-request"
-                checked={formik.values.requestType === 'http-request'}
-              />
-              <label htmlFor="http-request" className="ml-1 cursor-pointer select-none">
-                HTTP
+  return (
+    <Portal>
+      <StyledWrapper>
+        <Modal size="md" title="New Request" hideFooter handleCancel={onClose}>
+          <form
+            className="bruno-form"
+            onSubmit={formik.handleSubmit}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                formik.handleSubmit();
+              }
+            }}
+          >
+            <div>
+              <label htmlFor="requestName" className="block font-semibold">
+                Type
               </label>
 
-              <input
-                id="graphql-request"
-                className="ml-4 cursor-pointer"
-                type="radio"
-                name="requestType"
-                onChange={(event) => {
-                  formik.setFieldValue('requestMethod', 'POST');
-                  formik.handleChange(event);
-                }}
-                value="graphql-request"
-                checked={formik.values.requestType === 'graphql-request'}
-              />
-              <label htmlFor="graphql-request" className="ml-1 cursor-pointer select-none">
-                GraphQL
-              </label>
-
-              <input
-                id="from-curl"
-                className="cursor-pointer ml-auto"
-                type="radio"
-                name="requestType"
-                onChange={formik.handleChange}
-                value="from-curl"
-                checked={formik.values.requestType === 'from-curl'}
-              />
-
-              <label htmlFor="from-curl" className="ml-1 cursor-pointer select-none">
-                From cURL
-              </label>
-            </div>
-          </div>
-          <div className="mt-4">
-            <label htmlFor="requestName" className="block font-semibold">
-              Name
-            </label>
-            <input
-              id="request-name"
-              type="text"
-              name="requestName"
-              placeholder="Request Name"
-              ref={inputRef}
-              className="block textbox mt-2 w-full"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              onChange={e => {
-                formik.setFieldValue('requestName', e.target.value);
-                !isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));
-              }}
-              value={formik.values.requestName || ''}
-            />
-            {formik.touched.requestName && formik.errors.requestName ? (
-              <div className="text-red-500">{formik.errors.requestName}</div>
-            ) : null}
-          </div>
-          <div className="mt-4">
-            <div className="flex items-center justify-between">
-              <label htmlFor="filename" className="flex items-center font-semibold">
-                File Name
-                <Help width="300">
-                  <p>
-                    Bruno saves each request as a file in your collection's folder.
-                  </p>
-                  <p className="mt-2">
-                    You can choose a file name different from your request's name or one compatible with filesystem rules.
-                  </p>
-                </Help>
-              </label>
-              {isEditing ? (
-                <IconArrowBackUp 
-                  className="cursor-pointer opacity-50 hover:opacity-80" 
-                  size={16} 
-                  strokeWidth={1.5} 
-                  onClick={() => toggleEditing(false)} 
-                />
-              ) : (
-                <IconEdit
-                  className="cursor-pointer opacity-50 hover:opacity-80" 
-                  size={16} 
-                  strokeWidth={1.5} 
-                  onClick={() => toggleEditing(true)} 
-                />
-              )}
-            </div>
-            {isEditing ? (
-              <div className='relative flex flex-row gap-1 items-center justify-between'>
+              <div className="flex items-center mt-2">
                 <input
-                  id="file-name"
-                  type="text"
-                  name="filename"
-                  placeholder="File Name"
-                  className={`!pr-10 block textbox mt-2 w-full`}
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck="false"
+                  id="http-request"
+                  className="cursor-pointer"
+                  type="radio"
+                  name="requestType"
                   onChange={formik.handleChange}
-                  value={formik.values.filename || ''}
+                  value="http-request"
+                  checked={formik.values.requestType === 'http-request'}
                 />
-                <span className='absolute right-2 top-4 flex justify-center items-center file-extension'>.bru</span>
-              </div>
-            ) : (
-              <div className='relative flex flex-row gap-1 items-center justify-between'>
-                <PathDisplay
-                  collection={collection}
-                  dirName={path.relative(collection?.pathname, item?.pathname || collection?.pathname)}
-                  baseName={formik.values.filename? `${formik.values.filename}.bru` : ''}
-                />
-              </div>
-            )}
-            {formik.touched.filename && formik.errors.filename ? (
-              <div className="text-red-500">{formik.errors.filename}</div>
-            ) : null}
-          </div>
-          {formik.values.requestType !== 'from-curl' ? (
-            <>
-              <div className="mt-4">
-                <label htmlFor="request-url" className="block font-semibold">
-                  URL
+                <label htmlFor="http-request" className="ml-1 cursor-pointer select-none">
+                  HTTP
                 </label>
-                <div className="flex items-center mt-2 ">
-                  <div className="flex items-center h-full method-selector-container">
-                    <HttpMethodSelector
-                      method={formik.values.requestMethod}
-                      onMethodSelect={(val) => formik.setFieldValue('requestMethod', val)}
+
+                <input
+                  id="graphql-request"
+                  className="ml-4 cursor-pointer"
+                  type="radio"
+                  name="requestType"
+                  onChange={(event) => {
+                    formik.setFieldValue('requestMethod', 'POST');
+                    formik.handleChange(event);
+                  }}
+                  value="graphql-request"
+                  checked={formik.values.requestType === 'graphql-request'}
+                />
+                <label htmlFor="graphql-request" className="ml-1 cursor-pointer select-none">
+                  GraphQL
+                </label>
+
+                <input
+                  id="from-curl"
+                  className="cursor-pointer ml-auto"
+                  type="radio"
+                  name="requestType"
+                  onChange={formik.handleChange}
+                  value="from-curl"
+                  checked={formik.values.requestType === 'from-curl'}
+                />
+
+                <label htmlFor="from-curl" className="ml-1 cursor-pointer select-none">
+                  From cURL
+                </label>
+              </div>
+            </div>
+            <div className="mt-4">
+              <label htmlFor="requestName" className="block font-semibold">
+                Request Name
+              </label>
+              <input
+                id="request-name"
+                type="text"
+                name="requestName"
+                placeholder="Request Name"
+                ref={inputRef}
+                className="block textbox mt-2 w-full"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={e => {
+                  formik.setFieldValue('requestName', e.target.value);
+                  !isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));
+                }}
+                value={formik.values.requestName || ''}
+              />
+              {formik.touched.requestName && formik.errors.requestName ? (
+                <div className="text-red-500">{formik.errors.requestName}</div>
+              ) : null}
+            </div>
+            {showFilesystemName && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="filename" className="flex items-center font-semibold">
+                    File Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+                    <Help width="300">
+                      <p>
+                        Bruno saves each request as a file in your collection's folder.
+                      </p>
+                      <p className="mt-2">
+                        You can choose a file name different from your request's name or one compatible with filesystem rules.
+                      </p>
+                    </Help>
+                  </label>
+                  {isEditing ? (
+                    <IconArrowBackUp 
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5} 
+                      onClick={() => toggleEditing(false)} 
                     />
-                  </div>
-                  <div className="flex items-center flex-grow input-container h-full">
+                  ) : (
+                    <IconEdit
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5} 
+                      onClick={() => toggleEditing(true)} 
+                    />
+                  )}
+                </div>
+                {isEditing ? (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
                     <input
-                      id="request-url"
+                      id="file-name"
                       type="text"
-                      name="requestUrl"
-                      placeholder="Request URL"
-                      className="px-3 w-full "
+                      name="filename"
+                      placeholder="File Name"
+                      className={`!pr-10 block textbox mt-2 w-full`}
                       autoComplete="off"
                       autoCorrect="off"
                       autoCapitalize="off"
                       spellCheck="false"
                       onChange={formik.handleChange}
-                      value={formik.values.requestUrl || ''}
-                      onPaste={handlePaste}
+                      value={formik.values.filename || ''}
+                    />
+                    <span className='absolute right-2 top-4 flex justify-center items-center file-extension'>.bru</span>
+                  </div>
+                ) : (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <PathDisplay
+                      collection={collection}
+                      dirName={path.relative(collection?.pathname, item?.pathname || collection?.pathname)}
+                      baseName={formik.values.filename? `${formik.values.filename}.bru` : ''}
                     />
                   </div>
-                </div>
-                {formik.touched.requestUrl && formik.errors.requestUrl ? (
-                  <div className="text-red-500">{formik.errors.requestUrl}</div>
+                )}
+                {formik.touched.filename && formik.errors.filename ? (
+                  <div className="text-red-500">{formik.errors.filename}</div>
                 ) : null}
               </div>
-            </>
-          ) : (
-            <div className="mt-4">
-              <div className="flex justify-between">
-                <label htmlFor="request-url" className="block font-semibold">
-                  cURL Command
-                </label>
-                <Dropdown className="dropdown" onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-                  <div
-                    className="dropdown-item"
-                    onClick={() => {
-                      dropdownTippyRef.current.hide();
-                      curlRequestTypeChange('http-request');
-                    }}
-                  >
-                    HTTP
+            )}
+            {formik.values.requestType !== 'from-curl' ? (
+              <>
+                <div className="mt-4">
+                  <label htmlFor="request-url" className="block font-semibold">
+                    URL
+                  </label>
+                  <div className="flex items-center mt-2 ">
+                    <div className="flex items-center h-full method-selector-container">
+                      <HttpMethodSelector
+                        method={formik.values.requestMethod}
+                        onMethodSelect={(val) => formik.setFieldValue('requestMethod', val)}
+                      />
+                    </div>
+                    <div className="flex items-center flex-grow input-container h-full">
+                      <input
+                        id="request-url"
+                        type="text"
+                        name="requestUrl"
+                        placeholder="Request URL"
+                        className="px-3 w-full "
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        onChange={formik.handleChange}
+                        value={formik.values.requestUrl || ''}
+                        onPaste={handlePaste}
+                      />
+                    </div>
                   </div>
-                  <div
+                  {formik.touched.requestUrl && formik.errors.requestUrl ? (
+                    <div className="text-red-500">{formik.errors.requestUrl}</div>
+                  ) : null}
+                </div>
+              </>
+            ) : (
+              <div className="mt-4">
+                <div className="flex justify-between">
+                  <label htmlFor="request-url" className="block font-semibold">
+                    cURL Command
+                  </label>
+                  <Dropdown className="dropdown" onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+                    <div
+                      className="dropdown-item"
+                      onClick={() => {
+                        dropdownTippyRef.current.hide();
+                        curlRequestTypeChange('http-request');
+                      }}
+                    >
+                      HTTP
+                    </div>
+                    <div
+                      className="dropdown-item"
+                      onClick={() => {
+                        dropdownTippyRef.current.hide();
+                        curlRequestTypeChange('graphql-request');
+                      }}
+                    >
+                      GraphQL
+                    </div>
+                  </Dropdown>
+                </div>
+                <textarea
+                  name="curlCommand"
+                  placeholder="Enter cURL request here.."
+                  className="block textbox w-full mt-4 curl-command"
+                  value={formik.values.curlCommand}
+                  onChange={handleCurlCommandChange}
+                ></textarea>
+                {formik.touched.curlCommand && formik.errors.curlCommand ? (
+                  <div className="text-red-500">{formik.errors.curlCommand}</div>
+                ) : null}
+              </div>
+            )}
+            <div className="flex justify-between items-center mt-8 bruno-modal-footer">
+              <div className='flex advanced-options'>
+                <Dropdown onCreate={onAdvancedDropdownCreate} icon={<AdvancedOptions />} placement="bottom-start">
+                  <div 
                     className="dropdown-item"
-                    onClick={() => {
-                      dropdownTippyRef.current.hide();
-                      curlRequestTypeChange('graphql-request');
+                    key="show-filesystem-name"
+                    onClick={(e) => {
+                      advancedDropdownTippyRef.current.hide();
+                      toggleShowFilesystemName(!showFilesystemName);
                     }}
                   >
-                    GraphQL
+                    {showFilesystemName ? 'Hide Filesystem Name' : 'Show Filesystem Name'}
                   </div>
                 </Dropdown>
               </div>
-              <textarea
-                name="curlCommand"
-                placeholder="Enter cURL request here.."
-                className="block textbox w-full mt-4 curl-command"
-                value={formik.values.curlCommand}
-                onChange={handleCurlCommandChange}
-              ></textarea>
-              {formik.touched.curlCommand && formik.errors.curlCommand ? (
-                <div className="text-red-500">{formik.errors.curlCommand}</div>
-              ) : null}
+              <div className='flex justify-end'>
+                <span className='mr-2'>
+                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
+                    Cancel
+                  </button>
+                </span>
+                <span>
+                  <button
+                    type="submit"
+                    className="submit btn btn-md btn-secondary"
+                  >
+                    Create
+                  </button>
+                </span>
+              </div>
             </div>
-          )}
-        </form>
-      </Modal>
-    </StyledWrapper>
+          </form>
+        </Modal>
+      </StyledWrapper>
+    </Portal>
   );
 };
 

packages/bruno-app/src/styles/globals.css

@@ -145,7 +145,7 @@ body {
   font-kerning: none;
   text-rendering: optimizeSpeed;
   letter-spacing: normal;
-  font-family: Inter, sans-serif !important;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
   overflow-x: hidden;
 }
 

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

@@ -0,0 +1,83 @@
+/**
+ * Credits to
+ * - https://github.com/zaach/jsonlint/blob/master/lib/formatter.js
+ *   which is again copied from
+ * - https://github.com/umbrae/jsonlintdotcom/blob/master/c/js/jsl.format.js
+ *   both under MIT license.
+ **/
+
+
+/**
+ * Provide json reformatting in a character-by-character approach, so that even invalid JSON may be reformatted (to the best of its ability).
+ *
+ **/
+export default function(json, indentChars) {
+  var i = 0,
+    il = 0,
+    tab = typeof indentChars !== 'undefined' ? indentChars : '  ',
+    newJson = '',
+    indentLevel = 0,
+    inString = false,
+    currentChar = null;
+
+  for (i = 0, il = json.length; i < il; i += 1) {
+    currentChar = json.charAt(i);
+
+    switch (currentChar) {
+      case '{':
+      case '[':
+        if (!inString) {
+          newJson += currentChar + '\n' + repeat(tab, indentLevel + 1);
+          indentLevel += 1;
+        } else {
+          newJson += currentChar;
+        }
+        break;
+      case '}':
+      case ']':
+        if (!inString) {
+          indentLevel -= 1;
+          newJson += '\n' + repeat(tab, indentLevel) + currentChar;
+        } else {
+          newJson += currentChar;
+        }
+        break;
+      case ',':
+        if (!inString) {
+          newJson += ',\n' + repeat(tab, indentLevel);
+        } else {
+          newJson += currentChar;
+        }
+        break;
+      case ':':
+        if (!inString) {
+          newJson += ': ';
+        } else {
+          newJson += currentChar;
+        }
+        break;
+      case ' ':
+      case '\n':
+      case '\t':
+        if (inString) {
+          newJson += currentChar;
+        }
+        break;
+      case '"':
+        if (i > 0 && json.charAt(i - 1) !== '\\') {
+          inString = !inString;
+        }
+        newJson += currentChar;
+        break;
+      default:
+        newJson += currentChar;
+        break;
+    }
+  }
+
+  return newJson;
+}
+
+function repeat(s, count) {
+  return new Array(count + 1).join(s);
+}

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

@@ -1,6 +1,7 @@
 import { customAlphabet } from 'nanoid';
 import xmlFormat from 'xml-formatter';
-import { format as jsoncFormat, applyEdits as jsoncApplyEdits } from 'jsonc-parser';
+
+import formatJson from 'utils/common/formatJson';
 
 // a customized version of nanoid without using _ and -
 export const uuid = () => {
@@ -28,11 +29,16 @@ export const waitForNextTick = () => {
 };
 
 export const prettifyJson = (doc) => {
-  return jsoncApplyEdits(
-    doc,
-    jsoncFormat(doc, null, {insertSpaces: true, tabSize: 2})
-  );
-}
+  // Format only the first 5MiB of the doc/JSON-string,
+  // this is to prevent bigger responses from blocking the thread
+  // and making the UI unresponsive.
+  // TODO: Implement UI to allow users to format whole JSON on-demand
+  const maxFormatLegth = 1048576 * 5; // 2 ^ 20 * 5
+  const truncatedDoc = doc.substr(0, maxFormatLegth);
+  const restOfDoc = doc.substr(maxFormatLegth, doc.length);
+  const res = formatJson(truncatedDoc) + restOfDoc;
+  return res;
+};
 
 export const safeParseJSON = (str) => {
   if (!str || !str.length || typeof str !== 'string') {
@@ -184,9 +190,3 @@ export const generateUidBasedOnHash = (str) => {
 };
 
 export const stringifyIfNot = v => typeof v === 'string' ? v : String(v);
-
-export const getEncoding = (headers) => {
-  // Parse the charset from content type: https://stackoverflow.com/a/33192813
-  const charsetMatch = /charset=([^()<>@,;:"/[\]?.=\s]*)/i.exec(headers?.['content-type'] || '');
-  return charsetMatch?.[1];
-}

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

@@ -10,6 +10,7 @@ export const sendNetworkRequest = async (item, collection, environment, runtimeV
             data: response.data,
             // Note that the Buffer is encoded as a base64 string, because Buffers / TypedArrays are not allowed in the redux store
             dataBuffer: response.dataBuffer,
+            dataRaw: response.dataRaw,
             headers: response.headers,
             size: response.size,
             status: response.status,

packages/bruno-cli/src/utils/common.js

@@ -23,12 +23,13 @@ const parseDataFromResponse = (response, disableParsingResponseJson = false) =>
   const charsetValue = charsetMatch?.[1];
   const dataBuffer = Buffer.from(response.data);
   // Overwrite the original data for backwards compatibility
-  let data;
+  let dataRaw;
   if (iconv.encodingExists(charsetValue)) {
-    data = iconv.decode(dataBuffer, charsetValue);
+    dataRaw = iconv.decode(dataBuffer, charsetValue);
   } else {
-    data = iconv.decode(dataBuffer, 'utf-8');
+    dataRaw = iconv.decode(dataBuffer, 'utf-8');
   }
+  let data = dataRaw;
   // Try to parse response to JSON, this can quietly fail
   try {
     // Filter out ZWNBSP character
@@ -39,7 +40,7 @@ const parseDataFromResponse = (response, disableParsingResponseJson = false) =>
     }
   } catch { }
 
-  return { data, dataBuffer };
+  return { data, dataBuffer, dataRaw };
 };
 
 module.exports = {

packages/bruno-electron/src/app/about-bruno.js

@@ -0,0 +1,176 @@
+module.exports = function aboutBruno({version}) {
+  return `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+        <title>About Bruno</title>
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                text-align: center;
+                margin: 0;
+                padding: 10px;
+                background-color: #f4f4f4;
+                color: #333;
+            }
+            .logo {
+                margin-top: 0px;
+            }
+            .title {
+                font-size: 24px;
+                margin-top: 5px;
+                font-weight: bold;
+                color: #222;
+            }
+            .description {
+                font-size: 12px;
+                color: #222;
+                margin-top: 5px;
+            }
+            .buttons {
+                margin-top: 5px;
+            }
+            .footer {
+                margin-top: 5px;
+                padding: 5px;
+                font-size: 14px;
+                color: #555;
+            }
+            .link {
+                display: inline-block;
+                margin-top: 10px;
+                padding: 10px 15px;
+                background-color: #F4AA41;
+                color: white;
+                text-decoration: none;
+                border-radius: 5px;
+                cursor: pointer;
+                transition: background 0.3s;
+            }
+            .link:hover {
+                background-color: #F4AA41;
+            }
+        </style>
+    </head>
+    <body>
+      <div class="logo">
+      </div>
+        <svg id="emoji" width="100" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+          <g id="color">
+            <path
+              fill="#F4AA41"
+              stroke="none"
+              d="M23.5,14.5855l-4.5,1.75l-7.25,8.5l-4.5,10.75l2,5.25c1.2554,3.7911,3.5231,7.1832,7.25,10l2.5-3.3333 c0,0,3.8218,7.7098,10.7384,8.9598c0,0,10.2616,1.936,15.5949-0.8765c3.4203-1.8037,4.4167-4.4167,4.4167-4.4167l3.4167-3.4167 l1.5833,2.3333l2.0833-0.0833l5.4167-7.25L64,37.3355l-0.1667-4.5l-2.3333-5.5l-4.8333-7.4167c0,0-2.6667-4.9167-8.1667-3.9167 c0,0-6.5-4.8333-11.8333-4.0833S32.0833,10.6688,23.5,14.5855z"
+            />
+            <polygon
+              fill="#EA5A47"
+              stroke="none"
+              points="36,47.2521 32.9167,49.6688 30.4167,49.6688 30.3333,53.5021 31.0833,57.0021 32.1667,58.9188 35,60.4188 39.5833,59.8355 41.1667,58.0855 42.1667,53.8355 41.9167,49.8355 39.9167,50.0855"
+            />
+            <polygon
+              fill="#3F3F3F"
+              stroke="none"
+              points="32.5,36.9188 30.9167,40.6688 33.0833,41.9188 34.3333,42.4188 38.6667,42.5855 41.5833,40.3355 39.8333,37.0855"
+            />
+          </g>
+          <g id="hair" />
+          <g id="skin" />
+          <g id="skin-shadow" />
+          <g id="line">
+            <path
+              fill="#000000"
+              stroke="none"
+              d="M29.5059,30.1088c0,0-1.8051,1.2424-2.7484,0.6679c-0.9434-0.5745-1.2424-1.8051-0.6679-2.7484 s1.805-1.2424,2.7484-0.6679S29.5059,30.1088,29.5059,30.1088z"
+            />
+            <path
+              fill="none"
+              stroke="#000000"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="2"
+              d="M33.1089,37.006h6.1457c0.4011,0,0.7634,0.2397,0.9203,0.6089l1.1579,2.7245l-2.1792,1.1456 c-0.6156,0.3236-1.3654-0.0645-1.4567-0.754"
+            />
+            <path
+              fill="none"
+              stroke="#000000"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="2"
+              d="M34.7606,40.763c-0.1132,0.6268-0.7757,0.9895-1.3647,0.7471l-2.3132-0.952l1.0899-2.9035 c0.1465-0.3901,0.5195-0.6486,0.9362-0.6486"
+            />
+            <path
+              fill="none"
+              stroke="#000000"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="2"
+              d="M30.4364,50.0268c0,0-0.7187,8.7934,3.0072,9.9375c2.6459,0.8125,5.1497,0.5324,6.0625-0.25 c0.875-0.75,2.6323-4.4741,1.8267-9.6875"
+            />
+            <path
+              fill="#000000"
+              stroke="none"
+              d="M44.2636,30.1088c0,0,1.805,1.2424,2.7484,0.6679c0.9434-0.5745,1.2424-1.8051,0.6679-2.7484 c-0.5745-0.9434-1.805-1.2424-2.7484-0.6679C43.9881,27.9349,44.2636,30.1088,44.2636,30.1088z"
+            />
+            <path
+              fill="none"
+              stroke="#000000"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="2"
+              d="M25.6245,42.8393c-0.475,3.6024,2.2343,5.7505,4.2847,6.8414c1.1968,0.6367,2.6508,0.5182,3.7176-0.3181l2.581-2.0233l2.581,2.0233 c1.0669,0.8363,2.5209,0.9548,3.7176,0.3181c2.0504-1.0909,4.7597-3.239,4.2847-6.8414"
+            />
+            <path
+              fill="none"
+              stroke="#000000"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="2"
+              d="M19.9509,28.3572c-2.3166,5.1597-0.5084,13.0249,0.119,15.3759c0.122,0.4571,0.0755,0.9355-0.1271,1.3631l-1.9874,4.1937 c-0.623,1.3146-2.3934,1.5533-3.331,0.4409c-3.1921-3.7871-8.5584-11.3899-6.5486-16.686 c7.0625-18.6104,15.8677-18.1429,15.8677-18.1429c2.8453-1.9336,13.1042-6.9375,24.8125,0.875c0,0,8.6323-1.7175,14.9375,16.9375 c1.8036,5.3362-3.4297,12.8668-6.5506,16.6442c-0.9312,1.127-2.7162,0.8939-3.3423-0.4272l-1.9741-4.1656 c-0.2026-0.4275-0.2491-0.906-0.1271-1.3631c0.6275-2.3509,2.4356-10.2161,0.119-15.3759"
+            />
+            <path
+              fill="none"
+              stroke="#000000"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="2"
+              d="M52.6309,46.4628c0,0-3.0781,6.7216-7.8049,8.2712"
+            />
+            <path
+              fill="none"
+              stroke="#000000"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="2"
+              d="M19.437,46.969c0,0,3.0781,6.0823,7.8049,7.632"
+            />
+            <line
+              x1="36.2078"
+              x2="36.2078"
+              y1="47.3393"
+              y2="44.3093"
+              fill="none"
+              stroke="#000000"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="2"
+            />
+          </g>
+        </svg>
+      <h2 class="title">Bruno ${version}</h2>
+      <footer class="footer">
+          ©2025 Bruno Software Inc
+      </footer>
+    </body>
+    </html>
+  `;
+};

packages/bruno-electron/src/app/menu-template.js

@@ -1,7 +1,8 @@
 const { ipcMain } = require('electron');
 const os = require('os');
-const openAboutWindow = require('about-window').default;
-const { join } = require('path');
+const { BrowserWindow } = require('electron');
+const { version } = require('../../package.json');
+const aboutBruno = require('./about-bruno');
 
 const template = [
   {
@@ -77,14 +78,16 @@ const template = [
     submenu: [
       {
         label: 'About Bruno',
-        click: () =>
-          openAboutWindow({
-            product_name: 'Bruno',
-            icon_path: join(__dirname, '../about/256x256.png'),
-            css_path: join(__dirname, '../about/about.css'),
-            homepage: 'https://www.usebruno.com/',
-            package_json_dir: join(__dirname, '../..')
-          })
+        click: () => {
+          const aboutWindow = new BrowserWindow({
+            width: 350,
+            height: 250,
+            webPreferences: {
+              nodeIntegration: true,
+            },
+          });
+          aboutWindow.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(aboutBruno({version}))}`);
+        }
       },
       { label: 'Documentation', click: () => ipcMain.emit('main:open-docs') }
     ]

packages/bruno-electron/src/index.js

@@ -31,7 +31,7 @@ const lastOpenedCollections = new LastOpenedCollections();
 const contentSecurityPolicy = [
   "default-src 'self'",
   "connect-src 'self' https://*.posthog.com",
-  "font-src 'self' https:",
+  "font-src 'self' https: data:;",
   "frame-src data:",
   // this has been commented out to make oauth2 work
   // "form-action 'none'",

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

@@ -387,12 +387,13 @@ const parseDataFromResponse = (response, disableParsingResponseJson = false) =>
   const charsetValue = charsetMatch?.[1];
   const dataBuffer = Buffer.from(response.data);
   // Overwrite the original data for backwards compatibility
-  let data;
+  let dataRaw;
   if (iconv.encodingExists(charsetValue)) {
-    data = iconv.decode(dataBuffer, charsetValue);
+    dataRaw = iconv.decode(dataBuffer, charsetValue);
   } else {
-    data = iconv.decode(dataBuffer, 'utf-8');
+    dataRaw = iconv.decode(dataBuffer, 'utf-8');
   }
+  let data = dataRaw;
   // Try to parse response to JSON, this can quietly fail
   try {
     // Filter out ZWNBSP character
@@ -403,7 +404,7 @@ const parseDataFromResponse = (response, disableParsingResponseJson = false) =>
     }
   } catch { }
 
-  return { data, dataBuffer };
+  return { data, dataBuffer, dataRaw };
 };
 
 
@@ -695,7 +696,7 @@ const registerNetworkIpc = (mainWindow) => {
 
       // Continue with the rest of the request lifecycle - post response vars, script, assertions, tests
 
-      const { data, dataBuffer } = parseDataFromResponse(response, request.__brunoDisableParsingResponseJson);
+      const { data, dataBuffer, dataRaw } = parseDataFromResponse(response, request.__brunoDisableParsingResponseJson);
       response.data = data;
 
       response.responseTime = responseTime;
@@ -811,6 +812,7 @@ const registerNetworkIpc = (mainWindow) => {
         data: response.data,
         dataBuffer: dataBuffer.toString('base64'),
         size: Buffer.byteLength(dataBuffer),
+        dataRaw,
         duration: responseTime ?? 0
       };
     } catch (error) {
@@ -1183,7 +1185,7 @@ const registerNetworkIpc = (mainWindow) => {
               response = await axiosInstance(request);
               timeEnd = Date.now();
 
-              const { data, dataBuffer } = parseDataFromResponse(response, request.__brunoDisableParsingResponseJson);
+              const { data, dataBuffer, dataRaw } = parseDataFromResponse(response, request.__brunoDisableParsingResponseJson);
               response.data = data;
               response.responseTime = response.headers.get('request-duration');
 
@@ -1206,6 +1208,7 @@ const registerNetworkIpc = (mainWindow) => {
                   duration: timeEnd - timeStart,
                   dataBuffer: dataBuffer.toString('base64'),
                   size: Buffer.byteLength(dataBuffer),
+                  dataRaw,
                   data: response.data,
                   responseTime: response.headers.get('request-duration')
                 },
@@ -1213,7 +1216,7 @@ const registerNetworkIpc = (mainWindow) => {
               });
             } catch (error) {
               if (error?.response && !axios.isCancel(error)) {
-                const { data, dataBuffer } = parseDataFromResponse(error.response);
+                const { data, dataBuffer, dataRaw } = parseDataFromResponse(error.response);
                 error.response.data = data;
 
                 timeEnd = Date.now();
@@ -1224,6 +1227,7 @@ const registerNetworkIpc = (mainWindow) => {
                   duration: timeEnd - timeStart,
                   dataBuffer: dataBuffer.toString('base64'),
                   size: Buffer.byteLength(dataBuffer),
+                  dataRaw,
                   data: error.response.data,
                   responseTime: error.response.headers.get('request-duration')
                 };

scripts/build-electron.js

@@ -2,6 +2,7 @@ const os = require('os');
 const fs = require('fs-extra');
 const util = require('util');
 const spawn = util.promisify(require('child_process').spawn);
+const path = require('path');
 
 async function deleteFileIfExists(filePath) {
   try {
@@ -80,7 +81,7 @@ async function main() {
     // Copy build
     await copyFolderIfExists('packages/bruno-app/dist', 'packages/bruno-electron/web');
 
-    // Change paths in next
+    // Update static paths
     const files = await fs.readdir('packages/bruno-electron/web');
     for (const file of files) {
       if (file.endsWith('.html')) {
@@ -90,6 +91,22 @@ async function main() {
       }
     }
 
+    // update font load paths
+    const cssDir = path.join('packages/bruno-electron/web/static/css');
+    try {
+      const cssFiles = await fs.readdir(cssDir);
+      for (const file of cssFiles) {
+        if (file.endsWith('.css')) {
+          const filePath = path.join(cssDir, file);
+          let content = await fs.readFile(filePath, 'utf8');
+          content = content.replace(/\/static\/font/g, '../../static/font');
+          await fs.writeFile(filePath, content);
+        }
+      }
+    } catch (error) {
+      console.error(`Error updating font paths: ${error}`);
+    }
+
     // Remove sourcemaps
     await removeSourceMapFiles('packages/bruno-electron/web');
 

scripts/build-electron.sh

@@ -13,8 +13,9 @@ mkdir packages/bruno-electron/web
 cp -r packages/bruno-app/dist/* packages/bruno-electron/web
 
 
-# Change paths in next
+# Update static paths
 sed -i'' -e 's@/static/@static/@g' packages/bruno-electron/web/**.html
+sed -i'' -e 's@/static/font@../../static/font@g' packages/bruno-electron/web/static/css/**.**.css
 
 # Remove sourcemaps
 find packages/bruno-electron/web -name '*.map' -type f -delete