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

lanitochka17 commented 2 hours ago

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: 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:

Open the website https://staging.new.expensify.com/
Log in
Create a task report in a conversation and assign the other user
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
[x] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/68ed5f60-5ee3-49cf-b5da-9ce49d6cad85

View all open jobs on GitHub

melvin-bot[bot] commented 2 hours ago

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 commented 2 hours ago

@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 commented 1 hour ago

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:

https://github.com/Expensify/App/blob/92eee5f433c15203e37cf5c87ea57fd9a1664b3e/src/components/ReportActionItem/TaskPreview.tsx#L120-L127

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

https://github.com/user-attachments/assets/cbd1f2da-dadc-42d5-89ff-f4abd6dfe8af

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

twilight294 commented 1 hour ago

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:

https://github.com/Expensify/App/blob/92eee5f433c15203e37cf5c87ea57fd9a1664b3e/src/components/ReportActionItem/TaskPreview.tsx#L120-L127

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>
)}

Expensify / App