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

[jmcbgaston]

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 analytics tracking for sidebar resize interactions, including resize start and completion details.
  • Enabled preview and sidebar components to receive optional action-recording configuration.
  • Resize events now include relevant file and width information.

• Bug Fixes

  • Improved resize callback handling by preserving both the starting and final sidebar widths.

• Tests

  • Added coverage for action tracking, prop forwarding, and resize lifecycle callbacks.

[coderabbitai]

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: 5ae25435-a906-4350-9fba-b53370e812d3

📥 Commits

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

📒 Files selected for processing (8)

• src/elements/content-preview/ContentPreview.js
• src/elements/content-preview/__tests__/ContentPreview.test.js
• src/elements/content-sidebar/ContentSidebar.js
• src/elements/content-sidebar/Sidebar.js
• src/elements/content-sidebar/SidebarResizeHandle.js
• src/elements/content-sidebar/__tests__/ContentSidebar.test.js
• src/elements/content-sidebar/__tests__/Sidebar.test.js
• src/elements/content-sidebar/__tests__/SidebarResizeHandle.test.js

---

Walkthrough

Adds resin prop forwarding through ContentPreview and ContentSidebar, and records structured Resin actions when the sidebar resize begins 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 from ContentPreview through ContentSidebar to Sidebar, 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 now 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 labels: ready-to-merge

Suggested reviewers: jackiejou, tjiang-box, shahzadaziz

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 clearly matches the main change: adding programmatic Resin tracking for sidebar resize.
Description check	✅ Passed	The description includes description, test plan, and semantic release type, matching the repository's expected detail level.
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-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 65: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 66: 'import type' 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: '

... [truncated 19028 characters] ...

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

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 38: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 39: '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'

... [truncated 4077 characters] ...

remove the syntax.; Line 347: return type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 348: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 366: return type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 416: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 417: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 428: expected ) but instead found :; Line 428: Unexpected token. Did you mean {'}'} or }?; Line 428: Unexpected token. Did you mean {'>'} or >?

src/elements/content-sidebar/Sidebar.js

File contains syntax errors that prevent linting: Line 14: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 17: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 18: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 26: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 27: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 32: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 33: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 34: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 35: 'import type'

... [truncated 7124 characters] ...

a semicolon or an implicit semicolon after a statement, but found none; Line 345: return type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 350: return type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 365: Type annotations are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 365: Type annotations are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 404: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 405: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.

• 1 others

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}