feat: variable descriptions (#8269)

* feat: add description column to various tables and enhance UI interactions
- Introduced a description column in Headers, VarsTable, and other components to allow multi-line descriptions.
- Added toggle buttons to show/hide the description column in relevant tables.
- Updated EditableTable component to support dynamic row addition with customizable labels.
- Enhanced UI for better user experience with consistent button styles and spacing adjustments.

* chore: resize fix handles

* fix: restrict column check for last index

* refactor: remove unwanted style and fix bottom padding of the last child in the table row

* tests: improve testability and fix impacted locators

* tests: fix locators for value fields

* fix: improve newline handling in description prefix

* fix: ts changes

* chore: remove redundant code and fix description roundtrip

* chore: remove redundant check

* tests(bru-lang): tests for description and annotation

* test: improve locators and tests

* tests: descriptions

* chore: re-add description setup

* fix: re-add description cols

* chore: fix the double click reset

* fix: account for hidden sidebar in request pane width calculation

* refactor: ui/ux fixes for data type toggle

* chore: inline common deps into bruno-lang and bruno-schema

* chore: tests

* chore: fix ux for descriptions

* fix: layout for environment vars table

* fix: ensure correct row selection for multipart file upload in tests

* feat: enhance UID assignment for request headers and variables in collections

* chore: simplify

* chore: update pkg

* chore: abstract the e2e utils

* chore: fix exports

* tests: fix locators for datatype vars

* fix: ux issue with secrets in environment table

* tests: update locators for collection headers and vars descriptions

* tests: update locators to use data attributes for datatype selectors

* chore: update default css width for actions column

* chore: remove tooltip for string type warnings

* fix: reduce name widths

* refactor: update annotation serialization to use single-quote delimiters for descriptions

* refactor(tests): simplify description formatting in jsonToEnv tests

* feat: add multiline description escaping and unescaping functions with tests

* refactor: clean up imports and improve multiline text block handling

* refactor: update locators to use new test IDs for environment variable editors

* refactor: streamline header input handling and improve environment variable row access

* refactor: update e2e-test job to support self-hosted runners

* refactor: update E2E test runner configuration to include e2e and macOS environments

---------

Co-authored-by: Pragadesh-45 <temporaryg7904@gmail.com>

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

@@ -94,7 +94,9 @@ class MultiLineEditor extends Component {
     this.addOverlay(variables);
 
     // Initialize masking if this is a secret field
-    this.setState({ maskInput: this.props.isSecret });
+    this.setState({ maskInput: this.props.isSecret }, () => {
+      this.props.onMaskChange?.(this.state.maskInput);
+    });
     this._enableMaskedEditor(this.props.isSecret);
   }
 
@@ -110,6 +112,7 @@ class MultiLineEditor extends Component {
       if (this.props.onChange) {
         this.props.onChange(this.cachedValue);
       }
+      requestAnimationFrame(() => this.editor?.refresh());
     }
   };
 
@@ -167,12 +170,15 @@ class MultiLineEditor extends Component {
       if (this.maskedEditor && this.maskedEditor.isEnabled()) {
         this.maskedEditor.update();
       }
+      requestAnimationFrame(() => this.editor?.refresh());
     }
     if (!isEqual(this.props.isSecret, prevProps.isSecret)) {
       // If the secret flag has changed, update the editor to reflect the change
       this._enableMaskedEditor(this.props.isSecret);
       // also set the maskInput flag to the new value
-      this.setState({ maskInput: this.props.isSecret });
+      this.setState({ maskInput: this.props.isSecret }, () => {
+        this.props.onMaskChange?.(this.state.maskInput);
+      });
     }
     if (this.props.readOnly !== prevProps.readOnly && this.editor) {
       this.editor.setOption('readOnly', this.props.readOnly || false);
@@ -208,9 +214,11 @@ class MultiLineEditor extends Component {
    * @brief Toggle the visibility of the secret value
    */
   toggleVisibleSecret = () => {
-    const isVisible = !this.state.maskInput;
-    this.setState({ maskInput: isVisible });
-    this._enableMaskedEditor(isVisible);
+    const maskInput = !this.state.maskInput;
+    this.setState({ maskInput }, () => {
+      this._enableMaskedEditor(maskInput);
+      this.props.onMaskChange?.(maskInput);
+    });
   };
 
   /**
@@ -231,10 +239,11 @@ class MultiLineEditor extends Component {
 
   render() {
     const wrapperClass = `multi-line-editor grow ${this.props.readOnly ? 'read-only' : ''}`;
+    const testId = this.props.testId ?? (this.props.name ? `test-multiline-editor-${this.props.name}` : undefined);
     return (
-      <div className={`flex flex-row justify-between w-full overflow-x-auto ${this.props.className}`}>
+      <div data-testid={testId} className={`flex flex-row justify-between w-full overflow-x-auto ${this.props.className}`}>
         <StyledWrapper ref={this.editorRef} className={wrapperClass} />
-        {this.secretEye(this.props.isSecret)}
+        {!this.props.hideSecretEye && this.secretEye(this.props.isSecret)}
       </div>
     );
   }