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

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

@@ -1,23 +1,34 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import messages from '../../common/messages';
+import { shallow, mount } from 'enzyme';
+import cloneDeep from 'lodash/cloneDeep';
 import { ActivitySidebarComponent, activityFeedInlineError } from '../ActivitySidebar';
-
-const { defaultErrorMaskSubHeaderMessage, currentUserErrorHeaderMessage } = messages;
+import { filterableActivityFeedItems } from '../fixtures';
+import { FEED_ITEM_TYPE_COMMENT } from '../../../constants';
 
 jest.mock('lodash/debounce', () => jest.fn(i => i));
+jest.mock('lodash/uniqueId', () => () => 'uniqueId');
+
+const userError = 'Bad box user!';
 
 describe('elements/content-sidebar/ActivitySidebar', () => {
     const feedAPI = {
         createComment: jest.fn(),
+        createReply: jest.fn(),
         createTaskNew: jest.fn(),
+        createThreadedComment: jest.fn(),
         deleteAnnotation: jest.fn(),
         deleteComment: jest.fn(),
+        deleteReply: jest.fn(),
         deleteTaskNew: jest.fn(),
+        deleteThreadedComment: jest.fn(),
         feedItems: jest.fn(),
+        fetchReplies: jest.fn(),
         updateAnnotation: jest.fn(),
+        updateComment: jest.fn(),
+        updateReply: jest.fn(),
         updateTaskCollaborator: jest.fn(),
         updateTaskNew: jest.fn(),
+        updateThreadedComment: jest.fn(),
     };
     const usersAPI = {
         get: jest.fn(),
@@ -25,7 +36,7 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
         getUser: jest.fn(),
     };
     const fileCollaboratorsAPI = {
-        getFileCollaborators: jest.fn(),
+        getCollaboratorsWithQuery: jest.fn(),
     };
     const api = {
         getUsersAPI: () => usersAPI,
@@ -38,8 +49,9 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
             id: '123',
         },
     };
-    let currentUser = {
-        id: 'foo',
+    const currentUser = {
+        id: '123',
+        name: 'foo bar',
     };
     const collaborators = {
         entries: [
@@ -55,6 +67,7 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
         shallow(
             <ActivitySidebarComponent
                 api={api}
+                currentUser={currentUser}
                 file={file}
                 logger={{ onReadyMetric: jest.fn() }}
                 onError={onError}
@@ -79,15 +92,11 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
     describe('componentDidMount()', () => {
         let wrapper;
         let instance;
-        currentUser = {
-            id: '123',
-        };
+
         beforeEach(() => {
             jest.spyOn(ActivitySidebarComponent.prototype, 'fetchFeedItems');
-            jest.spyOn(ActivitySidebarComponent.prototype, 'fetchCurrentUser');
-            wrapper = getWrapper({
-                currentUser,
-            });
+
+            wrapper = getWrapper();
             instance = wrapper.instance();
         });
 
@@ -97,7 +106,6 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
 
         test('should fetch the file and refresh the cache and fetch the current user', () => {
             expect(instance.fetchFeedItems).toHaveBeenCalledWith(true);
-            expect(instance.fetchCurrentUser).toHaveBeenCalledWith(currentUser);
         });
     });
 
@@ -109,22 +117,15 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
     });
 
     describe('createTask()', () => {
-        let instance;
-        let wrapper;
-
-        beforeEach(() => {
-            wrapper = getWrapper();
-            instance = wrapper.instance();
-        });
-
         test('should throw an error if there is not the current user in the state', () => {
+            const wrapper = getWrapper({ currentUser: undefined });
+            const instance = wrapper.instance();
             expect(() => instance.createTask()).toThrow('Bad box user!');
         });
 
         test('should create the task and fetch the feed items', () => {
-            wrapper.setState({
-                currentUser,
-            });
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
             const message = 'message';
             const assignees = ['1', '2'];
             const dueAt = 'test';
@@ -162,69 +163,96 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
     });
 
     describe('deleteComment()', () => {
-        let wrapper;
-        let instance;
-        beforeEach(() => {
-            const onCommentDelete = jest.fn();
-            wrapper = getWrapper({ onCommentDelete });
-            instance = wrapper.instance();
+        test.each`
+            hasReplies
+            ${undefined}
+            ${false}
+        `(
+            'should call the deleteComment API if it exists when hasReplies prop equals to $hasReplies',
+            ({ hasReplies }) => {
+                const wrapper = getWrapper({ hasReplies });
+                const instance = wrapper.instance();
+                instance.fetchFeedItems = jest.fn();
+
+                const id = '1';
+                const permissions = {
+                    can_edit: false,
+                    can_delete: true,
+                };
+                instance.deleteComment({ id, permissions });
+                expect(feedAPI.deleteComment).toBeCalledWith(
+                    file,
+                    id,
+                    permissions,
+                    expect.any(Function),
+                    expect.any(Function),
+                );
+                expect(instance.fetchFeedItems).toBeCalled();
+            },
+        );
+
+        test('should call the deleteThreadedComment API if it exists when hasReplies prop equals to true', () => {
+            const wrapper = getWrapper({ hasReplies: true });
+            const instance = wrapper.instance();
             instance.fetchFeedItems = jest.fn();
-        });
 
-        test('should call the deleteComment prop if it exists', () => {
             const id = '1';
             const permissions = {
                 can_edit: false,
                 can_delete: true,
             };
             instance.deleteComment({ id, permissions });
-            expect(feedAPI.deleteComment).toHaveBeenCalled();
-            expect(instance.fetchFeedItems).toHaveBeenCalled();
+            expect(feedAPI.deleteThreadedComment).toBeCalledWith(
+                file,
+                id,
+                permissions,
+                expect.any(Function),
+                expect.any(Function),
+            );
+            expect(instance.fetchFeedItems).toBeCalled();
         });
     });
 
-    describe('fetchCurrentUser()', () => {
-        let instance;
-        let wrapper;
-        beforeEach(() => {
-            wrapper = getWrapper();
-            instance = wrapper.instance();
-            instance.errorCallback = jest.fn();
-        });
-        test('should invoke setState() directly if user parameter is not missing', () => {
-            instance.setState = jest.fn();
-            instance.fetchCurrentUser(currentUser);
-            expect(instance.setState).toBeCalledWith({
-                currentUser,
-                currentUserError: undefined,
-            });
-        });
+    describe('deleteReply()', () => {
+        test('should call the deleteReply API and call emitAnnotationReplyDeleteEvent', () => {
+            const mockEmitAnnotationReplyDeleteEvent = jest.fn();
+            const wrapper = getWrapper({ emitAnnotationReplyDeleteEvent: mockEmitAnnotationReplyDeleteEvent });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
 
-        test('should get the user', () => {
-            instance.fetchCurrentUser();
-            expect(usersAPI.getUser).toBeCalled();
+            const id = '1';
+            const parentId = '123';
+            const permissions = {
+                can_edit: false,
+                can_delete: true,
+            };
+            instance.deleteReply({ id, parentId, permissions });
+            expect(feedAPI.deleteReply).toBeCalledWith(
+                file,
+                id,
+                parentId,
+                permissions,
+                expect.any(Function),
+                expect.any(Function),
+            );
+            expect(instance.fetchFeedItems).toBeCalled();
+            expect(mockEmitAnnotationReplyDeleteEvent).toBeCalledWith(id, parentId, true);
         });
     });
 
-    describe('fetchCurrentUserErrorCallback()', () => {
-        let instance;
-        let wrapper;
+    describe('deleteReplySuccessCallback()', () => {
+        test('should call the feedSuccessCallback and emitAnnotationReplyDeleteEvent', () => {
+            const mockEmitAnnotationReplyDeleteEvent = jest.fn();
+            const wrapper = getWrapper({ emitAnnotationReplyDeleteEvent: mockEmitAnnotationReplyDeleteEvent });
+            const instance = wrapper.instance();
+            instance.feedSuccessCallback = jest.fn();
 
-        beforeEach(() => {
-            wrapper = getWrapper();
-            instance = wrapper.instance();
-            instance.errorCallback = jest.fn();
-            instance.fetchFeedItems = jest.fn();
-            instance.fetchCurrentUser = jest.fn();
-        });
+            const id = '1';
+            const parentId = '123';
 
-        test('should set a maskError if there is an error in fetching the current user', () => {
-            instance.fetchCurrentUserErrorCallback();
-            const inlineErrorState = wrapper.state().currentUserError.maskError;
-            expect(typeof currentUserErrorHeaderMessage).toBe('object');
-            expect(typeof defaultErrorMaskSubHeaderMessage).toBe('object');
-            expect(inlineErrorState.errorHeader).toEqual(currentUserErrorHeaderMessage);
-            expect(inlineErrorState.errorSubHeader).toEqual(defaultErrorMaskSubHeaderMessage);
+            instance.deleteReplySuccessCallback(id, parentId);
+            expect(instance.feedSuccessCallback).toBeCalled();
+            expect(mockEmitAnnotationReplyDeleteEvent).toBeCalledWith(id, parentId);
         });
     });
 
@@ -295,7 +323,6 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
             instance.fetchFeedItems = jest.fn();
             instance.feedSuccessCallback = jest.fn();
             instance.feedErrorCallback = jest.fn();
-            instance.setState({ currentUser });
         });
 
         test('should call the update task assignment API and fetch the items', () => {
@@ -316,27 +343,220 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
     });
 
     describe('createComment()', () => {
-        let instance;
-        let wrapper;
-        const message = 'foo';
+        test('should throw an error if missing current user', () => {
+            const wrapper = getWrapper({ currentUser: null });
+            const instance = wrapper.instance();
+            const message = 'foo';
 
-        beforeEach(() => {
-            wrapper = getWrapper();
-            instance = wrapper.instance();
+            expect(() => instance.createComment(message, true)).toThrow('Bad box user!');
+        });
+
+        test.each`
+            hasReplies
+            ${undefined}
+            ${false}
+        `(
+            'should call the createComment API and fetch the items when hasReplies prop equals to $hasReplies',
+            ({ hasReplies }) => {
+                const wrapper = getWrapper({ hasReplies });
+                const instance = wrapper.instance();
+                instance.fetchFeedItems = jest.fn();
+                const message = 'foo';
+                const hasMention = true;
+
+                instance.createComment(message, hasMention);
+                expect(feedAPI.createComment).toBeCalledWith(
+                    file,
+                    currentUser,
+                    message,
+                    hasMention,
+                    expect.any(Function),
+                    expect.any(Function),
+                );
+                expect(instance.fetchFeedItems).toBeCalled();
+            },
+        );
+
+        test('should call the createThreadedComment API and fetch the items when hasReplies prop equals to true', () => {
+            const wrapper = getWrapper({ hasReplies: true });
+            const instance = wrapper.instance();
             instance.fetchFeedItems = jest.fn();
+            const message = 'foo';
+            const hasMention = true;
+
+            instance.createComment(message, hasMention);
+            expect(feedAPI.createThreadedComment).toBeCalledWith(
+                file,
+                currentUser,
+                message,
+                expect.any(Function),
+                expect.any(Function),
+            );
+            expect(instance.fetchFeedItems).toBeCalled();
         });
+    });
 
+    describe('createReply()', () => {
         test('should throw an error if missing current user', () => {
-            expect(() => instance.createComment(message, true)).toThrow('Bad box user!');
+            const wrapper = getWrapper({ currentUser: undefined });
+            const instance = wrapper.instance();
+
+            expect(() => instance.createReply('123', FEED_ITEM_TYPE_COMMENT, 'abc', true)).toThrow(userError);
         });
 
-        test('should call the create comment API and fetch the items', () => {
+        test('should call the createReply API, fetch the items and call emitAnnotationReplyCreateEvent', () => {
+            const mockEmitAnnotationReplyCreateEvent = jest.fn();
+            const wrapper = getWrapper({ emitAnnotationReplyCreateEvent: mockEmitAnnotationReplyCreateEvent });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+            const parentId = '123';
+            const parentType = FEED_ITEM_TYPE_COMMENT;
+            const message = 'abc';
+
             instance.setState({
                 currentUser,
             });
-            instance.createComment(message, true);
-            expect(feedAPI.createComment).toBeCalled();
+            instance.createReply(parentId, parentType, message);
+            expect(feedAPI.createReply).toBeCalledWith(
+                file,
+                currentUser,
+                parentId,
+                parentType,
+                message,
+                expect.any(Function),
+                expect.any(Function),
+            );
             expect(instance.fetchFeedItems).toBeCalled();
+            expect(mockEmitAnnotationReplyCreateEvent).toBeCalledWith(
+                { tagged_message: message },
+                'uniqueId',
+                parentId,
+                true,
+            );
+        });
+    });
+
+    describe('createReplySuccessCallback()', () => {
+        test('should call the feedSuccessCallback and emitAnnotationReplyCreateEvent', () => {
+            const mockEmitAnnotationReplyCreateEvent = jest.fn();
+            const wrapper = getWrapper({ emitAnnotationReplyCreateEvent: mockEmitAnnotationReplyCreateEvent });
+            const instance = wrapper.instance();
+            instance.feedSuccessCallback = jest.fn();
+
+            const reply = { id: '1', status: 'resolved' };
+            const parentId = '123';
+            const eventRequestId = 'comment_123';
+
+            instance.createReplySuccessCallback(eventRequestId, parentId, reply);
+            expect(instance.feedSuccessCallback).toBeCalled();
+            expect(mockEmitAnnotationReplyCreateEvent).toBeCalledWith(reply, eventRequestId, parentId);
+        });
+    });
+
+    describe('updateComment()', () => {
+        test.each`
+            hasReplies
+            ${undefined}
+            ${false}
+        `('should call updateComment API when hasReplies prop equals to $hasReplies', ({ hasReplies }) => {
+            const wrapper = getWrapper({ hasReplies });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.instance().updateComment('123', 'hello', undefined, false, {
+                can_edit: true,
+                can_delete: true,
+            });
+
+            expect(api.getFeedAPI().updateComment).toBeCalledWith(
+                file,
+                '123',
+                'hello',
+                false,
+                { can_edit: true, can_delete: true },
+                expect.any(Function),
+                expect.any(Function),
+            );
+            expect(instance.fetchFeedItems).toBeCalled();
+        });
+
+        describe('should call updateThreadedComment API when hasReplies prop equals to true', () => {
+            test.each`
+                status       | text         | expectedStatus | expectedText
+                ${undefined} | ${undefined} | ${undefined}   | ${undefined}
+                ${'open'}    | ${'foo'}     | ${'open'}      | ${'foo'}
+            `('given status=$status and text=$text', ({ status, text, expectedStatus, expectedText }) => {
+                const wrapper = getWrapper({ hasReplies: true });
+                const instance = wrapper.instance();
+                instance.fetchFeedItems = jest.fn();
+
+                wrapper.instance().updateComment('123', text, status, false, {
+                    can_edit: true,
+                    can_delete: true,
+                });
+
+                expect(api.getFeedAPI().updateThreadedComment).toBeCalledWith(
+                    file,
+                    '123',
+                    expectedText,
+                    expectedStatus,
+                    { can_edit: true, can_delete: true },
+                    expect.any(Function),
+                    expect.any(Function),
+                );
+                expect(instance.fetchFeedItems).toBeCalled();
+            });
+        });
+    });
+
+    describe('updateReply()', () => {
+        test('should call updateReply API and call emitAnnotationReplyUpdateEvent', () => {
+            const mockEmitAnnotationReplyUpdateEvent = jest.fn();
+            const wrapper = getWrapper({ emitAnnotationReplyUpdateEvent: mockEmitAnnotationReplyUpdateEvent });
+            const instance = wrapper.instance();
+            const parentId = '123';
+            const text = 'abc';
+            const reply = {
+                id: '1',
+                permissions: { can_edit: true },
+            };
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.instance().updateReply(reply.id, parentId, text, reply.permissions);
+
+            expect(api.getFeedAPI().updateReply).toBeCalledWith(
+                file,
+                reply.id,
+                parentId,
+                text,
+                reply.permissions,
+                expect.any(Function),
+                expect.any(Function),
+            );
+            expect(instance.fetchFeedItems).toBeCalled();
+            expect(mockEmitAnnotationReplyUpdateEvent).toBeCalledWith(
+                { id: reply.id, tagged_message: text },
+                parentId,
+                true,
+            );
+        });
+    });
+
+    describe('updateReplySuccessCallback()', () => {
+        test('should call the feedSuccessCallback and emitAnnotationReplyUpdateEvent', () => {
+            const mockEmitAnnotationReplyUpdateEvent = jest.fn();
+            const wrapper = getWrapper({ emitAnnotationReplyUpdateEvent: mockEmitAnnotationReplyUpdateEvent });
+            const instance = wrapper.instance();
+            instance.feedSuccessCallback = jest.fn();
+
+            const onSuccess = jest.fn();
+            const reply = { id: '1', status: 'resolved' };
+            const parentId = '123';
+
+            instance.updateReplySuccessCallback(parentId, onSuccess, reply);
+            expect(instance.feedSuccessCallback).toBeCalled();
+            expect(mockEmitAnnotationReplyUpdateEvent).toBeCalledWith(reply, parentId);
+            expect(onSuccess).toBeCalled();
         });
     });
 
@@ -356,32 +576,20 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
         });
 
         test.each`
-            annotationsEnabled | appActivityEnabled | tasksEnabled | versionsEnabled | expectedAnnotations | expectedAppActivity | expectedTasks | expectedVersions
-            ${false}           | ${false}           | ${false}     | ${false}        | ${false}            | ${false}            | ${false}      | ${false}
-            ${false}           | ${true}            | ${false}     | ${false}        | ${false}            | ${true}             | ${false}      | ${false}
-            ${true}            | ${false}           | ${false}     | ${true}         | ${true}             | ${false}            | ${false}      | ${true}
-            ${true}            | ${true}            | ${false}     | ${true}         | ${true}             | ${true}             | ${false}      | ${true}
-            ${false}           | ${true}            | ${false}     | ${true}         | ${false}            | ${true}             | ${false}      | ${true}
-            ${false}           | ${false}           | ${false}     | ${true}         | ${false}            | ${false}            | ${false}      | ${true}
-            ${true}            | ${true}            | ${false}     | ${false}        | ${true}             | ${true}             | ${false}      | ${false}
-            ${true}            | ${false}           | ${false}     | ${false}        | ${true}             | ${false}            | ${false}      | ${false}
-            ${false}           | ${false}           | ${true}      | ${false}        | ${false}            | ${false}            | ${true}       | ${false}
-            ${false}           | ${true}            | ${true}      | ${false}        | ${false}            | ${true}             | ${true}       | ${false}
-            ${true}            | ${false}           | ${true}      | ${true}         | ${true}             | ${false}            | ${true}       | ${true}
-            ${true}            | ${true}            | ${true}      | ${true}         | ${true}             | ${true}             | ${true}       | ${true}
-            ${false}           | ${true}            | ${true}      | ${true}         | ${false}            | ${true}             | ${true}       | ${true}
-            ${false}           | ${false}           | ${true}      | ${true}         | ${false}            | ${false}            | ${true}       | ${true}
-            ${true}            | ${true}            | ${true}      | ${false}        | ${true}             | ${true}             | ${true}       | ${false}
-            ${true}            | ${false}           | ${true}      | ${false}        | ${true}             | ${false}            | ${true}       | ${false}
+            annotationsEnabled | appActivityEnabled | repliesEnabled | tasksEnabled | versionsEnabled | expectedAnnotations | expectedAppActivity | expectedReplies | expectedTasks | expectedVersions
+            ${false}           | ${false}           | ${false}       | ${false}     | ${false}        | ${false}            | ${false}            | ${false}        | ${false}      | ${false}
+            ${true}            | ${true}            | ${true}        | ${true}      | ${true}         | ${true}             | ${true}             | ${true}         | ${true}       | ${true}
         `(
-            'should fetch the feed items based on features: annotationsEnabled=$annotationsEnabled, appActivityEnabled=$appActivityEnabled, tasksEnabled=$tasksEnabled and versionsEnabled=$versionsEnabled',
+            'should fetch the feed items based on features: annotationsEnabled=$annotationsEnabled, appActivityEnabled=$appActivityEnabled, repliesEnabled=$repliesEnabled, tasksEnabled=$tasksEnabled and versionsEnabled=$versionsEnabled',
             ({
                 annotationsEnabled,
                 appActivityEnabled,
+                repliesEnabled,
                 tasksEnabled,
                 versionsEnabled,
                 expectedAnnotations,
                 expectedAppActivity,
+                expectedReplies,
                 expectedTasks,
                 expectedVersions,
             }) => {
@@ -392,6 +600,7 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
                             appActivity: { enabled: appActivityEnabled },
                         },
                     },
+                    hasReplies: repliesEnabled,
                     hasTasks: tasksEnabled,
                     hasVersions: versionsEnabled,
                 });
@@ -411,6 +620,7 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
                     {
                         shouldShowAnnotations: expectedAnnotations,
                         shouldShowAppActivity: expectedAppActivity,
+                        shouldShowReplies: expectedReplies,
                         shouldShowTasks: expectedTasks,
                         shouldShowVersions: expectedVersions,
                     },
@@ -520,71 +730,24 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
         });
     });
 
-    describe('fetchCurrentUserSuccessCallback()', () => {
-        let instance;
-        let wrapper;
-
-        beforeEach(() => {
-            wrapper = getWrapper();
-            instance = wrapper.instance();
-            instance.setState = jest.fn();
-        });
-
-        test('should set the feedItems in the state', () => {
-            instance.fetchCurrentUserSuccessCallback(currentUser);
-            expect(instance.setState).toBeCalledWith({
-                currentUser,
-                currentUserError: undefined,
-            });
-        });
-    });
-
-    describe('fetchCurrentUserSuccessCallback()', () => {
+    describe('getApprover()', () => {
         let instance;
         let wrapper;
 
-        beforeEach(() => {
-            wrapper = getWrapper();
-            instance = wrapper.instance();
-            instance.setState = jest.fn();
-        });
-
-        test('should set the feedItems in the state', () => {
-            instance.fetchCurrentUserSuccessCallback(currentUser);
-            expect(instance.setState).toBeCalledWith({
-                currentUser,
-                currentUserError: undefined,
-            });
-        });
-    });
-
-    describe('getApproverWithQuery()', () => {
-        let instance;
-        let wrapper;
-        let getCollaboratorsSpy;
-
         test('should get collaborators with groups', () => {
             wrapper = getWrapper();
             instance = wrapper.instance();
-            getCollaboratorsSpy = jest.spyOn(instance, 'getCollaborators');
 
             const search = 'Santa Claus';
-            instance.getApproverWithQuery(search);
+            instance.getApprover(search);
 
-            expect(getCollaboratorsSpy).toBeCalledWith(
-                instance.getApproverContactsSuccessCallback,
-                instance.errorCallback,
-                search,
-                { includeGroups: true },
-            );
-            expect(fileCollaboratorsAPI.getFileCollaborators).toHaveBeenCalledWith(
+            expect(api.getFileCollaboratorsAPI().getCollaboratorsWithQuery).toBeCalledWith(
                 file.id,
                 instance.getApproverContactsSuccessCallback,
                 instance.errorCallback,
+                search,
                 {
-                    filter_term: search,
-                    include_groups: true,
-                    include_uploader_collabs: false,
+                    includeGroups: true,
                 },
             );
         });
@@ -608,34 +771,22 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
         });
     });
 
-    describe('getMentionWithQuery()', () => {
+    describe('getMention()', () => {
         let instance;
         let wrapper;
-        let getCollaboratorsSpy;
 
-        beforeEach(() => {
+        test('should get collaborators without groups', () => {
             wrapper = getWrapper();
             instance = wrapper.instance();
-            getCollaboratorsSpy = jest.spyOn(instance, 'getCollaborators');
-        });
 
-        test('should get collaborators without groups', () => {
             const search = 'Santa Claus';
-            instance.getMentionWithQuery(search);
-            expect(getCollaboratorsSpy).toBeCalledWith(
-                instance.getMentionContactsSuccessCallback,
-                instance.errorCallback,
-                search,
-            );
-            expect(fileCollaboratorsAPI.getFileCollaborators).toHaveBeenCalledWith(
+            instance.getMention(search);
+
+            expect(api.getFileCollaboratorsAPI().getCollaboratorsWithQuery).toBeCalledWith(
                 file.id,
                 instance.getMentionContactsSuccessCallback,
                 instance.errorCallback,
-                {
-                    filter_term: search,
-                    include_groups: false,
-                    include_uploader_collabs: false,
-                },
+                search,
             );
         });
     });
@@ -668,26 +819,24 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
         });
     });
 
-    describe('fetchCurrentUserErrorCallback()', () => {
-        let wrapper;
-        let instance;
+    describe('getReplies()', () => {
+        test('should call fetchReplies API', () => {
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+            const itemId = '123';
+            const itemType = FEED_ITEM_TYPE_COMMENT;
+            instance.fetchFeedItems = jest.fn();
 
-        beforeEach(() => {
-            wrapper = getWrapper({
-                file,
-            });
-            instance = wrapper.instance();
-            instance.setState = jest.fn();
-            instance.errorCallback = jest.fn();
-        });
+            wrapper.instance().getReplies(itemId, itemType);
 
-        test('should set the current user error and call the error callback', () => {
-            instance.fetchCurrentUserErrorCallback({ status: 500 });
-            expect(instance.setState).toBeCalledWith({
-                currentUser: undefined,
-                currentUserError: expect.any(Object),
-            });
-            expect(instance.errorCallback).toBeCalled();
+            expect(api.getFeedAPI().fetchReplies).toBeCalledWith(
+                file,
+                itemId,
+                itemType,
+                expect.any(Function),
+                expect.any(Function),
+            );
+            expect(instance.fetchFeedItems).toBeCalled();
         });
     });
 
@@ -709,39 +858,6 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
         });
     });
 
-    describe('getCollaborators()', () => {
-        let wrapper;
-        let instance;
-        let successCb;
-        let errorCb;
-
-        beforeEach(() => {
-            successCb = jest.fn();
-            errorCb = jest.fn();
-            wrapper = getWrapper({
-                file,
-            });
-            instance = wrapper.instance();
-        });
-
-        test('should short circuit if there is no search string', () => {
-            instance.getCollaborators(successCb, errorCb);
-            instance.getCollaborators(successCb, errorCb, '');
-            instance.getCollaborators(successCb, errorCb, '  ');
-            expect(fileCollaboratorsAPI.getFileCollaborators).not.toHaveBeenCalled();
-        });
-
-        test('should call the file collaborators api', () => {
-            const searchStr = 'foo';
-            instance.getCollaborators(successCb, errorCb, searchStr);
-            expect(fileCollaboratorsAPI.getFileCollaborators).toHaveBeenCalledWith(file.id, successCb, errorCb, {
-                filter_term: searchStr,
-                include_groups: false,
-                include_uploader_collabs: false,
-            });
-        });
-    });
-
     describe('refresh()', () => {
         let instance;
         let wrapper;
@@ -764,7 +880,7 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
 
     describe('handleAnnotationSelect()', () => {
         const annotatorState = { activeAnnotationId: '123' };
-        const emitAnnotatorActiveChangeEvent = jest.fn();
+        const emitActiveAnnotationChangeEvent = jest.fn();
         const getAnnotationsMatchPath = jest.fn().mockReturnValue({ params: { fileVersionId: '456' } });
         const getAnnotationsPath = jest.fn().mockReturnValue('/activity/annotations/235/124');
         const history = {
@@ -776,7 +892,7 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
         const getAnnotationWrapper = () =>
             getWrapper({
                 annotatorState,
-                emitAnnotatorActiveChangeEvent,
+                emitActiveAnnotationChangeEvent,
                 file,
                 getAnnotationsMatchPath,
                 getAnnotationsPath,
@@ -791,7 +907,7 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
 
             instance.handleAnnotationSelect(annotation);
 
-            expect(emitAnnotatorActiveChangeEvent).toHaveBeenCalledWith('124');
+            expect(emitActiveAnnotationChangeEvent).toBeCalledWith('124');
             expect(history.push).toHaveBeenCalledWith('/activity/annotations/235/124');
             expect(onAnnotationSelect).toHaveBeenCalledWith(annotation);
         });
@@ -803,7 +919,7 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
 
             instance.handleAnnotationSelect(annotation);
 
-            expect(emitAnnotatorActiveChangeEvent).toHaveBeenCalledWith('124');
+            expect(emitActiveAnnotationChangeEvent).toBeCalledWith('124');
             expect(history.push).not.toHaveBeenCalled();
             expect(onAnnotationSelect).toHaveBeenCalledWith(annotation);
         });
@@ -816,7 +932,7 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
 
             instance.handleAnnotationSelect(annotation);
 
-            expect(emitAnnotatorActiveChangeEvent).toHaveBeenCalledWith('124');
+            expect(emitActiveAnnotationChangeEvent).toBeCalledWith('124');
             expect(history.push).toHaveBeenCalledWith('/activity/annotations/235/124');
             expect(onAnnotationSelect).toHaveBeenCalledWith(annotation);
         });
@@ -829,40 +945,84 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
 
             instance.handleAnnotationSelect(annotation);
 
-            expect(emitAnnotatorActiveChangeEvent).toHaveBeenCalledWith('124');
+            expect(emitActiveAnnotationChangeEvent).toBeCalledWith('124');
             expect(history.push).not.toHaveBeenCalled();
             expect(onAnnotationSelect).toHaveBeenCalledWith(annotation);
         });
     });
 
     describe('handleAnnotationEdit()', () => {
-        test('should call updateAnnotation API', () => {
-            const wrapper = getWrapper();
+        test('should call updateAnnotation API and call emitAnnotationUpdateEvent', () => {
+            const mockEmitAnnotationUpdateEvent = jest.fn();
+            const wrapper = getWrapper({ emitAnnotationUpdateEvent: mockEmitAnnotationUpdateEvent });
             const instance = wrapper.instance();
             instance.fetchFeedItems = jest.fn();
 
-            wrapper.instance().handleAnnotationEdit({
-                id: '123',
-                text: 'hello',
-                permissions: {
-                    can_edit: true,
-                    can_delete: true,
+            wrapper.instance().handleAnnotationEdit('123', 'hello', {
+                can_edit: true,
+                can_delete: true,
+                can_resolve: true,
+            });
+
+            expect(mockEmitAnnotationUpdateEvent).toBeCalledWith(
+                {
+                    id: '123',
+                    description: {
+                        message: 'hello',
+                    },
                 },
+                true,
+            );
+            expect(api.getFeedAPI().updateAnnotation).toBeCalledWith(
+                expect.anything(),
+                '123',
+                'hello',
+                undefined,
+                { can_edit: true, can_delete: true, can_resolve: true },
+                expect.any(Function),
+                expect.any(Function),
+            );
+            expect(instance.fetchFeedItems).toBeCalled();
+        });
+    });
+
+    describe('handleAnnotationStatusChange()', () => {
+        test('should call updateAnnotation API and call emitAnnotationUpdateEvent', () => {
+            const mockEmitAnnotationUpdateEvent = jest.fn();
+            const wrapper = getWrapper({ emitAnnotationUpdateEvent: mockEmitAnnotationUpdateEvent });
+            const instance = wrapper.instance();
+            instance.fetchFeedItems = jest.fn();
+
+            wrapper.instance().handleAnnotationStatusChange('123', 'open', {
+                can_edit: true,
+                can_delete: true,
+                can_resolve: true,
             });
 
-            expect(api.getFeedAPI().updateAnnotation).toHaveBeenCalled();
-            expect(instance.fetchFeedItems).toHaveBeenCalled();
+            expect(mockEmitAnnotationUpdateEvent).toBeCalledWith({ id: '123', status: 'open' }, true);
+            expect(api.getFeedAPI().updateAnnotation).toBeCalledWith(
+                expect.anything(),
+                '123',
+                undefined,
+                'open',
+                { can_edit: true, can_delete: true, can_resolve: true },
+                expect.any(Function),
+                expect.any(Function),
+            );
+            expect(instance.fetchFeedItems).toBeCalled();
         });
     });
 
     describe('handleAnnotationDelete()', () => {
-        test('should call deleteAnnotation API', () => {
-            const wrapper = getWrapper();
+        test('should call deleteAnnotation API and call emitAnnotationDeleteEvent', () => {
+            const mockEmitAnnotationRemoveEvent = jest.fn();
+            const wrapper = getWrapper({ emitAnnotationRemoveEvent: mockEmitAnnotationRemoveEvent });
             const instance = wrapper.instance();
             instance.fetchFeedItems = jest.fn();
 
             wrapper.instance().handleAnnotationDelete({ id: '123' });
 
+            expect(mockEmitAnnotationRemoveEvent).toBeCalledWith('123', true);
             expect(api.getFeedAPI().deleteAnnotation).toBeCalled();
             expect(instance.fetchFeedItems).toHaveBeenCalled();
         });
@@ -870,19 +1030,84 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
 
     describe('deleteAnnotationSuccess()', () => {
         test('should handle successful annotation deletion', () => {
-            const mockEmitRemoveEvent = jest.fn();
+            const mockEmitAnnotationRemoveEvent = jest.fn();
             const mockFeedSuccess = jest.fn();
-            const wrapper = getWrapper({ emitRemoveEvent: mockEmitRemoveEvent });
+            const wrapper = getWrapper({ emitAnnotationRemoveEvent: mockEmitAnnotationRemoveEvent });
             const instance = wrapper.instance();
 
             instance.feedSuccessCallback = mockFeedSuccess;
             instance.deleteAnnotationSuccess('123');
 
-            expect(mockEmitRemoveEvent).toBeCalledWith('123');
+            expect(mockEmitAnnotationRemoveEvent).toBeCalledWith('123');
             expect(mockFeedSuccess).toBeCalled();
         });
     });
 
+    describe('getFilteredFeedItems()', () => {
+        const {
+            annotationOpen: expectedAnnotationOpen,
+            annotationResolved: expectedAnnotationResolved,
+            commentOpen: expectedCommentOpen,
+            commentResolved: expectedCommentResolved,
+            taskItem: expectedTaskItem,
+            versionItem: expectedVersionItem,
+        } = filterableActivityFeedItems;
+
+        test.each`
+            status        | expected
+            ${undefined}  | ${[expectedAnnotationOpen, expectedAnnotationResolved, expectedCommentOpen, expectedCommentResolved, expectedTaskItem, expectedVersionItem]}
+            ${'open'}     | ${[expectedAnnotationOpen, expectedCommentOpen, expectedVersionItem]}
+            ${'resolved'} | ${[expectedAnnotationResolved, expectedCommentResolved, expectedVersionItem]}
+        `(
+            'should filter feed items of type "comment" or "annotation" based on status equal to $status',
+            ({ status, expected }) => {
+                const {
+                    annotationOpen,
+                    annotationResolved,
+                    commentOpen,
+                    commentResolved,
+                    taskItem,
+                    versionItem,
+                } = cloneDeep(filterableActivityFeedItems);
+                const wrapper = getWrapper();
+                const instance = wrapper.instance();
+                instance.setState({
+                    feedItems: [
+                        annotationOpen,
+                        annotationResolved,
+                        commentOpen,
+                        commentResolved,
+                        taskItem,
+                        versionItem,
+                    ],
+                });
+                instance.setState({
+                    feedItemsStatusFilter: status,
+                });
+                expect(instance.getFilteredFeedItems()).toMatchObject(expected);
+            },
+        );
+    });
+
+    describe('handleItemsFiltered()', () => {
+        test.each`
+            status       | expected
+            ${undefined} | ${undefined}
+            ${'open'}    | ${'open'}
+        `(
+            'given $status should update feedItemsStatusFilter state with $expected and call filter change event callback',
+            ({ status, expected }) => {
+                const mockOnFilterChange = jest.fn();
+                const wrapper = getWrapper({ onFilterChange: mockOnFilterChange });
+                const instance = wrapper.instance();
+                instance.setState = jest.fn();
+                instance.handleItemsFiltered(status);
+                expect(instance.setState).toBeCalledWith({ feedItemsStatusFilter: expected });
+                expect(mockOnFilterChange).toBeCalledWith(expected);
+            },
+        );
+    });
+
     describe('renderAddTaskButton()', () => {
         test('should return null when hasTasks is false', () => {
             const wrapper = getWrapper({ hasTasks: false });
@@ -890,4 +1115,69 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
             expect(instance.renderAddTaskButton()).toBe(null);
         });
     });
+
+    describe('renderActivitySidebarFilter()', () => {
+        describe('should return null', () => {
+            test('when activityFeed.filter feature is not set', () => {
+                const wrapper = getWrapper();
+                const instance = wrapper.instance();
+                expect(instance.renderActivitySidebarFilter()).toBe(null);
+            });
+
+            test('when activityFeed.filter feature is disabled', () => {
+                const wrapper = getWrapper({
+                    features: {
+                        activityFeed: {
+                            filter: { enabled: false },
+                        },
+                    },
+                });
+                const instance = wrapper.instance();
+                expect(instance.renderActivitySidebarFilter()).toBe(null);
+            });
+        });
+
+        test('should return ActivitySidebarFilter when activityFeed.filter feature is enabled', () => {
+            const wrapper = getWrapper({
+                features: {
+                    activityFeed: {
+                        filter: { enabled: true },
+                    },
+                },
+            });
+            const instance = wrapper.instance();
+            const resultWrapper = mount(instance.renderActivitySidebarFilter());
+            expect(resultWrapper.name()).toBe('ActivitySidebarFilter');
+        });
+    });
+
+    describe('renderTitle()', () => {
+        describe('should return FormattedMessage', () => {
+            test('when activityFeed.filter feature is not set', () => {
+                const wrapper = getWrapper();
+                const instance = wrapper.instance();
+                const resultWrapper = mount(instance.renderTitle());
+                expect(resultWrapper.name()).toBe('FormattedMessage');
+            });
+
+            test('when activityFeed.filter feature is disabled', () => {
+                const wrapper = getWrapper({
+                    features: {
+                        activityFeed: {
+                            filter: { enabled: false },
+                        },
+                    },
+                });
+                const instance = wrapper.instance();
+                const resultWrapper = mount(instance.renderTitle());
+                expect(resultWrapper.name()).toBe('FormattedMessage');
+            });
+        });
+
+        test('should return undefined when activityFeed.filter feature is enabled', () => {
+            const wrapper = getWrapper({ features: { activityFeed: { filter: { enabled: true } } } });
+            const instance = wrapper.instance();
+            expect(instance.renderTitle()).toBe(undefined);
+        });
+    });
 });