feat: enhance HttpMethodSelector to include caret indicator when creating new request

[helloanoop]

The caret is present in the http method selector when creating new requests

Summary by CodeRabbit

• New Features
  • Added an optional caret icon to the HTTP method selector dropdown, providing improved visual indication of its interactive state.

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

[coderabbitai]

Walkthrough

This PR introduces a showCaret prop to the HttpMethodSelector component, allowing conditional rendering of a caret icon alongside the HTTP method. Corresponding styling updates and prop threading through child components enable this UI control.

Changes

Cohort / File(s)	Summary
Styling Updates packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js	Added .caret CSS class selector with theme-based muted color and fill styling for the caret icon element
Component Prop Threading packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js	Introduced showCaret prop to HttpMethodSelector and TriggerButton; TriggerButton conditionally renders IconCaretDown based on prop value; updated method signatures
Component Usage packages/bruno-app/src/components/Sidebar/NewRequest/index.js	Added showCaret prop to HttpMethodSelector invocation to enable caret visibility control

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• PR #6545: Modifies the same HttpMethodSelector and StyledWrapper components, removing caret styling and refactoring layout—potentially conflicting changes that warrant coordination.

Suggested labels

size/M

Suggested reviewers

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

Poem

A caret appears when asked to show,
Threading props from high to low,
Styled with care, both muted and bright,
✨ Selection feels just right! 🎯

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 clearly and specifically describes the main change: adding a caret indicator to the HttpMethodSelector component for new request creation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent 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 ec40d7f and fae0495.

📒 Files selected for processing (3)

• packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js
• packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
• packages/bruno-app/src/components/Sidebar/NewRequest/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() 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/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js
• packages/bruno-app/src/components/Sidebar/NewRequest/index.js
• packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js

🧠 Learnings (4)

📚 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 Component CSS might also change layout but Tailwind classes shouldn't define colors

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-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-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.js
• packages/bruno-app/src/components/Sidebar/NewRequest/index.js
• packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js

🧬 Code graph analysis (1)

packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js (3)

packages/bruno-app/src/components/Icons/IconCaretDown/index.js (1)

• IconCaretDown (3-16)

packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)

• method (30-30)

packages/bruno-lang/v2/src/bruToJson.js (1)

• method (589-589)

⏰ 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). (1)

• GitHub Check: SSL Tests - Linux

🔇 Additional comments (6)

packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js (4)

13-40: LGTM!

The TriggerButton correctly accepts and conditionally renders the caret icon. The prop destructuring and conditional logic are clean and follow the coding standards.

---

42-42: LGTM!

The HttpMethodSelector signature properly includes the showCaret prop with a sensible default of false, ensuring backward compatibility.

---

163-163: LGTM!

The showCaret prop is correctly threaded through to the TriggerButton component.

---

2-2: No action needed. The import from @tabler/icons is correct and consistent with the codebase pattern—all 40+ usages of IconCaretDown across the application import from @tabler/icons, not the unused local component.

Likely an incorrect or invalid review comment.

packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js (1)

51-54: LGTM!

The .caret styling correctly uses the theme prop for colors and follows the project's styled-components conventions.

packages/bruno-app/src/components/Sidebar/NewRequest/index.js (1)

510-510: LGTM!

The showCaret prop is correctly added to enable the caret indicator in the new request creation flow.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[Copilot]

Pull request overview

This PR enhances the HttpMethodSelector component to display a caret indicator when creating new HTTP requests, improving the visual indication that the method selector is interactive and can be expanded.

Key Changes:

• Added an optional showCaret prop to HttpMethodSelector that conditionally renders a caret down icon
• Updated the NewRequest dialog to enable the caret indicator when selecting HTTP methods

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/bruno-app/src/components/Sidebar/NewRequest/index.js	Passes showCaret prop to HttpMethodSelector in the new request dialog
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js	Implements showCaret prop support with default value of false, adds IconCaretDown rendering in TriggerButton
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js	Adds CSS styling for the caret icon using theme colors

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

CLI Test Results

  1 files  ±0  140 suites  ±0   57s ⏱️ +9s
235 tests ±0  235 ✅ ±0  0 💤 ±0  0 ❌ ±0 
301 runs  ±0  300 ✅ ±0  1 💤 ±0  0 ❌ ±0 

Results for commit fae0495. ± Comparison against base commit ec40d7f.