[$500] User avatars aren't showing on Tasks

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: v1.3.99-0
Reproducible in staging?: yes
Reproducible in production?: Yes
Issue reported by: Me
Slack conversation: N/A

Action Performed:

Create or locate two users with custom avatars
Create a task and assign to another user
View the task as the task assignee
View the task as the task creator

Expected Result:

User avatars should be displayed

Actual Result:

Default avatars are displayed

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01e392efbd2033f1dc
Upwork Job ID: 1725084537297600512
Last Price Increase: 2023-11-16
Automatic offers:

alitoshmatov | Reviewer | 27861088
bernhardoj | Contributor | 27861089

@miljakljajic

Triggered auto assignment to @miljakljajic (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

Proposal

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

Default avatars are displayed

What is the root cause of that problem?

The default avatar is displayed in task view

Currently, we use the below logic to get the assignee avatar:

App/src/components/ReportActionItem/TaskView.js

Line 150 in 5e01376

icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], props.personalDetails)}
But props.personalDetails is undefined because we do not subscribe ONYXKEYS.PERSONAL_DETAILS_LIST

The default avatar is displayed in OptionRowLHN

We are using the below logic to get the optionItem to display in LHN:

App/src/components/LHNOptionsList/OptionRowLHNData.js

Line 90 in 1ddd581

const item = SidebarUtils.getOptionData(fullReport, reportActions, personalDetails, preferredLocale, policy, parentReportAction);

with the personalDetails is from the below logic:

App/src/components/LHNOptionsList/LHNOptionsList.js

Line 142 in 1ddd581

const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(itemFullReport.participantAccountIDs, personalDetails);
With the task report, report.participantAccountIDs does not contain the owner `s accountID, that leads to the default avatar displayed

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

We need to subscribe ONYXKEYS.PERSONAL_DETAILS_LIST in TaskView:

    withOnyx({
        personalDetails: {
            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
        },
    }),

We can update the getParticipantsIDs (It will also fix other sections that are missing the participants, for example, report detail page): to:

function getParticipantsIDs(report) {
...
+    if (isMoneyRequestReport(report) || isTaskReport(report)) {
        return _.chain([report.managerID, report.ownerAccountID, ...participants])
            .compact()
            .uniq()
            .value();
    }
    return participants;
}

Then update:

App/src/components/LHNOptionsList/LHNOptionsList.js

Line 142 in 1ddd581

const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(itemFullReport.participantAccountIDs, personalDetails);

to:

const participantsPersonalDetails 
    = OptionsListUtils.getPersonalDetailsForAccountIDs(getParticipantsIDs(itemFullReport), personalDetails);

What alternative solutions did you explore? (Optional)

Also we can use the allPersonalDetails that is subscribed in OptionsListUtils if the param allPersonalDetails is empty

Result

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

@alitoshmatov

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

Proposal

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

The assignee avatar shows a default avatar
The task owner avatar on LHN also shows a default avatar

What is the root cause of that problem?

For the first issue, the assignee avatar is coming from this line of code.

App/src/components/ReportActionItem/TaskView.js

Line 151 in 6ea4539

    
           icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], props.personalDetails)}

The avatar is supposed to be retrieved from the personalDetails onyx object, but it's undefined because we are not subscribing the object from the onyx, so the avatar here is always an empty string, thus a default avatar is used.

App/src/libs/OptionsListUtils.js

Lines 140 to 144 in 6ea4539

    
           const userPersonalDetail = lodashGet(personalDetails, accountID, {login, accountID, avatar: ''}); 
        
           return { 
        
               id: accountID, 
        
               source: UserUtils.getAvatar(userPersonalDetail.avatar, userPersonalDetail.accountID),

For the second issue, the LHN avatar is coming from ReportUtils.getReportIcon. It takes the assigner (owner) avatar from the personalDetails onyx object.

App/src/libs/ReportUtils.js

Lines 1159 to 1166 in 6ea4539

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

However, the personalDetails object that is passed down from LHNOptionsList component only contains the personal details of the report participants.

App/src/components/LHNOptionsList/LHNOptionsList.js

Line 142 in 6ea4539

    
           const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(itemFullReport.participantAccountIDs, personalDetails);

App/src/components/LHNOptionsList/LHNOptionsList.js

Line 151 in 6ea4539

personalDetails={participantsPersonalDetails}

In the case of a task, the report participants only contain the assignee (manager). So, when we are trying to get the avatar of the owner, we get nothing, and again, the default avatar is used.

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

Subscribe to personal details onyx in TaskView.

compose(..., withOnyx({personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS_LIST }}))(TaskView)

Include ownerAccountID in the personal details.

App/src/components/LHNOptionsList/LHNOptionsList.js

Line 142 in 6ea4539

const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(itemFullReport.participantAccountIDs, personalDetails);

// filter out account ID of 0. ownerAccountID can be 0 if it's not a task.
const participants = [itemFullReport.ownerAccountID, ...itemFullReport.participantAccountIDs].filter((p) => p !== 0);

or

const participants = [...itemFullReport.participantAccountIDs]
if (itemFullReport.ownerAccountID > 0) {
    participants.push(itemFullReport.ownerAccountID);
}

const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails);

@bernhardoj

Regardless of how the feature currently works, we only need to resolve the initial bug. Lets not increase scope here.

We should go with @bernhardoj's proposal.

@bernhardoj

Thank you

@bernhardoj You can proceed with PR

@alitoshmatov

PR is ready

cc: @alitoshmatov

This issue is long overdue. The corresponding PR was deployed to production on 7th of December. It caused this regression - #32416. We successfully fixed that regression in this PR and it was also deployed to product on 7th of December.

@alitoshmatov

Ah thanks, it looks like our automation failed to add the 'HOLD for payment' warning. Does this sound right?

C+ payment for @alitoshmatov
Contributor payment for @bernhardoj
With a regression reduction

@miljakljajic

Hey @miljakljajic, would you mind paying this one out? Thanks

@miljakljajic

@miljakljajic Friendly bump

So sorry, paying right away!

Paid in upwork.

Navigation Menu

Repository navigation

[$500] User avatars aren't showing on Tasks #31372

Action Performed:

Expected Result:

Actual Result:

Platforms:

Screenshots/Videos

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)

Result

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?

31 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const userPersonalDetail = lodashGet(personalDetails, accountID, {login, accountID, avatar: ''});

	return {
	id: accountID,
	source: UserUtils.getAvatar(userPersonalDetail.avatar, userPersonalDetail.accountID),

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

[$500] User avatars aren't showing on Tasks #31372

Description

Action Performed:

Expected Result:

Actual Result:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Nov 15, 2023

melvin-bot commented on Nov 15, 2023

Bug0 Triage Checklist (Main S/O)

DylanDylann commented on Nov 16, 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)

Result

melvin-bot commented on Nov 16, 2023

melvin-bot commented on Nov 16, 2023

bernhardoj commented on Nov 16, 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?

31 remaining items

Julesssss commented on Nov 28, 2023

alitoshmatov commented on Nov 28, 2023

bernhardoj commented on Nov 28, 2023

alitoshmatov commented on Dec 21, 2023

Julesssss commented on Dec 21, 2023

Julesssss commented on Dec 21, 2023

alitoshmatov commented on Jan 4, 2024

miljakljajic commented on Jan 4, 2024

miljakljajic commented on Jan 4, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions