[$250] Three QA guides in mention suggestion list after onboarding with Manage my team's expenses

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.78-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #54147
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Sign up with a new Gmail account (random email without +)
3. On onboarding purpose, choose Manage my team's expenses
4. Select organization size
5. Select an accounting
6. Complete the onboarding
7. Go to workspace chat
8. Type @, then type q

Expected Result:

There will be only one QA guide contact.

Actual Result:

There are three QA guide contacts in the mentioned suggestion 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

Bug6702020_1735119636515.20241225_173701.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021873744853399955342
• Upwork Job ID: 1873744853399955342
• Last Price Increase: 2024-12-30
• Automatic offers:
• ikevin127 | Contributor | 105534432

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @MarioExpensify

[melvin-bot]

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

[ikevin127]

Not a regression of PR #54147 as the issue is present on production as well and the PR was only deployed on staging, which proves that the issue was present before the PR changes.

iOS: mWeb Chrome

Staging	Production
trim.4E5E900F-F770-4F9D-A147-225576EC115B.MOV	trim.A2BB6738-8153-446F-9245-F5F59FB34D3C.MOV

We simply did not consider removing the duplicated entries from the mentions list as that wasn't part of the other issue's scope nor mentioned anywhere in the other issue's testing steps / actual behaviour.

[ikevin127]

Proposal

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

Duplicated QA guide entries in mention suggestion list after onboarding with Manage my team's expenses.

What is the root cause of that problem?

Sometimes there's two QA guide entries in the member list after onboarding flow with Manage my team's expenses choice which seems to come from BE.

Real example of array with duplicated entries

[
    {
        "text": "[email protected]",
        "alternateText": "[email protected]",
        "keyForList": "14365522",
        "isSelected": false,
        "isDisabled": false,
        "accountID": 14365522,
        "login": "[email protected]",
        "icons": [
            {
                "source": "https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/default-avatar_11.png",
                "type": "avatar",
                "name": "[email protected]",
                "id": 14365522
            }
        ],
        "reportID": ""
    },
    {
        "text": "[email protected]",
        "alternateText": "[email protected]",
        "keyForList": "714749267",
        "isSelected": false,
        "isDisabled": false,
        "accountID": 714749267,
        "login": "[email protected]",
        "icons": [
            {
                "source": "ƒ SvgFallbackAvatar(props)",
                "type": "avatar",
                "name": "[email protected]",
                "id": 714749267
            }
        ],
        "reportID": ""
    }
]

Since we don't have bandwith to investigate this on BE side as stated in this comment, we should move forward with a FE fix which simply filters out duplicated values based on login key which is a unique identifier in our app.

Similar to issue #53579 where I proposed the fix and implemented it, the mention suggestion list does not have any logic to handle duplicates in this filtering block:

App/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx

Lines 283 to 306 in 918488a

	const filteredPersonalDetails = Object.values(personalDetailsParam ?? {}).filter((detail) => {
	// If we don't have user's primary login, that member is not known to the current user and hence we do not allow them to be mentioned
	if (!detail?.login || detail.isOptimisticPersonalDetail) {
	return false;
	}
	// We don't want to mention system emails like [email protected]
	if (CONST.RESTRICTED_EMAILS.includes(detail.login) || CONST.RESTRICTED_ACCOUNT_IDS.includes(detail.accountID)) {
	return false;
	}
	const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(detail);
	const displayText = displayName === formatPhoneNumber(detail.login) ? displayName : `${displayName} ${detail.login}`;
	if (searchValue && !displayText.toLowerCase().includes(searchValue.toLowerCase())) {
	return false;
	}
	// Given the mention is inserted by user, we don't want to show the mention options unless the
	// selection index changes. In that case, suggestionInsertionIndexRef.current will be null.
	// See https://github.com/Expensify/App/issues/38358 for more context
	if (suggestionInsertionIndexRef.current) {
	return false;
	}
	return true;
	}) as Array<PersonalDetails & {weight: number}>;

which is separate from OptionsListUtils.filterAndOrderOptions where we just implemented the fix for the other issue.

Note

Note for reviewer

In order for the issue to be reproduced on DEV and subsequently be able to verify and review whether the fix works, it is necessary that Use Staging Server is set to ON in Onyx storage before creating the new account (random email without +) because when we create the workspace via onboarding flow, if we're not on staging server we won't be assigned the [email protected] guide.

To do this we can add Onyx.merge(ONYXKEYS.USER, {shouldUseStagingServer: true}); in src/App.tsx at the top of the functional component here, and refreshing the app (browser refresh) before creating the new account - this would ensure you're using staging server and the issue will be reproduced 100% consistently - this will also help validate and review the proposed fix.

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

Same as the fix implemented in PR #54147, add the following logic to SuggestionMention component at the end of the filteredPersonalDetails block replacing return true like so:

const filteredPersonalDetails = Object.values(personalDetailsParam ?? {}).filter((detail, index, array) => { // <- access `index` and `array` of filter method
    // ... existing logic

    // on staging server, in specific cases (see issue) BE returns duplicated personalDetails entries with the same login which we need to filter out
    return array.findIndex((i) => i?.login === detail?.login) === index;
    // return true; <- replaced by the line above
}) as Array<PersonalDetails & {weight: number}>;

this will filter out duplicated entries that have the same login key value, returning true only for the unique entries.

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

We can add a test in compareUserInListTest.ts to ensure that dupicate login entries are filtered out, similar to the test added in PR #54147.

Result video (before / after)

MacOS: Chrome

Before	After
before.mov	after.mov

[dukenv0307]

Yah, I think it's not the regression from #54147, in this PR, we're trying to fix the duplicated item in as many places as possible. But there are too many places that use personalDetailsList, do you have any idea to fix them all at once? @ikevin127

[ikevin127]

do you have any idea to fix them all at once?

Not really, I think there are different places in the app where personal details are used and is not always centralized like we had for the recent PR in the utils file.

My proposal above suggests to fix the issue where it occurs, since the case of suggestions is isolated to 1 component.

[dukenv0307]

@bfitzexpensify I can help take this issue as C+ since I reviewed a similar issue like this before

[dukenv0307]

@bfitzexpensify Should we add External label on it?

[melvin-bot]

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

[bfitzexpensify]

Good catch - added

[melvin-bot]

Current assignee @dukenv0307 is eligible for the External assigner, not assigning anyone new.

[dukenv0307]

I tried to find other places that use personal details to see if this issue happened, but it seems like most of them are handled at #54147. I think we should go with @ikevin127's proposal to fix the issue in suggestion list.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @MarioExpensify, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[POPE001]

Proposal for Fixing Issue issue #54563

Problem

When typing @q in the workspace chat, multiple "QA Guide" contacts appear in the mention suggestion list instead of just one. This inconsistency creates confusion and negatively impacts the user experience.

Root Cause

1. Backend Issue:
   • The API responsible for fetching mentionable contacts is likely returning duplicate entries for the "QA Guide" contact.
2. Frontend Issue:
   • The frontend autocomplete logic does not filter duplicates before rendering the list, allowing duplicates from the API response to appear in the UI.

Proposed Solution

Backend Changes:

• Investigate the API endpoint responsible for providing the mentionable contacts.
• Ensure the API returns a unique list of entries by filtering duplicates at the source (e.g., using userID or email as a unique identifier).
• Modify the backend query logic to avoid redundant data being sent to the frontend.

Frontend Changes:

• Update the frontend autocomplete logic to filter duplicates from the API response.
• Introduce a utility function to remove duplicates from the suggestion list using a unique key (e.g., userID or email).
• Ensure the UI displays only one "QA Guide" in the suggestion list, regardless of API response quality.

Testing Scenarios

1. Duplicate Contacts in API Response:
   • Simulate an API response containing duplicate entries and confirm only unique entries appear in the mention suggestion list.
2. Empty API Response:
   • Ensure the frontend handles an empty list gracefully without errors.
3. Single QA Guide Contact:
   • Confirm that only one "QA Guide" contact is displayed when typing @q.
4. Cross-Platform Testing:
   • Validate the fix across all platforms (Web, iOS, Android, macOS, and Mobile Web).

Alternative Solutions

• Rely entirely on the backend to filter duplicates:
  • While this approach would work, adding frontend filtering ensures robustness and guards against future backend regressions.

Why This Solution?

• Resilience: Addressing the issue in both the backend and frontend ensures a reliable fix.
• Simplicity: The changes are straightforward and require minimal disruption to existing functionality.
• Future-Proofing: Automated tests will prevent regressions and ensure continued stability.

[melvin-bot]

📣 @POPE001! 📣
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>

[POPE001]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0184e9e5bfd976c718

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[MarioExpensify]

Nice, thanks @dukenv0307, let's move forward with @ikevin127 proposal!

[melvin-bot]

📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[ikevin127]

Will open the PR in a few hours, thanks!

[dukenv0307]

@ikevin127 any updates?

[ikevin127]

@dukenv0307 Sorry, this one fell off my radar, let me open the PR now since I already tested it and have the videos.

[dukenv0307]

@ikevin127 Thank you

[ikevin127]

@dukenv0307 PR #54805 is ready for review! 🚀 Thank you for the reminder!