fix: reverse sorting order for websocket messages#6652
fix: reverse sorting order for websocket messages#6652bijin-bruno merged 1 commit intousebruno:mainfrom
Conversation
WalkthroughThe sort multiplier in WSMessagesList was inverted from Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ 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.
Pull request overview
This PR attempts to fix the default sorting order of WebSocket messages by reversing the sorting logic. However, the change creates a critical inconsistency between how messages are sorted and which message receives focus.
- Negates the
orderparameter in the sorting comparator function - Intended to reverse the sorting direction for WebSocket messages
Comments suppressed due to low confidence (1)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js:193
- The change to negate the order parameter creates an inconsistency between the sorting logic and the focus logic.
After this change:
- When order = -1 (labeled "Latest Last"), the multiplication by (-order) becomes * 1, which sorts newer messages (higher seq/timestamp) to the beginning of the array. However, the inFocus logic on line 193 focuses on the last item (src.length - 1), which would now be an older message.
- When order = 1 (labeled "Latest First"), the multiplication becomes * -1, which sorts newer messages to the end. However, the focus logic targets the first item (idx === 0), which would be an older message.
This means the focused message will always be the opposite of what the UI labels suggest. If the sorting order needed to be reversed, the focus logic should also be updated to maintain consistency: swap the conditions so that order === -1 focuses on the first item and order === 1 focuses on the last item.
const ordered = messages.toSorted((x, y) => ((x.seq ?? x.timestamp) - (y.seq ?? y.timestamp)) * (-order));
return (
<StyledWrapper className="ws-messages-list flex flex-col">
{ordered.map((msg, idx, src) => {
const inFocus = order === -1 ? src.length - 1 === idx : idx === 0;
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
🧠 Learnings (1)
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.
Applied to files:
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js (1)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseSortOrder/index.js (1)
order(10-10)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
- GitHub Check: CLI Tests
- GitHub Check: Playwright E2E Tests
- GitHub Check: Unit Tests
Description
Correct the default sorting ordering of messages
Contribution Checklist:
Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
Publishing to New Package Managers
Please see here for more information.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.