[Payment due] [$250] Wrong navigation occurs when we create a category with the name 'new'

[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: 9.0.29-6
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: @jayeshmangwani
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1725484110243019

Action Performed:

1. Open the app and go to Settings -> Workspaces.
2. Select any workspace and navigate to Categories.
3. Click Add Category and create a new category with the name "new".
4. Click on the newly created category "new".

Expected Result:

Pressing on the category should have opened the category details.

Actual Result:

Pressing on the category with the name 'new' goes to Add Category.

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

new-category-bug-.mov

Recording.514.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021833438666330489454
• Upwork Job ID: 1833438666330489454
• Last Price Increase: 2024-09-10
• Automatic offers:
• shubham1206agra | Reviewer | 103900935
• dominictb | Contributor | 103900936

Issue Owner

Current Issue Owner: @shubham1206agra

[melvin-bot]

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

[ChavdaSachin]

Proposal

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

Clicking on category named new on WORKSPACE_CATEGORIES page, App navigates to wrong page

What is the root cause of that problem?

• RCA for this issue is -
  when clicked on a category on WORKSPACE_CATEGORIES page, App tries to navigate to CATEGORY_SETTINGS page using
  

  App/src/ROUTES.ts

  Lines 734 to 737 in 6760f96

  	WORKSPACE_CATEGORY_SETTINGS: {
  	route: 'settings/workspaces/:policyID/categories/:categoryName',
  	getRoute: (policyID: string, categoryName: string) => `settings/workspaces/${policyID}/categories/${encodeURIComponent(categoryName)}` as const,
  	},

  or
  

  App/src/ROUTES.ts

  Lines 405 to 408 in 6760f96

  	SETTINGS_CATEGORY_SETTINGS: {
  	route: 'settings/:policyID/categories/:categoryName',
  	getRoute: (policyID: string, categoryName: string, backTo = '') => getUrlWithBackToParam(`settings/${policyID}/categories/${encodeURIComponent(categoryName)}`, backTo),
  	},

• So, in both cases if category name is new then CATEGORY_SETTINGS page route will look like - settings/:policyID/categories/new
  which is the exact route of CATEGORY_CREATE page
  

  App/src/ROUTES.ts

  Lines 413 to 416 in 6760f96

  	SETTINGS_CATEGORY_CREATE: {
  	route: 'settings/:policyID/categories/new',
  	getRoute: (policyID: string, backTo = '') => getUrlWithBackToParam(`settings/${policyID}/categories/new`, backTo),
  	},

  
  So, when we click on category named new we actually navigate to CATEGORY_CREATE page

• Similar problem will arise in case of category named settings

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

• To solve this issue we should alter CATEGORY_SETTINGS page route in such way it does not clash with any other path.
• So, append "/settings" to both route

route: 'settings/workspaces/:policyID/categories/:categoryName/settings',
getRoute: (policyID: string, categoryName: string) => `settings/workspaces/${policyID}/categories/${encodeURIComponent(categoryName)}/settings` as const,

App/src/ROUTES.ts

Lines 735 to 736 in 6760f96

	route: 'settings/workspaces/:policyID/categories/:categoryName',
	getRoute: (policyID: string, categoryName: string) => `settings/workspaces/${policyID}/categories/${encodeURIComponent(categoryName)}` as const,

• And,

route: 'settings/:policyID/categories/:categoryName/settings',
getRoute: (policyID: string, categoryName: string, backTo = '') => getUrlWithBackToParam(`settings/${policyID}/categories/${encodeURIComponent(categoryName)}/settings

App/src/ROUTES.ts

Lines 406 to 407 in 6760f96

	route: 'settings/:policyID/categories/:categoryName',
	getRoute: (policyID: string, categoryName: string, backTo = '') => getUrlWithBackToParam(`settings/${policyID}/categories/${encodeURIComponent(categoryName)}`, backTo),

What alternative solutions did you explore? (Optional)

• We could edit SETTINGS_CATEGORY_CREATE , SETTINGS_CATEGORIES_SETTINGS , SETTINGS_CATEGORIES_SETTINGS and SETTINGS_CATEGORY_CREATE if we do not wish to edit SETTINGS_CATEGORY_SETTINGS and WORKSPACE_CATEGORY_SETTINGS or any similar change could be applied.

[dominictb]

Proposal

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

• Wrong navigation occurs when we create a category with the name 'new'

What is the root cause of that problem?

• When creating a new category, we open:
  

  App/src/ROUTES.ts

  Line 756 in 6760f96

  route: 'settings/workspaces/:policyID/categories/new',

and when editing the existing category, we open:

App/src/ROUTES.ts

Line 735 in 6760f96

route: 'settings/workspaces/:policyID/categories/:categoryName',

• As we can see if the existing category has the name "new", it will open the page to create a new category.

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

• In other flows, such as tag and tax, the routes to the create a new item are /tags/new, /taxes/new, but the routes to edit existing item are /tag/:tagName, /tax/:taxName. So we can apply the same to category (convert categories to category) flow by updating:

App/src/ROUTES.ts

Line 735 in 6760f96

route: 'settings/workspaces/:policyID/categories/:categoryName',

        route: 'settings/workspaces/:policyID/category/:categoryName',
        getRoute: (policyID: string, categoryName: string) => `settings/workspaces/${policyID}/category/${encodeURIComponent(categoryName)}` as const,

and

App/src/ROUTES.ts

Line 406 in 6760f96

route: 'settings/:policyID/categories/:categoryName',

        route: 'settings/:policyID/category/:categoryName',
        getRoute: (policyID: string, categoryName: string, backTo = '') => getUrlWithBackToParam(`settings/${policyID}/category/${encodeURIComponent(categoryName)}`, backTo),

• Optional: We can also update the other child routes such as:
  

  App/src/ROUTES.ts

  Line 418 in 6760f96

  route: 'settings/:policyID/categories/:categoryName/edit',

  
  

  App/src/ROUTES.ts

  Line 760 in 6760f96

  route: 'settings/workspaces/:policyID/categories/:categoryName/edit',

  
  

  App/src/ROUTES.ts

  Line 764 in 6760f96

  route: 'settings/workspaces/:policyID/categories/:categoryName/payroll-code',

  
  

  App/src/ROUTES.ts

  Line 768 in 6760f96

  route: 'settings/workspaces/:policyID/categories/:categoryName/gl-code',

  
  by using category instead of categories for more consistent.

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[dylanexpensify]

external