Breacrumbs fix + small app header enhancements

web-app/packages/app/src/router.ts

@@ -194,75 +194,82 @@ export const createRouter = (pinia: Pinia) => {
             name: ProjectRouteName.ProjectTree,
             component: FileBrowserView,
             props: true,
-            meta: { public: true }
+            meta: {
+              public: true,
+              breadcrump: (route) => [
+                {
+                  title: route.params?.projectName,
+                  path: `/projects/${route.params.namespace}/${route.params.projectName}/tree`
+                }
+              ]
+            }
           },
           {
             path: 'settings',
             name: 'project-settings',
             component: ProjectSettingsView,
-            props: true
+            props: true,
+            meta: {
+              breadcrump: (route) => [
+                {
+                  title: route.params?.projectName,
+                  path: `/projects/${route.params.namespace}/${route.params.projectName}/tree`
+                }
+              ]
+            }
           },
           {
             path: 'history',
             name: 'project-versions',
             component: ProjectVersionsView,
-            props: true
+            props: true,
+            meta: {
+              breadcrump: (route) => [
+                {
+                  title: route.params?.projectName,
+                  path: `/projects/${route.params.namespace}/${route.params.projectName}/tree`
+                }
+              ]
+            }
           },
           {
             path: 'collaborators',
             name: ProjectRouteName.ProjectCollaborators,
             component: ProjectCollaboratorsView,
-            props: true
+            props: true,
+            meta: {
+              breadcrump: (route) => [
+                {
+                  title: route.params?.projectName,
+                  path: `/projects/${route.params.namespace}/${route.params.projectName}/tree`
+                }
+              ]
+            }
           },
           {
             path: 'history/:version_id/:path',
             name: 'file-version-detail',
             component: FileVersionDetailView,
             props: true,
-            meta: { public: true },
-            // TODO: refactor to function in utils
-            beforeEnter(to, from, next) {
-              to.meta = {
-                ...to.meta,
-                breadcrump: [
-                  {
-                    title: String(to.params.projectName),
-                    path: `/projects/${to.params.namespace}/${to.params.projectName}/history`
-                  },
-                  {
-                    title: String(to.params.version_id),
-                    path: `/projects/${to.params.namespace}/${to.params.projectName}/history/${to.params.version_id}`
-                  },
-                  {
-                    title: String(to.params.path),
-                    path: to.fullPath
-                  }
-                ]
-              }
-              next()
+            meta: {
+              public: true,
+              breadcrump: (route) => [
+                {
+                  title: route.params?.projectName,
+                  path: `/projects/${route.params.namespace}/${route.params.projectName}/tree`
+                },
+                {
+                  title: route.params?.version_id,
+                  path: `/projects/${route.params.namespace}/${route.params.projectName}/history/${route.params.version_id}`
+                },
+                {
+                  title: route.params?.path,
+                  path: route.fullPath
+                }
+              ]
             }
           }
         ]
-          // Not apply for project version detail , which have own breadcrump
-          .map((child) =>
-            child.name === 'file-version-detail'
-              ? child
-              : {
-                  ...child,
-                  beforeEnter: (to, from, next) => {
-                    to.meta = {
-                      ...to.meta,
-                      breadcrump: [
-                        {
-                          title: String(to.params.projectName),
-                          path: to.fullPath
-                        }
-                      ]
-                    }
-                    next()
-                  }
-                }
-          )
       },
       {
         path: '/:pathMatch(.*)*',

web-app/packages/app/src/shims-vue-router.d.ts

@@ -4,6 +4,8 @@ declare module 'vue-router' {
   interface RouteMeta {
     public?: boolean
     allowedForNoWorkspace?: boolean
-    breadcrump?: { title: string; path: string }[]
+    breadcrump?:
+      | { title: string; path: string }[]
+      | ((route) => { title: string; path: string }[])
   }
 }

web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue

@@ -49,44 +49,51 @@ import { MenuItem } from 'primevue/menuitem'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { useLayoutStore } from '../store'
-
 type EnhancedMenuItem = MenuItem & { path: string; active?: boolean }
 
-const layoutStore = useLayoutStore()
 const route = useRoute()
-// Merge all matched meta.breadcrumps with current route breadcrumps
 
-const items = computed(() =>
-  layoutStore.breadcrumps?.length
-    ? layoutStore.breadcrumps?.map((item, index, items) => ({
-        label: item.title,
-        path: item.path,
-        active: index === items.length - 1
-      }))
-    : [
-        ...route.matched.reduce<EnhancedMenuItem[]>((acc, curr) => {
-          if (curr.name === route.name) return acc
+function parseBreadcrump(item: {
+  title: string
+  path: string
+}): EnhancedMenuItem {
+  return {
+    label: item.title,
+    path: item.path
+  }
+}
 
-          return [
-            ...acc,
-            ...(curr.meta?.breadcrump ?? []).map((item) => ({
-              label: item.title,
-              path: item.path
-            }))
-          ]
-        }, []),
-        // adding current route wich is not in matched meta
-        ...(route.meta.breadcrump ?? []).map((item) => ({
-          label: item.title,
-          path: item.path
-        }))
-      ]
-        // last will be active
-        .map((item, index, items) => ({
-          ...item,
-          active: index === items.length - 1
-        }))
+const matchedBreacrumps = computed(() => {
+  return route.matched.reduce<EnhancedMenuItem[]>((acc, curr) => {
+    if (curr.name === route.name) return acc
+    const breadcrumps =
+      typeof curr.meta?.breadcrump === 'function'
+        ? curr.meta?.breadcrump(route)
+        : curr.meta?.breadcrump
+    return [...acc, ...(breadcrumps ?? []).map(parseBreadcrump)]
+  }, [])
+})
+
+const currentRouteBreacrumps = computed(() => {
+  const breadcrumps =
+    typeof route.meta?.breadcrump === 'function'
+      ? route.meta?.breadcrump(route)
+      : route.meta?.breadcrump
+  return (breadcrumps ?? []).map(parseBreadcrump)
+})
+
+// Merge all matched meta.breadcrumps with current route breadcrumps
+const items = computed(() =>
+  [
+    ...matchedBreacrumps.value,
+    // adding current route wich is not in matched meta
+    ...currentRouteBreacrumps.value
+  ]
+    // last will be active
+    .map((item, index, items) => ({
+      ...item,
+      active: index === items.length - 1
+    }))
 )
 </script>
 

web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue

@@ -38,6 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <template #end>
         <div class="flex align-items-center flex-shrink-0">
           <PButton
+            v-if="loggedUser"
             text
             plain
             aria-haspopup="true"
@@ -60,7 +61,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             </div>
             <i class="ti ti-chevron-down"></i
           ></PButton>
+          <PButton
+            v-else
+            text
+            plain
+            aria-haspopup="true"
+            aria-controls="app-header-profile"
+            data-cy="app-header-profile-btn"
+            @click="login"
+            class="p-2 shadow-none"
+            label="Sign in"
+          />
           <POverlayPanel
+            v-if="loggedUser"
             id="app-header-profile"
             data-cy="app-header-profile"
             ref="menu"
@@ -187,7 +200,7 @@ export default defineComponent({
         {
           label: 'Documentation',
           url: this.configData?.docs_url,
-          target: '_blank',
+          target: '_blank'
         },
         {
           label: 'Community chat',
@@ -227,6 +240,10 @@ export default defineComponent({
       } catch (e) {
         console.error(e)
       }
+    },
+
+    login() {
+      this.$router.push({ name: UserRouteName.Login })
     }
   }
 })

web-app/packages/lib/src/modules/layout/store.ts

@@ -11,7 +11,6 @@ export interface LayoutState {
   isUnderOverlayBreakpoint: boolean
   /** Parsed closed elements from local storage and pushed back to local storage */
   closedElements: string[]
-  breadcrumps: { title: string; path: string }[]
 }
 
 const CLOSED_ELEMENTS_KEY = 'mm-closed-elements'
@@ -21,8 +20,7 @@ export const useLayoutStore = defineStore('layoutModule', {
     overlayBreakpoint: 1200,
     drawer: false,
     isUnderOverlayBreakpoint: false,
-    closedElements: [],
-    breadcrumps: []
+    closedElements: []
   }),
   getters: {
     /**

web-app/packages/lib/src/shims-vue-router.d.ts

@@ -4,6 +4,8 @@ declare module 'vue-router' {
   interface RouteMeta {
     public?: boolean
     allowedForNoWorkspace?: boolean
-    breadcrump?: { title: string; path: string }[]
+    breadcrump?:
+      | { title: string; path: string }[]
+      | ((route) => { title: string; path: string }[])
   }
 }