[Avatars - Reports] Use centralized logic for report actions avatars everywhere in the app

__mocks__/reportData/reports.ts

@@ -1,7 +1,7 @@
 import CONST from '@src/CONST';
 import type {Report} from '@src/types/onyx';
 
-const usersIDs = [15593135, 51760358, 26502375];
+const usersIDs = [15593135, 51760358, 26502375] as const;
 const amount = 10402;
 const currency = CONST.CURRENCY.USD;
 
@@ -20,7 +20,7 @@ const participants = usersIDs.reduce((prev, userID) => {
     };
 }, {});
 
-const iouReportR14932: Report = {
+const iouReportR14932 = {
     currency,
     participants,
     total: amount,
@@ -31,9 +31,9 @@ const iouReportR14932: Report = {
     parentReportActionID: PARENT_REPORT_ACTION_ID_R14932,
     parentReportID: PARENT_REPORT_ID_R14932,
     reportID: REPORT_ID_R14932,
-    lastActorAccountID: usersIDs.at(0),
-    ownerAccountID: usersIDs.at(0),
-    managerID: usersIDs.at(1),
+    lastActorAccountID: usersIDs[0],
+    ownerAccountID: usersIDs[0],
+    managerID: usersIDs[1],
     permissions: [CONST.REPORT.PERMISSIONS.READ, CONST.REPORT.PERMISSIONS.WRITE],
     policyID: CONST.POLICY.ID_FAKE,
     reportName: CONST.REPORT.ACTIONS.TYPE.IOU,
@@ -60,7 +60,7 @@ const iouReportR14932: Report = {
     welcomeMessage: '',
     description: '',
     oldPolicyName: '',
-};
+} satisfies Report;
 
 const chatReportR14932: Report = {
     currency,

src/CONST/index.ts

@@ -292,6 +292,21 @@ const CONST = {
     AVATAR_MIN_WIDTH_PX: 80,
     AVATAR_MIN_HEIGHT_PX: 80,
 
+    REPORT_ACTION_AVATARS: {
+        TYPE: {
+            MULTIPLE: 'multiple',
+            MULTIPLE_DIAGONAL: 'multipleDiagonal',
+            MULTIPLE_HORIZONTAL: 'multipleHorizontal',
+            SUBSCRIPT: 'subscript',
+            SINGLE: 'single',
+        },
+        SORT_BY: {
+            ID: 'id',
+            NAME: 'name',
+            REVERSE: 'reverse',
+        },
+    },
+
     // Maximum width and height size in px for a selected image
     AVATAR_MAX_WIDTH_PX: 4096,
     AVATAR_MAX_HEIGHT_PX: 4096,
@@ -3124,6 +3139,7 @@ const CONST = {
         SMALL_SUBSCRIPT: 'small-subscript',
         MID_SUBSCRIPT: 'mid-subscript',
         LARGE_BORDERED: 'large-bordered',
+        MEDIUM_LARGE: 'medium-large',
         HEADER: 'header',
         MENTION_ICON: 'mention-icon',
         SMALL_NORMAL: 'small-normal',

src/components/AnonymousReportFooter.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
-import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
+// eslint-disable-next-line no-restricted-syntax
 import {signOutAndRedirectToSignIn} from '@userActions/Session';
 import type {Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
@@ -23,16 +23,13 @@ function AnonymousReportFooter({isSmallSizeLayout = false, report}: AnonymousRep
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const policy = usePolicy(report?.policyID);
-
     return (
         <View style={styles.anonymousRoomFooter(isSmallSizeLayout)}>
             <View style={[styles.flexRow, styles.flexShrink1]}>
                 <AvatarWithDisplayName
                     report={report}
                     isAnonymous
                     shouldEnableDetailPageNavigation
-                    policy={policy}
                 />
             </View>
             <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(isSmallSizeLayout)}>

src/components/Avatar.tsx

@@ -53,6 +53,9 @@ type AvatarProps = {
 
     /** Optional account id if it's user avatar or policy id if it's workspace avatar */
     avatarID?: number | string;
+
+    /** Test ID for the Avatar component */
+    testID?: string;
 };
 
 function Avatar({
@@ -67,6 +70,7 @@ function Avatar({
     type,
     name = '',
     avatarID,
+    testID = 'Avatar',
 }: AvatarProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -103,7 +107,10 @@ function Avatar({
     }
 
     return (
-        <View style={[containerStyles, styles.pointerEventsNone]}>
+        <View
+            style={[containerStyles, styles.pointerEventsNone]}
+            testID={testID}
+        >
             {typeof avatarSource === 'string' ? (
                 <View style={[iconStyle, StyleUtils.getAvatarBorderStyle(size, type), iconAdditionalStyles]}>
                     <Image

src/components/AvatarWithDisplayName.tsx

@@ -4,8 +4,6 @@ import type {ColorValue, TextStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import useOnyx from '@hooks/useOnyx';
-import type {ReportAvatarDetails} from '@hooks/useReportAvatarDetails';
-import useReportIsArchived from '@hooks/useReportIsArchived';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -15,7 +13,6 @@ import type {DisplayNameWithTooltips} from '@libs/ReportUtils';
 import {
     getChatRoomSubtitle,
     getDisplayNamesWithTooltips,
-    getIcons,
     getParentNavigationSubtitle,
     getReportName,
     isChatThread,
@@ -26,32 +23,24 @@ import {
     isMoneyRequestReport,
     isTrackExpenseReport,
     navigateToDetailsPage,
-    shouldReportShowSubscript,
 } from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Policy, Report} from '@src/types/onyx';
-import type {Icon} from '@src/types/onyx/OnyxCommon';
+import type {Report} from '@src/types/onyx';
 import {getButtonRole} from './Button/utils';
 import DisplayNames from './DisplayNames';
 import type DisplayNamesProps from './DisplayNames/types';
-import {FallbackAvatar} from './Icon/Expensicons';
-import MultipleAvatars from './MultipleAvatars';
 import ParentNavigationSubtitle from './ParentNavigationSubtitle';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
-import SingleReportAvatar from './ReportActionItem/SingleReportAvatar';
+import ReportActionAvatars from './ReportActionAvatars';
 import type {TransactionListItemType} from './SelectionList/types';
-import SubscriptAvatar from './SubscriptAvatar';
 import Text from './Text';
 
 type AvatarWithDisplayNameProps = {
     /** The report currently being looked at */
     report: OnyxEntry<Report>;
 
-    /** The policy which the user has access to and which the report is tied to */
-    policy?: OnyxEntry<Policy>;
-
     /** The size of the avatar */
     size?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
@@ -75,16 +64,6 @@ type AvatarWithDisplayNameProps = {
 
     /** Color of the secondary avatar border, usually should match the container background */
     avatarBorderColor?: ColorValue;
-
-    /** If we want to override the default avatar behavior and set a single avatar, we should pass this prop. */
-    singleAvatarDetails?: ReportAvatarDetails;
-};
-
-const fallbackIcon: Icon = {
-    source: FallbackAvatar,
-    type: CONST.ICON_TYPE_AVATAR,
-    name: '',
-    id: -1,
 };
 
 function getCustomDisplayName(
@@ -164,15 +143,13 @@ function getCustomDisplayName(
 }
 
 function AvatarWithDisplayName({
-    policy,
     report,
     isAnonymous = false,
     size = CONST.AVATAR_SIZE.DEFAULT,
     shouldEnableDetailPageNavigation = false,
     shouldEnableAvatarNavigation = true,
     shouldUseCustomSearchTitleName = false,
     transactions = [],
-    singleAvatarDetails,
     openParentReportInCurrentTab = false,
     avatarBorderColor: avatarBorderColorProp,
 }: AvatarWithDisplayNameProps) {
@@ -190,13 +167,10 @@ function AvatarWithDisplayName({
     const parentReportActionParam = report?.parentReportActionID ? parentReportActions?.[report.parentReportActionID] : undefined;
     const title = getReportName(report, undefined, parentReportActionParam, personalDetails, invoiceReceiverPolicy, reportAttributes);
     const subtitle = getChatRoomSubtitle(report, {isCreateExpenseFlow: true});
-    const parentNavigationSubtitleData = getParentNavigationSubtitle(report, policy);
+    const parentNavigationSubtitleData = getParentNavigationSubtitle(report);
     const isMoneyRequestOrReport = isMoneyRequestReport(report) || isMoneyRequest(report) || isTrackExpenseReport(report) || isInvoiceReport(report);
-    const isReportArchived = useReportIsArchived(report?.reportID);
-    const icons = getIcons(report, personalDetails, null, '', -1, policy, invoiceReceiverPolicy, isReportArchived);
     const ownerPersonalDetails = getPersonalDetailsForAccountIDs(report?.ownerAccountID ? [report.ownerAccountID] : [], personalDetails);
     const displayNamesWithTooltips = getDisplayNamesWithTooltips(Object.values(ownerPersonalDetails), false);
-    const shouldShowSubscriptAvatar = shouldReportShowSubscript(report, isReportArchived);
     const avatarBorderColor = avatarBorderColorProp ?? (isAnonymous ? theme.highlightBG : theme.componentBG);
 
     const actorAccountID = useRef<number | null>(null);
@@ -245,65 +219,34 @@ function AvatarWithDisplayName({
 
     const shouldUseFullTitle = isMoneyRequestOrReport || isAnonymous;
 
-    const getAvatar = useCallback(() => {
-        if (shouldShowSubscriptAvatar) {
-            return (
-                <SubscriptAvatar
-                    backgroundColor={avatarBorderColor}
-                    mainAvatar={icons.at(0) ?? fallbackIcon}
-                    secondaryAvatar={icons.at(1)}
-                    size={size}
-                />
-            );
-        }
-
-        if (!singleAvatarDetails || singleAvatarDetails.shouldDisplayAllActors || !singleAvatarDetails.reportPreviewSenderID) {
-            return (
-                <MultipleAvatars
-                    icons={icons}
-                    size={size}
-                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
-                />
-            );
-        }
-
-        return (
-            <SingleReportAvatar
-                reportPreviewDetails={singleAvatarDetails}
-                personalDetails={personalDetails}
-                containerStyles={[styles.actionAvatar, styles.mr3]}
-                actorAccountID={singleAvatarDetails.reportPreviewSenderID}
-            />
-        );
-    }, [StyleUtils, avatarBorderColor, icons, personalDetails, shouldShowSubscriptAvatar, singleAvatarDetails, size, styles]);
-
-    const getWrappedAvatar = useCallback(() => {
-        const avatar = getAvatar();
-
-        if (!shouldEnableAvatarNavigation) {
-            return <View accessibilityLabel={title}>{avatar}</View>;
-        }
-
-        return (
-            <View accessibilityLabel={title}>
-                <PressableWithoutFeedback
-                    onPress={showActorDetails}
-                    accessibilityLabel={title}
-                    role={getButtonRole(true)}
-                >
-                    {avatar}
-                </PressableWithoutFeedback>
-            </View>
-        );
-    }, [getAvatar, shouldEnableAvatarNavigation, showActorDetails, title]);
-
-    const WrappedAvatar = getWrappedAvatar();
+    const multipleAvatars = (
+        <ReportActionAvatars
+            singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}
+            subscriptAvatarBorderColor={avatarBorderColor}
+            size={size}
+            secondaryAvatarContainerStyle={StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)}
+            reportID={report?.reportID}
+        />
+    );
 
     const headerView = (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
             {!!report && !!title && (
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                    {WrappedAvatar}
+                    <View accessibilityLabel={title}>
+                        {shouldEnableAvatarNavigation ? (
+                            <PressableWithoutFeedback
+                                onPress={showActorDetails}
+                                accessibilityLabel={title}
+                                role={getButtonRole(true)}
+                            >
+                                {multipleAvatars}
+                            </PressableWithoutFeedback>
+                        ) : (
+                            multipleAvatars
+                        )}
+                    </View>
+
                     <View style={[styles.flex1, styles.flexColumn]}>
                         {getCustomDisplayName(
                             shouldUseCustomSearchTitleName,

src/components/HeaderWithBackButton/index.tsx

@@ -35,9 +35,7 @@ function HeaderWithBackButton({
     onDownloadButtonPress = () => {},
     onThreeDotsButtonPress = () => {},
     report,
-    policy,
     policyAvatar,
-    singleAvatarDetails,
     shouldShowReportAvatarWithDisplay = false,
     shouldShowBackButton = true,
     shouldShowBorderBottom = false,
@@ -103,8 +101,6 @@ function HeaderWithBackButton({
             return (
                 <AvatarWithDisplayName
                     report={report}
-                    policy={policy}
-                    singleAvatarDetails={singleAvatarDetails}
                     shouldEnableDetailPageNavigation={shouldEnableDetailPageNavigation}
                     openParentReportInCurrentTab={openParentReportInCurrentTab}
                 />
@@ -124,7 +120,6 @@ function HeaderWithBackButton({
         StyleUtils,
         subTitleLink,
         shouldUseHeadlineHeader,
-        policy,
         progressBarPercentage,
         report,
         shouldEnableDetailPageNavigation,
@@ -140,7 +135,6 @@ function HeaderWithBackButton({
         titleColor,
         translate,
         openParentReportInCurrentTab,
-        singleAvatarDetails,
     ]);
     const ThreeDotMenuButton = useMemo(() => {
         if (shouldShowThreeDotsButton) {

src/components/HeaderWithBackButton/types.ts

@@ -2,12 +2,11 @@ import type {ReactNode} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
-import type {ReportAvatarDetails} from '@hooks/useReportAvatarDetails';
 import type {Action} from '@hooks/useSingleExecution';
 import type {StepCounterParams} from '@src/languages/params';
 import type {TranslationPaths} from '@src/languages/types';
 import type {AnchorPosition} from '@src/styles';
-import type {Policy, Report} from '@src/types/onyx';
+import type {Report} from '@src/types/onyx';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
@@ -116,9 +115,6 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     /** Report, if we're showing the details for one and using AvatarWithDisplay */
     report?: OnyxEntry<Report>;
 
-    /** The report's policy, if we're showing the details for a report and need info about it for AvatarWithDisplay */
-    policy?: OnyxEntry<Policy>;
-
     /** Single execution function to prevent concurrent navigation actions */
     singleExecution?: <T extends unknown[]>(action: Action<T>) => Action<T>;
 
@@ -162,9 +158,6 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     shouldMinimizeMenuButton?: boolean;
     /** Whether to open the parent report link in the current tab if possible */
     openParentReportInCurrentTab?: boolean;
-
-    /** If we want to override the default avatar behavior and set a single avatar, we should pass this prop. */
-    singleAvatarDetails?: ReportAvatarDetails;
 };
 
 export type {ThreeDotsMenuItem};