[$250] Expense preview- Report title part of report preview is blank briefly after submitting expense

[IuliiaHerets]

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: 9.1.22-2
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: No, reproducible on hybrid only
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp #58479
Email or phone of affected tester (no customers): applausetester+sdsoidsj@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Log in with Expensifail account.

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit a manual expense.
4. Note that the report title part of the expense report preview is blank briefly.
5. Click Submit.
6. Go offline.
7. Submit another manual expense.

Expected Result:

The report title part of the expense report preview should not be blank after submitting the expense.

Actual Result:

In offline mode, the report title part of the expense report preview is blank after submitting the expense.
In online mode, the same part is blank briefly after submitting the expense.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/32aa7967-a8b9-48b8-bc88-31b2fddf27ed

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021907791019793338504
• Upwork Job ID: 1907791019793338504
• Last Price Increase: 2025-04-03
• Automatic offers:
• nkdengineer | Contributor | 106825210

Issue Owner

Current Issue Owner: @Beamanator

[melvin-bot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-02 10:48:29 UTC.

Proposal

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

In offline mode, the report title part of the expense report preview is blank after submitting the expense.
In online mode, the same part is blank briefly after submitting the expense.

What is the root cause of that problem?

We don't return the childReportName when we run buildOptimisticReportPreview to update Onyx data

App/src/libs/ReportUtils.ts

Lines 5953 to 5980 in 66f28d3

	return {
	reportActionID: reportActionID ?? rand64(),
	reportID: chatReport?.reportID,
	actionName: CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW,
	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
	originalMessage: {
	linkedReportID: iouReport?.reportID,
	},
	message: [
	{
	html: message,
	text: message,
	isEdited: false,
	type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
	},
	],
	delegateAccountID: delegateAccountDetails?.accountID,
	created,
	accountID: iouReport?.managerID,
	// The preview is initially whispered if created with a receipt, so the actor is the current user as well
	actorAccountID: hasReceipt ? currentUserAccountID : reportActorAccountID,
	childReportID: childReportID ?? iouReport?.reportID,
	childMoneyRequestCount: 1,
	childLastActorAccountID: currentUserAccountID,
	childLastMoneyRequestComment: comment,
	childRecentReceiptTransactionIDs: hasReceipt && !isEmptyObject(transaction) && transaction?.transactionID ? {[transaction.transactionID]: created} : undefined,
	...(isTestTransaction && {childStateNum: 2, childStatusNum: 4}),
	};

It leads to action.childReportName being empty when creating an expense in offline

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Lines 483 to 488 in 66f28d3

	<Text
	style={[styles.headerText]}
	testID="MoneyRequestReportPreview-reportName"
	>
	{action.childReportName}
	</Text>

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

We have some ways to fix it as follows

1. The simplest way is that we will not show this View when there is no childReportName

2. We can add fallback here like 'Expense report'

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Line 487 in 66f28d3

{action.childReportName}

3. We will calculate and return additional childReportName in buildOptimisticReportPreview by using populateOptimisticReportFormula function

• Create a new pattern in const.ts file DEFAULT_REPORT_ID_PATTERN: '{report:type} {report:reportID}'
• Update function populateOptimisticReportFormula to match with DEFAULT_REPORT_ID_PATTERN here

        .replaceAll('{report:reportID}', report.reportID ?? '')

• Return childReportName in buildOptimisticReportPreview function

    const childReportName = populateOptimisticReportFormula(CONST.POLICY.DEFAULT_REPORT_ID_PATTERN, iouReport, undefined);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nkdengineer]

Proposal

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

In offline mode, the report title part of the expense report preview is blank after submitting the expense.
In online mode, the same part is blank briefly after submitting the expense.

What is the root cause of that problem?

We're displaying the report title in report preview from childReportName of REPORTPREVIEW action,

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Lines 483 to 488 in 66f28d3

	<Text
	style={[styles.headerText]}
	testID="MoneyRequestReportPreview-reportName"
	>
	{action.childReportName}
	</Text>

But childReportName is empty when we create optimistic data for REPORTPREVIEW action that leads the report title is empty briefly until the API is done.

App/src/libs/ReportUtils.ts

Lines 5953 to 5980 in 66f28d3

	return {
	reportActionID: reportActionID ?? rand64(),
	reportID: chatReport?.reportID,
	actionName: CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW,
	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
	originalMessage: {
	linkedReportID: iouReport?.reportID,
	},
	message: [
	{
	html: message,
	text: message,
	isEdited: false,
	type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
	},
	],
	delegateAccountID: delegateAccountDetails?.accountID,
	created,
	accountID: iouReport?.managerID,
	// The preview is initially whispered if created with a receipt, so the actor is the current user as well
	actorAccountID: hasReceipt ? currentUserAccountID : reportActorAccountID,
	childReportID: childReportID ?? iouReport?.reportID,
	childMoneyRequestCount: 1,
	childLastActorAccountID: currentUserAccountID,
	childLastMoneyRequestComment: comment,
	childRecentReceiptTransactionIDs: hasReceipt && !isEmptyObject(transaction) && transaction?.transactionID ? {[transaction.transactionID]: created} : undefined,
	...(isTestTransaction && {childStateNum: 2, childStatusNum: 4}),
	};

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

1. Add childReportName as iouReport.reportName here

childReportName: iouReport.reportName,

App/src/libs/ReportUtils.ts

Lines 5953 to 5980 in 66f28d3

	return {
	reportActionID: reportActionID ?? rand64(),
	reportID: chatReport?.reportID,
	actionName: CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW,
	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
	originalMessage: {
	linkedReportID: iouReport?.reportID,
	},
	message: [
	{
	html: message,
	text: message,
	isEdited: false,
	type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
	},
	],
	delegateAccountID: delegateAccountDetails?.accountID,
	created,
	accountID: iouReport?.managerID,
	// The preview is initially whispered if created with a receipt, so the actor is the current user as well
	actorAccountID: hasReceipt ? currentUserAccountID : reportActorAccountID,
	childReportID: childReportID ?? iouReport?.reportID,
	childMoneyRequestCount: 1,
	childLastActorAccountID: currentUserAccountID,
	childLastMoneyRequestComment: comment,
	childRecentReceiptTransactionIDs: hasReceipt && !isEmptyObject(transaction) && transaction?.transactionID ? {[transaction.transactionID]: created} : undefined,
	...(isTestTransaction && {childStateNum: 2, childStatusNum: 4}),
	};

I noticed that we have an inconsistency for the expense report's reportName. The default report title formula is {report:type} {report:startdate}, and we used it to generate reportName in optimistic data here but the backend return the reportName with the formula is {report:type} {report:reportID}. We should fix it from backend side to change the default formula of the title field to {report:type} {report:reportID} or fix reportName of new expense report.

2. The IOU report is displaying IOU, but this report has the custom report name in front-end; then we can use getReportName(iouReport) and fallback it to action.childReportName if iouReport data isn't available

{getReportName(iouReport) || action.childReportName} 

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Lines 483 to 488 in 66f28d3

	<Text
	style={[styles.headerText]}
	testID="MoneyRequestReportPreview-reportName"
	>
	{action.childReportName}
	</Text>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add a unit test for buildOptimisticReportPreview and verify that the childReportName is equal to iouReport.reportName.

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[hoangzinh]

but the backend return the reportName with the formula is {report:type} {report:reportID}. We should fix it from backend side to change the default formula of the title field to {report:type} {report:reportID}

@nkdengineer I got confused here. Can you clarify what it means? I'm interpreting that because BE is already returning {report:type} {report:reportID}, why do we also need to change the default to {report:type} {report:reportID}?