feat: message menu sections with dividers (#30116)

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
RocketChat · Aug 28, 2023 · 5832be2 · 5832be2
1 parent fde7229
commit 5832be2
Show file tree

Hide file tree

Showing 29 changed files with 126 additions and 108 deletions.
diff --git a/.changeset/short-cobras-tell.md b/.changeset/short-cobras-tell.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": minor
+---
+
+Reorganized the message menu
diff --git a/apps/meteor/app/autotranslate/client/lib/actionButton.ts b/apps/meteor/app/autotranslate/client/lib/actionButton.ts
@@ -24,6 +24,7 @@ Meteor.startup(() => {
 				icon: 'language',
 				label: 'Translate',
 				context: ['message', 'message-mobile', 'threads'],
+				type: 'interaction',
 				action(_, props) {
 					const { message = messageArgs(this).msg } = props;
 					const language = AutoTranslate.getLanguage(message.rid);
@@ -58,6 +59,7 @@ Meteor.startup(() => {
 				icon: 'language',
 				label: 'View_original',
 				context: ['message', 'message-mobile', 'threads'],
+				type: 'interaction',
 				action(_, props) {
 					const { message = messageArgs(this).msg } = props;
 					const language = AutoTranslate.getLanguage(message.rid);

diff --git a/apps/meteor/app/discussion/client/createDiscussionMessageAction.ts b/apps/meteor/app/discussion/client/createDiscussionMessageAction.ts
@@ -19,6 +19,7 @@ Meteor.startup(() => {
 			id: 'start-discussion',
 			icon: 'discussion',
 			label: 'Discussion_start',
+			type: 'communication',
 			context: ['message', 'message-mobile', 'videoconf'],
 			async action(_, props) {
 				const { message = messageArgs(this).msg, room } = props;

diff --git a/apps/meteor/app/message-mark-as-unread/client/actionButton.ts b/apps/meteor/app/message-mark-as-unread/client/actionButton.ts
@@ -14,6 +14,7 @@ Meteor.startup(() => {
 		icon: 'flag',
 		label: 'Mark_unread',
 		context: ['message', 'message-mobile', 'threads'],
+		type: 'interaction',
 		async action(_, props) {
 			const { message = messageArgs(this).msg } = props;
 
@@ -44,7 +45,7 @@ Meteor.startup(() => {
 
 			return message.u._id !== user._id;
 		},
-		order: 10,
+		order: 4,
 		group: 'menu',
 	});
 });
diff --git a/apps/meteor/app/reactions/client/init.ts b/apps/meteor/app/reactions/client/init.ts
@@ -40,6 +40,6 @@ Meteor.startup(() => {
 			return true;
 		},
 		order: -3,
-		group: ['message', 'menu'],
+		group: 'message',
 	});
 });
diff --git a/apps/meteor/app/threads/client/messageAction/follow.ts b/apps/meteor/app/threads/client/messageAction/follow.ts
@@ -18,6 +18,7 @@ Meteor.startup(() => {
 			id: 'follow-message',
 			icon: 'bell',
 			label: 'Follow_message',
+			type: 'interaction',
 			context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
 			async action(_, { message }) {
 				if (!message) {
@@ -44,7 +45,7 @@ Meteor.startup(() => {
 				}
 				return user?._id ? !replies.includes(user._id) : false;
 			},
-			order: 2,
+			order: 1,
 			group: 'menu',
 		});
 	});

diff --git a/apps/meteor/app/threads/client/messageAction/replyInThread.ts b/apps/meteor/app/threads/client/messageAction/replyInThread.ts
@@ -37,7 +37,7 @@ Meteor.startup(() => {
 				return Boolean(subscription);
 			},
 			order: -1,
-			group: ['message', 'menu'],
+			group: 'message',
 		});
 	});
 });
diff --git a/apps/meteor/app/threads/client/messageAction/unfollow.ts b/apps/meteor/app/threads/client/messageAction/unfollow.ts
@@ -17,6 +17,7 @@ Meteor.startup(() => {
 			id: 'unfollow-message',
 			icon: 'bell-off',
 			label: 'Unfollow_message',
+			type: 'interaction',
 			context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
 			async action(_, { message }) {
 				if (!message) {

diff --git a/apps/meteor/app/ui-utils/client/lib/MessageAction.ts b/apps/meteor/app/ui-utils/client/lib/MessageAction.ts
@@ -23,6 +23,8 @@ export type MessageActionContext =
 	| 'search'
 	| 'videoconf-threads';
 
+type MessageActionType = 'communication' | 'interaction' | 'duplication' | 'apps' | 'management';
+
 type MessageActionConditionProps = {
 	message: IMessage;
 	user: IUser | undefined;
@@ -62,6 +64,7 @@ export type MessageActionConfig = {
 		},
 	) => any;
 	condition?: (props: MessageActionConditionProps) => Promise<boolean> | boolean;
+	type?: MessageActionType;
 };
 
 class MessageAction {

diff --git a/apps/meteor/app/ui-utils/client/lib/messageActionDefault.ts b/apps/meteor/app/ui-utils/client/lib/messageActionDefault.ts
@@ -31,6 +31,7 @@ Meteor.startup(async () => {
 		label: 'Reply_in_direct_message',
 		context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
 		role: 'link',
+		type: 'communication',
 		action(_, props) {
 			const { message = messageArgs(this).msg } = props;
 			roomCoordinator.openRouteLink(
@@ -69,6 +70,7 @@ Meteor.startup(async () => {
 		icon: 'arrow-forward',
 		label: 'Share_Message',
 		context: ['message', 'message-mobile', 'threads'],
+		type: 'communication',
 		async action(_, props) {
 			const { message = messageArgs(this).msg } = props;
 			const permalink = await getPermaLink(message._id);
@@ -84,7 +86,7 @@ Meteor.startup(async () => {
 			});
 		},
 		order: 0,
-		group: ['message', 'menu'],
+		group: 'message',
 	});
 
 	MessageAction.addButton({
@@ -112,15 +114,16 @@ Meteor.startup(async () => {
 			return true;
 		},
 		order: -2,
-		group: ['message', 'menu'],
+		group: 'message',
 	});
 
 	MessageAction.addButton({
 		id: 'permalink',
 		icon: 'permalink',
-		label: 'Get_link',
+		label: 'Copy_link',
 		// classes: 'clipboard',
 		context: ['message', 'message-mobile', 'threads', 'federated'],
+		type: 'duplication',
 		async action(_, props) {
 			try {
 				const { message = messageArgs(this).msg } = props;
@@ -134,16 +137,17 @@ Meteor.startup(async () => {
 		condition({ subscription }) {
 			return !!subscription;
 		},
-		order: 4,
+		order: 5,
 		group: 'menu',
 	});
 
 	MessageAction.addButton({
 		id: 'copy',
 		icon: 'copy',
-		label: 'Copy',
+		label: 'Copy_text',
 		// classes: 'clipboard',
 		context: ['message', 'message-mobile', 'threads', 'federated'],
+		type: 'duplication',
 		async action(_, props) {
 			const { message = messageArgs(this).msg } = props;
 			const msgText = getMainMessageText(message).msg;
@@ -153,7 +157,7 @@ Meteor.startup(async () => {
 		condition({ subscription }) {
 			return !!subscription;
 		},
-		order: 5,
+		order: 6,
 		group: 'menu',
 	});
 
@@ -162,6 +166,7 @@ Meteor.startup(async () => {
 		icon: 'edit',
 		label: 'Edit',
 		context: ['message', 'message-mobile', 'threads', 'federated'],
+		type: 'management',
 		async action(_, props) {
 			const { message = messageArgs(this).msg, chat } = props;
 			await chat?.messageEditing.editMessage(message);
@@ -195,7 +200,7 @@ Meteor.startup(async () => {
 			}
 			return true;
 		},
-		order: 6,
+		order: 8,
 		group: 'menu',
 	});
 
@@ -205,6 +210,7 @@ Meteor.startup(async () => {
 		label: 'Delete',
 		context: ['message', 'message-mobile', 'threads', 'federated'],
 		color: 'alert',
+		type: 'management',
 		async action(this: unknown, _, { message = messageArgs(this).msg, chat }) {
 			await chat?.flows.requestMessageDeletion(message);
 		},
@@ -222,7 +228,7 @@ Meteor.startup(async () => {
 
 			return chat?.data.canDeleteMessage(message) ?? false;
 		},
-		order: 18,
+		order: 10,
 		group: 'menu',
 	});
 
@@ -232,6 +238,7 @@ Meteor.startup(async () => {
 		label: 'Report',
 		context: ['message', 'message-mobile', 'threads', 'federated'],
 		color: 'alert',
+		type: 'management',
 		action(this: unknown, _, { message = messageArgs(this).msg }) {
 			imperativeModal.open({
 				component: ReportMessageModal,
@@ -248,7 +255,7 @@ Meteor.startup(async () => {
 			}
 			return Boolean(subscription);
 		},
-		order: 17,
+		order: 9,
 		group: 'menu',
 	});
 
@@ -257,6 +264,7 @@ Meteor.startup(async () => {
 		icon: 'emoji',
 		label: 'Reactions',
 		context: ['message', 'message-mobile', 'threads'],
+		type: 'interaction',
 		action(this: unknown, _, { message: { reactions = {} } = messageArgs(this).msg }) {
 			imperativeModal.open({
 				component: ReactionList,
@@ -266,7 +274,7 @@ Meteor.startup(async () => {
 		condition({ message: { reactions } }) {
 			return !!reactions;
 		},
-		order: 18,
+		order: 9,
 		group: 'menu',
 	});
 });
diff --git a/apps/meteor/client/components/message/toolbox/MessageActionMenu.tsx b/apps/meteor/client/components/message/toolbox/MessageActionMenu.tsx
@@ -1,41 +1,66 @@
-import { MessageToolboxItem, Option, OptionDivider, Box } from '@rocket.chat/fuselage';
+import { Box, MessageToolboxItem, Option, OptionDivider, OptionTitle } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ComponentProps, UIEvent, ReactElement } from 'react';
-import React, { useState, Fragment, useRef } from 'react';
+import type { ComponentProps, MouseEvent, MouseEventHandler, ReactElement } from 'react';
+import React, { Fragment, useRef, useState } from 'react';
 
 import type { MessageActionConfig } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
 import ToolboxDropdown from './ToolboxDropdown';
 
 type MessageActionConfigOption = Omit<MessageActionConfig, 'condition' | 'context' | 'order' | 'action'> & {
-	action: (event: UIEvent) => void;
+	action: ((event: MouseEvent<HTMLElement, MouseEvent>) => void) & MouseEventHandler<HTMLElement>;
 };
 
 type MessageActionMenuProps = {
 	options: MessageActionConfigOption[];
 };
 
+const getSectionOrder = (section: string): number => {
+	switch (section) {
+		case 'communication':
+			return 0;
+		case 'interaction':
+			return 1;
+		case 'duplication':
+			return 2;
+		case 'apps':
+			return 3;
+		case 'management':
+			return 4;
+		default:
+			return 5;
+	}
+};
+
 const MessageActionMenu = ({ options, ...props }: MessageActionMenuProps): ReactElement => {
 	const ref = useRef(null);
-
 	const t = useTranslation();
 	const [visible, setVisible] = useState(false);
 	const isLayoutEmbedded = useEmbeddedLayout();
 
-	const groupOptions = options
-		.map(({ color, ...option }) => ({
-			...option,
-			...(color === 'alert' && { variant: 'danger' as const }),
-		}))
-		.reduce((acc, option) => {
-			const group = option.variant ? option.variant : '';
-			acc[group] = acc[group] || [];
-			if (!(isLayoutEmbedded && option.id === 'reply-directly')) acc[group].push(option);
+	const groupOptions = options.reduce((acc, option) => {
+		const { type = '' } = option;
+
+		if (option.color === 'alert') {
+			option.variant = 'danger' as const;
+		}
+
+		const order = getSectionOrder(type);
 
+		const [sectionType, options] = acc[getSectionOrder(type)] ?? [type, []];
+
+		if (!(isLayoutEmbedded && option.id === 'reply-directly')) {
+			options.push(option);
+		}
+
+		if (options.length === 0) {
 			return acc;
-		}, {} as { [key: string]: MessageActionConfigOption[] }) as {
-		[key: string]: MessageActionConfigOption[];
-	};
+		}
+
+		acc[order] = [sectionType, options];
+
+		return acc;
+	}, [] as unknown as [section: string, options: Array<MessageActionConfigOption>][]);
 
 	return (
 		<>
@@ -51,8 +76,9 @@ const MessageActionMenu = ({ options, ...props }: MessageActionMenuProps): React
 				<>
 					<Box position='fixed' inset={0} onClick={(): void => setVisible(!visible)} />
 					<ToolboxDropdown reference={ref} {...props}>
-						{Object.entries(groupOptions).map(([, options], index, arr) => (
+						{groupOptions.map(([section, options], index, arr) => (
 							<Fragment key={index}>
+								{section === 'apps' && <OptionTitle>Apps</OptionTitle>}
 								{options.map((option) => (
 									<Option
 										variant={option.variant}

diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts
@@ -133,6 +133,8 @@ export const useMessageActionAppsActionButtons = (context?: MessageActionContext
 						icon: undefined as any,
 						id: getIdForActionButton(action),
 						label: Utilities.getI18nKeyForApp(action.labelI18n, action.appId),
+						order: 7,
+						type: 'apps',
 						action: (_, params) => {
 							void actionManager.triggerActionButtonAction({
 								rid: params.message.rid,

diff --git a/apps/meteor/client/startup/actionButtons/jumpToMessage.ts b/apps/meteor/client/startup/actionButtons/jumpToMessage.ts
@@ -15,6 +15,6 @@ Meteor.startup(() => {
 			setMessageJumpQueryStringParameter(message._id);
 		},
 		order: 100,
-		group: ['message', 'menu'],
+		group: 'message',
 	});
 });
diff --git a/apps/meteor/client/startup/actionButtons/jumpToPinMessage.ts b/apps/meteor/client/startup/actionButtons/jumpToPinMessage.ts
@@ -18,6 +18,6 @@ Meteor.startup(() => {
 			return !!subscription;
 		},
 		order: 100,
-		group: ['message', 'menu'],
+		group: 'message',
 	});
 });
diff --git a/apps/meteor/client/startup/actionButtons/jumpToSearchMessage.ts b/apps/meteor/client/startup/actionButtons/jumpToSearchMessage.ts
@@ -15,6 +15,6 @@ Meteor.startup(() => {
 			setMessageJumpQueryStringParameter(message._id);
 		},
 		order: 100,
-		group: 'menu',
+		group: 'message',
 	});
 });
diff --git a/apps/meteor/client/startup/actionButtons/jumpToStarMessage.ts b/apps/meteor/client/startup/actionButtons/jumpToStarMessage.ts
@@ -23,6 +23,6 @@ Meteor.startup(() => {
 			return Boolean(message.starred?.find((star) => star._id === user?._id));
 		},
 		order: 100,
-		group: ['message', 'menu'],
+		group: 'message',
 	});
 });