Rewrite Broadcast Message (#20119)

app/ui-message/client/message.html

@@ -130,6 +130,10 @@
 			    {{> ThreadMetric counter=msg.tcount following=following lm=msg.tlm rid=msg.rid mid=msg._id unread=unread mention=mention all=all openThread=actions.openThread }}
 			{{/if}}
 
+			{{#if broadcast}}
+			 	{{> BroadCastMetric mid=msg._id username=msg.u.username replyBroadcast=actions.replyBroadcast }}
+			{{/if}}
+
 			{{#with readReceipt}}
 				<div class="read-receipt {{readByEveryone}}">
 					{{> icon icon="check" }}
@@ -168,13 +172,6 @@
 				{{/each}}
 			</ul>
 			{{/unless}}
-			{{#if broadcast}}
-				{{#with msg}}
-					<button type="button" class="js-reply-broadcast rc-button rc-button--primary rc-button--small rc-button--outline" name="button">
-						{{> icon icon="reply"}} {{_'Reply'}}
-					</button>
-				{{/with}}
-			{{/if}}
 			{{#unless hideReactions}}
 			<ul class="reactions">
 				{{#each reaction in reactions}}

app/ui-message/client/messageBox/messageBox.js

@@ -29,7 +29,7 @@ import {
 	t,
 	roomTypes,
 	getUserPreference,
-} from '../../../utils';
+} from '../../../utils/client';
 import './messageBoxActions';
 import './messageBoxReplyPreview';
 import './messageBoxTyping';

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

@@ -5,9 +5,10 @@ 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, roomTypes } from '../../../utils/client';
 import { AutoTranslate } from '../../../autotranslate/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()) {
@@ -33,6 +34,11 @@ export function messageContext({ rid } = Template.instance()) {
 		FlowRouter.goToRoomById(drid);
 	};
 
+	const replyBroadcast = (e) => {
+		const { username, mid } = e.currentTarget.dataset;
+		roomTypes.openRouteLink('d', { name: username }, { ...FlowRouter.current().queryParams, reply: mid });
+	};
+
 	return {
 		u: user,
 		room: Rooms.findOne({ _id: rid }, {
@@ -59,6 +65,9 @@ export function messageContext({ rid } = Template.instance()) {
 			openDiscussion() {
 				return openDiscussion;
 			},
+			replyBroadcast() {
+				return replyBroadcast;
+			},
 		},
 		settings: {
 			translateLanguage: AutoTranslate.getLanguage(rid),

app/ui/client/views/app/lib/getCommonRoomEvents.js

@@ -15,7 +15,7 @@ import { isURL } from '../../../../../utils/lib/isURL';
 import { openUserCard } from '../../../lib/UserCard';
 import { messageArgs } from '../../../../../ui-utils/client/lib/messageArgs';
 import { ChatMessage, Rooms } from '../../../../../models';
-import { t, roomTypes } from '../../../../../utils/client';
+import { t } from '../../../../../utils/client';
 import { chatMessages } from '../room';
 import { EmojiEvents } from '../../../../../reactions/client/init';
 
@@ -183,10 +183,6 @@ export const getCommonRoomEvents = () => ({
 			jump: tmid && tmid !== _id && _id && _id,
 		});
 	},
-	'click .js-reply-broadcast'() {
-		const msg = messageArgs(this);
-		roomTypes.openRouteLink('d', { name: msg.u.username }, { ...FlowRouter.current().queryParams, reply: msg._id });
-	},
 
 	'click .image-to-download'(event) {
 		const { msg } = messageArgs(this);

client/adapters.js

@@ -2,3 +2,4 @@ const { createTemplateForComponent } = require('./reactAdapters');
 
 createTemplateForComponent('ThreadMetric', () => import('./components/Message/Metrics/Thread'));
 createTemplateForComponent('DiscussionMetric', () => import('./components/Message/Metrics/Discussion'));
+createTemplateForComponent('BroadCastMetric', () => import('./components/Message/Metrics/Broadcast'));

client/components/Message/Metrics/Broadcast.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { Reply, Content } from '..';
+
+
+type BroadcastOptions = {
+	username: string;
+	mid: string;
+	replyBroadcast: () => void;
+};
+
+const BroadcastMetric: FC<BroadcastOptions> = ({ username, mid, replyBroadcast }) => {
+	const t = useTranslation();
+	return <Content>
+		<Reply data-username={username} data-mid={mid} onClick={replyBroadcast}>{t('Reply')}</Reply>
+	</Content>;
+};
+
+export default BroadcastMetric;