fix(video-annotations): sidebar button fix to not propagate mousedown event #4388
Conversation
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
Contributor
WalkthroughAdds a mousedown handler that stops event propagation and attaches it to the modernized and legacy tooltip/button wrappers in SidebarToggleButton. Replaces snapshot tests with React Testing Library parametric tests that cover isOpen, direction, feature-flagged modernized rendering, and mousedown propagation behavior. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ 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 |
bfoxx1906
changed the title
![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
🧹 Nitpick comments (1)
src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js (1)
8-38: Expand test coverage to include previewModernization feature flag.This parametric test only covers
isPreviewModernizationEnabled: false. Consider extending the test matrix to also coverisPreviewModernizationEnabled: trueto ensure icon rendering and collapsed state work correctly in both modernized and legacy paths.Apply this diff to expand the test matrix:
test.each` - isOpen | direction - ${true} | ${'left'} - ${false} | ${'left'} - ${true} | ${'right'} - ${false} | ${'right'} + isOpen | direction | isPreviewModernizationEnabled + ${true} | ${'left'} | ${false} + ${false} | ${'left'} | ${false} + ${true} | ${'right'} | ${false} + ${false} | ${'right'} | ${false} + ${true} | ${'left'} | ${true} + ${false} | ${'left'} | ${true} + ${true} | ${'right'} | ${true} + ${false} | ${'right'} | ${true} `( - 'should render correct button correctly when open is $isOpen and direction is $direction and isPreviewModernizationEnabled is false', - ({ isOpen, direction }) => { + 'should render correct button correctly when open is $isOpen and direction is $direction and isPreviewModernizationEnabled is $isPreviewModernizationEnabled', + ({ isOpen, direction, isPreviewModernizationEnabled }) => { render(<SidebarToggleButton isOpen={isOpen} direction={direction} />, { - wrapperProps: { features: { previewModernization: { enabled: false } } }, + wrapperProps: { features: { previewModernization: { enabled: isPreviewModernizationEnabled } } }, });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton.test.js.snapis excluded by!**/*.snap
📒 Files selected for processing (2)
src/components/sidebar-toggle-button/SidebarToggleButton.js(1 hunks)src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js(1 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: fpan225
Repo: box/box-ui-elements PR: 4239
File: src/elements/content-sidebar/SidebarNav.js:94-106
Timestamp: 2025-09-03T18:10:29.467Z
Learning: In the ContentSidebar CustomSidebarPanel API, the navButtonProps spread should come after explicit data-* attributes to allow users to override analytics tracking attributes like data-resin-target, data-target-id, and data-testid when needed. This is intentional API design for flexibility.
Learnt from: bxie-box
Repo: box/box-ui-elements PR: 4250
File: src/features/classification/applied-by-ai-classification-reason/__tests__/AppliedByAiClassificationReason.test.tsx:44-51
Timestamp: 2025-08-27T17:03:48.322Z
Learning: In test files for bxie-box, prefer using queryByTestId over getByTestId when testing for expected elements that should always exist, as null access serves as validation for regressions or unexpected changes rather than masking issues with defensive assertions.
Learnt from: fpan225
Repo: box/box-ui-elements PR: 4239
File: src/elements/content-sidebar/SidebarNav.js:195-206
Timestamp: 2025-09-03T18:10:42.760Z
Learning: In src/elements/content-sidebar/SidebarNav.js, the maintainer wants users to be able to override data-* attributes (data-resin-target, data-target-id, data-testid) through navButtonProps for custom tabs. The spread of {...navButtonProps} should come after the data-* attributes to allow overriding, not before them.
📚 Learning: 2025-09-03T18:10:29.467Z
Learnt from: fpan225
Repo: box/box-ui-elements PR: 4239
File: src/elements/content-sidebar/SidebarNav.js:94-106
Timestamp: 2025-09-03T18:10:29.467Z
Learning: In the ContentSidebar CustomSidebarPanel API, the navButtonProps spread should come after explicit data-* attributes to allow users to override analytics tracking attributes like data-resin-target, data-target-id, and data-testid when needed. This is intentional API design for flexibility.
Applied to files:
src/components/sidebar-toggle-button/SidebarToggleButton.js
📚 Learning: 2025-09-03T18:10:42.760Z
Learnt from: fpan225
Repo: box/box-ui-elements PR: 4239
File: src/elements/content-sidebar/SidebarNav.js:195-206
Timestamp: 2025-09-03T18:10:42.760Z
Learning: In src/elements/content-sidebar/SidebarNav.js, the maintainer wants users to be able to override data-* attributes (data-resin-target, data-target-id, data-testid) through navButtonProps for custom tabs. The spread of {...navButtonProps} should come after the data-* attributes to allow overriding, not before them.
Applied to files:
src/components/sidebar-toggle-button/SidebarToggleButton.jssrc/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js
📚 Learning: 2025-08-27T17:03:48.322Z
Learnt from: bxie-box
Repo: box/box-ui-elements PR: 4250
File: src/features/classification/applied-by-ai-classification-reason/__tests__/AppliedByAiClassificationReason.test.tsx:44-51
Timestamp: 2025-08-27T17:03:48.322Z
Learning: In test files for bxie-box, prefer using queryByTestId over getByTestId when testing for expected elements that should always exist, as null access serves as validation for regressions or unexpected changes rather than masking issues with defensive assertions.
Applied to files:
src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js
🧬 Code graph analysis (2)
src/components/sidebar-toggle-button/SidebarToggleButton.js (2)
src/elements/content-sidebar/SidebarNav.js (1)
isPreviewModernizationEnabled(139-139)src/elements/content-sidebar/additional-tabs/AdditionalTabTooltip.js (1)
isPreviewModernizationEnabled(23-23)
src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js (1)
src/components/sidebar-toggle-button/SidebarToggleButton.js (3)
SidebarToggleButton(27-93)isCollapsed(36-36)isPreviewModernizationEnabled(35-35)
🪛 Biome (2.1.2)
src/components/sidebar-toggle-button/SidebarToggleButton.js
[error] 54-54: Type annotations are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.
TypeScript only syntax
(parse)
⏰ 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). (1)
- GitHub Check: Summary
🔇 Additional comments (3)
src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js (1)
40-58: LGTM! Excellent test for event propagation.The test correctly verifies that mousedown events do not propagate from the sidebar button to parent elements, covering both feature flag states. This directly validates the fix for the video annotations issue described in the PR.
src/components/sidebar-toggle-button/SidebarToggleButton.js (2)
54-56: Remove Flow type annotation from .js file.Flow type annotations are not valid in plain JavaScript files. Either remove the type annotation or convert the file to TypeScript (.ts/.tsx).
Apply this diff to remove the Flow annotation:
- const mouseDownHandler = (event: SyntheticMouseEvent<HTMLButtonElement>) => { + const mouseDownHandler = (event) => {Note: The static analysis tool flagged this as a parse error.
⛔ Skipped due to learnings
Learnt from: rafalmaksymiuk Repo: box/box-ui-elements PR: 4160 File: src/elements/content-sidebar/SidebarToggle.js:21-27 Timestamp: 2025-06-25T13:09:54.538Z Learning: The box-ui-elements project uses Flow for type annotations in JavaScript files, as indicated by flow directives in file headers. Type annotations like `: Props` are valid Flow syntax, not TypeScript syntax.Learnt from: rafalmaksymiuk Repo: box/box-ui-elements PR: 4160 File: src/elements/content-sidebar/SidebarToggle.js:13-19 Timestamp: 2025-06-25T13:09:45.168Z Learning: Files with `flow` or `flow strict` comments at the top use Flow type syntax, not TypeScript. Flow type definitions like `type Props = { ... }` and type imports like `type { RouterHistory }` are valid Flow syntax and should not be flagged as TypeScript-only features.Learnt from: rafalmaksymiuk Repo: box/box-ui-elements PR: 4160 File: src/elements/content-sidebar/SidebarToggle.js:11-11 Timestamp: 2025-06-25T13:10:19.128Z Learning: In the box-ui-elements codebase, Flow files support `import type` syntax for type-only imports. The `import type` statement is valid Flow syntax, not just TypeScript, and should not be flagged as an error when used in Flow files (indicated by flow comments).Learnt from: rafalmaksymiuk Repo: box/box-ui-elements PR: 4144 File: src/elements/content-sidebar/versions/VersionsList.js:24-33 Timestamp: 2025-06-17T13:30:02.172Z Learning: In the box-ui-elements codebase, Flow components use .flow.js type definition files, not TypeScript .ts files. The InternalSidebarNavigation type is a union type where different variants may have different properties like versionId, and proper type safety is ensured through conditional checks in methods like getSelectedVersionId.
62-76: Consider the interaction between onMouseDown and Blueprint's light-dismiss behavior.The mousedown handler is attached to the BPTooltip wrapper, which may interfere with Blueprint's light-dismiss detection that relies on pointer events. Additionally, onMouseDown is redundantly attached to three elements (BPTooltip, span, and PlainButton)—consolidate to only the element that needs to handle the interaction. If the tooltip closes unexpectedly on mousedown, you may need to call
event.stopPropagation()to prevent the event from triggering light-dismiss.
src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js
Outdated
Show resolved
Hide resolved
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…tton.test.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
jfox-box
reviewed
Dec 10, 2025
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
jfox-box
approved these changes
Dec 10, 2025
Contributor
Merge Queue Status✅ The pull request has been merged at cd67036 This pull request spent 6 seconds in the queue, with no time running CI. Required conditions to merge
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 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.
What:
Why:
When the sidebar button is clicked it bubbles up the mousedown event to box-annotations which causes the current annotation to disappear. This PR stops mousedown events from propagating up the dom so that the current annotation remains displayed. Additionally, I converted the SidebarToggleButton tests to use RTL instead of enzyme and removed the snapshot testing as this is the direction that we want to go with our unit tests.
Before:
After:
Mobile Before:
Mobile After:
Summary by CodeRabbit
Bug Fixes
Tests
✏️ Tip: You can customize this high-level summary in your review settings.