feat(popup): Add threaded annotations v2 popup and thread view#743
Merged
jackiejou merged 4 commits intobox:masterfrom Apr 30, 2026
Merged
Conversation
Add @box/threaded-annotations and peer dependencies (blueprint-web, blueprint-web-assets, collaboration-popover, readable-time, user-selector) to box-annotations. (WEBAPP-49217) Replace PopupReplyV2 stub with real ThreadedAnnotationsV2 component that renders threaded reply UI with mention support, TipTap editor, and annotation data adapters. (WEBAPP-49218) Add webpack externals for @box/* packages as a temporary workaround for webpack 4 ESM exports incompatibility (WEBAPP-57855 tracks the webpack 5 upgrade to remove this).
Add @box/threaded-annotations integration with MessageEditorV2 for creating annotations and ThreadedAnnotationsV2 for viewing existing threads. Gated behind the isThreadedAnnotation feature flag. - Add PopupReplyV2 with MessageEditorV2 for annotation creation - Add PopupThreadV2 with ThreadedAnnotationsV2 for thread viewing - Add data adapters for annotation-to-message conversion - Add store actions for reply, delete, and resolve/unresolve - Add webpack externals for shared runtime dependencies - Add data-ba-annotation-id to annotation targets for DOM lookup - Upgrade autoprefixer for modern CSS compatibility - Add CSS isolation to prevent BUE style leakage into Blueprint - Add BlueprintModernizationProvider for modern button styling
Move the isThreadedAnnotation branching from PopupReply to PopupLayer so PopupReply is a clean v1-only component. PopupLayer now renders PopupReplyV2 or PopupReply directly based on the feature flag.
jmcbgaston
reviewed
Apr 29, 2026
Combine the create and thread view popups into a single PopupV2 component that routes based on the presence of annotationId. Rename PopupReplyV2.scss to PopupV2.scss. Add CSS.escape for annotation ID DOM queries.
jackiejou
commented
Apr 30, 2026
| // TODO: PopupReplyV2 is a placeholder stub. Props (isPending, onCancel, etc.) | ||
| // are not yet forwarded and will need to be wired up when V2 is implemented. | ||
| if (props.isThreadedAnnotation) { | ||
| return <PopupReplyV2 />; |
Collaborator
Author
There was a problem hiding this comment.
moved to Popupv2 and out of popupreply
| () => ({ | ||
| allowEmptyQuery: true, | ||
| ariaRoleDescription: intl.formatMessage(messages.ariaLabelMentionSelector), | ||
| fetchAvatarUrls: async () => ({}), |
Contributor
There was a problem hiding this comment.
do we not need avatars?
Collaborator
Author
There was a problem hiding this comment.
we do, but the backend api endpoint does not support it atm
ahorowitz123
approved these changes
Apr 30, 2026
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
3 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.
Summary
PopupReplyV2withMessageEditorV2from@box/threaded-annotationsfor creating new annotations with the v2 editor (TipTap-based, with @mention support)PopupThreadV2withThreadedAnnotationsV2for viewing existing annotation threads with reply, resolve/unresolve, and delete supportthreadedAnnotationsAdapters.ts) for converting between box-annotations and threaded-annotations data formats, including @mention markup serialization/deserializationcreateReplyAction,deleteAnnotationAction,updateAnnotationAction) and reducer handling for thread operationsAnnotationsAPIinterface withcreateAnnotationReply,deleteAnnotation, andupdateAnnotationmethodsreact,react-dom,react-intl,react-redux,@box/threaded-annotationsand transitive dependencies to avoid bundling duplicatesautoprefixerfrom 9.x to 10.x for modern CSS compatibilityexternalsType: 'commonjs'to fix webpack 5 module concatenation with@-scoped packagesPopupReplyV2.scssto prevent box-ui-elements global styles from leaking into Blueprint componentsBlueprintModernizationProviderfor modern button styling (round radius)data-ba-annotation-idattribute to annotation targets for reliable DOM lookupisThreadedAnnotationfeature flag is enabledAll changes are gated behind the
isThreadedAnnotationfeature flag. V1 behavior is unchanged when the flag is off. Full test suite (940 tests) passes.Screenshot
V1
PopUpReplyV2
PopupThreadV2
Test plan