[HOLD for payment 2024-04-05] [$500] Incorrect title for "Edited money request" thread

[m-natarajan]

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: 1.4.44-11
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
Expensify/Expensify Issue URL:
Issue reported by: @paultsimura
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1709138721803769

Action Performed:

1. Request money
2. Open the created money request
3. Modify a field (e.g. merchant)
4. Find the system message that says "changed the merchant to ..."
5. Click "Reply in thread"
6. Check the title in the header

Expected Result:

It should reflect the text of the system

Actual Result:

It shows "You" (or the other actor's name)

Workaround:

unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Recording.2804.mp4

Screen.Recording.2024-02-28.at.17.44.31-compressed.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0195989b41b3f25ded
• Upwork Job ID: 1762897098637885440
• Last Price Increase: 2024-02-28

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0195989b41b3f25ded

[melvin-bot]

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

[melvin-bot]

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

[paultsimura]

Proposal

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

The "MODIFIEDEXPENSE" thread shows incorrect title in the Header

What is the root cause of that problem?

The "MODIFIEDEXPENSE" action holds 2 messages in an array: [actor, action], and only the first one is used when building the report title in the header:

App/src/libs/ReportUtils.ts

Line 2512 in fe6d902

const parentReportActionMessage = (parentReportAction?.message?.[0]?.text ?? '').replace(/(\r\n|\n|\r)/gm, ' ');

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

We should add a special condition to check for the MODIFIEDEXPENSE report action similar to how we check for the TransactionThread:

App/src/libs/ReportUtils.ts

Lines 2502 to 2505 in fe6d902

	if (isChatThread(report)) {
	if (!isEmptyObject(parentReportAction) && ReportActionsUtils.isTransactionThread(parentReportAction)) {
	return getTransactionReportName(parentReportAction);
	}

And use the concatenation of the first 2 messages of such a report action.

What alternative solutions did you explore? (Optional)

[FitseTLT]

Proposal

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

Incorrect title for "Edited money request" thread

What is the root cause of that problem?

We are using message?.[0]?.text of parent report action

App/src/libs/ReportUtils.ts

Lines 2512 to 2513 in fe6d902

	const parentReportActionMessage = (parentReportAction?.message?.[0]?.text ?? '').replace(/(\r\n|\n|\r)/gm, ' ');
	if (isAttachment && parentReportActionMessage) {

This case assumes that message array has one item and all the data that should be displayed is found in it but it falls short in most case as in this one where the reportaction is MODIFIEDEXPENSE or another example is when it is SUBMITTED or APPROVED report action on when the submission or approval was done on behalf of someone (like admin submitting the employee report or auto approval of concierge) which have multiple text to concatenate and display in reportAction.message

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

What we should do is the same as what we use in report action display where we join the message fragment and display it

App/src/pages/home/report/ReportActionItemMessage.tsx

Lines 37 to 38 in fe6d902

	const fragments = (action.previousMessage ?? action.message ?? []).filter((item) => !!item);
	const isIOUReport = ReportActionsUtils.isMoneyRequestAction(action);

App/src/pages/home/report/ReportActionItemMessage.tsx

Lines 75 to 79 in fe6d902

	const reportActionItemFragments = fragments.map((fragment, index) => (
	<ReportActionItemFragment
	/* eslint-disable-next-line react/no-array-index-key */
	key={`actionFragment-${action.reportActionID}-${index}`}
	fragment={fragment}

Here are some of the report actions we display it in this manner

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

Lines 471 to 479 in fe6d902

	} else {
	const hasBeenFlagged =
	!_.contains([CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING], moderationDecision) &&
	!ReportActionsUtils.isPendingRemove(props.action);
	children = (
	<ShowContextMenuContext.Provider value={contextValue}>
	{_.isUndefined(props.draftMessage) ? (
	<View style={props.displayAsGroup && hasBeenFlagged ? styles.blockquote : {}}>
	<ReportActionItemMessage

So what we should do is join the fragment of the message instead of using only message.[0].text for all report action types so that when it has only one fragment it will be same as before and additionally We will also be able to solve this current issue with others that can arise when there are multiple fragments for eg cases I have mentioned above.
We can use this method here by making it as a util

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Lines 39 to 42 in fe6d902

	/** Gets the text version of the message in an action */
	function getActionText(reportAction: OnyxEntry<ReportAction>): string {
	return reportAction?.message?.reduce((acc, curr) => `${acc}${curr.text}`, '') ?? '';
	}

What alternative solutions did you explore? (Optional)

Alternatively we can apply this logic for only selected report action types such as MODIFIEDEXPENSE APPROVED SUBMITTED etc

[dukenv0307]

Proposal

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

• Incorrect title for "Edited money request" thread

What is the root cause of that problem?

• In case of MODIFIEDEXPENSE, the text "You" is from the below logic:
  

  App/src/libs/ReportUtils.ts

  Line 2512 in c6dd8ca

  const parentReportActionMessage = (parentReportAction?.message?.[0]?.text ?? '').replace(/(\r\n|\n|\r)/gm, ' ');

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

• We can check if the action is modified expense message, and use ModifiedExpenseMessage.getForReportAction(report?.reportID, parentReportAction) instead
• For example, we can update this to:

         if (ReportActionsUtils.isModifiedExpenseAction(parentReportAction)) {
            return ModifiedExpenseMessage.getForReportAction(report?.reportID, parentReportAction);
        }
        return parentReportActionMessage;

What alternative solutions did you explore? (Optional)

• NA

Result

Screencast.from.29-02-2024.02.06.07.webm

[mkhutornyi]

@dukenv0307 your proposal doesn't fix other types of report actions.
i.e. The thread title of You submitted this report to xxx is still "You"