Conversation
WalkthroughAdds header-name/value validation and UI error indicators. New regex utilities and per-row validation callbacks are wired into EditableTable across collection, folder, and request header editors; tests and test helpers updated for interaction and persistence. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Headers as "Headers Component"
participant EditableTable as "EditableTable"
participant Regex as "headerNameRegex / headerValueRegex"
participant UI as "Error Icon + Tooltip"
User->>Headers: Type header name/value
Headers->>EditableTable: Provide getRowError callback
EditableTable->>Headers: Call getRowError(row)
Headers->>Regex: Validate name/value
Regex-->>Headers: Return match result
alt invalid
Headers-->>EditableTable: Return error message
EditableTable->>UI: Render alert icon + tooltip
UI-->>User: Show error indicator
else valid
Headers-->>EditableTable: Return null
EditableTable->>UI: No error shown
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@tests/request/headers/header-validation.spec.ts`:
- Around line 68-94: This test relies on a request created elsewhere; make it
self-contained by creating or opening the request within this test (or move
shared setup into a beforeEach). Specifically, before calling
selectRequestPaneTab(page, 'Headers') ensure you create/open the request (e.g.,
use the same helper used in other specs or add steps to click "New Request" and
set its name/body) so the header table exists; keep usage of
getTableCell(headerRow, 1), CodeMirror interactions, tooltip assertions and the
final save (page.keyboard.press('Control+s')) unchanged but only after the
request is created/opened.
🧹 Nitpick comments (3)
packages/bruno-app/src/components/EditableTable/index.js (1)
182-195: Make error tooltip keyboard-accessible.Consider making the error icon focusable and adding an aria label so keyboard users can discover the tooltip text.
♿ Suggested tweak
- const errorIcon = error && !isEmpty ? ( - <span> + const errorIcon = error && !isEmpty ? ( + <span + tabIndex={0} + role="img" + aria-label={error} + > <IconAlertCircle data-tooltip-id={`error-${row.uid}-${column.key}`} className="text-red-600 cursor-pointer ml-1" size={20} /> <Tooltip className="tooltip-mod" id={`error-${row.uid}-${column.key}`} html={error} /> </span> ) : null;Please verify react-tooltip shows on focus for focusable anchors.
Also applies to: 198-209, 226-226
tests/request/headers/header-validation.spec.ts (1)
58-60: Use cross‑platform shortcuts for Playwright.
Meta+aandControl+sare OS‑specific; useControlOrMetato keep tests portable.🔧 Suggested update
- await page.keyboard.press('Meta+a'); + await page.keyboard.press('ControlOrMeta+A'); ... - await page.keyboard.press('Control+s'); + await page.keyboard.press('ControlOrMeta+S');Please verify
ControlOrMetasyntax in the Playwright version used here.Also applies to: 92-93
packages/bruno-app/src/components/CollectionSettings/Headers/index.js (1)
36-50: Consider extracting shared header validation helper.The same
getRowErrorlogic appears in CollectionSettings, FolderSettings, and RequestHeaders. A small helper (e.g.,getHeaderRowErrorinutils/common/regex) would reduce duplication and keep error messages in sync.Also applies to: 121-121
sid-bruno
left a comment
There was a problem hiding this comment.
LGTM, waiting on tests
Description
Added validation for HTTP headers to show an error icon when users enter invalid header names or values.
JIRA
Contribution Checklist:
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.