[$250] Tags - mWeb - Creating expense with tag G : : displays tag no longer valid error

[lanitochka17]

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

---

Version Number: 9.0.14
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4784898
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Tap profile icon - workspaces-- workspace
3. Tap more features - enable tags
4. Tap on tags - add a tag
5. Enter G : : and save the tag
6. Navigate to workspace chat
7. Tap plus icon near compose and select submit expense
8. Enter an amount and tap next
9. Enter merchant and tap more
10. Select tag
11. Submit expense
12. Open the created expense and note tag field

Expected Result:

Creating expense with tag G : : must not display tag no longer valid error

Actual Result:

Creating expense with tag G : : displays tag no longer valid error

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

Bug6556724_1722288231254.Screenrecorder-2024-07-30-02-44-18-551_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c81e89645f07ad39
• Upwork Job ID: 1818483515236941638
• Last Price Increase: 2024-07-31
• Automatic offers:
• situchan | Reviewer | 103430485

Issue Owner

Current Issue Owner: @situchan

[melvin-bot]

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

[lanitochka17]

@sakluger FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[FitseTLT]

Proposal

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

Tags - mWeb - Creating expense with tag G : : displays tag no longer valid error

What is the root cause of that problem?

This is because we are removing the last colons here

App/src/libs/IOUUtils.ts

Lines 144 to 145 in 3722b22

	return tagArray.join(CONST.COLON).replace(/:*$/, '');
	}

which will create an incompatibility with the tag of the workspace which is G ::

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

We are removing the last colons to remove empty multilevel tags which are joined by a colon here

App/src/libs/IOUUtils.ts

Lines 144 to 145 in 3722b22

	return tagArray.join(CONST.COLON).replace(/:*$/, '');
	}

But we need to make sure that the colons are not preceded by a backslash \ because that would mean the colon is part of the tag name as the backend normally returns colons after escaping with backslashes.
So we need to change it to

    return tagArray.join(CONST.COLON).replace(/(?<!\\):*$/, '');

What alternative solutions did you explore? (Optional)

[sakluger]

Making this external. Let's be careful to keep in mind that colons are how we store different levels of tags with multi-level tags.

[melvin-bot]

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

[melvin-bot]

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

[daledah]

Proposal

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

Creating expense with tag G : : displays tag no longer valid error

What is the root cause of that problem?

In

App/src/libs/IOUUtils.ts

Line 144 in 881c548

return tagArray.join(CONST.COLON).replace(/:*$/, '');

, we always remove the last :, the aim was to remove empty multi-level tags. However in this case the : is user input and is formatted as \: by the back-end, but we're wrongly removing the last :.

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

We should filter the empty item at the last of tagArray instead of using Regex here

while (tagArray.length > 0 && !tagArray[tagArray.length - 1]) {
    tagArray.pop();
}

return tagArray.join(CONST.COLON);

This will preserve existing last : removal behavior, but if empty tags should be removed if it's in the middle too, above can be simplified by just using filter to filter out empty item in tagArray. We could also trim the tagArray item before checking its emptyness.

What alternative solutions did you explore? (Optional)

I tried updating the Regex to use look behind like above proposal but it doesn't work for multiple browsers (like older Safari version), reference: https://caniuse.com/js-regexp-lookbehind. Also IMO we should try to avoid using Regex as much as possible because it's hard to read.

[situchan]

2 proposals in review

[melvin-bot]

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

[webdog12345]

Tag is changed to G:
it happens because of this function.(App/src/libs/IOUUtils.ts Line140)
function insertTagIntoTransactionTagsString(transactionTags: string, tag: string, tagIndex: number): string {
const tagArray = TransactionUtils.getTagArrayFromName(transactionTags);
tagArray[tagIndex] = tag;

   return tagArray.join(CONST.COLON).replace(/:*$/, '');

}

we can change this function like this
function insertTagIntoTransactionTagsString(transactionTags: string, tag: string, tagIndex: number): string {
const tagArray = TransactionUtils.getTagArrayFromName(transactionTags);
// Update the tag at the specified index
tagArray[tagIndex] = tag;

   // Use CONST.COLON to join tags and ensure double colons are preserved
   return tagArray.join(CONST.COLON.repeat(2)).replace(new RegExp(`${CONST.COLON}{2,}$`), '');

}
I have read and understood contributing guidelines.
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/arturl39

[melvin-bot]

@sakluger, @situchan Eep! 4 days overdue now. Issues have feelings too...

[sakluger]

Hey @situchan - it looks like we have a few proposals ready for review.

[situchan]

Agree we should avoid negative lookbehind.

---

using filter to filter out empty item in tagArray. We could also trim the tagArray item before checking its emptyness.

@daledah's proposal looks good.
🎀👀🎀 C+ reviewed

[melvin-bot]

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

[Julesssss]

but if empty tags should be removed if it's in the middle too, above can be simplified by just using filter to filter out empty item in tagArray. We could also trim the tagArray item before checking its emptyness.

👍

[melvin-bot]

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

📣 @daledah You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[daledah]

@situchan this PR is ready for review.

[paultsimura]

@daledah @situchan seems like this caused #47631, could you please check while it is still within the regression period?

[daledah]

@paultsimura I'm working on a PR right now.

[melvin-bot]

This issue has not been updated in over 15 days. @sakluger, @Julesssss, @situchan, @daledah eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[situchan]

⚠️ We just got confirmation on Slack that the Deploy Checklist: New Expensify 2024-08-26 which includes the PR of this issue was only deployed to production today in Deploy Checklist: New Expensify 2024-08-28. More context on why this happened can be found in this Slack thread and this Slack comment.

Given the context above, this issue should be on [HOLD for Payment 2024-09-6] according to today's production deploy from Deploy Checklist: New Expensify 2024-08-28.