Skip to content

Prepare integration of changed GlBreadcrumb component

Thomas Hutterer requested to merge prepare_for_flexible_gl_breadcrumbs into master

What does this MR do and why?

In gitlab-ui!3663 (merged) we change our GlBreadcrumb component to now auto-resize based on the available container width. In its integration branch !145817 (closed) I had to make a couple of tweaks to the containers in which breadcrumbs are rendered so that they can take full width. Plus a few code cleanups along the way.

These changes are also backwards-compatible to our current version of GlBreadcrumb, so I want to get them merged now, to keep the real integration branch, that will bump the gitlab-ui version and bring the new breadcrumbs, as light as possible.

So I cherry-picked all but the first and last commit from !145817 (closed).

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Vue-rendered injectVueAppBreadcrumbs Haml-rendered
image image image

No visual changes expected here.

How to set up and validate locally

All this MR does is add flex-grow: 1 to the containers that render breadcrumbs. For our current version of breadcrumbs, this should have no effect. So please check these pages:

  • http://gdk.test:3000/projects/new#blank_project (renders the breadcrumbs with Vue.js, so has its own parent container)
  • any page that uses the injectVueAppBreadcrumbs js trick. There aren't many and most require some setup to reach them in your GDK. The one I always use is the Package Registry after uploading a ruby gem to a project in my GDK. Let me know if you need some guidance here and/or see the screenshot above.
  • any other page, like http://gdk.test:3000/flightjs/Flight/-/issues/new (as 99% all pages render breadcrumbs in Haml from the same partial)
Edited by Thomas Hutterer

Merge request reports