[Due for payment 2025-03-21] [$250] Categories - Not here page opens after renaming category twice

[mitarachim]

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.1.5-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+sj9032@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Workspace Settings

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Categories.
3. Click on any category.
4. Click Name.
5. Edit the name and save it.
6. Click Name.
7. Edit the name and save it.

Expected Result:

Not here page will not appear after renaming category twice.

Actual Result:

Not here page opens after renaming category twice.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6753490_1740474406690.20250225_170425.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021897038247893599043
• Upwork Job ID: 1897038247893599043
• Last Price Increase: 2025-03-04
• Automatic offers:
• nkdengineer | Contributor | 106389401

Issue Owner

Current Issue Owner: @sonialiap

[melvin-bot]

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

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-25 10:02:48 UTC.

Proposal

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

Categories - Not here page opens after renaming category twice

What is the root cause of that problem?

When rename Category, we navigate back to the previous category name. However, since the category name has been changed, we end up seeing the 'Not Here' page.

App/src/pages/workspace/categories/EditCategoryPage.tsx

Lines 54 to 61 in e9359f1

	Navigation.setNavigationActionToMicrotaskQueue(() => {
	Navigation.goBack(
	isQuickSettingsFlow
	? ROUTES.SETTINGS_CATEGORY_SETTINGS.getRoute(route.params.policyID, route.params.categoryName, backTo)
	: ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, route.params.categoryName),
	{compareParams: false},
	);
	});

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

We can update this code to go back with the newCategoryName parameter.

App/src/pages/workspace/categories/EditCategoryPage.tsx

Lines 54 to 61 in e9359f1

	Navigation.setNavigationActionToMicrotaskQueue(() => {
	Navigation.goBack(
	isQuickSettingsFlow
	? ROUTES.SETTINGS_CATEGORY_SETTINGS.getRoute(route.params.policyID, route.params.categoryName, backTo)
	: ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, route.params.categoryName),
	{compareParams: false},
	);
	});

            Navigation.setNavigationActionToMicrotaskQueue(() => {
                Navigation.goBack(
                    isQuickSettingsFlow
                        ? ROUTES.SETTINGS_CATEGORY_SETTINGS.getRoute(route.params.policyID, newCategoryName, backTo)
                        : ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, newCategoryName),
                    {compareParams: false},
                );
            });

Or we can go back with newCategoryName if currentCategoryName !== newCategoryName true, otherwise, go back with route.params.categoryName

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A, UI bug

What alternative solutions did you explore? (Optional)

N/A

[daledah]

Proposal

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

Not here page opens after renaming category twice.

What is the root cause of that problem?

We're navigating to route.params.categoryName, and it's outdated since we already updated to the new one

App/src/pages/workspace/categories/EditCategoryPage.tsx

Lines 54 to 60 in e9359f1

	Navigation.setNavigationActionToMicrotaskQueue(() => {
	Navigation.goBack(
	isQuickSettingsFlow
	? ROUTES.SETTINGS_CATEGORY_SETTINGS.getRoute(route.params.policyID, route.params.categoryName, backTo)
	: ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, route.params.categoryName),
	{compareParams: false},
	);

so we can see the not found page

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

We shouldn't use the name since it can be changed, and causes the url change. Even when we use the new name we can face with the following issue

Screen.Recording.2025-02-25.at.17.01.59.mov

after going back, the old name will be shown

I suggest to use the unique field like externalID, so when users open the category detail page, the url should be settings/workspaces/ws_id/category/category_id, we already did the same way with tax

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

NA UI bug

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-25 12:07:02 UTC.

Proposal

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

Not here page opens after renaming category twice.

What is the root cause of that problem?

After the first time we edit the category from A to B, the previousCategoryName is updated to A. After the second time, we update the value from B to C, previousCategoryName is updated to B in optimistic data. And in successData we update the category with policyCategoryToUpdate that overrides the previousCategoryName to A

App/src/libs/actions/Policy/Category.ts

Lines 624 to 653 in 873b931

	...policyCategoryToUpdate,
	name: policyCategory.newName,
	errors: null,
	pendingAction: null,
	pendingFields: {
	...(policyCategoryToUpdate?.pendingFields ?? {}),
	name: null,
	},
	},
	},
	},
	],
	failureData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
	value: {
	[policyCategory.newName]: null,
	[policyCategory.oldName]: {
	...policyCategoryToUpdate,
	name: policyCategory.oldName,
	errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('workspace.categories.updateFailureMessage'),
	pendingAction: null,
	},
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {

Although we already have the logic to update the param here, it takes time to update, and if the success data is updated before it's complete, the not found page appears.

App/src/pages/workspace/categories/CategorySettingsPage.tsx

Lines 54 to 70 in ad3005d

	const policyCategory = policyCategories?.[categoryName] ?? Object.values(policyCategories ?? {}).find((category) => category.previousCategoryName === categoryName);
	const policyCurrency = policy?.outputCurrency ?? CONST.CURRENCY.USD;
	const policyCategoryExpenseLimitType = policyCategory?.expenseLimitType ?? CONST.POLICY.EXPENSE_LIMIT_TYPES.EXPENSE;
	const areCommentsRequired = policyCategory?.areCommentsRequired ?? false;
	const isQuickSettingsFlow = !!backTo;
	const navigateBack = () => {
	Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(policyID, backTo) : undefined);
	};
	useEffect(() => {
	if (policyCategory?.name === categoryName || !policyCategory) {
	return;
	}
	navigation.setParams({categoryName: policyCategory?.name});
	}, [categoryName, navigation, policyCategory]);

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

We've updated the policyCategoryToUpdate in optimistic data so we can remove it in successData here

App/src/libs/actions/Policy/Category.ts

Lines 624 to 653 in 873b931

	...policyCategoryToUpdate,
	name: policyCategory.newName,
	errors: null,
	pendingAction: null,
	pendingFields: {
	...(policyCategoryToUpdate?.pendingFields ?? {}),
	name: null,
	},
	},
	},
	},
	],
	failureData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
	value: {
	[policyCategory.newName]: null,
	[policyCategory.oldName]: {
	...policyCategoryToUpdate,
	name: policyCategory.oldName,
	errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('workspace.categories.updateFailureMessage'),
	pendingAction: null,
	},
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {

Or we need to update previousCategoryName correctly in successData

previousCategoryName: policyCategory.oldName,

App/src/libs/actions/Policy/Category.ts

Lines 624 to 653 in 873b931

	...policyCategoryToUpdate,
	name: policyCategory.newName,
	errors: null,
	pendingAction: null,
	pendingFields: {
	...(policyCategoryToUpdate?.pendingFields ?? {}),
	name: null,
	},
	},
	},
	},
	],
	failureData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
	value: {
	[policyCategory.newName]: null,
	[policyCategory.oldName]: {
	...policyCategoryToUpdate,
	name: policyCategory.oldName,
	errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('workspace.categories.updateFailureMessage'),
	pendingAction: null,
	},
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {

We need to check if other flows like update tag, tax, ... has the same problem

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Create a test case by calling renamePolicyCategory two times and verify that previousCategoryName is updated correctly.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

@sonialiap Still overdue 6 days?! Let's take care of this!

[melvin-bot]

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

[melvin-bot]

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