feat: reactions on Messages(sqservices -1734) #14771

arjita-mitra · 2023-03-02T17:38:02Z

PR Submission Checklist for internal contributors

The PR Title
- As a Wire user I would like to have a wide range of reactions (emojis) at my disposal, so that I can use them to express myself in messages and reactions to messages.
The PR Description
- create message actions floating menu
- integrate context menu, reply, emoji picker
- manage action menu states focus/hover/selected
- handle outside click
- make everything keyboard accessible
- unit testing

References

https://wearezeta.atlassian.net/browse/SQSERVICES-1734

…CES-1910) - toggle message actions menu active state - refactor message actions component and group reaction butons togehter - add dark/light theme support - css for action menu

overlay css test case updated code cleanup context menu overlay and reset states(SQSERVICES-1734)

…ture/SQSERVICES-1864

src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx

src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions.tsx

…ture/SQSERVICES-1864

* feat: add ability to react on messages * feat: create util for transformReactionObj replace thums up and heart emoji with image image css create list reactions component * feat: Add emoji title utils (#14827) * feat: convert emoji to unicode * feat: integrate react functioanlity with reactions button make reactions button reactions buttons css create reaction emoji image component * test: unit test message reactions * refactor: move message reactions related components under message reactions directory * refactor: improve transformReactionObj function call transformReactionObj from reactions list * refactor: update test cases * refactor: remove test case * refactor: remove unused code fix: review comment * chore: update yarn lock * chore: update yarn lock * feat: Add ability to see messsage reactions (SQSERVICES-1876) (#14825) * feat: Add ability to see messsage reactions (SQSERVICES-1876) * getEmojiTitleFromEmojiUnicode * feat: create util for transformReactionObj replace thums up and heart emoji with image image css create list reactions component * feat: Add emoji title utils (#14827) * feat: convert emoji to unicode * styles * use first name * use reduce * use map * use map for emoji dictionary * remove extra ? * remove duplicated code * Update src/script/util/EmojiUtil.ts Co-authored-by: Przemysław Jóźwik <[email protected]> * Update src/script/util/EmojiUtil.ts Co-authored-by: Przemysław Jóźwik <[email protected]> * correct rendering * yarn lock changes * migrate styles * dark mode handle * change styles file name --------- Co-authored-by: arjita-mitra <[email protected]> Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: new and older client should be in sync when a user reacts on a message * test: add unit testing for reaction add/remove from a message * Update src/script/components/MessagesList/Message/MessageWrapper.tsx Co-authored-by: Thomas Belin <[email protected]> --------- Co-authored-by: Amir Ghezelbash <[email protected]> Co-authored-by: Przemysław Jóźwik <[email protected]> Co-authored-by: Thomas Belin <[email protected]>

* feat: Add tooltip to reaction buttons * use isEnterKey * onTooltipReactionCountClick * onShowReactionDetails * onClickReactionDetails * remove MessageFooterLike

…e floating action menu inside image details modal (#14917) * feat: refactor updateUserReactions method * test: updateUserReactions method tests * feat: read receipt and timestamp new design reaction buttons style changes * feat: customise dark and light theme colour of emoji picker update placeholder remove feature flag * fix: simplify code * adjust position of message action menu to ensure responsivness * feat: integrate message actions menu with detailsviewmodal * implement new design of read receipts * adjust style of 1 on 1 read receipts * refactor reaction list padding to button margin to prevent extra line padding * remove onClickReceive and replace by onClickDetails for contect menu action * remove read status from ping message * fix: hover, focus background colour of emoji picker * fix: use css specificity to avoid important rule * feat: integrate message floating action menu inside image details view modal * test: update test cases * fix: all typescript error fix and remove unused code * feat: trap focus inside image modal * feat: don't focus on reaction list buttons unless the message is focused * feat: close emoji picker on emoji selection * fix: message timestamp should appear after all the icons, ex: guest * fix: place comma inline * fix: move comment into correct place * fix: rename method, make image detail modal id const * fix: code review comments, update aria label --------- Co-authored-by: V-Gira <[email protected]>

…ture/SQSERVICES-1864

…wire-webapp into feature/SQSERVICES-1864

codecov · 2023-05-10T09:47:33Z

Codecov Report

Merging #14771 (76b12f5) into dev (778f64f) will increase coverage by 0.22%.
The diff coverage is 54.73%.

❗ Current head 76b12f5 differs from pull request most recent head 9d880a4. Consider uploading reports for the commit 9d880a4 to get more accurate results

@@            Coverage Diff             @@
##              dev   #14771      +/-   ##
==========================================
+ Coverage   43.43%   43.66%   +0.22%     
==========================================
  Files         654      667      +13     
  Lines       22285    22606     +321     
  Branches     5096     5144      +48     
==========================================
+ Hits         9680     9870     +190     
- Misses      11366    11485     +119     
- Partials     1239     1251      +12

…7, SQSERVICES-2058) (#15200) * fix: reaction improvements increase reaction badge font size, reaction count colour update based on active/inactive, no system message background highlight * feat: self deleting msg reactions(SQSERVICES-2057) * Update src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: code review changes * fix: use HTMLButtonElement to reduce props passed * fix: add missing onKeyPress attribute --------- Co-authored-by: Przemysław Jóźwik <[email protected]>

* fix: reaction improvements increase reaction badge font size, reaction count colour update based on active/inactive, no system message background highlight * feat: self deleting msg reactions(SQSERVICES-2057) * Update src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: code review changes * fix: use HTMLButtonElement to reduce props passed * fix: add missing onKeyPress attribute * feat: improve keyboard accessibility remove unused code close message action menu on tab of last interactive element of a message prevent emoji picker up/down arrow key to naviage between messages in background after emoji selection/esc key then retain the focus on the emoji button * fix: improve comments * fix: remove array.from --------- Co-authored-by: Przemysław Jóźwik <[email protected]>

…updates, add reaction count (#15228) * fix: reaction improvements increase reaction badge font size, reaction count colour update based on active/inactive, no system message background highlight * feat: self deleting msg reactions(SQSERVICES-2057) * Update src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: code review changes * fix: use HTMLButtonElement to reduce props passed * fix: add missing onKeyPress attribute * feat: improve keyboard accessibility remove unused code close message action menu on tab of last interactive element of a message prevent emoji picker up/down arrow key to naviage between messages in background after emoji selection/esc key then retain the focus on the emoji button * fix: improve comments * fix: remove array.from * fix: replace span with emoji image for message reaction details panel add reaction count style change * fix: update style name --------- Co-authored-by: Przemysław Jóźwik <[email protected]>

* fix: reaction QA feedback(WPB-1199) - fix reaction action menu hover/focus state issues - line break for reactions to avoid overflow * fix: adjust action menu position on font size change wrap emoji pills to multi line horizontal scroll shouldn't appear for long messages either * fix: remove focus from reaction tooltip * fix: add test id * fix: [Web] Reactions: Message actions still accessible when I got removed from the conversation * fix: context menu escape key press, multiple tooltip displayed together, stop propogating reaction action menu events * fix: refactor code * fix: remove unused event * fix: remove extra div, move event handlers up to make tootlip links clickable * chore: bump ui-kit

…pper (#15346)

…displayed on the right-side panel in the message details. (#15479) * fix: remove reply message option from context menu * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. * fix: reuse exisitng methods

…elect an emoji[WPB-3291] (#15503) * fix: remove reply message option from context menu * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. * fix: reuse exisitng methods * fix: set emoji pill active/inactive when user select/unselect a reaction * fix: code review suggestions

…15509) * fix: remove reply message option from context menu * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. * fix: reuse exisitng methods * fix: set emoji pill active/inactive when user select/unselect a reaction * fix: code review suggestions * fix: make all emoji pills active that user ever reacted * fix: spread the prop

…er (#15530) * fix: remove reply message option from context menu * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. * fix: reuse exisitng methods * fix: set emoji pill active/inactive when user select/unselect a reaction * fix: code review suggestions * fix: make all emoji pills active that user ever reacted * fix: spread the prop * feat: sort emoji pills by reaction user count(WPB-3292) * fix: add function description

…ected skin colour (#15531) * fix: remove reply message option from context menu * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. * fix: reuse exisitng methods * fix: set emoji pill active/inactive when user select/unselect a reaction * fix: code review suggestions * fix: make all emoji pills active that user ever reacted * fix: spread the prop * feat: sort emoji pills by reaction user count(WPB-3292) * fix: add function description * fix: retain user selected skin colour(WPB-3564) * fix: add new line

…ture/SQSERVICES-1864

atomrc · 2023-08-21T07:25:16Z

yalc.lock

@@ -0,0 +1,10 @@
+{


This file shoundn't be commited, please remove

arjita-mitra and others added 8 commits February 17, 2023 09:57

feat: create floating menu for message actions(SQSERVICES-1910)

c104199

feat: manage message actions menu focus, hover, active states(SQSERVI…

f3890e0

…CES-1910) - toggle message actions menu active state - refactor message actions component and group reaction butons togehter - add dark/light theme support - css for action menu

test: message action menu tests

4e35a46

feat: emoji picker integration(SQSERVICES-1734)

bbf1861

better positioning of emoji picker

989a0fd

feat: handle outside area clicked for reaction/action menu items

516513e

overlay css test case updated code cleanup context menu overlay and reset states(SQSERVICES-1734)

feat: configure feature flag to enable/disable reaction

8886ae3

Merge branch 'dev' of https://github.com/wireapp/wire-webapp into fea…

39aa18e

…ture/SQSERVICES-1864

arjita-mitra added the blocked: do-not-merge label Mar 2, 2023

arjita-mitra requested review from a team and otto-the-bot as code owners March 2, 2023 17:38

otto-the-bot added the 👕 size: XXL label Mar 2, 2023

przemvs reviewed Mar 3, 2023

View reviewed changes

src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx Show resolved Hide resolved

przemvs reviewed Mar 3, 2023

View reviewed changes

src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions.tsx Outdated Show resolved Hide resolved

przemvs reviewed Mar 3, 2023

View reviewed changes

src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions.tsx Outdated Show resolved Hide resolved

arjita-mitra changed the title ~~[Draft] Reactions on Messages(sqservices -1734)~~ Reactions on Messages(sqservices -1734) Mar 20, 2023

arjita-mitra and others added 10 commits March 20, 2023 10:43

Merge branch 'dev' of https://github.com/wireapp/wire-webapp into fea…

92d8f1d

…ture/SQSERVICES-1864

feat: Add tooltip to reaction buttons (#14933)

45fc621

* feat: Add tooltip to reaction buttons * use isEnterKey * onTooltipReactionCountClick * onShowReactionDetails * onClickReactionDetails * remove MessageFooterLike

runfix: Reaction views menu on 1 to 1

6c32cee

runfix: Adjust margin of reaction tooltip

d74a759

chore: remove img cdn

2c2f22b

Merge branch 'dev' of https://github.com/wireapp/wire-webapp into fea…

fad0c02

…ture/SQSERVICES-1864

chore: merge commit with dev

bdf0312

Merge branch 'feature/SQSERVICES-1864' of https://github.com/wireapp/…

713f676

…wire-webapp into feature/SQSERVICES-1864

arjita-mitra changed the title ~~Reactions on Messages(sqservices -1734)~~ feat: reactions on Messages(sqservices -1734) May 9, 2023

fix: test errors

7f280fd

otto-the-bot added the type: feature / request ✨ label May 9, 2023

fix: lock file update

b07a7ac

fix: test cases

7ba346e

arjita-mitra and others added 13 commits May 22, 2023 12:16

fix: reset active menu button when no menu is open and clicked on wra…

b3fb9d6

…pper (#15346)

chore: merge dev

40f7e28

chore: cleanup packages

d5ceb9f

fix: remove reply message option from context menu (#15478)

88a0a0f

arjita-mitra removed the blocked: do-not-merge label Aug 18, 2023

Merge branch 'dev' of https://github.com/wireapp/wire-webapp into fea…

ebbe845

…ture/SQSERVICES-1864

arjita-mitra enabled auto-merge (squash) August 18, 2023 13:23

arjita-mitra added 4 commits August 18, 2023 15:31

test: fix test

b4d80b7

fix: yarn lock

5ef87cf

chore: fix lock file

896be75

fix: test case

76b12f5

atomrc approved these changes Aug 21, 2023

View reviewed changes

atomrc reviewed Aug 21, 2023

View reviewed changes

yalc.lock Outdated

@@ -0,0 +1,10 @@

{

Copy link

Contributor

atomrc Aug 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file shoundn't be commited, please remove

atomrc added 3 commits August 21, 2023 09:25

fix linting

fd49b94

fix: remove unecessary file

d3fda72

Merge branch 'dev' into feature/SQSERVICES-1864

9d880a4

otto-the-bot added the comp: calling label Aug 21, 2023

arjita-mitra merged commit 322004e into dev Aug 21, 2023

arjita-mitra deleted the feature/SQSERVICES-1864 branch August 21, 2023 07:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: reactions on Messages(sqservices -1734) #14771

feat: reactions on Messages(sqservices -1734) #14771

arjita-mitra commented Mar 2, 2023

codecov bot commented May 10, 2023 •

edited

Loading

atomrc Aug 21, 2023

feat: reactions on Messages(sqservices -1734) #14771

feat: reactions on Messages(sqservices -1734) #14771

Conversation

arjita-mitra commented Mar 2, 2023

PR Submission Checklist for internal contributors

References

codecov bot commented May 10, 2023 • edited Loading

Codecov Report

atomrc Aug 21, 2023

Choose a reason for hiding this comment

codecov bot commented May 10, 2023 •

edited

Loading