[TA24802769] pull and use country code, globe icon, and styling for text for location

Author: sfiguere

datahub-web-react/src/app/entity/shared/SidebarStyledComponents.tsx

@@ -64,6 +64,14 @@ export const Name = styled.div`
     margin: 13px 0 7px 0;
 `;
 
+export const UserDetails = styled.div`
+    font-size: 14px;
+    line-height: 35px;
+    font-weight: 400;
+    line-height: 28px;
+    text-align: center;
+`
+
 export const TitleRole = styled.div`
     font-size: 14px;
     line-height: 22px;
@@ -74,6 +82,8 @@ export const TitleRole = styled.div`
 export const Team = styled.div`
     font-size: 12px;
     line-height: 20px;
+    font-weight: 400;
+    padding-bottom: 10px;
     color: #8c8c8c;
 `;
 
@@ -111,6 +121,23 @@ export const AboutSection = styled.div`
     color: #262626;
 `;
 
+export const LocationSection = styled.div`
+    text-align: left;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 26px;
+    color: #262626;
+`;
+
+export const LocationSectionText = styled.div`
+    text-align: left;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 26px;
+    margin-bottom: -10px;
+    color: #262626;
+`;
+
 export const AboutSectionText = styled.div`
     font-size: 12px;
     font-weight: 100;

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

@@ -17,11 +17,16 @@ import {
     Name,
     TitleRole,
     Team,
+    LocationSection,
+    LocationSectionText,
+    UserDetails
 } from '../shared/SidebarStyledComponents';
 import EntityGroups from '../shared/EntityGroups';
 import { mapRoleIcon } from '../../identity/user/UserUtils';
 import { useUserContext } from '../../context/useUserContext';
 import { useBrowserTitle } from '../../shared/BrowserTabTitleContext';
+import GlobeIcon from '../../../images/Globe.svg';
+import { countries } from 'country-data-list';
 
 const { Paragraph } = Typography;
 
@@ -38,6 +43,7 @@ type SideBarData = {
     groupsDetails: Array<EntityRelationship>;
     urn: string | undefined;
     dataHubRoles: Array<EntityRelationship>;
+    countryCode: string | undefined;
 };
 
 type Props = {
@@ -51,7 +57,7 @@ const AVATAR_STYLE = { marginTop: '14px' };
  * UserInfoSideBar- Sidebar section for users profiles.
  */
 export default function UserInfoSideBar({ sideBarData, refetch }: Props) {
-    const { name, aboutText, avatarName, email, groupsDetails, phone, photoUrl, role, slack, team, dataHubRoles, urn } =
+    const { name, aboutText, avatarName, email, groupsDetails, phone, photoUrl, role, slack, team, dataHubRoles, urn, countryCode } =
         sideBarData;
 
     const [updateCorpUserPropertiesMutation] = useUpdateCorpUserPropertiesMutation();
@@ -120,6 +126,7 @@ export default function UserInfoSideBar({ sideBarData, refetch }: Props) {
                 <SideBarSubSection className={isProfileOwner ? '' : 'fullView'}>
                     <CustomAvatar size={160} photoUrl={photoUrl} name={avatarName} style={AVATAR_STYLE} />
                     <Name>{name || <EmptyValue />}</Name>
+                    <UserDetails>{urn?.replace('urn:li:corpuser:', '') || <EmptyValue />}</UserDetails>
                     {role && <TitleRole>{role}</TitleRole>}
                     {team && <Team>{team}</Team>}
                     {dataHubRoleName && <Tag icon={mapRoleIcon(dataHubRoleName)}>{dataHubRoleName}</Tag>}
@@ -143,6 +150,17 @@ export default function UserInfoSideBar({ sideBarData, refetch }: Props) {
                         </Space>
                     </SocialDetails>
                     <Divider className="divider-aboutSection" />
+                    { countryCode && (
+                        <LocationSection>
+                            Location 
+                            <br />
+                                <LocationSectionText>
+                                    <img src={GlobeIcon} alt="Manage Users" style={{ display: 'inline' }} /> &nbsp;
+                                    {countries[countryCode].name}
+                                </LocationSectionText>
+                            <Divider className="divider-aboutSection" />
+                        </LocationSection>
+                    )}
                     <AboutSection>
                         About
                         <AboutSectionText>

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

@@ -107,6 +107,7 @@ export default function UserProfile() {
             undefined,
         role: data?.corpUser?.editableProperties?.title || data?.corpUser?.info?.title || undefined,
         team: data?.corpUser?.editableProperties?.teams?.join(',') || data?.corpUser?.info?.departmentName || undefined,
+        countryCode: data?.corpUser?.info?.countryCode|| undefined,
         email: data?.corpUser?.editableProperties?.email || data?.corpUser?.info?.email || undefined,
         slack: data?.corpUser?.editableProperties?.slack || undefined,
         phone: data?.corpUser?.editableProperties?.phone || undefined,