From 2f01d8798c39c178361622e4ca0913f6c9261cee Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:40 +0000
Subject: [PATCH 01/10] fix(nc-gui): add circular badge with initials for user
 field options

---
 packages/nc-gui/components/cell/User.vue      | 26 ++++++++++++++-----
 .../nc-gui/components/general/UserIcon.vue    | 11 +++-----
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 4eac73c484..33390a83ef 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -281,7 +281,7 @@ const filterOption = (input: string, option: any) => {
       }"
     >
       <template v-for="selectedOpt of vModel" :key="selectedOpt.value">
-        <a-tag class="rounded-tag max-w-full" color="'#ccc'">
+        <a-tag class="rounded-tag max-w-full !pl-0" color="'#ccc'">
           <span
             :style="{
               'color': tinycolor.isReadable('#ccc' || '#ccc', '#fff', { level: 'AA', size: 'large' })
@@ -289,8 +289,16 @@ const filterOption = (input: string, option: any) => {
                 : tinycolor.mostReadable('#ccc' || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
               'font-size': '13px',
             }"
+            class="flex items-stretch gap-2"
             :class="{ 'text-sm': isKanban }"
           >
+            <div class="flex-none">
+              <GeneralUserIcon
+                size="auto"
+                :name="!selectedOpt.label?.includes('@') ? selectedOpt.label.trim() : ''"
+                :email="selectedOpt.label"
+              />
+            </div>
             <NcTooltip class="truncate max-w-full" show-on-truncate-only>
               <template #title>
                 {{ selectedOpt.label }}
@@ -349,13 +357,15 @@ const filterOption = (input: string, option: any) => {
                   : tinycolor.mostReadable('#ccc' || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
                 'font-size': '13px',
               }"
-              class="flex items-center gap-2"
+              class="flex items-stretch gap-2"
               :class="{ 'text-sm': isKanban }"
             >
-              <GeneralUserIcon size="medium" :email="op.email" />
+              <div>
+                <GeneralUserIcon size="auto" :name="op.display_name?.trim() ? op.display_name?.trim() : ''" :email="op.email" />
+              </div>
               <NcTooltip class="truncate max-w-full" show-on-truncate-only>
                 <template #title>
-                  {{ op.display_name?.length ? op.display_name : op.email }}
+                  {{ op.display_name?.trim() || op.email }}
                 </template>
                 <span
                   class="text-ellipsis overflow-hidden"
@@ -365,7 +375,7 @@ const filterOption = (input: string, option: any) => {
                     display: 'inline',
                   }"
                 >
-                  {{ op.display_name?.length ? op.display_name : op.email }}
+                  {{ op.display_name?.trim() || op.email }}
                 </span>
               </NcTooltip>
             </span>
@@ -376,7 +386,7 @@ const filterOption = (input: string, option: any) => {
       <template #tagRender="{ label, value: val, onClose }">
         <a-tag
           v-if="options.find((el) => el.id === val)"
-          class="rounded-tag nc-selected-option"
+          class="rounded-tag nc-selected-option !pl-0"
           :style="{ display: 'flex', alignItems: 'center' }"
           color="'#ccc'"
           :closable="editAllowed && ((vModel?.length ?? 0) > 1 || !column?.rqd)"
@@ -394,8 +404,12 @@ const filterOption = (input: string, option: any) => {
                 : tinycolor.mostReadable('#ccc' || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
               'font-size': '13px',
             }"
+            class="flex items-stretch gap-2"
             :class="{ 'text-sm': isKanban }"
           >
+            <div>
+              <GeneralUserIcon size="auto" :name="!label?.includes('@') ? label.trim() : ''" :email="label" />
+            </div>
             {{ label }}
           </span>
         </a-tag>
diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
index 473a542f77..9e528810ff 100644
--- a/packages/nc-gui/components/general/UserIcon.vue
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -3,7 +3,7 @@ import { isColorDark, stringToColor } from '~/utils/colorsUtils'
 
 const props = withDefaults(
   defineProps<{
-    size?: 'small' | 'medium' | 'base' | 'large' | 'xlarge'
+    size?: 'small' | 'medium' | 'base' | 'large' | 'xlarge' | 'auto'
     name?: string
     email?: string
   }>(),
@@ -20,11 +20,7 @@ const email = computed(() => props?.email ?? '')
 
 const backgroundColor = computed(() => {
   // in comments we need to generate user icon from email
-  if (email.value.length) {
-    return stringToColor(email.value)
-  }
-
-  return email.value ? stringToColor(email.value) : '#FFFFFF'
+  return displayName.value ? stringToColor(displayName.value) : email.value ? stringToColor(email.value) : '#FFFFFF'
 })
 
 const usernameInitials = computed(() => {
@@ -46,6 +42,7 @@ const usernameInitials = computed(() => {
   <div
     class="flex nc-user-avatar font-bold"
     :class="{
+      'min-h-full aspect-square': size === 'auto',
       'min-w-4 min-h-4': size === 'small',
       'min-w-6 min-h-6': size === 'medium',
       'w-8 h-8 !text-md': size === 'base',
@@ -62,6 +59,6 @@ const usernameInitials = computed(() => {
 
 <style lang="scss" scoped>
 .nc-user-avatar {
-  @apply rounded-full text-xs flex items-center justify-center  uppercase;
+  @apply rounded-full text-xs flex items-center justify-center uppercase;
 }
 </style>

From 1f481733fc66e894201c776dc1b47f6808fc0b2b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:40 +0000
Subject: [PATCH 02/10] fix: small changes

---
 packages/nc-gui/components/cell/ReadOnlyUser.vue | 2 +-
 packages/nc-gui/components/general/UserIcon.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/ReadOnlyUser.vue b/packages/nc-gui/components/cell/ReadOnlyUser.vue
index 0330bb97bf..bcb1212465 100644
--- a/packages/nc-gui/components/cell/ReadOnlyUser.vue
+++ b/packages/nc-gui/components/cell/ReadOnlyUser.vue
@@ -15,7 +15,7 @@ provide(ActiveCellInj, ref(true))
 </script>
 
 <template>
-  <div class="relative">
+  <div class="relative w-full">
     <LazyCellUser class="z-0" :model-value="modelValue" />
     <div class="w-full h-full z-1 absolute top-0 left-0"></div>
   </div>
diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
index 9e528810ff..283bc04f9b 100644
--- a/packages/nc-gui/components/general/UserIcon.vue
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -20,7 +20,7 @@ const email = computed(() => props?.email ?? '')
 
 const backgroundColor = computed(() => {
   // 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.trim()) : email.value ? stringToColor(email.value) : '#FFFFFF'
 })
 
 const usernameInitials = computed(() => {

From 2697a65f51af877229039991ebfdd2346b05ce7a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:41 +0000
Subject: [PATCH 03/10] fix(nc-gui): readonly fields editModeInj and
 activeCellInj provider value

---
 packages/nc-gui/components/cell/ReadOnlyDateTimePicker.vue | 4 ++--
 packages/nc-gui/components/cell/ReadOnlyUser.vue           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/cell/ReadOnlyDateTimePicker.vue b/packages/nc-gui/components/cell/ReadOnlyDateTimePicker.vue
index ab932dc039..dafa2b142f 100644
--- a/packages/nc-gui/components/cell/ReadOnlyDateTimePicker.vue
+++ b/packages/nc-gui/components/cell/ReadOnlyDateTimePicker.vue
@@ -9,9 +9,9 @@ defineProps<Props>()
 
 provide(ReadonlyInj, ref(true))
 
-provide(EditModeInj, ref(true))
+provide(EditModeInj, ref(false))
 
-provide(ActiveCellInj, ref(true))
+provide(ActiveCellInj, ref(false))
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/ReadOnlyUser.vue b/packages/nc-gui/components/cell/ReadOnlyUser.vue
index bcb1212465..900c475ae3 100644
--- a/packages/nc-gui/components/cell/ReadOnlyUser.vue
+++ b/packages/nc-gui/components/cell/ReadOnlyUser.vue
@@ -9,9 +9,9 @@ defineProps<Props>()
 
 provide(ReadonlyInj, ref(true))
 
-provide(EditModeInj, ref(true))
+provide(EditModeInj, ref(false))
 
-provide(ActiveCellInj, ref(true))
+provide(ActiveCellInj, ref(false))
 </script>
 
 <template>

From 41547795d4cfd74633d073a627aed6254b96ca12 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:41 +0000
Subject: [PATCH 04/10] fix(nc-gui): user badge font size

---
 packages/nc-gui/components/cell/User.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 33390a83ef..e8da349b51 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -297,6 +297,7 @@ const filterOption = (input: string, option: any) => {
                 size="auto"
                 :name="!selectedOpt.label?.includes('@') ? selectedOpt.label.trim() : ''"
                 :email="selectedOpt.label"
+                class="!text-[0.65rem]"
               />
             </div>
             <NcTooltip class="truncate max-w-full" show-on-truncate-only>
@@ -361,7 +362,12 @@ const filterOption = (input: string, option: any) => {
               :class="{ 'text-sm': isKanban }"
             >
               <div>
-                <GeneralUserIcon size="auto" :name="op.display_name?.trim() ? op.display_name?.trim() : ''" :email="op.email" />
+                <GeneralUserIcon
+                  size="auto"
+                  :name="op.display_name?.trim() ? op.display_name?.trim() : ''"
+                  :email="op.email"
+                  class="!text-[0.65rem]"
+                />
               </div>
               <NcTooltip class="truncate max-w-full" show-on-truncate-only>
                 <template #title>
@@ -408,7 +414,12 @@ const filterOption = (input: string, option: any) => {
             :class="{ 'text-sm': isKanban }"
           >
             <div>
-              <GeneralUserIcon size="auto" :name="!label?.includes('@') ? label.trim() : ''" :email="label" />
+              <GeneralUserIcon
+                size="auto"
+                :name="!label?.includes('@') ? label.trim() : ''"
+                :email="label"
+                class="!text-[0.65rem]"
+              />
             </div>
             {{ label }}
           </span>

From 49713ef60d18b632a72816010154c1f0303ab776 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:41 +0000
Subject: [PATCH 05/10] fix(test): user field verify options issue

---
 .../pages/Dashboard/Grid/Column/UserOptionColumn.ts           | 2 +-
 .../playwright/pages/Dashboard/common/Cell/UserOptionCell.ts  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts b/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts
index a123823f3e..40cf66da86 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts
@@ -111,7 +111,7 @@ export class UserOptionColumnPageObject extends BasePage {
 
     let counter = 0;
     for (const option of options) {
-      await expect(defaultValueSelector.locator(`.nc-selected-option`).nth(counter)).toHaveText(option);
+      await expect(defaultValueSelector.locator(`.nc-selected-option`).nth(counter)).toContainText(option);
       counter++;
     }
 
diff --git a/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts b/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts
index 56e84ab968..5899ed8029 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts
@@ -134,7 +134,7 @@ export class UserOptionCellPageObject extends BasePage {
 
     let counter = 0;
     for (const option of options) {
-      await expect(this.rootPage.locator(`div.ant-select-item-option`).nth(counter)).toHaveText(option);
+      await expect(this.rootPage.locator(`div.ant-select-item-option`).nth(counter)).toContainText(option);
       counter++;
     }
     await this.rootPage.keyboard.press('Escape');
@@ -155,7 +155,7 @@ export class UserOptionCellPageObject extends BasePage {
 
     let counter = 0;
     for (const option of options) {
-      await expect(selectCell.locator(`.nc-selected-option`).nth(counter)).toHaveText(option);
+      await expect(selectCell.locator(`.nc-selected-option`).nth(counter)).toContainText(option);
       counter++;
     }
   }

From 1279292d32b6b5a648474e58e069dc39ccb7430c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:41 +0000
Subject: [PATCH 06/10] fix(test): pw user field test fail issue

---
 tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts b/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts
index 5899ed8029..885e67a971 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts
@@ -101,8 +101,7 @@ export class UserOptionCellPageObject extends BasePage {
 
     const locator = this.cell.get({ index, columnHeader }).locator('.ant-tag');
     await locator.waitFor({ state: 'visible' });
-    const text = await locator.allInnerTexts();
-    return expect(text).toContain(option);
+    return expect(locator).toContainText(option);
   }
 
   async verifyNoOptionsSelected({ index, columnHeader }: { index: number; columnHeader: string }) {

From b24d84c60e395d54d4021fbffb9139265825e7e2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:41 +0000
Subject: [PATCH 07/10] fix(nc-gui): userIcon small changes

---
 packages/nc-gui/components/general/UserIcon.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
index 283bc04f9b..8685ab93c8 100644
--- a/packages/nc-gui/components/general/UserIcon.vue
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -14,13 +14,13 @@ const props = withDefaults(
 
 const size = computed(() => props.size || 'medium')
 
-const displayName = computed(() => props.name ?? '')
+const displayName = computed(() => props.name?.trim() ?? '')
 
 const email = computed(() => props?.email ?? '')
 
 const backgroundColor = computed(() => {
   // in comments we need to generate user icon from email
-  return displayName.value ? stringToColor(displayName.value.trim()) : email.value ? stringToColor(email.value) : '#FFFFFF'
+  return displayName.value ? stringToColor(displayName.value) : email.value ? stringToColor(email.value) : '#FFFFFF'
 })
 
 const usernameInitials = computed(() => {
@@ -42,7 +42,7 @@ const usernameInitials = computed(() => {
   <div
     class="flex nc-user-avatar font-bold"
     :class="{
-      'min-h-full aspect-square': size === 'auto',
+      'h-full min-h-5 aspect-square': size === 'auto',
       'min-w-4 min-h-4': size === 'small',
       'min-w-6 min-h-6': size === 'medium',
       'w-8 h-8 !text-md': size === 'base',

From c00a76a1cc1f40dc533406761d06c263202a9da9 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:41 +0000
Subject: [PATCH 08/10] fix(nc-gui): PR review changes #2131

---
 packages/nc-gui/components/general/UserIcon.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
index 8685ab93c8..ae50983cf7 100644
--- a/packages/nc-gui/components/general/UserIcon.vue
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -8,15 +8,15 @@ const props = withDefaults(
     email?: string
   }>(),
   {
+    size: 'medium',
+    name: '',
     email: '',
   },
 )
 
-const size = computed(() => props.size || 'medium')
+const { size, email } = toRefs(props)
 
-const displayName = computed(() => props.name?.trim() ?? '')
-
-const email = computed(() => props?.email ?? '')
+const displayName = computed(() => props.name.trim())
 
 const backgroundColor = computed(() => {
   // in comments we need to generate user icon from email

From 2aae0d213c85f7e1c43e93f9907aa9c3493958df Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:41 +0000
Subject: [PATCH 09/10] fix(nc-gui): test fail issue & row comments log user
 name udpates

---
 .../nc-gui/components/general/UserIcon.vue    |  2 +-
 .../smartsheet/expanded-form/Comments.vue     | 22 ++++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
index ae50983cf7..61d9232e73 100644
--- a/packages/nc-gui/components/general/UserIcon.vue
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -16,7 +16,7 @@ const props = withDefaults(
 
 const { size, email } = toRefs(props)
 
-const displayName = computed(() => props.name.trim())
+const displayName = computed(() => props.name?.trim() || '')
 
 const backgroundColor = computed(() => {
   // in comments we need to generate user icon from email
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 880a2ea70d..9988db87e8 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -215,12 +215,24 @@ const onClickAudit = () => {
               <div class="flex flex-col p-4 gap-3">
                 <div class="flex justify-between">
                   <div class="flex items-center gap-2">
-                    <GeneralUserIcon size="base" :name="log.display_name ?? log.user" :email="log.user" />
+                    <GeneralUserIcon size="base" :name="log.display_name" :email="log.user" />
 
                     <div class="flex flex-col">
-                      <span class="truncate font-bold max-w-42">
-                        {{ log.display_name ?? log.user.split('@')[0] ?? 'Shared source' }}
-                      </span>
+                      <NcTooltip class="truncate max-w-42" show-on-truncate-only>
+                        <template #title>
+                          {{ log.display_name?.trim() || log.user || 'Shared source' }}
+                        </template>
+                        <span
+                          class="text-ellipsis overflow-hidden font-bold"
+                          :style="{
+                            wordBreak: 'keep-all',
+                            whiteSpace: 'nowrap',
+                            display: 'inline',
+                          }"
+                        >
+                          {{ log.display_name?.trim() || log.user || 'Shared source' }}
+                        </span>
+                      </NcTooltip>
                       <div v-if="log.id !== editLog?.id" class="text-xs font-medium text-gray-500">
                         {{ log.created_at !== log.updated_at ? `Edited ${timeAgo(log.updated_at)}` : timeAgo(log.created_at) }}
                       </div>
@@ -298,7 +310,7 @@ const onClickAudit = () => {
           <div class="flex flex-col p-4 gap-3">
             <div class="flex justify-between">
               <div class="flex items-center gap-2">
-                <GeneralUserIcon size="base" :email="log.user" />
+                <GeneralUserIcon size="base" :email="log.user" :name="log.display_name" />
 
                 <div class="flex flex-col">
                   <NcTooltip class="truncate max-w-50" show-on-truncate-only>

From 4adc57b9caa2dbeb76289693387988d9881d4626 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:41 +0000
Subject: [PATCH 10/10] fix(nc-gui): lint error

---
 packages/nc-gui/components/cell/RichText.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 413e01302a..d5680bbf68 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { RowHeightInj, IsExpandedFormOpenInj } from '#imports'
+import { IsExpandedFormOpenInj, RowHeightInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null