Merge branch 'main' into fix/add-missing-translations

.github/workflows/npm-bru-cli.yml

@@ -2,11 +2,6 @@ name: Bru CLI Tests (npm)
 
 on:
   workflow_dispatch:
-    inputs:
-      build:
-        description: 'Test Bru CLI (npm)'
-        required: true
-        default: 'true'
 
 # Assign permissions for unit tests to be reported.
 # See https://github.com/dorny/test-reporter/issues/168

.github/workflows/tests.yml

@@ -5,6 +5,9 @@ on:
   pull_request:
     branches: [main]
 
+permissions:
+  contents: read
+
 jobs:
   unit-test:
     name: Unit Tests

.nvmrc

@@ -1 +1 @@
-v20.9.0
+v22.11.0

contributing.md

@@ -48,7 +48,7 @@ Bruno is being developed as a desktop app. You need to load the app by running t
 ### Local Development
 
 ```bash
-# use nodejs 18 version
+# use nodejs 20 version
 nvm use
 
 # install deps

packages/bruno-app/.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 # next.js
 .next/
 out/
+
+.env

packages/bruno-app/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  rootDir: '.',
+  moduleNameMapper: {
+    '^assets/(.*)$': '<rootDir>/src/assets/$1',
+    '^components/(.*)$': '<rootDir>/src/components/$1',
+    '^hooks/(.*)$': '<rootDir>/src/hooks/$1',
+    '^themes/(.*)$': '<rootDir>/src/themes/$1',
+    '^api/(.*)$': '<rootDir>/src/api/$1',
+    '^pageComponents/(.*)$': '<rootDir>/src/pageComponents/$1',
+    '^providers/(.*)$': '<rootDir>/src/providers/$1',
+    '^utils/(.*)$': '<rootDir>/src/utils/$1'
+  },
+  clearMocks: true,
+  moduleDirectories: ['node_modules', 'src'],
+  testEnvironment: 'node'
+};

packages/bruno-app/package.json

@@ -42,14 +42,14 @@
     "jshint": "^2.13.6",
     "json5": "^2.2.3",
     "jsonc-parser": "^3.2.1",
-    "jsonpath-plus": "10.0.0",
+    "jsonpath-plus": "10.1.0",
     "know-your-http-well": "^0.5.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "markdown-it-replace-link": "^1.2.0",
     "mousetrap": "^1.6.5",
     "nanoid": "3.3.4",
-    "next": "14.2.15",
+    "next": "14.2.16",
     "path": "^0.12.7",
     "pdfjs-dist": "4.4.168",
     "platform": "^1.3.6",
@@ -66,6 +66,7 @@
     "react-i18next": "^15.0.1",
     "react-inspector": "^6.0.2",
     "react-pdf": "9.1.1",
+    "react-player": "^2.16.0",
     "react-redux": "^7.2.6",
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",

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

@@ -14,6 +14,9 @@ const StyledWrapper = styled.div`
   .CodeMirror-foldmarker {
     text-shadow: none;
     color: ${(props) => props.theme.textLink};
+    background: none;
+    padding: 0;
+    margin: 0;
   }
 
   .CodeMirror-overlayscroll-horizontal div,
@@ -23,6 +26,12 @@ const StyledWrapper = styled.div`
 
   .CodeMirror-dialog {
     overflow: visible;
+    input {
+      background: transparent;
+      border: 1px solid #d3d6db;
+      outline: none;
+      border-radius: 0px;
+    }
   }
 
   #search-results-count {
@@ -75,6 +84,18 @@ const StyledWrapper = styled.div`
   .cm-variable-invalid {
     color: red;
   }
+
+  .CodeMirror-search-hint {
+    display: inline;
+  }
+
+  .cm-s-default span.cm-property {
+    color: #1f61a0 !important;
+  }
+
+  .cm-s-default span.cm-variable {
+    color: #397d13 !important;
+  }
 `;
 
 export default StyledWrapper;

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

@@ -15,7 +15,7 @@ import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 
 let CodeMirror;
-const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 const TAB_SIZE = 2;
 
 if (!SERVER_RENDERED) {
@@ -65,6 +65,7 @@ if (!SERVER_RENDERED) {
     'bru.getFolderVar(key)',
     'bru.getCollectionVar(key)',
     'bru.setEnvVar(key,value)',
+    'bru.deleteEnvVar(key)',
     'bru.hasVar(key)',
     'bru.getVar(key)',
     'bru.setVar(key,value)',
@@ -281,9 +282,9 @@ export default class CodeEditor extends React.Component {
         while (end < currentLine.length && /[^{}();\s\[\]\,]/.test(currentLine.charAt(end))) ++end;
         while (start && /[^{}();\s\[\]\,]/.test(currentLine.charAt(start - 1))) --start;
         let curWord = start != end && currentLine.slice(start, end);
-        //Qualify if autocomplete will be shown
+        // Qualify if autocomplete will be shown
         if (
-          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|\s)\w*/.test(event.key) &&
+          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Meta|Alt|Home|End\s)\w*/.test(event.key) &&
           curWord.length > 0 &&
           !/\/\/|\/\*|.*{{|`[^$]*{|`[^{]*$/.test(currentLine.slice(0, end)) &&
           /(?<!\d)[a-zA-Z\._]$/.test(curWord)
@@ -339,7 +340,7 @@ export default class CodeEditor extends React.Component {
     }
     return (
       <StyledWrapper
-        className="h-full w-full flex flex-col relative"
+        className="h-full w-full flex flex-col relative graphiql-container"
         aria-label="Code Editor"
         font={this.props.font}
         fontSize={this.props.fontSize}

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

@@ -17,6 +17,15 @@ import Presets from './Presets';
 import Info from './Info';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
+import DotIcon from 'components/Icons/Dot';
+
+const ContentIndicator = () => {
+  return (
+    <sup className="ml-[.125rem] opacity-80 font-medium">
+      <DotIcon width="10"></DotIcon>
+    </sup>
+  );
+};
 
 const CollectionSettings = ({ collection }) => {
   const dispatch = useDispatch();
@@ -30,10 +39,23 @@ const CollectionSettings = ({ collection }) => {
     );
   };
 
-  const proxyConfig = get(collection, 'brunoConfig.proxy', {});
+  const root = collection?.root;
+  const hasScripts = root?.request?.script?.res || root?.request?.script?.req;
+  const hasTests = root?.request?.tests;
+  const hasDocs = root?.docs;
 
+  const headers = get(collection, 'root.request.headers', []);
+  const activeHeadersCount = headers.filter((header) => header.enabled).length;
+
+  const requestVars = get(collection, 'root.request.vars.req', []);
+  const responseVars = get(collection, 'root.request.vars.res', []);
+  const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
+  const auth = get(collection, 'root.request.auth', {}).mode;
+
+  const proxyConfig = get(collection, 'brunoConfig.proxy', {});
   const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
 
+
   const onProxySettingsUpdate = (config) => {
     const brunoConfig = cloneDeep(collection.brunoConfig);
     brunoConfig.proxy = config;
@@ -126,30 +148,38 @@ const CollectionSettings = ({ collection }) => {
       <div className="flex flex-wrap items-center tabs" role="tablist">
         <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
           Headers
+          {activeHeadersCount > 0 && <sup className="ml-1 font-medium">{activeHeadersCount}</sup>}
         </div>
         <div className={getTabClassname('vars')} role="tab" onClick={() => setTab('vars')}>
           Vars
+          {activeVarsCount > 0 && <sup className="ml-1 font-medium">{activeVarsCount}</sup>}
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
+          {auth !== 'none' && <ContentIndicator />}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
           Script
+          {hasScripts && <ContentIndicator />}
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
           Tests
+          {hasTests && <ContentIndicator />}
         </div>
         <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
           Presets
         </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
+          {Object.keys(proxyConfig).length > 0  && <ContentIndicator />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates
+          {clientCertConfig.length > 0 && <ContentIndicator />}
         </div>
         <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
           Docs
+          {hasDocs && <ContentIndicator />}
         </div>
         <div className={getTabClassname('info')} role="tab" onClick={() => setTab('info')}>
           Info

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

@@ -7,6 +7,15 @@ import Script from './Script';
 import Tests from './Tests';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars';
+import DotIcon from 'components/Icons/Dot';
+
+const ContentIndicator = () => {
+  return (
+    <sup className="ml-[.125rem] opacity-80 font-medium">
+      <DotIcon width="10"></DotIcon>
+    </sup>
+  );
+};
 
 const FolderSettings = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -16,6 +25,17 @@ const FolderSettings = ({ collection, folder }) => {
     tab = folderLevelSettingsSelectedTab[folder?.uid];
   }
 
+  const folderRoot = collection?.items.find((item) => item.uid === folder?.uid)?.root;
+  const hasScripts = folderRoot?.request?.script?.res || folderRoot?.request?.script?.req;
+  const hasTests = folderRoot?.request?.tests;
+
+  const headers = folderRoot?.request?.headers || [];
+  const activeHeadersCount = headers.filter((header) => header.enabled).length;
+
+  const requestVars = folderRoot?.request?.vars?.req || [];
+  const responseVars = folderRoot?.request?.vars?.res || [];
+  const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
+
   const setTab = (tab) => {
     dispatch(
       updatedFolderSettingsSelectedTab({
@@ -55,15 +75,19 @@ const FolderSettings = ({ collection, folder }) => {
         <div className="flex flex-wrap items-center tabs" role="tablist">
           <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
             Headers
+            {activeHeadersCount > 0 && <sup className="ml-1 font-medium">{activeHeadersCount}</sup>}
           </div>
           <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
             Script
+            {hasScripts && <ContentIndicator />}
           </div>
           <div className={getTabClassname('test')} role="tab" onClick={() => setTab('test')}>
             Test
+            {hasTests && <ContentIndicator />}
           </div>
           <div className={getTabClassname('vars')} role="tab" onClick={() => setTab('vars')}>
             Vars
+            {activeVarsCount > 0 && <sup className="ml-1 font-medium">{activeVarsCount}</sup>}
           </div>
         </div>
         <section className={`flex mt-4 h-full`}>{getTabPanel(tab)}</section>

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

@@ -7,6 +7,7 @@ import StyledWrapper from './StyledWrapper';
 import ConfirmSwitchEnv from './ConfirmSwitchEnv';
 import ManageSecrets from 'components/Environments/EnvironmentSettings/ManageSecrets/index';
 import ImportEnvironment from '../ImportEnvironment';
+import { isEqual } from 'lodash';
 
 const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified }) => {
   const [openCreateModal, setOpenCreateModal] = useState(false);
@@ -26,7 +27,18 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
       return;
     }
 
+    if (selectedEnvironment) {
+      const _selectedEnvironment = environments?.find(env => env?.uid === selectedEnvironment?.uid);
+      const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
+      if (hasSelectedEnvironmentChanged) {
+        setSelectedEnvironment(_selectedEnvironment);
+      }
+      setOriginalEnvironmentVariables(selectedEnvironment.variables);
+      return;
+    }
+
     const environment = environments?.find(env => env.uid === activeEnvironmentUid) || environments?.[0];
+
     setSelectedEnvironment(environment);
     setOriginalEnvironmentVariables(environment?.variables || []);
   }, [environments, activeEnvironmentUid]);

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

@@ -5,7 +5,7 @@ import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import StyledWrapper from './StyledWrapper';
 
 let CodeMirror;
-const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 
 if (!SERVER_RENDERED) {
   CodeMirror = require('codemirror');

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

@@ -17,9 +17,11 @@ import { find, get } from 'lodash';
 import Documentation from 'components/Documentation/index';
 
 const ContentIndicator = () => {
-  return <sup className="ml-[.125rem] opacity-80 font-medium">
-    <DotIcon width="10"></DotIcon>
-  </sup>
+  return (
+    <sup className="ml-[.125rem] opacity-80 font-medium">
+      <DotIcon width="10"></DotIcon>
+    </sup>
+  );
 };
 
 const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
@@ -100,6 +102,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
   const docs = getPropertyFromDraftOrRequest('request.docs');
   const requestVars = getPropertyFromDraftOrRequest('request.vars.req');
   const responseVars = getPropertyFromDraftOrRequest('request.vars.res');
+  const auth = getPropertyFromDraftOrRequest('request.auth');
 
   const activeParamsLength = params.filter((param) => param.enabled).length;
   const activeHeadersLength = headers.filter((header) => header.enabled).length;
@@ -125,6 +128,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
           Auth
+          {auth.mode !== 'none' && <ContentIndicator />}
         </div>
         <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
           Vars

packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js

@@ -50,6 +50,18 @@ const StyledWrapper = styled.div`
   .cm-variable-invalid {
     color: red;
   }
+
+  .CodeMirror-search-hint {
+    display: inline;
+  }
+
+  .cm-s-default span.cm-property {
+    color: #1f61a0 !important;
+  }
+
+  .cm-s-default span.cm-variable {
+    color: #397d13 !important;
+  }
 `;
 
 export default StyledWrapper;