box-ui-elements 16.1.0-beta.9 → 17.0.0

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

@@ -1,73 +1,68 @@
 // @flow
 import React from 'react';
-import type EventEmitter from 'events';
-import useAnnotationThread from './useAnnotationThread';
 import ActivityError from '../common/activity-error';
 import ActivityThread from '../activity-feed/ActivityThread';
 import AnnotationActivity from '../annotations';
-import API from '../../../../api/APIFactory';
 import LoadingIndicator from '../../../../components/loading-indicator/LoadingIndicator';
 
-import type { BoxItem, SelectorItems, User } from '../../../../common/types/core';
-import type { ErrorContextProps } from '../../../../common/types/api';
+import type {
+    Annotation,
+    AnnotationPermission,
+    BoxCommentPermission,
+    Comment,
+    FeedItemStatus,
+} from '../../../../common/types/feed';
+import type { SelectorItems, User } from '../../../../common/types/core';
+import type { GetProfileUrlCallback } from '../../../common/flowTypes';
+import type { AnnotationThreadError } from './types';
 
 import './AnnotationThreadContent.scss';
 
 type Props = {
-    annotationId: string,
-    api: API,
+    annotation?: Annotation,
     currentUser: User,
-    eventEmitter: EventEmitter,
-    file: BoxItem,
+    error?: AnnotationThreadError,
     getAvatarUrl: string => Promise<?string>,
     getMentionWithQuery: (searchStr: string) => void,
+    getUserProfileUrl?: GetProfileUrlCallback,
+    isLoading: boolean,
     mentionSelectorContacts: SelectorItems<>,
-} & ErrorContextProps;
+    onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => any,
+    onAnnotationEdit?: (id: string, text: string, permissions: AnnotationPermission) => void,
+    onAnnotationStatusChange?: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
+    onReplyCreate?: (text: string) => void,
+    onReplyDelete?: ({ id: string, permissions: BoxCommentPermission }) => void,
+    onReplyEdit?: (
+        id: string,
+        text: string,
+        status?: FeedItemStatus,
+        hasMention?: boolean,
+        permissions: BoxCommentPermission,
+        onSuccess: ?Function,
+        onError: ?Function,
+    ) => void,
+    replies?: Array<Comment>,
+};
 
 const AnnotationThreadContent = ({
-    annotationId,
-    api,
+    annotation,
     currentUser,
-    eventEmitter,
-    file,
+    error,
     getAvatarUrl,
     getMentionWithQuery,
+    getUserProfileUrl,
+    isLoading,
     mentionSelectorContacts,
-    onError,
+    onAnnotationDelete,
+    onAnnotationEdit,
+    onAnnotationStatusChange,
+    onReplyCreate,
+    onReplyDelete,
+    onReplyEdit,
+    replies = [],
 }: Props) => {
-    const { id: fileId, permissions = {} } = file;
-
-    const {
-        annotation,
-        replies,
-        isLoading,
-        error,
-        annotationActions: { handleAnnotationStatusChange, handleAnnotationDelete, handleAnnotationEdit },
-        repliesActions: { handleReplyEdit, handleReplyCreate, handleReplyDelete },
-    } = useAnnotationThread({
-        api,
-        annotationId,
-        currentUser,
-        eventEmitter,
-        fileId,
-        filePermissions: permissions,
-        errorCallback: onError,
-    });
-
     return (
-        <ActivityThread
-            hasReplies
-            getAvatarUrl={getAvatarUrl}
-            getMentionWithQuery={getMentionWithQuery}
-            isAlwaysExpanded
-            isRepliesLoading={isLoading}
-            mentionSelectorContacts={mentionSelectorContacts}
-            onReplyCreate={handleReplyCreate}
-            onReplyDelete={handleReplyDelete}
-            onReplyEdit={handleReplyEdit}
-            replies={replies}
-            repliesTotalCount={replies.length}
-        >
+        <>
             {error && <ActivityError {...error} />}
             {isLoading && (
                 <div className="AnnotationThreadContent-loading" data-testid="annotation-loading">
@@ -75,19 +70,35 @@ const AnnotationThreadContent = ({
                 </div>
             )}
             {annotation && (
-                <AnnotationActivity
+                <ActivityThread
                     getAvatarUrl={getAvatarUrl}
-                    currentUser={currentUser}
-                    isCurrentVersion
-                    item={annotation}
                     getMentionWithQuery={getMentionWithQuery}
+                    getUserProfileUrl={getUserProfileUrl}
+                    hasReplies
+                    isAlwaysExpanded
+                    isRepliesLoading={isLoading}
                     mentionSelectorContacts={mentionSelectorContacts}
-                    onEdit={handleAnnotationEdit}
-                    onDelete={handleAnnotationDelete}
-                    onStatusChange={handleAnnotationStatusChange}
-                />
+                    onReplyCreate={onReplyCreate}
+                    onReplyDelete={onReplyDelete}
+                    onReplyEdit={onReplyEdit}
+                    replies={replies}
+                    repliesTotalCount={replies.length}
+                >
+                    <AnnotationActivity
+                        currentUser={currentUser}
+                        getAvatarUrl={getAvatarUrl}
+                        getMentionWithQuery={getMentionWithQuery}
+                        getUserProfileUrl={getUserProfileUrl}
+                        isCurrentVersion
+                        item={annotation}
+                        mentionSelectorContacts={mentionSelectorContacts}
+                        onDelete={onAnnotationDelete}
+                        onEdit={onAnnotationEdit}
+                        onStatusChange={onAnnotationStatusChange}
+                    />
+                </ActivityThread>
             )}
-        </ActivityThread>
+        </>
     );
 };
 

package/src/elements/content-sidebar/activity-feed/annotation-thread/AnnotationThreadContent.scss

@@ -1,4 +1,4 @@
-@import '../../../common/variables';
+@import '../../../../styles/variables';
 
 .AnnotationThreadContent-loading {
     padding: $bdl-grid-unit * 5 0;

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

@@ -1,83 +1,48 @@
 // @flow
 import React from 'react';
 import classNames from 'classnames';
-import API from '../../../../api/APIFactory';
 import CommentForm from '../comment-form';
-import { getBadUserError } from '../../../../utils/error';
-
-import type { Annotation, Target } from '../../../../common/types/annotations';
-import type { BoxItem, SelectorItems, User } from '../../../../common/types/core';
-import type { ErrorContextProps } from '../../../../common/types/api';
+import type { SelectorItems, User } from '../../../../common/types/core';
 
 import './AnnotationThreadCreate.scss';
 
 type Props = {
-    api: API,
     currentUser: User,
-    file: BoxItem,
     getAvatarUrl: string => Promise<?string>,
     getMentionWithQuery: (searchStr: string) => void,
-    handleCancel: () => void,
+    isPending: boolean,
     mentionSelectorContacts: SelectorItems<>,
-    onAnnotationCreate: (annotation: Annotation) => void,
-    target: Target,
-} & ErrorContextProps;
+    onFormCancel: () => void,
+    onFormSubmit: (text: string) => void,
+};
 
 const AnnotationThreadCreate = ({
-    api,
     currentUser,
     getAvatarUrl,
     getMentionWithQuery,
-    file,
-    handleCancel,
+    isPending,
     mentionSelectorContacts,
-    onAnnotationCreate,
-    onError,
-    target,
+    onFormCancel,
+    onFormSubmit,
 }: Props) => {
-    const [isPending, setIsPending] = React.useState(false);
-
-    const handleCreate = (text: string): void => {
-        const { id, permissions = {}, file_version = {} } = file;
-        setIsPending(true);
-        if (!currentUser) {
-            throw getBadUserError();
-        }
-
-        const successCallback = (annotation: Annotation) => {
-            onAnnotationCreate(annotation);
-        };
-
-        const payload = {
-            description: { message: text },
-            target,
-        };
-
-        api.getAnnotationsAPI(false).createAnnotation(
-            id,
-            file_version.id,
-            payload,
-            permissions,
-            successCallback,
-            onError,
-        );
+    const handleSubmit = ({ text }) => {
+        onFormSubmit(text);
     };
 
     return (
         <div
-            data-testid="annotation-create"
             className={classNames('AnnotationThreadCreate', { 'is-pending': isPending })}
+            data-testid="annotation-create"
         >
             <CommentForm
                 className="AnnotationThreadCreate-editor"
-                user={currentUser}
-                entityId={file.id}
-                onSubmit={handleCreate}
-                getMentionWithQuery={getMentionWithQuery}
-                mentionSelectorContacts={mentionSelectorContacts}
+                createComment={handleSubmit}
                 getAvatarUrl={getAvatarUrl}
+                getMentionWithQuery={getMentionWithQuery}
                 isOpen
-                onCancel={handleCancel}
+                mentionSelectorContacts={mentionSelectorContacts}
+                onCancel={onFormCancel}
+                user={currentUser}
             />
         </div>
     );

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

@@ -0,0 +1,19 @@
+import { annotation as mockAnnotation } from '../../../../../__mocks__/annotations';
+
+export default () => ({
+    annotation: mockAnnotation,
+    annotationActions: {
+        handleCreate: jest.fn(),
+        handleDelete: jest.fn(),
+        handleEdit: jest.fn(),
+        handleResolve: jest.fn(),
+    },
+    error: {},
+    isLoading: false,
+    replies: [],
+    repliesActions: {
+        handleCreateReply: jest.fn(),
+        handleEditReply: jest.fn(),
+        handleDeleteReply: jest.fn(),
+    },
+});

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

@@ -8,11 +8,22 @@ jest.mock('react-intl', () => jest.requireActual('react-intl'));
 jest.mock('../AnnotationThreadContent', () => () => <div data-testid="annotation-content" />);
 jest.mock('../AnnotationThreadCreate', () => () => <div data-testid="annotation-create" />);
 
+jest.mock('../useAnnotationThread');
+
 describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThread', () => {
+    const file = {
+        id: 'fileId',
+        file_version: { id: '123' },
+        permissions: {
+            can_view_annotations: true,
+            can_annotate: true,
+        },
+    };
+
     const IntlWrapper = ({ children }: { children?: React.ReactNode }) => {
         return <IntlProvider locale="en">{children}</IntlProvider>;
     };
-    const getWrapper = props => render(<AnnotationThread {...props} />, { wrapper: IntlWrapper });
+    const getWrapper = props => render(<AnnotationThread file={file} {...props} />, { wrapper: IntlWrapper });
 
     test('should render AnnotationThreadCreate if annotationId is undefined', async () => {
         const { queryByTestId } = getWrapper();

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

@@ -3,91 +3,57 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import AnnotationThreadContent from '../AnnotationThreadContent';
-import { annotation, user } from '../../../../../__mocks__/annotations';
+import { annotation as mockAnnotation, user } from '../../../../../__mocks__/annotations';
 
 import commonMessages from '../../../../common/messages';
 import messages from '../messages';
 
-let mockedAnnotation = annotation;
-let mockedError;
-let mockedIsLoading = false;
-
 jest.mock('react-intl', () => jest.requireActual('react-intl'));
-jest.mock('../useAnnotationThread', () => {
-    return jest.fn(() => ({
-        annotation: mockedAnnotation,
-        annotationActions: {
-            handleDelete: jest.fn(),
-            handleEdit: jest.fn(),
-            handleResolve: jest.fn(),
-        },
-        error: mockedError,
-        isLoading: mockedIsLoading,
-        replies: [],
-        repliesActions: {
-            handleCreateReply: jest.fn(),
-            handleEditReply: jest.fn(),
-            handleDeleteReply: jest.fn(),
-        },
-    }));
-});
 
 describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThreadContent', () => {
-    const mockGetAvatarUrl = jest.fn(() => Promise.resolve());
-
     const defaultProps = {
-        annotationId: mockedAnnotation.id,
-        api: {
-            getAnnotationApi: () => ({
-                getAnnotation: jest.fn(),
-            }),
-        },
-        eventEmitter: {},
-        file: {
-            id: 'fileId',
-            permissions: {
-                can_view_annotations: true,
-                can_annotate: true,
-            },
-        },
-        getAvatarUrl: mockGetAvatarUrl,
+        annotation: mockAnnotation,
+        isLoading: false,
+        replies: [],
     };
 
     const IntlWrapper = ({ children }: { children?: React.ReactNode }) => {
         return <IntlProvider locale="en">{children}</IntlProvider>;
     };
-    const getWrapper = () => render(<AnnotationThreadContent {...defaultProps} />, { wrapper: IntlWrapper });
+    const getWrapper = props =>
+        render(<AnnotationThreadContent {...defaultProps} {...props} />, { wrapper: IntlWrapper });
 
     test('Should render properly', () => {
         const { getByText, queryByTestId } = getWrapper();
-        expect(getByText(mockedAnnotation.description.message)).toBeInTheDocument();
-        expect(getByText(mockedAnnotation.created_by.name)).toBeInTheDocument();
+        expect(getByText(mockAnnotation.description.message)).toBeInTheDocument();
+        expect(getByText(mockAnnotation.created_by.name)).toBeInTheDocument();
         expect(queryByTestId('annotation-loading')).not.toBeInTheDocument();
     });
 
     test('Should call getAvatarUrl with creator id', async () => {
-        getWrapper();
-        expect(mockGetAvatarUrl).toBeCalledWith(user.id);
+        const getAvatarUrl = jest.fn(() => Promise.resolve());
+
+        getWrapper({ getAvatarUrl });
+        expect(getAvatarUrl).toBeCalledWith(user.id);
     });
 
     test('Should render loading state properly', () => {
-        mockedAnnotation = undefined;
-        mockedIsLoading = true;
+        const annotation = undefined;
+        const isLoading = true;
 
-        const { getByTestId } = getWrapper();
+        const { getByTestId } = getWrapper({ annotation, isLoading });
 
         expect(getByTestId('annotation-loading')).toBeInTheDocument();
     });
 
     test('Should render error state properly', () => {
-        mockedError = {
+        const annotation = undefined;
+        const error = {
             title: commonMessages.errorOccured,
             message: messages.errorFetchAnnotation,
         };
-        mockedAnnotation = undefined;
-        mockedIsLoading = false;
 
-        const { queryByText, getByText } = getWrapper();
+        const { queryByText, getByText } = getWrapper({ annotation, error });
         expect(getByText(commonMessages.errorOccured.defaultMessage)).toBeInTheDocument();
         expect(queryByText(messages.errorFetchAnnotation.defaultMessage)).toBeInTheDocument();
     });

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

@@ -3,7 +3,6 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import AnnotationThreadCreate from '../AnnotationThreadCreate';
-import { annotation } from '../../../../../__mocks__/annotations';
 
 jest.mock('react-intl', () => jest.requireActual('react-intl'));
 jest.mock('../../comment-form', () => props => {
@@ -14,7 +13,7 @@ jest.mock('../../comment-form', () => props => {
                     <button type="button" onClick={props.onCancel}>
                         Cancel
                     </button>
-                    <button type="button" onClick={() => props.onSubmit('example message')}>
+                    <button type="button" onClick={() => props.createComment({ text: 'example message' })}>
                         Post
                     </button>
                 </div>
@@ -24,38 +23,19 @@ jest.mock('../../comment-form', () => props => {
 });
 
 describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThreadCreate', () => {
-    const mockHandleCancel = jest.fn();
-    const mockOnAnnotationCreate = jest.fn();
-    const mockOnError = jest.fn();
-    let mockCreateAnnotation = jest.fn();
-
     const getDefaultProps = () => ({
-        api: {
-            getAnnotationsAPI: () => ({
-                createAnnotation: mockCreateAnnotation,
-            }),
-        },
         currentUser: { id: 'user_id' },
-        file: {
-            id: 'file_id',
-            file_version: { id: 'file_version' },
-            permissions: { can_annotate: true },
-        },
-        handleCancel: mockHandleCancel,
-        onAnnotationCreate: mockOnAnnotationCreate,
-        onError: mockOnError,
-        target: {
-            location: { type: 'page', value: 1 },
-            type: 'point',
-            x: 12,
-            y: 10,
-        },
+        onFormCancel: jest.fn(),
+        onFormSubmit: jest.fn(),
     });
 
     const IntlWrapper = ({ children }: { children?: React.ReactNode }) => {
         return <IntlProvider locale="en">{children}</IntlProvider>;
     };
-    const getWrapper = () => render(<AnnotationThreadCreate {...getDefaultProps()} />, { wrapper: IntlWrapper });
+    const getWrapper = props =>
+        render(<AnnotationThreadCreate {...getDefaultProps()} {...props} />, {
+            wrapper: IntlWrapper,
+        });
 
     test('Should render correctly', () => {
         const { container, getByText } = getWrapper();
@@ -64,40 +44,29 @@ describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThr
         expect(container.getElementsByClassName('AnnotationThreadCreate-is-pending')).toHaveLength(0);
     });
 
-    test('Should handle create', () => {
-        mockCreateAnnotation = jest.fn((fileId, fileVersionId, payload, filePermissions, successCallback) => {
-            successCallback(annotation);
-        });
-        const { getByText, getByTestId } = getWrapper();
+    test('Should render correctly with pending state', () => {
+        const { getByTestId } = getWrapper({ isPending: true });
 
-        fireEvent.click(getByText('Post'));
+        expect(getByTestId('annotation-create')).toHaveClass('is-pending');
+    });
 
-        expect(mockOnAnnotationCreate).toBeCalledWith(annotation);
-        expect(mockCreateAnnotation).toBeCalledWith(
-            'file_id',
-            'file_version',
-            {
-                description: { message: 'example message' },
-                target: {
-                    location: { type: 'page', value: 1 },
-                    type: 'point',
-                    x: 12,
-                    y: 10,
-                },
-            },
-            { can_annotate: true },
-            expect.any(Function),
-            mockOnError,
-        );
+    test('Should call onFormSubmit on create', () => {
+        const onFormSubmit = jest.fn();
 
-        expect(getByTestId('annotation-create')).toHaveClass('is-pending');
+        const { getByText } = getWrapper({ onFormSubmit });
+
+        fireEvent.click(getByText('Post'));
+
+        expect(onFormSubmit).toBeCalledWith('example message');
     });
 
-    test('Should call handleCancel on cancel', () => {
-        const { getByText } = getWrapper();
+    test('Should call onFormCancel on cancel', () => {
+        const onFormCancel = jest.fn();
+
+        const { getByText } = getWrapper({ onFormCancel });
 
         fireEvent.click(getByText('Cancel'));
 
-        expect(mockHandleCancel).toBeCalled();
+        expect(onFormCancel).toBeCalled();
     });
 });

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

@@ -6,12 +6,14 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotattionAPI', () => {
     const annotation = annotations[0];
 
     const getApi = ({
+        createAnnotation = jest.fn(),
         getAnnotation = jest.fn(),
         updateAnnotation = jest.fn(),
         deleteAnnotation = jest.fn(),
         createAnnotationReply = jest.fn,
     }) => {
         const getAnnotationsAPI = () => ({
+            createAnnotation,
             createAnnotationReply,
             getAnnotation,
             updateAnnotation,
@@ -30,14 +32,49 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotattionAPI', () => {
         renderHook(() =>
             useAnnotationAPI({
                 api: getApi({}),
-                fileId: 'fileId',
-                filePermissions,
+                file: {
+                    id: 'fileId',
+                    file_version: { id: '123' },
+                    permissions: filePermissions,
+                },
                 annotationId: annotation.id,
                 errorCallback,
                 ...props,
             }),
         );
 
+    test('should call api function on handleCreate with correct arguments', () => {
+        const mockSuccessCallback = jest.fn();
+        const mockErrorCallback = jest.fn();
+        const mockCreateAnnotation = jest.fn();
+        const api = getApi({ createAnnotation: mockCreateAnnotation });
+        const mockFile = {
+            id: 'fileId',
+            file_version: { id: '123' },
+            permissions: { can_annotate: true, can_view_annotations: true },
+        };
+
+        const { result } = getHook({ api, file: mockFile, errorCallback: mockErrorCallback });
+
+        const mockPayload = {
+            description: { message: 'foo' },
+            target: {},
+        };
+
+        act(() => {
+            result.current.handleCreate({ payload: mockPayload, successCallback: mockSuccessCallback });
+        });
+
+        expect(mockCreateAnnotation).toBeCalledWith(
+            mockFile.id,
+            mockFile.file_version.id,
+            mockPayload,
+            mockFile.permissions,
+            mockSuccessCallback,
+            mockErrorCallback,
+        );
+    });
+
     test('should call api function on handleFetch with correct arguments', () => {
         const mockSuccessCallback = jest.fn();
         const mockGetAnnotation = jest.fn();
@@ -46,7 +83,7 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotattionAPI', () => {
         const { result } = getHook({ api });
 
         act(() => {
-            result.current.handleFetch({ annotationId: annotation.id, successCallback: mockSuccessCallback });
+            result.current.handleFetch({ id: annotation.id, successCallback: mockSuccessCallback });
         });
 
         expect(mockGetAnnotation).toBeCalledWith(