[HOLD for payment 2024-07-24] [$250] IOU - Members page is blank

[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: 1.4.85-6
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
Issue reported by: Applause - Internal Team

Action Performed:

1. Log into staging.new.expensify.com
2. Navigate to a conversation
3. Create an IOU
4. Click on the header of the IOU to access the members

Expected Result:

A members page/ modal should open listing all the members

Actual Result:

The modal is empty (blank)

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

Bug6518569_1718811329879._1__New_Expensify_-_Google_Chrome_2024-06-19_18-29-58.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017fcedc031d85e839
• Upwork Job ID: 1805044099624774803
• Last Price Increase: 2024-07-08
• Automatic offers:
• allgandalf | Reviewer | 103086318

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (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]

@VictoriaExpensify 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

[bernhardoj]

Proposal

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

Member list page is empty/blank when pressing the multiple display name of a report preview action.

What is the root cause of that problem?

In this old PR, we navigate the user to the report participants page if it's an IOU report (which it is in our case). We do this for both AvatarWithDisplayName (used in the IOU report header) and ReportActionItemSingle display name.

However, all participants are hidden, so when we get the member list, we get an empty list.

App/src/pages/ReportParticipantsPage.tsx

Lines 72 to 73 in 7561439

	const shouldExcludeHiddenParticipants = !isGroupChat;
	const chatParticipants = ReportUtils.getParticipantsAccountIDsForDisplay(report, shouldExcludeHiddenParticipants);

App/src/libs/ReportUtils.ts

Lines 1850 to 1856 in 7561439

	if (shouldExcludeCurrentUser && Number(accountID) === currentUserAccountID) {
	return false;
	}
	if (shouldExcludeHidden && participant.hidden) {
	return false;
	}

If we see the AvatarWithDisplayName case, we now update it so that for the IOU report, we navigate to the report detail instead of the participants page.

App/src/components/MoneyReportHeader.tsx

Lines 209 to 211 in 7561439

	<HeaderWithBackButton
	shouldShowReportAvatarWithDisplay
	shouldEnableDetailPageNavigation

App/src/components/AvatarWithDisplayName.tsx

Lines 78 to 82 in 7561439

	const showActorDetails = useCallback(() => {
	// We should navigate to the details page if the report is a IOU/expense report
	if (shouldEnableDetailPageNavigation) {
	return ReportUtils.navigateToDetailsPage(report);
	}

Also, the IOU report detail page doesn't have a members section.

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

Always show all IOU report participants even if they are hidden.

const isIOUReport = ReportUtils.isIOUReport(report);
...
const shouldExcludeHiddenParticipants = !isGroupChat && !isIOUReport;

App/src/pages/ReportParticipantsPage.tsx

Lines 72 to 73 in a91b7f8

	const shouldExcludeHiddenParticipants = !isGroupChat;
	const chatParticipants = ReportUtils.getParticipantsAccountIDsForDisplay(report, shouldExcludeHiddenParticipants);

(we can optionally show the Members field in the IOU report details page too, lmk if we want to do it)

What alternative solutions did you explore? (Optional)

I suggest changing the navigation to the report details page too for the IOU report.

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

Lines 163 to 167 in 7561439

	// Show participants page IOU report preview
	if (iouReportID && displayAllActors) {
	Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(iouReportID));
	return;
	}

Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(iouReportID));

[VictoriaExpensify]

I agree this looks buggy and have been able to reproduce the issue:

I believe this belongs to Project VSB

[melvin-bot]

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

[melvin-bot]

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

[allgandalf]

@bernhardoj , thanks for your proposal, your RCA is correct, but the expected results from this issue is to show the members page:

A members page/ modal should open listing all the members

@VictoriaExpensify , can you confirm the expected result here? I agree with @bernhardoj that we should show the reports detail page here instead of members page for IOU, can you confirm this here please :) thanks