From fffa18f26225a99ad2b54724e321d9c1fa74c1f4 Mon Sep 17 00:00:00 2001
From: Deepali Jain <jaindeepali18@gmail.com>
Date: Tue, 3 Dec 2024 18:04:29 +0530
Subject: [PATCH] Variable naming and displaying  username, title, and
 department below displayname

---
 .../profile/sidebar/Ownership/EditOwnersModal.tsx    | 12 ++++++------
 datahub-web-react/src/app/shared/OwnerLabel.tsx      |  9 ++++++++-
 datahub-web-react/src/graphql/search.graphql         |  2 ++
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx
index 274d9b064342f..11b8e560a32ed 100644
--- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx
+++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx
@@ -79,15 +79,15 @@ export const EditOwnersModal = ({
         const avatarUrl =
             (entity.type === EntityType.CorpUser && (entity as CorpUser).editableProperties?.pictureLink) || undefined;
         const isCorpUser = (entity.type as EntityType) === EntityType.CorpUser;
-        const displayCorpUserDepartmentName =
+        const corpUserDepartmentName =
             (entity.type === EntityType.CorpUser && (entity as CorpUser).properties?.departmentName) || '';
-        const displayCorpUserUserName = (entity.type === EntityType.CorpUser && (entity as CorpUser).username) || '';
-    
+        const corpUserId = (entity.type === EntityType.CorpUser && (entity as CorpUser).username) || '';
+        const corpUserTitle = (entity.type === EntityType.CorpUser && (entity as CorpUser).properties?.title) || '';
         const displayName = entityRegistry.getDisplayName(entity.type, entity);
         const concatenatedValue = isCorpUser
-            ? displayName
-                  .concat(displayCorpUserUserName ? ` - ${displayCorpUserUserName}` : '')
-                  .concat(displayCorpUserDepartmentName ? ` - ${displayCorpUserDepartmentName}` : '')
+            ? `${displayName}\n${corpUserId ? `${corpUserId}` : ''}${corpUserTitle ? ` ${corpUserTitle}` : ''}${
+                  corpUserDepartmentName ? ` ${corpUserDepartmentName}` : ''
+              }`
             : displayName;
     
         return (
diff --git a/datahub-web-react/src/app/shared/OwnerLabel.tsx b/datahub-web-react/src/app/shared/OwnerLabel.tsx
index de3c03dea2ba4..3165d4b1fe20a 100644
--- a/datahub-web-react/src/app/shared/OwnerLabel.tsx
+++ b/datahub-web-react/src/app/shared/OwnerLabel.tsx
@@ -27,7 +27,14 @@ export const OwnerLabel = ({ name, avatarUrl, type }: Props) => {
         <OwnerContainerWrapper>
             <OwnerContentWrapper>
                 <CustomAvatar size={24} name={name} photoUrl={avatarUrl} isGroup={type === EntityType.CorpGroup} />
-                <div>{name}</div>
+                <div>
+                    {name.split('\n').map((line, index) => (
+                        <span key={index} style={index > 0 ? { color: 'gray' } : {}}>
+                            {line}
+                            <br />
+                        </span>
+                    ))}
+                </div>
             </OwnerContentWrapper>
         </OwnerContainerWrapper>
     );
diff --git a/datahub-web-react/src/graphql/search.graphql b/datahub-web-react/src/graphql/search.graphql
index ec8f4b64db9c9..86014d227e49c 100644
--- a/datahub-web-react/src/graphql/search.graphql
+++ b/datahub-web-react/src/graphql/search.graphql
@@ -418,6 +418,7 @@ fragment searchResultsWithoutSchemaField on Entity {
             fullName
             email
             departmentName
+            title
         }
         info {
             active
@@ -428,6 +429,7 @@ fragment searchResultsWithoutSchemaField on Entity {
             fullName
             email
             departmentName
+            title
         }
         editableProperties {
             displayName