[NEW] Reaction view

app/ui-utils/client/lib/MessageAction.js

@@ -9,6 +9,7 @@ import { ReactiveVar } from 'meteor/reactive-var';
 import { Tracker } from 'meteor/tracker';
 import { Session } from 'meteor/session';
 
+import { createTemplateForComponent } from '../../../../client/reactAdapters';
 import { messageArgs } from './messageArgs';
 import { roomTypes, canDeleteMessage } from '../../../utils/client';
 import { Messages, Rooms, Subscriptions } from '../../../models/client';
@@ -355,4 +356,24 @@ Meteor.startup(async function() {
 		order: 17,
 		group: 'menu',
 	});
+
+	MessageAction.addButton({
+		id: 'reaction-list',
+		icon: 'emoji',
+		label: 'Reactions',
+		context: ['message', 'message-mobile', 'threads'],
+		action() {
+			const { msg: { reactions } } = messageArgs(this);
+
+			modal.open({
+				template: createTemplateForComponent('reactionList', () => import('./ReactionListContent')),
+				data: { reactions, onClose: () => modal.close() },
+			});
+		},
+		condition({ msg: { reactions } }) {
+			return !!reactions;
+		},
+		order: 18,
+		group: 'menu',
+	});
 });

app/ui-utils/client/lib/ReactionListContent.js

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react';
+import { Box, Tag, Divider, Modal, Icon, ButtonGroup, Button, Scrollable } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../../../client/contexts/TranslationContext';
+import Emoji from '../../../../client/components/basic/Emoji';
+
+export function Reactions(props) {
+	const reactionKeys = useMemo(() => Object.keys(props.reactions), [props.reactions]);
+
+	return <Scrollable>
+		<Box>
+			{reactionKeys.map((reaction, i) => <Box key={reaction}>
+				<Box display='flex'>
+					<Emoji emojiHandle={reaction}/> {reaction}
+				</Box>
+				<Usernames usernames={props.reactions[reaction].usernames}></Usernames>
+				{ i !== (reactionKeys.length - 1) && <Divider key={reaction} marginBlockStart='x8' marginBlockEnd='x16'/> }
+			</Box>)}
+		</Box>
+	</Scrollable>;
+}
+
+export function Usernames(props) {
+	return <Box paddingBlock='x4'>
+		{ props.usernames.map((user) => <Tag marginInlineEnd='4x' key={user}>{user}</Tag>)}
+	</Box>;
+}
+
+export default function ReactionListContent({ reactions, onClose }) {
+	const t = useTranslation();
+
+	return <>
+		<Modal.Header>
+			<Icon name='emoji' size={20}/>
+			<Modal.Title>{t('Reactions')}</Modal.Title>
+			<Modal.Close onClick={onClose}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			<Reactions reactions={reactions} />
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button primary onClick={onClose}>{t('Ok')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</>;
+}

client/components/basic/Emoji.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { renderEmoji } from '../../../app/emoji/client/index';
+
+function Emoji({ emojiHandle }) {
+	const markup = { __html: `${ renderEmoji(emojiHandle) }` };
+	return <div dangerouslySetInnerHTML={ markup }></div>;
+}
+
+export default Emoji;