GitLab Version - Properly track link clicks
What does this MR do and why?
Follow up from !99301 (merged)
Closes #369442 (closed)
Currently the GitLab Version Check Badge uses the Actionable Badge component to link to the help documentation. We also had logic to track the link clicks in Snowplow
.
However, as it turns out with GlBadge
click events are never emitted up through the event chain. So essentially the logic was never called. The tests were passing since we explicitly $emit('click')
. This is related to a BootstrapVue bug: https://github.com/bootstrap-vue/bootstrap-vue/issues/6219. Shout out to @eduardosanz for catching this!
To fix this we instead wrap the badge in a temporary span element that takes the click event and fires our tracking data before bubbling it to the link.
Additionally this change also swaps the data we track from the Badge variant to the Badge text when we call this.track
About Version Check Badge
The GitLab Version check badge is a badge that informs users of their instance's version status and the severity of an upgrade if they are behind versions. This badge exists in three places:
- Help Dropdown (? in top right of nav)
- Admin Dashboard (/admin)
- Help Page (/help)
Screenshots or screen recordings
Before | After (No Change) | |
---|---|---|
Help Dropdown | ||
Help Page | ||
Admin Page |
How to set up and validate locally
Important I was unable to successfully setup snowplow on my GDK and am fully relying on the jest specs to validate that it works. This was the strategy provided by this Slack Thread (internal only).
Important
- Ensure
Gitlab::CurrentSettings.version_check_enabled
is set to true (it defaults to true) - Version Check uses
ReactiveCache
so the first time you navigate to a place where the badge should be, it may not be in the cache and required a single reload. - Please read note above in the first section about my issues with setting up snowplow locally.
Testing Instructions
- Repeat these steps for the following views
/help
/admin
- Help Dropdown (? in top nav)
- Find the Version Check badge
-
/help
=> At top of page -
/admin
=> In the components card - Help Dropdown => First list item
-
- Ensure that when the badge is rendered the correct tracking event is fired
- Ensure when clicking the badge/link the correct tracking event is fired
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 #369442 (closed)