[HOLD for payment 2023-08-16] [$1000] Web - New group can't search an email if it's a substring of a selected email

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Click FAB => New group
2. Search an email abcde@gmail.com and select it
3. Search another email bcde@gmail.com which is a substring of the selected email

Expected Result:

We should be able to search the second email bcde@gmail.com and select it

Actual Result:

We can't search for the second email bcde@gmail.com

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.43-7
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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-07-24.at.5.06.29.PM.mov

Recording.3882.mp4

Expensify/Expensify Issue URL:
Issue reported by: @eh2077
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690189687158329

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01911c9791a59f71c8
• Upwork Job ID: 1683657734612238336
2023-07-25
• Automatic offers:
• abdulrahuman5196 | Reviewer | 25858891
• dukenv0307 | Contributor | 25858894

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[kbecciv]

Proposal

@eh2077

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

New group can't search an email if it's a substring of a selected email.

What is the root cause of that problem?

The root cause of this issue is that we concat logins of selected options to a string filterText and check by !filterText.includes(login) if a login is unselected, which is wrong, see below snippet

App/src/pages/NewChatPage.js

Lines 84 to 87 in 82669ae

	const filterText = _.reduce(selectedOptions, (str, {login}) => `${str} ${login}`, '');
	const recentReportsWithoutSelected = _.filter(filteredRecentReports, ({login}) => !filterText.includes(login));
	const personalDetailsWithoutSelected = _.filter(filteredPersonalDetails, ({login}) => !filterText.includes(login));
	const hasUnselectedUserToInvite = filteredUserToInvite && !filterText.includes(filteredUserToInvite.login);

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

To fix this issue, we can save logins of selected options to an array selectedLogins and use method !_.contains(selectedLogins, login) to check if a login is unselected.

To achieve it, we can change

App/src/pages/NewChatPage.js

Lines 84 to 87 in 82669ae

	const filterText = _.reduce(selectedOptions, (str, {login}) => `${str} ${login}`, '');
	const recentReportsWithoutSelected = _.filter(filteredRecentReports, ({login}) => !filterText.includes(login));
	const personalDetailsWithoutSelected = _.filter(filteredPersonalDetails, ({login}) => !filterText.includes(login));
	const hasUnselectedUserToInvite = filteredUserToInvite && !filterText.includes(filteredUserToInvite.login);

to

const selectedLogins = _.map(selectedOptions, ({login}) => login);
        const recentReportsWithoutSelected = _.filter(filteredRecentReports, ({login}) => !_.contains(selectedLogins, login));
        const personalDetailsWithoutSelected = _.filter(filteredPersonalDetails, ({login}) => !_.contains(selectedLogins, login));
        const hasUnselectedUserToInvite = filteredUserToInvite && !_.contains(selectedLogins, filteredUserToInvite.login);

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

Current assignee @sophiepintoraetz is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[dukenv0307]

Proposal

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

New group can't search an email if it's a substring of a selected email.

What is the root cause of that problem?

Let's see the current logic on new chat page

App/src/pages/NewChatPage.js

Lines 84 to 88 in 82669ae

	const filterText = _.reduce(selectedOptions, (str, {login}) => `${str} ${login}`, '');
	const recentReportsWithoutSelected = _.filter(filteredRecentReports, ({login}) => !filterText.includes(login));
	const personalDetailsWithoutSelected = _.filter(filteredPersonalDetails, ({login}) => !filterText.includes(login));
	const hasUnselectedUserToInvite = filteredUserToInvite && !filterText.includes(filteredUserToInvite.login);

We are filtering selected options based on filterText, so in this case abcde@gmail.com.include('bcde@gmail.com') will be true and bcde@gmail.com will not be displaced

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

when calling getNewChatOptions, we should pass selectedOptions params as 5th param. And then we don't need this logic to filter

App/src/pages/NewChatPage.js

Lines 84 to 88 in 82669ae

	const filterText = _.reduce(selectedOptions, (str, {login}) => `${str} ${login}`, '');
	const recentReportsWithoutSelected = _.filter(filteredRecentReports, ({login}) => !filterText.includes(login));
	const personalDetailsWithoutSelected = _.filter(filteredPersonalDetails, ({login}) => !filterText.includes(login));
	const hasUnselectedUserToInvite = filteredUserToInvite && !filterText.includes(filteredUserToInvite.login);

This also be the way we did in MoneyRequestParticipantsSplitSelector

Result

result.mov

What alternative solutions did you explore? (Optional)

[FabianKoder]

Proposal

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

New group can't search an email if it's a substring of a selected email.

What is the root cause of that problem?

When looking at the existing code:

App/src/pages/NewChatPage.js

Lines 84 to 87 in 82669ae

	const filterText = _.reduce(selectedOptions, (str, {login}) => `${str} ${login}`, '');
	const recentReportsWithoutSelected = _.filter(filteredRecentReports, ({login}) => !filterText.includes(login));
	const personalDetailsWithoutSelected = _.filter(filteredPersonalDetails, ({login}) => !filterText.includes(login));
	const hasUnselectedUserToInvite = filteredUserToInvite && !filterText.includes(filteredUserToInvite.login);

we can see the problem (!filterText.includes(filteredUserToInvite.login)). This will match every possible combination.

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

Since filteredUserToInvite as well as selectedOptions both have the unique login property, it is possible to check if at least one element of the selectedOptions has a login identifier thats equal to filteredUserToInvite.login. If that is not the case, we can show the filteredUserToInvite.

What alternative solutions did you explore? (Optional)

N/A