[HOLD for payment 2021-11-09] LHN - Add a tooltip for profile avatar and online status icon - Reported by: @Santhosh-Sellavel

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel! https://www.upwork.com/jobs/~018dcc91f795eb7919

---

Action Performed:

1. Navgiate to New Expensify
2. Hover over the avatar profile icon and the online dot

Expected Result:

There should be a tooltip showing the following:

1. For the avatar - The full name of the user
2. For the online dot - The online/offline status

Actual Result:

No tooltip is displayed for both.

Workaround:

None needed. Visual issue.

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.1.8-0

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: @Santhosh-Sellavel
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1634333219380400

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @HorusGoul (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[kakajann]

Proposal

1. We need to localize online, offline, syncing words
   I was thinking to add them on here
   

   App/src/languages/en.js

   Line 222 in d4b934f

   profilePage: {

online: 'Online',
offline: 'Offline',
syncing: 'Syncing',

2. src/pages/home/sidebar/SidebarLinks.js
   Remove this Tooltip wrapper and pass a prop tooltipText to AvatarWithIndicator
   From this:

   App/src/pages/home/sidebar/SidebarLinks.js

   Lines 155 to 167 in d4b934f

   	<Tooltip text={this.props.translate('common.settings')}>
   	<TouchableOpacity
   	accessibilityLabel={this.props.translate('sidebarScreen.buttonMySettings')}
   	accessibilityRole="button"
   	onPress={this.props.onAvatarClick}
   	>
   	<AvatarWithIndicator
   	source={this.props.myPersonalDetails.avatar}
   	isActive={this.props.network && !this.props.network.isOffline}
   	isSyncing={this.props.network && !this.props.network.isOffline && this.props.isSyncingData}
   	/>
   	</TouchableOpacity>
   	</Tooltip>

   
   To this:

<TouchableOpacity
    accessibilityLabel={this.props.translate('sidebarScreen.buttonMySettings')}
    accessibilityRole="button"
    onPress={this.props.onAvatarClick}
>
    <AvatarWithIndicator
        source={this.props.myPersonalDetails.avatar}
        isActive={this.props.network && !this.props.network.isOffline}
        isSyncing={this.props.network && !this.props.network.isOffline && this.props.isSyncingData}

        // ↓↓↓ WE NEED THIS
        tooltipText={`${this.props.myPersonalDetails.displayName}`}
    />
</TouchableOpacity>

3. src/components/AvatarWithIndicator.js
   We need to wrap Avatar with Tooltip

<Tooltip text={this.props.tooltipText}>
    <Avatar
        imageStyles={[this.props.size === 'large' ? styles.avatarLarge : null]}
        source={this.props.source}
    />
</Tooltip>

And to show user status we need a new function:

/**
 * Returns user status as text
 * @returns {String}
 */
userStatus() {
    if (this.props.isSyncing) {
        return this.props.translate('profilePage.syncing');
    }

    if (this.props.isActive) {
        return this.props.translate('profilePage.online');
    }

    if (!this.props.isActive) {
        return this.props.translate('profilePage.offline');
    }
}

Finally wrap user status circle with Tooltip

<Tooltip text={this.userStatus()}>
    <Animated.View style={StyleSheet.flatten(indicatorStyles)}>
        {this.props.isSyncing && (
            <Icon
                src={Sync}
                fill={themeColors.textReversed}
                width={6}
                height={6}
            />
        )}
    </Animated.View>
</Tooltip>

Result

Screen.Recording.2021-10-22.at.3.15.58.AM.mov

[MelvinBot]

Triggered auto assignment to @laurenreidexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[laurenreidexpensify]

https://www.upwork.com/jobs/~018dcc91f795eb7919

[MelvinBot]

Triggered auto assignment to @mountiny (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mountiny]

@kakajann Thank you for your proposal. It seems like a good solution to me so feel free to apply for the job linked above and let @laurenreidexpensify know here once you do so, so she can hire you there? Thank you very much!

Feel free to start the PR 🙌

[parasharrajat]

One point missing. please use absolute prop on Tooltip and it will be placed correctly.

[mountiny]

@parasharrajat Good point from the guy working on that feature 😅

[mountiny]

PR is in a review!

[laurenreidexpensify]

Hired in Upwork

[michaelhaxhiu]

Just to clarify -- this GH is not going to add an online/offline status that's shown for other users right in New Expensify, right? It would just show a tooltips for the host account profile avatar + online status.

The reason I ask is because I have another GH assigned to me for adding that online/offline status for other users. So that's why I want to make sure these are unique (#6032).

[kakajann]

This tooltip works only on AvatarWithIndicators, so, no it won't work with other users' avatar

[michaelhaxhiu]

Excellent, that's the exact answer I was hoping for - thanks @kakajann 👍 .

[mountiny]

PR is almost ready to go, we just need to clarify what needs to be shown as the tooltip over the Avatar as showing Settings would make more sense from accessibility point of view.

[mountiny]

PR has been merged 🎉

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.12-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Add a tooltip for profile avatar and online status icon #6061

If no regressions arise, payment will be issued on 2021-11-09. 🎊

[MelvinBot]

Triggered auto assignment to @jliexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[laurenreidexpensify]

@jliexpensify I'm traveling to States on Tues 9th so won't be online to issue payment. Can you pick up for me?

Payment details for next week:
@kakajann $250 for fix
@Santhosh-Sellavel $250 bonus for reporting issue

[jliexpensify]

Can do!

[jliexpensify]

Looks like this is the job in Upworks - https://www.upwork.com/ab/applicants/1452575298975145984/job-details. Will be paying @kakajann in that job.

As the job post is now closed, I've sent a new contract to @Santhosh-Sellavel for reporting the bug - please accept so I can pay out the bonus :)

[Santhosh-Sellavel]

@jliexpensify Thanks, accepted offer now!

[jliexpensify]

Paid @kakajann and closed the previous job.

Trying to sort out payment for Santosh here - https://www.upwork.com/ab/applicants/1447759095553306624/job-details

[mountiny]

Thanks for handling this @jliexpensify.

[jliexpensify]

Alright, paid @Santhosh-Sellavel. Thanks everyone!