Breadcrumbs are not working if you switch language i.e. to German

[markusmuellerusi]

Current Behavior

Breadcrumbs are not working if you switch language i.e. to German
Name is translate and will not work.
Name, label and path should be dedicated properties.

Steps to Reproduce

1. Switch to German
2. Got to projects and open a project
3. or stay at projects and click on "Heim"
4. Navigate using breadcrumbs on top of the page

Expected Behavior

navigation should go to Dashboard or to project list, if you click on "Projekte".

By the way "Heim" is an incorrect translation for the home-button. It's called "Start" in apps using a Germen lacalization.

Dependency-Track Frontend Version

4.11.1

Browser

Microsoft Edge

Browser Version

No response

Operating System

Windows

Checklist

• I have read and understand the contributing guidelines
• I have checked the existing issues for whether this defect was already reported

[markusmuellerusi]

Proposal (please see between "start" and "end" comments): frontend\src\containers\DefaultContainer.vue

<script> import { Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, Breadcrumb, } from '@coreui/vue'; import DefaultHeaderProfileDropdown from './DefaultHeaderProfileDropdown'; import DefaultHeader from './DefaultHeader'; import DefaultFooter from './DefaultFooter'; import EventBus from '../shared/eventbus'; import ProfileEditModal from '../views/components/ProfileEditModal'; import SnapshotModal from '../views/components/SnapshotModal'; import * as permissions from '../shared/permissions'; export default { name: 'DefaultContainer', components: { ProfileEditModal, SnapshotModal, AppSidebar, AppAside, Breadcrumb, DefaultHeaderProfileDropdown, SidebarForm, SidebarFooter, SidebarHeader, SidebarNav, SidebarMinimizer, DefaultFooter, DefaultHeader, }, data() { return { breadcrumbs: [], nav: [ { name: this.$t('message.dashboard'), url: '/dashboard', icon: 'icon-speedometer', permission: permissions.VIEW_PORTFOLIO, }, { title: true, name: this.$t('message.portfolio'), class: '', wrapper: { element: '', attributes: {}, }, permission: permissions.VIEW_PORTFOLIO, }, { name: this.$t('message.projects'), url: '/projects', icon: 'fa fa-sitemap', permission: permissions.VIEW_PORTFOLIO, }, { name: this.$t('message.components'), url: '/components', icon: 'fa fa-cubes', permission: permissions.VIEW_PORTFOLIO, }, { name: this.$t('message.vulnerabilities'), url: '/vulnerabilities', icon: 'fa fa-shield', permission: permissions.VIEW_PORTFOLIO, }, { name: this.$t('message.licenses'), url: '/licenses', icon: 'fa fa-balance-scale', permission: permissions.VIEW_PORTFOLIO, }, { title: true, name: this.$t('message.global_audit'), class: '', wrapper: { element: '', attributes: {}, }, permission: permissions.VIEW_VULNERABILITY, }, { name: this.$t('message.vulnerability_audit'), url: '/vulnerabilityAudit', icon: 'fa fa-tasks', permission: permissions.VIEW_VULNERABILITY, }, { title: true, name: this.$t('message.administration'), class: '', wrapper: { element: '', attributes: {}, }, permission: permissions.SYSTEM_CONFIGURATION, }, { name: this.$t('message.policy_management'), url: '/policy', icon: 'fa fa-list-alt', permission: permissions.POLICY_MANAGEMENT, }, //Start GOV { name: this.$t('gov.governance'), url: '/gov_governance', icon: 'fa fa-thumbs-o-up', permission: permissions.VIEW_PORTFOLIO }, //End GOV { name: this.$t('message.administration'), url: '/admin', icon: 'fa fa-cogs', permission: permissions.SYSTEM_CONFIGURATION, }, ], }; }, //Start GOV methods: { getNameOfPathSegment: function getNameOfPathSegment(str, index) { let segments = this.getPathSegment(str, index); let routes = this.$router.getRoutes(); if (routes.length && segments) { for (const route of routes) { if (route.path != segments) { continue; } return route.name; } } return ''; }, getPathSegment: function getPathSegment(str, maxIndex) { let pathSeparator = '/'; let trimmed = this.trimChar(str, pathSeparator); let segments = trimmed.split(pathSeparator); let index = 0; let result = ''; while (index <= maxIndex && segments.length >= maxIndex) { result = pathSeparator + segments[index]; index++; } return result; }, trimChar: function trimChar(str, ch) { let start = 0; let end = str.length; while(start < end && str[start] === ch) { ++start; } while(end > start && str[end - 1] === ch) { --end; } return (start > 0 || end < str.length) ? str.substring(start, end) : str; }, generateBreadcrumbs: function generateBreadcrumbs( crumbName, subSectionName, subSectionUuid, subSectionLabel, ) { let sectionPath = this.$route.path; let sectionLabel = this.$t(this.$route.meta.i18n); let homeRoute = "Home"; let homeLocKey = "message.home"; if (crumbName && subSectionName && subSectionUuid && subSectionLabel) { return [ { path: '', name: homeRoute, meta: { label: this.$t(homeLocKey) }, }, { path: this.getPathSegment(sectionPath, 0), name: this.getNameOfPathSegment(sectionPath, 0), meta: { label: sectionLabel }, }, { name: subSectionName, params: { uuid: subSectionUuid }, meta: { label: subSectionLabel }, }, { name: crumbName, active: true }, ]; } else if (crumbName) { return [ { path: '', name: homeRoute, meta: { label: this.$t(homeLocKey) }, }, { path: this.getPathSegment(sectionPath, 0), name: this.getNameOfPathSegment(sectionPath, 0), meta: { label: sectionLabel }, }, { name: crumbName, active: true }, ]; } else { return [ { path: '', name: homeRoute, meta: { label: this.$t(homeLocKey) }, }, { path: this.getPathSegment(sectionPath, 0), name: this.getNameOfPathSegment(sectionPath, 0), meta: { label: sectionLabel }, }, ]; } }, }, //End GOV mounted() { if (this.$dtrack && this.$dtrack.version.includes('SNAPSHOT')) { this.$root.$emit('bv::show::modal', 'snapshotModal'); } }, computed: { name() { return this.$route.name; }, list() { if (this.breadcrumbs.length === 0) { return this.generateBreadcrumbs(); } else { return this.breadcrumbs; } }, permissibleNav() { let decodedToken = permissions.decodeToken(permissions.getToken()); let array = []; for (const item of this.nav) { if ( item.permission !== null && permissions.hasPermission(item.permission, decodedToken) ) { array.push(item); } } return array; }, }, created() { EventBus.$on('crumble', () => { this.breadcrumbs = []; }); EventBus.$on( 'addCrumb', (crumb, subSectionName, subSectionUuid, subsectionLabel) => { if (crumb) { this.breadcrumbs = this.generateBreadcrumbs( crumb, subSectionName, subSectionUuid, subsectionLabel, ); } else { this.breadcrumbs = []; } }, ); }, }; </script>

[IdrisGit]

Hey, I have opened up a PR for this issue, the issue was in the breadcrumb props and how the breadcrumbs are generated.

Please let me know if you need more details or changes in the PR.