[HOLD for payment 2024-12-05] [$250] Chat-Hidden is shown briefly on sending @new expensifail user

[izarutskaya]

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: V9. 0.51-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: "Hidden" is shown in Hybrid app, it doesn't disappear
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Open self DM
3. Enter @ and a new non existing expensifail account eg: @applausetester+1nonew@applause.expensifail.com
4. Send the message

Expected Result:

Hidden must not be shown briefly on sending @new expensifail user.

Actual Result:

Hidden is shown briefly on sending @new expensifail user.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Bug6640933_1729511637519.Screenrecorder-2024-10-21-17-10-22-360_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021849163258326584198
• Upwork Job ID: 1849163258326584198
• Last Price Increase: 2024-10-23

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

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

[bernhardoj]

Proposal

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

Hidden is shown briefly when mentioning a user that we never chat before.

What is the root cause of that problem?

When we send a mention a receive the BE response, it will merge a new data for the mention accountID and the personal details. If the accountID is available, we look for it in the personal details list.

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

Lines 59 to 64 in 179d0f0

	if (!isEmpty(htmlAttribAccountID)) {
	const user = personalDetails[htmlAttribAccountID];
	accountID = parseInt(htmlAttribAccountID, 10);
	mentionDisplayText = LocalePhoneNumber.formatPhoneNumber(user?.login ?? '') || PersonalDetailsUtils.getDisplayNameOrDefault(user);
	mentionDisplayText = getShortMentionIfFound(mentionDisplayText, htmlAttributeAccountID, user?.login ?? '') ?? '';
	navigationRoute = ROUTES.PROFILE.getRoute(htmlAttribAccountID, Navigation.getReportRHPActiveRoute());

However, the personal details list from the hook here is not updated yet.

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

Line 34 in 179d0f0

const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;

So, user will be undefined and because of that, the displayName is undefined too and we fallback to Hidden briefly.

App/src/libs/PersonalDetailsUtils.ts

Line 78 in 179d0f0

return defaultValue || (shouldFallbackToHidden ? hiddenTranslation : '');

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

We can check if both accountID and the personal details is available before using it.

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

Lines 59 to 60 in 179d0f0

	if (!isEmpty(htmlAttribAccountID)) {
	const user = personalDetails[htmlAttribAccountID];

if (!isEmpty(htmlAttribAccountID) && personalDetails[htmlAttribAccountID]) {
    const user = personalDetails[htmlAttribAccountID];

OR

We can use useOnyx hook instead which from my testing, updated the same time as the mention (action) accountID.

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

Line 34 in 179d0f0

const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;

OR do both

[melvin-bot]

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

[melvin-bot]

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

[rushatgabhane]

@bernhardoj's proposal LGTM
we should do both, right?

🎀 👀 🎀