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

package/src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.js

@@ -17,10 +17,18 @@ import messages from './messages';
 import { collapseFeedState, ItemTypes } from './activityFeedUtils';
 import { PERMISSION_CAN_CREATE_ANNOTATIONS } from '../../../../constants';
 import { scrollIntoView } from '../../../../utils/dom';
-import type { Annotation, AnnotationPermission, FocusableFeedItemType, FeedItems } from '../../../../common/types/feed';
+import type {
+    Annotation,
+    AnnotationPermission,
+    BoxCommentPermission,
+    CommentFeedItemType,
+    FocusableFeedItemType,
+    FeedItems,
+    FeedItemStatus,
+} from '../../../../common/types/feed';
 import type { SelectorItems, User, GroupMini, BoxItem } from '../../../../common/types/core';
-import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
-import type { Translations, Errors } from '../../flowTypes';
+import type { Errors, GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
+import type { Translations } from '../../flowTypes';
 import './ActivityFeed.scss';
 
 type Props = {
@@ -36,15 +44,36 @@ type Props = {
     getAvatarUrl: GetAvatarUrlCallback,
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
+    hasReplies?: boolean,
     isDisabled?: boolean,
     mentionSelectorContacts?: SelectorItems<User>,
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
     onAnnotationEdit?: (id: string, text: string, permissions: AnnotationPermission) => void,
     onAnnotationSelect?: (annotation: Annotation) => void,
+    onAnnotationStatusChange?: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
     onAppActivityDelete?: Function,
     onCommentCreate?: Function,
     onCommentDelete?: Function,
-    onCommentUpdate?: Function,
+    onCommentUpdate?: (
+        id: string,
+        text?: string,
+        status?: FeedItemStatus,
+        hasMention: boolean,
+        permissions: BoxCommentPermission,
+        onSuccess: ?Function,
+        onError: ?Function,
+    ) => void,
+    onReplyCreate?: (parentId: string, parentType: CommentFeedItemType, text: string) => void,
+    onReplyDelete?: ({ id: string, parentId: string, permissions: BoxCommentPermission }) => void,
+    onReplyUpdate?: (
+        id: string,
+        parentId: string,
+        text: string,
+        permissions: BoxCommentPermission,
+        onSuccess: ?Function,
+        onError: ?Function,
+    ) => void,
+    onShowReplies?: (id: string, type: CommentFeedItemType) => void,
     onTaskAssignmentUpdate?: Function,
     onTaskCreate?: Function,
     onTaskDelete?: Function,
@@ -206,16 +235,22 @@ class ActivityFeed extends React.Component<Props, State> {
             getAvatarUrl,
             getMentionWithQuery,
             getUserProfileUrl,
+            hasReplies,
             isDisabled,
             mentionSelectorContacts,
             contactsLoaded,
             onAnnotationDelete,
             onAnnotationEdit,
             onAnnotationSelect,
+            onAnnotationStatusChange,
             onAppActivityDelete,
             onCommentCreate,
             onCommentDelete,
             onCommentUpdate,
+            onReplyCreate,
+            onReplyDelete,
+            onReplyUpdate,
+            onShowReplies,
             onTaskAssignmentUpdate,
             onTaskDelete,
             onTaskModalClose,
@@ -273,32 +308,38 @@ class ActivityFeed extends React.Component<Props, State> {
                     {!isEmpty && !isLoading && (
                         <ActiveState
                             {...activityFeedError}
-                            items={collapseFeedState(feedItems)}
-                            isDisabled={isDisabled}
-                            currentUser={currentUser}
+                            activeFeedEntryId={activeFeedEntryId}
+                            activeFeedEntryType={activeFeedEntryType}
+                            activeFeedItemRef={this.activeFeedItemRef}
+                            approverSelectorContacts={approverSelectorContacts}
                             currentFileVersionId={currentFileVersionId}
-                            onTaskAssignmentUpdate={onTaskAssignmentUpdate}
+                            currentUser={currentUser}
+                            getApproverWithQuery={getApproverWithQuery}
+                            getAvatarUrl={getAvatarUrl}
+                            getMentionWithQuery={getMentionWithQuery}
+                            getUserProfileUrl={getUserProfileUrl}
+                            hasReplies={hasReplies}
+                            isDisabled={isDisabled}
+                            items={collapseFeedState(feedItems)}
+                            mentionSelectorContacts={mentionSelectorContacts}
                             onAnnotationDelete={onAnnotationDelete}
                             onAnnotationEdit={onAnnotationEdit}
                             onAnnotationSelect={onAnnotationSelect}
+                            onAnnotationStatusChange={onAnnotationStatusChange}
                             onAppActivityDelete={onAppActivityDelete}
                             onCommentDelete={hasCommentPermission ? onCommentDelete : noop}
                             onCommentEdit={hasCommentPermission ? onCommentUpdate : noop}
+                            onReplyCreate={hasCommentPermission ? onReplyCreate : noop}
+                            onReplyDelete={hasCommentPermission ? onReplyDelete : noop}
+                            onReplyUpdate={hasCommentPermission ? onReplyUpdate : noop}
+                            onShowReplies={onShowReplies}
+                            onTaskAssignmentUpdate={onTaskAssignmentUpdate}
                             onTaskDelete={onTaskDelete}
                             onTaskEdit={onTaskUpdate}
-                            onTaskView={onTaskView}
                             onTaskModalClose={onTaskModalClose}
+                            onTaskView={onTaskView}
                             onVersionInfo={onVersionHistoryClick ? this.openVersionHistoryPopup : null}
                             translations={translations}
-                            getAvatarUrl={getAvatarUrl}
-                            getUserProfileUrl={getUserProfileUrl}
-                            mentionSelectorContacts={mentionSelectorContacts}
-                            getMentionWithQuery={getMentionWithQuery}
-                            approverSelectorContacts={approverSelectorContacts}
-                            getApproverWithQuery={getApproverWithQuery}
-                            activeFeedEntryId={activeFeedEntryId}
-                            activeFeedEntryType={activeFeedEntryType}
-                            activeFeedItemRef={this.activeFeedItemRef}
                         />
                     )}
                     {isInlineFeedItemErrorVisible && inlineFeedItemErrorMessage && (

package/src/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.js

@@ -0,0 +1,126 @@
+// @flow
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import noop from 'lodash/noop';
+
+import LoadingIndicator from '../../../../components/loading-indicator';
+import PlainButton from '../../../../components/plain-button';
+import ActivityThreadReplies from './ActivityThreadReplies';
+import ActivityThreadReplyForm from './ActivityThreadReplyForm';
+
+import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
+import type { Translations } from '../../flowTypes';
+import type { SelectorItems, User } from '../../../../common/types/core';
+import type { BoxCommentPermission, Comment as CommentType, FeedItemStatus } from '../../../../common/types/feed';
+
+import messages from './messages';
+
+import './ActivityThread.scss';
+
+type Props = {
+    children: React.Node,
+    currentUser?: User,
+    getAvatarUrl: GetAvatarUrlCallback,
+    getMentionWithQuery?: Function,
+    getUserProfileUrl?: GetProfileUrlCallback,
+    hasReplies: boolean,
+    isAlwaysExpanded?: boolean,
+    isRepliesLoading?: boolean,
+    mentionSelectorContacts?: SelectorItems<>,
+    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,
+    onShowReplies?: () => void,
+    replies?: Array<CommentType>,
+    repliesTotalCount?: number,
+    translations?: Translations,
+};
+
+const ActivityThread = ({
+    children,
+    currentUser,
+    getAvatarUrl,
+    getMentionWithQuery,
+    getUserProfileUrl,
+    hasReplies,
+    isAlwaysExpanded = false,
+    isRepliesLoading,
+    mentionSelectorContacts,
+    onReplyCreate,
+    onReplyDelete = noop,
+    onReplyEdit = noop,
+    onShowReplies = noop,
+    replies = [],
+    repliesTotalCount = 0,
+    translations,
+}: Props) => {
+    const [isExpanded, setIsExpanded] = React.useState(isAlwaysExpanded);
+
+    const toggleButtonLabel = isExpanded ? messages.hideReplies : messages.showReplies;
+    const repliesToLoadCount = Math.max(repliesTotalCount - 1, 0);
+
+    const toggleReplies = () => {
+        if (!isExpanded) {
+            onShowReplies();
+        }
+        setIsExpanded(previousState => !previousState);
+    };
+
+    if (!hasReplies) {
+        return children;
+    }
+    return (
+        <div className="bcs-ActivityThread" data-testid="activity-thread">
+            {children}
+
+            {isRepliesLoading && (
+                <div className="bcs-ActivityThread-loading" data-testid="activity-thread-loading">
+                    <LoadingIndicator />
+                </div>
+            )}
+            {!isAlwaysExpanded && !isRepliesLoading && repliesTotalCount > 1 && (
+                <PlainButton
+                    className="bcs-ActivityThread-toggle"
+                    onClick={toggleReplies}
+                    type="button"
+                    data-testid="activity-thread-button"
+                >
+                    <FormattedMessage values={{ repliesToLoadCount }} {...toggleButtonLabel} />
+                </PlainButton>
+            )}
+
+            {!isRepliesLoading && repliesTotalCount > 0 && replies.length > 0 && (
+                <ActivityThreadReplies
+                    currentUser={currentUser}
+                    getAvatarUrl={getAvatarUrl}
+                    getMentionWithQuery={getMentionWithQuery}
+                    getUserProfileUrl={getUserProfileUrl}
+                    isExpanded={isExpanded}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                    onDelete={onReplyDelete}
+                    onEdit={onReplyEdit}
+                    replies={replies}
+                    translations={translations}
+                />
+            )}
+
+            {onReplyCreate ? (
+                <ActivityThreadReplyForm
+                    getMentionWithQuery={getMentionWithQuery}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                    onReplyCreate={onReplyCreate}
+                />
+            ) : null}
+        </div>
+    );
+};
+
+export default ActivityThread;

package/src/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.scss

@@ -0,0 +1,17 @@
+@import '../../../common/variables';
+
+.bcs-ActivityThread-toggle {
+    margin-left: $sidebarActivityFeedSpacingHorizontal;
+    color: $bdl-box-blue;
+    font-weight: bold;
+
+    &:hover,
+    &:active {
+        margin-left: $sidebarActivityFeedSpacingHorizontal;
+        font-weight: bold;
+    }
+}
+
+.bcs-ActivityThread-loading {
+    padding-bottom: $bdl-grid-unit * 5;
+}

package/src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.js

@@ -0,0 +1,85 @@
+// @flow
+import React from 'react';
+import Comment from '../comment';
+
+import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
+import type { Translations } from '../../flowTypes';
+import type { SelectorItems, User } from '../../../../common/types/core';
+import type { BoxCommentPermission, Comment as CommentType } from '../../../../common/types/feed';
+
+import './ActivityThreadReplies.scss';
+
+type Props = {
+    currentUser?: User,
+    getAvatarUrl: GetAvatarUrlCallback,
+    getMentionWithQuery?: Function,
+    getUserProfileUrl?: GetProfileUrlCallback,
+    isExpanded: boolean,
+    mentionSelectorContacts?: SelectorItems<>,
+    onDelete?: Function,
+    onEdit?: Function,
+    replies: Array<CommentType>,
+    translations?: Translations,
+};
+
+const ActivityThreadReplies = ({
+    currentUser,
+    getAvatarUrl,
+    getMentionWithQuery,
+    getUserProfileUrl,
+    isExpanded,
+    mentionSelectorContacts,
+    onDelete,
+    onEdit,
+    replies,
+    translations,
+}: Props) => {
+    const lastReply = replies[replies.length - 1];
+
+    const getReplyPermissions = (reply: CommentType): BoxCommentPermission => {
+        const { permissions: { can_delete = false, can_edit = false, can_resolve = false } = {} } = reply;
+        return {
+            can_delete,
+            can_edit,
+            can_resolve,
+        };
+    };
+
+    return (
+        <div className="bcs-ActivityThreadReplies" data-testid="activity-thread-replies">
+            {!isExpanded ? (
+                <Comment
+                    key={lastReply.type + lastReply.id}
+                    {...lastReply}
+                    currentUser={currentUser}
+                    getAvatarUrl={getAvatarUrl}
+                    getMentionWithQuery={getMentionWithQuery}
+                    getUserProfileUrl={getUserProfileUrl}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                    onDelete={onDelete}
+                    onEdit={onEdit}
+                    permissions={getReplyPermissions(lastReply)}
+                    translations={translations}
+                />
+            ) : (
+                replies.map((reply: CommentType) => (
+                    <Comment
+                        key={reply.type + reply.id}
+                        {...reply}
+                        currentUser={currentUser}
+                        getAvatarUrl={getAvatarUrl}
+                        getMentionWithQuery={getMentionWithQuery}
+                        getUserProfileUrl={getUserProfileUrl}
+                        mentionSelectorContacts={mentionSelectorContacts}
+                        onDelete={onDelete}
+                        onEdit={onEdit}
+                        permissions={getReplyPermissions(reply)}
+                        translations={translations}
+                    />
+                ))
+            )}
+        </div>
+    );
+};
+
+export default ActivityThreadReplies;

package/src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.scss

@@ -0,0 +1,16 @@
+@import '../../../common/variables';
+
+.bcs-ActivityThreadReplies {
+    position: relative;
+    padding-left: $sidebarActivityFeedSpacingHorizontal;
+
+    &::before {
+        position: absolute;
+        top: $sidebarActivityFeedSpacingVertical;
+        bottom: $sidebarActivityFeedSpacingVertical;
+        left: $sidebarActivityFeedSpacingHorizontal;
+        width: 4px;
+        background: $bdl-gray-10;
+        content: '';
+    }
+}

package/src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplyForm.js

@@ -0,0 +1,59 @@
+// @flow
+
+import * as React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import type { InjectIntlProvidedProps } from 'react-intl';
+
+import PlainButton from '../../../../components/plain-button';
+import ArrowArcRight from '../../../../icon/fill/ArrowArcRight';
+
+import type { SelectorItems } from '../../../../common/types/core';
+
+import CommentForm from '../comment-form';
+
+import messages from './messages';
+import './ActivityThreadReplyForm.scss';
+
+type ActivityThreadReplyFromProps = {
+    getMentionWithQuery?: (searchStr: string) => void,
+    mentionSelectorContacts?: SelectorItems<>,
+    onReplyCreate: (text: string) => void,
+};
+
+type Props = ActivityThreadReplyFromProps & InjectIntlProvidedProps;
+
+function ActivityThreadReplyForm({ mentionSelectorContacts, getMentionWithQuery, onReplyCreate, intl }: Props) {
+    const [showReplyForm, setShowReplyForm] = React.useState(false);
+    const placeholder = intl.formatMessage(messages.replyInThread);
+
+    return showReplyForm ? (
+        <CommentForm
+            className="bcs-ActivityThreadReplyForm-comment"
+            isOpen
+            isEditing
+            showTip={false}
+            // $FlowFixMe user is needed for showing an avatar, we don't need that here
+            user={{}}
+            getAvatarUrl={() => Promise.resolve()}
+            onCancel={() => setShowReplyForm(false)}
+            createComment={({ text }) => {
+                onReplyCreate(text);
+                setShowReplyForm(false);
+            }}
+            mentionSelectorContacts={mentionSelectorContacts}
+            getMentionWithQuery={getMentionWithQuery}
+            placeholder={placeholder}
+        />
+    ) : (
+        <PlainButton
+            role="button"
+            className="bcs-ActivityThreadReplyForm-toggle"
+            onClick={() => setShowReplyForm(true)}
+        >
+            <ArrowArcRight className="bcs-ActivityThreadReplyForm-arrow" />
+            <FormattedMessage {...messages.reply} />
+        </PlainButton>
+    );
+}
+
+export default injectIntl(ActivityThreadReplyForm);

package/src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplyForm.scss

@@ -0,0 +1,22 @@
+@import '../../../common/variables';
+
+.bcs-ActivityThreadReplyForm-toggle {
+    display: flex;
+    align-items: center;
+
+    &,
+    &:hover {
+        padding: $bdl-grid-unit $sidebarActivityFeedSpacingHorizontal ($bdl-grid-unit * 5);
+    }
+
+    .bcs-ActivityThreadReplyForm-arrow {
+        margin-right: $bdl-grid-unit;
+        // in design arrow is turning left, but we only have ArrowArcRight, so will transfrom it to left one
+        transform: matrix(-1, 0, 0, 1, 0, 0);
+    }
+}
+
+.bcs-CommentForm.bcs-ActivityThreadReplyForm-comment {
+    padding-top: 0;
+    border-top: none;
+}

package/src/elements/content-sidebar/activity-feed/activity-feed/__tests__/ActiveState.test.js

@@ -3,6 +3,13 @@ import { shallow } from 'enzyme';
 
 import ActiveState from '../ActiveState';
 import AnnotationActivity from '../../annotations';
+import {
+    FEED_ITEM_TYPE_ANNOTATION,
+    FEED_ITEM_TYPE_APP_ACTIVITY,
+    FEED_ITEM_TYPE_COMMENT,
+    FEED_ITEM_TYPE_TASK,
+    FEED_ITEM_TYPE_VERSION,
+} from '../../../../../constants';
 
 const currentUser = {
     id: 'user_123445',
@@ -12,7 +19,7 @@ const currentUser = {
 const otherUser = { name: 'Akon', id: 11 };
 
 const annotation = {
-    type: 'annotation',
+    type: FEED_ITEM_TYPE_ANNOTATION,
     id: 'anno_123',
     created_at: '2018-07-03T14:43:52-07:00',
     description: {
@@ -32,7 +39,7 @@ const annotation = {
 };
 
 const comment = {
-    type: 'comment',
+    type: FEED_ITEM_TYPE_COMMENT,
     id: 'c_123',
     created_at: '2018-07-03T14:43:52-07:00',
     tagged_message: 'test @[123:Jeezy] @[10:Kanye West]',
@@ -40,7 +47,7 @@ const comment = {
 };
 
 const fileVersion = {
-    type: 'file_version',
+    type: FEED_ITEM_TYPE_VERSION,
     id: 'f_123',
     created_at: '2018-07-03T14:43:52-07:00',
     trashed_at: '2018-07-03T14:43:52-07:00',
@@ -49,7 +56,7 @@ const fileVersion = {
 };
 
 const taskWithAssignment = {
-    type: 'task',
+    type: FEED_ITEM_TYPE_TASK,
     id: 't_345',
     created_at: '2018-07-03T14:43:52-07:00',
     created_by: { target: otherUser },
@@ -108,7 +115,7 @@ const appActivity = {
         can_delete: true,
     },
     rendered_text: 'this is text and a <a>link</a>',
-    type: 'app_activity',
+    type: FEED_ITEM_TYPE_APP_ACTIVITY,
     currentUser,
 };
 
@@ -144,6 +151,13 @@ describe('elements/content-sidebar/ActiveState/activity-feed/ActiveState', () =>
         expect(wrapper.find('[data-testid="annotation-activity"]')).toHaveLength(1);
     });
 
+    test('should correctly render ActivityThread for annotations and comments if has replies', () => {
+        const wrapper = getShallowWrapper({
+            hasReplies: true,
+        }).dive();
+        expect(wrapper.find('[data-testid="activity-thread"]')).toHaveLength(2);
+    });
+
     test('should correctly render with an inline error if some feed items fail to fetch', () => {
         const wrapper = getShallowWrapper({ inlineError: activityFeedError, items: [] });
         expect(wrapper).toMatchSnapshot();