Adjust the logic of the breadcrumb area to align with Pajamas
Problem to solve
Even when there is sufficient horizontal space, the breadcrumb will collapse subgroups and wiki pages.
This can be quite annoying to expose a single subgroup or add unhelpful clicks to the experience.
Solution
The updated guidelines in Pajamas encourages a better use of screen real estate. See the MR gitlab-org/gitlab-services/design.gitlab.com!3699 (merged) for the diff.
Implementation plan
... is pretty lengthy, so please click here to expand it.
Since the current logic how breadcrumbs are rendered by Rails (and sometimes injected by Vue) is pretty involved, it will take several MRs to untangle:
GlBreadcrumb
Vue component
Update our ...
dropdown, starting with the first one.
There are only a few places in GitLab that render their top-of-page breadcrumbs directly with this component, but with that, we are already 1% done
Store breadcrumbs data as JSON in the DOM
To render the breadcrumbs with the Vue component, we have to first store the data in JSON format to later hand over to Vue. While this in itself isn't a visible change, we should build this behind a wip
feature flag, so we can build out the following steps iteratively.
injectVueAppBreadcrumbs
works
Render these static JSON breadcrumbs with Vue, and changing how This could be done in 1, maybe 2 MRs, depending on its final diff size:
- Render static JSON as
GlBreadcrumb
component, init by our super_sidebar entrypoint. - Add FF to
injectVueAppBreadcrumbs
to not inject into Haml but next to new staticGlBreadcrumb
.- Here we'll have to set the
auto-resize="false"
prop on all existing instances of injectVueAppBreadcrumbs, about 10 of these. but it's a 1-liner each. - This depends on gitlab-ui!4079 (merged) being released and available.
- Here we'll have to set the
Rollout!
At this point the new Vue breadcrumbs (behind the FF) should be ready. Enable FF first for groupfoundations, then all team members, then everyone. Depending on feedback, we might want to wait with removing FF and old Haml code until 17.1.