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

package/src/elements/content-sidebar/activity-feed/annotation-thread/__tests__/useAnnotationAPI.test.js

@@ -0,0 +1,202 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { annotationsWithFormattedReplies as annotations } from '../../../../../api/fixtures';
+import useAnnotationAPI from '../useAnnotationAPI';
+
+describe('src/elements/content-sidebar/activity-feed/useAnnotattionAPI', () => {
+    const annotation = annotations[0];
+
+    const getApi = ({
+        getAnnotation = jest.fn(),
+        updateAnnotation = jest.fn(),
+        deleteAnnotation = jest.fn(),
+        createAnnotationReply = jest.fn,
+        deleteComment = jest.fn(),
+        updateComment = jest.fn(),
+    }) => {
+        const getAnnotationsAPI = () => ({
+            createAnnotationReply,
+            getAnnotation,
+            updateAnnotation,
+            deleteAnnotation,
+        });
+
+        const getThreadedCommentsAPI = () => ({
+            deleteComment,
+            updateComment,
+        });
+
+        return {
+            getAnnotationsAPI,
+            getThreadedCommentsAPI,
+        };
+    };
+
+    const filePermissions = { can_annotate: true, can_view_annotations: true };
+    const errorCallback = jest.fn();
+
+    const getHook = props =>
+        renderHook(() =>
+            useAnnotationAPI({
+                api: getApi({}),
+                currentUser: {},
+                fileId: 'fileId',
+                filePermissions,
+                annotationId: annotation.id,
+                errorCallback,
+                ...props,
+            }),
+        );
+
+    test('Should return correct default values', () => {
+        const { result } = getHook();
+
+        expect(result.current.annotation).toEqual(undefined);
+        expect(result.current.isLoading).toEqual(true);
+        expect(result.current.error).toEqual(undefined);
+        expect(result.current.replies).toEqual([]);
+    });
+
+    test('Should call fetch annotation on mount', () => {
+        const { replies, ...normalizedAnnotation } = annotation;
+        const mockGetAnnotation = jest.fn((fileId, annotationId, permissions, successCallback) => {
+            successCallback(annotation);
+        });
+        const api = getApi({ getAnnotation: mockGetAnnotation });
+
+        const { result } = getHook({ api });
+
+        expect(mockGetAnnotation).toBeCalledWith(
+            'fileId',
+            annotation.id,
+            { can_annotate: true, can_view_annotations: true },
+            expect.any(Function),
+            expect.any(Function),
+            true,
+        );
+
+        expect(result.current.isLoading).toEqual(false);
+        expect(result.current.error).toEqual(undefined);
+        expect(result.current.annotation).toEqual(normalizedAnnotation);
+        expect(result.current.replies).toEqual(replies);
+    });
+
+    test('should call api function on handleEdit with correct arguments and set pending state', () => {
+        const mockUpdateAnnotation = jest.fn();
+        const api = getApi({ updateAnnotation: mockUpdateAnnotation });
+        const { result } = getHook({ api });
+
+        act(() => {
+            result.current.handleEdit(annotation.id, 'new text', { can_edit: true });
+        });
+
+        expect(mockUpdateAnnotation).toBeCalledWith(
+            'fileId',
+            annotation.id,
+            { can_edit: true },
+            { message: 'new text' },
+            expect.any(Function),
+            expect.any(Function),
+        );
+        expect(result.current.annotation.isPending).toEqual(true);
+    });
+
+    test('should call api function on handleStatusChange with correct arguments', () => {
+        const mockUpdateAnnotation = jest.fn();
+        const api = getApi({ updateAnnotation: mockUpdateAnnotation });
+        const { result } = getHook({ api });
+
+        act(() => {
+            result.current.handleStatusChange(annotation.id, 'resolved', { can_resolve: true });
+        });
+
+        expect(mockUpdateAnnotation).toBeCalledWith(
+            'fileId',
+            annotation.id,
+            { can_resolve: true },
+            { status: 'resolved' },
+            expect.any(Function),
+            expect.any(Function),
+        );
+        expect(result.current.annotation.isPending).toEqual(true);
+    });
+
+    test('should call api function on handleDelete with correct arguments', () => {
+        const mockDeleteAnnotation = jest.fn();
+        const api = getApi({ deleteAnnotation: mockDeleteAnnotation });
+        const { result } = getHook({ api });
+
+        act(() => {
+            result.current.handleDelete({
+                id: annotation.id,
+                permissions: { can_delete: true },
+            });
+        });
+
+        expect(mockDeleteAnnotation).toBeCalledWith(
+            'fileId',
+            annotation.id,
+            { can_delete: true },
+            expect.any(Function),
+            expect.any(Function),
+        );
+        expect(result.current.annotation.isPending).toEqual(true);
+    });
+
+    test('should call api function on handleDeleteReply and set correct values on successCallback', () => {
+        const mockDeleteComment = jest.fn(({ successCallback }) => {
+            successCallback();
+        });
+        const api = getApi({ deleteComment: mockDeleteComment });
+        const { id, permissions } = annotation.replies[0];
+        const { result } = getHook({ api });
+
+        act(() => {
+            result.current.handleDeleteReply({ id, permissions });
+        });
+        expect(result.current.replies.length).toEqual(0);
+    });
+
+    test('should call api function on handleEditReply and set correct values on successCallback', () => {
+        const message = 'New message';
+        const updatedReply = { ...annotation.replies[0], message };
+        const mockUpdateComment = jest.fn(({ successCallback }) => {
+            successCallback(updatedReply);
+        });
+        const mockGetAnnotation = jest.fn((fileId, annotationId, permissions, successCallback) => {
+            successCallback(annotation);
+        });
+        const api = getApi({ updateComment: mockUpdateComment, getAnnotation: mockGetAnnotation });
+        const { id, permissions } = annotation.replies[0];
+
+        const { result } = getHook({ api });
+
+        act(() => {
+            result.current.handleEditReply(id, message, undefined, false, permissions);
+        });
+
+        expect(result.current.replies[0].isPending).toEqual(false);
+        expect(result.current.replies[0].message).toEqual(message);
+    });
+
+    test('should call api function on handleCreateReply and set correct values on successCallback', () => {
+        const message = 'New message';
+        const newReply = { ...annotation.replies[0], message, id: 'reply_new' };
+        const mockCreateAnnotationReply = jest.fn((fileId, annotationId, permissions, newMessage, successCallback) => {
+            successCallback(newReply);
+        });
+        const mockGetAnnotation = jest.fn((fileId, annotationId, permissions, successCallback) => {
+            successCallback(annotation);
+        });
+        const api = getApi({ createAnnotationReply: mockCreateAnnotationReply, getAnnotation: mockGetAnnotation });
+
+        const { result } = getHook({ api });
+
+        act(() => {
+            result.current.handleCreateReply(message);
+        });
+
+        const createdReply = result.current.replies[1];
+        expect(createdReply.isPending).toEqual(false);
+        expect(createdReply.message).toEqual(message);
+    });
+});

package/src/elements/content-sidebar/activity-feed/annotation-thread/__tests__/useRepliesAPI.test.js

@@ -0,0 +1,99 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { annotation, user } from '../../../../../__mocks__/annotations';
+import { threadedCommentsFormatted as replies } from '../../../../../api/fixtures';
+import useRepliesAPI from '../useRepliesAPI';
+
+describe('src/elements/content-sidebar/activity-feed/annotation-thread/useRepliesAPI', () => {
+    const getApi = ({ createAnnotationReply = jest.fn, deleteComment = jest.fn(), updateComment = jest.fn() }) => {
+        const getAnnotationsAPI = () => ({
+            createAnnotationReply,
+        });
+
+        const getThreadedCommentsAPI = () => ({
+            deleteComment,
+            updateComment,
+        });
+
+        return {
+            getAnnotationsAPI,
+            getThreadedCommentsAPI,
+        };
+    };
+
+    const getHook = (props, mockedApiFunctions = {}) =>
+        renderHook(() =>
+            useRepliesAPI({
+                annotationId: annotation.id,
+                api: getApi(mockedApiFunctions),
+                currentUser: user,
+                fileId: 'fileId',
+                filePermissions: { can_comment: true },
+                handleUpdateOrCreateReplyItem: jest.fn(),
+                handleRemoveReplyItem: jest.fn(),
+                ...props,
+            }),
+        );
+
+    test('should call api function on handleDeleteReply with correct arguments', () => {
+        const mockDeleteComment = jest.fn();
+        const api = getApi({ deleteComment: mockDeleteComment });
+
+        const { result } = getHook({ api });
+        const { id, permissions } = replies[0];
+
+        act(() => {
+            result.current.handleDeleteReply({ id, permissions });
+        });
+
+        expect(mockDeleteComment).toBeCalledWith({
+            fileId: 'fileId',
+            commentId: id,
+            permissions,
+            successCallback: expect.any(Function),
+            errorCallback: expect.any(Function),
+        });
+    });
+
+    test('should call api function on handleEditReply with correct arguments', () => {
+        const mockUpdateComment = jest.fn();
+        const api = getApi({ updateComment: mockUpdateComment });
+        const { id, permissions } = replies[0];
+        const message = 'Text';
+
+        const { result } = getHook({ api });
+
+        act(() => {
+            result.current.handleEditReply(id, message, false, permissions);
+        });
+
+        expect(mockUpdateComment).toBeCalledWith({
+            fileId: 'fileId',
+            commentId: id,
+            message,
+            permissions,
+            successCallback: expect.any(Function),
+            errorCallback: expect.any(Function),
+        });
+    });
+
+    test('should call api function on handleCreateReply with correct arguments', () => {
+        const mockCreateAnnotationReply = jest.fn();
+        const api = getApi({ createAnnotationReply: mockCreateAnnotationReply });
+        const message = 'Text';
+
+        const { result } = getHook({ api });
+
+        act(() => {
+            result.current.handleCreateReply(message);
+        });
+
+        expect(mockCreateAnnotationReply).toBeCalledWith(
+            'fileId',
+            annotation.id,
+            { can_comment: true },
+            message,
+            expect.any(Function),
+            expect.any(Function),
+        );
+    });
+});

package/src/elements/content-sidebar/activity-feed/annotation-thread/errors.js

@@ -0,0 +1,26 @@
+import {
+    ERROR_CODE_CREATE_REPLY,
+    ERROR_CODE_DELETE_ANNOTATION,
+    ERROR_CODE_DELETE_COMMENT,
+    ERROR_CODE_EDIT_ANNOTATION,
+    ERROR_CODE_FETCH_ANNOTATION,
+    ERROR_CODE_UPDATE_COMMENT,
+} from '../../../../constants';
+import messages from './messages';
+import commonMessages from '../../../common/messages';
+
+const annotationErrors = {
+    [ERROR_CODE_FETCH_ANNOTATION]: messages.errorFetchAnnotation,
+    [ERROR_CODE_EDIT_ANNOTATION]: messages.errorEditAnnotation,
+    [ERROR_CODE_DELETE_ANNOTATION]: messages.errorDeleteAnnotation,
+    default: commonMessages.error,
+};
+
+const commentsErrors = {
+    [ERROR_CODE_UPDATE_COMMENT]: messages.commentUpdateErrorMessage,
+    [ERROR_CODE_CREATE_REPLY]: messages.commentCreateErrorMessage,
+    [ERROR_CODE_DELETE_COMMENT]: messages.commentDeleteErrorMessage,
+    default: commonMessages.error,
+};
+
+export { annotationErrors, commentsErrors };

package/src/elements/content-sidebar/activity-feed/annotation-thread/index.js

@@ -0,0 +1 @@
+export { default } from './AnnotationThread';

package/src/elements/content-sidebar/activity-feed/annotation-thread/messages.js

@@ -0,0 +1,21 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    errorFetchAnnotation: {
+        id: 'be.annotattionThread.errorFetchAnnotation',
+        description: 'Error message when an annotation fetch fails',
+        defaultMessage: 'The annotation could not be fetched.',
+    },
+    errorEditAnnotation: {
+        id: 'be.annotationThread.errorEditAnnotation',
+        description: 'Error message when an annotation update fails',
+        defaultMessage: 'This annotation could not be modified.',
+    },
+    errorDeleteAnnotation: {
+        id: 'be.annotationThread.errorDeleteAnnotation',
+        description: 'Error message when an annotation deletion fails',
+        defaultMessage: 'There was an error deleting this item.',
+    },
+});
+
+export default messages;

package/src/elements/content-sidebar/activity-feed/annotation-thread/useAnnotationAPI.js

@@ -0,0 +1,203 @@
+// @flow
+
+import React from 'react';
+import type { MessageDescriptor } from 'react-intl';
+import API from '../../../../api/APIFactory';
+import { annotationErrors } from './errors';
+import useRepliesAPI from './useRepliesAPI';
+
+import type { Annotation, AnnotationPermission } from '../../../../common/types/annotations';
+import type { BoxItemPermission, User } from '../../../../common/types/core';
+import type { FeedItemStatus, Comment, BoxCommentPermission } from '../../../../common/types/feed';
+import type { ElementOrigin, ElementsXhrError } from '../../../../common/types/api';
+
+import commonMessages from '../../../common/messages';
+
+const normalizeReplies = (repliesArray?: Array<Comment>): { [string]: Comment } => {
+    if (!repliesArray) {
+        return {};
+    }
+    return repliesArray.reduce((prevValues, reply) => {
+        return {
+            ...prevValues,
+            [reply.id]: reply,
+        };
+    }, {});
+};
+
+const denormalizeReplies = (repliesMap: { [string]: Comment }): Array<Comment> => {
+    return Object.keys(repliesMap).map(key => repliesMap[key]);
+};
+
+type Props = {
+    annotationId: string,
+    api: API,
+    currentUser: User,
+    errorCallback: (
+        error: ElementsXhrError | Error,
+        code: string,
+        contextInfo?: Object,
+        origin?: ElementOrigin,
+    ) => void,
+    fileId: string,
+    filePermissions: BoxItemPermission,
+};
+
+type UseAnnotationAPI = {
+    annotation?: Annotation,
+    error?: {
+        message?: MessageDescriptor,
+        title?: MessageDescriptor,
+    },
+    handleCreateReply: (message: string) => void,
+    handleDelete: ({ id: string, permissions: AnnotationPermission }) => any,
+    handleDeleteReply: ({ id: string, permissions: BoxCommentPermission }) => void,
+    handleEdit: (id: string, text: string, permissions: AnnotationPermission) => void,
+    handleEditReply: (
+        replyId: string,
+        message: string,
+        status?: FeedItemStatus,
+        permissions: BoxCommentPermission,
+    ) => void,
+    handleStatusChange: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
+    isLoading: boolean,
+    replies: Array<Comment>,
+};
+
+const useAnnotationAPI = ({
+    annotationId,
+    api,
+    currentUser,
+    fileId,
+    filePermissions,
+    errorCallback,
+}: Props): UseAnnotationAPI => {
+    const [annotation, setAnnotation] = React.useState();
+    const [replies, setReplies] = React.useState<{ [string]: Comment }>({});
+    const [error, setError] = React.useState();
+    const [isLoading, setIsLoading] = React.useState(true);
+
+    const handleUpdateOrCreateReplyItem = (replyId: string, updatedReplyValues: Object) => {
+        setReplies(prevReplies => ({
+            ...prevReplies,
+            [replyId]: {
+                ...prevReplies[replyId],
+                ...updatedReplyValues,
+            },
+        }));
+    };
+
+    const handleRemoveReplyItem = (replyId: string) => {
+        setReplies(prevReplies => {
+            const newReplies = { ...prevReplies };
+            delete newReplies[replyId];
+            return newReplies;
+        });
+    };
+
+    const { handleCreateReply, handleEditReply, handleDeleteReply } = useRepliesAPI({
+        annotationId,
+        api,
+        currentUser,
+        fileId,
+        filePermissions,
+        handleRemoveReplyItem,
+        handleUpdateOrCreateReplyItem,
+    });
+
+    const annotationSuccessCallback = (updatedAnnotation: Annotation): void => {
+        setAnnotation({
+            ...updatedAnnotation,
+            isPending: false,
+        });
+    };
+
+    const annotationDeleteSuccessCallback = () => {
+        // will emit delete event
+    };
+
+    const annotationErrorCallback = React.useCallback(
+        (e: ElementsXhrError, code: string): void => {
+            setIsLoading(false);
+            setError({
+                title: commonMessages.errorOccured,
+                message: annotationErrors[code] || annotationErrors.default,
+            });
+
+            errorCallback(e, code, {
+                error: e,
+            });
+        },
+        [errorCallback],
+    );
+
+    React.useEffect(() => {
+        const getAnnotationSuccess = (fetchedAnnotation: Annotation) => {
+            const { replies: fetchedReplies, ...normalizedAnnotation } = fetchedAnnotation;
+            setAnnotation({ ...normalizedAnnotation });
+            setReplies(normalizeReplies(fetchedReplies));
+            setError(undefined);
+            setIsLoading(false);
+        };
+
+        setIsLoading(true);
+        api.getAnnotationsAPI(false).getAnnotation(
+            fileId,
+            annotationId,
+            filePermissions,
+            getAnnotationSuccess,
+            annotationErrorCallback,
+            true, // to fetch aanotation with its replies
+        );
+    }, [fileId, annotationId, filePermissions, api, annotationErrorCallback]);
+
+    const handleDelete = ({ id, permissions }: { id: string, permissions: AnnotationPermission }): void => {
+        setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));
+        api.getAnnotationsAPI(false).deleteAnnotation(
+            fileId,
+            id,
+            permissions,
+            annotationDeleteSuccessCallback,
+            errorCallback,
+        );
+    };
+
+    const handleEdit = (id: string, text: string, permissions: AnnotationPermission): void => {
+        setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));
+        api.getAnnotationsAPI(false).updateAnnotation(
+            fileId,
+            id,
+            permissions,
+            { message: text },
+            annotationSuccessCallback,
+            annotationErrorCallback,
+        );
+    };
+
+    const handleStatusChange = (id: string, status: FeedItemStatus, permissions: AnnotationPermission): void => {
+        setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));
+        api.getAnnotationsAPI(false).updateAnnotation(
+            fileId,
+            id,
+            permissions,
+            { status },
+            annotationSuccessCallback,
+            annotationErrorCallback,
+        );
+    };
+
+    return {
+        annotation,
+        error,
+        handleCreateReply,
+        handleDeleteReply,
+        handleEditReply,
+        handleDelete,
+        handleEdit,
+        handleStatusChange,
+        isLoading,
+        replies: denormalizeReplies(replies),
+    };
+};
+
+export default useAnnotationAPI;

package/src/elements/content-sidebar/activity-feed/annotation-thread/useRepliesAPI.js

@@ -0,0 +1,121 @@
+// @flow
+import uniqueId from 'lodash/uniqueId';
+import APIFactory from '../../../../api';
+import commonMessages from '../../../common/messages';
+import { commentsErrors } from './errors';
+
+import type { BoxItemPermission, User } from '../../../../common/types/core';
+import type { BoxCommentPermission, Comment, FeedItemStatus } from '../../../../common/types/feed';
+import type { ElementsXhrError } from '../../../../common/types/api';
+
+type Props = {
+    annotationId: string,
+    api: APIFactory,
+    currentUser: User,
+    fileId: string,
+    filePermissions: BoxItemPermission,
+    handleRemoveReplyItem: (id: string) => void,
+    handleUpdateOrCreateReplyItem: (id: string, updatedValues: Object) => void,
+};
+
+const useRepliesAPI = ({
+    annotationId,
+    api,
+    currentUser,
+    fileId,
+    filePermissions,
+    handleRemoveReplyItem,
+    handleUpdateOrCreateReplyItem,
+}: Props) => {
+    const setReplyPendingStatus = (replyId: string, pendingStatus: boolean) => {
+        handleUpdateOrCreateReplyItem(replyId, { isPending: pendingStatus });
+    };
+
+    const addNewPendingReply = (baseReply: Object) => {
+        const date = new Date().toISOString();
+        const pendingReply: Comment = {
+            created_at: date,
+            created_by: currentUser,
+            modified_at: date,
+            isPending: true,
+            ...baseReply,
+        };
+
+        handleUpdateOrCreateReplyItem(pendingReply.id, pendingReply);
+    };
+
+    const createReplySuccessCallback = (replyId: string, reply: Comment) => {
+        handleUpdateOrCreateReplyItem(replyId, {
+            ...reply,
+            isPending: false,
+        });
+    };
+
+    const createReplyErrorCallback = (error: ElementsXhrError, code: string, replyId: string) => {
+        handleUpdateOrCreateReplyItem(replyId, {
+            error: {
+                title: commonMessages.errorOccured,
+                message: commentsErrors[code] || commentsErrors.default,
+            },
+        });
+    };
+
+    const handleCreateReply = (message: string) => {
+        const uuid = uniqueId('reply_');
+        const replyData = {
+            id: uuid,
+            tagged_message: message,
+            type: 'comment',
+        };
+        addNewPendingReply(replyData);
+
+        const successCallback = (reply: Comment) => createReplySuccessCallback(uuid, reply);
+        const errorCallbackFn = (error, code) => createReplyErrorCallback(error, code, uuid);
+
+        api.getAnnotationsAPI(false).createAnnotationReply(
+            fileId,
+            annotationId,
+            filePermissions,
+            message,
+            successCallback,
+            errorCallbackFn,
+        );
+    };
+
+    const handleDeleteReply = ({ id, permissions }: { id: string, permissions: BoxCommentPermission }) => {
+        setReplyPendingStatus(id, true);
+        const errorCallbackFn = (error, code) => createReplyErrorCallback(error, code, id);
+
+        api.getThreadedCommentsAPI(false).deleteComment({
+            fileId,
+            commentId: id,
+            permissions,
+            successCallback: () => handleRemoveReplyItem(id),
+            errorCallback: errorCallbackFn,
+        });
+    };
+
+    const handleEditReply = (
+        replyId: string,
+        message: string,
+        status?: FeedItemStatus,
+        permissions: BoxCommentPermission,
+    ) => {
+        setReplyPendingStatus(replyId, true);
+
+        const errorCallbackFn = (error, code) => createReplyErrorCallback(error, code, replyId);
+        api.getThreadedCommentsAPI(false).updateComment({
+            fileId,
+            commentId: replyId,
+            message,
+            permissions,
+            successCallback: updatedReply =>
+                handleUpdateOrCreateReplyItem(replyId, { ...updatedReply, isPending: false }),
+            errorCallback: errorCallbackFn,
+        });
+    };
+
+    return { handleDeleteReply, handleEditReply, handleCreateReply };
+};
+
+export default useRepliesAPI;