[HOLD for payment 2024-11-11] [$250] Andorid & iOS - Emoji is cut off when the message has user mention and emoji

[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.45-2
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+pso@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Launch New Expensify app.
2. Open a new chat.
3. Send a message containing user mention and an emoji.
4. Go back to LHN.
5. Open the same chat.

Expected Result:

Emoji will not be cut off.

Actual Result:

Emoji is cut off.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6626262_1728230937035.ScreenRecording_10-07-2024_00-00-30_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021843828428961473972
• Upwork Job ID: 1843828428961473972
• Last Price Increase: 2024-10-16
• Automatic offers:
• alitoshmatov | Reviewer | 104555711

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

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

[IuliiaHerets]

@anmurali FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[bernhardoj]

Proposal

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

The emoji is cut off when sending a mention with an emoji.

What is the root cause of that problem?

The message is detected as only containing emoji, even though there is a mention, which causes the emoji to be large in size.

App/src/pages/home/report/comment/TextCommentFragment.tsx

Line 59 in 6d8e739

const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text ?? '');

App/src/pages/home/report/comment/TextCommentFragment.tsx

Line 66 in 6d8e739

htmlContent = Str.replaceAll(htmlContent, '<emoji>', '<emoji islarge>');

When we reopen the report screen, the BE will return the message text without the mention, for example, if we send @example@gmail.com 👍,
text: 👍
html: <mention-user accountID='xxx' /> 👍

This happens to any message. The mention HTML is never included in the text.

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

Instead of directly accessing the text from the message, we can take the html and convert it to text.

App/src/pages/home/report/comment/TextCommentFragment.tsx

Line 48 in 6d8e739

const {html = '', text} = fragment ?? {};

const {html = ''} = fragment ?? {};
const text = getTextFromHtml(html)

OR

When building the fragments array, tap the action message here to change the text to be converted from its html, but this adds another loops to map the array.

App/src/libs/ReportActionsUtils.ts

Lines 1372 to 1376 in 6d8e739

	const actionMessage = action.previousMessage ?? action.message;
	if (Array.isArray(actionMessage)) {
	return actionMessage.filter((item): item is Message => !!item);
	}
	return actionMessage ? [actionMessage] : [];

if (Array.isArray(actionMessage)) {
    return actionMessage.filter((item): item is Message => !!item).map((item) => ({...item, text: getTextFromHtml(item.html)}));
}
return actionMessage ? [{...actionMessage, text: getTextFromHtml(actionMessage.html)}] : [];

which aligns with the deprecation plan here

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@anmurali, @alitoshmatov Eep! 4 days overdue now. Issues have feelings too...

[anmurali]

@alitoshmatov can you please review @bernhardoj proposal #50306 (comment)

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@anmurali @alitoshmatov this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@anmurali, @alitoshmatov Eep! 4 days overdue now. Issues have feelings too...

[alitoshmatov]

@bernhardoj Thank you for your proposal. Your RCA is correct and solution is working. I think your initial solution is better one.

We can go with @bernhardoj 's proposal here

C+ reviewed 🎀 👀 🎀

[melvin-bot]

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

[melvin-bot]

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

Offer link
Upwork job

[bernhardoj]

PR is ready

cc: @alitoshmatov

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.56-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix emoji is cut off when the message has emoji and mention only #51380

If no regressions arise, payment will be issued on 2024-11-11. 🎊

For reference, here are some details about the assignees on this issue:

• @bernhardoj requires payment through NewDot Manual Requests
• @alitoshmatov requires payment automatic offer (Reviewer)

[melvin-bot]

@alitoshmatov @anmurali The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[alitoshmatov]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/25524/files#r1835769877

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: No need

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

  No test needed

[anmurali]

Payment Summary

• @alitoshmatov approved $250 via Upwork
• @bernhardoj approved $250 via New Dot

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj