Refactor and enhance mock data and variable interpolation

feat: add mock data generation functions using faker.js

refactor: remove interpolateRandom function and integrate random value interpolation into interpolateVars

feat: add randomIPv4 function and fix randomCreditCardMask implementation

refactor: simplify variable interpolation by integrating mock variable handling

refactor: interpolation logic.

feat: add mock variable suggestions

fixed formatting

refactored code to reduce duplications

Refactor mock variable handling by replacing mockVarsNames with mockDataFunctions and removing unused files

Remove @faker-js/faker dependency from bruno-electron/package.json

Author: sanjai0py

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

@@ -14,9 +14,12 @@ import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
 
+import { mockDataFunctions } from '@usebruno/common';
+
 let CodeMirror;
 const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 const TAB_SIZE = 2;
+const MOCK_FUNCTION_SUGGESTIONS = Object.keys(mockDataFunctions).map(key => `$${key}`);
 
 if (!SERVER_RENDERED) {
   CodeMirror = require('codemirror');
@@ -87,7 +90,8 @@ if (!SERVER_RENDERED) {
     'bru.runner.skipRequest()',
     'bru.runner.stopExecution()'
   ];
-  CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
+  
+  CodeMirror.registerHelper('hint', 'brunoJS', (editor, _options) => {
     const cursor = editor.getCursor();
     const currentLine = editor.getLine(cursor.line);
     let startBru = cursor.ch;
@@ -114,6 +118,7 @@ if (!SERVER_RENDERED) {
     }
     return result;
   });
+
   CodeMirror.commands.autocomplete = (cm, hint, options) => {
     cm.showHint({ hint, ...options });
   };
@@ -280,6 +285,7 @@ export default class CodeEditor extends React.Component {
       editor.on('change', this._onEdit);
       this.addOverlay();
     }
+    
     if (this.props.mode == 'javascript') {
       editor.on('keyup', function (cm, event) {
         const cursor = editor.getCursor();
@@ -300,6 +306,40 @@ export default class CodeEditor extends React.Component {
         }
       });
     }
+
+    const getHints = (cm) => {
+      const cursor = cm.getCursor();
+      const currentString = cm.getRange({ line: cursor.line, ch: 0 }, cursor);
+    
+      const match = currentString.match(/\{\{\$(\w*)$/);
+      if (!match) return null;
+        
+      const wordMatch = match[1];
+      if (!wordMatch) return null;
+    
+      const suggestions = MOCK_FUNCTION_SUGGESTIONS.filter(name => name.startsWith(`$${wordMatch}`));
+      if (!suggestions.length) return null;
+    
+      const startPos = { line: cursor.line, ch: currentString.lastIndexOf('{{$') + 2 }; // +2 accounts for `{{
+    
+      return {
+        list: suggestions,
+        from: startPos,
+        to: cm.getCursor(),
+      };
+    };
+
+    editor.on('inputRead', function (cm, event) {
+      const hints = getHints(cm);
+      if (!hints) {
+        return;
+      }
+        
+      cm.showHint({
+        hint: () => hints,
+        completeSingle: false,
+      });
+    });
   }
 
   componentDidUpdate(prevProps) {

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

@@ -5,8 +5,11 @@ import { defineCodeMirrorBrunoVariablesMode, MaskedEditor } from 'utils/common/c
 import StyledWrapper from './StyledWrapper';
 import { IconEye, IconEyeOff } from '@tabler/icons';
 
+import { mockDataFunctions } from '@usebruno/common';
+
 let CodeMirror;
 const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+const MOCK_FUNCTION_SUGGESTIONS = Object.keys(mockDataFunctions).map(key => `$${key}`);
 
 if (!SERVER_RENDERED) {
   CodeMirror = require('codemirror');
@@ -26,6 +29,7 @@ class SingleLineEditor extends Component {
       maskInput: props.isSecret || false // Always mask the input by default (if it's a secret)
     };
   }
+
   componentDidMount() {
     // Initialize CodeMirror as a single line editor
     /** @type {import("codemirror").Editor} */
@@ -75,6 +79,7 @@ class SingleLineEditor extends Component {
         'Shift-Tab': false
       }
     });
+
     if (this.props.autocomplete) {
       this.editor.on('keyup', (cm, event) => {
         if (!cm.state.completionActive /*Enables keyboard navigation in autocomplete list*/ && event.key !== 'Enter') {
@@ -83,6 +88,41 @@ class SingleLineEditor extends Component {
         }
       });
     }
+
+    const getHints = (cm) => {
+      const cursor = cm.getCursor();
+      const currentString = cm.getRange({ line: cursor.line, ch: 0 }, cursor);
+
+      const match = currentString.match(/\{\{\$(\w*)$/);
+      if (!match) return null;
+
+      const wordMatch = match[1];
+      if (!wordMatch) return null;
+
+      const suggestions = MOCK_FUNCTION_SUGGESTIONS.filter(name => name.startsWith(`$${wordMatch}`));
+      if (!suggestions.length) return null;
+
+      const startPos = { line: cursor.line, ch: currentString.lastIndexOf('{{$') + 2 }; // +2 accounts for `{{`
+
+      return {
+        list: suggestions,
+        from: startPos,
+        to: cm.getCursor(),
+      };
+    };
+
+    this.editor.on('inputRead', function (cm, event) {
+      const hints = getHints(cm);
+      if (!hints) {
+        return;
+      }
+
+      cm.showHint({
+        hint: () => hints,
+        completeSingle: false,
+      });
+    });
+
     this.editor.setValue(String(this.props.value) || '');
     this.editor.on('change', this._onEdit);
     this.addOverlay(variables);
@@ -94,7 +134,6 @@ class SingleLineEditor extends Component {
   _enableMaskedEditor = (enabled) => {
     if (typeof enabled !== 'boolean') return;
 
-    console.log('Enabling masked editor: ' + enabled);
     if (enabled == true) {
       if (!this.maskedEditor) this.maskedEditor = new MaskedEditor(this.editor, '*');
       this.maskedEditor.enable();

packages/bruno-common/src/index.ts

@@ -1 +1,4 @@
+import { mockDataFunctions } from './utils/faker-functions';
+
+export { mockDataFunctions };
 export { default as interpolate } from './interpolate';

packages/bruno-electron/package.json

@@ -26,7 +26,6 @@
   },
   "dependencies": {
     "@aws-sdk/credential-providers": "3.750.0",
-    "@faker-js/faker": "^9.5.1",
     "@usebruno/common": "0.1.0",
     "@usebruno/converters": "^0.1.0",
     "@usebruno/js": "0.12.0",
@@ -63,7 +62,6 @@
     "socks-proxy-agent": "^8.0.2",
     "tough-cookie": "^4.1.3",
     "uuid": "^9.0.0",
-    "@faker-js/faker": "^9.5.0",
     "yup": "^0.32.11"
   },
   "optionalDependencies": {

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

@@ -370,9 +370,6 @@ const registerNetworkIpc = (mainWindow) => {
       collection.globalEnvironmentVariables = scriptResult.globalEnvironmentVariables;
     }
 
-    // interpolate random/dynamic values inside request
-    interpolateRandom(request);
-
     // interpolate variables inside request
     interpolateVars(request, envVars, runtimeVariables, processEnvVars);