box-ui-elements 16.0.0-beta.21 → 16.0.0-beta.23

package/i18n/zh-CN.js

@@ -5,6 +5,8 @@ export default {
   "be.activitySidebar.activityFeed.annotationMissingError": "此评论已不存在",
   "be.activitySidebar.activityFeed.commentMissingError": "此评论已不存在",
   "be.activitySidebar.activityFeed.feedInlineErrorTitle": "错误",
+  "be.activitySidebar.activityFeed.hideReplies": "Hide replies",
+  "be.activitySidebar.activityFeed.showReplies": "See {repliesToLoadCount, plural, one {# reply} other {# replies}}",
   "be.activitySidebar.activityFeed.taskMissingError": "此任务已不存在",
   "be.activitySidebarFilter.status.all": "全部评论",
   "be.activitySidebarFilter.status.open": "未解决评论",
@@ -34,21 +36,21 @@ export default {
   "be.choose": "选择",
   "be.close": "关闭",
   "be.collapse": "折叠",
-  "be.contentInsights.contentAnalyticsErrorText": "There was a problem loading content insights. Please try again.",
-  "be.contentInsights.contentInsightsTitle": "Content Insights",
-  "be.contentInsights.downloadGraphLabel": "Chart displaying the number of downloads over the selected time period",
-  "be.contentInsights.downloadGraphType": "DOWNLOADS",
-  "be.contentInsights.openContentInsightsButton": "See Details",
-  "be.contentInsights.peopleGraphLabel": "Chart displaying the number of users over the selected time period",
-  "be.contentInsights.peopleTitle": "PEOPLE",
-  "be.contentInsights.previewGraphLabel": "Chart displaying the number of previews over the selected time period",
-  "be.contentInsights.previewGraphType": "PREVIEWS",
-  "be.contentInsights.trendDown": "Trending down",
-  "be.contentInsights.trendMonth": "PAST MONTH",
-  "be.contentInsights.trendThreeMonths": "PAST 3 MONTHS",
-  "be.contentInsights.trendUp": "Trending up",
-  "be.contentInsights.trendWeek": "PAST WEEK",
-  "be.contentInsights.trendYear": "PAST YEAR",
+  "be.contentInsights.contentAnalyticsErrorText": "加载内容见解时出现问题。请重试。",
+  "be.contentInsights.contentInsightsTitle": "内容见解",
+  "be.contentInsights.downloadGraphLabel": "显示所选时间段内下载次数的图表",
+  "be.contentInsights.downloadGraphType": "下载",
+  "be.contentInsights.openContentInsightsButton": "查看详细信息",
+  "be.contentInsights.peopleGraphLabel": "显示所选时间段内用户数量的图表",
+  "be.contentInsights.peopleTitle": "人员",
+  "be.contentInsights.previewGraphLabel": "显示所选时间段内预览次数的图表",
+  "be.contentInsights.previewGraphType": "预览",
+  "be.contentInsights.trendDown": "呈下降趋势",
+  "be.contentInsights.trendMonth": "过去一个月",
+  "be.contentInsights.trendThreeMonths": "过去 3 个月",
+  "be.contentInsights.trendUp": "呈上升趋势",
+  "be.contentInsights.trendWeek": "过去一周",
+  "be.contentInsights.trendYear": "过去一年",
   "be.contentSharing.badRequestError": "此项目的请求格式不正确。",
   "be.contentSharing.collaboratorsLoadingError": "无法检索此项目的协作者。",
   "be.contentSharing.getContactsError": "无法检索联系人。",

package/i18n/zh-CN.properties

@@ -69,35 +69,35 @@ be.close = 关闭
 # Message to the user to collapse the Transcript entries
 be.collapse = 折叠
 # Text shown to users when opening the content insights flyout and there is an error
-be.contentInsights.contentAnalyticsErrorText = There was a problem loading content insights. Please try again.
+be.contentInsights.contentAnalyticsErrorText = 加载内容见解时出现问题。请重试。
 # Title for Content Insights section in file sidebar
-be.contentInsights.contentInsightsTitle = Content Insights
+be.contentInsights.contentInsightsTitle = 内容见解
 # Label for the chart displaying the number of downloads over the selected time period
-be.contentInsights.downloadGraphLabel = Chart displaying the number of downloads over the selected time period
+be.contentInsights.downloadGraphLabel = 显示所选时间段内下载次数的图表
 # Title for the content insights graph card regarding number of Previews
-be.contentInsights.downloadGraphType = DOWNLOADS
+be.contentInsights.downloadGraphType = 下载
 # Open Content Insights button which opens the Content Insights Modal
-be.contentInsights.openContentInsightsButton = See Details
+be.contentInsights.openContentInsightsButton = 查看详细信息
 # Label for the chart displaying the number of users over the selected time period
-be.contentInsights.peopleGraphLabel = Chart displaying the number of users over the selected time period
+be.contentInsights.peopleGraphLabel = 显示所选时间段内用户数量的图表
 # Title used to represent how many users have interacted with the file
-be.contentInsights.peopleTitle = PEOPLE
+be.contentInsights.peopleTitle = 人员
 # Label for the chart displaying the number of previews over the selected time period
-be.contentInsights.previewGraphLabel = Chart displaying the number of previews over the selected time period
+be.contentInsights.previewGraphLabel = 显示所选时间段内预览次数的图表
 # Title for the content insights graph card regarding number of Previews
-be.contentInsights.previewGraphType = PREVIEWS
+be.contentInsights.previewGraphType = 预览
 # Label for the arrow indicator in the trend pill
-be.contentInsights.trendDown = Trending down
+be.contentInsights.trendDown = 呈下降趋势
 # Trend description for the content insights graph card regarding the count of events from the past month
-be.contentInsights.trendMonth = PAST MONTH
+be.contentInsights.trendMonth = 过去一个月
 # Trend description for the content insights graph card regarding the count of events from the past three months
-be.contentInsights.trendThreeMonths = PAST 3 MONTHS
+be.contentInsights.trendThreeMonths = 过去 3 个月
 # Label for the arrow indicator in the trend pill
-be.contentInsights.trendUp = Trending up
+be.contentInsights.trendUp = 呈上升趋势
 # Trend description for the content insights graph card regarding the count of events from the past week
-be.contentInsights.trendWeek = PAST WEEK
+be.contentInsights.trendWeek = 过去一周
 # Trend description for the content insights graph card regarding the count of events from the past year
-be.contentInsights.trendYear = PAST YEAR
+be.contentInsights.trendYear = 过去一年
 # Message that appears when the request for the ContentSharing Element is malformed.
 be.contentSharing.badRequestError = 此项目的请求格式不正确。
 # Message that appears when collaborators cannot be retrieved in the ContentSharing Element.
@@ -1558,6 +1558,8 @@ boxui.unifiedShare.contactRestrictionNotice = 无法将邀请发送给 {count, p
 boxui.unifiedShare.contactRestrictionNoticeInformationBarrier = 由于安全政策，无法向 {count, plural, other {{count} 人}}发送邀请。
 # Text for the notice that is displayed when there are Information Barrier collaboration restrictions that apply to only one of the selected contacts
 boxui.unifiedShare.contactRestrictionNoticeInformationBarrierSingular = 由于安全政策，无法向 {email} 发送邀请。
+# Text for the notice that is displayed when there are Information Barrier collaboration restrictions that apply to only one of the selected contacts, which is a group
+boxui.unifiedShare.contactRestrictionNoticeInformationBarrierSingularGroup = Invitations cannot be sent to "{groupName}" due to a security policy.
 # Text for the notice that is displayed when there are collaboration restrictions that apply to one or more of the selected contacts
 boxui.unifiedShare.contactRestrictionNoticeSingular = 无法将邀请发送给 {email}，因为外部协作因所应用的安全策略而受到限制。
 # Label for the button that removes restricted contacts on the contact restriction notice

package/i18n/zh-TW.js

@@ -5,6 +5,8 @@ export default {
   "be.activitySidebar.activityFeed.annotationMissingError": "此留言已經不存在",
   "be.activitySidebar.activityFeed.commentMissingError": "此留言已經不存在",
   "be.activitySidebar.activityFeed.feedInlineErrorTitle": "錯誤",
+  "be.activitySidebar.activityFeed.hideReplies": "Hide replies",
+  "be.activitySidebar.activityFeed.showReplies": "See {repliesToLoadCount, plural, one {# reply} other {# replies}}",
   "be.activitySidebar.activityFeed.taskMissingError": "此工作已經不存在",
   "be.activitySidebarFilter.status.all": "所有留言",
   "be.activitySidebarFilter.status.open": "未回覆的留言",
@@ -34,21 +36,21 @@ export default {
   "be.choose": "選擇",
   "be.close": "關閉",
   "be.collapse": "摺疊",
-  "be.contentInsights.contentAnalyticsErrorText": "There was a problem loading content insights. Please try again.",
-  "be.contentInsights.contentInsightsTitle": "Content Insights",
-  "be.contentInsights.downloadGraphLabel": "Chart displaying the number of downloads over the selected time period",
-  "be.contentInsights.downloadGraphType": "DOWNLOADS",
-  "be.contentInsights.openContentInsightsButton": "See Details",
-  "be.contentInsights.peopleGraphLabel": "Chart displaying the number of users over the selected time period",
-  "be.contentInsights.peopleTitle": "PEOPLE",
-  "be.contentInsights.previewGraphLabel": "Chart displaying the number of previews over the selected time period",
-  "be.contentInsights.previewGraphType": "PREVIEWS",
-  "be.contentInsights.trendDown": "Trending down",
-  "be.contentInsights.trendMonth": "PAST MONTH",
-  "be.contentInsights.trendThreeMonths": "PAST 3 MONTHS",
-  "be.contentInsights.trendUp": "Trending up",
-  "be.contentInsights.trendWeek": "PAST WEEK",
-  "be.contentInsights.trendYear": "PAST YEAR",
+  "be.contentInsights.contentAnalyticsErrorText": "載入內容深入探索時發生問題。請再試一次。",
+  "be.contentInsights.contentInsightsTitle": "內容深入探索",
+  "be.contentInsights.downloadGraphLabel": "顯示所選時段期間內下載次數的圖表",
+  "be.contentInsights.downloadGraphType": "下載",
+  "be.contentInsights.openContentInsightsButton": "查看詳細資料",
+  "be.contentInsights.peopleGraphLabel": "顯示所選時段期間內使用者人數的圖表",
+  "be.contentInsights.peopleTitle": "人員",
+  "be.contentInsights.previewGraphLabel": "顯示所選時段期間內預覽次數的圖表",
+  "be.contentInsights.previewGraphType": "預覽",
+  "be.contentInsights.trendDown": "向下趨勢",
+  "be.contentInsights.trendMonth": "過去一個月",
+  "be.contentInsights.trendThreeMonths": "過去 3 個月",
+  "be.contentInsights.trendUp": "向上趨勢",
+  "be.contentInsights.trendWeek": "過去一週",
+  "be.contentInsights.trendYear": "過去一年",
   "be.contentSharing.badRequestError": "此項目之要求的格式錯誤。",
   "be.contentSharing.collaboratorsLoadingError": "無法擷取此項目的共同作業者。",
   "be.contentSharing.getContactsError": "無法擷取連絡人。",

package/i18n/zh-TW.properties

@@ -69,35 +69,35 @@ be.close = 關閉
 # Message to the user to collapse the Transcript entries
 be.collapse = 摺疊
 # Text shown to users when opening the content insights flyout and there is an error
-be.contentInsights.contentAnalyticsErrorText = There was a problem loading content insights. Please try again.
+be.contentInsights.contentAnalyticsErrorText = 載入內容深入探索時發生問題。請再試一次。
 # Title for Content Insights section in file sidebar
-be.contentInsights.contentInsightsTitle = Content Insights
+be.contentInsights.contentInsightsTitle = 內容深入探索
 # Label for the chart displaying the number of downloads over the selected time period
-be.contentInsights.downloadGraphLabel = Chart displaying the number of downloads over the selected time period
+be.contentInsights.downloadGraphLabel = 顯示所選時段期間內下載次數的圖表
 # Title for the content insights graph card regarding number of Previews
-be.contentInsights.downloadGraphType = DOWNLOADS
+be.contentInsights.downloadGraphType = 下載
 # Open Content Insights button which opens the Content Insights Modal
-be.contentInsights.openContentInsightsButton = See Details
+be.contentInsights.openContentInsightsButton = 查看詳細資料
 # Label for the chart displaying the number of users over the selected time period
-be.contentInsights.peopleGraphLabel = Chart displaying the number of users over the selected time period
+be.contentInsights.peopleGraphLabel = 顯示所選時段期間內使用者人數的圖表
 # Title used to represent how many users have interacted with the file
-be.contentInsights.peopleTitle = PEOPLE
+be.contentInsights.peopleTitle = 人員
 # Label for the chart displaying the number of previews over the selected time period
-be.contentInsights.previewGraphLabel = Chart displaying the number of previews over the selected time period
+be.contentInsights.previewGraphLabel = 顯示所選時段期間內預覽次數的圖表
 # Title for the content insights graph card regarding number of Previews
-be.contentInsights.previewGraphType = PREVIEWS
+be.contentInsights.previewGraphType = 預覽
 # Label for the arrow indicator in the trend pill
-be.contentInsights.trendDown = Trending down
+be.contentInsights.trendDown = 向下趨勢
 # Trend description for the content insights graph card regarding the count of events from the past month
-be.contentInsights.trendMonth = PAST MONTH
+be.contentInsights.trendMonth = 過去一個月
 # Trend description for the content insights graph card regarding the count of events from the past three months
-be.contentInsights.trendThreeMonths = PAST 3 MONTHS
+be.contentInsights.trendThreeMonths = 過去 3 個月
 # Label for the arrow indicator in the trend pill
-be.contentInsights.trendUp = Trending up
+be.contentInsights.trendUp = 向上趨勢
 # Trend description for the content insights graph card regarding the count of events from the past week
-be.contentInsights.trendWeek = PAST WEEK
+be.contentInsights.trendWeek = 過去一週
 # Trend description for the content insights graph card regarding the count of events from the past year
-be.contentInsights.trendYear = PAST YEAR
+be.contentInsights.trendYear = 過去一年
 # Message that appears when the request for the ContentSharing Element is malformed.
 be.contentSharing.badRequestError = 此項目之要求的格式錯誤。
 # Message that appears when collaborators cannot be retrieved in the ContentSharing Element.
@@ -1558,6 +1558,8 @@ boxui.unifiedShare.contactRestrictionNotice = 無法傳送邀請給 {count, plur
 boxui.unifiedShare.contactRestrictionNoticeInformationBarrier = 由於安全政策，無法向 {count, plural, other {{count} 人}}發送邀請。
 # Text for the notice that is displayed when there are Information Barrier collaboration restrictions that apply to only one of the selected contacts
 boxui.unifiedShare.contactRestrictionNoticeInformationBarrierSingular = 由於安全政策，無法向 {email} 發送邀請。
+# Text for the notice that is displayed when there are Information Barrier collaboration restrictions that apply to only one of the selected contacts, which is a group
+boxui.unifiedShare.contactRestrictionNoticeInformationBarrierSingularGroup = Invitations cannot be sent to "{groupName}" due to a security policy.
 # Text for the notice that is displayed when there are collaboration restrictions that apply to one or more of the selected contacts
 boxui.unifiedShare.contactRestrictionNoticeSingular = 無法傳送邀請給 {email}，因為外部共同作業受到所套用之安全性原則的限制。
 # Label for the button that removes restricted contacts on the contact restriction notice

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "16.0.0-beta.21",
+    "version": "16.0.0-beta.23",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

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

@@ -110,7 +110,20 @@ const ActiveState = ({
                                 isFocused={isFocused}
                                 ref={refValue}
                             >
-                                <ActivityThread hasReplies={hasReplies} data-testid="activity-thread">
+                                <ActivityThread
+                                    data-testid="activity-thread"
+                                    onReplyDelete={onCommentDelete}
+                                    onReplyEdit={onCommentEdit}
+                                    currentUser={currentUser}
+                                    getAvatarUrl={getAvatarUrl}
+                                    hasReplies={hasReplies}
+                                    getMentionWithQuery={getMentionWithQuery}
+                                    getUserProfileUrl={getUserProfileUrl}
+                                    mentionSelectorContacts={mentionSelectorContacts}
+                                    repliesTotalCount={item.total_reply_count}
+                                    replies={item.replies}
+                                    translations={translations}
+                                >
                                     <Comment
                                         {...item}
                                         currentUser={currentUser}
@@ -187,7 +200,20 @@ const ActiveState = ({
                                 isFocused={isFocused}
                                 ref={refValue}
                             >
-                                <ActivityThread hasReplies={hasReplies} data-testid="activity-thread">
+                                <ActivityThread
+                                    data-testid="activity-thread"
+                                    onReplyDelete={onCommentDelete}
+                                    onReplyEdit={onCommentEdit}
+                                    currentUser={currentUser}
+                                    getAvatarUrl={getAvatarUrl}
+                                    getMentionWithQuery={getMentionWithQuery}
+                                    getUserProfileUrl={getUserProfileUrl}
+                                    hasReplies={hasReplies}
+                                    mentionSelectorContacts={mentionSelectorContacts}
+                                    repliesTotalCount={item.total_reply_count}
+                                    replies={item.replies}
+                                    translations={translations}
+                                >
                                     <AnnotationActivity
                                         currentUser={currentUser}
                                         getAvatarUrl={getAvatarUrl}

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

@@ -1,16 +1,104 @@
 // @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 type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
+import type { Translations } from '../../flowTypes';
+import type { SelectorItems, User } from '../../../../common/types/core';
+import type { Comment as CommentType } 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,
+    isRepliesLoading?: boolean,
+    mentionSelectorContacts?: SelectorItems<>,
+    onGetReplies?: () => void,
+    onReplyDelete?: Function,
+    onReplyEdit?: Function,
+    replies?: Array<CommentType>,
+    repliesTotalCount?: number,
+    translations?: Translations,
 };
 
-const ActivityThread = ({ children, hasReplies }: Props) => {
-    if (hasReplies) {
-        return <div className="bcs-ActivityThread">{children}</div>;
+const ActivityThread = ({
+    children,
+    currentUser,
+    getAvatarUrl,
+    getMentionWithQuery,
+    getUserProfileUrl,
+    hasReplies,
+    isRepliesLoading,
+    mentionSelectorContacts,
+    onGetReplies = noop,
+    onReplyDelete = noop,
+    onReplyEdit = noop,
+    replies = [],
+    repliesTotalCount = 0,
+    translations,
+}: Props) => {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+
+    const toggleButtonLabel = isExpanded ? messages.hideReplies : messages.showReplies;
+    const repliesToLoadCount = Math.max(repliesTotalCount - 1, 0);
+
+    const toggleReplies = () => {
+        if (!isExpanded) {
+            onGetReplies();
+        }
+        setIsExpanded(previousState => !previousState);
+    };
+
+    if (!hasReplies) {
+        return children;
     }
-    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>
+            )}
+            {!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 && (
+                <ActivityThreadReplies
+                    currentUser={currentUser}
+                    getAvatarUrl={getAvatarUrl}
+                    getMentionWithQuery={getMentionWithQuery}
+                    getUserProfileUrl={getUserProfileUrl}
+                    isExpanded={isExpanded}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                    onDelete={onReplyDelete}
+                    onEdit={onReplyEdit}
+                    replies={replies}
+                    translations={translations}
+                />
+            )}
+        </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,87 @@
+// @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/__tests__/ActivityThread.test.js

@@ -1,22 +1,68 @@
 // @flow
 import React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
-
+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 getWrapper = (props = {}): ShallowWrapper => shallow(<ActivityThread {...props}>Test</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 wrapped in ActivityCard if hasReplies is true', () => {
-        const wrapper = getWrapper({ hasReplies: true });
+    test('should render children component if hasReplies is false', () => {
+        const { getByText } = getWrapper({ hasReplies: false });
 
-        expect(wrapper.find('.bcs-ActivityThread')).toHaveLength(1);
-        expect(wrapper.text()).toEqual('Test');
+        expect(screen.queryByTestId('activity-thread')).not.toBeInTheDocument();
+        expect(getByText('Test')).toBeVisible();
     });
-    test('should render children component if hasReplies if false', () => {
-        const wrapper = getWrapper({ hasReplies: false });
 
-        expect(wrapper.find('bcs-ActivityThread')).toHaveLength(0);
-        expect(wrapper.text()).toEqual('Test');
+    test('should call onGetReplies on button click', () => {
+        const onGetReplies = jest.fn();
+        const { getByText } = getWrapper({ onGetReplies });
+
+        const button = getByText(localize(messages.showReplies.id, { repliesToLoadCount: 1 }));
+        expect(button).toBeVisible();
+        fireEvent.click(button);
+
+        expect(onGetReplies).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();
     });
 });

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__/__snapshots__/ActiveState.test.js.snap

@@ -50,6 +50,12 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
     key="annotationanno_123"
   >
     <ActivityThread
+      currentUser={
+        Object {
+          "id": "user_123445",
+          "name": "Rihanna",
+        }
+      }
       data-testid="activity-thread"
       hasReplies={false}
     >
@@ -94,6 +100,12 @@ exports[`elements/content-sidebar/ActiveState/activity-feed/ActiveState should r
     key="commentc_123"
   >
     <ActivityThread
+      currentUser={
+        Object {
+          "id": "user_123445",
+          "name": "Rihanna",
+        }
+      }
       data-testid="activity-thread"
       hasReplies={false}
     >