mirror of
https://github.com/usebruno/bruno.git
synced 2025-06-20 19:58:10 +02:00
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
This commit is contained in:
parent
02e23df349
commit
bd61e453ee
@ -69,6 +69,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
|
|||||||
onChange={(newValue) => onUrlChange(newValue)}
|
onChange={(newValue) => onUrlChange(newValue)}
|
||||||
onRun={handleRun}
|
onRun={handleRun}
|
||||||
collection={collection}
|
collection={collection}
|
||||||
|
highlightPathParams={true}
|
||||||
item={item}
|
item={item}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
|
<div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
|
||||||
|
@ -131,8 +131,8 @@ class SingleLineEditor extends Component {
|
|||||||
|
|
||||||
addOverlay = (variables) => {
|
addOverlay = (variables) => {
|
||||||
this.variables = variables;
|
this.variables = variables;
|
||||||
defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
|
defineCodeMirrorBrunoVariablesMode(variables, 'text/plain', this.props.highlightPathParams);
|
||||||
this.editor.setOption('mode', 'combinedmode');
|
this.editor.setOption('mode', 'brunovariables');
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -31,8 +31,8 @@ if (!SERVER_RENDERED) {
|
|||||||
if (str.startsWith('{{')) {
|
if (str.startsWith('{{')) {
|
||||||
variableName = str.replace('{{', '').replace('}}', '').trim();
|
variableName = str.replace('{{', '').replace('}}', '').trim();
|
||||||
variableValue = interpolate(get(options.variables, variableName), options.variables);
|
variableValue = interpolate(get(options.variables, variableName), options.variables);
|
||||||
} else if (str.startsWith(':')) {
|
} else if (str.startsWith('/:')) {
|
||||||
variableName = str.replace(':', '').trim();
|
variableName = str.replace('/:', '').trim();
|
||||||
variableValue =
|
variableValue =
|
||||||
options.variables && options.variables.pathParams ? options.variables.pathParams[variableName] : undefined;
|
options.variables && options.variables.pathParams ? options.variables.pathParams[variableName] : undefined;
|
||||||
}
|
}
|
||||||
|
@ -12,8 +12,9 @@ const pathFoundInVariables = (path, obj) => {
|
|||||||
return value !== undefined;
|
return value !== undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => {
|
export const defineCodeMirrorBrunoVariablesMode = (_variables, mode, highlightPathParams) => {
|
||||||
CodeMirror.defineMode('combinedmode', function (config, parserConfig) {
|
CodeMirror.defineMode('brunovariables', function (config, parserConfig) {
|
||||||
|
const { pathParams = {}, ...variables } = _variables || {};
|
||||||
const variablesOverlay = {
|
const variablesOverlay = {
|
||||||
token: function (stream) {
|
token: function (stream) {
|
||||||
if (stream.match('{{', true)) {
|
if (stream.match('{{', true)) {
|
||||||
@ -37,13 +38,13 @@ export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => {
|
|||||||
|
|
||||||
const urlPathParamsOverlay = {
|
const urlPathParamsOverlay = {
|
||||||
token: function (stream) {
|
token: function (stream) {
|
||||||
if (stream.match(':', true)) {
|
if (stream.match('/:', true)) {
|
||||||
let ch;
|
let ch;
|
||||||
let word = '';
|
let word = '';
|
||||||
while ((ch = stream.next()) != null) {
|
while ((ch = stream.next()) != null) {
|
||||||
if (ch === '/' || ch === '?' || ch === '&' || ch === '=') {
|
if (ch === '/' || ch === '?' || ch === '&' || ch === '=') {
|
||||||
stream.backUp(1);
|
stream.backUp(1);
|
||||||
const found = pathFoundInVariables(word, variables?.pathParams);
|
const found = pathFoundInVariables(word, pathParams);
|
||||||
const status = found ? 'valid' : 'invalid';
|
const status = found ? 'valid' : 'invalid';
|
||||||
const randomClass = `random-${(Math.random() + 1).toString(36).substring(9)}`;
|
const randomClass = `random-${(Math.random() + 1).toString(36).substring(9)}`;
|
||||||
return `variable-${status} ${randomClass}`;
|
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 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) {
|
if (word) {
|
||||||
const found = pathFoundInVariables(word, variables?.pathParams);
|
const found = pathFoundInVariables(word, pathParams);
|
||||||
const status = found ? 'valid' : 'invalid';
|
const status = found ? 'valid' : 'invalid';
|
||||||
const randomClass = `random-${(Math.random() + 1).toString(36).substring(9)}`;
|
const randomClass = `random-${(Math.random() + 1).toString(36).substring(9)}`;
|
||||||
return `variable-${status} ${randomClass}`;
|
return `variable-${status} ${randomClass}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
stream.skipTo(':') || stream.skipToEnd();
|
stream.skipTo('/:') || stream.skipToEnd();
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return CodeMirror.overlayMode(
|
let baseMode = CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || mode), variablesOverlay);
|
||||||
CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || mode), variablesOverlay),
|
|
||||||
urlPathParamsOverlay
|
if (highlightPathParams) {
|
||||||
);
|
return CodeMirror.overlayMode(baseMode, urlPathParamsOverlay);
|
||||||
|
} else {
|
||||||
|
return baseMode;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user