Skip to content

[CP Staging][Avatars - Reports] Follow-ups to fix deploy blockers cont. #67913

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
grgia merged 5 commits into from
Aug 5, 2025
Merged

[CP Staging][Avatars - Reports] Follow-ups to fix deploy blockers cont. #67913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
35efc11
Fix Members are displayed with a fallback avatar in Add Approval Work…
JakubKorytko Aug 5, 2025
18a61e8
Fix Message sent by sender & receiver show the same invoice room avatar
JakubKorytko Aug 5, 2025
51a4eee
Fix Chat - Tooltip of non-existing account does not show email
JakubKorytko Aug 5, 2025
0671e81
Merge branch 'main' into korytko/avatar-follow-ups-2
JakubKorytko Aug 5, 2025
dd47eff
Rename fallbackUsername to fallbackDisplayName
JakubKorytko Aug 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions src/components/ReportActionAvatars/ReportActionAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ function ReportActionAvatarSingle({
fallbackIcon,
isInReportAction,
useProfileNavigationWrapper,
fallbackDisplayName,
}: {
avatar: IconType | undefined;
size: ValueOf<typeof CONST.AVATAR_SIZE>;
Expand All @@ -117,6 +118,7 @@ function ReportActionAvatarSingle({
fallbackIcon?: AvatarSource;
isInReportAction?: boolean;
useProfileNavigationWrapper?: boolean;
fallbackDisplayName?: string;
}) {
const StyleUtils = useStyleUtils();
const avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
Expand All @@ -127,7 +129,8 @@ function ReportActionAvatarSingle({
delegateAccountID={delegateAccountID}
icon={avatar}
fallbackUserDetails={{
displayName: avatar?.name,
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
displayName: fallbackDisplayName || avatar?.name,
}}
shouldRender={shouldShowTooltip}
>
Expand Down Expand Up @@ -157,6 +160,7 @@ function ReportActionAvatarSubscript({
noRightMarginOnContainer,
subscriptAvatarBorderColor,
subscriptCardFeed,
fallbackDisplayName,
useProfileNavigationWrapper,
}: {
primaryAvatar: IconType;
Expand All @@ -166,6 +170,7 @@ function ReportActionAvatarSubscript({
noRightMarginOnContainer?: boolean;
subscriptAvatarBorderColor?: ColorValue;
subscriptCardFeed?: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK;
fallbackDisplayName?: string;
useProfileNavigationWrapper?: boolean;
}) {
const theme = useTheme();
Expand Down Expand Up @@ -204,7 +209,8 @@ function ReportActionAvatarSubscript({
accountID={Number(primaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
icon={primaryAvatar}
fallbackUserDetails={{
displayName: primaryAvatar.name,
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
displayName: fallbackDisplayName || primaryAvatar.name,
}}
>
<View>
Expand Down Expand Up @@ -310,11 +316,13 @@ function ReportActionAvatarMultipleHorizontal({
isInReportAction,
sort: sortAvatars,
useProfileNavigationWrapper,
fallbackDisplayName,
}: HorizontalStacking & {
size: ValueOf<typeof CONST.AVATAR_SIZE>;
shouldShowTooltip: boolean;
icons: IconType[];
isInReportAction: boolean;
fallbackDisplayName?: string;
useProfileNavigationWrapper?: boolean;
}) {
const theme = useTheme();
Expand Down Expand Up @@ -375,7 +383,8 @@ function ReportActionAvatarMultipleHorizontal({
accountID={Number(icon.id)}
icon={icon}
fallbackUserDetails={{
displayName: icon.name,
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
displayName: fallbackDisplayName || icon.name,
}}
shouldRender={shouldShowTooltip}
>
Expand Down Expand Up @@ -451,6 +460,7 @@ function ReportActionAvatarMultipleDiagonal({
secondaryAvatarContainerStyle,
isHovered = false,
useProfileNavigationWrapper,
fallbackDisplayName,
}: {
size: ValueOf<typeof CONST.AVATAR_SIZE>;
shouldShowTooltip: boolean;
Expand All @@ -460,6 +470,7 @@ function ReportActionAvatarMultipleDiagonal({
secondaryAvatarContainerStyle?: StyleProp<ViewStyle>;
isHovered?: boolean;
useProfileNavigationWrapper?: boolean;
fallbackDisplayName?: string;
}) {
const theme = useTheme();
const styles = useThemeStyles();
Expand Down Expand Up @@ -520,7 +531,8 @@ function ReportActionAvatarMultipleDiagonal({
accountID={Number(icons.at(0)?.id)}
icon={icons.at(0)}
fallbackUserDetails={{
displayName: icons.at(0)?.name,
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
displayName: fallbackDisplayName || icons.at(0)?.name,
}}
shouldRender={shouldShowTooltip}
>
Expand Down Expand Up @@ -551,7 +563,8 @@ function ReportActionAvatarMultipleDiagonal({
accountID={Number(icons.at(1)?.id)}
icon={icons.at(1)}
fallbackUserDetails={{
displayName: icons.at(1)?.name,
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
displayName: fallbackDisplayName || icons.at(1)?.name,
}}
shouldRender={shouldShowTooltip}
>
Expand Down
8 changes: 8 additions & 0 deletions src/components/ReportActionAvatars/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ type ReportActionAvatarsProps = {

/** Whether we want to be redirected to profile on avatars click */
useProfileNavigationWrapper?: boolean;

/** Display name used as a fallback for avatar tooltip */
fallbackDisplayName?: string;
};

/**
Expand Down Expand Up @@ -81,6 +84,7 @@ function ReportActionAvatars({
useMidSubscriptSizeForMultipleAvatars = false,
isInReportAction = false,
useProfileNavigationWrapper,
fallbackDisplayName,
}: ReportActionAvatarsProps) {
const accountIDs = passedAccountIDs.filter((accountID) => accountID !== CONST.DEFAULT_NUMBER_ID);

Expand Down Expand Up @@ -131,6 +135,7 @@ function ReportActionAvatars({
subscriptAvatarBorderColor={subscriptAvatarBorderColor}
subscriptCardFeed={subscriptCardFeed}
useProfileNavigationWrapper={useProfileNavigationWrapper}
fallbackDisplayName={fallbackDisplayName}
/>
);
}
Expand All @@ -145,6 +150,7 @@ function ReportActionAvatars({
isInReportAction={isInReportAction}
shouldShowTooltip={shouldShowTooltip}
useProfileNavigationWrapper={useProfileNavigationWrapper}
fallbackDisplayName={fallbackDisplayName}
/>
);
}
Expand All @@ -159,6 +165,7 @@ function ReportActionAvatars({
useMidSubscriptSize={useMidSubscriptSizeForMultipleAvatars}
secondaryAvatarContainerStyle={secondaryAvatarContainerStyle}
isHovered={isHovered}
fallbackDisplayName={fallbackDisplayName}
useProfileNavigationWrapper={useProfileNavigationWrapper}
/>
);
Expand All @@ -173,6 +180,7 @@ function ReportActionAvatars({
accountID={Number(delegateAccountID ?? primaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
delegateAccountID={source.action?.delegateAccountID}
fallbackIcon={primaryAvatar.fallbackIcon}
fallbackDisplayName={fallbackDisplayName}
useProfileNavigationWrapper={useProfileNavigationWrapper}
/>
);
Expand Down
14 changes: 10 additions & 4 deletions src/components/ReportActionAvatars/useReportActionAvatars.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,22 +194,28 @@ function useReportActionAvatars({
fallbackIcon,
};

const avatarsForAccountIDs: IconType[] = accountIDs.map((id) => ({
const shouldUseActorAccountID = isAInvoiceReport && !isAReportPreviewAction;
const accountIDsToMap = shouldUseActorAccountID && actorAccountID ? [actorAccountID] : accountIDs;

const avatarsForAccountIDs: IconType[] = accountIDsToMap.map((id) => ({
id,
type: CONST.ICON_TYPE_AVATAR,
source: personalDetails?.[id]?.avatar ?? FallbackAvatar,
name: personalDetails?.[id]?.login ?? '',
name: personalDetails?.[id]?.[shouldUseActorAccountID ? 'displayName' : 'login'] ?? '',
}));

const shouldUseMappedAccountIDs = avatarsForAccountIDs.length > 0 && (avatarType === CONST.REPORT_ACTION_AVATARS.TYPE.MULTIPLE || shouldUseActorAccountID);
const shouldUsePrimaryAvatarID = isWorkspaceActor && !!primaryAvatar.id;

return {
avatars: avatarsForAccountIDs.length > 0 && avatarType === CONST.REPORT_ACTION_AVATARS.TYPE.MULTIPLE ? avatarsForAccountIDs : [primaryAvatar, secondaryAvatar],
avatars: shouldUseMappedAccountIDs ? avatarsForAccountIDs : [primaryAvatar, secondaryAvatar],
avatarType,
details: {
...(personalDetails?.[accountID] ?? {}),
shouldDisplayAllActors: displayAllActors,
isWorkspaceActor,
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
actorHint: String(isWorkspaceActor ? primaryAvatar.id : login || (defaultDisplayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''),
actorHint: String(shouldUsePrimaryAvatarID ? primaryAvatar.id : login || defaultDisplayName || 'Unknown user').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''),
accountID,
delegateAccountID: !isWorkspaceActor && delegatePersonalDetails ? actorAccountID : undefined,
},
Expand Down
9 changes: 7 additions & 2 deletions src/components/SelectionList/InviteMemberListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,11 @@ function InviteMemberListItem<TItem extends ListItem>({
}
}, [item, onCheckboxPress, onSelectRow]);

const firstItemIconID = Number(item?.icons?.at(0)?.id);

// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const accountID = !item.reportID ? item.accountID || firstItemIconID : undefined;

return (
<BaseListItem
item={item}
Expand Down Expand Up @@ -101,7 +106,7 @@ function InviteMemberListItem<TItem extends ListItem>({
wrapperStyle={styles.productTrainingTooltipWrapper}
>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
{!!item.icons && (
{(!!item.reportID || !!accountID) && (
<ReportActionAvatars
subscriptAvatarBorderColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
shouldShowTooltip={showTooltip}
Expand All @@ -112,7 +117,7 @@ function InviteMemberListItem<TItem extends ListItem>({
]}
singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}
reportID={item.reportID}
accountIDs={!item.reportID && item.accountID ? [item.accountID] : undefined}
accountIDs={accountID ? [accountID] : undefined}
/>
)}
<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
Expand Down
1 change: 1 addition & 0 deletions src/components/SelectionList/UserListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ function UserListItem<TItem extends ListItem>({
accountIDs={[Number(item.accountID)]}
policyID={!item.reportID && !item.accountID ? item.policyID : undefined}
singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}
fallbackDisplayName={item.text ?? item.alternateText ?? undefined}
/>
)}
<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
Expand Down
Loading