diff --git a/apps/comments-ui/src/components/content/Avatar.tsx b/apps/comments-ui/src/components/content/Avatar.tsx index d12dca1597..d3c864f859 100644 --- a/apps/comments-ui/src/components/content/Avatar.tsx +++ b/apps/comments-ui/src/components/content/Avatar.tsx @@ -19,7 +19,6 @@ export const BlankAvatar = () => { type AvatarProps = { comment?: Comment; - isHidden?: boolean; }; export const Avatar: React.FC = ({comment}) => { // #TODO greyscale the avatar image when it's hidden diff --git a/apps/comments-ui/src/components/content/Comment.tsx b/apps/comments-ui/src/components/content/Comment.tsx index 2fc5b715a1..5ef5d7d6b8 100644 --- a/apps/comments-ui/src/components/content/Comment.tsx +++ b/apps/comments-ui/src/components/content/Comment.tsx @@ -168,10 +168,10 @@ type UnpublishedCommentProps = { openEditMode: () => void; } const UnpublishedComment: React.FC = ({comment, openEditMode}) => { - const {t, labs, admin} = useAppContext(); + const {openCommentForms, t, labs, admin} = useAppContext(); const avatar = (labs.commentImprovements && admin && comment.status !== 'deleted') ? - : + : ; const hasReplies = comment.replies && comment.replies.length > 0; @@ -181,6 +181,12 @@ const UnpublishedComment: React.FC = ({comment, openEdi t('This comment has been removed.') : ''; + // currently a reply-to-reply form is displayed inside the top-level PublishedComment component + // so we need to check for a match of either the comment id or the parent id + const openForm = openCommentForms.find(f => (f.id === comment.id || f.parent_id === comment.id) && f.type === 'reply'); + // avoid displaying the reply form inside RepliesContainer + const displayReplyForm = openForm && (!openForm.parent_id || openForm.parent_id === comment.id); + // Only show MoreButton for hidden (not deleted) comments when admin const showMoreButton = admin && comment.status === 'hidden'; @@ -199,6 +205,7 @@ const UnpublishedComment: React.FC = ({comment, openEdi + {displayReplyForm && } ); }; diff --git a/apps/comments-ui/test/e2e/actions.test.ts b/apps/comments-ui/test/e2e/actions.test.ts index b0cfd5b530..1517361657 100644 --- a/apps/comments-ui/test/e2e/actions.test.ts +++ b/apps/comments-ui/test/e2e/actions.test.ts @@ -142,16 +142,7 @@ test.describe('Actions', async () => { expect(replyComment.getByTestId('reply-button')).not.toBeVisible(); }); - test('Can reply to a reply', async ({page}) => { - mockedApi.addComment({ - html: '

This is comment 1

', - replies: [ - mockedApi.buildReply({ - html: '

This is a reply to 1

' - }) - ] - }); - + async function testReplyToReply(mockedApi, page) { const {frame} = await initialize({ mockedApi, page, @@ -193,6 +184,33 @@ test.describe('Actions', async () => { // Should indicate this was a reply to a reply await expect(frame.getByTestId('comment-in-reply-to')).toHaveText('This is a reply to 1'); + } + + test('Can reply to a reply', async ({page}) => { + mockedApi.addComment({ + html: '

This is comment 1

', + replies: [ + mockedApi.buildReply({ + html: '

This is a reply to 1

' + }) + ] + }); + + await testReplyToReply(mockedApi, page); + }); + + test('Can reply to a reply with a deleted parent comment', async function ({page}) { + mockedApi.addComment({ + html: '

This is comment 1

', + status: 'deleted', + replies: [ + mockedApi.buildReply({ + html: '

This is a reply to 1

' + }) + ] + }); + + await testReplyToReply(mockedApi, page); }); test('Can add expertise', async ({page}) => {