Skip to content

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.

💁 This is the 2nd of a series of MRs related to #358113. The 1st MR was !149813 (merged). See both that MR and issue for more context and the implementation plan.

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.

Edited by Thomas Hutterer

Merge request reports