Make bread crumb navigation context aware - clicking one level up should not lead to projects/group description page
Problem to solve
We manage our tickets in subgroups and separate projects and the structuring makes a lot of sense for us.
Group
- Subgroup1
- Project1
- Project2
- Subgroup2
- Project1
- Project2 Project
Managing tickets and navigating from board to board involves a lot of extra clicks.
Getting from board of Project1 to the board of Subgroup1 involves at least 3 clicks:
- click on the breadcrump -> Subgroup1
- click on issues in Subgroup1
- click on board in subgroup1
If filters had been set on the board or the list adding those in the subgroup again will require additional work. We use gitlab not only for development. While devs (might) be used to this way of navigation, a lot of non tech (also some tech ;) coworkers feeling lost after clicking on an upper level element and finding them self on the details page of a subgroup.
"Why cant this thing just stay in the place i was just a level up?"
Intended users
Further details
Goal is to make navigation between groups subgroups and projects easier and more intuitive.
Proposal
Navigating via the Breadcrumb does tries to keep the context.
This video shows how this would look like in action: Bildschirmvideo_aufnehmen_2019-10-10_um_23.34.57
We patched our own gitlab instance using custom script injection like #15199 (comment 214787873). The behaviour feels much more natural and makes working with it way more fun.
The following code monkeypatches this feature on the current gitlab version (12.3.5). To give it a test, run it on a gitlab board or issue list on a project within a group after page load:
(function addContextAwareBreadCrump() {
let queryParams = window.location.search;
//let groupProjectPath = window.location.pathname.split('/').slice(0, -1).join('/');
let pathParts = window.location.pathname.split('/');
// action parts can reference to an id again (like the boards where multiple are possible... information should be removed on up navigation)
let actionPath = /^\d+$/.test(pathParts[pathParts.length-1]) && pathParts.length > 1 ? pathParts[pathParts.length-2] : pathParts[pathParts.length-1];
// check which actions to modify
if (!(actionPath == 'issues' ||
actionPath == 'boards' ||
actionPath == 'labels' ||
actionPath == 'milestones' ||
actionPath == 'activity' ||
actionPath == 'group_members')) {
return
}
let baseUrl = window.location.origin;
let breadCrumpLinks = $('.breadcrumbs-list>li a');
breadCrumpLinks.each((i, el) => {
// don't modify the last link in the bread crump;
if (i >= breadCrumpLinks.length - 2) {
return;
}
let isGroupLink = true;
// non group links (projects) must be the second link from the right and the current page must not be a group
if (i == $('.breadcrumbs-list>li a').length - 2 && window.location.pathname.indexOf('/groups/') != -1) {
isGroupLink = false;
}
let groupProjectPath = el.attributes.href.value;
let newHref = baseUrl + (isGroupLink ? '/groups' : '') + groupProjectPath + '/' + (isGroupLink ? '-/' : '') +actionPath + queryParams;
el.href = newHref;
});
})()
While this is not always possible i think the following pages are represented in both groups and projects and would make sense.
- issues
- boards
- labels
- milestones
- activity
- group_members
- settings