From 38239a8dd312aabe0944169ce03e842624677acb Mon Sep 17 00:00:00 2001
From: Mohammed Musharaf <mohammedmusharaf@Mohammeds-MacBook-Pro.local>
Date: Tue, 5 Dec 2023 19:08:56 +0530
Subject: [PATCH] fix : added showOnTruncateOnly prop in tooltip component

---
 .../components/dashboard/TreeView/ProjectNode.vue     |  1 +
 .../components/dashboard/TreeView/TableNode.vue       |  5 ++++-
 .../components/dashboard/TreeView/ViewsNode.vue       |  2 +-
 .../nc-gui/components/dashboard/settings/UIAcl.vue    |  6 +++---
 packages/nc-gui/components/nc/Tooltip.vue             | 11 +++++++++++
 packages/nc-gui/components/project/View.vue           |  2 +-
 .../column/LinkedToAnotherRecordOptions.vue           |  2 +-
 .../nc-gui/components/smartsheet/details/Fields.vue   |  2 ++
 packages/nc-gui/components/smartsheet/header/Cell.vue |  1 +
 .../components/smartsheet/header/VirtualCell.vue      |  2 +-
 .../components/smartsheet/toolbar/CreateSort.vue      |  6 +++---
 .../toolbar/FieldListAutoCompleteDropdown.vue         |  5 +++--
 .../components/smartsheet/toolbar/FieldsMenu.vue      |  8 ++++----
 .../smartsheet/toolbar/OpenedViewAction.vue           |  2 +-
 .../components/smartsheet/toolbar/SearchData.vue      |  4 ++--
 tests/playwright/pages/Dashboard/Grid/index.ts        |  4 ++--
 16 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index d2540c4fb9..6819a82b1f 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -429,6 +429,7 @@ const projectDelete = () => {
             class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none"
             :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
             :class="{ 'text-black font-semibold': activeProjectId === base.id && baseViewOpen }"
+            :showOnTruncateOnly="true"
           >
             <template #title>{{ base.title }}</template>
             <span @click="onProjectClick(base)">
diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 922b13b0c1..0150818209 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -231,7 +231,10 @@ const isTableOpened = computed(() => {
           </div>
         </div>
       </div>
-      <NcTooltip class="nc-tbl-title nc-sidebar-node-title text-ellipsis w-full overflow-hidden select-none">
+      <NcTooltip
+        class="nc-tbl-title nc-sidebar-node-title text-ellipsis w-full overflow-hidden select-none"
+        :showOnTruncateOnly="true"
+      >
         <template #title>{{ table.title }}</template>
         <span
           :class="{
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index 72d16a0c0e..426a98d5e0 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -232,7 +232,7 @@ watch(isDropdownOpen, async () => {
         @blur="onRename"
         @keydown.stop="onKeyDown($event)"
       />
-      <NcTooltip v-else class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full">
+      <NcTooltip v-else class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full" :showOnTruncateOnly="true">
         <template #title> {{ vModel.alias || vModel.title }}</template>
         <div
           data-testid="sidebar-view-title"
diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index d929898a31..2cfdd10860 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -147,7 +147,7 @@ const toggleSelectAll = (role: Role) => {
 <template>
   <div class="flex flex-row w-full items-center justify-center">
     <div class="flex flex-col w-[900px]">
-      <NcTooltip class="mb-4 first-letter:capital font-bold max-w-100 truncate">
+      <NcTooltip class="mb-4 first-letter:capital font-bold max-w-100 truncate" :showOnTruncateOnly="true">
         <template #title>{{ base.title }}</template>
         <span> UI ACL : {{ base.title }} </span>
       </NcTooltip>
@@ -211,7 +211,7 @@ const toggleSelectAll = (role: Role) => {
                 <div class="min-w-5 flex items-center justify-center">
                   <GeneralTableIcon :meta="{ meta: record.table_meta, type: record.ptype }" class="text-gray-500" />
                 </div>
-                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate">
+                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate" :showOnTruncateOnly="true">
                   <template #title>{{ record._ptn }}</template>
                   <span>{{ record._ptn }}</span>
                 </NcTooltip>
@@ -223,7 +223,7 @@ const toggleSelectAll = (role: Role) => {
                 <div class="min-w-5 flex items-center justify-center">
                   <GeneralViewIcon :meta="record" class="text-gray-500"></GeneralViewIcon>
                 </div>
-                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate">
+                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate" :showOnTruncateOnly="true">
                   <template #title>{{ record.title }}</template>
                   <span>{{ record.title }}</span>
                 </NcTooltip>
diff --git a/packages/nc-gui/components/nc/Tooltip.vue b/packages/nc-gui/components/nc/Tooltip.vue
index 97b159e4a9..8d0595f8c3 100644
--- a/packages/nc-gui/components/nc/Tooltip.vue
+++ b/packages/nc-gui/components/nc/Tooltip.vue
@@ -11,6 +11,7 @@ interface Props {
   // force disable tooltip
   disabled?: boolean
   placement?: TooltipPlacement | undefined
+  showOnTruncateOnly?: boolean
   hideOnClick?: boolean
   overlayClassName?: string
 }
@@ -20,6 +21,7 @@ const props = defineProps<Props>()
 const modifierKey = computed(() => props.modifierKey)
 const tooltipStyle = computed(() => props.tooltipStyle)
 const disabled = computed(() => props.disabled)
+const showOnTruncateOnly = computed(() => props?.showOnTruncateOnly)
 const hideOnClick = computed(() => props.hideOnClick)
 const placement = computed(() => props.placement ?? 'top')
 
@@ -65,6 +67,15 @@ onKeyStroke(
 )
 
 watch([isHovering, () => modifierKey.value, () => disabled.value], ([hovering, key, isDisabled]) => {
+  if (showOnTruncateOnly?.value) {
+    const targetElement = el?.value
+    const isElementTruncated = targetElement?.scrollWidth > targetElement?.clientWidth
+    if (!isElementTruncated) {
+      showTooltip.value = false
+      return
+    }
+  }
+
   if (!hovering || isDisabled) {
     showTooltip.value = false
     return
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 1df117de5b..c7e92e3831 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -75,7 +75,7 @@ watch(
         <GeneralOpenLeftSidebarBtn />
         <div class="flex flex-row items-center h-full gap-x-2.5">
           <GeneralProjectIcon :type="openedProject?.type" />
-          <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150">
+          <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150" :showOnTruncateOnly="true">
             <template #title> {{ openedProject?.title }}</template>
             <span class="truncate">
               {{ openedProject?.title }}
diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index a538333478..0d05a30559 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@@ -82,7 +82,7 @@ const isLinks = computed(() => vModel.value.uidt === UITypes.Links)
               <div class="min-w-5 flex items-center justify-center">
                 <GeneralTableIcon :meta="table" class="text-gray-500" />
               </div>
-              <NcTooltip class="flex-1 truncate">
+              <NcTooltip class="flex-1 truncate" :showOnTruncateOnly="true">
                 <template #title>{{ table.title }}</template>
                 <span>{{ table.title }}</span>
               </NcTooltip>
diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 1f47d296eb..524d986ff1 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -819,6 +819,7 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(field, activeField),
                       }"
                       class="truncate flex-1"
+                      :showOnTruncateOnly="true"
                     >
                       <template #title> {{ fieldState(field)?.title || field.title }} </template>
                       <span>
@@ -978,6 +979,7 @@ const onFieldOptionUpdate = () => {
                       :class="{
                         'text-brand-500': compareCols(displayColumn, activeField),
                       }"
+                      :showOnTruncateOnly="true"
                     >
                       <template #title> {{ fieldState(displayColumn)?.title || displayColumn.title }} </template>
                       <span>
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index f026dff570..9da6100d81 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -99,6 +99,7 @@ const onClick = (e: Event) => {
       }"
       class="name pl-1"
       placement="bottom"
+      :showOnTruncateOnly="true"
     >
       <template #title> {{ column.title }} </template>
 
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index 543c255f5d..8f40e1017b 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@@ -154,7 +154,7 @@ const openDropDown = (e: Event) => {
   >
     <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
 
-    <NcTooltip placement="bottom" class="truncate name pl-1">
+    <NcTooltip placement="bottom" class="truncate name pl-1" :showOnTruncateOnly="true">
       <template #title>
         {{ tooltipMsg }}
       </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
index 88d4ca73ad..1db4387ec8 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
@@ -104,11 +104,11 @@ const onArrowUp = () => {
         @click="onClick(option)"
       >
         <SmartsheetHeaderIcon :column="option" />
-        <NcTooltip class="truncate">
+        <NcTooltip class="truncate" :showOnTruncateOnly="true">
           <template #title> {{ option.title }}</template>
-          <span>
+          <template #default>
             {{ option.title }}
-          </span>
+          </template>
         </NcTooltip>
       </div>
     </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index b0e50fe97f..9112e89da2 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -85,11 +85,12 @@ if (!localValue.value && allowEmpty !== true) {
         <NcTooltip
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
           class="max-w-[15rem] truncate select-none"
+          :showOnTruncateOnly="true"
         >
           <template #title> {{ option.label }}</template>
-          <span>
+          <template #default>
             {{ option.label }}
-          </span>
+          </template>
         </NcTooltip>
       </div>
     </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 18a5c1f610..01b318bd0b 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -380,11 +380,11 @@ useMenuCloseOnEsc(open)
                     "
                   >
                     <component :is="getIcon(metaColumnById[field.fk_column_id])" />
-                    <NcTooltip :disabled="field.title.length < 30" class="flex-1 px-1 truncate">
+                    <NcTooltip :showOnTruncateOnly="true" class="flex-1 px-1 truncate">
                       <template #title>
                         {{ field.title }}
                       </template>
-                      <span>{{ field.title }}</span>
+                      <template #default>{{ field.title }}</template>
                     </NcTooltip>
 
                     <NcSwitch v-e="['a:fields:show-hide']" :checked="field.show" :disabled="field.isViewEssentialField" />
@@ -406,9 +406,9 @@ useMenuCloseOnEsc(open)
                   @click.stop
                 >
                   <component :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])" />
-                  <NcTooltip :disabled="filteredFieldList?.[0]?.title?.length < 30" class="px-1 flex-1 truncate">
+                  <NcTooltip :showOnTruncateOnly="true" class="px-1 flex-1 truncate">
                     <template #title>{{ filteredFieldList[0].title }}</template>
-                    <span>{{ filteredFieldList[0].title }}</span>
+                    <template #default>{{ filteredFieldList[0].title }}</template>
                   </NcTooltip>
 
                   <NcSwitch v-e="['a:fields:show-hide']" :checked="true" :disabled="true" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index c4f8b73535..8a08f48e84 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -182,7 +182,7 @@ function openDeleteDialog() {
         'text-gray-800 font-medium': !activeView?.is_default,
       }"
     >
-      <NcTooltip class="truncate xs:pl-1.25 flex-1 text-inherit">
+      <NcTooltip class="truncate xs:pl-1.25 flex-1 text-inherit" :showOnTruncateOnly="true">
         <template #title>{{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }} </template>
         <span
           :class="{
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index ed181d7d03..5665c67f47 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -114,9 +114,9 @@ watch(columns, () => {
         <a-select-option v-for="op of columns" :key="op.value" v-e="['c:search:field:select']" :value="op.value">
           <div class="text-[0.75rem] flex items-center -ml-1 gap-2">
             <SmartsheetHeaderIcon class="text-sm" :column="op.column" />
-            <NcTooltip class="truncate" placement="top">
+            <NcTooltip class="truncate" placement="top" :showOnTruncateOnly="true">
               <template #title>{{ op.label }}</template>
-              <span>{{ op.label }}</span>
+              <template #default>{{ op.label }}</template>
             </NcTooltip>
           </div>
         </a-select-option>
diff --git a/tests/playwright/pages/Dashboard/Grid/index.ts b/tests/playwright/pages/Dashboard/Grid/index.ts
index e377f2a75e..2d58c229c1 100644
--- a/tests/playwright/pages/Dashboard/Grid/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/index.ts
@@ -129,7 +129,7 @@ export class GridPage extends BasePage {
     await this._fillRow({ index, columnHeader, value: rowValue });
 
     const clickOnColumnHeaderToSave = () =>
-      this.get().locator(`[data-title="${columnHeader}"]`).locator(`div[data-test-id="${columnHeader}"]`).click();
+      this.get().locator(`[data-title="${columnHeader}"]`).locator(`span[data-test-id="${columnHeader}"]`).click();
 
     if (networkValidation) {
       await this.waitForResponse({
@@ -164,7 +164,7 @@ export class GridPage extends BasePage {
     await this._fillRow({ index, columnHeader, value });
 
     const clickOnColumnHeaderToSave = () =>
-      this.get().locator(`[data-title="${columnHeader}"]`).locator(`div[data-test-id="${columnHeader}"]`).click();
+      this.get().locator(`[data-title="${columnHeader}"]`).locator(`span[data-test-id="${columnHeader}"]`).click();
 
     if (networkValidation) {
       await this.waitForResponse({