[Due for payment 2025-06-17] [$250] Tags - Tags RHP opens after adding a tag on Tags page

[lanitochka17]

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.47-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: N/A
Email or phone of affected tester (no customers): sdnhdihishi@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Workspaces tab
3. Create a new workspace
4. Go to workspace settings > More features
5. Enable Tags
6. Go to Tags and add a tag
7. Click expense chat under "Submit your expenses below" on the same page
8. Click on the report header > Go to workspace
9. Now on Tags page, click Add tag
10. Enter tag name and click Save

Expected Result:

Tags RHP will not open after adding a tag on Tags page

Actual Result:

Tags RHP opens after adding a tag on Tags page

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6837098_1747750096289.20250520_220550.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021928240970520279101
• Upwork Job ID: 1928240970520279101
• Last Price Increase: 2025-05-30
• Automatic offers:
• FitseTLT | Contributor | 107554766

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot]

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

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-20 14:36:05 UTC.

Proposal

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

Tags - Tags RHP opens after adding a tag on Tags page

What is the root cause of that problem?

We navigate to tag root page if it is quick action flow

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

Line 64 in 37223c6

Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo) : undefined);

to determine it is quick setting flow we use the backTo

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

Line 36 in 37223c6

const isQuickSettingsFlow = !!backTo;

This backTo comes because we wrongly assumed quick setting flow in WorkspaceTagsPage

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

Line 111 in 37223c6

const isQuickSettingsFlow = !!backTo;

This is because when we implemented quick setting flow it was the only flow that provided backTo param but now we also provide a backTo when we navigate to the workspace from the details page

App/src/pages/ReportDetailsPage.tsx

Line 586 in 37223c6

Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(report?.policyID, Navigation.getActiveRoute()));

so it wrongly assumes it is isQuickSettingsFlow

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

Quick Settings Flow is a tag/category setting flow where a user will have if all tags/categories become unavailable(either deleted or disabled) while in IOUStepTag or IOUStepCategory (expense creation flow).
Initially, when we implemented isQuickSettingsFlow, it used to be the only case we provided a backTo to the workspace pages but now it is not. We use different screen for isQuickSettingsFlow in WorkspaceTagsPage we can determine isQuickSettingsFlow by checking if route.name is equal to SCREENS.SETTINGS_TAGS.SETTINGS_TAGS_ROOT instead of using backTo.

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

Line 111 in 37223c6

const isQuickSettingsFlow = !!backTo;

    const isQuickSettingsFlow = route?.name === SCREENS.SETTINGS_TAGS.SETTINGS_TAGS_ROOT;

We need to apply similar update for category pages where we use quick settings flow.

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

N / A

What alternative solutions did you explore? (Optional)

Option 1.
So we should provide a proper isQuickSettingsFlow route param for SETTINGS_TAGS_ROOT when we navigate in quick settings flow

App/src/ROUTES.ts

Lines 708 to 714 in 37223c6

	SETTINGS_TAGS_ROOT: {
	route: 'settings/:policyID/tags',
	getRoute: (policyID: string | undefined, backTo = '') => {
	if (!policyID) {
	Log.warn('Invalid policyID while building route SETTINGS_TAGS_ROOT');
	}
	return getUrlWithBackToParam(`settings/${policyID}/tags`, backTo);

 SETTINGS_TAGS_ROOT: {
        route: 'settings/:policyID/tags',
        getRoute: (policyID: string | undefined, backTo = '', isQuickSettingsFlow = false) => {
            if (!policyID) {
                Log.warn('Invalid policyID while building route SETTINGS_TAGS_ROOT');
            }

            const queryParam = isQuickSettingsFlow ? `?isQuickSettingsFlow=${isQuickSettingsFlow}` : '';
            return getUrlWithBackToParam(`settings/${policyID}/tags${queryParam}`, backTo);
        },

App/src/pages/iou/request/step/IOURequestStepTag.tsx

Lines 123 to 126 in 37223c6

	ROUTES.SETTINGS_TAGS_ROOT.getRoute(
	policy?.id,
	ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(action, iouType, tagListIndex, transactionID, report?.reportID, backTo, reportActionID),
	),

                                        ROUTES.SETTINGS_TAGS_ROOT.getRoute(
                                            policy?.id,
                                            ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(action, iouType, tagListIndex, transactionID, report?.reportID, backTo, reportActionID),
                                            true,

                                        ),

and we should determine isQuickSettingsFlow via the param

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

Line 111 in 37223c6

const isQuickSettingsFlow = !!backTo;

    const isQuickSettingsFlow = route.params.isQuickSettingsFlow;

So now from WorkspaceTagsPage in all instances we are navigating in non quick settings flow we don't provide backTo so in those pages having backTo will properly determine that we are in quick setting flow. for instance here.
But if we want to make it more safe for the future we can indeed pass this isQuickSettingsFlow param into those routes so that in case those pages are passed backTo we will not wrongly interpret it as quick setting flow. This pages include WorkspaceCreateTagPage, EditTagPage, ImportedTagsPage etc.

We then need to provide isQuickSettingsFlow in all places we use SETTINGS_TAGS_ROOT with quick settings like here

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

Line 83 in 37223c6

onBackButtonPress={() => Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo) : undefined)}

                    onBackButtonPress={() => Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo, true) : undefined)}

Option 2. We are now using isQuickSettingsFlow condition and navigating between pages by passing a specific route according to that condition but we could easily pass the current active route as backTo when navigating to pages and without using isQuickSettingsFlow condition when navigating back we can navigate to the backTo. To demonstrate this on WorkspaceTagsPage > WorkspaceCreateTagPage it would look like

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

Line 266 in 37223c6

Navigation.navigate(isQuickSettingsFlow ? ROUTES.SETTINGS_TAG_CREATE.getRoute(policyID, backTo) : ROUTES.WORKSPACE_TAG_CREATE.getRoute(policyID));

 Navigation.navigate(ROUTES.SETTINGS_TAG_CREATE.getRoute(policyID, Navigation.getActiveRoute()));

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

Line 64 in 37223c6

Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo) : undefined);

            Navigation.goBack(backTo);

[mallenexpensify]

Actual Result:

• Tags RHP opens after adding a tag on Tags page

@FitseTLT is there any downside to this? From watching the vid it seems fine (haven't dug in yet though)

[FitseTLT]

Actual Result:

• Tags RHP opens after adding a tag on Tags page

@FitseTLT is there any downside to this? From watching the vid it seems fine (haven't dug in yet though)

@mallenexpensify By the way this screen is a different RHP screen made specifically for quick action flow. Quick action flow is when a user is on tags page and another admin disabled or deleted all tags, we give them an option to edit tags without exiting the expense creation flow. And in that flow we use this RHP to show the list of tags after they create a new tag but now the problem created by new changes made our logic that differentiates between this quck action flow and the normal flow fail. Its a legit bug that needs to be fixed.

[melvin-bot]

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

[melvin-bot]

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