[HOLD for payment 2023-09-07] [$1000] Web - Multi word zones do not work while searching for Timezones

[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. Go to Settings -> Profile -> Timezone;
2. Uncheck the "Automatically determine your location." checkbox;
3. Click on "Timezone";
4. Input a multi word zone such as "New York", "Isle of Man", "East Indiana" in the search text;
5. Verify that no results appear.

Expected Result:

Multi word Timezones should appear in the results.

Actual Result:

Multi word Timezones do not appear in the results.

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.44-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

multi_word_timezones.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0183d12241aacbaee9
• Upwork Job ID: 1687242846389854208
• Last Price Increase: 2023-08-10
• Automatic offers:
• fedirjh | Reviewer | 26186832
• DanutGavrus | Contributor | 26186835
• DanutGavrus | Reporter | 26186836

[melvin-bot]

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

[huzaifa-99]

Proposal

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

We want to be able to search all multi-word time zones.

What is the root cause of that problem?

When we filter the search results here, we directly compare the lowercase timezone values to lowercase search value, without checking for _ cases.

Some timezones also have - / + / and -, combining all of these scenarios, these searches won't work

# expected result = gmt+0 or gmt-0, with these searches
---
gmt 0 
gmt      0
gmt0 
---

# expected result = US/East-Indiana, with these searches
---
East Indiana
East        Indiana
EastIndiana
---

# expected result = Atlantic/South_Georgia, with these searches
---
South Georgia
SouthGeorgia
South      Georgia
---

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

We should use some regex when filtering out results and replace +, -, _ and whitespace characters from both the search text and the timezones list with an empty string '' when filtering. This can be done with a regex like /[\-\+_]|[\s]/g and then we update this line to use the regex (i.e x.replace(regex,""))

Optional:

1. We can also remove / when filtering.
2. We can remove - and _ from the display timezones list, just for better visuals.

What alternative solutions did you explore? (Optional)

N/A

[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

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

Multi word zones do not work while searching for Timezones

What is the root cause of that problem?

When searching for a timezone, we do not replace existing "_" and "-" with " ", so 2 or more words zones will not appear when searched for:

App/src/pages/settings/Profile/TimezoneSelectPage.js

Lines 105 to 110 in 82669ae

	filterShownTimezones(searchText) {
	this.setState({
	timezoneInputText: searchText,
	timezoneOptions: _.filter(this.allTimezones, (tz) => tz.text.toLowerCase().includes(searchText.trim().toLowerCase())),
	});
	}

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

We should replace "_" & "-" with " " when filtering timezones:

timezoneOptions: _.filter(this.allTimezones, (tz) => tz.text.replace('_', ' ').replace('-', ' ').toLowerCase().includes(searchText.trim().toLowerCase())),
``` (edited) 

[samh-nl]

Proposal

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

Multi word zones do not work while searching for Timezones

What is the root cause of that problem?

The timezone names can contain special characters instead of spaces, including _ - and /.
When filtering the results, the lowercase values are compared and therefore leading to no results.

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

When searching, we should replace _ - and / with a space in both the search query and the timezone name, before running the search comparison in TimezoneSelectPage.js.

This improves on the proposals above in the following manner:

• Also replace "/": This is present in for example US/Central, where a user may want to search for US Central.
• Replace with a space rather than empty string is preferred: We want to keep the words separated to prevent irrelevant/unintuitive results.
• Replace in both search query and timezone name: If you only replace in the timezone name, you can no longer search for the literal name, e.g. US/Central.

What alternative solutions did you explore? (Optional)

N/A

[alexpensify]

I've run out of time and will test soon.

[alexpensify]

I'm OOO today. I'll try to review it over the weekend.

[alexpensify]

Not overdue - still on my testing lists

[alexpensify]

Closing - I am unable to replicate this experience while using Google Chrome:

[huzaifa-99]

@alexpensify its reproducible with 2 or more works, can you please try with these

1. "New york"
2. "North Dakota"

etc

[DanutGavrus]

@alexpensify I think that the Slack thread also has some context which may help for better understanding of the bug.

[alexpensify]

Ok, I see the issue now. I misunderstood this:

Input a multi word zone such as "New York", "Isle of Man", "East Indiana" in the search text;

You have to input two-word cities to generate this error.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@fedirjh when you get a chance, can you please review the proposals? Thank you!

[bhs324]

Proposal

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

Multi word zones do not work while searching for Timezones

What is the root cause of that problem?

Multi-word timezones are entered with the '_' character instead of a space. It cannot be searched with spaces, as it simply compares only those that contain the same string.

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

Currently, timezone is entered with '_', but we don't know what other characters will be entered in the future.
To add flexibility to the search, we need to use a regular expression.
Jetbrains, a popular IDE, provides a very handy search feature called Search Everywhere.

We can create a similar "Search Everywhere" feature using the following code.

TimezoneSelectPage.js:105

filterShownTimezones(searchText) {
  this.setState({
    timezoneInputText: searchText,
    timezoneOptions: _.filter(this.allTimezones, (tz) => new RegExp(searchText.trim().replaceAll(/\s+/g, '.*'), 'i').test(tz.text)),
  });
}

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

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

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

📣 @DanutGavrus 🎉 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

[alexpensify]

Awesome, we will continue to follow along with the process.

[DanutGavrus]

@fedirjh
PR ready for review: #25569

[melvin-bot]

Based on my calculations, the pull request did not get merged within 3 working days of assignment. Please, check out my computations here:

• when @DanutGavrus got assigned: 2023-08-17 22:46:25 Z
• when the PR got merged: 2023-08-29 22:34:34 UTC
• days elapsed: 7

On to the next one 🚀

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• [23543] Multi words zones now work while searching for timezones. #25569

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

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:

• @fedirjh requires payment offer (Reviewer)
• @DanutGavrus requires payment offer (Contributor)
• @DanutGavrus requires payment offer (Contributor)

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]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@fedirjh] The PR that introduced the bug has been identified. Link to the PR:
• [@fedirjh] 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:
• [@fedirjh] 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:
• [@fedirjh] Determine if we should create a regression test for this bug.
• [@fedirjh] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[alexpensify]

@fedirjh to prepare for the payment day, can you please complete the checklist? Thanks!

[fedirjh]

BugZero Checklist:

• Link to the PR: This is not a regression, it was not initially implemented in this PR New timezone pages #12201 where we introduced the new timezone page
• Link to comment: N/A not a regression
• Link to discussion: N/A not a regression
• Determine if we should create a regression test for this bug: ✅

---

Regression Test Proposal

1. Go to Settings -> Profile -> Timezone;
2. Uncheck the "Automatically determine your location" checkbox.
3. Go to Timezone select the page
4. Search for multi-word text such as "New York", "Isle of Man", or "East Indiana"
5. Verify that the correct result appears.

• Do we agree 👍 or 👎

[alexpensify]

@bondydaa to prepare for payment day, can you review and approve the regression test? Thanks!

[alexpensify]

Here is the payment summary:

• External issue reporter @DanutGavrus $250
• Contributor that fixed the issue @DanutGavrus $1000
• Contributor+ that helped on the issue and/or PR @fedirjh $1000

Upwork Job: https://www.upwork.com/jobs/~0183d12241aacbaee9

*If applicable, the bonuses will be applied on the final payment

Extra Notes regarding payment: There is no bonus here and I'm going to use the C+ approval date since there was a delay because of the US Bank Holiday. In saying that, it was 5 business days-- no penalties.

[alexpensify]

Everyone has been paid in Upwork!

[alexpensify]

@bondydaa - let me know if you agree with the regression test and I can create that GH.

[bondydaa]

👍 to the suggested steps.

Though I'm wondering if we could somehow create an automated unit test for this component https://github.com/Expensify/App/tree/main/tests/unit?

my brain is dead today so not sure what that all would entail but if we can I'd prefer automate tests over manual ones.

[alexpensify]

Thanks, I'm OOO until Thursday and will create the regression test then.

[alexpensify]

The regression test request has been created, so I'm going to close now.