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,9 +73,11 @@ watch(
     >
       <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
-        <GeneralProjectIcon :type="openedProject?.type" />
-        <div class="flex font-medium text-sm capitalize">
-          {{ openedProject?.title }}
+        <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 />

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,35 +32,40 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
     }"
   >
     <template v-if="!isMobileMode">
-      <NcTooltip
-        class="ml-0.75 max-w-1/4 max-w-"
+      <NuxtLink
+        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"
       >
-        <template #title>
-          {{ base?.title }}
-        </template>
-        <div class="flex flex-row items-center gap-x-1.5">
-          <GeneralProjectIcon
-            :meta="{ type: base?.type }"
-            class="!grayscale"
-            :style="{
-              filter: 'grayscale(100%) brightness(115%)',
-            }"
-          />
-          <div
-            class="hidden !2xl:(flex truncate ml-1)"
-            :class="{
-              '!flex': isSharedBase && !isMobileMode,
-            }"
-          >
-            <span class="truncate text-gray-700">
-              {{ base?.title }}
-            </span>
+        <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 min-w-4"
+              :style="{
+                filter: 'grayscale(100%) brightness(115%)',
+              }"
+            />
+            <div
+              class="hidden !2xl:(flex truncate ml-1)"
+              :class="{
+                '!flex': isSharedBase && !isMobileMode,
+              }"
+            >
+              <span class="truncate !text-inherit">
+                {{ base?.title }}
+              </span>
+            </div>
           </div>
-        </div>
-      </NcTooltip>
+        </NcTooltip>
+      </NuxtLink>
       <div class="px-1.5 text-gray-500">/</div>
     </template>
     <template v-if="!(isMobileMode && !activeView?.is_default)">
@@ -64,32 +80,43 @@ 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-800 font-medium': isMobileMode || activeView?.is_default,
+            }"
+            :style="{
+              wordBreak: 'keep-all',
+              whiteSpace: 'nowrap',
+              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,
   }
 })