fix the case invite a new user to workspace

Expensify · Feb 27, 2024 · 0b8d0d0 · 0b8d0d0
1 parent 9ab82b3
commit 0b8d0d0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 14 deletions.
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
@@ -107,6 +107,8 @@ function MultipleAvatars({
     let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
     const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);
 
+    const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => ReportUtils.getUserDetailTooltipText(Number(icon.id), icon.name)) : ['']), [shouldShowTooltip, icons]);
+
     const avatarSize = useMemo(() => {
         if (isFocusMode) {
             return CONST.AVATAR_SIZE.MID_SUBSCRIPT;
@@ -215,13 +217,7 @@ function MultipleAvatars({
                         {avatars.length > maxAvatarsInRow && (
                             <Tooltip
                                 // We only want to cap tooltips to only 10 users or so since some reports have hundreds of users, causing performance to degrade.
-                                text={
-                                    shouldShowTooltip
-                                        ? ReportUtils.getUserDetailsTooltipText(
-                                              icons.slice(avatarRows.length * maxAvatarsInRow - 1, avatarRows.length * maxAvatarsInRow + 9).map((icon) => Number(icon.id)),
-                                          )
-                                        : ''
-                                }
+                                text={tooltipTexts.slice(avatarRows.length * maxAvatarsInRow - 1, avatarRows.length * maxAvatarsInRow + 9).join(', ')}
                             >
                                 <View
                                     style={[
@@ -302,7 +298,7 @@ function MultipleAvatars({
                                     </View>
                                 </UserDetailsTooltip>
                             ) : (
-                                <Tooltip text={shouldShowTooltip ? ReportUtils.getUserDetailsTooltipText(icons.slice(1).map((icon) => Number(icon.id))) : ''}>
+                                <Tooltip text={tooltipTexts.slice(1).join(', ')}>
                                     <View style={[singleAvatarStyle, styles.alignItemsCenter, styles.justifyContentCenter]}>
                                         <Text
                                             style={[styles.userSelectNone, size === CONST.AVATAR_SIZE.SMALL ? styles.avatarInnerTextSmall : styles.avatarInnerText]}

diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx
@@ -19,7 +19,7 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA
     const personalDetails = usePersonalDetails();
 
     const userDetails = personalDetails?.[accountID] ?? fallbackUserDetails ?? {};
-    let userDisplayName = ReportUtils.getUserDetailsTooltipText([accountID]) ?? (userDetails.displayName ? userDetails.displayName.trim() : '');
+    let userDisplayName = ReportUtils.getUserDetailTooltipText(accountID, userDetails.displayName ? userDetails.displayName.trim() : '');
     let userLogin = userDetails.login?.trim() && userDetails.login !== userDetails.displayName ? Str.removeSMSDomain(userDetails.login) : '';
 
     let userAvatar = userDetails.avatar;
@@ -29,7 +29,7 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA
     // the Copilot feature is implemented.
     if (delegateAccountID) {
         const delegateUserDetails = personalDetails?.[delegateAccountID];
-        const delegateUserDisplayName = ReportUtils.getUserDetailsTooltipText([delegateAccountID]);
+        const delegateUserDisplayName = ReportUtils.getUserDetailTooltipText(delegateAccountID);
         userDisplayName = `${delegateUserDisplayName} (${translate('reportAction.asCopilot')} ${userDisplayName})`;
         userLogin = delegateUserDetails?.login ?? '';
         userAvatar = delegateUserDetails?.avatar;

diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts
@@ -289,7 +289,7 @@ function getAvatarsForAccountIDs(accountIDs: number[], personalDetails: OnyxEntr
             id: accountID,
             source: UserUtils.getAvatar(userPersonalDetail.avatar, userPersonalDetail.accountID),
             type: CONST.ICON_TYPE_AVATAR,
-            name: ReportUtils.getDisplayNameForParticipant(accountID),
+            name: userPersonalDetail.login ?? '',
         };
     });
 }

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
@@ -1697,8 +1697,9 @@ function getDisplayNamesWithTooltips(
 /**
  * Returns the the display names of the given user accountIDs
  */
-function getUserDetailsTooltipText(accountIDs: number[]): string {
-    return accountIDs.map((accountID) => getDisplayNameForParticipant(accountID)).join(', ');
+function getUserDetailTooltipText(accountID: number, fallbackUserDisplayName = ''): string {
+    const displayNameForParticipant = getDisplayNameForParticipant(accountID);
+    return displayNameForParticipant || fallbackUserDisplayName;
 }
 
 /**
@@ -5202,7 +5203,7 @@ export {
     buildOptimisticUnHoldReportAction,
     shouldDisplayThreadReplies,
     shouldDisableThread,
-    getUserDetailsTooltipText,
+    getUserDetailTooltipText,
     doesReportBelongToWorkspace,
     getChildReportNotificationPreference,
     getAllAncestorReportActions,