feat(activity-feed-v2): add highlight state to comments by kduncanhsu · Pull Request #4672 · box/box-ui-elements

kduncanhsu · 2026-07-01T21:18:40Z

Summary

When a video comment marker is clicked in the preview player, navigate to the comment's deep link instead of directly calling scrollTo (edits to comment_marker_select handler). This leverages the existing activeFeedEntryId mechanism which handles both scrolling and state management.
Annotation markers are already handled upstream by the annotator pipeline (annotations_active_set), so only timestamped comments need routing here.
Pass activeFeedEntryId down to FeedItemRow and set isHighlighted on ThreadedAnnotation for both comments and annotations, giving the active thread a visual highlight when we navigate to its deep link.
Also bumps @box/threaded-annotations to the latest version so that we can use isHighlighted prop/styles

Test plan

Click a timestamped comment marker on the video scrubber — sidebar should scroll to and highlight the comment thread
Click an annotation marker on the video scrubber — annotation should be selected and highlighted via the annotator pipeline
Deep-link to a comment via URL — the corresponding thread should render highlighted
Verify isHighlighted tests pass for both comment and annotation cases in FeedItemRow.test.tsx

Summary by CodeRabbit

New Features
- Comment selection in the activity feed now triggers a dedicated callback and routes to the chosen comment.
- The active activity entry is now visually highlighted in the list.
Bug Fixes
- Selection behavior now matches sidebar navigation state, ensuring comments are handled correctly.
- Annotation items are no longer treated as selectable comments.
Tests
- Added unit tests covering highlight behavior for both comment and annotation rows.
Chores
- Updated development and peer dependency versions.

coderabbitai · 2026-07-01T21:18:49Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e16604b2-ebc0-46bd-98a2-9d83fdc44d1a

📥 Commits

Reviewing files that changed from the base of the PR and between 2dcf7f8 and fdd4b46.

📒 Files selected for processing (1)

src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx

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

src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx

Walkthrough

Adds comment selection from ActivityFeedV2 into ActivitySidebar navigation, highlights the active feed entry in feed rows, and updates the @box/threaded-annotations dependency.

Changes

Comment select and highlight flow

Layer / File(s)	Summary
Comment selection contract `src/elements/content-sidebar/activity-feed-v2/types.ts`, `src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx`	Adds `onCommentSelect` to `ActivityFeedV2Props` and wires it into the component props.
Marker select handling `src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx`	Updates `comment_marker_select` handling to look up the selected item in `filteredItems`, call `onCommentSelect` for comments, remove `scrollHandleRef` setup, and pass `activeFeedEntryId` to `FeedItemRow`.
Sidebar comment navigation `src/elements/content-sidebar/ActivitySidebar.js`	Adds `handleCommentSelect` to route through `internalSidebarNavigationHandler` or `history.push`, and passes it to `ActivityFeedV2`.
Row highlighting and tests `src/elements/content-sidebar/activity-feed-v2/FeedItemRow.tsx`, `src/elements/content-sidebar/activity-feed-v2/__tests__/FeedItemRow.test.tsx`	Adds `activeFeedEntryId`, computes `isHighlighted`, forwards it to `ThreadedAnnotation` for comment and annotation items, and adds highlight assertions in tests.
Threaded annotations version bump `package.json`	Updates `@box/threaded-annotations` in devDependencies and peerDependencies, with adjacent dependency ordering changes.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related PRs

box/box-ui-elements#4651: Both PRs modify ActivityFeedV2 marker-selection behavior around comment_marker_select.
box/box-ui-elements#4643: Both PRs change the same package.json dependency area involving @box/threaded-annotations.
box/box-ui-elements#4597: Both PRs update @box/threaded-annotations dependency entries in package.json.

Suggested reviewers: jmcbgaston, ahorowitz123

Poem

A bunny tapped a comment star,
And hopped to where the feed rows are.
One little select made highlights glow,
Then off it ran, all bright below.
🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title matches the main change: activity-feed-v2 now highlights comment threads, though it omits the deep-link routing detail.
Description check	✅ Passed	The description includes a summary and test plan and is aligned with the template's merge-queue guidance.
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

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

socket-security · 2026-07-02T18:18:12Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/@box/threaded-annotations@2.1.7 ⏵ 3.1.1				⁺¹

View full report

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@package.json`:
- Around line 148-152: The peer dependency for `@box/threaded-annotations` is
still on the old major while the package already uses the newer version in
devDependencies and lockfile. Update the peerDependencies entry in package.json
to match the current supported major version used by the rest of the package,
keeping the change aligned with the existing dependency symbols in package.json
so downstream installs accept the newer release.

🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0e56402f-b43b-40ac-bc4a-b4597d9941d3

📥 Commits

Reviewing files that changed from the base of the PR and between b35c40c and e72f947.

⛔ Files ignored due to path filters (1)

yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (6)

package.json
src/elements/content-sidebar/ActivitySidebar.js
src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx
src/elements/content-sidebar/activity-feed-v2/FeedItemRow.tsx
src/elements/content-sidebar/activity-feed-v2/__tests__/FeedItemRow.test.tsx
src/elements/content-sidebar/activity-feed-v2/types.ts

mergify · 2026-07-03T01:40:09Z

kduncanhsu marked this pull request as ready for review July 2, 2026 18:23

kduncanhsu requested review from a team as code owners July 2, 2026 18:23

kduncanhsu force-pushed the kduncanhsu/add-select-state-to-comments branch from e72f947 to 58aba9c Compare July 2, 2026 18:28

coderabbitai Bot reviewed Jul 2, 2026

View reviewed changes

Comment thread package.json

jackiejou reviewed Jul 2, 2026

View reviewed changes

Comment thread src/elements/content-sidebar/activity-feed-v2/types.ts Outdated

Comment thread src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx Outdated

kduncanhsu added 3 commits July 2, 2026 16:44

feat(activity-feed-v2): add highlight state to comments

16692f7

feat(video): bump threaded-annotations and pass down isHighlighted prop

06dd820

feat(video): address PR comments

2dcf7f8

kduncanhsu force-pushed the kduncanhsu/add-select-state-to-comments branch from 9b8b2fd to 2dcf7f8 Compare July 2, 2026 23:45

refactor(video): alphabetize prop

fdd4b46

jackiejou approved these changes Jul 3, 2026

View reviewed changes

tjuanitas approved these changes Jul 3, 2026

View reviewed changes

kduncanhsu added the ready-to-merge label Jul 3, 2026

mergify Bot added the queued label Jul 3, 2026

mergify Bot merged commit 871b702 into box:master Jul 3, 2026
10 of 11 checks passed

mergify Bot removed the queued label Jul 3, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(activity-feed-v2): add highlight state to comments#4672

feat(activity-feed-v2): add highlight state to comments#4672
mergify[bot] merged 4 commits into
box:masterfrom
kduncanhsu:kduncanhsu/add-select-state-to-comments

kduncanhsu commented Jul 1, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 1, 2026 •

edited

Loading

Reviews paused

Uh oh!

socket-security Bot commented Jul 2, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mergify Bot commented Jul 3, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

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

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Reviews paused

Walkthrough

Changes

Uh oh!

socket-security Bot commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mergify Bot commented Jul 3, 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

kduncanhsu commented Jul 1, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 1, 2026 •

edited

Loading

socket-security Bot commented Jul 2, 2026 •

edited

Loading

mergify Bot commented Jul 3, 2026 •

edited

Loading