Use icon data to determine tool tips for MultipleAvatars

src/components/LHNOptionsList/OptionRowLHN.js

@@ -77,7 +77,6 @@ const OptionRowLHN = (props) => {
     const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor ? props.hoverStyle.backgroundColor : themeColors.sidebar;
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
 
-    const avatarTooltips = !optionItem.isChatRoom && !optionItem.isArchivedRoom ? _.pluck(optionItem.displayNamesWithTooltips, 'tooltip') : undefined;
     const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
     const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner));
 
@@ -138,7 +137,7 @@ const OptionRowLHN = (props) => {
                                                 props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
                                                 hovered && !props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
                                             ]}
-                                            avatarTooltips={optionItem.isPolicyExpenseChat ? [optionItem.subtitle] : avatarTooltips}
+                                            shouldShowTooltip={!optionItem.isChatRoom && !optionItem.isArchivedRoom}
                                         />
                                     ))}
                                 <View style={contentContainerStyles}>

src/components/MultipleAvatars.js

@@ -23,9 +23,6 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     secondAvatarStyle: PropTypes.arrayOf(PropTypes.object),
 
-    /** Tooltip for the Avatar */
-    avatarTooltips: PropTypes.arrayOf(PropTypes.string),
-
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon: PropTypes.func,
 
@@ -44,28 +41,32 @@ const propTypes = {
     /** Whether avatars are displayed within a reportAction */
     isInReportAction: PropTypes.bool,
 
-    /** Whether avatars are displayed within an IOUAction */
+    /** Whether to show the toolip text */
+    shouldShowTooltip: PropTypes.bool,
+
+    /** Whether avatars are displayed with the highlighted background color instead of the app background color. This is primarily the case for IOU previews. */
     shouldUseCardBackground: PropTypes.bool,
 };
 
 const defaultProps = {
     icons: [],
     size: CONST.AVATAR_SIZE.DEFAULT,
     secondAvatarStyle: [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
-    avatarTooltips: [],
     fallbackIcon: undefined,
     shouldStackHorizontally: false,
     isHovered: false,
     isPressed: false,
     isFocusMode: false,
     isInReportAction: false,
+    shouldShowTooltip: true,
     shouldUseCardBackground: false,
 };
 
 const MultipleAvatars = (props) => {
     let avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALL ? [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall] : [styles.emptyAvatar, styles.emptyAvatarMargin];
     const singleAvatarStyles = props.size === CONST.AVATAR_SIZE.SMALL ? styles.singleAvatarSmall : styles.singleAvatar;
     const secondAvatarStyles = [props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSmall : styles.secondAvatar, ...props.secondAvatarStyle];
+    const tooltipTexts = props.shouldShowTooltip ? _.pluck(props.icons, 'name') : [];
 
     if (!props.icons.length) {
         return null;
@@ -74,7 +75,7 @@ const MultipleAvatars = (props) => {
     if (props.icons.length === 1 && !props.shouldStackHorizontally) {
         return (
             <View style={avatarContainerStyles}>
-                <Tooltip text={props.avatarTooltips[0]}>
+                <Tooltip text={tooltipTexts[0]}>
                     <Avatar
                         source={props.icons[0].source}
                         size={props.size}
@@ -113,7 +114,7 @@ const MultipleAvatars = (props) => {
                     {_.map([...props.icons].splice(0, 4), (icon, index) => (
                         <Tooltip
                             key={`stackedAvatars-${index}`}
-                            text={props.avatarTooltips[index]}
+                            text={tooltipTexts[index]}
                             absolute
                         >
                             <View
@@ -142,7 +143,8 @@ const MultipleAvatars = (props) => {
                     ))}
                     {props.icons.length > 4 && (
                         <Tooltip
-                            text={props.avatarTooltips.slice(3).join(', ')}
+                            // We only want to cap tooltips to only the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
+                            text={tooltipTexts.slice(3, 10).join(', ')}
                             absolute
                         >
                             <View
@@ -174,7 +176,7 @@ const MultipleAvatars = (props) => {
             ) : (
                 <View style={singleAvatarStyles}>
                     <Tooltip
-                        text={props.avatarTooltips[0]}
+                        text={tooltipTexts[0]}
                         absolute
                     >
                         {/* View is necessary for tooltip to show for multiple avatars in LHN */}
@@ -192,7 +194,7 @@ const MultipleAvatars = (props) => {
                     <View style={secondAvatarStyles}>
                         {props.icons.length === 2 ? (
                             <Tooltip
-                                text={props.avatarTooltips[1]}
+                                text={tooltipTexts[1]}
                                 absolute
                             >
                                 <View>
@@ -208,7 +210,7 @@ const MultipleAvatars = (props) => {
                             </Tooltip>
                         ) : (
                             <Tooltip
-                                text={props.avatarTooltips.slice(1).join(', ')}
+                                text={tooltipTexts.slice(1).join(', ')}
                                 absolute
                             >
                                 <View style={[singleAvatarStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>

src/components/OptionRow.js

@@ -133,8 +133,6 @@ class OptionRow extends Component {
 
         // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
         const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips((this.props.option.participantsList || []).slice(0, 10), isMultipleParticipant);
-        const avatarTooltips = this.props.showTitleTooltip && !this.props.option.isChatRoom && !this.props.option.isArchivedRoom ? _.pluck(displayNamesWithTooltips, 'tooltip') : undefined;
-
         let subscriptColor = themeColors.appBG;
         if (this.props.optionIsFocused) {
             subscriptColor = focusedBackgroundColor;
@@ -197,7 +195,7 @@ class OptionRow extends Component {
                                                     this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
                                                     hovered && !this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
                                                 ]}
-                                                avatarTooltips={this.props.option.isPolicyExpenseChat ? [this.props.option.subtitle] : avatarTooltips}
+                                                shouldShowTooltip={this.props.showTitleTooltip && !this.props.option.isChatRoom && !this.props.option.isArchivedRoom}
                                             />
                                         ))}
                                     <View style={contentContainerStyles}>

src/components/ReportActionItem/IOUPreview.js

@@ -222,7 +222,6 @@ const IOUPreview = (props) => {
                                     size="small"
                                     isHovered={props.isHovered}
                                     shouldUseCardBackground
-                                    avatarTooltips={participantEmails}
                                 />
                             </View>
                         )}

src/components/Tooltip/tooltipPropTypes.js

@@ -7,7 +7,7 @@ const propTypes = {
     /** Enable support for the absolute positioned native(View|Text) children. It will only work for single native child  */
     absolute: PropTypes.bool,
 
-    /** The text to display in the tooltip. */
+    /** The text to display in the tooltip. If text is ommitted, only children will be rendered. */
     text: PropTypes.string,
 
     /** Maximum number of lines to show in tooltip */

src/pages/home/HeaderView.js

@@ -116,7 +116,6 @@ const HeaderView = (props) => {
     }
     const shouldShowThreeDotsButton = !!threeDotMenuItems.length;
 
-    const avatarTooltip = isChatRoom ? undefined : _.pluck(displayNamesWithTooltips, 'tooltip');
     const shouldShowSubscript = isPolicyExpenseChat && !props.report.isOwnPolicyExpenseChat && !ReportUtils.isArchivedRoom(props.report) && !isTaskReport;
     const icons = ReportUtils.getIcons(reportHeaderData, props.personalDetails);
     const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
@@ -157,7 +156,7 @@ const HeaderView = (props) => {
                             ) : (
                                 <MultipleAvatars
                                     icons={icons}
-                                    avatarTooltips={avatarTooltip}
+                                    shouldShowTooltip={!isChatRoom}
                                 />
                             )}
                             <View style={[styles.flex1, styles.flexColumn]}>

src/pages/home/report/ReportActionItemThread.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import {View, Pressable, Text} from 'react-native';
 import PropTypes from 'prop-types';
-import _ from 'underscore';
 import styles from '../../../styles/styles';
 import * as Report from '../../../libs/actions/Report';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
@@ -49,7 +48,6 @@ const ReportActionItemThread = (props) => {
                         size={CONST.AVATAR_SIZE.SMALL}
                         icons={props.icons}
                         shouldStackHorizontally
-                        avatarTooltips={_.map(props.icons, (icon) => icon.name)}
                         isHovered={props.isHovered}
                         isInReportAction
                     />

src/pages/workspace/WorkspaceInviteMessagePage.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {Pressable, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
@@ -114,11 +113,6 @@ class WorkspaceInviteMessagePage extends React.Component {
         });
     }
 
-    getAvatarTooltips() {
-        const filteredPersonalDetails = _.pick(this.props.personalDetails, this.props.invitedMembersDraft);
-        return _.map(filteredPersonalDetails, (personalDetail) => Str.removeSMSDomain(personalDetail.login));
-    }
-
     sendInvitation() {
         Policy.addMembersToWorkspace(this.props.invitedMembersDraft, this.state.welcomeNote, this.props.route.params.policyID, this.props.betas);
         Policy.setWorkspaceInviteMembersDraft(this.props.route.params.policyID, []);
@@ -186,7 +180,6 @@ class WorkspaceInviteMessagePage extends React.Component {
                                 icons={OptionsListUtils.getAvatarsForLogins(this.props.invitedMembersDraft, this.props.personalDetails)}
                                 shouldStackHorizontally
                                 secondAvatarStyle={[styles.secondAvatarInline]}
-                                avatarTooltips={this.getAvatarTooltips()}
                             />
                         </View>
                         <View style={[styles.mb5]}>