[Payment Due June 21] [$250] Can't open tag with tag name with % special characters

[m-natarajan]

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.75-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
Expensify/Expensify Issue URL:
Issue reported by: @DylanDylann
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1716460972676239

Action Performed:

1. Sign into https://staging.new.expensify.com/
2. Click Account Settings > Workspace > More Features > tags
3. Create a tag name !@#$%^&(&^%$#@ (it seems to be the `%' that throws the error'
4. Save the Tag > Click on the tag again - notice the "uh-oh, something went wrong!" error

Expected Result:

The user should access to tag setting page

Actual Result:

App crashes - notice the "uh-oh, something went wrong!" 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

Recording.17.mp4

2024-05-27_16-04-06.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e766d47beaa045bb
• Upwork Job ID: 1795004446572822528
• Last Price Increase: 2024-05-27
• Automatic offers:
• DylanDylann | Reviewer | 102522628

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot]

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

[abzokhattab]

Proposal

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

app crashes when opening a tag with a name having special characters

What is the root cause of that problem?

• when clicking on a tag inside the tags page, the tagName is passed as a route param after being encoded as URI:
  

  App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

  Line 161 in b951638

  Navigation.navigate(ROUTES.WORKSPACE_TAG_SETTINGS.getRoute(policyID, tag.value));

App/src/ROUTES.ts

Line 677 in 788b3f6

getRoute: (policyID: string, tagName: string) => `settings/workspaces/${policyID}/tag/${encodeURIComponent(tagName)}` as const,

• then on clicking on navigating to the tag settings, the tagName is parsed back to the original value using decodeURIComponent inside the navigation configs
  

  App/src/libs/Navigation/linkingConfig/config.ts

  Lines 433 to 438 in 788b3f6

  	},
  	[SCREENS.WORKSPACE.TAG_SETTINGS]: {
  	path: ROUTES.WORKSPACE_TAG_SETTINGS.route,
  	parse: {
  	tagName: (tagName: string) => decodeURIComponent(tagName),
  	},

• finally inside the TagSettingsPage
  the route.params.tagName is wrongly decoded again causing the decode function to throw an error:

  App/src/pages/workspace/tags/TagSettingsPage.tsx

  Lines 47 to 49 in 30b0dc8

  	const currentPolicyTag =
  	policyTag.tags[decodeURIComponent(route.params.tagName)] ?? Object.values(policyTag.tags ?? {}).find((tag) => tag.previousTagName === decodeURIComponent(route.params.tagName));

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

there is no need to decode the tagName inside the TagSettingsPage since the value is already parsed back to the original value inside the navigation config,

so we should modify this to:

    const currentPolicyTag = policyTag.tags[route.params.tagName] ?? Object.values(policyTag.tags ?? {}).find((tag) => tag.previousTagName === route.params.tagName);

POC

Screen.Recording.2024-05-27.at.10.47.53.AM.mov

[DylanDylann]

I reported this bug from here, I would love to take over this issue as C+ if this is external

[Christinadobrzyn]

Hey @DylanDylann I'm not able to reproduce this on safari. I'm doing the following:

1. Create a workspace > Click More Features > toggle on Tags
2. Click Add Tag
3. Create a tag with tag name including special characters [ex: jlkaf&()(&(^(^(&))(]
4. Save the Tag
5. Click Enabled > be able to enable and disable the tag

There is some other weird stuff happening that might be related? Are you doing something different to get this issue?

2024-05-27_13-56-12.mp4

Also asked you in Slack - https://expensify.slack.com/archives/C049HHMV9SM/p1716789612317459?thread_ts=1716460972.676239&cid=C049HHMV9SM

[Christinadobrzyn]

@DylanDylann do you think this might be related? #41414

[DylanDylann]

@Christinadobrzyn The original bug can still be reproduced. Please try again with this name: !@#$%^&*(*&^%$#@

[DylanDylann]

@Christinadobrzyn I can't reproduce your bug here. Could you copy exactly 2 tag names used in your video?

[Christinadobrzyn]

Ah thanks @DylanDylann - I can reproduce with !@#$%^&*(*&^%$#@ (I think it's just the % that's causing the error). Updated the OP. Do you think this can be external? Do you think this is related - #41414 - seems to be the same error

[DylanDylann]

I checked this bug before reporting it. This is a bug from the front end. Let's make it external