Merge pull request #6827 from nocodb/nc-fix/breadcrumb-linked

Nc fix/breadcrumb linked

packages/nc-gui/assets/style.scss

@@ -2,6 +2,10 @@
 @import '@vue-flow/core/dist/style.css';
 @import '@vue-flow/core/dist/theme-default.css';
 
+html {
+  overflow: hidden;
+}
+
 body {
   line-height: 1.3125rem;
 }
@@ -160,10 +164,6 @@ main {
   }
 }
 
-html {
-  overflow-y: auto !important;
-}
-
 main {
   @apply flex-0 w-full relative scrollbar-thin-dull;
   overflow-x: hidden;

packages/nc-gui/components/dashboard/Sidebar/TopSection.vue

@@ -75,7 +75,7 @@ const navigateToSettings = () => {
         <div class="gap-x-2 flex flex-row w-full items-center !font-normal">
           <GeneralIcon icon="plus" />
 
-          <div class="flex">{{ $t('title.newProj') }}</div>
+          <div class="flex">{{ $t('title.createBase') }}</div>
         </div>
       </WorkspaceCreateProjectBtn>
     </div>

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

@@ -73,11 +73,13 @@ watch(
     >
       <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
+        <div class="flex flex-row items-center h-full gap-x-2.5">
           <GeneralProjectIcon :type="openedProject?.type" />
           <div class="flex font-medium text-sm capitalize">
             {{ openedProject?.title }}
           </div>
         </div>
+      </div>
       <LazyGeneralShareProject />
     </div>
     <div

packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue

@@ -4,10 +4,21 @@ const { isMobileMode } = useGlobal()
 const { openedViewsTab, activeView } = storeToRefs(useViewsStore())
 
 const { base, isSharedBase } = storeToRefs(useBase())
+const { baseUrl } = useBase()
 
 const { activeTable } = storeToRefs(useTablesStore())
+const { tableUrl } = useTablesStore()
 
 const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
+
+const openedBaseUrl = computed(() => {
+  if (!base.value) return ''
+
+  return `${window.location.origin}/#${baseUrl({
+    id: base.value.id!,
+    type: 'database',
+  })}`
+})
 </script>
 
 <template>
@@ -21,19 +32,23 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
     }"
   >
     <template v-if="!isMobileMode">
-      <NcTooltip
+      <NuxtLink
-        class="ml-0.75 max-w-1/4 max-w-"
+        class="!hover:(text-black underline-gray-600) !underline-transparent ml-0.75 max-w-1/4"
         :class="{
           '!max-w-none': isSharedBase && !isMobileMode,
+          '!text-gray-500': activeTable,
+          '!text-gray-700': !activeTable,
         }"
+        :to="openedBaseUrl"
       >
+        <NcTooltip class="!text-inherit">
           <template #title>
             {{ base?.title }}
           </template>
           <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%)',
               }"
@@ -44,12 +59,13 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
                 '!flex': isSharedBase && !isMobileMode,
               }"
             >
-            <span class="truncate text-gray-700">
+              <span class="truncate !text-inherit">
                 {{ base?.title }}
               </span>
             </div>
           </div>
         </NcTooltip>
+      </NuxtLink>
       <div class="px-1.5 text-gray-500">/</div>
     </template>
     <template v-if="!(isMobileMode && !activeView?.is_default)">
@@ -64,14 +80,15 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
           />
         </template>
       </LazyGeneralEmojiPicker>
-      <NcTooltip
+      <div
-        class="truncate nc-active-table-title"
+        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,
         }"
       >
+        <NcTooltip class="truncate nc-active-table-title max-w-full">
           <template #title>
             {{ activeTable?.title }}
           </template>
@@ -79,7 +96,7 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
             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,
+              'text-gray-800 font-medium': isMobileMode || activeView?.is_default,
             }"
             :style="{
               wordBreak: 'keep-all',
@@ -87,9 +104,19 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
               display: 'inline',
             }"
           >
+            <template v-if="activeView?.is_default">
               {{ activeTable?.title }}
+            </template>
+            <NuxtLink
+              v-else
+              class="!text-inherit !underline-transparent !hover:(text-black underline-gray-600)"
+              :to="tableUrl({ table: activeTable, completeUrl: true })"
+            >
+              {{ activeTable?.title }}
+            </NuxtLink>
           </span>
         </NcTooltip>
+      </div>
     </template>
 
     <div v-if="!isMobileMode" class="px-1 text-gray-500">/</div>

packages/nc-gui/lang/en.json

@@ -339,6 +339,7 @@
     "erdView": "ERD View",
     "newBase": "New Data Source",
     "newProj": "New Base",
+    "createBase": "Create Base",
     "myProject": "My Bases",
     "formTitle": "Form Title",
     "collabView": "Collaborative View",

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,
   }
 })