Merge pull request #9933 from nocodb/nc-fix/bug-fixes-user-logo-color

fix(nc-gui): user logo bg color is not same in all the places

packages/nc-gui/components/cell/User.vue

@@ -353,7 +353,7 @@ const isCollaborator = (userIdOrEmail) => {
                 <div>
                   <GeneralUserIcon
                     size="auto"
-                    :name="op.display_name?.trim() ? op.display_name?.trim() : ''"
+                    :name="op.display_name"
                     :email="op.email"
                     class="!text-[0.65rem]"
                     :disabled="!isCollaborator(op.id)"
@@ -498,12 +498,7 @@ const isCollaborator = (userIdOrEmail) => {
                 :class="{ 'text-sm': isKanban, 'text-small': !isKanban }"
               >
                 <div>
-                  <GeneralUserIcon
-                    size="auto"
-                    :name="op.display_name?.trim() ? op.display_name?.trim() : ''"
-                    :email="op.email"
-                    class="!text-[0.65rem]"
-                  />
+                  <GeneralUserIcon size="auto" :name="op.display_name" :email="op.email" class="!text-[0.65rem]" />
                 </div>
                 <NcTooltip class="truncate max-w-full" show-on-truncate-only>
                   <template #title>

packages/nc-gui/components/dlg/ReAssign/UserItem.vue

@@ -12,12 +12,7 @@ const displayName = computed(() => {
 
 <template>
   <div class="flex flex-row items-center gap-x-2 h-12.5 p-2">
-    <GeneralUserIcon
-      size="auto"
-      :name="user.display_name?.trim() ? user.display_name?.trim() : ''"
-      :email="user.email"
-      class="!text-[0.65rem]"
-    />
+    <GeneralUserIcon size="auto" :name="user.display_name" :email="user.email" class="!text-[0.65rem]" />
     <div class="flex flex-col justify-center flex-grow">
       <div class="flex flex-col">
         <span class="capitalize font-weight-medium">{{ displayName }}</span>

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

@@ -4,7 +4,7 @@ import { isColorDark, stringToColor } from '#imports'
 const props = withDefaults(
   defineProps<{
     size?: 'small' | 'medium' | 'base' | 'large' | 'xlarge' | 'auto'
-    name?: string
+    name?: string | null
     email?: string
     disabled?: boolean
   }>(),
@@ -16,17 +16,19 @@ const props = withDefaults(
   },
 )
 
-const { size, email } = toRefs(props)
+const { size } = toRefs(props)
 
 const displayName = computed(() => props.name?.trim() || '')
 
+const userEmail = computed(() => props.email?.trim() || '')
+
 const backgroundColor = computed(() => {
   if (props.disabled) {
     return '#bbbbbb'
   }
 
   // in comments we need to generate user icon from email
-  return displayName.value ? stringToColor(displayName.value) : email.value ? stringToColor(email.value) : '#FFFFFF'
+  return displayName.value ? stringToColor(displayName.value) : userEmail.value ? stringToColor(userEmail.value) : '#FFFFFF'
 })
 
 const usernameInitials = computed(() => {
@@ -43,7 +45,7 @@ const usernameInitials = computed(() => {
       return displayName.value.slice(0, 2)
     }
   } else {
-    return email.value?.split('@')[0].slice(0, 2)
+    return userEmail.value?.split('@')[0].slice(0, 2)
   }
 })
 </script>

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

@@ -349,7 +349,7 @@ const isDeleteOrUpdateAllowed = (user) => {
           </template>
 
           <div v-if="column.key === 'email'" class="w-full flex gap-3 items-center users-email-grid">
-            <GeneralUserIcon size="base" :email="record.email" class="flex-none" />
+            <GeneralUserIcon size="base" :email="record.email" :name="record.display_name" class="flex-none" />
             <div class="flex flex-col flex-1 max-w-[calc(100%_-_44px)]">
               <div class="flex gap-3">
                 <NcTooltip class="truncate max-w-full text-gray-800 capitalize font-semibold" show-on-truncate-only>

packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue

@@ -83,7 +83,7 @@ watch(
         <div class="group gap-3 overflow-hidden px-3 py-2 hover:bg-gray-100">
           <div class="flex items-start justify-between">
             <div class="flex items-start gap-3 flex-1 w-full">
-              <GeneralUserIcon :email="audit.created_by_email" :name="audit.created_display_name" class="mt-0.5" size="medium" />
+              <GeneralUserIcon :email="audit?.created_by_email" :name="audit?.created_display_name" class="mt-0.5" size="medium" />
               <div class="flex h-[28px] items-center gap-3 w-[calc(100%_-_40px)]">
                 <NcDropdown placement="topLeft" :trigger="['hover']" class="flex-none max-w-[calc(100%_-_72px)]">
                   <div class="truncate text-gray-800 font-medium !text-small !leading-[18px] overflow-hidden">
@@ -95,8 +95,8 @@ watch(
                       <div class="flex items-center gap-4 py-3 px-2">
                         <GeneralUserIcon
                           class="!w-8 !h-8 border-1 border-gray-200 rounded-full"
-                          :name="audit.created_display_name"
-                          :email="audit.created_by_email"
+                          :name="audit?.created_display_name"
+                          :email="audit?.created_by_email"
                         />
                         <div class="flex flex-col">
                           <div class="font-semibold text-gray-800">

packages/nc-gui/components/smartsheet/form/LimitOptions.vue

@@ -262,12 +262,7 @@ const showOrHideAll = (showAll: boolean) => {
               class="flex items-stretch gap-2"
             >
               <div>
-                <GeneralUserIcon
-                  size="auto"
-                  :name="element.display_name?.trim() ? element.display_name?.trim() : ''"
-                  :email="element.email"
-                  class="!text-[0.65rem]"
-                />
+                <GeneralUserIcon size="auto" :name="element.display_name" :email="element.email" class="!text-[0.65rem]" />
               </div>
               <NcTooltip class="truncate max-w-full" show-on-truncate-only>
                 <template #title>

packages/nc-gui/components/workspace/AuditLogs.vue

@@ -350,7 +350,12 @@ onKeyStroke('ArrowDown', onDown)
                     <td class="cell-user">
                       <div>
                         <div v-if="audit.user && collaboratorsMap.get(audit.user)?.email" class="w-full flex gap-3 items-center">
-                          <GeneralUserIcon :email="collaboratorsMap.get(audit.user)?.email" size="base" class="flex-none" />
+                          <GeneralUserIcon
+                            :email="collaboratorsMap.get(audit.user)?.email"
+                            :name="collaboratorsMap.get(audit.user)?.display_name"
+                            size="base"
+                            class="flex-none"
+                          />
                           <div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]">
                             <div class="w-full flex gap-3">
                               <NcTooltip
@@ -521,7 +526,12 @@ onKeyStroke('ArrowDown', onDown)
                     v-if="selectedAudit?.user && collaboratorsMap.get(selectedAudit.user)?.email"
                     class="w-full flex gap-3 items-center"
                   >
-                    <GeneralUserIcon :email="collaboratorsMap.get(selectedAudit.user)?.email" size="base" class="flex-none" />
+                    <GeneralUserIcon
+                      :email="collaboratorsMap.get(selectedAudit.user)?.email"
+                      :name="collaboratorsMap.get(selectedAudit.user)?.display_name"
+                      size="base"
+                      class="flex-none"
+                    />
                     <div class="flex-1 flex flex-col">
                       <div class="w-full flex gap-3">
                         <span class="text-sm text-gray-800 capitalize font-semibold">

packages/nc-gui/components/workspace/CollaboratorsList.vue

@@ -229,7 +229,7 @@ const isDeleteOrUpdateAllowed = (user) => {
           </template>
 
           <div v-if="column.key === 'email'" class="w-full flex gap-3 items-center">
-            <GeneralUserIcon size="base" :email="record.email" class="flex-none" />
+            <GeneralUserIcon size="base" :email="record.email" :name="record.display_name" class="flex-none" />
             <div class="flex flex-col flex-1 max-w-[calc(100%_-_44px)]">
               <div class="flex gap-3">
                 <NcTooltip class="truncate max-w-full text-gray-800 capitalize font-semibold" show-on-truncate-only>

packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue

@@ -463,6 +463,8 @@ onKeyStroke('ArrowDown', onDown)
                       >
                         <GeneralUserIcon
                           :email="collaboratorsMap.get(integration.created_by)?.email"
+                          :name="collaboratorsMap.get(integration.created_by)?.display_name"
+
                           size="base"
                           class="flex-none"
                           :class="{