ReportActionAvatars -> UserAvatar for single avatars migration

src/components/Avatar/connected/AccountAvatar.tsx

@@ -0,0 +1,55 @@
+import SingleAvatar from '@components/Avatar/layouts/SingleAvatar';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
+
+import useDefaultAvatars from '@hooks/useDefaultAvatars';
+import useStyleUtils from '@hooks/useStyleUtils';
+
+import {buildUserIcon} from '@libs/UserAvatarUtils';
+
+import CONST from '@src/CONST';
+
+import type {StyleProp, ViewStyle} from 'react-native';
+import type {ValueOf} from 'type-fest';
+
+import React from 'react';
+
+type AccountAvatarProps = {
+    /** Account ID of the user to display the avatar for */
+    accountID: number;
+
+    /** Size of the avatar */
+    size?: ValueOf<typeof CONST.AVATAR_SIZE>;
+
+    /** Whether to show the tooltip on hover */
+    shouldShowTooltip?: boolean;
+
+    /** Display name used as a fallback for the avatar tooltip */
+    fallbackDisplayName?: string;
+
+    /** Container styles for the avatar. Replaces the size-derived default container styles when provided */
+    containerStyle?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Renders a single account's avatar, resolving the icon from the personal-details context (zero Onyx subscriptions).
+ * Use whenever exactly one account is rendered. Pass `Avatar/UserAvatar` a `source` instead when the avatar is already resolved.
+ */
+function AccountAvatar({accountID, size = CONST.AVATAR_SIZE.DEFAULT, shouldShowTooltip = true, fallbackDisplayName, containerStyle}: AccountAvatarProps) {
+    const personalDetails = usePersonalDetails();
+    const defaultAvatars = useDefaultAvatars();
+    const StyleUtils = useStyleUtils();
+
+    const icon = buildUserIcon({accountID, personalDetails, defaultAvatars});
+
+    return (
+        <SingleAvatar
+            avatar={icon}
+            size={size}
+            containerStyles={containerStyle ?? StyleUtils.getContainerStyles(size)}
+            shouldShowTooltip={shouldShowTooltip}
+            fallbackDisplayName={fallbackDisplayName}
+        />
+    );
+}
+
+export default AccountAvatar;

src/components/Avatar/layouts/SingleAvatar.tsx

@@ -45,7 +45,7 @@ function SingleAvatar({avatar, size, containerStyles, shouldShowTooltip, fallbac
                     fallbackIcon={avatar.fallbackIcon}
                     fill={avatar.fill}
                     size={size}
-                    testID="ReportActionAvatars-SingleAvatar"
+                    testID="SingleAvatar"
                 />
             </View>
         </UserDetailsTooltip>

src/components/ReportActionAvatars/index.tsx

@@ -86,12 +86,9 @@ type ReportActionAvatarsProps = {
     /** Display name used as a fallback for avatar tooltip */
     fallbackDisplayName?: string;
 
-    /** Invited emails to account IDs */
+    /** Invited emails to account IDs. Also seeds a deterministic fallback avatar for each invited account */
     invitedEmailsToAccountIDs?: InvitedEmailsToAccountIDs;
 
-    /** Whether to use custom fallback avatar */
-    shouldUseCustomFallbackAvatar?: boolean;
-
     /** chatReportID needed for the avatars logic. When provided, this will be used as a fallback if the snapshot is undefined */
     chatReportID?: string;
 
@@ -128,7 +125,6 @@ function ReportActionAvatars({
     isInReportAction = false,
     fallbackDisplayName,
     invitedEmailsToAccountIDs,
-    shouldUseCustomFallbackAvatar = false,
     chatReportID,
     shouldUseRealActor = false,
 }: ReportActionAvatarsProps) {
@@ -168,7 +164,6 @@ function ReportActionAvatars({
         policy: policyProp,
         fallbackDisplayName,
         invitedEmailsToAccountIDs,
-        shouldUseCustomFallbackAvatar,
         chatReportID,
         shouldUseRealActor,
     });

src/components/ReportActionAvatars/useReportActionAvatars.ts

@@ -7,7 +7,6 @@ import usePolicy from '@hooks/usePolicy';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
-import {addSMSDomainIfPhoneNumber} from '@libs/PhoneNumber';
 import {
     getDelegateAccountIDFromReportAction,
     getHumanAgentAccountIDFromReportAction,
@@ -28,7 +27,7 @@ import {
     isTripRoom,
     shouldReportShowSubscript,
 } from '@libs/ReportUtils';
-import {getDefaultAvatar} from '@libs/UserAvatarUtils';
+import {buildUserIcon} from '@libs/UserAvatarUtils';
 
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -51,7 +50,6 @@ function useReportActionAvatars({
     policy: policyProp,
     fallbackDisplayName = '',
     invitedEmailsToAccountIDs,
-    shouldUseCustomFallbackAvatar = false,
     chatReportID: passedChatReportID,
     shouldUseRealActor = false,
 }: {
@@ -64,7 +62,6 @@ function useReportActionAvatars({
     policy?: OnyxInputOrEntry<Policy>;
     fallbackDisplayName?: string;
     invitedEmailsToAccountIDs?: InvitedEmailsToAccountIDs;
-    shouldUseCustomFallbackAvatar?: boolean;
     chatReportID?: string;
     /** When true, returns the action's real author instead of the Concierge display override used in inbox timelines. */
     shouldUseRealActor?: boolean;
@@ -137,13 +134,14 @@ function useReportActionAvatars({
 
     const avatarsForAccountIDs: IconType[] = accountIDsToMap.map((id) => {
         const invitedEmail = invitedEmailsToAccountIDs ? Object.keys(invitedEmailsToAccountIDs).find((email) => invitedEmailsToAccountIDs[email] === id) : undefined;
-        return {
-            id,
-            type: CONST.ICON_TYPE_AVATAR,
-            source: personalDetails?.[id]?.avatar ?? defaultAvatars.FallbackAvatar,
-            name: personalDetails?.[id]?.[shouldUseActorAccountID ? 'displayName' : 'login'] ?? invitedEmail ?? '',
-            fallbackIcon: shouldUseCustomFallbackAvatar ? getDefaultAvatar({accountID: id, accountEmail: addSMSDomainIfPhoneNumber(invitedEmail ?? ''), defaultAvatars}) : undefined,
-        };
+        return buildUserIcon({
+            accountID: id,
+            personalDetails,
+            defaultAvatars,
+            invitedEmail,
+            // Invoice actors are named after their display name; every other icon falls back to the login inside `buildUserIcon`.
+            name: shouldUseActorAccountID ? (personalDetails?.[id]?.displayName ?? invitedEmail ?? '') : undefined,
+        });
     });
 
     const fallbackWorkspaceAvatar: IconType = {

src/components/SelectionList/ListItem/TableListItem.tsx

@@ -1,8 +1,7 @@
-import ReportActionAvatars from '@components/ReportActionAvatars';
+import AccountAvatar from '@components/Avatar/connected/AccountAvatar';
 import TextWithTooltip from '@components/TextWithTooltip';
 
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -43,7 +42,6 @@ function TableListItem<TItem extends ListItem>({
 }: TableListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
-    const StyleUtils = useStyleUtils();
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: styles.selectionListPressableItemWrapper.borderRadius,
@@ -52,21 +50,13 @@ function TableListItem<TItem extends ListItem>({
         backgroundColor: theme.highlightBG,
     });
 
-    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
-    const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
-
-    const rowContent = (hovered: boolean) => (
+    const rowContent = () => (
         <>
             {!!item.accountID && (
-                <ReportActionAvatars
-                    accountIDs={[item.accountID]}
+                <AccountAvatar
+                    accountID={item.accountID}
                     fallbackDisplayName={item.text ?? item.alternateText ?? undefined}
                     shouldShowTooltip={showTooltip}
-                    secondaryAvatarContainerStyle={[
-                        StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-                        isFocusVisible ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
-                        hovered && !isFocusVisible ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
-                    ]}
                 />
             )}
             <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, titleContainerStyles]}>

src/components/Tables/AgentsTable/AgentsTableRow.tsx

@@ -1,14 +1,13 @@
+import AccountAvatar from '@components/Avatar/connected/AccountAvatar';
 import Button from '@components/ButtonComposed';
 import Icon from '@components/Icon';
-import ReportActionAvatars from '@components/ReportActionAvatars';
 import type {TableRow} from '@components/Table';
 import Table from '@components/Table';
 import {getCellAccessibilityProps, shouldUseTableSemantics} from '@components/Table/tableAccessibility';
 import TextWithTooltip from '@components/TextWithTooltip';
 
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -35,7 +34,6 @@ type AgentsTableRowProps = {
 export default function AgentsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: AgentsTableRowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const styleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'ChatBubble']);
 
@@ -48,11 +46,6 @@ export default function AgentsTableRow({item, rowIndex, shouldUseNarrowTableLayo
     const accessibilityLabel = [item.displayName, item.login].filter(Boolean).join(', ');
     const selectedButtonInnerStyle = item.selected ? styles.buttonDefaultHovered : undefined;
 
-    const getSecondaryAvatarContainerStyle = (hovered: boolean) => [
-        styleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-        hovered ? styleUtils.getBackgroundAndBorderStyle(styles.sidebarLinkHover?.backgroundColor ?? theme.sidebar) : undefined,
-    ];
-
     return (
         <Table.Row
             interactive
@@ -74,12 +67,11 @@ export default function AgentsTableRow({item, rowIndex, shouldUseNarrowTableLayo
                         style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}
                         {...getCellAccessibilityProps(isTableSemanticsEnabled)}
                     >
-                        <ReportActionAvatars
+                        <AccountAvatar
                             size={avatarSize}
-                            accountIDs={[item.accountID]}
+                            accountID={item.accountID}
                             fallbackDisplayName={item.displayName}
                             shouldShowTooltip
-                            secondaryAvatarContainerStyle={getSecondaryAvatarContainerStyle(!!hovered)}
                         />
                         <View style={[shouldUseNarrowTableLayout && styles.gap1, styles.flex1]}>
                             <TextWithTooltip

src/components/Tables/DomainAdminsTable/DomainAdminsTableRow.tsx

@@ -1,13 +1,12 @@
+import AccountAvatar from '@components/Avatar/connected/AccountAvatar';
 import Badge from '@components/Badge';
 import Icon from '@components/Icon';
-import ReportActionAvatars from '@components/ReportActionAvatars';
 import Table from '@components/Table';
 import {getCellAccessibilityProps, shouldUseTableSemantics} from '@components/Table/tableAccessibility';
 import TextWithTooltip from '@components/TextWithTooltip';
 
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -34,7 +33,6 @@ type DomainAdminsTableRowProps = {
 export default function DomainAdminsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: DomainAdminsTableRowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const styleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
 
@@ -44,11 +42,6 @@ export default function DomainAdminsTableRow({item, rowIndex, shouldUseNarrowTab
     const primaryContactLabel = item.isPrimaryContact ? translate('domain.admins.primaryContact') : '';
     const accessibilityLabel = [item.name, item.email, primaryContactLabel].filter(Boolean).join(', ');
 
-    const getSecondaryAvatarContainerStyle = (hovered: boolean) => [
-        styleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-        hovered ? styleUtils.getBackgroundAndBorderStyle(styles.sidebarLinkHover?.backgroundColor ?? theme.sidebar) : undefined,
-    ];
-
     return (
         <Table.Row
             interactive
@@ -69,12 +62,11 @@ export default function DomainAdminsTableRow({item, rowIndex, shouldUseNarrowTab
                         style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}
                         {...getCellAccessibilityProps(isTableSemanticsEnabled)}
                     >
-                        <ReportActionAvatars
+                        <AccountAvatar
                             size={avatarSize}
-                            accountIDs={[item.accountID]}
+                            accountID={item.accountID}
                             fallbackDisplayName={item.name}
                             shouldShowTooltip
-                            secondaryAvatarContainerStyle={getSecondaryAvatarContainerStyle(!!hovered)}
                         />
                         <View style={[shouldUseNarrowTableLayout && styles.gap1, styles.flex1]}>
                             <TextWithTooltip

src/components/Tables/DomainMembersTable/DomainMembersTableRow.tsx

@@ -1,11 +1,10 @@
+import AccountAvatar from '@components/Avatar/connected/AccountAvatar';
 import Icon from '@components/Icon';
-import ReportActionAvatars from '@components/ReportActionAvatars';
 import Table from '@components/Table';
 import {getCellAccessibilityProps, shouldUseTableSemantics} from '@components/Table/tableAccessibility';
 import TextWithTooltip from '@components/TextWithTooltip';
 
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -35,7 +34,6 @@ type DomainMembersTableRowProps = {
 export default function DomainMembersTableRow({item, rowIndex, shouldUseNarrowTableLayout, shouldShowGroupColumn}: DomainMembersTableRowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const styleUtils = useStyleUtils();
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
 
     const isTableSemanticsEnabled = shouldUseTableSemantics(shouldUseNarrowTableLayout);
@@ -48,11 +46,6 @@ export default function DomainMembersTableRow({item, rowIndex, shouldUseNarrowTa
     }
     const accessibilityLabel = [item.name, shouldShowGroupColumn ? item.groupName : null, item.email].filter(Boolean).join(', ');
 
-    const getSecondaryAvatarContainerStyle = (hovered: boolean) => [
-        styleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-        hovered ? styleUtils.getBackgroundAndBorderStyle(styles.sidebarLinkHover?.backgroundColor ?? theme.sidebar) : undefined,
-    ];
-
     return (
         <Table.Row
             interactive
@@ -73,12 +66,11 @@ export default function DomainMembersTableRow({item, rowIndex, shouldUseNarrowTa
                         style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}
                         {...getCellAccessibilityProps(isTableSemanticsEnabled)}
                     >
-                        <ReportActionAvatars
+                        <AccountAvatar
                             size={avatarSize}
-                            accountIDs={[item.accountID]}
+                            accountID={item.accountID}
                             fallbackDisplayName={item.name}
                             shouldShowTooltip
-                            secondaryAvatarContainerStyle={getSecondaryAvatarContainerStyle(!!hovered)}
                         />
                         <View style={[shouldUseNarrowTableLayout && styles.gap1, styles.flex1]}>
                             <TextWithTooltip

src/components/Tables/ReportParticipantsTable/ReportParticipantsTableRow.tsx

@@ -1,13 +1,12 @@
+import AccountAvatar from '@components/Avatar/connected/AccountAvatar';
 import Icon from '@components/Icon';
-import ReportActionAvatars from '@components/ReportActionAvatars';
 import Table from '@components/Table';
 import {getCellAccessibilityProps, shouldUseTableSemantics} from '@components/Table/tableAccessibility';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -34,7 +33,6 @@ type ReportParticipantsTableRowProps = {
 export default function ReportParticipantsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: ReportParticipantsTableRowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const styleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
     const isTableSemanticsEnabled = shouldUseTableSemantics(shouldUseNarrowTableLayout);
@@ -45,11 +43,6 @@ export default function ReportParticipantsTableRow({item, rowIndex, shouldUseNar
     const accessibilityLabel = roleLabel ? `${item.name}, ${item.email}, ${roleLabel}` : `${item.name}, ${item.email}`;
     const memberSubtitle = shouldUseNarrowTableLayout && roleLabel ? `${roleLabel} • ${item.email}` : item.email;
 
-    const getSecondaryAvatarContainerStyle = (hovered: boolean) => [
-        styleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-        hovered ? styleUtils.getBackgroundAndBorderStyle(styles.sidebarLinkHover?.backgroundColor ?? theme.sidebar) : undefined,
-    ];
-
     return (
         <Table.Row
             interactive
@@ -66,11 +59,10 @@ export default function ReportParticipantsTableRow({item, rowIndex, shouldUseNar
                         style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}
                         {...getCellAccessibilityProps(isTableSemanticsEnabled)}
                     >
-                        <ReportActionAvatars
+                        <AccountAvatar
                             size={avatarSize}
-                            accountIDs={[item.accountID]}
+                            accountID={item.accountID}
                             fallbackDisplayName={item.name ?? item.email}
-                            secondaryAvatarContainerStyle={getSecondaryAvatarContainerStyle(!!hovered)}
                         />
                         <View style={[shouldUseNarrowTableLayout && styles.gap1, styles.flex1]}>
                             <TextWithTooltip