fix: Query URL overflow pushes the action buttons outside view in gRPC and HTTP#6706
Conversation
…C and HTTP - Updated the QueryUrl component to handle text overflow. Now, overflow triggers scroll and does not move the action buttons out of view. - Updated the GrpcQueryUrl component to handle text overflow. Now, overflow triggers scroll and does not move the action buttons out of view.
WalkthroughRestructures gRPC and HTTP request URL editor UIs to reorganize control layouts, enable overflow scrolling, and reposition action buttons. Core request handling logic and event routing remain unchanged. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 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.
Actionable comments posted: 1
🤖 Fix all issues with AI Agents
In @packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js:
- Around line 403-412: The End button for client-streaming methods lacks the
infotip tooltip used by the Cancel button; update the JSX where
isClientStreamingMethod renders (the element with data-testid
"grpc-end-connection-button" and the IconCheck inside) to wrap or add the same
"infotip" class and tooltip text used by the Cancel button so the End button
shows the same infotip on hover and matches UX consistency (preserve the onClick
handler handleEndConnection and IconCheck props).
🧹 Nitpick comments (2)
packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)
394-442: LGTM - Action buttons successfully repositioned outside scrollable container.The restructuring moves action buttons (Generate Code, Save, Send/Cancel) into a separate container outside the URL input area. Event handlers properly use
stopPropagationwhere needed to prevent unintended request triggering. The entire action container being clickable to send requests is an intentional design choice.Minor observation: The large clickable area (entire action container triggers
handleRun) means clicking between buttons will send the request. This is likely intentional but consider whether this meets your UX goals.packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js (1)
337-360: Looks good, but consider extracting the loading state.The conditional logic is correct. For readability, you could extract the loading state:
const isLoadingMethods = isReflectionMode ? reflectionManagement.isLoadingMethods : protoFileManagement.isLoadingMethods;Then simplify line 354 to:
className={`${isLoadingMethods ? 'animate-spin' : 'cursor-pointer'}`}
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.jspackages/bruno-app/src/components/RequestPane/QueryUrl/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/RequestPane/GrpcQueryUrl/index.jspackages/bruno-app/src/components/RequestPane/QueryUrl/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/RequestPane/GrpcQueryUrl/index.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.js
⏰ 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: CLI Tests
- GitHub Check: SSL Tests - Windows
- GitHub Check: Unit Tests
- GitHub Check: Playwright E2E Tests
- GitHub Check: SSL Tests - Linux
- GitHub Check: SSL Tests - macOS
🔇 Additional comments (3)
packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)
378-378: LGTM - Overflow fix correctly implemented.Adding
overflow-autoandpr-2enables horizontal scrolling when URLs are long while maintaining proper spacing. This directly addresses the stated issue.packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js (2)
303-316: LGTM! Overflow handling looks correct.The
overflow-auto pr-2approach properly addresses the URL overflow issue. Consider usingoverflow-x-autoif you only want horizontal scrolling (prevents unexpected vertical scroll bars), but this works fine as-is.
318-335: LGTM!The flex container with
gap-3provides consistent spacing between action buttons, andmr-2prevents buttons from touching the container edge. Props are correctly passed to ProtoFileDropdown.
| {isClientStreamingMethod && ( | ||
| <div onClick={handleEndConnection} data-testid="grpc-end-connection-button"> | ||
| <IconCheck | ||
| color={theme.colors.text.green} | ||
| strokeWidth={2} | ||
| size={20} | ||
| className="cursor-pointer" | ||
| /> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
Missing infotip pattern on the End button.
The Cancel button uses the infotip class with tooltip text, but the End button doesn't. This creates an inconsistent UX where Cancel shows a tooltip but End doesn't.
🔎 Proposed fix
{isClientStreamingMethod && (
- <div onClick={handleEndConnection} data-testid="grpc-end-connection-button">
+ <div className="infotip" onClick={handleEndConnection} data-testid="grpc-end-connection-button">
<IconCheck
color={theme.colors.text.green}
strokeWidth={2}
size={20}
className="cursor-pointer"
/>
+ <span className="infotip-text text-xs">End stream</span>
</div>
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {isClientStreamingMethod && ( | |
| <div onClick={handleEndConnection} data-testid="grpc-end-connection-button"> | |
| <IconCheck | |
| color={theme.colors.text.green} | |
| strokeWidth={2} | |
| size={20} | |
| className="cursor-pointer" | |
| /> | |
| </div> | |
| )} | |
| {isClientStreamingMethod && ( | |
| <div className="infotip" onClick={handleEndConnection} data-testid="grpc-end-connection-button"> | |
| <IconCheck | |
| color={theme.colors.text.green} | |
| strokeWidth={2} | |
| size={20} | |
| className="cursor-pointer" | |
| /> | |
| <span className="infotip-text text-xs">End stream</span> | |
| </div> | |
| )} |
🤖 Prompt for AI Agents
In @packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js around
lines 403 - 412, The End button for client-streaming methods lacks the infotip
tooltip used by the Cancel button; update the JSX where isClientStreamingMethod
renders (the element with data-testid "grpc-end-connection-button" and the
IconCheck inside) to wrap or add the same "infotip" class and tooltip text used
by the Cancel button so the End button shows the same infotip on hover and
matches UX consistency (preserve the onClick handler handleEndConnection and
IconCheck props).
…C and HTTP (#6706) - Updated the QueryUrl component to handle text overflow. Now, overflow triggers scroll and does not move the action buttons out of view. - Updated the GrpcQueryUrl component to handle text overflow. Now, overflow triggers scroll and does not move the action buttons out of view.
Description
QueryUrlcomponent to handle text overflow. Now, overflow triggers scroll and does not move the action buttons out of view.GrpcQueryUrlcomponent to handle text overflow. Now, overflow triggers scroll and does not move the action buttons out of view.This PR addresses #6705
Contribution Checklist:
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.