feat(threaded-replies): hide reply

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

@@ -6,7 +6,7 @@
 
         // 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 * 3 $bdl-grid-unit * 3 $bdl-grid-unit * 5;
+            padding: $bdl-grid-unit * 3 $bdl-grid-unit * 3 $bdl-grid-unit;
         }
 
         &.bcs-is-hoverable:hover {

src/elements/content-sidebar/activity-feed/comment/BaseComment.js

@@ -234,6 +234,7 @@ export const BaseComment = ({
                     onReplyDelete={onReplyDelete}
                     onReplySelect={onSelect}
                     onShowReplies={onShowReplies}
+                    parentStatus={status}
                     replies={replies}
                     repliesTotalCount={repliesTotalCount}
                 />
@@ -257,6 +258,7 @@ type RepliesProps = {
     onReplyDelete?: ({ id: string, permissions?: BoxCommentPermission }) => void,
     onReplySelect?: (isSelected: boolean) => void,
     onShowReplies?: () => void,
+    parentStatus?: string,
     replies: CommentType[],
     repliesTotalCount?: number,
     translations?: Translations,
@@ -276,6 +278,7 @@ export const Replies = ({
     onReplySelect = noop,
     onShowReplies,
     onHideReplies,
+    parentStatus,
     replies,
     repliesTotalCount = 0,
     translations,
@@ -346,7 +349,7 @@ export const Replies = ({
                     })}
                 </ol>
             </div>
-            {!!onReplyCreate && (
+            {parentStatus !== COMMENT_STATUS_RESOLVED && !!onReplyCreate && (
                 <CreateReply
                     getMentionWithQuery={getMentionWithQuery}
                     isDisabled={isParentPending}

src/elements/content-sidebar/activity-feed/comment/CreateReply.scss

@@ -1,6 +1,8 @@
 @import '../../../common/variables';
 
 .bcs-CreateReply {
+    margin-bottom: $bdl-grid-unit * 4;
+
     .bcs-CreateReply-toggle {
         display: flex;
         align-items: center;

src/elements/content-sidebar/activity-feed/comment/__tests__/Replies.test.js

@@ -5,6 +5,7 @@ import { IntlProvider } from 'react-intl';
 import { ContentState, EditorState } from 'draft-js';
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import { Replies } from '../BaseComment';
+import { COMMENT_STATUS_OPEN, COMMENT_STATUS_RESOLVED } from '../../../../../constants';
 
 jest.mock('../../Avatar', () => () => 'Avatar');
 jest.mock('react-intl', () => ({
@@ -221,6 +222,18 @@ describe('elements/content-sidebar/ActivityFeed/comment/Replies', () => {
         expect(hideReplies).not.toBeCalled();
     });
 
+    test('should hide reply button for resolved parent comments', () => {
+        getWrapper({ parentStatus: COMMENT_STATUS_RESOLVED });
+
+        expect(screen.queryByRole('button', { name: 'Reply' })).not.toBeInTheDocument();
+    });
+
+    test('should show reply button for unresolved parent comments', () => {
+        getWrapper({ parentStatus: COMMENT_STATUS_OPEN });
+
+        expect(screen.queryByRole('button', { name: 'Reply' })).toBeInTheDocument();
+    });
+
     test.each`
         onShowReplies  | onHideReplies
         ${showReplies} | ${undefined}