Skip to content

fix: use generic error component, tab padding fixes#6563

Merged
bijin-bruno merged 5 commits intousebruno:mainfrom
sanish-bruno:fix/no-tab-found-error
Dec 30, 2025
Merged

fix: use generic error component, tab padding fixes#6563
bijin-bruno merged 5 commits intousebruno:mainfrom
sanish-bruno:fix/no-tab-found-error

Conversation

@sanish-bruno
Copy link
Collaborator

@sanish-bruno sanish-bruno commented Dec 30, 2025

Description

use generic error component, tab padding fixes

Contribution Checklist:

  • I've used AI significantly to create this pull request
  • The pull request only addresses one issue or adds one feature.
  • The pull request does not introduce any breaking changes
  • I have added screenshots or gifs to help explain the change if applicable.
  • I have read the contribution guidelines.
  • Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

  • New Features

    • Added a unified Error Banner component for showing one or multiple errors with optional close action.
  • Refactor

    • Replaced various inline/error alert blocks with the new Error Banner across request and response panes.
    • Standardized error messaging appearance and spacing for visual consistency.
    • Minor horizontal spacing adjustments in request tabs.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 30, 2025

Walkthrough

This PR removes the legacy ErrorAlert, introduces a new ErrorBanner component (with updated styling), and migrates multiple UI locations to render errors via ErrorBanner. It also adjusts horizontal padding in several RequestTabs components.

Changes

Cohort / File(s) Summary
New ErrorBanner UI
packages/bruno-app/src/ui/ErrorBanner/index.js, packages/bruno-app/src/ui/ErrorBanner/StyledWrapper.js
Adds ErrorBanner (props: errors, onClose, className) and consolidates styles: unified border, left danger accent, theme-based background, and a .separator for multiple errors.
Remove ErrorAlert
packages/bruno-app/src/ui/ErrorAlert/index.js
Deletes the deprecated ErrorAlert component and its default export.
Error display migration
packages/bruno-app/src/components/.../ExampleNotFound/index.js, packages/bruno-app/src/components/.../FolderNotFound/index.js, packages/bruno-app/src/components/.../RequestNotFound/index.js, packages/bruno-app/src/components/ResponsePane/ScriptError/index.js, packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/JsonPreview.js, packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/XmlPreview/index.js
Replaces ErrorAlert imports/usage with ErrorBanner, converting { title, message } props into an errors array. Existing error-collection and onClose behaviors are preserved.
Tab spacing adjustments
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js, packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js, packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
Removes or changes horizontal padding utilities on not-found tab containers (px-3, px-1) to adjust layout spacing; no behavioral changes reported.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • bijin-bruno
  • lohit-bruno
  • naman-bruno

Poem

A banner bright dispels the night,
Old alerts take their final flight,
Padding nudged, the UI sings,
Errors grouped beneath new wings,
Cheers — a cleaner warning light! 🎉

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 summarizes the two main changes: replacing error UI components with a generic ErrorBanner and adjusting tab padding. It's concise and directly reflects the changeset.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
✨ Finishing touches
  • 📝 Generate docstrings

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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/bruno-app/src/components/ResponsePane/ScriptError/index.js (1)

4-9: Accept and forward className prop.

The component signature is missing the className prop that callers are passing (e.g., in RunnerResults/ResponsePane). Add className to the props destructuring and forward it to ErrorMessage.

🔎 Proposed fix
-const ScriptError = ({ item, onClose }) => {
+const ScriptError = ({ item, onClose, className = '' }) => {
   const preRequestError = item?.preRequestScriptErrorMessage;
   const postResponseError = item?.postResponseScriptErrorMessage;
   const testScriptError = item?.testScriptErrorMessage;
 
   if (!preRequestError && !postResponseError && !testScriptError) return null;

And update line 34:

-  return <ErrorMessage errors={errors} onClose={onClose} />;
+  return <ErrorMessage errors={errors} onClose={onClose} className={className} />;
🧹 Nitpick comments (2)
packages/bruno-app/src/components/ErrorMessage/index.js (2)

12-22: Consider more stable keys if errors can be dynamic.

Using array index as key works for static error lists but may cause reconciliation issues if the errors array is reordered or modified. If errors can change dynamically, consider using a unique identifier or combination of title + message as the key.

🔎 Alternative key approach
-            <div key={index}>
+            <div key={`${error.title}-${index}`}>

Or if errors have unique messages:

-            <div key={index}>
+            <div key={error.message}>

24-31: Add accessibility attributes to close button.

The close button lacks proper accessibility attributes. Add an aria-label for screen readers and consider keyboard support for better accessibility.

🔎 Proposed accessibility improvements
         {onClose && !hideClose && (
           <div
             className="close-button flex-shrink-0 cursor-pointer"
             onClick={onClose}
+            role="button"
+            tabIndex={0}
+            aria-label="Close error message"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClose();
+              }
+            }}
           >
             <IconX size={16} strokeWidth={1.5} />
           </div>
         )}
📜 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 d7cef7a and f2e6c5d.

📒 Files selected for processing (11)
  • packages/bruno-app/src/components/ErrorMessage/StyledWrapper.js
  • packages/bruno-app/src/components/ErrorMessage/index.js
  • packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js
  • packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js
  • packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js
  • packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
  • packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
  • packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
  • packages/bruno-app/src/components/ResponsePane/ScriptError/index.js
  • packages/bruno-app/src/components/ResponsePane/index.js
  • packages/bruno-app/src/components/RunnerResults/ResponsePane/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/ErrorMessage/index.js
  • packages/bruno-app/src/components/ErrorMessage/StyledWrapper.js
  • packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js
  • packages/bruno-app/src/components/ResponsePane/index.js
  • packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
  • packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js
  • packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
  • packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
  • packages/bruno-app/src/components/ResponsePane/ScriptError/index.js
  • packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js
  • packages/bruno-app/src/components/RequestTabs/ExampleTab/index.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/ErrorMessage/index.js
  • packages/bruno-app/src/components/ErrorMessage/StyledWrapper.js
  • packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js
  • packages/bruno-app/src/components/ResponsePane/index.js
  • packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
  • packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js
  • packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
  • packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
  • packages/bruno-app/src/components/ResponsePane/ScriptError/index.js
  • packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js
  • packages/bruno-app/src/components/RequestTabs/ExampleTab/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/ErrorMessage/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/ErrorMessage/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/ErrorMessage/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/index.js
🧬 Code graph analysis (4)
packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js (6)
packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js (1)
  • showErrorMessage (9-9)
packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js (1)
  • showErrorMessage (9-9)
packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js (1)
  • showErrorMessage (9-9)
packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/index.js (1)
  • GradientCloseButton (6-19)
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1)
  • handleCloseClick (25-31)
packages/bruno-app/src/components/RequestTabs/RequestTab/index.js (1)
  • handleCloseClick (89-97)
packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js (4)
packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js (1)
  • errors (27-32)
packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js (1)
  • errors (29-34)
packages/bruno-app/src/components/ResponsePane/ScriptError/index.js (1)
  • errors (11-11)
packages/bruno-app/src/components/ErrorMessage/index.js (1)
  • ErrorMessage (5-35)
packages/bruno-app/src/components/ResponsePane/ScriptError/index.js (4)
packages/bruno-app/src/components/ErrorMessage/index.js (1)
  • ErrorMessage (5-35)
packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js (1)
  • errors (27-32)
packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js (1)
  • errors (29-34)
packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js (1)
  • errors (33-38)
packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js (4)
packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js (1)
  • errors (29-34)
packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js (1)
  • errors (33-38)
packages/bruno-app/src/components/ResponsePane/ScriptError/index.js (1)
  • errors (11-11)
packages/bruno-app/src/components/ErrorMessage/index.js (1)
  • ErrorMessage (5-35)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: SSL Tests - Windows
  • GitHub Check: SSL Tests - macOS
  • GitHub Check: SSL Tests - Linux
  • GitHub Check: Unit Tests
  • GitHub Check: CLI Tests
  • GitHub Check: Playwright E2E Tests
🔇 Additional comments (11)
packages/bruno-app/src/components/RequestTabs/RequestTab/index.js (1)

323-323: LGTM - Padding control centralized.

Removing px-1 from the parent wrapper is correct, as padding is now controlled by the RequestTabNotFound child component (which adds px-3). This improves consistency across not-found states.

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1)

61-61: LGTM - Consistent padding refactor.

Removing px-3 aligns with the pattern in RequestTab, centralizing padding control in the child RequestTabNotFound component.

packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js (2)

23-23: LGTM - Padding now consistent.

Changing pl-2 to px-3 adds horizontal padding on both sides, aligning with the parent wrapper padding removal in other components.


31-31: LGTM - Semantically correct prop value.

Changing hasChanges from true to false is correct—a not-found tab has no changes to save. This fixes the visual indicator to match the actual state.

packages/bruno-app/src/components/ErrorMessage/StyledWrapper.js (1)

1-45: LGTM - Well-structured styled component.

The StyledWrapper follows project conventions:

  • Uses theme props for colors (not CSS variables)
  • Proper overflow handling with scrollable container
  • Clear visual hierarchy with danger accent border
  • Good hover states and transitions
packages/bruno-app/src/components/ResponsePane/index.js (1)

298-298: LGTM - Minor spacing adjustment.

Adding mt-4 mb-2 provides appropriate vertical spacing around the script error display.

packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js (1)

4-4: LGTM - Clean refactor to centralized ErrorMessage.

The migration to the ErrorMessage component is well-structured:

  • Follows the same pattern as FolderNotFound and RequestNotFound
  • Consistent error object structure with title and message
  • Appropriate props: hideClose={true} and className="mb-4"

Also applies to: 27-32, 36-36

packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js (1)

4-4: LGTM - Consistent ErrorMessage adoption.

The refactor matches the pattern used in ExampleNotFound and FolderNotFound, maintaining consistency across all not-found scenarios.

Also applies to: 33-38, 42-42

packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js (1)

4-4: LGTM - Completes ErrorMessage refactor.

The implementation is consistent with ExampleNotFound and RequestNotFound, successfully centralizing error display logic across all not-found components.

Also applies to: 29-34, 38-38

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

1-6: LGTM!

Component structure is clean with appropriate early return and proper default values for optional props.

packages/bruno-app/src/components/ResponsePane/ScriptError/index.js (1)

11-35: Error building logic looks good.

The error accumulation pattern is clean and consistent across all three error types. The refactor to use ErrorMessage simplifies the component nicely.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
packages/bruno-app/src/ui/ErrorBanner/index.js (1)

1-37: LGTM! Clean and well-structured error banner component.

The component properly handles multiple errors with separators and optional close functionality. The API design is straightforward and consistent with usage across the codebase.

Optional: Consider stable keys for errors

If error objects might have unique identifiers or if you anticipate array mutations, consider using a more stable key:

-          {errors.map((error, index) => (
-            <div key={index}>
+          {errors.map((error, index) => (
+            <div key={error.id || `${error.title}-${index}`}>

However, using index is acceptable for static error lists that won't be reordered.

📜 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 2945b86 and aed1c08.

📒 Files selected for processing (9)
  • packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js
  • packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js
  • packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js
  • packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/JsonPreview.js
  • packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/XmlPreview/index.js
  • packages/bruno-app/src/components/ResponsePane/ScriptError/index.js
  • packages/bruno-app/src/ui/ErrorAlert/index.js
  • packages/bruno-app/src/ui/ErrorBanner/StyledWrapper.js
  • packages/bruno-app/src/ui/ErrorBanner/index.js
💤 Files with no reviewable changes (1)
  • packages/bruno-app/src/ui/ErrorAlert/index.js
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/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/RequestTabPanel/ExampleNotFound/index.js
  • packages/bruno-app/src/ui/ErrorBanner/index.js
  • packages/bruno-app/src/components/ResponsePane/ScriptError/index.js
  • packages/bruno-app/src/ui/ErrorBanner/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/JsonPreview.js
  • packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/XmlPreview/index.js
  • packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.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/ExampleNotFound/index.js
  • packages/bruno-app/src/ui/ErrorBanner/index.js
  • packages/bruno-app/src/components/ResponsePane/ScriptError/index.js
  • packages/bruno-app/src/ui/ErrorBanner/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/JsonPreview.js
  • packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/XmlPreview/index.js
  • packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/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/ui/ErrorBanner/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/ui/ErrorBanner/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/ui/ErrorBanner/StyledWrapper.js
🧬 Code graph analysis (3)
packages/bruno-app/src/components/ResponsePane/ScriptError/index.js (4)
packages/bruno-app/src/ui/ErrorBanner/index.js (1)
  • ErrorBanner (5-35)
packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js (1)
  • errors (27-32)
packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js (1)
  • errors (29-34)
packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js (1)
  • errors (33-38)
packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/JsonPreview.js (1)
packages/bruno-app/src/ui/ErrorBanner/index.js (1)
  • ErrorBanner (5-35)
packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/XmlPreview/index.js (1)
packages/bruno-app/src/ui/ErrorBanner/index.js (1)
  • ErrorBanner (5-35)
⏰ 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 - macOS
  • GitHub Check: CLI Tests
  • GitHub Check: SSL Tests - Windows
  • GitHub Check: Playwright E2E Tests
  • GitHub Check: Unit Tests
🔇 Additional comments (6)
packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/JsonPreview.js (1)

3-42: LGTM! Clean migration to ErrorBanner.

The error handling logic remains unchanged, and all three error branches consistently use the new ErrorBanner component with the correct errors array structure.

packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js (1)

4-38: LGTM! Consistent ErrorBanner adoption.

The migration maintains existing behavior while standardizing the error UI presentation. The error messaging and close tab functionality remain unchanged.

packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js (1)

4-36: LGTM! Consistent error UI migration.

Follows the same ErrorBanner pattern as other NotFound components. Implementation is clean and maintains existing functionality.

packages/bruno-app/src/ui/ErrorBanner/StyledWrapper.js (1)

7-42: LGTM! Theme-based styling with proper accent border.

The styling updates properly use theme tokens for colors and borders, and the new separator supports multi-error display. Consistent with the project's styled-components patterns.

packages/bruno-app/src/components/ResponsePane/ScriptError/index.js (1)

2-34: LGTM! Excellent use of ErrorBanner for multiple errors.

The refactor properly leverages ErrorBanner's ability to display multiple errors with separators. The error collection logic and close functionality are preserved correctly.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/XmlPreview/index.js (1)

1-76: LGTM! Consistent ErrorBanner migration.

All three error cases properly use the new ErrorBanner component with the correct errors array structure. The XML parsing and rendering logic remains intact.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js (1)

11-15: Add cleanup function to prevent setState on unmounted component.

The setTimeout lacks a cleanup function. If the tab is closed before the 300ms delay completes, React will attempt to call setShowErrorMessage on an unmounted component, causing warnings in development and potential memory leaks.

🔎 Proposed fix
 useEffect(() => {
-  setTimeout(() => {
+  const timer = setTimeout(() => {
     setShowErrorMessage(true);
   }, 300);
+  return () => clearTimeout(timer);
 }, []);
🧹 Nitpick comments (1)
packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js (1)

24-29: Simplify redundant conditional check.

The conditional {showErrorMessage ? (...) : null} is unnecessary since line 17 already guards against !showErrorMessage with an early return. The inner content will always render when this code is reached.

🔎 Proposed simplification
     <div className="flex items-center tab-label px-3">
-      {showErrorMessage ? (
-        <>
-          <IconAlertTriangle size={18} strokeWidth={1.5} className="text-yellow-600" />
-          <span className="ml-1">Not Found</span>
-        </>
-      ) : null}
+      <IconAlertTriangle size={18} strokeWidth={1.5} className="text-yellow-600" />
+      <span className="ml-1">Not Found</span>
     </div>
📜 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 aed1c08 and d74f767.

📒 Files selected for processing (1)
  • packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.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/RequestTabs/RequestTab/RequestTabNotFound.js
🧠 Learnings (1)
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.

Applied to files:

  • packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: Playwright E2E Tests
  • GitHub Check: SSL Tests - Linux
  • GitHub Check: CLI Tests
  • GitHub Check: Unit Tests
  • GitHub Check: SSL Tests - Windows
  • GitHub Check: SSL Tests - macOS
🔇 Additional comments (1)
packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js (1)

23-23: LGTM! Padding adjustment aligns with PR objectives.

The change from pl-2 to px-3 correctly adjusts the tab label padding horizontally, consistent with the broader tab padding fixes mentioned in the PR.

@bijin-bruno bijin-bruno merged commit 36b0a90 into usebruno:main Dec 30, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants