[HOLD for payment 2024-10-25] [$250] Web - Search (Expenses) - Inconsistent expense report detail window size after sending message

[lanitochka17]

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.0.46
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): Negasofonias@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.chat.expensify.com
2. Click on search icon
3. Select expenses and open one expense report from a workspace
4. Observe that the expense report is opened as a RHN
5. Send a message in the report and observe the report is still shown as an RHN
6. Change the category in the report then send messgae
7. Observe that the expense report detail is now shown as full screen rather than as RHN

Expected Result:

Expense report detail view should be consistent

Actual Result:

Expense report detail view is sometimes shown as RHN and sometimes as full screen

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

Bug6622407_1727891096643.scrnli_10_2_2024_8-17-12_PM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021843751596024948674
• Upwork Job ID: 1843751596024948674
• Last Price Increase: 2024-10-08
• Automatic offers:
• suneox | Reviewer | 104360899

Issue Owner

Current Issue Owner: @sakluger

[melvin-bot]

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

[lanitochka17]

@sakluger FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[mkzie2]

Proposal

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

Expense report detail view is sometimes shown as RHN and sometimes as full screen

What is the root cause of that problem?

If the latest action in the one expense report is the action from the expense report, hasNewestReportAction is true

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

Line 282 in 41e97d7

const hasNewestReportAction = sortedVisibleReportActions.at(0)?.created === report.lastVisibleActionCreated;

and we will scroll to the bottom after we send a new message

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

Line 352 in 41e97d7

InteractionManager.runAfterInteractions(() => reportScrollManager.scrollToBottom());

After we edit the category, the latest action is the system message from the transaction thread, it leads hasNewestReportAction being false

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

Line 282 in 41e97d7

const hasNewestReportAction = sortedVisibleReportActions.at(0)?.created === report.lastVisibleActionCreated;

and as expected we will navigate to the report screen here which is the large report screen, not the RHP report screen.

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

Lines 348 to 351 in 41e97d7

	if (!hasNewestReportActionRef.current) {
	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(report.reportID));
	return;
	}

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

We should not navigate here if we're in the RHP report screen. we can get isInNarrowPaneModal from useResponsiveLayout to check this

if (!hasNewestReportActionRef.current) {
   if (isInNarrowPaneModal) {
      return;
   }
   Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(report.reportID)); 
   return; 
} 

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

Lines 348 to 351 in 41e97d7

	if (!hasNewestReportActionRef.current) {
	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(report.reportID));
	return;
	}

What alternative solutions did you explore? (Optional)

Or we can update this condition here to

const hasNewestReportAction = sortedVisibleReportActions.at(0)?.created === report.lastVisibleActionCreated || sortedVisibleReportActions.at(0)?.created === transactionThreadReport.lastVisibleActionCreated; 

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

Line 282 in 41e97d7

const hasNewestReportAction = sortedVisibleReportActions.at(0)?.created === report.lastVisibleActionCreated;

[melvin-bot]

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

[melvin-bot]

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

[suneox]

The primary solution from @mkzie2 proposal is straightforward and specifically addresses this issue, so we can go with this solution.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @jasperhuangg, see https://stackoverflow.com/c/expensify/questions/7972 for more details.