[HOLD for payment 2023-07-20] [$1000] Wrong image/email shown in share section of create task when creating a task in money request report

[kbecciv]

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:

Action Performed:

1. Create a money request report with a user
2. Go into the money request report
3. Create a task, add title and click continue
4. Notice in the 'Share somewhere' section - the user avatar and email are mixed up

Expected Result:

Correct user details should be shown in share destination of create task in money request report

Actual Result:

Incorrect user details are shown

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.32-5
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

Screen.Recording.2023-06-22.at.5.24.54.PM.1.mov

Recording.897.mp4

Expensify/Expensify Issue URL:
Issue reported by: @huzaifa-99
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1687436719552939

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0138cc4c569e7bbc9b
• Upwork Job ID: 1673809747129135104
• Last Price Increase: 2023-06-27

[melvin-bot]

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

[melvin-bot]

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

[StevenKKC]

Proposal

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

Wrong image/email shown in share section of create task when creating a task in money request report.

What is the root cause of that problem?

When we create a task in a report, the report will be set as the parent report and displayed in the share section.

App/src/pages/home/report/ReportActionCompose.js

Lines 423 to 429 in 5e6e5cf

	return [
	{
	icon: Expensicons.Task,
	text: this.props.translate('newTaskPage.assignTask'),
	onSelected: () => TaskUtils.clearOutTaskInfoAndNavigate(this.props.reportID),
	},
	];

App/src/libs/actions/Task.js

Lines 517 to 521 in 5e6e5cf

	function clearOutTaskInfoAndNavigate(reportID) {
	clearOutTaskInfo();
	setParentReportID(reportID);
	Navigation.navigate(ROUTES.NEW_TASK_DETAILS);
	}

App/src/pages/tasks/NewTaskPage.js

Lines 95 to 108 in 5e6e5cf

	// We only set the parentReportID if we are creating a task from a report
	// this allows us to go ahead and set that report as the share destination
	// and disable the share destination selector
	if (props.task.parentReportID) {
	TaskUtils.setShareDestinationValue(props.task.parentReportID);
	}
	// If we have a share destination, we want to set the parent report and
	// the share destination data
	if (props.task.shareDestination) {
	setParentReport(lodashGet(props.reports, `report_${props.task.shareDestination}`, {}));
	const displayDetails = TaskUtils.getShareDestination(props.task.shareDestination, props.reports, props.personalDetails);
	setShareDestination(displayDetails);
	}

As you can see in the video, the report name is equal to the item in LHN, i.e. the money request report name.
But the report icon is different.
The report icon in LHN item is retrieved using the following code.

App/src/libs/SidebarUtils.js

Line 378 in 5e6e5cf

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

And in share section, the icon is retrieved using the following code.

App/src/libs/actions/Task.js

Line 555 in 5e6e5cf

icons: ReportUtils.getIcons(report, personalDetails),

There are no avatar and isPayer parameter, so the icon is different with one in LHN.

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

We can add avatar and isPayer parameter in getShareDestination just like LHN.

function getShareDestination(reportID, reports, personalDetails) {
    const report = lodashGet(reports, `report_${reportID}`, {});
    const personalDetail = personalDetails[0] || {};
    return {
        icons: ReportUtils.getIcons(report, personalDetails, UserUtils.getAvatar(personalDetail.avatar, personalDetail.accountID), true),
        displayName: ReportUtils.getReportName(report),
        subtitle: ReportUtils.getChatRoomSubtitle(report),
    };
}

What alternative solutions did you explore? (Optional)

None.

[tjferriss]

I'm able to reproduce this one.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[c3024]

Proposal

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

When we create a task from money request report, the avatar shown at share somehere is different from the avatar of email displayed there.

What is the root cause of that problem?

This is the MenuItem in NewTaskPage that shows shareDestination.
https://github.com/Expensify/App/blob/387ff7fa74740a21db4b5664556bbc3d35fa16cb/src/pages/tasks/NewTaskPage.js#L175C1-L182C23
This useEffect sets parentReportID as the shareDestination
https://github.com/Expensify/App/blob/387ff7fa74740a21db4b5664556bbc3d35fa16cb/src/pages/tasks/NewTaskPage.js#L98C1-L100C10
Here we are using shareDestination.displayName as title.
displayName is given reportName here.
https://github.com/Expensify/App/blob/387ff7fa74740a21db4b5664556bbc3d35fa16cb/src/libs/actions/Task.js#L555C1-L556C56
So displayName need not be email or username. Instead it can be a report name which is the case here.
In this case, the title shown at shareDestination is not email. Instead it is receiver owes X and the owes X is not visible so it appears like email. And the icons assigned as shown above from
https://github.com/Expensify/App/blob/387ff7fa74740a21db4b5664556bbc3d35fa16cb/src/libs/ReportUtils.js#L802C5-L813C6
Since, we are not passing isPayer it takes default value of false and it just returns the ownerEmail which is the sender ID in this case.
So, the receiver owes X and avatar of sender makes it appear that different email/displayName and avatar are shown.

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

At the title of MenuItem of shareDestination we should not use shareDestination.displayName. Instead we should use one of the icons of shareDestination. From the TaskShareDestinationSelectorModal, we allow only to pick only one user to share somewhere. So selecting one user makes sense.
MenuItem should be changed as follows:

<MenuItem
                        label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
                        title={shareDestination.icons ? shareDestination.icons[0].name : ''}
                        description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
                        icon={shareDestination.icons ? [shareshareDestination.icons[0]] : []}
                        onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
                        shouldShowRightIcon
                    />

This now gets both icon and name from same array element.

What alternative solutions did you explore? (Optional)

I found another issue in this though it may not be in the scope of this.
If we change the shareDestination user from TaskAsigneeSelector modal it does not get updated. This is because we are updating shareDestination from parentReportID everytime task is updated. We should want the share somewhere to be updated from parentReport only on the first mount. So we need to move this into a separate useEffect with no dependency array like this
useEffect(() => {
if (props.task.parentReportID) {
TaskUtils.setShareDestinationValue(props.task.parentReportID);
}
}, []);
Result

Screen.Recording.2023-06-28.at.8.57.32.PM.mov