datahub-project · samanthafigueredo5 · Nov 20, 2024 · Nov 20, 2024 · Nov 20, 2024 · Dec 9, 2024
diff --git a/datahub-web-react/package.json b/datahub-web-react/package.json
@@ -84,7 +84,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'",

diff --git a/datahub-web-react/src/app/entity/shared/SidebarStyledComponents.tsx b/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;

diff --git a/datahub-web-react/src/app/entity/user/UserInfoSideBar.tsx b/datahub-web-react/src/app/entity/user/UserInfoSideBar.tsx
@@ -1,3 +1,5 @@
+import GlobeIcon from '../../../images/Globe.svg';
+import { countries } from 'country-data-list';
 import { Divider, message, Space, Button, Typography, Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { EditOutlined, MailOutlined, PhoneOutlined, SlackOutlined } from '@ant-design/icons';
@@ -17,6 +19,9 @@ import {
     Name,
     TitleRole,
     Team,
+    LocationSection,
+    LocationSectionText,
+    UserDetails
 } from '../shared/SidebarStyledComponents';
 import EntityGroups from '../shared/EntityGroups';
 import { mapRoleIcon } from '../../identity/user/UserUtils';
@@ -38,6 +43,8 @@ type SideBarData = {
     groupsDetails: Array<EntityRelationship>;
     urn: string | undefined;
     dataHubRoles: Array<EntityRelationship>;
+    countryCode: string | undefined;
+    username: string | undefined;
 };
 
 type Props = {
@@ -51,7 +58,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, username } =
         sideBarData;
 
     const [updateCorpUserPropertiesMutation] = useUpdateCorpUserPropertiesMutation();
@@ -114,12 +121,23 @@ export default function UserInfoSideBar({ sideBarData, refetch }: Props) {
     };
     const dataHubRoleName = dataHubRoles && dataHubRoles.length > 0 && (dataHubRoles[0]?.entity as DataHubRole).name;
 
+    let countryName;
+    const findCountryName = (countryCode) => {
+        try {
+            countryName = countries[countryCode].name;
+        } catch (error) {
+            countryName = '';
+        }
+        return countryName;
+    };
+
     return (
         <>
             <SideBar>
                 <SideBarSubSection className={isProfileOwner ? '' : 'fullView'}>
                     <CustomAvatar size={160} photoUrl={photoUrl} name={avatarName} style={AVATAR_STYLE} />
                     <Name>{name || <EmptyValue />}</Name>
+                    <UserDetails>{username || <EmptyValue />}</UserDetails>
                     {role && <TitleRole>{role}</TitleRole>}
                     {team && <Team>{team}</Team>}
                     {dataHubRoleName && <Tag icon={mapRoleIcon(dataHubRoleName)}>{dataHubRoleName}</Tag>}
@@ -143,6 +161,19 @@ 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;
+                                    {findCountryName(countryCode)}
+                                </LocationSectionText>
+                            <Divider className="divider-aboutSection" />
+                        </LocationSection>
+                    ): (
+                        null
+                    )}
                     <AboutSection>
                         About
                         <AboutSectionText>

diff --git a/datahub-web-react/src/app/entity/user/UserProfile.tsx b/datahub-web-react/src/app/entity/user/UserProfile.tsx
@@ -107,13 +107,15 @@ 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,
         aboutText: data?.corpUser?.editableProperties?.aboutMe || undefined,
         groupsDetails: userGroups,
         dataHubRoles: userRoles,
         urn,
+        username: data?.corpUser?.username
     };
 
     if (data?.corpUser?.exists === false) {

diff --git a/datahub-web-react/src/graphql/user.graphql b/datahub-web-react/src/graphql/user.graphql
@@ -14,6 +14,7 @@ query getUser($urn: String!, $groupsCount: Int!) {
             fullName
             email
             departmentName
+            countryCode
         }
         editableProperties {
             slack

diff --git a/datahub-web-react/src/images/Globe.svg b/datahub-web-react/src/images/Globe.svg
diff --git a/datahub-web-react/yarn.lock b/datahub-web-react/yarn.lock
@@ -5926,6 +5926,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"
@@ -6015,6 +6022,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==
+
 csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"