fix(content-sidebar): add programmatic Resin tracking for sidebar resize by jmcbgaston · Pull Request #4722 · box/box-ui-elements

jmcbgaston · 2026-07-24T22:12:35Z

Description

The resizable sidebar resize handle uses pointer capture (pointerdown / pointermove / pointerup), so Resin's DOM click delegation never records sidebarresizehandle events.

This change emits programmatic recordAction calls on resize start and end with width metadata, and forwards an optional resin prop from ContentPreview through to Sidebar so host apps can supply the callback.

Event shape:

{
  action: 'programmatic',
  component: 'preview',
  target: 'sidebarresizehandle',
  fileId,
  fileExtension,
  data: { phase: 'resizeStart' | 'resizeEnd', width, startWidth, viewWidth },
}

Test plan

Unit tests for SidebarResizeHandle, Sidebar, ContentSidebar, and ContentPreview prop forwarding
ESLint and Flow on touched files
Manual verification: programmatic resize emits resizeStart and resizeEnd with expected payload when host supplies resin.recordAction

Semantic release type

fix - Bug fix

Summary by CodeRabbit

New Features
- Added optional action-recording support for the preview and sidebar surfaces via a new resin prop.
- Sidebar resize interactions can now record both resize start and end with standardized metadata (including file and width details).
Bug Fixes
- Improved resize lifecycle handling by providing both the starting width and the final width to callbacks.
Tests
- Added/updated unit tests to verify resin forwarding and resize lifecycle behavior (including action recording and resize handle callbacks).

Resin DOM delegation only captures click/mouseup, but the resize handle uses pointer capture, so GA shipped with zero sidebarresizehandle events. Emit recordAction on resizeStart/resizeEnd and forward resin through ContentPreview. Co-authored-by: Cursor <cursoragent@cursor.com>

coderabbitai · 2026-07-24T22:13:28Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a4bdaa33-72a6-4aa7-a202-2d09806b01c0

📥 Commits

Reviewing files that changed from the base of the PR and between 56b8817 and 8dddc55.

📒 Files selected for processing (2)

src/elements/content-preview/ContentPreview.js
src/elements/content-sidebar/ContentSidebar.js

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

src/elements/content-sidebar/ContentSidebar.js
src/elements/content-preview/ContentPreview.js

Walkthrough

Adds optional resin prop forwarding through ContentPreview and ContentSidebar, and records structured Resin actions when sidebar resizing starts and ends.

Changes

Sidebar resize instrumentation

Layer / File(s)	Summary
Resin prop propagation `src/elements/content-preview/ContentPreview.js`, `src/elements/content-preview/__tests__/ContentPreview.test.js`, `src/elements/content-sidebar/ContentSidebar.js`, `src/elements/content-sidebar/__tests__/ContentSidebar.test.js`	`resin` is added to public props and forwarded through the sidebar components, with forwarding tests.
Resize action lifecycle `src/elements/content-sidebar/Sidebar.js`, `src/elements/content-sidebar/SidebarResizeHandle.js`, `src/elements/content-sidebar/__tests__/*`	Resize callbacks expose starting and ending widths, and `Sidebar` records resize-start and resize-end metadata through `resin.recordAction`.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

box/box-ui-elements#4574: Modifies the same sidebar resize implementation and callback wiring.

Suggested reviewers: tjiang-box

Poem

I tugged the sidebar, light and bright,
Two Resin notes took graceful flight.
Start width here, end width there,
File and view metadata in the air.
Squeak squeak—resize with care! 🐇

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the main change: programmatic Resin tracking for sidebar resize.
Description check	✅ Passed	The description clearly explains the bug, the fix, test coverage, and release type, and it is complete enough for the template.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Biome (2.5.3)

src/elements/content-sidebar/ContentSidebar.js

File contains syntax errors that prevent linting: Line 12: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 40: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 41: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 42: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 43: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 44: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 45: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 46: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 47: 'import type'

... [truncated 4077 characters] ...

remove the syntax.; Line 349: return type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 350: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 368: return type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 418: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 419: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 430: expected ) but instead found :; Line 430: Unexpected token. Did you mean {'}'} or }?; Line 430: Unexpected token. Did you mean {'>'} or >?

src/elements/content-preview/ContentPreview.js

File contains syntax errors that prevent linting: Line 21: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 36: 'import { type x ident }' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 67: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 68: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 69: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 70: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 71: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 72: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 73: '

... [truncated 19028 characters] ...

nly feature. Convert your file to a TypeScript file or remove the syntax.; Line 1599: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 1611: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 1618: Type annotations are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 1650: expected ) but instead found :; Line 1650: Expected a JSX attribute but instead found ')'.; Line 1650: Unexpected token. Did you mean {'}'} or }?; Line 1650: Unexpected token. Did you mean {'>'} or >?; Line 1762: 'export type' declarations are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.

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.}

jmcbgaston · 2026-07-27T21:16:40Z

@Mergifyio queue

mergify · 2026-07-27T21:17:07Z

jmcbgaston requested review from a team as code owners July 24, 2026 22:12

Merge branch 'master' into add-resin-tracking-for-sidebar-resize

74d2543

jackiejou approved these changes Jul 27, 2026

View reviewed changes

jmcbgaston added the ready-to-merge label Jul 27, 2026

tjiang-box approved these changes Jul 27, 2026

View reviewed changes

mergify Bot added the queued label Jul 27, 2026

Merge branch 'master' into add-resin-tracking-for-sidebar-resize

8dddc55

mergify Bot merged commit 2412b93 into box:master Jul 27, 2026
11 checks passed

mergify Bot removed the queued label Jul 27, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(content-sidebar): add programmatic Resin tracking for sidebar resize - #4722

fix(content-sidebar): add programmatic Resin tracking for sidebar resize#4722
mergify[bot] merged 3 commits into
box:masterfrom
jmcbgaston:add-resin-tracking-for-sidebar-resize

jmcbgaston commented Jul 24, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

jmcbgaston commented Jul 27, 2026

Uh oh!

mergify Bot commented Jul 27, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

jmcbgaston commented Jul 24, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test plan

Semantic release type

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

jmcbgaston commented Jul 27, 2026

Uh oh!

mergify Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge Queue Status

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jmcbgaston commented Jul 24, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

mergify Bot commented Jul 27, 2026 •

edited

Loading