Prepare integration of changed GlBreadcrumb component
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 |
---|---|---|
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)