Skip to content

Add missing trailing breadcrumbs for analytics dashboard pages

What does this MR do and why?

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.

This MR only works with the Snowplow implementation of the product analytics dashboards. We are in the process of removing the Jitsu implementation, so it didn't make sense to continue supporting both. Jitsu breadcrumbs will not generate breadcrumbs for dashboards but will still add breadcrumbs for static routes (e.g. the visualization designer or new dashboards)

Screenshots or screen recordings

Before After
Screen_Recording_2023-06-27_at_14.32.00 Screen_Recording_2023-06-27_at_23.49.29

How to set up and validate locally

    1. Make sure you are on GitLab Ultimate
  1. Follow these instructions to set up Product Analytics in your GDK.
    • NB enable the product_analytics_snowplow_support feature flag.
  2. Create a new project with an empty repository.
  3. Enable custom dashboards at Project > Settings > Analytics and pick the empty project.
  4. Create a custom dashboard by following these instructions with the contents below:
    ---
    version: 1
    title: Something
    description: All insights on user activity
    panels:
      - id: 1
      visualization: page_views_over_time
      title: Page views over time
      gridAttributes:
        yPos: 1
        xPos: 0
        width: 6
        height: 5
      options: {}
  5. View the dashboard list at Project → Analytics → Dashboards.
  6. Confirm that the Analytics dashboards breadcrumb is shown and working.
  7. Visit the following and confirm the additional breadcrumb is shown and working:
    1. Visualization designer
    2. New dashboard
    3. A By GitLab dashboard
    4. Something dashboard

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 #396327 (closed)

Edited by Robert Hunt

Merge request reports