From 3893305821e9639914df65ebf0fa7a55e8f448cd Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 30 Oct 2023 05:26:27 +0000
Subject: [PATCH] fix: Added link for table section in bread crumb

---
 .../smartsheet/toolbar/ViewInfo.vue           | 50 +++++++++++--------
 packages/nc-gui/store/tables.ts               | 21 ++++++++
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index cba6d82fc4..ba72727a89 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -6,6 +6,7 @@ const { openedViewsTab, activeView } = storeToRefs(useViewsStore())
 const { base, isSharedBase } = storeToRefs(useBase())
 
 const { activeTable } = storeToRefs(useTablesStore())
+const { tableUrl } = useTablesStore()
 
 const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
 </script>
@@ -33,7 +34,7 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
         <div class="flex flex-row items-center gap-x-1.5">
           <GeneralProjectIcon
             :meta="{ type: base?.type }"
-            class="!grayscale"
+            class="!grayscale min-w-4"
             :style="{
               filter: 'grayscale(100%) brightness(115%)',
             }"
@@ -64,32 +65,39 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
           />
         </template>
       </LazyGeneralEmojiPicker>
-      <NcTooltip
-        class="truncate nc-active-table-title"
+      <div
+        v-if="activeTable"
         :class="{
           'max-w-1/2': isMobileMode || activeView?.is_default,
           'max-w-20/100': !isSharedBase && !isMobileMode && !activeView?.is_default,
           'max-w-none': isSharedBase && !isMobileMode,
         }"
       >
-        <template #title>
-          {{ activeTable?.title }}
-        </template>
-        <span
-          class="text-ellipsis overflow-hidden text-gray-500 xs:ml-2"
-          :class="{
-            'text-gray-500': !isMobileMode,
-            'text-gray-700 font-medium': isMobileMode || activeView?.is_default,
-          }"
-          :style="{
-            wordBreak: 'keep-all',
-            whiteSpace: 'nowrap',
-            display: 'inline',
-          }"
-        >
-          {{ activeTable?.title }}
-        </span>
-      </NcTooltip>
+        <NcTooltip class="truncate nc-active-table-title max-w-full">
+          <template #title>
+            {{ activeTable?.title }}
+          </template>
+          <span
+            class="text-ellipsis overflow-hidden text-gray-500 xs:ml-2"
+            :class="{
+              'text-gray-500': !isMobileMode,
+              'text-gray-700 font-medium': isMobileMode || activeView?.is_default,
+            }"
+            :style="{
+              wordBreak: 'keep-all',
+              whiteSpace: 'nowrap',
+              display: 'inline',
+            }"
+          >
+            <NuxtLink
+              class="!hover:(text-black underline-gray-600) !text-inherit !underline-transparent"
+              :to="tableUrl({ table: activeTable, completeUrl: true })"
+            >
+              {{ activeTable?.title }}
+            </NuxtLink>
+          </span>
+        </NcTooltip>
+      </div>
     </template>
 
     <div v-if="!isMobileMode" class="px-1 text-gray-500">/</div>
diff --git a/packages/nc-gui/store/tables.ts b/packages/nc-gui/store/tables.ts
index 23765e6a24..81b2501487 100644
--- a/packages/nc-gui/store/tables.ts
+++ b/packages/nc-gui/store/tables.ts
@@ -213,6 +213,26 @@ export const useTablesStore = defineStore('tablesStore', () => {
     }
   }
 
+  const tableUrl = ({ table, completeUrl }: { table: TableType; completeUrl: boolean }) => {
+    const base = basesStore.bases.get(table.base_id!)
+    if (!base) return
+
+    const nuxtPageName = 'index-typeOrId-baseId-index-index-viewId-viewTitle'
+
+    const url = router.resolve({
+      name: nuxtPageName,
+      params: {
+        typeOrId: workspaceStore.activeWorkspaceId,
+        baseId: base.id,
+        viewId: table.id,
+      },
+    })
+
+    if (completeUrl) return `${window.location.origin}${url.href}`
+
+    return url.href
+  }
+
   return {
     baseTables,
     loadProjectTables,
@@ -223,6 +243,7 @@ export const useTablesStore = defineStore('tablesStore', () => {
     updateTable,
     activeTableId,
     navigateToTable,
+    tableUrl,
   }
 })