From 5e2d9aa879aff2bc371ed3f5da96631cc3217bd0 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 18:40:52 +0530
Subject: [PATCH] fix :  fixed tooltip for table name iin sidebar

---
 .../dashboard/TreeView/TableNode.vue          | 281 +++++++++---------
 1 file changed, 138 insertions(+), 143 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 179da137fe..922b13b0c1 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -149,96 +149,91 @@ const isTableOpened = computed(() => {
     :class="[`nc-base-tree-tbl nc-base-tree-tbl-${table.title}`]"
     :data-active="openedTableId === table.id"
   >
-    <NcTooltip
-      class="nc-tree-item-inner nc-sidebar-node pl-11 pr-0.75 mb-0.25 rounded-md h-7.1 w-full group cursor-pointer hover:bg-gray-200"
+    <div
+      v-e="['a:table:open']"
+      class="table-context flex items-center gap-1 h-full nc-tree-item-inner nc-sidebar-node pl-11 pr-0.75 mb-0.25 rounded-md h-7.1 w-full group cursor-pointer hover:bg-gray-200"
       :class="{
         'hover:bg-gray-200': openedTableId !== table.id,
         'pl-12 xs:(pl-14)': sourceIndex !== 0,
         'pl-6.5': sourceIndex === 0,
         '!bg-primary-selected': isTableOpened,
       }"
-      modifier-key="Alt"
+      :data-testid="`nc-tbl-side-node-${table.title}`"
+      @contextmenu="setMenuContext('table', table)"
+      @click="onOpenTable"
     >
-      <template #title>{{ table.table_name }}</template>
-      <div
-        v-e="['a:table:open']"
-        class="table-context flex items-center gap-1 h-full"
-        :data-testid="`nc-tbl-side-node-${table.title}`"
-        @contextmenu="setMenuContext('table', table)"
-        @click="onOpenTable"
-      >
-        <div class="flex flex-row h-full items-center">
-          <NcButton
-            v-e="['c:table:toggle-expand']"
-            type="text"
-            size="xxsmall"
-            class="nc-sidebar-node-btn nc-sidebar-expand"
-            @click.stop="onExpand"
+      <div class="flex flex-row h-full items-center">
+        <NcButton
+          v-e="['c:table:toggle-expand']"
+          type="text"
+          size="xxsmall"
+          class="nc-sidebar-node-btn nc-sidebar-expand"
+          @click.stop="onExpand"
+        >
+          <GeneralLoader
+            v-if="table.isViewsLoading"
+            class="flex w-4 h-4 !text-gray-600 !mt-0.75"
+            :class="{
+              '!visible': !isExpanded,
+            }"
+          />
+          <GeneralIcon
+            v-else
+            icon="triangleFill"
+            class="nc-sidebar-source-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"
+            :class="{ '!rotate-180': isExpanded }"
+          />
+        </NcButton>
+
+        <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+          <div
+            v-e="['c:table:emoji-picker']"
+            class="flex items-center nc-table-icon"
+            :class="{
+              'pointer-events-none': !canUserEditEmote,
+            }"
+            @click.stop
           >
-            <GeneralLoader
-              v-if="table.isViewsLoading"
-              class="flex w-4 h-4 !text-gray-600 !mt-0.75"
-              :class="{
-                '!visible': !isExpanded,
-              }"
-            />
-            <GeneralIcon
-              v-else
-              icon="triangleFill"
-              class="nc-sidebar-source-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"
-              :class="{ '!rotate-180': isExpanded }"
-            />
-          </NcButton>
-
-          <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-            <div
-              v-e="['c:table:emoji-picker']"
-              class="flex items-center nc-table-icon"
-              :class="{
-                'pointer-events-none': !canUserEditEmote,
-              }"
-              @click.stop
+            <LazyGeneralEmojiPicker
+              :key="table.meta?.icon"
+              :emoji="table.meta?.icon"
+              size="small"
+              :readonly="!canUserEditEmote || isMobileMode"
+              @emoji-selected="setIcon($event, table)"
             >
-              <LazyGeneralEmojiPicker
-                :key="table.meta?.icon"
-                :emoji="table.meta?.icon"
-                size="small"
-                :readonly="!canUserEditEmote || isMobileMode"
-                @emoji-selected="setIcon($event, table)"
-              >
-                <template #default>
-                  <NcTooltip class="flex" placement="topLeft" hide-on-click :disabled="!canUserEditEmote">
-                    <template #title>
-                      {{ $t('general.changeIcon') }}
-                    </template>
-
-                    <component
-                      :is="iconMap.table"
-                      v-if="table.type === 'table'"
-                      class="flex w-5 !text-gray-500 text-sm"
-                      :class="{
-                        'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: baseRole }),
-                        '!text-black': openedTableId === table.id,
-                      }"
-                    />
-
-                    <MdiEye
-                      v-else
-                      class="flex w-5 !text-gray-500 text-sm"
-                      :class="{
-                        'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: baseRole }),
-                        '!text-black': openedTableId === table.id,
-                      }"
-                    />
-                  </NcTooltip>
-                </template>
-              </LazyGeneralEmojiPicker>
-            </div>
+              <template #default>
+                <NcTooltip class="flex" placement="topLeft" hide-on-click :disabled="!canUserEditEmote">
+                  <template #title>
+                    {{ $t('general.changeIcon') }}
+                  </template>
+
+                  <component
+                    :is="iconMap.table"
+                    v-if="table.type === 'table'"
+                    class="flex w-5 !text-gray-500 text-sm"
+                    :class="{
+                      'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: baseRole }),
+                      '!text-black': openedTableId === table.id,
+                    }"
+                  />
+
+                  <MdiEye
+                    v-else
+                    class="flex w-5 !text-gray-500 text-sm"
+                    :class="{
+                      'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: baseRole }),
+                      '!text-black': openedTableId === table.id,
+                    }"
+                  />
+                </NcTooltip>
+              </template>
+            </LazyGeneralEmojiPicker>
           </div>
         </div>
-
+      </div>
+      <NcTooltip class="nc-tbl-title nc-sidebar-node-title text-ellipsis w-full overflow-hidden select-none">
+        <template #title>{{ table.title }}</template>
         <span
-          class="nc-tbl-title nc-sidebar-node-title text-ellipsis overflow-hidden select-none"
           :class="{
             'text-black !font-medium': isTableOpened,
           }"
@@ -247,73 +242,73 @@ const isTableOpened = computed(() => {
         >
           {{ table.title }}
         </span>
-        <div class="flex flex-grow h-full"></div>
-        <div class="flex flex-row items-center">
-          <div
-            v-if="
-              !isSharedBase &&
-              (isUIAllowed('tableRename', { roles: baseRole }) || isUIAllowed('tableDelete', { roles: baseRole }))
-            "
-            v-e="['c:table:option']"
-          >
-            <NcDropdown :trigger="['click']" class="nc-sidebar-node-btn" @click.stop>
-              <MdiDotsHorizontal
-                data-testid="nc-sidebar-table-context-menu"
-                class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
-              />
-
-              <template #overlay>
-                <NcMenu>
-                  <NcMenuItem
-                    v-if="isUIAllowed('tableRename', { roles: baseRole })"
-                    :data-testid="`sidebar-table-rename-${table.title}`"
-                    @click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
-                  >
-                    <div v-e="['c:table:rename']" class="flex gap-2 items-center">
-                      <GeneralIcon icon="edit" class="text-gray-700" />
-                      {{ $t('general.rename') }}
-                    </div>
-                  </NcMenuItem>
-
-                  <NcMenuItem
-                    v-if="
-                      isUIAllowed('tableDuplicate') &&
-                      base.sources?.[sourceIndex] &&
-                      (base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local)
-                    "
-                    :data-testid="`sidebar-table-duplicate-${table.title}`"
-                    @click="duplicateTable(table)"
-                  >
-                    <div v-e="['c:table:duplicate']" class="flex gap-2 items-center">
-                      <GeneralIcon icon="duplicate" class="text-gray-700" />
-                      {{ $t('general.duplicate') }}
-                    </div>
-                  </NcMenuItem>
-
-                  <NcMenuItem
-                    v-if="isUIAllowed('tableDelete', { roles: baseRole })"
-                    :data-testid="`sidebar-table-delete-${table.title}`"
-                    class="!text-red-500 !hover:bg-red-50"
-                    @click="isTableDeleteDialogVisible = true"
-                  >
-                    <div v-e="['c:table:delete']" class="flex gap-2 items-center">
-                      <GeneralIcon icon="delete" />
-                      {{ $t('general.delete') }}
-                    </div>
-                  </NcMenuItem>
-                </NcMenu>
-              </template>
-            </NcDropdown>
-          </div>
+      </NcTooltip>
+      <div class="flex flex-grow h-full"></div>
+      <div class="flex flex-row items-center">
+        <div
+          v-if="
+            !isSharedBase && (isUIAllowed('tableRename', { roles: baseRole }) || isUIAllowed('tableDelete', { roles: baseRole }))
+          "
+          v-e="['c:table:option']"
+        >
+          <NcDropdown :trigger="['click']" class="nc-sidebar-node-btn" @click.stop>
+            <MdiDotsHorizontal
+              data-testid="nc-sidebar-table-context-menu"
+              class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
+            />
+
+            <template #overlay>
+              <NcMenu>
+                <NcMenuItem
+                  v-if="isUIAllowed('tableRename', { roles: baseRole })"
+                  :data-testid="`sidebar-table-rename-${table.title}`"
+                  @click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
+                >
+                  <div v-e="['c:table:rename']" class="flex gap-2 items-center">
+                    <GeneralIcon icon="edit" class="text-gray-700" />
+                    {{ $t('general.rename') }}
+                  </div>
+                </NcMenuItem>
+
+                <NcMenuItem
+                  v-if="
+                    isUIAllowed('tableDuplicate') &&
+                    base.sources?.[sourceIndex] &&
+                    (base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local)
+                  "
+                  :data-testid="`sidebar-table-duplicate-${table.title}`"
+                  @click="duplicateTable(table)"
+                >
+                  <div v-e="['c:table:duplicate']" class="flex gap-2 items-center">
+                    <GeneralIcon icon="duplicate" class="text-gray-700" />
+                    {{ $t('general.duplicate') }}
+                  </div>
+                </NcMenuItem>
+
+                <NcMenuItem
+                  v-if="isUIAllowed('tableDelete', { roles: baseRole })"
+                  :data-testid="`sidebar-table-delete-${table.title}`"
+                  class="!text-red-500 !hover:bg-red-50"
+                  @click="isTableDeleteDialogVisible = true"
+                >
+                  <div v-e="['c:table:delete']" class="flex gap-2 items-center">
+                    <GeneralIcon icon="delete" />
+                    {{ $t('general.delete') }}
+                  </div>
+                </NcMenuItem>
+              </NcMenu>
+            </template>
+          </NcDropdown>
         </div>
       </div>
-      <DlgTableDelete
-        v-if="table.id && base?.id"
-        v-model:visible="isTableDeleteDialogVisible"
-        :table-id="table.id"
-        :base-id="base.id"
-      />
-    </NcTooltip>
+    </div>
+    <DlgTableDelete
+      v-if="table.id && base?.id"
+      v-model:visible="isTableDeleteDialogVisible"
+      :table-id="table.id"
+      :base-id="base.id"
+    />
+
     <DashboardTreeViewViewsList v-if="isExpanded" :table-id="table.id" :base-id="base.id" />
   </div>
 </template>