feat/request variables highlight (#2621)

* pr review changes

* collection root object in export json

* import environment updates

* tests run execution order fix for collection runs

* updated validations

* folder/request pre-vars green/red color highlight

* collection vars > request vars

* chore: removed unused logic

---------

Co-authored-by: Anoop M D <anoop.md1421@gmail.com>
This commit is contained in:
lohit 2024-07-15 17:18:29 +05:30 committed by GitHub
parent c2e6dee2da
commit 73214107c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 65 additions and 7 deletions

View File

@ -24,13 +24,15 @@ class MultiLineEditor extends Component {
componentDidMount() {
// Initialize CodeMirror as a single line editor
/** @type {import("codemirror").Editor} */
const variables = getAllVariables(this.props.collection, this.props.item);
this.editor = CodeMirror(this.editorRef.current, {
lineWrapping: false,
lineNumbers: false,
theme: this.props.theme === 'dark' ? 'monokai' : 'default',
mode: 'brunovariables',
brunoVarInfo: {
variables: getAllVariables(this.props.collection)
variables
},
scrollbarStyle: null,
tabindex: 0,
@ -85,7 +87,7 @@ class MultiLineEditor extends Component {
}
this.editor.setValue(String(this.props.value) || '');
this.editor.on('change', this._onEdit);
this.addOverlay();
this.addOverlay(variables);
}
_onEdit = () => {
@ -103,10 +105,10 @@ class MultiLineEditor extends Component {
// event loop.
this.ignoreChangeEvent = true;
let variables = getAllVariables(this.props.collection);
let variables = getAllVariables(this.props.collection, this.props.item);
if (!isEqual(variables, this.variables)) {
this.editor.options.brunoVarInfo.variables = variables;
this.addOverlay();
this.addOverlay(variables);
}
if (this.props.theme !== prevProps.theme && this.editor) {
this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
@ -125,10 +127,8 @@ class MultiLineEditor extends Component {
this.editor.getWrapperElement().remove();
}
addOverlay = () => {
let variables = getAllVariables(this.props.collection);
addOverlay = (variables) => {
this.variables = variables;
defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
this.editor.setOption('mode', 'brunovariables');
};

View File

@ -136,6 +136,7 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
onChange={(val) => handleAccessKeyIdChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
@ -148,6 +149,7 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
onChange={(val) => handleSecretAccessKeyChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
@ -160,6 +162,7 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
onChange={(val) => handleSessionTokenChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
@ -172,6 +175,7 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
onChange={(val) => handleServiceChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
@ -184,6 +188,7 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
onChange={(val) => handleRegionChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
@ -196,6 +201,7 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
onChange={(val) => handleProfileNameChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
</StyledWrapper>

View File

@ -55,6 +55,7 @@ const BasicAuth = ({ item, collection }) => {
onChange={(val) => handleUsernameChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
@ -67,6 +68,7 @@ const BasicAuth = ({ item, collection }) => {
onChange={(val) => handlePasswordChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
</StyledWrapper>

View File

@ -42,6 +42,7 @@ const BearerAuth = ({ item, collection }) => {
onChange={(val) => handleTokenChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
</StyledWrapper>

View File

@ -55,6 +55,7 @@ const DigestAuth = ({ item, collection }) => {
onChange={(val) => handleUsernameChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
@ -67,6 +68,7 @@ const DigestAuth = ({ item, collection }) => {
onChange={(val) => handlePasswordChange(val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
</StyledWrapper>

View File

@ -92,6 +92,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
onChange={(val) => handleChange(key, val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
</div>

View File

@ -55,6 +55,7 @@ const OAuth2ClientCredentials = ({ item, collection }) => {
onChange={(val) => handleChange(key, val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
</div>

View File

@ -57,6 +57,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
onChange={(val) => handleChange(key, val)}
onRun={handleRun}
collection={collection}
item={item}
/>
</div>
</div>

View File

@ -110,6 +110,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
allowNewlines={true}
onRun={handleRun}
collection={collection}
item={item}
/>
</td>
<td>

View File

@ -139,6 +139,7 @@ const MultipartFormParams = ({ item, collection }) => {
onRun={handleRun}
allowNewlines={true}
collection={collection}
item={item}
/>
)}
</td>

View File

@ -147,6 +147,7 @@ const QueryParams = ({ item, collection }) => {
}
onRun={handleRun}
collection={collection}
item={item}
/>
</td>
<td>
@ -214,6 +215,7 @@ const QueryParams = ({ item, collection }) => {
}
onRun={handleRun}
collection={collection}
item={item}
/>
</td>
</tr>

View File

@ -119,6 +119,7 @@ const RequestHeaders = ({ item, collection }) => {
autocomplete={MimeTypes}
allowNewlines={true}
collection={collection}
item={item}
/>
</td>
<td>

View File

@ -788,10 +788,16 @@ export const getTotalRequestCountInCollection = (collection) => {
export const getAllVariables = (collection, item) => {
const environmentVariables = getEnvironmentVariables(collection);
let requestVariables = {};
if (item?.request) {
const requestTreePath = getTreePathFromCollectionToItem(collection, item);
requestVariables = mergeFolderLevelVars(item?.request, requestTreePath);
}
const pathParams = getPathParams(item);
return {
...environmentVariables,
...requestVariables,
...collection.collectionVariables,
pathParams: {
...pathParams
@ -814,3 +820,36 @@ export const maskInputValue = (value) => {
.map(() => '*')
.join('');
};
const getTreePathFromCollectionToItem = (collection, _item) => {
let path = [];
let item = findItemInCollection(collection, _item?.uid);
while (item) {
path.unshift(item);
item = findParentItemInCollection(collection, item?.uid);
}
return path;
};
const mergeFolderLevelVars = (request, requestTreePath = []) => {
let requestVariables = {};
for (let i of requestTreePath) {
if (i.type === 'folder') {
let vars = get(i, 'root.request.vars.req', []);
vars.forEach((_var) => {
if (_var.enabled) {
requestVariables[_var.name] = _var.value;
}
});
} else {
let vars = get(i, 'request.vars.req', []);
vars.forEach((_var) => {
if (_var.enabled) {
requestVariables[_var.name] = _var.value;
}
});
}
}
return requestVariables;
};