From c4b19b77c98b404c60a9c2822d65a8f94bca4976 Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 4 Aug 2026 17:18:21 -0400 Subject: [PATCH 1/2] fix: size and crop Studio profile avatars --- src/studio-header/StudioHeader.test.tsx | 4 ++++ src/studio-header/UserMenu.tsx | 12 +++--------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/studio-header/StudioHeader.test.tsx b/src/studio-header/StudioHeader.test.tsx index 3f6e228793..62b2a12379 100644 --- a/src/studio-header/StudioHeader.test.tsx +++ b/src/studio-header/StudioHeader.test.tsx @@ -120,6 +120,8 @@ describe('Header', () => { const avatarIcon = getByTestId('avatar-icon'); expect(avatarIcon).toBeVisible(); + expect(avatarIcon).toHaveAttribute('alt', authenticatedUser.username); + expect(avatarIcon).toHaveClass('pgn__avatar-sm', 'mr-2'); }); it('user menu should use avatar icon when hydrated profile image has no image', async () => { @@ -152,6 +154,8 @@ describe('Header', () => { expect(avatarImage).toBeVisible(); expect(avatarImage).toHaveAttribute('src', '/profile-images/abc123-medium.png'); + expect(avatarImage).toHaveAttribute('alt', authenticatedUser.username); + expect(avatarImage).toHaveClass('pgn__avatar-sm', 'mr-2'); }); it('user menu should prefer avatar over hydrated profile image', async () => { diff --git a/src/studio-header/UserMenu.tsx b/src/studio-header/UserMenu.tsx index 66add10cb4..b9c94bd5b6 100644 --- a/src/studio-header/UserMenu.tsx +++ b/src/studio-header/UserMenu.tsx @@ -16,19 +16,13 @@ const UserMenu = ({ isAdmin, }) => { const intl = useIntl(); - const avatar = authenticatedUserAvatar ? ( - {username} - ) : ( + const avatar = ( ); const title = isMobile ? avatar : <>{avatar}{username}; From b94956fbdd941b0ef2b759d94406333861208886 Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 4 Aug 2026 17:53:08 -0400 Subject: [PATCH 2/2] fix: use hydrated profile image in Studio header --- src/studio-header/StudioHeader.test.tsx | 31 ++++++++----------------- src/studio-header/StudioHeader.tsx | 3 +-- 2 files changed, 11 insertions(+), 23 deletions(-) diff --git a/src/studio-header/StudioHeader.test.tsx b/src/studio-header/StudioHeader.test.tsx index 62b2a12379..49844b9054 100644 --- a/src/studio-header/StudioHeader.test.tsx +++ b/src/studio-header/StudioHeader.test.tsx @@ -18,7 +18,6 @@ const authenticatedUser = { username: 'abc123', administrator: true, roles: [], - avatar: '/imges/test.png', }; let currentUser; let screenWidth = 1280; @@ -115,7 +114,6 @@ describe('Header', () => { }); it('user menu should use avatar icon', async () => { - currentUser = { ...authenticatedUser, avatar: null }; const { getByTestId } = render(); const avatarIcon = getByTestId('avatar-icon'); @@ -127,7 +125,6 @@ describe('Header', () => { it('user menu should use avatar icon when hydrated profile image has no image', async () => { currentUser = { ...authenticatedUser, - avatar: null, profileImage: { hasImage: false, imageUrlMedium: '/profile-images/abc123-medium.png', @@ -140,10 +137,9 @@ describe('Header', () => { expect(queryByTestId('avatar-image')).not.toBeInTheDocument(); }); - it('user menu should use hydrated profile image when avatar is not present', async () => { + it('user menu should use hydrated profile image when available', async () => { currentUser = { ...authenticatedUser, - avatar: null, profileImage: { hasImage: true, imageUrlMedium: '/profile-images/abc123-medium.png', @@ -158,21 +154,6 @@ describe('Header', () => { expect(avatarImage).toHaveClass('pgn__avatar-sm', 'mr-2'); }); - it('user menu should prefer avatar over hydrated profile image', async () => { - currentUser = { - ...authenticatedUser, - profileImage: { - hasImage: true, - imageUrlMedium: '/profile-images/abc123-medium.png', - }, - }; - const { getByTestId } = render(); - const avatarImage = getByTestId('avatar-image'); - - expect(avatarImage).toBeVisible(); - expect(avatarImage).toHaveAttribute('src', authenticatedUser.avatar); - }); - it('should hide nav items if prop isHiddenMainMenu true', async () => { const initialProps = { ...props, isHiddenMainMenu: true }; const { queryByTestId } = render(); @@ -226,11 +207,19 @@ describe('Header', () => { expect(desktopMenu).toBeNull(); }); - it('user menu should use avatar image', async () => { + it('user menu should use hydrated profile image', async () => { + currentUser = { + ...authenticatedUser, + profileImage: { + hasImage: true, + imageUrlMedium: '/profile-images/abc123-medium.png', + }, + }; const { getByTestId } = render(); const avatarImage = getByTestId('avatar-image'); expect(avatarImage).toBeVisible(); + expect(avatarImage).toHaveAttribute('src', '/profile-images/abc123-medium.png'); }); it('should hide nav items if prop isHiddenMainMenu true', async () => { diff --git a/src/studio-header/StudioHeader.tsx b/src/studio-header/StudioHeader.tsx index 27335e9925..81b392502d 100644 --- a/src/studio-header/StudioHeader.tsx +++ b/src/studio-header/StudioHeader.tsx @@ -41,8 +41,7 @@ const StudioHeader: FunctionComponent = ({ // @ts-expect-error - frontend-platform doesn't yet have type information :/ const { authenticatedUser, config } = useContext(AppContext); const profileImage = authenticatedUser?.profileImage; - const authenticatedUserAvatar = authenticatedUser?.avatar - || (profileImage?.hasImage ? profileImage.imageUrlMedium : null); + const authenticatedUserAvatar = profileImage?.hasImage ? profileImage.imageUrlMedium : null; const props = { logo: config.LOGO_URL, logoAltText: `Studio ${config.SITE_NAME}`,