fix: refresh code editor and query editor on resize#7889
fix: refresh code editor and query editor on resize#7889prateek-bruno wants to merge 1 commit intousebruno:mainfrom
Conversation
prateek-bruno
requested review from
bijin-bruno,
helloanoop,
lohit-bruno,
naman-bruno and
sid-bruno
as code owners
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds a ResizeObserver to the CodeEditor component that schedules an editor refresh via requestAnimationFrame on container size changes and cancels pending frames. The observer is attached on mount and disconnected on unmount. Adds a Playwright E2E test verifying CodeMirror remeasurement after layout toggles. ChangesCodeEditor Resize + Test
Sequence DiagramsequenceDiagram
actor DOM as DOM Container
participant RO as ResizeObserver
participant CE as CodeEditor
participant RAF as RequestAnimationFrame
participant CM as CodeMirror
DOM->>RO: element resize
RO->>CE: invoke callback
CE->>CE: cancel pending RAF (if any)
CE->>RAF: requestAnimationFrame(callback)
RAF->>CE: execute callback
CE->>CM: editor.refresh()
CM->>CM: remeasure & redraw
CE->>CE: clear resizeRefreshFrameId
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/bruno-app/src/components/CodeEditor/index.spec.js (1)
14-51: Add one cleanup-focused test for the new resize flow.This test covers the resize happy path well, but it should also verify unmount cleanup (
disconnectand pending frame cancellation) to lock in the full behavior of this change.Based on learnings,
Write behaviour-driven tests, not implementation-driven ones. Tests should validate real expected output and observable behaviour, not internal details or mocked-out logic unless absolutely necessary.
As per coding guidelines,Add tests for any new functionality or meaningful changes. If code is added, removed, or significantly modified, corresponding tests should be updated or created.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/bruno-app/src/components/CodeEditor/index.spec.js` around lines 14 - 51, Add a new test that verifies unmount/cleanup behavior for the new resize flow: instantiate CodeEditor, mock window.ResizeObserver to return an object with observe and disconnect (spy on disconnect), mock window.requestAnimationFrame to call the callback and return an id (e.g., 1) and mock window.cancelAnimationFrame (spy), call codeEditor.setupResizeObserver() and capture any returned cleanup function (or use codeEditor._resizeObserver.disconnect if no return), then invoke the cleanup and assert that disconnect was called and window.cancelAnimationFrame was called with the frame id, and finally trigger resizeCallback again and assert codeEditor.editor.refresh is not called a second time; reference CodeEditor, setupResizeObserver, editor.refresh, _resizeObserver.disconnect, and window.cancelAnimationFrame in the test.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/bruno-app/src/components/CodeEditor/index.spec.js`:
- Around line 14-51: Add a new test that verifies unmount/cleanup behavior for
the new resize flow: instantiate CodeEditor, mock window.ResizeObserver to
return an object with observe and disconnect (spy on disconnect), mock
window.requestAnimationFrame to call the callback and return an id (e.g., 1) and
mock window.cancelAnimationFrame (spy), call codeEditor.setupResizeObserver()
and capture any returned cleanup function (or use
codeEditor._resizeObserver.disconnect if no return), then invoke the cleanup and
assert that disconnect was called and window.cancelAnimationFrame was called
with the frame id, and finally trigger resizeCallback again and assert
codeEditor.editor.refresh is not called a second time; reference CodeEditor,
setupResizeObserver, editor.refresh, _resizeObserver.disconnect, and
window.cancelAnimationFrame in the test.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b6e5795d-1cec-4c48-aff4-0aeadc76c18d
📒 Files selected for processing (2)
packages/bruno-app/src/components/CodeEditor/index.jspackages/bruno-app/src/components/CodeEditor/index.spec.js
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@tests/request/editor-layout/code-editor-layout-resize.spec.ts`:
- Around line 33-47: The helper getEditorLayoutState reads CodeMirror internals
(cm.display.lastWrapHeight); instead replace that with observable DOM
measurements: stop accessing cm, instead return the CodeMirror root element's
boundingClientRect height and a stable DOM-derived metric (e.g., the editor
content container's scrollHeight or the .CodeMirror-scroll inner element height)
by querying the 'request-body-editor' test id and the '.CodeMirror' node; update
tests to compare those DOM heights before/after resize rather than relying on
cm.display.lastWrapHeight so assertions rely on public, observable layout
changes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 2b8f63d5-d6fb-4b44-a8ec-75f2843f65c0
📒 Files selected for processing (2)
packages/bruno-app/src/components/CodeEditor/index.spec.jstests/request/editor-layout/code-editor-layout-resize.spec.ts
💤 Files with no reviewable changes (1)
- packages/bruno-app/src/components/CodeEditor/index.spec.js
prateek-bruno
force-pushed
the
bugfix/artifacts-in-file-editor
branch
from
8907102 to
0f54131
Compare
Co-authored-by: Prateek Sunal <prtksunal@gmail.com>
prateek-bruno
force-pushed
the
bugfix/artifacts-in-file-editor
branch
from
bd3034b to
ea6911d
Compare
prateek-bruno
changed the title
prateek-bruno
changed the title
1 participant
Description
Jira
CodeEditor remains in a stale state when the resize happens due to the layout change horizontally <-> vertical.
This is because CodeEditor auto-refreshes only when window resize happens and not actually when the view switch resize happens to the size.
This PR adds a resize listener to CodeEditor and refreshes it on resize.
Before:
Screen.Recording.2026-04-29.at.5.55.27.PM.mov
After:
Screen.Recording.2026-04-29.at.5.56.21.PM.mov
Contribution Checklist:
Summary by CodeRabbit
Bug Fixes
Tests