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/variable-datatypes/create-via-ui.spec.ts

@@ -31,7 +31,7 @@ const tableRowByName = (page: Page, tableId: string, name: string) =>
   buildCommonLocators(page).table(tableId).rowByName(name);
 
 const expectTypeLabel = async (row: Locator, label: string) => {
-  await expect(buildCommonLocators(row.page()).dataTypeSelector.typeLabel(row)).toHaveText(label);
+  await expect(buildCommonLocators(row.page()).dataTypeSelector.typeLabel(row)).toHaveAttribute('data-selected-type', label);
 };
 
 // Add a row to the Vars table and pick `dataType` from the DataTypeSelector.
@@ -64,6 +64,7 @@ const addTypedVarRow = async (
     await valueEditor.click({ force: true });
     await expect(valueEditor).toHaveClass(/CodeMirror-focused/);
     await page.keyboard.insertText(value);
+    await valueEditor.hover();
 
     // Pick dataType from the selector menu.
     const typeTrigger = locators.dataTypeSelector.typeLabel(namedRow);
@@ -71,7 +72,7 @@ const addTypedVarRow = async (
     const menuItem = locators.dataTypeSelector.menuItem(dataType);
     await expect(menuItem).toBeVisible();
     await menuItem.click();
-    await expect(typeTrigger).toHaveText(dataType);
+    await expect(typeTrigger).toHaveAttribute('data-selected-type', dataType);
     // Let the dispatched Redux mutation settle before the next interaction.
     await page.waitForTimeout(200);
   });
@@ -192,7 +193,7 @@ test.describe('DataType selector — new collection created via UI', () => {
     // DataTypeSelector too.
     const addEnvVar = async (name: string, dataType: NonDefaultDataType, { secret = false } = {}) => {
       await test.step(`add ${secret ? 'secret ' : ''}${dataType} env var "${name}"`, async () => {
-        const emptyRow = page.locator('tbody tr').last();
+        const emptyRow = envRows.last();
         await emptyRow.locator('input[placeholder="Name"]').fill(name);
         const namedRow = locators.environment.varRow(name);
         await expect(namedRow).toBeVisible();
@@ -202,14 +203,16 @@ test.describe('DataType selector — new collection created via UI', () => {
         tabRowCount++;
         await expect(envRows).toHaveCount(tabRowCount + 1);
 
-        const valueEditor = namedRow.locator('.CodeMirror').first();
+        const valueEditor = locators.environment.varRowValueEditor(name);
+        await valueEditor.hover();
         await valueEditor.click({ force: true });
         await expect(valueEditor).toHaveClass(/CodeMirror-focused/);
         await page.keyboard.insertText(VALUE_FOR_DATATYPE[dataType]);
 
+        await valueEditor.hover();
         await locators.dataTypeSelector.typeLabel(namedRow).click();
         await locators.dataTypeSelector.menuItem(dataType).click();
-        await expect(locators.dataTypeSelector.typeLabel(namedRow)).toHaveText(dataType);
+        await expect(locators.dataTypeSelector.typeLabel(namedRow)).toHaveAttribute('data-selected-type', dataType);
         await page.waitForTimeout(200);
       });
     };
@@ -237,7 +240,13 @@ test.describe('DataType selector — new collection created via UI', () => {
     // Switch back to the Variables tab to verify the non-secret rows.
     await locators.environment.variablesTab().click();
     for (const dt of TYPED_DATATYPES) {
-      await expect(locators.dataTypeSelector.typeLabel(locators.environment.varRow(`env_${dt}`))).toHaveText(dt);
+      await expect(locators.dataTypeSelector.typeLabel(locators.environment.varRow(`env_${dt}`))).toHaveAttribute('data-selected-type', dt);
+    }
+
+    // Each secret var keeps its dataType after save.
+    await locators.environment.secretsTab().click();
+    for (const dt of TYPED_DATATYPES) {
+      await expect(locators.dataTypeSelector.typeLabel(locators.environment.varRow(`env_secret_${dt}`))).toHaveAttribute('data-selected-type', dt);
     }
   });
 });

tests/variable-datatypes/import.spec.ts

@@ -53,7 +53,7 @@ const tableRowByName = (table: ReturnType<ReturnType<typeof buildCommonLocators>
   table.rowByName(name);
 
 const expectTypeLabel = async (row: Locator, label: string) => {
-  await expect(buildCommonLocators(row.page()).dataTypeSelector.typeLabel(row)).toHaveText(label);
+  await expect(buildCommonLocators(row.page()).dataTypeSelector.typeLabel(row)).toHaveAttribute('data-selected-type', label);
 };
 
 const openImportedRequest = async (page: Page) => {
@@ -143,7 +143,7 @@ test.describe('DataType selector — imported OpenCollection (.yml) collection',
     await expect(locators.tabs.activeRequestTab()).toContainText('Environments');
 
     for (const [name, label] of ENV_ROWS) {
-      await expect(locators.dataTypeSelector.typeLabel(locators.environment.varRow(name))).toHaveText(label);
+      await expect(locators.dataTypeSelector.typeLabel(locators.environment.varRow(name))).toHaveAttribute('data-selected-type', label);
     }
   });
 });

tests/variable-datatypes/parsed-from-fixture.spec.ts

@@ -115,7 +115,7 @@ const SLOW_RENDER_TIMEOUT_MS = 15_000;
 const expectTypeLabel = async (row: Locator, label: string) => {
   await scrollVirtuosoRowIntoView(row.page(), row);
   const { dataTypeSelector } = buildCommonLocators(row.page());
-  await expect(dataTypeSelector.typeLabel(row)).toHaveText(label, { timeout: SLOW_RENDER_TIMEOUT_MS });
+  await expect(dataTypeSelector.typeLabel(row)).toHaveAttribute('data-selected-type', label, { timeout: SLOW_RENDER_TIMEOUT_MS });
 };
 
 /**
@@ -126,13 +126,15 @@ const expectTypeLabel = async (row: Locator, label: string) => {
 const changeRowDataType = async (page: Page, row: Locator, newType: string) => {
   const { dataTypeSelector } = buildCommonLocators(page);
   const trigger = dataTypeSelector.typeLabel(row);
+  // Hover the row first so the compact overlay's pointer-events become 'auto'.
+  await row.hover();
   await trigger.click();
 
   const menuItem = dataTypeSelector.menuItem(newType);
   await expect(menuItem).toBeVisible();
   await menuItem.click();
 
-  await expect(trigger).toHaveText(newType);
+  await expect(trigger).toHaveAttribute('data-selected-type', newType);
   // Let the dispatched Redux mutation propagate before the caller saves.
   await page.waitForTimeout(300);
 };
@@ -278,7 +280,7 @@ const expectEnvVarTypeLabel = async (page: Page, name: string, label: string, {
   await (secret ? environment.secretsTab() : environment.variablesTab()).click();
   const row = environment.varRow(name);
   await scrollVirtuosoRowIntoView(page, row);
-  await expect(dataTypeSelector.typeLabel(row)).toHaveText(label, { timeout: SLOW_RENDER_TIMEOUT_MS });
+  await expect(dataTypeSelector.typeLabel(row)).toHaveAttribute('data-selected-type', label, { timeout: SLOW_RENDER_TIMEOUT_MS });
 };
 
 /**
@@ -507,11 +509,11 @@ const runDataTypeSelectorTests = (
     await openRequestInCollection(page, collectionName);
     await selectRequestPaneTab(page, 'Params');
     const queryTable = buildCommonLocators(page).table('query-params');
-    await expect(queryTable.container().locator('.type-label')).toHaveCount(0);
+    await expect(queryTable.container().getByTestId('datatype-selector-trigger')).toHaveCount(0);
 
     await selectRequestPaneTab(page, 'Headers');
     const headersTable = buildCommonLocators(page).table('request-headers');
-    await expect(headersTable.container().locator('.type-label')).toHaveCount(0);
+    await expect(headersTable.container().getByTestId('datatype-selector-trigger')).toHaveCount(0);
   });
 
   test('test script: every typed var across scopes asserts true', async ({ pageWithUserData: page }) => {