Merge pull request Expensify#52436 from Krishna2323/krishna2323/issue…

…/51656 fix: Accounting - Unnecessary tooltip showing the same icon on export page.
huult · Dec 10, 2024 · 709940e · 709940e
2 parents bdbd322 + 1de9712
commit 709940e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
@@ -153,6 +153,7 @@ function MultipleAvatars({
                 fallbackUserDetails={{
                     displayName: icons.at(0)?.name,
                 }}
+                shouldRender={shouldShowTooltip}
             >
                 <View style={avatarContainerStyles}>
                     <Avatar
@@ -194,6 +195,7 @@ function MultipleAvatars({
                         fallbackUserDetails={{
                             displayName: icon.name,
                         }}
+                        shouldRender={shouldShowTooltip}
                     >
                         <View style={[StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize), StyleUtils.getAvatarBorderRadius(size, icon.type)]}>
                             <Avatar
@@ -221,6 +223,7 @@ function MultipleAvatars({
                     <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={tooltipTexts.slice(avatarRows.length * maxAvatarsInRow - 1, avatarRows.length * maxAvatarsInRow + 9).join(', ')}
+                        shouldRender={shouldShowTooltip}
                     >
                         <View
                             style={[
@@ -260,6 +263,7 @@ function MultipleAvatars({
                     fallbackUserDetails={{
                         displayName: icons.at(0)?.name,
                     }}
+                    shouldRender={shouldShowTooltip}
                 >
                     {/* View is necessary for tooltip to show for multiple avatars in LHN */}
                     <View>
@@ -282,6 +286,7 @@ function MultipleAvatars({
                             fallbackUserDetails={{
                                 displayName: icons.at(1)?.name,
                             }}
+                            shouldRender={shouldShowTooltip}
                         >
                             <View>
                                 <Avatar
@@ -296,7 +301,10 @@ function MultipleAvatars({
                             </View>
                         </UserDetailsTooltip>
                     ) : (
-                        <Tooltip text={tooltipTexts.slice(1).join(', ')}>
+                        <Tooltip
+                            text={tooltipTexts.slice(1).join(', ')}
+                            shouldRender={shouldShowTooltip}
+                        >
                             <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/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -495,8 +495,6 @@ function BaseSelectionList<TItem extends ListItem>(
         const isDisabled = !!section.isDisabled || item.isDisabled;
         const isItemFocused = (!isDisabled || item.isSelected) && focusedIndex === normalizedIndex;
         const isItemHighlighted = !!itemsToHighlight?.has(item.keyForList ?? '');
-        // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
-        const showTooltip = shouldShowTooltips && normalizedIndex < 10;
 
         return (
             <View onLayout={(event: LayoutChangeEvent) => onItemLayout(event, item?.keyForList)}>
@@ -509,7 +507,7 @@ function BaseSelectionList<TItem extends ListItem>(
                     index={index}
                     isFocused={isItemFocused}
                     isDisabled={isDisabled}
-                    showTooltip={showTooltip}
+                    showTooltip={shouldShowTooltips}
                     canSelectMultiple={canSelectMultiple}
                     onLongPressRow={onLongPressRow}
                     shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect}

diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts
@@ -1507,7 +1507,7 @@ function getHeaderMessageForNonUserList(hasSelectableOptions: boolean, searchVal
  * Helper method to check whether an option can show tooltip or not
  */
 function shouldOptionShowTooltip(option: ReportUtils.OptionData): boolean {
-    return (!option.isChatRoom || !!option.isThread) && !option.private_isArchived;
+    return !option.private_isArchived;
 }
 
 /**

diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
@@ -200,10 +200,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto
                                     />
                                 ) : (
                                     <OfflineWithFeedback pendingAction={report?.pendingFields?.avatar}>
-                                        <MultipleAvatars
-                                            icons={icons}
-                                            shouldShowTooltip={!isChatRoom || isChatThread}
-                                        />
+                                        <MultipleAvatars icons={icons} />
                                     </OfflineWithFeedback>
                                 )}
                                 <View