Fixing UI username display (#3461)

datahub-web-react/src/app/entity/group/GroupHeader.tsx

@@ -17,24 +17,47 @@ const AvatarWrapper = styled.div`
     margin-right: 32px;
 `;
 
+const HeaderContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const NameContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: left;
+`;
+
+const TitleContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
 export default function GroupHeader({ name, description, email }: Props) {
     // TODO: Add Optional Group Image URLs
     return (
         <>
             <Row>
-                <AvatarWrapper>
-                    <CustomAvatar size={100} photoUrl={undefined} name={name || undefined} />
-                </AvatarWrapper>
-                <div>
-                    <Typography.Title level={3} style={{ marginTop: 8 }}>
-                        {name}
-                    </Typography.Title>
-                    <Space split="|" size="middle">
-                        <a href={`mailto:${email}`}>
-                            <Typography.Text strong>{email}</Typography.Text>
-                        </a>
-                    </Space>
-                </div>
+                <HeaderContainer>
+                    <AvatarWrapper>
+                        <CustomAvatar size={100} photoUrl={undefined} name={name || undefined} />
+                    </AvatarWrapper>
+                    <NameContainer>
+                        <Typography.Title level={3} style={{ marginTop: 8 }}>
+                            {name}
+                        </Typography.Title>
+                        <TitleContainer>
+                            {email && (
+                                <a href={`mailto:${email}`}>
+                                    <Typography.Text strong>{email}</Typography.Text>
+                                </a>
+                            )}
+                        </TitleContainer>
+                    </NameContainer>
+                </HeaderContainer>
             </Row>
             <Typography.Title style={{ marginTop: 40 }} level={5}>
                 Description

datahub-web-react/src/app/entity/group/GroupProfile.tsx

@@ -30,7 +30,7 @@ export default function GroupProfile() {
     const { urn } = useUserParams();
     const { loading, error, data } = useGetGroupQuery({ variables: { urn, membersCount: MEMBER_PAGE_SIZE } });
 
-    const name = data?.corpGroup?.name;
+    const name = data?.corpGroup && entityRegistry.getDisplayName(EntityType.CorpUser, data?.corpGroup?.name);
 
     const ownershipResult = useGetAllEntitySearchResults({
         query: `owners:${name}`,

datahub-web-react/src/app/entity/shared/components/styled/ExpandedOwner.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { useRemoveOwnerMutation } from '../../../../../graphql/mutations.generated';
 
-import { Owner } from '../../../../../types.generated';
+import { EntityType, Owner } from '../../../../../types.generated';
 import { CustomAvatar } from '../../../../shared/avatar';
 import { useEntityRegistry } from '../../../../useEntityRegistry';
 
@@ -28,10 +28,10 @@ export const ExpandedOwner = ({ entityUrn, owner, refetch }: Props) => {
 
     let name = '';
     if (owner.owner.__typename === 'CorpGroup') {
-        name = owner.owner.name || owner.owner.info?.displayName || '';
+        name = entityRegistry.getDisplayName(EntityType.CorpGroup, owner.owner);
     }
     if (owner.owner.__typename === 'CorpUser') {
-        name = owner.owner.info?.displayName || owner.owner.info?.fullName || owner.owner.info?.email || '';
+        name = entityRegistry.getDisplayName(EntityType.CorpUser, owner.owner);
     }
 
     const pictureLink = (owner.owner.__typename === 'CorpUser' && owner.owner.editableInfo?.pictureLink) || undefined;
@@ -74,7 +74,7 @@ export const ExpandedOwner = ({ entityUrn, owner, refetch }: Props) => {
     return (
         <OwnerTag onClose={onClose} closable>
             <Link to={`/${entityRegistry.getPathName(owner.owner.type)}/${owner.owner.urn}`}>
-                <CustomAvatar name={name} photoUrl={pictureLink} />
+                <CustomAvatar name={name} photoUrl={pictureLink} useDefaultAvatar={false} />
                 {name}
             </Link>
         </OwnerTag>

datahub-web-react/src/app/entity/user/UserHeader.tsx

@@ -1,12 +1,12 @@
 // import { UserOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import React from 'react';
-import { Space, Badge, Typography } from 'antd';
+import { Space, Badge, Typography, Divider } from 'antd';
 import CustomAvatar from '../../shared/avatar/CustomAvatar';
 
 type Props = {
     profileSrc?: string | null;
-    name?: string | null;
+    name: string;
     title?: string | null;
     skills?: string[] | null;
     teams?: string[] | null;
@@ -30,20 +30,50 @@ const Skills = styled.div`
     margin-right: 32px;
 `;
 
+const TitleContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const HeaderContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const NameContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: left;
+`;
+
 export default function UserHeader({ profileSrc, name, title, skills, teams, email }: Props) {
     return (
         <Row>
-            <AvatarWrapper>
-                <CustomAvatar size={100} photoUrl={profileSrc || undefined} name={name || undefined} />
-            </AvatarWrapper>
             <div>
-                <Typography.Title level={3}>{name}</Typography.Title>
-                <Space split="|" size="middle">
-                    <Typography.Text>{title}</Typography.Text>
-                    <a href={`mailto:${email}`}>
-                        <Typography.Text strong>{email}</Typography.Text>
-                    </a>
-                </Space>
+                <HeaderContainer>
+                    <AvatarWrapper>
+                        <CustomAvatar size={100} photoUrl={profileSrc || undefined} name={name || undefined} />
+                    </AvatarWrapper>
+                    <NameContainer>
+                        <Typography.Title level={3}>{name}</Typography.Title>
+                        <TitleContainer>
+                            {title && (
+                                <>
+                                    <Typography.Text>{title}</Typography.Text>
+                                    <Divider type="vertical" />
+                                </>
+                            )}
+                            {email && (
+                                <a href={`mailto:${email}`}>
+                                    <Typography.Text strong>{email}</Typography.Text>
+                                </a>
+                            )}
+                        </TitleContainer>
+                    </NameContainer>
+                </HeaderContainer>
                 <div>
                     <Traits>
                         <Skills>

datahub-web-react/src/app/entity/user/UserProfile.tsx

@@ -1,6 +1,5 @@
 import { Alert } from 'antd';
 import React, { useMemo } from 'react';
-
 import UserHeader from './UserHeader';
 import useUserParams from '../../shared/entitySearch/routingUtils/useUserParams';
 import { useGetUserQuery } from '../../../graphql/user.generated';
@@ -10,6 +9,7 @@ import RelatedEntityResults from '../../shared/entitySearch/RelatedEntityResults
 import { LegacyEntityProfile } from '../../shared/LegacyEntityProfile';
 import { CorpUser, EntityType, SearchResult, EntityRelationshipsResult } from '../../../types.generated';
 import UserGroups from './UserGroups';
+import { useEntityRegistry } from '../../useEntityRegistry';
 
 const messageStyle = { marginTop: '10%' };
 
@@ -27,6 +27,7 @@ const GROUP_PAGE_SIZE = 20;
 export default function UserProfile() {
     const { urn } = useUserParams();
     const { loading, error, data } = useGetUserQuery({ variables: { urn, groupsCount: GROUP_PAGE_SIZE } });
+    const entityRegistry = useEntityRegistry();
     const username = data?.corpUser?.username;
 
     const ownershipResult = useGetAllEntitySearchResults({
@@ -76,11 +77,13 @@ export default function UserProfile() {
         ].filter((tab) => ENABLED_TAB_TYPES.includes(tab.name));
     };
 
-    const getHeader = ({ editableInfo, info }: CorpUser) => {
+    const getHeader = (user: CorpUser) => {
+        const { editableInfo, info } = user;
+        const displayName = entityRegistry.getDisplayName(EntityType.CorpUser, user);
         return (
             <UserHeader
                 profileSrc={editableInfo?.pictureLink}
-                name={info?.displayName}
+                name={displayName}
                 title={info?.title}
                 email={info?.email}
                 skills={editableInfo?.skills}