Skip to content

feat(activity-feed-v2): Wire edit, copy link, scroll to end #4557

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jackiejou wants to merge 7 commits into
base: master
Choose a base branch
from
+1,050 −138
Open

feat(activity-feed-v2): Wire edit, copy link, scroll to end #4557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
de3d60f
feat(activity-feed-v2): Wire edit, copy link, scroll to end
jackiejou May 14, 2026
536f8a1
refactor(activity-feed-v2): Convert onReplyUpdate to object params
jackiejou May 14, 2026
5ae7b51
fix(activity-feed-v2): Block whitespace-only edits before dispatch
jackiejou May 14, 2026
d8ac042
refactor(activity-feed-v2): Rename copy-link id to annotationId
jackiejou May 14, 2026
dee6bdc
refactor(activity-feed-v2): Extract row helpers into helpers.ts
jackiejou May 15, 2026
9ac2af9
feat(activity-feed-v2): Allow consumers to control filter state
jackiejou May 15, 2026
e2103c5
feat(activity-feed-v2): Send shouldShowReplies when threaded V2 is on
jackiejou May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,14 +124,14 @@
"@babel/preset-typescript": "^7.24.7",
"@babel/template": "^7.24.7",
"@babel/types": "^7.24.7",
"@box/activity-feed": "^1.18.3",
"@box/activity-feed": "^1.19.4",
"@box/blueprint-web": "^14.30.1",
"@box/blueprint-web-assets": "^4.117.3",
"@box/box-ai-agent-selector": "^1.39.21",
"@box/box-ai-content-answers": "^1.43.22",
"@box/box-item-type-selector": "^1.39.21",
"@box/cldr-data": "^34.2.0",
"@box/collaboration-popover": "^1.61.30",
"@box/collaboration-popover": "^1.62.3",
"@box/combobox-with-api": "^1.42.22",
"@box/copy-input": "^1.42.5",
"@box/content-field": "^1.40.23",
Expand All @@ -142,8 +142,8 @@
"@box/metadata-filter": "^1.80.23",
"@box/metadata-view": "^1.53.26",
"@box/react-virtualized": "^9.22.3-rc-box.10",
"@box/readable-time": "^1.40.30",
"@box/threaded-annotations": "^1.86.0",
"@box/readable-time": "^1.41.3",
"@box/threaded-annotations": "^1.89.1",
"@box/types": "^2.1.8",
"@box/unified-share-modal": "^2.15.5",
"@box/user-selector": "^1.76.5",
Expand Down Expand Up @@ -292,14 +292,14 @@
"webpack-dev-server": "^5.2.3"
},
"peerDependencies": {
"@box/activity-feed": "^1.18.3",
"@box/activity-feed": "^1.19.4",
"@box/blueprint-web": "^14.30.1",
"@box/blueprint-web-assets": "^4.117.3",
"@box/box-ai-agent-selector": "^1.39.21",
"@box/box-ai-content-answers": "^1.43.22",
"@box/box-item-type-selector": "^1.39.21",
"@box/cldr-data": ">=34.2.0",
"@box/collaboration-popover": "^1.61.30",
"@box/collaboration-popover": "^1.62.3",
"@box/combobox-with-api": "^1.42.22",
"@box/copy-input": "^1.42.5",
"@box/content-field": "^1.40.23",
Expand All @@ -308,8 +308,8 @@
"@box/metadata-filter": "^1.80.23",
"@box/metadata-view": "^1.53.26",
"@box/react-virtualized": "^9.22.3-rc-box.10",
"@box/readable-time": "^1.40.30",
"@box/threaded-annotations": "^1.86.0",
"@box/readable-time": "^1.41.3",
"@box/threaded-annotations": "^1.89.1",
"@box/types": "^2.1.8",
"@box/unified-share-modal": "^2.15.5",
"@box/user-selector": "^1.76.5",
Expand Down
13 changes: 12 additions & 1 deletion src/common/types/annotations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,17 @@ export type Rect = {
y: number,
};

export type TargetDrawing = {
location: Page,
type: 'drawing',
};

export type TargetHighlight = {
location: Page,
text?: string,
type: 'highlight',
};

export type TargetRegion = {
location: Page,
shape?: Rect,
Expand All @@ -36,7 +47,7 @@ export type TargetPoint = {
y: number,
};

export type Target = TargetRegion | TargetPoint;
export type Target = TargetDrawing | TargetHighlight | TargetPoint | TargetRegion;

export type AnnotationPermission = {
can_delete?: boolean,
Expand Down
31 changes: 26 additions & 5 deletions src/elements/content-sidebar/ActivitySidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,9 +92,13 @@ type ExternalProps = {
hasVersions?: boolean,
internalSidebarNavigation?: InternalSidebarNavigation,
internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
onAnnotationCopyLink?: (params: { annotationId: string, fileVersionId: string }) => void,
onCommentCopyLink?: (params: { id: string }) => void,
onCommentCreate: Function,
onCommentDelete: (comment: Comment) => any,
onCommentUpdate: () => any,
onShowOnlyMentionsMeChange?: (checked: boolean) => void,
onShowResolvedChange?: (checked: boolean) => void,
onTaskAssignmentUpdate: Function,
onTaskCreate: Function,
onTaskDelete: (id: string) => any,
Expand All @@ -103,6 +107,8 @@ type ExternalProps = {
routerDisabled?: boolean,
/** When true, enables data fetching. When false, defers data fetching. Used to prioritize preview loading. */
shouldFetchSidebarData?: boolean,
showOnlyMentionsMe?: boolean,
showResolved?: boolean,
} & ErrorContextProps &
WithAnnotatorContextProps;

Expand Down Expand Up @@ -759,15 +765,14 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
api,
file,
features,
hasReplies: shouldShowReplies,
hasReplies,
hasTasks: shouldShowTasks,
hasVersions: shouldShowVersions,
} = this.props;
const isThreadedRepliesV2Enabled = isFeatureEnabled(features, 'activityFeed.threadedRepliesV2.enabled');
const shouldShowReplies = hasReplies || isThreadedRepliesV2Enabled;
const shouldFetchReplies =
shouldRefreshCache &&
shouldShowReplies &&
activeFeedEntryId &&
activeFeedEntryType === FEED_ITEM_TYPE_COMMENT;
shouldRefreshCache && hasReplies && activeFeedEntryId && activeFeedEntryType === FEED_ITEM_TYPE_COMMENT;
const shouldShowAppActivity = isFeatureEnabled(features, 'activityFeed.appActivity.enabled');
const shouldShowAnnotations = isFeatureEnabled(features, 'activityFeed.annotations.enabled');
const shouldUseUAA = isFeatureEnabled(features, 'activityFeed.uaaIntegration.enabled');
Expand Down Expand Up @@ -1371,9 +1376,15 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
hasReplies,
hasVersions,
isDisabled = false,
onAnnotationCopyLink,
onCommentCopyLink,
onShowOnlyMentionsMeChange,
onShowResolvedChange,
onVersionHistoryClick,
getUserProfileUrl,
onTaskView,
showOnlyMentionsMe,
showResolved,
} = this.props;
const { activityFeedError, approverSelectorContacts, contactsLoaded, mentionSelectorContacts } = this.state;
const isNewThreadedRepliesEnabled = isFeatureEnabled(features, 'activityFeed.newThreadedReplies.enabled');
Expand Down Expand Up @@ -1401,16 +1412,26 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
getMentionAsync={this.getMentionAsync}
hasTasks={this.props.hasTasks}
isDisabled={isDisabled}
onAnnotationCopyLink={onAnnotationCopyLink}
onAnnotationDelete={this.handleAnnotationDelete}
onAnnotationEdit={this.handleAnnotationEdit}
onAnnotationSelect={this.handleAnnotationSelect}
onAnnotationStatusChange={this.handleAnnotationStatusChange}
onCommentCopyLink={onCommentCopyLink}
onCommentCreate={this.createComment}
onCommentDelete={this.deleteComment}
onCommentUpdate={this.updateComment}
onReplyCreate={this.createReply}
onReplyUpdate={({ id, onError, onSuccess, parentId, permissions, text }) =>
this.updateReply(id, parentId, text, permissions, onSuccess, onError)
}
onShowOnlyMentionsMeChange={onShowOnlyMentionsMeChange}
onShowResolvedChange={onShowResolvedChange}
onTaskDelete={this.deleteTask}
onTaskView={onTaskView}
onVersionHistoryClick={onVersionHistoryClick}
showOnlyMentionsMe={showOnlyMentionsMe}
showResolved={showResolved}
/>
</div>
);
Expand Down
84 changes: 84 additions & 0 deletions src/elements/content-sidebar/__tests__/ActivitySidebar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -796,6 +796,90 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
undefined,
);
});

test('should set shouldShowReplies to true when threadedRepliesV2 is enabled even if hasReplies is false', () => {
wrapper = getWrapper({
features: {
activityFeed: {
threadedRepliesV2: { enabled: true },
},
},
hasReplies: false,
});
instance = wrapper.instance();
instance.errorCallback = jest.fn();
instance.fetchFeedItemsErrorCallback = jest.fn();
instance.fetchFeedItemsSuccessCallback = jest.fn();

instance.fetchFeedItems();

expect(feedAPI.feedItems).toHaveBeenCalledWith(
file,
false,
instance.fetchFeedItemsSuccessCallback,
instance.fetchFeedItemsErrorCallback,
instance.errorCallback,
expect.objectContaining({ shouldShowReplies: true }),
undefined,
);
});

test('should set shouldShowReplies to true when both hasReplies and threadedRepliesV2 are enabled', () => {
wrapper = getWrapper({
features: {
activityFeed: {
threadedRepliesV2: { enabled: true },
},
},
hasReplies: true,
});
instance = wrapper.instance();
instance.errorCallback = jest.fn();
instance.fetchFeedItemsErrorCallback = jest.fn();
instance.fetchFeedItemsSuccessCallback = jest.fn();

instance.fetchFeedItems();

expect(feedAPI.feedItems).toHaveBeenCalledWith(
file,
false,
instance.fetchFeedItemsSuccessCallback,
instance.fetchFeedItemsErrorCallback,
instance.errorCallback,
expect.objectContaining({ shouldShowReplies: true }),
undefined,
);
});

test('should not use fetchRepliesForFeedItems for the active comment when only threadedRepliesV2 is enabled', () => {
wrapper = getWrapper({
activeFeedEntryId: '123',
activeFeedEntryType: 'comment',
features: {
activityFeed: {
threadedRepliesV2: { enabled: true },
},
},
hasReplies: false,
});
instance = wrapper.instance();
instance.errorCallback = jest.fn();
instance.fetchFeedItemsErrorCallback = jest.fn();
instance.fetchFeedItemsSuccessCallback = jest.fn();
instance.fetchRepliesForFeedItems = jest.fn();

instance.fetchFeedItems(true);

expect(feedAPI.feedItems).toHaveBeenCalledWith(
file,
true,
instance.fetchFeedItemsSuccessCallback,
instance.fetchFeedItemsErrorCallback,
instance.errorCallback,
expect.objectContaining({ shouldShowReplies: true }),
undefined,
);
});
});

describe('fetchFeedItemsSuccessCallback()', () => {
Expand Down
68 changes: 56 additions & 12 deletions src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,27 +38,32 @@ const ActivityFeedV2 = ({
getMentionAsync,
hasTasks = true,
isDisabled = false,
onAnnotationCopyLink,
onAnnotationDelete,
onAnnotationEdit,
onAnnotationSelect,
onAnnotationStatusChange,
onCommentCopyLink,
onCommentCreate,
onCommentDelete,
onCommentUpdate,
onReplyCreate,
onReplyUpdate,
onShowOnlyMentionsMeChange,
onShowResolvedChange,
onTaskDelete,
onTaskView,
onVersionHistoryClick,
showOnlyMentionsMe: showOnlyMentionsMeProp,
showResolved: showResolvedProp,
}: ActivityFeedV2Props) => {
const intl = useIntl();
const scrollHandle = useActivityFeedScroll();
const currentUserId = currentUser?.id;
const headerTitle = intl.formatMessage(commonMessages.sidebarActivityTitle);

React.useEffect(() => {
if (activeFeedEntryId && scrollHandle) {
scrollHandle.scrollTo(activeFeedEntryId);
}
}, [activeFeedEntryId, scrollHandle]);
const scrolledEntryIdRef = React.useRef<string | null>(null);
Copy link
Copy Markdown
Contributor

@ahorowitz123 ahorowitz123 May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can we make this an empty string by default so we don't have mixed types?

const hasScrolledToEndRef = React.useRef(false);

const fetchUsers = React.useCallback(
async (inputValue: string): Promise<UserContact[]> => {
Expand Down Expand Up @@ -129,8 +134,20 @@ const ActivityFeedV2 = ({
[],
);

const [mentionMe, setMentionMe] = React.useState(false);
const [showResolved, setShowResolved] = React.useState(false);
const [localShowOnlyMentionsMe, setLocalShowOnlyMentionsMe] = React.useState(false);
const [localShowResolved, setLocalShowResolved] = React.useState(false);
const showOnlyMentionsMe = showOnlyMentionsMeProp ?? localShowOnlyMentionsMe;
const showResolved = showResolvedProp ?? localShowResolved;

const handleShowOnlyMentionsMeChange = (checked: boolean) => {
if (showOnlyMentionsMeProp === undefined) setLocalShowOnlyMentionsMe(checked);
onShowOnlyMentionsMeChange?.(checked);
};
const handleShowResolvedChange = (checked: boolean) => {
if (showResolvedProp === undefined) setLocalShowResolved(checked);
onShowResolvedChange?.(checked);
};

const [isTaskFormOpen, setIsTaskFormOpen] = React.useState(false);
const [taskType, setTaskType] = React.useState<string>(TASK_TYPE_APPROVAL);
const [taskError, setTaskError] = React.useState<Error | null>(null);
Expand All @@ -156,7 +173,7 @@ const ActivityFeedV2 = ({
if ((item.type === 'comment' || item.type === 'annotation') && item.isResolved && !showResolved) {
return false;
}
if (mentionMe && currentUserId) {
if (showOnlyMentionsMe && currentUserId) {
if (item.type === 'comment' || item.type === 'annotation') {
const hasMention = item.messages.some(msg =>
msg.message?.content?.some(
Expand All @@ -178,7 +195,30 @@ const ActivityFeedV2 = ({
}
return true;
});
}, [currentUserId, mentionMe, showResolved, transformedItems]);
}, [currentUserId, showOnlyMentionsMe, showResolved, transformedItems]);

React.useEffect(() => {
const alreadyScrolledToThisEntry = scrolledEntryIdRef.current === activeFeedEntryId;
if (!activeFeedEntryId || !scrollHandle || alreadyScrolledToThisEntry) {
return;
}
const didScroll = scrollHandle.scrollTo(activeFeedEntryId);
if (didScroll) {
scrolledEntryIdRef.current = activeFeedEntryId;
}
}, [activeFeedEntryId, filteredItems, scrollHandle]);

React.useEffect(() => {
const hasDeepLink = Boolean(activeFeedEntryId);
if (hasScrolledToEndRef.current || hasDeepLink || !scrollHandle || filteredItems.length === 0) {
return;
}
const lastItemId = filteredItems[filteredItems.length - 1].id;
const didScroll = scrollHandle.scrollTo(lastItemId);
if (didScroll) {
hasScrolledToEndRef.current = true;
}
}, [activeFeedEntryId, filteredItems, scrollHandle]);

const handleCommentPost = React.useCallback(
async (content: unknown) => {
Expand All @@ -203,12 +243,12 @@ const ActivityFeedV2 = ({
<ActivityFeed.Header.FilterMenu>
<ActivityFeed.Header.ShowResolvedOption
checked={showResolved}
onCheckedChange={setShowResolved}
onCheckedChange={handleShowResolvedChange}
/>
<ActivityFeed.Header.MentionMeOption
checked={mentionMe}
checked={showOnlyMentionsMe}
hasTasks={hasTasks}
onCheckedChange={setMentionMe}
onCheckedChange={handleShowOnlyMentionsMeChange}
/>
</ActivityFeed.Header.FilterMenu>
{hasTasks && (
Expand All @@ -231,12 +271,16 @@ const ActivityFeedV2 = ({
currentUserId={currentUserId}
isDisabled={isDisabled}
item={item}
onAnnotationCopyLink={onAnnotationCopyLink}
onAnnotationDelete={onAnnotationDelete}
onAnnotationEdit={onAnnotationEdit}
onAnnotationSelect={onAnnotationSelect}
onAnnotationStatusChange={onAnnotationStatusChange}
onCommentCopyLink={onCommentCopyLink}
onCommentDelete={onCommentDelete}
onCommentUpdate={onCommentUpdate}
onReplyCreate={onReplyCreate}
onReplyUpdate={onReplyUpdate}
onTaskDelete={onTaskDelete}
onTaskView={onTaskView}
onVersionHistoryClick={onVersionHistoryClick}
Expand Down
Loading
Loading