Fix comments UI nullable reply HTML handling

apps/comments-ui/src/components/content/comment.tsx

@@ -133,8 +133,11 @@ const PublishedComment: React.FC<PublishedCommentProps> = ({children, comment, p
             const inReplyToDetails: Partial<OpenCommentForm> = {};
 
             if (parent) {
+                if (comment.html === null) {
+                    return;
+                }
                 inReplyToDetails.in_reply_to_id = comment.id;
-                inReplyToDetails.in_reply_to_snippet = getCommentInReplyToSnippet(comment);
+                inReplyToDetails.in_reply_to_snippet = getCommentInReplyToSnippet({html: comment.html});
             }
 
             const newForm: OpenCommentForm = {
@@ -166,7 +169,7 @@ const PublishedComment: React.FC<PublishedCommentProps> = ({children, comment, p
             layoutVariant={layoutVariant}
             memberUuid={comment.member?.uuid}
             replies={<RepliesContainer comment={comment} parent={parent} useThreading={useThreading}>{children}</RepliesContainer>}
-            replyForm={displayReplyForm ? <ReplyFormBox continueLine={hasChildReplies} openForm={openForm} parent={replyFormParent} useThreading={useThreading} /> : null}
+            replyForm={displayReplyForm && openForm ? <ReplyFormBox continueLine={hasChildReplies} openForm={openForm} parent={replyFormParent} useThreading={useThreading} /> : null}
             useThreading={useThreading}
         >
             <div id={comment.id}>
@@ -178,7 +181,7 @@ const PublishedComment: React.FC<PublishedCommentProps> = ({children, comment, p
                 ) : (
                     <>
                         <CommentHeader className={hiddenClass} comment={comment} useThreading={useThreading} />
-                        <CommentBody className={hiddenClass} html={comment.html} isHighlighted={isHighlighted} />
+                        {comment.html && <CommentBody className={hiddenClass} html={comment.html} isHighlighted={isHighlighted} />}
                         <CommentMenu
                             comment={comment}
                             highlightReplyButton={highlightReplyButton}
@@ -230,7 +233,7 @@ const UnpublishedComment: React.FC<React.PropsWithChildren<UnpublishedCommentPro
             isPinned={comment.pinned}
             layoutVariant={layoutVariant}
             replies={<RepliesContainer comment={comment} parent={parent} useThreading={useThreading}>{children}</RepliesContainer>}
-            replyForm={displayReplyForm ? <ReplyFormBox continueLine={hasChildReplies} openForm={openForm} parent={replyFormParent} useThreading={useThreading} /> : null}
+            replyForm={displayReplyForm && openForm ? <ReplyFormBox continueLine={hasChildReplies} openForm={openForm} parent={replyFormParent} useThreading={useThreading} /> : null}
             useThreading={useThreading}
         >
             <div className="mt-[-3px] flex items-start" id={comment.id}>

apps/comments-ui/test/e2e/content.test.ts

@@ -132,5 +132,44 @@ test.describe('Deleted and Hidden Content', async () => {
         // parent comment is hidden but shows text
         await expect (frame.getByText('This comment has been hidden')).toBeVisible();
     });
-});
 
+    test('deleted reply with null html renders as a tombstone without actions', async ({page}) => {
+        const mockedApi = new MockedApi({});
+        const childReply = mockedApi.buildReply({
+            id: 'child-reply',
+            html: '<p>Visible child reply</p>',
+            in_reply_to_id: 'deleted-reply',
+            in_reply_to_snippet: '[removed]'
+        });
+
+        mockedApi.addComment({
+            id: 'parent-comment',
+            html: '<p>Parent comment</p>',
+            replies: [
+                mockedApi.buildReply({
+                    id: 'deleted-reply',
+                    html: null,
+                    status: 'deleted',
+                    replies: [childReply]
+                }),
+                childReply
+            ]
+        });
+
+        const {frame} = await initialize({
+            mockedApi,
+            page,
+            publication: 'Publisher Weekly',
+            labs: {
+                commentsThreads: true
+            }
+        });
+
+        const deletedReply = frame.locator('[id="deleted-reply"]');
+        await expect(deletedReply).toContainText('This comment has been removed');
+        await expect(deletedReply.getByTestId('comment-content')).toHaveCount(0);
+        await expect(deletedReply.getByTestId('reply-button')).toHaveCount(0);
+        await expect(deletedReply.getByTestId('like-button')).toHaveCount(0);
+        await expect(frame.getByText('Visible child reply')).toBeVisible();
+    });
+});