From 58d2ae20a6af37190bc48298c508bc07acd657a4 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 7 Oct 2024 17:37:12 +0100
Subject: [PATCH 1/4] When showing two avatars, also show both names with
 tooltip

---
 .../home/report/ReportActionItemSingle.tsx    | 124 ++++++++++++++----
 1 file changed, 98 insertions(+), 26 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index ca11a1b02d26..d04bd9c5b0f2 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -150,24 +150,40 @@ function ReportActionItemSingle({
     } else {
         secondaryAvatar = {name: '', source: '', type: 'avatar'};
     }
-    const icon = {
-        source: avatarSource ?? FallbackAvatar,
-        type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR,
-        name: primaryDisplayName ?? '',
-        id: avatarId,
-    };
+    const icon = useMemo(
+        () => ({
+            source: avatarSource ?? FallbackAvatar,
+            type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR,
+            name: primaryDisplayName ?? '',
+            id: avatarId,
+        }),
+        [avatarSource, isWorkspaceActor, primaryDisplayName, avatarId],
+    );
 
     // 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
-        ? [
-              {
-                  type: 'TEXT',
-                  text: displayName,
-              },
-          ]
-        : action?.person;
+    const personArray = useMemo(() => {
+        const baseArray = displayName
+            ? [
+                  {
+                      type: 'TEXT',
+                      text: displayName,
+                  },
+              ]
+            : [action?.person?.at(0)] ?? [];
+
+        if (displayAllActors && secondaryAvatar?.name) {
+            return [
+                ...baseArray,
+                {
+                    type: 'TEXT',
+                    text: secondaryAvatar?.name ?? '',
+                },
+            ];
+        }
+        return baseArray;
+    }, [displayName, action?.person, displayAllActors, secondaryAvatar?.name]);
 
     const reportID = report?.reportID;
     const iouReportID = iouReport?.reportID;
@@ -231,6 +247,73 @@ function ReportActionItemSingle({
             </UserDetailsTooltip>
         );
     };
+
+    const getHeading = useMemo(() => {
+        return () => {
+            if (displayAllActors && personArray.length === 2 && isReportPreviewAction) {
+                return (
+                    <View style={[styles.flexRow]}>
+                        <ReportActionItemFragment
+                            style={[styles.flex1]}
+                            key={`person-${action?.reportActionID}-${0}`}
+                            accountID={actorAccountID ?? -1}
+                            fragment={{...personArray.at(0), type: 'TEXT', text: displayName ?? ''}}
+                            delegateAccountID={action?.delegateAccountID}
+                            isSingleLine
+                            actorIcon={icon}
+                            moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
+                        />
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.chatItemMessageHeaderSender, styles.pre]}
+                        >
+                            {` & `}
+                        </Text>
+                        <ReportActionItemFragment
+                            style={[styles.flex1]}
+                            key={`person-${action?.reportActionID}-${1}`}
+                            accountID={parseInt(`${secondaryAvatar?.id ?? -1}`, 10)}
+                            fragment={{...personArray.at(1), type: 'TEXT', text: secondaryAvatar.name ?? ''}}
+                            delegateAccountID={action?.delegateAccountID}
+                            isSingleLine
+                            actorIcon={secondaryAvatar}
+                            moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
+                        />
+                    </View>
+                );
+            }
+            return (
+                <View>
+                    {personArray.map((fragment) => (
+                        <ReportActionItemFragment
+                            style={[styles.flex1]}
+                            key={`person-${action?.reportActionID}-${actorAccountID}`}
+                            accountID={actorAccountID ?? -1}
+                            fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}}
+                            delegateAccountID={action?.delegateAccountID}
+                            isSingleLine
+                            actorIcon={icon}
+                            moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
+                        />
+                    ))}
+                </View>
+            );
+        };
+    }, [
+        displayAllActors,
+        secondaryAvatar,
+        isReportPreviewAction,
+        personArray,
+        styles.flexRow,
+        styles.flex1,
+        styles.chatItemMessageHeaderSender,
+        styles.pre,
+        action,
+        actorAccountID,
+        displayName,
+        icon,
+    ]);
+
     const hasEmojiStatus = !displayAllActors && status?.emojiCode;
     const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? '');
     const statusText = status?.text ?? '';
@@ -261,18 +344,7 @@ function ReportActionItemSingle({
                             accessibilityLabel={actorHint}
                             role={CONST.ROLE.BUTTON}
                         >
-                            {personArray?.map((fragment, index) => (
-                                <ReportActionItemFragment
-                                    // eslint-disable-next-line react/no-array-index-key
-                                    key={`person-${action?.reportActionID}-${index}`}
-                                    accountID={actorAccountID ?? -1}
-                                    fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}}
-                                    delegateAccountID={action?.delegateAccountID}
-                                    isSingleLine
-                                    actorIcon={icon}
-                                    moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
-                                />
-                            ))}
+                            {getHeading()}
                         </PressableWithoutFeedback>
                         {!!hasEmojiStatus && (
                             <Tooltip text={statusTooltipText}>

From 2ff15ab5a39442ea1673a6b3db88701f48742e7c Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 7 Oct 2024 19:22:32 +0100
Subject: [PATCH 2/4] typescript null check

---
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index d04bd9c5b0f2..d3bfbaa47bd8 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -289,7 +289,7 @@ function ReportActionItemSingle({
                             style={[styles.flex1]}
                             key={`person-${action?.reportActionID}-${actorAccountID}`}
                             accountID={actorAccountID ?? -1}
-                            fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}}
+                            fragment={{...fragment, type: fragment?.type ?? '', text: fragment?.text ?? ''}}
                             delegateAccountID={action?.delegateAccountID}
                             isSingleLine
                             actorIcon={icon}

From 73f02000822db8ec54b6e6f133d29469f157731d Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 8 Oct 2024 11:31:03 +0100
Subject: [PATCH 3/4] useCallback() for function

---
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index d3bfbaa47bd8..7d0df5794f97 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -248,7 +248,7 @@ function ReportActionItemSingle({
         );
     };
 
-    const getHeading = useMemo(() => {
+    const getHeading = useCallback(() => {
         return () => {
             if (displayAllActors && personArray.length === 2 && isReportPreviewAction) {
                 return (

From 388086259714723783dd82b6678340699afad961 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 9 Oct 2024 16:14:38 +0100
Subject: [PATCH 4/4] fix indexing

---
 src/pages/home/report/ReportActionItemSingle.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index f4bdeb40f7fe..0ed4ae665781 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -284,10 +284,11 @@ function ReportActionItemSingle({
             }
             return (
                 <View>
-                    {personArray.map((fragment) => (
+                    {personArray.map((fragment, index) => (
                         <ReportActionItemFragment
                             style={[styles.flex1]}
-                            key={`person-${action?.reportActionID}-${actorAccountID}`}
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={`person-${action?.reportActionID}-${index}`}
                             accountID={actorAccountID ?? -1}
                             fragment={{...fragment, type: fragment?.type ?? '', text: fragment?.text ?? ''}}
                             delegateAccountID={action?.delegateAccountID}