[HOLD for payment 2024-10-29] [$250] Submit Expense - Contacts section is missing participants

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.25-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: https://expensify.testrail.io/index.php?/tests/view/4890824&group_by=cases:section_id&group_order=asc&group_id=229066
Issue reported by: Applause - Internal Team

Action Performed:

1. Sign up for a new account on staging.new.expensify.com
2. Create DMs with 7 new contacts
3. Go to Global Create > Submit Expense
4. Enter an amount and click Next
5. Observe the missing participants from the Contacts section.

Expected Result:

During the expense submitting or splitting process, the search list, should be divided in "Recents" and "Contacts"

All of your DM contacts should be in the contacts section.

Actual Result:

Some contacts are missing.

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

Bug6584155_1724766273965.Contacts-Recents.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016d2f5d8be09bffb6
• Upwork Job ID: 1829406098502441268
• Last Price Increase: 2024-10-04
• Automatic offers:
• c3024 | Contributor | 104318599

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

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

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

[tsa321]

Edited by proposal-police: This proposal was edited at 2024-08-28 06:51:06 UTC.

Proposal

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

Search list when submitting expense, doesn't display contacts section

What is the root cause of that problem?

When submitting an expense, if there is no chat history with a contact in the contact list, it will be included in the Contacts section. However, if there is chat history, it will be included in recentReports or just Chats. The issue is that recentReports is limited to a maximum of 5 recent reports (because of the slice and splice in below code), causing the remaining reports to be discarded:

App/src/libs/OptionsListUtils.ts

Lines 2391 to 2393 in 071f11c

	if (searchInputValue.trim() === '' && maxRecentReportsToShow > 0) {
	return {...options, recentReports: options.recentReports.slice(0, maxRecentReportsToShow)};
	}

and here:

App/src/libs/OptionsListUtils.ts

Lines 2465 to 2467 in 071f11c

	if (maxRecentReportsToShow > 0 && recentReports.length > maxRecentReportsToShow) {
	recentReports.splice(maxRecentReportsToShow);
	}

As a result, it seems that some contacts are missing, and many reports are not displayed due to this filtering (slice / splice).

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

We could store the remaining reports from recentReports into a separate olderReports (or another name) data and return it to the caller in MoneyRequestParticipantsSelector (must check other caller if necessary).

When generating section data:

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Lines 192 to 204 in 071f11c

	newSections.push(formatResults.section);
	newSections.push({
	title: translate('common.recents'),
	data: chatOptions.recentReports,
	shouldShow: chatOptions.recentReports.length > 0,
	});
	newSections.push({
	title: translate('common.contacts'),
	data: chatOptions.personalDetails,
	shouldShow: chatOptions.personalDetails.length > 0,
	});

include the olderReports data. The sketch code changes could be something like this. We must also check other usage of filterOptions and adjust the code accordingly. and If we want to re-order the olderReports by other criteria (other than date), we can adjust it there.

What alternative solutions did you explore? (Optional)

The alternative solution is to retrieve DM reports from older or discarded reports and include them in the contact list.

[melvin-bot]

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

[melvin-bot]

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

[c3024]

Edited by proposal-police: This proposal was edited at 2024-09-19 10:01:46 UTC.

Proposal

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

Contacts section is missing in the participant selector though they are not included in Recents.

What is the root cause of that problem?

We get defaultOptions here

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Line 85 in fc849dd

const defaultOptions = useMemo(() => {

with

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Line 99 in fc849dd

const optionList = OptionsListUtils.getFilteredOptions(

and we pass maxRecentReportsToShow as 0 here

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Line 123 in fc849dd

0,

which means we do not limit the max recent reports for the result from this function.

getFilteredOptions calls getOptions

App/src/libs/OptionsListUtils.ts

Line 2138 in fc849dd

return getOptions(

which in turn keeps adding the recent reports and continues adding all because maxRecentReportsToShow is zero.

App/src/libs/OptionsListUtils.ts

Lines 1930 to 1931 in fc849dd

	if (recentReportOptions.length > 0 && recentReportOptions.length === maxRecentReportsToShow) {
	break;

Along with this it also excludes the personal detail of these report logins here

App/src/libs/OptionsListUtils.ts

Lines 1980 to 1982 in fc849dd

	if (reportOption.login) {
	optionsToExclude.push({login: reportOption.login});
	}

Since, we are not limiting the recent reports to show so all these reportOption logins are excluded when processing personal details into options here. So, the default options returned from here includes all recent reports but do not include these personal details.

Back here in the MoneyRequestParticipantsSelector

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Line 167 in fc849dd

maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,

we restrict the reports only to MAX_RECENT_REPORTS_TO_SHOW so only those reports show up and many personal details were already excluded earlier in the default options because of addition of all recent reports as explained earlier.

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

1. We can consider moving max recent report limit to getFilteredOptions. This works well when there is no search term but when there is a search term the results it return may not include the correct results because the search term is not passed to this function.
2. Since we are filtering the options based on search term in filterOptions and this is where we are restricting the max reports also to MAX_RECENT_REPORTS_TO_SHOW, we can move the personal details excluding logic to filterOptions.

That is to remove this logic

App/src/libs/OptionsListUtils.ts

Lines 1981 to 1984 in 0e9f918

	// Add this login to the exclude list so it won't appear when we process the personal details
	if (reportOption.login) {
	optionsToExclude.push({login: reportOption.login});
	}

of excluding personal details for included reports from getOptions and move that to filterOptions with something like this

if (searchInputValue.trim() === '' && maxRecentReportsToShow > 0) {
        // return {...options, recentReports: options.recentReports.slice(0, maxRecentReportsToShow)};
        const recentReports = options.recentReports.slice(0, maxRecentReportsToShow);
        const excludedLogins = new Set(recentReports.map(report => report.login));
        const filteredPersonalDetails = options.personalDetails.filter(personalDetail => !excludedLogins.has(personalDetail.login));
        return {
            ...options,
            recentReports,
            personalDetails: filteredPersonalDetails,
        };
            
    }

at

App/src/libs/OptionsListUtils.ts

Lines 2393 to 2395 in 0e9f918

	if (searchInputValue.trim() === '' && maxRecentReportsToShow > 0) {
	return {...options, recentReports: options.recentReports.slice(0, maxRecentReportsToShow)};
	}

and

    if (maxRecentReportsToShow > 0 && recentReports.length > maxRecentReportsToShow) {
        recentReports.splice(maxRecentReportsToShow);
    }

    const excludedLogins = new Set(recentReports.map(report => report.login));
    const filteredPersonalDetails = personalDetails.filter(personalDetail => !excludedLogins.has(personalDetail.login));
    personalDetails = filteredPersonalDetails;

at

App/src/libs/OptionsListUtils.ts

Lines 2467 to 2469 in 0e9f918

	if (maxRecentReportsToShow > 0 && recentReports.length > maxRecentReportsToShow) {
	recentReports.splice(maxRecentReportsToShow);
	}

This movement does not break anything because wherever we use getFilteredOptions or getOptions with reports in the repo we also filter those again with filteredOptions.

Here is the branch with these changes.

What alternative solutions did you explore? (Optional)

1. We can pass the maxReportsToShow to the getFilteredOptions function.
2. Then we can also pass the debouncedTerm to getFilteredOptions and this is not an expensive operation so doing the filtering with search term in both getFilteredOptions and filterOptions is also a viable solution and it retains the report-contact sections separation within getOptions function itself.

[melvin-bot]

@kadiealexander, @eh2077 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[eh2077]

Reviewing proposals

[eh2077]

Thanks for your proposals!

I think @c3024 pointed out the correct root cause of this issue. Their solution also looks good to me. So, let's go with @c3024 's proposal

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[trjExpensify]

Do we know which PR broke this?

[tsa321]

@eh2077, after testing @c3024's proposal by changing:

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Line 123 in fc849dd

0,

to CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW, some reports are still missing. I tested it using my account, which has many reports and contacts. Here is in staging with the Workspace report included:

With @c3024's proposal, some reports are missing (notice the missing workspace reports):

some.reports.missing.mp4

With my proposal, all reports are shown (including workspace reports):

my-proposal.mp4

@eh2077 could you re-review my proposal again?
Thank you...

[c3024]

With @c3024's proposal, some reports are missing (notice the missing workspace reports):

Yes, I missed that.

I think the better solution is the alternative solution proposed. That is to remove this logic

App/src/libs/OptionsListUtils.ts

Lines 1981 to 1984 in 0e9f918

	// Add this login to the exclude list so it won't appear when we process the personal details
	if (reportOption.login) {
	optionsToExclude.push({login: reportOption.login});
	}

of excluding personal details for included reports from getOptions and move that to filterOptions with something like this

if (searchInputValue.trim() === '' && maxRecentReportsToShow > 0) {
        // return {...options, recentReports: options.recentReports.slice(0, maxRecentReportsToShow)};
        const recentReports = options.recentReports.slice(0, maxRecentReportsToShow);
        const excludedLogins = new Set(recentReports.map(report => report.login));
        const filteredPersonalDetails = options.personalDetails.filter(personalDetail => !excludedLogins.has(personalDetail.login));
        return {
            ...options,
            recentReports,
            personalDetails: filteredPersonalDetails,
        };
            
    }

at

App/src/libs/OptionsListUtils.ts

Lines 2393 to 2395 in 0e9f918

	if (searchInputValue.trim() === '' && maxRecentReportsToShow > 0) {
	return {...options, recentReports: options.recentReports.slice(0, maxRecentReportsToShow)};
	}

and

    if (maxRecentReportsToShow > 0 && recentReports.length > maxRecentReportsToShow) {
        recentReports.splice(maxRecentReportsToShow);
    }

    const excludedLogins = new Set(recentReports.map(report => report.login));
    const filteredPersonalDetails = personalDetails.filter(personalDetail => !excludedLogins.has(personalDetail.login));
    personalDetails = filteredPersonalDetails;

at

App/src/libs/OptionsListUtils.ts

Lines 2467 to 2469 in 0e9f918

	if (maxRecentReportsToShow > 0 && recentReports.length > maxRecentReportsToShow) {
	recentReports.splice(maxRecentReportsToShow);
	}

This does not require any changes in the individual pages and corrects the common logic.

[tsa321]

I’m not sure; changing the logic would require extensive testing on other pages as well.
I believe my proposal is simpler and safer, as it doesn’t alter the logic and only addresses(catch/store) the discarded reports.

[eh2077]

@tsa321 I just tested using a high traffic account and it works well, see

Are you still able to reproduce it?

[tsa321]

@eh2077 I am still able to reproduce the issue. The root cause is that some reports are missing from the list.

Test Steps:

1. Create a new test account.
2. Send a dm message to 8 people (using start new chat), make sure to send a message to each one of them.
3. Begin the submit expense step.
4. Notice that without entering a search term, only 5 people/items appear on the submit expense list. The remaining 3 are missing, and there is no contact section.

bug-d.mp4

Another Way to Test:

1. Ensure you have more than 5 expense reports.
2. Begin the submit expense step.
3. Notice that without entering a search term, some expense reports are missing.

[melvin-bot]

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

[RachCHopkins]

@c3024 / @eh2077 can you complete the above checklist, please?

[melvin-bot]

@MonilBhavsar, @RachCHopkins, @c3024, @eh2077 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[RachCHopkins]

@c3024 @eh2077 I would really love to pay you. Can someone please complete the checklist?

[eh2077]

@RachCHopkins Sorry for the late response! I put it on my list and will complete it by EOD.

[eh2077]

Checklist

• [@eh2077] The PR that introduced the bug has been identified. Link to the PR: perf: Filter options in Request Money and Send Money #40235
• [@eh2077] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/40235/files#r1827762062
• [@eh2077] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• [@eh2077] Determine if we should create a regression test for this bug. Yes

Regression test

1. Sign up for a new account on staging.new.expensify.com
2. Create DMs with 7 new contacts
3. Go to Global Create > Submit Expense
4. Enter an amount and click Next
5. Verify that all participants can be found in the Contacts section or the Recents section.

[RachCHopkins]

Thank you - I will get this sorted out on my Monday!

[MonilBhavsar]

Thank you!

[RachCHopkins]

Payment Summary:

• Contributor: @c3024 paid $250 via Upwork
• Contributor+: @eh2077 to be paid $250 via NewDot manual requests

Upwork job here

[RachCHopkins]

Contributor has been paid, the contract has been completed, and the Upwork post has been closed.

[eh2077]

Requested payment in NewDot

[JmillsExpensify]

$250 approved for @eh2077