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
usebruno · Jul 1, 2024 · bd61e45 · bd61e45
1 parent 02e23df
commit bd61e45
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+ }
  });
 };