feat(UI): add user location to user profile page

datahub-web-react/package.json

@@ -79,7 +79,8 @@
         "uuid": "^8.3.2",
         "virtualizedtableforantd4": "^1.2.1",
         "web-vitals": "^0.2.4",
-        "yamljs": "^0.3.0"
+        "yamljs": "^0.3.0",
+        "country-data-list": "^1.3.4"
     },
     "scripts": {
         "analyze": "source-map-explorer 'dist/assets/*.js'",

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,

datahub-web-react/src/graphql/user.graphql

@@ -14,6 +14,7 @@ query getUser($urn: String!, $groupsCount: Int!) {
             fullName
             email
             departmentName
+            countryCode
         }
         editableProperties {
             slack

datahub-web-react/yarn.lock

@@ -5008,6 +5008,13 @@ cosmiconfig@^8.1.0, cosmiconfig@^8.1.3:
     parse-json "^5.2.0"
     path-type "^4.0.0"
 
+country-data-list@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/country-data-list/-/country-data-list-1.3.4.tgz#0c88a5b8b5c6cba2e0881ee378b7a24b5216aae4"
+  integrity sha512-BKwqyeXbmhhzOEf1gcH1Ui1X/ni8YmXTllhCTNW23ja/u7EY1lKS0hrK68kngw5ni6WooXLARXmnHxGnKDWQpQ==
+  dependencies:
+    currency-symbol-map "~5"
+
 create-context-state@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/create-context-state/-/create-context-state-2.0.0.tgz#b58d33c553ef6c66958899d06fad4edf1b99ca24"
@@ -5097,6 +5104,11 @@ csstype@^3.0.2, csstype@^3.0.6, csstype@^3.0.7, csstype@^3.1.0, csstype@^3.1.1:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+currency-symbol-map@~5:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/currency-symbol-map/-/currency-symbol-map-5.1.0.tgz#59531fbe977ba95e8d358e90e3c9e9053efb75ad"
+  integrity sha512-LO/lzYRw134LMDVnLyAf1dHE5tyO6axEFkR3TXjQIOmMkAM9YL6QsiUwuXzZAmFnuDJcs4hayOgyIYtViXFrLw==
+
 "d3-array@2 - 3", "[email protected] - 3":
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"