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>

packages/bruno-app/src/components/MultiLineEditor/index.js

@@ -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 = () => {
+  addOverlay = (variables) => {
-    let variables = getAllVariables(this.props.collection);
     this.variables = variables;
-
     defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
     this.editor.setOption('mode', 'brunovariables');
   };

packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js

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

packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js

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

packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js

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

packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js

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

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js

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

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js

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

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js

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

packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js

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

packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js

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

packages/bruno-app/src/components/RequestPane/QueryParams/index.js

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

packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js

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

packages/bruno-app/src/utils/collections/index.js

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