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:
- 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.
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
-
- Make sure you are on GitLab Ultimate
- Follow these instructions to set up Product Analytics in your GDK.
- NB enable the
product_analytics_snowplow_support
feature flag.
- NB enable the
- Create a new project with an empty repository.
- Enable custom dashboards at Project > Settings > Analytics and pick the empty project.
- 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: {}
- View the dashboard list at Project → Analytics → Dashboards.
- Confirm that the
Analytics dashboards
breadcrumb is shown and working. - Visit the following and confirm the additional breadcrumb is shown and working:
- Visualization designer
- New dashboard
- A
By GitLab
dashboard -
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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #396327 (closed)