Merge pull request Expensify#64446 from Expensify/georgia-showDualNames-part1

[Report Previews] Show Dual Avatar Names if Multiple User Avatars Shown

Author: JS00001

src/pages/home/report/ReportActionItemFragment.tsx

@@ -66,6 +66,9 @@ type ReportActionItemFragmentProps = {
     actionName?: ReportActionName;
 
     moderationDecision?: DecisionName;
+
+    /** Whether the fragment should show a tooltip */
+    shouldShowTooltip?: boolean;
 };
 
 const MUTED_ACTIONS = [
@@ -96,6 +99,7 @@ function ReportActionItemFragment({
     isFragmentContainingDisplayName = false,
     displayAsGroup = false,
     moderationDecision,
+    shouldShowTooltip = true,
 }: ReportActionItemFragmentProps) {
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
@@ -172,6 +176,7 @@ function ReportActionItemFragment({
                     fragmentText={fragment.text}
                     actorIcon={actorIcon}
                     isSingleLine={isSingleLine}
+                    shouldShowTooltip={shouldShowTooltip}
                 />
             );
         }

src/pages/home/report/ReportActionItemMessageHeaderSender/index.native.tsx

@@ -2,12 +2,12 @@ import React, {useMemo} from 'react';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as EmojiUtils from '@libs/EmojiUtils';
+import {getProcessedText, splitTextWithEmojis} from '@libs/EmojiUtils';
 import type ReportActionItemMessageHeaderSenderProps from './types';
 
 function ReportActionItemMessageHeaderSender({fragmentText, accountID, delegateAccountID, actorIcon, isSingleLine}: ReportActionItemMessageHeaderSenderProps) {
     const styles = useThemeStyles();
-    const processedTextArray = useMemo(() => EmojiUtils.splitTextWithEmojis(fragmentText), [fragmentText]);
+    const processedTextArray = useMemo(() => splitTextWithEmojis(fragmentText), [fragmentText]);
 
     return (
         <UserDetailsTooltip
@@ -19,7 +19,7 @@ function ReportActionItemMessageHeaderSender({fragmentText, accountID, delegateA
                 numberOfLines={isSingleLine ? 1 : undefined}
                 style={[styles.chatItemMessageHeaderSender, isSingleLine ? styles.pre : styles.preWrap, styles.dFlex]}
             >
-                {processedTextArray.length !== 0 ? EmojiUtils.getProcessedText(processedTextArray, [styles.emojisWithTextFontSize, styles.emojisWithTextFontFamily]) : fragmentText}
+                {processedTextArray.length !== 0 ? getProcessedText(processedTextArray, [styles.emojisWithTextFontSize, styles.emojisWithTextFontFamily]) : fragmentText}
             </Text>
         </UserDetailsTooltip>
     );

src/pages/home/report/ReportActionItemMessageHeaderSender/index.tsx

@@ -2,24 +2,25 @@ import React, {useMemo} from 'react';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as EmojiUtils from '@libs/EmojiUtils';
+import {getProcessedText, splitTextWithEmojis} from '@libs/EmojiUtils';
 import type ReportActionItemMessageHeaderSenderProps from './types';
 
-function ReportActionItemMessageHeaderSender({fragmentText, accountID, delegateAccountID, actorIcon, isSingleLine}: ReportActionItemMessageHeaderSenderProps) {
+function ReportActionItemMessageHeaderSender({fragmentText, accountID, delegateAccountID, actorIcon, isSingleLine, shouldShowTooltip}: ReportActionItemMessageHeaderSenderProps) {
     const styles = useThemeStyles();
-    const processedTextArray = useMemo(() => EmojiUtils.splitTextWithEmojis(fragmentText), [fragmentText]);
+    const processedTextArray = useMemo(() => splitTextWithEmojis(fragmentText), [fragmentText]);
 
     return (
         <UserDetailsTooltip
             accountID={accountID}
             delegateAccountID={delegateAccountID}
             icon={actorIcon}
+            shouldRender={shouldShowTooltip}
         >
             <Text
                 numberOfLines={isSingleLine ? 1 : undefined}
                 style={[styles.chatItemMessageHeaderSender, isSingleLine ? styles.pre : styles.preWrap]}
             >
-                {processedTextArray.length !== 0 ? EmojiUtils.getProcessedText(processedTextArray, styles.emojisWithTextFontSize) : fragmentText}
+                {processedTextArray.length !== 0 ? getProcessedText(processedTextArray, styles.emojisWithTextFontSize) : fragmentText}
             </Text>
         </UserDetailsTooltip>
     );

src/pages/home/report/ReportActionItemMessageHeaderSender/types.ts

@@ -15,6 +15,9 @@ type ReportActionItemMessageHeaderSenderProps = {
 
     /** Actor icon */
     actorIcon?: OnyxCommon.Icon;
+
+    /** Whether the fragment should show a tooltip */
+    shouldShowTooltip?: boolean;
 };
 
 export default ReportActionItemMessageHeaderSenderProps;

src/pages/home/report/ReportActionItemSingle.tsx

@@ -200,14 +200,18 @@ function ReportActionItemSingle({
         id: avatarId,
     };
 
+    const showMultipleUserAvatarPattern = displayAllActors && !shouldShowSubscriptAvatar;
+
+    const headingText = showMultipleUserAvatarPattern ? `${icon.name} & ${secondaryAvatar.name}` : displayName;
+
     // Since the display name for a report action message is delivered with the report history as an array of fragments
     // we'll need to take the displayName from personal details and have it be in the same format for now. Eventually,
     // we should stop referring to the report history items entirely for this information.
-    const personArray = displayName
+    const personArray = headingText
         ? [
               {
                   type: 'TEXT',
-                  text: displayName,
+                  text: headingText,
               },
           ]
         : action?.person;
@@ -324,6 +328,7 @@ function ReportActionItemSingle({
                                     isSingleLine
                                     actorIcon={icon}
                                     moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
+                                    shouldShowTooltip={!showMultipleUserAvatarPattern}
                                 />
                             ))}
                         </PressableWithoutFeedback>