From bed13f15da738a6f85fee53f961e1198767d9d79 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 2 Apr 2021 12:00:40 -0700
Subject: [PATCH 01/11] Make generic DisplayNames component

---
 .../DisplayNames/DisplayNamesPropTypes.js     | 27 ++++++
 .../DisplayNames}/index.js                    | 85 ++++++++++---------
 src/components/DisplayNames/index.native.js   | 20 +++++
 src/pages/home/HeaderView.js                  | 19 +++--
 src/pages/home/sidebar/OptionRow.js           | 16 ++--
 .../OptionRowTitle/OptionRowTitleProps.js     | 37 --------
 .../sidebar/OptionRowTitle/index.native.js    | 20 -----
 7 files changed, 111 insertions(+), 113 deletions(-)
 create mode 100644 src/components/DisplayNames/DisplayNamesPropTypes.js
 rename src/{pages/home/sidebar/OptionRowTitle => components/DisplayNames}/index.js (60%)
 create mode 100644 src/components/DisplayNames/index.native.js
 delete mode 100644 src/pages/home/sidebar/OptionRowTitle/OptionRowTitleProps.js
 delete mode 100644 src/pages/home/sidebar/OptionRowTitle/index.native.js

diff --git a/src/components/DisplayNames/DisplayNamesPropTypes.js b/src/components/DisplayNames/DisplayNamesPropTypes.js
new file mode 100644
index 000000000000..bf1a95851e61
--- /dev/null
+++ b/src/components/DisplayNames/DisplayNamesPropTypes.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    // The full title of the DisplayNames component (not split up)
+    fullTitle: PropTypes.string,
+
+    // Array of objects that map display names to their corresponding tooltip
+    displayNameToTooltipMap: PropTypes.object,
+
+    // Number of lines before wrapping
+    numberOfLines: PropTypes.number,
+
+    // Is tooltip needed?
+    // When true, triggers complex title rendering
+    tooltipEnabled: PropTypes.bool,
+
+    // Arbitrary styles of the displayName text
+    textStyle: PropTypes.arrayOf(PropTypes.any),
+};
+
+const defaultProps = {
+    numberOfLines: 1,
+    tooltipEnabled: false,
+    titleStyles: [],
+};
+
+export {propTypes, defaultProps};
diff --git a/src/pages/home/sidebar/OptionRowTitle/index.js b/src/components/DisplayNames/index.js
similarity index 60%
rename from src/pages/home/sidebar/OptionRowTitle/index.js
rename to src/components/DisplayNames/index.js
index 9f887f2a65d2..aa246e815004 100644
--- a/src/pages/home/sidebar/OptionRowTitle/index.js
+++ b/src/components/DisplayNames/index.js
@@ -1,15 +1,12 @@
 import _ from 'underscore';
 import React, {Fragment, PureComponent} from 'react';
-import {
-    Text,
-    View,
-} from 'react-native';
-import {propTypes, defaultProps} from './OptionRowTitleProps';
-import styles from '../../../../styles/styles';
-import Tooltip from '../../../../components/Tooltip';
-import hasEllipsis from '../../../../libs/hasEllipsis';
+import {Text, View} from 'react-native';
+import {propTypes, defaultProps} from './DisplayNamesPropTypes';
+import styles from '../../styles/styles';
+import Tooltip from '../Tooltip';
+import hasEllipsis from '../../libs/hasEllipsis';
 
-class OptionRowTitle extends PureComponent {
+class DisplayNames extends PureComponent {
     constructor(props) {
         super(props);
         this.containerRef = null;
@@ -31,7 +28,6 @@ class OptionRowTitle extends PureComponent {
      * Set the container layout for post calculations
      *
      * @param {*} {nativeEvent}
-     * @memberof OptionRowTitle
      */
     setContainerLayout({nativeEvent}) {
         this.containerLayout = nativeEvent.layout;
@@ -44,11 +40,10 @@ class OptionRowTitle extends PureComponent {
      * So we shift it by calculating it as follows:
      * 1. We get the container layout and take the Child inline text node.
      * 2. Now we get the tooltip original position.
-     * 3. If inline node's right edge is overflowing the containe's right edge, we set the tooltip to the center
+     * 3. If inline node's right edge is overflowing the container's right edge, we set the tooltip to the center
      * of the distance between the left edge of the inline node and right edge of the container.
      * @param {Number} index Used to get the Ref to the node at the current index.
      * @returns {Number} Distance to shift the tooltip horizontally
-     * @memberof OptionRowTitle
      */
     getTooltipShiftX(index) {
         // Only shift when containerLayout or Refs to text node is available .
@@ -70,54 +65,62 @@ class OptionRowTitle extends PureComponent {
 
 
     render() {
-        const {
-            option, style, tooltipEnabled, numberOfLines,
-        } = this.props;
-
-        if (!tooltipEnabled) {
-            return <Text style={style} numberOfLines={numberOfLines}>{option.text}</Text>;
+        if (!this.props.tooltipEnabled) {
+            // No need for any complex text-splitting, just return a simple text component
+            return (
+                <Text
+                    style={this.props.textStyle}
+                    numberOfLines={this.props.numberOfLines}
+                >
+                    {this.props.fullTitle}
+                </Text>
+            );
         }
+
+        const displayNames = _.keys(this.props.displayNameToTooltipMap);
+        const lastDisplayName = _.last(displayNames);
+
         return (
 
-            // Tokenization of string only support 1 numberofLines on Web
+            // Tokenization of string only support 1 numberOfLines on Web
             <Text
-                style={[style, styles.optionDisplayNameTooltipWrapper]}
+                style={[this.props.textStyle, styles.optionDisplayNameTooltipWrapper]}
                 onLayout={this.setContainerLayout}
                 numberOfLines={1}
                 ref={el => this.containerRef = el}
             >
-                {_.map(option.participantsList, (participant, index) => (
-                    <Fragment key={index}>
+                {_.mapObject(this.props.displayNameToTooltipMap, (displayName, tooltipText) => (
+                    <Fragment key={tooltipText}>
                         <Tooltip
-                            key={index}
-                            text={participant.login}
+                            key={tooltipText}
+                            text={tooltipText}
                             containerStyle={styles.dInline}
-                            shiftHorizontal={() => this.getTooltipShiftX(index)}
+                            shiftHorizontal={() => this.getTooltipShiftX(tooltipText)}
                         >
                             {/*  // We need to get the refs to all the names which will be used to correct
                                  the horizontal position of the tooltip */}
-                            <Text ref={el => this.childRefs[index] = el}>
-                                {participant.displayName}
+                            <Text ref={el => this.childRefs[tooltipText] = el}>
+                                {displayName}
                             </Text>
                         </Tooltip>
-                        {index < option.participantsList.length - 1 && <Text>,&nbsp;</Text>}
+                        {displayName !== lastDisplayName && <Text>,&nbsp;</Text>}
                     </Fragment>
                 ))}
-                {option.participantsList.length > 1 && this.state.isEllipsisActive
-                    && (
-                        <View style={styles.optionDisplayNameTooltipEllipsis}>
-                            <Tooltip text={option.tooltipText}>
-                                {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
-                                <Text>....</Text>
-                            </Tooltip>
-                        </View>
-                    )}
+                {displayNames.length > 1 && this.state.isEllipsisActive
+                && (
+                    <View style={styles.optionDisplayNameTooltipEllipsis}>
+                        <Tooltip text={this.props.fullTitle}>
+                            {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
+                            <Text>....</Text>
+                        </Tooltip>
+                    </View>
+                )}
             </Text>
         );
     }
 }
-OptionRowTitle.propTypes = propTypes;
-OptionRowTitle.defaultProps = defaultProps;
-OptionRowTitle.displayName = 'OptionRowTitle';
+DisplayNames.propTypes = propTypes;
+DisplayNames.defaultProps = defaultProps;
+DisplayNames.displayName = 'DisplayNames';
 
-export default OptionRowTitle;
+export default DisplayNames;
diff --git a/src/components/DisplayNames/index.native.js b/src/components/DisplayNames/index.native.js
new file mode 100644
index 000000000000..340809b5d6f3
--- /dev/null
+++ b/src/components/DisplayNames/index.native.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import {Text} from 'react-native';
+import {propTypes, defaultProps} from './DisplayNamesPropTypes';
+
+// As we don't have to show tooltips of the Native platform so we simply render the full display names list.
+const DisplayNames = ({
+    fullTitle,
+    numberOfLines,
+    textStyle,
+}) => (
+    <Text style={textStyle} numberOfLines={numberOfLines}>
+        {fullTitle}
+    </Text>
+);
+
+DisplayNames.propTypes = propTypes;
+DisplayNames.defaultProps = defaultProps;
+DisplayNames.displayName = 'DisplayNames';
+
+export default DisplayNames;
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 40e07a82daef..1acf4424c025 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import React from 'react';
 import {View, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
@@ -15,7 +16,7 @@ import MultipleAvatars from '../../components/MultipleAvatars';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import {getReportParticipantsTitle} from '../../libs/reportUtils';
-import OptionRowTitle from './sidebar/OptionRowTitle';
+import DisplayNames from '../../components/DisplayNames';
 import {getPersonalDetailsForLogins} from '../../libs/OptionsListUtils';
 import {participantPropTypes} from './sidebar/optionPropTypes';
 import VideoChatButtonAndMenu from '../../components/VideoChatButtonAndMenu';
@@ -53,11 +54,10 @@ const defaultProps = {
 
 const HeaderView = (props) => {
     const participants = lodashGet(props.report, 'participants', []);
-    const reportOption = {
-        text: lodashGet(props.report, 'reportName', ''),
-        tooltipText: getReportParticipantsTitle(participants),
-        participantsList: getPersonalDetailsForLogins(participants, props.personalDetails),
-    };
+    const displayNameToLoginMap = _.map(
+        getPersonalDetailsForLogins(participants, props.personalDetails),
+        personalDetailsForLogin => ({[personalDetailsForLogin.displayName]: personalDetailsForLogin.login}),
+    );
 
     return (
         <View style={[styles.appContentHeader]} nativeID="drag-area">
@@ -92,11 +92,12 @@ const HeaderView = (props) => {
                                 secondAvatarStyle={[styles.secondAvatarHovered]}
                             />
                             <View style={[styles.flex1, styles.flexRow]}>
-                                <OptionRowTitle
-                                    option={reportOption}
+                                <DisplayNames
+                                    fullTitle={getReportParticipantsTitle(participants)}
+                                    displayNameToTooltipMap={displayNameToLoginMap}
                                     tooltipEnabled
                                     numberOfLines={1}
-                                    style={[styles.headerText]}
+                                    textStyle={styles.headerText}
                                 />
                             </View>
                         </Pressable>
diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
index 860b23a45090..3b08eae4f2a2 100644
--- a/src/pages/home/sidebar/OptionRow.js
+++ b/src/pages/home/sidebar/OptionRow.js
@@ -14,7 +14,7 @@ import {Pencil, PinCircle, Checkmark} from '../../../components/Icon/Expensicons
 import MultipleAvatars from '../../../components/MultipleAvatars';
 import themeColors from '../../../styles/themes/default';
 import Hoverable from '../../../components/Hoverable';
-import OptionRowTitle from './OptionRowTitle';
+import DisplayNames from '../../../components/DisplayNames';
 import IOUBadge from '../../../components/IOUBadge';
 import colors from '../../../styles/colors';
 
@@ -109,6 +109,11 @@ const OptionRow = ({
         ? hoverStyle.backgroundColor
         : backgroundColor;
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
+    const displayNameToLoginMap = _.map(
+        option.participantsList,
+        participant => ({[participant.displayName]: participant.login}),
+    );
+
     return (
         <Hoverable>
             {hovered => (
@@ -152,14 +157,13 @@ const OptionRow = ({
                                 )
                             }
                             <View style={contentContainerStyles}>
-                                <OptionRowTitle
-                                    option={option}
+                                <DisplayNames
+                                    fullTitle={option.text}
+                                    displayNameToTooltipMap={displayNameToLoginMap}
                                     tooltipEnabled={showTitleTooltip}
                                     numberOfLines={1}
-                                    style={displayNameStyle}
-                                    reportID={option.reportID}
+                                    textStyle={displayNameStyle}
                                 />
-
                                 {option.alternateText ? (
                                     <Text
                                         style={alternateTextStyle}
diff --git a/src/pages/home/sidebar/OptionRowTitle/OptionRowTitleProps.js b/src/pages/home/sidebar/OptionRowTitle/OptionRowTitleProps.js
deleted file mode 100644
index 3bc7e93d15a2..000000000000
--- a/src/pages/home/sidebar/OptionRowTitle/OptionRowTitleProps.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import {participantPropTypes} from '../optionPropTypes';
-
-const propTypes = {
-    // Styles of the title
-    style: PropTypes.arrayOf(PropTypes.any),
-
-    // Lines before wrapping
-    numberOfLines: PropTypes.number,
-
-    // Is tooltip needed?
-    // When true, triggers complex title rendering
-    tooltipEnabled: PropTypes.bool,
-
-    // Option to allow the user to choose from can be type 'report' or 'user'
-    option: PropTypes.shape({
-        // The full name of the user if available, otherwise the login (email/phone number) of the user
-        text: PropTypes.string.isRequired,
-
-        // List of particiapants of the report
-        participantsList: PropTypes.arrayOf(participantPropTypes).isRequired,
-
-        // Text to show for tooltip
-        tooltipText: PropTypes.string,
-    }).isRequired,
-
-};
-
-const defaultProps = {
-    style: null,
-    tooltipEnabled: false,
-    numberOfLines: 1,
-};
-export {
-    propTypes,
-    defaultProps,
-};
diff --git a/src/pages/home/sidebar/OptionRowTitle/index.native.js b/src/pages/home/sidebar/OptionRowTitle/index.native.js
deleted file mode 100644
index b863a115579a..000000000000
--- a/src/pages/home/sidebar/OptionRowTitle/index.native.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// As we don't have to show tooltips of the Native platform so we simply render the option title which wraps.
-import React from 'react';
-import {Text} from 'react-native';
-import {propTypes, defaultProps} from './OptionRowTitleProps';
-
-const OptionRowTitle = ({
-    style,
-    option,
-    numberOfLines,
-}) => (
-    <Text style={style} numberOfLines={numberOfLines}>
-        {option.text}
-    </Text>
-);
-
-OptionRowTitle.propTypes = propTypes;
-OptionRowTitle.defaultProps = defaultProps;
-OptionRowTitle.displayName = 'OptionRowTitle';
-
-export default OptionRowTitle;

From 6beb739f06ce37b1c9b1e43f86a9d06b40945002 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 2 Apr 2021 12:47:42 -0700
Subject: [PATCH 02/11] Use array instead of object and fix prop types

---
 .../DisplayNames/DisplayNamesPropTypes.js      |  7 +++++--
 src/components/DisplayNames/index.js           | 18 +++++++++---------
 src/components/DisplayNames/index.native.js    |  4 ++--
 src/pages/home/HeaderView.js                   |  8 ++++----
 src/pages/home/report/ReportActionItem.js      |  2 +-
 src/pages/home/sidebar/OptionRow.js            |  8 ++++----
 6 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/components/DisplayNames/DisplayNamesPropTypes.js b/src/components/DisplayNames/DisplayNamesPropTypes.js
index bf1a95851e61..9be34fbd0f9f 100644
--- a/src/components/DisplayNames/DisplayNamesPropTypes.js
+++ b/src/components/DisplayNames/DisplayNamesPropTypes.js
@@ -5,7 +5,10 @@ const propTypes = {
     fullTitle: PropTypes.string,
 
     // Array of objects that map display names to their corresponding tooltip
-    displayNameToTooltipMap: PropTypes.object,
+    displayNamesToTooltips: PropTypes.arrayOf(PropTypes.shape({
+        displayName: PropTypes.string,
+        tooltip: PropTypes.string,
+    })),
 
     // Number of lines before wrapping
     numberOfLines: PropTypes.number,
@@ -15,7 +18,7 @@ const propTypes = {
     tooltipEnabled: PropTypes.bool,
 
     // Arbitrary styles of the displayName text
-    textStyle: PropTypes.arrayOf(PropTypes.any),
+    textStyles: PropTypes.arrayOf(PropTypes.any),
 };
 
 const defaultProps = {
diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index aa246e815004..811095958596 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -69,7 +69,7 @@ class DisplayNames extends PureComponent {
             // No need for any complex text-splitting, just return a simple text component
             return (
                 <Text
-                    style={this.props.textStyle}
+                    style={this.props.textStyles}
                     numberOfLines={this.props.numberOfLines}
                 >
                     {this.props.fullTitle}
@@ -77,29 +77,29 @@ class DisplayNames extends PureComponent {
             );
         }
 
-        const displayNames = _.keys(this.props.displayNameToTooltipMap);
+        const displayNames = _.flatten(_.map(this.props.displayNamesToTooltips, mapEntry => _.keys(mapEntry)));
         const lastDisplayName = _.last(displayNames);
 
         return (
 
             // Tokenization of string only support 1 numberOfLines on Web
             <Text
-                style={[this.props.textStyle, styles.optionDisplayNameTooltipWrapper]}
+                style={[this.props.textStyles, styles.optionDisplayNameTooltipWrapper]}
                 onLayout={this.setContainerLayout}
                 numberOfLines={1}
                 ref={el => this.containerRef = el}
             >
-                {_.mapObject(this.props.displayNameToTooltipMap, (displayName, tooltipText) => (
-                    <Fragment key={tooltipText}>
+                {_.map(this.props.displayNamesToTooltips, ({displayName, tooltip}, index) => (
+                    <Fragment key={index}>
                         <Tooltip
-                            key={tooltipText}
-                            text={tooltipText}
+                            key={index}
+                            text={tooltip}
                             containerStyle={styles.dInline}
-                            shiftHorizontal={() => this.getTooltipShiftX(tooltipText)}
+                            shiftHorizontal={() => this.getTooltipShiftX(tooltip)}
                         >
                             {/*  // We need to get the refs to all the names which will be used to correct
                                  the horizontal position of the tooltip */}
-                            <Text ref={el => this.childRefs[tooltipText] = el}>
+                            <Text ref={el => this.childRefs[index] = el}>
                                 {displayName}
                             </Text>
                         </Tooltip>
diff --git a/src/components/DisplayNames/index.native.js b/src/components/DisplayNames/index.native.js
index 340809b5d6f3..81c0f9dfc50b 100644
--- a/src/components/DisplayNames/index.native.js
+++ b/src/components/DisplayNames/index.native.js
@@ -6,9 +6,9 @@ import {propTypes, defaultProps} from './DisplayNamesPropTypes';
 const DisplayNames = ({
     fullTitle,
     numberOfLines,
-    textStyle,
+    textStyles,
 }) => (
-    <Text style={textStyle} numberOfLines={numberOfLines}>
+    <Text style={textStyles} numberOfLines={numberOfLines}>
         {fullTitle}
     </Text>
 );
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 1acf4424c025..6de0ec80d7bc 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -54,9 +54,9 @@ const defaultProps = {
 
 const HeaderView = (props) => {
     const participants = lodashGet(props.report, 'participants', []);
-    const displayNameToLoginMap = _.map(
+    const displayNamesToTooltips = _.map(
         getPersonalDetailsForLogins(participants, props.personalDetails),
-        personalDetailsForLogin => ({[personalDetailsForLogin.displayName]: personalDetailsForLogin.login}),
+        ({displayName, login}) => ({displayName, tooltip: login}),
     );
 
     return (
@@ -94,10 +94,10 @@ const HeaderView = (props) => {
                             <View style={[styles.flex1, styles.flexRow]}>
                                 <DisplayNames
                                     fullTitle={getReportParticipantsTitle(participants)}
-                                    displayNameToTooltipMap={displayNameToLoginMap}
+                                    displayNamesToTooltips={displayNamesToTooltips}
                                     tooltipEnabled
                                     numberOfLines={1}
-                                    textStyle={styles.headerText}
+                                    textStyles={[styles.headerText]}
                                 />
                             </View>
                         </Pressable>
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index c40efa8d516d..2db7c2878399 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -135,7 +135,7 @@ class ReportActionItem extends Component {
                                     <ReportActionContextMenu
                                         isVisible
                                         reportID={-1}
-                                        reportAction={{}}
+                                        reportAction={this.props.action}
                                     />
                                 )}
                             >
diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
index 3b08eae4f2a2..585163280890 100644
--- a/src/pages/home/sidebar/OptionRow.js
+++ b/src/pages/home/sidebar/OptionRow.js
@@ -109,9 +109,9 @@ const OptionRow = ({
         ? hoverStyle.backgroundColor
         : backgroundColor;
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
-    const displayNameToLoginMap = _.map(
+    const displayNamesToTooltips = _.map(
         option.participantsList,
-        participant => ({[participant.displayName]: participant.login}),
+        ({displayName, login}) => ({displayName, tooltip: login}),
     );
 
     return (
@@ -159,10 +159,10 @@ const OptionRow = ({
                             <View style={contentContainerStyles}>
                                 <DisplayNames
                                     fullTitle={option.text}
-                                    displayNameToTooltipMap={displayNameToLoginMap}
+                                    displayNamesToTooltips={displayNamesToTooltips}
                                     tooltipEnabled={showTitleTooltip}
                                     numberOfLines={1}
-                                    textStyle={displayNameStyle}
+                                    textStyles={displayNameStyle}
                                 />
                                 {option.alternateText ? (
                                     <Text

From ba3c6d1b41147446a883104041d5a285f2d55daf Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 2 Apr 2021 12:53:33 -0700
Subject: [PATCH 03/11] fix indexing issue

---
 src/components/DisplayNames/index.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index 811095958596..f55b37df45bf 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -77,9 +77,6 @@ class DisplayNames extends PureComponent {
             );
         }
 
-        const displayNames = _.flatten(_.map(this.props.displayNamesToTooltips, mapEntry => _.keys(mapEntry)));
-        const lastDisplayName = _.last(displayNames);
-
         return (
 
             // Tokenization of string only support 1 numberOfLines on Web
@@ -95,7 +92,7 @@ class DisplayNames extends PureComponent {
                             key={index}
                             text={tooltip}
                             containerStyle={styles.dInline}
-                            shiftHorizontal={() => this.getTooltipShiftX(tooltip)}
+                            shiftHorizontal={() => this.getTooltipShiftX(index)}
                         >
                             {/*  // We need to get the refs to all the names which will be used to correct
                                  the horizontal position of the tooltip */}
@@ -103,10 +100,10 @@ class DisplayNames extends PureComponent {
                                 {displayName}
                             </Text>
                         </Tooltip>
-                        {displayName !== lastDisplayName && <Text>,&nbsp;</Text>}
+                        {index < this.props.displayNamesToTooltips.length - 1 && <Text>,&nbsp;</Text>}
                     </Fragment>
                 ))}
-                {displayNames.length > 1 && this.state.isEllipsisActive
+                {this.props.displayNamesToTooltips.length > 1 && this.state.isEllipsisActive
                 && (
                     <View style={styles.optionDisplayNameTooltipEllipsis}>
                         <Tooltip text={this.props.fullTitle}>

From 3f99483bfc602eec7953ed7a4081a30887e4ab15 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 2 Apr 2021 12:57:53 -0700
Subject: [PATCH 04/11] Rename and generalize styles

---
 src/components/DisplayNames/index.js | 4 ++--
 src/styles/styles.js                 | 6 +-----
 src/styles/utilities/positioning.js  | 3 +++
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index f55b37df45bf..e5034d4634f2 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -81,7 +81,7 @@ class DisplayNames extends PureComponent {
 
             // Tokenization of string only support 1 numberOfLines on Web
             <Text
-                style={[this.props.textStyles, styles.optionDisplayNameTooltipWrapper]}
+                style={[this.props.textStyles, styles.pRelative]}
                 onLayout={this.setContainerLayout}
                 numberOfLines={1}
                 ref={el => this.containerRef = el}
@@ -105,7 +105,7 @@ class DisplayNames extends PureComponent {
                 ))}
                 {this.props.displayNamesToTooltips.length > 1 && this.state.isEllipsisActive
                 && (
-                    <View style={styles.optionDisplayNameTooltipEllipsis}>
+                    <View style={styles.displayNameTooltipEllipsis}>
                         <Tooltip text={this.props.fullTitle}>
                             {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
                             <Text>....</Text>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 22b13cd5e8db..09e724713c9d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -599,11 +599,7 @@ const styles = {
         flexShrink: 0,
     },
 
-    optionDisplayNameTooltipWrapper: {
-        position: 'relative',
-    },
-
-    optionDisplayNameTooltipEllipsis: {
+    displayNameTooltipEllipsis: {
         position: 'absolute',
         opacity: 0,
         right: 0,
diff --git a/src/styles/utilities/positioning.js b/src/styles/utilities/positioning.js
index 9514b8f55091..f73954241960 100644
--- a/src/styles/utilities/positioning.js
+++ b/src/styles/utilities/positioning.js
@@ -3,6 +3,9 @@
  * Everything is a multiple of 4 to coincide with the spacing utilities.
  */
 export default {
+    pRelative: {
+        position: 'relative',
+    },
     tn4: {
         top: -16,
     },

From 942fe1643c7218200cd3cd473d0363ce8790b68d Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 2 Apr 2021 13:08:12 -0700
Subject: [PATCH 05/11] Import and export positioning from global style object

---
 src/styles/styles.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 09e724713c9d..b9b06f3bfbd7 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -13,6 +13,7 @@ import overflow from './utilities/overflow';
 import whiteSpace from './utilities/whiteSpace';
 import wordBreak from './utilities/wordBreak';
 import textInputAlignSelf from './utilities/textInputAlignSelf';
+import positioning from './utilities/positioning';
 
 const styles = {
     // Add all of our utility and helper styles
@@ -21,6 +22,7 @@ const styles = {
     ...flex,
     ...display,
     ...overflow,
+    ...positioning,
     ...wordBreak,
     ...whiteSpace,
 

From 596e70c2bce62f8723110e6b0b998c016d35f4b9 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 2 Apr 2021 21:07:33 -0700
Subject: [PATCH 06/11] Simplify diff

---
 src/components/DisplayNames/index.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index e5034d4634f2..8651fea3ea76 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -1,6 +1,9 @@
 import _ from 'underscore';
 import React, {Fragment, PureComponent} from 'react';
-import {Text, View} from 'react-native';
+import {
+    Text,
+    View,
+} from 'react-native';
 import {propTypes, defaultProps} from './DisplayNamesPropTypes';
 import styles from '../../styles/styles';
 import Tooltip from '../Tooltip';
@@ -104,14 +107,14 @@ class DisplayNames extends PureComponent {
                     </Fragment>
                 ))}
                 {this.props.displayNamesToTooltips.length > 1 && this.state.isEllipsisActive
-                && (
-                    <View style={styles.displayNameTooltipEllipsis}>
-                        <Tooltip text={this.props.fullTitle}>
-                            {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
-                            <Text>....</Text>
-                        </Tooltip>
-                    </View>
-                )}
+                    && (
+                        <View style={styles.displayNameTooltipEllipsis}>
+                            <Tooltip text={this.props.fullTitle}>
+                                {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
+                                <Text>....</Text>
+                            </Tooltip>
+                        </View>
+                    )}
             </Text>
         );
     }

From 9b22314de6d2d4270678e7f50e42320f6a72039a Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 2 Apr 2021 21:10:54 -0700
Subject: [PATCH 07/11] Fix import style

---
 src/components/DisplayNames/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index 8651fea3ea76..6e55ee571416 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -1,9 +1,6 @@
 import _ from 'underscore';
 import React, {Fragment, PureComponent} from 'react';
-import {
-    Text,
-    View,
-} from 'react-native';
+import {Text, View} from 'react-native';
 import {propTypes, defaultProps} from './DisplayNamesPropTypes';
 import styles from '../../styles/styles';
 import Tooltip from '../Tooltip';

From f0d196b30880f142377037a623b599b55791a424 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 2 Apr 2021 21:16:58 -0700
Subject: [PATCH 08/11] Rename hasEllipsis to hasContentWiderThanScrollWidth

---
 src/components/DisplayNames/index.js       |  4 ++--
 src/libs/hasContentWiderThanScrollWidth.js | 11 +++++++++++
 src/libs/hasEllipsis/index.js              | 11 -----------
 src/libs/hasEllipsis/index.native.js       |  1 -
 4 files changed, 13 insertions(+), 14 deletions(-)
 create mode 100644 src/libs/hasContentWiderThanScrollWidth.js
 delete mode 100644 src/libs/hasEllipsis/index.js
 delete mode 100644 src/libs/hasEllipsis/index.native.js

diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index 6e55ee571416..28e0c305ead9 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -4,7 +4,7 @@ import {Text, View} from 'react-native';
 import {propTypes, defaultProps} from './DisplayNamesPropTypes';
 import styles from '../../styles/styles';
 import Tooltip from '../Tooltip';
-import hasEllipsis from '../../libs/hasEllipsis';
+import hasContentWiderThanScrollWidth from '../../libs/hasContentWiderThanScrollWidth';
 
 class DisplayNames extends PureComponent {
     constructor(props) {
@@ -20,7 +20,7 @@ class DisplayNames extends PureComponent {
 
     componentDidMount() {
         this.setState({
-            isEllipsisActive: this.containerRef && hasEllipsis(this.containerRef),
+            isEllipsisActive: this.containerRef && hasContentWiderThanScrollWidth(this.containerRef),
         });
     }
 
diff --git a/src/libs/hasContentWiderThanScrollWidth.js b/src/libs/hasContentWiderThanScrollWidth.js
new file mode 100644
index 000000000000..81df3455937c
--- /dev/null
+++ b/src/libs/hasContentWiderThanScrollWidth.js
@@ -0,0 +1,11 @@
+/**
+ * Does an element have content wider than it's scroll width?
+ *
+ * @param {HTMLElement} el Element to check
+ * @returns {Boolean}
+ */
+function hasContentWiderThanScrollWidth(el) {
+    return el.offsetWidth && el.scrollWidth && el.offsetWidth < el.scrollWidth;
+}
+
+export default hasContentWiderThanScrollWidth;
diff --git a/src/libs/hasEllipsis/index.js b/src/libs/hasEllipsis/index.js
deleted file mode 100644
index d18af237be35..000000000000
--- a/src/libs/hasEllipsis/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Does an elment have ellipsis
- *
- * @param {HTMLElement} el Element to check
- * @returns {Boolean}
- */
-function hasEllipsis(el) {
-    return el.offsetWidth < el.scrollWidth;
-}
-
-export default hasEllipsis;
diff --git a/src/libs/hasEllipsis/index.native.js b/src/libs/hasEllipsis/index.native.js
deleted file mode 100644
index 2d1ec238274a..000000000000
--- a/src/libs/hasEllipsis/index.native.js
+++ /dev/null
@@ -1 +0,0 @@
-export default () => {};

From a4107f1b540e36ab28b954d0458af8d3f480259c Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 9 Apr 2021 12:49:56 -0700
Subject: [PATCH 09/11] Get rid of hasEllipsis library

---
 src/components/DisplayNames/DisplayNamesPropTypes.js |  3 +++
 src/components/DisplayNames/index.js                 |  6 ++++--
 src/libs/hasContentWiderThanScrollWidth.js           | 11 -----------
 3 files changed, 7 insertions(+), 13 deletions(-)
 delete mode 100644 src/libs/hasContentWiderThanScrollWidth.js

diff --git a/src/components/DisplayNames/DisplayNamesPropTypes.js b/src/components/DisplayNames/DisplayNamesPropTypes.js
index 9be34fbd0f9f..4f1ef3b21119 100644
--- a/src/components/DisplayNames/DisplayNamesPropTypes.js
+++ b/src/components/DisplayNames/DisplayNamesPropTypes.js
@@ -6,7 +6,10 @@ const propTypes = {
 
     // Array of objects that map display names to their corresponding tooltip
     displayNamesToTooltips: PropTypes.arrayOf(PropTypes.shape({
+        // The name to display in bold
         displayName: PropTypes.string,
+
+        // The tooltip to show when the associated name is hovered
         tooltip: PropTypes.string,
     })),
 
diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index 28e0c305ead9..bb44c0b8a09b 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -4,7 +4,6 @@ import {Text, View} from 'react-native';
 import {propTypes, defaultProps} from './DisplayNamesPropTypes';
 import styles from '../../styles/styles';
 import Tooltip from '../Tooltip';
-import hasContentWiderThanScrollWidth from '../../libs/hasContentWiderThanScrollWidth';
 
 class DisplayNames extends PureComponent {
     constructor(props) {
@@ -20,7 +19,10 @@ class DisplayNames extends PureComponent {
 
     componentDidMount() {
         this.setState({
-            isEllipsisActive: this.containerRef && hasContentWiderThanScrollWidth(this.containerRef),
+            isEllipsisActive: this.containerRef
+                && this.containerRef.offsetWidth
+                && this.containerRef.scrollWidth
+                && this.containerRef.offsetWidth < this.containerRef.scrollWidth,
         });
     }
 
diff --git a/src/libs/hasContentWiderThanScrollWidth.js b/src/libs/hasContentWiderThanScrollWidth.js
deleted file mode 100644
index 81df3455937c..000000000000
--- a/src/libs/hasContentWiderThanScrollWidth.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Does an element have content wider than it's scroll width?
- *
- * @param {HTMLElement} el Element to check
- * @returns {Boolean}
- */
-function hasContentWiderThanScrollWidth(el) {
-    return el.offsetWidth && el.scrollWidth && el.offsetWidth < el.scrollWidth;
-}
-
-export default hasContentWiderThanScrollWidth;

From 23aca9c23378627a57ef533c1cf34ba0fc080764 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 9 Apr 2021 12:52:21 -0700
Subject: [PATCH 10/11] Rename displayNamesToTooltips prop

---
 src/components/DisplayNames/DisplayNamesPropTypes.js | 2 +-
 src/pages/home/HeaderView.js                         | 4 ++--
 src/pages/home/sidebar/OptionRow.js                  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/DisplayNames/DisplayNamesPropTypes.js b/src/components/DisplayNames/DisplayNamesPropTypes.js
index 4f1ef3b21119..5a94673a9bfa 100644
--- a/src/components/DisplayNames/DisplayNamesPropTypes.js
+++ b/src/components/DisplayNames/DisplayNamesPropTypes.js
@@ -5,7 +5,7 @@ const propTypes = {
     fullTitle: PropTypes.string,
 
     // Array of objects that map display names to their corresponding tooltip
-    displayNamesToTooltips: PropTypes.arrayOf(PropTypes.shape({
+    displayNamesWithTooltips: PropTypes.arrayOf(PropTypes.shape({
         // The name to display in bold
         displayName: PropTypes.string,
 
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 6de0ec80d7bc..d94eab3d18b6 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -54,7 +54,7 @@ const defaultProps = {
 
 const HeaderView = (props) => {
     const participants = lodashGet(props.report, 'participants', []);
-    const displayNamesToTooltips = _.map(
+    const displayNamesWithTooltips = _.map(
         getPersonalDetailsForLogins(participants, props.personalDetails),
         ({displayName, login}) => ({displayName, tooltip: login}),
     );
@@ -94,7 +94,7 @@ const HeaderView = (props) => {
                             <View style={[styles.flex1, styles.flexRow]}>
                                 <DisplayNames
                                     fullTitle={getReportParticipantsTitle(participants)}
-                                    displayNamesToTooltips={displayNamesToTooltips}
+                                    displayNamesWithTooltips={displayNamesWithTooltips}
                                     tooltipEnabled
                                     numberOfLines={1}
                                     textStyles={[styles.headerText]}
diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
index 585163280890..5212a2584476 100644
--- a/src/pages/home/sidebar/OptionRow.js
+++ b/src/pages/home/sidebar/OptionRow.js
@@ -109,7 +109,7 @@ const OptionRow = ({
         ? hoverStyle.backgroundColor
         : backgroundColor;
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
-    const displayNamesToTooltips = _.map(
+    const displayNamesWithTooltips = _.map(
         option.participantsList,
         ({displayName, login}) => ({displayName, tooltip: login}),
     );
@@ -159,7 +159,7 @@ const OptionRow = ({
                             <View style={contentContainerStyles}>
                                 <DisplayNames
                                     fullTitle={option.text}
-                                    displayNamesToTooltips={displayNamesToTooltips}
+                                    displayNamesWithTooltips={displayNamesWithTooltips}
                                     tooltipEnabled={showTitleTooltip}
                                     numberOfLines={1}
                                     textStyles={displayNameStyle}

From 9710c056ba700931c382618103ad68f717a4f245 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 9 Apr 2021 12:58:51 -0700
Subject: [PATCH 11/11] Rename propTypes file to camelCase

---
 .../{DisplayNamesPropTypes.js => displayNamesPropTypes.js}      | 0
 src/components/DisplayNames/index.js                            | 2 +-
 src/components/DisplayNames/index.native.js                     | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/components/DisplayNames/{DisplayNamesPropTypes.js => displayNamesPropTypes.js} (100%)

diff --git a/src/components/DisplayNames/DisplayNamesPropTypes.js b/src/components/DisplayNames/displayNamesPropTypes.js
similarity index 100%
rename from src/components/DisplayNames/DisplayNamesPropTypes.js
rename to src/components/DisplayNames/displayNamesPropTypes.js
diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index bb44c0b8a09b..72f89e6f1e22 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React, {Fragment, PureComponent} from 'react';
 import {Text, View} from 'react-native';
-import {propTypes, defaultProps} from './DisplayNamesPropTypes';
+import {propTypes, defaultProps} from './displayNamesPropTypes';
 import styles from '../../styles/styles';
 import Tooltip from '../Tooltip';
 
diff --git a/src/components/DisplayNames/index.native.js b/src/components/DisplayNames/index.native.js
index 81c0f9dfc50b..8a882f8eb576 100644
--- a/src/components/DisplayNames/index.native.js
+++ b/src/components/DisplayNames/index.native.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Text} from 'react-native';
-import {propTypes, defaultProps} from './DisplayNamesPropTypes';
+import {propTypes, defaultProps} from './displayNamesPropTypes';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
 const DisplayNames = ({