From 19a7f397bb286fd33507faabf5e3dce3a90fd3d4 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Mon, 18 Sep 2023 13:37:00 +0530
Subject: [PATCH] feat(#197): prettier formatting on all files in
 packages/bruno-app

---
 .prettierrc.json                              |   2 +-
 packages/bruno-app/.prettierrc.json           |   2 +-
 .../bruno-app/src/components/Bruno/index.js   |  29 ++-
 .../components/CodeEditor/StyledWrapper.js    |  21 ++-
 .../src/components/CodeEditor/index.js        |   6 +-
 .../src/components/Dropdown/index.js          |  11 +-
 .../EnvironmentSelector/StyledWrapper.js      |   2 +-
 .../CreateEnvironment/index.js                |  17 +-
 .../DeleteEnvironment/index.js                |   8 +-
 .../EnvironmentVariables/StyledWrapper.js     |   2 +-
 .../EnvironmentVariables/index.js             |  14 +-
 .../EnvironmentDetails/index.js               |  12 +-
 .../EnvironmentList/index.js                  |  12 +-
 .../RenameEnvironment/index.js                |  17 +-
 .../Environments/EnvironmentSettings/index.js |  14 +-
 .../src/components/Icons/Send/index.js        |  15 +-
 .../src/components/Modal/StyledWrapper.js     |   2 +-
 .../bruno-app/src/components/Modal/index.js   |  32 +++-
 .../components/Preferences/General/index.js   |  20 +-
 .../src/components/Preferences/Theme/index.js |   6 +-
 .../Assertions/AssertionOperator/index.js     |  34 +++-
 .../Assertions/AssertionRow/index.js          | 112 ++++++++---
 .../RequestPane/FormUrlEncodedParams/index.js |  31 ++-
 .../RequestPane/GraphQLRequestPane/index.js   |  67 +++----
 .../GraphQLRequestPane/useGraphqlSchema.js    |   2 +-
 .../RequestPane/GraphQLVariables/index.js     |   9 +-
 .../RequestPane/HttpRequestPane/index.js      |   4 +-
 .../MultipartFormParams/StyledWrapper.js      |   1 -
 .../RequestPane/MultipartFormParams/index.js  |  33 +++-
 .../RequestPane/QueryEditor/StyledWrapper.js  |  21 ++-
 .../RequestPane/QueryEditor/index.js          |   9 +-
 .../QueryEditor/onHasCompletion.js            |   5 +-
 .../RequestPane/QueryParams/StyledWrapper.js  |   2 +-
 .../RequestPane/QueryParams/index.js          |  25 ++-
 .../QueryUrl/HttpMethodSelector/index.js      |   4 +-
 .../components/RequestPane/QueryUrl/index.js  |  10 +-
 .../RequestPane/RequestBody/index.js          |  14 +-
 .../RequestPane/RequestHeaders/index.js       |  23 ++-
 .../RequestPane/SaveRequest/index.js          |   9 +-
 .../components/RequestPane/Script/index.js    |  34 ++--
 .../src/components/RequestPane/Tests/index.js |   9 +-
 .../RequestPane/Vars/VarsTable/index.js       |  28 +--
 .../src/components/RequestPane/Vars/index.js  |  28 ++-
 .../RequestTabPanel/RequestNotFound/index.js  |   6 +-
 .../src/components/RequestTabPanel/index.js   |  43 +++--
 .../RequestTabs/CollectionToolBar/index.js    |  10 +-
 .../RequestTab/RequestTabNotFound.js          |   4 +-
 .../RequestTabs/RequestTab/index.js           |  10 +-
 .../src/components/RequestTabs/index.js       |  19 +-
 .../ResponsePane/QueryResult/index.js         |   9 +-
 .../ResponsePane/StatusCode/StyledWrapper.js  |   4 +-
 .../ResponsePane/TestResults/index.js         |  27 +--
 .../ResponsePane/TestResultsLabel/index.js    |  18 +-
 .../components/ResponsePane/Timeline/index.js |  14 +-
 .../src/components/ResponsePane/index.js      |   4 +-
 .../RunnerResults/ResponsePane/index.js       |  22 +--
 .../src/components/RunnerResults/index.js     | 176 +++++++++---------
 .../CloneCollectionItem/index.js              |  15 +-
 .../DeleteCollectionItem/index.js             |   8 +-
 .../RenameCollectionItem/index.js             |  13 +-
 .../RunCollectionItem/StyledWrapper.js        |   2 +-
 .../CollectionItem/RunCollectionItem/index.js |  32 ++--
 .../Collection/CollectionItem/index.js        |  41 +++-
 .../Collection/RenameCollection/index.js      |   5 +-
 .../Sidebar/Collections/Collection/index.js   |  23 ++-
 .../CreateOrOpenCollection/index.js           |  10 +-
 .../SelectCollection/StyledWrapper.js         |   2 +-
 .../Sidebar/CreateCollection/index.js         |  26 ++-
 .../Sidebar/ImportCollection/index.js         |  15 +-
 .../Sidebar/ImportCollectionLocation/index.js |   7 +-
 .../src/components/Sidebar/NewFolder/index.js |  10 +-
 .../components/Sidebar/NewRequest/index.js    |  17 +-
 .../src/components/Sidebar/StyledWrapper.js   |   2 +-
 .../src/components/Sidebar/TitleBar/index.js  |  10 +-
 .../bruno-app/src/components/Sidebar/index.js |   7 +-
 .../SingleLineEditor/StyledWrapper.js         |   1 -
 .../src/components/SingleLineEditor/index.js  |  26 ++-
 .../bruno-app/src/components/Tooltip/index.js |  16 +-
 .../VariablesView/Popover/StyledWrapper.js    |   2 +-
 .../components/VariablesView/Popover/index.js |  14 +-
 .../components/VariablesView/StyledWrapper.js |   4 +-
 .../VariablesTable/StyledWrapper.js           |   8 +-
 .../VariablesView/VariablesTable/index.js     |  44 +++--
 .../src/components/VariablesView/index.js     |  34 ++--
 .../bruno-app/src/components/Welcome/index.js |  22 ++-
 .../src/hooks/useOnClickOutside/index.js      |   4 +-
 .../bruno-app/src/hooks/usePrevious/index.js  |   4 +-
 packages/bruno-app/src/pages/_app.js          |   2 +-
 packages/bruno-app/src/pages/_document.js     |   5 +-
 .../src/providers/App/StyledWrapper.js        |   2 +-
 packages/bruno-app/src/providers/App/index.js |   4 +-
 .../providers/App/useCollectionTreeSync.js    |   6 +-
 .../src/providers/App/useTelemetry.js         |  10 +-
 .../bruno-app/src/providers/Hotkeys/index.js  |  12 +-
 .../src/providers/Preferences/index.js        |  23 +--
 .../src/providers/ReduxStore/slices/app.js    |   9 +-
 .../ReduxStore/slices/collections/actions.js  |  88 +++++----
 .../ReduxStore/slices/collections/index.js    |  65 ++++---
 .../src/providers/ReduxStore/slices/tabs.js   |   3 +-
 .../bruno-app/src/providers/Theme/index.js    |   2 +-
 .../bruno-app/src/providers/Toaster/index.js  |  10 +-
 packages/bruno-app/src/themes/dark.js         |   2 +-
 packages/bruno-app/src/themes/light.js        |   4 +-
 .../src/utils/codemirror/brunoVarInfo.js      |  43 ++---
 .../bruno-app/src/utils/collections/export.js |   5 +-
 .../bruno-app/src/utils/collections/index.js  |  20 +-
 .../bruno-app/src/utils/common/codemirror.js  |  21 +--
 packages/bruno-app/src/utils/common/index.js  |  12 +-
 .../bruno-app/src/utils/common/index.spec.js  |  28 +--
 .../bruno-app/src/utils/common/platform.js    |   4 +-
 packages/bruno-app/src/utils/common/slash.js  |  14 +-
 .../bruno-app/src/utils/importers/common.js   |   7 +-
 .../utils/importers/insomnia-collection.js    |  38 ++--
 .../src/utils/importers/postman-collection.js |  25 ++-
 packages/bruno-app/src/utils/network/index.js |  10 +-
 packages/bruno-app/src/utils/url/index.js     |   6 +-
 .../bruno-app/src/utils/url/index.spec.js     |  75 ++++----
 117 files changed, 1249 insertions(+), 854 deletions(-)

diff --git a/.prettierrc.json b/.prettierrc.json
index c91533e88..b42ad7170 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -3,5 +3,5 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
-  "printWidth": 180
+  "printWidth": 120
 }
diff --git a/packages/bruno-app/.prettierrc.json b/packages/bruno-app/.prettierrc.json
index c91533e88..b42ad7170 100644
--- a/packages/bruno-app/.prettierrc.json
+++ b/packages/bruno-app/.prettierrc.json
@@ -3,5 +3,5 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
-  "printWidth": 180
+  "printWidth": 120
 }
diff --git a/packages/bruno-app/src/components/Bruno/index.js b/packages/bruno-app/src/components/Bruno/index.js
index 4eccc7026..58279cc33 100644
--- a/packages/bruno-app/src/components/Bruno/index.js
+++ b/packages/bruno-app/src/components/Bruno/index.js
@@ -14,7 +14,11 @@ const Bruno = ({ width }) => {
           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" />
+        <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" />
@@ -84,8 +88,27 @@ const Bruno = ({ width }) => {
           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" />
+        <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>
   );
diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
index 26f7a3ddb..09de00ddc 100644
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -6,7 +6,8 @@ const StyledWrapper = styled.div`
     border: solid 1px ${(props) => props.theme.codemirror.border};
   }
 
-  .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
+  .CodeMirror-overlayscroll-horizontal div,
+  .CodeMirror-overlayscroll-vertical div {
     background: #d2d7db;
   }
 
@@ -17,12 +18,14 @@ const StyledWrapper = styled.div`
   // Todo: dark mode temporary fix
   // Clean this
   .CodeMirror.cm-s-monokai {
-    .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
+    .CodeMirror-overlayscroll-horizontal div,
+    .CodeMirror-overlayscroll-vertical div {
       background: #444444;
     }
   }
 
-  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
+  .cm-s-monokai span.cm-property,
+  .cm-s-monokai span.cm-attribute {
     color: #9cdcfe !important;
   }
 
@@ -30,16 +33,20 @@ const StyledWrapper = styled.div`
     color: #ce9178 !important;
   }
 
-  .cm-s-monokai span.cm-number{
+  .cm-s-monokai span.cm-number {
     color: #b5cea8 !important;
   }
 
-  .cm-s-monokai span.cm-atom{
+  .cm-s-monokai span.cm-atom {
     color: #569cd6 !important;
   }
 
-  .cm-variable-valid{color: green}
-  .cm-variable-invalid{color: red}
+  .cm-variable-valid {
+    color: green;
+  }
+  .cm-variable-invalid {
+    color: red;
+  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/CodeEditor/index.js b/packages/bruno-app/src/components/CodeEditor/index.js
index fe9ad2cb0..4ff9b46bc 100644
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -43,7 +43,7 @@ export default class CodeEditor extends React.Component {
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
       readOnly: this.props.readOnly,
-      scrollbarStyle: "overlay",
+      scrollbarStyle: 'overlay',
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       extraKeys: {
         'Cmd-Enter': () => {
@@ -96,7 +96,7 @@ export default class CodeEditor extends React.Component {
       this.editor.setValue(this.props.value);
     }
 
-    if(this.editor) {
+    if (this.editor) {
       let variables = getEnvironmentVariables(this.props.collection);
       if (!isEqual(variables, this.variables)) {
         this.addOverlay();
@@ -135,7 +135,7 @@ export default class CodeEditor extends React.Component {
 
     defineCodeMirrorBrunoVariablesMode(variables, mode);
     this.editor.setOption('mode', 'brunovariables');
-  }
+  };
 
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
diff --git a/packages/bruno-app/src/components/Dropdown/index.js b/packages/bruno-app/src/components/Dropdown/index.js
index 0de0d26b5..e4f48724c 100644
--- a/packages/bruno-app/src/components/Dropdown/index.js
+++ b/packages/bruno-app/src/components/Dropdown/index.js
@@ -5,7 +5,16 @@ import StyledWrapper from './StyledWrapper';
 const Dropdown = ({ icon, children, onCreate, placement }) => {
   return (
     <StyledWrapper className="dropdown">
-      <Tippy content={children} placement={placement || 'bottom-end'} animation={false} arrow={false} onCreate={onCreate} interactive={true} trigger="click" appendTo="parent">
+      <Tippy
+        content={children}
+        placement={placement || 'bottom-end'}
+        animation={false}
+        arrow={false}
+        onCreate={onCreate}
+        interactive={true}
+        trigger="click"
+        appendTo="parent"
+      >
         {icon}
       </Tippy>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
index a4dc148c0..a7c57209b 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .current-enviroment {
-    background-color:  ${(props) => props.theme.sidebar.badge.bg};
+    background-color: ${(props) => props.theme.sidebar.badge.bg};
     border-radius: 15px;
 
     .caret {
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
index 6c22da0c5..753d0fb24 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
@@ -16,7 +16,10 @@ const CreateEnvironment = ({ collection, onClose }) => {
       name: ''
     },
     validationSchema: Yup.object({
-      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
+      name: Yup.string()
+        .min(1, 'must be atleast 1 characters')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
     }),
     onSubmit: (values) => {
       dispatch(addEnvironment(values.name, collection.uid))
@@ -40,7 +43,13 @@ const CreateEnvironment = ({ collection, onClose }) => {
 
   return (
     <Portal>
-      <Modal size="sm" title={'Create Environment'} confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
+      <Modal
+        size="sm"
+        title={'Create Environment'}
+        confirmText="Create"
+        handleConfirm={onSubmit}
+        handleCancel={onClose}
+      >
         <form className="bruno-form" onSubmit={formik.handleSubmit}>
           <div>
             <label htmlFor="name" className="block font-semibold">
@@ -59,7 +68,9 @@ const CreateEnvironment = ({ collection, onClose }) => {
               onChange={formik.handleChange}
               value={formik.values.name || ''}
             />
-            {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
+            {formik.touched.name && formik.errors.name ? (
+              <div className="text-red-500">{formik.errors.name}</div>
+            ) : null}
           </div>
         </form>
       </Modal>
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
index 9a18d2388..c9a63c574 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
@@ -20,7 +20,13 @@ const DeleteEnvironment = ({ onClose, environment, collection }) => {
   return (
     <Portal>
       <StyledWrapper>
-        <Modal size="sm" title={'Delete Environment'} confirmText="Delete" handleConfirm={onConfirm} handleCancel={onClose}>
+        <Modal
+          size="sm"
+          title={'Delete Environment'}
+          confirmText="Delete"
+          handleConfirm={onConfirm}
+          handleCancel={onClose}
+        >
           Are you sure you want to delete <span className="font-semibold">{environment.name}</span> ?
         </Modal>
       </StyledWrapper>
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
index f1b99ec66..22872cd46 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -12,7 +12,7 @@ const Wrapper = styled.div`
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};;
+      color: ${(props) => props.theme.table.thead.color};
       font-size: 0.8125rem;
       user-select: none;
     }
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
index bda2782a6..e3ad6e080 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -99,7 +99,12 @@ const EnvironmentVariables = ({ environment, collection }) => {
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input type="checkbox" checked={variable.enabled} className="mr-3 mousetrap" onChange={(e) => handleVarChange(e, variable, 'enabled')} />
+                        <input
+                          type="checkbox"
+                          checked={variable.enabled}
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleVarChange(e, variable, 'enabled')}
+                        />
                         <button onClick={() => handleRemoveVars(variable)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
@@ -119,7 +124,12 @@ const EnvironmentVariables = ({ environment, collection }) => {
       </div>
 
       <div>
-        <button type="submit" className="submit btn btn-md btn-secondary mt-2" disabled={!hasChanges} onClick={saveChanges}>
+        <button
+          type="submit"
+          className="submit btn btn-md btn-secondary mt-2"
+          disabled={!hasChanges}
+          onClick={saveChanges}
+        >
           Save
         </button>
       </div>
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
index fee5a84cc..8db0d0418 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -10,8 +10,16 @@ const EnvironmentDetails = ({ environment, collection }) => {
 
   return (
     <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
-      {openEditModal && <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />}
-      {openDeleteModal && <DeleteEnvironment onClose={() => setOpenDeleteModal(false)} environment={environment} collection={collection} />}
+      {openEditModal && (
+        <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />
+      )}
+      {openDeleteModal && (
+        <DeleteEnvironment
+          onClose={() => setOpenDeleteModal(false)}
+          environment={environment}
+          collection={collection}
+        />
+      )}
       <div className="flex">
         <div className="flex flex-grow items-center">
           <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
index 9fbb008d5..b80cd92a5 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@@ -14,12 +14,12 @@ const EnvironmentList = ({ collection }) => {
   const prevEnvUids = usePrevious(envUids);
 
   useEffect(() => {
-    if(selectedEnvironment) {
+    if (selectedEnvironment) {
       return;
     }
-      
+
     const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
-    if(environment) {
+    if (environment) {
       setSelectedEnvironment(environment);
     } else {
       setSelectedEnvironment(environments && environments.length ? environments[0] : null);
@@ -28,9 +28,9 @@ const EnvironmentList = ({ collection }) => {
 
   useEffect(() => {
     // check env add
-    if (prevEnvUids && prevEnvUids.length &&  envUids.length > prevEnvUids.length) {
+    if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
       const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid));
-      if(newEnv){
+      if (newEnv) {
         setSelectedEnvironment(newEnv);
       }
     }
@@ -38,7 +38,7 @@ const EnvironmentList = ({ collection }) => {
     // check env delete
     if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) {
       setSelectedEnvironment(environments && environments.length ? environments[0] : null);
-    }     
+    }
   }, [envUids, environments, prevEnvUids]);
 
   if (!selectedEnvironment) {
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
index f67496680..a79bff497 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
@@ -16,7 +16,10 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
       name: environment.name
     },
     validationSchema: Yup.object({
-      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
+      name: Yup.string()
+        .min(1, 'must be atleast 1 characters')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
     }),
     onSubmit: (values) => {
       dispatch(renameEnvironment(values.name, environment.uid, collection.uid))
@@ -40,7 +43,13 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
 
   return (
     <Portal>
-      <Modal size="sm" title={'Rename Environment'} confirmText="Rename" handleConfirm={onSubmit} handleCancel={onClose}>
+      <Modal
+        size="sm"
+        title={'Rename Environment'}
+        confirmText="Rename"
+        handleConfirm={onSubmit}
+        handleCancel={onClose}
+      >
         <form className="bruno-form" onSubmit={formik.handleSubmit}>
           <div>
             <label htmlFor="name" className="block font-semibold">
@@ -59,7 +68,9 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
               onChange={formik.handleChange}
               value={formik.values.name || ''}
             />
-            {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
+            {formik.touched.name && formik.errors.name ? (
+              <div className="text-red-500">{formik.errors.name}</div>
+            ) : null}
           </div>
         </form>
       </Modal>
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
index 11afce987..855e0fb31 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -11,11 +11,21 @@ const EnvironmentSettings = ({ collection, onClose }) => {
   if (!environments || !environments.length) {
     return (
       <StyledWrapper>
-        <Modal size="md" title="Environments" confirmText={'Close'} handleConfirm={onClose} handleCancel={onClose} hideCancel={true}>
+        <Modal
+          size="md"
+          title="Environments"
+          confirmText={'Close'}
+          handleConfirm={onClose}
+          handleCancel={onClose}
+          hideCancel={true}
+        >
           {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
           <div className="text-center">
             <p>No environments found!</p>
-            <button className="btn-create-environment text-link pr-2 py-3 mt-2 select-none" onClick={() => setOpenCreateModal(true)}>
+            <button
+              className="btn-create-environment text-link pr-2 py-3 mt-2 select-none"
+              onClick={() => setOpenCreateModal(true)}
+            >
               + <span>Create Environment</span>
             </button>
           </div>
diff --git a/packages/bruno-app/src/components/Icons/Send/index.js b/packages/bruno-app/src/components/Icons/Send/index.js
index 15b4fa8c9..9b2274354 100644
--- a/packages/bruno-app/src/components/Icons/Send/index.js
+++ b/packages/bruno-app/src/components/Icons/Send/index.js
@@ -1,17 +1,12 @@
 import React from 'react';
 
-const SendIcon = ({color, width}) => {
+const SendIcon = ({ color, width }) => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={width}
-      viewBox="0 0 48 48"
-    >
-      <path fill={color} d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z"/>
-      <path d="M0 0h48v48h-48z" fill="none"/>
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox="0 0 48 48">
+      <path fill={color} d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z" />
+      <path d="M0 0h48v48h-48z" fill="none" />
     </svg>
   );
-}
+};
 
 export default SendIcon;
diff --git a/packages/bruno-app/src/components/Modal/StyledWrapper.js b/packages/bruno-app/src/components/Modal/StyledWrapper.js
index b8d0b5c23..583bfe2ec 100644
--- a/packages/bruno-app/src/components/Modal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Modal/StyledWrapper.js
@@ -100,7 +100,7 @@ const Wrapper = styled.div`
       border-radius: 0px;
       outline: none;
       box-shadow: none;
-      transition: border-color ease-in-out .1s;
+      transition: border-color ease-in-out 0.1s;
       border-radius: 3px;
       background-color: ${(props) => props.theme.modal.input.bg};
       border: 1px solid ${(props) => props.theme.modal.input.border};
diff --git a/packages/bruno-app/src/components/Modal/index.js b/packages/bruno-app/src/components/Modal/index.js
index 0e888cdad..2a6a327b4 100644
--- a/packages/bruno-app/src/components/Modal/index.js
+++ b/packages/bruno-app/src/components/Modal/index.js
@@ -14,7 +14,15 @@ const ModalHeader = ({ title, handleCancel }) => (
 
 const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-6">{children}</div>;
 
-const ModalFooter = ({ confirmText, cancelText, handleSubmit, handleCancel, confirmDisabled, hideCancel, hideFooter }) => {
+const ModalFooter = ({
+  confirmText,
+  cancelText,
+  handleSubmit,
+  handleCancel,
+  confirmDisabled,
+  hideCancel,
+  hideFooter
+}) => {
   confirmText = confirmText || 'Save';
   cancelText = cancelText || 'Cancel';
 
@@ -30,7 +38,12 @@ const ModalFooter = ({ confirmText, cancelText, handleSubmit, handleCancel, conf
         </button>
       </span>
       <span>
-        <button type="submit" className="submit btn btn-md btn-secondary" disabled={confirmDisabled} onClick={handleSubmit}>
+        <button
+          type="submit"
+          className="submit btn btn-md btn-secondary"
+          disabled={confirmDisabled}
+          onClick={handleSubmit}
+        >
           {confirmText}
         </button>
       </span>
@@ -38,7 +51,18 @@ const ModalFooter = ({ confirmText, cancelText, handleSubmit, handleCancel, conf
   );
 };
 
-const Modal = ({ size, title, confirmText, cancelText, handleCancel, handleConfirm, children, confirmDisabled, hideCancel, hideFooter }) => {
+const Modal = ({
+  size,
+  title,
+  confirmText,
+  cancelText,
+  handleCancel,
+  handleConfirm,
+  children,
+  confirmDisabled,
+  hideCancel,
+  hideFooter
+}) => {
   const [isClosing, setIsClosing] = useState(false);
   const escFunction = (event) => {
     const escKeyCode = 27;
@@ -64,7 +88,7 @@ const Modal = ({ size, title, confirmText, cancelText, handleCancel, handleConfi
   if (isClosing) {
     classes += ' modal--animate-out';
   }
-  if(hideFooter) {
+  if (hideFooter) {
     classes += ' modal-footer-none';
   }
   return (
diff --git a/packages/bruno-app/src/components/Preferences/General/index.js b/packages/bruno-app/src/components/Preferences/General/index.js
index b6d068f17..637c483e5 100644
--- a/packages/bruno-app/src/components/Preferences/General/index.js
+++ b/packages/bruno-app/src/components/Preferences/General/index.js
@@ -3,22 +3,17 @@ import { usePreferences } from 'providers/Preferences';
 import StyledWrapper from './StyledWrapper';
 
 const General = () => {
-  const {
-    preferences,
-    setPreferences,
-  } = usePreferences();
+  const { preferences, setPreferences } = usePreferences();
 
-  const [sslVerification, setSslVerification] = useState(
-    preferences.request.sslVerification
-  );
+  const [sslVerification, setSslVerification] = useState(preferences.request.sslVerification);
 
   const handleCheckboxChange = () => {
     const updatedPreferences = {
       ...preferences,
       request: {
         ...preferences.request,
-        sslVerification: !sslVerification,
-      },
+        sslVerification: !sslVerification
+      }
     };
 
     setPreferences(updatedPreferences)
@@ -33,12 +28,7 @@ const General = () => {
   return (
     <StyledWrapper>
       <div className="flex items-center mt-2">
-        <input
-          type="checkbox"
-          checked={sslVerification}
-          onChange={handleCheckboxChange}
-          className="mr-3 mousetrap"
-        />
+        <input type="checkbox" checked={sslVerification} onChange={handleCheckboxChange} className="mr-3 mousetrap" />
         SSL Certificate Verification
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/Preferences/Theme/index.js b/packages/bruno-app/src/components/Preferences/Theme/index.js
index e49599016..8f0719f98 100644
--- a/packages/bruno-app/src/components/Preferences/Theme/index.js
+++ b/packages/bruno-app/src/components/Preferences/Theme/index.js
@@ -22,7 +22,7 @@ const Theme = () => {
 
   return (
     <StyledWrapper>
-      <div className='bruno-form'>
+      <div className="bruno-form">
         <div className="flex items-center mt-2">
           <input
             id="light-theme"
@@ -31,7 +31,7 @@ const Theme = () => {
             name="theme"
             onChange={(e) => {
               formik.handleChange(e);
-              formik.handleSubmit()
+              formik.handleSubmit();
             }}
             value="light"
             checked={formik.values.theme === 'light'}
@@ -47,7 +47,7 @@ const Theme = () => {
             name="theme"
             onChange={(e) => {
               formik.handleChange(e);
-              formik.handleSubmit()
+              formik.handleSubmit();
             }}
             value="dark"
             checked={formik.values.theme === 'dark'}
diff --git a/packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js b/packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js
index e58959736..ae0579fc7 100644
--- a/packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 /**
  * Assertion operators
- * 
+ *
  * eq          : equal to
  * neq         : not equal to
  * gt          : greater than
@@ -33,10 +33,32 @@ import React from 'react';
 
 const AssertionOperator = ({ operator, onChange }) => {
   const operators = [
-    'eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'in', 'notIn',
-    'contains', 'notContains', 'length', 'matches', 'notMatches',
-    'startsWith', 'endsWith', 'between', 'isEmpty', 'isNull', 'isUndefined',
-    'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
+    'eq',
+    'neq',
+    'gt',
+    'gte',
+    'lt',
+    'lte',
+    'in',
+    'notIn',
+    'contains',
+    'notContains',
+    'length',
+    'matches',
+    'notMatches',
+    'startsWith',
+    'endsWith',
+    'between',
+    'isEmpty',
+    'isNull',
+    'isUndefined',
+    'isDefined',
+    'isTruthy',
+    'isFalsy',
+    'isJson',
+    'isNumber',
+    'isString',
+    'isBoolean'
   ];
 
   const handleChange = (e) => {
@@ -44,7 +66,7 @@ const AssertionOperator = ({ operator, onChange }) => {
   };
 
   const getLabel = (operator) => {
-    switch(operator) {
+    switch (operator) {
       case 'eq':
         return 'equals';
       case 'neq':
diff --git a/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js b/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
index 201a47c9f..d4d6eeff8 100644
--- a/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
@@ -6,7 +6,7 @@ import { useTheme } from 'providers/Theme';
 
 /**
  * Assertion operators
- * 
+ *
  * eq          : equal to
  * neq         : not equal to
  * gt          : greater than
@@ -35,7 +35,7 @@ import { useTheme } from 'providers/Theme';
  * isBoolean   : is boolean
  */
 const parseAssertionOperator = (str = '') => {
-  if(!str || typeof str !== 'string' || !str.length) {
+  if (!str || typeof str !== 'string' || !str.length) {
     return {
       operator: 'eq',
       value: str
@@ -43,27 +43,58 @@ const parseAssertionOperator = (str = '') => {
   }
 
   const operators = [
-    'eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'in', 'notIn',
-    'contains', 'notContains', 'length', 'matches', 'notMatches',
-    'startsWith', 'endsWith', 'between', 'isEmpty', 'isNull', 'isUndefined',
-    'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
+    'eq',
+    'neq',
+    'gt',
+    'gte',
+    'lt',
+    'lte',
+    'in',
+    'notIn',
+    'contains',
+    'notContains',
+    'length',
+    'matches',
+    'notMatches',
+    'startsWith',
+    'endsWith',
+    'between',
+    'isEmpty',
+    'isNull',
+    'isUndefined',
+    'isDefined',
+    'isTruthy',
+    'isFalsy',
+    'isJson',
+    'isNumber',
+    'isString',
+    'isBoolean'
   ];
 
   const unaryOperators = [
-    'isEmpty', 'isNull', 'isUndefined', 'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
+    'isEmpty',
+    'isNull',
+    'isUndefined',
+    'isDefined',
+    'isTruthy',
+    'isFalsy',
+    'isJson',
+    'isNumber',
+    'isString',
+    'isBoolean'
   ];
 
   const [operator, ...rest] = str.trim().split(' ');
   const value = rest.join(' ');
 
-  if(unaryOperators.includes(operator)) {
+  if (unaryOperators.includes(operator)) {
     return {
       operator,
       value: ''
     };
   }
 
-  if(operators.includes(operator)) {
+  if (operators.includes(operator)) {
     return {
       operator,
       value
@@ -78,22 +109,33 @@ const parseAssertionOperator = (str = '') => {
 
 const isUnaryOperator = (operator) => {
   const unaryOperators = [
-    'isEmpty', 'isNull', 'isUndefined', 'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
+    'isEmpty',
+    'isNull',
+    'isUndefined',
+    'isDefined',
+    'isTruthy',
+    'isFalsy',
+    'isJson',
+    'isNumber',
+    'isString',
+    'isBoolean'
   ];
 
   return unaryOperators.includes(operator);
 };
 
 const AssertionRow = ({
-  item, collection, assertion, handleAssertionChange, handleRemoveAssertion,
-  onSave, handleRun
+  item,
+  collection,
+  assertion,
+  handleAssertionChange,
+  handleRemoveAssertion,
+  onSave,
+  handleRun
 }) => {
   const { storedTheme } = useTheme();
 
-  const {
-    operator,
-    value
-  } = parseAssertionOperator(assertion.value);
+  const { operator, value } = parseAssertionOperator(assertion.value);
 
   return (
     <tr key={assertion.uid}>
@@ -112,11 +154,17 @@ const AssertionRow = ({
       <td>
         <AssertionOperator
           operator={operator}
-          onChange={(op) => handleAssertionChange({
-            target: {
-              value: `${op} ${value}`
-            }
-          }, assertion, 'value')}
+          onChange={(op) =>
+            handleAssertionChange(
+              {
+                target: {
+                  value: `${op} ${value}`
+                }
+              },
+              assertion,
+              'value'
+            )
+          }
         />
       </td>
       <td>
@@ -126,20 +174,22 @@ const AssertionRow = ({
             theme={storedTheme}
             readOnly={true}
             onSave={onSave}
-            onChange={(newValue) => handleAssertionChange({
-              target: {
-                value: newValue
-              }
-            }, assertion, 'value')}
+            onChange={(newValue) =>
+              handleAssertionChange(
+                {
+                  target: {
+                    value: newValue
+                  }
+                },
+                assertion,
+                'value'
+              )
+            }
             onRun={handleRun}
             collection={collection}
           />
         ) : (
-          <input
-            type="text"
-            className='cursor-default'
-            disabled
-          />
+          <input type="text" className="cursor-default" disabled />
         )}
       </td>
       <td>
diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
index c848c3ae8..4f28cc579 100644
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
@@ -4,7 +4,11 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { addFormUrlEncodedParam, updateFormUrlEncodedParam, deleteFormUrlEncodedParam } from 'providers/ReduxStore/slices/collections';
+import {
+  addFormUrlEncodedParam,
+  updateFormUrlEncodedParam,
+  deleteFormUrlEncodedParam
+} from 'providers/ReduxStore/slices/collections';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
@@ -88,22 +92,33 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor 
+                      <SingleLineEditor
                         value={param.value}
                         theme={storedTheme}
                         onSave={onSave}
-                        onChange={(newValue) => handleParamChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, param, 'value')}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'value'
+                          )
+                        }
                         onRun={handleRun}
                         collection={collection}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
+                        <input
+                          type="checkbox"
+                          checked={param.enabled}
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                        />
                         <button onClick={() => handleRemoveParams(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
index bb4ae78b0..d25eaec03 100644
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@@ -24,29 +24,24 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
   const query = item.draft ? get(item, 'draft.request.body.graphql.query') : get(item, 'request.body.graphql.query');
-  const variables = item.draft ? get(item, 'draft.request.body.graphql.variables') : get(item, 'request.body.graphql.variables');
+  const variables = item.draft
+    ? get(item, 'draft.request.body.graphql.variables')
+    : get(item, 'request.body.graphql.variables');
   const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
-  const {
-    storedTheme
-  } = useTheme();
+  const { storedTheme } = useTheme();
 
   const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
-  
-  let {
-    schema,
-    loadSchema,
-    isLoading: isSchemaLoading,
-    error: schemaError
-  } = useGraphqlSchema(url, environment);
+
+  let { schema, loadSchema, isLoading: isSchemaLoading, error: schemaError } = useGraphqlSchema(url, environment);
 
   const loadGqlSchema = () => {
-    if(!isSchemaLoading) {
+    if (!isSchemaLoading) {
       loadSchema();
     }
   };
 
   useEffect(() => {
-    if(onSchemaLoad) {
+    if (onSchemaLoad) {
       onSchemaLoad(schema);
     }
   }, [schema]);
@@ -75,17 +70,19 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
   const getTabPanel = (tab) => {
     switch (tab) {
       case 'query': {
-        return <QueryEditor
-          collection={collection}
-          theme={storedTheme}
-          schema={schema}
-          width={leftPaneWidth}
-          onSave={onSave}
-          value={query}
-          onRun={onRun}
-          onEdit={onQueryChange}
-          onClickReference={handleGqlClickReference}
-        />;
+        return (
+          <QueryEditor
+            collection={collection}
+            theme={storedTheme}
+            schema={schema}
+            width={leftPaneWidth}
+            onSave={onSave}
+            value={query}
+            onRun={onRun}
+            onEdit={onQueryChange}
+            onClickReference={handleGqlClickReference}
+          />
+        );
       }
       case 'variables': {
         return <GraphQLVariables item={item} variables={variables} collection={collection} />;
@@ -150,20 +147,16 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests
         </div>
-        <div className="flex flex-grow justify-end items-center" style={{fontSize: 13}}>
-          <div className='flex items-center cursor-pointer hover:underline' onClick={loadGqlSchema}>
-            {isSchemaLoading ? (
-              <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5}/>
-            ) : null}
-            {!isSchemaLoading && !schema ? <IconDownload size={18} strokeWidth={1.5}/> : null }
-            {!isSchemaLoading && schema ? <IconRefresh size={18} strokeWidth={1.5}/> : null }
-            <span className='ml-1'>Schema</span>
+        <div className="flex flex-grow justify-end items-center" style={{ fontSize: 13 }}>
+          <div className="flex items-center cursor-pointer hover:underline" onClick={loadGqlSchema}>
+            {isSchemaLoading ? <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5} /> : null}
+            {!isSchemaLoading && !schema ? <IconDownload size={18} strokeWidth={1.5} /> : null}
+            {!isSchemaLoading && schema ? <IconRefresh size={18} strokeWidth={1.5} /> : null}
+            <span className="ml-1">Schema</span>
           </div>
-          <div
-            className='flex items-center cursor-pointer hover:underline ml-2'
-            onClick={toggleDocs}
-          >
-            <IconBook size={18} strokeWidth={1.5} /><span className='ml-1'>Docs</span>
+          <div className="flex items-center cursor-pointer hover:underline ml-2" onClick={toggleDocs}>
+            <IconBook size={18} strokeWidth={1.5} />
+            <span className="ml-1">Docs</span>
           </div>
         </div>
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/useGraphqlSchema.js b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/useGraphqlSchema.js
index 7642f3027..308a65e61 100644
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/useGraphqlSchema.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/useGraphqlSchema.js
@@ -13,7 +13,7 @@ const useGraphqlSchema = (endpoint, environment) => {
   const [schema, setSchema] = useState(() => {
     try {
       const saved = localStorage.getItem(localStorageKey);
-      if(!saved) {
+      if (!saved) {
         return null;
       }
       return buildClientSchema(JSON.parse(saved));
diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
index f5c51c639..59b132044 100644
--- a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
@@ -9,9 +9,7 @@ import StyledWrapper from './StyledWrapper';
 const GraphQLVariables = ({ variables, item, collection }) => {
   const dispatch = useDispatch();
 
-  const {
-    storedTheme
-  } = useTheme();
+  const { storedTheme } = useTheme();
 
   const onEdit = (value) => {
     dispatch(
@@ -29,10 +27,11 @@ const GraphQLVariables = ({ variables, item, collection }) => {
   return (
     <StyledWrapper className="w-full">
       <CodeEditor
-        collection={collection} value={variables || ''}
+        collection={collection}
+        value={variables || ''}
         theme={storedTheme}
         onEdit={onEdit}
-        mode='javascript'
+        mode="javascript"
         onRun={onRun}
         onSave={onSave}
       />
diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
index 55da6c9ca..cd40302e2 100644
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -103,7 +103,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
           </div>
         ) : null}
       </div>
-      <section className={`flex w-full ${['script', 'vars'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}>{getTabPanel(focusedTab.requestPaneTab)}</section>
+      <section className={`flex w-full ${['script', 'vars'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}>
+        {getTabPanel(focusedTab.requestPaneTab)}
+      </section>
     </StyledWrapper>
   );
 };
diff --git a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
index de3218cb1..f04a30be0 100644
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
@@ -41,7 +41,6 @@ const Wrapper = styled.div`
     color: ${(props) => props.theme.table.input.color};
     background: transparent;
 
-
     &:focus {
       outline: none !important;
       border: solid 1px transparent;
diff --git a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
index ae237bb17..9cbfd67fd 100644
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
@@ -4,7 +4,11 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { addMultipartFormParam, updateMultipartFormParam, deleteMultipartFormParam } from 'providers/ReduxStore/slices/collections';
+import {
+  addMultipartFormParam,
+  updateMultipartFormParam,
+  deleteMultipartFormParam
+} from 'providers/ReduxStore/slices/collections';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
@@ -88,22 +92,33 @@ const MultipartFormParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor 
+                      <SingleLineEditor
                         onSave={onSave}
                         theme={storedTheme}
-                        value={param.value} 
-                        onChange={(newValue) => handleParamChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, param, 'value')}
+                        value={param.value}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'value'
+                          )
+                        }
                         onRun={handleRun}
                         collection={collection}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
+                        <input
+                          type="checkbox"
+                          checked={param.enabled}
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                        />
                         <button onClick={() => handleRemoveParams(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
index 8768f77a6..99d5ed3b9 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
@@ -15,16 +15,19 @@ const StyledWrapper = styled.div`
   // Todo: dark mode temporary fix
   // Clean this
   .CodeMirror.cm-s-monokai {
-    .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
+    .CodeMirror-overlayscroll-horizontal div,
+    .CodeMirror-overlayscroll-vertical div {
       background: #444444;
     }
   }
 
-  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
+  .cm-s-monokai span.cm-property,
+  .cm-s-monokai span.cm-attribute {
     color: #9cdcfe !important;
   }
 
-  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
+  .cm-s-monokai span.cm-property,
+  .cm-s-monokai span.cm-attribute {
     color: #9cdcfe !important;
   }
 
@@ -32,16 +35,20 @@ const StyledWrapper = styled.div`
     color: #ce9178 !important;
   }
 
-  .cm-s-monokai span.cm-number{
+  .cm-s-monokai span.cm-number {
     color: #b5cea8 !important;
   }
 
-  .cm-s-monokai span.cm-atom{
+  .cm-s-monokai span.cm-atom {
     color: #569cd6 !important;
   }
 
-  .cm-variable-valid{color: green}
-  .cm-variable-invalid{color: red}
+  .cm-variable-valid {
+    color: green;
+  }
+  .cm-variable-invalid {
+    color: red;
+  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
index 068da7716..32f2fe0e1 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
@@ -43,7 +43,7 @@ export default class QueryEditor extends React.Component {
       mode: 'graphql',
       // mode: 'brunovariables',
       brunoVarInfo: {
-        variables: getAllVariables(this.props.collection),
+        variables: getAllVariables(this.props.collection)
       },
       theme: this.props.editorTheme || 'graphiql',
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
@@ -51,7 +51,7 @@ export default class QueryEditor extends React.Component {
       autoCloseBrackets: true,
       matchBrackets: true,
       showCursorWhenSelecting: true,
-      scrollbarStyle: "overlay",
+      scrollbarStyle: 'overlay',
       readOnly: this.props.readOnly ? 'nocursor' : false,
       foldGutter: {
         minFoldSize: 4
@@ -179,14 +179,13 @@ export default class QueryEditor extends React.Component {
   }
 
   // Todo: Overlay is messing up with schema hint
-  // Fix this  
+  // Fix this
   addOverlay = () => {
     // let variables = getAllVariables(this.props.collection);
     // this.variables = variables;
-
     // defineCodeMirrorBrunoVariablesMode(variables, 'graphql');
     // this.editor.setOption('mode', 'brunovariables');
-  }
+  };
 
   render() {
     return (
diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/onHasCompletion.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/onHasCompletion.js
index 15bb2c867..080a4cfba 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/onHasCompletion.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/onHasCompletion.js
@@ -59,7 +59,10 @@ export default function onHasCompletion(_cm, data, onHintInformationRender) {
     const description = ctx.description ? md.render(ctx.description) : 'Self descriptive.';
     const type = ctx.type ? '<span className="infoType">' + renderType(ctx.type) + '</span>' : '';
 
-    information.innerHTML = '<div className="content">' + (description.slice(0, 3) === '<p>' ? '<p>' + type + description.slice(3) : type + description) + '</div>';
+    information.innerHTML =
+      '<div className="content">' +
+      (description.slice(0, 3) === '<p>' ? '<p>' + type + description.slice(3) : type + description) +
+      '</div>';
 
     if (ctx && deprecation && ctx.deprecationReason) {
       const reason = ctx.deprecationReason ? md.render(ctx.deprecationReason) : '';
diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
index a15d5a4b5..d3dc58d5c 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};;
+      color: ${(props) => props.theme.table.thead.color};
       font-size: 0.8125rem;
       user-select: none;
     }
diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
index cf76a77a1..0cb92f8e1 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
@@ -91,22 +91,33 @@ const QueryParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor 
+                      <SingleLineEditor
                         value={param.value}
                         theme={storedTheme}
                         onSave={onSave}
-                        onChange={(newValue) => handleParamChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, param, 'value')}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'value'
+                          )
+                        }
                         onRun={handleRun}
                         collection={collection}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
+                        <input
+                          type="checkbox"
+                          checked={param.enabled}
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                        />
                         <button onClick={() => handleRemoveParam(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
index eb72c85b7..c2bdf15f1 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
@@ -10,7 +10,9 @@ const HttpMethodSelector = ({ method, onMethodSelect }) => {
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex w-full items-center pl-3 py-1 select-none uppercase">
-        <div className="flex-grow font-medium" id="create-new-request-method">{method}</div>
+        <div className="flex-grow font-medium" id="create-new-request-method">
+          {method}
+        </div>
         <div>
           <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
         </div>
diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
index eda5e33e6..f783bb9d5 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect}  from 'react';
+import React, { useState, useEffect } from 'react';
 import get from 'lodash/get';
 import { useDispatch } from 'react-redux';
 import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections';
@@ -18,7 +18,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
   const [methodSelectorWidth, setMethodSelectorWidth] = useState(90);
 
   useEffect(() => {
-    const el = document.querySelector(".method-selector-container");
+    const el = document.querySelector('.method-selector-container');
     setMethodSelectorWidth(el.offsetWidth);
   }, [method]);
 
@@ -56,8 +56,8 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           maxWidth: `calc(100% - ${methodSelectorWidth}px)`
         }}
       >
-        <SingleLineEditor 
-          value={url} 
+        <SingleLineEditor
+          value={url}
           onSave={onSave}
           theme={storedTheme}
           onChange={(newValue) => onUrlChange(newValue)}
@@ -65,7 +65,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           collection={collection}
         />
         <div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
-          <SendIcon color={theme.requestTabPanel.url.icon} width={22}/>
+          <SendIcon color={theme.requestTabPanel.url.icon} width={22} />
         </div>
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
index 91192f054..7ac178f79 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
@@ -13,9 +13,7 @@ const RequestBody = ({ item, collection }) => {
   const dispatch = useDispatch();
   const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
   const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
-  const {
-    storedTheme
-  } = useTheme();
+  const { storedTheme } = useTheme();
 
   const onEdit = (value) => {
     dispatch(
@@ -45,7 +43,15 @@ const RequestBody = ({ item, collection }) => {
 
     return (
       <StyledWrapper className="w-full">
-        <CodeEditor collection={collection} theme={storedTheme} value={bodyContent[bodyMode] || ''} onEdit={onEdit} onRun={onRun} onSave={onSave} mode={codeMirrorMode[bodyMode]} />
+        <CodeEditor
+          collection={collection}
+          theme={storedTheme}
+          value={bodyContent[bodyMode] || ''}
+          onEdit={onEdit}
+          onRun={onRun}
+          onSave={onSave}
+          mode={codeMirrorMode[bodyMode]}
+        />
       </StyledWrapper>
     );
   }
diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
index 4d4afe715..04cb04d88 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
@@ -92,18 +92,29 @@ const RequestHeaders = ({ item, collection }) => {
                         value={header.value}
                         theme={storedTheme}
                         onSave={onSave}
-                        onChange={(newValue) => handleHeaderValueChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, header, 'value')}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'value'
+                          )
+                        }
                         onRun={handleRun}
                         collection={collection}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input type="checkbox" checked={header.enabled} className="mr-3 mousetrap" onChange={(e) => handleHeaderValueChange(e, header, 'enabled')} />
+                        <input
+                          type="checkbox"
+                          checked={header.enabled}
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
+                        />
                         <button onClick={() => handleRemoveHeader(header)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
diff --git a/packages/bruno-app/src/components/RequestPane/SaveRequest/index.js b/packages/bruno-app/src/components/RequestPane/SaveRequest/index.js
index a0ddaca90..4b119f853 100644
--- a/packages/bruno-app/src/components/RequestPane/SaveRequest/index.js
+++ b/packages/bruno-app/src/components/RequestPane/SaveRequest/index.js
@@ -28,7 +28,14 @@ const SaveRequest = ({ items, onClose }) => {
 
   return (
     <StyledWrapper>
-      <Modal size="md" title="Save Request" confirmText="Save" cancelText="Cancel" handleCancel={onClose} handleConfirm={onClose}>
+      <Modal
+        size="md"
+        title="Save Request"
+        confirmText="Save"
+        cancelText="Cancel"
+        handleCancel={onClose}
+        handleConfirm={onClose}
+      >
         <p className="mb-2">Select a folder to save request:</p>
         <div className="folder-list">
           {showFolders && showFolders.length
diff --git a/packages/bruno-app/src/components/RequestPane/Script/index.js b/packages/bruno-app/src/components/RequestPane/Script/index.js
index d7fc8d54a..75ee3d360 100644
--- a/packages/bruno-app/src/components/RequestPane/Script/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Script/index.js
@@ -12,9 +12,7 @@ const Script = ({ item, collection }) => {
   const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
   const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
 
-  const {
-    storedTheme
-  } = useTheme();
+  const { storedTheme } = useTheme();
 
   const onRequestScriptEdit = (value) => {
     dispatch(
@@ -29,36 +27,38 @@ const Script = ({ item, collection }) => {
   const onResponseScriptEdit = (value) => {
     dispatch(
       updateResponseScript({
-      script: value,
-      itemUid: item.uid,
-      collectionUid: collection.uid
-    })
-  );
-};
+        script: value,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
 
   const onRun = () => dispatch(sendRequest(item, collection.uid));
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
     <StyledWrapper className="w-full flex flex-col">
-      <div className='flex-1 mt-2'>
-        <div className='mb-1 title text-xs'>Pre Request</div>
+      <div className="flex-1 mt-2">
+        <div className="mb-1 title text-xs">Pre Request</div>
         <CodeEditor
-          collection={collection} value={requestScript || ''}
+          collection={collection}
+          value={requestScript || ''}
           theme={storedTheme}
           onEdit={onRequestScriptEdit}
-          mode='javascript'
+          mode="javascript"
           onRun={onRun}
           onSave={onSave}
         />
       </div>
-      <div className='flex-1 mt-6'>
-        <div className='mt-1 mb-1 title text-xs'>Post Response</div>
+      <div className="flex-1 mt-6">
+        <div className="mt-1 mb-1 title text-xs">Post Response</div>
         <CodeEditor
-          collection={collection} value={responseScript || ''}
+          collection={collection}
+          value={responseScript || ''}
           theme={storedTheme}
           onEdit={onResponseScriptEdit}
-          mode='javascript'
+          mode="javascript"
           onRun={onRun}
           onSave={onSave}
         />
diff --git a/packages/bruno-app/src/components/RequestPane/Tests/index.js b/packages/bruno-app/src/components/RequestPane/Tests/index.js
index ba748285c..351afd3d3 100644
--- a/packages/bruno-app/src/components/RequestPane/Tests/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Tests/index.js
@@ -11,9 +11,7 @@ const Tests = ({ item, collection }) => {
   const dispatch = useDispatch();
   const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');
 
-  const {
-    storedTheme
-  } = useTheme();
+  const { storedTheme } = useTheme();
 
   const onEdit = (value) => {
     dispatch(
@@ -31,10 +29,11 @@ const Tests = ({ item, collection }) => {
   return (
     <StyledWrapper className="w-full">
       <CodeEditor
-        collection={collection} value={tests || ''}
+        collection={collection}
+        value={tests || ''}
         theme={storedTheme}
         onEdit={onEdit}
-        mode='javascript'
+        mode="javascript"
         onRun={onRun}
         onSave={onSave}
       />
diff --git a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
index 0ea94b408..7333acc62 100644
--- a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
@@ -68,18 +68,18 @@ const VarsTable = ({ item, collection, vars, varType }) => {
         <thead>
           <tr>
             <td>Name</td>
-            { varType === 'request' ? (
+            {varType === 'request' ? (
               <td>
-                <div className='flex items-center'>
+                <div className="flex items-center">
                   <span>Value</span>
-                  <Tooltip text="You can write any valid JS Template Literal here" tooltipId="request-var"/>
+                  <Tooltip text="You can write any valid JS Template Literal here" tooltipId="request-var" />
                 </div>
               </td>
-            ) :  (
+            ) : (
               <td>
-                <div className='flex items-center'>
+                <div className="flex items-center">
                   <span>Expr</span>
-                  <Tooltip text="You can write any valid JS expression here" tooltipId="response-var"/>
+                  <Tooltip text="You can write any valid JS expression here" tooltipId="response-var" />
                 </div>
               </td>
             )}
@@ -108,11 +108,17 @@ const VarsTable = ({ item, collection, vars, varType }) => {
                         value={_var.value}
                         theme={storedTheme}
                         onSave={onSave}
-                        onChange={(newValue) => handleVarChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, _var, 'value')}
+                        onChange={(newValue) =>
+                          handleVarChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            _var,
+                            'value'
+                          )
+                        }
                         onRun={handleRun}
                         collection={collection}
                       />
diff --git a/packages/bruno-app/src/components/RequestPane/Vars/index.js b/packages/bruno-app/src/components/RequestPane/Vars/index.js
index 1da6f69ba..b63c08801 100644
--- a/packages/bruno-app/src/components/RequestPane/Vars/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/index.js
@@ -12,9 +12,7 @@ const Vars = ({ item, collection }) => {
   const requestVars = item.draft ? get(item, 'draft.request.vars.req') : get(item, 'request.vars.req');
   const responseVars = item.draft ? get(item, 'draft.request.vars.res') : get(item, 'request.vars.res');
 
-  const {
-    storedTheme
-  } = useTheme();
+  const { storedTheme } = useTheme();
 
   const onRequestScriptEdit = (value) => {
     dispatch(
@@ -29,25 +27,25 @@ const Vars = ({ item, collection }) => {
   const onResponseScriptEdit = (value) => {
     dispatch(
       updateResponseScript({
-      script: value,
-      itemUid: item.uid,
-      collectionUid: collection.uid
-    })
-  );
-};
+        script: value,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
 
   const onRun = () => dispatch(sendRequest(item, collection.uid));
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
     <StyledWrapper className="w-full flex flex-col">
-      <div className='flex-1 mt-2'>
-        <div className='mb-1 title text-xs'>Pre Request</div>
-        <VarsTable item={item} collection={collection} vars={requestVars} varType='request'/>
+      <div className="flex-1 mt-2">
+        <div className="mb-1 title text-xs">Pre Request</div>
+        <VarsTable item={item} collection={collection} vars={requestVars} varType="request" />
       </div>
-      <div className='flex-1'>
-        <div className='mt-1 mb-1 title text-xs'>Post Response</div>
-        <VarsTable item={item} collection={collection} vars={responseVars} varType='response'/>
+      <div className="flex-1">
+        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
       </div>
     </StyledWrapper>
   );
diff --git a/packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js b/packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js
index e3bed1c40..db0e45e41 100644
--- a/packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js
@@ -24,7 +24,7 @@ const RequestNotFound = ({ itemUid }) => {
   // and then shows the error message after a delay
   // this will prevent the error message from flashing on the screen
 
-  if(!showErrorMessage) {
+  if (!showErrorMessage) {
     return null;
   }
 
@@ -32,7 +32,9 @@ const RequestNotFound = ({ itemUid }) => {
     <div className="mt-6 px-6">
       <div className="p-4 bg-orange-100 border-l-4 border-yellow-500 text-yellow-700 bg-yellow-100 p-4">
         <div>Request no longer exists.</div>
-        <div className="mt-2">This can happen when the .bru file associated with this request was deleted on your filesystem.</div>
+        <div className="mt-2">
+          This can happen when the .bru file associated with this request was deleted on your filesystem.
+        </div>
       </div>
       <button className="btn btn-md btn-secondary mt-6" onClick={closeTab}>
         Close Tab
diff --git a/packages/bruno-app/src/components/RequestTabPanel/index.js b/packages/bruno-app/src/components/RequestTabPanel/index.js
index cd0cf14b4..371778fbf 100644
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -33,7 +33,9 @@ const RequestTabPanel = () => {
 
   let asideWidth = useSelector((state) => state.app.leftSidebarWidth);
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
-  const [leftPaneWidth, setLeftPaneWidth] = useState(focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2); // 2.2 so that request pane is relatively smaller
+  const [leftPaneWidth, setLeftPaneWidth] = useState(
+    focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2
+  ); // 2.2 so that request pane is relatively smaller
   const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
   const [dragging, setDragging] = useState(false);
 
@@ -45,10 +47,10 @@ const RequestTabPanel = () => {
   const onSchemaLoad = (schema) => setSchema(schema);
   const toggleDocs = () => setShowGqlDocs((showGqlDocs) => !showGqlDocs);
   const handleGqlClickReference = (reference) => {
-    if(docExplorerRef.current) {
+    if (docExplorerRef.current) {
       docExplorerRef.current.showDocForReference(reference);
     }
-    if(!showGqlDocs) {
+    if (!showGqlDocs) {
       setShowGqlDocs(true);
     }
   };
@@ -66,10 +68,13 @@ const RequestTabPanel = () => {
     if (dragging) {
       e.preventDefault();
       let leftPaneXPosition = e.clientX + 2;
-      if (leftPaneXPosition < (asideWidth+ DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH) || leftPaneXPosition > (screenWidth - MIN_RIGHT_PANE_WIDTH )) {
+      if (
+        leftPaneXPosition < asideWidth + DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH ||
+        leftPaneXPosition > screenWidth - MIN_RIGHT_PANE_WIDTH
+      ) {
         return;
       }
-      setLeftPaneWidth(leftPaneXPosition- asideWidth);
+      setLeftPaneWidth(leftPaneXPosition - asideWidth);
       setRightPaneWidth(screenWidth - e.clientX - DEFAULT_PADDING);
     }
   };
@@ -114,8 +119,8 @@ const RequestTabPanel = () => {
   }
 
   const showRunner = collection.showRunner;
-  if(showRunner) {
-    return <RunnerResults collection={collection}/>;
+  if (showRunner) {
+    return <RunnerResults collection={collection} />;
   }
 
   const item = findItemInCollection(collection, activeTabUid);
@@ -138,7 +143,13 @@ const RequestTabPanel = () => {
       </div>
       <section className="main flex flex-grow pb-4 relative">
         <section className="request-pane">
-          <div className="px-4" style={{ width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`, height: `calc(100% - ${DEFAULT_PADDING}px)` }}>
+          <div
+            className="px-4"
+            style={{
+              width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`,
+              height: `calc(100% - ${DEFAULT_PADDING}px)`
+            }}
+          >
             {item.type === 'graphql-request' ? (
               <GraphQLRequestPane
                 item={item}
@@ -150,7 +161,9 @@ const RequestTabPanel = () => {
               />
             ) : null}
 
-            {item.type === 'http-request' ? <HttpRequestPane item={item} collection={collection} leftPaneWidth={leftPaneWidth} /> : null}
+            {item.type === 'http-request' ? (
+              <HttpRequestPane item={item} collection={collection} leftPaneWidth={leftPaneWidth} />
+            ) : null}
           </div>
         </section>
 
@@ -165,19 +178,15 @@ const RequestTabPanel = () => {
 
       {item.type === 'graphql-request' ? (
         <div className={`graphql-docs-explorer-container ${showGqlDocs ? '' : 'hidden'}`}>
-          <DocExplorer schema={schema} ref={(r) => docExplorerRef.current = r}>
-            <button
-              className='mr-2'
-              onClick={toggleDocs}
-              aria-label="Close Documentation Explorer"
-            >
+          <DocExplorer schema={schema} ref={(r) => (docExplorerRef.current = r)}>
+            <button className="mr-2" onClick={toggleDocs} aria-label="Close Documentation Explorer">
               {'\u2715'}
             </button>
           </DocExplorer>
         </div>
-      ): null}
+      ) : null}
     </StyledWrapper>
   );
 };
 
-export default RequestTabPanel;
\ No newline at end of file
+export default RequestTabPanel;
diff --git a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
index d804e5da9..1d96df94b 100644
--- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
@@ -10,9 +10,11 @@ const CollectionToolBar = ({ collection }) => {
   const dispatch = useDispatch();
 
   const handleRun = () => {
-    dispatch(toggleRunnerView({
-      collectionUid: collection.uid
-    }));
+    dispatch(
+      toggleRunnerView({
+        collectionUid: collection.uid
+      })
+    );
   };
 
   return (
@@ -26,7 +28,7 @@ const CollectionToolBar = ({ collection }) => {
           <span className="mr-2">
             <IconRun className="cursor-pointer" size={20} strokeWidth={1.5} onClick={handleRun} />
           </span>
-          <VariablesView collection={collection}/>
+          <VariablesView collection={collection} />
           <EnvironmentSelector collection={collection} />
         </div>
       </div>
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
index 180d4fa02..7bf45446e 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { IconAlertTriangle } from '@tabler/icons';
 
-const RequestTabNotFound = ({handleCloseClick}) => {
+const RequestTabNotFound = ({ handleCloseClick }) => {
   const [showErrorMessage, setShowErrorMessage] = useState(false);
 
   // add a delay component in react that shows a loading spinner
@@ -13,7 +13,7 @@ const RequestTabNotFound = ({handleCloseClick}) => {
     }, 300);
   }, []);
 
-  if(!showErrorMessage) {
+  if (!showErrorMessage) {
     return null;
   }
 
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index 7754b6286..a10fd8994 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -87,7 +87,15 @@ const RequestTab = ({ tab, collection }) => {
             ></path>
           </svg>
         ) : (
-          <svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="8" height="16" fill="#cc7b1b" className="has-changes-icon" viewBox="0 0 8 8">
+          <svg
+            focusable="false"
+            xmlns="http://www.w3.org/2000/svg"
+            width="8"
+            height="16"
+            fill="#cc7b1b"
+            className="has-changes-icon"
+            viewBox="0 0 8 8"
+          >
             <circle cx="4" cy="4" r="3" />
           </svg>
         )}
diff --git a/packages/bruno-app/src/components/RequestTabs/index.js b/packages/bruno-app/src/components/RequestTabs/index.js
index 7dbaca53e..a92c55271 100644
--- a/packages/bruno-app/src/components/RequestTabs/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/index.js
@@ -81,7 +81,9 @@ const RequestTabs = () => {
   // Todo: Must support ephermal requests
   return (
     <StyledWrapper className={getRootClassname()}>
-      {newRequestModalOpen && <NewRequest collection={activeCollection} onClose={() => setNewRequestModalOpen(false)} />}
+      {newRequestModalOpen && (
+        <NewRequest collection={activeCollection} onClose={() => setNewRequestModalOpen(false)} />
+      )}
       {collectionRequestTabs && collectionRequestTabs.length ? (
         <>
           <CollectionToolBar collection={activeCollection} />
@@ -106,7 +108,12 @@ const RequestTabs = () => {
                 {collectionRequestTabs && collectionRequestTabs.length
                   ? collectionRequestTabs.map((tab, index) => {
                       return (
-                        <li key={tab.uid} className={getTabClassname(tab, index)} role="tab" onClick={() => handleClick(tab)}>
+                        <li
+                          key={tab.uid}
+                          className={getTabClassname(tab, index)}
+                          role="tab"
+                          onClick={() => handleClick(tab)}
+                        >
                           <RequestTab key={tab.uid} tab={tab} collection={activeCollection} activeTab={activeTab} />
                         </li>
                       );
@@ -124,7 +131,13 @@ const RequestTabs = () => {
                 ) : null}
                 <li className="select-none short-tab" id="create-new-tab" onClick={createNewTab}>
                   <div className="flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="22"
+                      height="22"
+                      fill="currentColor"
+                      viewBox="0 0 16 16"
+                    >
                       <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                     </svg>
                   </div>
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
index 84a8a748e..e6d6f94a8 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -20,7 +20,14 @@ const QueryResult = ({ item, collection, value, width, disableRunEventListener,
   return (
     <StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
       <div className="h-full">
-        <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value || ''} mode={mode} readOnly />
+        <CodeEditor
+          collection={collection}
+          theme={storedTheme}
+          onRun={onRun}
+          value={value || ''}
+          mode={mode}
+          readOnly
+        />
       </div>
     </StyledWrapper>
   );
diff --git a/packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js
index f0eb25be2..0633fac1e 100644
--- a/packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js
@@ -3,11 +3,11 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   font-size: 0.75rem;
   font-weight: 600;
-  
+
   &.text-ok {
     color: ${(props) => props.theme.requestTabPanel.responseOk};
   }
-  
+
   &.text-error {
     color: ${(props) => props.theme.requestTabPanel.responseError};
   }
diff --git a/packages/bruno-app/src/components/ResponsePane/TestResults/index.js b/packages/bruno-app/src/components/ResponsePane/TestResults/index.js
index 10e7d3afc..592a2fea5 100644
--- a/packages/bruno-app/src/components/ResponsePane/TestResults/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/TestResults/index.js
@@ -5,11 +5,7 @@ const TestResults = ({ results, assertionResults }) => {
   results = results || [];
   assertionResults = assertionResults || [];
   if (!results.length && !assertionResults.length) {
-    return (
-      <div className="px-3">
-        No tests found
-      </div>
-    );
+    return <div className="px-3">No tests found</div>;
   }
 
   const passedTests = results.filter((result) => result.status === 'pass');
@@ -19,7 +15,7 @@ const TestResults = ({ results, assertionResults }) => {
   const failedAssertions = assertionResults.filter((result) => result.status === 'fail');
 
   return (
-    <StyledWrapper className='flex flex-col px-3'>
+    <StyledWrapper className="flex flex-col px-3">
       <div className="py-2 font-medium test-summary">
         Tests ({results.length}/{results.length}), Passed: {passedTests.length}, Failed: {failedTests.length}
       </div>
@@ -27,18 +23,12 @@ const TestResults = ({ results, assertionResults }) => {
         {results.map((result) => (
           <li key={result.uid} className="py-1">
             {result.status === 'pass' ? (
-              <span className="test-success">
-                &#x2714;&nbsp; {result.description}
-              </span>
+              <span className="test-success">&#x2714;&nbsp; {result.description}</span>
             ) : (
               <>
-                <span className="test-failure">
-                  &#x2718;&nbsp; {result.description}
-                </span>
+                <span className="test-failure">&#x2718;&nbsp; {result.description}</span>
                 <br />
-                <span className="error-message pl-8">
-                  {result.error}
-                </span>
+                <span className="error-message pl-8">{result.error}</span>
               </>
             )}
           </li>
@@ -46,7 +36,8 @@ const TestResults = ({ results, assertionResults }) => {
       </ul>
 
       <div className="py-2 font-medium test-summary">
-        Assertions ({assertionResults.length}/{assertionResults.length}), Passed: {passedAssertions.length}, Failed: {failedAssertions.length}
+        Assertions ({assertionResults.length}/{assertionResults.length}), Passed: {passedAssertions.length}, Failed:{' '}
+        {failedAssertions.length}
       </div>
       <ul className="">
         {assertionResults.map((result) => (
@@ -61,9 +52,7 @@ const TestResults = ({ results, assertionResults }) => {
                   &#x2718;&nbsp; {result.lhsExpr}: {result.rhsExpr}
                 </span>
                 <br />
-                <span className="error-message pl-8">
-                  {result.error}
-                </span>
+                <span className="error-message pl-8">{result.error}</span>
               </>
             )}
           </li>
diff --git a/packages/bruno-app/src/components/ResponsePane/TestResultsLabel/index.js b/packages/bruno-app/src/components/ResponsePane/TestResultsLabel/index.js
index 6cf9a57b9..f894d1f76 100644
--- a/packages/bruno-app/src/components/ResponsePane/TestResultsLabel/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/TestResultsLabel/index.js
@@ -3,32 +3,28 @@ import React from 'react';
 const TestResultsLabel = ({ results, assertionResults }) => {
   results = results || [];
   assertionResults = assertionResults || [];
-  if(!results.length && !assertionResults.length) {
+  if (!results.length && !assertionResults.length) {
     return 'Tests';
   }
 
   const numberOfTests = results.length;
-  const numberOfFailedTests = results.filter(result => result.status === 'fail').length;
+  const numberOfFailedTests = results.filter((result) => result.status === 'fail').length;
 
   const numberOfAssertions = assertionResults.length;
-  const numberOfFailedAssertions = assertionResults.filter(result => result.status === 'fail').length;
+  const numberOfFailedAssertions = assertionResults.filter((result) => result.status === 'fail').length;
 
   const totalNumberOfTests = numberOfTests + numberOfAssertions;
   const totalNumberOfFailedTests = numberOfFailedTests + numberOfFailedAssertions;
 
   return (
-    <div className='flex items-center'>
+    <div className="flex items-center">
       <div>Tests</div>
       {totalNumberOfFailedTests ? (
-        <sup className='sups some-tests-failed ml-1 font-medium'>
-          {totalNumberOfFailedTests}
-        </sup>
+        <sup className="sups some-tests-failed ml-1 font-medium">{totalNumberOfFailedTests}</sup>
       ) : (
-        <sup className='sups all-tests-passed ml-1 font-medium'>
-          {totalNumberOfTests}
-        </sup>
+        <sup className="sups all-tests-passed ml-1 font-medium">{totalNumberOfTests}</sup>
       )}
-      </div>
+    </div>
   );
 };
 
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
index 3b2fd3f4f..c2d0e5de8 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
@@ -3,7 +3,7 @@ import forOwn from 'lodash/forOwn';
 import { safeStringifyJSON } from 'utils/common';
 import StyledWrapper from './StyledWrapper';
 
-const Timeline = ({ request, response}) => {
+const Timeline = ({ request, response }) => {
   const requestHeaders = [];
   const responseHeaders = response.headers || [];
 
@@ -22,32 +22,32 @@ const Timeline = ({ request, response}) => {
   return (
     <StyledWrapper className="px-3 pb-4 w-full">
       <div>
-        <pre className='line request font-bold'>
+        <pre className="line request font-bold">
           <span className="arrow">{'>'}</span> {request.method} {request.url}
         </pre>
         {requestHeaders.map((h) => {
           return (
-            <pre className='line request' key={h.name}>
+            <pre className="line request" key={h.name}>
               <span className="arrow">{'>'}</span> {h.name}: {h.value}
             </pre>
           );
         })}
 
         {requestData ? (
-          <pre className='line request'>
+          <pre className="line request">
             <span className="arrow">{'>'}</span> data {requestData}
           </pre>
         ) : null}
       </div>
 
-      <div className='mt-4'>
-        <pre className='line response font-bold'>
+      <div className="mt-4">
+        <pre className="line response font-bold">
           <span className="arrow">{'<'}</span> {response.status} {response.statusText}
         </pre>
 
         {responseHeaders.map((h) => {
           return (
-            <pre className='line response' key={h[0]}>
+            <pre className="line response" key={h[0]}>
               <span className="arrow">{'<'}</span> {h[0]}: {h[1]}
             </pre>
           );
diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
index ed070dc84..9d123dcfe 100644
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -41,7 +41,9 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
             item={item}
             collection={collection}
             width={rightPaneWidth}
-            value={response.data ? (isJson(response.headers) ? safeStringifyJSON(response.data, true) : response.data) : ''}
+            value={
+              response.data ? (isJson(response.headers) ? safeStringifyJSON(response.data, true) : response.data) : ''
+            }
             mode={getContentType(response.headers)}
           />
         );
diff --git a/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js b/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
index 8096579cc..ba87fcaf9 100644
--- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
@@ -15,11 +15,7 @@ import StyledWrapper from './StyledWrapper';
 const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const [selectedTab, setSelectedTab] = useState('response');
 
-  const {
-    requestSent,
-    responseReceived,
-    testResults
-  } = item;
+  const { requestSent, responseReceived, testResults } = item;
 
   const headers = get(item, 'responseReceived.headers', {});
   const status = get(item, 'responseReceived.status', 0);
@@ -31,13 +27,15 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const getTabPanel = (tab) => {
     switch (tab) {
       case 'response': {
-        return <QueryResult
-          item={item}
-          collection={collection}
-          width={rightPaneWidth}
-          disableRunEventListener={true}
-          value={(responseReceived && responseReceived.data) ? safeStringifyJSON(responseReceived.data, true) : ''}
-        />;
+        return (
+          <QueryResult
+            item={item}
+            collection={collection}
+            width={rightPaneWidth}
+            disableRunEventListener={true}
+            value={responseReceived && responseReceived.data ? safeStringifyJSON(responseReceived.data, true) : ''}
+          />
+        );
       }
       case 'headers': {
         return <ResponseHeaders headers={headers} />;
diff --git a/packages/bruno-app/src/components/RunnerResults/index.js b/packages/bruno-app/src/components/RunnerResults/index.js
index 68d686af0..aa269df60 100644
--- a/packages/bruno-app/src/components/RunnerResults/index.js
+++ b/packages/bruno-app/src/components/RunnerResults/index.js
@@ -18,14 +18,14 @@ const getRelativePath = (fullPath, pathname) => {
   let relativePath = path.relative(fullPath, pathname);
   const { dir, name } = path.parse(relativePath);
   return path.join(dir, name);
-}
+};
 
-export default function RunnerResults({collection}) {
+export default function RunnerResults({ collection }) {
   const dispatch = useDispatch();
   const [selectedItem, setSelectedItem] = useState(null);
 
   useEffect(() => {
-    if(!collection.runnerResult) {
+    if (!collection.runnerResult) {
       setSelectedItem(null);
     }
   }, [collection, setSelectedItem]);
@@ -42,8 +42,8 @@ export default function RunnerResults({collection}) {
     item.pathname = info.pathname;
     item.relativePath = getRelativePath(collection.pathname, info.pathname);
 
-    if(item.status !== "error") {
-      if(item.testResults) {
+    if (item.status !== 'error') {
+      if (item.testResults) {
         const failed = item.testResults.filter((result) => result.status === 'fail');
 
         item.testStatus = failed.length ? 'fail' : 'pass';
@@ -51,7 +51,7 @@ export default function RunnerResults({collection}) {
         item.testStatus = 'pass';
       }
 
-      if(item.assertionResults) {
+      if (item.assertionResults) {
         const failed = item.assertionResults.filter((result) => result.status === 'fail');
 
         item.assertionStatus = failed.length ? 'fail' : 'pass';
@@ -70,29 +70,31 @@ export default function RunnerResults({collection}) {
   };
 
   const closeRunner = () => {
-    dispatch(closeCollectionRunner({
-      collectionUid: collection.uid,
-    }));
+    dispatch(
+      closeCollectionRunner({
+        collectionUid: collection.uid
+      })
+    );
   };
 
   const totalRequestsInCollection = getTotalRequestCountInCollection(collectionCopy);
   const passedRequests = items.filter((item) => {
-    return item.status !== "error" && item.testStatus === 'pass' && item.assertionStatus === 'pass';
+    return item.status !== 'error' && item.testStatus === 'pass' && item.assertionStatus === 'pass';
   });
   const failedRequests = items.filter((item) => {
-    return item.status !== "error" && item.testStatus === 'fail' || item.assertionStatus === 'fail';
+    return (item.status !== 'error' && item.testStatus === 'fail') || item.assertionStatus === 'fail';
   });
 
-  if(!items || !items.length) {
+  if (!items || !items.length) {
     return (
-      <StyledWrapper className='px-4'>
-        <div className='font-medium mt-6 title flex items-center'>
+      <StyledWrapper className="px-4">
+        <div className="font-medium mt-6 title flex items-center">
           Runner
-          <IconRun size={20} strokeWidth={1.5} className='ml-2'/>
+          <IconRun size={20} strokeWidth={1.5} className="ml-2" />
         </div>
 
-        <div className='mt-6'>
-          You have <span className='font-medium'>{totalRequestsInCollection}</span> requests in this collection.
+        <div className="mt-6">
+          You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
         </div>
 
         <button type="submit" className="submit btn btn-sm btn-secondary mt-6" onClick={runCollection}>
@@ -107,13 +109,13 @@ export default function RunnerResults({collection}) {
   }
 
   return (
-    <StyledWrapper className='px-4'>
-      <div className='font-medium mt-6 mb-4 title flex items-center'>
+    <StyledWrapper className="px-4">
+      <div className="font-medium mt-6 mb-4 title flex items-center">
         Runner
-        <IconRun size={20} strokeWidth={1.5} className='ml-2'/>
+        <IconRun size={20} strokeWidth={1.5} className="ml-2" />
       </div>
-      <div className='flex'>
-        <div className='flex flex-col flex-1'>
+      <div className="flex">
+        <div className="flex flex-col flex-1">
           <div className="py-2 font-medium test-summary">
             Total Requests: {items.length}, Passed: {passedRequests.length}, Failed: {failedRequests.length}
           </div>
@@ -123,73 +125,69 @@ export default function RunnerResults({collection}) {
                 <div className="item-path mt-2">
                   <div className="flex items-center">
                     <span>
-                        {item.status !== "error" && item.testStatus === 'pass' ? (
-                          <IconCircleCheck className="test-success" size={20} strokeWidth={1.5}/>
-                        ) : (
-                          <IconCircleX className="test-failure" size={20} strokeWidth={1.5}/>
-                        )}
+                      {item.status !== 'error' && item.testStatus === 'pass' ? (
+                        <IconCircleCheck className="test-success" size={20} strokeWidth={1.5} />
+                      ) : (
+                        <IconCircleX className="test-failure" size={20} strokeWidth={1.5} />
+                      )}
                     </span>
-                    <span className={`mr-1 ml-2 ${(item.status == "error" || item.testStatus == 'fail') ? 'danger' : ''}`}>{item.relativePath}</span>
-                    {(item.status !== "error" && item.status !== "completed") ? (
-                      <IconRefresh className="animate-spin ml-1" size={18} strokeWidth={1.5}/>
+                    <span
+                      className={`mr-1 ml-2 ${item.status == 'error' || item.testStatus == 'fail' ? 'danger' : ''}`}
+                    >
+                      {item.relativePath}
+                    </span>
+                    {item.status !== 'error' && item.status !== 'completed' ? (
+                      <IconRefresh className="animate-spin ml-1" size={18} strokeWidth={1.5} />
                     ) : (
-                      <span className='text-xs link cursor-pointer' onClick={() => setSelectedItem(item)}>
-                        (<span className='mr-1'>
-                          {get(item.responseReceived, 'status')}
-                        </span>
-                        <span>
-                          {get(item.responseReceived, 'statusText')}
-                        </span>)
+                      <span className="text-xs link cursor-pointer" onClick={() => setSelectedItem(item)}>
+                        (<span className="mr-1">{get(item.responseReceived, 'status')}</span>
+                        <span>{get(item.responseReceived, 'statusText')}</span>)
                       </span>
                     )}
                   </div>
-                  {item.status == "error" ? (
-                    <div className="error-message pl-8 pt-2 text-xs">
-                      {item.error}
-                    </div>
-                  ) : null }
+                  {item.status == 'error' ? <div className="error-message pl-8 pt-2 text-xs">{item.error}</div> : null}
 
                   <ul className="pl-8">
-                    {item.testResults ? item.testResults.map((result) => (
-                      <li key={result.uid}>
-                        {result.status === 'pass' ? (
-                          <span className="test-success flex items-center">
-                            <IconCheck size={18} strokeWidth={2} className="mr-2"/>
-                            {result.description}
-                          </span>
-                        ) : (
-                          <>
-                            <span className="test-failure flex items-center">
-                              <IconX size={18} strokeWidth={2} className="mr-2"/>
-                              {result.description}
-                            </span>
-                            <span className="error-message pl-8 text-xs">
-                              {result.error}
-                            </span>
-                          </>
-                        )}
-                      </li>
-                    )): null}
-                    {item.assertionResults ? item.assertionResults.map((result) => (
-                      <li key={result.uid}>
-                        {result.status === 'pass' ? (
-                          <span className="test-success flex items-center">
-                            <IconCheck size={18} strokeWidth={2} className="mr-2"/>
-                            {result.lhsExpr}: {result.rhsExpr}
-                          </span>
-                        ) : (
-                          <>
-                            <span className="test-failure flex items-center">
-                              <IconX size={18} strokeWidth={2} className="mr-2"/>
-                              {result.lhsExpr}: {result.rhsExpr}
-                            </span>
-                            <span className="error-message pl-8 text-xs">
-                              {result.error}
-                            </span>
-                          </>
-                        )}
-                      </li>
-                    )): null}
+                    {item.testResults
+                      ? item.testResults.map((result) => (
+                          <li key={result.uid}>
+                            {result.status === 'pass' ? (
+                              <span className="test-success flex items-center">
+                                <IconCheck size={18} strokeWidth={2} className="mr-2" />
+                                {result.description}
+                              </span>
+                            ) : (
+                              <>
+                                <span className="test-failure flex items-center">
+                                  <IconX size={18} strokeWidth={2} className="mr-2" />
+                                  {result.description}
+                                </span>
+                                <span className="error-message pl-8 text-xs">{result.error}</span>
+                              </>
+                            )}
+                          </li>
+                        ))
+                      : null}
+                    {item.assertionResults
+                      ? item.assertionResults.map((result) => (
+                          <li key={result.uid}>
+                            {result.status === 'pass' ? (
+                              <span className="test-success flex items-center">
+                                <IconCheck size={18} strokeWidth={2} className="mr-2" />
+                                {result.lhsExpr}: {result.rhsExpr}
+                              </span>
+                            ) : (
+                              <>
+                                <span className="test-failure flex items-center">
+                                  <IconX size={18} strokeWidth={2} className="mr-2" />
+                                  {result.lhsExpr}: {result.rhsExpr}
+                                </span>
+                                <span className="error-message pl-8 text-xs">{result.error}</span>
+                              </>
+                            )}
+                          </li>
+                        ))
+                      : null}
                   </ul>
                 </div>
               </div>
@@ -210,25 +208,25 @@ export default function RunnerResults({collection}) {
             </div>
           ) : null}
         </div>
-        <div className='flex flex-1' style={{width: '50%'}}>
+        <div className="flex flex-1" style={{ width: '50%' }}>
           {selectedItem ? (
-            <div className='flex flex-col w-full overflow-auto'>
+            <div className="flex flex-col w-full overflow-auto">
               <div className="flex items-center px-3 mb-4 font-medium">
-                <span className='mr-2'>{selectedItem.relativePath}</span>
+                <span className="mr-2">{selectedItem.relativePath}</span>
                 <span>
                   {selectedItem.testStatus === 'pass' ? (
-                    <IconCircleCheck className="test-success" size={20} strokeWidth={1.5}/>
+                    <IconCircleCheck className="test-success" size={20} strokeWidth={1.5} />
                   ) : (
-                    <IconCircleX className="test-failure" size={20} strokeWidth={1.5}/>
+                    <IconCircleX className="test-failure" size={20} strokeWidth={1.5} />
                   )}
                 </span>
               </div>
               {/* <div className='px-3 mb-4 font-medium'>{selectedItem.relativePath}</div> */}
-              <ResponsePane item={selectedItem} collection={collection}/>
+              <ResponsePane item={selectedItem} collection={collection} />
             </div>
           ) : null}
         </div>
       </div>
     </StyledWrapper>
   );
-};
\ No newline at end of file
+}
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
index 1d076f897..d23dca713 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
@@ -17,7 +17,10 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
       name: item.name
     },
     validationSchema: Yup.object({
-      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
+      name: Yup.string()
+        .min(1, 'must be atleast 1 characters')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
     }),
     onSubmit: (values) => {
       dispatch(cloneItem(values.name, item.uid, collection.uid))
@@ -25,7 +28,7 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
           onClose();
         })
         .catch((err) => {
-          toast.error(err ? err.message : 'An error occured while cloning the request')
+          toast.error(err ? err.message : 'An error occured while cloning the request');
         });
     }
   });
@@ -39,7 +42,13 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
   const onSubmit = () => formik.handleSubmit();
 
   return (
-    <Modal size="sm" title={`Clone ${isFolder ? 'Folder' : 'Request'}`} confirmText="Clone" handleConfirm={onSubmit} handleCancel={onClose}>
+    <Modal
+      size="sm"
+      title={`Clone ${isFolder ? 'Folder' : 'Request'}`}
+      confirmText="Clone"
+      handleConfirm={onSubmit}
+      handleCancel={onClose}
+    >
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div>
           <label htmlFor="name" className="block font-semibold">
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js
index 2f6fe108d..59f19dcb2 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js
@@ -31,7 +31,13 @@ const DeleteCollectionItem = ({ onClose, item, collection }) => {
 
   return (
     <StyledWrapper>
-      <Modal size="sm" title={`Delete ${isFolder ? 'Folder' : 'Request'}`} confirmText="Delete" handleConfirm={onConfirm} handleCancel={onClose}>
+      <Modal
+        size="sm"
+        title={`Delete ${isFolder ? 'Folder' : 'Request'}`}
+        confirmText="Delete"
+        handleConfirm={onConfirm}
+        handleCancel={onClose}
+      >
         Are you sure you want to delete <span className="font-semibold">{item.name}</span> ?
       </Modal>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
index ce8d2f9bf..9b485e992 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
@@ -16,7 +16,10 @@ const RenameCollectionItem = ({ collection, item, onClose }) => {
       name: item.name
     },
     validationSchema: Yup.object({
-      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
+      name: Yup.string()
+        .min(1, 'must be atleast 1 characters')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
     }),
     onSubmit: (values) => {
       dispatch(renameItem(values.name, item.uid, collection.uid));
@@ -33,7 +36,13 @@ const RenameCollectionItem = ({ collection, item, onClose }) => {
   const onSubmit = () => formik.handleSubmit();
 
   return (
-    <Modal size="sm" title={`Rename ${isFolder ? 'Folder' : 'Request'}`} confirmText="Rename" handleConfirm={onSubmit} handleCancel={onClose}>
+    <Modal
+      size="sm"
+      title={`Rename ${isFolder ? 'Folder' : 'Request'}`}
+      confirmText="Rename"
+      handleConfirm={onSubmit}
+      handleCancel={onClose}
+    >
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div>
           <label htmlFor="name" className="block font-semibold">
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/StyledWrapper.js
index dcb3fd039..3b6e08f42 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  .bruno-modal-content  {
+  .bruno-modal-content {
     padding-bottom: 1rem;
   }
 `;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
index 3c28a1788..28b0f964b 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
@@ -11,9 +11,11 @@ const RunCollectionItem = ({ collection, item, onClose }) => {
   const dispatch = useDispatch();
 
   const onSubmit = (recursive) => {
-    dispatch(showRunnerView({
-      collectionUid: collection.uid,
-    }));
+    dispatch(
+      showRunnerView({
+        collectionUid: collection.uid
+      })
+    );
     dispatch(runCollectionFolder(collection.uid, item ? item.uid : null, recursive));
     onClose();
   };
@@ -25,25 +27,21 @@ const RunCollectionItem = ({ collection, item, onClose }) => {
 
   return (
     <StyledWrapper>
-      <Modal size="md" title='Collection Runner' hideFooter={true} handleCancel={onClose}>
-        <div className='mb-1'>
-          <span className='font-medium'>Run</span>
-          <span className='ml-1 text-xs'>({runLength} requests)</span>
-        </div>
-        <div className='mb-8'>
-          This will only run the requests in this folder. 
+      <Modal size="md" title="Collection Runner" hideFooter={true} handleCancel={onClose}>
+        <div className="mb-1">
+          <span className="font-medium">Run</span>
+          <span className="ml-1 text-xs">({runLength} requests)</span>
         </div>
+        <div className="mb-8">This will only run the requests in this folder.</div>
 
-        <div className='mb-1'>
-          <span className='font-medium'>Recursive Run</span>
-          <span className='ml-1 text-xs'>({recursiveRunLength} requests)</span>
-        </div>
-        <div className='mb-8'>
-          This will run all the requests in this folder and all its subfolders. 
+        <div className="mb-1">
+          <span className="font-medium">Recursive Run</span>
+          <span className="ml-1 text-xs">({recursiveRunLength} requests)</span>
         </div>
+        <div className="mb-8">This will run all the requests in this folder and all its subfolders.</div>
 
         <div className="flex justify-end bruno-modal-footer">
-          <span className='mr-3'>
+          <span className="mr-3">
             <button type="button" onClick={onClose} className="btn btn-md btn-close">
               Cancel
             </button>
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
index 22b536df8..bb7fae621 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
@@ -86,9 +86,11 @@ const CollectionItem = ({ item, collection, searchText }) => {
   });
 
   const handleClick = (event) => {
-    dispatch(hideRunnerView({
-      collectionUid: collection.uid
-    }));
+    dispatch(
+      hideRunnerView({
+        collectionUid: collection.uid
+      })
+    );
     if (isItemARequest(item)) {
       if (itemIsOpenedInTabs(item, tabs)) {
         dispatch(
@@ -151,12 +153,24 @@ const CollectionItem = ({ item, collection, searchText }) => {
 
   return (
     <StyledWrapper className={className}>
-      {renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)} />}
-      {cloneItemModalOpen && <CloneCollectionItem item={item} collection={collection} onClose={() => setCloneItemModalOpen(false)} />}
-      {deleteItemModalOpen && <DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)} />}
-      {newRequestModalOpen && <NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(false)} />}
-      {newFolderModalOpen && <NewFolder item={item} collection={collection} onClose={() => setNewFolderModalOpen(false)} />}
-      {runCollectionModalOpen && <RunCollectionItem collection={collection} item={item} onClose={() => setRunCollectionModalOpen(false)} />}
+      {renameItemModalOpen && (
+        <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)} />
+      )}
+      {cloneItemModalOpen && (
+        <CloneCollectionItem item={item} collection={collection} onClose={() => setCloneItemModalOpen(false)} />
+      )}
+      {deleteItemModalOpen && (
+        <DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)} />
+      )}
+      {newRequestModalOpen && (
+        <NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(false)} />
+      )}
+      {newFolderModalOpen && (
+        <NewFolder item={item} collection={collection} onClose={() => setNewFolderModalOpen(false)} />
+      )}
+      {runCollectionModalOpen && (
+        <RunCollectionItem collection={collection} item={item} onClose={() => setRunCollectionModalOpen(false)} />
+      )}
       <div className={itemRowClassName} ref={(node) => drag(drop(node))}>
         <div className="flex items-center h-full w-full">
           {indents && indents.length
@@ -185,7 +199,14 @@ const CollectionItem = ({ item, collection, searchText }) => {
             }}
           >
             <div style={{ width: 16, minWidth: 16 }}>
-              {isFolder ? <IconChevronRight size={16} strokeWidth={2} className={iconClassName} style={{ color: 'rgb(160 160 160)' }} /> : null}
+              {isFolder ? (
+                <IconChevronRight
+                  size={16}
+                  strokeWidth={2}
+                  className={iconClassName}
+                  style={{ color: 'rgb(160 160 160)' }}
+                />
+              ) : null}
             </div>
 
             <div className="ml-1 flex items-center overflow-hidden">
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js
index 9fd842b14..70311bd75 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js
@@ -15,7 +15,10 @@ const RenameCollection = ({ collection, onClose }) => {
       name: collection.name
     },
     validationSchema: Yup.object({
-      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
+      name: Yup.string()
+        .min(1, 'must be atleast 1 characters')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
     }),
     onSubmit: (values) => {
       dispatch(renameCollection(values.name, collection.uid));
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
index 6cd7dba95..c31ed7e7b 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
@@ -97,13 +97,26 @@ const Collection = ({ collection, searchText }) => {
     <StyledWrapper className="flex flex-col">
       {showNewRequestModal && <NewRequest collection={collection} onClose={() => setShowNewRequestModal(false)} />}
       {showNewFolderModal && <NewFolder collection={collection} onClose={() => setShowNewFolderModal(false)} />}
-      {showRenameCollectionModal && <RenameCollection collection={collection} onClose={() => setShowRenameCollectionModal(false)} />}
-      {showRemoveCollectionModal && <RemoveCollection collection={collection} onClose={() => setShowRemoveCollectionModal(false)} />}
-      {showRunCollectionModal && <RunCollectionItem collection={collection} onClose={() => setShowRunCollectionModal(false)} />}
+      {showRenameCollectionModal && (
+        <RenameCollection collection={collection} onClose={() => setShowRenameCollectionModal(false)} />
+      )}
+      {showRemoveCollectionModal && (
+        <RemoveCollection collection={collection} onClose={() => setShowRemoveCollectionModal(false)} />
+      )}
+      {showRunCollectionModal && (
+        <RunCollectionItem collection={collection} onClose={() => setShowRunCollectionModal(false)} />
+      )}
       <div className="flex py-1 collection-name items-center" ref={drop}>
         <div className="flex flex-grow items-center overflow-hidden" onClick={handleClick}>
-          <IconChevronRight size={16} strokeWidth={2} className={iconClassName} style={{ width: 16, minWidth:16, color: 'rgb(160 160 160)' }} />
-          <div className="ml-1" id="sidebar-collection-name">{collection.name}</div>
+          <IconChevronRight
+            size={16}
+            strokeWidth={2}
+            className={iconClassName}
+            style={{ width: 16, minWidth: 16, color: 'rgb(160 160 160)' }}
+          />
+          <div className="ml-1" id="sidebar-collection-name">
+            {collection.name}
+          </div>
         </div>
         <div className="collection-actions">
           <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/CreateOrOpenCollection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/CreateOrOpenCollection/index.js
index 4874b5cee..09933cfaa 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/CreateOrOpenCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/CreateOrOpenCollection/index.js
@@ -18,10 +18,16 @@ const CreateOrOpenCollection = () => {
   const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
 
   const handleOpenCollection = () => {
-    dispatch(openCollection()).catch((err) => console.log(err) && toast.error('An error occured while opening the collection'));
+    dispatch(openCollection()).catch(
+      (err) => console.log(err) && toast.error('An error occured while opening the collection')
+    );
   };
   const CreateLink = () => (
-    <LinkStyle className="underline text-link cursor-pointer" theme={theme} onClick={() => setCreateCollectionModalOpen(true)}>
+    <LinkStyle
+      className="underline text-link cursor-pointer"
+      theme={theme}
+      onClick={() => setCreateCollectionModalOpen(true)}
+    >
       Create
     </LinkStyle>
   );
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js
index 605aecc09..6537aac8c 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js
@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
     cursor: pointer;
 
     &:hover {
-      background-color: ${(props) => props.theme.plainGrid.hoverBg};;
+      background-color: ${(props) => props.theme.plainGrid.hoverBg};
     }
   }
 `;
diff --git a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
index 87ad5af7f..c5e163403 100644
--- a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
@@ -20,8 +20,14 @@ const CreateCollection = ({ onClose }) => {
       collectionLocation: ''
     },
     validationSchema: Yup.object({
-      collectionName: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('collection name is required'),
-      collectionFolderName: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('folder name is required'),
+      collectionName: Yup.string()
+        .min(1, 'must be atleast 1 characters')
+        .max(50, 'must be 50 characters or less')
+        .required('collection name is required'),
+      collectionFolderName: Yup.string()
+        .min(1, 'must be atleast 1 characters')
+        .max(50, 'must be 50 characters or less')
+        .required('folder name is required'),
       collectionLocation: Yup.string().required('location is required')
     }),
     onSubmit: (values) => {
@@ -58,8 +64,8 @@ const CreateCollection = ({ onClose }) => {
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div>
           <label htmlFor="collectionName" className="flex items-center">
-            <span className='font-semibold'>Name</span>
-            <Tooltip text="Name of the collection" tooltipId="collection-name"/>
+            <span className="font-semibold">Name</span>
+            <Tooltip text="Name of the collection" tooltipId="collection-name" />
           </label>
           <input
             id="collection-name"
@@ -74,11 +80,13 @@ const CreateCollection = ({ onClose }) => {
             spellCheck="false"
             value={formik.values.collectionName || ''}
           />
-          {formik.touched.collectionName && formik.errors.collectionName ? <div className="text-red-500">{formik.errors.collectionName}</div> : null}
+          {formik.touched.collectionName && formik.errors.collectionName ? (
+            <div className="text-red-500">{formik.errors.collectionName}</div>
+          ) : null}
 
           <label htmlFor="collectionFolderName" className="flex items-center mt-3">
-            <span className='font-semibold'>Folder Name</span>
-            <Tooltip text="Name of the folder where your collection is stored" tooltipId="collection-folder-name"/>
+            <span className="font-semibold">Folder Name</span>
+            <Tooltip text="Name of the folder where your collection is stored" tooltipId="collection-folder-name" />
           </label>
           <input
             id="collection-folder-name"
@@ -92,7 +100,9 @@ const CreateCollection = ({ onClose }) => {
             spellCheck="false"
             value={formik.values.collectionFolderName || ''}
           />
-          {formik.touched.collectionFolderName && formik.errors.collectionFolderName ? <div className="text-red-500">{formik.errors.collectionFolderName}</div> : null}
+          {formik.touched.collectionFolderName && formik.errors.collectionFolderName ? (
+            <div className="text-red-500">{formik.errors.collectionFolderName}</div>
+          ) : null}
 
           <>
             <label htmlFor="collectionLocation" className="block font-semibold mt-3">
diff --git a/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js b/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
index 496071911..185e3c5cb 100644
--- a/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
@@ -33,22 +33,13 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
   return (
     <Modal size="sm" title="Import Collection" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
       <div>
-        <div
-          className='text-link hover:underline cursor-pointer'
-          onClick={handleImportBrunoCollection}
-        >
+        <div className="text-link hover:underline cursor-pointer" onClick={handleImportBrunoCollection}>
           Bruno Collection
         </div>
-        <div
-          className='text-link hover:underline cursor-pointer mt-2'
-          onClick={handleImportPostmanCollection}
-        >
+        <div className="text-link hover:underline cursor-pointer mt-2" onClick={handleImportPostmanCollection}>
           Postman Collection
         </div>
-        <div
-          className='text-link hover:underline cursor-pointer mt-2'
-          onClick={handleImportInsomniaCollection}
-        >
+        <div className="text-link hover:underline cursor-pointer mt-2" onClick={handleImportInsomniaCollection}>
           Insomnia Collection
         </div>
       </div>
diff --git a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
index 8f642e5a2..779c8dfa3 100644
--- a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
@@ -15,7 +15,10 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) =>
       collectionLocation: ''
     },
     validationSchema: Yup.object({
-      collectionLocation: Yup.string().min(1, 'must be atleast 1 characters').max(500, 'must be 500 characters or less').required('name is required')
+      collectionLocation: Yup.string()
+        .min(1, 'must be atleast 1 characters')
+        .max(500, 'must be 500 characters or less')
+        .required('name is required')
     }),
     onSubmit: (values) => {
       console.log('here');
@@ -49,7 +52,7 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) =>
           <label htmlFor="collectionName" className="block font-semibold">
             Name
           </label>
-          <div className='mt-2'>{collectionName}</div>
+          <div className="mt-2">{collectionName}</div>
 
           <>
             <label htmlFor="collectionLocation" className="block font-semibold mt-3">
diff --git a/packages/bruno-app/src/components/Sidebar/NewFolder/index.js b/packages/bruno-app/src/components/Sidebar/NewFolder/index.js
index 3f9d8ffd5..f73c3c16e 100644
--- a/packages/bruno-app/src/components/Sidebar/NewFolder/index.js
+++ b/packages/bruno-app/src/components/Sidebar/NewFolder/index.js
@@ -21,11 +21,11 @@ const NewFolder = ({ collection, item, onClose }) => {
         .test({
           name: 'folderName',
           message: 'The folder name "environments" at the root of the collection is reserved in bruno',
-          test:(value) => {
-            if(item && item.uid) {
+          test: (value) => {
+            if (item && item.uid) {
               return true;
             }
-            return value && !(value.trim().toLowerCase().includes('environments'))
+            return value && !value.trim().toLowerCase().includes('environments');
           }
         })
     }),
@@ -64,7 +64,9 @@ const NewFolder = ({ collection, item, onClose }) => {
             onChange={formik.handleChange}
             value={formik.values.folderName || ''}
           />
-          {formik.touched.folderName && formik.errors.folderName ? <div className="text-red-500">{formik.errors.folderName}</div> : null}
+          {formik.touched.folderName && formik.errors.folderName ? (
+            <div className="text-red-500">{formik.errors.folderName}</div>
+          ) : null}
         </div>
       </form>
     </Modal>
diff --git a/packages/bruno-app/src/components/Sidebar/NewRequest/index.js b/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
index adae2b7e8..2adcee0fa 100644
--- a/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
+++ b/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
@@ -30,7 +30,7 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
         .test({
           name: 'requestName',
           message: 'The request name "index" is reserved in bruno',
-          test: value => value && !(value.trim().toLowerCase().includes('index')),
+          test: (value) => value && !value.trim().toLowerCase().includes('index')
         })
     }),
     onSubmit: (values) => {
@@ -51,7 +51,7 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
               addTab({
                 uid: uid,
                 collectionUid: collection.uid,
-                requestPaneTab: getDefaultRequestPaneTab({type: values.requestType})
+                requestPaneTab: getDefaultRequestPaneTab({ type: values.requestType })
               })
             );
             onClose();
@@ -140,7 +140,9 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
               onChange={formik.handleChange}
               value={formik.values.requestName || ''}
             />
-            {formik.touched.requestName && formik.errors.requestName ? <div className="text-red-500">{formik.errors.requestName}</div> : null}
+            {formik.touched.requestName && formik.errors.requestName ? (
+              <div className="text-red-500">{formik.errors.requestName}</div>
+            ) : null}
           </div>
 
           <div className="mt-4">
@@ -150,7 +152,10 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
 
             <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)} />
+                <HttpMethodSelector
+                  method={formik.values.requestMethod}
+                  onMethodSelect={(val) => formik.setFieldValue('requestMethod', val)}
+                />
               </div>
               <div className="flex items-center flex-grow input-container h-full">
                 <input
@@ -167,7 +172,9 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
                 />
               </div>
             </div>
-            {formik.touched.requestUrl && formik.errors.requestUrl ? <div className="text-red-500">{formik.errors.requestUrl}</div> : null}
+            {formik.touched.requestUrl && formik.errors.requestUrl ? (
+              <div className="text-red-500">{formik.errors.requestUrl}</div>
+            ) : null}
           </div>
         </form>
       </Modal>
diff --git a/packages/bruno-app/src/components/Sidebar/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/StyledWrapper.js
index 7781e6dc3..e64c7a3f4 100644
--- a/packages/bruno-app/src/components/Sidebar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/StyledWrapper.js
@@ -32,7 +32,7 @@ const Wrapper = styled.div`
       input {
         border: ${(props) => props.theme.sidebar.search.border};
         border-radius: 2px;
-        background-color:  ${(props) => props.theme.sidebar.search.bg};
+        background-color: ${(props) => props.theme.sidebar.search.bg};
 
         &:focus {
           outline: none;
diff --git a/packages/bruno-app/src/components/Sidebar/TitleBar/index.js b/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
index 54224e127..1d8d74f51 100644
--- a/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
@@ -45,20 +45,24 @@ const TitleBar = () => {
   const handleTitleClick = () => dispatch(showHomePage());
 
   const handleOpenCollection = () => {
-    dispatch(openCollection()).catch((err) => console.log(err) && toast.error('An error occured while opening the collection'));
+    dispatch(openCollection()).catch(
+      (err) => console.log(err) && toast.error('An error occured while opening the collection')
+    );
   };
 
   return (
     <StyledWrapper className="px-2 py-2">
       {createCollectionModalOpen ? <CreateCollection onClose={() => setCreateCollectionModalOpen(false)} /> : null}
-      {importCollectionModalOpen ? <ImportCollection onClose={() => setImportCollectionModalOpen(false)} handleSubmit={handleImportCollection} /> : null}
+      {importCollectionModalOpen ? (
+        <ImportCollection onClose={() => setImportCollectionModalOpen(false)} handleSubmit={handleImportCollection} />
+      ) : null}
       {importCollectionLocationModalOpen ? (
         <ImportCollectionLocation
           collectionName={importedCollection.name}
           onClose={() => setImportCollectionLocationModalOpen(false)}
           handleSubmit={handleImportCollectionLocation}
         />
-      ): null}
+      ) : null}
 
       <div className="flex items-center">
         <div className="flex items-center cursor-pointer" onClick={handleTitleClick}>
diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js
index a2dacb985..88837a648 100644
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@@ -88,7 +88,12 @@ const Sidebar = () => {
 
             <div className="footer flex px-1 py-2 absolute bottom-0 left-0 right-0 items-center cursor-pointer select-none">
               <div className="flex items-center ml-1 text-xs ">
-                <IconSettings size={18} strokeWidth={1.5} className="mr-2  hover:text-gray-700" onClick={() => setPreferencesOpen(true)} />
+                <IconSettings
+                  size={18}
+                  strokeWidth={1.5}
+                  className="mr-2  hover:text-gray-700"
+                  onClick={() => setPreferencesOpen(true)}
+                />
               </div>
               <div className="pl-1" style={{ position: 'relative', top: '3px' }}>
                 {storedTheme === 'dark' ? (
diff --git a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
index d28aef636..fbd05bb53 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
@@ -49,7 +49,6 @@ const StyledWrapper = styled.div`
       padding-right: 0;
     }
   }
-  
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/SingleLineEditor/index.js b/packages/bruno-app/src/components/SingleLineEditor/index.js
index e49f0c610..5925b598e 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/index.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/index.js
@@ -27,32 +27,32 @@ class SingleLineEditor extends Component {
       lineWrapping: false,
       lineNumbers: false,
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
-      mode: "brunovariables",
+      mode: 'brunovariables',
       brunoVarInfo: {
-        variables: getAllVariables(this.props.collection),
+        variables: getAllVariables(this.props.collection)
       },
       extraKeys: {
-        "Enter": () => {
+        Enter: () => {
           if (this.props.onRun) {
             this.props.onRun();
           }
         },
-        "Ctrl-Enter": () => {
+        'Ctrl-Enter': () => {
           if (this.props.onRun) {
             this.props.onRun();
           }
         },
-        "Cmd-Enter": () => {
+        'Cmd-Enter': () => {
           if (this.props.onRun) {
             this.props.onRun();
           }
         },
-        "Alt-Enter": () => {
+        'Alt-Enter': () => {
           if (this.props.onRun) {
             this.props.onRun();
           }
         },
-        "Shift-Enter": () => {
+        'Shift-Enter': () => {
           if (this.props.onRun) {
             this.props.onRun();
           }
@@ -69,8 +69,8 @@ class SingleLineEditor extends Component {
         },
         'Cmd-F': () => {},
         'Ctrl-F': () => {},
-        'Tab': () => {}
-      },
+        Tab: () => {}
+      }
     });
     this.editor.setValue(this.props.value || '');
     this.editor.on('change', this._onEdit);
@@ -115,14 +115,12 @@ class SingleLineEditor extends Component {
     let variables = getAllVariables(this.props.collection);
     this.variables = variables;
 
-    defineCodeMirrorBrunoVariablesMode(variables, "text/plain");
+    defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
     this.editor.setOption('mode', 'brunovariables');
-  }
+  };
 
   render() {
-    return (
-      <StyledWrapper ref={this.editorRef} className="single-line-editor"></StyledWrapper>
-    );
+    return <StyledWrapper ref={this.editorRef} className="single-line-editor"></StyledWrapper>;
   }
 }
 export default SingleLineEditor;
diff --git a/packages/bruno-app/src/components/Tooltip/index.js b/packages/bruno-app/src/components/Tooltip/index.js
index 7abbaef9d..b1ca2643c 100644
--- a/packages/bruno-app/src/components/Tooltip/index.js
+++ b/packages/bruno-app/src/components/Tooltip/index.js
@@ -4,9 +4,19 @@ import { Tooltip as ReactTooltip } from 'react-tooltip';
 const Tooltip = ({ text, tooltipId }) => {
   return (
     <>
-      <svg tabIndex="-1" id={tooltipId} xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" className="inline-block ml-2 cursor-pointer" viewBox="0 0 16 16" style={{marginTop: 1}}>
-        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-        <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+      <svg
+        tabIndex="-1"
+        id={tooltipId}
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        fill="currentColor"
+        className="inline-block ml-2 cursor-pointer"
+        viewBox="0 0 16 16"
+        style={{ marginTop: 1 }}
+      >
+        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+        <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
       </svg>
       <ReactTooltip anchorId={tooltipId} content={text} />
     </>
diff --git a/packages/bruno-app/src/components/VariablesView/Popover/StyledWrapper.js b/packages/bruno-app/src/components/VariablesView/Popover/StyledWrapper.js
index 48dc8f871..45fa9b60b 100644
--- a/packages/bruno-app/src/components/VariablesView/Popover/StyledWrapper.js
+++ b/packages/bruno-app/src/components/VariablesView/Popover/StyledWrapper.js
@@ -16,4 +16,4 @@ const Wrapper = styled.div`
   }
 `;
 
-export default Wrapper;
\ No newline at end of file
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/VariablesView/Popover/index.js b/packages/bruno-app/src/components/VariablesView/Popover/index.js
index 713621f79..ab1700f88 100644
--- a/packages/bruno-app/src/components/VariablesView/Popover/index.js
+++ b/packages/bruno-app/src/components/VariablesView/Popover/index.js
@@ -1,16 +1,12 @@
-import React, {useRef} from 'react';
+import React, { useRef } from 'react';
 import StyledWrapper from './StyledWrapper';
 import useOnClickOutside from 'hooks/useOnClickOutside';
 
-const PopOver = ({
-  children,
-  iconRef,
-  handleClose
-}) => {
+const PopOver = ({ children, iconRef, handleClose }) => {
   const popOverRef = useRef(null);
-  
+
   useOnClickOutside(popOverRef, (e) => {
-    if(iconRef && iconRef.current) {
+    if (iconRef && iconRef.current) {
       if (e.target == iconRef.current || iconRef.current.contains(e.target)) {
         return;
       }
@@ -27,4 +23,4 @@ const PopOver = ({
   );
 };
 
-export default PopOver;
\ No newline at end of file
+export default PopOver;
diff --git a/packages/bruno-app/src/components/VariablesView/StyledWrapper.js b/packages/bruno-app/src/components/VariablesView/StyledWrapper.js
index 5741b12c4..f280aad41 100644
--- a/packages/bruno-app/src/components/VariablesView/StyledWrapper.js
+++ b/packages/bruno-app/src/components/VariablesView/StyledWrapper.js
@@ -10,6 +10,6 @@ const StyledWrapper = styled.div`
     width: 1rem;
     font-size: 10px;
   }
-`
+`;
 
-export default StyledWrapper;
\ No newline at end of file
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/VariablesView/VariablesTable/StyledWrapper.js b/packages/bruno-app/src/components/VariablesView/VariablesTable/StyledWrapper.js
index b22e1c1e4..a3970cdb1 100644
--- a/packages/bruno-app/src/components/VariablesView/VariablesTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/VariablesView/VariablesTable/StyledWrapper.js
@@ -5,8 +5,8 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.variables.name.color};
   }
 
-  .variable-name{
-    min-width:180px;
+  .variable-name {
+    min-width: 180px;
   }
 
   .variable-value {
@@ -14,6 +14,6 @@ const StyledWrapper = styled.div`
     inline-size: 600px;
     overflow-wrap: break-word;
   }
-`
+`;
 
-export default StyledWrapper;
\ No newline at end of file
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/VariablesView/VariablesTable/index.js b/packages/bruno-app/src/components/VariablesView/VariablesTable/index.js
index 2a3d06588..b56cea098 100644
--- a/packages/bruno-app/src/components/VariablesView/VariablesTable/index.js
+++ b/packages/bruno-app/src/components/VariablesView/VariablesTable/index.js
@@ -18,25 +18,33 @@ const VariablesTable = ({ variables, collectionVariables }) => {
   return (
     <StyledWrapper>
       <div className="flex flex-col w-full">
-        <div className='mb-2 font-medium'>Environment Variables</div>
-        {(variables && variables.length) ? variables.map((variable) => {
-          return (
-            <div key={variable.uid} className="flex">
-              <div className='variable-name text-yellow-600 text-right pr-2'>{variable.name}</div>
-              <div className='variable-value pl-2 whitespace-normal text-left flex-grow'>{variable.value}</div>
-            </div>
-          );
-        }) : <small>No env variables found</small>}
+        <div className="mb-2 font-medium">Environment Variables</div>
+        {variables && variables.length ? (
+          variables.map((variable) => {
+            return (
+              <div key={variable.uid} className="flex">
+                <div className="variable-name text-yellow-600 text-right pr-2">{variable.name}</div>
+                <div className="variable-value pl-2 whitespace-normal text-left flex-grow">{variable.value}</div>
+              </div>
+            );
+          })
+        ) : (
+          <small>No env variables found</small>
+        )}
 
-        <div className='mt-2 font-medium'>Collection Variables</div>
-        {(collectionVars && collectionVars.length) ? collectionVars.map((variable) => {
-          return (
-            <div key={variable.uid} className="flex">
-              <div className='variable-name text-yellow-600 text-right pr-2'>{variable.name}</div>
-              <div className='variable-value pl-2 whitespace-normal text-left flex-grow'>{variable.value}</div>
-            </div>
-          );
-        }) : <small>No collection variables found</small>}
+        <div className="mt-2 font-medium">Collection Variables</div>
+        {collectionVars && collectionVars.length ? (
+          collectionVars.map((variable) => {
+            return (
+              <div key={variable.uid} className="flex">
+                <div className="variable-name text-yellow-600 text-right pr-2">{variable.name}</div>
+                <div className="variable-value pl-2 whitespace-normal text-left flex-grow">{variable.value}</div>
+              </div>
+            );
+          })
+        ) : (
+          <small>No collection variables found</small>
+        )}
       </div>
     </StyledWrapper>
   );
diff --git a/packages/bruno-app/src/components/VariablesView/index.js b/packages/bruno-app/src/components/VariablesView/index.js
index fc39ef324..8f04fed70 100644
--- a/packages/bruno-app/src/components/VariablesView/index.js
+++ b/packages/bruno-app/src/components/VariablesView/index.js
@@ -7,46 +7,42 @@ import StyledWrapper from './StyledWrapper';
 import PopOver from './Popover';
 import { IconEye } from '@tabler/icons';
 
-const VariablesView = ({collection}) => {
+const VariablesView = ({ collection }) => {
   const iconRef = useRef(null);
   const [popOverOpen, setPopOverOpen] = useState(false);
 
   const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
   const variables = get(environment, 'variables', []);
   const enabledVariables = filter(variables, (variable) => variable.enabled);
-  const showVariablesTable = enabledVariables.length > 0 || (collection.collectionVariables && Object.keys(collection.collectionVariables).length > 0);
+  const showVariablesTable =
+    enabledVariables.length > 0 ||
+    (collection.collectionVariables && Object.keys(collection.collectionVariables).length > 0);
 
   return (
-    <StyledWrapper
-      className="mr-2 server-syncstatus-icon"
-      ref={iconRef}
-    >
-      <div className="flex p-1 items-center"
+    <StyledWrapper className="mr-2 server-syncstatus-icon" ref={iconRef}>
+      <div
+        className="flex p-1 items-center"
         onClick={() => setPopOverOpen(true)}
         onMouseEnter={() => setPopOverOpen(true)}
         onMouseLeave={() => setPopOverOpen(false)}
       >
-        <div className='cursor-pointer view-environment'>
+        <div className="cursor-pointer view-environment">
           <IconEye size={18} strokeWidth={1.5} />
         </div>
         {popOverOpen && (
-          <PopOver
-            iconRef={iconRef}
-            handleClose={() => setPopOverOpen(false)}
-          >
+          <PopOver iconRef={iconRef} handleClose={() => setPopOverOpen(false)}>
             <div className="px-2 py-1">
               {showVariablesTable ? (
-                <VariablesTable
-                  variables={enabledVariables}
-                  collectionVariables={collection.collectionVariables}
-                />
-              ) : 'No variables found'}
+                <VariablesTable variables={enabledVariables} collectionVariables={collection.collectionVariables} />
+              ) : (
+                'No variables found'
+              )}
             </div>
           </PopOver>
         )}
       </div>
     </StyledWrapper>
-  )
+  );
 };
 
-export default VariablesView;
\ No newline at end of file
+export default VariablesView;
diff --git a/packages/bruno-app/src/components/Welcome/index.js b/packages/bruno-app/src/components/Welcome/index.js
index 563d10be5..5b483932a 100644
--- a/packages/bruno-app/src/components/Welcome/index.js
+++ b/packages/bruno-app/src/components/Welcome/index.js
@@ -18,7 +18,9 @@ const Welcome = () => {
   const [importCollectionLocationModalOpen, setImportCollectionLocationModalOpen] = useState(false);
 
   const handleOpenCollection = () => {
-    dispatch(openCollection()).catch((err) => console.log(err) && toast.error('An error occured while opening the collection'));
+    dispatch(openCollection()).catch(
+      (err) => console.log(err) && toast.error('An error occured while opening the collection')
+    );
   };
 
   const handleImportCollection = (collection) => {
@@ -37,14 +39,16 @@ const Welcome = () => {
   return (
     <StyledWrapper className="pb-4 px-6 mt-6">
       {createCollectionModalOpen ? <CreateCollection onClose={() => setCreateCollectionModalOpen(false)} /> : null}
-      {importCollectionModalOpen ? <ImportCollection onClose={() => setImportCollectionModalOpen(false)} handleSubmit={handleImportCollection} /> : null}
+      {importCollectionModalOpen ? (
+        <ImportCollection onClose={() => setImportCollectionModalOpen(false)} handleSubmit={handleImportCollection} />
+      ) : null}
       {importCollectionLocationModalOpen ? (
         <ImportCollectionLocation
           collectionName={importedCollection.name}
           onClose={() => setImportCollectionLocationModalOpen(false)}
           handleSubmit={handleImportCollectionLocation}
         />
-      ): null}
+      ) : null}
 
       <div className="">
         <Bruno width={50} />
@@ -61,14 +65,14 @@ const Welcome = () => {
           </span>
         </div>
         <div className="flex items-center ml-6" onClick={handleOpenCollection}>
-            <IconFolders size={18} strokeWidth={2} />
-            <span className="label ml-2">
-              Open Collection
-            </span>
-          </div>
+          <IconFolders size={18} strokeWidth={2} />
+          <span className="label ml-2">Open Collection</span>
+        </div>
         <div className="flex items-center ml-6" onClick={() => setImportCollectionModalOpen(true)}>
           <IconUpload size={18} strokeWidth={2} />
-          <span className="label ml-2" id="import-collection">Import Collection</span>
+          <span className="label ml-2" id="import-collection">
+            Import Collection
+          </span>
         </div>
       </div>
 
diff --git a/packages/bruno-app/src/hooks/useOnClickOutside/index.js b/packages/bruno-app/src/hooks/useOnClickOutside/index.js
index dcff4a2ff..25cd5b426 100644
--- a/packages/bruno-app/src/hooks/useOnClickOutside/index.js
+++ b/packages/bruno-app/src/hooks/useOnClickOutside/index.js
@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 const useOnClickOutside = (ref, handler) => {
   useEffect(
     () => {
-      const listener = event => {
+      const listener = (event) => {
         // Do nothing if clicking ref's element or descendent elements
         if (!ref.current || ref.current.contains(event.target)) {
           return;
@@ -31,4 +31,4 @@ const useOnClickOutside = (ref, handler) => {
   );
 };
 
-export default useOnClickOutside;
\ No newline at end of file
+export default useOnClickOutside;
diff --git a/packages/bruno-app/src/hooks/usePrevious/index.js b/packages/bruno-app/src/hooks/usePrevious/index.js
index d07e5d08c..41a072238 100644
--- a/packages/bruno-app/src/hooks/usePrevious/index.js
+++ b/packages/bruno-app/src/hooks/usePrevious/index.js
@@ -5,9 +5,9 @@ function usePrevious(value) {
 
   useEffect(() => {
     ref.current = value; //assign the value of ref to the argument
-  },[value]); //this code will run when the value of 'value' changes
+  }, [value]); //this code will run when the value of 'value' changes
 
   return ref.current; //in the end, return the current ref value.
 }
 
-export default usePrevious;
\ No newline at end of file
+export default usePrevious;
diff --git a/packages/bruno-app/src/pages/_app.js b/packages/bruno-app/src/pages/_app.js
index 14daefdc6..382b95093 100644
--- a/packages/bruno-app/src/pages/_app.js
+++ b/packages/bruno-app/src/pages/_app.js
@@ -36,7 +36,7 @@ function MyApp({ Component, pageProps }) {
     setDomLoaded(true);
   }, []);
 
-  if(!domLoaded) {
+  if (!domLoaded) {
     return null;
   }
 
diff --git a/packages/bruno-app/src/pages/_document.js b/packages/bruno-app/src/pages/_document.js
index 75877eb51..131fc50dd 100644
--- a/packages/bruno-app/src/pages/_document.js
+++ b/packages/bruno-app/src/pages/_document.js
@@ -31,7 +31,10 @@ export default class MyDocument extends Document {
     return (
       <Html>
         <Head>
-          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+            rel="stylesheet"
+          />
         </Head>
         <body id="bruno-app-body">
           <Main />
diff --git a/packages/bruno-app/src/providers/App/StyledWrapper.js b/packages/bruno-app/src/providers/App/StyledWrapper.js
index 69fe928cb..589985ca0 100644
--- a/packages/bruno-app/src/providers/App/StyledWrapper.js
+++ b/packages/bruno-app/src/providers/App/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  color:  ${(props) => props.theme.text};
+  color: ${(props) => props.theme.text};
   background-color: ${(props) => props.theme.bg};
 `;
 
diff --git a/packages/bruno-app/src/providers/App/index.js b/packages/bruno-app/src/providers/App/index.js
index 99e4badb7..9768802fc 100644
--- a/packages/bruno-app/src/providers/App/index.js
+++ b/packages/bruno-app/src/providers/App/index.js
@@ -29,9 +29,7 @@ export const AppProvider = (props) => {
 
   return (
     <AppContext.Provider {...props} value="appProvider">
-      <StyledWrapper>
-        {props.children}
-      </StyledWrapper>
+      <StyledWrapper>{props.children}</StyledWrapper>
     </AppContext.Provider>
   );
 };
diff --git a/packages/bruno-app/src/providers/App/useCollectionTreeSync.js b/packages/bruno-app/src/providers/App/useCollectionTreeSync.js
index 99739ebb8..1f3c02c6f 100644
--- a/packages/bruno-app/src/providers/App/useCollectionTreeSync.js
+++ b/packages/bruno-app/src/providers/App/useCollectionTreeSync.js
@@ -31,7 +31,7 @@ const useCollectionTreeSync = () => {
     };
 
     const _collectionTreeUpdated = (type, val) => {
-      if(window.__IS_DEV__) {
+      if (window.__IS_DEV__) {
         console.log(type);
         console.log(val);
       }
@@ -85,10 +85,10 @@ const useCollectionTreeSync = () => {
     };
 
     const _displayError = (error) => {
-      if(typeof error === "string") {
+      if (typeof error === 'string') {
         return toast.error(error || 'Something went wrong!');
       }
-      if(typeof message === "object") {
+      if (typeof message === 'object') {
         return toast.error(error.message || 'Something went wrong!');
       }
     };
diff --git a/packages/bruno-app/src/providers/App/useTelemetry.js b/packages/bruno-app/src/providers/App/useTelemetry.js
index 3591d8583..8e9765390 100644
--- a/packages/bruno-app/src/providers/App/useTelemetry.js
+++ b/packages/bruno-app/src/providers/App/useTelemetry.js
@@ -23,7 +23,7 @@ const getPlatform = () => {
 };
 
 const getPosthogClient = () => {
-  if(posthogClient) {
+  if (posthogClient) {
     return posthogClient;
   }
 
@@ -34,7 +34,7 @@ const getPosthogClient = () => {
 const getAnonymousTrackingId = () => {
   let id = localStorage.getItem('bruno.anonymousTrackingId');
 
-  if(!id || !id.length || id.length !== 21) {
+  if (!id || !id.length || id.length !== 21) {
     id = uuid();
     localStorage.setItem('bruno.anonymousTrackingId', id);
   }
@@ -43,11 +43,11 @@ const getAnonymousTrackingId = () => {
 };
 
 const trackStart = () => {
-  if(isPlaywrightTestRunning()) {
+  if (isPlaywrightTestRunning()) {
     return;
   }
 
-  if(isDevEnv()) {
+  if (isDevEnv()) {
     return;
   }
 
@@ -67,7 +67,7 @@ const trackStart = () => {
 const useTelemetry = () => {
   useEffect(() => {
     trackStart();
-    setInterval(trackStart , 24 * 60 * 60 * 1000);
+    setInterval(trackStart, 24 * 60 * 60 * 1000);
   }, []);
 };
 
diff --git a/packages/bruno-app/src/providers/Hotkeys/index.js b/packages/bruno-app/src/providers/Hotkeys/index.js
index 09d3cb1e6..a3b6c882e 100644
--- a/packages/bruno-app/src/providers/Hotkeys/index.js
+++ b/packages/bruno-app/src/providers/Hotkeys/index.js
@@ -165,9 +165,15 @@ export const HotkeysProvider = (props) => {
   return (
     <HotkeysContext.Provider {...props} value="hotkey">
       {showBrunoSupportModal && <BrunoSupport onClose={() => setShowBrunoSupportModal(false)} />}
-      {showSaveRequestModal && <SaveRequest items={getCurrentCollectionItems()} onClose={() => setShowSaveRequestModal(false)} />}
-      {showEnvSettingsModal && <EnvironmentSettings collection={getCurrentCollection()} onClose={() => setShowEnvSettingsModal(false)} />}
-      {showNewRequestModal && <NewRequest collection={getCurrentCollection()} onClose={() => setShowNewRequestModal(false)} />}
+      {showSaveRequestModal && (
+        <SaveRequest items={getCurrentCollectionItems()} onClose={() => setShowSaveRequestModal(false)} />
+      )}
+      {showEnvSettingsModal && (
+        <EnvironmentSettings collection={getCurrentCollection()} onClose={() => setShowEnvSettingsModal(false)} />
+      )}
+      {showNewRequestModal && (
+        <NewRequest collection={getCurrentCollection()} onClose={() => setShowNewRequestModal(false)} />
+      )}
       <div>{props.children}</div>
     </HotkeysContext.Provider>
   );
diff --git a/packages/bruno-app/src/providers/Preferences/index.js b/packages/bruno-app/src/providers/Preferences/index.js
index 2ebd5227a..9b0345004 100644
--- a/packages/bruno-app/src/providers/Preferences/index.js
+++ b/packages/bruno-app/src/providers/Preferences/index.js
@@ -1,9 +1,9 @@
 /**
  * Preferences Provider
- * 
+ *
  * This provider is responsible for managing the user's preferences in the app.
  * The preferences are stored in the browser local storage.
- * 
+ *
  * On start, an IPC event is published to the main process to set the preferences in the electron process.
  */
 
@@ -30,21 +30,20 @@ export const PreferencesProvider = (props) => {
   const { ipcRenderer } = window;
 
   useEffect(() => {
-    ipcRenderer
-      .invoke('renderer:set-preferences', preferences)
-      .catch(err => {
-        toast.error(err.message || 'Preferences sync error');
-      });
+    ipcRenderer.invoke('renderer:set-preferences', preferences).catch((err) => {
+      toast.error(err.message || 'Preferences sync error');
+    });
   }, [preferences, toast]);
 
   const validatedSetPreferences = (newPreferences) => {
     return new Promise((resolve, reject) => {
-      preferencesSchema.validate(newPreferences, { abortEarly: true })
-        .then(validatedPreferences => {
+      preferencesSchema
+        .validate(newPreferences, { abortEarly: true })
+        .then((validatedPreferences) => {
           setPreferences(validatedPreferences);
           resolve(validatedPreferences);
         })
-        .catch(error => {
+        .catch((error) => {
           let errMsg = error.message || 'Preferences validation error';
           toast.error(errMsg);
           reject(error);
@@ -60,9 +59,7 @@ export const PreferencesProvider = (props) => {
 
   return (
     <PreferencesContext.Provider value={value}>
-      <>
-        {props.children}
-      </>
+      <>{props.children}</>
     </PreferencesContext.Provider>
   );
 };
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/app.js b/packages/bruno-app/src/providers/ReduxStore/slices/app.js
index 716bbd124..f1e9b9117 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/app.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/app.js
@@ -33,6 +33,13 @@ export const appSlice = createSlice({
   }
 });
 
-export const { idbConnectionReady, refreshScreenWidth, updateLeftSidebarWidth, updateIsDragging, showHomePage, hideHomePage } = appSlice.actions;
+export const {
+  idbConnectionReady,
+  refreshScreenWidth,
+  updateLeftSidebarWidth,
+  updateIsDragging,
+  showHomePage,
+  hideHomePage
+} = appSlice.actions;
 
 export default appSlice.reducer;
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
index e95059cd7..2ccfdbd4a 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
@@ -56,10 +56,7 @@ export const renameCollection = (newName, collectionUid) => (dispatch, getState)
       return reject(new Error('Collection not found'));
     }
 
-    ipcRenderer
-      .invoke('renderer:rename-collection', newName, collection.pathname)
-      .then(resolve)
-      .catch(reject);
+    ipcRenderer.invoke('renderer:rename-collection', newName, collection.pathname).then(resolve).catch(reject);
   });
 };
 
@@ -123,7 +120,7 @@ export const sendRequest = (item, collectionUid) => (dispatch, getState) => {
           })
         );
 
-        if(err && err.message === "Error invoking remote method 'send-http-request': Error: Request cancelled") {
+        if (err && err.message === "Error invoking remote method 'send-http-request': Error: Request cancelled") {
           console.log('>> request cancelled');
           return;
         }
@@ -166,12 +163,21 @@ export const runCollectionFolder = (collectionUid, folderUid, recursive) => (dis
 
     const environment = findEnvironmentInCollection(collectionCopy, collection.activeEnvironmentUid);
 
-    dispatch(resetRunResults({
-      collectionUid: collection.uid
-    }));
+    dispatch(
+      resetRunResults({
+        collectionUid: collection.uid
+      })
+    );
 
     ipcRenderer
-      .invoke('renderer:run-collection-folder', folder, collectionCopy, environment, collectionCopy.collectionVariables, recursive)
+      .invoke(
+        'renderer:run-collection-folder',
+        folder,
+        collectionCopy,
+        environment,
+        collectionCopy.collectionVariables,
+        recursive
+      )
       .then(resolve)
       .catch((err) => {
         toast.error(get(err, 'error.message') || 'Something went wrong!');
@@ -190,7 +196,10 @@ export const newFolder = (folderName, collectionUid, itemUid) => (dispatch, getS
     }
 
     if (!itemUid) {
-      const folderWithSameNameExists = find(collection.items, (i) => i.type === 'folder' && trim(i.name) === trim(folderName));
+      const folderWithSameNameExists = find(
+        collection.items,
+        (i) => i.type === 'folder' && trim(i.name) === trim(folderName)
+      );
       if (!folderWithSameNameExists) {
         const fullName = `${collection.pathname}${PATH_SEPARATOR}${folderName}`;
         const { ipcRenderer } = window;
@@ -205,7 +214,10 @@ export const newFolder = (folderName, collectionUid, itemUid) => (dispatch, getS
     } else {
       const currentItem = findItemInCollection(collection, itemUid);
       if (currentItem) {
-        const folderWithSameNameExists = find(currentItem.items, (i) => i.type === 'folder' && trim(i.name) === trim(folderName));
+        const folderWithSameNameExists = find(
+          currentItem.items,
+          (i) => i.type === 'folder' && trim(i.name) === trim(folderName)
+        );
         if (!folderWithSameNameExists) {
           const fullName = `${currentItem.pathname}${PATH_SEPARATOR}${folderName}`;
           const { ipcRenderer } = window;
@@ -250,10 +262,7 @@ export const renameItem = (newName, itemUid, collectionUid) => (dispatch, getSta
     }
     const { ipcRenderer } = window;
 
-    ipcRenderer
-      .invoke('renderer:rename-item', item.pathname, newPathname, newName)
-      .then(resolve)
-      .catch(reject);
+    ipcRenderer.invoke('renderer:rename-item', item.pathname, newPathname, newName).then(resolve).catch(reject);
   });
 };
 
@@ -280,12 +289,15 @@ export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getStat
     const itemToSave = refreshUidsInItem(transformRequestToSaveToFilesystem(item));
     itemToSave.name = trim(newName);
     if (!parentItem) {
-      const reqWithSameNameExists = find(collection.items, (i) => i.type !== 'folder' && trim(i.filename) === trim(filename));
+      const reqWithSameNameExists = find(
+        collection.items,
+        (i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
+      );
       if (!reqWithSameNameExists) {
         const fullName = `${collection.pathname}${PATH_SEPARATOR}${filename}`;
         const { ipcRenderer } = window;
         const requestItems = filter(collection.items, (i) => i.type !== 'folder');
-        itemToSave.seq = requestItems ? (requestItems.length + 1) : 1;
+        itemToSave.seq = requestItems ? requestItems.length + 1 : 1;
 
         itemSchema
           .validate(itemToSave)
@@ -296,13 +308,16 @@ export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getStat
         return reject(new Error('Duplicate request names are not allowed under the same folder'));
       }
     } else {
-      const reqWithSameNameExists = find(parentItem.items, (i) => i.type !== 'folder' && trim(i.filename) === trim(filename));
+      const reqWithSameNameExists = find(
+        parentItem.items,
+        (i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
+      );
       if (!reqWithSameNameExists) {
         const dirname = getDirectoryName(item.pathname);
         const fullName = path.join(dirname, filename);
         const { ipcRenderer } = window;
         const requestItems = filter(parentItem.items, (i) => i.type !== 'folder');
-        itemToSave.seq = requestItems ? (requestItems.length + 1) : 1;
+        itemToSave.seq = requestItems ? requestItems.length + 1 : 1;
 
         itemSchema
           .validate(itemToSave)
@@ -490,7 +505,7 @@ export const moveItemToRootOfCollection = (collectionUid, draggedItemUid) => (di
     const draggedItemPathname = draggedItem.pathname;
     moveCollectionItemToRootOfCollection(collectionCopy, draggedItem);
 
-    if(isItemAFolder(draggedItem)) {
+    if (isItemAFolder(draggedItem)) {
       return ipcRenderer
         .invoke('renderer:move-folder-item', draggedItemPathname, collectionCopy.pathname)
         .then(resolve)
@@ -542,7 +557,10 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
     // itemUid is null when we are creating a new request at the root level
     const filename = resolveRequestFilename(requestName);
     if (!itemUid) {
-      const reqWithSameNameExists = find(collection.items, (i) => i.type !== 'folder' && trim(i.filename) === trim(filename));
+      const reqWithSameNameExists = find(
+        collection.items,
+        (i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
+      );
       const requestItems = filter(collection.items, (i) => i.type !== 'folder');
       item.seq = requestItems.length + 1;
 
@@ -557,7 +575,10 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
     } else {
       const currentItem = findItemInCollection(collection, itemUid);
       if (currentItem) {
-        const reqWithSameNameExists = find(currentItem.items, (i) => i.type !== 'folder' && trim(i.filename) === trim(filename));
+        const reqWithSameNameExists = find(
+          currentItem.items,
+          (i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
+        );
         const requestItems = filter(currentItem.items, (i) => i.type !== 'folder');
         item.seq = requestItems.length + 1;
         if (!reqWithSameNameExists) {
@@ -583,13 +604,17 @@ export const addEnvironment = (name, collectionUid) => (dispatch, getState) => {
 
     ipcRenderer
       .invoke('renderer:create-environment', collection.pathname, name)
-      .then(dispatch(updateLastAction({
-        collectionUid,
-        lastAction: {
-          type: 'ADD_ENVIRONMENT',
-          payload: name
-        }
-      })))
+      .then(
+        dispatch(
+          updateLastAction({
+            collectionUid,
+            lastAction: {
+              type: 'ADD_ENVIRONMENT',
+              payload: name
+            }
+          })
+        )
+      )
       .then(resolve)
       .catch(reject);
   });
@@ -793,9 +818,6 @@ export const importCollection = (collection, collectionLocation) => (dispatch, g
   return new Promise((resolve, reject) => {
     const { ipcRenderer } = window;
 
-    ipcRenderer
-      .invoke('renderer:import-collection', collection, collectionLocation)
-      .then(resolve)
-      .catch(reject);
+    ipcRenderer.invoke('renderer:import-collection', collection, collectionLocation).then(resolve).catch(reject);
   });
 };
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
index 93c9a34fb..c12b81eed 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@@ -482,7 +482,10 @@ export const collectionsSlice = createSlice({
           if (!item.draft) {
             item.draft = cloneDeep(item);
           }
-          item.draft.request.body.formUrlEncoded = filter(item.draft.request.body.formUrlEncoded, (p) => p.uid !== action.payload.paramUid);
+          item.draft.request.body.formUrlEncoded = filter(
+            item.draft.request.body.formUrlEncoded,
+            (p) => p.uid !== action.payload.paramUid
+          );
         }
       }
     },
@@ -537,7 +540,10 @@ export const collectionsSlice = createSlice({
           if (!item.draft) {
             item.draft = cloneDeep(item);
           }
-          item.draft.request.body.multipartForm = filter(item.draft.request.body.multipartForm, (p) => p.uid !== action.payload.paramUid);
+          item.draft.request.body.multipartForm = filter(
+            item.draft.request.body.multipartForm,
+            (p) => p.uid !== action.payload.paramUid
+          );
         }
       }
     },
@@ -729,7 +735,9 @@ export const collectionsSlice = createSlice({
           if (!item.draft) {
             item.draft = cloneDeep(item);
           }
-          item.draft.request.assertions = item.draft.request.assertions.filter((a) => a.uid !== action.payload.assertUid);
+          item.draft.request.assertions = item.draft.request.assertions.filter(
+            (a) => a.uid !== action.payload.assertUid
+          );
         }
       }
     },
@@ -744,7 +752,7 @@ export const collectionsSlice = createSlice({
           if (!item.draft) {
             item.draft = cloneDeep(item);
           }
-          if(type === 'request') {
+          if (type === 'request') {
             item.draft.request.vars = item.draft.request.vars || {};
             item.draft.request.vars.req = item.draft.request.vars.req || [];
             item.draft.request.vars.req.push({
@@ -754,7 +762,7 @@ export const collectionsSlice = createSlice({
               local: false,
               enabled: true
             });
-          } else if(type === 'response') {
+          } else if (type === 'response') {
             item.draft.request.vars = item.draft.request.vars || {};
             item.draft.request.vars.res = item.draft.request.vars.res || [];
             item.draft.request.vars.res.push({
@@ -779,7 +787,7 @@ export const collectionsSlice = createSlice({
           if (!item.draft) {
             item.draft = cloneDeep(item);
           }
-          if(type === 'request') {
+          if (type === 'request') {
             item.draft.request.vars = item.draft.request.vars || {};
             item.draft.request.vars.req = item.draft.request.vars.req || [];
 
@@ -790,7 +798,7 @@ export const collectionsSlice = createSlice({
               reqVar.description = action.payload.var.description;
               reqVar.enabled = action.payload.var.enabled;
             }
-          } else if(type === 'response') {
+          } else if (type === 'response') {
             item.draft.request.vars = item.draft.request.vars || {};
             item.draft.request.vars.res = item.draft.request.vars.res || [];
             const resVar = find(item.draft.request.vars.res, (v) => v.uid === action.payload.var.uid);
@@ -815,11 +823,11 @@ export const collectionsSlice = createSlice({
           if (!item.draft) {
             item.draft = cloneDeep(item);
           }
-          if(type === 'request') {
+          if (type === 'request') {
             item.draft.request.vars = item.draft.request.vars || {};
             item.draft.request.vars.req = item.draft.request.vars.req || [];
             item.draft.request.vars.req = item.draft.request.vars.req.filter((v) => v.uid !== action.payload.varUid);
-          } else if(type === 'response') {
+          } else if (type === 'response') {
             item.draft.request.vars = item.draft.request.vars || {};
             item.draft.request.vars.res = item.draft.request.vars.res || [];
             item.draft.request.vars.res = item.draft.request.vars.res.filter((v) => v.uid !== action.payload.varUid);
@@ -922,7 +930,7 @@ export const collectionsSlice = createSlice({
           // whenever a user attempts to sort a req within the same folder
           // the seq is updated, but everything else remains the same
           // we don't want to lose the draft in this case
-          if(areItemsTheSameExceptSeqUpdate(item, file.data)) {
+          if (areItemsTheSameExceptSeqUpdate(item, file.data)) {
             item.seq = file.data.seq;
           } else {
             item.name = file.data.name;
@@ -968,16 +976,16 @@ export const collectionsSlice = createSlice({
         collection.environments = collection.environments || [];
 
         const existingEnv = collection.environments.find((e) => e.uid === environment.uid);
-        
+
         if (existingEnv) {
           existingEnv.variables = environment.variables;
         } else {
           collection.environments.push(environment);
 
           const lastAction = collection.lastAction;
-          if(lastAction && lastAction.type === 'ADD_ENVIRONMENT') {
+          if (lastAction && lastAction.type === 'ADD_ENVIRONMENT') {
             collection.lastAction = null;
-            if(lastAction.payload === environment.name) {
+            if (lastAction.payload === environment.name) {
               collection.activeEnvironmentUid = environment.uid;
             }
           }
@@ -1031,7 +1039,7 @@ export const collectionsSlice = createSlice({
       if (collection) {
         const item = findItemInCollection(collection, itemUid);
         if (item) {
-          if(type === 'request-queued') {
+          if (type === 'request-queued') {
             const { cancelTokenUid } = action.payload;
             item.requestUid = requestUid;
             item.requestState = 'queued';
@@ -1039,24 +1047,24 @@ export const collectionsSlice = createSlice({
             item.cancelTokenUid = cancelTokenUid;
           }
 
-          if(type === 'request-sent') {
+          if (type === 'request-sent') {
             const { cancelTokenUid, requestSent } = action.payload;
             item.requestSent = requestSent;
 
             // sometimes the response is received before the request-sent event arrives
-            if(item.requestUid === requestUid && item.requestState === 'queued') {
+            if (item.requestUid === requestUid && item.requestState === 'queued') {
               item.requestUid = requestUid;
               item.requestState = 'sending';
               item.cancelTokenUid = cancelTokenUid;
             }
           }
 
-          if(type === 'assertion-results') {
+          if (type === 'assertion-results') {
             const { results } = action.payload;
             item.assertionResults = results;
           }
 
-          if(type === 'test-results') {
+          if (type === 'test-results') {
             const { results } = action.payload;
             item.testResults = results;
           }
@@ -1071,11 +1079,11 @@ export const collectionsSlice = createSlice({
         const folder = findItemInCollection(collection, folderUid);
         const request = findItemInCollection(collection, itemUid);
 
-        collection.runnerResult = collection.runnerResult || {info: {}, items: []};
+        collection.runnerResult = collection.runnerResult || { info: {}, items: [] };
 
         // todo
         // get startedAt and endedAt from the runner and display it in the UI
-        if(type === 'testrun-started') {
+        if (type === 'testrun-started') {
           const info = collection.runnerResult.info;
           info.collectionUid = collectionUid;
           info.folderUid = folderUid;
@@ -1083,46 +1091,45 @@ export const collectionsSlice = createSlice({
           info.status = 'started';
         }
 
-        if(type === 'testrun-ended') {
+        if (type === 'testrun-ended') {
           const info = collection.runnerResult.info;
           info.status = 'ended';
         }
 
-
-        if(type === 'request-queued') {
+        if (type === 'request-queued') {
           collection.runnerResult.items.push({
             uid: request.uid,
             status: 'queued'
           });
         }
 
-        if(type === 'request-sent') {
+        if (type === 'request-sent') {
           const item = collection.runnerResult.items.find((i) => i.uid === request.uid);
           item.status = 'running';
           item.requestSent = action.payload.requestSent;
         }
 
-        if(type === 'response-received') {
+        if (type === 'response-received') {
           const item = collection.runnerResult.items.find((i) => i.uid === request.uid);
           item.status = 'completed';
           item.responseReceived = action.payload.responseReceived;
         }
 
-        if(type === 'test-results') {
+        if (type === 'test-results') {
           const item = collection.runnerResult.items.find((i) => i.uid === request.uid);
           item.testResults = action.payload.testResults;
         }
 
-        if(type === 'assertion-results') {
+        if (type === 'assertion-results') {
           const item = collection.runnerResult.items.find((i) => i.uid === request.uid);
           item.assertionResults = action.payload.assertionResults;
         }
 
-        if(type === 'error') {
+        if (type === 'error') {
           const item = collection.runnerResult.items.find((i) => i.uid === request.uid);
           item.error = action.payload.error;
           item.responseReceived = action.payload.responseReceived;
-          item.status = "error";
+          item.status = 'error';
         }
       }
     },
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js b/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
index d12f18586..e1181aac7 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
@@ -80,6 +80,7 @@ export const tabsSlice = createSlice({
   }
 });
 
-export const { addTab, focusTab, updateRequestPaneTabWidth, updateRequestPaneTab, updateResponsePaneTab, closeTabs } = tabsSlice.actions;
+export const { addTab, focusTab, updateRequestPaneTabWidth, updateRequestPaneTab, updateResponsePaneTab, closeTabs } =
+  tabsSlice.actions;
 
 export default tabsSlice.reducer;
diff --git a/packages/bruno-app/src/providers/Theme/index.js b/packages/bruno-app/src/providers/Theme/index.js
index 16a9735c8..b2d475e05 100644
--- a/packages/bruno-app/src/providers/Theme/index.js
+++ b/packages/bruno-app/src/providers/Theme/index.js
@@ -6,7 +6,7 @@ import { ThemeProvider as SCThemeProvider } from 'styled-components';
 
 export const ThemeContext = createContext();
 export const ThemeProvider = (props) => {
-  const isBrowserThemeLight = window.matchMedia("(prefers-color-scheme: light)").matches;
+  const isBrowserThemeLight = window.matchMedia('(prefers-color-scheme: light)').matches;
   const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', isBrowserThemeLight ? 'light' : 'dark');
 
   const theme = themes[storedTheme];
diff --git a/packages/bruno-app/src/providers/Toaster/index.js b/packages/bruno-app/src/providers/Toaster/index.js
index 94a530c98..1ae25764c 100644
--- a/packages/bruno-app/src/providers/Toaster/index.js
+++ b/packages/bruno-app/src/providers/Toaster/index.js
@@ -5,12 +5,10 @@ import { useTheme } from 'providers/Theme';
 export const ToastContext = React.createContext();
 
 export const ToastProvider = (props) => {
-  const {
-    storedTheme
-  } = useTheme();
+  const { storedTheme } = useTheme();
 
   const toastOptions = { duration: 2000 };
-  if(storedTheme === 'dark') {
+  if (storedTheme === 'dark') {
     toastOptions.style = {
       borderRadius: '10px',
       background: '#3d3d3d',
@@ -21,9 +19,7 @@ export const ToastProvider = (props) => {
   return (
     <ToastContext.Provider {...props} value="toastProvider">
       <Toaster toastOptions={toastOptions} />
-      <div>
-        {props.children}
-      </div>
+      <div>{props.children}</div>
     </ToastContext.Provider>
   );
 };
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index baac0c2ce..8971749fd 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -20,7 +20,7 @@ const darkTheme = {
     bg: 'rgb(48, 48, 49)',
 
     name: {
-      color: '#569cd6',
+      color: '#569cd6'
     }
   },
 
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index 21bdda3f4..8e3d8585d 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -9,7 +9,7 @@ const lightTheme = {
       green: '#047857',
       danger: 'rgb(185, 28, 28)',
       muted: '#4b5563',
-      purple: '#8e44ad',
+      purple: '#8e44ad'
     },
     bg: {
       danger: '#dc3545'
@@ -24,7 +24,7 @@ const lightTheme = {
     bg: '#fff',
 
     name: {
-      color: '#546de5',
+      color: '#546de5'
     }
   },
 
diff --git a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
index 9501ef6e0..7a1a928b3 100644
--- a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
+++ b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
@@ -14,7 +14,7 @@ if (!SERVER_RENDERED) {
 
   const renderVarInfo = (token, options, cm, pos) => {
     const str = token.string || '';
-    if(!str || !str.length || typeof str !== 'string') {
+    if (!str || !str.length || typeof str !== 'string') {
       return;
     }
     // str is of format {{variableName}}, extract variableName
@@ -32,8 +32,7 @@ if (!SERVER_RENDERED) {
     return into;
   };
 
-  CodeMirror.defineOption('brunoVarInfo', false, function(cm, options, old) {
-
+  CodeMirror.defineOption('brunoVarInfo', false, function (cm, options, old) {
     if (old && old !== CodeMirror.Init) {
       const oldOnMouseOver = cm.state.brunoVarInfo.onMouseOver;
       CodeMirror.off(cm.getWrapperElement(), 'mouseover', oldOnMouseOver);
@@ -50,10 +49,7 @@ if (!SERVER_RENDERED) {
 
   function createState(options) {
     return {
-      options:
-        options instanceof Function
-          ? {render: options}
-          : options === true ? {} : options,
+      options: options instanceof Function ? { render: options } : options === true ? {} : options
     };
   }
 
@@ -70,7 +66,7 @@ if (!SERVER_RENDERED) {
       return;
     }
 
-    if(target.className !== 'cm-variable-valid') {
+    if (target.className !== 'cm-variable-valid') {
       return;
     }
 
@@ -79,19 +75,19 @@ if (!SERVER_RENDERED) {
     const hoverTime = getHoverTime(cm);
     state.hoverTimeout = setTimeout(onHover, hoverTime);
 
-    const onMouseMove = function() {
+    const onMouseMove = function () {
       clearTimeout(state.hoverTimeout);
       state.hoverTimeout = setTimeout(onHover, hoverTime);
     };
 
-    const onMouseOut = function() {
+    const onMouseOut = function () {
       CodeMirror.off(document, 'mousemove', onMouseMove);
       CodeMirror.off(cm.getWrapperElement(), 'mouseout', onMouseOut);
       clearTimeout(state.hoverTimeout);
       state.hoverTimeout = undefined;
     };
 
-    const onHover = function() {
+    const onHover = function () {
       CodeMirror.off(document, 'mousemove', onMouseMove);
       CodeMirror.off(cm.getWrapperElement(), 'mouseout', onMouseOut);
       state.hoverTimeout = undefined;
@@ -105,7 +101,7 @@ if (!SERVER_RENDERED) {
   function onMouseHover(cm, box) {
     const pos = cm.coordsChar({
       left: (box.left + box.right) / 2,
-      top: (box.top + box.bottom) / 2,
+      top: (box.top + box.bottom) / 2
     });
 
     const state = cm.state.brunoVarInfo;
@@ -128,21 +124,12 @@ if (!SERVER_RENDERED) {
     const popupBox = popup.getBoundingClientRect();
     const popupStyle = popup.currentStyle || window.getComputedStyle(popup);
     const popupWidth =
-      popupBox.right -
-      popupBox.left +
-      parseFloat(popupStyle.marginLeft) +
-      parseFloat(popupStyle.marginRight);
+      popupBox.right - popupBox.left + parseFloat(popupStyle.marginLeft) + parseFloat(popupStyle.marginRight);
     const popupHeight =
-      popupBox.bottom -
-      popupBox.top +
-      parseFloat(popupStyle.marginTop) +
-      parseFloat(popupStyle.marginBottom);
+      popupBox.bottom - popupBox.top + parseFloat(popupStyle.marginTop) + parseFloat(popupStyle.marginBottom);
 
     let topPos = box.bottom;
-    if (
-      popupHeight > window.innerHeight - box.bottom - 15 &&
-      box.top > window.innerHeight - box.bottom
-    ) {
+    if (popupHeight > window.innerHeight - box.bottom - 15 && box.top > window.innerHeight - box.bottom) {
       topPos = box.top - popupHeight;
     }
 
@@ -166,23 +153,23 @@ if (!SERVER_RENDERED) {
 
     let popupTimeout;
 
-    const onMouseOverPopup = function() {
+    const onMouseOverPopup = function () {
       clearTimeout(popupTimeout);
     };
 
-    const onMouseOut = function() {
+    const onMouseOut = function () {
       clearTimeout(popupTimeout);
       popupTimeout = setTimeout(hidePopup, 200);
     };
 
-    const hidePopup = function() {
+    const hidePopup = function () {
       CodeMirror.off(popup, 'mouseover', onMouseOverPopup);
       CodeMirror.off(popup, 'mouseout', onMouseOut);
       CodeMirror.off(cm.getWrapperElement(), 'mouseout', onMouseOut);
 
       if (popup.style.opacity) {
         popup.style.opacity = 0;
-        setTimeout(function() {
+        setTimeout(function () {
           if (popup.parentNode) {
             popup.parentNode.removeChild(popup);
           }
diff --git a/packages/bruno-app/src/utils/collections/export.js b/packages/bruno-app/src/utils/collections/export.js
index 5551bddcc..b3c7780ad 100644
--- a/packages/bruno-app/src/utils/collections/export.js
+++ b/packages/bruno-app/src/utils/collections/export.js
@@ -32,11 +32,11 @@ const transformItem = (items = []) => {
       item.request.query = item.request.params;
       delete item.request.params;
 
-      if(item.type === 'graphql-request') {
+      if (item.type === 'graphql-request') {
         item.type = 'graphql';
       }
 
-      if(item.type === 'http-request') {
+      if (item.type === 'http-request') {
         item.type = 'http';
       }
     }
@@ -61,7 +61,6 @@ const exportCollection = (collection) => {
   deleteUidsInEnvs(collection.environments);
   transformItem(collection.items);
 
-
   const fileName = `${collection.name}.json`;
   const fileBlob = new Blob([JSON.stringify(collection, null, 2)], { type: 'application/json' });
 
diff --git a/packages/bruno-app/src/utils/collections/index.js b/packages/bruno-app/src/utils/collections/index.js
index 94e5f7b75..3a0591324 100644
--- a/packages/bruno-app/src/utils/collections/index.js
+++ b/packages/bruno-app/src/utils/collections/index.js
@@ -158,13 +158,13 @@ export const moveCollectionItemToRootOfCollection = (collection, draggedItem) =>
   let draggedItemParent = findParentItemInCollection(collection, draggedItem.uid);
 
   // If the dragged item is already at the root of the collection, do nothing
-  if(!draggedItemParent) {
+  if (!draggedItemParent) {
     return;
   }
 
   draggedItemParent.items = filter(draggedItemParent.items, (i) => i.uid !== draggedItem.uid);
   collection.items.push(draggedItem);
-  if(draggedItem.type == 'folder') {
+  if (draggedItem.type == 'folder') {
     draggedItem.pathname = path.join(collection.pathname, draggedItem.name);
   } else {
     draggedItem.pathname = path.join(collection.pathname, draggedItem.filename);
@@ -174,10 +174,10 @@ export const moveCollectionItemToRootOfCollection = (collection, draggedItem) =>
 export const getItemsToResequence = (parent, collection) => {
   let itemsToResequence = [];
 
-  if(!parent) {
+  if (!parent) {
     let index = 1;
     each(collection.items, (item) => {
-      if(isItemARequest(item)) {
+      if (isItemARequest(item)) {
         itemsToResequence.push({
           pathname: item.pathname,
           seq: index++
@@ -190,7 +190,7 @@ export const getItemsToResequence = (parent, collection) => {
   if (parent.items && parent.items.length) {
     let index = 1;
     each(parent.items, (item) => {
-      if(isItemARequest(item)) {
+      if (isItemARequest(item)) {
         itemsToResequence.push({
           pathname: item.pathname,
           seq: index++
@@ -499,11 +499,11 @@ export const areItemsTheSameExceptSeqUpdate = (_item1, _item2) => {
 };
 
 export const getDefaultRequestPaneTab = (item) => {
-  if(item.type === 'http-request') {
+  if (item.type === 'http-request') {
     return 'params';
   }
 
-  if(item.type === 'graphql-request') {
+  if (item.type === 'graphql-request') {
     return 'query';
   }
 };
@@ -514,7 +514,7 @@ export const getEnvironmentVariables = (collection) => {
     const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
     if (environment) {
       each(environment.variables, (variable) => {
-        if(variable.name && variable.value && variable.enabled) {
+        if (variable.name && variable.value && variable.enabled) {
           variables[variable.name] = variable.value;
         }
       });
@@ -522,7 +522,7 @@ export const getEnvironmentVariables = (collection) => {
   }
 
   return variables;
-}
+};
 
 export const getTotalRequestCountInCollection = (collection) => {
   let count = 0;
@@ -544,4 +544,4 @@ export const getAllVariables = (collection) => {
     ...environmentVariables,
     ...collection.collectionVariables
   };
-}
+};
diff --git a/packages/bruno-app/src/utils/common/codemirror.js b/packages/bruno-app/src/utils/common/codemirror.js
index cc54dcb63..a565062e9 100644
--- a/packages/bruno-app/src/utils/common/codemirror.js
+++ b/packages/bruno-app/src/utils/common/codemirror.js
@@ -1,4 +1,3 @@
-
 let CodeMirror;
 const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 
@@ -7,29 +6,29 @@ if (!SERVER_RENDERED) {
 }
 
 export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => {
-  CodeMirror.defineMode("brunovariables", function(config, parserConfig) {
+  CodeMirror.defineMode('brunovariables', function (config, parserConfig) {
     let variablesOverlay = {
-      token: function(stream, state) {
-        if (stream.match("{{", true)) {
+      token: function (stream, state) {
+        if (stream.match('{{', true)) {
           let ch;
-          let word = "";
+          let word = '';
           while ((ch = stream.next()) != null) {
-            if (ch == "}" && stream.next() == "}") {
-              stream.eat("}");
+            if (ch == '}' && stream.next() == '}') {
+              stream.eat('}');
               if (word in variables) {
-                return "variable-valid";
+                return 'variable-valid';
               } else {
-                return "variable-invalid";
+                return 'variable-invalid';
               }
             }
             word += ch;
           }
         }
-        while (stream.next() != null && !stream.match("{{", false)) {}
+        while (stream.next() != null && !stream.match('{{', false)) {}
         return null;
       }
     };
 
     return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || mode), variablesOverlay);
   });
-};
\ No newline at end of file
+};
diff --git a/packages/bruno-app/src/utils/common/index.js b/packages/bruno-app/src/utils/common/index.js
index f5b3b2dfb..7db86d386 100644
--- a/packages/bruno-app/src/utils/common/index.js
+++ b/packages/bruno-app/src/utils/common/index.js
@@ -26,7 +26,7 @@ export const waitForNextTick = () => {
 };
 
 export const safeParseJSON = (str) => {
-  if(!str || !str.length || typeof str !== 'string') {
+  if (!str || !str.length || typeof str !== 'string') {
     return str;
   }
   try {
@@ -36,19 +36,19 @@ export const safeParseJSON = (str) => {
   }
 };
 
-export const safeStringifyJSON = (obj, indent=false) => {
-  if(!obj) {
+export const safeStringifyJSON = (obj, indent = false) => {
+  if (!obj) {
     return obj;
   }
   try {
-    if(indent) {
+    if (indent) {
       return JSON.stringify(obj, null, 2);
     }
     return JSON.stringify(obj);
   } catch (e) {
     return obj;
   }
-}
+};
 
 // Remove any characters that are not alphanumeric, spaces, hyphens, or underscores
 export const normalizeFileName = (name) => {
@@ -60,4 +60,4 @@ export const normalizeFileName = (name) => {
   const formattedName = name.replace(validChars, '-');
 
   return formattedName;
-}
+};
diff --git a/packages/bruno-app/src/utils/common/index.spec.js b/packages/bruno-app/src/utils/common/index.spec.js
index 30dd185ec..6d52ed1aa 100644
--- a/packages/bruno-app/src/utils/common/index.spec.js
+++ b/packages/bruno-app/src/utils/common/index.spec.js
@@ -1,19 +1,19 @@
-const { describe, it, expect } = require("@jest/globals");
+const { describe, it, expect } = require('@jest/globals');
 
 import { normalizeFileName } from './index';
 
-describe("common utils", () => {
-  describe("normalizeFileName", () => {
-    it("should remove special characters", () => {
-      expect(normalizeFileName("hello world")).toBe("hello world");
-      expect(normalizeFileName("hello-world")).toBe("hello-world");
-      expect(normalizeFileName("hello_world")).toBe("hello_world");
-      expect(normalizeFileName("hello_world-")).toBe("hello_world-");
-      expect(normalizeFileName("hello_world-123")).toBe("hello_world-123");
-      expect(normalizeFileName("hello_world-123!@#$%^&*()")).toBe("hello_world-123----------");
-      expect(normalizeFileName("hello_world?")).toBe("hello_world-");
-      expect(normalizeFileName("foo/bar/")).toBe("foo-bar-");
-      expect(normalizeFileName("foo\\bar\\")).toBe("foo-bar-");
+describe('common utils', () => {
+  describe('normalizeFileName', () => {
+    it('should remove special characters', () => {
+      expect(normalizeFileName('hello world')).toBe('hello world');
+      expect(normalizeFileName('hello-world')).toBe('hello-world');
+      expect(normalizeFileName('hello_world')).toBe('hello_world');
+      expect(normalizeFileName('hello_world-')).toBe('hello_world-');
+      expect(normalizeFileName('hello_world-123')).toBe('hello_world-123');
+      expect(normalizeFileName('hello_world-123!@#$%^&*()')).toBe('hello_world-123----------');
+      expect(normalizeFileName('hello_world?')).toBe('hello_world-');
+      expect(normalizeFileName('foo/bar/')).toBe('foo-bar-');
+      expect(normalizeFileName('foo\\bar\\')).toBe('foo-bar-');
     });
   });
-});
\ No newline at end of file
+});
diff --git a/packages/bruno-app/src/utils/common/platform.js b/packages/bruno-app/src/utils/common/platform.js
index 036cafe0a..d144796e7 100644
--- a/packages/bruno-app/src/utils/common/platform.js
+++ b/packages/bruno-app/src/utils/common/platform.js
@@ -1,6 +1,6 @@
 import trim from 'lodash/trim';
 import path from 'path';
-import slash  from './slash';
+import slash from './slash';
 
 export const isElectron = () => {
   if (!window) {
@@ -32,4 +32,4 @@ export const getDirectoryName = (pathname) => {
   pathname = slash(pathname);
 
   return path.dirname(pathname);
-}
+};
diff --git a/packages/bruno-app/src/utils/common/slash.js b/packages/bruno-app/src/utils/common/slash.js
index d12807566..a2b39e94f 100644
--- a/packages/bruno-app/src/utils/common/slash.js
+++ b/packages/bruno-app/src/utils/common/slash.js
@@ -1,6 +1,6 @@
 /**
  * MIT License
- * 
+ *
  * Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
  * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
@@ -8,13 +8,13 @@
  */
 
 const slash = (path) => {
-	const isExtendedLengthPath = /^\\\\\?\\/.test(path);
+  const isExtendedLengthPath = /^\\\\\?\\/.test(path);
 
-	if (isExtendedLengthPath) {
-		return path;
-	}
+  if (isExtendedLengthPath) {
+    return path;
+  }
 
-	return path.replace(/\\/g, '/');
-}
+  return path.replace(/\\/g, '/');
+};
 
 export default slash;
diff --git a/packages/bruno-app/src/utils/importers/common.js b/packages/bruno-app/src/utils/importers/common.js
index 47a20a000..52b0af6a4 100644
--- a/packages/bruno-app/src/utils/importers/common.js
+++ b/packages/bruno-app/src/utils/importers/common.js
@@ -1,4 +1,3 @@
-
 import each from 'lodash/each';
 import get from 'lodash/get';
 
@@ -67,7 +66,7 @@ export const transformItemsInCollection = (collection) => {
 
       if (['http', 'graphql'].includes(item.type)) {
         item.type = `${item.type}-request`;
-        if(item.request.query) {
+        if (item.request.query) {
           item.request.params = item.request.query;
         }
 
@@ -89,7 +88,7 @@ export const hydrateSeqInCollection = (collection) => {
   const hydrateSeq = (items = []) => {
     let index = 1;
     each(items, (item) => {
-      if(isItemARequest(item) && !item.seq) {
+      if (isItemARequest(item) && !item.seq) {
         item.seq = index;
         index++;
       }
@@ -101,4 +100,4 @@ export const hydrateSeqInCollection = (collection) => {
   hydrateSeq(collection.items);
 
   return collection;
-}
+};
diff --git a/packages/bruno-app/src/utils/importers/insomnia-collection.js b/packages/bruno-app/src/utils/importers/insomnia-collection.js
index 56870f203..b0fd7195e 100644
--- a/packages/bruno-app/src/utils/importers/insomnia-collection.js
+++ b/packages/bruno-app/src/utils/importers/insomnia-collection.js
@@ -21,15 +21,14 @@ const parseGraphQL = (text) => {
     return {
       query: graphql.query,
       variables: JSON.stringify(graphql.variables, null, 2)
-    }
+    };
   } catch (e) {
     return {
       query: '',
       variables: {}
-    }
+    };
   }
-}
-  
+};
 
 const transformInsomniaRequestItem = (request) => {
   const brunoRequestItem = {
@@ -111,7 +110,6 @@ const transformInsomniaRequestItem = (request) => {
     brunoRequestItem.request.body.graphql = parseGraphQL(request.body.text);
   }
 
-
   return brunoRequestItem;
 };
 
@@ -119,7 +117,7 @@ const parseInsomniaCollection = (data) => {
   const brunoCollection = {
     name: '',
     uid: uuid(),
-    version: "1",
+    version: '1',
     items: [],
     environments: []
   };
@@ -128,7 +126,9 @@ const parseInsomniaCollection = (data) => {
     try {
       const insomniaExport = JSON.parse(data);
       const insomniaResources = get(insomniaExport, 'resources', []);
-      const insomniaCollection = insomniaResources.find(resource => resource._type === 'workspace' && resource.scope === 'collection');
+      const insomniaCollection = insomniaResources.find(
+        (resource) => resource._type === 'workspace' && resource.scope === 'collection'
+      );
 
       if (!insomniaCollection) {
         reject(new BrunoError('Collection not found inside Insomnia export'));
@@ -136,31 +136,33 @@ const parseInsomniaCollection = (data) => {
 
       brunoCollection.name = insomniaCollection.name;
 
-      const requestsAndFolders = insomniaResources.filter(
-        (resource) => resource._type === 'request' || resource._type === 'request_group'
-      ) || [];
+      const requestsAndFolders =
+        insomniaResources.filter((resource) => resource._type === 'request' || resource._type === 'request_group') ||
+        [];
 
       function createFolderStructure(resources, parentId = null) {
-        const requestGroups = resources.filter((resource) => resource._type === 'request_group' && resource.parentId === parentId) || [];
+        const requestGroups =
+          resources.filter((resource) => resource._type === 'request_group' && resource.parentId === parentId) || [];
         const requests = resources.filter((resource) => resource._type === 'request' && resource.parentId === parentId);
 
         const folders = requestGroups.map((folder) => {
-          const requests = resources.filter((resource) => resource._type === 'request' && resource.parentId === folder._id);
+          const requests = resources.filter(
+            (resource) => resource._type === 'request' && resource.parentId === folder._id
+          );
 
           return {
             uid: uuid(),
             name: folder.name,
             type: 'folder',
-            items: createFolderStructure(resources, folder._id).concat(requests.map(transformInsomniaRequestItem)),
-          }
+            items: createFolderStructure(resources, folder._id).concat(requests.map(transformInsomniaRequestItem))
+          };
         });
 
         return folders.concat(requests.map(transformInsomniaRequestItem));
       }
 
-      brunoCollection.items = createFolderStructure(requestsAndFolders, insomniaCollection._id),
-
-      resolve(brunoCollection);
+      (brunoCollection.items = createFolderStructure(requestsAndFolders, insomniaCollection._id)),
+        resolve(brunoCollection);
     } catch (err) {
       reject(new BrunoError('An error occurred while parsing the Insomnia collection'));
     }
@@ -183,4 +185,4 @@ const importCollection = () => {
   });
 };
 
-export default importCollection;
\ No newline at end of file
+export default importCollection;
diff --git a/packages/bruno-app/src/utils/importers/postman-collection.js b/packages/bruno-app/src/utils/importers/postman-collection.js
index b1906fd4e..41af88452 100644
--- a/packages/bruno-app/src/utils/importers/postman-collection.js
+++ b/packages/bruno-app/src/utils/importers/postman-collection.js
@@ -22,7 +22,7 @@ const importPostmanV2CollectionItem = (brunoParent, item) => {
   brunoParent.items = brunoParent.items || [];
 
   each(item, (i) => {
-    if(isItemAFolder(i)) {
+    if (isItemAFolder(i)) {
       const brunoFolderItem = {
         uid: uuid(),
         name: i.name,
@@ -30,13 +30,13 @@ const importPostmanV2CollectionItem = (brunoParent, item) => {
         items: []
       };
       brunoParent.items.push(brunoFolderItem);
-      if(i.item && i.item.length) {
+      if (i.item && i.item.length) {
         importPostmanV2CollectionItem(brunoFolderItem, i.item);
       }
     } else {
-      if(i.request) {
+      if (i.request) {
         let url = '';
-        if(typeof i.request.url === 'string') {
+        if (typeof i.request.url === 'string') {
           url = i.request.url;
         } else {
           url = get(i, 'request.url.raw') || '';
@@ -63,8 +63,8 @@ const importPostmanV2CollectionItem = (brunoParent, item) => {
         };
 
         const bodyMode = get(i, 'request.body.mode');
-        if(bodyMode) {
-          if(bodyMode === 'formdata') {
+        if (bodyMode) {
+          if (bodyMode === 'formdata') {
             brunoRequestItem.request.body.mode = 'multipartForm';
             each(i.request.body.formdata, (param) => {
               brunoRequestItem.request.body.formUrlEncoded.push({
@@ -77,7 +77,7 @@ const importPostmanV2CollectionItem = (brunoParent, item) => {
             });
           }
 
-          if(bodyMode === 'urlencoded') {
+          if (bodyMode === 'urlencoded') {
             brunoRequestItem.request.body.mode = 'formUrlEncoded';
             each(i.request.body.urlencoded, (param) => {
               brunoRequestItem.request.body.formUrlEncoded.push({
@@ -90,9 +90,9 @@ const importPostmanV2CollectionItem = (brunoParent, item) => {
             });
           }
 
-          if(bodyMode === 'raw') {
+          if (bodyMode === 'raw') {
             const language = get(i, 'request.body.options.raw.language');
-            if(language === 'json') {
+            if (language === 'json') {
               brunoRequestItem.request.body.mode = 'json';
               brunoRequestItem.request.body.json = i.request.body.raw;
             } else if (language === 'xml') {
@@ -135,7 +135,7 @@ const importPostmanV2Collection = (collection) => {
   const brunoCollection = {
     name: collection.info.name,
     uid: uuid(),
-    version: "1",
+    version: '1',
     items: [],
     environments: []
   };
@@ -145,7 +145,6 @@ const importPostmanV2Collection = (collection) => {
   return brunoCollection;
 };
 
-
 const parsePostmanCollection = (str) => {
   return new Promise((resolve, reject) => {
     try {
@@ -157,14 +156,14 @@ const parsePostmanCollection = (str) => {
         'https://schema.getpostman.com/json/collection/v2.1.0/collection.json'
       ];
 
-      if(v2Schemas.includes(schema)) {
+      if (v2Schemas.includes(schema)) {
         return resolve(importPostmanV2Collection(collection));
       }
 
       throw new BrunoError('Unknown postman schema');
     } catch (err) {
       console.log(err);
-      if(err instanceof BrunoError) {
+      if (err instanceof BrunoError) {
         return reject(err);
       }
 
diff --git a/packages/bruno-app/src/utils/network/index.js b/packages/bruno-app/src/utils/network/index.js
index 6bc55a24a..abc5583fe 100644
--- a/packages/bruno-app/src/utils/network/index.js
+++ b/packages/bruno-app/src/utils/network/index.js
@@ -35,18 +35,12 @@ export const fetchGqlSchema = async (endpoint, environment) => {
   return new Promise((resolve, reject) => {
     const { ipcRenderer } = window;
 
-    ipcRenderer
-      .invoke('fetch-gql-schema', endpoint, environment)
-      .then(resolve)
-      .catch(reject);
+    ipcRenderer.invoke('fetch-gql-schema', endpoint, environment).then(resolve).catch(reject);
   });
 };
 
 export const cancelNetworkRequest = async (cancelTokenUid) => {
   return new Promise((resolve, reject) => {
-    ipcRenderer
-      .invoke('cancel-http-request', cancelTokenUid)
-      .then(resolve)
-      .catch(reject);
+    ipcRenderer.invoke('cancel-http-request', cancelTokenUid).then(resolve).catch(reject);
   });
 };
diff --git a/packages/bruno-app/src/utils/url/index.js b/packages/bruno-app/src/utils/url/index.js
index 41ae8aa79..b28cc019e 100644
--- a/packages/bruno-app/src/utils/url/index.js
+++ b/packages/bruno-app/src/utils/url/index.js
@@ -4,7 +4,7 @@ import each from 'lodash/each';
 import filter from 'lodash/filter';
 
 const hasLength = (str) => {
-  if(!str || !str.length) {
+  if (!str || !str.length) {
     return false;
   }
 
@@ -18,7 +18,7 @@ export const parseQueryParams = (query) => {
     return [];
   }
 
-  let params =  query.split('&').map(param => {
+  let params = query.split('&').map((param) => {
     let [name, value = ''] = param.split('=');
     return { name, value };
   });
@@ -42,7 +42,7 @@ export const stringifyQueryParams = (params) => {
 };
 
 export const splitOnFirst = (str, char) => {
-  if(!str || !str.length) {
+  if (!str || !str.length) {
     return [str];
   }
 
diff --git a/packages/bruno-app/src/utils/url/index.spec.js b/packages/bruno-app/src/utils/url/index.spec.js
index 67e32093a..02112cdf2 100644
--- a/packages/bruno-app/src/utils/url/index.spec.js
+++ b/packages/bruno-app/src/utils/url/index.spec.js
@@ -1,70 +1,79 @@
 import { parseQueryParams, splitOnFirst } from './index';
 
 describe('Url Utils - parseQueryParams', () => {
-  it('should parse query - case 1',  () => {
-    const params = parseQueryParams("");
+  it('should parse query - case 1', () => {
+    const params = parseQueryParams('');
     expect(params).toEqual([]);
   });
 
-  it('should parse query - case 2',  () => {
-    const params = parseQueryParams("a");
-    expect(params).toEqual([{name: 'a', value: ''}]);
+  it('should parse query - case 2', () => {
+    const params = parseQueryParams('a');
+    expect(params).toEqual([{ name: 'a', value: '' }]);
   });
 
-  it('should parse query - case 3',  () => {
-    const params = parseQueryParams("a=");
-    expect(params).toEqual([{name: 'a', value: ''}]);
+  it('should parse query - case 3', () => {
+    const params = parseQueryParams('a=');
+    expect(params).toEqual([{ name: 'a', value: '' }]);
   });
 
-  it('should parse query - case 4',  () => {
-    const params = parseQueryParams("a=1");
-    expect(params).toEqual([{name: 'a', value: '1'}]);
+  it('should parse query - case 4', () => {
+    const params = parseQueryParams('a=1');
+    expect(params).toEqual([{ name: 'a', value: '1' }]);
   });
 
-  it('should parse query - case 5',  () => {
-    const params = parseQueryParams("a=1&");
-    expect(params).toEqual([{name: 'a', value: '1'}]);
+  it('should parse query - case 5', () => {
+    const params = parseQueryParams('a=1&');
+    expect(params).toEqual([{ name: 'a', value: '1' }]);
   });
 
-  it('should parse query - case 6',  () => {
-    const params = parseQueryParams("a=1&b");
-    expect(params).toEqual([{name: 'a', value: '1'}, {name: 'b', value: ''}]);
+  it('should parse query - case 6', () => {
+    const params = parseQueryParams('a=1&b');
+    expect(params).toEqual([
+      { name: 'a', value: '1' },
+      { name: 'b', value: '' }
+    ]);
   });
 
-  it('should parse query - case 7',  () => {
-    const params = parseQueryParams("a=1&b=");
-    expect(params).toEqual([{name: 'a', value: '1'}, {name: 'b', value: ''}]);
+  it('should parse query - case 7', () => {
+    const params = parseQueryParams('a=1&b=');
+    expect(params).toEqual([
+      { name: 'a', value: '1' },
+      { name: 'b', value: '' }
+    ]);
   });
 
-  it('should parse query - case 8',  () => {
-    const params = parseQueryParams("a=1&b=2");
-    expect(params).toEqual([{name: 'a', value: '1'}, {name: 'b', value: '2'}]);
+  it('should parse query - case 8', () => {
+    const params = parseQueryParams('a=1&b=2');
+    expect(params).toEqual([
+      { name: 'a', value: '1' },
+      { name: 'b', value: '2' }
+    ]);
   });
 });
 
 describe('Url Utils - splitOnFirst', () => {
-  it('should split on first - case 1',  () => {
-    const params = splitOnFirst("a", "=");
+  it('should split on first - case 1', () => {
+    const params = splitOnFirst('a', '=');
     expect(params).toEqual(['a']);
   });
 
-  it('should split on first - case 2',  () => {
-    const params = splitOnFirst("a=", "=");
+  it('should split on first - case 2', () => {
+    const params = splitOnFirst('a=', '=');
     expect(params).toEqual(['a', '']);
   });
 
-  it('should split on first - case 3',  () => {
-    const params = splitOnFirst("a=1", "=");
+  it('should split on first - case 3', () => {
+    const params = splitOnFirst('a=1', '=');
     expect(params).toEqual(['a', '1']);
   });
 
-  it('should split on first - case 4',  () => {
-    const params = splitOnFirst("a=1&b=2", "=");
+  it('should split on first - case 4', () => {
+    const params = splitOnFirst('a=1&b=2', '=');
     expect(params).toEqual(['a', '1&b=2']);
   });
 
-  it('should split on first - case 5',  () => {
-    const params = splitOnFirst("a=1&b=2", "&");
+  it('should split on first - case 5', () => {
+    const params = splitOnFirst('a=1&b=2', '&');
     expect(params).toEqual(['a=1', 'b=2']);
   });
 });