Merge pull request #29725 from Krishna2323/krishna2323/issue/29175

Expensify · Oct 24, 2023 · e9507a0 · e9507a0
2 parents 66ebf0f + 1608cca
commit e9507a0
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 2 deletions.
diff --git a/src/components/DisplayNames/displayNamesPropTypes.js b/src/components/DisplayNames/displayNamesPropTypes.js
@@ -34,7 +34,7 @@ const propTypes = {
 const defaultProps = {
     numberOfLines: 1,
     tooltipEnabled: false,
-    titleStyles: [],
+    textStyles: [],
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -25,6 +25,7 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import RenderHTML from './RenderHTML';
+import DisplayNames from './DisplayNames';
 
 const propTypes = menuItemPropTypes;
 
@@ -79,6 +80,7 @@ const defaultProps = {
     shouldRenderAsHTML: false,
     rightComponent: undefined,
     shouldShowRightComponent: false,
+    titleWithTooltips: [],
     shouldCheckActionAllowedOnPress: true,
 };
 
@@ -137,6 +139,21 @@ const MenuItem = React.forwardRef((props, ref) => {
 
     const hasPressableRightComponent = props.iconRight || (props.rightComponent && props.shouldShowRightComponent);
 
+    const renderTitleContent = () => {
+        if (props.titleWithTooltips && _.isArray(props.titleWithTooltips) && props.titleWithTooltips.length > 0) {
+            return (
+                <DisplayNames
+                    fullTitle={props.title}
+                    displayNamesWithTooltips={props.titleWithTooltips}
+                    tooltipEnabled
+                    numberOfLines={1}
+                />
+            );
+        }
+
+        return convertToLTR(props.title);
+    };
+
     const onPressAction = (e) => {
         if (props.disabled || !props.interactive) {
             return;
@@ -266,7 +283,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                     numberOfLines={props.numberOfLinesTitle || undefined}
                                                     dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.interactive && props.disabled}}
                                                 >
-                                                    {convertToLTR(props.title)}
+                                                    {renderTitleContent()}
                                                 </Text>
                                             )}
                                             {Boolean(props.shouldShowTitleIcon) && (

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
@@ -47,11 +47,13 @@ function TaskView(props) {
     }, [props.report]);
 
     const taskTitle = convertToLTR(props.report.reportName || '');
+    const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.managerID], props.personalDetails), false);
     const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
     const isOpen = ReportUtils.isOpenTaskReport(props.report);
     const canModifyTask = Task.canModifyTask(props.report, props.currentUserPersonalDetails.accountID);
     const disableState = !canModifyTask;
     const isDisableInteractive = !canModifyTask || !isOpen;
+
     return (
         <View>
             <OfflineWithFeedback
@@ -156,6 +158,7 @@ function TaskView(props) {
                             isSmallAvatarSubscriptMenu
                             shouldGreyOutWhenDisabled={false}
                             interactive={!isDisableInteractive}
+                            titleWithTooltips={assigneeTooltipDetails}
                         />
                     </OfflineWithFeedback>
                 ) : (

diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
@@ -154,6 +154,9 @@ const propTypes = {
     /** Should render component on the right */
     shouldShowRightComponent: PropTypes.bool,
 
+    /** Array of objects that map display names to their corresponding tooltip */
+    titleWithTooltips: PropTypes.arrayOf(PropTypes.object),
+
     /** Should check anonymous user in onPress function */
     shouldCheckActionAllowedOnPress: PropTypes.bool,
 };

diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
@@ -8,6 +8,7 @@ import Navigation from '../Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import CONST from '../../CONST';
 import DateUtils from '../DateUtils';
+import * as OptionsListUtils from '../OptionsListUtils';
 import * as UserUtils from '../UserUtils';
 import * as ErrorUtils from '../ErrorUtils';
 import * as ReportActionsUtils from '../ReportActionsUtils';
@@ -708,6 +709,11 @@ function getAssignee(assigneeAccountID, personalDetails) {
  * */
 function getShareDestination(reportID, reports, personalDetails) {
     const report = lodashGet(reports, `report_${reportID}`, {});
+
+    const participantAccountIDs = lodashGet(report, 'participantAccountIDs');
+    const isMultipleParticipant = participantAccountIDs.length > 1;
+    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails), isMultipleParticipant);
+
     let subtitle = '';
     if (ReportUtils.isChatReport(report) && ReportUtils.isDM(report) && ReportUtils.hasSingleParticipant(report)) {
         const participantAccountID = lodashGet(report, 'participantAccountIDs[0]');
@@ -721,6 +727,8 @@ function getShareDestination(reportID, reports, personalDetails) {
         icons: ReportUtils.getIcons(report, personalDetails, Expensicons.FallbackAvatar),
         displayName: ReportUtils.getReportName(report),
         subtitle,
+        displayNamesWithTooltips,
+        shouldUseFullTitleToDisplay: ReportUtils.shouldUseFullTitleToDisplay(report),
     };
 }
 

diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
@@ -16,6 +16,7 @@ import ROUTES from '../../ROUTES';
 import MenuItemWithTopDescription from '../../components/MenuItemWithTopDescription';
 import MenuItem from '../../components/MenuItem';
 import reportPropTypes from '../reportPropTypes';
+import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import * as Task from '../../libs/actions/Task';
 import * as ReportUtils from '../../libs/ReportUtils';
 import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
@@ -64,6 +65,7 @@ const defaultProps = {
 
 function NewTaskPage(props) {
     const [assignee, setAssignee] = useState({});
+    const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([props.task.assigneeAccountID], props.personalDetails), false);
     const [shareDestination, setShareDestination] = useState({});
     const [title, setTitle] = useState('');
     const [description, setDescription] = useState('');
@@ -185,6 +187,7 @@ function NewTaskPage(props) {
                                 icon={assignee.icons}
                                 onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
                                 shouldShowRightIcon
+                                titleWithTooltips={assigneeTooltipDetails}
                             />
                             <MenuItem
                                 label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
@@ -194,6 +197,7 @@ function NewTaskPage(props) {
                                 onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
                                 interactive={!props.task.parentReportID}
                                 shouldShowRightIcon={!props.task.parentReportID}
+                                titleWithTooltips={!shareDestination.shouldUseFullTitleToDisplay && shareDestination.displayNamesWithTooltips}
                             />
                         </View>
                     </View>