Skip to content

fix: copy response based on preview toggle and selected format#6436

Merged
sid-bruno merged 2 commits intousebruno:mainfrom
pooja-bruno:fix/response-copy-respects-preview-format
Dec 22, 2025
Merged

fix: copy response based on preview toggle and selected format#6436
sid-bruno merged 2 commits intousebruno:mainfrom
pooja-bruno:fix/response-copy-respects-preview-format

Conversation

@pooja-bruno
Copy link
Collaborator

@pooja-bruno pooja-bruno commented Dec 17, 2025

Description

Fixed response copy functionality to respect the preview toggle state and selected format.

Before:

  • Copy always used the raw response data regardless of the selected format or preview state

After:

  • When preview is OFF (editor mode): Copy respects the selected format (Base64, Hex, JSON, etc.)
  • When preview is ON: Copy uses raw data as displayed in TextPreview

JIRA

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.
Screen.Recording.2025-12-17.at.6.56.43.PM.mov

Summary by CodeRabbit

  • Bug Fixes

    • Enhanced response copy functionality to respect selected format and active tab (preview vs. editor mode), ensuring copied content matches the displayed format.
  • Tests

    • Added test coverage for copying responses in editor mode with format selection.

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

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 17, 2025

Warning

Rate limit exceeded

@pooja-bruno has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 19 minutes and 38 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 27e12cf and 704d94b.

📒 Files selected for processing (4)
  • packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js (2 hunks)
  • packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js (2 hunks)
  • packages/bruno-app/src/components/ResponsePane/index.js (1 hunks)
  • tests/response/response-actions.spec.ts (2 hunks)

Walkthrough

The PR extends response copy functionality by threading selectedFormat, selectedTab, data, and dataBuffer props through ResponsePane → ResponsePaneActions → ResponseCopy. ResponseCopy's hook now uses useMemo to compute copy text conditionally: preview tab copies raw data, editor mode applies formatResponse, with fallback JSON stringification. Tests add utilities for format switching and validate Base64 encoding of copied responses.

Changes

Cohort / File(s) Summary
Response Copy Logic
packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js
Updated useResponseCopy and ResponseCopy component signatures to accept selectedFormat, selectedTab, data, dataBuffer. Introduced useMemo-based textToCopy computation that conditionally formats response based on active tab and editor state. Changed hasData derivation from response.data to data prop.
Response Pane Integration
packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js, packages/bruno-app/src/components/ResponsePane/index.js
Added selectedFormat, selectedTab, data, dataBuffer props to ResponsePaneActions signature. Threaded props through ResponsePane render to ResponsePaneActions and down to ResponseCopy.
Tests
tests/response/response-actions.spec.ts
Added switchResponseFormat and switchToEditorTab utilities. Introduced test case validating clipboard copy contains Base64 encoding after format switch.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

  • ResponseCopy's useMemo logic for conditional text selection across preview/editor modes
  • Verification of formatResponse import and correct conditional application
  • Test assertion alignment with Base64 encoding expectation

Possibly related PRs

  • PR #6266: Extends the ResponseCopy/ResponsePaneActions flow with additional refinements to the same signature and copy logic changes.
  • PR #6100: Introduced formatResponse utility and response format selection infrastructure (selectedFormat, selectedTab) that this PR builds upon.

Suggested reviewers

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

Poem

📋 Copy that! Format flows through,
Props cascade down the pane's pipeline true,
Base64, JSON—pick your poison,
The clipboard now speaks every notation. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main change: fixing response copying to respect both the preview toggle and selected format, which aligns with the PR's core functionality modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

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 (1)
packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js (1)

13-23: Consider explicit editor mode check for clarity.

The logic correctly handles preview vs. editor mode, but the condition at line 19 relies on implicit flow (preview returns early). For better readability, consider explicitly checking the tab:

  // If preview is on, copy raw data (what's shown in TextPreview)
  if (selectedTab === 'preview') {
    return typeof data === 'string' ? data : JSON.stringify(data, null, 2);
  }
  // If editor is on, copy formatted data based on selected format
- if (selectedFormat && data && dataBuffer) {
+ if (selectedTab === 'editor' && selectedFormat && data && dataBuffer) {
    return formatResponse(data, dataBuffer, selectedFormat, null);
  }
  return typeof data === 'string' ? data : JSON.stringify(data, null, 2);

This makes the intent clearer and guards against unexpected selectedTab values.

📜 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 4c1fba6 and 27e12cf.

📒 Files selected for processing (4)
  • packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js (2 hunks)
  • packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js (2 hunks)
  • packages/bruno-app/src/components/ResponsePane/index.js (1 hunks)
  • tests/response/response-actions.spec.ts (2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{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/components/ResponsePane/ResponsePaneActions/index.js
  • packages/bruno-app/src/components/ResponsePane/index.js
  • packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js
  • tests/response/response-actions.spec.ts
tests/**/**.*

⚙️ CodeRabbit configuration file

tests/**/**.*: Review the following e2e test code written using the Playwright test library. Ensure that:

  • Follow best practices for Playwright code and e2e automation

  • Try to reduce usage of page.waitForTimeout(); in code unless absolutely necessary and the locator cannot be found using existing expect() playwright calls

  • Avoid using page.pause() in code

  • Use locator variables for locators

  • Avoid using test.only

  • Use multiple assertions

  • Promote the use of test.step as much as possible so the generated reports are easier to read

  • Ensure that the fixtures like the collections are nested inside the fixtures folder

    Fixture Example*: Here's an example of possible fixture and test pair

    .
    ├── fixtures
    │   └── collection
    │       ├── base.bru
    │       ├── bruno.json
    │       ├── collection.bru
    │       ├── ws-test-request-with-headers.bru
    │       ├── ws-test-request-with-subproto.bru
    │       └── ws-test-request.bru
    ├── connection.spec.ts # <- Depends on the collection in ./fixtures/collection
    ├── headers.spec.ts
    ├── persistence.spec.ts
    ├── variable-interpolation
    │   ├── fixtures
    │   │   └── collection
    │   │       ├── environments
    │   │       ├── bruno.json
    │   │       └── ws-interpolation-test.bru
    │   ├── init-user-data
    │   └── variable-interpolation.spec.ts # <- Depends on the collection in ./variable-interpolation/fixtures/collection
    └── subproto.spec.ts
    

Files:

  • tests/response/response-actions.spec.ts
🧠 Learnings (4)
📓 Common learnings
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.
📚 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/ResponsePaneActions/index.js
  • packages/bruno-app/src/components/ResponsePane/index.js
  • packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.test.{js,jsx,ts,tsx} : Add tests for any new functionality or meaningful changes. If code is added, removed, or significantly modified, corresponding tests should be updated or created

Applied to files:

  • tests/response/response-actions.spec.ts
📚 Learning: 2025-12-16T07:16:08.934Z
Learnt from: sanish-bruno
Repo: usebruno/bruno PR: 6090
File: tests/scripting/hooks/init-user-data/ui-state-snapshot.json:1-8
Timestamp: 2025-12-16T07:16:08.934Z
Learning: For e2e tests in the bruno repository: Collections that are shared between CLI and UI tests (comprehensive test suites testing core functionality) should be placed in `packages/bruno-tests/` to avoid duplication. The `tests/**/fixtures/collection` pattern should be used for test-specific collections that test particular UI behaviors or are specific to a single test file.

Applied to files:

  • tests/response/response-actions.spec.ts
🧬 Code graph analysis (3)
packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js (3)
packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js (1)
  • ResponseCopy (47-96)
packages/bruno-app/src/components/ResponsePane/index.js (2)
  • selectedFormat (38-38)
  • selectedTab (39-39)
packages/bruno-app/src/utils/common/index.js (2)
  • dataBuffer (284-284)
  • dataBuffer (388-388)
packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js (3)
packages/bruno-app/src/components/ResponsePane/index.js (2)
  • selectedFormat (38-38)
  • selectedTab (39-39)
packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js (2)
  • selectedFormat (19-19)
  • selectedTab (20-20)
packages/bruno-app/src/utils/common/index.js (4)
  • dataBuffer (284-284)
  • dataBuffer (388-388)
  • formatResponse (277-433)
  • formatResponse (277-433)
tests/response/response-actions.spec.ts (2)
tests/utils/page/actions.ts (6)
  • createCollection (717-717)
  • createRequest (718-718)
  • sendRequest (731-731)
  • switchToEditorTab (740-740)
  • switchResponseFormat (738-738)
  • clickResponseAction (741-741)
packages/bruno-app/src/utils/codemirror/brunoVarInfo.spec.js (1)
  • clipboardText (311-311)
⏰ 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: Playwright E2E Tests
  • GitHub Check: CLI Tests
  • GitHub Check: Unit Tests
  • GitHub Check: SSL Tests - Linux
🔇 Additional comments (10)
packages/bruno-app/src/components/ResponsePane/index.js (1)

235-244: LGTM! Props threading is clean.

The expanded prop surface correctly passes UI state (selectedFormat, selectedTab) and response data (data, dataBuffer) to ResponsePaneActions, enabling downstream components to determine copy behavior based on preview toggle and format selection.

packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js (2)

40-40: LGTM! Signature expanded correctly.

Component now accepts the new props required for format-aware copy behavior.


114-121: LGTM! Props forwarded to ResponseCopy.

All new props are correctly passed to ResponseCopy, enabling it to compute copy text based on UI state.

tests/response/response-actions.spec.ts (2)

35-62: LGTM! Test coverage for Base64 copy is thorough.

The test properly exercises the new format-aware copy functionality:

  • Uses test.step for readable reporting
  • Multiple assertions (visibility + clipboard content)
  • Validates Base64 encoding ("cG9uZw==" for "pong")
  • Follows Playwright best practices per coding guidelines

7-9: Functions are properly exported.

Both switchResponseFormat and switchToEditorTab are correctly defined and exported from ../utils/page/actions. The imports are valid.

packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js (5)

1-1: LGTM! Added useMemo for computed copy text.


7-7: LGTM! formatResponse import added.


10-10: LGTM! Hook signature expanded correctly.


44-44: LGTM! hasData now uses data prop.

The change from !!response.data to !!data is correct and aligns with the new prop structure. This maintains the intentional behavior of disabling the copy button when there's no data, preventing copying empty strings from stream resets.

Based on learnings, this behavior is intentional to prevent copying stream resets.


47-48: LGTM! Component signature and hook call updated.

Props and hook invocation correctly aligned with the new format-aware copy behavior.

@pooja-bruno pooja-bruno force-pushed the fix/response-copy-respects-preview-format branch from 27e12cf to a2a07fd Compare December 18, 2025 12:20
@sid-bruno sid-bruno merged commit 669c99f into usebruno:main Dec 22, 2025
8 checks passed
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