Skip to content

GitLab Version - Fix nested links in help dropdown

Zack Cuddy requested to merge 378186-actionable-option-gitlab-version-check into master

What does this MR do and why?

Follow up from !100978 (merged)
Closes #378186 (closed)
Closes #369442 (closed)

The GitLab Version Badge located in the Help Dropdown actually renders as an <a> nested inside of an <a>. This is incorrect markup and additionally may issues with the tracking events.

This change adds a actionable prop to GitlabVersionCheck that allows for us to drive when the badge itself should be the link (ie. on Admin Dashboard and Help Page). When actionable: false we can then move the link to a wrapper element like in the Help Dropdown.

This change also adds a separate tracking action to the help dropdown link to track when that is clicked.

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:

  1. Help Dropdown (? in top right of nav) <= Main focus of this MR
  2. Admin Dashboard (/admin)
  3. Help Page (/help)

Screenshots or screen recordings

Before After
Markup Before After
Screenshot Before_Screen After_Screen

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

  1. Ensure Gitlab::CurrentSettings.version_check_enabled is set to true (it defaults to true)
  2. 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.
  3. Please read note above in the first section about my issues with setting up snowplow locally.

Testing Instructions

  1. Navigate to /admin and /help
  2. Ensure the badge itself is a link and clicks to the upgrade doc
  3. Click the help dropdown (top right ? in nav)
  4. Ensure the entire Version Block is a clickable link
  5. Ensure the badge itself is no longer a link

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

Merge request reports