Merge branch 'develop' into fix-dm-notifications-for-mentions

.github/actions/meteor-build/action.yml

@@ -115,7 +115,7 @@ runs:
           echo "Coverage enabled"
         fi
 
-        yarn build:ci -- --directory /tmp/dist
+        yarn build:ci
 
     - name: Prepare build
       shell: bash

apps/meteor/app/reactions/client/init.ts

@@ -13,8 +13,8 @@ Meteor.startup(() => {
 		context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
 		action(event, props) {
 			const { message = messageArgs(this).msg, chat } = props;
-			event.stopPropagation();
-			chat?.emojiPicker.open(event.currentTarget! as Element, (emoji) => sdk.call('setReaction', `:${emoji}:`, message._id));
+			event?.stopPropagation();
+			chat?.emojiPicker.open(event?.currentTarget as Element, (emoji) => sdk.call('setReaction', `:${emoji}:`, message._id));
 		},
 		condition({ message, user, room, subscription }) {
 			if (!room) {

apps/meteor/app/threads/client/messageAction/replyInThread.ts

@@ -19,7 +19,7 @@ Meteor.startup(() => {
 			context: ['message', 'message-mobile', 'federated', 'videoconf'],
 			action(e, props) {
 				const { message = messageArgs(this).msg } = props;
-				e.stopPropagation();
+				e?.stopPropagation();
 				router.navigate({
 					name: router.getRouteName()!,
 					params: {

apps/meteor/app/ui-utils/client/lib/MessageAction.ts

@@ -48,7 +48,7 @@ export type MessageActionConfig = {
 	context?: MessageActionContext[];
 	action: (
 		this: any,
-		e: Pick<Event, 'preventDefault' | 'stopPropagation' | 'currentTarget'>,
+		e: Pick<Event, 'preventDefault' | 'stopPropagation' | 'currentTarget'> | undefined,
 		{
 			message,
 			tabbar,

apps/meteor/client/components/message/MessageToolbarHolder.tsx

@@ -2,11 +2,10 @@ import type { IMessage } from '@rocket.chat/core-typings';
 import { MessageToolbarWrapper } from '@rocket.chat/fuselage';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
-import React, { Suspense, lazy, memo, useRef, useState } from 'react';
+import React, { Suspense, lazy, memo, useState } from 'react';
 
 import type { MessageActionContext } from '../../../app/ui-utils/client/lib/MessageAction';
 import { useChat } from '../../views/room/contexts/ChatContext';
-import { useIsVisible } from '../../views/room/hooks/useIsVisible';
 
 type MessageToolbarHolderProps = {
 	message: IMessage;
@@ -16,14 +15,8 @@ type MessageToolbarHolderProps = {
 const MessageToolbar = lazy(() => import('./toolbar/MessageToolbar'));
 
 const MessageToolbarHolder = ({ message, context }: MessageToolbarHolderProps): ReactElement => {
-	const ref = useRef(null);
-
-	const [isVisible] = useIsVisible(ref);
-	const [kebabOpen, setKebabOpen] = useState(false);
-
-	const showToolbox = isVisible || kebabOpen;
-
 	const chat = useChat();
+	const [showToolbar, setShowToolbar] = useState(false);
 
 	const depsQueryResult = useQuery(['toolbox', message._id, context], async () => {
 		const room = await chat?.data.findRoom();
@@ -35,15 +28,15 @@ const MessageToolbarHolder = ({ message, context }: MessageToolbarHolderProps):
 	});
 
 	return (
-		<MessageToolbarWrapper ref={ref} visible={kebabOpen}>
-			{showToolbox && depsQueryResult.isSuccess && depsQueryResult.data.room && (
+		<MessageToolbarWrapper visible={showToolbar}>
+			{depsQueryResult.isSuccess && depsQueryResult.data.room && (
 				<Suspense fallback={null}>
 					<MessageToolbar
-						onChangeMenuVisibility={setKebabOpen}
 						message={message}
 						messageContext={context}
 						room={depsQueryResult.data.room}
 						subscription={depsQueryResult.data.subscription}
+						onChangeMenuVisibility={setShowToolbar}
 					/>
 				</Suspense>
 			)}

apps/meteor/client/components/message/toolbar/MessageActionMenu.tsx

@@ -1,119 +1,61 @@
-import { MessageToolbarItem, Option, OptionDivider, OptionTitle } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ComponentProps, MouseEvent, MouseEventHandler, ReactElement } from 'react';
-import React, { Fragment, useCallback, useRef, useState } from 'react';
+import type { MouseEvent, ReactElement } from 'react';
+import React from 'react';
 
 import type { MessageActionConfig } from '../../../../app/ui-utils/client/lib/MessageAction';
-import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
-import ToolbarDropdown from './ToolbarDropdown';
+import GenericMenu from '../../GenericMenu/GenericMenu';
+import type { GenericMenuItemProps } from '../../GenericMenu/GenericMenuItem';
 
 type MessageActionConfigOption = Omit<MessageActionConfig, 'condition' | 'context' | 'order' | 'action'> & {
-	action: ((event: MouseEvent<HTMLElement, MouseEvent>) => void) & MouseEventHandler<HTMLElement>;
+	action: (e?: MouseEvent<HTMLElement>) => void;
+};
+
+type MessageActionSection = {
+	id: string;
+	title: string;
+	items: GenericMenuItemProps[];
 };
 
 type MessageActionMenuProps = {
 	onChangeMenuVisibility: (visible: boolean) => void;
 	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, onChangeMenuVisibility, ...props }: MessageActionMenuProps): ReactElement => {
-	const buttonRef = useRef<HTMLButtonElement | null>(null);
+const MessageActionMenu = ({ options, onChangeMenuVisibility }: MessageActionMenuProps): ReactElement => {
 	const t = useTranslation();
-	const [visible, setVisible] = useState(false);
-	const isLayoutEmbedded = useEmbeddedLayout();
-
-	const handleChangeMenuVisibility = useCallback(
-		(visible: boolean): void => {
-			setVisible(visible);
-			onChangeMenuVisibility(visible);
-		},
-		[onChangeMenuVisibility],
-	);
 
-	const groupOptions = options.reduce((acc, option) => {
-		const { type = '' } = option;
+	const groupOptions = options
+		.map((option) => ({
+			variant: option.color === 'alert' ? 'danger' : '',
+			id: option.id,
+			icon: option.icon,
+			content: t(option.label),
+			onClick: option.action,
+			type: option.type,
+		}))
+		.reduce((acc, option) => {
+			const group = option.type ? option.type : '';
+			const section = acc.find((section: { id: string }) => section.id === group);
+			if (section) {
+				section.items.push(option);
+				return acc;
+			}
+			const newSection = { id: group, title: group === 'apps' ? t('Apps') : '', items: [option] };
+			acc.push(newSection);
 
-		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;
-		}
-
-		acc[order] = [sectionType, options];
-
-		return acc;
-	}, [] as unknown as [section: string, options: Array<MessageActionConfigOption>][]);
+		}, [] as unknown as MessageActionSection[]);
 
-	const handleClose = useCallback(() => {
-		handleChangeMenuVisibility(false);
-	}, [handleChangeMenuVisibility]);
 	return (
-		<>
-			<MessageToolbarItem
-				ref={buttonRef}
-				icon='kebab'
-				onClick={(): void => handleChangeMenuVisibility(!visible)}
-				data-qa-id='menu'
-				data-qa-type='message-action-menu'
-				title={t('More')}
-			/>
-			{visible && (
-				<>
-					<ToolbarDropdown handleClose={handleClose} reference={buttonRef} {...props}>
-						{groupOptions.map(([section, options], index, arr) => (
-							<Fragment key={index}>
-								{section === 'apps' && <OptionTitle>Apps</OptionTitle>}
-								{options.map((option) => (
-									<Option
-										variant={option.variant}
-										key={option.id}
-										id={option.id}
-										icon={option.icon as ComponentProps<typeof Option>['icon']}
-										label={t(option.label)}
-										onClick={(e) => {
-											handleClose();
-											option.action(e);
-										}}
-										data-qa-type='message-action'
-										data-qa-id={option.id}
-										role={option.role ? option.role : 'button'}
-										gap={!option.icon && option.type === 'apps'}
-									/>
-								))}
-								{index !== arr.length - 1 && <OptionDivider />}
-							</Fragment>
-						))}
-					</ToolbarDropdown>
-				</>
-			)}
-		</>
+		<GenericMenu
+			onOpenChange={onChangeMenuVisibility}
+			detached
+			title={t('More')}
+			data-qa-id='menu'
+			data-qa-type='message-action-menu'
+			sections={groupOptions}
+			placement='bottom-end'
+		/>
 	);
 };
 

apps/meteor/client/components/message/toolbar/MessageToolbar.tsx

@@ -12,6 +12,7 @@ import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/M
 import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { useEmojiPickerData } from '../../../contexts/EmojiPickerContext';
 import { useMessageActionAppsActionButtons } from '../../../hooks/useAppActionButtons';
+import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
 import EmojiElement from '../../../views/composer/EmojiPicker/EmojiElement';
 import { useIsSelecting } from '../../../views/room/MessageList/contexts/SelectedMessagesContext';
 import { useAutoTranslate } from '../../../views/room/MessageList/hooks/useAutoTranslate';
@@ -59,6 +60,7 @@ const MessageToolbar = ({
 	const t = useTranslation();
 	const user = useUser() ?? undefined;
 	const settings = useSettings();
+	const isLayoutEmbedded = useEmbeddedLayout();
 
 	const toolbarRef = useRef(null);
 	const { toolbarProps } = useToolbar(props, toolbarRef);
@@ -89,7 +91,7 @@ const MessageToolbar = ({
 
 		return {
 			message: toolboxItems.filter((action) => !hiddenActions.includes(action.id)),
-			menu: menuItems.filter((action) => !hiddenActions.includes(action.id)),
+			menu: menuItems.filter((action) => !(isLayoutEmbedded && action.id === 'reply-directly') && !hiddenActions.includes(action.id)),
 		};
 	});
 
@@ -130,11 +132,11 @@ const MessageToolbar = ({
 				))}
 			{actionsQueryResult.isSuccess && actionsQueryResult.data.menu.length > 0 && (
 				<MessageActionMenu
-					onChangeMenuVisibility={onChangeMenuVisibility}
 					options={[...actionsQueryResult.data?.menu, ...(actionButtonApps.data ?? [])].filter(Boolean).map((action) => ({
 						...action,
-						action: (e): void => action.action(e, { message, tabbar: toolbox, room, chat, autoTranslateOptions }),
+						action: (e) => action.action(e, { message, tabbar: toolbox, room, chat, autoTranslateOptions }),
 					}))}
+					onChangeMenuVisibility={onChangeMenuVisibility}
 					data-qa-type='message-action-menu-options'
 				/>
 			)}

apps/meteor/package.json

@@ -14,7 +14,7 @@
 	],
 	"scripts": {
 		"start": "meteor",
-		"build:ci": "METEOR_DISABLE_OPTIMISTIC_CACHING=1 meteor build --server-only",
+		"build:ci": "METEOR_DISABLE_OPTIMISTIC_CACHING=1 meteor build --server-only --directory /tmp/dist",
 		"dev": "meteor --exclude-archs \"web.browser.legacy, web.cordova\"",
 		"dsv": "meteor npm run dev",
 		"ha": "meteor npm run ha:start",