refactor: replace button elements with new Button component by sanjaikumar-bruno · Pull Request #6512 · usebruno/bruno

sanjaikumar-bruno · 2025-12-26T13:05:40Z

coderabbitai · 2025-12-26T13:05:51Z

Walkthrough

Replaced native HTML <button> elements with the shared ui/Button component across multiple Bruno app UI components, adjusting props (size, color, variant, icons, className) while preserving existing event handlers and business logic.

Changes

Cohort / File(s)	Summary
Modals & Dialogs `packages/bruno-app/src/components/Environments/Common/ExportEnvironmentModal/index.js`, `packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/GrpcurlModal/index.js`, `packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.js`	Replaced native buttons with `Button` imports; added `size="sm"` where present, applied `color="secondary"` & `variant="ghost"` for cancel actions, preserved onClick/disabled logic and handlers.
Collection Item Actions `packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js`, `packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js`, `packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js`	Replaced action buttons (Cancel, Clone/Rename/Run, View/Recursive Run) with `Button`; preserved `type`, `onClick`, form submission behavior, and spacing classes.
Sidebar Creation Forms `packages/bruno-app/src/components/Sidebar/NewFolder/index.js`, `packages/bruno-app/src/components/Sidebar/NewRequest/index.js`	Replaced Cancel/Create buttons with `Button`; Cancel uses `type="button"`, `color="secondary"`, `variant="ghost"`, plus spacing classes; Create uses `type="submit"`.
Empty-state / Cookies `packages/bruno-app/src/components/Cookies/index.js`	Replaced plain `<button>` with `Button` using `size="sm"`, `className="mt-8"`, and `IconCirclePlus` icon; click handler preserved.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

feat: button storybook #6498 — Introduces/expands the shared ui/Button component used in these replacements.
use: button component #6504 — Overlapping refactor that replaces native <button> elements with ui/Button across similar components.
feat: integrate import/export modals and refactor environment handling #6346 — Modifies ExportEnvironmentModal wiring; touches a component updated in this PR.

Suggested reviewers

helloanoop
naman-bruno
lohit-bruno

Poem

🔘 Buttons converged in tidy rows,
From plain HTML to components they rose.
Props aligned and icons bright,
Clicks unchanged, the UX light.
Small swaps, big polish — UI smiles take flight ✨

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 accurately describes the primary change: systematically replacing native button elements with a standardized Button component across multiple files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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

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

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js (1)

84-101: Consider using type="button" for non-form buttons.

The buttons use type="submit" but aren't inside a form element. While this doesn't break functionality (onClick handlers still fire), it's semantically incorrect. Consider using type="button" for all action buttons that rely on explicit onClick handlers outside form contexts.

🔎 Suggested fix

-            <Button type="button" color="secondary" variant="ghost" onClick={onClose} className="mr-3">
+            <Button color="secondary" variant="ghost" onClick={onClose} className="mr-3">
               Cancel
             </Button>
             {
               isCollectionRunInProgress
                 ? (
-                    <Button type="submit" onClick={handleViewRunner}>
+                    <Button onClick={handleViewRunner}>
                       View Run
                     </Button>
                   )
                 : (
                     <>
-                      <Button type="submit" disabled={shouldDisableRecursiveFolderRun} onClick={() => onSubmit(true)} className="mr-3">
+                      <Button disabled={shouldDisableRecursiveFolderRun} onClick={() => onSubmit(true)} className="mr-3">
                         Recursive Run
                       </Button>
-                      <Button type="submit" disabled={shouldDisableFolderRun} onClick={() => onSubmit(false)}>
+                      <Button disabled={shouldDisableFolderRun} onClick={() => onSubmit(false)}>
                         Run
                       </Button>
                     </>
                   )
             }

Note: The Button component defaults to type="button", so these explicit type attributes can be omitted entirely.

📜 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 754aa38 and 971ebd6.

📒 Files selected for processing (6)

packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/GrpcurlModal/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
packages/bruno-app/src/components/Sidebar/NewFolder/index.js
packages/bruno-app/src/components/Sidebar/NewRequest/index.js

🚧 Files skipped from review as they are similar to previous changes (2)

packages/bruno-app/src/components/Sidebar/NewRequest/index.js
packages/bruno-app/src/components/Sidebar/NewFolder/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/GrpcQueryUrl/GrpcurlModal/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js

🧠 Learnings (2)

📚 Learning: 2025-12-02T09:45:31.709Z

Learnt from: sid-bruno
Repo: usebruno/bruno PR: 6266
File: packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js:38-38
Timestamp: 2025-12-02T09:45:31.709Z
Learning: In the ResponseCopy component (packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js), the copy button is intentionally disabled using `!response.data` to prevent copying stream resets which result in empty strings.

Applied to files:

packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/GrpcurlModal/index.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/GrpcurlModal/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js

🧬 Code graph analysis (4)

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

packages/bruno-app/src/ui/Button/index.js (1)

Button (4-79)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js (1)

packages/bruno-app/src/ui/Button/index.js (1)

Button (4-79)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js (4)

packages/bruno-app/src/ui/Button/index.js (1)

Button (4-79)

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

onSubmit (262-262)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js (1)

onSubmit (85-85)

packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js (1)

onSubmit (42-42)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.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: SSL Tests - Windows
GitHub Check: Unit Tests
GitHub Check: SSL Tests - Linux
GitHub Check: SSL Tests - macOS
GitHub Check: CLI Tests
GitHub Check: Playwright E2E Tests

🔇 Additional comments (3)

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

9-9: LGTM! Button component properly integrated.

The refactor correctly replaces the native button with the Button component. The icon prop with conditional rendering (copied ? <IconCheck /> : <IconCopy />) is valid and preserves the original toggle behavior.

Also applies to: 43-48

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js (1)

18-18: LGTM! Form submission behavior preserved.

The button replacements correctly maintain form behavior. Cancel button uses type="button" to prevent form submission, while Rename button uses type="submit" to trigger the formik handler.

Also applies to: 220-225

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js (1)

17-17: LGTM! Form integration correct.

The button replacements properly integrate with the Formik form. Cancel uses type="button" with explicit onClick, and Clone uses type="submit" to trigger form submission.

Also applies to: 202-207

* chore: playwright fix (#6507) * chore: update responsive tab's more icon (#6509) * refactor: replace button elements with new Button component (#6512) * refactor: replace button elements with new Button component * chore: fix button size for consistency --------- Co-authored-by: Bijin A B <bijin@usebruno.com> * feat: `collection-level` and `app-level` proxy settings updates (#6514) * feat: collection and app proxy settings updates * fix: opencollection proxy config export and import * fix: coderabbit review fixes * chore: fix minor runtime warnings (#6518) --------- Co-authored-by: Sanjai Kumar <161328623+sanjaikumar-bruno@users.noreply.github.com> Co-authored-by: lohit <lohit@usebruno.com>

refactor: replace button elements with new Button component

754aa38

sanjaikumar-bruno requested review from bijin-bruno, helloanoop, lohit-bruno and naman-bruno as code owners December 26, 2025 13:05

pull-request-size bot added the size/L label Dec 26, 2025

chore: fix button size for consistency

971ebd6

coderabbitai bot reviewed Dec 26, 2025

View reviewed changes

bijin-bruno merged commit cd6ffc2 into usebruno:main Dec 26, 2025
8 checks passed

sanjaikumar-bruno deleted the chore/update-modals-button-component branch December 27, 2025 10:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: replace button elements with new Button component#6512

refactor: replace button elements with new Button component#6512
bijin-bruno merged 2 commits intousebruno:mainfrom
sanjaikumar-bruno:chore/update-modals-button-component

sanjaikumar-bruno commented Dec 26, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Dec 26, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

sanjaikumar-bruno commented Dec 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Dec 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sanjaikumar-bruno commented Dec 26, 2025 •

edited

Loading

coderabbitai bot commented Dec 26, 2025 •

edited

Loading