feat(sandbox): create a dropdown selector for sandbox mode #6519
Conversation
bijin-bruno
requested review from
helloanoop,
lohit-bruno and
naman-bruno
as code owners
WalkthroughThe JavaScript sandbox mode component is enhanced with an interactive dropdown UI replacing a static indicator. Users can now toggle between Safe Mode and Developer Mode via a dropdown interface, with changes persisted to collection security configuration and user feedback provided through toast notifications. Changes
Sequence DiagramsequenceDiagram
actor User
participant Dropdown as JsSandboxMode<br/>(Dropdown)
participant Config as Collection<br/>Security Config
participant Toast as Toast<br/>Notification
User->>Dropdown: Click dropdown / Select mode
activate Dropdown
Dropdown->>Dropdown: handleModeChange()
deactivate Dropdown
rect rgb(200, 220, 255)
Dropdown->>Config: saveCollectionSecurityConfig(newMode)
activate Config
Config-->>Dropdown: Success / Error
deactivate Config
end
alt Success
Dropdown->>Dropdown: Update selectedMode state
Dropdown->>Toast: Show success message
Toast-->>User: ✓ Mode updated
else Failure
Dropdown->>Toast: Show error message
Toast-->>User: ✗ Update failed
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js (2)
90-97: Hardcoded color values should use theme props.Lines 93-94 and 96 use hardcoded rgba and hex values. Per coding standards, colors in styled components should come from the theme prop for consistency and theming support.
🔎 Suggested approach
Consider adding these warning colors to the theme and referencing them:
.developer-mode-warning { margin: 0.5rem 0; padding: 0.25rem 0.5rem; - background-color: rgba(245, 158, 11, 0.1); - border: 1px solid rgba(245, 158, 11, 0.2); + background-color: ${(props) => props.theme.colors.warning.bg}; + border: 1px solid ${(props) => props.theme.colors.warning.border}; border-radius: 0.25rem; - color: #fbbf24; + color: ${(props) => props.theme.colors.warning.text}; }
66-73: Hardcoded rgba in recommended-badge background.Line 70 uses a hardcoded
rgba(16, 185, 129, 0.2)for the background. For theming consistency, consider extracting this to the theme as well.packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js (2)
111-113: Close button lacks accessible attributes and cursor styling.The
IconXclose button should havecursor: pointerstyling (or use a<button>element) and accessible attributes for screen readers.🔎 Proposed fix
<div className="sandbox-header flex items-center justify-between"> - JavaScript Sandbox <IconX size={16} strokeWidth={1.5} onClick={closeDropdown} /> + JavaScript Sandbox + <button + type="button" + className="close-btn" + onClick={closeDropdown} + aria-label="Close dropdown" + > + <IconX size={16} strokeWidth={1.5} /> + </button> </div>Add corresponding styles in
StyledWrapper.js:.close-btn { cursor: pointer; background: none; border: none; padding: 0; display: flex; align-items: center; }
50-68: Consider closing the dropdown after successful mode change.When the user selects a different mode and it saves successfully, the dropdown remains open. Typical UX would close the dropdown after selection.
🔎 Proposed fix
) .then(() => { setSelectedMode(mode); toast.success('Sandbox mode updated successfully'); + closeDropdown(); })
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.jspackages/bruno-app/src/components/SecuritySettings/JsSandboxMode/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/SecuritySettings/JsSandboxMode/StyledWrapper.jspackages/bruno-app/src/components/SecuritySettings/JsSandboxMode/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 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/SecuritySettings/JsSandboxMode/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 Component CSS might also change layout but Tailwind classes shouldn't define colors
Applied to files:
packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/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/SecuritySettings/JsSandboxMode/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/SecuritySettings/JsSandboxMode/StyledWrapper.jspackages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js (3)
packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js (2)
saveCollectionSecurityConfig(2417-2431)saveCollectionSecurityConfig(2417-2431)packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js (1)
StyledWrapper(3-108)packages/bruno-app/src/components/Dropdown/index.js (1)
Dropdown(5-27)
⏰ 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 - Linux
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - macOS
- GitHub Check: Unit Tests
- GitHub Check: Playwright E2E Tests
- GitHub Check: CLI Tests
🔇 Additional comments (5)
packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js (1)
28-107: Overall styling structure looks good.The new dropdown styles are well-organized with clear class naming conventions. The use of theme props for most colors and the separation of concerns between layout and visual styling aligns with project standards.
packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js (4)
9-25: SANDBOX_OPTIONS constant is well-structured.Clean configuration object with clear keys, labels, descriptions, and icons. The
recommendedflag andwarningfield provide good UX hints.
70-96: Good accessibility implementation on options.Using
role="menuitemradio"andaria-checkedattributes provides proper screen reader support for the radio-like selection behavior.
27-48: State management and dropdown lifecycle look correct.The
useEffectproperly syncs local state with prop changes, and the dropdown ref pattern for programmatic control is appropriate.
108-113: TheonKeyDownhandler onStyledWrappermay not work reliably with Tippy's event scope.Even though the Dropdown component uses
appendTo: 'parent', Tippy isolates event bubbling from its rendered content. Keyboard events triggered inside the dropdown won't reliably bubble up to theStyledWrapperparent. For Escape key handling, either add a document-level listener (likeResponseExampledoes in the codebase) or passonHidecallback to the Tippy instance through theonCreatehandler to close the dropdown when focus is lost.
Description
creates a dropdown selector for sandbox mode
Screen.Recording.2025-12-27.at.2.30.20.AM.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
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.