feat: variable descriptions (usebruno#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>

Author: sid-bruno

package-lock.json

@@ -7,6 +7,7 @@ import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/
 import { updateTableColumnWidths } from 'providers/ReduxStore/slices/tabs';
 import SingleLineEditor from 'components/SingleLineEditor';
 import EditableTable from 'components/EditableTable';
+import { createDescriptionColumn } from 'components/EditableTable/descriptionColumn';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
@@ -65,13 +66,20 @@ const Headers = ({ collection }) => {
     return null;
   }, []);
 
+  const descriptionColumn = createDescriptionColumn({
+    theme: storedTheme,
+    onSave: handleSave,
+    collection,
+    nameFromRowIndex: true
+  });
+
   const columns = [
     {
       key: 'name',
       name: 'Name',
       isKeyField: true,
       placeholder: 'Name',
-      width: '30%',
+      width: '20%',
       render: ({ value, onChange }) => (
         <SingleLineEditor
           value={value || ''}
@@ -99,7 +107,8 @@ const Headers = ({ collection }) => {
           placeholder={!value ? 'Value' : ''}
         />
       )
-    }
+    },
+    descriptionColumn
   ];
 
   const defaultRow = {
@@ -131,6 +140,7 @@ const Headers = ({ collection }) => {
       </div>
       <EditableTable
         tableId="collection-headers"
+        testId="collection-headers"
         columns={columns}
         rows={headers}
         onChange={handleHeadersChange}

packages/bruno-app/src/components/CollectionSettings/Headers/index.js

@@ -6,8 +6,10 @@ import { updateTableColumnWidths } from 'providers/ReduxStore/slices/tabs';
 import MultiLineEditor from 'components/MultiLineEditor';
 import InfoTip from 'components/InfoTip';
 import DataTypeSelector from 'components/DataTypeSelector';
+import VarValueCell from 'components/VarValueCell';
 import { valueToString } from '@usebruno/common/utils';
 import EditableTable from 'components/EditableTable';
+import { createDescriptionColumn } from 'components/EditableTable/descriptionColumn';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { variableNameRegex } from 'utils/common/regex';
@@ -42,13 +44,20 @@ const VarsTable = ({ collection, vars, varType, initialScroll = 0 }) => {
     return null;
   }, []);
 
+  const descriptionColumn = createDescriptionColumn({
+    theme: storedTheme,
+    onSave,
+    collection,
+    nameFromRowIndex: true
+  });
+
   const columns = [
     {
       key: 'name',
       name: 'Name',
       isKeyField: true,
       placeholder: 'Name',
-      width: '40%'
+      width: '25%'
     },
     {
       key: 'value',
@@ -59,38 +68,43 @@ const VarsTable = ({ collection, vars, varType, initialScroll = 0 }) => {
         </div>
       ),
       placeholder: varType === 'request' ? 'Value' : 'Expr',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <div className="flex items-center w-full gap-2">
-          <div className="flex-1 min-w-0">
+      render: ({ row, value, onChange, isLastEmptyRow, rowIndex }) => (
+        <VarValueCell
+          editor={(
             <MultiLineEditor
               value={valueToString(value)}
+              name={`${rowIndex}.value`}
               theme={storedTheme}
               onSave={onSave}
               onChange={onChange}
               collection={collection}
               placeholder={value == null || (typeof value === 'string' && value.trim() === '') ? (varType === 'request' ? 'Value' : 'Expr') : ''}
             />
-          </div>
-          {/* DataTypes apply to literal values, not to the JS expression that produces a post-response value. */}
-          {!isLastEmptyRow && varType === 'request' && (
-            <DataTypeSelector
-              variable={row}
-              theme={storedTheme}
-              collection={collection}
-              onChange={(fields) => {
-                const updated = (vars || []).map((v) => v.uid === row.uid ? { ...v, ...fields } : v);
-                handleVarsChange(updated);
-              }}
-            />
           )}
-        </div>
+          renderTypeSelector={!isLastEmptyRow && varType === 'request'
+            ? ({ compact }) => (
+                <DataTypeSelector
+                  compact={compact}
+                  variable={row}
+                  theme={storedTheme}
+                  collection={collection}
+                  onChange={(fields) => {
+                    const updated = (vars || []).map((v) => v.uid === row.uid ? { ...v, ...fields } : v);
+                    handleVarsChange(updated);
+                  }}
+                />
+              )
+            : null}
+        />
       )
-    }
+    },
+    descriptionColumn
   ];
 
   const defaultRow = {
     name: '',
     value: '',
+    description: '',
     ...(varType === 'response' ? { local: false } : {})
   };
 

packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/index.js

@@ -14,6 +14,11 @@ const StyledWrapper = styled.div`
   .caret-icon {
     opacity: 0.7;
   }
+
+  .type-icon {
+    opacity: 0.7;
+    flex-shrink: 0;
+  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/DataTypeSelector/StyledWrapper.js

@@ -1,11 +1,25 @@
 import React from 'react';
-import { IconAlertCircle, IconCaretDown } from '@tabler/icons';
+import {
+  IconAlertCircle,
+  IconBraces,
+  IconCaretDown,
+  IconNumbers,
+  IconLetterT,
+  IconToggleRight
+} from '@tabler/icons';
 import { Tooltip } from 'react-tooltip';
 import { BRUNO_VARIABLE_DATATYPES, parseValueByDataType, validateDataTypeValue } from '@usebruno/common/utils';
 import MenuDropdown from 'ui/MenuDropdown';
 import StyledWrapper from './StyledWrapper';
 
-const DataTypeSelector = ({ variable, onChange }) => {
+const TYPE_ICONS = {
+  string: IconLetterT,
+  number: IconNumbers,
+  boolean: IconToggleRight,
+  object: IconBraces
+};
+
+const DataTypeSelector = ({ variable, onChange, compact = false }) => {
   const selectedType = variable.dataType || 'string';
   const coercedValue = parseValueByDataType(variable.value, selectedType);
   const typeError = validateDataTypeValue(coercedValue, selectedType);
@@ -20,18 +34,29 @@ const DataTypeSelector = ({ variable, onChange }) => {
     onClick: () => handleTypeChange(type)
   }));
 
+  const TypeIcon = TYPE_ICONS[selectedType] || IconLetterT;
+
   return (
     <StyledWrapper>
-      <div className="flex items-center relative">
+      <div className="flex items-center relative shrink-0">
         <MenuDropdown
           items={items}
           selectedItemId={selectedType}
           placement="bottom-end"
           showTickMark={true}
           appendTo={() => document.body}
+          data-testid="datatype-selector-trigger"
         >
-          <div className="flex items-center cursor-pointer select-none">
-            <span className="type-label">{selectedType}</span>
+          <div
+            className="flex items-center cursor-pointer select-none"
+            data-selected-type={selectedType}
+            aria-label={`Data type: ${selectedType}`}
+          >
+            {compact ? (
+              <TypeIcon className="type-icon" size={12} strokeWidth={2} />
+            ) : (
+              <span className="type-label">{selectedType}</span>
+            )}
             <IconCaretDown className="caret-icon ml-1" size={14} strokeWidth={2} />
           </div>
         </MenuDropdown>

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

@@ -107,27 +107,53 @@ const StyledWrapper = styled.div`
           overflow: hidden;
         }
 
-        /* Handle CodeMirror editors overflow */
-        .cm-editor {
+        /* Single-line CodeMirror editors: clip overflow to one row */
+        .single-line-editor .CodeMirror {
           max-width: 100%;
           height: 33px !important;
           max-height: 33px !important;
 
-          .cm-scroller {
+          .CodeMirror-scroll {
             overflow: hidden !important;
             max-height: 33px;
           }
 
-          .cm-content {
+          .CodeMirror-vscrollbar,
+          .CodeMirror-hscrollbar,
+          .CodeMirror-scrollbar-filler {
+            display: none;
+          }
+
+          .CodeMirror-lines {
             max-width: 100%;
           }
 
-          .cm-line {
+          .CodeMirror-line {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
           }
         }
+
+        &:has(.multi-line-editor) {
+          height: auto;
+          max-height: none;
+          overflow: visible;
+          white-space: normal;
+          text-overflow: clip;
+
+          > div:not(.drag-handle) {
+            height: auto;
+            max-height: none;
+            overflow: visible;
+          }
+        }
+      }
+
+      &:has(.multi-line-editor) {
+        height: auto;
+        max-height: calc(35px * 3); 
+        overflow: auto;
       }
     }
   }

packages/bruno-app/src/components/EditableTable/StyledWrapper.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import MultiLineEditor from 'components/MultiLineEditor';
+
+export const createDescriptionColumn = ({
+  theme,
+  onSave,
+  onRun,
+  collection,
+  item,
+  nameFromRowIndex = false,
+  onDescriptionChange
+}) => ({
+  key: 'description',
+  name: 'Description',
+  placeholder: 'Description',
+  width: '25%',
+  render: ({ row, value, onChange, rowIndex }) => (
+    <MultiLineEditor
+      value={value || ''}
+      theme={theme}
+      onSave={onSave}
+      onChange={
+        onDescriptionChange
+          ? (newValue) => onDescriptionChange(newValue, { row, onChange })
+          : onChange
+      }
+      {...(onRun ? { onRun } : {})}
+      {...(collection ? { collection } : {})}
+      {...(item ? { item } : {})}
+      {...(nameFromRowIndex && rowIndex !== undefined ? { name: `${rowIndex}.description` } : {})}
+    />
+  )
+});

packages/bruno-app/src/components/EditableTable/descriptionColumn.js

@@ -380,7 +380,11 @@ const EditableTable = ({
         </td>
       ))}
       {showDelete && (
-        <td style={{ width: '60px' }}></td>
+        <td
+          id="delete-column-header"
+          style={{ width: '57px' }}
+        >
+        </td>
       )}
     </tr>
   ), [showCheckbox, checkboxLabel, columns, getColumnWidth, resizing, tableHeight, handleResizeStart, showDelete]);
@@ -426,7 +430,19 @@ const EditableTable = ({
           </td>
         ))}
         {showDelete && (
-          <td>
+          <td ref={(node) => {
+            if (!node) return;
+            const width = node.scrollWidth;
+            const parent = node.parentElement.parentElement.parentElement.querySelector('#delete-column-header');
+            if (parent) {
+              const parentWidth = parseInt(parent.style.width);
+              const nextWidth = Math.max(parentWidth, width);
+              if (nextWidth !== parentWidth) {
+                parent.style.width = nextWidth + 'px';
+              }
+            }
+          }}
+          >
             {!isEmpty && (
               <button
                 data-testid="column-delete"

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

@@ -32,11 +32,17 @@ const Wrapper = styled.div`
         width: 25px;
         border-right: none;
       }
+
       &:nth-child(4) {
         width: 80px;
       }
+      
       &:nth-child(5) {
-        width: 60px;
+        width: 10%;
+      }
+      
+      &:nth-child(6) {
+        width: 5%;
       }
     }