🐛 Fixed avatar on comment reply form not showing your avatar

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

@@ -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>
     );

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}

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');