Skip to content

Commit 51a4eee

Browse files
JakubKorytkoJakubKorytko
committed
Fix Chat - Tooltip of non-existing account does not show email
1 parent 18a61e8 commit 51a4eee

4 files changed

Lines changed: 29 additions & 6 deletions

File tree

‎src/components/ReportActionAvatars/ReportActionAvatar.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ function ReportActionAvatarSingle({
7070
accountID,
7171
fallbackIcon,
7272
isInReportAction,
73+
fallbackUsername,
7374
}: {
7475
avatar: IconType | undefined;
7576
size: ValueOf<typeof CONST.AVATAR_SIZE>;
@@ -79,6 +80,7 @@ function ReportActionAvatarSingle({
7980
delegateAccountID?: number;
8081
fallbackIcon?: AvatarSource;
8182
isInReportAction?: boolean;
83+
fallbackUsername?: string;
8284
}) {
8385
const StyleUtils = useStyleUtils();
8486
const avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
@@ -89,7 +91,8 @@ function ReportActionAvatarSingle({
8991
delegateAccountID={delegateAccountID}
9092
icon={avatar}
9193
fallbackUserDetails={{
92-
displayName: avatar?.name,
94+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
95+
displayName: fallbackUsername || avatar?.name,
9396
}}
9497
shouldRender={shouldShowTooltip}
9598
>
@@ -118,6 +121,7 @@ function ReportActionAvatarSubscript({
118121
noRightMarginOnContainer,
119122
subscriptAvatarBorderColor,
120123
subscriptCardFeed,
124+
fallbackUsername,
121125
}: {
122126
primaryAvatar: IconType;
123127
secondaryAvatar: IconType;
@@ -126,6 +130,7 @@ function ReportActionAvatarSubscript({
126130
noRightMarginOnContainer?: boolean;
127131
subscriptAvatarBorderColor?: ColorValue;
128132
subscriptCardFeed?: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK;
133+
fallbackUsername?: string;
129134
}) {
130135
const theme = useTheme();
131136
const styles = useThemeStyles();
@@ -163,7 +168,8 @@ function ReportActionAvatarSubscript({
163168
accountID={Number(primaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
164169
icon={primaryAvatar}
165170
fallbackUserDetails={{
166-
displayName: primaryAvatar.name,
171+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
172+
displayName: fallbackUsername || primaryAvatar.name,
167173
}}
168174
>
169175
<View>
@@ -266,11 +272,13 @@ function ReportActionAvatarMultipleHorizontal({
266272
icons: unsortedIcons,
267273
isInReportAction,
268274
sort: sortAvatars,
275+
fallbackUsername,
269276
}: HorizontalStacking & {
270277
size: ValueOf<typeof CONST.AVATAR_SIZE>;
271278
shouldShowTooltip: boolean;
272279
icons: IconType[];
273280
isInReportAction: boolean;
281+
fallbackUsername?: string;
274282
}) {
275283
const theme = useTheme();
276284
const styles = useThemeStyles();
@@ -330,7 +338,8 @@ function ReportActionAvatarMultipleHorizontal({
330338
accountID={Number(icon.id)}
331339
icon={icon}
332340
fallbackUserDetails={{
333-
displayName: icon.name,
341+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
342+
displayName: fallbackUsername || icon.name,
334343
}}
335344
shouldRender={shouldShowTooltip}
336345
>
@@ -404,6 +413,7 @@ function ReportActionAvatarMultipleDiagonal({
404413
useMidSubscriptSize,
405414
secondaryAvatarContainerStyle,
406415
isHovered = false,
416+
fallbackUsername,
407417
}: {
408418
size: ValueOf<typeof CONST.AVATAR_SIZE>;
409419
shouldShowTooltip: boolean;
@@ -412,6 +422,7 @@ function ReportActionAvatarMultipleDiagonal({
412422
useMidSubscriptSize: boolean;
413423
secondaryAvatarContainerStyle?: StyleProp<ViewStyle>;
414424
isHovered?: boolean;
425+
fallbackUsername?: string;
415426
}) {
416427
const theme = useTheme();
417428
const styles = useThemeStyles();
@@ -472,7 +483,8 @@ function ReportActionAvatarMultipleDiagonal({
472483
accountID={Number(icons.at(0)?.id)}
473484
icon={icons.at(0)}
474485
fallbackUserDetails={{
475-
displayName: icons.at(0)?.name,
486+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
487+
displayName: fallbackUsername || icons.at(0)?.name,
476488
}}
477489
shouldRender={shouldShowTooltip}
478490
>
@@ -502,7 +514,8 @@ function ReportActionAvatarMultipleDiagonal({
502514
accountID={Number(icons.at(1)?.id)}
503515
icon={icons.at(1)}
504516
fallbackUserDetails={{
505-
displayName: icons.at(1)?.name,
517+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
518+
displayName: fallbackUsername || icons.at(1)?.name,
506519
}}
507520
shouldRender={shouldShowTooltip}
508521
>

‎src/components/ReportActionAvatars/index.tsx‎

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

4949
/** Subscript card feed to display instead of the second avatar */
5050
subscriptCardFeed?: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK;
51+
52+
/** Username used as a fallback for avatar tooltip */
53+
fallbackUsername?: string;
5154
};
5255

5356
/**
@@ -72,6 +75,7 @@ function ReportActionAvatars({
7275
secondaryAvatarContainerStyle,
7376
useMidSubscriptSizeForMultipleAvatars = false,
7477
isInReportAction = false,
78+
fallbackUsername,
7579
}: ReportActionAvatarsProps) {
7680
const accountIDs = passedAccountIDs.filter((accountID) => accountID !== CONST.DEFAULT_NUMBER_ID);
7781

@@ -120,6 +124,7 @@ function ReportActionAvatars({
120124
noRightMarginOnContainer={noRightMarginOnSubscriptContainer}
121125
subscriptAvatarBorderColor={subscriptAvatarBorderColor}
122126
subscriptCardFeed={subscriptCardFeed}
127+
fallbackUsername={fallbackUsername}
123128
/>
124129
);
125130
}
@@ -133,6 +138,7 @@ function ReportActionAvatars({
133138
icons={icons}
134139
isInReportAction={isInReportAction}
135140
shouldShowTooltip={shouldShowTooltip}
141+
fallbackUsername={fallbackUsername}
136142
/>
137143
);
138144
}
@@ -147,6 +153,7 @@ function ReportActionAvatars({
147153
useMidSubscriptSize={useMidSubscriptSizeForMultipleAvatars}
148154
secondaryAvatarContainerStyle={secondaryAvatarContainerStyle}
149155
isHovered={isHovered}
156+
fallbackUsername={fallbackUsername}
150157
/>
151158
);
152159
}
@@ -160,6 +167,7 @@ function ReportActionAvatars({
160167
accountID={Number(delegateAccountID ?? primaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
161168
delegateAccountID={source.action?.delegateAccountID}
162169
fallbackIcon={primaryAvatar.fallbackIcon}
170+
fallbackUsername={fallbackUsername}
163171
/>
164172
);
165173
}

‎src/components/ReportActionAvatars/useReportActionAvatars.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ function useReportActionAvatars({
178178
}));
179179

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

182183
return {
183184
avatars: shouldUseMappedAccountIDs ? avatarsForAccountIDs : [primaryAvatar, secondaryAvatar],
@@ -187,7 +188,7 @@ function useReportActionAvatars({
187188
shouldDisplayAllActors: displayAllActors,
188189
isWorkspaceActor,
189190
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
190-
actorHint: String(isWorkspaceActor ? primaryAvatar.id : login || (defaultDisplayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''),
191+
actorHint: String(shouldUsePrimaryAvatarID ? primaryAvatar.id : login || defaultDisplayName || 'Unknown user').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''),
191192
accountID,
192193
delegateAccountID: !isWorkspaceActor && delegatePersonalDetails ? actorAccountID : undefined,
193194
},

‎src/components/SelectionList/UserListItem.tsx‎

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

0 commit comments

Comments
 (0)