[HOLD for payment 2024-01-26] [$600] CRITICAL: Updates to Comment Action menu

[quinthar]

Problem

As we increasingly build out our chat-focused features, the amount of available comment actions has increased pretty dramatically from a couple to ten and counting. It's pretty daunting to say the least. The comment action menu has become bloated and inconsistent over time.

Solution

• Rename Subscribe to thread to Join thread

• Rename Unsubscribe to thread to Leave thread

• Rework the actions to only show 3 emojis, emoji reaction button, two actions, then overflow icon:
  

• Change Reply in thread icon to new comment_bubble_add icon

• Change Mark as unread icon to new comment_bubble_unread icon

• Adjust to new sizing removing the spacing between icons and sizing of them (see details below):
  

• Implement overflow menu for actions Add Expensify eslint #3 and beyond

Details about sizing

• Button still 28x28px
• Icons should be 18x18px
• Emoji size should be 18x18px (or visually so)
• Spacing between buttons should be 0px
• Height of menu should be 36px
• Menu padding should remain 4px

That should give us:

Realtime discussion in Slack here: https://expensify.slack.com/archives/C0671JDRKQW/p1703546061230429?thread_ts=1703546004.757449&cid=C0671JDRKQW

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017316d0730ce02286
• Upwork Job ID: 1742747999864901632
• Last Price Increase: 2024-01-26
• Automatic offers:
• esh-g | Contributor | 28080976

Issue Owner

Current Issue Owner: @muttmuure

[melvin-bot]

Triggered auto assignment to @NikkiWines (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[quinthar]

I don't think @NikkiWines is needed; @dubielzyk-expensify can you update the original post of this to outline how you want to update the hover menu, and then tag with external + task + daily to get an external contributor assigned to it?

[esh-g]

Proposal

Please re-state the problem

Rename "Subscribe" in action menu to "Join"

What is the root cause?

N/A (New feature)

What changes should be made to fix this?

The solution suggests three options. Here are possible implementations for all of them:

1. Remove the 'subscribe to thread' and 'unsubscribe to thread' options entirely by removing them from the ContextMenuActions here:
   

   App/src/pages/home/report/ContextMenu/ContextMenuActions.js

   Lines 152 to 155 in 2fe1174

   	{
   	isAnonymousAction: false,
   	textTranslateKey: 'reportActionContextMenu.subscribeToThread',
   	icon: Expensicons.Bell,

   
   

   App/src/pages/home/report/ContextMenu/ContextMenuActions.js

   Lines 190 to 193 in 2fe1174

   	{
   	isAnonymousAction: false,
   	textTranslateKey: 'reportActionContextMenu.unsubscribeFromThread',
   	icon: Expensicons.BellSlash,

2. Re-name the action to 'join thread'. This can be done by adding translation keys for reportActionContextMenu.joinThread and reportActionContextMenu.leaveThread and then using them in the places mentioned in point 1. We can also change the icon from Expensicons.Bell to Expensicons.ChatBubbles to mirror the room behaviour even more consistently.

3. Re-name the action to 'follow thread'. This is similar to point 2 and can be done with the same process.

Additional change proposals

Option 1

The language slack uses is 'Get notified about new replies' which is very clear cut but very lengthy unfortunately for the Expensify app.

Option 2
What can be done also is use the getDescription property on the context menu action to have a description that explains the property so that there is no confusion for the user.

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 187 to 189 in 2fe1174

	},
	getDescription: () => {},
	},

getDescription: () => Localize.translateLocal('reportActionContextMenu.joinThreadDescription'),

Or after changing the icon

For leaving thread

Additional overflow menu changes

1. Reduce the overflow menu emojis to 3 by slicing CONST.QUICK_REACTIONS to 3 elements in MiniQuickEmojiReactions.js
   

   App/src/components/Reactions/MiniQuickEmojiReactions.js

   Line 78 in dc3e19b

   {_.map(CONST.QUICK_REACTIONS, (emoji) => (

2. Modify the Icon for add emoji in MiniQuickEmojiReactions to be 18px:
   

   App/src/components/Reactions/MiniQuickEmojiReactions.js

   Line 106 in dc3e19b

   <Icon

3. We should pass the props.isMini prop to ContextMenuItem.shouldShow method so that we can control which actions to show for the mini menu
   

   App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js

   Line 66 in dc3e19b

   contextAction.shouldShow(

4. Add another context menu action (only for mini overflow menu) that calls the showContextMenu method in its onPress property and has it's icon as the Expensicons.ThreeDots.

5. Modify the style of emoji to be 18px here:
   

   App/src/styles/index.ts

   Line 3323 in 9629316

   fontSize: 15,

6. Add height: 36 and center using flex for MiniWrapperStyle here:
   

   App/src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts

   Line 14 in 9629316

   {

7. Modify the reportActionContextMenuMiniButton to use flex centring and fix height and width as 28px
   

   App/src/styles/index.ts

   Line 2285 in 9629316

   reportActionContextMenuMiniButton: {

8. Modify ContextMenuItem Icon to be 18px by passing height and width here:
   

   App/src/components/ContextMenuItem.js

   Line 86 in 9629316

   <Icon

Screen.Recording.2024-01-04.at.5.45.21.PM.mov

[melvin-bot]

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

[melvin-bot]

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

[dubielzyk-expensify]

Description updated to reflect latest changes, @quinthar

[rushatgabhane]

This is a implementation based issue. Let's hire @esh-g for their proposal
🎀 👀 🎀

[melvin-bot]

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

[rushatgabhane]

Additional change proposals

@esh-g this is smart but it kinda looks cluttered. Since this is a CRITICAL issue, let's raise a PR as soon as possible after assignment.

Meanwhile, @dubielzyk-expensify what do you think about adding description as proposed by @esh-g ?

[mountiny]

Merged

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[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 1.4.27-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Add overflow menu to mini context menu #34031

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

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

• @rushatgabhane requires payment through NewDot Manual Requests
• @esh-g requires payment automatic offer (Contributor)

[dubielzyk-expensify]

Just realized that the unread icon isn't implemented:

The mail icon should be the new unread icon as outlined the description:

[esh-g]

@dubielzyk-expensify Don't worry, I added it as a part of the follow-up PR for this issue here: #34754

[dubielzyk-expensify]

Thanks!

[melvin-bot]

Triggered auto assignment to @muttmuure (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

Upwork job price has been updated to $600

[mountiny]

Payment is $600 for @esh-g @rushatgabhane see reasoning here

[mountiny]

@muttmuure this is ready for payment now

[esh-g]

gentle bump @muttmuure

[rushatgabhane]

$ requested here https://staging.new.expensify.com/r/2143839370405563

[JmillsExpensify]

$600 approved for @rushatgabhane based on comment above.

[mountiny]

Ready for payment @muttmuure

[muttmuure]

Handling

[muttmuure]

@esh-g paid $600 on Upwork