Conversation
WalkthroughThis PR consistently replaces native HTML Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 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 (4)
🚧 Files skipped from review as they are similar to previous changes (2)
🧰 Additional context used📓 Path-based instructions (1)**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (CODING_STANDARDS.md)
Files:
🧠 Learnings (1)📚 Learning: 2025-12-17T21:41:24.730ZApplied to files:
🧬 Code graph analysis (1)packages/bruno-app/src/components/Modal/index.js (1)
⏰ 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 (6)
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: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.js (1)
259-265: Inconsistent button implementation between modal states.Lines 259-265 still use native HTML buttons with class-based styling, while lines 230-240 use the new Button component. Both branches render buttons in the same modal footer and should use consistent implementation.
🔎 Suggested refactor to align with the Button component migration
- <div className="flex justify-end mt-6"> - <button className="btn btn-close btn-sm mr-2" data-testid="modal-close-button" onClick={handleCancel}> - Cancel - </button> - <button className="btn btn-secondary btn-sm" onClick={handleCloseAllCollections}> - {hasMultipleCollections ? 'Close All' : 'Close'} - </button> - </div> + <div className="flex justify-end mt-6 gap-2"> + <Button size="sm" color="secondary" variant="ghost" onClick={handleCancel} data-testid="modal-close-button"> + Cancel + </Button> + <Button size="sm" onClick={handleCloseAllCollections}> + {hasMultipleCollections ? 'Close All' : 'Close'} + </Button> + </div>Note: Adjusted gap handling from
mr-2togap-2on the container to match modern spacing patterns.packages/bruno-app/src/components/Cookies/index.js (3)
165-175: Convert remaining button to Button component for consistency.This "Add Cookie" button in the no-cookies state should be converted to use the Button component, matching the pattern established in the header (lines 143-154) and aligning with the PR objectives.
🔎 Suggested conversion
-<button - type="submit" - className="submit btn btn-sm btn-secondary flex items-center gap-1 mt-8" +<Button + size="sm" + color="secondary" + className="mt-8" + icon={<IconCirclePlus strokeWidth={1.5} size={16} />} onClick={(e) => { e.stopPropagation(); handleAddCookie(); }} > - <IconCirclePlus strokeWidth={1.5} size={16} /> - <span>Add Cookie</span> -</button> + Add Cookie +</Button>
198-216: Convert icon-only action buttons to Button component.Both the "Add Cookie" and "Clear Domain" icon buttons in the accordion header should be converted to use the Button component. The Button component supports icon-only usage (icon prop without children) with appropriate styling via the variant prop.
🔎 Suggested conversion
-<button - type="submit" - className="flex items-center gap-1 text-gray-500 hover:text-gray-950 dark:text-white dark:hover:text-gray-300" +<Button + size="sm" + variant="ghost" + color="secondary" + icon={<IconCirclePlus strokeWidth={1.5} size={16} />} onClick={(e) => { e.stopPropagation(); handleAddCookie(domainWithCookies.domain); }} -> - <IconCirclePlus strokeWidth={1.5} size={16} /> -</button> -<button +/> +<Button + size="sm" + variant="ghost" + color="danger" + icon={<IconTrash strokeWidth={1.5} size={16} />} onClick={(e) => { e.stopPropagation(); handleClearDomainCookies(domainWithCookies.domain); }} - className="text-gray-950 dark:text-white dark:hover:hover:text-red-600 hover:text-red-600 mr-2" -> - <IconTrash strokeWidth={1.5} size={16} /> -</button> + className="mr-2" +/>
272-291: Convert table action buttons to Button component.The "Edit" and "Delete" action buttons in the cookie table should also be converted to use the Button component for consistency with the rest of the migration.
🔎 Suggested conversion
-<button +<Button + size="sm" + variant="ghost" + color="secondary" + icon={<IconEdit strokeWidth={1.5} size={16} />} onClick={(e) => { e.stopPropagation(); handleEditCookie(domainWithCookies.domain, cookie); }} - className="text-gray-700 hover:text-gray-950 -dark:text-white dark:hover:text-gray-300" -> - <IconEdit strokeWidth={1.5} size={16} /> -</button> -<button +/> +<Button + size="sm" + variant="ghost" + color="danger" + icon={<IconTrash strokeWidth={1.5} size={16} />} onClick={(e) => { e.stopPropagation(); handleDeleteCookie(domainWithCookies.domain, cookie.path, cookie.key); }} - className="text-gray-950 dark:text-white dark:hover:hover:text-red-600 hover:text-red-600" -> - <IconTrash strokeWidth={1.5} size={16} /> -</button> +/>
🧹 Nitpick comments (8)
packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.js (1)
11-12: Remove unused Modal props.Since
hideFooter={true}is set on line 21, theconfirmTextandcancelTextprops are not rendered. Consider removing these unused props for clarity.🔎 Proposed cleanup
<Modal size="md" title="Unsaved changes" - confirmText="Save and Close" - cancelText="Close without saving" disableEscapeKey={true} disableCloseOnOutsideClick={true}packages/bruno-app/src/components/ManageWorkspace/index.js (1)
123-149: Consider replacing remaining native buttons for UI consistency.The "Create Workspace" button now uses the Button component, but the "Open" (lines 123-129), "Show in folder" (lines 131-137), and more actions trigger (lines 147-149) still use native
<button>elements. Given the PR's objective to systematically replace native buttons with the Button component, these should likely be updated as well for consistent styling and behavior across the workspace management UI.🔎 Example conversion for the "Open" button
- <button - className="action-btn" - onClick={() => handleOpenWorkspace(workspace)} - > - <IconLogin size={14} strokeWidth={1.5} /> - <span>Open</span> - </button> + <Button + size="sm" + variant="text" + onClick={() => handleOpenWorkspace(workspace)} + icon={<IconLogin size={14} strokeWidth={1.5} />} + > + Open + </Button>Similar updates can be applied to the "Show in folder" and more actions buttons.
packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js (2)
161-171: Button migration is well-executed.The three buttons use appropriate props:
- "Don't Save":
color="danger"for destructive action- "Cancel":
color="secondary" variant="ghost"for secondary action- "Save": defaults to primary color for the main action
All consistently use
size="sm".Optional: Consider adding spacing between Cancel and Save buttons.
The two buttons on the right side (lines 166-171) are siblings without visible spacing. Consider adding a className or margin to separate them visually, e.g.:
Suggested spacing adjustment
<div> - <Button size="sm" color="secondary" variant="ghost" onClick={onClose}> + <Button size="sm" color="secondary" variant="ghost" onClick={onClose} className="mr-2"> Cancel </Button> <Button size="sm" onClick={closeWithSave}>
169-171: Consider adding loading state for async operation.The
closeWithSavehandler is async (line 81) but the button doesn't show a loading state, which could allow users to click multiple times during the save operation.Suggested loading state implementation
Add a loading state and pass it to the Button:
+ const [isSaving, setIsSaving] = React.useState(false); + const closeWithSave = async () => { + setIsSaving(true); try { // Separate drafts by type const collectionDrafts = allDrafts.filter((d) => d.type === 'collection'); // ... rest of save logic } catch (error) { console.error('Error saving drafts:', error); + } finally { + setIsSaving(false); } };Then update the button:
- <Button size="sm" onClick={closeWithSave}> + <Button size="sm" onClick={closeWithSave} loading={isSaving} disabled={isSaving}> {totalDraftsCount > 1 ? 'Save All' : 'Save'} </Button>packages/bruno-app/src/components/FolderSettings/Tests/index.js (1)
46-48: LGTM! Button component migration looks good.The Button component is correctly integrated with proper props and the onClick handler is preserved. Functionality remains identical to the original implementation.
Optional: Consider removing unnecessary type attribute
Since the button isn't inside a
<form>element,type="submit"has no semantic meaning. The Button component defaults totype="button"which would be more appropriate here:- <Button type="submit" size="sm" onClick={handleSave}> + <Button size="sm" onClick={handleSave}> Save </Button>This is purely a semantic cleanup and doesn't affect functionality.
packages/bruno-app/src/components/FolderSettings/Auth/index.js (1)
215-217: LGTM! Migration to Button component is correct.The Button component usage properly preserves the onClick behavior. The props are valid and consistent with the PR's broader migration pattern.
Optional refinement: The
type="submit"attribute is semantically unnecessary since this button isn't inside a<form>element. Consider usingtype="button"or omitting it (defaults to button behavior). However, this doesn't affect functionality.🔎 Optional refinement
- <Button type="submit" size="sm" onClick={handleSave}> + <Button size="sm" onClick={handleSave}> Save </Button>packages/bruno-app/src/components/Cookies/index.js (1)
143-154: Remove unnecessary attributes and simplify markup.Two minor refinements:
type="submit"is unnecessary since this button isn't within a form context (defaults totype="button"per Button component).- The
<span>wrapper around "Add Cookie" is redundant—the Button component already wraps children.🔎 Suggested refinement
<Button - type="submit" size="sm" className="mx-4" icon={<IconCirclePlus strokeWidth={1.5} size={16} />} onClick={(e) => { e.stopPropagation(); handleAddCookie(); }} > - <span>Add Cookie</span> + Add Cookie </Button>packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.js (1)
110-117: Consider adding horizontal spacing between the Cancel and Save buttons.The buttons are rendered consecutively without explicit spacing classes. While this follows the same pattern used elsewhere in the codebase (e.g.,
RemoveCollectionsModal), addingclassName="ml-2"to the Save button would improve visual clarity and align with spacing best practices. Alternatively, wrap the buttons in a flex container with gap classes for consistency.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (36)
packages/bruno-app/src/components/CollectionSettings/Auth/index.jspackages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.jspackages/bruno-app/src/components/CollectionSettings/Headers/index.jspackages/bruno-app/src/components/CollectionSettings/Presets/index.jspackages/bruno-app/src/components/CollectionSettings/Protobuf/index.jspackages/bruno-app/src/components/CollectionSettings/ProxySettings/index.jspackages/bruno-app/src/components/CollectionSettings/Script/index.jspackages/bruno-app/src/components/CollectionSettings/Tests/index.jspackages/bruno-app/src/components/CollectionSettings/Vars/index.jspackages/bruno-app/src/components/Cookies/index.jspackages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.jspackages/bruno-app/src/components/FolderSettings/Auth/index.jspackages/bruno-app/src/components/FolderSettings/Headers/index.jspackages/bruno-app/src/components/FolderSettings/Script/index.jspackages/bruno-app/src/components/FolderSettings/Tests/index.jspackages/bruno-app/src/components/FolderSettings/Vars/index.jspackages/bruno-app/src/components/ManageWorkspace/DeleteWorkspace/index.jspackages/bruno-app/src/components/ManageWorkspace/index.jspackages/bruno-app/src/components/Modal/index.jspackages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.jspackages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.jspackages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.jspackages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.jspackages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.jspackages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.jspackages/bruno-app/src/components/SecuritySettings/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.jspackages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.jspackages/bruno-app/src/components/Sidebar/CreateCollection/index.jspackages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.jspackages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.jspackages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.jspackages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.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/RequestTabPanel/RequestNotFound/index.jspackages/bruno-app/src/components/ManageWorkspace/DeleteWorkspace/index.jspackages/bruno-app/src/components/CollectionSettings/Protobuf/index.jspackages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.jspackages/bruno-app/src/components/Sidebar/CreateCollection/index.jspackages/bruno-app/src/components/FolderSettings/Script/index.jspackages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.jspackages/bruno-app/src/components/CollectionSettings/Tests/index.jspackages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.jspackages/bruno-app/src/components/FolderSettings/Tests/index.jspackages/bruno-app/src/components/FolderSettings/Vars/index.jspackages/bruno-app/src/components/CollectionSettings/Script/index.jspackages/bruno-app/src/components/CollectionSettings/Headers/index.jspackages/bruno-app/src/components/CollectionSettings/ProxySettings/index.jspackages/bruno-app/src/components/CollectionSettings/Vars/index.jspackages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.jspackages/bruno-app/src/components/ManageWorkspace/index.jspackages/bruno-app/src/components/CollectionSettings/Presets/index.jspackages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.jspackages/bruno-app/src/components/FolderSettings/Headers/index.jspackages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.jspackages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.jspackages/bruno-app/src/components/Modal/index.jspackages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/index.jspackages/bruno-app/src/components/Cookies/index.jspackages/bruno-app/src/components/FolderSettings/Auth/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.jspackages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.jspackages/bruno-app/src/components/SecuritySettings/index.jspackages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.jspackages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.jspackages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.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/components/RequestTabPanel/RequestNotFound/index.jspackages/bruno-app/src/components/ManageWorkspace/DeleteWorkspace/index.jspackages/bruno-app/src/components/CollectionSettings/Protobuf/index.jspackages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.jspackages/bruno-app/src/components/Sidebar/CreateCollection/index.jspackages/bruno-app/src/components/FolderSettings/Script/index.jspackages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.jspackages/bruno-app/src/components/CollectionSettings/Tests/index.jspackages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.jspackages/bruno-app/src/components/FolderSettings/Tests/index.jspackages/bruno-app/src/components/FolderSettings/Vars/index.jspackages/bruno-app/src/components/CollectionSettings/Script/index.jspackages/bruno-app/src/components/CollectionSettings/Headers/index.jspackages/bruno-app/src/components/CollectionSettings/ProxySettings/index.jspackages/bruno-app/src/components/CollectionSettings/Vars/index.jspackages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.jspackages/bruno-app/src/components/ManageWorkspace/index.jspackages/bruno-app/src/components/CollectionSettings/Presets/index.jspackages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.jspackages/bruno-app/src/components/FolderSettings/Headers/index.jspackages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.jspackages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.jspackages/bruno-app/src/components/Modal/index.jspackages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/index.jspackages/bruno-app/src/components/Cookies/index.jspackages/bruno-app/src/components/FolderSettings/Auth/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.jspackages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.jspackages/bruno-app/src/components/SecuritySettings/index.jspackages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.jspackages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.jspackages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js
📚 Learning: 2025-12-16T07:16:23.647Z
Learnt from: sanish-bruno
Repo: usebruno/bruno PR: 6090
File: tests/scripting/hooks/init-user-data/ui-state-snapshot.json:1-8
Timestamp: 2025-12-16T07:16:23.647Z
Learning: For e2e tests in the bruno repository: Collections that are shared between CLI and UI tests (comprehensive test suites testing core functionality) should be placed in `packages/bruno-tests/` to avoid duplication. The `tests/**/fixtures/collection` pattern should be used for test-specific collections that test particular UI behaviors or are specific to a single test file.
Applied to files:
packages/bruno-app/src/components/CollectionSettings/Tests/index.jspackages/bruno-app/src/components/FolderSettings/Tests/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 **/*.test.{js,jsx,ts,tsx} : Add tests for any new functionality or meaningful changes. If code is added, removed, or significantly modified, corresponding tests should be updated or created
Applied to files:
packages/bruno-app/src/components/FolderSettings/Tests/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} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
Applied to files:
packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js
🧬 Code graph analysis (23)
packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js (2)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)packages/bruno-app/src/components/CollectionSettings/Script/index.js (1)
handleSave(54-56)
packages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js (3)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)packages/bruno-app/src/components/Sidebar/CreateCollection/index.js (1)
browse(104-114)packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js (1)
browse(69-80)
packages/bruno-app/src/components/Sidebar/CreateCollection/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/FolderSettings/Script/index.js (2)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)packages/bruno-app/src/components/CollectionSettings/Script/index.js (1)
handleSave(54-56)
packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js (3)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)packages/bruno-app/src/components/Sidebar/CreateCollection/index.js (1)
browse(104-114)packages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js (1)
browse(106-117)
packages/bruno-app/src/components/CollectionSettings/Tests/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js (3)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js (1)
closeTab(10-14)packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js (1)
closeTab(10-16)
packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/CollectionSettings/Script/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/CollectionSettings/Vars/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/ManageWorkspace/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/Modal/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/CollectionSettings/Auth/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/Cookies/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/FolderSettings/Auth/index.js (17)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)packages/bruno-app/src/components/CollectionSettings/Auth/index.js (1)
handleSave(21-21)packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js (1)
handleSave(144-144)packages/bruno-app/src/components/CollectionSettings/Headers/index.js (1)
handleSave(33-33)packages/bruno-app/src/components/CollectionSettings/Presets/index.js (1)
handleSave(27-27)packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js (1)
handleSave(34-34)packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js (1)
handleSave(81-81)packages/bruno-app/src/components/CollectionSettings/Script/index.js (1)
handleSave(54-56)packages/bruno-app/src/components/CollectionSettings/Tests/index.js (1)
handleSave(27-27)packages/bruno-app/src/components/CollectionSettings/Vars/index.js (1)
handleSave(13-13)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js (1)
handleSave(54-54)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js (1)
handleSave(68-68)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js (1)
handleSave(43-43)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js (1)
handleSave(45-45)packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js (1)
handleSave(23-25)packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js (1)
handleSave(22-24)packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.js (1)
handleSave(22-24)
packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
⏰ 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: Playwright E2E Tests
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
🔇 Additional comments (48)
packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js (1)
4-4: LGTM! Clean migration to Button component.The import and button replacement follow the established pattern across the PR. Props are correctly configured and the onClick handler is preserved.
Also applies to: 36-38
packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.js (2)
22-22: LGTM: Import added correctly.The Button component import follows the project's coding style.
230-240: LGTM: Button components properly configured.The Button components in the unsaved changes footer are well-configured:
- Destructive action uses
color="danger"- Cancel uses
color="secondary"withvariant="ghost"- Primary action uses default styling
packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.js (1)
33-43: LGTM! Button component migration looks solid.The replacement of native HTML buttons with the
Buttoncomponent is well-executed. Props are appropriate (size="sm",color="danger"/"secondary",variant="ghost"), and all event handlers are correctly preserved. This follows the established pattern across the PR.packages/bruno-app/src/components/ManageWorkspace/index.js (1)
16-16: LGTM! Clean Button component integration.The Button import and usage are correct. The
size="sm",icon, andonClickprops align with the Button API, and the behavior is properly preserved.Also applies to: 88-90
packages/bruno-app/src/components/Sidebar/CreateCollection/index.js (1)
21-21: LGTM! Button component migration executed correctly.The import and button replacements are well-implemented:
- Type attributes preserved (
buttonfor Cancel,submitfor Create)- Event handlers intact (Cancel's
onClick, Create's form submission)- Props align with Button API (size, color, variant)
- Styling choices reinforce UI hierarchy (secondary/ghost vs primary/filled)
Also applies to: 323-330
packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js (2)
5-5: LGTM!Button component import is correct and follows coding guidelines.
29-40: Button migration looks good; verify spacing between Cancel and Save.The migration from native buttons to the Button component is implemented correctly:
- "Don't Save" uses
color="danger"- appropriate for destructive action- "Cancel" uses
color="secondary" variant="ghost"- appropriate for secondary action- "Save" will default to
color="primary"- appropriate for primary actionHowever, the Cancel and Save buttons (lines 34-39) are siblings without explicit spacing between them. Verify that the Button component's default styles provide adequate spacing in the rendered UI.
packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js (1)
13-13: Import looks good.The Button component is correctly imported and will be used to replace native button elements.
packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js (1)
4-4: LGTM! Clean Button component migration.The migration from native HTML buttons to the Button component is correctly implemented. All three buttons use appropriate props:
color="danger"for the destructive "Don't Save" actioncolor="secondary" variant="ghost"for the neutral "Cancel" action- Default primary styling for the main "Save" action
Event handlers are properly preserved, and the consistent
size="sm"maintains uniform button sizing.Also applies to: 37-47
packages/bruno-app/src/components/FolderSettings/Script/index.js (1)
10-10: Import statement looks good.The Button component import is correctly structured and follows the project's import conventions.
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js (2)
5-5: LGTM!Import follows project conventions and coding guidelines.
30-32: LGTM!Button component usage is correct. The
size="sm"andcolor="danger"props appropriately style the close action for this confirmation modal, and theonClickbehavior is properly preserved.packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.js (3)
41-43: Verify the Save button color change.The original Save button used
btn-secondarystyling, but the new Button component will use the defaultprimarycolor. This changes the visual appearance of the button. Please confirm this is intentional.
4-4: LGTM!Import statement follows coding guidelines and correctly imports the Button component.
33-35: LGTM!The "Don't Save" button is correctly mapped to the Button component with appropriate danger styling.
packages/bruno-app/src/components/FolderSettings/Auth/index.js (1)
21-21: LGTM!Button component import is correct and aligns with the PR objective to standardize on the custom Button component.
packages/bruno-app/src/components/SecuritySettings/index.js (2)
6-6: LGTM!The Button import follows the project's coding guidelines and is properly placed.
75-77: Clean button replacement with proper prop compatibility.The Button component fully supports all props used here:
size(line 6),onClick(line 17), andclassName(line 19, 44). The replacement maintains the same functionality while properly integrating with the component's API.packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js (1)
61-61: LGTM! Clean API migration.The shift from
confirmButtonClasstoisDangerButtonimproves the Modal API semantics, making the intent explicit and type-safe.packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js (1)
29-29: LGTM! Consistent with the new Modal API.packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js (1)
4-4: LGTM! Button component adoption looks clean.The ghost secondary variant is appropriate for this non-primary action.
Also applies to: 40-42
packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js (1)
4-4: LGTM! Consistent with RequestNotFound implementation.The matching Button styling between RequestNotFound and ExampleNotFound ensures a cohesive UX for similar actions.
Also applies to: 34-36
packages/bruno-app/src/components/ManageWorkspace/DeleteWorkspace/index.js (1)
35-35: LGTM! Proper danger button semantics.packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js (1)
15-15: LGTM! Button integration looks good.The
items-centeraddition ensures proper vertical alignment with the input field. The Button uses default props (size='base', variant='filled', color='primary'), which provides appropriate visual prominence for the Browse action.Also applies to: 192-192, 206-208
packages/bruno-app/src/components/FolderSettings/Headers/index.js (1)
13-13: LGTM! Proper Button usage for form submission.The
type="submit"withsize="sm"is consistent with other settings panels.Also applies to: 116-118
packages/bruno-app/src/components/Modal/index.js (2)
4-4: LGTM! Clean refactoring to Button component.The migration from
confirmButtonClasstoisDangerButtonprovides a cleaner API surface. The conditional color logic (isDangerButton ? 'danger' : 'primary') is straightforward and maintains the previous behavior while leveraging the Button component's built-in styling.Also applies to: 31-31, 43-56
79-79: LGTM! Proper prop threading.The
isDangerButtonprop is correctly threaded from Modal to ModalFooter, completing the API migration.Also applies to: 153-153
packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js (1)
11-16: Remove unnecessary!importantflags—styled-components scoping eliminates CSS specificity conflicts.These three
!importantdeclarations are not needed. Since RemoveCollection uses scoped styled-components, its.collection-namestyles exist in a completely separate CSS namespace from other.collection-nameselectors elsewhere in the codebase. There is no specificity conflict to override.Remove the
!importantflags and simplify to:padding-left: 0; cursor: default;and
background: none;Likely an incorrect or invalid review comment.
packages/bruno-app/src/components/CollectionSettings/Vars/index.js (1)
7-7: LGTM - Consistent Button component adoption.The native button has been correctly replaced with the Button component, preserving functionality and adding consistent sizing.
Also applies to: 26-28
packages/bruno-app/src/components/CollectionSettings/Auth/index.js (1)
15-15: LGTM - Consistent with UI refactoring pattern.Button component correctly replaces native button with preserved behavior.
Also applies to: 63-65
packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js (1)
16-16: LGTM - Correct semantic usage of button types.Both buttons properly replaced with preserved functionality. The "Add" button correctly uses
type="submit"within the form, while the "Save" button appropriately usestype="button"for its onClick handler.Also applies to: 378-384
packages/bruno-app/src/components/CollectionSettings/Presets/index.js (1)
7-7: LGTM - Clean Button component integration.Native button correctly replaced with Button component, preserving the onClick handler and using appropriate
type="button".Also applies to: 126-128
packages/bruno-app/src/components/CollectionSettings/Script/index.js (1)
10-10: LGTM - Consistent UI refactoring.Button component correctly replaces native button, maintaining existing behavior and applying consistent styling.
Also applies to: 102-104
packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js (1)
15-15: LGTM - Button component properly integrated.Native button correctly replaced with Button component using appropriate
type="button"for the onClick handler.Also applies to: 339-341
packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js (1)
11-11: LGTM - Consistent Button implementation.Native button replaced with Button component, preserving functionality and applying consistent styling across the CollectionSettings UI.
Also applies to: 362-364
packages/bruno-app/src/components/CollectionSettings/Tests/index.js (1)
9-9: LGTM - Final Button replacement completes the refactoring.Native button correctly replaced with Button component, maintaining existing behavior and completing the systematic UI refactoring across all CollectionSettings components.
Also applies to: 45-47
packages/bruno-app/src/components/CollectionSettings/Headers/index.js (2)
13-13: LGTM!Import statement is correctly structured and follows the project's import conventions.
111-113: No migration needed for the Bulk Edit button.The Bulk Edit button correctly remains a native HTML button with
text-linkstyling. This is intentional and consistent with the rest of the codebase. The Button component is reserved for primary actions (like Save/Submit), while secondary link-style actions use native buttons with thetext-linkclass. This pattern is replicated across multiple files including FolderSettings/Headers, RequestPane/RequestHeaders, and QueryParams.Likely an incorrect or invalid review comment.
packages/bruno-app/src/components/Cookies/index.js (3)
12-12: LGTM!Button import is correctly added.
26-28: LGTM!Button component usage is appropriate. The danger color for destructive actions and ghost variant for cancel actions follows good UX patterns.
Also applies to: 31-33
51-53: LGTM!Consistent with the modal buttons above. Proper color and variant choices.
Also applies to: 56-58
packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.js (2)
12-12: LGTM: Button component imported correctly.The Button component import aligns with the PR's systematic migration strategy across the codebase.
106-108: LGTM: Destructive action button configured appropriately.The
color="danger"variant clearly signals the destructive nature of the "Discard and Remove" action.packages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js (4)
13-13: LGTM!Import statement is correct and follows coding guidelines.
213-213: Good alignment improvement.Adding
items-centerproperly vertically aligns the input field and Browse button.
228-230: LGTM!Button component is correctly integrated with proper props passed through.
152-158: No changes needed. The "Remove" button correctly uses a native HTML element. Text-style, inline buttons throughout the codebase (including the "choose a file" button in the same file and similar patterns in other components) are consistently implemented with native<button>elements and Tailwind classes, separate from the Button component pattern used for standalone action buttons. This is intentional design, not an inconsistency.
| <Button type="submit" size="sm" onClick={handleSave}> | ||
| Save | ||
| </button> | ||
| </Button> |
There was a problem hiding this comment.
Change type="submit" to type="button" (or omit it entirely).
The button is not within a <form> element, making type="submit" semantically incorrect and non-functional. Since the Button component defaults to type="button", you can either explicitly set it to "button" or remove the type prop entirely.
🔎 Suggested fix
- <Button type="submit" size="sm" onClick={handleSave}>
+ <Button size="sm" onClick={handleSave}>
Save
</Button>Otherwise, the migration to the Button component is well-executed and maintains the existing functionality correctly.
📝 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.
| <Button type="submit" size="sm" onClick={handleSave}> | |
| Save | |
| </button> | |
| </Button> | |
| <Button size="sm" onClick={handleSave}> | |
| Save | |
| </Button> |
🤖 Prompt for AI Agents
In packages/bruno-app/src/components/FolderSettings/Script/index.js around lines
104 to 106, the Button is incorrectly given type="submit" even though it is not
inside a form; change the prop to type="button" or remove the type prop entirely
(Button defaults to "button") so the element is semantically correct and avoids
unintended submit behavior.
| <Button type="submit" size="sm" onClick={handleSave}> | ||
| Save | ||
| </button> | ||
| </Button> |
There was a problem hiding this comment.
Verify type="submit" usage.
The type="submit" attribute is semantically intended for form submission, but this button is not wrapped in a <form> element. Outside a form context, type="submit" has no effect and should typically be type="button" to make the intent clear.
🔎 Suggested fix
- <Button type="submit" size="sm" onClick={handleSave}>
+ <Button type="button" size="sm" onClick={handleSave}>
Save
</Button>📝 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.
| <Button type="submit" size="sm" onClick={handleSave}> | |
| Save | |
| </button> | |
| </Button> | |
| <Button type="button" size="sm" onClick={handleSave}> | |
| Save | |
| </Button> |
🤖 Prompt for AI Agents
In packages/bruno-app/src/components/FolderSettings/Vars/index.js around lines
26 to 28, the button is given type="submit" but isn’t inside a form; change the
attribute to type="button" (or remove the type attribute) so the intent is
explicit and keep the onClick={handleSave} handler unchanged to preserve
behavior.
| <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}> | ||
| Cancel | ||
| </button> | ||
| <button className="btn btn-secondary btn-sm" onClick={onSaveAndClose}> | ||
| </Button> |
There was a problem hiding this comment.
Missing spacing on Cancel button.
The original Cancel button had a mr-2 class for right margin spacing. The new Button component doesn't include this spacing class, which may affect the visual gap between the Cancel and Save buttons.
🔎 Proposed fix
- <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
+ <Button size="sm" color="secondary" variant="ghost" className="mr-2" onClick={onCancel}>
Cancel
</Button>📝 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.
| <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}> | |
| Cancel | |
| </button> | |
| <button className="btn btn-secondary btn-sm" onClick={onSaveAndClose}> | |
| </Button> | |
| <Button size="sm" color="secondary" variant="ghost" className="mr-2" onClick={onCancel}> | |
| Cancel | |
| </Button> |
🤖 Prompt for AI Agents
In
packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.js
around lines 38 to 40, the Cancel Button is missing the right-margin spacing
that existed previously; add the same spacing back (e.g., add className="mr-2"
to the Button or use the component's spacing prop if it provides one) so there
is a visual gap between Cancel and Save, keeping other props unchanged.
| hideCancel, | ||
| hideFooter, | ||
| confirmButtonClass = 'btn-secondary' | ||
| isDangerButton = false |
There was a problem hiding this comment.
I think we should leave this open to any variant
confirmButtonColor = 'primary'
Description
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
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.