[HOLD for payment 2025-01-13] [$250] Categories - App back button returns to the same page after clicking back button on Import RHP

[IuliiaHerets]

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.66-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Email or phone of affected tester (no customers): applausetester+283911@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings.
3. Click app back button on the top left.
4. Note that one click on the back button returns to workspace list.
5. Go to workspace settings > Categories.
6. Click 3-dot menu > Import spreadsheet.
7. Click RHP back button to dismiss the RHP (important).
8. Click app back button on the top left.

Expected Result:

App will return to the workspace list.

Actual Result:

App remains on the same page. Only the second click on the app back button will return it to workspace list.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6674898_1732465314010.Screen_Recording_2024-11-25_at_00.17.58.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863620175086087006
• Upwork Job ID: 1863620175086087006
• Last Price Increase: 2024-12-02
• Automatic offers:
• dominictb | Reviewer | 105175491
• twilight2294 | Contributor | 105175493

Issue Owner

Current Issue Owner: @abekkala

[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.

[abzokhattab]

Proposal

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

App back button returns to the same page after clicking back button on Import RHP

What is the root cause of that problem?

• Clicking the "Import Spreadsheet" button navigates to the spreadsheet component and passes the backTo parameter as the current route (category page).
• This adds the current route (category page) to the navigation history again, leading to duplication when going back in the category page .. check the importSpreadSheet
• instead we shouldn't provide a fallback value if the isQuickSettingsFlow is false here

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

• we should set the back to param as an empty string or undefined if the isQuickSettingsFlow is false here so that it doesnt navigate to the categories page instead it just goes back

                backTo={isQuickSettingsFlow ? ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(policyID, backTo) : ''}

• same should be done in other places that use the ImportSpreedsheet to avoid the double navigation (here and here )
• this is simlier to the WorkspaceInvitePage where we just go back without providing a fallback route in this case.

POC

Screen.Recording.2024-11-24.at.22.22.05.mov

What alternative solutions did you explore? (Optional)

[huult]

Edited by proposal-police: This proposal was edited at 2024-11-25 05:27:47 UTC.

Proposal

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

App back button returns to the same page after clicking back button on Import RHP

What is the root cause of that problem?

When using onBackButtonPress={() => Navigation.goBack(backTo)}, passing backTo as a parameter can result in duplication in the navigation history. This might cause the back button to navigate to the same page on the first press, and only on the second press does it navigate further back as expected.

App/src/components/ImportSpreadsheet.tsx

Line 170 in 8d3f1db

onBackButtonPress={() => Navigation.navigate(backTo)}

• 

And this issue does not occur when we use onBackButtonPress={() => Navigation.navigate(backTo)}, which we used previously.

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

To resolve this issue without affecting the bug we fixed, we should use goBack to clear the history of /settings/workspaces/3D92F18DF6409DD6/categories, and then use Navigation.navigate(backTo). It would look something like this:

//src/components/ImportSpreadsheet.tsx#L170
      <HeaderWithBackButton
          title={translate('spreadsheet.importSpreadsheet')}
-          onBackButtonPress={() => Navigation.goBack(backTo)}
+          onBackButtonPress={() => {
+                Navigation.goBack();
+                Navigation.navigate(backTo);
+           }}
      />

Note: If we have the same case, we can reuse that solution.

POC

Screen.Recording.2024-11-25.at.10.13.39.mov

What alternative solutions did you explore? (Optional)

[twilight2294]

Proposal

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

App back button returns to the same page after clicking back button on Import RHP

What is the root cause of that problem?

We use goBack while navigating back from the import spreadsheet RHP and pass backTo as the param:

App/src/components/ImportSpreadsheet.tsx

Line 172 in f4f8da7

onBackButtonPress={() => Navigation.goBack(backTo)}

In import categories page, we pass the routes :

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

Lines 33 to 36 in 809ee8c

	<ImportSpreedsheet
	backTo={isQuickSettingsFlow ? ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(policyID, backTo) : ROUTES.WORKSPACE_CATEGORIES.getRoute(policyID)}
	goTo={isQuickSettingsFlow ? ROUTES.SETTINGS_CATEGORIES_IMPORTED.getRoute(policyID, backTo) : ROUTES.WORKSPACE_CATEGORIES_IMPORTED.getRoute(policyID)}
	/>

When the RHP is opened the categories page is added to the navigation history which leads to the duplication of the routes and we again fallback to the categories page.

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

This will happen on all the places where we use the import spreadsheet component.

To solve this issue at root we should use closeRHPFlow:

App/src/libs/Navigation/closeRHPFlow.ts

Line 10 in f4f8da7

export default function closeRHPFlow(navigationRef: NavigationContainerRef<RootStackParamList>) {

This helps to close the RHP flow fully, which will be helpful without depending on routes.

So here, we should update:

                        <HeaderWithBackButton
                            title={translate('spreadsheet.importSpreadsheet')}
                            onBackButtonPress={() => Navigation.closeRHPFlow()}
                        />

This will also help us get independent from the backTo params we should clean them up then.

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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