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

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

@@ -0,0 +1,117 @@
+/**
+ * @flow
+ * @file Annotation Thread Container
+ * @author Box
+ */
+
+import React from 'react';
+import debounce from 'lodash/debounce';
+import classNames from 'classnames';
+import { IntlProvider } from 'react-intl';
+import type EventEmitter from 'events';
+import AnnotationThreadContent from './AnnotationThreadContent';
+import AnnotationThreadCreate from './AnnotationThreadCreate';
+import API from '../../../../api/APIFactory';
+import { DEFAULT_COLLAB_DEBOUNCE, DEFAULT_HOSTNAME_API } from '../../../../constants';
+
+import type APICache from '../../../../utils/Cache';
+import type { BoxItem, SelectorItems, StringMap, Token, User } from '../../../../common/types/core';
+import type { ElementOrigin, ElementsXhrError } from '../../../../common/types/api';
+import type { Annotation, Target } from '../../../../common/types/annotations';
+
+import './AnnotationThread.scss';
+
+type Props = {
+    annotationId?: string,
+    apiHost?: string,
+    cache?: APICache,
+    className: string,
+    clientName: string,
+    currentUser: User,
+    eventEmitter?: EventEmitter,
+    file: BoxItem,
+    handleCancel: () => void,
+    language?: string,
+    messages?: StringMap,
+    onAnnotationCreate: (annotation: Annotation) => void,
+    onError: (error: ElementsXhrError | Error, code: string, contextInfo?: Object, origin?: ElementOrigin) => void,
+    target: Target,
+    token: Token,
+};
+
+const AnnotationThread = ({
+    annotationId,
+    apiHost = DEFAULT_HOSTNAME_API,
+    cache,
+    className = '',
+    clientName,
+    currentUser,
+    file,
+    handleCancel,
+    language,
+    messages,
+    onAnnotationCreate,
+    onError,
+    target,
+    token,
+}: Props) => {
+    const api = new API({
+        apiHost,
+        cache,
+        clientName,
+        language,
+        token,
+    });
+
+    const [mentionSelectorContacts, setMentionSelectorContacts] = React.useState([]);
+
+    const getAvatarUrl = async (userId: string): Promise<?string> =>
+        api.getUsersAPI(false).getAvatarUrlWithAccessToken(userId, file.id);
+
+    const getMentionContactsSuccessCallback = ({ entries }: { entries: SelectorItems<> }): void => {
+        setMentionSelectorContacts(entries);
+    };
+
+    const getMentionWithQuery = debounce(searchStr => {
+        api.getFileCollaboratorsAPI(false).getCollaboratorsWithQuery(
+            file.id,
+            getMentionContactsSuccessCallback,
+            onError,
+            searchStr,
+        );
+    }, DEFAULT_COLLAB_DEBOUNCE);
+
+    return (
+        <div className={classNames('AnnotationThread', className)} data-testid="annotation-thread">
+            <IntlProvider locale={language} messages={messages}>
+                {!annotationId ? (
+                    <AnnotationThreadCreate
+                        api={api}
+                        currentUser={currentUser}
+                        file={file}
+                        getAvatarUrl={getAvatarUrl}
+                        getMentionWithQuery={getMentionWithQuery}
+                        handleCancel={handleCancel}
+                        mentionSelectorContacts={mentionSelectorContacts}
+                        onAnnotationCreate={onAnnotationCreate}
+                        onError={onError}
+                        target={target}
+                    />
+                ) : (
+                    <AnnotationThreadContent
+                        api={api}
+                        annotationId={annotationId}
+                        currentUser={currentUser}
+                        file={file}
+                        getAvatarUrl={getAvatarUrl}
+                        getMentionWithQuery={getMentionWithQuery}
+                        mentionSelectorContacts={mentionSelectorContacts}
+                        onError={onError}
+                    />
+                )}
+            </IntlProvider>
+        </div>
+    );
+};
+
+export default AnnotationThread;

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

@@ -0,0 +1,7 @@
+@import '../../../../styles/variables';
+
+.AnnotationThread {
+    max-width: 340px;
+    max-height: 600px;
+    background-color: $white;
+}

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

@@ -0,0 +1,105 @@
+// @flow
+import React from 'react';
+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 useAnnotationAPI from './useAnnotationAPI';
+
+import type { BoxItem, SelectorItems, User } from '../../../../common/types/core';
+import type { ErrorContextProps } from '../../../../common/types/api';
+import type { BoxCommentPermission, FeedItemStatus } from '../../../../common/types/feed';
+
+import './AnnotationThreadContent.scss';
+
+type Props = {
+    annotationId: string,
+    api: API,
+    currentUser: User,
+    file: BoxItem,
+    getAvatarUrl: string => Promise<?string>,
+    getMentionWithQuery: (searchStr: string) => void,
+    mentionSelectorContacts: SelectorItems<>,
+} & ErrorContextProps;
+
+const AnnotationThreadContent = ({
+    annotationId,
+    api,
+    currentUser,
+    file,
+    getAvatarUrl,
+    getMentionWithQuery,
+    mentionSelectorContacts,
+    onError,
+}: Props) => {
+    const { id: fileId, permissions = {} } = file;
+
+    const {
+        annotation,
+        replies,
+        isLoading,
+        error,
+        handleEdit,
+        handleStatusChange,
+        handleDelete,
+        handleCreateReply,
+        handleDeleteReply,
+        handleEditReply,
+    } = useAnnotationAPI({
+        api,
+        annotationId,
+        currentUser,
+        fileId,
+        filePermissions: permissions,
+        errorCallback: onError,
+    });
+
+    const onReplyEditHandler = (
+        id: string,
+        text: string,
+        status?: FeedItemStatus,
+        hasMention?: boolean,
+        replyPermissions: BoxCommentPermission,
+    ) => {
+        handleEditReply(id, text, status, replyPermissions);
+    };
+
+    return (
+        <ActivityThread
+            hasReplies
+            getAvatarUrl={getAvatarUrl}
+            getMentionWithQuery={getMentionWithQuery}
+            isAlwaysExpanded
+            isRepliesLoading={isLoading}
+            mentionSelectorContacts={mentionSelectorContacts}
+            onReplyCreate={handleCreateReply}
+            onReplyDelete={handleDeleteReply}
+            onReplyEdit={onReplyEditHandler}
+            replies={replies}
+            repliesTotalCount={replies.length}
+        >
+            {error && <ActivityError {...error} />}
+            {isLoading && (
+                <div className="AnnotationThreadContent-loading" data-testid="annotation-loading">
+                    <LoadingIndicator />
+                </div>
+            )}
+            {annotation && (
+                <AnnotationActivity
+                    getAvatarUrl={getAvatarUrl}
+                    currentUser={currentUser}
+                    isCurrentVersion
+                    item={annotation}
+                    getMentionWithQuery={getMentionWithQuery}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                    onEdit={handleEdit}
+                    onDelete={handleDelete}
+                    onStatusChange={handleStatusChange}
+                />
+            )}
+        </ActivityThread>
+    );
+};
+
+export default AnnotationThreadContent;

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

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

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

@@ -0,0 +1,86 @@
+// @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 './AnnotationThreadCreate.scss';
+
+type Props = {
+    api: API,
+    currentUser: User,
+    file: BoxItem,
+    getAvatarUrl: string => Promise<?string>,
+    getMentionWithQuery: (searchStr: string) => void,
+    handleCancel: () => void,
+    mentionSelectorContacts: SelectorItems<>,
+    onAnnotationCreate: (annotation: Annotation) => void,
+    target: Target,
+} & ErrorContextProps;
+
+const AnnotationThreadCreate = ({
+    api,
+    currentUser,
+    getAvatarUrl,
+    getMentionWithQuery,
+    file,
+    handleCancel,
+    mentionSelectorContacts,
+    onAnnotationCreate,
+    onError,
+    target,
+}: 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,
+        );
+    };
+
+    return (
+        <div
+            data-testid="annotation-create"
+            className={classNames('AnnotationThreadCreate', { 'is-pending': isPending })}
+        >
+            <CommentForm
+                className="AnnotationThreadCreate-editor"
+                user={currentUser}
+                entityId={file.id}
+                onSubmit={handleCreate}
+                getMentionWithQuery={getMentionWithQuery}
+                mentionSelectorContacts={mentionSelectorContacts}
+                getAvatarUrl={getAvatarUrl}
+                isOpen
+                onCancel={handleCancel}
+            />
+        </div>
+    );
+};
+
+export default AnnotationThreadCreate;

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

@@ -0,0 +1,3 @@
+.AnnotationThreadCreate.is-pending {
+    opacity: .4;
+}

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

@@ -0,0 +1,28 @@
+// @flow
+import { render } from '@testing-library/react';
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import AnnotationThread from '../AnnotationThread';
+
+jest.mock('react-intl', () => jest.requireActual('react-intl'));
+jest.mock('../AnnotationThreadContent', () => () => <div data-testid="annotation-content" />);
+jest.mock('../AnnotationThreadCreate', () => () => <div data-testid="annotation-create" />);
+
+describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThread', () => {
+    const IntlWrapper = ({ children }: { children?: React.ReactNode }) => {
+        return <IntlProvider locale="en">{children}</IntlProvider>;
+    };
+    const getWrapper = props => render(<AnnotationThread {...props} />, { wrapper: IntlWrapper });
+
+    test('should render AnnotationThreadCreate if annotationId is undefined', async () => {
+        const { queryByTestId } = getWrapper();
+        expect(queryByTestId('annotation-create')).toBeInTheDocument();
+        expect(queryByTestId('annotation-content')).toBeNull();
+    });
+
+    test('should render AnnotationThreadContent if annotationId is defined', () => {
+        const { queryByTestId } = getWrapper({ annotationId: '1' });
+        expect(queryByTestId('annotation-content')).toBeInTheDocument();
+        expect(queryByTestId('annotation-create')).toBeNull();
+    });
+});

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

@@ -0,0 +1,89 @@
+// @flow
+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 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('../useAnnotationAPI', () => {
+    return jest.fn(() => ({
+        annotation: mockedAnnotation,
+        error: mockedError,
+        isLoading: mockedIsLoading,
+        handleDelete: jest.fn(),
+        handleEdit: jest.fn(),
+        handleResolve: jest.fn(),
+        replies: [],
+        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(),
+            }),
+        },
+        file: {
+            id: 'fileId',
+            permissions: {
+                can_view_annotations: true,
+                can_annotate: true,
+            },
+        },
+        getAvatarUrl: mockGetAvatarUrl,
+    };
+
+    const IntlWrapper = ({ children }: { children?: React.ReactNode }) => {
+        return <IntlProvider locale="en">{children}</IntlProvider>;
+    };
+    const getWrapper = () => render(<AnnotationThreadContent {...defaultProps} />, { wrapper: IntlWrapper });
+
+    test('Should render properly', () => {
+        const { getByText, queryByTestId } = getWrapper();
+        expect(getByText(mockedAnnotation.description.message)).toBeInTheDocument();
+        expect(getByText(mockedAnnotation.created_by.name)).toBeInTheDocument();
+        expect(queryByTestId('annotation-loading')).not.toBeInTheDocument();
+    });
+
+    test('Should call getAvatarUrl with creator id', async () => {
+        getWrapper();
+        expect(mockGetAvatarUrl).toBeCalledWith(user.id);
+    });
+
+    test('Should render loading state properly', () => {
+        mockedAnnotation = undefined;
+        mockedIsLoading = true;
+
+        const { getByTestId } = getWrapper();
+
+        expect(getByTestId('annotation-loading')).toBeInTheDocument();
+    });
+
+    test('Should render error state properly', () => {
+        mockedError = {
+            title: commonMessages.errorOccured,
+            message: messages.errorFetchAnnotation,
+        };
+        mockedAnnotation = undefined;
+        mockedIsLoading = false;
+
+        const { queryByText, getByText } = getWrapper();
+        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

@@ -0,0 +1,103 @@
+// @flow
+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 => {
+    return (
+        <div>
+            {props.isOpen && (
+                <div>
+                    <button type="button" onClick={props.onCancel}>
+                        Cancel
+                    </button>
+                    <button type="button" onClick={() => props.onSubmit('example message')}>
+                        Post
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+});
+
+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,
+        },
+    });
+
+    const IntlWrapper = ({ children }: { children?: React.ReactNode }) => {
+        return <IntlProvider locale="en">{children}</IntlProvider>;
+    };
+    const getWrapper = () => render(<AnnotationThreadCreate {...getDefaultProps()} />, { wrapper: IntlWrapper });
+
+    test('Should render correctly', () => {
+        const { container, getByText } = getWrapper();
+
+        expect(getByText('Cancel')).toBeInTheDocument();
+        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();
+
+        fireEvent.click(getByText('Post'));
+
+        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,
+        );
+
+        expect(getByTestId('annotation-create')).toHaveClass('is-pending');
+    });
+
+    test('Should call handleCancel on cancel', () => {
+        const { getByText } = getWrapper();
+
+        fireEvent.click(getByText('Cancel'));
+
+        expect(mockHandleCancel).toBeCalled();
+    });
+});