collapsible request/response split in request tab#7566
Open
gopu-bruno wants to merge 3 commits intousebruno:mainfrom
Open
collapsible request/response split in request tab#7566gopu-bruno wants to merge 3 commits intousebruno:mainfrom
gopu-bruno wants to merge 3 commits intousebruno:mainfrom
Conversation
gopu-bruno
requested review from
bijin-bruno,
helloanoop,
lohit-bruno and
naman-bruno
as code owners
Contributor
WalkthroughAdds collapse/expand behavior for RequestTabPanel: a new CollapsedPanelIndicator component with pointer/keyboard drag handling, Redux actions/state to track per-tab collapsed state and saved sizes, hook extensions to control collapse/expand, and RequestTabPanel integration with edge-proximity collapse detection and related styling adjustments. Changes
Sequence DiagramsequenceDiagram
participant User as User
participant Indicator as CollapsedPanelIndicator
participant Panel as RequestTabPanel
participant Hook as useTabPaneBoundaries
participant Store as Redux Store
User->>Indicator: click / keypress / pointer-down
Indicator->>Panel: onExpand() or onDragStart()
Panel->>Hook: collapseRequest()/collapseResponse()/expandRequest()/expandResponse()
Hook->>Store: dispatch collapse/expand action
Store->>Store: update collapsed flags & saved sizes
Store-->>Hook: updated state
Hook-->>Panel: new collapsed state
Panel-->>User: UI re-render (collapsed/expanded)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
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/hooks/useTabPaneBoundaries/index.js (1)
57-67:⚠️ Potential issue | 🟡 MinorReset currently restores the stale pre-collapse request size.
If the request pane is collapsed,
expandRequestPane()rewrites the just-reset width/height withrequestPaneWidthBeforeCollapseandrequestPaneHeightBeforeCollapse, soreset()does not actually reset the split.Possible fix
reset() { + dispatch(expandRequestPane({ uid: activeTabUid })); + dispatch(expandResponsePane({ uid: activeTabUid })); dispatch(updateRequestPaneTabHeight({ uid: activeTabUid, requestPaneHeight: MIN_TOP_PANE_HEIGHT })); dispatch(updateRequestPaneTabWidth({ uid: activeTabUid, requestPaneWidth: (screenWidth - asideWidth) / DEFAULT_PANE_WIDTH_DIVISOR })); - dispatch(expandRequestPane({ uid: activeTabUid })); - dispatch(expandResponsePane({ uid: activeTabUid })); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/bruno-app/src/hooks/useTabPaneBoundaries/index.js` around lines 57 - 67, reset() sets the request pane size but then expandRequestPane() restores stale requestPaneWidthBeforeCollapse/requestPaneHeightBeforeCollapse values, so modify reset() to clear those "before collapse" fields for the activeTabUid before calling expandRequestPane; specifically, dispatch an action (or reuse updateRequestPaneTabWidth/updateRequestPaneTabHeight to set requestPaneWidthBeforeCollapse and requestPaneHeightBeforeCollapse to null/undefined for activeTabUid) and only then call expandRequestPane({ uid: activeTabUid }) and expandResponsePane; this ensures the width/height you set in reset() are not overwritten by expandRequestPane().
🧹 Nitpick comments (1)
packages/bruno-app/src/components/RequestTabPanel/CollapsedPanelIndicator/index.js (1)
5-11: Document this component's interaction contract.A short JSDoc block would help here because the click-vs-drag handoff and the
panelType/dragThresholdPxexpectations are not obvious from the call site.As per coding guidelines, "Add JSDoc comments to abstractions for additional details."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/bruno-app/src/components/RequestTabPanel/CollapsedPanelIndicator/index.js` around lines 5 - 11, Add a JSDoc block above the CollapsedPanelIndicator component that documents its interaction contract: describe accepted prop values for panelType ('request' | 'response'), isVertical (boolean), and dragThresholdPx (number, pixels threshold used to differentiate click vs drag), explain the click-vs-drag handoff behavior (short press/click invokes onExpand, pointer movement beyond dragThresholdPx invokes onDragStart), and specify the expected signatures and event types for onExpand and onDragStart (e.g., (event: MouseEvent|PointerEvent) => void) so callers know how to use and test the component.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@packages/bruno-app/src/components/RequestTabPanel/CollapsedPanelIndicator/StyledWrapper.js`:
- Around line 15-17: The current StyledWrapper removes the focus outline (the
&:focus rule) making the collapsed strip invisible to keyboard users; update the
StyledWrapper component to replace outline: none with an accessible visible
focus style (use &:focus and/or &:focus-visible) that applies a clear focus ring
such as a themed box-shadow or border highlight so the expand affordance is
visible when focused (reference the StyledWrapper styled component and its
&:focus selector).
In `@packages/bruno-app/src/components/RequestTabPanel/index.js`:
- Around line 195-203: The drag-start handlers (handleRequestIndicatorDragStart
and handleResponseIndicatorDragStart) expand the pane and arm dragging but never
apply the current pointer position, so if the user crosses the threshold and
releases before the next mousemove the splitter snaps to the old position; fix
by reading the pointer coords from the event (e.clientX / e.clientY) and
immediately calling the same splitter-position updater used during dragging (the
function or setter that updates the split position / moveSplitter) before or as
part of startDragging, so the splitter is placed at the current pointer location
right away; update both handleRequestIndicatorDragStart and
handleResponseIndicatorDragStart to apply the pointer-derived position via that
updater (or extend startDragging to accept and apply the initial coordinates)
and keep expandRequest/expandResponse calls as-is.
---
Outside diff comments:
In `@packages/bruno-app/src/hooks/useTabPaneBoundaries/index.js`:
- Around line 57-67: reset() sets the request pane size but then
expandRequestPane() restores stale
requestPaneWidthBeforeCollapse/requestPaneHeightBeforeCollapse values, so modify
reset() to clear those "before collapse" fields for the activeTabUid before
calling expandRequestPane; specifically, dispatch an action (or reuse
updateRequestPaneTabWidth/updateRequestPaneTabHeight to set
requestPaneWidthBeforeCollapse and requestPaneHeightBeforeCollapse to
null/undefined for activeTabUid) and only then call expandRequestPane({ uid:
activeTabUid }) and expandResponsePane; this ensures the width/height you set in
reset() are not overwritten by expandRequestPane().
---
Nitpick comments:
In
`@packages/bruno-app/src/components/RequestTabPanel/CollapsedPanelIndicator/index.js`:
- Around line 5-11: Add a JSDoc block above the CollapsedPanelIndicator
component that documents its interaction contract: describe accepted prop values
for panelType ('request' | 'response'), isVertical (boolean), and
dragThresholdPx (number, pixels threshold used to differentiate click vs drag),
explain the click-vs-drag handoff behavior (short press/click invokes onExpand,
pointer movement beyond dragThresholdPx invokes onDragStart), and specify the
expected signatures and event types for onExpand and onDragStart (e.g., (event:
MouseEvent|PointerEvent) => void) so callers know how to use and test the
component.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 0f79ea15-a1d0-447f-a21a-19ed6762ecd7
📒 Files selected for processing (6)
packages/bruno-app/src/components/RequestTabPanel/CollapsedPanelIndicator/StyledWrapper.jspackages/bruno-app/src/components/RequestTabPanel/CollapsedPanelIndicator/index.jspackages/bruno-app/src/components/RequestTabPanel/StyledWrapper.jspackages/bruno-app/src/components/RequestTabPanel/index.jspackages/bruno-app/src/hooks/useTabPaneBoundaries/index.jspackages/bruno-app/src/providers/ReduxStore/slices/tabs.js
Comment on lines
+195
to
+203
| const handleRequestIndicatorDragStart = useCallback((e) => { | ||
| expandRequest(); | ||
| startDragging(e); | ||
| }, [expandRequest, startDragging]); | ||
|
|
||
| const handleResponseIndicatorDragStart = useCallback((e) => { | ||
| expandResponse(); | ||
| startDragging(e); | ||
| }, [expandResponse, startDragging]); |
Contributor
There was a problem hiding this comment.
Use the threshold-crossing event to place the splitter immediately.
These handlers expand the pane and arm dragging, but they never apply the current pointer position. If the user crosses the drag threshold and releases before the next mousemove, the pane reopens at the stored/default split instead of the dragged position.
Possible fix
+ const syncPaneSizeFromPointer = useCallback((e) => {
+ const mainRect = mainSectionRef.current?.getBoundingClientRect();
+ if (!mainRect) return;
+
+ if (isVerticalLayoutRef.current) {
+ const maxHeight = mainRect.height - MIN_BOTTOM_PANE_HEIGHT;
+ const nextHeight = Math.max(MIN_TOP_PANE_HEIGHT, Math.min(e.clientY - mainRect.top, maxHeight));
+ setTopPaneHeight(nextHeight);
+ return;
+ }
+
+ const maxWidth = mainRect.width - MIN_RIGHT_PANE_WIDTH;
+ const nextWidth = Math.max(MIN_LEFT_PANE_WIDTH, Math.min(e.clientX - mainRect.left, maxWidth));
+ setLeftPaneWidth(nextWidth);
+ }, [setTopPaneHeight, setLeftPaneWidth]);
+
const handleRequestIndicatorDragStart = useCallback((e) => {
expandRequest();
+ syncPaneSizeFromPointer(e);
startDragging(e);
- }, [expandRequest, startDragging]);
+ }, [expandRequest, syncPaneSizeFromPointer, startDragging]);
const handleResponseIndicatorDragStart = useCallback((e) => {
expandResponse();
+ syncPaneSizeFromPointer(e);
startDragging(e);
- }, [expandResponse, startDragging]);
+ }, [expandResponse, syncPaneSizeFromPointer, startDragging]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/bruno-app/src/components/RequestTabPanel/index.js` around lines 195
- 203, The drag-start handlers (handleRequestIndicatorDragStart and
handleResponseIndicatorDragStart) expand the pane and arm dragging but never
apply the current pointer position, so if the user crosses the threshold and
releases before the next mousemove the splitter snaps to the old position; fix
by reading the pointer coords from the event (e.clientX / e.clientY) and
immediately calling the same splitter-position updater used during dragging (the
function or setter that updates the split position / moveSplitter) before or as
part of startDragging, so the splitter is placed at the current pointer location
right away; update both handleRequestIndicatorDragStart and
handleResponseIndicatorDragStart to apply the pointer-derived position via that
updater (or extend startDragging to accept and apply the initial coordinates)
and keep expandRequest/expandResponse calls as-is.
gopu-bruno
force-pushed
the
feat/collapsible-response-panel
branch
from
d210e5f to
c39adc0
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
packages/bruno-app/src/components/RequestTabPanel/index.js (1)
209-217:⚠️ Potential issue | 🟠 MajorApply the current pointer position when drag-expanding a collapsed pane.
These handlers reopen the pane and start dragging, but they still wait for the next
mousemovebefore updating the split. If the threshold is crossed and the mouse is released immediately, the pane snaps back to the saved/default size instead of the dragged position.💡 Possible fix
+ const syncPaneSizeFromPointer = useCallback((e) => { + const mainRect = mainSectionRef.current?.getBoundingClientRect(); + if (!mainRect) { + return; + } + + if (isVerticalLayoutRef.current) { + const maxHeight = mainRect.height - MIN_BOTTOM_PANE_HEIGHT; + const nextHeight = Math.max(MIN_TOP_PANE_HEIGHT, Math.min(e.clientY - mainRect.top, maxHeight)); + setTopPaneHeight(nextHeight); + return; + } + + const maxWidth = mainRect.width - MIN_RIGHT_PANE_WIDTH; + const nextWidth = Math.max(MIN_LEFT_PANE_WIDTH, Math.min(e.clientX - mainRect.left, maxWidth)); + setLeftPaneWidth(nextWidth); + }, [setTopPaneHeight, setLeftPaneWidth]); + const handleRequestIndicatorDragStart = useCallback((e) => { expandRequest(); + syncPaneSizeFromPointer(e); startDragging(e); - }, [expandRequest, startDragging]); + }, [expandRequest, syncPaneSizeFromPointer, startDragging]); const handleResponseIndicatorDragStart = useCallback((e) => { expandResponse(); + syncPaneSizeFromPointer(e); startDragging(e); - }, [expandResponse, startDragging]); + }, [expandResponse, syncPaneSizeFromPointer, startDragging]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/bruno-app/src/components/RequestTabPanel/index.js` around lines 209 - 217, The pane reopens then waits for the next mousemove so immediate drag position isn't applied; modify handleRequestIndicatorDragStart and handleResponseIndicatorDragStart to read the pointer position from the incoming event (e.g., clientX/clientY) and invoke the same update routine used on mousemove to set the split immediately (before or right after calling startDragging), so expandRequest/expandResponse + startDragging both apply the current pointer position instead of waiting for the next mousemove. Ensure you call the shared move/update handler (the function used in the mousemove handler) with the event-derived coordinates so the pane size reflects the initial press.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/bruno-app/src/components/RequestTabPanel/index.js`:
- Around line 420-442: The indentation of the JSX/returned block around
getRequestPaneStyle is inconsistent with the project's 2-space rule, causing
`@stylistic/indent` failures; reformat the JSX starting from the return
(ScopedPersistenceProvider) through the StyledWrapper opening tag so all nested
attributes and ternary className expressions use 2 spaces per indent (no tabs),
align the multiline ternary fragments and template literals consistently, and
ensure closing braces/parentheses line up with their openings (referencing
getRequestPaneStyle, ScopedPersistenceProvider, StyledWrapper, and
focusedTab.uid to locate the block).
---
Duplicate comments:
In `@packages/bruno-app/src/components/RequestTabPanel/index.js`:
- Around line 209-217: The pane reopens then waits for the next mousemove so
immediate drag position isn't applied; modify handleRequestIndicatorDragStart
and handleResponseIndicatorDragStart to read the pointer position from the
incoming event (e.g., clientX/clientY) and invoke the same update routine used
on mousemove to set the split immediately (before or right after calling
startDragging), so expandRequest/expandResponse + startDragging both apply the
current pointer position instead of waiting for the next mousemove. Ensure you
call the shared move/update handler (the function used in the mousemove handler)
with the event-derived coordinates so the pane size reflects the initial press.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d1d12767-dc53-49bc-bb2a-a929ff28b75d
📒 Files selected for processing (6)
packages/bruno-app/src/components/RequestTabPanel/CollapsedPanelIndicator/StyledWrapper.jspackages/bruno-app/src/components/RequestTabPanel/CollapsedPanelIndicator/index.jspackages/bruno-app/src/components/RequestTabPanel/StyledWrapper.jspackages/bruno-app/src/components/RequestTabPanel/index.jspackages/bruno-app/src/hooks/useTabPaneBoundaries/index.jspackages/bruno-app/src/providers/ReduxStore/slices/tabs.js
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/bruno-app/src/hooks/useTabPaneBoundaries/index.js
- packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
- packages/bruno-app/src/components/RequestTabPanel/CollapsedPanelIndicator/index.js
- packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
- packages/bruno-app/src/components/RequestTabPanel/CollapsedPanelIndicator/StyledWrapper.js
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
packages/bruno-app/src/components/RequestTabPanel/index.js (1)
209-217:⚠️ Potential issue | 🟠 MajorPointer position not synced immediately on expand.
These handlers expand the pane and arm dragging, but never apply the current pointer position. If the user crosses the drag threshold and releases before the next
mousemove, the pane reopens at the stored/default split instead of where they dragged.Apply the pointer-derived split position immediately after expanding:
Possible fix
+ const syncPaneSizeFromPointer = useCallback((e) => { + const mainRect = mainSectionRef.current?.getBoundingClientRect(); + if (!mainRect) return; + + if (isVerticalLayoutRef.current) { + const maxHeight = mainRect.height - MIN_BOTTOM_PANE_HEIGHT; + const nextHeight = Math.max(MIN_TOP_PANE_HEIGHT, Math.min(e.clientY - mainRect.top, maxHeight)); + setTopPaneHeight(nextHeight); + return; + } + + const maxWidth = mainRect.width - MIN_RIGHT_PANE_WIDTH; + const nextWidth = Math.max(MIN_LEFT_PANE_WIDTH, Math.min(e.clientX - mainRect.left, maxWidth)); + setLeftPaneWidth(nextWidth); + }, [setTopPaneHeight, setLeftPaneWidth]); const handleRequestIndicatorDragStart = useCallback((e) => { expandRequest(); + syncPaneSizeFromPointer(e); startDragging(e); - }, [expandRequest, startDragging]); + }, [expandRequest, syncPaneSizeFromPointer, startDragging]); const handleResponseIndicatorDragStart = useCallback((e) => { expandResponse(); + syncPaneSizeFromPointer(e); startDragging(e); - }, [expandResponse, startDragging]); + }, [expandResponse, syncPaneSizeFromPointer, startDragging]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/bruno-app/src/components/RequestTabPanel/index.js` around lines 209 - 217, The drag-start handlers expand the pane and begin dragging but don't apply the current pointer-derived split, so if the user releases before the next mousemove the split snaps back; in handleRequestIndicatorDragStart and handleResponseIndicatorDragStart, after calling expandRequest()/expandResponse() and before startDragging(e) (or immediately after), compute and apply the split position from the incoming event by invoking the same helper used on mousemove (the pointer-to-split setter used elsewhere—e.g. the function that onMouseMove uses to derive and set split) so the immediate pointer location is applied to the splitter state while dragging is armed.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@packages/bruno-app/src/components/RequestTabPanel/index.js`:
- Around line 209-217: The drag-start handlers expand the pane and begin
dragging but don't apply the current pointer-derived split, so if the user
releases before the next mousemove the split snaps back; in
handleRequestIndicatorDragStart and handleResponseIndicatorDragStart, after
calling expandRequest()/expandResponse() and before startDragging(e) (or
immediately after), compute and apply the split position from the incoming event
by invoking the same helper used on mousemove (the pointer-to-split setter used
elsewhere—e.g. the function that onMouseMove uses to derive and set split) so
the immediate pointer location is applied to the splitter state while dragging
is armed.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: bb3da678-9a73-41d5-a363-a8bfb65b5d6e
📒 Files selected for processing (1)
packages/bruno-app/src/components/RequestTabPanel/index.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Add collapse and expand behaviour for the request and response panes in the request tab.
Screenshots
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
New Features
Style / UI Improvements