Refactor avatar tooltips to remove shouldShowTooltip by jmusial · Pull Request #97961 · Expensify/App

jmusial · 2026-08-06T11:35:39Z

Explanation of Change

Extracts avatar tooltip logic out of the individual avatar layout components into dedicated reusable AvatarTooltip/AvatarNamesTooltip components with an AvatarTooltipContext for disabling tooltips, deduplicating tooltip wiring across layouts and their call sites.

Fixed Issues

$ #94586
PROPOSAL:

Tests

Only on web

Test 1 — tooltips shown (unchanged behavior):

Open the app
Hover over the avatar in any non-archived LHN chat row
Verify the user-details tooltip appears with that user's display name
Navigate to Spend > Expense reports and hover over the first on the left in a report row
Verify the user-details tooltip appears with that user's display name

Test 2 — tooltips suppressed for archived rooms

Open the app
Locate an archived chat in the LHN (e.g. a closed workspace room — search for it if not visible)
Hover over its avatar in the LHN row
Verify no tooltip appears
Navigate to Spend > Expense reports and hover over the "From"/"To" avatars in a report row
Verify no tooltip appears

Offline tests

Same as tests

QA Steps

Same as tests

PR Author Checklist

Screenshots/Videos

Videos just for web - mobile does not have tooltips anyways.

MacOS: Chrome / Safari

Screen.Recording.2026-08-10.at.11.18.43.mov

codecov · 2026-08-06T11:40:16Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/App.tsx	`100.00% <ø> (ø)`
src/components/Avatar/connected/AccountAvatar.tsx	`100.00% <100.00%> (ø)`
src/components/Avatar/layouts/DiagonalAvatars.tsx	`100.00% <100.00%> (ø)`
...rc/components/Avatar/layouts/HorizontalAvatars.tsx	`100.00% <100.00%> (ø)`
...onents/Avatar/layouts/PressableDiagonalAvatars.tsx	`100.00% <100.00%> (ø)`
...onents/Avatar/layouts/PressableSubscriptAvatar.tsx	`100.00% <100.00%> (ø)`
src/components/Avatar/layouts/SingleAvatar.tsx	`100.00% <100.00%> (ø)`
src/components/Avatar/layouts/SubscriptAvatar.tsx	`100.00% <100.00%> (ø)`
...ponents/Avatar/layouts/SubscriptCardFeedAvatar.tsx	`100.00% <100.00%> (ø)`
.../components/Avatar/tooltips/AvatarNamesTooltip.tsx	`100.00% <100.00%> (ø)`
... and 20 more
... and 10 files with indirect coverage changes

jmusial · 2026-08-10T08:40:21Z

@codex review

chatgpt-codex-connector · 2026-08-10T08:49:01Z

Codex Review: Didn't find any major issues. 🚀

Reviewed commit: 81f1f3125d

ℹ️ 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".

Guccio163

LGTM, I'd add some unit tests for the new components (AvatarTooltip, AvatarNamesTooltip, AvatarTooltipContext)

melvin-bot · 2026-08-10T13:50:32Z

@eVoloshchak 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]

jmusial · 2026-08-10T13:51:17Z

cc. @roryabraham - side quest to remove shouldShowTooltip prop drill

roryabraham

I was on the edge about whether these these comments should be blockers, but I guess they're not: this PR is definitely a nice improvement.

I'd recommend making the two changes I requested. Chatting with Claude about the risks of the useContext -> use change, I think it should be pretty safe to do.

roryabraham · 2026-08-10T18:06:07Z

+ */
+function AvatarNamesTooltip({avatars, children}: AvatarNamesTooltipProps) {
+    const areTooltipsDisabled = useAreAvatarTooltipsDisabled();
+    const {formatPhoneNumber, translate} = useLocalize();


NAB, but an interesting note I think is worth considering. If we update useLocalize to use use instead of useContext under the hood, then it can be called conditionally, which would mean we can subscribe to the locale context only if areTooltipsDisabled is false.

It is interesting, but not sure if worth. The subscription only cost is negligible and in the case useLocalize that rarely changes values I don't this we're bearing any re render costs here.

roryabraham · 2026-08-10T18:10:06Z

+}>;
+
+/** Suppresses `AvatarTooltip` and `AvatarNamesTooltip` for every avatar rendered inside. */
+function AvatarTooltipsDisabled({isDisabled = true, children}: AvatarTooltipsDisabledProps) {


When I saw this, I was expecting to see a default provider very high in the tree (i.e: AuthScreens?) that sets isDisabled = false, preventing all avatar tooltips from becoming a no-op if not wrapped in the context lower in the tree.

Could but it works the same w/o having a top lvl one. Will be good from clarity perspective.

~~I'll leave as is here - this PR I treat it as a step, not a final solution.~~

Ideally we'll have similar TooltipsDisabled that will come from reworked Tooltips the will replace AvatarTooltipsDisabled.

roryabraham · 2026-08-10T18:11:58Z

+}>;
+
+/** Suppresses `AvatarTooltip` and `AvatarNamesTooltip` for every avatar rendered inside. */
+function AvatarTooltipsDisabled({isDisabled = true, children}: AvatarTooltipsDisabledProps) {


Also, I'm kind of wondering if this falls under the same umbrella as no-negated-variable-names lint rule. Maybe it should be AvatarTooltipsContextProvider, with isEnabled defaulting to true, and then to disable it you pass isEnabled={false}.

I think that's a bit more inline with the spirit of that custom lint rule.

Given this and prev comment I think I'll rework it with global context providing default.

jmusial · 2026-08-11T09:36:10Z

@eVoloshchak all yours

eVoloshchak · 2026-08-11T14:26:36Z

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

MacOS: Chrome / Safari

Screen.Recording.2026-08-11.at.16.41.25.mov

Screen.Recording.2026-08-11.at.16.39.08.mov

eVoloshchak · 2026-08-11T14:44:04Z

Looks and tests well!
@jmusial, Unit Tests check is failing on useReportActionAvatarsTranslateTest

eVoloshchak

LGTM!

OSBotify · 2026-08-11T20:04:01Z

✋ 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-11T20:19:03Z

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

github-actions · 2026-08-11T20:27:01Z

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

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-5ffd0f65092-0e2bf42-1a91278386410ab24460a79cb70a771122afafd2/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-5ffd0f6-0e2bf42-66f34cc8a3b806b11caf1605c186aa5b90fb44df/index.html

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

👀 View the workflow run that generated this build 👀

OSBotify · 2026-08-12T18:40:57Z

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

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

MelvinBot · 2026-08-12T18:44:47Z

No help site changes required

I reviewed the changes in this PR and no updates to Expensify's help site files under docs/articles are required.

Why: This is a pure internal code refactor. It extracts avatar tooltip logic out of the individual avatar layout components into reusable AvatarTooltip/AvatarNamesTooltip components with an AvatarTooltipContext, deduplicating tooltip wiring across layouts and their call sites. The PR's own test plan confirms this is unchanged behavior — tooltips still show the user's display name on hover where they did before, and are still suppressed for archived rooms.

The help site documents user-facing features and workflows, not internal component architecture. Since there is no observable change to what users see or do, there is nothing to add or update in the docs. No draft PR was created — there's no linked help site PR to review.

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

Refactor Avatar Tooltips to remove shouldShowTooltip

0c27ad1

melvin-bot Bot assigned jmusial Aug 6, 2026

jmusial mentioned this pull request Aug 6, 2026

ReportActionAvatars -> UserAvatar for single avatars migration #94906

Merged

41 tasks

jmusial added 2 commits August 7, 2026 10:30

Merge branch 'main' into chore/refactor-avatar-tooltips

07f0772

Merge branch 'main' into chore/refactor-avatar-tooltips

81f1f31

minor changes

9429dbe

Guccio163 approved these changes Aug 10, 2026

View reviewed changes

add tests

febd9e5

jmusial marked this pull request as ready for review August 10, 2026 13:50

jmusial requested review from a team as code owners August 10, 2026 13:50

melvin-bot Bot requested review from eVoloshchak and garrettmknight and removed request for a team August 10, 2026 13:50

melvin-bot Bot removed the request for review from a team August 10, 2026 13:50

garrettmknight removed their request for review August 10, 2026 15:46

roryabraham previously approved these changes Aug 10, 2026

View reviewed changes

reverse AvatarTooltipsContext polarity

b46538a

jmusial dismissed roryabraham’s stale review via b46538a August 11, 2026 09:34

jmusial mentioned this pull request Aug 11, 2026

ReportActionAvatars -> UserAvatar for multi avatars migration + leftovers #97983

Open

38 tasks

Merge branch 'main' into chore/refactor-avatar-tooltips

c821559

eVoloshchak approved these changes Aug 11, 2026

View reviewed changes

melvin-bot Bot requested a review from roryabraham August 11, 2026 16:00

quinthar added the #quality Relates to work in the #quality room label Aug 11, 2026

roryabraham approved these changes Aug 11, 2026

View reviewed changes

roryabraham merged commit 5ffd0f6 into Expensify:main Aug 11, 2026
36 of 38 checks passed

OSBotify mentioned this pull request Aug 12, 2026

Deploy Checklist: New Expensify 2026-08-12 #98463

Open

Uh oh!

Conversation

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

Uh oh!

Explanation of Change

Fixed Issues

Tests

Test 1 — tooltips shown (unchanged behavior):

Test 2 — tooltips suppressed for archived rooms

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented Aug 6, 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 commented Aug 10, 2026

Uh oh!

Guccio163 left a comment

Choose a reason for hiding this comment

Uh oh!

melvin-bot Bot commented Aug 10, 2026

Uh oh!

jmusial commented Aug 10, 2026

Uh oh!

roryabraham left a comment

Choose a reason for hiding this comment

Uh oh!

roryabraham Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

jmusial Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

roryabraham Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

roryabraham Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jmusial commented Aug 11, 2026

Uh oh!

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

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

eVoloshchak commented Aug 11, 2026

Uh oh!

eVoloshchak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

OSBotify commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

OSBotify commented Aug 12, 2026

Uh oh!

MelvinBot commented Aug 12, 2026

No help site changes required

Uh oh!

Reviewers

Assignees

Labels

Projects

jmusial commented Aug 6, 2026 •

edited

Loading

codecov Bot commented Aug 6, 2026 •

edited by github-actions Bot

Loading

jmusial Aug 11, 2026 •

edited

Loading

jmusial Aug 11, 2026 •

edited

Loading

eVoloshchak commented Aug 11, 2026 •

edited

Loading