refactor: enhance WSRequestPane and WSResponsePane with ResponsiveTabs component#6650
Conversation
WalkthroughReplaces pane-specific tab markup/styles in WebSocket request and response panes with a shared ResponsiveTabs component; removes local tab CSS from StyledWrapper.js; introduces memoized tab definitions, rightContent refs, and replaces per-tab markup with a single memoized tab panel. Also adjusts small auth spacing and removes WSAuthMode rendering. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WS_Pane as WS Pane (Request/Response)
participant ResponsiveTabs
participant ReduxStore as Redux Store
participant TabPanel as Tab Panel Renderer
Note over User, WS_Pane: User selects a tab or pane updates
User->>WS_Pane: selectTab(tabId)
WS_Pane->>ResponsiveTabs: setActive(tabId), provide allTabs & rightContentRef
ResponsiveTabs->>ReduxStore: dispatch(selectActiveTab(tabId))
ReduxStore-->>ResponsiveTabs: activeTabUid updated
ResponsiveTabs->>WS_Pane: onActiveChange(activeTabUid)
WS_Pane->>TabPanel: render memoized tabPanel(activeTabUid)
TabPanel-->>User: render updated content (body/headers/auth/docs/messages/etc.)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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: 1
🧹 Nitpick comments (3)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js (2)
43-64: Consider memoizing the count calculations.
messagesCountandheadersCountare recalculated on every render before being used asuseMemodependencies. While this works correctly (they're primitives), you could move the calculations inside theuseMemoto keep everything self-contained and make the intent clearer.🔎 Optional: consolidate counts inside useMemo
- const messagesCount = Array.isArray(response.responses) ? response.responses.length : 0; - const headersCount = response.headers ? Object.keys(response.headers).length : 0; - - const allTabs = useMemo(() => { + const allTabs = useMemo(() => { + const messagesCount = Array.isArray(response.responses) ? response.responses.length : 0; + const headersCount = response.headers ? Object.keys(response.headers).length : 0; return [ { key: 'response', label: 'Messages', indicator: messagesCount > 0 ? <sup className="ml-1 font-medium">{messagesCount}</sup> : null }, { key: 'headers', label: 'Headers', indicator: headersCount > 0 ? <sup className="ml-1 font-medium">{headersCount}</sup> : null }, { key: 'timeline', label: 'Timeline', indicator: null } ]; - }, [messagesCount, headersCount]); + }, [response.responses, response.headers]);
108-129: Consider memoizingrightContent.This JSX block is re-created on every render. Since it's passed as a prop to
ResponsiveTabs, it could trigger unnecessary child re-renders. Wrapping inuseMemowith the appropriate dependencies would align with the performance optimizations applied elsewhere in this refactor.🔎 Wrap rightContent in useMemo
- const rightContent = !isLoading ? ( + const rightContent = useMemo(() => !isLoading ? ( <div ref={rightContentRef} className="flex items-center"> {focusedTab?.responsePaneTab === 'timeline' ? ( <> <ResponseLayoutToggle /> <ClearTimeline item={item} collection={collection} /> </> ) : item?.response ? ( <> <ResponseLayoutToggle /> <ResponseClear item={item} collection={collection} /> <WSResponseSortOrder item={item} collection={collection} /> <WSStatusCode status={response.statusCode} text={response.statusText} details={response.statusDescription} /> <ResponseTime duration={response.duration} /> </> ) : null} </div> - ) : null; + ) : null, [isLoading, focusedTab?.responsePaneTab, item, collection, response]);packages/bruno-app/src/components/RequestPane/WSRequestPane/index.js (1)
70-99: Memoization may not provide expected benefit.The
tabPaneluseMemo depends onitemandcollection, which are object references likely changing on every render from the parent. This means the memo will re-run frequently despite the optimization intent.If performance is a concern, consider memoizing at the parent level or using more granular dependencies (e.g.,
item.uid, specific collection properties).
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/index.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js
💤 Files with no reviewable changes (1)
- packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.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/ResponsePane/WsResponsePane/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/index.js
🧠 Learnings (2)
📚 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/WsResponsePane/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/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/RequestPane/WSRequestPane/index.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js (3)
packages/bruno-app/src/components/ResponsePane/index.js (4)
rightContentRef(37-37)response(39-39)allTabs(112-142)rightContent(220-272)packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/index.js (1)
response(39-39)packages/bruno-app/src/ui/ResponsiveTabs/index.js (1)
ResponsiveTabs(19-267)
⏰ 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 - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
- GitHub Check: CLI Tests
- GitHub Check: Playwright E2E Tests
- GitHub Check: Unit Tests
🔇 Additional comments (7)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js (2)
1-1: LGTM on imports and ref setup.Clean addition of
useMemo,useRef, andResponsiveTabs. TherightContentRefproperly supports the ResponsiveTabs contract for external control of the right-side content area.Also applies to: 14-14, 28-28
131-153: Clean integration with ResponsiveTabs.The refactored return block correctly wires
allTabs,activeTab,onTabSelect,rightContent, andrightContentRefinto theResponsiveTabscomponent. Layout classes (px-4,mt-4) maintain consistent spacing.packages/bruno-app/src/components/RequestPane/WSRequestPane/index.js (5)
1-1: LGTM on imports.Clean addition of
useMemo,useCallback, andResponsiveTabs. Follows the same pattern as the WSResponsePane refactor.Also applies to: 9-9
21-32: Good use of useCallback for selectTab.The dependency array
[dispatch, item.uid]correctly captures what the callback relies on, preventing stale closure issues.
40-68: allTabs memoization looks solid.Tab definitions with indicators for headers count, auth mode, and docs presence are correctly structured. Dependency array
[activeHeadersLength, auth.mode, docs]captures the reactive values—just ensure the null guard onauth.modementioned above is applied.
101-103: Solid early-return guard.Good defensive check preventing render when Redux state is inconsistent. This aligns with the similar guard in WSResponsePane.
105-117: Clean ResponsiveTabs integration.The component correctly receives
tabs,activeTab, andonTabSelect. Layout usesHeightBoundContainerfor bounded content rendering. Consistent with the WSResponsePane pattern—nice alignment across panes.
96202ca to
1e5e86f
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/bruno-app/src/components/RequestPane/WSRequestPane/index.js (1)
34-38: Add null guards forheadersandauth.
getPropertyFromDraftOrRequestcan returnnull. Line 38'sheaders.filter()and line 55'sauth.modewill throw aTypeErrorin that case.Proposed defensive fix
const headers = getPropertyFromDraftOrRequest(item, 'request.headers'); const docs = getPropertyFromDraftOrRequest(item, 'request.docs'); const auth = getPropertyFromDraftOrRequest(item, 'request.auth'); - const activeHeadersLength = headers.filter((header) => header.enabled).length; + const activeHeadersLength = (headers || []).filter((header) => header.enabled).length;And for line 55:
- indicator: auth.mode !== 'none' ? <StatusDot type="default" /> : null + indicator: auth?.mode !== 'none' ? <StatusDot type="default" /> : nullAnd for line 68 dependency:
- }, [activeHeadersLength, auth.mode, docs]); + }, [activeHeadersLength, auth?.mode, docs]);
🧹 Nitpick comments (1)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js (1)
30-32: Consider simplifying the filter callback.The explicit
ifwithreturn truecan be simplified to a direct boolean return.Proposed simplification
const requestTimeline = [...(collection?.timeline || [])].filter((obj) => { - if (obj.itemUid === item.uid) return true; + return obj.itemUid === item.uid; });
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/index.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js
💤 Files with no reviewable changes (1)
- packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.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/RequestPane/WSRequestPane/index.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js
🧠 Learnings (3)
📚 Learning: 2025-12-02T07:24:50.311Z
Learnt from: bijin-bruno
Repo: usebruno/bruno PR: 6263
File: packages/bruno-requests/src/auth/oauth2-helper.ts:249-249
Timestamp: 2025-12-02T07:24:50.311Z
Learning: In OAuth2 Basic Auth headers for Bruno, clientSecret is optional and can be omitted. When constructing the Authorization header in `packages/bruno-requests/src/auth/oauth2-helper.ts`, use `clientSecret || ''` instead of `clientSecret!` to properly handle cases where only clientId is provided, per community requests.
Applied to files:
packages/bruno-app/src/components/RequestPane/WSRequestPane/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/RequestPane/WSRequestPane/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/WSRequestPane/index.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js (1)
packages/bruno-app/src/ui/ResponsiveTabs/index.js (1)
ResponsiveTabs(19-267)
⏰ 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 - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
- GitHub Check: CLI Tests
- GitHub Check: Unit Tests
- GitHub Check: Playwright E2E Tests
🔇 Additional comments (9)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js (4)
1-28: LGTM!Imports and setup are clean. The
rightContentRefcorrectly integrates with theResponsiveTabscomponent API for layout measurement.
43-64: LGTM!Defensive null checks for
response.responsesandresponse.headersare solid. TheuseMemodependencies are correctly specified.
108-129: LGTM!Clean conditional rendering. The tab-specific right content (Timeline controls vs. Response controls) is handled logically.
131-153: LGTM!Clean integration with
ResponsiveTabs. All required props are passed correctly, and the tab panel content rendering is preserved.packages/bruno-app/src/components/RequestPane/WSRequestPane/index.js (5)
1-14: LGTM!Imports are well-organized. The addition of
useMemo,useCallback, andResponsiveTabsaligns with the refactor goals.
21-32: LGTM!Good use of
useCallbackforselectTab. Dependencies are correctly specified.
40-68: Tab structure is well-defined.The memoization and tab definitions are correct. Note: the
auth.modeissue in the dependency array is covered in the previous comment.
70-99: LGTM!Memoizing the
tabPanelis a good optimization. Dependencies are correctly specified.
101-117: LGTM!Clean integration with
ResponsiveTabs. The guard clause appropriately handles edge cases.
…s component - Replaced custom tab implementation with ResponsiveTabs for better consistency and usability. - Utilized useMemo and useCallback for performance optimizations in tab management. - Cleaned up unused styles and improved error handling in both components. - Updated StyledWrapper to remove legacy tab styles, streamlining the component structure.
1e5e86f to
3633b29
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @packages/bruno-app/src/components/RequestPane/WSRequestPane/index.js:
- Around line 34-38: getPropertyFromDraftOrRequest may return null for headers
and auth, causing activeHeadersLength (computed from headers.filter(...)) and
later reads of auth.mode to throw; ensure you null-guard these values by
defaulting headers to an empty array and auth to an empty object before use
(e.g., replace direct uses of headers and auth with safe locals like headers =
getPropertyFromDraftOrRequest(...) || [] and auth =
getPropertyFromDraftOrRequest(...) || {}), update activeHeadersLength to operate
on the defaulted headers, and adjust any dependency arrays (e.g., where auth is
referenced) to use the same guarded variables so nulls no longer cause
TypeErrors.
🧹 Nitpick comments (3)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js (3)
28-28: ClarifyrightContentRefusage.The ref is attached to the inner div (line 109) and also passed to
ResponsiveTabs(line 139). IfResponsiveTabsneeds to measure or interact with this element, this pattern works, but it's worth adding a brief comment explaining why the ref is needed.
34-39: Consider wrappingselectTabinuseCallbackfor consistency.
WSRequestPanewraps itsselectTabinuseCallback, but this file does not. For consistency and to prevent unnecessary re-renders ofResponsiveTabs, consider memoizing:Proposed change
- const selectTab = (tab) => { - dispatch(updateResponsePaneTab({ - uid: item.uid, - responsePaneTab: tab - })); - }; + const selectTab = useCallback( + (tab) => { + dispatch(updateResponsePaneTab({ + uid: item.uid, + responsePaneTab: tab + })); + }, + [dispatch, item.uid] + );You'll need to add
useCallbackto the import on line 1.
66-81:getTabPanelrecreated on every render.This function is passed to JSX on line 149 but is recreated each render. For alignment with the memoization pattern used elsewhere, consider wrapping in
useCallbackor converting to auseMemo-based approach likeWSRequestPane.tabPanel.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/index.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js
💤 Files with no reviewable changes (1)
- packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.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/ResponsePane/WsResponsePane/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/index.js
🧠 Learnings (3)
📚 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/WsResponsePane/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/index.js
📚 Learning: 2025-12-02T07:24:50.311Z
Learnt from: bijin-bruno
Repo: usebruno/bruno PR: 6263
File: packages/bruno-requests/src/auth/oauth2-helper.ts:249-249
Timestamp: 2025-12-02T07:24:50.311Z
Learning: In OAuth2 Basic Auth headers for Bruno, clientSecret is optional and can be omitted. When constructing the Authorization header in `packages/bruno-requests/src/auth/oauth2-helper.ts`, use `clientSecret || ''` instead of `clientSecret!` to properly handle cases where only clientId is provided, per community requests.
Applied to files:
packages/bruno-app/src/components/RequestPane/WSRequestPane/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/RequestPane/WSRequestPane/index.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: SSL Tests - Linux
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - macOS
- GitHub Check: Playwright E2E Tests
- GitHub Check: Unit Tests
- GitHub Check: CLI Tests
🔇 Additional comments (10)
packages/bruno-app/src/components/RequestPane/WSRequestPane/index.js (6)
1-14: LGTM on imports.Clean import additions for
useMemo,useCallback, andResponsiveTabs. Properly organized.
21-32: Good use ofuseCallbackforselectTab.Proper memoization with correct dependency array. This prevents unnecessary re-renders when passed to
ResponsiveTabs.
40-68: Tab definitions look solid.The
useMemodependencies are correct foractiveHeadersLength,auth.mode, anddocs. Indicators provide good UX feedback. Minor note: ensureauthnull guard is applied (see previous comment) to prevent runtime errors in the dependency array access.
70-99: Consider narrowingtabPaneldependencies.Including
itemandcollectionas dependencies meanstabPanelrecalculates whenever any property on these objects changes, even if unrelated to the current tab. This is acceptable for simplicity, but if performance becomes a concern, you could narrow to specific properties.
101-103: Early return guards are appropriate.Good defensive check before rendering. Handles missing
activeTabUid,focusedTab, orrequestPaneTab.
107-117: Clean ResponsiveTabs integration.Props are correctly wired. The
HeightBoundContainerwrappingtabPanelmaintains consistent height behavior.packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js (4)
1-17: LGTM on imports.Clean additions for
useMemo,useRef, andResponsiveTabs.
43-64: Tab definitions and indicators look good.Proper
useMemousage with correct dependencies. The count-based indicators provide useful feedback.
108-129:rightContentconditional rendering is clear.The logic correctly differentiates between timeline tab controls and response controls. Good use of fragment grouping.
131-153: ResponsiveTabs integration looks correct.Props are properly wired. The section layout handles the loading overlay and conditional tab panel rendering appropriately.
…ane layout - Removed unnecessary margin from StyledWrapper in ApiKeyAuth, BasicAuth, and BearerAuth components for a cleaner layout. - Introduced a new right content area in WSRequestPane for better organization of authentication modes. - Added a 'No Auth' view in WSAuth for improved user feedback when no authentication is selected. - Cleaned up unused imports and optimized component structure for maintainability.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @packages/bruno-app/src/components/RequestPane/WSRequestPane/index.js:
- Around line 37-41: getPropertyFromDraftOrRequest may return null for headers
and auth; update usages to guard and default so you never call methods on null:
when reading headers use something like const headers =
getPropertyFromDraftOrRequest(item, 'request.headers') || [] and then compute
activeHeadersLength from that safe array, and for auth use const auth =
getPropertyFromDraftOrRequest(item, 'request.auth') || {} before accessing
auth.mode (or check auth && auth.mode). Apply these null-defaults/guards where
headers.filter and auth.mode are accessed so neither throws.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/index.js
✅ Files skipped from review due to trivial changes (1)
- packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/index.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/index.js
🧠 Learnings (3)
📚 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/Auth/ApiKeyAuth/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/index.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/index.js
📚 Learning: 2025-12-02T07:24:50.311Z
Learnt from: bijin-bruno
Repo: usebruno/bruno PR: 6263
File: packages/bruno-requests/src/auth/oauth2-helper.ts:249-249
Timestamp: 2025-12-02T07:24:50.311Z
Learning: In OAuth2 Basic Auth headers for Bruno, clientSecret is optional and can be omitted. When constructing the Authorization header in `packages/bruno-requests/src/auth/oauth2-helper.ts`, use `clientSecret || ''` instead of `clientSecret!` to properly handle cases where only clientId is provided, per community requests.
Applied to files:
packages/bruno-app/src/components/RequestPane/WSRequestPane/index.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/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/RequestPane/Auth/BasicAuth/index.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: SSL Tests - macOS
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - Linux
- GitHub Check: SSL Tests - Windows
- GitHub Check: CLI Tests
- GitHub Check: Playwright E2E Tests
🔇 Additional comments (6)
packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.js (1)
64-64: LGTM – margin removal aligns with layout refactoring.Removing
mt-2is consistent with the PR's authentication layout cleanup. The parent component (WSRequestPane) should now handle spacing uniformly across auth modes.packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js (1)
55-55: LGTM - Styling alignment with new tab system.Removing the top margin is consistent with the ResponsiveTabs refactor and broader styling cleanup across authentication components.
packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/index.js (2)
70-72: Good addition for explicit 'none' auth handling.The new case provides clear feedback when no authentication is configured, improving UX.
85-85: LGTM - Consistent margin cleanup.Removing
mt-2aligns with the broader styling refactor across authentication components.Also applies to: 100-100, 109-109
packages/bruno-app/src/components/RequestPane/WSRequestPane/index.js (2)
43-71: Well-structured memoization.The memoized
allTabsandtabPanelimplementations cleanly separate tab definitions from rendering logic, with appropriate dependency arrays.Also applies to: 73-102
108-122: Clean integration of ResponsiveTabs with conditional right content.The conditional
rightContentfor the auth tab and the corresponding ref handling are implemented correctly.
| const headers = getPropertyFromDraftOrRequest(item, 'request.headers'); | ||
| const docs = getPropertyFromDraftOrRequest(item, 'request.docs'); | ||
| const auth = getPropertyFromDraftOrRequest(item, 'request.auth'); | ||
|
|
||
| const activeHeadersLength = headers.filter((header) => header.enabled).length; |
There was a problem hiding this comment.
Null guards still needed for headers and auth.
getPropertyFromDraftOrRequest can return null, causing TypeErrors at:
- Line 41:
headers.filter() - Line 58:
auth.mode
Default to empty array/object:
- const headers = getPropertyFromDraftOrRequest(item, 'request.headers');
+ const headers = getPropertyFromDraftOrRequest(item, 'request.headers') || [];
const docs = getPropertyFromDraftOrRequest(item, 'request.docs');
- const auth = getPropertyFromDraftOrRequest(item, 'request.auth');
+ const auth = getPropertyFromDraftOrRequest(item, 'request.auth') || {};Also applies to: 58-58, 71-71
🤖 Prompt for AI Agents
In @packages/bruno-app/src/components/RequestPane/WSRequestPane/index.js around
lines 37 - 41, getPropertyFromDraftOrRequest may return null for headers and
auth; update usages to guard and default so you never call methods on null: when
reading headers use something like const headers =
getPropertyFromDraftOrRequest(item, 'request.headers') || [] and then compute
activeHeadersLength from that safe array, and for auth use const auth =
getPropertyFromDraftOrRequest(item, 'request.auth') || {} before accessing
auth.mode (or check auth && auth.mode). Apply these null-defaults/guards where
headers.filter and auth.mode are accessed so neither throws.
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
Refactor
Style
✏️ Tip: You can customize this high-level summary in your review settings.