box-ui-elements 16.0.0-beta.8 → 16.0.0

package/src/elements/content-sidebar/__tests__/withSidebarAnnotations.test.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import withSidebarAnnotations from '../withSidebarAnnotations';
+import { Action } from '../../common/annotator-context/types';
+import { FEED_ITEM_TYPE_VERSION } from '../../../constants';
 
 describe('elements/content-sidebar/withSidebarAnnotations', () => {
     const TestComponent = props => <div {...props} />;
@@ -24,9 +26,14 @@ describe('elements/content-sidebar/withSidebarAnnotations', () => {
 
     const feedAPI = {
         addAnnotation: jest.fn(),
+        addPendingReply: jest.fn(),
         feedItems: jest.fn(),
         getCachedItems: jest.fn(),
         deleteAnnotation: jest.fn(),
+        deleteFeedItem: jest.fn(),
+        deleteReplyItem: jest.fn(),
+        updateFeedItem: jest.fn(),
+        updateReplyItem: jest.fn(),
     };
 
     const api = {
@@ -84,7 +91,7 @@ describe('elements/content-sidebar/withSidebarAnnotations', () => {
                 instance.updateActiveAnnotation = jest.fn();
                 annotatorContextProps.getAnnotationsMatchPath.mockReturnValue(isAnnotationsPath);
 
-                wrapper.setProps({ annotatorState: { activeAnnotationId } });
+                wrapper.setProps({ annotatorState: { activeAnnotationId, action: Action.SET_ACTIVE } });
 
                 expect(instance.updateActiveAnnotation).toHaveBeenCalledTimes(expectedCount);
             },
@@ -100,12 +107,85 @@ describe('elements/content-sidebar/withSidebarAnnotations', () => {
             ({ annotation, expectedCount }) => {
                 const wrapper = getWrapper();
                 wrapper.instance().addAnnotation = jest.fn();
-                wrapper.setProps({ annotatorState: { annotation } });
+                wrapper.setProps({ annotatorState: { annotation, action: Action.CREATE_END } });
 
                 expect(wrapper.instance().addAnnotation).toHaveBeenCalledTimes(expectedCount);
             },
         );
 
+        test.each`
+            action
+            ${Action.UPDATE_START}
+            ${Action.UPDATE_END}
+        `('should call updateAnnotation if given action = $action', ({ action }) => {
+            const annotation = { id: '123', status: 'resolved' };
+
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+            instance.updateAnnotation = jest.fn();
+            wrapper.setProps({ annotatorState: { annotation, action } });
+            expect(instance.updateAnnotation).toBeCalled();
+        });
+
+        test.each`
+            action
+            ${Action.DELETE_START}
+            ${Action.DELETE_END}
+        `('should call deleteAnnotation if given action = $action', ({ action }) => {
+            const annotation = { id: '123' };
+
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+            instance.deleteAnnotation = jest.fn();
+            wrapper.setProps({ annotatorState: { annotation, action } });
+            expect(instance.deleteAnnotation).toBeCalled();
+        });
+
+        test.each`
+            action
+            ${Action.REPLY_CREATE_START}
+            ${Action.REPLY_CREATE_END}
+        `('should call addAnnotationReply if given action = $action', ({ action }) => {
+            const annotation = { id: '123' };
+            const annotationReply = { id: '456', tagged_message: 'abc' };
+
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+            instance.addAnnotationReply = jest.fn();
+            wrapper.setProps({ annotatorState: { action, annotation, annotationReply } });
+            expect(instance.addAnnotationReply).toBeCalled();
+        });
+
+        test.each`
+            action
+            ${Action.REPLY_DELETE_START}
+            ${Action.REPLY_DELETE_END}
+        `('should call deleteAnnotationReply if given action = $action', ({ action }) => {
+            const annotation = { id: '123' };
+            const annotationReply = { id: '456' };
+
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+            instance.deleteAnnotationReply = jest.fn();
+            wrapper.setProps({ annotatorState: { action, annotation, annotationReply } });
+            expect(instance.deleteAnnotationReply).toBeCalled();
+        });
+
+        test.each`
+            action
+            ${Action.REPLY_UPDATE_START}
+            ${Action.REPLY_UPDATE_END}
+        `('should call updateAnnotationReply if given action = $action', ({ action }) => {
+            const annotation = { id: '123' };
+            const annotationReply = { id: '456', tagged_message: 'abc' };
+
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+            instance.updateAnnotationReply = jest.fn();
+            wrapper.setProps({ annotatorState: { action, annotation, annotationReply } });
+            expect(instance.updateAnnotationReply).toBeCalled();
+        });
+
         test.each`
             fileId   | expectedCount
             ${'123'} | ${0}
@@ -167,8 +247,6 @@ describe('elements/content-sidebar/withSidebarAnnotations', () => {
     });
 
     describe('addAnnotation()', () => {
-        const sidebarPanelsRef = { refresh: jest.fn() };
-
         beforeEach(() => {
             annotatorContextProps.getAnnotationsMatchPath.mockReturnValueOnce({ params: { fileVersionId: '123' } });
         });
@@ -210,45 +288,212 @@ describe('elements/content-sidebar/withSidebarAnnotations', () => {
                 expect(feedAPI.addAnnotation).toHaveBeenCalledTimes(expectedAddCount);
             },
         );
+    });
+
+    describe('addAnnotationReply()', () => {
+        test('should add appropriate reply into the feed given action = reply_create_start', () => {
+            const annotation = { id: '123' };
+            const annotationReply = { tagged_message: 'abc' };
+            const requestId = 'comment_456';
+            const annotatorStateMock = {
+                action: Action.REPLY_CREATE_START,
+                annotation,
+                annotationReply,
+                meta: { requestId },
+            };
+
+            const wrapper = getWrapper({ annotatorState: annotatorStateMock, currentUser });
+            const instance = wrapper.instance();
+
+            instance.addAnnotationReply();
+
+            const expectedReplyData = { ...annotationReply, id: requestId };
+            expect(feedAPI.addPendingReply).toBeCalledWith(annotation.id, currentUser, expectedReplyData);
+        });
+
+        test('should update appropriate annotation and its reply in the feed given action = reply_create_end', () => {
+            feedAPI.getCachedItems.mockReturnValueOnce({
+                items: [
+                    {
+                        id: '123',
+                        replies: [{ id: 'comment_456', tagged_message: 'abc' }],
+                        total_reply_count: 2,
+                    },
+                ],
+            });
+            const annotation = { id: '123' };
+            const annotationReply = { id: '456', tagged_message: 'abc' };
+            const requestId = 'comment_456';
+            const annotatorStateMock = {
+                action: Action.REPLY_CREATE_END,
+                annotation,
+                annotationReply,
+                meta: { requestId },
+            };
+
+            const wrapper = getWrapper({ annotatorState: annotatorStateMock, currentUser });
+            const instance = wrapper.instance();
+
+            instance.addAnnotationReply();
+
+            const expectedReplyData = { ...annotationReply, isPending: false };
+            expect(feedAPI.updateFeedItem).toBeCalledWith({ total_reply_count: 3 }, annotation.id);
+            expect(feedAPI.updateReplyItem).toBeCalledWith(expectedReplyData, annotation.id, requestId);
+        });
+    });
+
+    describe('deleteAnnotation()', () => {
+        test('should change appropriate annotation to pending when action = delete_start', () => {
+            const annotation = { id: '123' };
+            const annotatorStateMock = {
+                annotation,
+                action: Action.DELETE_START,
+            };
+
+            const wrapper = getWrapper({ annotatorState: annotatorStateMock });
+            const instance = wrapper.instance();
+
+            instance.deleteAnnotation();
+
+            expect(feedAPI.updateFeedItem).toBeCalledWith({ isPending: true }, annotation.id);
+        });
+
+        test('should remove appropriate annotation from feed when action = delete_end', () => {
+            const annotation = { id: '123' };
+            const annotatorStateMock = {
+                annotation,
+                action: Action.DELETE_END,
+            };
+
+            const wrapper = getWrapper({ annotatorState: annotatorStateMock });
+            const instance = wrapper.instance();
+
+            instance.deleteAnnotation();
+
+            expect(feedAPI.deleteFeedItem).toBeCalledWith(annotation.id);
+        });
+    });
+
+    describe('deleteAnnotationReply()', () => {
+        test('should update appropriate reply in the feed given action = reply_delete_start', () => {
+            const annotation = { id: '123' };
+            const annotationReply = { id: '456' };
+            const annotatorStateMock = {
+                action: Action.REPLY_DELETE_START,
+                annotation,
+                annotationReply,
+            };
+
+            const wrapper = getWrapper({ annotatorState: annotatorStateMock });
+            const instance = wrapper.instance();
+
+            instance.deleteAnnotationReply();
+
+            expect(feedAPI.updateReplyItem).toBeCalledWith({ isPending: true }, annotation.id, annotationReply.id);
+        });
+
+        test('should update appropriate annotation if reply is currently not in the feed given action = reply_delete_end', () => {
+            feedAPI.getCachedItems.mockReturnValueOnce({
+                items: [
+                    {
+                        id: '123',
+                        replies: [{ id: '999', tagged_message: 'abc' }],
+                        total_reply_count: 2,
+                    },
+                ],
+            });
+            const annotation = { id: '123' };
+            const annotationReply = { id: '456', tagged_message: 'abc' };
+            const annotatorStateMock = {
+                action: Action.REPLY_DELETE_END,
+                annotation,
+                annotationReply,
+            };
+
+            const wrapper = getWrapper({ annotatorState: annotatorStateMock });
+            const instance = wrapper.instance();
+
+            instance.deleteAnnotationReply();
+
+            expect(feedAPI.updateFeedItem).toBeCalledWith({ total_reply_count: 1 }, annotation.id);
+        });
+
+        test('should delete appropriate reply from the feed if it is currently in the feed given action = reply_delete_end', () => {
+            feedAPI.getCachedItems.mockReturnValueOnce({
+                items: [
+                    {
+                        id: '123',
+                        replies: [{ id: '456', tagged_message: 'abc' }],
+                        total_reply_count: 2,
+                    },
+                ],
+            });
+            const annotation = { id: '123' };
+            const annotationReply = { id: '456', tagged_message: 'abc' };
+            const annotatorStateMock = {
+                action: Action.REPLY_DELETE_END,
+                annotation,
+                annotationReply,
+            };
+
+            const wrapper = getWrapper({ annotatorState: annotatorStateMock });
+            const instance = wrapper.instance();
+
+            instance.deleteAnnotationReply();
 
+            expect(feedAPI.deleteReplyItem).toBeCalledWith(annotationReply.id, annotation.id);
+        });
+    });
+
+    describe('updateAnnotation()', () => {
         test.each`
-            pathname                            | isOpen   | current             | expectedCount
-            ${'/'}                              | ${false} | ${null}             | ${0}
-            ${'/details'}                       | ${true}  | ${null}             | ${0}
-            ${'/activity'}                      | ${false} | ${null}             | ${0}
-            ${'/activity'}                      | ${true}  | ${null}             | ${0}
-            ${'/activity'}                      | ${false} | ${sidebarPanelsRef} | ${0}
-            ${'/activity'}                      | ${true}  | ${sidebarPanelsRef} | ${1}
-            ${'/activity/versions/12345'}       | ${true}  | ${sidebarPanelsRef} | ${1}
-            ${'/activity/versions/12345/67890'} | ${true}  | ${sidebarPanelsRef} | ${1}
-            ${'/details'}                       | ${true}  | ${sidebarPanelsRef} | ${0}
-            ${'/'}                              | ${true}  | ${sidebarPanelsRef} | ${0}
+            action                 | expectedIsPending
+            ${Action.UPDATE_START} | ${true}
+            ${Action.UPDATE_END}   | ${false}
         `(
-            'should refresh the sidebarPanels ref accordingly if pathname=$pathname, isOpen=$isOpen, current=$current',
-            ({ current, expectedCount, isOpen, pathname }) => {
+            'should update appropriate annotation in the feed given action = $action',
+            ({ action, expectedIsPending }) => {
+                const annotation = { id: '123', status: 'resolved' };
                 const annotatorStateMock = {
-                    meta: {
-                        requestId: '123',
-                    },
+                    annotation,
+                    action,
                 };
-                const wrapper = getWrapper({
-                    annotatorState: annotatorStateMock,
-                    currentUser,
-                    isOpen,
-                    location: { pathname },
-                });
+
+                const wrapper = getWrapper({ annotatorState: annotatorStateMock });
                 const instance = wrapper.instance();
-                instance.sidebarPanels = {
-                    current,
-                };
 
-                instance.addAnnotation();
+                instance.updateAnnotation();
 
-                expect(sidebarPanelsRef.refresh).toHaveBeenCalledTimes(expectedCount);
+                const expectedAnnotationData = { ...annotation, isPending: expectedIsPending };
+                expect(feedAPI.updateFeedItem).toBeCalledWith(expectedAnnotationData, annotation.id);
             },
         );
     });
 
+    describe('updateAnnotationReply()', () => {
+        test.each`
+            action                       | expectedIsPending
+            ${Action.REPLY_UPDATE_START} | ${true}
+            ${Action.REPLY_UPDATE_END}   | ${false}
+        `('should update appropriate reply in the feed given action = $action', ({ action, expectedIsPending }) => {
+            const annotation = { id: '123', status: 'resolved' };
+            const annotationReply = { id: '456', tagged_message: 'abc' };
+            const annotatorStateMock = {
+                annotation,
+                annotationReply,
+                action,
+            };
+
+            const wrapper = getWrapper({ annotatorState: annotatorStateMock });
+            const instance = wrapper.instance();
+
+            instance.updateAnnotationReply();
+
+            const expectedReplyData = { ...annotationReply, isPending: expectedIsPending };
+            expect(feedAPI.updateReplyItem).toBeCalledWith(expectedReplyData, annotation.id, annotationReply.id);
+        });
+    });
+
     describe('updateActiveAnnotation()', () => {
         test.each`
             activeAnnotationId | fileVersionId | location                                    | expectedPath                       | expectedState
@@ -303,7 +548,7 @@ describe('elements/content-sidebar/withSidebarAnnotations', () => {
 
     describe('updateActiveVersion()', () => {
         const onVersionChange = jest.fn();
-        const version = { type: 'file_version', id: '124' };
+        const version = { type: FEED_ITEM_TYPE_VERSION, id: '124' };
 
         beforeEach(() => {
             annotatorContextProps.getAnnotationsMatchPath.mockReturnValueOnce({ params: { fileVersionId: '123' } });
@@ -328,4 +573,52 @@ describe('elements/content-sidebar/withSidebarAnnotations', () => {
             },
         );
     });
+
+    describe('refreshActivitySidebar()', () => {
+        const history = { replace: jest.fn() };
+        const sidebarPanelsRef = { refresh: jest.fn() };
+
+        test.each`
+            pathname                            | isOpen   | current             | expectedCount
+            ${'/'}                              | ${false} | ${null}             | ${0}
+            ${'/details'}                       | ${true}  | ${null}             | ${0}
+            ${'/activity'}                      | ${false} | ${null}             | ${0}
+            ${'/activity'}                      | ${true}  | ${null}             | ${0}
+            ${'/activity'}                      | ${false} | ${sidebarPanelsRef} | ${0}
+            ${'/activity'}                      | ${true}  | ${sidebarPanelsRef} | ${1}
+            ${'/activity/versions/12345'}       | ${true}  | ${sidebarPanelsRef} | ${1}
+            ${'/activity/versions/12345/67890'} | ${true}  | ${sidebarPanelsRef} | ${1}
+            ${'/details'}                       | ${true}  | ${sidebarPanelsRef} | ${0}
+            ${'/'}                              | ${true}  | ${sidebarPanelsRef} | ${0}
+        `(
+            'should refresh the sidebarPanels ref accordingly if pathname=$pathname, isOpen=$isOpen, current=$current',
+            ({ current, expectedCount, isOpen, pathname }) => {
+                const annotationUpdate = {
+                    id: '123',
+                    description: {
+                        message: 'text',
+                    },
+                };
+                const annotatorStateMock = {
+                    action: Action.UPDATE_END,
+                    annotation: annotationUpdate,
+                };
+                const wrapper = getWrapper({
+                    annotatorState: annotatorStateMock,
+                    currentUser,
+                    history,
+                    isOpen,
+                    location: { pathname },
+                });
+                const instance = wrapper.instance();
+                instance.sidebarPanels = {
+                    current,
+                };
+
+                instance.updateAnnotation();
+
+                expect(sidebarPanelsRef.refresh).toBeCalledTimes(expectedCount);
+            },
+        );
+    });
 });

package/src/elements/content-sidebar/activity-feed/activity-feed/ActiveState.js

@@ -4,6 +4,8 @@
  */
 import * as React from 'react';
 import getProp from 'lodash/get';
+import noop from 'lodash/noop';
+import ActivityThread from './ActivityThread';
 import ActivityItem from './ActivityItem';
 import AppActivity from '../app-activity';
 import AnnotationActivity from '../annotations';
@@ -11,11 +13,21 @@ import Comment from '../comment';
 import TaskNew from '../task-new';
 import Version, { CollapsedVersion } from '../version';
 import withErrorHandling from '../../withErrorHandling';
+import {
+    FEED_ITEM_TYPE_ANNOTATION,
+    FEED_ITEM_TYPE_APP_ACTIVITY,
+    FEED_ITEM_TYPE_COMMENT,
+    FEED_ITEM_TYPE_TASK,
+    FEED_ITEM_TYPE_VERSION,
+} from '../../../../constants';
 import type {
     Annotation,
     AnnotationPermission,
+    BoxCommentPermission,
+    CommentFeedItemType,
     FeedItem,
     FeedItems,
+    FeedItemStatus,
     FocusableFeedItemType,
 } from '../../../../common/types/feed';
 import type { SelectorItems, User } from '../../../../common/types/core';
@@ -33,14 +45,35 @@ type Props = {
     getAvatarUrl: GetAvatarUrlCallback,
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
+    hasReplies?: boolean,
     items: FeedItems,
     mentionSelectorContacts?: SelectorItems<>,
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
     onAnnotationEdit?: (id: string, text: string, permissions: AnnotationPermission) => void,
     onAnnotationSelect?: (annotation: Annotation) => void,
+    onAnnotationStatusChange?: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
     onAppActivityDelete?: Function,
     onCommentDelete?: Function,
-    onCommentEdit?: Function,
+    onCommentEdit?: (
+        id: string,
+        text?: string,
+        status?: FeedItemStatus,
+        hasMention: boolean,
+        permissions: BoxCommentPermission,
+        onSuccess: ?Function,
+        onError: ?Function,
+    ) => void,
+    onReplyCreate?: (parentId: string, parentType: CommentFeedItemType, text: string) => void,
+    onReplyDelete?: ({ id: string, parentId: string, permissions: BoxCommentPermission }) => void,
+    onReplyUpdate?: (
+        id: string,
+        parentId: string,
+        text: string,
+        permissions: BoxCommentPermission,
+        onSuccess: ?Function,
+        onError: ?Function,
+    ) => void,
+    onShowReplies?: (id: string, type: CommentFeedItemType) => void,
     onTaskAssignmentUpdate?: Function,
     onTaskDelete?: Function,
     onTaskEdit?: Function,
@@ -57,15 +90,21 @@ const ActiveState = ({
     approverSelectorContacts,
     currentFileVersionId,
     currentUser,
+    hasReplies = false,
     items,
     mentionSelectorContacts,
     getMentionWithQuery,
     onAnnotationDelete,
     onAnnotationEdit,
     onAnnotationSelect,
+    onAnnotationStatusChange,
     onAppActivityDelete,
     onCommentDelete,
     onCommentEdit,
+    onReplyCreate = noop,
+    onReplyDelete = noop,
+    onReplyUpdate = noop,
+    onShowReplies = noop,
     onTaskDelete,
     onTaskEdit,
     onTaskView,
@@ -79,6 +118,27 @@ const ActiveState = ({
 }: Props): React.Node => {
     const activeEntry = items.find(({ id, type }) => id === activeFeedEntryId && type === activeFeedEntryType);
 
+    const onReplyCreateHandler = (parentId: string, parentType: CommentFeedItemType) => (text: string) => {
+        onReplyCreate(parentId, parentType, text);
+    };
+    const onReplyDeleteHandler = (parentId: string) => (options: { id: string, permissions: BoxCommentPermission }) => {
+        onReplyDelete({ ...options, parentId });
+    };
+    const onReplyUpdateHandler = (parentId: string) => (
+        id: string,
+        text: string,
+        status?: FeedItemStatus,
+        hasMention?: boolean,
+        permissions: BoxCommentPermission,
+        onSuccess: ?Function,
+        onError: ?Function,
+    ) => {
+        onReplyUpdate(id, parentId, text, permissions, onSuccess, onError);
+    };
+    const onShowRepliesHandler = (id: string, type: CommentFeedItemType) => () => {
+        onShowReplies(id, type);
+    };
+
     return (
         <ul className="bcs-activity-feed-active-state">
             {items.map((item: FeedItem) => {
@@ -87,33 +147,52 @@ const ActiveState = ({
                 const itemFileVersionId = getProp(item, 'file_version.id');
 
                 switch (item.type) {
-                    case 'comment':
+                    case FEED_ITEM_TYPE_COMMENT:
                         return (
                             <ActivityItem
                                 key={item.type + item.id}
-                                className="bcs-activity-feed-comment"
                                 data-testid="comment"
                                 isFocused={isFocused}
                                 ref={refValue}
                             >
-                                <Comment
-                                    {...item}
+                                <ActivityThread
+                                    data-testid="activity-thread"
                                     currentUser={currentUser}
                                     getAvatarUrl={getAvatarUrl}
                                     getMentionWithQuery={getMentionWithQuery}
                                     getUserProfileUrl={getUserProfileUrl}
+                                    hasReplies={hasReplies}
+                                    isRepliesLoading={item.isRepliesLoading}
                                     mentionSelectorContacts={mentionSelectorContacts}
-                                    onDelete={onCommentDelete}
-                                    onEdit={onCommentEdit}
-                                    permissions={{
-                                        can_delete: getProp(item.permissions, 'can_delete', false),
-                                        can_edit: getProp(item.permissions, 'can_edit', false),
-                                    }}
+                                    onReplyCreate={onReplyCreateHandler(item.id, item.type)}
+                                    onReplyDelete={onReplyDeleteHandler(item.id)}
+                                    onReplyEdit={onReplyUpdateHandler(item.id)}
+                                    onShowReplies={onShowRepliesHandler(item.id, item.type)}
+                                    repliesTotalCount={item.total_reply_count}
+                                    replies={item.replies}
                                     translations={translations}
-                                />
+                                >
+                                    <Comment
+                                        {...item}
+                                        currentUser={currentUser}
+                                        getAvatarUrl={getAvatarUrl}
+                                        getMentionWithQuery={getMentionWithQuery}
+                                        getUserProfileUrl={getUserProfileUrl}
+                                        mentionSelectorContacts={mentionSelectorContacts}
+                                        onDelete={onCommentDelete}
+                                        onEdit={onCommentEdit}
+                                        permissions={{
+                                            can_delete: getProp(item.permissions, 'can_delete', false),
+                                            can_edit: getProp(item.permissions, 'can_edit', false),
+                                            can_reply: getProp(item.permissions, 'can_reply', false),
+                                            can_resolve: getProp(item.permissions, 'can_resolve', false),
+                                        }}
+                                        translations={translations}
+                                    />
+                                </ActivityThread>
                             </ActivityItem>
                         );
-                    case 'task':
+                    case FEED_ITEM_TYPE_TASK:
                         return (
                             <ActivityItem
                                 key={item.type + item.id}
@@ -138,7 +217,7 @@ const ActiveState = ({
                                 />
                             </ActivityItem>
                         );
-                    case 'file_version':
+                    case FEED_ITEM_TYPE_VERSION:
                         return (
                             <ActivityItem key={item.type + item.id} className="bcs-version-item" data-testid="version">
                                 {item.versions ? (
@@ -150,7 +229,7 @@ const ActiveState = ({
                                 )}
                             </ActivityItem>
                         );
-                    case 'app_activity':
+                    case FEED_ITEM_TYPE_APP_ACTIVITY:
                         return (
                             <ActivityItem
                                 key={item.type + item.id}
@@ -160,7 +239,7 @@ const ActiveState = ({
                                 <AppActivity currentUser={currentUser} onDelete={onAppActivityDelete} {...item} />
                             </ActivityItem>
                         );
-                    case 'annotation':
+                    case FEED_ITEM_TYPE_ANNOTATION:
                         return (
                             <ActivityItem
                                 key={item.type + item.id}
@@ -169,18 +248,37 @@ const ActiveState = ({
                                 isFocused={isFocused}
                                 ref={refValue}
                             >
-                                <AnnotationActivity
+                                <ActivityThread
+                                    data-testid="activity-thread"
                                     currentUser={currentUser}
                                     getAvatarUrl={getAvatarUrl}
-                                    getUserProfileUrl={getUserProfileUrl}
                                     getMentionWithQuery={getMentionWithQuery}
-                                    isCurrentVersion={currentFileVersionId === itemFileVersionId}
-                                    item={item}
+                                    getUserProfileUrl={getUserProfileUrl}
+                                    hasReplies={hasReplies}
+                                    isRepliesLoading={item.isRepliesLoading}
                                     mentionSelectorContacts={mentionSelectorContacts}
-                                    onEdit={onAnnotationEdit}
-                                    onDelete={onAnnotationDelete}
-                                    onSelect={onAnnotationSelect}
-                                />
+                                    onReplyCreate={onReplyCreateHandler(item.id, item.type)}
+                                    onReplyDelete={onReplyDeleteHandler(item.id)}
+                                    onReplyEdit={onReplyUpdateHandler(item.id)}
+                                    onShowReplies={onShowRepliesHandler(item.id, item.type)}
+                                    repliesTotalCount={item.total_reply_count}
+                                    replies={item.replies}
+                                    translations={translations}
+                                >
+                                    <AnnotationActivity
+                                        currentUser={currentUser}
+                                        getAvatarUrl={getAvatarUrl}
+                                        getUserProfileUrl={getUserProfileUrl}
+                                        getMentionWithQuery={getMentionWithQuery}
+                                        isCurrentVersion={currentFileVersionId === itemFileVersionId}
+                                        item={item}
+                                        mentionSelectorContacts={mentionSelectorContacts}
+                                        onEdit={onAnnotationEdit}
+                                        onDelete={onAnnotationDelete}
+                                        onSelect={onAnnotationSelect}
+                                        onStatusChange={onAnnotationStatusChange}
+                                    />
+                                </ActivityThread>
                             </ActivityItem>
                         );
                     default: