Added Tooltips to the report users' titles.

src/components/Hoverable/HoverablePropTypes.js

@@ -7,6 +7,9 @@ const propTypes = {
         PropTypes.func,
     ]).isRequired,
 
+    // Styles to be assigned to the Hoverable Container
+    containerStyle: PropTypes.object,
+
     // Function that executes when the mouse moves over the children.
     onHoverIn: PropTypes.func,
 

src/components/Hoverable/index.js

@@ -33,6 +33,7 @@ class Hoverable extends Component {
     render() {
         return (
             <View
+                style={this.props.containerStyle}
                 onMouseEnter={this.toggleHoverState}
                 onMouseLeave={this.toggleHoverState}
             >

src/components/Tooltip/TooltipPropTypes.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import {windowDimensionsPropTypes} from '../withWindowDimensions';
+
+const propTypes = {
+    // The text to display in the tooltip.
+    text: PropTypes.string.isRequired,
+
+    // Styles to be assigned to the Tooltip wrapper views
+    containerStyle: PropTypes.object,
+
+    // Children to wrap with Tooltip.
+    children: PropTypes.node.isRequired,
+
+    // Props inherited from withWindowDimensions
+    ...windowDimensionsPropTypes,
+
+    // Any additional amount to manually adjust the horizontal position of the tooltip.
+    // A positive value shifts the tooltip to the right, and a negative value shifts it to the left.
+    shiftHorizontal: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+
+    // Any additional amount to manually adjust the vertical position of the tooltip.
+    // A positive value shifts the tooltip down, and a negative value shifts it up.
+    shiftVertical: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+};
+
+export default propTypes;

src/components/Tooltip.js → src/components/Tooltip/index.js

@@ -1,28 +1,10 @@
 import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
 import {Animated, Text, View} from 'react-native';
-import Hoverable from './Hoverable';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import getTooltipStyles from '../styles/getTooltipStyles';
-
-const propTypes = {
-    // The text to display in the tooltip.
-    text: PropTypes.string.isRequired,
-
-    // Children to wrap with Tooltip.
-    children: PropTypes.node.isRequired,
-
-    // Props inherited from withWindowDimensions
-    ...windowDimensionsPropTypes,
-
-    // Any additional amount to manually adjust the horizontal position of the tooltip.
-    // A positive value shifts the tooltip to the right, and a negative value shifts it to the left.
-    shiftHorizontal: PropTypes.number,
-
-    // Any additional amount to manually adjust the vertical position of the tooltip.
-    // A positive value shifts the tooltip down, and a negative value shifts it up.
-    shiftVertical: PropTypes.number,
-};
+import ReactDOM from 'react-dom';
+import Hoverable from '../Hoverable';
+import withWindowDimensions from '../withWindowDimensions';
+import getTooltipStyles from '../../styles/getTooltipStyles';
+import tooltipPropTypes from './TooltipPropTypes';
 
 const defaultProps = {
     shiftHorizontal: 0,
@@ -62,6 +44,7 @@ class Tooltip extends PureComponent {
         this.measureTooltip = this.measureTooltip.bind(this);
         this.showTooltip = this.showTooltip.bind(this);
         this.hideTooltip = this.hideTooltip.bind(this);
+        this.createPortal = this.createPortal.bind(this);
     }
 
     componentDidUpdate(prevProps) {
@@ -79,7 +62,11 @@ class Tooltip extends PureComponent {
      * @returns {Promise}
      */
     getWrapperPosition() {
-        return new Promise((resolve => this.wrapperView.measureInWindow((x, y) => resolve({x, y}))));
+        return new Promise((resolve => this.wrapperView.measureInWindow(
+            (x, y, width, height) => resolve({
+                x, y, width, height,
+            }),
+        )));
     }
 
     /**
@@ -117,6 +104,17 @@ class Tooltip extends PureComponent {
      * Display the tooltip in an animation.
      */
     showTooltip() {
+        // We have to dynamically calculate the position here as tooltip could have been rendered on some elments
+        // that has changed its position
+        this.getWrapperPosition()
+            .then(({
+                x, y, width, height,
+            }) => this.setState({
+                wrapperWidth: width,
+                wrapperHeight: height,
+                xOffset: x,
+                yOffset: y,
+            }));
         Animated.timing(this.animation, {
             toValue: 1,
             duration: 140,
@@ -133,7 +131,7 @@ class Tooltip extends PureComponent {
         }).start();
     }
 
-    render() {
+    createPortal() {
         const {
             animationStyle,
             tooltipWrapperStyle,
@@ -149,38 +147,49 @@ class Tooltip extends PureComponent {
             this.state.wrapperHeight,
             this.state.tooltipWidth,
             this.state.tooltipHeight,
-            this.props.shiftHorizontal,
-            this.props.shiftVertical,
+            typeof this.props.shiftHorizontal === 'function'
+                ? this.props.shiftHorizontal()
+                : this.props.shiftHorizontal,
+            typeof this.props.shiftVertical === 'function'
+                ? this.props.shiftVertical()
+                : this.props.shiftVertical,
+        );
+        return ReactDOM.createPortal(
+            <Animated.View
+                ref={el => this.tooltip = el}
+                onLayout={this.measureTooltip}
+                style={{...tooltipWrapperStyle, ...animationStyle}}
+            >
+                <Text style={tooltipTextStyle} numberOfLines={1}>{this.props.text}</Text>
+                <View style={pointerWrapperStyle}>
+                    <View style={pointerStyle} />
+                </View>
+            </Animated.View>, document.querySelector('body'),
         );
+    }
 
+    render() {
         return (
-            <Hoverable
-                onHoverIn={this.showTooltip}
-                onHoverOut={this.hideTooltip}
-            >
-                <View
-                    ref={el => this.wrapperView = el}
-                    onLayout={this.measureWrapperAndGetPosition}
+            <>
+                {this.createPortal()}
+                <Hoverable
+                    containerStyle={this.props.containerStyle}
+                    onHoverIn={this.showTooltip}
+                    onHoverOut={this.hideTooltip}
                 >
-                    <Animated.View style={animationStyle}>
-                        <View
-                            ref={el => this.tooltip = el}
-                            onLayout={this.measureTooltip}
-                            style={tooltipWrapperStyle}
-                        >
-                            <Text style={tooltipTextStyle} numberOfLines={1}>{this.props.text}</Text>
-                        </View>
-                        <View style={pointerWrapperStyle}>
-                            <View style={pointerStyle} />
-                        </View>
-                    </Animated.View>
-                    {this.props.children}
-                </View>
-            </Hoverable>
+                    <View
+                        ref={el => this.wrapperView = el}
+                        onLayout={this.measureWrapperAndGetPosition}
+                        style={this.props.containerStyle}
+                    >
+                        {this.props.children}
+                    </View>
+                </Hoverable>
+            </>
         );
     }
 }
 
-Tooltip.propTypes = propTypes;
+Tooltip.propTypes = tooltipPropTypes;
 Tooltip.defaultProps = defaultProps;
 export default withWindowDimensions(Tooltip);

src/components/Tooltip/index.native.js

@@ -0,0 +1,12 @@
+import tooltipPropTypes from './TooltipPropTypes';
+
+const defaultProps = {
+    shiftHorizontal: 0,
+    shiftVertical: 0,
+};
+
+const Tooltip = props => props.children;
+
+Tooltip.propTypes = tooltipPropTypes;
+Tooltip.defaultProps = defaultProps;
+export default Tooltip;

src/libs/OptionsListUtils.js

@@ -7,6 +7,7 @@ import Str from 'expensify-common/lib/str';
 import {getDefaultAvatar} from './actions/PersonalDetails';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
+import {getReportParticipantsTitle} from './reportUtils';
 
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
@@ -91,11 +92,14 @@ function createOption(personalDetailList, report, draftComments, activeReportID,
             : '')
         + _.unescape(report.lastMessageText)
         : '';
+    const tooltipText = getReportParticipantsTitle(lodashGet(report, ['participants'], []));
 
     return {
         text: report ? report.reportName : personalDetail.displayName,
         alternateText: (showChatPreviewLine && lastMessageText) ? lastMessageText : personalDetail.login,
         icons: report ? report.icons : [personalDetail.avatar],
+        tooltipText,
+        participantsList: personalDetailList,
 
         // It doesn't make sense to provide a login in the case of a report with multiple participants since
         // there isn't any one single login to refer to for a report.

src/libs/hasEllipsis/index.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line valid-jsdoc
+/**
+ * Does an elment has ellipsis
+ *
+ * @param {*} el
+ * @returns
+ */
+function hasEllipsis(el) {
+    return el.offsetWidth < el.scrollWidth;
+}
+
+export default hasEllipsis;

src/libs/hasEllipsis/index.native.js

@@ -0,0 +1 @@
+export default () => {};

src/libs/reportUtils.js

@@ -0,0 +1,17 @@
+import _ from 'underscore';
+import Str from 'expensify-common/lib/str';
+
+/**
+ * Returns the concatenated title for the PrimaryLogins of a report
+ *
+ * @param {Array} logins
+ * @returns {string}
+ */
+function getReportParticipantsTitle(logins) {
+    return _.map(logins, login => Str.removeSMSDomain(login)).join(',');
+}
+
+export {
+    // eslint-disable-next-line import/prefer-default-export
+    getReportParticipantsTitle,
+};

src/pages/home/HeaderView.js

@@ -14,6 +14,8 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/
 import MultipleAvatars from '../../components/MultipleAvatars';
 import {redirect} from '../../libs/actions/App';
 import ROUTES from '../../ROUTES';
+import Tooltip from '../../components/Tooltip';
+import {getReportParticipantsTitle} from '../../libs/reportUtils';
 
 const propTypes = {
     // Toggles the navigationMenu open and closed
@@ -25,6 +27,9 @@ const propTypes = {
         // Name of the report
         reportName: PropTypes.string,
 
+        // list of primarylogins of participants of the report
+        participants: PropTypes.arrayOf(PropTypes.string),
+
         // ID of the report
         reportID: PropTypes.number,
 
@@ -39,51 +44,60 @@ const defaultProps = {
     report: null,
 };
 
-const HeaderView = props => (
-    <View style={[styles.appContentHeader]} nativeID="drag-area">
-        <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
-            {props.isSmallScreenWidth && (
-                <Pressable
-                    onPress={props.onNavigationMenuButtonClicked}
-                    style={[styles.LHNToggle]}
-                >
-                    <Icon src={BackArrow} />
-                </Pressable>
-            )}
-            {props.report && props.report.reportName ? (
-                <View
-                    style={[
-                        styles.flex1,
-                        styles.flexRow,
-                        styles.alignItemsCenter,
-                        styles.justifyContentBetween,
-                    ]}
-                >
+const HeaderView = (props) => {
+    const participantsTitle = props.report && props.report.participants
+        ? getReportParticipantsTitle(props.report.participants)
+        : '';
+
+    return (
+        <View style={[styles.appContentHeader]} nativeID="drag-area">
+            <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
+                {props.isSmallScreenWidth && (
                     <Pressable
-                        onPress={() => {
-                            const {participants} = props.report;
-                            if (participants.length === 1) {
-                                redirect(ROUTES.getProfileRoute(participants[0]));
-                            }
-                        }}
+                        onPress={props.onNavigationMenuButtonClicked}
+                        style={[styles.LHNToggle]}
                     >
-                        <MultipleAvatars avatarImageURLs={props.report.icons} />
+                        <Icon src={BackArrow} />
                     </Pressable>
-                    <Header title={props.report.reportName} />
-                    <View style={[styles.reportOptions, styles.flexRow]}>
+                )}
+                {props.report && props.report.reportName ? (
+                    <View
+                        style={[
+                            styles.flex1,
+                            styles.flexRow,
+                            styles.alignItemsCenter,
+                            styles.justifyContentBetween,
+                        ]}
+                    >
                         <Pressable
-                            onPress={() => togglePinnedState(props.report)}
-                            style={[styles.touchableButtonImage, styles.mr0]}
+                            onPress={() => {
+                                const {participants} = props.report;
+                                if (participants.length === 1) {
+                                    redirect(ROUTES.getProfileRoute(participants[0]));
+                                }
+                            }}
                         >
-                            <Icon src={Pin} fill={props.report.isPinned ? themeColors.heading : themeColors.icon} />
+                            <MultipleAvatars avatarImageURLs={props.report.icons} />
                         </Pressable>
+                        <View style={[styles.flex1, styles.flexRow]}>
+                            <Tooltip text={participantsTitle}>
+                                <Header title={props.report.reportName} />
+                            </Tooltip>
+                        </View>
+                        <View style={[styles.reportOptions, styles.flexRow]}>
+                            <Pressable
+                                onPress={() => togglePinnedState(props.report)}
+                                style={[styles.touchableButtonImage, styles.mr0]}
+                            >
+                                <Icon src={Pin} fill={props.report.isPinned ? themeColors.heading : themeColors.icon} />
+                            </Pressable>
+                        </View>
                     </View>
-                </View>
-            ) : null}
+                ) : null}
+            </View>
         </View>
-    </View>
-);
-
+    );
+};
 HeaderView.propTypes = propTypes;
 HeaderView.displayName = 'HeaderView';
 HeaderView.defaultProps = defaultProps;