[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 contributors@expensify.com 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