[Exploratory] Tags - Import successful modal reappears after dismissing it

[applause-bot]

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.3.80-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-32728/folder/13176676/41237318/1434928120?sort=-identifier
Email or phone of affected tester (no customers): sdsdjoijdoisnjodis@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Enable Tags in workspace settings.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Tags.
3. Click Import.
4. Click Multi-level tags.
5. Upgrade workspace if needed.
6. Upload multi-level tags file.
7. Click Next.
8. Click Import.
9. Click Got it.
10. Repeat Step 2 to 9 with a new workspace if Import successful modal does not reappear.

Expected Result:

Import successful modal will not reappear after dismissing it.

Actual Result:

Import successful modal reappears after dismissing it.
When user dismisses the modal for the second time, Import spreadsheet RHP opens.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Independent.-.Multi.Level.tags.csv

Bug7161017_1779492546106.1.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7161017

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/9ba386c4a9650e979222e838891d36f8506debfbeeb78360dd6b1ac4f416650f

[spandanareddib]

I am a student contributor investigating this issue. I am currently looking into the state management of the 'Import successful' modal to identify why it's re-triggering after dismissal. I'll post a formal proposal once I have identified the root cause.

[melvin-bot]

📣 @spandanareddib! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[spandanareddib]

Contributor details
Expensify account email: spandanareddib@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~014e40b64c400b2da7

[spandanareddib]

---

Proposal

Problem:
When a user successfully imports tags, the "Import successful" modal appears. After dismissing the modal, if the user navigates away and then back, or refreshes the page, the modal reappears unexpectedly.

Root Cause:
The logic for displaying the success/failure modal depends on the shouldFinalModalBeOpened property within the ONYXKEYS.IMPORTED_SPREADSHEET object.

When an import is successful, the updateImportSpreadsheetData function (located in src/libs/actions/Policy/Tag.ts) sets shouldFinalModalBeOpened to true.

However, in src/pages/workspace/tags/ImportedTagsPage.tsx, the closeImportPageAndModal function currently only handles local state and navigation:

const closeImportPageAndModal = () => {
    setIsClosing(true);
    setIsImportingTags(false);
    Navigation.goBack(...);
};

It does not call the action required to reset the global Onyx state. Since the state remains true in Onyx, the modal re-triggers whenever the page is re-focused or the component re-mounts.

Solution:
We need to ensure the global import state is reset when the modal is dismissed. I propose updating the closeImportPageAndModal function in ImportedTagsPage.tsx (as well as other similar pages such as ImportedCategoriesPage.tsx and ImportedMembersPage.tsx) to call ImportSpreadsheet.closeImportPage().

This helper function already exists in src/libs/actions/ImportSpreadsheet.ts and correctly resets shouldFinalModalBeOpened to false.

Updated Code Example:

const closeImportPageAndModal = () => {
    setIsClosing(true);
    setIsImportingTags(false);
    
    // Reset the global Onyx state to prevent the modal from reappearing
    ImportSpreadsheet.closeImportPage(); 
    
    Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo) : ROUTES.WORKSPACE_TAGS.getRoute(policyID));
};

---