[$1000] Search - User custom avatar is not shown in search suggestion

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing PR #24019

Action Performed:

1. Open staging.new.expensify.com or start Desktop App
2. Login with Expensifail.account
3. Create several chats with gmail and expensifail users with custom avatars
4. Go to Search
5. Check user's avatars in search suggestions
6. Go to FAB > Assign Task > Input any Title > Next > Share somewhere (This issue also impacts search on Assignee)
7. Check user's avatars in share suggestions

Expected Result:

Step 5 and 7 > All users have the same avatars in the list

Actual Result:

Step 5 and 7 >
Gmail users have a default avatar in the list and a custom avatar in report when opened (e.g. Chat report of a task)

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.51.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6158037_Search-Result-Task-Share-No-Avatar.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0187747fcfdb75601f
• Upwork Job ID: 1692552438131240960
• Last Price Increase: 2023-09-01

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[daordonez11]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The user avatar is shown in the tooltip but not in the search result

What is the root cause of that problem?

Inconsistency occurs because in the method getOptions the personalDetails list is filtered by the elements that contain login. Since there is no interaction with the gmail accounts they do have avatar but no login. Since UserDetailsTooltip searches in the personalDetails list without the filter it does find the avatar and the account information. Also, MultipleAvatars behaves differently than DisplayNames because in the first we are sending the icon as a prop.

What changes do you think we should make in order to solve the problem?

Here are some ways of solving this since "unknown" users is a complex topic:

1. Since we already have the filter to avoid issues and interactions we can include the same filter in UserDetailsTooltip so the icon will not appear in the tooltip. (But as it can be seen even in LHN the avatar is already shown, so it does not make so much sense to "hide it" here)

App/src/components/UserDetailsTooltip/index.web.js

Lines 17 to 21 in 7a6486e

	function UserDetailsTooltip(props) {
	const {translate} = useLocalize();
	const userDetails = lodashGet(props.personalDetailsList, props.accountID, props.fallbackUserDetails);
	let userDisplayName = userDetails.displayName ? userDetails.displayName.trim() : '';

Here include the same filter of personalDetails = _.pick(personalDetails, (detail) => Boolean(detail.login));

2. Instead of doing the filter we can map the list and bring only the "public" attributes so some information can be shown like avatar and displayName, filter by login is a filter that should be done in the backend not in the frontend because we can see this type of inconsistency.

So we can replace personalDetails = _.pick(personalDetails, (detail) => Boolean(detail.login)); with something like

_.each(personalDetails, (detail) => {
        if (Boolean(detail.login)) {
            personalDetails[detail.accountID] = {
                accountID: detail.accountID,
                avatar: detail.avatar,
                displayName: detail.displayName,
            }
        }
    });

Update: After reading some history option 2 does not work because it avoids creation of groups and other actions. Maybe we could only use this solution when in SearchPage
cc @Beamanator @puneetlath that have worked with "unknown" users to get their perspective on how to solve it.

Or a 3rd option
Same as UserDetailsTooltip load the avatars in MultipleAvatars directly from personalDetails instead of props.

What alternative solutions did you explore? (Optional)

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Search - User custom avatar is not shown in search suggestion but is shown in tooltip

What is the root cause of that problem?

When we open report with someone who does not interact with, we will create the optimistic data for personalDetails within login value and default avatar. But BE returns the different personalDetail without login value and actual avatar.

In SearchPage we show the list report, report contains the participants (accountIDs returned from BE)

In

App/src/libs/OptionsListUtils.js

Line 634 in 5510a95

personalDetails = _.pick(personalDetails, (detail) => Boolean(detail.login));

We're filtering out the personalDetail that don't have login value => the personalDetail returned from BE is filtered out. We're using this personalDetails to get the icons.

App/src/libs/OptionsListUtils.js

Line 533 in 7a6486e

result.icons = ReportUtils.getIcons(report, personalDetails, UserUtils.getAvatar(personalDetail.avatar, personalDetail.accountID), false, personalDetail.login, personalDetail.accountID);

=> We can't find report.participants in personalDetails => option.icons is the default icon

We use this icon to show in option

App/src/components/OptionRow.js

Lines 202 to 211 in 7a6486e

	<MultipleAvatars
	icons={this.props.option.icons}
	size={CONST.AVATAR_SIZE.DEFAULT}
	secondAvatarStyle={[
	StyleUtils.getBackgroundAndBorderStyle(themeColors.appBG),
	this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
	hovered && !this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
	]}
	shouldShowTooltip={this.props.showTitleTooltip && OptionsListUtils.shouldOptionShowTooltip(this.props.option)}
	/>

We're using UserDetailTooltip to show the avatar when user hovering on the title

App/src/components/DisplayNames/index.js

Lines 81 to 84 in a2dc3d2

	<UserDetailsTooltip
	key={index}
	accountID={accountID}
	fallbackUserDetails={{

it takes the accountID as the props and use it to find the avatar url => At that time we use personalDetails from onyx => the actual avatar is found here

What changes do you think we should make in order to solve the problem?

Because the personalDetails in 2 places are different. So we need to fix here.

1. We can remove these lines, because it's just the temporary fix

App/src/libs/OptionsListUtils.js

Lines 630 to 634 in 5510a95

	// We're only picking personal details that have logins set
	// This is a temporary fix for all the logic that's been breaking because of the new privacy changes
	// See https://github.com/Expensify/Expensify/issues/293465 for more context
	// eslint-disable-next-line no-param-reassign
	personalDetails = _.pick(personalDetails, (detail) => Boolean(detail.login));

2. Remove the optimistic personal detail when BE returns the actual one in

App/src/libs/actions/Report.js

Line 470 in 7a6486e

const failurePersonalDetails = {};

        const failurePersonalDetails = {};
+        const successPersonalDetails = {};
        _.map(participantLoginList, (login, index) => {
          ...
            failurePersonalDetails[accountID] = allPersonalDetails[accountID] || null;
+            successPersonalDetails[accountID] = allPersonalDetails[accountID] || null
        });

...

+        onyxData.successData.push({
+           onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+            value: successPersonalDetails,
+       });

Result

Screen.Recording.2023-08-09.at.14.55.12.mov

[MitchExpensify]

I am unable to reproduce this so far adding the label

[daordonez11]

@MitchExpensify To reproduce this one you have to create a chat with a user that does have image and you havent interacted with previously, you can use my account dloz1996@gmail.com just remember not to send a message, if you interact with the account backend will send the login and the issue is "fixed".

[MitchExpensify]

Thanks for the direction! This is what I saw when I tried that:

[MitchExpensify]

Kind of weird but I can find dloz1996@gmail.com in Assignee but not Share somewhere:

[daordonez11]

I think this is desired due to the issue we mentioned of the filter in both proposals @MitchExpensify but precisely the first image you sent is the error reported in this issue.

[MitchExpensify]

@daordonez11 Are you referring to this image? I don't see the bug in that image, it seems to be the correct picture showing. Or are you referring to this image which happens in Assignee versus Share somewhere as reported in the issue?

[daordonez11]

Let me include a video! @MitchExpensify

Icon.Error.-.8_17_2023.2_56_41.PM.webm

Error occurs in both search and share somewhere:

Share.somewhere.-.8_17_2023.2_59_16.PM.webm

[MitchExpensify]

I finally reproduced this!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0187747fcfdb75601f

[melvin-bot]

Current assignee @MitchExpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @situchan (External)

[MitchExpensify]

I'm unsure if this needs internal backend work so curious what @situchan thinks 👍

[melvin-bot]

@MitchExpensify, @situchan Huh... This is 4 days overdue. Who can take care of this?

[situchan]

@daordonez11 @tienifr are you able to reproduce on latest main?

[melvin-bot]

@MitchExpensify, @situchan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MitchExpensify]

@daordonez11 @tienifr are you able to reproduce on latest main?

Are you still waiting on this @situchan ?

[MitchExpensify]

Bump @situchan

[situchan]

yes waiting for updated proposal based on latest codebase, along with clear repro step

[melvin-bot]

@MitchExpensify, @situchan Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MitchExpensify]

Just to be clear @situchan, are you saying the current repro steps are not producing the current Actual Result?

[MitchExpensify]

Friendly bump @situchan

[melvin-bot]

@MitchExpensify, @situchan Huh... This is 4 days overdue. Who can take care of this?

[situchan]

@daordonez11 @tienifr can you please update proposals based on latest codebase?

[MitchExpensify]

Friendly bump @daordonez11 @tienifr

[tienifr]

I can't reproduce with the latest main

[MitchExpensify]

Ok lets close unless someone can reliably reproduce