Rewrite Message action links

app/action-links/client/index.js

@@ -1,6 +1,4 @@
 import { actionLinks } from './lib/actionLinks';
-import './init';
-import './stylesheets/actionLinks.css';
 
 export {
 	actionLinks,

app/ui-message/client/message.html

@@ -166,22 +166,7 @@
 				</div>
 			{{/unless}}
 			{{#unless hideActionLinks}}
-			<ul class="actionLinks">
-				{{#each actionLink in actionLinks}}
-					<li class="color-primary-action-color">
-						<span class="rc-button rc-button--primary rc-button--small" style="display: inline-block; line-height: 1.75rem" data-actionlink="{{actionLink.id}}">
-							{{#if actionLink.icon}}
-								<i class="{{actionLink.icon}}"></i>
-							{{/if}}
-							{{#if actionLink.i18nLabel}}
-								{{_ actionLink.i18nLabel}}
-							{{else}}
-								{{actionLink.label}}
-							{{/if}}
-						</span>
-					</li>
-				{{/each}}
-			</ul>
+				{{> MessageActions mid=msg._id actions=actionLinks runAction=(actions.runAction msg)}}
 			{{/unless}}
 			{{#if broadcast}}
 				{{#with msg}}

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

@@ -5,15 +5,18 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Subscriptions, Rooms, Users } from '../../../models/client';
 import { hasPermission } from '../../../authorization/client';
 import { settings } from '../../../settings/client';
-import { getUserPreference } from '../../../utils/client';
+import { getUserPreference, handleError } from '../../../utils/client';
 import { AutoTranslate } from '../../../autotranslate/client';
+import { Layout } from './Layout';
+import { fireGlobalEvent } from './fireGlobalEvent';
+import { actionLinks } from '../../../action-links/client';
 
 const fields = { name: 1, username: 1, 'settings.preferences.showMessageInMainThread': 1, 'settings.preferences.autoImageLoad': 1, 'settings.preferences.saveMobileBandwidth': 1, 'settings.preferences.collapseMediaByDefault': 1, 'settings.preferences.hideRoles': 1 };
 
 export function messageContext({ rid } = Template.instance()) {
 	const uid = Meteor.userId();
 	const user = Users.findOne({ _id: uid }, { fields }) || {};
-
+	const instace = Template.instance();
 	const openThread = (e) => {
 		const { rid, mid, tmid } = e.currentTarget.dataset;
 		const room = Rooms.findOne({ _id: rid });
@@ -27,6 +30,23 @@ export function messageContext({ rid } = Template.instance()) {
 		});
 	};
 
+	const runAction = Layout.isEmbedded() ? (msg, e) => {
+		const { actionlink } = e.currentTarget.dataset;
+		return fireGlobalEvent('click-action-link', {
+			actionlink,
+			value: msg._id,
+			message: msg,
+		});
+	} : (msg, e) => {
+		console.log(e);
+		const { actionlink } = e.currentTarget.dataset;
+		actionLinks.run(actionlink, msg._id, instace, (err) => {
+			if (err) {
+				handleError(err);
+			}
+		});
+	};
+
 	return {
 		u: user,
 		room: Rooms.findOne({ _id: rid }, {
@@ -50,6 +70,9 @@ export function messageContext({ rid } = Template.instance()) {
 			openThread() {
 				return openThread;
 			},
+			runAction(msg) {
+				return () => (e) => runAction(msg, e);
+			},
 		},
 		settings: {
 			translateLanguage: AutoTranslate.getLanguage(rid),

client/adapters.js

@@ -1,3 +1,4 @@
 const { createTemplateForComponent } = require('./reactAdapters');
 
 createTemplateForComponent('ThreadReply', () => import('./components/Message/Metrics/Thread'));
+createTemplateForComponent('MessageActions', () => import('./components/Message/Actions'));

client/components/Message/Actions/index.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { IconProps, Icon, Button, ButtonGroup } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { Content } from '..';
+
+type RunAction = () => void;
+
+type ActionOptions = {
+	mid: string;
+	id: string;
+	icon: IconProps['name'];
+	i18nLabel?: string;
+	label?: string;
+	runAction?: RunAction;
+};
+
+export const Action: FC<ActionOptions> = ({ id, icon, i18nLabel, label, mid, runAction }) => {
+	const t = useTranslation();
+
+	return <Button id={id} data-mid={mid} data-actionlink={id} onClick={runAction} primary small>{icon && <Icon name={icon.replace('icon-', '')}/>}{i18nLabel ? t(i18nLabel) : label }</Button>;
+};
+
+const Actions: FC<{ actions: Array<ActionOptions>; runAction: RunAction; mid: string }> = ({ actions, runAction }) => <Content width='full' justifyContent='center'><ButtonGroup align='center'>{actions.map((action) => <Action runAction={runAction} key={action.id} {...action}/>)}</ButtonGroup></Content>;
+
+export default Actions;