fix: user avatar renders a default avatar for users with no name (#5522)

Author: wdoconnell

src/identity/components/GlobalHeader/GlobalHeader.tsx

@@ -78,9 +78,13 @@ export const GlobalHeader: FC = () => {
   }, [orgsList])
 
   const shouldLoadDropdowns = Boolean(activeOrg?.id && activeAccount?.id)
-  const shouldLoadAvatar = Boolean(
-    user?.firstName && user?.lastName && user?.email && org?.id
-  )
+
+  const shouldLoadAvatar = Boolean(user?.email && org?.id)
+  const avatarFirstName =
+    typeof user?.firstName === 'string' ? user.firstName.trim() : ''
+  const avatarLastName =
+    typeof user?.lastName === 'string' ? user.lastName.trim() : ''
+
   const shouldLoadGlobalHeader = Boolean(
     shouldLoadDropdowns || shouldLoadAvatar
   )
@@ -109,8 +113,8 @@ export const GlobalHeader: FC = () => {
       {shouldLoadAvatar && (
         <IdentityUserAvatar
           email={user.email}
-          firstName={user.firstName}
-          lastName={user.lastName}
+          firstName={avatarFirstName}
+          lastName={avatarLastName}
           orgId={org.id}
         />
       )}

src/identity/components/GlobalHeader/IdentityUserAvatar.tsx

@@ -67,7 +67,7 @@ class IdentityUserAvatar extends React.Component<Props, State> {
       <>
         <div className="user-popover-header">
           <div className="user-popover-header-name">
-            {firstName} {lastName}
+            {firstName ?? null} {lastName ?? null}
           </div>
           <div className="user-popover-header-email">{email}</div>
           <hr />
@@ -111,22 +111,24 @@ class IdentityUserAvatar extends React.Component<Props, State> {
       'user-popover--open': this.state.isPopoverOpen,
     })
 
+    const avatarInitials = this.getInitials()
+
     const {isPopoverOpen} = this.state
     return (
       <ClickOutside onClickOutside={this.setPopoverStateClosed}>
         <div>
           {/* Button shape is ButtonShape.Square to make the height and width the same
             so we can use the border radius to make it a circle  */}
           <Button
-            text={this.getInitials()}
+            text={avatarInitials}
             shape={ButtonShape.Square}
             color={
               isPopoverOpen ? ComponentColor.Default : ComponentColor.Tertiary
             }
             onClick={this.togglePopoverState}
             className={userAvatarButtonClassName}
             testID="global-header--user-avatar"
-            icon={!this.getInitials() ? IconFont.User : null}
+            icon={avatarInitials === '' ? IconFont.User : null}
           />
           <FlexBox
             className={userPopoverClassName}