Simple dual name logic

Author: grgia

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.tsx

@@ -5,7 +5,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as EmojiUtils 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]);
 
@@ -14,6 +14,7 @@ function ReportActionItemMessageHeaderSender({fragmentText, accountID, delegateA
             accountID={accountID}
             delegateAccountID={delegateAccountID}
             icon={actorIcon}
+            shouldRender={shouldShowTooltip}
         >
             <Text
                 numberOfLines={isSingleLine ? 1 : undefined}

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>