refactor: replace button elements with Button component for consistency#6567
Conversation
…cy and improved styling across various components
|
Caution Review failedThe pull request is closed. WalkthroughReplaces native HTML buttons and icon wrappers with shared UI components (Button, ActionIcon) across multiple UI components; adjusts modal sizing, padding utilities, and workspace/import form layouts and validation message capitalization. No public API changes. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
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: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx (1)
40-220: Revert unnecessary whitespace changes.This file contains only formatting changes (blank lines added/adjusted) with no functional or styling modifications. These changes don't contribute to the PR objective of replacing button elements with Button components and violate the team's standard of avoiding unnecessary whitespace diffs.
Based on learnings, code changes need to be as minimal as possible.
🔎 Recommendation
Revert all whitespace changes in this file to keep the diff focused on the actual refactoring work described in the PR.
packages/bruno-app/src/components/Sidebar/CreateCollection/index.js (1)
125-130: Replace native button with Button component for consistency.The PR aims to standardize button usage across components, but this native
<button>element remains. Replace it with the Button component to match the footer buttons (lines 323-330) and maintain consistency.🔎 Proposed refactor to use Button component
- <button - className="btn-advanced" - type="button" - > - Options - </button> + <Button type="button" variant="text"> + Options + </Button>Note: Verify the correct
variantprop value (e.g., "text", "ghost", or "link") based on your Button component's API and styling requirements.packages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js (1)
28-28: Inconsistent validation message capitalization.The validation message uses lowercase "location is required", but the related CreateWorkspace component (line 49) uses title case "Location is required". Update for consistency across the workspace creation/import flows.
🔎 Suggested fix
- workspaceLocation: Yup.string().min(1, 'location is required').required('location is required') + workspaceLocation: Yup.string().min(1, 'Location is required').required('Location is required')
🧹 Nitpick comments (3)
packages/bruno-app/src/components/RunnerResults/index.jsx (1)
68-86: Consider migrating FilterButton to use Button component for consistency.The FilterButton component (lines 68-86) and the close button (lines 584-591) still use native button elements, creating inconsistency with this PR's goal of standardizing on the Button component. While their styling requirements may differ, wrapping them with Button using appropriate variants (e.g., ghost, unstyled) or creating a variant for these cases would maintain consistency.
🔎 Example approach for FilterButton
const FilterButton = ({ label, count, active, onClick }) => ( - <button + <Button + variant="ghost" onClick={onClick} className={`font-medium transition-colors cursor-pointer flex items-center gap-1.5 border-b-2 pb-2 ${ active ? 'text-[#343434] dark:text-[#CCCCCC] border-[#F59E0B]' : 'text-[#989898] dark:text-[#CCCCCC80] border-transparent' }`} style={{ fontFamily: 'Inter', fontWeight: 500, lineHeight: '100%', letterSpacing: '0%' }} > {label} <span className="px-[4.5px] py-[2px] rounded-[2px] bg-[#F7F7F7] dark:bg-[#242424] border border-[#EFEFEF] dark:border-[#92929233] text-[#989898] dark:text-inherit" style={{ borderWidth: '1px', fontFamily: 'Inter', fontSize: '10px', fontWeight: 500, lineHeight: '100%', letterSpacing: '0%' }} > {count} </span> - </button> + </Button> );Note: You may need to verify the Button component can accommodate the custom className-based styling, or consider adding a minimal/unstyled variant if the ghost variant interferes with the filter button's border-bottom styling.
packages/bruno-app/src/components/Preferences/General/index.js (1)
210-243: Consider including button replacements in this file for consistency.The PR objective is to replace native button elements with the Button component across components. This file contains native
<button>elements (lines 210-218 for certificate deletion and 225-232 for file selection) that remain unchanged.If this file is within scope for the button replacement refactor, these could be candidates for migration to the Button component to maintain consistency with the broader effort.
packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js (1)
13-13: Consider removing redundant/indexfrom import path.The import path includes
/index, but line 11 imports Button without it. While functional, removing/indexwould align with the existing pattern.🔎 Proposed refactor
-import ActionIcon from 'ui/ActionIcon/index'; +import ActionIcon from 'ui/ActionIcon';
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
packages/bruno-app/src/components/CollectionSettings/Docs/index.jspackages/bruno-app/src/components/Preferences/General/index.jspackages/bruno-app/src/components/Preferences/index.jspackages/bruno-app/src/components/ResponsePane/LargeResponseWarning/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.jspackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsxpackages/bruno-app/src/components/RunnerResults/index.jsxpackages/bruno-app/src/components/Sidebar/CreateCollection/index.jspackages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.jspackages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.jspackages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js
💤 Files with no reviewable changes (1)
- packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/StyledWrapper.js
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{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/ResponsePane/LargeResponseWarning/index.jspackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsxpackages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.jspackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/Sidebar/CreateCollection/index.jspackages/bruno-app/src/components/CollectionSettings/Docs/index.jspackages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.jspackages/bruno-app/src/components/Preferences/General/index.jspackages/bruno-app/src/components/Preferences/index.jspackages/bruno-app/src/components/RunnerResults/index.jsxpackages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{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
Styled Components are used as wrappers to define both self and children components style; Tailwind classes are used specifically for layout based styles
Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
Files:
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsxpackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/RunnerResults/index.jsx
🧠 Learnings (6)
📚 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/ResponsePane/LargeResponseWarning/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/ResponsePane/LargeResponseWarning/index.jspackages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.jspackages/bruno-app/src/components/Sidebar/CreateCollection/index.jspackages/bruno-app/src/components/CollectionSettings/Docs/index.jspackages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.jspackages/bruno-app/src/components/Preferences/General/index.jspackages/bruno-app/src/components/Preferences/index.jspackages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/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/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/Preferences/General/index.jspackages/bruno-app/src/components/Preferences/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 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/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/Preferences/General/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: No diffs unless an actual change is made; code changes need to be as minimal as possible, avoid making unnecessary whitespace diffs
Applied to files:
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
📚 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/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/Preferences/General/index.js
🧬 Code graph analysis (7)
packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/Sidebar/CreateCollection/index.js (1)
packages/bruno-app/src/components/Modal/index.js (1)
Modal(62-171)
packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js (1)
packages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js (2)
formik(22-44)browse(105-116)
packages/bruno-app/src/components/Preferences/General/index.js (6)
packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/StyledWrapper.js (1)
StyledWrapper(3-53)packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js (1)
StyledWrapper(3-51)packages/bruno-app/src/components/Preferences/StyledWrapper.js (1)
StyledWrapper(3-61)packages/bruno-app/src/components/PathDisplay/StyledWrapper.js (1)
StyledWrapper(3-37)packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js (1)
StyledWrapper(3-34)packages/bruno-app/src/components/Preferences/Display/Theme/StyledWrapper.js (1)
StyledWrapper(3-5)
packages/bruno-app/src/components/RunnerResults/index.jsx (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js (5)
packages/bruno-app/src/components/CollectionSettings/Docs/index.js (2)
toggleViewMode(22-24)isEditing(18-18)packages/bruno-app/src/components/Icons/IconEdit/index.js (1)
IconEdit(3-17)packages/bruno-app/src/components/Sidebar/CreateCollection/index.js (1)
isEditing(28-28)packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js (1)
isEditing(21-21)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 - Linux
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: CLI Tests
- GitHub Check: Playwright E2E Tests
🔇 Additional comments (17)
packages/bruno-app/src/components/Preferences/index.js (1)
91-91: LGTM — Padding adjustment for improved layout.The change from
px-2tops-2 pe-4increases the end padding while maintaining start padding, which improves spacing for the tab panel content. This aligns with the broader UI consistency improvements mentioned in the PR.packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.js (2)
7-7: LGTM! Import added correctly.The Button component import follows the project's import conventions and is properly positioned with other imports.
62-90: Excellent refactoring! Button components implemented consistently.The migration from raw HTML buttons to the Button component is well-executed:
- All three buttons (View, Save, Copy) use consistent styling with
color="secondary"andiconPosition="left"- Event handlers and disabled states are correctly preserved
- The Copy button's disabled logic (
!response.data) aligns with the established pattern used elsewhere in ResponsePane components to prevent copying stream resets- Icon sizes are uniform across all buttons (18px with strokeWidth 1.5)
- Proper accessibility attributes maintained via
titlepropsThis change achieves the PR's goal of consistency and improved styling across the codebase.
packages/bruno-app/src/components/RunnerResults/index.jsx (5)
13-13: Import added correctly.The Button component import aligns with the project's component structure.
321-329: Button component correctly replaces native button for collection run.The type, disabled logic, onClick handler, and conditional text content are all preserved correctly. The default variant and color provide appropriate primary button styling for this submit action.
331-333: Ghost variant appropriately used for secondary reset action.The ghost variant provides the right visual weight for a secondary action alongside the primary run button.
376-384: Danger variant correctly applied for cancel action.Using size="sm", variant="filled", and color="danger" provides clear visual feedback for a destructive/interrupting action.
388-405: Runner control actions styled consistently.Both "Run Again" and "Reset" buttons use the same small size and secondary color, creating appropriate visual hierarchy in the ended state controls.
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx (3)
11-11: Import added correctly.The Button component import aligns with the refactoring goal and matches the pattern used in the parent component.
289-294: Select/Deselect All button migrated correctly.The ghost variant is appropriate for header actions, and the conditional text logic for toggling between "Select All" and "Deselect All" is preserved.
295-301: Reset button with title attribute works correctly.The title attribute will be passed through via the Button component's
...restspread, providing the expected tooltip behavior. The ghost variant maintains visual consistency with the adjacent Select/Deselect All button.packages/bruno-app/src/components/Preferences/General/index.js (1)
176-176: LGTM! Layout adjustment aligns with project conventions.The addition of
className="w-full"to StyledWrapper appropriately uses Tailwind for layout styling, which is consistent with the project's established pattern of using Tailwind classes for layout-based styles while Styled Components handle theming and colors.Based on learnings, Tailwind classes are used specifically for layout-based styles in this codebase.
packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js (1)
94-96: LGTM!Button component correctly wraps the save action with appropriate text content and onClick handler. Defaults for size/variant/color are appropriate for this context.
packages/bruno-app/src/components/CollectionSettings/Docs/index.js (2)
12-13: LGTM! Imports align with the refactoring objective.The Button and ActionIcon components are correctly imported following project conventions.
63-65: LGTM! Button component integration is clean.The replacement of the native button with the
Buttoncomponent maintains the onClick behavior and achieves the consistency objective of this refactor.packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js (1)
32-34: LGTM! Validation messages now use consistent title case.The updated validation messages improve the user-facing error quality with proper capitalization throughout.
Also applies to: 42-43, 48-49
packages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js (1)
212-236: Add keyboard accessibility to the browse input and link.The read-only input and the "Browse" span both lack keyboard support. While they respond to clicks, users navigating via keyboard cannot activate them. Use a
<button>element for the "Browse" link (as done in ClearTimeline), or addrole="button",tabIndex="0", and anonKeyDownhandler to the span to support Enter/Space activation.
packages/bruno-app/src/components/CollectionSettings/Docs/index.js
Outdated
Show resolved
Hide resolved
| <Portal> | ||
| <StyledWrapper> | ||
| <Modal size="sm" title="Create Collection" hideFooter={true} handleCancel={onClose}> | ||
| <Modal size="md" title="Create Collection" hideFooter={true} handleCancel={onClose}> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's look at the CreateCollection component
cat -n packages/bruno-app/src/components/Sidebar/CreateCollection/index.js | head -150Repository: usebruno/bruno
Length of output: 7308
🏁 Script executed:
# Check if there's a git diff to see what changed
git diff HEAD packages/bruno-app/src/components/Sidebar/CreateCollection/index.js 2>/dev/null | head -100 || echo "No git diff available"Repository: usebruno/bruno
Length of output: 40
🏁 Script executed:
# Search for native button elements in the file
rg -n "button|<button" packages/bruno-app/src/components/Sidebar/CreateCollection/index.jsRepository: usebruno/bruno
Length of output: 224
Replace the native button in AdvancedOptions with the Button component.
The <button> element at lines 125-130 should use the Button component imported at line 21 to maintain consistency with the rest of the form. The Modal size change at line 139 appears unrelated to this PR's button consistency objective—clarify whether that's intentional or belongs in a separate change.
🤖 Prompt for AI Agents
In packages/bruno-app/src/components/Sidebar/CreateCollection/index.js around
lines 125-130 (with Button imported at line 21) the AdvancedOptions uses a
native <button>; replace that native button with the imported Button component
(preserving props, classes, and onClick behavior) to ensure visual/behavioral
consistency with the form; also review the Modal size change at line 139 and
either revert it or move that change to a separate PR since it is unrelated to
the button consistency fix.
| <ActionIcon className="edit-btn" onClick={toggleViewMode}> | ||
| <IconEdit size={16} strokeWidth={1.5} /> | ||
| </ActionIcon> |
There was a problem hiding this comment.
Add accessibility labels to ActionIcon.
The edit button lacks aria-label or label props, making it inaccessible to screen reader users. ActionIcon supports both props for accessibility.
🔎 Proposed fix
- <ActionIcon className="edit-btn" onClick={toggleViewMode}>
+ <ActionIcon className="edit-btn" onClick={toggleViewMode} label="Edit documentation" aria-label="Edit documentation">
<IconEdit size={16} strokeWidth={1.5} />
</ActionIcon>📝 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.
| <ActionIcon className="edit-btn" onClick={toggleViewMode}> | |
| <IconEdit size={16} strokeWidth={1.5} /> | |
| </ActionIcon> | |
| <ActionIcon className="edit-btn" onClick={toggleViewMode} label="Edit documentation" aria-label="Edit documentation"> | |
| <IconEdit size={16} strokeWidth={1.5} /> | |
| </ActionIcon> |
🤖 Prompt for AI Agents
In packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js around
lines 70 to 72, the ActionIcon used for the edit button is missing accessibility
labeling; add an accessible label by passing either an aria-label or label prop
(e.g., aria-label="Edit document" or label="Edit document") to the ActionIcon so
screen readers can identify the control — prefer a descriptive, possibly
localized string and keep the existing onClick handler (toggleViewMode)
unchanged.
| <ActionIcon className="edit-btn" onClick={handleDiscardChanges}> | ||
| <IconX size={16} strokeWidth={1.5} /> | ||
| </ActionIcon> |
There was a problem hiding this comment.
Add accessibility labels to ActionIcon.
The discard button lacks aria-label or label props, making it inaccessible to screen reader users.
🔎 Proposed fix
- <ActionIcon className="edit-btn" onClick={handleDiscardChanges}>
+ <ActionIcon className="edit-btn" onClick={handleDiscardChanges} label="Discard changes" aria-label="Discard changes">
<IconX size={16} strokeWidth={1.5} />
</ActionIcon>📝 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.
| <ActionIcon className="edit-btn" onClick={handleDiscardChanges}> | |
| <IconX size={16} strokeWidth={1.5} /> | |
| </ActionIcon> | |
| <ActionIcon className="edit-btn" onClick={handleDiscardChanges} label="Discard changes" aria-label="Discard changes"> | |
| <IconX size={16} strokeWidth={1.5} /> | |
| </ActionIcon> |
🤖 Prompt for AI Agents
In packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js around
lines 75 to 77, the ActionIcon used for discarding changes has no accessible
label; add an accessibility label by passing a descriptive prop such as
aria-label="Discard changes" (or label="Discard changes" if the ActionIcon
component expects label) to the ActionIcon, and consider also adding a title
prop with the same text for tooltip support so screen readers and sighted
keyboard users can understand the button purpose.
| <input | ||
| id="workspace-location" | ||
| type="text" | ||
| name="workspaceLocation" | ||
| readOnly={true} | ||
| className="block textbox mt-2 w-full cursor-pointer" | ||
| autoComplete="off" | ||
| autoCorrect="off" | ||
| autoCapitalize="off" | ||
| spellCheck="false" | ||
| value={formik.values.workspaceLocation || ''} | ||
| onClick={browse} | ||
| /> | ||
| {formik.touched.workspaceLocation && formik.errors.workspaceLocation ? ( | ||
| <div className="text-red-500 text-sm mt-1">{formik.errors.workspaceLocation}</div> | ||
| ) : null} | ||
| <div className="mt-1"> | ||
| <span | ||
| className="text-link cursor-pointer hover:underline" | ||
| onClick={browse} | ||
| > | ||
| Browse | ||
| </span> | ||
| </div> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js | head -250Repository: usebruno/bruno
Length of output: 9825
🏁 Script executed:
rg -n 'onKeyDown|onKeyPress|onKeyUp' packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.jsRepository: usebruno/bruno
Length of output: 40
🏁 Script executed:
rg -n -B5 -A5 'readOnly.*onClick|onClick.*browse' packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.jsRepository: usebruno/bruno
Length of output: 830
🏁 Script executed:
rg -n 'readOnly.*true' --type=js --type=jsx -B2 -A5 | head -50Repository: usebruno/bruno
Length of output: 85
🏁 Script executed:
rg -n 'readOnly' packages/bruno-app/src/components --type=js --type=jsx | wc -lRepository: usebruno/bruno
Length of output: 104
🏁 Script executed:
rg -n 'readOnly.*true' packages/bruno-app/src/components -B2 -A5 | head -60Repository: usebruno/bruno
Length of output: 6680
🏁 Script executed:
rg -n 'readOnly' packages/bruno-app/src/components | head -30Repository: usebruno/bruno
Length of output: 4157
🏁 Script executed:
rg -n 'onClick={browse}' packages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js -B5 -A10 | head -40Repository: usebruno/bruno
Length of output: 165
🏁 Script executed:
rg -n 'onClick.*browse' packages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js -B5 -A10Repository: usebruno/bruno
Length of output: 847
Add keyboard support to the read-only input field.
The read-only input element lacks keyboard event handlers (Enter/Space), making it non-interactive for keyboard users despite the cursor-pointer styling. The "Browse" link provides an accessible alternative, but consider adding an onKeyDown handler to the input to allow keyboard navigation directly on the field for consistency and improved UX.
🤖 Prompt for AI Agents
packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js
around lines 191-214: the readOnly input lacks keyboard handlers so pressing
Enter/Space does nothing; add an onKeyDown handler to the input that detects
Enter and Space (including legacy "Spacebar") keys, prevents default, and calls
the existing browse() function; ensure the input remains focusable (no tabindex
change needed for native input) and consider adding aria-haspopup="dialog" or
similar if browse opens a dialog to improve accessibility.
Description
Replace button elements with Button component for consistency and improved styling across various components
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.