ref(scraps) refactor and test avatar component by JonasBa · Pull Request #107799 · getsentry/sentry

JonasBa · 2026-02-06T19:31:45Z

Refactor avatar components to modular architecture

The old BaseAvatar component handled all avatar types in one place with a complex props interface that couldn't catch invalid prop combinations. The fallback logic propagated child updates back to parents through callbacks, making the flow indirect and hard to follow.

This splits it into dedicated LetterAvatar, Gravatar, and ImageAvatar components with a type-discriminated Avatar entry point. The new API is explicit: both ImageAvatar and Gravatar directly render LetterAvatar when images fail to load, no callback propagation needed. TypeScript discriminated unions prevent invalid prop combinations.

The refactor makes it much clearer that UserAvatar, TeamAvatar, and OrganizationAvatar are just thin wrappers that extract avatar data from their respective Sentry entities and pass it to the base Avatar component. Includes comprehensive test coverage and fixes 2 test failures relying on removed title attributes.

…dules

JonasBa · 2026-02-06T19:35:28Z

static/app/components/commitRow.tsx

+          customAvatar
+        ) : commit.author ? (
+          <UserAvatar size={16} user={commit.author} />
+        ) : null}


null rendering was previously implicit when user was falsy

JonasBa · 2026-02-06T19:35:35Z

static/app/components/commitRow.tsx

            }
          >
-            <UserAvatar size={36} user={commit.author} />
+            {commit.author ? <UserAvatar size={36} user={commit.author} /> : null}


null rendering was previously implicit when user was falsy

JonasBa · 2026-02-06T19:35:39Z

static/app/components/commitRow.tsx

-        <div>
-          <UserAvatar size={36} user={commit.author} />
-        </div>
+        <div>{commit.author ? <UserAvatar size={36} user={commit.author} /> : null}</div>


null rendering was previously implicit when user was falsy

JonasBa · 2026-02-06T19:35:47Z

static/app/views/releases/detail/commitsAndFiles/releaseCommit.tsx

@@ -64,7 +64,7 @@ export function ReleaseCommit({commit}: ReleaseCommitProps) {
      <CommitContent>
        <Message>{formatCommitMessage(commit.message)}</Message>
        <MetaWrapper>
-          <UserAvatar size={16} user={commit.author} />
+          {commit.author ? <UserAvatar size={16} user={commit.author} /> : null}


null rendering was previously implicit when user was falsy

JonasBa · 2026-02-06T19:35:50Z

static/app/views/releases/detail/overview/sidebar/commitAuthorBreakdown.tsx

@@ -99,7 +99,7 @@ function CommitAuthorBreakdown({orgId, projectSlug, version}: Props) {
        >
          {sortedAuthorsByNumberOfCommits.map(({commitCount, author}, index) => (
            <AuthorLine key={author?.email ?? index}>
-              <UserAvatar user={author} size={20} hasTooltip />
+              {author ? <UserAvatar user={author} size={20} hasTooltip /> : null}


null rendering was previously implicit when user was falsy

JonasBa · 2026-02-06T19:36:07Z

static/app/components/suggestedAvatarStack.tsx

 const Avatar = styled(ActorAvatar)<{index: number; reverse: boolean}>`
-  ${translateStyles}
+  transform: translateX(${p => (p.reverse ? 60 * p.index : 60 * -p.index)}%);


unnecessary wrapper

JonasBa · 2026-02-06T19:39:13Z

static/app/components/events/contexts/utils.tsx

+        <UserAvatar
+          user={user}
+          size={parseInt(iconSize, 10)}
+          // gravatar={false}


Avatars are visual identifier, and we should aim for them to be as stable as possible. There should never be a case where a user avatar is displayed as a letter avatar on one page vs a gravatar on all the rest.

JonasBa · 2026-02-06T19:39:30Z

static/app/components/events/autofix/v2/artifactCards.tsx

                      <Flex align="center" gap="md" paddingLeft="xs">
                        {hasAssigneeMatch && userForAvatar ? (
-                          <UserAvatar user={userForAvatar} size={24} gravatar />
+                          <UserAvatar user={userForAvatar} size={24} />


Avatars are visual identifier, and we should aim for them to be as stable as possible. There should never be a case where a user avatar is displayed as a letter avatar on one page vs a gravatar on all the rest.

JonasBa · 2026-02-06T19:39:50Z

static/app/components/discover/quickContextCommitRow.tsx

  return (
    <StyledPanelItem key={commit.id} data-test-id="quick-context-commit-row">
-      <UserAvatar size={24} user={commit.author} />
+      {commit.author ? <UserAvatar size={24} user={commit.author} /> : null}


null rendering was previously implicit when user was falsy

JonasBa · 2026-02-06T19:44:12Z

static/app/components/core/avatar/userAvatar.tsx

-        letterId: user.name,
-        title: user.name,
-        uploadUrl: '',
+function getUserAvatarProps(


It is now much clearer that these are just thin wrappers around our Avatar component. It also opens up the case where we can say that these are Sentry specific, not scraps, and should live somewhere in the sentry/components folder.

JonasBa · 2026-02-06T19:46:21Z

static/app/components/core/avatar/gravatar.spec.tsx

@@ -1,28 +0,0 @@
-import {render, screen} from 'sentry-test/reactTestingLibrary';


These files have been moved to sub folders, as they are the building block that our entity avatars build on

JonasBa · 2026-02-06T19:46:33Z

static/app/components/core/avatar/gravatar.tsx

@@ -1,97 +0,0 @@
-import {useEffect, useState} from 'react';


These files have been moved to sub folders, as they are the building block that our entity avatars build on

JonasBa · 2026-02-06T19:47:02Z

static/app/components/core/avatar/avatarList.tsx

  );
 }

-function AvatarList({


This was the last module that was using the default export

JonasBa · 2026-02-06T19:48:06Z

static/app/components/core/avatar/avatar.tsx

+export function Avatar({
+  ref,
+  className,
+  size,
+  style,
+  tooltip,
+  tooltipOptions,
+  hasTooltip = false,
+  ...props
+}: GravatarBaseAvatarProps | LetterBaseAvatarProps | UploadBaseAvatarProps) {
+  return (
+    <Tooltip title={tooltip} disabled={!hasTooltip} {...tooltipOptions} skipWrapper>


Avatar component is the abstraction over Gravatar, Letter or ImageAvatar and the one that all entity avatars use

JonasBa · 2026-02-06T19:50:39Z

static/app/components/core/avatar/actorAvatar.tsx

+    return <Placeholder width={`${props.size}px`} height={`${props.size}px`} />;
+  }
+
+  if (!team) {


This used to be implicit

JonasBa · 2026-02-06T20:15:10Z

static/app/components/avatarChooser/index.tsx

-  const gravatarActions = (
-    <AvatarActions>
-      <LinkButton
-        external
-        href="https://gravatar.com"
-        size="zero"
-        priority="transparent"
-        icon={<IconOpen />}
-        aria-label={t('Go to gravatar.com')}
-        title={t('Visit gravatar.com to upload your Gravatar to be used on Sentry.')}
-      />
-    </AvatarActions>
-  );


The UX here is unnecessary and confusing. We already indicate in the option that users can control their gravatar at gravatar.com, and there is no reason to display a upload and a change button that do the same thing

ref(baseAvatar) inline avatar address comments streamline hook call and reset ref(avatar) resolve error handling avatar: add new primitives avatar: add new primitives avatar: improve types ref(avatar) wip test(avatar): rewrite LetterAvatar tests to focus on public API Rewrote tests to focus solely on the component's public behavior: - Initials rendering for various name formats - Fallback to question mark when name is empty or whitespace - Proper handling of multibyte characters, emails, and edge cases Removed tests for internal implementation details like styling and refs. test(avatar): add ImageAvatar tests for public API Added comprehensive tests for ImageAvatar component covering: - Image rendering when src is valid - Fallback to LetterAvatar when src is missing or image fails to load - Proper handling of src changes and error state reset - Props passing to both image and fallback components All tests focus on observable behavior rather than implementation details. test(avatar): enhance Gravatar tests to cover public API Enhanced Gravatar tests to cover: - SHA-256 hashing of gravatarId and URL generation - Remote size and d=404 parameters in URL - Fallback to LetterAvatar for empty/whitespace gravatarId - Props passing to both gravatar image and fallback - Hash regeneration when gravatarId changes - Switching between valid and empty gravatarId All tests focus on observable behavior and public API. fix(avatar): fix ImageAvatar fallback not triggering Fixed issues that prevented the LetterAvatar fallback from displaying when image load fails: 1. Properly destructure `name` from props before spreading to prevent it from being passed to the Image component 2. Remove incorrect `alt` prop being passed from Avatar component to ImageAvatar (ImageAvatarProps explicitly omits 'alt') These changes ensure the onError handler from mergeProps is properly attached without prop conflicts, allowing the error state to trigger and display the LetterAvatar fallback when an image fails to load. fix avatar correct usage correct usage correct usage use fixtures revert entire html interface update avatar chooser

Updated test expectations to match the new avatar behavior where initials are generated from display names instead of slugs. Changes: - Team avatar: Expected initials "TS" → "TN" (from "Team Name" not "team-slug") - Organization avatar: Expected initials "OS" → "ON" (from "Organization Name" not "org-slug") - Changed test ID from "default-avatar" → "letter_avatar-avatar" to match new Avatar component behavior This is the correct behavior - avatars should use human-readable names for initials rather than technical slugs.

The Avatar component was not respecting custom data-test-id props passed from parent components. This caused test failures in components that relied on custom test IDs (e.g., 'assigned-avatar' in assignedTo.tsx). Updated Avatar to accept and prefer custom data-test-id props while falling back to the generated type-based ID when no custom ID is provided.

JonasBa · 2026-02-07T00:16:21Z

static/app/components/core/avatar/avatar.tsx

+  className,
+  size,
+  style,
+  tooltip,
+  tooltipOptions,
+  hasTooltip = false,


I will clean these up in a followup PR. I am thinking of moving it under tooltipProps and then codemoding it along with tooltipProps on our button component

JonasBa · 2026-02-07T00:16:56Z

static/app/utils/useOwnerOptions.tsx

@@ -1,6 +1,6 @@
 import groupBy from 'lodash/groupBy';

-import type {BaseAvatarProps} from '@sentry/scraps/avatar';


BaseAvatar export from scraps was just bad naming.

JonasBa · 2026-02-07T00:17:46Z

static/app/views/integrationPipeline/githubInstallationSelect.tsx

  width: 100%;
 `;

-const StyledAvatar = styled(BaseAvatar)`


AvatarContainer already uses flexShrink: 0

JonasBa · 2026-02-07T00:18:24Z

static/app/components/core/avatar/avatarComponentStyles.tsx

+/** Defines the styling interface for all avatar components */
 export interface BaseAvatarStyleProps {
  round?: boolean;
+  size?: number;


Added here so that all avatars inherit it. I will followup with converting this to t-shirt sizes.

ref(scraps) move baseavatar, gravatar and letteravatar to separate mo…

885832b

…dules

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Feb 6, 2026

JonasBa changed the title ~~ref(scraps) move baseavatar, gravatar and letteravatar to separate mo…~~ ref(scraps) refactor and test avatar component Feb 6, 2026

vercel bot deployed to Preview February 6, 2026 19:33 View deployment

JonasBa commented Feb 6, 2026

View reviewed changes

JonasBa force-pushed the jb/avatar/refactor branch from 0a4f454 to 331d80f Compare February 6, 2026 19:53

vercel bot deployed to Preview February 6, 2026 19:57 View deployment

JonasBa force-pushed the jb/avatar/refactor branch from 40eb67e to f597fbd Compare February 6, 2026 20:14

JonasBa commented Feb 6, 2026

View reviewed changes

JonasBa force-pushed the jb/avatar/refactor branch from f597fbd to e8a0c03 Compare February 6, 2026 20:16

JonasBa force-pushed the jb/avatar/refactor branch from e8a0c03 to 142877c Compare February 6, 2026 20:17

vercel bot deployed to Preview February 6, 2026 20:20 View deployment

cleanup tests

b4042a4

vercel bot deployed to Preview February 6, 2026 20:33 View deployment

cleanup tests

6982ee2

Merge branch 'master' into jb/avatar/refactor

db1ef82

vercel bot deployed to Preview February 6, 2026 20:46 View deployment

JonasBa marked this pull request as ready for review February 6, 2026 20:51

JonasBa requested review from a team as code owners February 6, 2026 20:51

JonasBa marked this pull request as draft February 6, 2026 20:51

fix knip

7c0c0f1

vercel bot deployed to Preview February 6, 2026 20:56 View deployment

JonasBa and others added 2 commits February 6, 2026 13:04

Merge branch 'master' into jb/avatar/refactor

f5b8069

vercel bot deployed to Preview February 6, 2026 21:09 View deployment

vercel bot deployed to Preview February 6, 2026 23:14 View deployment

fix test assertion

f9accea

vercel bot deployed to Preview February 6, 2026 23:30 View deployment

JonasBa commented Feb 7, 2026

View reviewed changes

		@@ -1,28 +0,0 @@
		import {render, screen} from 'sentry-test/reactTestingLibrary';

		@@ -1,6 +1,6 @@
		import groupBy from 'lodash/groupBy';

		import type {BaseAvatarProps} from '@sentry/scraps/avatar';

Uh oh!

Conversation

JonasBa commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Refactor avatar components to modular architecture

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

JonasBa commented Feb 6, 2026 •

edited

Loading