Conversation
WalkthroughThis PR refactors gRPC UI components by introducing styled-component wrappers, reorganizing DOM structures with new CSS classes, adding theming support via theme tokens, and updating gRPC icons to accept configurable colors. It also removes gRPC-specific badge logic from the general QueryUrl component. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 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
🧹 Nitpick comments (1)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js (1)
154-154: Remove trailing space in className.Line 154 has a trailing space in the className string:
"mt-2 mb-3 ". This should be cleaned up.🔎 Proposed fix
- className="mt-2 mb-3 " + className="mt-2 mb-3"
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ImportPathsTab/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/themes/light/light-monochrome.jspackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/schema/oss.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/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.jspackages/bruno-app/src/themes/schema/oss.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ImportPathsTab/StyledWrapper.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/themes/light/light-monochrome.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.js
🧠 Learnings (4)
📚 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/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.jspackages/bruno-app/src/themes/schema/oss.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ImportPathsTab/StyledWrapper.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/themes/light/light-monochrome.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.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/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/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 **/*.{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/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ImportPathsTab/StyledWrapper.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/dark/vscode.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 Component CSS might also change layout but Tailwind classes shouldn't define colors
Applied to files:
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ImportPathsTab/StyledWrapper.js
🧬 Code graph analysis (10)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.js (1)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.js (1)
StyledWrapper(3-125)
packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (3)
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js (1)
HttpMethodSelector(41-167)packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js (2)
method(36-36)onMethodSelect(62-79)packages/bruno-app/src/components/RequestTabs/RequestTab/index.js (1)
method(43-55)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.js (1)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.js (1)
StyledWrapper(3-66)
packages/bruno-app/src/themes/light/vscode.js (1)
packages/bruno-app/src/themes/dark/vscode.js (1)
colors(5-60)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js (4)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js (4)
selectedGrpcMethod(45-48)onMethodDropdownCreate(81-81)method(36-36)handleGrpcMethodSelect(222-229)packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.js (1)
StyledWrapper(3-125)packages/bruno-app/src/components/Dropdown/index.js (1)
Dropdown(5-27)packages/bruno-app/src/components/SearchInput/index.js (1)
SearchInput(4-55)
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (2)
packages/bruno-app/src/themes/dark/catppuccin-frappe.js (1)
colors(6-52)packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)
colors(6-52)
packages/bruno-app/src/themes/dark/dark.js (3)
packages/bruno-app/src/themes/light/light.js (2)
palette(3-57)palette(3-57)packages/bruno-app/src/themes/DesignSystem/Theme.stories.jsx (4)
palette(18-18)palette(55-55)palette(86-86)palette(221-221)packages/bruno-app/src/themes/DesignSystem/Overview.jsx (3)
palette(119-119)palette(327-327)palette(588-588)
packages/bruno-app/src/themes/dark/vscode.js (3)
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
colors(1-37)packages/bruno-app/src/themes/dark/dark.js (1)
colors(80-85)packages/bruno-app/src/themes/dark/nord.js (1)
colors(9-57)
packages/bruno-app/src/themes/light/light.js (1)
packages/bruno-app/src/themes/dark/dark.js (2)
palette(3-57)palette(3-57)
packages/bruno-app/src/themes/dark/catppuccin-frappe.js (1)
packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)
colors(6-52)
⏰ 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 - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - Linux
- GitHub Check: CLI Tests
- GitHub Check: Playwright E2E Tests
🔇 Additional comments (20)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ImportPathsTab/StyledWrapper.js (1)
98-103: LGTM! Checkbox accent color properly themed.The
accent-colorCSS property correctly uses the theme's accent color via the styled-component theme prop, ensuring consistent checkbox styling across themes.Based on learnings: Styled component's theme prop is correctly used for managing CSS colors.
packages/bruno-app/src/themes/dark/vscode.js (2)
3-3: Polished import added for rgba functionality.The
rgbaimport from 'polished' is required for the new methodDropdown transparency effects.
558-575: LGTM! methodDropdown theme configuration added.The new methodDropdown configuration follows the consistent structure used across all themes in this PR, with proper color assignments from the VS Code palette. The use of
rgba()for hover and selected states provides appropriate transparency effects.packages/bruno-app/src/themes/light/catppuccin-latte.js (2)
3-3: Polished import added for rgba functionality.The
rgbaimport is required for transparency effects in the methodDropdown configuration.
550-567: LGTM! Catppuccin Latte methodDropdown theme added.The methodDropdown configuration uses appropriate colors from the Catppuccin Latte palette with consistent rgba-based transparency for interactive states.
packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)
553-570: LGTM! Catppuccin Mocha methodDropdown theme added.The methodDropdown configuration uses the Catppuccin Mocha palette with appropriate rgba-based transparency effects. Structure is consistent with other theme implementations in this PR.
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
538-555: LGTM! Dark monochrome methodDropdown theme added.The methodDropdown configuration uses the monochrome palette with string-based rgba values for transparency effects. Structure is consistent with other theme implementations.
packages/bruno-app/src/themes/dark/catppuccin-frappe.js (1)
553-570: LGTM! Catppuccin Frappé methodDropdown theme added.The methodDropdown configuration uses the Catppuccin Frappé palette with rgba-based transparency effects. Structure is consistent with other theme implementations in this PR.
packages/bruno-app/src/themes/light/light-monochrome.js (1)
536-553: LGTM! Light monochrome methodDropdown theme added.The methodDropdown configuration uses the light monochrome palette with string-based rgba values for transparency effects. Structure is consistent with other theme implementations.
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (1)
553-570: LGTM! Catppuccin Macchiato methodDropdown theme added.The methodDropdown configuration uses the Catppuccin Macchiato palette with rgba-based transparency effects. Structure is consistent with other theme implementations in this PR.
packages/bruno-app/src/themes/dark/dark-pastel.js (1)
555-573: LGTM: methodDropdown configuration is well-structured.The new methodDropdown theming follows the established pattern and uses appropriate color tokens from the Dark Pastel palette.
packages/bruno-app/src/themes/dark/nord.js (1)
554-572: LGTM: Nord theme methodDropdown configuration.The methodDropdown styling properly uses Nord color palette and maintains consistency with the theme's design language.
packages/bruno-app/src/themes/schema/oss.js (1)
990-1035: LGTM: Schema definition is comprehensive and well-structured.The methodDropdown schema properly defines all required fields with appropriate constraints. The structure enforces consistency across theme implementations.
packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)
374-374: LGTM: Simplified to always render HttpMethodSelector.The removal of the isGrpc conditional aligns with the architectural separation where GrpcQueryUrl handles gRPC-specific UI separately.
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js (1)
300-300: LGTM: Correct theme token for gRPC indicator.The change to use
theme.request.grpcproperly aligns the color with the gRPC-specific theme token.packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.js (2)
17-21: Verify theme token reference for ProtoFileDropdown.Line 20 references
theme.grpc.methodDropdown.methodItem.text, but this StyledWrapper is for ProtoFileDropdown, not MethodDropdown. Consider whethertheme.grpc.protoFiles.item.textwould be more semantically correct, given that protoFiles theming exists and this component is specifically for proto file selection.Suggested alternative
.proto-file-dropdown-text { font-size: ${(props) => props.theme.font.size.xs}; white-space: nowrap; - color: ${(props) => props.theme.grpc.methodDropdown.methodItem.text}; + color: ${(props) => props.theme.grpc.protoFiles.item.text}; }
1-68: LGTM: StyledWrapper structure follows styled-components best practices.The component properly uses theme tokens for colors and follows the established pattern of class-based styling with theme prop access.
packages/bruno-app/src/themes/light/light.js (1)
1-1: LGTM: Light theme methodDropdown configuration with proper transparency.The addition of
rgbafrom polished enables appropriate transparency for the selected state, and the configuration follows the established light theme patterns.Also applies to: 575-593
packages/bruno-app/src/themes/dark/dark.js (1)
585-603: LGTM: Dark theme methodDropdown configuration.The methodDropdown styling properly uses dark theme palette constants and maintains consistency with the light theme structure. The use of
rgbafor selected state transparency is appropriate.packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js (1)
159-159: Verify keyboard event delegation.Line 159 attaches
onKeyDown={handleKeyDown}to each.method-dropdown-service-groupdiv, which could result in multiple event handlers being registered. The keyboard navigation logic expects a singlehandleKeyDownhandler. Consider whether the event handler should remain on the.method-dropdown-listcontainer (line 157) instead, or if the current delegation pattern is intentional.
| <div ref={ref} className="method-dropdown-trigger" data-testid="grpc-method-dropdown-trigger"> | ||
| {selectedGrpcMethod && <div className="method-dropdown-trigger-icon">{getIconForMethodType(selectedGrpcMethod.type)}</div>} | ||
| <span className="method-dropdown-trigger-text" data-testid="selected-grpc-method-name"> | ||
| {selectedGrpcMethod ? (selectedGrpcMethod.path.split('.').at(-1) || selectedGrpcMethod.path) : 'Select Method'} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Read the specific file to see the actual implementation
cat -n packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js | head -100Repository: usebruno/bruno
Length of output: 4138
🏁 Script executed:
# Search for how method paths are actually used in the codebase
rg -nC5 "method\.path\s*\." --type=js --type=jsx --type=ts --type=tsx | head -100Repository: usebruno/bruno
Length of output: 85
🏁 Script executed:
# Search for gRPC method path patterns and delimiters
rg "split\(['\"]([./])['\"]" --type=js --type=jsx --type=ts --type=tsx | head -50Repository: usebruno/bruno
Length of output: 85
Fix path delimiter mismatch for method display.
Line 79 splits the method path by '.' to extract the method name, but groupMethodsByService (lines 38-41) splits by '/'. For gRPC paths in format /package.service/method, line 79's logic returns "service/method" instead of just "method". Use consistent delimiters—either extract the method name before splitting by dot, or split by slash and take the last segment.
🤖 Prompt for AI Agents
In
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js
around line 79, the displayed method name is extracted by splitting
selectedGrpcMethod.path on '.' which mismatches groupMethodsByService (lines
38-41) that splits on '/' and results in "service/method" being shown; update
the extraction to use the slash delimiter (split on '/' and take the last
segment) or first strip the leading '/' and then split by '/' to take the final
segment so the displayed label is just the method name, ensuring consistent
delimiter usage with groupMethodsByService.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/TabNavigation/StyledWrapper.js (1)
5-5:theme.dropdown.separatorusage is consistent with existing patterns, though the property name is semantically misaligned.The theme property exists across all themes and is already used as a background-color in similar contexts (e.g.,
MethodDropdown/StyledWrapper.jsline 57). However, "separator" semantically refers to dividing line colors, not container backgrounds. While this follows the established pattern in the codebase, consider usingdropdown.bgor a gRPC-specific property for improved maintainability if a comprehensive theme refactor is planned.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/TabNavigation/StyledWrapper.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/themes/light/vscode.js
🚧 Files skipped from review as they are similar to previous changes (6)
- packages/bruno-app/src/themes/dark/vscode.js
- packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.js
- packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.js
- packages/bruno-app/src/themes/light/vscode.js
- packages/bruno-app/src/themes/light/catppuccin-latte.js
- packages/bruno-app/src/themes/light/light.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/Tabs/TabNavigation/StyledWrapper.js
🧠 Learnings (4)
📓 Common learnings
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
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
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
📚 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/GrpcQueryUrl/Tabs/TabNavigation/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/GrpcQueryUrl/Tabs/TabNavigation/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/GrpcQueryUrl/Tabs/TabNavigation/StyledWrapper.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: SSL Tests - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: Unit Tests
- GitHub Check: CLI Tests
- GitHub Check: SSL Tests - Linux
- GitHub Check: Playwright E2E Tests
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js (1)
78-84: Path delimiter mismatch for method display.Line 81 splits by
'.'butgroupMethodsByService(lines 40-43) splits by'/'. For gRPC paths like/package.service/method, the current logic would showservice/methodinstead of justmethod.🔎 Suggested fix
- {selectedGrpcMethod ? (selectedGrpcMethod.path.split('.').at(-1) || selectedGrpcMethod.path) : 'Select Method'} + {selectedGrpcMethod ? (selectedGrpcMethod.path.split('/').at(-1) || selectedGrpcMethod.path) : 'Select Method'}
🧹 Nitpick comments (2)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js (2)
61-74: Consider semantic clarity for theme token mapping.Mapping gRPC streaming types to HTTP method colors (
get,post,put) works but is semantically misleading. Consider adding dedicated gRPC theme tokens (e.g.,theme.grpc.unary,theme.grpc.clientStreaming) for clearer intent, or add a comment explaining the color reuse rationale.
144-158: Trailing space in className.Minor nit:
className="mt-2 mb-3 "on line 156 has a trailing space.- className="mt-2 mb-3 " + className="mt-2 mb-3"
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bruno-app/src/components/Icons/Grpc/index.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/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/MethodDropdown/index.jspackages/bruno-app/src/components/Icons/Grpc/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/MethodDropdown/index.jspackages/bruno-app/src/components/Icons/Grpc/index.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js (4)
packages/bruno-app/src/components/Icons/Grpc/index.js (2)
IconGrpcUnary(4-23)IconGrpcUnary(4-23)packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.js (1)
StyledWrapper(4-126)packages/bruno-app/src/components/Dropdown/index.js (1)
Dropdown(5-27)packages/bruno-app/src/components/SearchInput/index.js (1)
SearchInput(4-55)
⏰ 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 - Linux
- GitHub Check: SSL Tests - macOS
- GitHub Check: CLI Tests
- GitHub Check: Playwright E2E Tests
- GitHub Check: Unit Tests
🔇 Additional comments (4)
packages/bruno-app/src/components/Icons/Grpc/index.js (2)
4-23: LGTM! Clean refactor for color customization.Adding the
colorprop with sensible defaults enables theming while maintaining backward compatibility. The SVG stroke attributes are correctly bound.
26-93: Remaining icon components follow the same pattern — looks good.Consistent implementation across all four gRPC icon variants. The default color values visually differentiate the streaming types appropriately.
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js (2)
12-21: Theme integration looks solid.Proper usage of
useTheme()hook andStyledWrapperfor consistent styling.
159-201: Grouped list rendering and keyboard navigation look correct.The global index calculation for keyboard navigation is accurate, and the empty state fallback is a good UX addition. Class names align with the StyledWrapper definitions.
Description
Add themes within grpc
Screen.Recording.2025-12-30.at.10.24.31.PM.mov
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
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.