Skip to content

feat: enhance ResponsePane with persisted response format and view #6475

Merged
bijin-bruno merged 1 commit intousebruno:mainfrom
abhishek-bruno:feat/response-format-persistance
Dec 22, 2025
Merged

feat: enhance ResponsePane with persisted response format and view #6475
bijin-bruno merged 1 commit intousebruno:mainfrom
abhishek-bruno:feat/response-format-persistance

Conversation

@abhishek-bruno
Copy link
Member

@abhishek-bruno abhishek-bruno commented Dec 21, 2025

Description

  • 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.

Contribution Checklist:

  • I've used AI significantly to create this pull request
  • The pull request only addresses one issue or adds one feature.
  • The pull request does not introduce any breaking changes
  • I have added screenshots or gifs to help explain the change if applicable.
  • I have read the contribution guidelines.
  • Create an issue and link to the pull request.

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

  • New Features
    • Response format and view tab preferences are now persisted and automatically restored when switching between requests.

✏️ Tip: You can customize this high-level summary in your review settings.

…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.
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 21, 2025

Walkthrough

This 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

Cohort / File(s) Summary
Redux State Management
packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
Added responseFormat and responseViewTab state properties initialized to null; introduced updateResponseFormat and updateResponseViewTab reducers to modify these properties.
ResponsePane Component Refactoring
packages/bruno-app/src/components/ResponsePane/index.js
Converted selectedFormat and selectedTab from local state to Redux-backed state; added useCallback handlers (handleFormatChange, handleViewTabToggle) dispatching Redux actions; implemented initialization logic to populate Redux state from focusedTab; updated UI wiring to use new selectedViewTab derived state.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Initialization logic: Verify the useEffect conditions for populating Redux state only when focusedTab exists and persisted values are null.
  • State shape consistency: Ensure responseFormat and responseViewTab property names align between slice and component usage.
  • useCallback dependencies: Confirm dependency arrays capture necessary Redux dispatch and state changes.
  • Fallback handling: Review the fallback logic for selectedFormat and selectedViewTab when Redux values are not yet initialized.

Possibly related PRs

  • PR #6395: Modifies ResponsePane to refactor response access and base64/content-type logic—may interact with the persisted state changes.
  • PR #6388: Refactors ResponsePane with ResponsiveTabs and reorganizes right-side tab controls—closely related component restructuring.

Suggested reviewers

  • helloanoop
  • lohit-bruno
  • bijin-bruno
  • naman-bruno

Poem

Redux state now holds the format dear,
Tabs persist through every view,
No more local state to fear, ✨
Response panes remember too! 🎯

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: adding persistence for response format and view tab selection to ResponsePane via Redux state management.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 focusedTab object 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 === null and persistedViewTab === null, but for tabs created before this PR, these fields will be undefined (not null). 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

📥 Commits

Reviewing files that changed from the base of the PR and between 41efa85 and 8144fdb.

📒 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() not func ()
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.js
  • packages/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.js
  • packages/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 responseFormat and responseViewTab fields and their corresponding reducers follow the existing patterns in this file perfectly. The implementation is consistent with similar reducers like updateResponsePaneTab and updateResponsePaneScrollPosition.

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 useCallback with 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 selectedViewTab prop, maintaining consistency with the refactored state management.

Also applies to: 234-236

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants