Merge pull request #6842 from nocodb/fix/user-display-name-fix

Fixed user display name

packages/nc-gui/components/account/Profile.vue

@@ -69,7 +69,7 @@ const onValidate = async (_: any, valid: boolean) => {
         <div class="flex text-gray-500" data-rec="true">{{ $t('labels.controlAppearance') }}</div>
         <div class="flex flex-row mt-4">
           <div class="flex h-20 mt-1.5">
-            <GeneralUserIcon size="xlarge" :email="user?.email" />
+            <GeneralUserIcon size="xlarge" :email="user?.email" :name="user?.display_name" />
           </div>
           <div class="flex w-10"></div>
           <a-form

packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue

@@ -85,7 +85,7 @@ onMounted(() => {
         class="flex flex-row py-2 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-10"
         data-testid="nc-sidebar-userinfo"
       >
-        <GeneralUserIcon :email="user?.email" size="base" />
+        <GeneralUserIcon :email="user?.email" size="base" :name="user?.display_name" />
         <div class="flex truncate">
           {{ name ? name : user?.email }}
         </div>

packages/nc-gui/components/general/UserIcon.vue

@@ -12,23 +12,21 @@ const props = withDefaults(
   },
 )
 
-const emailProp = toRef(props, 'email')
+const size = computed(() => props.size || 'medium')
+
+const displayName = computed(() => props.name ?? '')
+
+const email = computed(() => props?.email ?? '')
 
 const backgroundColor = computed(() => {
   // in comments we need to generate user icon from email
-  if (emailProp.value.length) {
-    return stringToColor(emailProp.value)
+  if (email.value.length) {
+    return stringToColor(email.value)
   }
 
-  return props.email ? stringToColor(props.email) : '#FFFFFF'
+  return email.value ? stringToColor(email.value) : '#FFFFFF'
 })
 
-const size = computed(() => props.size || 'medium')
-
-const displayName = computed(() => props.email ?? '')
-
-const email = computed(() => props.name ?? props?.email ?? '')
-
 const usernameInitials = computed(() => {
   const displayNameSplit = displayName.value?.split(' ').filter((name) => name) ?? []
 

packages/nc-gui/components/project/AccessSettings.vue

@@ -190,7 +190,7 @@ onMounted(async () => {
               class="user-row flex flex-row border-b-1 py-1 min-h-14 items-center"
             >
               <div class="flex gap-3 items-center users-email-grid">
-                <GeneralUserIcon size="base" :name="collab.email" :email="collab.email" />
+                <GeneralUserIcon size="base" :email="collab.email" />
                 <span class="truncate">
                   {{ collab.email }}
                 </span>

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -238,7 +238,7 @@ const onClickAudit = () => {
         </div>
         <div v-if="hasEditPermission" class="p-2 bg-gray-50 gap-2 flex">
           <div class="h-14 flex flex-row w-full bg-white py-2.75 px-1.5 items-center rounded-xl border-1 border-gray-200">
-            <GeneralUserIcon size="base" class="!w-10" :email="user?.email" />
+            <GeneralUserIcon size="base" class="!w-10" :email="user?.email" :name="user?.display_name" />
             <a-input
               v-model:value="comment"
               class="!rounded-lg border-1 bg-white !px-2.5 !py-2 !border-gray-200 nc-comment-box !outline-none"

packages/nc-gui/composables/useRoles/index.ts

@@ -115,6 +115,7 @@ export const useRoles = createSharedComposable(() => {
         ...user.value,
         roles: res.roles,
         base_roles: res.base_roles,
+        display_name: res.display_name,
       } as typeof User
     } else {
       const res = await api.auth.me({})
@@ -123,6 +124,7 @@ export const useRoles = createSharedComposable(() => {
         ...user.value,
         roles: res.roles,
         base_roles: res.base_roles,
+        display_name: res.display_name,
       } as typeof User
     }
   }