[HOLD for payment 2023-04-17] [$1000] Profile - Personal Details- Able to save Fist and Last name fields with One space

[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. Log in with a brand new account
2. Navigate to Settings -> Profile -> Personal details
3. Navigate to the Legal name page
4. Enter 1 space to field First/ Last Name and save.

Expected Result:

Unable to save Fist and Last name fields with One space

Actual Result:

The form is saved without issue.

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.2.90.6

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Bug5995857_space.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c107dbee7d205160
• Upwork Job ID: 1641457403150352384
• Last Price Increase: 2023-03-30

[MelvinBot]

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

[MelvinBot]

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

[NicMendonca]

Ah, I just noticed that we do throw an error that its mandatory, so I agree you shouldn't be able to save it without text.

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[PrashantMangukiya]

Proposal

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

Profile - Personal Details- Able to save Fist and Last name fields with One space.

What is the root cause of that problem?

Within LegalNamePage.js file we are doing empty validation for legalFirstName and legalLastName as shown below.

App/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js

Line 71 in 3fdae58

} else if (_.isEmpty(values.legalFirstName)) {

App/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js

Line 77 in 3fdae58

} else if (_.isEmpty(values.legalLastName)) {

For strings and array-like objects _.isEmpty() will checks if the length property is 0 then it will consider it empty, otherwise not, so here we are passing legalFirstName and legalLastName with one space so it will not consider it empty, this is the root cause of the problem.

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

Within LegalNamePage.js trim values.legalFirstName and values.legalLastName at line 71 and 77 during empty validation. It will solve the problem and not allow one or multiple space.

// _.isEmpty(values.legalFirstName)     // *** OLD ***  
_.isEmpty(values.legalFirstName.trim())    // *** UPDATED ***

// _.isEmpty(values.legalLastName)  // *** OLD ****
_.isEmpty(values.legalLastName.trim())   // *** UPDATED ***

What alternative solutions did you explore? (Optional)

None

Results

OneSpace.mov

[MelvinBot]

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

[Pujan92]

Proposal

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

Legal names allow spaces in the field

What is the root cause of that problem?

We are allowing space as per the regex for legal names here

App/src/CONST.js

Line 863 in 8ac3824

ALPHABETIC_CHARS_WITH_NUMBER: /^[a-zA-Z0-9 ]*$/,

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

Remove space from regex which won't allow space in the first and last legal name and shows the error which prevents the form from saving.

[PrashantMangukiya]

@Pujan92 that ALPHABETIC_CHARS_WITH_NUMBER: /^[a-zA-Z0-9 ]*$/, is ok.

We added it as a solution of this issue #15741 As we do not allow any special chars and we have to allow space because some people has space in First name or Middle name etc. So that regular expression is ok for solving that problem and we can not remove space from that.

Here actual problem is, when input has only space (without any chars) at that time it will go to _.isEmpty(values.legalFirstName) and it will consider as valid due to below reason.

For strings and array-like objects _.isEmpty() will checks if the length property is 0 then it will consider it empty, otherwise not, so here we are passing legalFirstName and legalLastName with one space so it will not consider it empty, this is the root cause of the problem.

[rushatgabhane]

Should we make the change in Form.js instead? And do it for all inputs

[PrashantMangukiya]

@rushatgabhane Note sure to add within Form.js is a good idea or not. I am sceptical that it should create issue for others places as Form.js is used many places. So I do not prefer this.

[Pujan92]

@PrashantMangukiya as the error message says Name can only include letters and numbers. I thought space should not be allowed in those names.

[Riddhi2291]

@PrashantMangukiya
ALPHABETIC_CHARS_WITH_NUMBER: ^[a-zA-Z]+(?: [a-zZA-Z]+)?$
This Regx will allow only single space between 2 words(alphabets only)

[MelvinBot]

📣 @Riddhi2291! 📣

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. 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.
2. 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.
3. 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>

[PrashantMangukiya]

@Pujan92 Thank you. During pr review we decided to allow space #15989 (comment) and set such message, so it match with server side api that accepts numbers like "Paulo 1st" or "John the 2nd" etc. Thank you.

[alexxxwork]

Proposal

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

We can use space as legal name

What is the root cause of that problem?

The regex expression to test the name contains space

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

We can add a new regex in CONST.js to test Legal Name and update test expression here:

App/src/libs/ValidationUtils.js

Lines 367 to 369 in 3fdae58

	function isValidLegalName(name) {
	return CONST.REGEX.ALPHABETIC_CHARS_WITH_NUMBER.test(name);
	}

Also I think we need more letters than a-zA-z
regex:
LEGAL_NAME: /^[A-Za-zÀ-ÿ][a-zA-ZÀ-ÿ0-9 ]+$/

[PrashantMangukiya]

@PrashantMangukiya ALPHABETIC_CHARS_WITH_NUMBER: ^[a-zA-Z]+(?: [a-zZA-Z]+)?$ This Regx will allow only single space between 2 words(alphabets only)

No worry here we are dealing with different thing as mentioned in issue title.

Profile Personal Details- Able to save Fist and Last name fields with One space

[rushatgabhane]

Note sure to add within Form.js is a good idea or not. I am sceptical that it should create issue for others places as Form.js is used many places. So I do not prefer this.

How so? Can you give me an example?

[PrashantMangukiya]

@rushatgabhane I did not explored Form.js component fully yet. So my understanding related to Form.js component is limited. So have no suggestion for that.

[rushatgabhane]

oh okayy no problem :)

[tienifr]

Proposal

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

Profile - Personal Details- Able to save Fist and Last name fields with One space

What is the root cause of that problem?

We don't have the logic to trim the value in the Form component

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

In the Form Component, We should trim all values before validating the value like
in here:

App/src/components/Form.js

Line 173 in 2398744

validate(values) {

add this logic to trim values

 const trimmedValues = {};
 _.each(values, (inputValue, inputID) => _.isString(inputValue) && (trimmedValues[inputID] = inputValue.trim()));

And using the trimmedValued instead of values in validate function

My solution also fixes the same problem in all other places using Form Component like the Company Address Field in CompanyStep Page

If we come up with this approach, we also remove the trim function in some places to clean

What alternative solutions did you explore? (Optional)

NA

Result

Screen.Recording.2023-03-31.at.15.27.21.mov

[jasperhuangg]

@Pujan92 @alexxxwork I tested your proposals and they don't see to work

@tienifr your proposal makes sense to me and seems to work, it also fixes this issue in other components where we use the form, assigned!

[MelvinBot]

📣 @tienifr You have been assigned to this job by @jasperhuangg!
Please apply to this job in Upwork 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 📖

[rushatgabhane]

@tienifr ping me here once you raise a PR, thanks!

[alexxxwork]

@Pujan92 @alexxxwork I tested your proposals and they don't see to work

@tienifr your proposal makes sense to me and seems to work, it also fixes this issue in other components where we use the form, assigned!

@jasperhuangg Regex testing don't work?
Trimming before regex test seems to be more like a workaround and modifying regex fixes this issue and potential problems with Spanish legal names.

[rushatgabhane]

Trimming before regex test seems to be more like a workaround

@alexxxwork could you please explain why it's a workaround?

[tienifr]

@rushatgabhane The PR is created. Please help to review it, thanks

[tienifr]

Regression Test Proposal

Bug: Profile - Personal Details- Able to save Fist and Last name fields with One space

Proposed Test Steps:

1. Navigate to Settings -> Profile -> Personal details > Legal name
2. Enter one or more spaces to field First/ Last Name and click outside input (or click save).
3. Verify that the error appears with the message "This field is required"

Do we 👍 or 👎

[MelvinBot]

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

[MelvinBot]

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

• fix/16611: Trim value before validation in Form Component #16861

If no regressions arise, payment will be issued on 2023-04-17. 🎊

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

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

[MelvinBot]

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:

• [@rushatgabhane / @jasperhuangg] The PR that introduced the bug has been identified. Link to the PR:
• [@rushatgabhane / @jasperhuangg] 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:
• [@rushatgabhane / @jasperhuangg] 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:
• [@NicMendonca] Determine if we should create a regression test for this bug.
• [@rushatgabhane] 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.
• [@NicMendonca] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[rushatgabhane]

Just a polish to the Form component where we trim all string values. I don't think we need to do the Bug checklist here

[NicMendonca]

@rushatgabhane @tienifr apply please: https://www.upwork.com/jobs/~01c107dbee7d205160

Thanks!

[tienifr]

@NicMendonca applied, thanks!

[NicMendonca]

@rushatgabhane @tienifr - paid 🎉

[NicMendonca]

@rushatgabhane @tienifr I don't know what happened there 😅 now both are paid! Sorry!