[$500] Report - A tooltip does not appear above the mentioned user with no conversation history

[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!

---

Version Number: 1.4.35-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4257564
Email or phone of affected tester (no customers): sustinov@applausemail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Open https://staging.new.expensify.com/
2. Log in under your HT account
3. Navigate to any conversation
4. Paste the text "@unexistingperson@gmail.com"
   into the Compose Box
5. Send a message
6. Hover over "@unexistingperson@gmail.com"
   in the conversation

Expected Result:

A tooltip should appear above the mentioned user who has no conversation history

Actual Result:

A tooltip does not appear above the mentioned user with no conversation history

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6363568_1706790209772.Recording__1247.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016bf9af6101d5958e
• Upwork Job ID: 1753058291231088640
• Last Price Increase: 2024-02-01
• Automatic offers:
• akinwale | Reviewer | 28145420
• FitseTLT | Contributor | 28145421

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~016bf9af6101d5958e

[melvin-bot]

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

[melvin-bot]

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

[lanitochka17]

We think that this bug might be related to #vip-vsp
CC @quinthar

[FitseTLT]

Proposal

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

A tooltip does not appear above the mentioned user with no conversation history

What is the root cause of that problem?

Currently if we don't have the user in personal details we display the mention without tooltip

App/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx

Lines 88 to 89 in 9d4c634

	if (!icon && !userDisplayName && !userLogin) {
	return children;

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

We are already passing the login in fallbackUserDetails so we can use it to be title and subtitle of the tooltip here

App/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx

Lines 39 to 41 in 9d4c634

	let title = String(userDisplayName).trim() ? userDisplayName : '';
	let subtitle = userLogin.trim() && LocalePhoneNumber.formatPhoneNumber(userLogin) !== userDisplayName ? Str.removeSMSDomain(userLogin) : '';
	if (icon && (icon.type === CONST.ICON_TYPE_WORKSPACE || !title)) {

and change the current display logic to display with tooltip when there is fallbackUserDetails

App/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx

Lines 88 to 89 in 9d4c634

	if (!icon && !userDisplayName && !userLogin) {
	return children;

And display a default avatar on the tooltip

What alternative solutions did you explore? (Optional)

As we use BaseUserDetailsTooltip in different we can specialize this requirement only for mentions by creating a new prop and passing it
Also we can optionally start adding personal details optimistically when a user is mentioned so that we don't have to wait until the BE returns the personal details as it is behaving now

[Tony-MK]

Proposal

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

What is the root cause of that problem?

In this scenario, the only optimistic personalDetails for the account is the displayName because the login is an empty string.

Therefore, when personalDetails.isOptimisticPersonalDetail is true, the getDisplayNameForParticipant function returns the formattedLogin before calling the getDisplayNameOrDefault to the display name.

App/src/libs/ReportUtils.ts

Lines 1619 to 1621 in 33463c2

	if (personalDetails.isOptimisticPersonalDetail === true) {
	return formattedLogin;
	}

That is also why is bug only persists if the user has no internet connectivity because the realistic personalDetails will eventually be retrieved from the backend.

Hence, the root cause is that output of the getDisplayNameForParticipant is an empty string and the condition below relies upon the ?? operator.

Thus, in BaseUserDetailsTooltip component, userDisplayName will be an empty string.

App/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx

Lines 21 to 22 in 33463c2

	const userDetails = personalDetails?.[accountID] ?? fallbackUserDetails ?? {};
	let userDisplayName = ReportUtils.getDisplayNameForParticipant(accountID) ?? (userDetails.displayName ? userDetails.displayName.trim() : '');

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

Change the BaseUserDetailsTooltip component to check if the output of getDisplayNameForParticipant is an empty string.

This will force a fallback to the successive condition to set userDisplayName as userDetails.displayName.trim().

Therefore, we can switch the ?? operator with the || operator to ensure the userDisplayName is not an empty string.

let userDisplayName = ReportUtils.getDisplayNameForParticipant(accountID) || (userDetails.displayName ? userDetails.displayName.trim() : ''); 

What alternative solutions did you explore? (Optional)

Modify the getDisplayNameForParticipant function to return the displayName if it's available and the mention user's personalDetails are optimistic.

In this solution, we will use the PersonalDetailsUtils.getDisplayNameOrDefault function.

[garrettmknight]

@akinwale can you review these proposals please?