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

# Conflicts:
#	packages/bruno-app/src/components/Preferences/General/index.js
#	packages/bruno-app/src/components/Preferences/index.js
#	packages/bruno-app/src/providers/App/useIpcEvents.js
#	packages/bruno-app/src/providers/Preferences/index.js
#	packages/bruno-electron/src/index.js
#	packages/bruno-electron/src/ipc/collection.js
#	packages/bruno-electron/src/store/preferences.js

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

@@ -4,6 +4,7 @@ const StyledWrapper = styled.div`
   div.CodeMirror {
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
+    font-family: ${(props) => (props.font ? props.font : 'default')};
   }
 
   .CodeMirror-overlayscroll-horizontal div,

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

@@ -121,6 +121,7 @@ export default class CodeEditor extends React.Component {
       <StyledWrapper
         className="h-full w-full"
         aria-label="Code Editor"
+        font={this.props.font}
         ref={(node) => {
           this._node = node;
         }}

packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  color: ${(props) => props.theme.text};
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import get from 'lodash/get';
+import { useSelector, useDispatch } from 'react-redux';
+import { savePreferences } from 'providers/ReduxStore/slices/app';
+import StyledWrapper from './StyledWrapper';
+
+const Font = ({ close }) => {
+  const dispatch = useDispatch();
+  const preferences = useSelector((state) => state.app.preferences);
+
+  const [codeFont, setCodeFont] = useState(get(preferences, 'font.codeFont', 'default'));
+
+  const handleInputChange = (event) => {
+    setCodeFont(event.target.value);
+  };
+
+  const handleSave = () => {
+    dispatch(
+      savePreferences({
+        ...preferences,
+        font: {
+          codeFont
+        }
+      })
+    ).then(() => {
+      close();
+    });
+  };
+
+  return (
+    <StyledWrapper>
+      <label className="block font-medium">Code Editor Font</label>
+      <div className="input-container">
+        <input
+          type="text"
+          className="block textbox mt-2 w-full"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          onChange={handleInputChange}
+          defaultValue={codeFont}
+        />
+      </div>
+
+      <div className="mt-10">
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Font;

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

@@ -1,37 +1,46 @@
 import React, { useState } from 'react';
-import { usePreferences } from 'providers/Preferences';
+import { useSelector, useDispatch } from 'react-redux';
+import { savePreferences } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
-import toast from 'react-hot-toast';
 
-const General = () => {
-  const { preferences, setPreferences } = usePreferences();
+const General = ({ close }) => {
+  const preferences = useSelector((state) => state.app.preferences);
+  const dispatch = useDispatch();
 
-  const [tlsVerification, setTlsVerification] = useState(preferences.request.tlsVerification);
+  const [sslVerification, setSslVerification] = useState(preferences.request.sslVerification);
 
-  const handleCheckboxChange = () => {
-    const updatedPreferences = {
-      ...preferences,
-      request: {
-        ...preferences.request,
-        tlsVerification: !tlsVerification
-      }
-    };
-
-    setPreferences(updatedPreferences)
-      .then(() => {
-        setTlsVerification(!tlsVerification);
-        toast.success('Request settings saved successful.');
+  const handleSave = () => {
+    dispatch(
+      savePreferences({
+        ...preferences,
+        request: {
+          sslVerification
+        }
       })
-      .catch((err) => {
-        console.error(err);
-      });
+    ).then(() => {
+      close();
+    });
   };
 
   return (
     <StyledWrapper>
       <div className="flex items-center mt-2">
-        <input type="checkbox" checked={tlsVerification} onChange={handleCheckboxChange} className="mr-3 mousetrap" />
-        TLS Certificate Verification
+        <input
+          id="ssl-verification"
+          type="checkbox"
+          checked={sslVerification}
+          onChange={() => setSslVerification(!sslVerification)}
+          className="mr-3 mousetrap"
+        />
+        <label htmlFor="ssl-verification" className="select-none">
+          TLS Certificate Verification
+        </label>
+      </div>
+
+      <div className="mt-10">
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
       </div>
     </StyledWrapper>
   );

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

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import React, { useState } from 'react';
 import Support from './Support';
 import General from './General';
+import Font from './Font';
 import Theme from './Theme';
 import Proxy from './ProxySettings';
 import StyledWrapper from './StyledWrapper';
@@ -19,20 +20,24 @@ const Preferences = ({ onClose }) => {
   const getTabPanel = (tab) => {
     switch (tab) {
       case 'general': {
-        return <General />;
+        return <General close={onClose} />;
       }
 
       case 'proxy': {
-        return <Proxy />;
+        return <Proxy close={onClose} />;
       }
 
       case 'theme': {
-        return <Theme />;
+        return <Theme close={onClose} />;
       }
 
       case 'support': {
         return <Support />;
       }
+
+      case 'font': {
+        return <Font close={onClose} />;
+      }
     }
   };
 
@@ -46,6 +51,9 @@ const Preferences = ({ onClose }) => {
           <div className={getTabClassname('theme')} role="tab" onClick={() => setTab('theme')}>
             Theme
           </div>
+          <div className={getTabClassname('font')} role="tab" onClick={() => setTab('font')}>
+            Font
+          </div>
           <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
             Proxy
           </div>

packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
+import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateRequestGraphqlVariables } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
@@ -10,6 +11,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
   const dispatch = useDispatch();
 
   const { storedTheme } = useTheme();
+  const preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
     dispatch(
@@ -30,6 +32,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
         collection={collection}
         value={variables || ''}
         theme={storedTheme}
+        font={get(preferences, 'font.codeFont', 'default')}
         onEdit={onEdit}
         mode="javascript"
         onRun={onRun}

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

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 import CodeEditor from 'components/CodeEditor';
 import FormUrlEncodedParams from 'components/RequestPane/FormUrlEncodedParams';
 import MultipartFormParams from 'components/RequestPane/MultipartFormParams';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
@@ -14,6 +14,7 @@ const RequestBody = ({ item, collection }) => {
   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 preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
     dispatch(
@@ -48,6 +49,7 @@ const RequestBody = ({ item, collection }) => {
         <CodeEditor
           collection={collection}
           theme={storedTheme}
+          font={get(preferences, 'font.codeFont', 'default')}
           value={bodyContent[bodyMode] || ''}
           onEdit={onEdit}
           onRun={onRun}

packages/bruno-app/src/components/RequestPane/Script/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateRequestScript, updateResponseScript } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
@@ -13,6 +13,7 @@ const Script = ({ item, collection }) => {
   const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
 
   const { storedTheme } = useTheme();
+  const preferences = useSelector((state) => state.app.preferences);
 
   const onRequestScriptEdit = (value) => {
     dispatch(
@@ -45,6 +46,7 @@ const Script = ({ item, collection }) => {
           collection={collection}
           value={requestScript || ''}
           theme={storedTheme}
+          font={get(preferences, 'font.codeFont', 'default')}
           onEdit={onRequestScriptEdit}
           mode="javascript"
           onRun={onRun}
@@ -57,6 +59,7 @@ const Script = ({ item, collection }) => {
           collection={collection}
           value={responseScript || ''}
           theme={storedTheme}
+          font={get(preferences, 'font.codeFont', 'default')}
           onEdit={onResponseScriptEdit}
           mode="javascript"
           onRun={onRun}

packages/bruno-app/src/components/RequestPane/Tests/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateRequestTests } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
@@ -12,6 +12,7 @@ const Tests = ({ item, collection }) => {
   const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');
 
   const { storedTheme } = useTheme();
+  const preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
     dispatch(
@@ -32,6 +33,7 @@ const Tests = ({ item, collection }) => {
         collection={collection}
         value={tests || ''}
         theme={storedTheme}
+        font={get(preferences, 'font.codeFont', 'default')}
         onEdit={onEdit}
         mode="javascript"
         onRun={onRun}

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

@@ -1,7 +1,8 @@
 import React from 'react';
+import get from 'lodash/get';
 import CodeEditor from 'components/CodeEditor';
 import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import classnames from 'classnames';
 import { getContentType, safeStringifyJSON, safeParseXML } from 'utils/common';
@@ -13,6 +14,7 @@ import { useMemo } from 'react';
 
 const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers, error }) => {
   const { storedTheme } = useTheme();
+  const preferences = useSelector((state) => state.app.preferences);
   const [tab, setTab] = useState('preview');
   const dispatch = useDispatch();
   const contentType = getContentType(headers);
@@ -111,7 +113,17 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
       return <img src={item.requestSent.url} alt="image" />;
     }
 
-    return <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value} mode={mode} readOnly />;
+    return (
+      <CodeEditor
+        collection={collection}
+        font={get(preferences, 'font.codeFont', 'default')}
+        theme={storedTheme}
+        onRun={onRun}
+        value={value}
+        mode={mode}
+        readOnly
+      />
+    );
   }, [tab, collection, storedTheme, onRun, value, mode]);
 
   return (

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

@@ -1,10 +1,13 @@
 import CodeEditor from 'components/CodeEditor/index';
+import get from 'lodash/get';
 import { HTTPSnippet } from 'httpsnippet';
 import { useTheme } from 'providers/Theme/index';
 import { buildHarRequest } from 'utils/codegenerator/har';
+import { useSelector } from 'react-redux';
 
 const CodeView = ({ language, item }) => {
   const { storedTheme } = useTheme();
+  const preferences = useSelector((state) => state.app.preferences);
   const { target, client, language: lang } = language;
   let snippet = '';
 
@@ -15,7 +18,15 @@ const CodeView = ({ language, item }) => {
     snippet = 'Error generating code snippet';
   }
 
-  return <CodeEditor readOnly value={snippet} theme={storedTheme} mode={lang} />;
+  return (
+    <CodeEditor
+      readOnly
+      value={snippet}
+      font={get(preferences, 'font.codeFont', 'default')}
+      theme={storedTheme}
+      mode={lang}
+    />
+  );
 };
 
 export default CodeView;