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:

Update our GlBreadcrumb Vue component

✅ This is done already. gitlab-ui!3663 (merged) and new version is already available in GitLab codebase. This component now always takes all available width, detects if all breadcrumbs items can be displayed, and if not all of them fit on the available space, they move into ... 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 😉 See https://gitlab.com/projects/new#blank_project for example.

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.

Render these static JSON breadcrumbs with Vue, and changing how injectVueAppBreadcrumbs works

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 static GlBreadcrumb.
  • 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.

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.