[$500] Web - Chat - "Fire" is missing from the suggested emojis

[kbecciv]

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: 1.4.31.1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4237630&group_by=cases:section_id&group_id=292106&group_order=asc
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Send any text in a chat
2. Hover over the text

Expected Result:

"Fire" emoji should be visible.

Actual Result:

"Fire" is missing from the suggested emojis. It's still available if you right click a message.

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6355175_1706219360659.bandicam_2024-01-25_20-38-18-598.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bb30dd161d0ef71b
• Upwork Job ID: 1750641036398268416
• Last Price Increase: 2024-01-25

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-vsb
CC @quinthar

[Nodebrute]

Proposal

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

The fire emoji is missing in mini context menu

What is the root cause of that problem?

We are slicing the fire emoji here

App/src/components/Reactions/MiniQuickEmojiReactions.tsx

Line 65 in 8cc80e6

{CONST.QUICK_REACTIONS.slice(0, 3).map((emoji: Emoji) => (

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

Change 3 to 4 to add fire emoji

App/src/components/Reactions/MiniQuickEmojiReactions.tsx

Line 65 in 8cc80e6

{CONST.QUICK_REACTIONS.slice(0, 3).map((emoji: Emoji) => (

CONST.QUICK_REACTIONS.slice(0, 4)

What alternative solutions did you explore? (Optional)

If we don't want to add fire emoji then we can remove it from another menu too for consistency

[ZhenjaHorbach]

Proposal

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

Web - Chat - "Fire" is missing from the suggested emojis

What is the root cause of that problem?

Actually, judging by this ticket, it looks as expected
#34031
Here we have updated the styles and we have only 3 emojis on the designs
So after this ticket we have a mismatch between 2 places

But decision about this ticket depends on the design team

We have 2 places where we use QUICK_REACTIONS

App/src/components/Reactions/MiniQuickEmojiReactions.tsx

Line 65 in ac94dc5

{CONST.QUICK_REACTIONS.slice(0, 3).map((emoji: Emoji) => (

App/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.tsx

Line 28 in ac94dc5

{CONST.QUICK_REACTIONS.map((emoji: Emoji) => (

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

So to fix this issue we have 2 ways

1. Return 4 emojis

For this we need delete slice like in second place

App/src/components/Reactions/MiniQuickEmojiReactions.tsx

Line 65 in ac94dc5

{CONST.QUICK_REACTIONS.slice(0, 3).map((emoji: Emoji) => (

As a result code will look like :

{CONST.QUICK_REACTIONS.map((emoji: Emoji) => (

2. Make 3 emojis in all places

For this we need delete slice like in second place

App/src/components/Reactions/MiniQuickEmojiReactions.tsx

Line 65 in ac94dc5

{CONST.QUICK_REACTIONS.slice(0, 3).map((emoji: Emoji) => (

And delete fourth emoji from QUICK_REACTIONS

App/src/CONST.ts

Lines 1666 to 1669 in ac94dc5

	{
	name: 'fire',
	code: '🔥',
	},

What alternative solutions did you explore? (Optional)

NA

[laurenreidexpensify]

cc @Expensify/design

[shawnborton]

Hmm yeah, cc @dubielzyk-expensify @JmillsExpensify in case this was related to some of the mini menu improvements that were made recently. Was it intentional to remove the fire emoji?

[mananjadhav]

And also what would be the expected behavior? Do we want to maintain consistency? or do nothing?

[dannymcclain]

Hmm yeah, cc @dubielzyk-expensify @JmillsExpensify in case this was related to some of the mini menu improvements that were made recently. Was it intentional to remove the fire emoji?

I don't think this is a bug. I think this is an intended update as part of the comment action menu updates we recently rolled out. Here's a mock from the Figma file/design doc:

[dubielzyk-expensify]

Like Danny said, yep it's part of us reducing the amount of cognetive load and therefor less items. One had to go sadly. I think at a later stage we'll allow to chose your favorite 3 like Slack does or just put the most commonly used

[mananjadhav]

@laurenreidexpensify Based on the comments above, best we close this one out?