Use fallback user avatar in cases where the user is unknown to us #41846

Kicu · 2024-05-08T13:43:52Z

Details

this is PR is a followup after this: Use fallback user avatar in cases where the user is unknown to us #39229 was reverted, it also fixes issues that were found after the original PR merge
the logic that decides which avatar to show is now consolidated into the <Avatar> component, almost all calls to getAvatar and getDefaultAvatar were removed as they were mostly concerned with showing a correct SVG avatar version - now <Avatar> does all this
right now the source of truth is almost always avatar prop from personalDetails. It is returned from backend, and any user "known" to us will have it set
we will now display FallbackAvatar when:
- there is no details/accountID
- when accountID was optimistically set in TS code
- as a final fallback in Avatar component (that behaviour is unchanged)
special note for icons: whenever we create icons array/object we have to explicitly set FallbackAvatar as source. Otherwise nothing would be shown because of patterns like this one: https://github.com/Expensify/App/blob/main/src/components/OptionRow.tsx#L209

Extra notes for reviewer:

please note that a PR affecting workspace avatars logic was merged some time ago, but after the revert: https://github.com/Expensify/App/pull/39637/files - it introduced usage of accountID for both user account and policy id.
Because of this we were already passing accountID to Avatar component in some places
☝️ introduced a bug related to Workspace avatar colors styling, if you notice something wrong with WS avatar please verify that its not already on main - this line seems problematic: https://github.com/Expensify/App/blob/main/src/components/Avatar.tsx#L97

CC @s77rt

Fixed Issues

$ #38743
$ #40989
$ #40996

PROPOSAL:

Tests

go to every place in the app where we can display an unknown user and verify that the avatar next to them is the fallback one (and not the colorful one)
places to verify:

search option from Chats list
searching users from "Start chat"
searching users from "Split expense"
searching users from "Pay someone"
searching users from "Assign Task"
searching users from Workspace list > Workspace > Members > Invite member

test [Payment Request] [$250] Mention - Avatar is not displaying on Concierge in mention list #41014:
verify that small avatars in mentions from chat are correct including Concierge avatar
test [HOLD for payment 2024-06-06] [No payment] Workspace - Not here page shows up when opening profile of invited user in offline mode #40989:

go to Workspace list > Workspace > Members
turn on offline mode (disable network in devtools) and try adding a non-existing user to members
verify that profile page opens

test [HOLD for payment 2024-06-06] [HOLD for payment 2024-05-06] [HOLD for payment 2024-05-03] Quick action - Fallback avatar is displayed on quick action after user avatar loads #40996:

check if the avatar in quick action from Popover menu is the same as newly added user

Offline tests

QA Steps

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

rec-android-fallback.mp4

Android: mWeb Chrome

iOS: Native

recsm-ios-fallback-demo.mp4

iOS: mWeb Safari

MacOS: Chrome / Safari

rec-web-fallback-demo.mp4

rec-web-fallback-page-err.mp4

rec-web-fallback-quickaction.mp4

MacOS: Desktop

…st in offline

melvin-bot · 2024-05-08T14:11:34Z

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

Kicu · 2024-05-08T14:26:14Z

src/components/Avatar.tsx

-    // We pass the color styles down to the SVG for the workspace and fallback avatar.
-    const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, Number(accountID));
+    // if it's user avatar then accountID will be a number
+    const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, accountID as number);


@s77rt any better ideas for "accountID as number"?

the logic here is

if isWorkspace is true -> the accountID will be a policyID which is a string

if isWorkspace false -> accountID is standard user account id which is a number

I dislike casting via as, but not sure how to improve this line

We can split the types into two and use union

type AvatarProps = { ... } & ( | { type: typeof CONST.ICON_TYPE_AVATAR; accountID?: number; } | { type: typeof CONST.ICON_TYPE_WORKSPACE; accountID?: string; } );

However for this to work we need to make the type prop required and remove its default value.

s77rt · 2024-05-08T19:27:24Z

src/pages/ProfilePage.tsx

The changes here seem unrelated. Can you please double check

You're asking about ProfilePage? So the changes are deliberate, and related to fixing #40989.

Basically right now (on main) the decision to show most of the content is based on this line:

const hasMinimumDetails = !isEmptyObject(details.avatar);

(https://github.com/Expensify/App/blob/main/src/pages/ProfilePage.tsx#L154)

But we know that there will be no avatar in case we're offline and rely on optimistic data - as I removed the default avatar from optimistic data almost everywhere.
All the other basic data is there, so I just allow everything to display and the Fallback avatar will be correctly shown.
I also disable clicking on the avatar when it's the fallback displayed

All the other changes are just indentation moved 1 level up. I tested this both in offline and online and it behaves correct I believe.

src/components/AvatarWithIndicator.tsx

src/libs/UserUtils.ts

src/pages/home/report/ReportActionCompose/SuggestionMention.tsx

src/pages/settings/InitialSettingsPage.tsx

src/types/onyx/OnyxCommon.ts

s77rt · 2024-05-09T13:36:01Z

src/components/AvatarWithIndicator.tsx

+    source?: UserUtils.AvatarSource;
+
+    /** account id if it's user avatar */
+    accountID?: number;


Suggested change

accountID?: number;

accountID: number | undefined;

This should help catch cases where we are missing to pass accountID.

(do same with Avatar component)

Will do it for every Avatar.

~~What do you think about doing the same for source?~~
~~Now it looks kinda suspicious that I will have:source?: string but accountID as explicit: number | undefined almost as if accountID is more important than source.~~

I used this pattern to find all cases for TS fails, but after this I reverted back to optional with ?. In 2 cases I had to explicitly pass undefined and it looked weird IMO. We don't do this pattern anywhere else in code.
There are 2 cases where accountID will be undefined on purpose:

https://github.com/Expensify/App/blob/main/src/pages/workspace/WorkspaceProfilePage.tsx#L141 - this is workspace avatar, no accountID

https://github.com/Expensify/App/blob/main/src/pages/NewChatConfirmPage.tsx#L115 - this is for a group chat, it will never be 1 user's avatar

Kicu · 2024-05-10T08:53:37Z

@s77rt thanks for all the comments, some notes from me:

please take a look at: https://github.com/Expensify/App/pull/41485/files as it introduces some changes related to workspace and it will most likely get merged before our PR
I decided that always passing explicitly accountID={undefined} looks out of place as its almost never done in this project, so I kept accountID? as optional
also: <MenuItem> renders <Avatar>, and MenuItem is rendered 100+ times in the App - I don't want to add accountID into all this places
about Icon read my comment, I would really like to return to source prop being not optional there. I think it will be better for the codebase in the long run

s77rt · 2024-05-11T12:54:11Z

src/libs/OptionsListUtils.ts

    userToInvite.icons = [
        {
-            source: UserUtils.getAvatar('', optimisticAccountID),
+            source: FallbackAvatar,
            name: searchValue,
            type: CONST.ICON_TYPE_AVATAR,
        },


Add id: optimisticAccountID

s77rt · 2024-05-11T13:13:08Z

src/libs/SidebarUtils.ts

@@ -418,7 +417,7 @@ function getOptionData({
    result.subtitle = subtitle;
    result.participantsList = participantPersonalDetailList;

-    result.icons = ReportUtils.getIcons(report, personalDetails, UserUtils.getAvatar(personalDetail?.avatar ?? '', personalDetail?.accountID), '', -1, policy);
+    result.icons = ReportUtils.getIcons(report, personalDetails, personalDetail?.avatar, '', -1, policy);


Suggested change

result.icons = ReportUtils.getIcons(report, personalDetails, personalDetail?.avatar, '', -1, policy);

result.icons = ReportUtils.getIcons(report, personalDetails, personalDetail?.avatar, personalDetail?.login, personalDetail?.accountID, policy);

The avatar relays on the account id, if we pass -1 we will end up using the fallback avatar instead of the real avatar (if the used avatar is the default colorful one)

s77rt · 2024-05-11T13:22:49Z

src/pages/home/report/ReportActionItemSingle.tsx

@@ -117,7 +120,7 @@ function ReportActionItemSingle({
        }

        secondaryAvatar = {
-            source: UserUtils.getAvatar(secondaryUserAvatar, secondaryAccountId),
+            source: secondaryUserAvatar,


NAB. secondaryUserAvatar is using an empty string as the fallback, let's use the fallback avatar instead

s77rt · 2024-05-11T14:45:59Z

src/components/Avatar.tsx

-    // We pass the color styles down to the SVG for the workspace and fallback avatar.
-    const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, Number(accountID));
+    // if it's user avatar then accountID will be a number
+    const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, accountID as number);


We can split the types into two and use union

type AvatarProps = { ... } & ( | { type: typeof CONST.ICON_TYPE_AVATAR; accountID?: number; } | { type: typeof CONST.ICON_TYPE_WORKSPACE; accountID?: string; } );

However for this to work we need to make the type prop required and remove its default value.

s77rt · 2024-05-11T14:47:10Z

Bug: In the task assignee the assign to me row has the fallback avatar

Kicu · 2024-05-13T14:51:47Z

All changes pushes @s77rt
I like the types suggestion but in the end I don't want to add any more changes because this PR is constantly growing, maybe in future we can add the union.

For the bug that you found there is something wrong in the whole chain of calls : TaskAssigneeSelectorModalProps -> useOptionsList -> OptionsListUtils.createOptionList -> createOption which returns a list of options that include empty Icon only for current user.
Its simpler to recreate the proper icon. Investigating this chain of calls was extremely difficult and in the end I don't know where to fix it.

s77rt · 2024-05-13T22:14:40Z

Can you please test if that bug is still reproducible? (without the workaround) I'm getting a different icon now which is also wrong but same as staging

Kicu · 2024-05-14T07:57:05Z

So without workaround it reproduces for me every time on web. I have a feeling that whether you get this bug is related to state of personalDetails key in onyx, because the logic that generates these options combines together a lot of data.
If I explicitly search for myself then sometimes the avatar updates, but after a full page refresh I'm always back to the bug.

However I tried running it on ios and there I had the correct avatar :/
I think its better to keep the workaround if there are some cases where this bug appears

s77rt · 2024-05-14T08:37:44Z

In main / staging can you reproduce the bug? If not then it's a regression and we should fix it without workarounds

Kicu · 2024-05-14T09:06:59Z

I'm sorry I misunderstood. We are talking about Task > "Assign to me" bug correct?

In staging I cannot reproduce, it works correctly
However on local dev on newest main I still get the bug (without my code)
local dev on newest main but a brand new account - no bug

I strongly believe the bug is related to current state of one's local DB and what personalDetails are saved there. So we can treat it as not a regression (at least on my machine it behaves like not a regression in some cases).

That being said I would still keep the workaround as it uses useCurrentUserPersonalDetails() hook which sounds like a good source of current user data.

s77rt · 2024-05-14T09:43:19Z

Can you please resolve the conflicts and remove the workaround? I cannot reproduce this constantly but feels like we should handle it separately

grgia · 2024-05-17T12:13:55Z

@shawnborton or @dubielzyk-expensify I have one more avatar related PR- I just spun up a test build if you'd like to take a look. This one handles the changes to fallback avatars after the first take was reverted

github-actions · 2024-05-17T12:30:45Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/41846/index.html	https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/41846/index.html

Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/41846/NewExpensify.dmg	https://41846.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

shawnborton · 2024-05-17T12:43:31Z

Found a missing spot when viewing the workspace avatar from the workspace overview page:

CleanShot.2024-05-17.at.08.42.40.mp4

Kicu · 2024-05-17T13:18:41Z

@shawnborton great find.

I checked that the same bug is currently appearing on web so its not introduced by my code, but rather another bug after this: #39637

However if thats okey with you guys I could try to fix this within this PR as hopefully that will be faster.

Kicu · 2024-05-17T13:28:04Z

@shawnborton @grgia
I fixed 😄 - turns out it was an extremely simple fix

rec-bug.mov

shawnborton · 2024-05-17T13:29:39Z

Amazing, thanks!

s77rt · 2024-05-17T18:13:51Z

src/pages/home/report/ReportActionItemSingle.tsx

@@ -138,7 +138,7 @@ function ReportActionItemSingle({
        source: avatarSource ?? FallbackAvatar,
        type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR,
        name: primaryDisplayName ?? '',
-        id: avatarAccountId,
+        id: isWorkspaceActor ? report.policyID : avatarAccountId,


NAB. avatarAccountId already takes into account the isWorkspaceActor condition. Change the variable name to avatarId to avoid confusion

mountiny

@Kicu Couple minor comments, can you please sync up with main too? Thanks!

src/components/AvatarWithIndicator.tsx

src/components/Avatar.tsx

src/libs/ReportUtils.ts

src/libs/UserUtils.ts

Kicu · 2024-05-23T07:10:40Z

@mountiny Done and done

mountiny

Thanks @Kicu Looks good to me

@grgia can you please review?

OSBotify · 2024-05-28T14:22:44Z

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

OSBotify · 2024-05-29T09:42:27Z

🚀 Deployed to staging by https://github.com/mountiny in version: 1.4.77-0 🚀

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

OSBotify · 2024-05-30T21:25:16Z

🚀 Deployed to production by https://github.com/puneetlath in version: 1.4.77-11 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2024-05-30T22:37:14Z

🚀 Deployed to production by https://github.com/puneetlath in version: 1.4.77-11 🚀

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

Kicu added 3 commits May 8, 2024 15:25

simplify avatar logic and use FallbackAvatar when user is unknown

1839a03

fix not found Page when opening ProfilePage from workspace members li…

a8879a1

…st in offline

Remove more unnecessary usages of .getAvatar() function

00ca93d

Kicu marked this pull request as ready for review May 8, 2024 14:11

Kicu requested a review from a team as a code owner May 8, 2024 14:11

melvin-bot bot requested review from s77rt and removed request for a team May 8, 2024 14:11

Kicu commented May 8, 2024

View reviewed changes

s77rt reviewed May 8, 2024

View reviewed changes

src/components/AvatarWithIndicator.tsx Show resolved Hide resolved

Kicu mentioned this pull request May 9, 2024

[HOLD #41846][$250] Task - Fallback avatar does not update after creating task unless chat header is opened #40991

Closed

6 tasks

s77rt suggested changes May 9, 2024

View reviewed changes

Kicu added 2 commits May 10, 2024 10:40

Apply some fixes after review

7214e1a

Make accountID optional in AvatarWithImagePicker

8b3ac5d

s77rt suggested changes May 11, 2024

View reviewed changes

Kicu added 2 commits May 13, 2024 16:37

Add updates after review

f886a6b

Merge branch 'main' into kicu/38743-fallback-avatar-fix

1b09f2e

Fix typo after merge conflict

9091250

Kicu requested a review from s77rt May 13, 2024 14:55

Fix lint

4120f36

Remove task assignee avatar workaround

ee05310

Fix wrong WorkspaceAvatar colors on workspace profile page

d9844a6

Kicu dismissed grgia’s stale review via d9844a6 May 17, 2024 13:27

s77rt reviewed May 17, 2024

View reviewed changes

Rename avatarId variable

21c9e86

mountiny assigned Kicu May 20, 2024

mountiny reviewed May 22, 2024

View reviewed changes

src/components/AvatarWithIndicator.tsx Outdated Show resolved Hide resolved

src/components/Avatar.tsx Outdated Show resolved Hide resolved

src/libs/ReportUtils.ts Outdated Show resolved Hide resolved

src/libs/UserUtils.ts Outdated Show resolved Hide resolved

Kicu added 2 commits May 23, 2024 09:04

Merge branch 'main' into kicu/38743-fallback-avatar-fix

0319ead

Add minor comment fixes in avatars

b87b586

mountiny approved these changes May 23, 2024

View reviewed changes

Merge branch 'main' into kicu/38743-fallback-avatar-fix

0daa461

mountiny merged commit 790ab50 into Expensify:main May 28, 2024
14 checks passed

Kicu mentioned this pull request May 29, 2024

[HOLD for payment 2024-07-30][Simplified Collect] Workspaces - Display picture/Avatar isn't shown in Workspace share Code page #27288

Closed

6 tasks

github-actions bot mentioned this pull request May 29, 2024

Deploy Checklist: New Expensify 2024-05-29 #42741

Closed

Tony-MK mentioned this pull request May 29, 2024

[HOLD for payment 2024-06-13] User profile - App shows Hidden profile instead of not here page when profile link is invalid #42750

Closed

6 tasks

Kicu mentioned this pull request Jun 10, 2024

Make <Avatar> related code more consistent #43366

Merged

49 tasks

Kicu deleted the kicu/38743-fallback-avatar-fix branch July 24, 2024 14:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use fallback user avatar in cases where the user is unknown to us #41846

Use fallback user avatar in cases where the user is unknown to us #41846

Kicu commented May 8, 2024 •

edited

Loading

melvin-bot bot commented May 8, 2024

Kicu May 8, 2024 •

edited

Loading

s77rt May 11, 2024

s77rt May 8, 2024 •

edited

Loading

Kicu May 9, 2024

s77rt May 9, 2024

Kicu May 10, 2024 •

edited

Loading

Kicu commented May 10, 2024 •

edited

Loading

s77rt May 11, 2024

s77rt May 11, 2024

s77rt May 11, 2024 •

edited

Loading

s77rt May 11, 2024

s77rt commented May 11, 2024

Kicu commented May 13, 2024 •

edited

Loading

s77rt commented May 13, 2024

Kicu commented May 14, 2024 •

edited

Loading

s77rt commented May 14, 2024

Kicu commented May 14, 2024

s77rt commented May 14, 2024

grgia commented May 17, 2024

github-actions bot commented May 17, 2024

shawnborton commented May 17, 2024

Kicu commented May 17, 2024

Kicu commented May 17, 2024 •

edited

Loading

shawnborton commented May 17, 2024

s77rt May 17, 2024

mountiny left a comment

Kicu commented May 23, 2024

mountiny left a comment

OSBotify commented May 28, 2024

OSBotify commented May 29, 2024

OSBotify commented May 30, 2024

OSBotify commented May 30, 2024

	result.icons = ReportUtils.getIcons(report, personalDetails, personalDetail?.avatar, '', -1, policy);
	result.icons = ReportUtils.getIcons(report, personalDetails, personalDetail?.avatar, personalDetail?.login, personalDetail?.accountID, policy);

Use fallback user avatar in cases where the user is unknown to us #41846

Use fallback user avatar in cases where the user is unknown to us #41846

Conversation

Kicu commented May 8, 2024 • edited Loading

Details

Extra notes for reviewer:

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented May 8, 2024

Kicu May 8, 2024 • edited Loading

Choose a reason for hiding this comment

s77rt May 11, 2024

Choose a reason for hiding this comment

s77rt May 8, 2024 • edited Loading

Choose a reason for hiding this comment

Kicu May 9, 2024

Choose a reason for hiding this comment

s77rt May 9, 2024

Choose a reason for hiding this comment

Kicu May 10, 2024 • edited Loading

Choose a reason for hiding this comment

Kicu commented May 10, 2024 • edited Loading

s77rt May 11, 2024

Choose a reason for hiding this comment

s77rt May 11, 2024

Choose a reason for hiding this comment

s77rt May 11, 2024 • edited Loading

Choose a reason for hiding this comment

s77rt May 11, 2024

Choose a reason for hiding this comment

s77rt commented May 11, 2024

Kicu commented May 13, 2024 • edited Loading

s77rt commented May 13, 2024

Kicu commented May 14, 2024 • edited Loading

s77rt commented May 14, 2024

Kicu commented May 14, 2024

s77rt commented May 14, 2024

grgia commented May 17, 2024

github-actions bot commented May 17, 2024

shawnborton commented May 17, 2024

Kicu commented May 17, 2024

Kicu commented May 17, 2024 • edited Loading

shawnborton commented May 17, 2024

s77rt May 17, 2024

Choose a reason for hiding this comment

mountiny left a comment

Choose a reason for hiding this comment

Kicu commented May 23, 2024

mountiny left a comment

Choose a reason for hiding this comment

OSBotify commented May 28, 2024

OSBotify commented May 29, 2024

OSBotify commented May 30, 2024

OSBotify commented May 30, 2024

Kicu commented May 8, 2024 •

edited

Loading

Kicu May 8, 2024 •

edited

Loading

s77rt May 8, 2024 •

edited

Loading

Kicu May 10, 2024 •

edited

Loading

Kicu commented May 10, 2024 •

edited

Loading

s77rt May 11, 2024 •

edited

Loading

Kicu commented May 13, 2024 •

edited

Loading

Kicu commented May 14, 2024 •

edited

Loading

Kicu commented May 17, 2024 •

edited

Loading