refactor: simplify layout and styling in QueryUrl and HttpMethodSelector#6545
Conversation
…tor components; remove unused method selector width state
WalkthroughRefactors the RequestPane QueryUrl and HttpMethodSelector: removes measured dynamic widths and caret/container styles, switches to fit-content sizing, adds theme-aware method coloring and editable custom-method handling with uppercase-on-blur. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (1)**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (CODING_STANDARDS.md)
Files:
🧠 Learnings (2)📚 Learning: 2025-12-05T20:31:33.005ZApplied to files:
📚 Learning: 2025-12-17T21:41:24.730ZApplied to files:
🧬 Code graph analysis (2)packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.spec.js (1)
packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (3)
⏰ 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)
🔇 Additional comments (4)
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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js (1)
5-21: Fix method name typo:toLocaleLowerCase→toLowerCase.Line 20 uses
toLocaleLowerCase()which is not a standard JavaScript method. It should betoLowerCase().🔎 Proposed fix
- return colorMap[method.toLocaleLowerCase()]; + return colorMap[method.toLowerCase()];
Theme integration looks good otherwise.
Using
theme.request.methodsfor color mapping is the correct approach per the project's learnings about theme prop usage.Based on learnings, styled components should use theme props for colors rather than CSS variables.
🧹 Nitpick comments (1)
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js (1)
44-44: Consider syncingselectedMethodRefwith externalmethodprop changes.The
selectedMethodRefis initialized with themethodprop but never updates if themethodprop changes externally (e.g., from Redux state or parent component). This could lead to stale fallback values when the input is blurred empty.🔎 Proposed fix using useEffect
const HttpMethodSelector = ({ method = DEFAULT_METHOD, onMethodSelect }) => { const [isCustomMode, setIsCustomMode] = useState(false); const inputRef = useRef(); const selectedMethodRef = useRef(method); + + // Sync selectedMethodRef when method prop changes externally + useEffect(() => { + selectedMethodRef.current = method; + }, [method]);
Blur handler logic is sound.
The fallback behavior correctly uppercases non-empty input and falls back to
selectedMethodRefwhen empty, addressing the PR objective.Also applies to: 55-55, 62-70
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.jspackages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.js
💤 Files with no reviewable changes (1)
- packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.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/QueryUrl/HttpMethodSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.jspackages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
🧠 Learnings (3)
📚 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 **/*.{jsx,tsx} : Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any React component using the styled component
Applied to files:
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.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 **/*.{jsx,tsx} : Styled Components are used as wrappers to define both self and children components style; Tailwind classes are used specifically for layout based styles
Applied to files:
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js
📚 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/QueryUrl/HttpMethodSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.jspackages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js (1)
packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (3)
useTheme(28-28)method(30-30)onMethodSelect(70-78)
⏰ 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: Unit Tests
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
- GitHub Check: SSL Tests - macOS
- GitHub Check: Playwright E2E Tests
🔇 Additional comments (6)
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js (1)
40-41: LGTM! Clean responsive sizing approach.The change from fixed width to
fit-contentwithmax-width: 10chis a cleaner approach that adapts to content while maintaining reasonable constraints. This aligns well with the input field styling (w-fit max-w-[10ch]) in the HttpMethodSelector component.packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (3)
373-373: LGTM! Layout simplification achieved.Adding
w-fullensures the QueryUrl component takes the full available width, which is consistent with the removal of dynamic width calculations.
374-374: LGTM! Appropriate constraint for method selector.Replacing
flex-1withmin-w-fitensures the method selector container sizes to its content rather than expanding, which is the correct behavior for a method selector that should remain compact.
385-385: LGTM! Static layout is cleaner.The simplified static layout with
h-full w-full flex flex-rowis more maintainable than the previous dynamic styling approach.packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js (2)
26-26: LGTM! Padding removal aligns with layout simplification.Removing
pr-4is consistent with the caret styling removal and the new fit-content approach.
140-140: LGTM! Input styling aligns with display styling.The change to
px-3 w-fit max-w-[10ch]ensures the custom method input matches the normal method display's sizing and padding, providing consistent UX.
Description
Updated the Method Seelctor in HTTP Request to have a fixed max width and fixed the fallback method when a custom method is empty
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
Style
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.