From 614b2836a9d19db9df34f711ec55748a7c19ff83 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Tue, 6 Jun 2023 11:56:03 -0400 Subject: [PATCH 01/58] feat(userTooltip): init --- src/components/UserDetailsTooltip/index.js | 31 +++++++++++++++++++ .../userDetailsTooltipPropTypes.js | 20 ++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 src/components/UserDetailsTooltip/index.js create mode 100644 src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js new file mode 100644 index 000000000000..467e77696f60 --- /dev/null +++ b/src/components/UserDetailsTooltip/index.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { View, Text } from 'react-native'; +import Avatar from '../Avatar'; +import Tooltip from '../Tooltip'; +import { propTypes, defaultProps } from './userDetailsTooltipPropTypes'; +import styles from '../../styles/styles'; + +const UserDetailsTooltip = (props) => { + const { avatarSource, name, handle, children } = props + + return ( + ( + + + {name && {name}} + {handle && @{handle}} + + )} + >{children} + ) +} + +UserDetailsTooltip.propTypes = propTypes +UserDetailsTooltip.defaultProps = defaultProps +UserDetailsTooltip.displayName = 'UserDetailsTooltip' + +export default UserDetailsTooltip; diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js new file mode 100644 index 000000000000..adb8de8a6276 --- /dev/null +++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js @@ -0,0 +1,20 @@ +import PropTypes from 'prop-types'; + +const propTypes = { + /** Source image */ + avatarSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), + /** User's name */ + name: PropTypes.string, + /** User's handle */ + handle: PropTypes.string, + /** Component that displays the tooltip */ + children: PropTypes.node.isRequired, +}; + +const defaultProps = { + avatarSource: null, + name: '', + handle: '', +}; + +export {propTypes, defaultProps}; From f856ce5c413e82c08299e8f3a9e52059e2370a16 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Tue, 6 Jun 2023 11:56:04 -0400 Subject: [PATCH 02/58] feat(reportActionItem): use userTooltip --- .../home/report/ReportActionItemFragment.js | 21 +++++++++++++------ .../home/report/ReportActionItemSingle.js | 16 +++++++++----- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 05cba64e6236..5c664ff15904 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -8,7 +8,6 @@ import variables from '../../../styles/variables'; import themeColors from '../../../styles/themes/default'; import RenderHTML from '../../../components/RenderHTML'; import Text from '../../../components/Text'; -import Tooltip from '../../../components/Tooltip'; import * as EmojiUtils from '../../../libs/EmojiUtils'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; @@ -19,14 +18,21 @@ import {withNetwork} from '../../../components/OnyxProvider'; import CONST from '../../../CONST'; import applyStrikethrough from '../../../components/HTMLEngineProvider/applyStrikethrough'; import editedLabelStyles from '../../../styles/editedLabelStyles'; +import UserDetailsTooltip from '../../../components/UserDetailsTooltip'; const propTypes = { + /** Source image */ + avatarSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), + + /** User's name */ + name: PropTypes.string, + + /** User's handle */ + handle: PropTypes.string, + /** The message fragment needing to be displayed */ fragment: reportActionFragmentPropTypes.isRequired, - /** Text to be shown for tooltip When Fragment is report Actor */ - tooltipText: PropTypes.string, - /** Is this fragment an attachment? */ isAttachment: PropTypes.bool, @@ -64,6 +70,9 @@ const propTypes = { }; const defaultProps = { + avatarSource: null, + name: '', + handle: '', isAttachment: false, attachmentInfo: { name: '', @@ -143,14 +152,14 @@ const ReportActionItemFragment = (props) => { } case 'TEXT': return ( - + {props.fragment.text} - + ); case 'LINK': return LINK; diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index 96fd6be6ad26..868538a148a2 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -14,7 +14,6 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import {withPersonalDetails} from '../../../components/OnyxProvider'; -import Tooltip from '../../../components/Tooltip'; import ControlSelection from '../../../libs/ControlSelection'; import * as ReportUtils from '../../../libs/ReportUtils'; import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; @@ -22,6 +21,7 @@ import CONST from '../../../CONST'; import SubscriptAvatar from '../../../components/SubscriptAvatar'; import reportPropTypes from '../../reportPropTypes'; import * as UserUtils from '../../../libs/UserUtils'; +import UserDetailsTooltip from '../../../components/UserDetailsTooltip'; const propTypes = { /** All the data of the action */ @@ -67,7 +67,7 @@ const showUserDetails = (email) => { const ReportActionItemSingle = (props) => { const actorEmail = props.action.actorEmail.replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''); - const {avatar, displayName, pendingFields} = props.personalDetails[actorEmail] || {}; + const {avatar, displayName, pendingFields, handle} = props.personalDetails[actorEmail] || {}; const avatarSource = UserUtils.getAvatar(avatar, actorEmail); // Since the display name for a report action message is delivered with the report history as an array of fragments @@ -100,14 +100,18 @@ const ReportActionItemSingle = (props) => { noMargin /> ) : ( - + - + )} @@ -123,8 +127,10 @@ const ReportActionItemSingle = (props) => { {_.map(personArray, (fragment, index) => ( Date: Tue, 6 Jun 2023 11:56:04 -0400 Subject: [PATCH 03/58] fix(userTooltip): proper boolean conditional --- src/components/UserDetailsTooltip/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js index 467e77696f60..50e3fd82f3f7 100644 --- a/src/components/UserDetailsTooltip/index.js +++ b/src/components/UserDetailsTooltip/index.js @@ -16,8 +16,8 @@ const UserDetailsTooltip = (props) => { containerStyles={[styles.actionAvatar]} source={avatarSource} /> - {name && {name}} - {handle && @{handle}} + {(name.trim() != "") && {name}} + {(handle.trim() != "") && @{handle}} )} >{children} From 8c6a4b743f57e3254df969e7f1c5ac797a7e0c4f Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Tue, 6 Jun 2023 11:56:05 -0400 Subject: [PATCH 04/58] fix(userDetailsTooltip): rename index --- .../UserDetailsTooltip/{index.js => UserDetailsTooltip.js} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/UserDetailsTooltip/{index.js => UserDetailsTooltip.js} (94%) diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js similarity index 94% rename from src/components/UserDetailsTooltip/index.js rename to src/components/UserDetailsTooltip/UserDetailsTooltip.js index 50e3fd82f3f7..a42183fab950 100644 --- a/src/components/UserDetailsTooltip/index.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -11,7 +11,7 @@ const UserDetailsTooltip = (props) => { return ( ( - + Date: Tue, 6 Jun 2023 11:56:05 -0400 Subject: [PATCH 05/58] fix(userDetailsTooltip): update imports --- src/pages/home/report/ReportActionItemFragment.js | 2 +- src/pages/home/report/ReportActionItemSingle.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 5c664ff15904..2cf940ff5cdc 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -18,7 +18,7 @@ import {withNetwork} from '../../../components/OnyxProvider'; import CONST from '../../../CONST'; import applyStrikethrough from '../../../components/HTMLEngineProvider/applyStrikethrough'; import editedLabelStyles from '../../../styles/editedLabelStyles'; -import UserDetailsTooltip from '../../../components/UserDetailsTooltip'; +import UserDetailsTooltip from '../../../components/UserDetailsTooltip/UserDetailsTooltip'; const propTypes = { /** Source image */ diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index 868538a148a2..c8228ae96f01 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -21,7 +21,7 @@ import CONST from '../../../CONST'; import SubscriptAvatar from '../../../components/SubscriptAvatar'; import reportPropTypes from '../../reportPropTypes'; import * as UserUtils from '../../../libs/UserUtils'; -import UserDetailsTooltip from '../../../components/UserDetailsTooltip'; +import UserDetailsTooltip from '../../../components/UserDetailsTooltip/UserDetailsTooltip'; const propTypes = { /** All the data of the action */ From 34f12e9bd5e148ffbcf4f24e75a6c7506c0cbaa6 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio <59715908+cloudpresser@users.noreply.github.com> Date: Tue, 6 Jun 2023 14:21:45 -0400 Subject: [PATCH 06/58] style(userDetailsTooltip): use function instead of const Co-authored-by: Fedi Rajhi --- src/components/UserDetailsTooltip/UserDetailsTooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index a42183fab950..5152fc3e31c3 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -5,7 +5,7 @@ import Tooltip from '../Tooltip'; import { propTypes, defaultProps } from './userDetailsTooltipPropTypes'; import styles from '../../styles/styles'; -const UserDetailsTooltip = (props) => { +function UserDetailsTooltip(props){ const { avatarSource, name, handle, children } = props return ( From e6eb717f3f7cbfe3a6a9c5de7bc6cfda3f8434d6 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio <59715908+cloudpresser@users.noreply.github.com> Date: Tue, 6 Jun 2023 14:22:32 -0400 Subject: [PATCH 07/58] style(userDetailsTooltip): cast string to boolean Co-authored-by: Fedi Rajhi --- src/components/UserDetailsTooltip/UserDetailsTooltip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index 5152fc3e31c3..016839309fb2 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -16,8 +16,8 @@ function UserDetailsTooltip(props){ containerStyles={[styles.actionAvatar]} source={avatarSource} /> - {(name.trim() != "") && {name}} - {(handle.trim() != "") && @{handle}} + {Boolean(name.trim()) ? {name} : ''} + {Boolean(handle.trim()) ? @{handle} : ''} )} >{children} From f7bde403c909500933a72944921e6855635beac5 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Tue, 6 Jun 2023 14:25:53 -0400 Subject: [PATCH 08/58] style(userDetailsTooltip): don't destructure props --- .../UserDetailsTooltip/UserDetailsTooltip.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index 016839309fb2..c9f56a897155 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -6,21 +6,19 @@ import { propTypes, defaultProps } from './userDetailsTooltipPropTypes'; import styles from '../../styles/styles'; function UserDetailsTooltip(props){ - const { avatarSource, name, handle, children } = props - return ( ( - {Boolean(name.trim()) ? {name} : ''} - {Boolean(handle.trim()) ? @{handle} : ''} + {Boolean(props.name.trim()) ? {props.name} : ''} + {Boolean(props.handle.trim()) ? @{props.handle} : ''} )} - >{children} + >{props.children} ) } From 9840b18ed39c6a0008653fc0e68438f747b5d4aa Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Tue, 6 Jun 2023 14:30:38 -0400 Subject: [PATCH 09/58] fix(userDetailsTooltip): useCallback --- .../UserDetailsTooltip/UserDetailsTooltip.js | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index c9f56a897155..645c02754c12 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { View, Text } from 'react-native'; import Avatar from '../Avatar'; import Tooltip from '../Tooltip'; @@ -6,19 +6,22 @@ import { propTypes, defaultProps } from './userDetailsTooltipPropTypes'; import styles from '../../styles/styles'; function UserDetailsTooltip(props){ + + const renderTooltipContent = useCallback(() => { + return ( + + + {Boolean(props.name.trim()) ? {props.name} : ''} + {Boolean(props.handle.trim()) ? @{props.handle} : ''} + + ); + }, [props.avatarSource, props.name, props.handle]); + return ( - ( - - - {Boolean(props.name.trim()) ? {props.name} : ''} - {Boolean(props.handle.trim()) ? @{props.handle} : ''} - - )} - >{props.children} + {props.children} ) } From 57225755a84c941b9b567b1e81380028a162cfb3 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Tue, 6 Jun 2023 14:31:36 -0400 Subject: [PATCH 10/58] style(userDetailsTooltip): new line --- src/components/UserDetailsTooltip/UserDetailsTooltip.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index 645c02754c12..25ee436ad9a8 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -6,7 +6,7 @@ import { propTypes, defaultProps } from './userDetailsTooltipPropTypes'; import styles from '../../styles/styles'; function UserDetailsTooltip(props){ - + const renderTooltipContent = useCallback(() => { return ( @@ -21,7 +21,9 @@ function UserDetailsTooltip(props){ }, [props.avatarSource, props.name, props.handle]); return ( - {props.children} + + {props.children} + ) } From 4fa3e52fa9fb84ee265f00ea98fafd40b688e373 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Tue, 6 Jun 2023 14:59:13 -0400 Subject: [PATCH 11/58] fix(userDetailsTooltip): propTypes --- .../UserDetailsTooltip/userDetailsTooltipPropTypes.js | 2 +- src/pages/home/report/ReportActionItemFragment.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js index adb8de8a6276..989138915236 100644 --- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js +++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; const propTypes = { /** Source image */ - avatarSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), + avatarSource: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), /** User's name */ name: PropTypes.string, /** User's handle */ diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 2cf940ff5cdc..e7d0174a561a 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -22,7 +22,7 @@ import UserDetailsTooltip from '../../../components/UserDetailsTooltip/UserDetai const propTypes = { /** Source image */ - avatarSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), + avatarSource: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), /** User's name */ name: PropTypes.string, From 4535ee0d67dc1a33cb3f31412fdddb42b734b0bb Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Tue, 6 Jun 2023 15:29:52 -0400 Subject: [PATCH 12/58] feat(userDetailsTooltip): correct styles --- .../UserDetailsTooltip/UserDetailsTooltip.js | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index 25ee436ad9a8..de58abe03854 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -9,14 +9,19 @@ function UserDetailsTooltip(props){ const renderTooltipContent = useCallback(() => { return ( - - - {Boolean(props.name.trim()) ? {props.name} : ''} - {Boolean(props.handle.trim()) ? @{props.handle} : ''} - + + + + + + {Boolean(props.name.trim()) ? {props.name} : ''} + + {Boolean(props.handle.trim()) ? @{props.handle} : ''} + + ); }, [props.avatarSource, props.name, props.handle]); From 48f5af8d674b5b69dcb9b089af464b72748278fb Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Wed, 7 Jun 2023 11:00:53 -0400 Subject: [PATCH 13/58] feat(userDetailsTooltip): use login instead of handle --- src/components/UserDetailsTooltip/UserDetailsTooltip.js | 4 ++-- .../UserDetailsTooltip/userDetailsTooltipPropTypes.js | 6 +++--- src/pages/home/report/ReportActionItemFragment.js | 8 ++++---- src/pages/home/report/ReportActionItemSingle.js | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index de58abe03854..88bc25b0e42c 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -19,11 +19,11 @@ function UserDetailsTooltip(props){ {Boolean(props.name.trim()) ? {props.name} : ''} - {Boolean(props.handle.trim()) ? @{props.handle} : ''} + {Boolean(props.login.trim()) ? {props.login} : ''} ); - }, [props.avatarSource, props.name, props.handle]); + }, [props.avatarSource, props.name, props.login]); return ( diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js index 989138915236..1ec06153f5d5 100644 --- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js +++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js @@ -5,8 +5,8 @@ const propTypes = { avatarSource: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), /** User's name */ name: PropTypes.string, - /** User's handle */ - handle: PropTypes.string, + /** User's login */ + login: PropTypes.string, /** Component that displays the tooltip */ children: PropTypes.node.isRequired, }; @@ -14,7 +14,7 @@ const propTypes = { const defaultProps = { avatarSource: null, name: '', - handle: '', + login: '', }; export {propTypes, defaultProps}; diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index e7d0174a561a..28b876341555 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -27,8 +27,8 @@ const propTypes = { /** User's name */ name: PropTypes.string, - /** User's handle */ - handle: PropTypes.string, + /** User's login */ + login: PropTypes.string, /** The message fragment needing to be displayed */ fragment: reportActionFragmentPropTypes.isRequired, @@ -72,7 +72,7 @@ const propTypes = { const defaultProps = { avatarSource: null, name: '', - handle: '', + login: '', isAttachment: false, attachmentInfo: { name: '', @@ -152,7 +152,7 @@ const ReportActionItemFragment = (props) => { } case 'TEXT': return ( - + { const ReportActionItemSingle = (props) => { const actorEmail = props.action.actorEmail.replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''); - const {avatar, displayName, pendingFields, handle} = props.personalDetails[actorEmail] || {}; + const {avatar, displayName, pendingFields, login} = props.personalDetails[actorEmail] || {}; const avatarSource = UserUtils.getAvatar(avatar, actorEmail); // Since the display name for a report action message is delivered with the report history as an array of fragments @@ -101,7 +101,7 @@ const ReportActionItemSingle = (props) => { /> ) : ( @@ -127,7 +127,7 @@ const ReportActionItemSingle = (props) => { {_.map(personArray, (fragment, index) => ( Date: Wed, 7 Jun 2023 17:07:00 -0400 Subject: [PATCH 14/58] feat(userDetailsTooltip): use on LHN users --- src/components/AvatarWithIndicator.js | 15 +++++++---- src/components/DisplayNames/index.js | 10 +++++--- src/components/MultipleAvatars.js | 35 +++++++++++++++++++------- src/libs/ReportUtils.js | 9 +++++-- src/pages/home/sidebar/SidebarLinks.js | 2 ++ 5 files changed, 51 insertions(+), 20 deletions(-) diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index 1835e739c25b..5f2fabe38219 100644 --- a/src/components/AvatarWithIndicator.js +++ b/src/components/AvatarWithIndicator.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import Avatar from './Avatar'; import styles from '../styles/styles'; -import Tooltip from './Tooltip'; +import UserDetailsTooltip from './UserDetailsTooltip/UserDetailsTooltip'; import ONYXKEYS from '../ONYXKEYS'; import policyMemberPropType from '../pages/policyMemberPropType'; import bankAccountPropTypes from './bankAccountPropTypes'; @@ -22,9 +22,14 @@ import themeColors from '../styles/themes/default'; const propTypes = { /** URL for the avatar */ source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, + + /* Tooltip Props */ - /** To show a tooltip on hover */ - tooltipText: PropTypes.string, + /** User's name */ + name: PropTypes.string, + + /** User's login */ + login: PropTypes.string, /* Onyx Props */ @@ -100,12 +105,12 @@ const AvatarWithIndicator = (props) => { const indicatorStyles = [styles.alignItemsCenter, styles.justifyContentCenter, styles.statusIndicator(indicatorColor)]; return ( - + {(shouldShowErrorIndicator || shouldShowInfoIndicator) && } - + ); }; diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js index 9eb7d0bc501f..2b6c31fe9df0 100644 --- a/src/components/DisplayNames/index.js +++ b/src/components/DisplayNames/index.js @@ -5,7 +5,7 @@ import {propTypes, defaultProps} from './displayNamesPropTypes'; import styles from '../../styles/styles'; import Tooltip from '../Tooltip'; import Text from '../Text'; - +import UserDetailsTooltip from '../UserDetailsTooltip/UserDetailsTooltip'; class DisplayNames extends PureComponent { constructor(props) { super(props); @@ -88,9 +88,11 @@ class DisplayNames extends PureComponent { ? this.props.fullTitle : _.map(this.props.displayNamesWithTooltips, ({displayName, tooltip}, index) => ( - this.getTooltipShiftX(index)} > {/* // We need to get the refs to all the names which will be used to correct @@ -101,7 +103,7 @@ class DisplayNames extends PureComponent { > {displayName} - + {index < this.props.displayNamesWithTooltips.length - 1 && , } ))} diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index fa6330d4703f..91530cca2022 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -11,6 +11,8 @@ import * as StyleUtils from '../styles/StyleUtils'; import CONST from '../CONST'; import variables from '../styles/variables'; import avatarPropTypes from './avatarPropTypes'; +import UserDetailsTooltip from './UserDetailsTooltip/UserDetailsTooltip'; +import * as ReportUtils from '../libs/ReportUtils'; const propTypes = { /** Array of avatar URLs or icons */ @@ -74,7 +76,11 @@ const MultipleAvatars = (props) => { if (props.icons.length === 1 && !props.shouldStackHorizontally) { return ( - + { type={props.icons[0].type} /> - + ); } @@ -106,15 +112,18 @@ const MultipleAvatars = (props) => { } avatarContainerStyles = StyleUtils.combineStyles([styles.alignItemsCenter, styles.flexRow, StyleUtils.getHeight(height), StyleUtils.getWidthStyle(width)]); } + console.log('props.icons', props.icons, ReportUtils.getPersonalDetailsForLogin(props.icons[1].name)); return ( {props.shouldStackHorizontally ? ( <> {_.map([...props.icons].splice(0, 4), (icon, index) => ( - { type={icon.type} /> - + ))} {props.icons.length > 4 && ( { ) : ( - + {/* View is necessary for tooltip to show for multiple avatars in LHN */} { type={props.icons[0].type} /> - + {props.icons.length === 2 ? ( - + { type={props.icons[1].type} /> - + ) : ( diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 21886511df30..335d2e55db73 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -873,8 +873,12 @@ function getDisplayNameForParticipant(login, shouldUseShortForm = false) { function getDisplayNamesWithTooltips(participants, isMultipleParticipantReport) { return _.map(participants, (participant) => { const displayName = getDisplayNameForParticipant(participant.login, isMultipleParticipantReport); - const tooltip = participant.login ? Str.removeSMSDomain(participant.login) : ''; - + const tooltip = { + login: participant.login ? Str.removeSMSDomain(participant.login) : '', + name: getDisplayNameForParticipant(participant.login, false), + avatarSource: UserUtils.getAvatar(participant.avatar, participant.login), + } + let pronouns = participant.pronouns; if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) { const pronounTranslationKey = pronouns.replace(CONST.PRONOUNS.PREFIX, ''); @@ -2154,6 +2158,7 @@ function getParentReport(report) { export { getReportParticipantsTitle, + getPersonalDetailsForLogin, isReportMessageAttachment, findLastAccessedReport, canEditReportAction, diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index eb1df1b9f5e1..811aead9f3e3 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -194,6 +194,8 @@ class SidebarLinks extends React.Component { From 1d9a457c8e254d29a2cd80b6587880d8a1f933a6 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Wed, 7 Jun 2023 18:18:17 -0400 Subject: [PATCH 15/58] chore: lint --- src/components/AvatarWithIndicator.js | 3 ++- src/components/MultipleAvatars.js | 1 - src/pages/home/report/ReportActionItemFragment.js | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index 5f2fabe38219..5b383e2fdeff 100644 --- a/src/components/AvatarWithIndicator.js +++ b/src/components/AvatarWithIndicator.js @@ -65,7 +65,8 @@ const propTypes = { }; const defaultProps = { - tooltipText: '', + name: '', + login: '', reimbursementAccount: {}, policiesMemberList: {}, policies: {}, diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 91530cca2022..0d2ee8e48fd6 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -112,7 +112,6 @@ const MultipleAvatars = (props) => { } avatarContainerStyles = StyleUtils.combineStyles([styles.alignItemsCenter, styles.flexRow, StyleUtils.getHeight(height), StyleUtils.getWidthStyle(width)]); } - console.log('props.icons', props.icons, ReportUtils.getPersonalDetailsForLogin(props.icons[1].name)); return ( diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 28b876341555..b8a521b1013f 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -82,7 +82,6 @@ const defaultProps = { }, loading: false, isSingleLine: false, - tooltipText: '', source: '', style: [], }; From aaa593b77095a5528a06c0cab6598d3aded76c23 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Thu, 8 Jun 2023 12:24:57 -0400 Subject: [PATCH 16/58] feat(userDetailsTooltip): use it in mentions --- .../HTMLRenderers/MentionUserRenderer.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js index 81f723e66aef..dbb8d6dfcd0a 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js @@ -1,4 +1,5 @@ import React from 'react'; +import UserDetailsTooltip from '../../../components/UserDetailsTooltip/UserDetailsTooltip'; import _ from 'underscore'; import {TNodeChildrenRenderer} from 'react-native-render-html'; import Navigation from '../../../libs/Navigation/Navigation'; @@ -33,10 +34,10 @@ const MentionUserRenderer = (props) => { const loginWhithoutLeadingAt = props.tnode.data.slice(1); const isOurMention = loginWhithoutLeadingAt === props.currentUserPersonalDetails.login; - +console.log('MentionUserRenderer', props.currentUserPersonalDetails); return ( - + { > - + ); }; From 709a6b32793a776fd5265c8c445fc179e07b47f8 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Thu, 8 Jun 2023 12:28:09 -0400 Subject: [PATCH 17/58] feat(userDetailsTooltip): use it in detailsPage --- src/pages/DetailsPage.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 909b52da89b3..ed3a71f930f4 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -16,7 +16,7 @@ import personalDetailsPropType from './personalDetailsPropType'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; import compose from '../libs/compose'; import CommunicationsLink from '../components/CommunicationsLink'; -import Tooltip from '../components/Tooltip'; +import UserDetailsTooltip from '../components/UserDetailsTooltip/UserDetailsTooltip'; import CONST from '../CONST'; import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from '../components/Icon/Expensicons'; @@ -168,9 +168,9 @@ class DetailsPage extends React.PureComponent { {this.props.translate(isSMSLogin ? 'common.phoneNumber' : 'common.email')} - + {isSMSLogin ? this.props.formatPhoneNumber(phoneNumber) : details.login} - + ) : null} From efd0580a12549aebdd31a265d873003f106bc104 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Fri, 9 Jun 2023 13:29:46 -0400 Subject: [PATCH 18/58] Revert "feat(userDetailsTooltip): use it in mentions" This reverts commit c8f6f45425745e19108797402a9e3fb0941e90cf. --- .../HTMLRenderers/MentionUserRenderer.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js index dbb8d6dfcd0a..81f723e66aef 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js @@ -1,5 +1,4 @@ import React from 'react'; -import UserDetailsTooltip from '../../../components/UserDetailsTooltip/UserDetailsTooltip'; import _ from 'underscore'; import {TNodeChildrenRenderer} from 'react-native-render-html'; import Navigation from '../../../libs/Navigation/Navigation'; @@ -34,10 +33,10 @@ const MentionUserRenderer = (props) => { const loginWhithoutLeadingAt = props.tnode.data.slice(1); const isOurMention = loginWhithoutLeadingAt === props.currentUserPersonalDetails.login; -console.log('MentionUserRenderer', props.currentUserPersonalDetails); + return ( - + - + ); }; From 6d2736c9ed7423858f494ab10fb7646d30fce8e7 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Fri, 9 Jun 2023 21:02:20 -0400 Subject: [PATCH 19/58] refactor(userDetailsTooltip): use accountID --- src/components/AvatarWithIndicator.js | 12 ++++------ .../DisplayNames/displayNamesPropTypes.js | 5 +++- src/components/DisplayNames/index.js | 4 +--- src/components/MultipleAvatars.js | 23 ++++++++----------- .../UserDetailsTooltip/UserDetailsTooltip.js | 21 +++++++++++------ .../userDetailsTooltipPropTypes.js | 22 ++++++++++-------- src/libs/ReportUtils.js | 5 ++-- src/pages/DetailsPage.js | 2 +- src/pages/ProfilePage.js | 6 ++--- .../home/report/ReportActionItemFragment.js | 2 +- .../home/report/ReportActionItemSingle.js | 8 ++----- 11 files changed, 55 insertions(+), 55 deletions(-) diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index 5b383e2fdeff..82a55e471fde 100644 --- a/src/components/AvatarWithIndicator.js +++ b/src/components/AvatarWithIndicator.js @@ -25,11 +25,8 @@ const propTypes = { /* Tooltip Props */ - /** User's name */ - name: PropTypes.string, - - /** User's login */ - login: PropTypes.string, + /** User's Account Id */ + accountID: PropTypes.string.isRequired, /* Onyx Props */ @@ -65,8 +62,7 @@ const propTypes = { }; const defaultProps = { - name: '', - login: '', + accountID: '', reimbursementAccount: {}, policiesMemberList: {}, policies: {}, @@ -106,7 +102,7 @@ const AvatarWithIndicator = (props) => { const indicatorStyles = [styles.alignItemsCenter, styles.justifyContentCenter, styles.statusIndicator(indicatorColor)]; return ( - + {(shouldShowErrorIndicator || shouldShowInfoIndicator) && } diff --git a/src/components/DisplayNames/displayNamesPropTypes.js b/src/components/DisplayNames/displayNamesPropTypes.js index 30492b90bfc6..eb06d2a7678a 100644 --- a/src/components/DisplayNames/displayNamesPropTypes.js +++ b/src/components/DisplayNames/displayNamesPropTypes.js @@ -11,7 +11,10 @@ const propTypes = { displayName: PropTypes.string, /** The tooltip to show when the associated name is hovered */ - tooltip: PropTypes.string, + tooltip: PropTypes.shape({ + /** The Account Id for the tooltip */ + accountId: PropTypes.string, + }), }), ), diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js index 2b6c31fe9df0..08f8857b6d35 100644 --- a/src/components/DisplayNames/index.js +++ b/src/components/DisplayNames/index.js @@ -90,9 +90,7 @@ class DisplayNames extends PureComponent { this.getTooltipShiftX(index)} > {/* // We need to get the refs to all the names which will be used to correct diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 0d2ee8e48fd6..6dc1dbf134ff 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -77,9 +77,12 @@ const MultipleAvatars = (props) => { if (props.icons.length === 1 && !props.shouldStackHorizontally) { return ( { {_.map([...props.icons].splice(0, 4), (icon, index) => ( { ) : ( {/* View is necessary for tooltip to show for multiple avatars in LHN */} @@ -201,10 +200,8 @@ const MultipleAvatars = (props) => { {props.icons.length === 2 ? ( + accountID={ReportUtils.getPersonalDetailsForLogin(props.icons[1].name).accountID} + > { return ( - {Boolean(props.name.trim()) ? {props.name} : ''} + {Boolean(String(userDetails.displayName).trim()) ? {userDetails.displayName} : ''} - {Boolean(props.login.trim()) ? {props.login} : ''} + {Boolean(String(userDetails.login).trim()) ? {userDetails.login} : ''} ); - }, [props.avatarSource, props.name, props.login]); + }, [props.accountID]); return ( - + {props.children} ) @@ -36,4 +39,8 @@ UserDetailsTooltip.propTypes = propTypes UserDetailsTooltip.defaultProps = defaultProps UserDetailsTooltip.displayName = 'UserDetailsTooltip' -export default UserDetailsTooltip; +export default withOnyx({ + personalDetailsList: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, +})(UserDetailsTooltip); diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js index 1ec06153f5d5..98263155065a 100644 --- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js +++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js @@ -1,20 +1,24 @@ import PropTypes from 'prop-types'; const propTypes = { - /** Source image */ - avatarSource: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - /** User's name */ - name: PropTypes.string, - /** User's login */ - login: PropTypes.string, + /** User's Account Id */ + accountID: PropTypes.string.isRequired, + /** Fallback User Details object used if no account id */ + fallbackUserDetails: PropTypes.shape({ + /** Avatar URL */ + avatar: PropTypes.string, + /** Display Name */ + displayName: PropTypes.string, + /** Login */ + login: PropTypes.string, + }), /** Component that displays the tooltip */ children: PropTypes.node.isRequired, }; const defaultProps = { - avatarSource: null, - name: '', - login: '', + accountID: '', + fallbackUserDetails: {displayName: '', login: '', avatar: ''}, }; export {propTypes, defaultProps}; diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index fc9d66ed108b..776d1a017774 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -873,10 +873,9 @@ function getDisplayNameForParticipant(login, shouldUseShortForm = false) { function getDisplayNamesWithTooltips(participants, isMultipleParticipantReport) { return _.map(participants, (participant) => { const displayName = getDisplayNameForParticipant(participant.login, isMultipleParticipantReport); + const tooltip = { - login: participant.login ? Str.removeSMSDomain(participant.login) : '', - name: getDisplayNameForParticipant(participant.login, false), - avatarSource: UserUtils.getAvatar(participant.avatar, participant.login), + accountID: participant.accountID, } let pronouns = participant.pronouns; diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index ed3a71f930f4..1ebe81fecfe5 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -168,7 +168,7 @@ class DetailsPage extends React.PureComponent { {this.props.translate(isSMSLogin ? 'common.phoneNumber' : 'common.email')} - + {isSMSLogin ? this.props.formatPhoneNumber(phoneNumber) : details.login} diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 932f489be5f4..7fad38d75e7e 100755 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -17,7 +17,7 @@ import personalDetailsPropType from './personalDetailsPropType'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; import compose from '../libs/compose'; import CommunicationsLink from '../components/CommunicationsLink'; -import Tooltip from '../components/Tooltip'; +import UserDetailsTooltip from '../components/UserDetailsTooltip/UserDetailsTooltip'; import CONST from '../CONST'; import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from '../components/Icon/Expensicons'; @@ -179,9 +179,9 @@ function ProfilePage(props) { {props.translate(isSMSLogin ? 'common.phoneNumber' : 'common.email')} - + {isSMSLogin ? props.formatPhoneNumber(phoneNumber) : login} - + ) : null} diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 234ef7f72b26..6b26b1abf613 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -155,7 +155,7 @@ const ReportActionItemFragment = (props) => { } case 'TEXT': return ( - + { /> ) : ( { {_.map(personArray, (fragment, index) => ( Date: Fri, 9 Jun 2023 21:02:55 -0400 Subject: [PATCH 20/58] feat(userDetailsTooltip): use it on report welcome --- src/components/ReportWelcomeText.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index f2a79dd50fe3..7148cb24770a 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -1,4 +1,5 @@ import React from 'react'; +import UserDetailsTooltip from './UserDetailsTooltip/UserDetailsTooltip'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import {View} from 'react-native'; @@ -95,14 +96,14 @@ const ReportWelcomeText = (props) => { {props.translate('reportActionsView.beginningOfChatHistory')} {_.map(displayNamesWithTooltips, ({displayName, pronouns, tooltip}, index) => ( - + Navigation.navigate(ROUTES.getProfileRoute(participantAccountIDs[index]))} > {displayName} - + {!_.isEmpty(pronouns) && {` (${pronouns})`}} {index === displayNamesWithTooltips.length - 1 && .} {index === displayNamesWithTooltips.length - 2 && {` ${props.translate('common.and')} `}} From d6fadfc71f96bbd9420969efd124b0ed6d29c925 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Fri, 9 Jun 2023 21:03:19 -0400 Subject: [PATCH 21/58] fix(userDetailsTooltip): render issue --- src/components/UserDetailsTooltip/UserDetailsTooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index 9be2ce9240e9..ae6aaf1b91b0 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -13,7 +13,7 @@ function UserDetailsTooltip(props){ const renderTooltipContent = useCallback(() => { return ( - + Date: Fri, 9 Jun 2023 22:04:36 -0400 Subject: [PATCH 22/58] fix(sideBarLinks): pass accountID to avatar --- src/pages/home/sidebar/SidebarLinks.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 7f49f9582e84..d60f523aa846 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -201,9 +201,7 @@ class SidebarLinks extends React.Component { )} From 7941ecabca9ad6717908b84d9d705b5a5f0998e9 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Fri, 9 Jun 2023 22:09:04 -0400 Subject: [PATCH 23/58] fix(sidebarLinks): revert tooltip changes --- src/components/AvatarWithIndicator.js | 12 +++++------- src/pages/home/sidebar/SidebarLinks.js | 2 +- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index 82a55e471fde..94372529d0ad 100644 --- a/src/components/AvatarWithIndicator.js +++ b/src/components/AvatarWithIndicator.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import Avatar from './Avatar'; import styles from '../styles/styles'; -import UserDetailsTooltip from './UserDetailsTooltip/UserDetailsTooltip'; +import Tooltip from './Tooltip'; import ONYXKEYS from '../ONYXKEYS'; import policyMemberPropType from '../pages/policyMemberPropType'; import bankAccountPropTypes from './bankAccountPropTypes'; @@ -23,10 +23,8 @@ const propTypes = { /** URL for the avatar */ source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - /* Tooltip Props */ - - /** User's Account Id */ - accountID: PropTypes.string.isRequired, + /** To show a tooltip on hover */ + tooltipText: PropTypes.string, /* Onyx Props */ @@ -102,12 +100,12 @@ const AvatarWithIndicator = (props) => { const indicatorStyles = [styles.alignItemsCenter, styles.justifyContentCenter, styles.statusIndicator(indicatorColor)]; return ( - + {(shouldShowErrorIndicator || shouldShowInfoIndicator) && } - + ); }; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index d60f523aa846..a072402a4ca3 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -201,7 +201,7 @@ class SidebarLinks extends React.Component { )} From b0b1a05350b746a45b6390a4a82a813e6180aadb Mon Sep 17 00:00:00 2001 From: Luiz Ozorio <59715908+cloudpresser@users.noreply.github.com> Date: Sat, 10 Jun 2023 16:29:49 -0400 Subject: [PATCH 24/58] Update src/components/DisplayNames/displayNamesPropTypes.js Co-authored-by: Puneet Lath --- src/components/DisplayNames/displayNamesPropTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DisplayNames/displayNamesPropTypes.js b/src/components/DisplayNames/displayNamesPropTypes.js index eb06d2a7678a..f7ed5bebae89 100644 --- a/src/components/DisplayNames/displayNamesPropTypes.js +++ b/src/components/DisplayNames/displayNamesPropTypes.js @@ -13,7 +13,7 @@ const propTypes = { /** The tooltip to show when the associated name is hovered */ tooltip: PropTypes.shape({ /** The Account Id for the tooltip */ - accountId: PropTypes.string, + accountID: PropTypes.string, }), }), ), From da0dcd36b5aa6b23193feadd751699cb642a36fd Mon Sep 17 00:00:00 2001 From: Luiz Ozorio <59715908+cloudpresser@users.noreply.github.com> Date: Sat, 10 Jun 2023 16:30:10 -0400 Subject: [PATCH 25/58] Update src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js Co-authored-by: Puneet Lath --- .../UserDetailsTooltip/userDetailsTooltipPropTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js index 98263155065a..6f82fb4f928c 100644 --- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js +++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; const propTypes = { /** User's Account Id */ accountID: PropTypes.string.isRequired, - /** Fallback User Details object used if no account id */ + /** Fallback User Details object used if no accountID */ fallbackUserDetails: PropTypes.shape({ /** Avatar URL */ avatar: PropTypes.string, From 0f3c1f2d6511b15a52e3dadbf45b7ca7f6b4c573 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio <59715908+cloudpresser@users.noreply.github.com> Date: Sat, 10 Jun 2023 16:31:30 -0400 Subject: [PATCH 26/58] Update src/components/DisplayNames/displayNamesPropTypes.js Co-authored-by: Puneet Lath --- src/components/DisplayNames/displayNamesPropTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DisplayNames/displayNamesPropTypes.js b/src/components/DisplayNames/displayNamesPropTypes.js index f7ed5bebae89..95aa97076040 100644 --- a/src/components/DisplayNames/displayNamesPropTypes.js +++ b/src/components/DisplayNames/displayNamesPropTypes.js @@ -12,7 +12,7 @@ const propTypes = { /** The tooltip to show when the associated name is hovered */ tooltip: PropTypes.shape({ - /** The Account Id for the tooltip */ + /** The Account ID for the tooltip */ accountID: PropTypes.string, }), }), From ff1a4ece9d799914c1390b91f569483a7be2937a Mon Sep 17 00:00:00 2001 From: Luiz Ozorio <59715908+cloudpresser@users.noreply.github.com> Date: Sat, 10 Jun 2023 16:39:52 -0400 Subject: [PATCH 27/58] Update src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js Co-authored-by: Puneet Lath --- .../UserDetailsTooltip/userDetailsTooltipPropTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js index 6f82fb4f928c..15f9429ab6bb 100644 --- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js +++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; const propTypes = { - /** User's Account Id */ + /** User's Account ID */ accountID: PropTypes.string.isRequired, /** Fallback User Details object used if no accountID */ fallbackUserDetails: PropTypes.shape({ From 9ac3b90596f0b0774f98e1f2444e15dc3903fd96 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sat, 10 Jun 2023 16:49:41 -0400 Subject: [PATCH 28/58] fix(reportActionItem): fragment props --- src/pages/home/report/ReportActionItemFragment.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 6b26b1abf613..915692252a8f 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -21,14 +21,8 @@ import editedLabelStyles from '../../../styles/editedLabelStyles'; import UserDetailsTooltip from '../../../components/UserDetailsTooltip/UserDetailsTooltip'; const propTypes = { - /** Source image */ - avatarSource: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** User's name */ - name: PropTypes.string, - - /** User's login */ - login: PropTypes.string, + /** Users accountID */ + accountID: PropTypes.string.isRequired, /** The message fragment needing to be displayed */ fragment: reportActionFragmentPropTypes.isRequired, @@ -70,9 +64,6 @@ const propTypes = { }; const defaultProps = { - avatarSource: null, - name: '', - login: '', isAttachment: false, attachmentInfo: { name: '', From a7c507721fc588cbdac9733258cd585c0338cc08 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sat, 10 Jun 2023 16:50:00 -0400 Subject: [PATCH 29/58] fix(reportActionItemMessage): pass accountID --- src/pages/home/report/ReportActionItemMessage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ReportActionItemMessage.js b/src/pages/home/report/ReportActionItemMessage.js index aa8639ea071c..fef1bb0377c9 100644 --- a/src/pages/home/report/ReportActionItemMessage.js +++ b/src/pages/home/report/ReportActionItemMessage.js @@ -40,6 +40,7 @@ const ReportActionItemMessage = (props) => ( attachmentInfo={props.action.attachmentInfo} pendingAction={props.action.pendingAction} source={lodashGet(props.action, 'originalMessage.source')} + accountID={String(props.action.actorAccountID)} loading={props.action.isLoading} style={props.style} /> From 0fed1bdc995a9f7ac41b3d2d42b7ef27d29ceb96 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sat, 10 Jun 2023 17:06:37 -0400 Subject: [PATCH 30/58] chore: eslint --fix --- src/components/AvatarWithIndicator.js | 2 +- src/components/DisplayNames/index.js | 1 + src/components/MultipleAvatars.js | 6 +++--- src/components/ReportWelcomeText.js | 3 +-- .../UserDetailsTooltip/UserDetailsTooltip.js | 17 +++++++++-------- .../userDetailsTooltipPropTypes.js | 4 ++++ 6 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index 94372529d0ad..9b4159797a64 100644 --- a/src/components/AvatarWithIndicator.js +++ b/src/components/AvatarWithIndicator.js @@ -60,7 +60,7 @@ const propTypes = { }; const defaultProps = { - accountID: '', + tooltipText: '', reimbursementAccount: {}, policiesMemberList: {}, policies: {}, diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js index 08f8857b6d35..9fe5902e40be 100644 --- a/src/components/DisplayNames/index.js +++ b/src/components/DisplayNames/index.js @@ -6,6 +6,7 @@ import styles from '../../styles/styles'; import Tooltip from '../Tooltip'; import Text from '../Text'; import UserDetailsTooltip from '../UserDetailsTooltip/UserDetailsTooltip'; + class DisplayNames extends PureComponent { constructor(props) { super(props); diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 6dc1dbf134ff..0e7e5f445e1e 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -79,9 +79,9 @@ const MultipleAvatars = (props) => { diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index 7148cb24770a..4a9ddc6159d1 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -1,10 +1,10 @@ import React from 'react'; -import UserDetailsTooltip from './UserDetailsTooltip/UserDetailsTooltip'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import UserDetailsTooltip from './UserDetailsTooltip/UserDetailsTooltip'; import styles from '../styles/styles'; import Text from './Text'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; @@ -14,7 +14,6 @@ import * as OptionsListUtils from '../libs/OptionsListUtils'; import ONYXKEYS from '../ONYXKEYS'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; -import Tooltip from './Tooltip'; import reportPropTypes from '../pages/reportPropTypes'; import CONST from '../CONST'; diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index ae6aaf1b91b0..e6720edfe94c 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -1,17 +1,18 @@ import React, { useCallback } from 'react'; import { View, Text } from 'react-native'; +import { withOnyx } from 'react-native-onyx'; +import lodashGet from 'lodash/get'; import Avatar from '../Avatar'; import Tooltip from '../Tooltip'; import { propTypes, defaultProps } from './userDetailsTooltipPropTypes'; import styles from '../../styles/styles'; -import { withOnyx } from 'react-native-onyx'; import ONYXKEYS from '../../ONYXKEYS'; -import lodashGet from 'lodash/get'; + function UserDetailsTooltip(props){ const userDetails = lodashGet(props.personalDetailsList, props.accountID, props.fallbackUserDetails); - const renderTooltipContent = useCallback(() => { - return ( + const renderTooltipContent = useCallback(() => + ( - {Boolean(String(userDetails.displayName).trim()) ? {userDetails.displayName} : ''} + {String(userDetails.displayName).trim() ? {userDetails.displayName} : ''} - {Boolean(String(userDetails.login).trim()) ? {userDetails.login} : ''} + {String(userDetails.login).trim() ? {userDetails.login} : ''} - ); - }, [props.accountID]); + ) + , [userDetails.avatar, userDetails.displayName, userDetails.login]); return ( diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js index 15f9429ab6bb..61bb1ac03fc1 100644 --- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js +++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js @@ -1,4 +1,5 @@ import PropTypes from 'prop-types'; +import personalDetailsPropType from '../../pages/personalDetailsPropType'; const propTypes = { /** User's Account ID */ @@ -14,11 +15,14 @@ const propTypes = { }), /** Component that displays the tooltip */ children: PropTypes.node.isRequired, + /** List of personalDetails (keyed by accountID) */ + personalDetailsList: PropTypes.objectOf(personalDetailsPropType), }; const defaultProps = { accountID: '', fallbackUserDetails: {displayName: '', login: '', avatar: ''}, + personalDetailsList: {}, }; export {propTypes, defaultProps}; From b656d43572b28705d8b8bc6a77472306e8e3db29 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sat, 10 Jun 2023 17:06:45 -0400 Subject: [PATCH 31/58] chore: remove unused prop --- src/pages/home/report/ReportActionItemSingle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index 303a743bed73..1b9c157dc702 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -67,7 +67,7 @@ const showUserDetails = (accountID) => { const ReportActionItemSingle = (props) => { const actorEmail = props.action.actorEmail.replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''); - const {accountID, avatar, displayName, pendingFields, login} = props.personalDetails[actorEmail] || {}; + const {accountID, avatar, displayName, pendingFields} = props.personalDetails[actorEmail] || {}; const avatarSource = UserUtils.getAvatar(avatar, actorEmail); // Since the display name for a report action message is delivered with the report history as an array of fragments From cf3a4adbdf9d321792d0dce97d0a6f5441afd3e5 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 10:38:54 -0400 Subject: [PATCH 32/58] fix: fallback avatar not avatarSource --- src/components/MultipleAvatars.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 0e7e5f445e1e..2468aea2b5e2 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -81,7 +81,7 @@ const MultipleAvatars = (props) => { fallbackUserDetails={{ displayName: ReportUtils.getPersonalDetailsForLogin(props.icons[0].name).displayName || '', login: props.icons[0].name || tooltipTexts[0], - avatarSource: props.icons[0].source || '', + avatar: props.icons[0].source || '', }} > From 8f852403523161a28c62ee7103baadda82b719aa Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 10:45:32 -0400 Subject: [PATCH 33/58] fix(userDetailsTooltip): avatar propType --- .../UserDetailsTooltip/userDetailsTooltipPropTypes.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js index 61bb1ac03fc1..f293329f1ccf 100644 --- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js +++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js @@ -7,7 +7,10 @@ const propTypes = { /** Fallback User Details object used if no accountID */ fallbackUserDetails: PropTypes.shape({ /** Avatar URL */ - avatar: PropTypes.string, + avatar: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func + ,]), /** Display Name */ displayName: PropTypes.string, /** Login */ From 1c14280b6c2e5da8fdfb556c4f7978662d2d8fe0 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 10:58:05 -0400 Subject: [PATCH 34/58] feat(userDetailsTooltip): remove sms domain --- src/components/UserDetailsTooltip/UserDetailsTooltip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index e6720edfe94c..25772a5899b8 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -1,13 +1,13 @@ import React, { useCallback } from 'react'; import { View, Text } from 'react-native'; import { withOnyx } from 'react-native-onyx'; +import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import Avatar from '../Avatar'; import Tooltip from '../Tooltip'; import { propTypes, defaultProps } from './userDetailsTooltipPropTypes'; import styles from '../../styles/styles'; import ONYXKEYS from '../../ONYXKEYS'; - function UserDetailsTooltip(props){ const userDetails = lodashGet(props.personalDetailsList, props.accountID, props.fallbackUserDetails); @@ -23,7 +23,7 @@ function UserDetailsTooltip(props){ {String(userDetails.displayName).trim() ? {userDetails.displayName} : ''} - {String(userDetails.login).trim() ? {userDetails.login} : ''} + {String(userDetails.login).trim() ? {Str.removeSMSDomain(userDetails.login)} : ''} ) From 3608e48ac1a55e3bc7c54c76c7d615189f65a1f3 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 10:58:23 -0400 Subject: [PATCH 35/58] chore: lint --- src/components/UserDetailsTooltip/UserDetailsTooltip.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index 25772a5899b8..e71bc39b0302 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -8,6 +8,7 @@ import Tooltip from '../Tooltip'; import { propTypes, defaultProps } from './userDetailsTooltipPropTypes'; import styles from '../../styles/styles'; import ONYXKEYS from '../../ONYXKEYS'; + function UserDetailsTooltip(props){ const userDetails = lodashGet(props.personalDetailsList, props.accountID, props.fallbackUserDetails); From a285d7eb828c13ae363a1fd608fc6cf70d7bf5a7 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 11:05:01 -0400 Subject: [PATCH 36/58] fix(userDetailsTooltip): condition to hide --- src/components/UserDetailsTooltip/UserDetailsTooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/UserDetailsTooltip.js index e71bc39b0302..debd873299ad 100644 --- a/src/components/UserDetailsTooltip/UserDetailsTooltip.js +++ b/src/components/UserDetailsTooltip/UserDetailsTooltip.js @@ -31,7 +31,7 @@ function UserDetailsTooltip(props){ , [userDetails.avatar, userDetails.displayName, userDetails.login]); return ( - + {props.children} ) From 8eaf9bfcf528aaf95cb2cda89d44ff45def59219 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 11:05:15 -0400 Subject: [PATCH 37/58] chore: use lodashGet --- src/components/MultipleAvatars.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 2468aea2b5e2..a831cd49c3c1 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -2,6 +2,7 @@ import React, {memo} from 'react'; import PropTypes from 'prop-types'; import {View} from 'react-native'; import _ from 'underscore'; +import lodashGet from 'lodash/get'; import styles from '../styles/styles'; import Avatar from './Avatar'; import Tooltip from './Tooltip'; @@ -77,11 +78,11 @@ const MultipleAvatars = (props) => { if (props.icons.length === 1 && !props.shouldStackHorizontally) { return ( From 65a1103b4a83588cd57324e93f719e1c309e86ba Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 11:09:44 -0400 Subject: [PATCH 38/58] chore: use lodashget --- src/components/MultipleAvatars.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index a831cd49c3c1..1c4d56e450dd 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -124,7 +124,7 @@ const MultipleAvatars = (props) => { {_.map([...props.icons].splice(0, 4), (icon, index) => ( { ) : ( {/* View is necessary for tooltip to show for multiple avatars in LHN */} @@ -201,7 +201,7 @@ const MultipleAvatars = (props) => { {props.icons.length === 2 ? ( Date: Sun, 11 Jun 2023 11:29:49 -0400 Subject: [PATCH 39/58] test: update expectations --- tests/unit/ReportUtilsTest.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js index f0f4cc85b8f2..0d1832f192ae 100644 --- a/tests/unit/ReportUtilsTest.js +++ b/tests/unit/ReportUtilsTest.js @@ -15,20 +15,24 @@ const participantsPersonalDetails = { displayName: 'Ragnar Lothbrok', firstName: 'Ragnar', login: 'ragnar@vikings.net', + accountID: 1, }, 'floki@vikings.net': { login: 'floki@vikings.net', displayName: 'floki@vikings.net', + accountID: 2, }, 'lagertha@vikings.net': { displayName: 'Lagertha Lothbrok', firstName: 'Lagertha', login: 'lagertha@vikings.net', pronouns: 'She/her', + accountID: 3, }, '+18332403627@expensify.sms': { login: '+18332403627@expensify.sms', displayName: '(833) 240-3627', + accountID: 4, }, }; const policy = { @@ -55,22 +59,22 @@ describe('ReportUtils', () => { expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, false)).toStrictEqual([ { displayName: 'Ragnar Lothbrok', - tooltip: 'ragnar@vikings.net', + tooltip: {accountID: 1,}, pronouns: undefined, }, { displayName: 'floki@vikings.net', - tooltip: 'floki@vikings.net', + tooltip: {accountID: 2,}, pronouns: undefined, }, { displayName: 'Lagertha Lothbrok', - tooltip: 'lagertha@vikings.net', + tooltip: {accountID: 3,}, pronouns: 'She/her', }, { displayName: '(833) 240-3627', - tooltip: '+18332403627', + tooltip: {accountID: 4,}, pronouns: undefined, }, ]); @@ -80,22 +84,22 @@ describe('ReportUtils', () => { expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, true)).toStrictEqual([ { displayName: 'Ragnar', - tooltip: 'ragnar@vikings.net', + tooltip: {accountID: 1,}, pronouns: undefined, }, { displayName: 'floki@vikings.net', - tooltip: 'floki@vikings.net', + tooltip: {accountID: 2,}, pronouns: undefined, }, { displayName: 'Lagertha', - tooltip: 'lagertha@vikings.net', + tooltip: {accountID: 3,}, pronouns: 'She/her', }, { displayName: '(833) 240-3627', - tooltip: '+18332403627', + tooltip: {accountID: 4,}, pronouns: undefined, }, ]); From 68c1ed09d2d1f0b0c5a6698ca4e3d91bbdceadcc Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 15:37:36 -0400 Subject: [PATCH 40/58] chore: rename UserDetailsTooltip.js to index.js --- src/components/DisplayNames/index.js | 2 +- src/components/MultipleAvatars.js | 2 +- src/components/ReportWelcomeText.js | 2 +- .../UserDetailsTooltip/{UserDetailsTooltip.js => index.js} | 0 src/pages/DetailsPage.js | 2 +- src/pages/ProfilePage.js | 2 +- src/pages/home/report/ReportActionItemFragment.js | 2 +- src/pages/home/report/ReportActionItemSingle.js | 2 +- 8 files changed, 7 insertions(+), 7 deletions(-) rename src/components/UserDetailsTooltip/{UserDetailsTooltip.js => index.js} (100%) diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js index 9fe5902e40be..cdb12d9b4030 100644 --- a/src/components/DisplayNames/index.js +++ b/src/components/DisplayNames/index.js @@ -5,7 +5,7 @@ import {propTypes, defaultProps} from './displayNamesPropTypes'; import styles from '../../styles/styles'; import Tooltip from '../Tooltip'; import Text from '../Text'; -import UserDetailsTooltip from '../UserDetailsTooltip/UserDetailsTooltip'; +import UserDetailsTooltip from '../UserDetailsTooltip'; class DisplayNames extends PureComponent { constructor(props) { diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 1c4d56e450dd..64c1519bbcad 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -12,7 +12,7 @@ import * as StyleUtils from '../styles/StyleUtils'; import CONST from '../CONST'; import variables from '../styles/variables'; import avatarPropTypes from './avatarPropTypes'; -import UserDetailsTooltip from './UserDetailsTooltip/UserDetailsTooltip'; +import UserDetailsTooltip from './UserDetailsTooltip'; import * as ReportUtils from '../libs/ReportUtils'; const propTypes = { diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index 4a9ddc6159d1..38db6165cab8 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -4,7 +4,7 @@ import lodashGet from 'lodash/get'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; -import UserDetailsTooltip from './UserDetailsTooltip/UserDetailsTooltip'; +import UserDetailsTooltip from './UserDetailsTooltip'; import styles from '../styles/styles'; import Text from './Text'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; diff --git a/src/components/UserDetailsTooltip/UserDetailsTooltip.js b/src/components/UserDetailsTooltip/index.js similarity index 100% rename from src/components/UserDetailsTooltip/UserDetailsTooltip.js rename to src/components/UserDetailsTooltip/index.js diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 1ebe81fecfe5..122f864a6289 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -16,7 +16,7 @@ import personalDetailsPropType from './personalDetailsPropType'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; import compose from '../libs/compose'; import CommunicationsLink from '../components/CommunicationsLink'; -import UserDetailsTooltip from '../components/UserDetailsTooltip/UserDetailsTooltip'; +import UserDetailsTooltip from '../components/UserDetailsTooltip'; import CONST from '../CONST'; import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from '../components/Icon/Expensicons'; diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 7fad38d75e7e..31d6aeef422e 100755 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -17,7 +17,7 @@ import personalDetailsPropType from './personalDetailsPropType'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; import compose from '../libs/compose'; import CommunicationsLink from '../components/CommunicationsLink'; -import UserDetailsTooltip from '../components/UserDetailsTooltip/UserDetailsTooltip'; +import UserDetailsTooltip from '../components/UserDetailsTooltip'; import CONST from '../CONST'; import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from '../components/Icon/Expensicons'; diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 915692252a8f..8d43a992cc7f 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -18,7 +18,7 @@ import {withNetwork} from '../../../components/OnyxProvider'; import CONST from '../../../CONST'; import applyStrikethrough from '../../../components/HTMLEngineProvider/applyStrikethrough'; import editedLabelStyles from '../../../styles/editedLabelStyles'; -import UserDetailsTooltip from '../../../components/UserDetailsTooltip/UserDetailsTooltip'; +import UserDetailsTooltip from '../../../components/UserDetailsTooltip'; const propTypes = { /** Users accountID */ diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index 1b9c157dc702..1783c629b070 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -21,7 +21,7 @@ import CONST from '../../../CONST'; import SubscriptAvatar from '../../../components/SubscriptAvatar'; import reportPropTypes from '../../reportPropTypes'; import * as UserUtils from '../../../libs/UserUtils'; -import UserDetailsTooltip from '../../../components/UserDetailsTooltip/UserDetailsTooltip'; +import UserDetailsTooltip from '../../../components/UserDetailsTooltip'; const propTypes = { /** All the data of the action */ From e1dd0bfb56fb7331e8a67ff2174150f8d0d8b46d Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 15:58:15 -0400 Subject: [PATCH 41/58] chore: prettier --- src/components/AvatarWithIndicator.js | 6 +-- .../DisplayNames/displayNamesPropTypes.js | 2 +- src/components/MultipleAvatars.js | 8 +--- src/components/ReportWelcomeText.js | 2 +- src/components/UserDetailsTooltip/index.js | 41 +++++++++---------- .../userDetailsTooltipPropTypes.js | 5 +-- src/libs/ReportUtils.js | 4 +- src/pages/DetailsPage.js | 2 +- .../home/report/ReportActionItemFragment.js | 2 +- .../home/report/ReportActionItemSingle.js | 4 +- tests/unit/ReportUtilsTest.js | 16 ++++---- 11 files changed, 41 insertions(+), 51 deletions(-) diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index 9b4159797a64..1835e739c25b 100644 --- a/src/components/AvatarWithIndicator.js +++ b/src/components/AvatarWithIndicator.js @@ -22,9 +22,9 @@ import themeColors from '../styles/themes/default'; const propTypes = { /** URL for the avatar */ source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - - /** To show a tooltip on hover */ - tooltipText: PropTypes.string, + + /** To show a tooltip on hover */ + tooltipText: PropTypes.string, /* Onyx Props */ diff --git a/src/components/DisplayNames/displayNamesPropTypes.js b/src/components/DisplayNames/displayNamesPropTypes.js index 95aa97076040..1da2c9ceda8b 100644 --- a/src/components/DisplayNames/displayNamesPropTypes.js +++ b/src/components/DisplayNames/displayNamesPropTypes.js @@ -12,7 +12,7 @@ const propTypes = { /** The tooltip to show when the associated name is hovered */ tooltip: PropTypes.shape({ - /** The Account ID for the tooltip */ + /** The Account ID for the tooltip */ accountID: PropTypes.string, }), }), diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 64c1519bbcad..6be9d67c16ea 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -183,9 +183,7 @@ const MultipleAvatars = (props) => { ) : ( - + {/* View is necessary for tooltip to show for multiple avatars in LHN */} { {props.icons.length === 2 ? ( - + { {props.translate('reportActionsView.beginningOfChatHistory')} {_.map(displayNamesWithTooltips, ({displayName, pronouns, tooltip}, index) => ( - + Navigation.navigate(ROUTES.getProfileRoute(participantAccountIDs[index]))} diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js index debd873299ad..d8d59abf0ec6 100644 --- a/src/components/UserDetailsTooltip/index.js +++ b/src/components/UserDetailsTooltip/index.js @@ -1,19 +1,18 @@ -import React, { useCallback } from 'react'; -import { View, Text } from 'react-native'; -import { withOnyx } from 'react-native-onyx'; +import React, {useCallback} from 'react'; +import {View, Text} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import Avatar from '../Avatar'; import Tooltip from '../Tooltip'; -import { propTypes, defaultProps } from './userDetailsTooltipPropTypes'; +import {propTypes, defaultProps} from './userDetailsTooltipPropTypes'; import styles from '../../styles/styles'; import ONYXKEYS from '../../ONYXKEYS'; -function UserDetailsTooltip(props){ - +function UserDetailsTooltip(props) { const userDetails = lodashGet(props.personalDetailsList, props.accountID, props.fallbackUserDetails); - const renderTooltipContent = useCallback(() => - ( + const renderTooltipContent = useCallback( + () => ( - {String(userDetails.displayName).trim() ? {userDetails.displayName} : ''} + {String(userDetails.displayName).trim() ? ( + {userDetails.displayName} + ) : ( + '' + )} {String(userDetails.login).trim() ? {Str.removeSMSDomain(userDetails.login)} : ''} + + ), + [userDetails.avatar, userDetails.displayName, userDetails.login], + ); - - ) - , [userDetails.avatar, userDetails.displayName, userDetails.login]); - - return ( - - {props.children} - - ) + return {props.children}; } -UserDetailsTooltip.propTypes = propTypes -UserDetailsTooltip.defaultProps = defaultProps -UserDetailsTooltip.displayName = 'UserDetailsTooltip' +UserDetailsTooltip.propTypes = propTypes; +UserDetailsTooltip.defaultProps = defaultProps; +UserDetailsTooltip.displayName = 'UserDetailsTooltip'; export default withOnyx({ personalDetailsList: { diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js index f293329f1ccf..e010ba6801b0 100644 --- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js +++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js @@ -7,10 +7,7 @@ const propTypes = { /** Fallback User Details object used if no accountID */ fallbackUserDetails: PropTypes.shape({ /** Avatar URL */ - avatar: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.func - ,]), + avatar: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), /** Display Name */ displayName: PropTypes.string, /** Login */ diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 776d1a017774..48d1103252fc 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -876,8 +876,8 @@ function getDisplayNamesWithTooltips(participants, isMultipleParticipantReport) const tooltip = { accountID: participant.accountID, - } - + }; + let pronouns = participant.pronouns; if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) { const pronounTranslationKey = pronouns.replace(CONST.PRONOUNS.PREFIX, ''); diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 122f864a6289..1cb2c0ef76f0 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -168,7 +168,7 @@ class DetailsPage extends React.PureComponent { {this.props.translate(isSMSLogin ? 'common.phoneNumber' : 'common.email')} - + {isSMSLogin ? this.props.formatPhoneNumber(phoneNumber) : details.login} diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 8d43a992cc7f..674fcaaa805f 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -146,7 +146,7 @@ const ReportActionItemFragment = (props) => { } case 'TEXT': return ( - + { noMargin /> ) : ( - + { expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, false)).toStrictEqual([ { displayName: 'Ragnar Lothbrok', - tooltip: {accountID: 1,}, + tooltip: {accountID: 1}, pronouns: undefined, }, { displayName: 'floki@vikings.net', - tooltip: {accountID: 2,}, + tooltip: {accountID: 2}, pronouns: undefined, }, { displayName: 'Lagertha Lothbrok', - tooltip: {accountID: 3,}, + tooltip: {accountID: 3}, pronouns: 'She/her', }, { displayName: '(833) 240-3627', - tooltip: {accountID: 4,}, + tooltip: {accountID: 4}, pronouns: undefined, }, ]); @@ -84,22 +84,22 @@ describe('ReportUtils', () => { expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, true)).toStrictEqual([ { displayName: 'Ragnar', - tooltip: {accountID: 1,}, + tooltip: {accountID: 1}, pronouns: undefined, }, { displayName: 'floki@vikings.net', - tooltip: {accountID: 2,}, + tooltip: {accountID: 2}, pronouns: undefined, }, { displayName: 'Lagertha', - tooltip: {accountID: 3,}, + tooltip: {accountID: 3}, pronouns: 'She/her', }, { displayName: '(833) 240-3627', - tooltip: {accountID: 4,}, + tooltip: {accountID: 4}, pronouns: undefined, }, ]); From 1ba85f20fffde4db366fe1fe13e5cdf8c781a75f Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 17:22:09 -0400 Subject: [PATCH 42/58] feat(userDetailsTooltip): early return --- src/components/UserDetailsTooltip/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js index d8d59abf0ec6..1aa9b1b811e1 100644 --- a/src/components/UserDetailsTooltip/index.js +++ b/src/components/UserDetailsTooltip/index.js @@ -32,8 +32,12 @@ function UserDetailsTooltip(props) { ), [userDetails.avatar, userDetails.displayName, userDetails.login], ); + + if (!userDetails.name && !userDetails.login) { + return props.children; + } - return {props.children}; + return {props.children}; } UserDetailsTooltip.propTypes = propTypes; From 8bc46ce64c02bca3e48cfc7bc48b67e5127bc4b7 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 18:15:45 -0400 Subject: [PATCH 43/58] fix: add concierge email on name for tooltip --- src/libs/ReportUtils.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 48d1103252fc..ee3512ed6a03 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -749,6 +749,7 @@ function getIcons(report, personalDetails, defaultIcon = null, isPayer = false) } if (isConciergeChatReport(report)) { result.source = CONST.CONCIERGE_ICON_URL; + result.name = CONST.EMAIL.CONCIERGE return [result]; } if (isArchivedRoom(report)) { From 3922f0944b37794cea88303c7a86782412a2e013 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 19:14:25 -0400 Subject: [PATCH 44/58] chore: prettier --- src/components/UserDetailsTooltip/index.js | 2 +- src/libs/ReportUtils.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js index 1aa9b1b811e1..89ce5c1e1fc9 100644 --- a/src/components/UserDetailsTooltip/index.js +++ b/src/components/UserDetailsTooltip/index.js @@ -32,7 +32,7 @@ function UserDetailsTooltip(props) { ), [userDetails.avatar, userDetails.displayName, userDetails.login], ); - + if (!userDetails.name && !userDetails.login) { return props.children; } diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index ee3512ed6a03..692b207b4217 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -749,7 +749,7 @@ function getIcons(report, personalDetails, defaultIcon = null, isPayer = false) } if (isConciergeChatReport(report)) { result.source = CONST.CONCIERGE_ICON_URL; - result.name = CONST.EMAIL.CONCIERGE + result.name = CONST.EMAIL.CONCIERGE; return [result]; } if (isArchivedRoom(report)) { From ccc7229e4324cda0f2602a59c4199aa1d346ab2e Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 19:43:31 -0400 Subject: [PATCH 45/58] fix: styles --- src/components/UserDetailsTooltip/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js index 89ce5c1e1fc9..63523868bf05 100644 --- a/src/components/UserDetailsTooltip/index.js +++ b/src/components/UserDetailsTooltip/index.js @@ -13,7 +13,7 @@ function UserDetailsTooltip(props) { const userDetails = lodashGet(props.personalDetailsList, props.accountID, props.fallbackUserDetails); const renderTooltipContent = useCallback( () => ( - + {String(userDetails.displayName).trim() ? ( - {userDetails.displayName} + {userDetails.displayName} ) : ( '' )} From 245a28400dd1212a1357ac7872b0212a032ce81c Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 19:52:25 -0400 Subject: [PATCH 46/58] refactor: create getAccoutIdForLogin function --- src/components/MultipleAvatars.js | 8 ++++---- src/libs/ReportUtils.js | 11 +++++++++++ 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 6be9d67c16ea..7467d6c96a6f 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -78,7 +78,7 @@ const MultipleAvatars = (props) => { if (props.icons.length === 1 && !props.shouldStackHorizontally) { return ( { {_.map([...props.icons].splice(0, 4), (icon, index) => ( { ) : ( - + {/* View is necessary for tooltip to show for multiple avatars in LHN */} { {props.icons.length === 2 ? ( - + Date: Sun, 11 Jun 2023 19:59:08 -0400 Subject: [PATCH 47/58] test: update expectations --- tests/unit/ReportUtilsTest.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js index 10be40629c9e..c04750d2caf2 100644 --- a/tests/unit/ReportUtilsTest.js +++ b/tests/unit/ReportUtilsTest.js @@ -59,22 +59,22 @@ describe('ReportUtils', () => { expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, false)).toStrictEqual([ { displayName: 'Ragnar Lothbrok', - tooltip: {accountID: 1}, + accountID: 1, pronouns: undefined, }, { displayName: 'floki@vikings.net', - tooltip: {accountID: 2}, + accountID: 2, pronouns: undefined, }, { displayName: 'Lagertha Lothbrok', - tooltip: {accountID: 3}, + accountID: 3, pronouns: 'She/her', }, { displayName: '(833) 240-3627', - tooltip: {accountID: 4}, + accountID: 4, pronouns: undefined, }, ]); @@ -84,22 +84,22 @@ describe('ReportUtils', () => { expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, true)).toStrictEqual([ { displayName: 'Ragnar', - tooltip: {accountID: 1}, + accountID: 1, pronouns: undefined, }, { displayName: 'floki@vikings.net', - tooltip: {accountID: 2}, + accountID: 2, pronouns: undefined, }, { displayName: 'Lagertha', - tooltip: {accountID: 3}, + accountID: 3, pronouns: 'She/her', }, - { + { displayName: '(833) 240-3627', - tooltip: {accountID: 4}, + accountID: 4, pronouns: undefined, }, ]); From a97bf9ba099ee517078e5c9cc6e05a18aa8223c3 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 19:59:31 -0400 Subject: [PATCH 48/58] feat(getDisplayNamesWithTooltips): use accountID directly --- src/components/DisplayNames/index.js | 4 ++-- src/components/ReportWelcomeText.js | 4 ++-- src/libs/ReportUtils.js | 6 ++---- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js index cdb12d9b4030..3a6b748262b2 100644 --- a/src/components/DisplayNames/index.js +++ b/src/components/DisplayNames/index.js @@ -87,11 +87,11 @@ class DisplayNames extends PureComponent { > {this.props.shouldUseFullTitle ? this.props.fullTitle - : _.map(this.props.displayNamesWithTooltips, ({displayName, tooltip}, index) => ( + : _.map(this.props.displayNamesWithTooltips, ({displayName, accountID}, index) => ( this.getTooltipShiftX(index)} > {/* // We need to get the refs to all the names which will be used to correct diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index 24f13b664b93..52016d285a9b 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -93,9 +93,9 @@ const ReportWelcomeText = (props) => { {isDefault && ( {props.translate('reportActionsView.beginningOfChatHistory')} - {_.map(displayNamesWithTooltips, ({displayName, pronouns, tooltip}, index) => ( + {_.map(displayNamesWithTooltips, ({displayName, pronouns, accountID}, index) => ( - + Navigation.navigate(ROUTES.getProfileRoute(participantAccountIDs[index]))} diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index d381a544bdf2..5abed4e1f6cc 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -885,9 +885,7 @@ function getDisplayNamesWithTooltips(participants, isMultipleParticipantReport) return _.map(participants, (participant) => { const displayName = getDisplayNameForParticipant(participant.login, isMultipleParticipantReport); - const tooltip = { - accountID: participant.accountID, - }; + const accountID = participant.accountID; let pronouns = participant.pronouns; if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) { @@ -897,7 +895,7 @@ function getDisplayNamesWithTooltips(participants, isMultipleParticipantReport) return { displayName, - tooltip, + accountID, pronouns, }; }); From 89e626a83b7fb44c2fdc180c3a436596226adb0f Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 20:12:07 -0400 Subject: [PATCH 49/58] chore: prettier --- tests/unit/ReportUtilsTest.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js index c04750d2caf2..9168c01d3e52 100644 --- a/tests/unit/ReportUtilsTest.js +++ b/tests/unit/ReportUtilsTest.js @@ -97,7 +97,7 @@ describe('ReportUtils', () => { accountID: 3, pronouns: 'She/her', }, - { + { displayName: '(833) 240-3627', accountID: 4, pronouns: undefined, From c275f204f07840edffb587ee1698b2cb98dd6cbd Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Sun, 11 Jun 2023 20:25:48 -0400 Subject: [PATCH 50/58] fix: displayNamesPropTypes accountID --- src/components/DisplayNames/displayNamesPropTypes.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/DisplayNames/displayNamesPropTypes.js b/src/components/DisplayNames/displayNamesPropTypes.js index 1da2c9ceda8b..11624b6c7b54 100644 --- a/src/components/DisplayNames/displayNamesPropTypes.js +++ b/src/components/DisplayNames/displayNamesPropTypes.js @@ -10,11 +10,8 @@ const propTypes = { /** The name to display in bold */ displayName: PropTypes.string, - /** The tooltip to show when the associated name is hovered */ - tooltip: PropTypes.shape({ - /** The Account ID for the tooltip */ - accountID: PropTypes.string, - }), + /** The Account ID for the tooltip */ + accountID: PropTypes.string, }), ), From 50ef668b05f352023a1c1ed6749c616877147dd0 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio <59715908+cloudpresser@users.noreply.github.com> Date: Sun, 11 Jun 2023 20:40:33 -0400 Subject: [PATCH 51/58] fix: accept numbers or strings Co-authored-by: Fedi Rajhi --- .../UserDetailsTooltip/userDetailsTooltipPropTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js index e010ba6801b0..4d34c73ef1ba 100644 --- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js +++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js @@ -3,7 +3,7 @@ import personalDetailsPropType from '../../pages/personalDetailsPropType'; const propTypes = { /** User's Account ID */ - accountID: PropTypes.string.isRequired, + accountID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, /** Fallback User Details object used if no accountID */ fallbackUserDetails: PropTypes.shape({ /** Avatar URL */ From 56bb67ba7cfa2f83399fbf7f915ecb2a437ae903 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio <59715908+cloudpresser@users.noreply.github.com> Date: Sun, 11 Jun 2023 20:41:20 -0400 Subject: [PATCH 52/58] Update src/components/MultipleAvatars.js Co-authored-by: Fedi Rajhi --- src/components/MultipleAvatars.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 7467d6c96a6f..c65e6ff8ed9b 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -80,7 +80,7 @@ const MultipleAvatars = (props) => { Date: Sun, 11 Jun 2023 20:50:52 -0400 Subject: [PATCH 53/58] feat: hide email when displayName is equal --- src/components/UserDetailsTooltip/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js index 63523868bf05..1c2547cc51fa 100644 --- a/src/components/UserDetailsTooltip/index.js +++ b/src/components/UserDetailsTooltip/index.js @@ -3,6 +3,7 @@ import {View, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; +import _ from 'underscore'; import Avatar from '../Avatar'; import Tooltip from '../Tooltip'; import {propTypes, defaultProps} from './userDetailsTooltipPropTypes'; @@ -27,7 +28,11 @@ function UserDetailsTooltip(props) { '' )} - {String(userDetails.login).trim() ? {Str.removeSMSDomain(userDetails.login)} : ''} + {String(userDetails.login).trim() && !_.isEqual(userDetails.login, userDetails.displayName) ? ( + {Str.removeSMSDomain(userDetails.login)} + ) : ( + '' + )} ), [userDetails.avatar, userDetails.displayName, userDetails.login], From b8447376b6e2e074ba56453212e950f80f1127e5 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio <59715908+cloudpresser@users.noreply.github.com> Date: Sun, 11 Jun 2023 21:22:17 -0400 Subject: [PATCH 54/58] fix: do not return text inside view Co-authored-by: Fedi Rajhi --- src/components/UserDetailsTooltip/index.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js index 1c2547cc51fa..5070690a9eef 100644 --- a/src/components/UserDetailsTooltip/index.js +++ b/src/components/UserDetailsTooltip/index.js @@ -22,17 +22,13 @@ function UserDetailsTooltip(props) { /> - {String(userDetails.displayName).trim() ? ( - {userDetails.displayName} - ) : ( - '' - )} + + {String(userDetails.displayName).trim() ? userDetails.displayName : ''} + - {String(userDetails.login).trim() && !_.isEqual(userDetails.login, userDetails.displayName) ? ( - {Str.removeSMSDomain(userDetails.login)} - ) : ( - '' - )} + + {String(userDetails.login).trim() && !_.isEqual(userDetails.login, userDetails.displayName) ? Str.removeSMSDomain(userDetails.login) : ''} + ), [userDetails.avatar, userDetails.displayName, userDetails.login], From 3b521871b11f5e05be8c4cc9574761c845d72de0 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio <59715908+cloudpresser@users.noreply.github.com> Date: Mon, 12 Jun 2023 09:54:45 -0400 Subject: [PATCH 55/58] Update src/components/UserDetailsTooltip/index.js Co-authored-by: Fedi Rajhi --- src/components/UserDetailsTooltip/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js index 5070690a9eef..493b40a0a5e1 100644 --- a/src/components/UserDetailsTooltip/index.js +++ b/src/components/UserDetailsTooltip/index.js @@ -34,7 +34,7 @@ function UserDetailsTooltip(props) { [userDetails.avatar, userDetails.displayName, userDetails.login], ); - if (!userDetails.name && !userDetails.login) { + if (!userDetails.displayName && !userDetails.login) { return props.children; } From cb8c6cad59acf6dfbf8e732cc65194785db27868 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Mon, 12 Jun 2023 10:26:01 -0400 Subject: [PATCH 56/58] test: update displayNamesWithTooltips expectation --- tests/unit/ReportUtilsTest.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js index 9168c01d3e52..849d16b97ea2 100644 --- a/tests/unit/ReportUtilsTest.js +++ b/tests/unit/ReportUtilsTest.js @@ -59,21 +59,37 @@ describe('ReportUtils', () => { expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, false)).toStrictEqual([ { displayName: 'Ragnar Lothbrok', + login: 'ragnar@vikings.net', + avatar: { + testUri: '../../../assets/images/avatars/user/default-avatar_16.svg', + }, accountID: 1, pronouns: undefined, }, { displayName: 'floki@vikings.net', + avatar: { + testUri: '../../../assets/images/avatars/user/default-avatar_24.svg', + }, + login: 'floki@vikings.net', accountID: 2, pronouns: undefined, }, { displayName: 'Lagertha Lothbrok', + avatar: { + testUri: '../../../assets/images/avatars/user/default-avatar_11.svg', + }, + login: 'lagertha@vikings.net', accountID: 3, pronouns: 'She/her', }, { displayName: '(833) 240-3627', + avatar: { + testUri: '../../../assets/images/avatars/user/default-avatar_15.svg', + }, + login: '+18332403627@expensify.sms', accountID: 4, pronouns: undefined, }, @@ -84,21 +100,37 @@ describe('ReportUtils', () => { expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, true)).toStrictEqual([ { displayName: 'Ragnar', + login: 'ragnar@vikings.net', + avatar: { + testUri: '../../../assets/images/avatars/user/default-avatar_16.svg', + }, accountID: 1, pronouns: undefined, }, { displayName: 'floki@vikings.net', + avatar: { + testUri: '../../../assets/images/avatars/user/default-avatar_24.svg', + }, + login: 'floki@vikings.net', accountID: 2, pronouns: undefined, }, { displayName: 'Lagertha', + avatar: { + testUri: '../../../assets/images/avatars/user/default-avatar_11.svg', + }, + login: 'lagertha@vikings.net', accountID: 3, pronouns: 'She/her', }, { displayName: '(833) 240-3627', + avatar: { + testUri: '../../../assets/images/avatars/user/default-avatar_15.svg', + }, + login: '+18332403627@expensify.sms', accountID: 4, pronouns: undefined, }, From 562244cc3fdc9e09137b84d7644044ddb0fd70a7 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Mon, 12 Jun 2023 10:26:52 -0400 Subject: [PATCH 57/58] feat(displayNamesWithTooltips): avatar and login --- src/components/DisplayNames/displayNamesPropTypes.js | 6 ++++++ src/libs/ReportUtils.js | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/DisplayNames/displayNamesPropTypes.js b/src/components/DisplayNames/displayNamesPropTypes.js index 11624b6c7b54..c923b943174f 100644 --- a/src/components/DisplayNames/displayNamesPropTypes.js +++ b/src/components/DisplayNames/displayNamesPropTypes.js @@ -12,6 +12,12 @@ const propTypes = { /** The Account ID for the tooltip */ accountID: PropTypes.string, + + /** The login for the tooltip fallback */ + login: PropTypes.string, + + /** The avatar for the tooltip fallback */ + avatar: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), }), ), diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 5abed4e1f6cc..6f99d8792072 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -884,7 +884,7 @@ function getDisplayNameForParticipant(login, shouldUseShortForm = false) { function getDisplayNamesWithTooltips(participants, isMultipleParticipantReport) { return _.map(participants, (participant) => { const displayName = getDisplayNameForParticipant(participant.login, isMultipleParticipantReport); - + const avatar = UserUtils.getDefaultAvatar(participant.login); const accountID = participant.accountID; let pronouns = participant.pronouns; @@ -895,6 +895,8 @@ function getDisplayNamesWithTooltips(participants, isMultipleParticipantReport) return { displayName, + avatar, + login: participant.login, accountID, pronouns, }; From a0ea50d372128f1a730a8e58ccc685e05336d705 Mon Sep 17 00:00:00 2001 From: Luiz Ozorio Date: Mon, 12 Jun 2023 10:27:08 -0400 Subject: [PATCH 58/58] feat(displayNames): fallback tooltips --- src/components/DisplayNames/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js index 3a6b748262b2..fd1bcaf8a6e0 100644 --- a/src/components/DisplayNames/index.js +++ b/src/components/DisplayNames/index.js @@ -87,11 +87,16 @@ class DisplayNames extends PureComponent { > {this.props.shouldUseFullTitle ? this.props.fullTitle - : _.map(this.props.displayNamesWithTooltips, ({displayName, accountID}, index) => ( + : _.map(this.props.displayNamesWithTooltips, ({displayName, accountID, avatar, login}, index) => ( this.getTooltipShiftX(index)} > {/* // We need to get the refs to all the names which will be used to correct