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

package/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNotices.test.js.snap

@@ -9,7 +9,7 @@ exports[`elements/content-sidebar/SidebarNotices render() should render a shared
       <DateField
         date={2018-04-26T07:00:00.000Z}
         dateFormat={
-          Object {
+          {
             "day": "numeric",
             "month": "short",
             "year": "numeric",
@@ -29,7 +29,7 @@ exports[`elements/content-sidebar/SidebarNotices render() should render an item
       <DateField
         date={2018-04-26T07:00:00.000Z}
         dateFormat={
-          Object {
+          {
             "day": "numeric",
             "month": "short",
             "year": "numeric",

package/src/elements/content-sidebar/__tests__/__snapshots__/SkillsSidebar.test.js.snap

@@ -29,9 +29,9 @@ exports[`elements/content-sidebar/Skills/SkillsSidebar should render skills side
   }
 >
   <SidebarSkills
-    cards={Array []}
-    errors={Object {}}
-    file={Object {}}
+    cards={[]}
+    errors={{}}
+    file={{}}
     onSkillChange={[Function]}
   />
 </SidebarContent>

package/src/elements/content-sidebar/__tests__/__snapshots__/TaskModal.test.js.snap

@@ -8,9 +8,9 @@ exports[`elements/content-sidebar/TaskModal render should render a default compo
   isOpen={true}
   onRequestClose={[MockFunction]}
   style={
-    Object {
-      "backdrop": Object {},
-      "dialog": Object {},
+    {
+      "backdrop": {},
+      "dialog": {},
     }
   }
   title={
@@ -44,9 +44,9 @@ exports[`elements/content-sidebar/TaskModal render using type APPROVAL and mode
   isOpen={true}
   onRequestClose={[MockFunction]}
   style={
-    Object {
-      "backdrop": Object {},
-      "dialog": Object {},
+    {
+      "backdrop": {},
+      "dialog": {},
     }
   }
   title={
@@ -81,9 +81,9 @@ exports[`elements/content-sidebar/TaskModal render using type APPROVAL and mode
   isOpen={true}
   onRequestClose={[MockFunction]}
   style={
-    Object {
-      "backdrop": Object {},
-      "dialog": Object {},
+    {
+      "backdrop": {},
+      "dialog": {},
     }
   }
   title={
@@ -118,9 +118,9 @@ exports[`elements/content-sidebar/TaskModal render using type GENERAL and mode C
   isOpen={true}
   onRequestClose={[MockFunction]}
   style={
-    Object {
-      "backdrop": Object {},
-      "dialog": Object {},
+    {
+      "backdrop": {},
+      "dialog": {},
     }
   }
   title={
@@ -155,9 +155,9 @@ exports[`elements/content-sidebar/TaskModal render using type GENERAL and mode E
   isOpen={true}
   onRequestClose={[MockFunction]}
   style={
-    Object {
-      "backdrop": Object {},
-      "dialog": Object {},
+    {
+      "backdrop": {},
+      "dialog": {},
     }
   }
   title={

package/src/elements/content-sidebar/activity-feed/__tests__/__snapshots__/Avatar.test.js.snap

@@ -13,7 +13,7 @@ exports[`elements/content-sidebar/ActivityFeed/Avatar should set the avatarUrl s
   avatarUrl={null}
   id="foo"
   intl={
-    Object {
+    {
       "formatDate": [Function],
       "formatMessage": [Function],
       "formatNumber": [Function],

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

@@ -35,7 +35,12 @@ import type { SelectorItems, User } from '../../../../common/types/core';
 import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
 import type { Translations } from '../../flowTypes';
 
-import { type OnAnnotationEdit, type OnCommentEdit } from '../comment/types';
+import type {
+    OnAnnotationEdit,
+    OnAnnotationStatusChange,
+    OnCommentEdit,
+    OnCommentStatusChange,
+} from '../comment/types';
 import AnnotationActivityLinkProvider from './AnnotationActivityLinkProvider';
 
 type Props = {
@@ -56,7 +61,7 @@ type Props = {
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
     onAnnotationEdit?: OnAnnotationEdit,
     onAnnotationSelect?: (annotation: Annotation) => void,
-    onAnnotationStatusChange?: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
+    onAnnotationStatusChange: OnAnnotationStatusChange,
     onAppActivityDelete?: Function,
     onCommentDelete?: Function,
     onCommentEdit?: OnCommentEdit,
@@ -146,6 +151,15 @@ const ActiveState = ({
     const onShowRepliesHandler = (id: string, type: CommentFeedItemType) => () => {
         onShowReplies(id, type);
     };
+    const onCommentStatusChangeHandler: OnCommentStatusChange = (props: {
+        id: string,
+        permissions: AnnotationPermission | BoxCommentPermission,
+        status: FeedItemStatus,
+    }) => {
+        if (onCommentEdit) {
+            onCommentEdit({ hasMention: false, ...props });
+        }
+    };
 
     const hasMultipleVersions = item => item.versions || (shouldUseUAA && item.version_start !== item.version_end);
 
@@ -202,7 +216,9 @@ const ActiveState = ({
                                         onDelete={onCommentDelete}
                                         onCommentEdit={onCommentEdit}
                                         onReplyCreate={reply => onReplyCreate(item.id, FEED_ITEM_TYPE_COMMENT, reply)}
+                                        onReplyDelete={onReplyDeleteHandler(item.id)}
                                         onShowReplies={() => onShowReplies(item.id, FEED_ITEM_TYPE_COMMENT)}
+                                        onStatusChange={onCommentStatusChangeHandler}
                                     />
                                 ) : (
                                     <ActivityThread
@@ -321,7 +337,9 @@ const ActiveState = ({
                                             />
                                         }
                                         onAnnotationEdit={onAnnotationEdit}
+                                        onCommentEdit={onCommentEdit}
                                         onDelete={onAnnotationDelete}
+                                        onStatusChange={onAnnotationStatusChange}
                                         onReplyCreate={reply =>
                                             onReplyCreate(item.id, FEED_ITEM_TYPE_ANNOTATION, reply)
                                         }

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

@@ -37,11 +37,11 @@ import type {
 import type { SelectorItems, User, GroupMini, BoxItem } from '../../../../common/types/core';
 import type { Errors, GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
 import type { Translations } from '../../flowTypes';
-import { type OnAnnotationEdit } from '../comment/types';
+import type { OnAnnotationEdit, OnAnnotationStatusChange } from '../comment/types';
 
 import './ActivityFeed.scss';
 
-type Props = {
+export type ActivityFeedProps = {
     activeFeedEntryId?: string,
     activeFeedEntryType?: FocusableFeedItemType,
     activityFeedError: ?Errors,
@@ -49,6 +49,7 @@ type Props = {
     contactsLoaded?: boolean,
     currentUser?: User,
     feedItems?: FeedItems,
+    // $FlowFixMe file.file_version (BoxItem[BoxItemVersion]) has many apparently long-standing type errors
     file: BoxItem,
     getApproverWithQuery?: Function,
     getAvatarUrl: GetAvatarUrlCallback,
@@ -62,7 +63,7 @@ type Props = {
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
     onAnnotationEdit?: OnAnnotationEdit,
     onAnnotationSelect?: (annotation: Annotation) => void,
-    onAnnotationStatusChange?: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
+    onAnnotationStatusChange: OnAnnotationStatusChange,
     onAppActivityDelete?: Function,
     onCommentCreate?: Function,
     onCommentDelete?: Function,
@@ -104,7 +105,7 @@ type State = {
     selectedItemId: string | null,
 };
 
-class ActivityFeed extends React.Component<Props, State> {
+class ActivityFeed extends React.Component<ActivityFeedProps, State> {
     state = {
         isScrolled: false,
         isInputOpen: false,
@@ -119,7 +120,7 @@ class ActivityFeed extends React.Component<Props, State> {
         this.resetFeedScroll();
     }
 
-    componentDidUpdate(prevProps: Props, prevState: State) {
+    componentDidUpdate(prevProps: ActivityFeedProps, prevState: State) {
         const {
             activeFeedEntryId: prevActiveFeedEntryId,
             currentUser: prevCurrentUser,
@@ -168,7 +169,7 @@ class ActivityFeed extends React.Component<Props, State> {
      * @param {object} currentUser - The user that is logged into the account
      * @param {object} feedItems - Items in the activity feed
      */
-    isEmpty = ({ feedItems, shouldUseUAA }: Props = this.props): boolean => {
+    isEmpty = ({ feedItems, shouldUseUAA }: ActivityFeedProps = this.props): boolean => {
         if (feedItems === undefined) {
             return false;
         }

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

@@ -49,6 +49,7 @@
         flex: 1 1 auto;
         flex-direction: column;
         width: 100%; // Explicit width required since flex-direction is column
+        min-height: $sidebarContentMinHeight;
         overflow-x: hidden;
         overflow-y: auto;
 
@@ -133,7 +134,7 @@
 
     .bcs-activity-feed-comment-input {
         flex: 0 0 auto;
-        min-height: 93px;
+        min-height: $sidebarContentMinHeight;
         max-height: 500px;
         overflow: hidden;
         background-color: $white;
@@ -156,9 +157,10 @@
     }
 }
 
-.is-responsive-web {
-    @include breakpoint($medium-screen) {
-        .be .bcs-activity-feed,
+@include breakpoint($medium-screen) {
+    .be .bcs-activity-feed {
+        width: 100%;
+
         .bcs-activity-feed-comment-input {
             width: 100%;
         }

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

@@ -4,9 +4,9 @@
     &.hasNewThreadedReplies {
         padding: 2px $bdl-grid-unit * 2;
 
+        // This brittle selector is here in order to only select the parent BaseComment and not the BaseComments which constitute its replies.
         & > div {
-            padding: $bdl-grid-unit * 2;
-            padding-right: $bdl-grid-unit * 4;
+            padding: $bdl-grid-unit * 3 $bdl-grid-unit * 3 $bdl-grid-unit * 5;
         }
 
         &.bcs-is-hoverable:hover {

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

@@ -192,4 +192,40 @@ describe('elements/content-sidebar/ActiveState/activity-feed/ActiveState', () =>
         expect(wrapper.find('Comment')).toHaveLength(hasNewThreadedReplies ? 0 : 1);
         expect(wrapper.find('AnnotationActivity')).toHaveLength(hasNewThreadedReplies ? 0 : 1);
     });
+
+    test('Annotation BaseComment has onCommentEdit to edit replies', () => {
+        const onCommentEdit = () => {};
+        const wrapper = getShallowWrapper({ hasNewThreadedReplies: true, items: [annotation], onCommentEdit }).dive();
+        const baseComment = wrapper.find('BaseComment');
+        expect(baseComment.props().onCommentEdit).toEqual(onCommentEdit);
+    });
+
+    test('Annotation BaseComment has onStatusChange from onAnnotationStatusChange', () => {
+        const onAnnotationStatusChange = () => {};
+        const wrapper = getShallowWrapper({
+            hasNewThreadedReplies: true,
+            items: [annotation],
+            onAnnotationStatusChange,
+        }).dive();
+        const baseComment = wrapper.find('BaseComment');
+        expect(baseComment.props().onStatusChange).toEqual(onAnnotationStatusChange);
+    });
+
+    test('Comment BaseComment has onStatusChange from onCommentEdit', () => {
+        const onCommentEdit = jest.fn();
+
+        const props = {
+            hasNewThreadedReplies: true,
+            items: [comment],
+            onCommentEdit,
+        };
+
+        const wrapper = getShallowWrapper(props).dive();
+        const baseComment = wrapper.find('BaseComment');
+        const onStatusChangeProp = baseComment.props().onStatusChange;
+        const expectedProps = { hasMention: false, ...props };
+
+        onStatusChangeProp(expectedProps);
+        expect(onCommentEdit).toHaveBeenCalledWith(expectedProps);
+    });
 });

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

@@ -16,12 +16,12 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should c
   <ActiveState
     currentFileVersionId="123"
     currentUser={
-      Object {
+      {
         "id": "user_123445",
         "name": "Rihanna",
       }
     }
-    items={Array []}
+    items={[]}
     onAnnotationSelect={[Function]}
   />
 </Fragment>
@@ -31,12 +31,12 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
 <ActiveState
   currentFileVersionId="123"
   currentUser={
-    Object {
+    {
       "id": "user_123445",
       "name": "Rihanna",
     }
   }
-  items={Array []}
+  items={[]}
   onAnnotationSelect={[Function]}
 />
 `;
@@ -55,7 +55,7 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
   >
     <ActivityThread
       currentUser={
-        Object {
+        {
           "id": "user_123445",
           "name": "Rihanna",
         }
@@ -72,28 +72,28 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
     >
       <AnnotationActivity
         currentUser={
-          Object {
+          {
             "id": "user_123445",
             "name": "Rihanna",
           }
         }
         isCurrentVersion={true}
         item={
-          Object {
+          {
             "created_at": "2018-07-03T14:43:52-07:00",
-            "created_by": Object {
+            "created_by": {
               "id": "user_123445",
               "name": "Rihanna",
             },
-            "description": Object {
+            "description": {
               "message": "This is an annotation",
             },
-            "file_version": Object {
+            "file_version": {
               "id": "123",
             },
             "id": "anno_123",
-            "target": Object {
-              "location": Object {
+            "target": {
+              "location": {
                 "type": "page",
                 "value": 1,
               },
@@ -115,7 +115,7 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
   >
     <ActivityThread
       currentUser={
-        Object {
+        {
           "id": "user_123445",
           "name": "Rihanna",
         }
@@ -133,13 +133,13 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
       <Comment
         created_at="2018-07-03T14:43:52-07:00"
         created_by={
-          Object {
+          {
             "id": 11,
             "name": "Akon",
           }
         }
         currentUser={
-          Object {
+          {
             "id": "user_123445",
             "name": "Rihanna",
           }
@@ -149,7 +149,7 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
         onEdit={[Function]}
         onSelect={[Function]}
         permissions={
-          Object {
+          {
             "can_delete": false,
             "can_edit": false,
             "can_reply": false,
@@ -171,7 +171,7 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
       id="f_123"
       modified_at="2018-07-03T14:43:52-07:00"
       modified_by={
-        Object {
+        {
           "id": 11,
           "name": "Akon",
         }
@@ -188,17 +188,17 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
   >
     <ForwardRef
       assigned_to={
-        Object {
-          "entries": Array [
-            Object {
+        {
+          "entries": [
+            {
               "id": "ta_123",
-              "permissions": Object {
+              "permissions": {
                 "can_delete": true,
                 "can_update": true,
               },
               "role": "ASSIGNEE",
               "status": "NOT_STARTED",
-              "target": Object {
+              "target": {
                 "id": 11,
                 "name": "Akon",
               },
@@ -211,15 +211,15 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
       }
       created_at="2018-07-03T14:43:52-07:00"
       created_by={
-        Object {
-          "target": Object {
+        {
+          "target": {
             "id": 11,
             "name": "Akon",
           },
         }
       }
       currentUser={
-        Object {
+        {
           "id": "user_123445",
           "name": "Rihanna",
         }
@@ -229,7 +229,7 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
       id="t_345"
       modified_at="2018-07-03T14:43:52-07:00"
       permissions={
-        Object {
+        {
           "can_create_task_collaborator": true,
           "can_create_task_link": true,
           "can_delete": true,
@@ -238,10 +238,10 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
       }
       status="NOT_STARTED"
       task_links={
-        Object {
-          "entries": Array [
-            Object {
-              "target": Object {
+        {
+          "entries": [
+            {
+              "target": {
                 "id": "f_123",
                 "type": "file",
               },
@@ -260,12 +260,12 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
   >
     <AppActivity
       activity_template={
-        Object {
+        {
           "id": "template_09887654",
         }
       }
       app={
-        Object {
+        {
           "icon_url": "foo.jpg",
           "id": "app_123456",
           "name": "My App",
@@ -273,19 +273,19 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
       }
       created_at="2018-07-03T14:43:52-07:00"
       created_by={
-        Object {
+        {
           "id": "user_12345567",
         }
       }
       currentUser={
-        Object {
+        {
           "id": "user_123445",
           "name": "Rihanna",
         }
       }
       id="app_activity_12344556"
       permissions={
-        Object {
+        {
           "can_delete": true,
         }
       }

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

@@ -0,0 +1,70 @@
+// @flow
+import * as React from 'react';
+
+import { IntlProvider } from 'react-intl';
+
+import ActivityFeed, { type ActivityFeedProps } from '../ActivityFeed';
+import {
+    TIME_STRING_SEPT_27_2017,
+    TIME_STRING_SEPT_28_2017,
+    currentUser,
+    comment,
+    replies,
+    repliesProps,
+} from '../../comment/stories/common';
+import { FEED_ITEM_TYPE_VERSION } from '../../../../../constants';
+
+import type { FeedItems, Comment } from '../../../../../common/types/feed';
+
+const file = {
+    id: '12345',
+    permissions: {
+        can_comment: true,
+    },
+    created_at: TIME_STRING_SEPT_27_2017,
+    modified_at: TIME_STRING_SEPT_28_2017,
+    file_version: {
+        id: 987,
+        type: FEED_ITEM_TYPE_VERSION,
+        created_at: TIME_STRING_SEPT_28_2017,
+        modified_at: null,
+        modified_by: null,
+        trashed_at: null,
+        version_number: 1,
+    },
+    version_number: '3',
+};
+
+const activityFeedComment: Comment = {
+    ...comment,
+    replies,
+};
+
+const comments = {
+    total_count: 1,
+    entries: [activityFeedComment],
+};
+
+const feedItems: FeedItems = [...comments.entries];
+
+const getTemplate = customProps => (props: ActivityFeedProps) => (
+    <IntlProvider locale="en">
+        <ActivityFeed
+            currentUser={currentUser}
+            feedItems={feedItems}
+            file={file}
+            {...repliesProps}
+            {...props}
+            {...customProps}
+        />
+    </IntlProvider>
+);
+
+export const LegacyComment = getTemplate({ hasNewThreadedReplies: false });
+
+export const ThreadedRepliesComment = getTemplate({ hasNewThreadedReplies: true });
+
+export default {
+    title: 'Components/ActivityFeed',
+    component: ActivityFeed,
+};

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

@@ -18,7 +18,7 @@ import type { AnnotationThreadError } from './types';
 
 import './AnnotationThreadContent.scss';
 
-import type { OnAnnotationEdit } from '../comment/types';
+import type { OnAnnotationEdit, OnAnnotationStatusChange } from '../comment/types';
 
 type Props = {
     annotation?: Annotation,
@@ -31,7 +31,7 @@ type Props = {
     mentionSelectorContacts: SelectorItems<>,
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => any,
     onAnnotationEdit?: OnAnnotationEdit,
-    onAnnotationStatusChange?: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
+    onAnnotationStatusChange: OnAnnotationStatusChange,
     onReplyCreate?: (text: string) => void,
     onReplyDelete?: ({ id: string, permissions: BoxCommentPermission }) => void,
     onReplyEdit?: (

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

@@ -351,8 +351,10 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotationThread', () =>
 
             const { result } = getHook();
             act(() => {
-                result.current.annotationActions.handleAnnotationStatusChange(annotation.id, 'resolved', {
-                    can_resolve: true,
+                result.current.annotationActions.handleAnnotationStatusChange({
+                    id: annotation.id,
+                    status: 'resolved',
+                    permissions: { can_resolve: true },
                 });
             });
 

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

@@ -14,7 +14,7 @@ import type { BoxItem, User } from '../../../../common/types/core';
 import type { BoxCommentPermission, Comment, FeedItemStatus } from '../../../../common/types/feed';
 import type { ElementOrigin, ElementsXhrError } from '../../../../common/types/api';
 import type { AnnotationThreadError } from './types';
-import type { OnAnnotationEdit } from '../comment/types';
+import type { OnAnnotationEdit, OnAnnotationStatusChange } from '../comment/types';
 
 const normalizeReplies = (repliesArray?: Array<Comment>): { [string]: Comment } => {
     if (!repliesArray) {
@@ -54,7 +54,7 @@ type UseAnnotationThread = {
         handleAnnotationCreate: (text: string) => void,
         handleAnnotationDelete: ({ id: string, permissions: AnnotationPermission }) => void,
         handleAnnotationEdit: OnAnnotationEdit,
-        handleAnnotationStatusChange: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
+        handleAnnotationStatusChange: OnAnnotationStatusChange,
     },
     error?: AnnotationThreadError,
     isLoading: boolean,
@@ -323,11 +323,7 @@ const useAnnotationThread = ({
         });
     };
 
-    const handleAnnotationStatusChange = (
-        id: string,
-        status: FeedItemStatus,
-        permissions: AnnotationPermission,
-    ): void => {
+    const handleAnnotationStatusChange: OnAnnotationStatusChange = ({ id, permissions, status }): void => {
         setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));
 
         handleStatusChange({