[HOLD for payment 2023-07-10] [$1000] Web - Tooltip is not displayed if hovered the users which are down the list

@priya-zha

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

Action Performed:

Go to staging dot on web chrome
Go to search
Hover over the first few profile avatar of the users and notice that tooltipis displayed
Scroll down the list up to bottom and try to hover on the profile avatar (not on the display name/email) and notice that tooltip is not displayed

Expected Result:

Tooltip should be displayed if hovered the users which are down the list

Actual Result:

Tooltip is not displayed if hovered the users which are down the list

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.29.6

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

Notes/Photos/Videos: Any additional supporting documentation

error-2023-06-13_10.04.37.1.mp4

Recording.777.mp4

Expensify/Expensify Issue URL:

Issue reported by: @priya-zha

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686629969783219

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~018ca8b2c30604ca26
Upwork Job ID: 1671246480159539200
Last Price Increase: 2023-06-20

@isabelastisser

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

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

I can reproduce this!

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

@isabelastisser

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

@sobitneupane

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

Proposal

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

For some elements in the search (personalDetails) the tooltip is not displayed if hovering the image

What is the root cause of that problem?

The searchPage has a list of OptionRows, each element uses a component called MultipleAvatars to render de image, even though the prop of shouldOptionShowTooltip is calculated right this line calculates the tooltip content:
const tooltipTexts = props.shouldShowTooltip ? _.pluck(props.icons, 'name') : []; using the property name in the icons array.

For the section of personalDetails in the searchPage the icons are calculated using the method getIcons in ReportUtils.js

Since there are no reports the method only returns the source of the image.

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

Update getIcons and include a new parameter called defaultName

function getIcons(report, personalDetails, defaultIcon = null, isPayer = false, defaultName = '') {
    const result = {
        source: '',
        type: CONST.ICON_TYPE_AVATAR,
        name: '',
    };

    if (_.isEmpty(report)) {
        result.source = defaultIcon || Expensicons.FallbackAvatar;
        result.name = defaultName || '';
        return [result];
    }

So it can be sent in this line

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

Image of solution working in personalDetails section:

Video of solution working in all list:

Tooltip.working.in.whole.search.results.webm

What alternative solutions did you explore? (Optional)

At the beginning, I thought this was a backend issue but after seeing Onyx I found that it was about handling the data stored.

Other solution might work is in OptionRow component preprocess the data of the row and force the inclusion of name on each icon using the information that arrives in props. Something like including this.props.option.text as the name in each element of this.props.icons. It just seems like a lot of single resp code instead of tackling directly in the root.

Proposal

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

Web - Tooltip is not displayed if hovered the users which are down the list

What is the root cause of that problem?

Easy step to reproduce this bug is - Create a workspace invite non-existent user, after that try creating the group ( the new user will appear) and it will not have tooltip.
The root cause of this problem is that some rows doesn't have UserDetailTooltip wrapped around them.
This mainly happens because when we send option prop to OptionRow it has icons field, and in that - name is empty.
While calculating the icons -

App/src/libs/OptionsListUtils.js

Lines 514 to 521 in 0b7455f

    
               result.text = reportName; 
        
               result.searchText = getSearchText(report, reportName, personalDetailList, result.isChatRoom || result.isPolicyExpenseChat, result.isThread); 
        
               result.icons = ReportUtils.getIcons(report, personalDetails, UserUtils.getAvatar(personalDetail.avatar, personalDetail.accountID)); 
        
               result.subtitle = subtitle; 
        
               return result; 
        
           }

We call getIcons() method - And if the user hasn't take a part in any conversation the report is null or probably policyExpenseChart

App/src/libs/ReportUtils.js

Lines 715 to 815 in 0b7455f

    
           function getIcons(report, personalDetails, defaultIcon = null, isPayer = false) { 
        
               const result = { 
        
                   source: '', 
        
                   type: CONST.ICON_TYPE_AVATAR, 
        
                   name: '', 
        
               }; 
        
               if (_.isEmpty(report)) { 
        
                   result.source = defaultIcon || Expensicons.FallbackAvatar; 
        
                   return [result]; 
        
               } 
        
               if (isArchivedRoom(report)) { 
        
                   result.source = Expensicons.DeletedRoomAvatar; 
        
                   return [result]; 
        
               } 
        
               if (isThread(report)) { 
        
                   const parentReportAction = ReportActionsUtils.getParentReportAction(report); 
        
                   const actorEmail = lodashGet(parentReportAction, 'actorEmail', ''); 
        
                   const actorAccountID = lodashGet(parentReportAction, 'actorAccountID', ''); 
        
                   const actorIcon = { 
        
                       id: actorAccountID, 
        
                       source: UserUtils.getAvatar(lodashGet(personalDetails, [actorAccountID, 'avatar']), actorAccountID), 
        
                       name: actorEmail, 
        
                       type: CONST.ICON_TYPE_AVATAR, 
        
                   }; 
        
                   return [actorIcon]; 
        
               } 
        
               if (isTaskReport(report)) { 
        
                   const ownerEmail = report.ownerEmail || ''; 
        
                   const ownerIcon = { 
        
                       id: report.ownerAccountID, 
        
                       source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID), 
        
                       name: ownerEmail, 
        
                       type: CONST.ICON_TYPE_AVATAR, 
        
                   }; 
        
                   return [ownerIcon]; 
        
               } 
        
               if (isDomainRoom(report)) { 
        
                   result.source = Expensicons.DomainRoomAvatar; 
        
                   return [result]; 
        
               } 
        
               if (isAdminRoom(report)) { 
        
                   result.source = Expensicons.AdminRoomAvatar; 
        
                   return [result]; 
        
               } 
        
               if (isAnnounceRoom(report)) { 
        
                   result.source = Expensicons.AnnounceRoomAvatar; 
        
                   return [result]; 
        
               } 
        
               if (isChatRoom(report)) { 
        
                   result.source = Expensicons.ActiveRoomAvatar; 
        
                   return [result]; 
        
               } 
        
               if (isPolicyExpenseChat(report) || isExpenseReport(report)) { 
        
                   const workspaceName = lodashGet(allPolicies, [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'name']); 
        
                   const policyExpenseChatAvatarSource = lodashGet(allPolicies, [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatar']) || getDefaultWorkspaceAvatar(workspaceName); 
        
                   // Return the workspace avatar if the user is the owner of the policy expense chat 
        
                   if (report.isOwnPolicyExpenseChat && !isExpenseReport(report)) { 
        
                       result.source = policyExpenseChatAvatarSource; 
        
                       result.type = CONST.ICON_TYPE_WORKSPACE; 
        
                       result.name = workspaceName; 
        
                       return [result]; 
        
                   } 
        
                   const adminIcon = { 
        
                       id: report.ownerAccountID, 
        
                       source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID), 
        
                       name: report.ownerEmail, 
        
                       type: CONST.ICON_TYPE_AVATAR, 
        
                   }; 
        
                   const workspaceIcon = { 
        
                       source: policyExpenseChatAvatarSource, 
        
                       type: CONST.ICON_TYPE_WORKSPACE, 
        
                       name: workspaceName, 
        
                   }; 
        
                   // If the user is an admin, return avatar source of the other participant of the report 
        
                   // (their workspace chat) and the avatar source of the workspace 
        
                   return [adminIcon, workspaceIcon]; 
        
               } 
        
               if (isIOUReport(report)) { 
        
                   const email = isPayer ? report.managerEmail : report.ownerEmail; 
        
                   const accountID = isPayer ? report.managerID : report.ownerAccountID; 
        
                   return [ 
        
                       { 
        
                           id: accountID, 
        
                           source: UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar']), accountID), 
        
                           name: email, 
        
                           type: CONST.ICON_TYPE_AVATAR, 
        
                       }, 
        
                   ]; 
        
               } 
        
               return getIconsForParticipants(report.participantAccountIDs, personalDetails); 
        
           }

We return -

App/src/libs/ReportUtils.js

Lines 716 to 720 in 0b7455f

    
           const result = { 
        
               source: '', 
        
               type: CONST.ICON_TYPE_AVATAR, 
        
               name: '', 
        
           };

as it never reaches the -

App/src/libs/ReportUtils.js

Line 814 in 0b7455f

return getIconsForParticipants(report.participantAccountIDs, personalDetails);

That's why name for icon being empty - we don't wrap it with UserDetailTooltip.

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

We need to handle the case for getting the icons when the report is empty, using result.participantsList, we have a method getIconsForParticipants() we can pass result.participantList (it will be array of accountID) and personalDetails and get the icons.
This will ensure that all the users have the correct set of icons.
Example -

result.icons = report ? <get icons by given way> : <use geticonsForParticipants()>

What alternative solutions did you explore? (Optional)

@sobitneupane

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:

[@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:

Probably this PR or might have caused by some PR involving accountID migration.

[@sobitneupane] 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:

https://expensify.slack.com/archives/C049HHMV9SM/p1688977644296659

[@sobitneupane] Determine if we should create a regression test for this bug.

Yes.

[@sobitneupane] 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.

#21099 (comment)

Regression Test Proposal:

Login with a high traffic account
Go to search
Hover over the profile picture of the user without previous chat history in the search list
Verify that the tooltip is displayed.

Do we agree 👍 or 👎

Payment Requested on Expensify.

@sobitneupane

@sobitneupane I will review and process the payment by EOD.

@daordonez11

@daordonez11 - what's your profile in Upwork? I can't find you there.
@priyeshshah11 - what's your profile in Upwork? I can't find you there.
@sobitneupane - I sent you an offer in Upwork!

@daordonez11

@daordonez11 - what's your profile in Upwork? I can't find you there.

@priya-zha - what's your profile in Upwork? I can't find you there.

@sobitneupane - I sent you an offer in Upwork!

I think you might have wrongly tagged me instead of @priya-zha

@isabelastisser

@isabelastisser I have requested payment and will be paid through Expensify App.

@priya-zha

@priya-zha, I sent you an offer in Upwork.

@sobitneupane, I don't see a payment request from you in Upwork, please accept the offer I sent you today, and I will process the payment thorough Upwork.

@isabelastisser

[@isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

https://github.com/Expensify/Expensify/issues/299030

@isabelastisser

@isabelastisser https://www.upwork.com/freelancers/~01e96b8da58232f028 here is my link! thanks

@sobitneupane

Paid @sobitneupane

All set!

Navigation Menu

Repository navigation

[HOLD for payment 2023-07-10] [$1000] Web - Tooltip is not displayed if hovered the users which are down the list #21099

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

48 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development


	result.text = reportName;
	result.searchText = getSearchText(report, reportName, personalDetailList, result.isChatRoom \|\| result.isPolicyExpenseChat, result.isThread);
	result.icons = ReportUtils.getIcons(report, personalDetails, UserUtils.getAvatar(personalDetail.avatar, personalDetail.accountID));
	result.subtitle = subtitle;

	return result;
	}

	function getIcons(report, personalDetails, defaultIcon = null, isPayer = false) {
	const result = {
	source: '',
	type: CONST.ICON_TYPE_AVATAR,
	name: '',
	};

	if (_.isEmpty(report)) {
	result.source = defaultIcon \|\| Expensicons.FallbackAvatar;
	return [result];
	}
	if (isArchivedRoom(report)) {
	result.source = Expensicons.DeletedRoomAvatar;
	return [result];
	}
	if (isThread(report)) {
	const parentReportAction = ReportActionsUtils.getParentReportAction(report);

	const actorEmail = lodashGet(parentReportAction, 'actorEmail', '');
	const actorAccountID = lodashGet(parentReportAction, 'actorAccountID', '');
	const actorIcon = {
	id: actorAccountID,
	source: UserUtils.getAvatar(lodashGet(personalDetails, [actorAccountID, 'avatar']), actorAccountID),
	name: actorEmail,
	type: CONST.ICON_TYPE_AVATAR,
	};

	return [actorIcon];
	}
	if (isTaskReport(report)) {
	const ownerEmail = report.ownerEmail \|\| '';
	const ownerIcon = {
	id: report.ownerAccountID,
	source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID),
	name: ownerEmail,
	type: CONST.ICON_TYPE_AVATAR,
	};

	return [ownerIcon];
	}
	if (isDomainRoom(report)) {
	result.source = Expensicons.DomainRoomAvatar;
	return [result];
	}
	if (isAdminRoom(report)) {
	result.source = Expensicons.AdminRoomAvatar;
	return [result];
	}
	if (isAnnounceRoom(report)) {
	result.source = Expensicons.AnnounceRoomAvatar;
	return [result];
	}
	if (isChatRoom(report)) {
	result.source = Expensicons.ActiveRoomAvatar;
	return [result];
	}
	if (isPolicyExpenseChat(report) \|\| isExpenseReport(report)) {
	const workspaceName = lodashGet(allPolicies, [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'name']);

	const policyExpenseChatAvatarSource = lodashGet(allPolicies, [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatar']) \|\| getDefaultWorkspaceAvatar(workspaceName);

	// Return the workspace avatar if the user is the owner of the policy expense chat
	if (report.isOwnPolicyExpenseChat && !isExpenseReport(report)) {
	result.source = policyExpenseChatAvatarSource;
	result.type = CONST.ICON_TYPE_WORKSPACE;
	result.name = workspaceName;
	return [result];
	}

	const adminIcon = {
	id: report.ownerAccountID,
	source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID),
	name: report.ownerEmail,
	type: CONST.ICON_TYPE_AVATAR,
	};

	const workspaceIcon = {
	source: policyExpenseChatAvatarSource,
	type: CONST.ICON_TYPE_WORKSPACE,
	name: workspaceName,
	};

	// If the user is an admin, return avatar source of the other participant of the report
	// (their workspace chat) and the avatar source of the workspace
	return [adminIcon, workspaceIcon];
	}
	if (isIOUReport(report)) {
	const email = isPayer ? report.managerEmail : report.ownerEmail;
	const accountID = isPayer ? report.managerID : report.ownerAccountID;
	return [
	{
	id: accountID,
	source: UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar']), accountID),
	name: email,
	type: CONST.ICON_TYPE_AVATAR,
	},
	];
	}

	return getIconsForParticipants(report.participantAccountIDs, personalDetails);
	}

[HOLD for payment 2023-07-10] [$1000] Web - Tooltip is not displayed if hovered the users which are down the list #21099

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

melvin-bot commented on Jun 20, 2023

melvin-bot commented on Jun 20, 2023

Bug0 Triage Checklist (Main S/O)

isabelastisser commented on Jun 20, 2023

melvin-bot commented on Jun 20, 2023

melvin-bot commented on Jun 20, 2023

melvin-bot commented on Jun 20, 2023

daordonez11 commented on Jun 21, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

BhuvaneshPatil commented on Jun 21, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

48 remaining items

sobitneupane commented on Jul 10, 2023

sobitneupane commented on Jul 10, 2023

sobitneupane commented on Jul 10, 2023

isabelastisser commented on Jul 10, 2023

isabelastisser commented on Jul 11, 2023

priyeshshah11 commented on Jul 11, 2023

sobitneupane commented on Jul 11, 2023

isabelastisser commented on Jul 11, 2023

isabelastisser commented on Jul 11, 2023

daordonez11 commented on Jul 11, 2023

anmurali commented on Jul 11, 2023

isabelastisser commented on Jul 11, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions