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>

tests/environments/description/fixtures/collection/bruno.json

@@ -0,0 +1,5 @@
+{
+  "version": "1",
+  "name": "env-description",
+  "type": "collection"
+}

tests/environments/description/fixtures/collection/environments/WithDescriptions.bru

@@ -0,0 +1,13 @@
+vars {
+  @description('''Single-line desc''')
+  host: http://localhost:3000
+  @description('''empty description''')
+  @description('''
+    Line one
+    Line two
+  ''')
+  token: abc123
+  plain: no-description
+  @description("has ''' triple quotes inside")
+  tricky: value
+}

tests/environments/description/init-user-data/collection-security.json

@@ -0,0 +1,10 @@
+{
+  "collections": [
+    {
+      "path": "{{collectionPath}}",
+      "securityConfig": {
+        "jsSandboxMode": "developer"
+      }
+    }
+  ]
+}

tests/environments/description/init-user-data/preferences.json

@@ -0,0 +1,28 @@
+{
+  "maximized": false,
+  "lastOpenedCollections": [
+    "{{collectionPath}}"
+  ],
+  "request": {
+    "sslVerification": false,
+    "customCaCertificate": {
+      "enabled": false,
+      "filePath": null
+    }
+  },
+  "font": {
+    "codeFont": "default"
+  },
+  "proxy": {
+    "enabled": false,
+    "protocol": "http",
+    "hostname": "",
+    "port": "",
+    "auth": {
+      "enabled": false,
+      "username": "",
+      "password": ""
+    },
+    "bypassProxy": ""
+  }
+}

tests/environments/description/read-environment-description.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect, Page } from '../../../playwright';
+import { buildCommonLocators } from '../../utils/page/locators';
+
+const openEnvironmentConfigure = async (page: Page, envName: string) => {
+  const locators = buildCommonLocators(page);
+  await locators.environment.currentEnvironment().click();
+  await expect(locators.environment.envOption(envName)).toBeVisible();
+  await locators.environment.envOption(envName).click();
+  await expect(locators.environment.currentEnvironment().filter({ hasText: envName })).toBeVisible();
+  await locators.environment.currentEnvironment().click();
+  await expect(locators.dropdown.item('Configure')).toBeVisible();
+  await locators.dropdown.item('Configure').click();
+  await expect(locators.tabs.requestTab('Environments')).toBeVisible();
+};
+
+test.describe('Environment Variable Descriptions - Read', () => {
+  test('reads single-line and multiline descriptions from a pre-existing environment file', async ({
+    pageWithUserData: page
+  }) => {
+    test.setTimeout(30_000);
+
+    const collection = page
+      .getByTestId('collections')
+      .locator('#sidebar-collection-name')
+      .filter({ hasText: 'env-description' });
+    await expect(collection).toBeVisible();
+    await collection.click();
+
+    await openEnvironmentConfigure(page, 'WithDescriptions');
+
+    const locators = buildCommonLocators(page);
+
+    // row 0: host — single-line description
+    await expect(page.locator('input[name="0.name"]')).toHaveValue('host');
+    const hostDesc = locators.environment.variableDescriptionEditor(0);
+    await expect(hostDesc).toBeVisible();
+    await expect(hostDesc.locator('.CodeMirror-line').first()).toHaveText('Single-line desc');
+
+    // row 1: orphaned @description('''empty description''') — empty name/value, description is 'empty description'
+    await expect(page.locator('input[name="1.name"]')).toHaveValue('');
+    const orphanDesc = locators.environment.variableDescriptionEditor(1);
+    await expect(orphanDesc).toBeVisible();
+    await expect(orphanDesc.locator('.CodeMirror-line').first()).toHaveText('empty description');
+
+    // row 2: token — gets the last (multiline) description; the first was consumed by the orphaned row
+    await expect(page.locator('input[name="2.name"]')).toHaveValue('token');
+    const tokenDesc = locators.environment.variableDescriptionEditor(2);
+    await expect(tokenDesc).toBeVisible();
+    await expect(tokenDesc.locator('.CodeMirror-line').nth(0)).toHaveText('Line one');
+    await expect(tokenDesc.locator('.CodeMirror-line').nth(1)).toHaveText('Line two');
+
+    // row 3: plain — no description (editor is empty)
+    await expect(page.locator('input[name="3.name"]')).toHaveValue('plain');
+    const plainDesc = locators.environment.variableDescriptionEditor(3);
+    await expect(plainDesc).toBeVisible();
+    await expect(plainDesc.locator('.CodeMirror-line').first()).toHaveText('');
+
+    // row 4: tricky — description containing ''' (stored as triple-quoted @description('''...'''))
+    await expect(page.locator('input[name="4.name"]')).toHaveValue('tricky');
+    const trickyDesc = locators.environment.variableDescriptionEditor(4);
+    await expect(trickyDesc).toBeVisible();
+    await expect(trickyDesc.locator('.CodeMirror-line').first()).toHaveText('has \'\'\' triple quotes inside');
+  });
+});

tests/environments/description/write-environment-description.spec.ts

@@ -0,0 +1,65 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { test, expect, Page } from '../../../playwright';
+import { buildCommonLocators } from '../../utils/page/locators';
+
+const openEnvironmentConfigure = async (page: Page, envName: string) => {
+  const locators = buildCommonLocators(page);
+  await locators.environment.currentEnvironment().click();
+  await expect(locators.environment.envOption(envName)).toBeVisible();
+  await locators.environment.envOption(envName).click();
+  await expect(locators.environment.currentEnvironment().filter({ hasText: envName })).toBeVisible();
+  await locators.environment.currentEnvironment().click();
+  await expect(locators.dropdown.item('Configure')).toBeVisible();
+  await locators.dropdown.item('Configure').click();
+  await expect(locators.tabs.requestTab('Environments')).toBeVisible();
+};
+
+test.describe('Environment Variable Descriptions - Write', () => {
+  test('writes a multiline description and persists it to the .bru file', async ({
+    pageWithUserData: page,
+    collectionFixturePath
+  }) => {
+    test.setTimeout(30_000);
+
+    const collection = page
+      .getByTestId('collections')
+      .locator('#sidebar-collection-name')
+      .filter({ hasText: 'env-description' });
+    await expect(collection).toBeVisible();
+    await collection.click();
+
+    await openEnvironmentConfigure(page, 'WithDescriptions');
+
+    // Set the description value directly via CodeMirror's JS API so that the `change`
+    // event fires synchronously and formik receives the update before we save.
+    // keyboard.type / insertText are unreliable in Electron because synthetic key events
+    // don't always go through CodeMirror's textarea input handler.
+    await page.evaluate((rowIndex) => {
+      const rows = document.querySelectorAll('tr');
+      for (const row of rows) {
+        if (row.querySelector(`input[name="${rowIndex}.name"]`)) {
+          const cms = row.querySelectorAll('.CodeMirror');
+          const cm = (cms[1] as any)?.CodeMirror; // description editor is the 2nd CodeMirror
+          if (cm) cm.setValue('First line\nSecond line');
+          break;
+        }
+      }
+    }, 2);
+
+    // Wait for the CodeMirror DOM to reflect the value, then give React a tick to flush formik
+    const plainDescEditor = buildCommonLocators(page).environment.variableDescriptionEditor(2);
+    await expect(plainDescEditor.locator('.CodeMirror-line').nth(0)).toHaveText('First line');
+    await page.waitForTimeout(200);
+
+    await page.getByTestId('save-env').click();
+    await expect(page.getByText('Changes saved successfully')).toBeVisible({ timeout: 5000 });
+
+    // The IPC write completes before the toast resolves, so the file is ready to read.
+    const envFilePath = path.join(collectionFixturePath!, 'environments', 'WithDescriptions.bru');
+    const fileContent = fs.readFileSync(envFilePath, 'utf8');
+
+    expect(fileContent).toContain('First line');
+    expect(fileContent).toContain('Second line');
+  });
+});