diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx index b95de8844ee0..8b606bd4429d 100644 --- a/src/components/MultipleAvatars.tsx +++ b/src/components/MultipleAvatars.tsx @@ -5,6 +5,7 @@ import type {ValueOf} from 'type-fest'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ReportUtils from '@libs/ReportUtils'; import type {AvatarSource} from '@libs/UserUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; @@ -106,7 +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) => icon.name) : ['']), [shouldShowTooltip, icons]); + 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; diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx index c4015c74abd5..592cec3beca5 100644 --- 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.getDisplayNameForParticipant(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.getDisplayNameForParticipant(delegateAccountID); + const delegateUserDisplayName = ReportUtils.getUserDetailTooltipText(delegateAccountID); userDisplayName = `${delegateUserDisplayName} (${translate('reportAction.asCopilot')} ${userDisplayName})`; userLogin = delegateUserDetails?.login ?? ''; userAvatar = delegateUserDetails?.avatar; diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 29d8e7ae9af2..832784ff60e5 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -1697,6 +1697,14 @@ function getDisplayNamesWithTooltips( }); } +/** + * Returns the the display names of the given user accountIDs + */ +function getUserDetailTooltipText(accountID: number, fallbackUserDisplayName = ''): string { + const displayNameForParticipant = getDisplayNameForParticipant(accountID); + return displayNameForParticipant || fallbackUserDisplayName; +} + /** * For a deleted parent report action within a chat report, * let us return the appropriate display message @@ -5193,6 +5201,7 @@ export { buildOptimisticUnHoldReportAction, shouldDisplayThreadReplies, shouldDisableThread, + getUserDetailTooltipText, doesReportBelongToWorkspace, getChildReportNotificationPreference, getAllAncestorReportActions,