[HOLD for payment 2023-08-08] [$1000] App translates paid message to english after deleting last message

[kavimuru]

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:

1. Open the app and login with user A
2. Open the app in another device and login with user B
3. If language is english for user A, change it to spanish
4. From user B, request money to user A
5. Open user B report and click on green button to pay, observe in LHN that paid text is in spanish
6. From user A, send message to user B
7. Delete the message sent in step 6 and observe in LHN, app displays paid text in english even though language is spanish

Expected Result:

App should not auto translate paid message to english from spanish is language is kept as spanish

Actual Result:

On deleting message after paid message in report, app translates paid message to english even though language is spanish

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.44-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

auto.translate.back.to.english.paid.msg.mov

Recording.1065.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689780932673749

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a539a89487c96136
• Upwork Job ID: 1683611319166062592
2023-07-24
• Automatic offers:
• tienifr | Contributor | 25790663
• dhanashree-sawant | Reporter | 25790667

[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

[ygshbht]

Proposal

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

There's an inconsistency in language translation in LHN when a message is deleted after a paid message in the reports. The paid message is automatically translated to English even if the chosen language is Spanish.

What is the root cause of that problem?

The issue arises due to how the app accesses and processes reportAction messages. The function getLastMessageTextForReport in OptionsListUtils.js is responsible for fetching the last message. However, it currently accesses unfiltered data, which includes empty deleted messages. As a result, when a message is deleted, the preceding 'paid' status message, originally in Spanish, appears in English.

App/src/libs/OptionsListUtils.js

Lines 396 to 399 in e87ba56

	*/
	function getLastMessageTextForReport(report) {
	const lastReportAction = lastReportActions[report.reportID];
	let lastMessageTextFromReport = '';

App/src/libs/OptionsListUtils.js

Lines 88 to 101 in e87ba56

	const allSortedReportActions = {};
	Onyx.connect({
	key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
	callback: (actions, key) => {
	if (!key || !actions) {
	return;
	}
	const sortedReportActions = ReportActionUtils.getSortedReportActions(_.toArray(actions), true);
	const reportID = CollectionUtils.extractCollectionItemID(key);
	allSortedReportActions[reportID] = sortedReportActions;
	lastReportActions[reportID] = _.first(sortedReportActions);
	},
	});

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

We can address this issue by modifying the function that fetches sorted report actions in OptionsListUtils to filter out deleted messages. This can be done by replacing:

const sortedReportActions = ReportActionUtils.getSortedReportActions(_.toArray(actions), true);
with:
const sortedReportActions = ReportActionUtils.getSortedReportActionsForDisplay(_.toArray(actions), true);

Functions similar to getSortedReportActionsForDisplay can be used too based on the desired reportActions.

This modification ensures that the data source lastReportActions only contains undeleted messages when fetching the last message.

What alternative solutions did you explore? (Optional)

As an alternative, we could create a new data source lastReportActionsVisible that stores only the undeleted messages. This variable can then be accessed in the getLastMessageTextForReport function like so.

const lastReportAction = lastReportActionsVisible[report.reportID];

This alternate approach would also ensure the app maintains the correct language in the LHN section, even after a message is deleted following a 'paid' message. Importantly, it avoids altering lastReportActions, thus preventing potential issues in other parts of the code that might rely on the unfiltered data.

Another approach could be to pass down the lastReportAction from a parent component by using reportActions as a prop. For e.g. in OptionRowLHNData.js

Result:

niceVideo.mp4

[melvin-bot]

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

[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 - @ArekChr (External)

[tienifr]

Proposal

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

App translates paid message to english after deleting last message

What is the root cause of that problem?

In

App/src/libs/OptionsListUtils.js

Lines 95 to 98 in 6e6d2bd

	const sortedReportActions = ReportActionUtils.getSortedReportActions(_.toArray(actions), true);
	const reportID = CollectionUtils.extractCollectionItemID(key);
	allSortedReportActions[reportID] = sortedReportActions;
	lastReportActions[reportID] = _.first(sortedReportActions);

We're getting the lastReportActions by using getSortedReportActions function, this function just returns the sorted report actions no matter the actions is delete or not. When the message is deleted, the action is still there but the message is empty

We get the last message report in

App/src/libs/OptionsListUtils.js

Lines 403 to 405 in 6e6d2bd

	} else if (ReportActionUtils.isReportPreviewAction(lastReportAction)) {
	const iouReport = ReportUtils.getReport(ReportActionUtils.getIOUReportIDFromReportActionPreview(lastReportAction));
	lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastReportAction);

and we just translate the last message if the it is preview action. As mentioned above, the last message at that time is deleted message so it's not preview action that why the default last message from report is returned.

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

we can find the lastReportAction by using allSortedReportActions in getLastMessageTextForReport function.

function getLastMessageTextForReport(report) {
    const lastReportAction = _.find(allSortedReportActions[report.reportID], (reportAction, key) => ReportActionUtils.shouldReportActionBeVisible(reportAction, key) && reportAction.pendingAction!=='delete')

we use shouldReportActionBeVisible to filter out the deleted message.
If we don't filter out the pending delete action, the LHN would be flicker

What alternative solutions did you explore? (Optional)

Change

App/src/libs/OptionsListUtils.js

Line 98 in 6e6d2bd

lastReportActions[reportID] = _.first(sortedReportActions);

to

        lastReportActions[reportID] = _.find(sortedReportActions, (reportAction, key) => ReportActionUtils.shouldReportActionBeVisible(reportAction, key) && reportAction.pendingAction!=='delete')

Result

Screen.Recording.2023-07-25.at.12.13.07.mov