(2/2) Add support for all reportAction types in ChatListItem - use PureReportActionItem in ChatListItem

src/components/SelectionList/ChatListItem.tsx

@@ -1,18 +1,11 @@
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
-import {AttachmentContext} from '@components/AttachmentContext';
-import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
-import MultipleAvatars from '@components/MultipleAvatars';
-import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
-import TextWithTooltip from '@components/TextWithTooltip';
+import React from 'react';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import ReportActionItemDate from '@pages/home/report/ReportActionItemDate';
-import ReportActionItemFragment from '@pages/home/report/ReportActionItemFragment';
+import PureReportActionItem from '@pages/home/report/PureReportActionItem';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults';
 import BaseListItem from './BaseListItem';
 import type {ChatListItemProps, ListItem, ReportActionListItemType} from './types';
 
@@ -30,34 +23,9 @@ function ChatListItem<TItem extends ListItem>({
 }: ChatListItemProps<TItem>) {
     const reportActionItem = item as unknown as ReportActionListItemType;
     const from = reportActionItem.from;
-    const icons = [
-        {
-            type: CONST.ICON_TYPE_AVATAR,
-            source: from.avatar,
-            name: reportActionItem.formattedFrom,
-            id: from.accountID,
-        },
-    ];
     const styles = useThemeStyles();
     const theme = useTheme();
-    const StyleUtils = useStyleUtils();
-
-    const attachmentContextValue = {type: CONST.ATTACHMENT_TYPE.SEARCH};
-
-    const contextValue = {
-        anchor: null,
-        report: undefined,
-        reportNameValuePairs: undefined,
-        action: undefined,
-        transactionThreadReport: undefined,
-        checkIfContextMenuActive: () => {},
-        isDisabled: true,
-    };
 
-    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
-    const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
-
-    const mentionReportContextValue = useMemo(() => ({currentReportID: item?.reportID ?? '-1'}), [item.reportID]);
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
@@ -66,6 +34,7 @@ function ChatListItem<TItem extends ListItem>({
     });
     const pressableStyle = [
         styles.selectionListPressableItemWrapper,
+        styles.p0,
         styles.textAlignLeft,
         styles.overflowHidden,
         // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle
@@ -74,11 +43,16 @@ function ChatListItem<TItem extends ListItem>({
         styles.mh0,
         item.cursorStyle,
     ];
+
+    const personalDetails: Record<string, SearchPersonalDetails | null> = {
+        [from.accountID]: from,
+    };
+
     return (
         <BaseListItem
             item={item}
             pressableStyle={pressableStyle}
-            wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone]}
+            wrapperStyle={[styles.flex1, styles.justifyContentBetween, styles.userSelectNone]}
             containerStyle={styles.mb2}
             isFocused={isFocused}
             isDisabled={isDisabled}
@@ -95,53 +69,21 @@ function ChatListItem<TItem extends ListItem>({
             pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]}
             hoverStyle={item.isSelected && styles.activeComponentBG}
         >
-            {(hovered) => (
-                <MentionReportContext.Provider value={mentionReportContextValue}>
-                    <ShowContextMenuContext.Provider value={contextValue}>
-                        <AttachmentContext.Provider value={attachmentContextValue}>
-                            <MultipleAvatars
-                                icons={icons}
-                                shouldShowTooltip={showTooltip}
-                                secondAvatarStyle={[
-                                    StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-                                    isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
-                                    hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
-                                ]}
-                            />
-                            <View style={[styles.chatItemRight]}>
-                                <View style={[styles.chatItemMessageHeader]}>
-                                    <View style={[styles.flexShrink1, styles.mr1]}>
-                                        <TextWithTooltip
-                                            shouldShowTooltip={showTooltip}
-                                            text={reportActionItem.formattedFrom}
-                                            style={[
-                                                styles.chatItemMessageHeaderSender,
-                                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
-                                                styles.sidebarLinkTextBold,
-                                                styles.pre,
-                                            ]}
-                                        />
-                                    </View>
-                                    <ReportActionItemDate created={reportActionItem.created ?? ''} />
-                                </View>
-                                <View style={styles.chatItemMessage}>
-                                    {reportActionItem.message.map((fragment, index) => (
-                                        <ReportActionItemFragment
-                                            // eslint-disable-next-line react/no-array-index-key
-                                            key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
-                                            fragment={fragment}
-                                            actionName={reportActionItem.actionName}
-                                            source=""
-                                            accountID={from.accountID}
-                                            isFragmentContainingDisplayName={index === 0}
-                                        />
-                                    ))}
-                                </View>
-                            </View>
-                        </AttachmentContext.Provider>
-                    </ShowContextMenuContext.Provider>
-                </MentionReportContext.Provider>
-            )}
+            <PureReportActionItem
+                action={reportActionItem}
+                onPress={() => onSelectRow(item)}
+                report={undefined}
+                reportActions={[]}
+                parentReportAction={undefined}
+                displayAsGroup={false}
+                isMostRecentIOUReportAction={false}
+                shouldDisplayNewMarker={false}
+                index={item.index ?? 0}
+                isFirstVisibleReportAction={false}
+                personalDetails={personalDetails}
+                shouldDisplayContextMenu={false}
+                attachmentContextValueType={CONST.ATTACHMENT_TYPE.SEARCH}
+            />
         </BaseListItem>
     );
 }

src/libs/ReportUtils.ts

@@ -872,7 +872,7 @@ const unavailableTranslation = Localize.translateLocal('workspace.common.unavail
  */
 function getPolicyName(report: OnyxInputOrEntry<Report>, returnEmptyIfNotFound = false, policy?: OnyxInputOrEntry<Policy>): string {
     const noPolicyFound = returnEmptyIfNotFound ? '' : unavailableTranslation;
-    if (isEmptyObject(report) || (isEmptyObject(allPolicies) && !report?.policyName)) {
+    if (isEmptyObject(report) || (isEmptyObject(allPolicies) && !report?.policyName && !policy)) {
         return noPolicyFound;
     }
 

src/pages/home/report/PureReportActionItem.tsx

@@ -240,6 +240,9 @@
 
     /** A message related to a report action that has been automatically forwarded */
     reportAutomaticallyForwardedMessage?: string;
+
+    /** Type of attachment context value */
+    attachmentContextValueType?: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
 };
 
 /**
@@ -293,10 +296,11 @@
     dismissTrackExpenseActionableWhisper = () => {},
     userBillingFundID,
     reportAutomaticallyForwardedMessage,
+    attachmentContextValueType = CONST.ATTACHMENT_TYPE.REPORT,
 }: PureReportActionItemProps) {
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const reportID = report?.reportID ?? '';
+    const reportID = report?.reportID ?? action?.reportID ?? '';
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -507,7 +511,7 @@
     const contextValue = useMemo(
         () => ({
             anchor: popoverAnchorRef.current,
             report: {...report, reportID: report?.reportID ?? ''},
             reportNameValuePairs,
             action,
             transactionThreadReport,
@@ -517,9 +521,14 @@
         [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs],
     );
 
-    const attachmentContextValue = useMemo(() => ({reportID, type: CONST.ATTACHMENT_TYPE.REPORT}), [reportID]);
+    const attachmentContextValue = useMemo(() => {
+        if (attachmentContextValueType === CONST.ATTACHMENT_TYPE.SEARCH) {
+            return {type: attachmentContextValueType};
+        }
+        return {reportID, type: attachmentContextValueType};
+    }, [reportID, attachmentContextValueType]);
 
-    const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? '-1'}), [report?.reportID]);
+    const mentionReportContextValue = useMemo(() => ({currentReportID: reportID ?? '-1'}), [reportID]);
 
     const actionableItemButtons: ActionableItem[] = useMemo(() => {
         if (ReportActionsUtils.isActionableAddPaymentCard(action) && userBillingFundID === undefined && shouldRenderAddPaymentCard()) {
@@ -547,7 +556,7 @@
                     text: 'actionableMentionTrackExpense.submit',
                     key: `${action.reportActionID}-actionableMentionTrackExpense-submit`,
                     onPress: () => {
                         createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', reportID, CONST.IOU.ACTION.SUBMIT, action.reportActionID);
                     },
                     isMediumSized: true,
                 },
@@ -555,7 +564,7 @@
                     text: 'actionableMentionTrackExpense.categorize',
                     key: `${action.reportActionID}-actionableMentionTrackExpense-categorize`,
                     onPress: () => {
                         createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', reportID, CONST.IOU.ACTION.CATEGORIZE, action.reportActionID);
                     },
                     isMediumSized: true,
                 },
@@ -563,7 +572,7 @@
                     text: 'actionableMentionTrackExpense.share',
                     key: `${action.reportActionID}-actionableMentionTrackExpense-share`,
                     onPress: () => {
                         createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', reportID, CONST.IOU.ACTION.SHARE, action.reportActionID);
                     },
                     isMediumSized: true,
                 },
@@ -654,11 +663,11 @@
                 ReportActionsUtils.getOriginalMessage(action)?.type === CONST.IOU.REPORT_ACTION_TYPE.TRACK)
         ) {
             // There is no single iouReport for bill splits, so only 1:1 requests require an iouReportID
             const iouReportID = ReportActionsUtils.getOriginalMessage(action)?.IOUReportID ? ReportActionsUtils.getOriginalMessage(action)?.IOUReportID?.toString() ?? '-1' : '-1';
             children = (
                 <MoneyRequestAction
                     // If originalMessage.iouReportID is set, this is a 1:1 IOU expense in a DM chat whose reportID is report.chatReportID
                     chatReportID={ReportActionsUtils.getOriginalMessage(action)?.IOUReportID ? report?.chatReportID ?? '' : reportID}
                     requestReportID={iouReportID}
                     reportID={reportID}
                     action={action}
@@ -675,7 +684,7 @@
             children = (
                 <TripRoomPreview
                     action={action}
                     chatReportID={ReportActionsUtils.getOriginalMessage(action)?.linkedReportID ?? '-1'}
                     isHovered={hovered}
                     contextMenuAnchor={popoverAnchorRef.current}
                     containerStyles={displayAsGroup ? [] : [styles.mt2]}
@@ -999,6 +1008,7 @@
                         ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) &&
                         !ReportActionsUtils.isPendingRemove(action)
                     }
+                    personalDetails={personalDetails}
                 >
                     {content}
                 </ReportActionItemSingle>

src/pages/home/report/ReportActionItemSingle.tsx

@@ -7,7 +7,6 @@ import Avatar from '@components/Avatar';
 import {FallbackAvatar} from '@components/Icon/Expensicons';
 import MultipleAvatars from '@components/MultipleAvatars';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import {usePersonalDetails} from '@components/OnyxProvider';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import SubscriptAvatar from '@components/SubscriptAvatar';
 import Text from '@components/Text';
@@ -24,11 +23,13 @@ import Navigation from '@libs/Navigation/Navigation';
 import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
 import {getReportActionMessage} from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
+import type {AvatarSource} from '@libs/UserUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Report, ReportAction} from '@src/types/onyx';
-import type {Icon} from '@src/types/onyx/OnyxCommon';
+import type {PersonalDetailsList, Policy, Report, ReportAction} from '@src/types/onyx';
+import type {Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
+import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import ReportActionItemDate from './ReportActionItemDate';
 import ReportActionItemFragment from './ReportActionItemFragment';
@@ -57,6 +58,12 @@ type ReportActionItemSingleProps = Partial<ChildrenProps> & {
 
     /** If the action is being hovered */
     isHovered?: boolean;
+
+    /** Personal details list */
+    personalDetails?: PersonalDetailsList | Record<string, SearchPersonalDetails | null>;
+
+    /** Current connected policy */
+    policy?: OnyxEntry<Policy>;
 };
 
 const showUserDetails = (accountID: string) => {
@@ -77,21 +84,27 @@ function ReportActionItemSingle({
     report,
     iouReport,
     isHovered = false,
+    personalDetails,
+    policy,
 }: ReportActionItemSingleProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const personalDetails = usePersonalDetails();
-    const policy = usePolicy(report?.policyID);
+    const onyxPolicy = usePolicy(report?.policyID);
+    const reportPolicy = policy ?? onyxPolicy;
     const delegatePersonalDetails = personalDetails?.[action?.delegateAccountID ?? ''];
     const ownerAccountID = iouReport?.ownerAccountID ?? action?.childOwnerAccountID;
     const isReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW;
     const actorAccountID = ReportUtils.getReportActionActorAccountID(action, iouReport, report);
     const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`);
 
     let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID);
-    const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails?.[actorAccountID ?? -1] ?? {};
+    const {avatar, login} = personalDetails?.[actorAccountID ?? -1] ?? {};
+    const pendingFields = personalDetails && 'pendingFields' in personalDetails ? personalDetails.pendingFields : undefined;
+    const status = personalDetails && 'status' in personalDetails ? personalDetails.status : undefined;
+    const fallbackIcon = personalDetails && 'fallbackIcon' in personalDetails && personalDetails.fallbackIcon !== null ? personalDetails.fallbackIcon : undefined;
+
     const accountOwnerDetails = getPersonalDetailByEmail(login ?? '');
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     let actorHint = (login || (displayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
@@ -104,9 +117,9 @@ function ReportActionItemSingle({
     let avatarId: number | string | undefined = actorAccountID;
 
     if (isWorkspaceActor) {
-        displayName = ReportUtils.getPolicyName(report, undefined, policy);
+        displayName = ReportUtils.getPolicyName(report, undefined, reportPolicy);
         actorHint = displayName;
-        avatarSource = ReportUtils.getWorkspaceIcon(report, policy).source;
+        avatarSource = ReportUtils.getWorkspaceIcon(report, reportPolicy).source;
         avatarId = report?.policyID;
     } else if (action?.delegateAccountID && personalDetails?.[action?.delegateAccountID]) {
         displayName = delegatePersonalDetails?.displayName ?? '';
@@ -145,7 +158,7 @@ function ReportActionItemSingle({
     } else if (!isWorkspaceActor) {
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         const avatarIconIndex = report?.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1;
-        const reportIcons = ReportUtils.getIcons(report, {});
+        const reportIcons = ReportUtils.getIcons(report, personalDetails, null, undefined, undefined, reportPolicy);
 
         secondaryAvatar = reportIcons.at(avatarIconIndex) ?? {name: '', source: '', type: CONST.ICON_TYPE_AVATAR};
     } else if (ReportUtils.isInvoiceReport(iouReport)) {
@@ -237,17 +250,17 @@ function ReportActionItemSingle({
                         type={icon.type}
                         name={icon.name}
                         avatarID={icon.id}
-                        fallbackIcon={fallbackIcon}
+                        fallbackIcon={fallbackIcon as AvatarSource}
                     />
                 </View>
             </UserDetailsTooltip>
         );
     };
-    const hasEmojiStatus = !displayAllActors && status?.emojiCode;
-    const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? '');
-    const statusText = status?.text ?? '';
+    const hasEmojiStatus = !displayAllActors && status && 'emojiCode' in status && status?.emojiCode;
+    const statusClearAfter = status && 'clearAfter' in status ? String(status?.clearAfter) ?? '' : '';
+    const formattedDate = DateUtils.getStatusUntilDate(statusClearAfter);
+    const statusText = status && 'text' in status ? String(status?.text) ?? '' : '';
     const statusTooltipText = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText;
-
     return (
         <View style={[styles.chatItem, wrapperStyle]}>
             <PressableWithoutFeedback
@@ -259,7 +272,7 @@ function ReportActionItemSingle({
                 accessibilityLabel={actorHint}
                 role={CONST.ROLE.BUTTON}
             >
-                <OfflineWithFeedback pendingAction={pendingFields?.avatar ?? undefined}>{getAvatar()}</OfflineWithFeedback>
+                <OfflineWithFeedback pendingAction={pendingFields?.avatar as PendingAction | undefined}>{getAvatar()}</OfflineWithFeedback>
             </PressableWithoutFeedback>
             <View style={[styles.chatItemRight]}>
                 {showHeader ? (
@@ -291,7 +304,7 @@ function ReportActionItemSingle({
                                 <Text
                                     style={styles.userReportStatusEmoji}
                                     numberOfLines={1}
-                                >{`${status?.emojiCode}`}</Text>
+                                >{`${String(status?.emojiCode ?? '')}`}</Text>
                             </Tooltip>
                         )}
                         <ReportActionItemDate created={action?.created ?? ''} />

tests/perf-test/SearchRouter.perf-test.tsx

@@ -86,6 +86,7 @@ jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType
 
     return WithNavigationFocus;
 });
+jest.mock('@src/components/ConfirmedRoute.tsx');
 
 const getMockedReports = (length = 100) =>
     createCollection<Report>(

tests/perf-test/SelectionList.perf-test.tsx

@@ -84,6 +84,8 @@ jest.mock('../../src/hooks/useScreenWrapperTransitionStatus', () => ({
     })),
 }));
 
+jest.mock('@src/components/ConfirmedRoute.tsx');
+
 function SelectionListWrapper({canSelectMultiple}: SelectionListWrapperProps) {
     const [selectedIds, setSelectedIds] = useState<string[]>([]);
 

tests/ui/ResizeScreenTests.tsx

@@ -21,6 +21,7 @@ jest.mock('@libs/getIsNarrowLayout', () => jest.fn());
 jest.mock('@pages/settings/InitialSettingsPage');
 jest.mock('@pages/settings/Profile/ProfilePage');
 jest.mock('@libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar');
+jest.mock('@src/components/ConfirmedRoute.tsx');
 
 const DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE: ResponsiveLayoutResult = {
     shouldUseNarrowLayout: true,

tests/ui/WorkspaceSwitcherTest.tsx

@@ -26,6 +26,9 @@ jest.mock('@react-navigation/native', () => {
         triggerTransitionEnd: jest.fn(),
     };
 });
+
+jest.mock('@src/components/ConfirmedRoute.tsx');
+
 TestHelper.setupApp();
 
 async function signInAndGetApp(): Promise<void> {

tests/unit/CalendarPickerTest.tsx

@@ -36,6 +36,8 @@ jest.mock('../../src/hooks/useLocalize', () =>
     })),
 );
 
+jest.mock('@src/components/ConfirmedRoute.tsx');
+
 describe('CalendarPicker', () => {
     test('renders calendar component', () => {
         render(<CalendarPicker />);

tests/unit/GoogleTagManagerTest.tsx

@@ -14,6 +14,7 @@ jest.mock('@libs/GoogleTagManager');
 
 // Mock the Overlay since it doesn't work in tests
 jest.mock('@libs/Navigation/AppNavigator/Navigators/Overlay');
+jest.mock('@src/components/ConfirmedRoute.tsx');
 
 describe('GoogleTagManagerTest', () => {
     const accountID = 123456;