Merge branch 'main' into feat/cli-improvements

.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

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

@@ -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

@@ -26,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 {
@@ -82,6 +88,14 @@ const StyledWrapper = styled.div`
   .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) {
@@ -58,13 +58,14 @@ if (!SERVER_RENDERED) {
     'req.getExecutionMode()',
     'bru',
     'bru.cwd()',
-    'bru.getEnvName(key)',
+    'bru.getEnvName()',
     'bru.getProcessEnv(key)',
     'bru.hasEnvVar(key)',
     'bru.getEnvVar(key)',
     'bru.getFolderVar(key)',
     'bru.getCollectionVar(key)',
     'bru.setEnvVar(key,value)',
+    'bru.deleteEnvVar(key)',
     'bru.hasVar(key)',
     'bru.getVar(key)',
     'bru.setVar(key,value)',
@@ -189,32 +190,8 @@ export default class CodeEditor extends React.Component {
         'Cmd-Y': 'foldAll',
         'Ctrl-I': 'unfoldAll',
         'Cmd-I': 'unfoldAll',
-        'Cmd-/': (cm) => {
-          // comment/uncomment every selected line(s)
-          const selections = cm.listSelections();
-          selections.forEach((range) => {
-            for (let i = range.from().line; i <= range.to().line; i++) {
-              const selectedLine = cm.getLine(i);
-              // if commented line, remove comment
-              if (selectedLine.trim().startsWith('//')) {
-                cm.replaceRange(
-                  selectedLine.replace(/^(\s*)\/\/\s?/, '$1'),
-                  { line: i, ch: 0 },
-                  { line: i, ch: selectedLine.length }
-                );
-                continue;
-              }
-              // otherwise add comment
-              cm.replaceRange(
-                selectedLine.search(/\S|$/) >= TAB_SIZE
-                  ? ' '.repeat(TAB_SIZE) + '// ' + selectedLine.trim()
-                  : '// ' + selectedLine,
-                { line: i, ch: 0 },
-                { line: i, ch: selectedLine.length }
-              );
-            }
-          });
-        }
+        'Ctrl-/': 'toggleComment',
+        'Cmd-/': 'toggleComment'
       },
       foldOptions: {
         widget: (from, to) => {
@@ -281,9 +258,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)

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/QueryEditor/StyledWrapper.js

@@ -54,6 +54,14 @@ const StyledWrapper = styled.div`
   .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/RequestPane/QueryEditor/index.js

@@ -19,7 +19,7 @@ import { IconWand } from '@tabler/icons';
 import onHasCompletion from './onHasCompletion';
 
 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/ResponsePane/QueryResult/QueryResultPreview/index.js

@@ -1,14 +1,41 @@
+import React, { useState, useEffect } from 'react';
 import CodeEditor from 'components/CodeEditor/index';
 import { get } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { Document, Page } from 'react-pdf';
-import { useState } from 'react';
 import 'pdfjs-dist/build/pdf.worker';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 import { GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';
 GlobalWorkerOptions.workerSrc = 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
+import ReactPlayer from 'react-player';
+
+const VideoPreview = React.memo(({ contentType, dataBuffer }) => {
+  const [videoUrl, setVideoUrl] = useState(null);
+
+  useEffect(() => {
+    const videoType = contentType.split(';')[0];
+    const byteArray = Buffer.from(dataBuffer, 'base64');
+    const blob = new Blob([byteArray], { type: videoType });
+    const url = URL.createObjectURL(blob);
+    setVideoUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [contentType, dataBuffer]);
+
+  if (!videoUrl) return <div>Loading video...</div>;
+
+  return (
+    <ReactPlayer
+      url={videoUrl}
+      controls
+      muted={true}
+      width="100%"
+      height="100%"
+      onError={(e) => console.error('Error loading video:', e)}
+    />
+  );
+});
 
 const QueryResultPreview = ({
   previewTab,
@@ -73,9 +100,7 @@ const QueryResultPreview = ({
       );
     }
     case 'preview-video': {
-      return (
-        <video controls src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} className="mx-auto" />
-      );
+      return <VideoPreview contentType={contentType} dataBuffer={dataBuffer} />;
     }
     default:
     case 'raw': {

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

@@ -8,7 +8,7 @@ import StyledWrapper from './StyledWrapper';
 import { useTheme } from 'providers/Theme/index';
 
 let posthogClient = null;
-const posthogApiKey = 'phc_7gtqSrrdZRohiozPMLIacjzgHbUlhalW1Bu16uYijMR';
+const posthogApiKey = process.env.NEXT_PUBLIC_POSTHOG_API_KEY;
 const getPosthogClient = () => {
   if (posthogClient) {
     return posthogClient;

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

@@ -39,6 +39,14 @@ const StyledWrapper = styled.div`
   textarea.curl-command {
     min-height: 150px;
   }
+
+  .dropdown {
+    width: fit-content;
+  
+   .dropdown-item {
+    padding: 0.2rem 0.6rem !important;
+    }
+  }
 `;
 
 export default StyledWrapper;