Changed statistics to show usernames with an email tooltip

web/react/components/admin_console/team_analytics.jsx

@@ -3,8 +3,12 @@
 
 import * as Client from '../../utils/client.jsx';
 import * as Utils from '../../utils/utils.jsx';
+import Constants from '../../utils/constants.jsx';
 import LineChart from './line_chart.jsx';
 
+var Tooltip = ReactBootstrap.Tooltip;
+var OverlayTrigger = ReactBootstrap.OverlayTrigger;
+
 export default class TeamAnalytics extends React.Component {
     constructor(props) {
         super(props);
@@ -314,9 +318,25 @@ export default class TeamAnalytics extends React.Component {
                                 <tbody>
                                     {
                                         this.state.recent_active_users.map((user) => {
+                                            const tooltip = (
+                                                <Tooltip id={'recent-user-email-tooltip-' + user.id}>
+                                                    {user.email}
+                                                </Tooltip>
+                                            );
+
                                             return (
-                                                <tr key={user.id}>
+                                                <tr key={'recent-user-table-entry-' + user.id}>
-                                                    <td>{user.email}</td>
+                                                    <td>
+                                                        <OverlayTrigger
+                                                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                                                            placement='top'
+                                                            overlay={tooltip}
+                                                        >
+                                                            <time>
+                                                                {user.username}
+                                                            </time>
+                                                        </OverlayTrigger>
+                                                    </td>
                                                     <td>{Utils.displayDateTime(user.last_activity_at)}</td>
                                                 </tr>
                                             );
@@ -347,9 +367,25 @@ export default class TeamAnalytics extends React.Component {
                                 <tbody>
                                     {
                                         this.state.newly_created_users.map((user) => {
+                                            const tooltip = (
+                                                <Tooltip id={'new-user-email-tooltip-' + user.id}>
+                                                    {user.email}
+                                                </Tooltip>
+                                            );
+
                                             return (
-                                                <tr key={user.id}>
+                                                <tr key={'new-user-table-entry-' + user.id}>
-                                                    <td>{user.email}</td>
+                                                    <td>
+                                                        <OverlayTrigger
+                                                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                                                            placement='top'
+                                                            overlay={tooltip}
+                                                        >
+                                                            <time>
+                                                                {user.username}
+                                                            </time>
+                                                        </OverlayTrigger>
+                                                    </td>
                                                     <td>{Utils.displayDateTime(user.create_at)}</td>
                                                 </tr>
                                             );

web/react/components/channel_header.jsx

@@ -379,7 +379,7 @@ export default class ChannelHeader extends React.Component {
                             <th>
                                 <div className='dropdown channel-header__links'>
                                     <OverlayTrigger
-                                        delayShow={400}
+                                        delayShow={Constants.OVERLAY_TIME_DELAY}
                                         placement='bottom'
                                         overlay={recentMentionsTooltip}
                                     >

web/react/components/time_since.jsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import Constants from '../utils/constants.jsx';
 import * as Utils from '../utils/utils.jsx';
 
 var Tooltip = ReactBootstrap.Tooltip;
@@ -30,7 +31,7 @@ export default class TimeSince extends React.Component {
 
         return (
             <OverlayTrigger
-                delayShow={400}
+                delayShow={Constants.OVERLAY_TIME_DELAY}
                 placement='top'
                 overlay={tooltip}
             >

web/react/utils/constants.jsx

@@ -443,5 +443,6 @@ export default {
             label: 'embed_preview',
             description: 'Show preview snippet of links below message'
         }
-    }
+    },
+    OVERLAY_TIME_DELAY: 400
 };