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

@jayeshmangwani

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:

Open the app and go to Settings -> Workspaces.
Select any workspace and navigate to Categories.
Click Add Category and create a new category with the name "new".
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?

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

@dylanexpensify

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.

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.

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)

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

@shubham1206agra

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

external

@dominictb

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

Merged!

@dylanexpensify

@dylanexpensify PR deployed to production on Sep 20. Should be ready for payment now. Please add [HOLD for payment Sep 28].

@blimpich

This issue has not been updated in over 15 days. @blimpich, @shubham1206agra, @dylanexpensify, @dominictb 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!

@dominictb

Payment summary:

Contributor: @dominictb $250 via Upwork
Contributor+: @shubham1206agra $250 via Upwork

Please apply/request!

@shubham1206agra

@shubham1206agra please accept offer 🙇‍♂️

@dominictb payment sent!

@dylanexpensify

@dylanexpensify Accepted offer

Done!

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

6 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Sep 4, 2024

ChavdaSachin commented on Sep 5, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

dominictb commented on Sep 5, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot commented on Sep 10, 2024

melvin-bot commented on Sep 10, 2024

dylanexpensify commented on Sep 10, 2024

6 remaining items

melvin-bot commented on Sep 10, 2024

dylanexpensify commented on Sep 18, 2024

dominictb commented on Sep 30, 2024

melvin-bot commented on Oct 4, 2024

dylanexpensify commented on Oct 7, 2024

dylanexpensify commented on Oct 7, 2024

shubham1206agra commented on Oct 7, 2024

dylanexpensify commented on Oct 8, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions