[HOLD for payment 2023-09-29] [HOLD on #27729] [$500] Dev: Web - "No results found" shown after selecting a new user in split bill

[kbecciv]

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

---

Action Performed:

1. Click on FAB and click on Request Money
2. Click on Manual tab if necessary
3. Enter an amount
4. Click next
5. Enter a new user login
6. Click on split on this option

Expected Result:

There should not be any header message.

Actual Result:

There is a header message - "No results found"

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: Dev 1.3.70.5
Reproducible in staging?: n
Reproducible in production?: n
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-09-16.at.9.02.18.PM.mov

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b200e8e764e35545
• Upwork Job ID: 1703723226703622144
• Last Price Increase: 2023-09-18
• Automatic offers:
• c3024 | Contributor | 26890482
• c3024 | Reporter | 26890483

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @johncschuster (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[kbecciv]

Proposal by
@c3024

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694878264647479

Proposal

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

“No results found” header message shown when clicking on split on a new user in request money

What is the root cause of that problem?

We are not passing here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 199 to 204 in 76c1559

	const headerMessage = OptionsListUtils.getHeaderMessage(
	newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
	Boolean(newChatOptions.userToInvite),
	searchTerm,
	maxParticipantsReached,
	);

hasMatchedParticipant and the default for this is false and the headerMessage “No results found” appears when the string is a valid email or phone and there are no users to invite nor selectable options.

App/src/libs/OptionsListUtils.js

Line 1288 in 76c1559

if (searchValue && !hasSelectableOptions && !hasUserToInvite) {

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

We should add here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Line 204 in 76c1559

);

this check to pass true if the search string matches a participant

_.some(participants, (participant) => participant.login === searchTerm.trim().toLowerCase()),

As an aside
We should also trim the search value here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Line 202 in 76c1559

searchTerm,

to ensure that “Invalid Email” error is not shown when we add some leading spaces to the email being searched.
If we don’t trim, we will get an error “Invalid Email” even though an option appeared and selected with the email.

What alternative solutions did you explore? (Optional)

For ease and not to miss any cases we might use a variable called trimmedSearchTerm like this

trimmedSearchTerm = searchTerm.toLowerCase();

and use this at all places where searchTerm is used except the searchTerm in OptionsSelector.

[c3024]

Posting my proposal with slight change.

Proposal

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

“No results found” header message shown when clicking on split on a new user in request money

What is the root cause of that problem?

We are not passing here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 199 to 204 in 76c1559

	const headerMessage = OptionsListUtils.getHeaderMessage(
	newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
	Boolean(newChatOptions.userToInvite),
	searchTerm,
	maxParticipantsReached,
	);

hasMatchedParticipant and the default for this is false and the headerMessage “No results found” appears when the string is a valid email or phone and there are no users to invite nor selectable options.

App/src/libs/OptionsListUtils.js

Line 1288 in 76c1559

if (searchValue && !hasSelectableOptions && !hasUserToInvite) {

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

We should add here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Line 204 in 76c1559

);

this check to pass true if the search string matches a participant

_.some(participants, (participant) => participant.login.includes(searchTerm.trim().toLowerCase())),

As an aside
We should also trim the search value here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Line 202 in 76c1559

searchTerm,

to ensure that “Invalid Email” error is not shown when we add some leading spaces to the email being searched.
If we don’t trim, we will get an error “Invalid Email” even though an option appeared and selected with the email.

What alternative solutions did you explore? (Optional)

For ease and not to miss any cases we might use a variable called trimmedSearchTerm like this

trimmedSearchTerm = searchTerm.toLowerCase();

and use this at all places where searchTerm is used except the searchTerm in OptionsSelector.

[MrJithil]

Proposal

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

While user requesting money by using Manual option and trying to enter partial user's email who is new to Expensify, a no results found message is being shown to the user.

The issue here is the search term is not empty and the search term is not either a valid email or phone.

The default message "no results found" is showing as per the current behaviour.

What is the root cause of that problem?

The default message "no results found" is showing as per the current behaviour.

return Localize.translate(preferredLocale, 'common.noResultsFound');

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

By default, we should return an empty error message if the user's searchTerm is not isValidEmail or not a isValidPhone.
So, we can remove the default error message returning. So, the return statement outside the searchTerm validation will take care the message handling with an empty message.

What alternative solutions did you explore? (Optional)

remove the line of default error message which is being thrown to the user. So, that, the return statement

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]

📣 @Abdulloh007! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Abdulloh007]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~010b57b8d464caf8cd

I think when the split button is pressed, you cut the user from the list of results to the list of selected ones, and at this moment the list of results becomes empty and the condition under which the message should be displayed works.

if (searchValue && !hasSelectableOptions && !hasUserToInvite)
when calling the setHeaderText , all the conditions are triggered, which should not be the case because we see in the video !hasUserToInvite = false. And I ges that setHeaderText is triggered before the user gets into the selected list and it turns out that at the time of calling setHeaderText !hasUserToInvite = true

[Abdulloh007]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~010b57b8d464caf8cd

I think when the split button is pressed, you cut the user from the list of results to the list of selected ones, and at this moment the list of results becomes empty and the condition under which the message should be displayed works.

if (searchValue && !hasSelectableOptions && !hasUserToInvite) when calling the setHeaderText , all the conditions are triggered, which should not be the case because we see in the video !hasUserToInvite = false. And I ges that setHeaderText is triggered before the user gets into the selected list and it turns out that at the time of calling setHeaderText !hasUserToInvite = true

I check it twice with react dev tools and I'm right)

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[parasharrajat]

@johncschuster This seems like expected behavior to me. It is the same as other pages like the New Group page. Do you think we should change this? If yes, to what behaviour?

@shawnborton Could you please help us determine the best action here? 🙇

[c3024]

@parasharrajat There is an issue open for group chat as well.

[neil-marcellini]

The group chat issue is really similar so I'm recommending that we fix this issue in the same PR that fixes the group chat issue.

[parasharrajat]

OK, let's hold this on #27729. The last remaining thing would be just the reporting payment here.

I am unassigning. Please ping me if you need a C+.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.72-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix select show no result found #27729

If no regressions arise, payment will be issued on 2023-09-29. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @c3024 requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

📣 @c3024 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[johncschuster]

@c3024 can you please ping me once you've accepted the Reporter role? I'll issue payment for the report once you've done that. Thanks!

[c3024]

Thanks. Accepted. @johncschuster

[johncschuster]

Payment has been issued!