Migrate User Avatar usages by jmusial · Pull Request #98031 · Expensify/App

jmusial · 2026-08-07T11:37:22Z

Explanation of Change

This PR migrates raw Avatar call sites across 33 files to the UserAvatar (or Icon or AccountAvatar if the case calls for it).

This removes duplicated avatar-resolution logic and per-site Onyx lookups and ensures consistent fallback and tooltip behaviour everywhere a single account's avatar is rendered.

Some Avatar uses are left un migrated - this depend on dynamic icons and can be either User or Avatar

Fixed Issues

$ #95600
PROPOSAL:

Tests

Open the app.
Verify the sidebar profile avatar shows your avatar.
Open a chat, type @ in the composer
Verify each suggestion shows a round user avatar and the @here row shows a green megaphone icon.
Create a task in that chat and assign it to another member.
Verify the task preview shows the assignee's avatar on the left, and on web hovering it shows their name tooltip.
Navigate to Account -> Profile.
Verify the large preview avatar renders.
Go to Workspaces -> Your workspace -> Members and open a member.
Verify the member's large avatar renders at the top of the detail page.

Offline tests

QA Steps

Same as tests.

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2026-08-18.at.14.30.42.mov

Android: mWeb Chrome

Screen.Recording.2026-08-18.at.14.30.42.mov

iOS: Native

Screen.Recording.2026-08-18.at.14.28.38.mov

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2026-08-18.at.14.13.17.mov

codecov · 2026-08-07T11:42:06Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
src/components/AccountSwitcher.tsx	`82.00% <100.00%> (-0.36%)`	⬇️
src/components/Avatar/index.tsx	`100.00% <ø> (ø)`
src/components/AvatarSelector.tsx	`100.00% <ø> (ø)`
src/components/BookCallButton.tsx	`100.00% <100.00%> (ø)`
src/components/MenuItem/MenuItem.tsx	`91.85% <ø> (ø)`
...ts/Search/SearchList/ListItem/ExportedIconCell.tsx	`65.51% <100.00%> (+1.88%)`	⬆️
...earch/SearchList/ListItem/MemberListItemHeader.tsx	`0.00% <ø> (ø)`
...nts/Search/SearchList/ListItem/TaskListItemRow.tsx	`0.00% <ø> (ø)`
...onents/Search/SearchList/ListItem/UserInfoCell.tsx	`90.90% <100.00%> (-0.76%)`	⬇️
...components/SelectionList/ListItem/CardListItem.tsx	`0.00% <ø> (ø)`
... and 21 more
... and 12 files with indirect coverage changes

jmusial · 2026-08-10T13:10:43Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 05ef70312c

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

jmusial · 2026-08-12T14:24:22Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6657970111

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

jmusial · 2026-08-19T10:14:29Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b535919c94

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

melvin-bot · 2026-08-19T10:44:21Z

@mananjadhav Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

trjExpensify · 2026-08-20T18:50:37Z

PR doesn’t need product input as a refactor PR. Unassigning and unsubscribing myself.

mananjadhav · 2026-08-20T18:53:01Z

Reviewing the PR.

mananjadhav

Left a few comments.

jmusial · 2026-08-21T14:50:32Z

@mananjadhav thx for a good review 😄 Addressed all.

mananjadhav · 2026-08-23T19:41:57Z


    const subscriptionLink = subscriptionPlan ? `${environmentURL}/${ROUTES.SETTINGS_SUBSCRIPTION.getRoute(Navigation.getActiveRoute())}` : CONST.PLAN_TYPES_AND_PRICING_HELP_URL;

+    const iconSize = isIllustration ? 48 : StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT);


suggestion: Can we replace the magic number with some const please?

mananjadhav

One final comment. Starting to test.

mananjadhav · 2026-08-23T20:58:13Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

Android: mWeb Chrome

mweb-android-avatar.mov

iOS: HybridApp

ios-avatar.mov

iOS: mWeb Safari

mweb-safari-avatar.mov

MacOS: Chrome / Safari

web-user-avatar.mov

mananjadhav · 2026-08-23T20:58:41Z

Tested web, still checking other platforms once.

jmusial · 2026-08-25T13:57:36Z

@mananjadhav kind bump

mananjadhav · 2026-08-25T18:04:18Z

Apologies I had to take up a deploy issue. Back to testing this.

mananjadhav · 2026-08-25T18:29:26Z

Checklist here #98031 (comment)

roryabraham · 2026-08-25T18:52:56Z

        }
    }

+    const integrationIcons = [


NAB for now: I don't think that we should use static arrays and .map for rendering like this. A few reasons:

It will be more tempting for future authors to add a configuration prop to the thing rendered in the .map callback to handle a different variant of the thing in the array.

React Compiler won't memoize it as granularly. I think the whole .map callback will be memoized as one function, rather than granularly memoizing all the JSX nodes.

It doesn't have that much of a readability boost over JSX.

The guidelines say not to do it this way

Not going to block on this, but @jmusial we should address this in a fast-follower.

@MelvinBot create an issue for this. Label it Daily, assign to jmusial and roryabraham.

github-actions · 2026-08-25T18:56:40Z

🚧 roryabraham has triggered a test Expensify/App build. You can view the workflow run here.

MelvinBot · 2026-08-25T18:58:05Z

Created a follow-up issue for the remaining un-migrated Avatar usages (the dynamic-icons cases this PR intentionally left in place): #99461

Label: Daily
Assignees: jmusial, roryabraham

view run

OSBotify · 2026-08-25T18:59:50Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2026-08-25T19:01:11Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #98031.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-efedb13-9187b76-ebd5d68f5d8a69b49526ce53f59fa22c5d31669d/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-efedb13-9187b76-1f02652b9909d6631e66ea2384ca01709198506c/index.html

Web 🕸️
https://98031.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-08-25T21:24:59Z

🚀 Deployed to staging by https://github.com/roryabraham in version: 9.4.61-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

MelvinBot · 2026-08-25T21:27:34Z

Help site review — no changes required

I reviewed the changes in this PR against the help site articles under App/docs/articles and no documentation updates are needed.

This PR is a purely internal component refactor: it migrates raw Avatar call sites to UserAvatar (or Icon/AccountAvatar), removing duplicated avatar-resolution logic and per-site Onyx lookups. It does not introduce, rename, or change any user-facing feature, flow, tab, setting, or button label — avatars render the same as before, just with consistent fallback and tooltip behavior. The help site documents user-facing behavior and UI, none of which changes here.

No draft PR was created since there is nothing to document.

jmusial, if you believe a specific user-facing behavior did change and should be documented, let me know which flow and I'll draft the help site update.

view run

OSBotify · 2026-08-26T20:52:25Z

🚀 Deployed to production by https://github.com/AndrewGable in version: 9.4.61-4 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android

Migrate UserAvatar cases

2d5d3b5

melvin-bot Bot assigned jmusial Aug 7, 2026

jmusial added 2 commits August 10, 2026 13:16

Merge branch 'main' into chore/migrate-avatar-user-avatar-cases

b5acbd7

fix knip

05ef703

chatgpt-codex-connector Bot reviewed Aug 10, 2026

View reviewed changes

Comment thread src/components/SelectionList/ListItem/CardListItem.tsx Resolved

jmusial added 3 commits August 12, 2026 15:39

Merge branch 'main' into chore/migrate-avatar-user-avatar-cases

9bc75a6

cut down excessive AccountAvatar usage

f17c160

missing migration cases

6657970

chatgpt-codex-connector Bot reviewed Aug 12, 2026

View reviewed changes

Comment thread src/pages/settings/Agents/NewAgentPage.tsx Resolved

Comment thread src/pages/workspace/upgrade/UpgradeIntroView.tsx Resolved

jmusial added 3 commits August 14, 2026 15:12

Merge branch 'main' into chore/migrate-avatar-user-avatar-cases

f62effe

Merge branch 'main' into chore/migrate-avatar-user-avatar-cases

9c629c9

Merge branch 'main' into chore/migrate-avatar-user-avatar-cases

b535919

chatgpt-codex-connector Bot reviewed Aug 19, 2026

View reviewed changes

Comment thread src/components/SelectionList/ListItem/CardListItem.tsx Resolved

reverted to using user avatar & tooltip to save og fallback logic

064f8c6

jmusial marked this pull request as ready for review August 19, 2026 10:44

jmusial requested review from a team as code owners August 19, 2026 10:44

melvin-bot Bot requested a review from mananjadhav August 19, 2026 10:44

melvin-bot Bot requested review from trjExpensify and removed request for a team August 19, 2026 10:44

trjExpensify removed their request for review August 20, 2026 18:50

mananjadhav reviewed Aug 21, 2026

View reviewed changes

Comment thread src/pages/workspace/upgrade/UpgradeIntroView.tsx Resolved

mananjadhav reviewed Aug 21, 2026

View reviewed changes

jmusial added 2 commits August 21, 2026 16:27

Merge branch 'main' into chore/migrate-avatar-user-avatar-cases

29402c1

adress review

96b025b

mananjadhav reviewed Aug 23, 2026

View reviewed changes

jmusial added 2 commits August 24, 2026 09:33

Merge branch 'main' into chore/migrate-avatar-user-avatar-cases

f709913

get rid of magic umber

769ed82

mananjadhav approved these changes Aug 25, 2026

View reviewed changes

melvin-bot Bot requested a review from roryabraham August 25, 2026 18:28

roryabraham approved these changes Aug 25, 2026

View reviewed changes

roryabraham merged commit efedb13 into Expensify:main Aug 25, 2026
37 of 39 checks passed

MelvinBot mentioned this pull request Aug 25, 2026

Migrate remaining dynamic-icons Avatar usages (follow-up to #98031) #99461

Closed

roryabraham mentioned this pull request Aug 25, 2026

[Due for payment 2026-09-16] Explode integrationIcons in ExportedIconCell #99462

Closed

OSBotify mentioned this pull request Aug 25, 2026

Deploy Checklist: New Expensify 2026-08-25 #99466

Closed

63 tasks done

melvin-bot Bot mentioned this pull request Aug 26, 2026

[Due for payment 2026-09-22] [M4] Migrate User Avatar usages #95600

Closed

4 tasks

This was referenced Sep 1, 2026

[Tracking] Decompose Avatar component #95596

Closed

[No QA] Expand integrationIcons render-array into explicit JSX in ExportedIconCell #100262

Merged


		const subscriptionLink = subscriptionPlan ? `${environmentURL}/${ROUTES.SETTINGS_SUBSCRIPTION.getRoute(Navigation.getActiveRoute())}` : CONST.PLAN_TYPES_AND_PRICING_HELP_URL;

		const iconSize = isIllustration ? 48 : StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT);

Conversation

jmusial commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented Aug 7, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jmusial commented Aug 10, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

jmusial commented Aug 12, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

jmusial commented Aug 19, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

melvin-bot Bot commented Aug 19, 2026

Uh oh!

trjExpensify commented Aug 20, 2026

Uh oh!

mananjadhav commented Aug 20, 2026

Uh oh!

Uh oh!

mananjadhav left a comment

Choose a reason for hiding this comment

Uh oh!

jmusial commented Aug 21, 2026

Uh oh!

mananjadhav Aug 23, 2026

Choose a reason for hiding this comment

Uh oh!

mananjadhav left a comment

Choose a reason for hiding this comment

Uh oh!

mananjadhav commented Aug 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

mananjadhav commented Aug 23, 2026

Uh oh!

jmusial commented Aug 25, 2026

Uh oh!

mananjadhav commented Aug 25, 2026

Uh oh!

mananjadhav commented Aug 25, 2026

Uh oh!

roryabraham Aug 25, 2026

Choose a reason for hiding this comment

Uh oh!

roryabraham Aug 25, 2026

Choose a reason for hiding this comment

Uh oh!

roryabraham Aug 25, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 25, 2026

Uh oh!

jmusial commented Aug 7, 2026 •

edited

Loading

codecov Bot commented Aug 7, 2026 •

edited by github-actions Bot

Loading

mananjadhav commented Aug 23, 2026 •

edited

Loading