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/folder/description/fixtures/collection/api/folder.bru

@@ -0,0 +1,25 @@
+meta {
+  name: api
+}
+
+headers {
+  @description('''Single-line header desc''')
+  X-Version: 2.0
+  @description('''
+    Header line one
+    Header line two
+  ''')
+  X-Multi: value
+  X-Plain: plain-value
+}
+
+vars:pre-request {
+  @description('''Single-line var desc''')
+  baseUrl: https://example.com
+  @description('''
+    Var line one
+    Var line two
+  ''')
+  apiKey: abc123
+  plain: no-desc
+}

tests/folder/description/fixtures/collection/api/ping.bru

@@ -0,0 +1,11 @@
+meta {
+  name: ping
+  type: http
+  seq: 1
+}
+
+get {
+  url: https://example.com/ping
+  body: none
+  auth: none
+}

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

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

tests/folder/description/fixtures/collection/collection.bru

@@ -0,0 +1,5 @@
+meta {
+  name: fold-description
+  type: collection
+  version: 1.0.0
+}

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

@@ -0,0 +1 @@
+{}

tests/folder/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/folder/description/read-folder-description.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '../../../playwright';
+import { openFolderSettings } from '../../utils/page';
+
+test.describe('Folder Settings Descriptions - Read', () => {
+  test('reads descriptions from headers and vars in a pre-existing folder.bru', async ({
+    pageWithUserData: page
+  }) => {
+    test.setTimeout(30_000);
+
+    await openFolderSettings(page, 'fold-description');
+
+    await page.getByTestId('folder-settings-tab-headers').click();
+
+    const headerRows = page.locator('table').first().locator('tbody tr');
+
+    const versionDescEditor = headerRows.nth(0).getByTestId('column-description').locator('.CodeMirror');
+    await expect(versionDescEditor.locator('.CodeMirror-line').first()).toHaveText('Single-line header desc');
+
+    const multiDescEditor = headerRows.nth(1).getByTestId('column-description').locator('.CodeMirror');
+    await expect(multiDescEditor.locator('.CodeMirror-line').nth(0)).toHaveText('Header line one');
+    await expect(multiDescEditor.locator('.CodeMirror-line').nth(1)).toHaveText('Header line two');
+
+    const plainDescEditor = headerRows.nth(2).getByTestId('column-description').locator('.CodeMirror');
+    await expect(plainDescEditor.locator('.CodeMirror-line').first()).toHaveText('');
+
+    await page.getByTestId('folder-settings-tab-vars').click();
+
+    const varRows = page.getByTestId('folder-vars-req').locator('tbody tr');
+
+    const baseUrlDescEditor = varRows.nth(0).locator('.CodeMirror').nth(1);
+    await expect(baseUrlDescEditor.locator('.CodeMirror-line').first()).toHaveText('Single-line var desc');
+
+    const apiKeyDescEditor = varRows.nth(1).locator('.CodeMirror').nth(1);
+    await expect(apiKeyDescEditor.locator('.CodeMirror-line').nth(0)).toHaveText('Var line one');
+    await expect(apiKeyDescEditor.locator('.CodeMirror-line').nth(1)).toHaveText('Var line two');
+
+    const plainVarDescEditor = varRows.nth(2).locator('.CodeMirror').nth(1);
+    await expect(plainVarDescEditor.locator('.CodeMirror-line').first()).toHaveText('');
+  });
+});

tests/folder/description/write-folder-headers-description.spec.ts

@@ -0,0 +1,36 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { test, expect } from '../../../playwright';
+import { openFolderSettings, setTableRowDescriptionValue } from '../../utils/page';
+
+test.describe('Folder Settings Descriptions - Write (Headers)', () => {
+  test('writes a multiline description to a header and persists it to folder.bru', async ({
+    pageWithUserData: page,
+    collectionFixturePath
+  }) => {
+    await openFolderSettings(page, 'fold-description');
+
+    await page.getByTestId('folder-settings-tab-headers').click();
+
+    const headersTable = page.locator('table').first();
+    const xPlainRow = headersTable.locator('tbody tr').filter({
+      has: page.locator('[data-testid="column-name"] .CodeMirror-line', { hasText: 'X-Plain' })
+    });
+    const descCell = xPlainRow.getByTestId('column-description');
+
+    await setTableRowDescriptionValue(xPlainRow, 'First line\nSecond line');
+
+    await expect(descCell.locator('.CodeMirror-line').nth(0)).toHaveText('First line');
+    await expect(descCell.locator('.CodeMirror-line').nth(1)).toHaveText('Second line');
+
+    await page.getByRole('button', { name: 'Save' }).click();
+    await expect(page.getByText('Folder Settings saved successfully')).toBeVisible({ timeout: 5000 });
+
+    const folderBruPath = path.join(collectionFixturePath!, 'api', 'folder.bru');
+    const fileContent = fs.readFileSync(folderBruPath, 'utf8');
+
+    expect(fileContent).toContain('@description');
+    expect(fileContent).toContain('First line');
+    expect(fileContent).toContain('Second line');
+  });
+});

tests/folder/description/write-folder-vars-description.spec.ts

@@ -0,0 +1,39 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { test, expect } from '../../../playwright';
+import { openFolderSettings, setTableRowDescriptionValue } from '../../utils/page';
+
+test.describe('Folder Settings Descriptions - Write (Vars)', () => {
+  test('writes a multiline description to a pre-request var and persists it to folder.bru', async ({
+    pageWithUserData: page,
+    collectionFixturePath
+  }) => {
+    await openFolderSettings(page, 'fold-description');
+
+    await page.getByTestId('folder-settings-tab-vars').click();
+
+    const varsTable = page.getByTestId('folder-vars-req');
+    await expect(varsTable.locator('tbody tr').first()).toBeVisible();
+
+    const plainRowIndex = await varsTable.locator('[data-testid="column-name"] input').evaluateAll(
+      (inputs) => inputs.findIndex((el) => (el as HTMLInputElement).value === 'plain')
+    );
+    if (plainRowIndex === -1) throw new Error('\'plain\' var not found in pre-request vars table');
+
+    const plainRow = varsTable.locator('tbody tr').nth(plainRowIndex);
+    await setTableRowDescriptionValue(plainRow, 'First line\nSecond line');
+
+    const descCell = plainRow.getByTestId('column-description');
+    await expect(descCell.locator('.CodeMirror-line').nth(0)).toHaveText('First line');
+    await expect(descCell.locator('.CodeMirror-line').nth(1)).toHaveText('Second line');
+
+    await page.getByRole('button', { name: 'Save' }).click();
+    await expect(page.getByText('Folder Settings saved successfully')).toBeVisible({ timeout: 5000 });
+
+    const folderBruPath = path.join(collectionFixturePath!, 'api', 'folder.bru');
+    const fileContent = fs.readFileSync(folderBruPath, 'utf8');
+
+    expect(fileContent).toContain('First line');
+    expect(fileContent).toContain('Second line');
+  });
+});