feat(content-sidebar): added support for active comment reply (#3134)

* feat(content-sidebar): added support for active comment reply

* feat(content-sidebar): added support for active comment reply

* feat(content-sidebar): added support for active comment reply

* feat(content-sidebar): added support for active comment reply

* feat(content-sidebar): added support for active comment reply

* feat(content-sidebar): added support for active comment reply

* feat(content-sidebar): added support for active comment reply

Author: kkuliczkowski-box

src/api/Feed.js

@@ -462,6 +462,51 @@ class Feed extends Base {
         });
     }
 
+    /**
+     * Fetches a comment for a file
+     *
+     * @param {BoxItem} file - The file to which the comment belongs to
+     * @param {string} commentId - comment id
+     * @param {Function} successCallback
+     * @param {ErrorCallback} errorCallback
+     * @return {Promise} - the file comments
+     */
+    fetchThreadedComment(
+        file: BoxItem,
+        commentId: string,
+        successCallback: (comment: Comment) => void,
+        errorCallback: ErrorCallback,
+    ): Promise<?Comment> {
+        const { id, permissions } = file;
+        if (!id || !permissions) {
+            throw getBadItemError();
+        }
+
+        this.threadedCommentsAPI = new ThreadedCommentsAPI(this.options);
+        return new Promise(resolve => {
+            this.threadedCommentsAPI.getComment({
+                commentId,
+                errorCallback,
+                fileId: id,
+                permissions,
+                successCallback: this.fetchThreadedCommentSuccessCallback.bind(this, resolve, successCallback),
+            });
+        });
+    }
+
+    /**
+     * Callback for successful fetch of a comment
+     *
+     * @param {Function} resolve - resolve function
+     * @param {Function} successCallback - success callback
+     * @param {Comment} comment - comment data
+     * @return {void}
+     */
+    fetchThreadedCommentSuccessCallback = (resolve: Function, successCallback: Function, comment: Comment): void => {
+        successCallback(comment);
+        resolve();
+    };
+
     /**
      * Fetches the comments with replies for a file
      *

src/api/ThreadedComments.js

@@ -12,6 +12,7 @@ import {
     ERROR_CODE_CREATE_COMMENT,
     ERROR_CODE_UPDATE_COMMENT,
     ERROR_CODE_DELETE_COMMENT,
+    ERROR_CODE_FETCH_COMMENT,
     ERROR_CODE_FETCH_COMMENTS,
     PERMISSION_CAN_RESOLVE,
     ERROR_CODE_FETCH_REPLIES,
@@ -228,6 +229,45 @@ class ThreadedComments extends MarkerBasedApi {
         });
     }
 
+    /**
+     * API for fetching comment
+     *
+     * @param {string} commentId - comment id
+     * @param {string} fileId - the file id
+     * @param {BoxItemPermission} permissions - the permissions for the file
+     * @param {Function} successCallback - the success callback
+     * @param {Function} errorCallback - the error callback
+     * @returns {void}
+     */
+    getComment({
+        commentId,
+        errorCallback,
+        fileId,
+        permissions,
+        successCallback,
+    }: {
+        commentId: string,
+        errorCallback: (e: ElementsXhrError, code: string) => void,
+        fileId: string,
+        permissions: BoxItemPermission,
+        successCallback: (comment: Comment) => void,
+    }): void {
+        this.errorCode = ERROR_CODE_FETCH_COMMENT;
+        try {
+            this.checkApiCallValidity(PERMISSION_CAN_COMMENT, permissions, fileId);
+        } catch (e) {
+            errorCallback(e, this.errorCode);
+            return;
+        }
+
+        this.get({
+            id: fileId,
+            errorCallback,
+            successCallback,
+            url: this.getUrlForId(commentId),
+        });
+    }
+
     /**
      * API for fetching comments
      *

src/api/__tests__/Feed.test.js

@@ -203,6 +203,7 @@ jest.mock('../Comments', () =>
 
 jest.mock('../ThreadedComments', () =>
     jest.fn().mockImplementation(() => ({
+        getComment: jest.fn().mockResolvedValue(mockThreadedComments[1]),
         getComments: jest.fn().mockReturnValue({
             entries: mockThreadedComments,
             limit: 1000,
@@ -627,6 +628,53 @@ describe('api/Feed', () => {
         });
     });
 
+    describe('fetchThreadedComment()', () => {
+        test('should throw if no file id', () => {
+            expect(() => feed.fetchThreadedComment({})).toThrow(fileError);
+        });
+
+        test('should throw if no file permissions', () => {
+            expect(() => feed.fetchReplies({ id: '1234' })).toThrow(fileError);
+        });
+
+        test('should call the threaded comments api', () => {
+            const commentId = '123';
+            const successCallback = jest.fn();
+            const errorCallback = jest.fn();
+            const boundFetchThreadedCommentSuccessCallback = jest.fn();
+            feed.fetchThreadedCommentSuccessCallback = jest.fn();
+            feed.fetchThreadedCommentSuccessCallback.bind = jest.fn(() => boundFetchThreadedCommentSuccessCallback);
+
+            feed.fetchThreadedComment(file, commentId, successCallback, errorCallback);
+
+            expect(feed.threadedCommentsAPI.getComment).toBeCalledWith({
+                commentId,
+                errorCallback,
+                fileId: file.id,
+                permissions: file.permissions,
+                successCallback: boundFetchThreadedCommentSuccessCallback,
+            });
+            expect(feed.fetchThreadedCommentSuccessCallback.bind).toBeCalledWith(
+                feed,
+                expect.any(Function),
+                successCallback,
+            );
+        });
+    });
+
+    describe('fetchThreadedCommentSuccessCallback()', () => {
+        test('should call successCallback with given comment and call resolve function', () => {
+            const comment = { id: '123' };
+            const successCallback = jest.fn();
+            const resolve = jest.fn();
+
+            feed.fetchThreadedCommentSuccessCallback(resolve, successCallback, comment);
+
+            expect(successCallback).toBeCalledWith(comment);
+            expect(resolve).toBeCalledWith();
+        });
+    });
+
     describe('fetchThreadedComments()', () => {
         beforeEach(() => {
             feed.file = file;

src/api/__tests__/ThreadedComments.test.js

@@ -4,6 +4,7 @@ import {
     ERROR_CODE_CREATE_COMMENT,
     ERROR_CODE_UPDATE_COMMENT,
     ERROR_CODE_DELETE_COMMENT,
+    ERROR_CODE_FETCH_COMMENT,
     ERROR_CODE_FETCH_COMMENTS,
     ERROR_CODE_FETCH_REPLIES,
     ERROR_CODE_CREATE_REPLY,
@@ -191,6 +192,51 @@ describe('api/ThreadedComments', () => {
         });
     });
 
+    describe('getComment()', () => {
+        const errorCallback = jest.fn();
+        const successCallback = jest.fn();
+
+        test('should format its parameters and call the get method', () => {
+            const permissions = {
+                can_comment: true,
+            };
+            const url = 'http://test-url.com';
+
+            threadedComments.getUrlForId = jest.fn().mockImplementationOnce(() => url);
+
+            threadedComments.getComment({
+                commentId: '123',
+                fileId: '12345',
+                permissions,
+                successCallback,
+                errorCallback,
+            });
+
+            expect(threadedComments.get).toBeCalledWith({
+                id: '12345',
+                errorCallback,
+                successCallback,
+                url,
+            });
+        });
+
+        test('should reject with an error code for calls with invalid permissions', () => {
+            const permissions = {
+                can_comment: false,
+            };
+            threadedComments.getComment({
+                commentId: '123',
+                fileId: '12345',
+                permissions,
+                successCallback,
+                errorCallback,
+            });
+
+            expect(errorCallback).toBeCalledWith(expect.any(Error), ERROR_CODE_FETCH_COMMENT);
+            expect(threadedComments.get).not.toBeCalled();
+        });
+    });
+
     describe('getComments()', () => {
         const errorCallback = jest.fn();
         const successCallback = jest.fn();

src/common/types/feed.js

@@ -6,11 +6,19 @@ import {
     FEED_ITEM_TYPE_ANNOTATION,
     FEED_ITEM_TYPE_APP_ACTIVITY,
     FEED_ITEM_TYPE_COMMENT,
+    FEED_ITEM_TYPE_VERSION,
     FEED_ITEM_TYPE_TASK,
 } from '../../constants';
 import type { BoxItemPermission, BoxItemVersion, Reply, User } from './core';
 import type { Annotation, AnnotationPermission, Annotations } from './annotations';
 
+type FeedItemType =
+    | typeof FEED_ITEM_TYPE_ANNOTATION
+    | typeof FEED_ITEM_TYPE_APP_ACTIVITY
+    | typeof FEED_ITEM_TYPE_COMMENT
+    | typeof FEED_ITEM_TYPE_VERSION
+    | typeof FEED_ITEM_TYPE_TASK;
+
 // Feed item types that can receive deeplinks inline in the feed
 type FocusableFeedItemType =
     | typeof FEED_ITEM_TYPE_TASK
@@ -128,6 +136,10 @@ type FeedItem = Annotation | Comment | Task | BoxItemVersion | AppActivityItem;
 
 type FeedItems = Array<FeedItem>;
 
+type FocusableFeedItem = Annotation | Comment | Task;
+
+type CommentFeedItem = Annotation | Comment;
+
 type ActionItemError = {
     action?: {
         onAction: () => void,
@@ -150,11 +162,14 @@ export type {
     AppItem,
     BoxCommentPermission,
     Comment,
+    CommentFeedItem,
     CommentFeedItemType,
     Comments,
     FeedItem,
     FeedItems,
     FeedItemStatus,
+    FeedItemType,
+    FocusableFeedItem,
     FocusableFeedItemType,
     Reply,
     Task,

src/constants.js

@@ -250,6 +250,7 @@ export const ERROR_CODE_FETCH_FILE_DUE_TO_POLICY = 'forbidden_by_policy';
 export const ERROR_CODE_FETCH_FOLDER = 'fetch_folder_error';
 export const ERROR_CODE_FETCH_WEBLINK = 'fetch_weblink_error';
 export const ERROR_CODE_FETCH_CLASSIFICATION = 'fetch_classification_error';
+export const ERROR_CODE_FETCH_COMMENT = 'fetch_comment_error';
 export const ERROR_CODE_FETCH_COMMENTS = 'fetch_comments_error';
 export const ERROR_CODE_FETCH_REPLIES = 'fetch_replies_error';
 export const ERROR_CODE_FETCH_VERSION = 'fetch_version_error';