Skip to content

fix: size and crop Studio profile avatars #678

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arbrandes merged 2 commits into from
Aug 6, 2026
+18 −32
Merged

fix: size and crop Studio profile avatars #678

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4b19b7
fix: size and crop Studio profile avatars
edschema Aug 4, 2026
b94956f
fix: use hydrated profile image in Studio header
edschema Aug 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 14 additions & 21 deletions src/studio-header/StudioHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ const authenticatedUser = {
username: 'abc123',
administrator: true,
roles: [],
avatar: '/imges/test.png',
};
let currentUser;
let screenWidth = 1280;
Expand Down Expand Up @@ -115,17 +114,17 @@ describe('Header', () => {
});

it('user menu should use avatar icon', async () => {
currentUser = { ...authenticatedUser, avatar: null };
const { getByTestId } = render(<RootWrapper {...props} />);
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 () => {
currentUser = {
...authenticatedUser,
avatar: null,
profileImage: {
hasImage: false,
imageUrlMedium: '/profile-images/abc123-medium.png',
Expand All @@ -138,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',
Expand All @@ -152,21 +150,8 @@ describe('Header', () => {

expect(avatarImage).toBeVisible();
expect(avatarImage).toHaveAttribute('src', '/profile-images/abc123-medium.png');
});

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(<RootWrapper {...props} />);
const avatarImage = getByTestId('avatar-image');

expect(avatarImage).toBeVisible();
expect(avatarImage).toHaveAttribute('src', authenticatedUser.avatar);
expect(avatarImage).toHaveAttribute('alt', authenticatedUser.username);
expect(avatarImage).toHaveClass('pgn__avatar-sm', 'mr-2');
});

it('should hide nav items if prop isHiddenMainMenu true', async () => {
Expand Down Expand Up @@ -222,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(<RootWrapper {...props} />);
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 () => {
Expand Down
3 changes: 1 addition & 2 deletions src/studio-header/StudioHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,7 @@ const StudioHeader: FunctionComponent<Props> = ({
// @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}`,
Expand Down
12 changes: 3 additions & 9 deletions src/studio-header/UserMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,13 @@ const UserMenu = ({
isAdmin,
}) => {
const intl = useIntl();
const avatar = authenticatedUserAvatar ? (
<img
className="d-block w-100 h-100"
src={authenticatedUserAvatar}
alt={username}
data-testid="avatar-image"
/>
) : (
const avatar = (
<Avatar
src={authenticatedUserAvatar}
size="sm"
className="mr-2"
alt={username}
data-testid="avatar-icon"
data-testid={authenticatedUserAvatar ? 'avatar-image' : 'avatar-icon'}
/>
);
const title = isMobile ? avatar : <>{avatar}{username}</>;
Expand Down
Loading