Merge pull request #2825 from appirio-tech/hotfix/avatars-with-email-master

Hotfix/avatars with email master

Author: RishiRajSahu

src/components/TeamManagement/ProjectManagementDialog.js

@@ -153,7 +153,7 @@ class Dialog extends React.Component {
                   className={`project-member-layout ${(i%2 !== 0) ? 'dark' : ''}`}
                 >
                   <Avatar
-                    userName={invite.email}
+                    userName={invite.email || userFullName}
                     avatarUrl={invite.email ? '' : getAvatarResized(_.get(invite.member || {}, 'photoURL'), 40)}
                     size={40}
                   />

src/components/TeamManagement/TeamManagement.jsx

@@ -92,13 +92,19 @@ class TeamManagement extends React.Component {
                 <UserTooltip usr={member} id={i} key={i} previewAvatar size={40} />
               )
             })}
-            {projectTeamInvites.map((member, i) => {
-              const wrapMember = {
-                ...member,
-                ...member.member
-              }
+            {projectTeamInvites.map((invite, i) => {
+              const member = invite.email ? { email: invite.email } : invite.member
+
               return (
-                <UserTooltip usr={wrapMember} id={i} key={i} previewAvatar size={40} invitedLabel teamInvites />
+                <UserTooltip
+                  usr={member}
+                  id={i}
+                  key={i}
+                  previewAvatar
+                  size={40}
+                  invitedLabel
+                  showEmailOnly={!!invite.email}
+                />
               )
             })}
             { (canShowInvite) &&
@@ -127,16 +133,19 @@ class TeamManagement extends React.Component {
                 <UserTooltip usr={member} id={i} key={i} previewAvatar size={40} />
               )
             })}
-            {topcoderTeamInvites.map((member, i) => {
-              if (member.isCustomer) {
+            {topcoderTeamInvites.map((invite, i) => {
+              if (invite.isCustomer) {
                 return
               }
-              const wrapMember = {
-                ...member,
-                ...member.member
-              }
               return (
-                <UserTooltip usr={wrapMember} id={i} key={i} previewAvatar size={40} invitedLabel />
+                <UserTooltip
+                  usr={invite.member}
+                  id={i}
+                  key={i}
+                  previewAvatar
+                  size={40}
+                  invitedLabel
+                />
               )
             })}
             { (canJoinAsCopilot || canJoinAsManager) &&

src/components/User/UserTooltip.jsx

@@ -9,7 +9,7 @@ import IconDirectArrow from '../../assets/icons/icon-direct-arrow.svg'
 
 require('./UserTooltip.scss')
 
-const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, teamInvites }) => {
+const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, showEmailOnly }) => {
   const theme = `customer-data size-${size}`
   const tooltipMargin = previewAvatar ? -(100 + (id * 20)) : 0
   const userHandle = _.get(usr, 'handle')
@@ -18,10 +18,11 @@ const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, teamInvites }
   const lastName = _.get(usr, 'lastName', '')
   let userFullName = `${firstName} ${lastName}`
   userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
-  const avatar = 
+  const avatar =
     (
-      <Avatar avatarUrl={userEmail ? '' : getAvatarResized(_.get(usr || {}, 'photoURL'), 40)} 
-        userName={userEmail}
+      <Avatar
+        avatarUrl={showEmailOnly ? '' : getAvatarResized(_.get(usr || {}, 'photoURL'), 40)}
+        userName={showEmailOnly ? userEmail : userFullName}
       />
     )
   return (
@@ -30,8 +31,8 @@ const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, teamInvites }
         {
           previewAvatar ? (<div className={`stack-avatar-${id}`}>
             <Avatar
-              avatarUrl={userEmail ? '' : getAvatarResized(_.get(usr || {}, 'photoURL'), 40)}
-              userName={userEmail}
+              avatarUrl={showEmailOnly ? '' : getAvatarResized(_.get(usr || {}, 'photoURL'), 40)}
+              userName={showEmailOnly ? userEmail : userFullName}
               size={size}
             />
             {invitedLabel && <IconDirectArrow className="direct-arrow"/>}
@@ -42,7 +43,7 @@ const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, teamInvites }
       <div className="tooltip-body">
         <div className="top-container">
           <div className="tt-col-avatar">
-            { !userEmail ? (
+            { !showEmailOnly ? (
               <a href={`//www.${DOMAIN}/members/${userHandle}/`} target="_blank" rel="noopener noreferrer" className="tt-user-avatar">
                 {avatar}
               </a>
@@ -53,13 +54,13 @@ const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, teamInvites }
             )}
           </div>
           <div className="tt-col-user-data">
-            {!userEmail && <div className="user-name-container">
+            {!showEmailOnly && <div className="user-name-container">
               <span>{userFullName}</span>
             </div>}
-            {!userEmail && <div className="user-handle-container">
+            {!showEmailOnly && <div className="user-handle-container">
               <span>{userHandle}</span>
             </div>}
-            {userEmail && <div className={`user-email-container ${teamInvites ? 'text-dark' : ''}`}>
+            {userEmail && <div className={`user-email-container ${showEmailOnly ? 'text-dark' : ''}`}>
               <a href={`mailto:${userEmail}`}>{userEmail}</a>
             </div>}
             {invitedLabel && <div className="invited-label">invited</div>}
@@ -82,7 +83,8 @@ UserTooltip.propTypes = {
 
 UserTooltip.defaultProps = {
   size: 30,
-  previewAvatar: false
+  previewAvatar: false,
+  showEmailOnly: false,
 }
 
 export default UserTooltip