[$1000] Web - The ampersand (&) is not displaying properly in the NewDot under the category selector

[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!

---

Version Number: 1.4.27-0
Reproducible in staging?:
Reproducible in production?:
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
Expensify/Expensify Issue URL:
Issue reported by: @puneetlath
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1705434349164419

Action Performed:

1. Log in in Olddot as Admin of the Collet policy and invite Employee to the collect policy.
2. Add Category with ampersand (&)
3. Log in as Employee in NewDot
4. Select WS and start requesting money
5. Open Category section

Expected Result:

The ampersand (&) is displaying properly in the NewDot under the category selector

Actual Result:

The ampersand (&) is not displaying properly in the NewDot under the category selector

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fd5614918bf77eaf
• Upwork Job ID: 1749541623825879040
• Last Price Increase: 2024-01-31

[melvin-bot]

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

[puneetlath]

This is reproducible with our NewDot testing policy with the categories that come from NetSuite.

[melvin-bot]

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

[melvin-bot]

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

[AliSinaYOusofi]

one of my clients project had the same bug ( in a blogging website), the problem was with encoding/decoding of contents.

[melvin-bot]

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

[AliSinaYOusofi]

Contributor details
Your Expensify account email: tinayousofiali@expensify.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0158977eac7b003cfb

[melvin-bot]

⚠️ Invalid email. Please make sure to create an Expensify account with this email first here.

[situchan]

No proposals yet

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@NicMendonca, @situchan Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Upwork job price has been updated to $1000

[FitseTLT]

Proposal

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

The ampersand (&) is not displaying properly in the NewDot under the category selector

What is the root cause of that problem?

The BE is returning html encoded categories.

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

We need to _.unescape or use Str.htmlDecode to unescape categories in here

App/src/libs/OptionsListUtils.ts

Lines 913 to 914 in a44e804

	const sortedCategories = sortCategories(categories);
	const enabledCategories = Object.values(sortedCategories).filter((category) => category.enabled);

const enabledCategories = Object.values(sortedCategories)
        .filter((category) => category.enabled)
        .map((category) => ({...category, name: Str.htmlDecode(category.name)}));

We have done a similar thing to tags to remove unnecessary escaping keys should do similar here

What alternative solutions did you explore? (Optional)

If we don't want to change what we return to the BE then we can only unescape before displaying it only same as what we did for tag

[rushatgabhane]

@MonilBhavsar yea this bug is already fixed. do nothing?

[situchan]

@rushatgabhane this is not "do nothing" issue. Please check https://expensify.slack.com/archives/C049HHMV9SM/p1705434349164419

[rushatgabhane]

ah thanks! looks like it's a backend bug then

[MonilBhavsar]

Yes, some users are still experiencing this bug

[FitseTLT]

ah thanks! looks like it's a backend bug then

I don't think this should be considered as a BE issue. This is issue is similar to #30734 which is Parent: Child tags were displaying with escaping slash before colon (Parent\: Child) but in OD it unescapes it automatically when it displays it and What was finally decided in here is that we need to even return to the BE as escaped and only unescape it when we display it as it is how OD is sending to the BE and we re-implemented it.

But rather this issue is caused by ND not auto html-decoding as we do in OD. Now if u enter & that will automatically be decoded in old dot and displayed as & but in ND it will display &.

[melvin-bot]

Current assignee @situchan is eligible for the Internal assigner, not assigning anyone new.

[MonilBhavsar]

Made this internal while I figure the root cause

[MonilBhavsar]

Trying to reproduce locally

[melvin-bot]

@MonilBhavsar @muttmuure @situchan this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[MonilBhavsar]

Discussing it here https://expensify.slack.com/archives/C03TQ48KC/p1707467669800489

[melvin-bot]

@MonilBhavsar, @muttmuure, @situchan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[muttmuure]

@MonilBhavsar @cead22's comment is here:

I think ideally we don't store html encoded things in the DB, and we encode/escape them before displaying them.
Is there a way to add a category in old dot today with & that gets stored as & in the database? If so, do we know why?
Is there a way to add a category in old dot with & that gets displayed as &? If not, do we know why?
I think it's fine to do nothing for old dot, but I think we shouldn't compromise on new dot, and if we agree the ideal is not html-encoding when storing in the DB (and only sanitizing for Bobby Tables), and the html-encoding (or escaping) when displaying them, we should do that

Are all of your questions answered?

[MonilBhavsar]

Yes answered. I think we all agree that we do nothing for categories added in oldDot but take necessary steps for categories added in newDot. So I am going to create a new issue for wave8 - simplified collect to ensure categories added from newDot are always decoded across all layers of the app.

[MonilBhavsar]

Closing in favor of #36473