[HOLD for payment 2024-02-09] [$500] [MEDIUM] Expense - Title tooltip shows email below workspace name when display name is set up

[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.28-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition: User has no display name

1. Create a new workspace
2. Create a manual request in the workspace chat
3. Hover over the title (name) above the expense preview
4. Go to Settings > Profile > Display name and set a display name
5. Return to the workspace chat in Step 2
6. Hover over the title (name) above the expense preview

Expected Result:

The tooltip when hovering over title will show only the workspace name and avatar, like Step 3

Actual Result:

When user has a display name, the tooltip when hovering over expense title shows user email below the workspace name

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

Bug6347995_1705691706595.20240120_025449.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b2161e3851964e8e
• Upwork Job ID: 1748433969705230336
• Last Price Increase: 2024-01-19
• Automatic offers:
• jjcoffee | Reviewer | 28121747
• Krishna2323 | Contributor | 28121748

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01b2161e3851964e8e

[melvin-bot]

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

[melvin-bot]

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

[lanitochka17]

We think that this bug might be related to #wave6.
CC @greg-schroeder

[Krishna2323]

Proposal

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

Expense - Title tooltip shows email below workspace name when display name is set up

What is the root cause of that problem?

We don't update the subtitle when icon is Workspace icon but we do update the title if the icon type is a workspace (icon.type === CONST.ICON_TYPE_WORKSPACE).

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

Lines 40 to 43 in 68e997d

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

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

We need to reassign the subtitle value to empty string when the icon type is workspace, just like we do for the title. We are also checking for !title beside icon.type === CONST.ICON_TYPE_WORKSPACE, if we want we will only check for icon && (icon.type === CONST.ICON_TYPE_WORKSPACE incase of updating subtitle.

Updated Code:

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

Note: This wouldn't cause any regressions as we already have a check for icon type & we are resetting title based on that, we will just set the subtitle to empty if the icon is of type workspace and I think thats the expected behaviour. We already have condition for isWorkspaceActor to get the icon type so I don't think we need to do it again. We can simply use the existing condition inside BaseUserDetailsTooltip.

Result

[abzokhattab]

Proposal

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

tooltip subtitle is not consistent in workspace report preview

What is the root cause of that problem?

here we set the subtitle of the tooltip:

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

Line 40 in 1bcccc6

const subtitle = userLogin.trim() && LocalePhoneNumber.formatPhoneNumber(userLogin) !== userDisplayName ? Str.removeSMSDomain(userLogin) : '';

the value is set in case the display name is not equal to the login name

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

we can simplify it to show the login name and if not found it should show the display name as the above condition is not consistent:

    const subtitle = (userLogin && LocalePhoneNumber.formatPhoneNumber(userLogin)) ??  userDisplayName ?? '';

[barros001]

Proposal

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

When hovering over IOU, the tooltip displays the workspace's name as well as the user email if that user has a display name defined.

What is the root cause of that problem?

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

Lines 39 to 43 in 68e997d

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

The tooltip is user centric, meaning it always use the user name and email as title and subtitle. The lines above show a check if we're actually dealing with a workspace tooltip by checking if the icons is a workspace icon. If so then it uses the icon's name as the title, which is the workspace's name. But it fails the clear the subtitle which at that point could contain the user's email address.

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

I propose the following change:

    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)) {
        title = icon.name ?? '';
        subtitle = '';
    }

We could also wrap the subtitle = '' in a check if we're actually dealing with a workspace such as the code below because title could be empty but we're not dealing with a workspace, so we might want to keep the subtitle intact.

    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)) {
        title = icon.name ?? '';
        
        // if it's a workspace, clear subtitle
        if (icon.type === CONST.ICON_TYPE_WORKSPACE) {
            subtitle = '';
        }
    }

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[JeremyCroff]

Proposal

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

User emails should not render in workspace avatar tooltips.

What is the root cause of that problem?

A tightly coupled BaseUserDetailsTooltip component is trying to handle user tooltips and workspace tooltips.

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

The previous solutions do not take into account seperation of concern. The code is complex and has conditionals because it's serving dual purposes. As individual requirements between workspace and user tooltips change this will grow the maintenance. I propose creating a seperate workspace details tooltip, and removing the workspace logic from the user tooltip. Continuing to share common layout from the HOC.

What alternative solutions did you explore? (Optional)

I explored simple fixing the logic, to empty the subtitle for workspaces. But it can be simplified and is within the budget.