Merge pull request #8315 from RocketChat/message-actions-popover

[FIX] Put delete action on another popover group

packages/rocketchat-lib/client/MessageAction.js

@@ -173,6 +173,7 @@ Meteor.startup(function() {
 		icon: 'trash',
 		label: 'Delete',
 		context: ['message', 'message-mobile'],
+		color: 'alert',
 		action() {
 			const message = this._arguments[1];
 			chatMessages[Session.get('openedRoom')].confirmDeleteMsg(message);

packages/rocketchat-theme/client/imports/components/popover.css

@@ -93,7 +93,7 @@
 		font-size: var(--popover-item-text-size);
 		align-items: center;
 
-		&--error {
+		&--alert {
 			color: var(--color-error);
 
 			& .rc-icon {

packages/rocketchat-ui/client/views/app/room.js

@@ -547,24 +547,26 @@ Template.room.events({
 		}
 
 		const [, message] = this._arguments;
-		const items = RocketChat.MessageAction.getButtons(message, context, 'menu').map(item => {
+		const allItems = RocketChat.MessageAction.getButtons(message, context, 'menu').map(item => {
 			return {
 				icon: item.icon,
 				name: t(item.label),
 				type: 'message-action',
 				id: item.id,
-				modifier: item.id === 'delete-message' ? 'error' : null
+				modifier: item.color
 			};
 		});
+		const [items, deleteItem] = allItems.reduce((result, value) => (result[value.id === 'delete-message' ? 1 : 0].push(value), result), [[], []]);
+		const groups = [{ items }];
+
+		if (deleteItem.length) {
+			groups.push({ items: deleteItem });
+		}
 
 		const config = {
 			columns: [
 				{
-					groups: [
-						{
-							items
-						}
-					]
+					groups
 				}
 			],
 			instance: i,