Fixed reply-to-reply comment form not showing when parent is hidden

closes https://linear.app/ghost/issue/PLG-266

- the reply form is a child of the parent comment component but we have different comment components for published vs unpublished with the bug coming from the latter missing the logic to display the form
- added missing form display and added a regression test

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<AvatarProps> = ({comment}) => {
     // #TODO greyscale the avatar image when it's hidden

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

@@ -168,10 +168,10 @@ type UnpublishedCommentProps = {
     openEditMode: () => void;
 }
 const UnpublishedComment: React.FC<UnpublishedCommentProps> = ({comment, openEditMode}) => {
-    const {t, labs, admin} = useAppContext();
+    const {openCommentForms, t, labs, admin} = useAppContext();
 
     const avatar = (labs.commentImprovements && admin && comment.status !== 'deleted') ?
-        <Avatar comment={comment} isHidden={true} /> :
+        <Avatar comment={comment} /> :
         <BlankAvatar />;
     const hasReplies = comment.replies && comment.replies.length > 0;
 
@@ -181,6 +181,12 @@ const UnpublishedComment: React.FC<UnpublishedCommentProps> = ({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<UnpublishedCommentProps> = ({comment, openEdi
                 </div>
             </div>
             <RepliesContainer comment={comment} />
+            {displayReplyForm && <ReplyFormBox comment={comment} openForm={openForm} />}
         </CommentLayout>
     );
 };

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: '<p>This is comment 1</p>',
-            replies: [
-                mockedApi.buildReply({
-                    html: '<p>This is a reply to 1</p>'
-                })
-            ]
-        });
-
+    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: '<p>This is comment 1</p>',
+            replies: [
+                mockedApi.buildReply({
+                    html: '<p>This is a reply to 1</p>'
+                })
+            ]
+        });
+
+        await testReplyToReply(mockedApi, page);
+    });
+
+    test('Can reply to a reply with a deleted parent comment', async function ({page}) {
+        mockedApi.addComment({
+            html: '<p>This is comment 1</p>',
+            status: 'deleted',
+            replies: [
+                mockedApi.buildReply({
+                    html: '<p>This is a reply to 1</p>'
+                })
+            ]
+        });
+
+        await testReplyToReply(mockedApi, page);
     });
 
     test('Can add expertise', async ({page}) => {