From 49595dce0fd9c826e641166cc9c36384312a2306 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 18 Nov 2024 11:27:47 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20avatar=20on=20comment=20?=
 =?UTF-8?q?reply=20form=20not=20showing=20your=20avatar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes https://linear.app/ghost/issue/PLG-260
ref https://github.com/TryGhost/Ghost/pull/21621

- in a recent refactor, a `comment` prop started being passed through to `<Form>` inside of `<ReplyForm>` which had an unexpected side-effect of changing the avatar image to the comment's member instead of the logged-in member
- removed the prop passthrough and updated test to catch future regressios
---
 apps/comments-ui/src/components/content/Avatar.tsx     |  6 +++---
 .../src/components/content/forms/ReplyForm.tsx         |  1 -
 apps/comments-ui/test/e2e/actions.test.ts              | 10 +++++++++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/comments-ui/src/components/content/Avatar.tsx b/apps/comments-ui/src/components/content/Avatar.tsx
index 2a9b6a2bc9..f419210735 100644
--- a/apps/comments-ui/src/components/content/Avatar.tsx
+++ b/apps/comments-ui/src/components/content/Avatar.tsx
@@ -64,7 +64,7 @@ export const Avatar: React.FC<AvatarProps> = ({comment}) => {
         return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
     };
 
-    const memberInitials = (comment && getMemberInitialsFromComment(comment, t)) || 
+    const memberInitials = (comment && getMemberInitialsFromComment(comment, t)) ||
         (member && getInitials(member.name || '')) || '';
     const commentMember = (comment ? comment.member : member);
 
@@ -82,12 +82,12 @@ export const Avatar: React.FC<AvatarProps> = ({comment}) => {
                 (<div className={`flex items-center justify-center rounded-full bg-neutral-900 dark:bg-white/70 ${dimensionClasses}`} data-testid="avatar-background">
                     <AvatarIcon className="stroke-white dark:stroke-black/60" />
                 </div>)}
-            {commentMember && <img alt="Avatar" className={`absolute left-0 top-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image}/>}
+            {commentMember && <img alt="Avatar" className={`absolute left-0 top-0 rounded-full ${dimensionClasses}`} data-testid="avatar-image" src={commentMember.avatar_image} />}
         </>
     );
 
     return (
-        <figure className={`relative ${dimensionClasses}`}>
+        <figure className={`relative ${dimensionClasses}`} data-testid="avatar">
             {avatarEl}
         </figure>
     );
diff --git a/apps/comments-ui/src/components/content/forms/ReplyForm.tsx b/apps/comments-ui/src/components/content/forms/ReplyForm.tsx
index 285f8b348b..5e18a13f10 100644
--- a/apps/comments-ui/src/components/content/forms/ReplyForm.tsx
+++ b/apps/comments-ui/src/components/content/forms/ReplyForm.tsx
@@ -48,7 +48,6 @@ const ReplyForm: React.FC<Props> = ({openForm, parent}) => {
             <div className='mt-[-16px] pr-3'>
                 <Form
                     close={close}
-                    comment={parent}
                     editor={editor}
                     isOpen={true}
                     openForm={openForm}
diff --git a/apps/comments-ui/test/e2e/actions.test.ts b/apps/comments-ui/test/e2e/actions.test.ts
index 31ec919565..7c9f0fa5d1 100644
--- a/apps/comments-ui/test/e2e/actions.test.ts
+++ b/apps/comments-ui/test/e2e/actions.test.ts
@@ -6,7 +6,11 @@ test.describe('Actions', async () => {
 
     test.beforeEach(async () => {
         mockedApi = new MockedApi({});
-        mockedApi.setMember({});
+        mockedApi.setMember({
+            name: 'John Doe',
+            expertise: 'Software development',
+            avatar_image: 'https://example.com/avatar.jpg'
+        });
     });
 
     test('Can like and unlike a comment', async ({page}) => {
@@ -94,6 +98,10 @@ test.describe('Actions', async () => {
         // Wait for focused
         await waitEditorFocused(editor);
 
+        // Ensure form data is correct
+        const form = frame.getByTestId('form');
+        await expect(form.getByTestId('avatar-image')).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+
         // Type some text
         await page.keyboard.type('This is a reply 123');
         await expect(editor).toHaveText('This is a reply 123');