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