[HOLD for payment 2024-10-24] [$250] Web -Tooltip -Tooltip is not displayed when hovering over the avatar in the main conversation

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.40-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?/runs/view/25140&group_by=cases:section_id&group_order=asc&group_id=291936
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the website https://staging.new.expensify.com/
2. Log in
3. Create a task report in a conversation and assign the other user
4. In the conversation history, hover over the assignee avatar

Expected Result:

A tooltip with the assignee user details should display when hovering over the avatar in both the main conversation and the task details conversation

Actual Result:

A tooltip with the assignee user details is not displayed when hovering over the avatar in the main conversation

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

Bug6620584_1727730415306.Screen_Recording_2024-09-30_at_4.00.09_PM.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021843406645377169271
• Upwork Job ID: 1843406645377169271
• Last Price Increase: 2024-10-07
• Automatic offers:
• dukenv0307 | Reviewer | 104379252
• abzokhattab | Contributor | 104379255

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@johncschuster FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-10-04 21:05:21 UTC.

Proposal

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

The tooltip is not displayed when hovering over the task assignee's avatar.

What is the root cause of that problem?

The assignee avatar is displayed without being wrapped by the UserDetailsTooltip component, which is responsible for showing the tooltip on hover:

App/src/components/ReportActionItem/TaskPreview.tsx

Lines 120 to 127 in 92eee5f

	<Avatar
	containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
	source={avatar}
	size={avatarSize}
	avatarID={taskAssigneeAccountID}
	type={CONST.ICON_TYPE_AVATAR}
	/>
	)}

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

We should wrap the avatar with the UserDetailsTooltip component (same as we are doing in the ReportActionItemSingle) as follows:

{hasAssignee && (
                        <UserDetailsTooltip accountID={Number(taskAssigneeAccountID ?? -1)}>
                            <View>
                                <Avatar
                                    containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
                                    source={avatar}
                                    size={avatarSize}
                                    avatarID={taskAssigneeAccountID}
                                    type={CONST.ICON_TYPE_AVATAR}
                                />
                            </View>
                        </UserDetailsTooltip>
                    )}

POC

Screen.Recording.2024-10-04.at.22.05.26.mov

What alternative solutions did you explore? (Optional)

Alternatively, we can use SubscriptAvatar instead of the prev snippet, which embeds both the Avatar and the UserDetailsTooltip. Here's how it would look:

let displayName = ReportUtils.getDisplayNameForParticipant(taskAssigneeAccountID);
    const icon = {
        source: avatar,
        type: CONST.ICON_TYPE_AVATAR,
        name: displayName ?? '',
        id: taskAssigneeAccountID,
    };

....
{hasAssignee && (
    <SubscriptAvatar 
        mainAvatar={icon}
        size={avatarSize}
    />)
}

Additionally we should extend the SubscriptAvatar props to accept the container styles so that we can pass the existing style to the inner avatar

[twilight2294]

Proposal

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

Tooltip is not displayed when hovering over the avatar in the main conversation

What is the root cause of that problem?

We are not adding tooltip to the avatar hence no tooltip is displayed:

App/src/components/ReportActionItem/TaskPreview.tsx

Lines 120 to 127 in 92eee5f

	<Avatar
	containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
	source={avatar}
	size={avatarSize}
	avatarID={taskAssigneeAccountID}
	type={CONST.ICON_TYPE_AVATAR}
	/>
	)}

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

Here there are 2 factors involved,

• when the task is marked as completed:
• When the task is open

When the task is competed we should not show the assignee following the same patter as we grey out the avatar and put a line to text:

If we directly display the tooltip without first checking if the task is open then we will cause a regression when the task is closed we will still show the tooltip even when the avatar has greyed out:

So to properly solve this bug, we should check if the task is not completed and then only show the avatar, without which it will cause regression :

{hasAssignee && (
    <UserDetailsTooltip
        shouldRender={!isTaskCompleted}
        accountID={taskAssigneeAccountID ?? -1}
    >
        <View>
            <Avatar
                containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
                source={avatar}
                size={avatarSize}
                avatarID={taskAssigneeAccountID}
                type={CONST.ICON_TYPE_AVATAR}
            />
        </View>
    </UserDetailsTooltip>
)}

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[dukenv0307]

@abzokhattab's proposal looks good to me

@twilight294 I don't think we should hide tooltip in case the task is completed

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @francoisl, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[twilight2294]

@francoisl can you confirm this, I think we should hide the tooltip if the task is completed, this will match the design, as we strike of name and fade the avatar when the task is completed (currently then the avatar will be faded but we will have bright tooltip, which is wrong IMO), shouldn't we match this design wise here? that would make more sense

[francoisl]

Personally I think it makes sense to always show the tooltip, even for completed tasks. Mostly for consistency.
/cc @johncschuster for a second opinion.

[twilight2294]

Mostly for consistency.

We grey out the avatar of the user:

So i thought to not show the tooltip in that case, eager to hear what @johncschuster has to say, thanks for responding @francoisl :))

[melvin-bot]

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

[johncschuster]

I agree with @francoisl that we should show the tooltip for consistency.

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @abzokhattab 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[abzokhattab]

PR is ready #50690

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.49-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix assignee tooltip in the task preview #50690

If no regressions arise, payment will be issued on 2024-10-24. 🎊

For reference, here are some details about the assignees on this issue:

• @abzokhattab requires payment automatic offer (Contributor)
• @dukenv0307 requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@dukenv0307] The PR that introduced the bug has been identified. Link to the PR:
• [@dukenv0307] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@dukenv0307] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@dukenv0307] Determine if we should create a regression test for this bug.
• [@dukenv0307] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@johncschuster] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[johncschuster]

Looks like payment is due tomorrow for this one

[dukenv0307]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR: chore: update task preview UI #48552
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/48552/files#r1815555937
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• Determine if we should create a regression test for this bug. Yes
• If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression test:

1. Open DM with any user.
2. Create a task within the conversation and assign this user as the assignee.
3. In the task preview message, hover over the assignee's avatar.
4. On both desktop and web platforms, ensure that a tooltip with the user's details appears when hovering over the avatar.

Do we 👍 or 👎

[johncschuster]

Payment Summary:

Contributor: @abzokhattab paid $250 via Upwork - PAID! 🎉
Contributor+: @dukenv0307 paid $250 via Upwork - PAID! 🎉

[melvin-bot]

@francoisl @johncschuster Be sure to fill out the Contact List!