chore: add tooltip to mentions (#30445)

Co-authored-by: Guilherme Gazzo <[email protected]>

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -3320,6 +3320,11 @@
   "Members_List": "Members List",
   "mention-all": "Mention All",
   "mention-all_description": "Permission to use the @all mention",
+  "Mentions_all_room_members": "Mentions all room members",
+  "Mentions_online_room_members": "Mentions online room members",
+  "Mentions_user": "Mentions user",
+  "Mentions_channel": "Mentions channel",
+  "Mentions_you": "Mentions you",
   "mention-here": "Mention Here",
   "mention-here_description": "Permission to use the @here mention",
   "Mentions": "Mentions",
@@ -5933,6 +5938,7 @@
   "Theme_match_system_description": "Automatically match the appearance of your system.",
   "Theme_high_contrast": "High contrast",
   "Theme_high_contrast_description": "Maximum tonal differentiation with bold colors and sharp contrasts provide enhanced accessibility.",
+  "Highlighted_chosen_word": "Highlighted chosen word",
   "High_contrast_upsell_title": "Enable high contrast theme",
   "High_contrast_upsell_subtitle": "Enhance your team’s reading experience",
   "High_contrast_upsell_description": "Especially designed for individuals with visual impairments or conditions such as color vision deficiency, low vision, or sensitivity to low contrast.\n\nThis theme increases contrast between text and background elements, making content more distinguishable and easier to read.",

packages/gazzodown/src/elements/PlainSpan.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import { Fragment, memo, ReactElement, useContext, useMemo } from 'react';
 
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
@@ -7,6 +8,7 @@ type PlainSpanProps = {
 };
 
 const PlainSpan = ({ text }: PlainSpanProps): ReactElement => {
+	const t = useTranslation();
 	const { highlightRegex, markRegex } = useContext(MarkupInteractionContext);
 
 	const content = useMemo(() => {
@@ -20,7 +22,7 @@ const PlainSpan = ({ text }: PlainSpanProps): ReactElement => {
 					{chunks.map((chunk, i) => {
 						if (i % 2 === 0) {
 							return (
-								<mark key={i} className='highlight-text'>
+								<mark title={t('Highlighted_chosen_word')} key={i} className='highlight-text'>
 									{chunk}
 								</mark>
 							);
@@ -51,7 +53,7 @@ const PlainSpan = ({ text }: PlainSpanProps): ReactElement => {
 		}
 
 		return text;
-	}, [text, highlightRegex, markRegex]);
+	}, [highlightRegex, markRegex, text, t]);
 
 	return <>{content}</>;
 };

packages/gazzodown/src/mentions/ChannelMentionElement.tsx

@@ -1,4 +1,5 @@
 import { Message } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import { memo, ReactElement, useContext, useMemo } from 'react';
 
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
@@ -10,6 +11,7 @@ type ChannelMentionElementProps = {
 const handleChannelMention = (mention: string, withSymbol: boolean | undefined): string => (withSymbol ? `#${mention}` : mention);
 
 const ChannelMentionElement = ({ mention }: ChannelMentionElementProps): ReactElement => {
+	const t = useTranslation();
 	const { resolveChannelMention, onChannelMentionClick, showMentionSymbol } = useContext(MarkupInteractionContext);
 
 	const resolved = useMemo(() => resolveChannelMention?.(mention), [mention, resolveChannelMention]);
@@ -20,7 +22,7 @@ const ChannelMentionElement = ({ mention }: ChannelMentionElementProps): ReactEl
 	}
 
 	return (
-		<Message.Highlight variant='link' clickable onClick={handleClick}>
+		<Message.Highlight title={t('Mentions_channel')} variant='link' clickable onClick={handleClick}>
 			{handleChannelMention(resolved.name ?? mention, showMentionSymbol)}
 		</Message.Highlight>
 	);

packages/gazzodown/src/mentions/UserMentionElement.tsx

@@ -1,4 +1,5 @@
 import { Message } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import { memo, ReactElement, useContext, useMemo } from 'react';
 
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
@@ -11,6 +12,7 @@ const handleUserMention = (mention: string | undefined, withSymbol: boolean | un
 	withSymbol ? `@${mention}` : mention;
 
 const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement => {
+	const t = useTranslation();
 	const { resolveUserMention, onUserMentionClick, isMobile, ownUserId, useRealName, showMentionSymbol } =
 		useContext(MarkupInteractionContext);
 
@@ -20,11 +22,19 @@ const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement
 	const showRealName = useRealName && !isMobile;
 
 	if (mention === 'all') {
-		return <Message.Highlight variant='relevant'>{handleUserMention('all', showMentionSymbol)}</Message.Highlight>;
+		return (
+			<Message.Highlight title={t('Mentions_all_room_members')} variant='relevant'>
+				{handleUserMention('all', showMentionSymbol)}
+			</Message.Highlight>
+		);
 	}
 
 	if (mention === 'here') {
-		return <Message.Highlight variant='relevant'>{handleUserMention('here', showMentionSymbol)}</Message.Highlight>;
+		return (
+			<Message.Highlight title={t('Mentions_online_room_members')} variant='relevant'>
+				{handleUserMention('here', showMentionSymbol)}
+			</Message.Highlight>
+		);
 	}
 
 	if (!resolved) {
@@ -34,7 +44,7 @@ const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement
 	return (
 		<Message.Highlight
 			variant={resolved._id === ownUserId ? 'critical' : 'other'}
-			title={resolved.username || resolved.name}
+			title={resolved._id === ownUserId ? t('Mentions_you') : t('Mentions_user')}
 			clickable
 			onClick={handleClick}
 			data-uid={resolved._id}

packages/password-policies/tsconfig.json

@@ -2,7 +2,8 @@
 	"extends": "../../tsconfig.base.client.json",
 	"compilerOptions": {
 		"rootDir": "./src",
-		"outDir": "./dist"
+		"outDir": "./dist",
+		"module": "commonjs"
 	},
 	"include": ["./src/**/*"]
 }