From bd61e453eeba2155647bf7abe9757a43398d601f Mon Sep 17 00:00:00 2001
From: lohit <lohit.jiddimani@gmail.com>
Date: Mon, 1 Jul 2024 19:25:55 +0530
Subject: [PATCH] fix/variables highlighting (#2502)

* js highlighting fix, only highlight path params pattern in url bar

* path param pattern matching validation update

* path param tooltip validation update
---
 .../components/RequestPane/QueryUrl/index.js  |  1 +
 .../src/components/SingleLineEditor/index.js  |  4 ++--
 .../src/utils/codemirror/brunoVarInfo.js      |  4 ++--
 .../bruno-app/src/utils/common/codemirror.js  | 24 +++++++++++--------
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
index 88fe4ee01..03b60d1d7 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
@@ -69,6 +69,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           onChange={(newValue) => onUrlChange(newValue)}
           onRun={handleRun}
           collection={collection}
+          highlightPathParams={true}
           item={item}
         />
         <div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
diff --git a/packages/bruno-app/src/components/SingleLineEditor/index.js b/packages/bruno-app/src/components/SingleLineEditor/index.js
index 3b901fc25..dbb46191b 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/index.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/index.js
@@ -131,8 +131,8 @@ class SingleLineEditor extends Component {
 
   addOverlay = (variables) => {
     this.variables = variables;
-    defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
-    this.editor.setOption('mode', 'combinedmode');
+    defineCodeMirrorBrunoVariablesMode(variables, 'text/plain', this.props.highlightPathParams);
+    this.editor.setOption('mode', 'brunovariables');
   };
 
   render() {
diff --git a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
index 1632aa43a..eb6a0cc7a 100644
--- a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
+++ b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
@@ -31,8 +31,8 @@ if (!SERVER_RENDERED) {
     if (str.startsWith('{{')) {
       variableName = str.replace('{{', '').replace('}}', '').trim();
       variableValue = interpolate(get(options.variables, variableName), options.variables);
-    } else if (str.startsWith(':')) {
-      variableName = str.replace(':', '').trim();
+    } else if (str.startsWith('/:')) {
+      variableName = str.replace('/:', '').trim();
       variableValue =
         options.variables && options.variables.pathParams ? options.variables.pathParams[variableName] : undefined;
     }
diff --git a/packages/bruno-app/src/utils/common/codemirror.js b/packages/bruno-app/src/utils/common/codemirror.js
index ecd197428..f4013a366 100644
--- a/packages/bruno-app/src/utils/common/codemirror.js
+++ b/packages/bruno-app/src/utils/common/codemirror.js
@@ -12,8 +12,9 @@ const pathFoundInVariables = (path, obj) => {
   return value !== undefined;
 };
 
-export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => {
-  CodeMirror.defineMode('combinedmode', function (config, parserConfig) {
+export const defineCodeMirrorBrunoVariablesMode = (_variables, mode, highlightPathParams) => {
+  CodeMirror.defineMode('brunovariables', function (config, parserConfig) {
+    const { pathParams = {}, ...variables } = _variables || {};
     const variablesOverlay = {
       token: function (stream) {
         if (stream.match('{{', true)) {
@@ -37,13 +38,13 @@ export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => {
 
     const urlPathParamsOverlay = {
       token: function (stream) {
-        if (stream.match(':', true)) {
+        if (stream.match('/:', true)) {
           let ch;
           let word = '';
           while ((ch = stream.next()) != null) {
             if (ch === '/' || ch === '?' || ch === '&' || ch === '=') {
               stream.backUp(1);
-              const found = pathFoundInVariables(word, variables?.pathParams);
+              const found = pathFoundInVariables(word, pathParams);
               const status = found ? 'valid' : 'invalid';
               const randomClass = `random-${(Math.random() + 1).toString(36).substring(9)}`;
               return `variable-${status} ${randomClass}`;
@@ -53,21 +54,24 @@ export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => {
 
           // If we've consumed all characters and the word is not empty, it might be a path parameter at the end of the URL.
           if (word) {
-            const found = pathFoundInVariables(word, variables?.pathParams);
+            const found = pathFoundInVariables(word, pathParams);
             const status = found ? 'valid' : 'invalid';
             const randomClass = `random-${(Math.random() + 1).toString(36).substring(9)}`;
             return `variable-${status} ${randomClass}`;
           }
         }
-        stream.skipTo(':') || stream.skipToEnd();
+        stream.skipTo('/:') || stream.skipToEnd();
         return null;
       }
     };
 
-    return CodeMirror.overlayMode(
-      CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || mode), variablesOverlay),
-      urlPathParamsOverlay
-    );
+    let baseMode = CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || mode), variablesOverlay);
+
+    if (highlightPathParams) {
+      return CodeMirror.overlayMode(baseMode, urlPathParamsOverlay);
+    } else {
+      return baseMode;
+    }
   });
 };