Skip to content

Add shared utility for breadcrumbs attachment

Robert Hunt requested to merge 417017-follow-up-from-add-missing-trailing-breadcrumbs-for-analytics-dashboard-pages into master

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:

  1. The method schema_breadcrumb_json does not populate within the yield 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.
  2. 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

  1. Visit a project or groups package registry e.g. http://gdk.test:3000/flightjs/Flight/-/packages.
  2. View packages in the registry and confirm that the breadcrumbs are updated and link to the correct places.

To test analytics dashboards

  1. Requires GitLab Ultimate.
  2. Follow these instructions to set up Product Analytics in your GDK.
  3. Visit your onboarded project's analytics dashboards e.g. http://gdk.test:3000/flightjs/Flight/-/analytics/dashboards/.
  4. 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.

Related to #417017 (closed)

Edited by Robert Hunt

Merge request reports