Skip to content

Commit 93d7715

Browse files
grgiagrgia
authored
Merge pull request Expensify#67913 from software-mansion-labs/korytko/avatar-follow-ups-2
[CP Staging][Avatars - Reports] Follow-ups to fix deploy blockers cont.
2 parents 6efe129 + dd47eff commit 93d7715

5 files changed

Lines changed: 44 additions & 11 deletions

File tree

‎src/components/ReportActionAvatars/ReportActionAvatar.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ function ReportActionAvatarSingle({
107107
fallbackIcon,
108108
isInReportAction,
109109
useProfileNavigationWrapper,
110+
fallbackDisplayName,
110111
}: {
111112
avatar: IconType | undefined;
112113
size: ValueOf<typeof CONST.AVATAR_SIZE>;
@@ -117,6 +118,7 @@ function ReportActionAvatarSingle({
117118
fallbackIcon?: AvatarSource;
118119
isInReportAction?: boolean;
119120
useProfileNavigationWrapper?: boolean;
121+
fallbackDisplayName?: string;
120122
}) {
121123
const StyleUtils = useStyleUtils();
122124
const avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
@@ -127,7 +129,8 @@ function ReportActionAvatarSingle({
127129
delegateAccountID={delegateAccountID}
128130
icon={avatar}
129131
fallbackUserDetails={{
130-
displayName: avatar?.name,
132+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
133+
displayName: fallbackDisplayName || avatar?.name,
131134
}}
132135
shouldRender={shouldShowTooltip}
133136
>
@@ -157,6 +160,7 @@ function ReportActionAvatarSubscript({
157160
noRightMarginOnContainer,
158161
subscriptAvatarBorderColor,
159162
subscriptCardFeed,
163+
fallbackDisplayName,
160164
useProfileNavigationWrapper,
161165
}: {
162166
primaryAvatar: IconType;
@@ -166,6 +170,7 @@ function ReportActionAvatarSubscript({
166170
noRightMarginOnContainer?: boolean;
167171
subscriptAvatarBorderColor?: ColorValue;
168172
subscriptCardFeed?: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK;
173+
fallbackDisplayName?: string;
169174
useProfileNavigationWrapper?: boolean;
170175
}) {
171176
const theme = useTheme();
@@ -204,7 +209,8 @@ function ReportActionAvatarSubscript({
204209
accountID={Number(primaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
205210
icon={primaryAvatar}
206211
fallbackUserDetails={{
207-
displayName: primaryAvatar.name,
212+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
213+
displayName: fallbackDisplayName || primaryAvatar.name,
208214
}}
209215
>
210216
<View>
@@ -310,11 +316,13 @@ function ReportActionAvatarMultipleHorizontal({
310316
isInReportAction,
311317
sort: sortAvatars,
312318
useProfileNavigationWrapper,
319+
fallbackDisplayName,
313320
}: HorizontalStacking & {
314321
size: ValueOf<typeof CONST.AVATAR_SIZE>;
315322
shouldShowTooltip: boolean;
316323
icons: IconType[];
317324
isInReportAction: boolean;
325+
fallbackDisplayName?: string;
318326
useProfileNavigationWrapper?: boolean;
319327
}) {
320328
const theme = useTheme();
@@ -375,7 +383,8 @@ function ReportActionAvatarMultipleHorizontal({
375383
accountID={Number(icon.id)}
376384
icon={icon}
377385
fallbackUserDetails={{
378-
displayName: icon.name,
386+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
387+
displayName: fallbackDisplayName || icon.name,
379388
}}
380389
shouldRender={shouldShowTooltip}
381390
>
@@ -451,6 +460,7 @@ function ReportActionAvatarMultipleDiagonal({
451460
secondaryAvatarContainerStyle,
452461
isHovered = false,
453462
useProfileNavigationWrapper,
463+
fallbackDisplayName,
454464
}: {
455465
size: ValueOf<typeof CONST.AVATAR_SIZE>;
456466
shouldShowTooltip: boolean;
@@ -460,6 +470,7 @@ function ReportActionAvatarMultipleDiagonal({
460470
secondaryAvatarContainerStyle?: StyleProp<ViewStyle>;
461471
isHovered?: boolean;
462472
useProfileNavigationWrapper?: boolean;
473+
fallbackDisplayName?: string;
463474
}) {
464475
const theme = useTheme();
465476
const styles = useThemeStyles();
@@ -520,7 +531,8 @@ function ReportActionAvatarMultipleDiagonal({
520531
accountID={Number(icons.at(0)?.id)}
521532
icon={icons.at(0)}
522533
fallbackUserDetails={{
523-
displayName: icons.at(0)?.name,
534+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
535+
displayName: fallbackDisplayName || icons.at(0)?.name,
524536
}}
525537
shouldRender={shouldShowTooltip}
526538
>
@@ -551,7 +563,8 @@ function ReportActionAvatarMultipleDiagonal({
551563
accountID={Number(icons.at(1)?.id)}
552564
icon={icons.at(1)}
553565
fallbackUserDetails={{
554-
displayName: icons.at(1)?.name,
566+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
567+
displayName: fallbackDisplayName || icons.at(1)?.name,
555568
}}
556569
shouldRender={shouldShowTooltip}
557570
>

‎src/components/ReportActionAvatars/index.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@ type ReportActionAvatarsProps = {
5454

5555
/** Whether we want to be redirected to profile on avatars click */
5656
useProfileNavigationWrapper?: boolean;
57+
58+
/** Display name used as a fallback for avatar tooltip */
59+
fallbackDisplayName?: string;
5760
};
5861

5962
/**
@@ -81,6 +84,7 @@ function ReportActionAvatars({
8184
useMidSubscriptSizeForMultipleAvatars = false,
8285
isInReportAction = false,
8386
useProfileNavigationWrapper,
87+
fallbackDisplayName,
8488
}: ReportActionAvatarsProps) {
8589
const accountIDs = passedAccountIDs.filter((accountID) => accountID !== CONST.DEFAULT_NUMBER_ID);
8690

@@ -131,6 +135,7 @@ function ReportActionAvatars({
131135
subscriptAvatarBorderColor={subscriptAvatarBorderColor}
132136
subscriptCardFeed={subscriptCardFeed}
133137
useProfileNavigationWrapper={useProfileNavigationWrapper}
138+
fallbackDisplayName={fallbackDisplayName}
134139
/>
135140
);
136141
}
@@ -145,6 +150,7 @@ function ReportActionAvatars({
145150
isInReportAction={isInReportAction}
146151
shouldShowTooltip={shouldShowTooltip}
147152
useProfileNavigationWrapper={useProfileNavigationWrapper}
153+
fallbackDisplayName={fallbackDisplayName}
148154
/>
149155
);
150156
}
@@ -159,6 +165,7 @@ function ReportActionAvatars({
159165
useMidSubscriptSize={useMidSubscriptSizeForMultipleAvatars}
160166
secondaryAvatarContainerStyle={secondaryAvatarContainerStyle}
161167
isHovered={isHovered}
168+
fallbackDisplayName={fallbackDisplayName}
162169
useProfileNavigationWrapper={useProfileNavigationWrapper}
163170
/>
164171
);
@@ -173,6 +180,7 @@ function ReportActionAvatars({
173180
accountID={Number(delegateAccountID ?? primaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
174181
delegateAccountID={source.action?.delegateAccountID}
175182
fallbackIcon={primaryAvatar.fallbackIcon}
183+
fallbackDisplayName={fallbackDisplayName}
176184
useProfileNavigationWrapper={useProfileNavigationWrapper}
177185
/>
178186
);

‎src/components/ReportActionAvatars/useReportActionAvatars.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -194,22 +194,28 @@ function useReportActionAvatars({
194194
fallbackIcon,
195195
};
196196

197-
const avatarsForAccountIDs: IconType[] = accountIDs.map((id) => ({
197+
const shouldUseActorAccountID = isAInvoiceReport && !isAReportPreviewAction;
198+
const accountIDsToMap = shouldUseActorAccountID && actorAccountID ? [actorAccountID] : accountIDs;
199+
200+
const avatarsForAccountIDs: IconType[] = accountIDsToMap.map((id) => ({
198201
id,
199202
type: CONST.ICON_TYPE_AVATAR,
200203
source: personalDetails?.[id]?.avatar ?? FallbackAvatar,
201-
name: personalDetails?.[id]?.login ?? '',
204+
name: personalDetails?.[id]?.[shouldUseActorAccountID ? 'displayName' : 'login'] ?? '',
202205
}));
203206

207+
const shouldUseMappedAccountIDs = avatarsForAccountIDs.length > 0 && (avatarType === CONST.REPORT_ACTION_AVATARS.TYPE.MULTIPLE || shouldUseActorAccountID);
208+
const shouldUsePrimaryAvatarID = isWorkspaceActor && !!primaryAvatar.id;
209+
204210
return {
205-
avatars: avatarsForAccountIDs.length > 0 && avatarType === CONST.REPORT_ACTION_AVATARS.TYPE.MULTIPLE ? avatarsForAccountIDs : [primaryAvatar, secondaryAvatar],
211+
avatars: shouldUseMappedAccountIDs ? avatarsForAccountIDs : [primaryAvatar, secondaryAvatar],
206212
avatarType,
207213
details: {
208214
...(personalDetails?.[accountID] ?? {}),
209215
shouldDisplayAllActors: displayAllActors,
210216
isWorkspaceActor,
211217
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
212-
actorHint: String(isWorkspaceActor ? primaryAvatar.id : login || (defaultDisplayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''),
218+
actorHint: String(shouldUsePrimaryAvatarID ? primaryAvatar.id : login || defaultDisplayName || 'Unknown user').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''),
213219
accountID,
214220
delegateAccountID: !isWorkspaceActor && delegatePersonalDetails ? actorAccountID : undefined,
215221
},

‎src/components/SelectionList/InviteMemberListItem.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ function InviteMemberListItem<TItem extends ListItem>({
6363
}
6464
}, [item, onCheckboxPress, onSelectRow]);
6565

66+
const firstItemIconID = Number(item?.icons?.at(0)?.id);
67+
68+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
69+
const accountID = !item.reportID ? item.accountID || firstItemIconID : undefined;
70+
6671
return (
6772
<BaseListItem
6873
item={item}
@@ -101,7 +106,7 @@ function InviteMemberListItem<TItem extends ListItem>({
101106
wrapperStyle={styles.productTrainingTooltipWrapper}
102107
>
103108
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
104-
{!!item.icons && (
109+
{(!!item.reportID || !!accountID) && (
105110
<ReportActionAvatars
106111
subscriptAvatarBorderColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
107112
shouldShowTooltip={showTooltip}
@@ -112,7 +117,7 @@ function InviteMemberListItem<TItem extends ListItem>({
112117
]}
113118
singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}
114119
reportID={item.reportID}
115-
accountIDs={!item.reportID && item.accountID ? [item.accountID] : undefined}
120+
accountIDs={accountID ? [accountID] : undefined}
116121
/>
117122
)}
118123
<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>

‎src/components/SelectionList/UserListItem.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ function UserListItem<TItem extends ListItem>({
112112
accountIDs={[Number(item.accountID)]}
113113
policyID={!item.reportID && !item.accountID ? item.policyID : undefined}
114114
singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}
115+
fallbackDisplayName={item.text ?? item.alternateText ?? undefined}
115116
/>
116117
)}
117118
<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>

0 commit comments

Comments
 (0)