feat: enhance ResponsePane with persisted response format and view #6475
Conversation
…b state management - Added Redux state management for response format and view tab in ResponsePane. - Implemented useCallback hooks for handling format changes and view tab toggling. - Updated component to utilize persisted values from Redux, improving user experience by maintaining state across sessions.
WalkthroughThis PR refactors the ResponsePane component to persist response format and view tab selection in Redux state. Two new reducers (updateResponseFormat and updateResponseViewTab) are added to the tabs slice, and the component is updated to read and dispatch actions for these persisted values instead of maintaining local state. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 0
🧹 Nitpick comments (2)
packages/bruno-app/src/components/ResponsePane/index.js (2)
55-65: Consider optimizing useEffect dependencies for performance.Including the
focusedTabobject reference as a dependency may cause this effect to run more frequently than necessary, since the object is recreated whenever the tabs array changes.While the guards prevent unwanted side effects, consider depending on more specific values:
🔎 Suggested optimization
- }, [initialFormat, initialTab, persistedFormat, persistedViewTab, focusedTab, item.uid, dispatch]); + }, [initialFormat, initialTab, persistedFormat, persistedViewTab, activeTabUid, item.uid, dispatch]);This avoids unnecessary effect runs when the tabs array is modified but the active tab hasn't actually changed.
59-64: Note: Existing tabs from prior versions will have undefined fields.The initialization checks
persistedFormat === nullandpersistedViewTab === null, but for tabs created before this PR, these fields will beundefined(notnull). The strict equality check will skip initialization for those tabs.The fallback chain still ensures correct behavior, so existing tabs will display properly but won't persist their format/view until users explicitly change them. This is likely acceptable, but if you want consistent initialization for existing tabs, consider:
🔎 Alternative check for both null and undefined
- if (persistedFormat === null) { + if (persistedFormat == null) { // checks both null and undefined dispatch(updateResponseFormat({ uid: item.uid, responseFormat: initialFormat })); } - if (persistedViewTab === null) { + if (persistedViewTab == null) { // checks both null and undefined dispatch(updateResponseViewTab({ uid: item.uid, responseViewTab: initialTab })); }Note: This uses loose equality (
==) which is generally discouraged, but is idiomatic for null/undefined checks. Alternatively, use explicit checks:persistedFormat === null || persistedFormat === undefined.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bruno-app/src/components/ResponsePane/index.js(4 hunks)packages/bruno-app/src/providers/ReduxStore/slices/tabs.js(4 hunks)
🧰 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/providers/ReduxStore/slices/tabs.jspackages/bruno-app/src/components/ResponsePane/index.js
🧠 Learnings (2)
📚 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/providers/ReduxStore/slices/tabs.jspackages/bruno-app/src/components/ResponsePane/index.js
📚 Learning: 2025-12-02T09:45:31.709Z
Learnt from: sid-bruno
Repo: usebruno/bruno PR: 6266
File: packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js:38-38
Timestamp: 2025-12-02T09:45:31.709Z
Learning: In the ResponseCopy component (packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js), the copy button is intentionally disabled using `!response.data` to prevent copying stream resets which result in empty strings.
Applied to files:
packages/bruno-app/src/components/ResponsePane/index.js
🧬 Code graph analysis (2)
packages/bruno-app/src/providers/ReduxStore/slices/tabs.js (1)
packages/bruno-cli/src/runner/prepare-request.js (1)
find(4-4)
packages/bruno-app/src/components/ResponsePane/index.js (1)
packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (4)
useInitialResponseFormat(45-58)useInitialResponseFormat(45-58)useResponsePreviewFormatOptions(61-89)useResponsePreviewFormatOptions(61-89)
⏰ 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). (6)
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Linux
- GitHub Check: CLI Tests
- GitHub Check: Playwright E2E Tests
- GitHub Check: Unit Tests
🔇 Additional comments (4)
packages/bruno-app/src/providers/ReduxStore/slices/tabs.js (1)
62-63: LGTM - Clean Redux state additions.The new
responseFormatandresponseViewTabfields and their corresponding reducers follow the existing patterns in this file perfectly. The implementation is consistent with similar reducers likeupdateResponsePaneTabandupdateResponsePaneScrollPosition.Also applies to: 84-85, 154-167, 252-253
packages/bruno-app/src/components/ResponsePane/index.js (3)
1-1: LGTM - Solid state management refactor.The imports and callback handlers are well-structured. Using
useCallbackwith correct dependencies ensures the handlers remain stable across renders.Also applies to: 4-4, 67-74
41-53: Well-designed fallback chain for state derivation.The nullish coalescing chain (
persistedFormat ?? initialFormat ?? 'raw') elegantly handles the progression from persisted user choice → detected format → fallback default. This ensures the component always has valid values even during async content-type detection.
162-162: Props correctly updated to use new Redux state.The QueryResultTypeSelector now receives the new handlers and the renamed
selectedViewTabprop, maintaining consistency with the refactored state management.Also applies to: 234-236
Description
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.