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:
lohit 2024-07-01 19:25:55 +05:30 committed by GitHub
parent 02e23df349
commit bd61e453ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 19 additions and 14 deletions

View File

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

View File

@ -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() {

View File

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

View File

@ -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;
}
}); });
}; };