Add missing trailing breadcrumbs for analytics dashboard pages

Problem to solve

The current analytics dashboards trailing breadcrumb sometimes links to the wrong page.

Pages in GitLab use a static breadcrumbs that is generated by rails. The analytics dashboards app contains several pages that is entirely router within a Vue application, thus the breadcrumbs at the top of the page is never updated and do not comply with the Pajamas' guidelines https://design.gitlab.com/components/breadcrumb#content.

Proposed solution

To modify this we'll have to replace the trailing breadcrumb with a custom component that updates the trailing crumb to match the routed page name. This follows how the package registry page solved the same problem. See the below links for examples.

Requirements

When a user navigates to:

• A dashboard, it should be > $dashboard_slug
• The visualization designer, it should be > Visualization designer

The paths should be appended to the existing crumbs group > project > Dashboards / Analytics dashboards and should not be visually distinct from the existing breadcrumbs. Clicking on any of the crumbs should navigate the user to the expected page.

Implementation plan

Pages in GitLab use a static breadcrumbs that is generated by rails. To modify this we'll have to replace the trailing breadcrumb with a custom component that updates the trailing crumb to match the routed page name. This follows how the package registry page solved the same problem. See the container registry's for index.js an example.

frontend 3️⃣

1. Create a trailing breadcrumb component using GlBreadcrumb.
   • As an alternative consider reusing registry_breadcrumb.vue to create a new common shared component for both features.
2. Attach the trailing breadcrumb component to existing page breadcrumbs.
   • See the container registry's for index.js an example.
3. Validate that the breadcrumb complies with the requirements outlined above.
4. Add specs.