Skip to content

Fix togglable "Preview [Service Ping] payload" functionality on Usage statistics page

Axel García requested to merge 350703-class-code-breaks-usage-statistics-preview-payload-functionality into master

What does this MR do and why?

Related to #350703 (closed)

The container element that displays the preview of the Service Ping payload is a pre.code.highlight, that highlights the JSON code. The class that handles the toggling of this content has a race-condition bug where it either doesn't show the payload or doesn't hide it afterward, because the DOM reference to the container gets outdated when the code highlighter replaces the element.

This MR updates the related test case to fail (it was not covering this scenario before) and fixes the broken DOM reference by turning it into a function.

Here is a failing pipeline before fixing the references: https://gitlab.com/gitlab-org/gitlab/-/jobs/1999641856

Screenshots or screen recordings

Before After
kyUqpaS0Cx oyAYOtRrm1

How to set up and validate locally

  1. Sign in as a user with the Administrator role.
  2. On the top bar, select Menu > Admin. On the left sidebar, select Settings > Metrics and profiling.
  3. Expand the Usage statistics section.
  4. Click the "Preview payload" button
  5. The payload should be togglable and the JSON code should be highlighted.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Axel García

Merge request reports