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

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

@@ -2,6 +2,12 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 import ActivityFeed from '../ActivityFeed';
 import { scrollIntoView } from '../../../../../utils/dom';
+import {
+    FEED_ITEM_TYPE_ANNOTATION,
+    FEED_ITEM_TYPE_COMMENT,
+    FEED_ITEM_TYPE_TASK,
+    FEED_ITEM_TYPE_VERSION,
+} from '../../../../../constants';
 
 jest.mock('lodash/uniqueId', () => () => 'uniqueId');
 jest.mock('../../../../../utils/dom');
@@ -22,7 +28,7 @@ const annotations = {
                 can_delete: true,
                 can_edit: true,
             },
-            type: 'annotation',
+            type: FEED_ITEM_TYPE_ANNOTATION,
         },
     ],
 };
@@ -31,7 +37,7 @@ const comments = {
     total_count: 1,
     entries: [
         {
-            type: 'comment',
+            type: FEED_ITEM_TYPE_COMMENT,
             id: '123',
             created_at: 'Thu Sep 26 33658 19:46:39 GMT-0600 (CST)',
             tagged_message: 'test @[123:Jeezy] @[10:Kanye West]',
@@ -42,7 +48,7 @@ const comments = {
 
 const first_version = {
     action: 'upload',
-    type: 'file_version',
+    type: FEED_ITEM_TYPE_VERSION,
     id: 123,
     created_at: 'Thu Sep 20 33658 19:45:39 GMT-0600 (CST)',
     trashed_at: 1234567891,
@@ -59,7 +65,7 @@ const file = {
     modified_at: 2234567891,
     file_version: {
         id: 987,
-        type: 'file_version',
+        type: FEED_ITEM_TYPE_VERSION,
     },
     restored_from: {
         id: first_version.id,
@@ -69,7 +75,7 @@ const file = {
 };
 
 const taskWithAssignment = {
-    type: 'task',
+    type: FEED_ITEM_TYPE_TASK,
     id: 't_345',
     created_at: '2018-07-03T14:43:52-07:00',
     created_by: otherUser,
@@ -195,7 +201,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
     describe('componentDidUpdate()', () => {
         test('should set scrollTop to be the scrollHeight if feedContainer exists and prevProps feedItems is undefined and this.props.feedItems is defined', () => {
             const wrapper = getWrapper({
-                feedItems: [{ type: 'comment' }],
+                feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }],
             });
             const instance = wrapper.instance();
             instance.feedContainer = {
@@ -216,7 +222,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
 
         test('should set scrollTop to be the scrollHeight if more feedItems are added', () => {
             const wrapper = getWrapper({
-                feedItems: [{ type: 'comment' }, { type: 'comment' }],
+                feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }, { type: FEED_ITEM_TYPE_COMMENT }],
             });
 
             const instance = wrapper.instance();
@@ -227,7 +233,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
 
             instance.componentDidUpdate(
                 {
-                    feedItems: [{ type: 'comment' }],
+                    feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }],
                     currentUser,
                 },
                 { isInputOpen: false },
@@ -238,7 +244,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
 
         test('should set scrollTop to be the scrollHeight if the user becomes defined', () => {
             const wrapper = getWrapper({
-                feedItems: [{ type: 'comment' }],
+                feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }],
             });
             const instance = wrapper.instance();
             instance.feedContainer = {
@@ -248,7 +254,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
 
             instance.componentDidUpdate(
                 {
-                    feedItems: [{ type: 'comment' }],
+                    feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }],
                     currentUser: undefined,
                 },
                 { isInputOpen: false },
@@ -259,7 +265,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
 
         test('should set scrollTop to be the scrollHeight if input opens', () => {
             const wrapper = getWrapper({
-                feedItems: [{ type: 'comment' }],
+                feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }],
             });
             wrapper.setState({
                 isInputOpen: true,
@@ -272,7 +278,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
 
             instance.componentDidUpdate(
                 {
-                    feedItems: [{ type: 'comment' }],
+                    feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }],
                     currentUser,
                 },
                 { isInputOpen: false },
@@ -282,7 +288,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
         });
 
         test('should call scrollToActiveFeedItemOrErrorMessage if feed items loaded', () => {
-            const wrapper = getWrapper({ feedItems: [{ type: 'comment' }] });
+            const wrapper = getWrapper({ feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }] });
             const instance = wrapper.instance();
             instance.scrollToActiveFeedItemOrErrorMessage = jest.fn();
 
@@ -333,7 +339,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
         });
         const instance = wrapper.instance();
         wrapper.setProps({
-            feedItems: [{ type: 'comment' }],
+            feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }],
         });
 
         expect(wrapper.find('ActiveState').prop('activeFeedItemRef')).toEqual(instance.activeFeedItemRef);
@@ -347,7 +353,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
         const li = document.createElement('li');
         instance.activeFeedItemRef.current = li;
         wrapper.setProps({
-            feedItems: [{ type: 'comment' }],
+            feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }],
         });
         expect(scrollIntoView).toHaveBeenCalledWith(li);
     });
@@ -360,7 +366,7 @@ describe('elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed', ()
 
         instance.activeFeedItemRef.current = null;
         wrapper.setProps({
-            feedItems: [{ type: 'comment' }],
+            feedItems: [{ type: FEED_ITEM_TYPE_COMMENT }],
         });
         expect(scrollIntoView).not.toHaveBeenCalled();
     });

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

@@ -0,0 +1,80 @@
+// @flow
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import ActivityThread from '../ActivityThread.js';
+import localize from '../../../../../../test/support/i18n';
+import { replies } from '../fixtures';
+import messages from '../messages';
+
+jest.mock('react-intl', () => jest.requireActual('react-intl'));
+describe('src/elements/content-sidebar/activity-feed/activity-feed/ActivityThread', () => {
+    const Wrapper = ({ children }: { children?: React.ReactNode }) => {
+        return <IntlProvider locale="en">{children}</IntlProvider>;
+    };
+
+    const getWrapper = props =>
+        render(
+            <ActivityThread replies={replies} repliesTotalCount={2} hasReplies {...props}>
+                Test
+            </ActivityThread>,
+            { wrapper: Wrapper },
+        );
+
+    test('should render children component wrapped in ActivityThread if hasReplies is true', () => {
+        getWrapper();
+
+        expect(screen.queryByTestId('activity-thread')).toBeInTheDocument();
+        expect(screen.getByText('Test')).toBeVisible();
+    });
+
+    test('should render children component if hasReplies is false', () => {
+        const { getByText } = getWrapper({ hasReplies: false });
+
+        expect(screen.queryByTestId('activity-thread')).not.toBeInTheDocument();
+        expect(getByText('Test')).toBeVisible();
+    });
+
+    test('should call onShowReplies on button click', () => {
+        const onShowReplies = jest.fn();
+        const { getByText } = getWrapper({ onShowReplies });
+
+        const button = getByText(localize(messages.showReplies.id, { repliesToLoadCount: 1 }));
+        expect(button).toBeVisible();
+        fireEvent.click(button);
+
+        expect(onShowReplies).toBeCalled();
+        expect(getByText(localize(messages.hideReplies.id))).toBeVisible();
+    });
+
+    test('should not render button if total_reply_count is 1 or less', () => {
+        const { queryByTestId } = getWrapper({ repliesTotalCount: 1 });
+        expect(queryByTestId('activity-thread-button')).not.toBeInTheDocument();
+    });
+
+    test('should not render replies if there is no replies', () => {
+        const { queryByTestId } = getWrapper({ replies: [] });
+
+        expect(queryByTestId('activity-thread-replies')).not.toBeInTheDocument();
+    });
+
+    test('should render LoadingIndicator and do not render replies or button if repliesLoading is true', () => {
+        const { queryByTestId } = getWrapper({ isRepliesLoading: true });
+
+        expect(queryByTestId('activity-thread-replies')).not.toBeInTheDocument();
+        expect(queryByTestId('activity-thread-button')).not.toBeInTheDocument();
+        expect(queryByTestId('activity-thread-loading')).toBeInTheDocument();
+    });
+
+    test('should NOT have reply button when onReplyCreate is not passed', () => {
+        getWrapper({ onReplyCreate: undefined });
+
+        expect(screen.queryByRole('button', { name: localize(messages.reply.id) })).not.toBeInTheDocument();
+    });
+
+    test('should have reply button when onReplyCreate is passed', () => {
+        getWrapper({ onReplyCreate: function someFunction() {} });
+
+        expect(screen.getByRole('button', { name: localize(messages.reply.id) })).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,24 @@
+// @flow
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import ActivityThreadReplies from '../ActivityThreadReplies.js';
+import { replies } from '../fixtures';
+
+describe('src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies', () => {
+    const getWrapper = props => render(<ActivityThreadReplies replies={replies} isExpanded={false} {...props} />);
+
+    test('should render last reply by default', () => {
+        const { queryByText } = getWrapper();
+
+        expect(queryByText(replies[1].message)).toBeVisible();
+        expect(queryByText(replies[0].message)).not.toBeInTheDocument();
+    });
+
+    test('should render all replies if isExpanded is true', () => {
+        const { queryByText } = getWrapper({ isExpanded: true });
+
+        expect(queryByText(replies[1].message)).toBeVisible();
+        expect(queryByText(replies[0].message)).toBeVisible();
+    });
+});

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

@@ -0,0 +1,47 @@
+// @flow
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import noop from 'lodash/noop';
+import { IntlProvider } from 'react-intl';
+import localize from '../../../../../../test/support/i18n';
+import messages from '../messages';
+import ActivityThreadReplyForm from '../ActivityThreadReplyForm.js';
+
+jest.mock('react-intl', () => jest.requireActual('react-intl'));
+
+describe('src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplyForm', () => {
+    const Wrapper = ({ children }: { children?: React.ReactNode }) => {
+        return <IntlProvider locale="en">{children}</IntlProvider>;
+    };
+
+    const renderComponent = props =>
+        render(<ActivityThreadReplyForm onReplyCreate={noop} {...props} />, {
+            wrapper: Wrapper,
+        });
+
+    test('should show reply form when clicked on Reply button', () => {
+        renderComponent();
+
+        const replyButton = screen.getByRole('button', { name: localize(messages.reply.id) });
+        expect(screen.queryByTestId('bcs-CommentForm-body')).not.toBeInTheDocument();
+
+        fireEvent.click(replyButton);
+
+        expect(screen.getByTestId('bcs-CommentForm-body')).toBeInTheDocument();
+        expect(screen.getByText(localize(messages.replyInThread.id))).toBeInTheDocument();
+    });
+
+    test('should hide opened reply form when clicked on Cancel button', () => {
+        renderComponent();
+
+        const replyButton = screen.getByRole('button', { name: localize(messages.reply.id) });
+        fireEvent.click(replyButton);
+
+        expect(screen.getByTestId('bcs-CommentForm-body')).toBeInTheDocument();
+
+        const cancel = screen.getByRole('button', { name: 'Cancel' });
+        fireEvent.click(cancel);
+
+        expect(screen.queryByTestId('bcs-CommentForm-body')).not.toBeInTheDocument();
+    });
+});

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

@@ -49,72 +49,103 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
     isFocused={false}
     key="annotationanno_123"
   >
-    <AnnotationActivity
+    <ActivityThread
       currentUser={
         Object {
           "id": "user_123445",
           "name": "Rihanna",
         }
       }
-      isCurrentVersion={true}
-      item={
-        Object {
-          "created_at": "2018-07-03T14:43:52-07:00",
-          "created_by": Object {
+      data-testid="activity-thread"
+      hasReplies={false}
+      onReplyCreate={[Function]}
+      onReplyDelete={[Function]}
+      onReplyEdit={[Function]}
+      onShowReplies={[Function]}
+    >
+      <AnnotationActivity
+        currentUser={
+          Object {
             "id": "user_123445",
             "name": "Rihanna",
-          },
-          "description": Object {
-            "message": "This is an annotation",
-          },
-          "file_version": Object {
-            "id": "123",
-          },
-          "id": "anno_123",
-          "target": Object {
-            "location": Object {
-              "type": "page",
-              "value": 1,
+          }
+        }
+        isCurrentVersion={true}
+        item={
+          Object {
+            "created_at": "2018-07-03T14:43:52-07:00",
+            "created_by": Object {
+              "id": "user_123445",
+              "name": "Rihanna",
             },
-            "type": "region",
-          },
-          "type": "annotation",
+            "description": Object {
+              "message": "This is an annotation",
+            },
+            "file_version": Object {
+              "id": "123",
+            },
+            "id": "anno_123",
+            "target": Object {
+              "location": Object {
+                "type": "page",
+                "value": 1,
+              },
+              "type": "region",
+            },
+            "type": "annotation",
+          }
         }
-      }
-    />
+      />
+    </ActivityThread>
   </ForwardRef(ActivityItem)>
   <ForwardRef(ActivityItem)
-    className="bcs-activity-feed-comment"
     data-testid="comment"
     isFocused={false}
     key="commentc_123"
   >
-    <Comment
-      created_at="2018-07-03T14:43:52-07:00"
-      created_by={
-        Object {
-          "id": 11,
-          "name": "Akon",
-        }
-      }
+    <ActivityThread
       currentUser={
         Object {
           "id": "user_123445",
           "name": "Rihanna",
         }
       }
-      id="c_123"
-      onDelete={[Function]}
-      onEdit={[Function]}
-      permissions={
-        Object {
-          "can_delete": false,
-          "can_edit": false,
+      data-testid="activity-thread"
+      hasReplies={false}
+      onReplyCreate={[Function]}
+      onReplyDelete={[Function]}
+      onReplyEdit={[Function]}
+      onShowReplies={[Function]}
+    >
+      <Comment
+        created_at="2018-07-03T14:43:52-07:00"
+        created_by={
+          Object {
+            "id": 11,
+            "name": "Akon",
+          }
         }
-      }
-      tagged_message="test @[123:Jeezy] @[10:Kanye West]"
-      type="comment"
-    />
+        currentUser={
+          Object {
+            "id": "user_123445",
+            "name": "Rihanna",
+          }
+        }
+        id="c_123"
+        onDelete={[Function]}
+        onEdit={[Function]}
+        permissions={
+          Object {
+            "can_delete": false,
+            "can_edit": false,
+            "can_reply": false,
+            "can_resolve": false,
+          }
+        }
+        tagged_message="test @[123:Jeezy] @[10:Kanye West]"
+        type="comment"
+      />
+    </ActivityThread>
   </ForwardRef(ActivityItem)>
   <ForwardRef(ActivityItem)
     className="bcs-version-item"

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

@@ -1,12 +1,12 @@
 import { collapseFeedState } from '../activityFeedUtils';
-import { PLACEHOLDER_USER } from '../../../../../constants';
+import { FEED_ITEM_TYPE_COMMENT, FEED_ITEM_TYPE_VERSION, PLACEHOLDER_USER } from '../../../../../constants';
 
 describe('collapseFeedState', () => {
     const mario = { id: '1', name: 'mario' };
     const luigi = { id: '2', name: 'luigi' };
 
     const version1 = {
-        type: 'file_version',
+        type: FEED_ITEM_TYPE_VERSION,
         version_number: '2',
         modified_by: mario,
     };
@@ -18,10 +18,10 @@ describe('collapseFeedState', () => {
     test('should keep file_version & comment distinct', () => {
         const origFeed = [
             {
-                type: 'comment',
+                type: FEED_ITEM_TYPE_COMMENT,
             },
             {
-                type: 'file_version',
+                type: FEED_ITEM_TYPE_VERSION,
             },
         ];
         const expFeed = origFeed;
@@ -32,7 +32,7 @@ describe('collapseFeedState', () => {
 
     test('should collapse two file_version items into 1', () => {
         const version2 = {
-            type: 'file_version',
+            type: FEED_ITEM_TYPE_VERSION,
             version_number: '1',
             modified_by: luigi,
         };
@@ -40,7 +40,7 @@ describe('collapseFeedState', () => {
         const origFeed = [version1, version2];
         const expFeed = [
             {
-                type: 'file_version',
+                type: FEED_ITEM_TYPE_VERSION,
                 version_number: '1',
                 modified_by: luigi,
                 created_at: undefined,
@@ -63,7 +63,7 @@ describe('collapseFeedState', () => {
 
     test('should collapse two file_version items and handle null users', () => {
         const version2 = {
-            type: 'file_version',
+            type: FEED_ITEM_TYPE_VERSION,
             version_number: '1',
             modified_by: null,
         };
@@ -71,7 +71,7 @@ describe('collapseFeedState', () => {
         const origFeed = [version1, version2];
         const expFeed = [
             {
-                type: 'file_version',
+                type: FEED_ITEM_TYPE_VERSION,
                 version_number: '1',
                 modified_by: PLACEHOLDER_USER,
                 created_at: undefined,

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

@@ -4,11 +4,11 @@
  */
 
 import selectors from '../../../common/selectors/version';
-import { PLACEHOLDER_USER, VERSION_UPLOAD_ACTION } from '../../../../constants';
+import { FEED_ITEM_TYPE_VERSION, PLACEHOLDER_USER, VERSION_UPLOAD_ACTION } from '../../../../constants';
 import type { FeedItems } from '../../../../common/types/feed';
 
 export const ItemTypes = {
-    fileVersion: 'file_version',
+    fileVersion: FEED_ITEM_TYPE_VERSION,
 };
 
 export function collapseFeedState(feedState: ?FeedItems): FeedItems {

package/src/elements/content-sidebar/activity-feed/activity-feed/fixtures.ts

@@ -0,0 +1,56 @@
+export const replies = [
+    {
+        created_at: '2020-09-20T00:00:00Z',
+        created_by: {
+            id: '1',
+            login: 'johndoe',
+            name: 'John Doe',
+            type: 'user' as const,
+        },
+        id: '2485934',
+        message: 'First reply',
+        tagged_message: 'First reply',
+        modified_at: '2020-09-20T00:00:00Z',
+        modified_by: {
+            id: '1',
+            login: 'johndoe',
+            name: 'John Doe',
+            type: 'user' as const,
+        },
+        permissions: {
+            can_delete: true,
+            can_edit: true,
+            can_reply: false,
+            can_resolve: true,
+        },
+        type: 'comment' as const,
+    },
+    {
+        created_at: '2020-09-20T00:00:00Z',
+        created_by: {
+            id: '1',
+            login: 'johndoe',
+            name: 'John Doe',
+            type: 'user' as const,
+        },
+        id: '24835935',
+        message: 'Last reply',
+        tagged_message: 'Last reply',
+        modified_at: '2020-09-20T00:00:00Z',
+        modified_by: {
+            id: '1',
+            login: 'johndoe',
+            name: 'John Doe',
+            type: 'user' as const,
+        },
+        permissions: {
+            can_delete: true,
+            can_edit: true,
+            can_reply: false,
+            can_resolve: true,
+        },
+        type: 'comment' as const,
+    },
+];
+
+export default { replies };

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

@@ -27,6 +27,26 @@ const messages = defineMessages({
         defaultMessage: 'This comment no longer exists',
         description: 'Text to show when comment no longer exists',
     },
+    showReplies: {
+        id: 'be.activitySidebar.activityFeed.showReplies',
+        defaultMessage: 'See {repliesToLoadCount, plural, one {# reply} other {# replies}}',
+        description: 'Text to show to get more replies of comment or annotation',
+    },
+    hideReplies: {
+        id: 'be.activitySidebar.activityFeed.hideReplies',
+        defaultMessage: 'Hide replies',
+        description: 'Text to show to hide more replies of comment or annotation',
+    },
+    reply: {
+        id: 'be.activitySidebar.activityFeed.reply',
+        defaultMessage: 'Reply',
+        description: 'Text to show on button to start replying to comment',
+    },
+    replyInThread: {
+        id: 'be.activitySidebar.activityFeed.replyInThread',
+        defaultMessage: 'Reply in thread',
+        description: 'Text to show on reply form input placeholder',
+    },
 });
 
 export default messages;