Add shared utility for breadcrumbs attachment
What does this MR do and why?
This merge request adds a shared utility for breadcrumbs attachment. This utility is used in the container registry, harbor registry, package registry, and analytics dashboards to inject the breadcrumbs component into the DOM.
The MR that added this functionality to analytics dashboards explains the reason for why the injection method is being used:
This MR attaches Vue component controlled breadcrumbs to the HAML breadcrumbs to render breadcrumbs as the user navigates using Vue router.
This is an approach taken by existing solutions (see the package registry and iterations).
I did attempt to move all the breadcrumbs (see !124418 (deaa6716) and !124418 (667c77ba)) into Vue, but I came across some issues:
- The method
schema_breadcrumb_json
does not populate within theyield
we use for the main content of the page, so it had to be moved which isn't ideal.
- There is a broader concern here that we shouldn't be using a helper (internal Slack link) for breadcrumbs but rather generating it through the controller.
- I decided to use the
schema_breadcrumb_json
because it creates a parsable JSON object for the frontend to use.- The new sidebar expand icon is prepended to the breadcrumbs, so hiding them from HAML also hides the sidebar expand icon. Which means users can't use the sidebar
🙈 . We would need to implement the expansion functionality within Vue too.So I used the existing solution, with the long-term hope that we can move away from attaching through JS when we create a breadcrumbs view component. Or we copy the functionality of the breadcrumbs view component to a shared Vue component instead.
Screenshots or screen recordings
No visual changes
How to set up and validate locally
To test package registries
- Visit a project or groups package registry e.g.
http://gdk.test:3000/flightjs/Flight/-/packages
. - View packages in the registry and confirm that the breadcrumbs are updated and link to the correct places.
To test analytics dashboards
- Requires GitLab Ultimate.
- Follow these instructions to set up Product Analytics in your GDK.
- Visit your onboarded project's analytics dashboards e.g.
http://gdk.test:3000/flightjs/Flight/-/analytics/dashboards/
. - View individual dashboards and confirm that the breadcrumbs are updated and link to the correct places.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #417017 (closed)