[$250] Unmask the search input field for Fullstory

[flaviadefaria]

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

Problem
We don't want any search input to be masked

Solution
Unmask the search input field

Upwork Automation - Do Not Edit
Issue Owner

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021881651594298704562
• Upwork Job ID: 1881651594298704562
• Last Price Increase: 2025-01-21
• Automatic offers:
• shubham1206agra | Reviewer | 105791262
• ishakakkad | Contributor | 105791264

Issue Owner

Current Issue Owner: @arosiclair

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[ishakakkad]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-21 11:01:01 UTC.

Proposal

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

Unmask the search input field for Fullstory

What is the root cause of that problem?

Feature request, we should add fsClass="fs-unmask" to unmask the input field.

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

We need to add fsClass="fs-unmask" to the Search element here, like we did for the display names:

App/src/pages/home/HeaderView.tsx

Lines 230 to 231 in d50b5ae

	<View
	fsClass="fs-unmask"

We can add same way other places if needed.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Or we can add sClass="fs-unmask" here if we want to apply for all SearchRouterInput occurances.

[Shahidullah-Muffakir]

Proposal

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

Unmask the search input field for Fullstory

What is the root cause of that problem?

The fsClass="fs-unmask" is not added here :

App/src/components/Search/SearchPageHeaderInput.tsx

Lines 256 to 257 in a478562

	>
	<View style={[styles.appBG, ...autocompleteInputStyle]}>

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

add fsClass="fs-unmask" to the View here:

App/src/components/Search/SearchPageHeaderInput.tsx

Lines 256 to 257 in a478562

	>
	<View style={[styles.appBG, ...autocompleteInputStyle]}>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

[HenriqueCosta05]

Proposal

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

Removing mask from input search field

What is the root cause of that problem?

From the View that wraps TextInput component, from SearchRouterInput, the fsClass was not explicitly defined so it still has a mask covering it.

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

By adding a class fsClass="fs-unmask", from the selection below, it should not mask the input anymore.

App/src/components/Search/SearchRouter/SearchRouterInput.tsx

Line 91 in 42a656d

<View style={[outerWrapperStyle]}>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

📣 @HenriqueCosta05! 📣
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>

[HenriqueCosta05]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01453e4b7683182d89?viewMode=1

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[twilight2294]

@abekkala @flaviadefaria @shubham1206agra should you assign me here as well? I will be unmasking the tooltips as part of #55425

[shubham1206agra]

@ishakakkad's proposal looks good

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @shubham1206agra 🎉 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]

📣 @ishakakkad 🎉 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 📖

[ishakakkad]

I will create PR by tomorrow EOD

[ishakakkad]

@shubham1206agra @arosiclair @flaviadefaria can you please confirm should we unmask for all the SearchRouterInput occurrences here or only for one place here ?

[arosiclair]

I think it makes sense to unmask all occurrences.

[shubham1206agra]

@ishakakkad What's the status here?

[ishakakkad]

@shubham1206agra 2nd PR is created, please review it.

[arosiclair]

I can add testID but I just wanted to understand why this is working in this PR https://github.com/Expensify/App/pull/46568/files.

I'm not sure that it is working. It's also a bit older than parseFSAttributes so that would explain why it wasn't used there. Please post a PR with the parseFSAttributes change and I'll verify if it's working.

[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 9.0.95-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Added Test Id #56245

If no regressions arise, payment will be issued on 2025-02-18. 🎊

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

• @shubham1206agra requires payment automatic offer (Reviewer)
• @ishakakkad requires payment automatic offer (Contributor)

[melvin-bot]

@shubham1206agra @abekkala @shubham1206agra The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[arosiclair]

I still need to ProdQA this, but I'm having some trouble. Asking about it here.

[melvin-bot]

@arosiclair @abekkala @shubham1206agra @ishakakkad this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[arosiclair]

Still having issues with QA. Discussing here.

[arosiclair]

Alright we just confirmed the search input is still being masked here:

So this is still not done unfortunately. I'll have to find somebody more familiar to take a look at this since I'm not sure what the issue is at this point.

[arosiclair]

I'm still looking into this. I looked through Fullstory's docs and I can't find any information on unmasking inputs on web via code. Here are docs for native:

• Android
• iOS

I think it's mostly just implied that .fs-unmask should work on web. I think one thing that's complicating this is that the search box is not actually an input element. It's a div with a p in it so that might be causing the issue.

[arosiclair]

Confirmed again this isn't working on prod v9.1.1-6

I started another discussion here.

[arosiclair]

Lots of troubleshooting in this thread, but no luck. There's something wrong with the way we're trying to add the unmask attribute, but I have no idea what at the moment.