Init a GlBreadcrumb Vue app from breadcrumb JSON data
What does this MR do and why?
Behind a wip
feature flag, renders the static page breadcrumbs with gitlab-ui's GlBreadcrumb
Vue component instead of our custom Haml implementation.
Screenshots or screen recordings
Before | After |
---|---|
recording_1713946254 | recording_1713946101 |
How to set up and validate locally
-
Feature.enable(:vue_page_breadcrumbs)
to see the new Vue breadcrumbs instead of Haml. - On most pages (with only a few breadcrumb items), both versions should look exactly the same.
- Only pages with many breadcrumb items show the difference:
- Go to a deeply nested project (Group_1 > group_2 > group_last > project) and compare collapse behavior.
- Haml breadcrumbs always collapsed any group that isn't group_1 or group_last. Vue breadcrumbs now show everything, if available space allows.
- Shrink the window width to see Vue breadcrumbs collapse into a dropdown.
- Go to a project's wiki and create a Home page, as well as another subpage, under Home. Vue breadcrumbs should show [user/group]>project>wiki>Home>Subpage.
What is not yet implemented
This MR doesn't yet handle the existing mechanism that allows pages that are entirely Vue.js-built (incl subpages with vue-router) to inject there dynamic breadcrumbs into the static server-rendered breadcrumbs. Grep injectVueAppBreadcrumbs
if curious. We have around a dozend pages like this. Their dynamic breadcrumbs won't show up yet with this new feature flag enabled. That will be handled in the next MR of this series. That's why I kept the FF type as wip
.