[WAITING FOR PAYMENT MAY 29] [$250] Categories & Tags - App closes RHP instead of returning to previous RHP after saving name

[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.68-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: Applause Internal Team
Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings.
3. Go to Taxes.
4. Click on the tax rate > Name.
5. Edit the name and save it.
6. Note that RHP still opens after saving the name. The same behavior is seen with distance rates.
7. Go to Categories.
8. Click on the category > Category name.
9. Edit the category name and save it.
10. Repeat Step 7-9 with tags.

Expected Result:

App will return to previous RHP (with toggle, three-dot menu and name) after saving the category name, which is the behavior with taxes and distance rates.

Actual Result:

RHP closes after saving category and tag name.

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

Bug6466672_1714486645846.20240430_221313.mp4

View all open jobs on GitHub

[melvin-bot]

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

[m-natarajan]

@abekkala 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.

[m-natarajan]

We think this bug might be related to #wave-collect - Release 1

[neonbhai]

Proposal

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

App closes RHP instead of returning to previous RHP after saving name

What is the root cause of that problem?

We dismiss the RHP explicitly when editing Category in CategoryForm

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

Line 63 in 35772b2

Navigation.dismissModal();

This is called after submitting the form.

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

We should call Navigation.goBack() instead of Navigation.dismissModal() here:

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

Line 63 in 35772b2

Navigation.dismissModal();

Alternatively:

We can remove Navigation.dismissModal() from CategoryForm and handle the navigation in EditCategoryPage:
add here:

Navigation.goBack(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(policyID, categoryName));

[Nodebrute]

Proposal

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

Categories & Tags - App closes RHP instead of returning to previous RHP after saving name

What is the root cause of that problem?

We are dismissing modal instead of goBack

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

Line 63 in 35772b2

Navigation.dismissModal();

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

Remove Navigation.dismissModal()

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

Line 63 in 35772b2

Navigation.dismissModal();

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

Lines 53 to 55 in 05793d1

	if (currentCategoryName !== newCategoryName) {
	Policy.renamePolicyCategory(route.params.policyID, {oldName: currentCategoryName, newName: values.categoryName});
	}

In the code block above, use Navigation.goBack with true as the second argument. If we just use goBack(), the URL will change due to the name change, causing the user to be redirected to a 'not found' page. We can do something like this

Navigation.goBack(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, newCategoryName),true);

Optional
Instead of adding navigation logic in EditCategoryPage.tsx we can add it in the place of Navigation.dismissModal().

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

Line 63 in 35772b2

Navigation.dismissModal();

We should do the same thing for tags

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

Lines 56 to 67 in 35772b2

	const editTag = useCallback(
	(values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAG_FORM>) => {
	const tagName = values.tagName.trim();
	// Do not call the API if the edited tag name is the same as the current tag name
	if (currentTagName !== tagName) {
	Policy.renamePolicyTag(route.params.policyID, {oldName: currentTagName, newName: values.tagName.trim()});
	}
	Keyboard.dismiss();
	Navigation.dismissModal();
	},
	[route.params.policyID, currentTagName],
	);

Note

We should use new category name or new tag name instead of categoryName/currentTagName

What alternative solutions did you explore?

We can use Navigation.navigate here.

[melvin-bot]

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