[WIP] Fix avatars not showing up in Reports page

src/components/AvatarWithDisplayName.tsx

@@ -32,7 +32,7 @@ import {
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Report} from '@src/types/onyx';
+import type {PersonalDetailsList, Report} from '@src/types/onyx';
 import {getButtonRole} from './Button/utils';
 import DisplayNames from './DisplayNames';
 import type DisplayNamesProps from './DisplayNames/types';
@@ -81,6 +81,9 @@ type AvatarWithDisplayNameProps = {
 
     /** The style of the parent navigation status container */
     parentNavigationStatusContainerStyles?: StyleProp<ViewStyle>;
+
+    /** Optional personal details list override */
+    personalDetailsList?: PersonalDetailsList;
 };
 
 function getCustomDisplayName(
@@ -173,10 +176,12 @@ function AvatarWithDisplayName({
     customDisplayNameStyle = {},
     parentNavigationSubtitleTextStyles,
     parentNavigationStatusContainerStyles = {},
+    personalDetailsList,
 }: AvatarWithDisplayNameProps) {
     const {localeCompare, formatPhoneNumber} = useLocalize();
     const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID}`, {canEvict: false, canBeMissing: !report?.parentReportID});
-    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false}) ?? CONST.EMPTY_OBJECT;
+    const [personalDetailsOnyx] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false}) ?? CONST.EMPTY_OBJECT;
+    const personalDetails = personalDetailsList ?? personalDetailsOnyx ?? CONST.EMPTY_OBJECT;
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -255,6 +260,7 @@ function AvatarWithDisplayName({
             size={size}
             secondaryAvatarContainerStyle={StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)}
             reportID={report?.reportID}
+            personalDetailsList={personalDetails}
         />
     );
 

src/components/ReportActionAvatars/index.tsx

@@ -5,7 +5,7 @@ import type {ValueOf} from 'type-fest';
 import useOnyx from '@hooks/useOnyx';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {CompanyCardFeed, InvitedEmailsToAccountIDs, Policy, Report, ReportAction} from '@src/types/onyx';
+import type {CompanyCardFeed, InvitedEmailsToAccountIDs, PersonalDetailsList, Policy, Report, ReportAction} from '@src/types/onyx';
 import type {HorizontalStacking} from './ReportActionAvatar';
 import ReportActionAvatar from './ReportActionAvatar';
 import useReportActionAvatars from './useReportActionAvatars';
@@ -72,6 +72,9 @@ type ReportActionAvatarsProps = {
 
     /** chatReportID needed for the avatars logic. When provided, this will be used as a fallback if the snapshot is undefined */
     chatReportID?: string;
+
+    /** Optional personal details map to use instead of the global Onyx personal details */
+    personalDetailsList?: PersonalDetailsList;
 };
 
 /**
@@ -105,6 +108,7 @@ function ReportActionAvatars({
     invitedEmailsToAccountIDs,
     shouldUseCustomFallbackAvatar = false,
     chatReportID,
+    personalDetailsList,
 }: ReportActionAvatarsProps) {
     const accountIDs = passedAccountIDs.filter((accountID) => accountID !== CONST.DEFAULT_NUMBER_ID);
 
@@ -140,6 +144,7 @@ function ReportActionAvatars({
         invitedEmailsToAccountIDs,
         shouldUseCustomFallbackAvatar,
         chatReportID,
+        personalDetailsList,
     });
 
     let avatarType: ValueOf<typeof CONST.REPORT_ACTION_AVATARS.TYPE> = notPreciseAvatarType;

src/components/ReportActionAvatars/useReportActionAvatars.ts

@@ -1,6 +1,6 @@
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import {FallbackAvatar} from '@components/Icon/Expensicons';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -24,7 +24,7 @@
 import {getDefaultAvatar} from '@libs/UserAvatarUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {InvitedEmailsToAccountIDs, OnyxInputOrEntry, Policy, Report, ReportAction} from '@src/types/onyx';
+import type {InvitedEmailsToAccountIDs, OnyxInputOrEntry, PersonalDetailsList, Policy, Report, ReportAction} from '@src/types/onyx';
 import type {Icon as IconType} from '@src/types/onyx/OnyxCommon';
 import useReportPreviewSenderID from './useReportPreviewSenderID';
 
@@ -40,6 +40,7 @@
     invitedEmailsToAccountIDs,
     shouldUseCustomFallbackAvatar = false,
     chatReportID: passedChatReportID,
+    personalDetailsList,
 }: {
     report: OnyxEntry<Report>;
     action: OnyxEntry<ReportAction>;
@@ -52,16 +53,17 @@
     invitedEmailsToAccountIDs?: InvitedEmailsToAccountIDs;
     shouldUseCustomFallbackAvatar?: boolean;
     chatReportID?: string;
+    personalDetailsList?: PersonalDetailsList;
 }) {
     /* Get avatar type */
     const allPersonalDetails = usePersonalDetails();
     const {formatPhoneNumber} = useLocalize();
-    const [personalDetailsFromSnapshot] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+    const [personalDetailsFromOnyx] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
         canBeMissing: true,
     });
     // When the search hash changes, personalDetails from the snapshot will be undefined if it hasn't been fetched yet.
     // Therefore, we will fall back to allPersonalDetails while the data is being fetched.
-    const personalDetails = personalDetailsFromSnapshot ?? allPersonalDetails;
+    const personalDetails = personalDetailsList ?? personalDetailsFromOnyx ?? allPersonalDetails;
 
     const isReportAChatReport = report?.type === CONST.REPORT.TYPE.CHAT && report?.chatType !== CONST.REPORT.CHAT_TYPE.TRIP_ROOM;
 

src/components/ReportSearchHeader/index.tsx

@@ -5,7 +5,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type ReportSearchHeaderProps from './types';
 
-function ReportSearchHeader({report, style, transactions, avatarBorderColor}: ReportSearchHeaderProps) {
+function ReportSearchHeader({report, style, transactions, avatarBorderColor, personalDetailsList}: ReportSearchHeaderProps) {
     const styles = useThemeStyles();
     const {isLargeScreenWidth} = useResponsiveLayout();
 
@@ -19,12 +19,25 @@ function ReportSearchHeader({report, style, transactions, avatarBorderColor}: Re
                 shouldEnableDetailPageNavigation={false}
                 shouldEnableAvatarNavigation={false}
                 avatarBorderColor={avatarBorderColor}
+                personalDetailsList={personalDetailsList}
                 customDisplayNameStyle={styles.fontWeightNormal}
                 parentNavigationSubtitleTextStyles={[styles.textLineHeightNormal, styles.minHeight4, styles.mt1, !isLargeScreenWidth && styles.textMicro]}
                 parentNavigationStatusContainerStyles={isLargeScreenWidth ? styles.mt1 : styles.mt0Half}
             />
         );
-    }, [report, transactions, avatarBorderColor, styles.fontWeightNormal, styles.textLineHeightNormal, styles.minHeight4, styles.mt1, isLargeScreenWidth, styles.textMicro, styles.mt0Half]);
+    }, [
+        report,
+        transactions,
+        avatarBorderColor,
+        personalDetailsList,
+        styles.fontWeightNormal,
+        styles.textLineHeightNormal,
+        styles.minHeight4,
+        styles.mt1,
+        isLargeScreenWidth,
+        styles.textMicro,
+        styles.mt0Half,
+    ]);
 
     return (
         <View

src/components/ReportSearchHeader/types.ts

@@ -1,7 +1,7 @@
 import type {ColorValue, StyleProp, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {TransactionListItemType} from '@components/SelectionListWithSections/types';
-import type {Report} from '@src/types/onyx';
+import type {PersonalDetailsList, Report} from '@src/types/onyx';
 
 type ReportSearchHeaderProps = {
     /** Report, if we're showing the details for one and using AvatarWithDisplay */
@@ -15,6 +15,9 @@ type ReportSearchHeaderProps = {
 
     /** Color of the secondary avatar border, usually should match the container background */
     avatarBorderColor?: ColorValue;
+
+    /** Optional personal details list to use instead of the global collection */
+    personalDetailsList?: PersonalDetailsList;
 };
 
 export default ReportSearchHeaderProps;

src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx

@@ -47,6 +47,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['DotIndicator']);
 
     const snapshotData = snapshot?.data;
+    const personalDetailsList = snapshotData?.personalDetailsList;
 
     const snapshotReport = useMemo(() => {
         return (snapshotData?.[`${ONYXKEYS.COLLECTION.REPORT}${reportItem.reportID}`] ?? {}) as Report;
@@ -191,6 +192,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
                         isDisabledCheckbox={isDisabledCheckbox}
                         isHovered={hovered}
                         isFocused={isFocused}
+                        personalDetailsList={personalDetailsList}
                     />
                     {getDescription}
                 </View>

src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx

@@ -16,7 +16,7 @@ import getBase62ReportID from '@libs/getBase62ReportID';
 import {getMoneyRequestSpendBreakdown} from '@libs/ReportUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import type {Policy} from '@src/types/onyx';
+import type {PersonalDetailsList, Policy} from '@src/types/onyx';
 import ActionCell from './ActionCell';
 import DateCell from './DateCell';
 import ExportedIconCell from './ExportedIconCell';
@@ -43,6 +43,7 @@ type ExpenseReportListItemRowProps = {
     isHovered?: boolean;
     isFocused?: boolean;
     columns?: SearchColumnType[];
+    personalDetailsList?: PersonalDetailsList;
 };
 
 function ExpenseReportListItemRow({
@@ -61,6 +62,7 @@ function ExpenseReportListItemRow({
     columns = [],
     isHovered = false,
     isFocused = false,
+    personalDetailsList,
 }: ExpenseReportListItemRowProps) {
     const StyleUtils = useStyleUtils();
     const styles = useThemeStyles();
@@ -250,6 +252,7 @@ function ExpenseReportListItemRow({
                                 style={[{maxWidth: variables.reportSearchHeaderMaxWidth}]}
                                 transactions={item.transactions}
                                 avatarBorderColor={finalAvatarBorderColor}
+                                personalDetailsList={personalDetailsList}
                             />
                         </View>
                     </View>
@@ -286,6 +289,7 @@ function ExpenseReportListItemRow({
                         policy={policy}
                         shouldShowTooltip={showTooltip}
                         subscriptAvatarBorderColor={finalAvatarBorderColor}
+                        personalDetailsList={personalDetailsList}
                     />
                 </View>