From 1a24ea60ca7bca0afaba8dcd2dbe300862a72c29 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 13 Jan 2024 07:47:33 +0000
Subject: [PATCH] fix(user-management): show tooltip on hover user display_name

---
 packages/nc-gui/components/account/UserList.vue  | 16 ++++++++++++----
 .../nc-gui/components/project/AccessSettings.vue | 12 ++++++++++--
 .../components/workspace/CollaboratorsList.vue   | 12 ++++++++++--
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/account/UserList.vue b/packages/nc-gui/components/account/UserList.vue
index ed11b4f39c..8ffe11c589 100644
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@@ -203,13 +203,13 @@ const openDeleteModal = (user: UserType) => {
             data-rec="true"
           >
             <span>
-              {{ $t('labels.email') }}
+              {{ $t('objects.users') }}
             </span>
             <LazyAccountUserMenu :direction="sortDirection.email" field="email" :handle-user-sort="saveOrUpdate" />
           </div>
           <div class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start flex items-center space-x-2" data-rec="true">
             <span>
-              {{ $t('objects.role') }}
+              {{ $t('general.access') }}
             </span>
             <LazyAccountUserMenu :direction="sortDirection.roles" field="roles" :handle-user-sort="saveOrUpdate" />
           </div>
@@ -235,8 +235,16 @@ const openDeleteModal = (user: UserType) => {
             }"
           >
             <div class="text-3.5 text-start w-2/3 pl-5 flex items-center">
-              <GeneralTruncateText length="29">
-                {{ el.display_name || el.email }}
+              <NcTooltip v-if="el.display_name">
+                <template #title>
+                  {{ el.email }}
+                </template>
+                <GeneralTruncateText length="29">
+                  {{ el.display_name }}
+                </GeneralTruncateText>
+              </NcTooltip>
+              <GeneralTruncateText v-else length="29">
+                {{ el.email }}
               </GeneralTruncateText>
             </div>
             <div class="text-3.5 text-start w-1/3">
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index cb0f0516de..4ce3aea5c4 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -187,8 +187,16 @@ onMounted(async () => {
             >
               <div class="flex gap-3 items-center users-email-grid">
                 <GeneralUserIcon size="base" :email="collab.email" />
-                <span class="truncate">
-                  {{ collab.display_name || collab.email }}
+                <NcTooltip v-if="collab.display_name">
+                  <template #title>
+                    {{ collab.email }}
+                  </template>
+                  <span class="truncate">
+                    {{ collab.display_name }}
+                  </span>
+                </NcTooltip>
+                <span v-else class="truncate">
+                  {{ collab.email }}
                 </span>
               </div>
               <div class="user-access-grid">
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index c841c3497e..fe11f9b634 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -100,8 +100,16 @@ onMounted(async () => {
           >
             <div class="flex gap-3 items-center users-email-grid w-3/8 ml-10">
               <GeneralUserIcon size="base" :name="collab.email" :email="collab.email" />
-              <span class="truncate">
-                {{ collab.display_name || collab.email }}
+              <NcTooltip v-if="collab.display_name">
+                <template #title>
+                  {{ collab.email }}
+                </template>
+                <span class="truncate">
+                  {{ collab.display_name }}
+                </span>
+              </NcTooltip>
+              <span v-else class="truncate">
+                {{ collab.email }}
               </span>
             </div>
             <div class="user-access-grid w-2/8">