Skip to content

Add clarifications to group repository analytics page

What does this MR do and why?

For #349826 (closed)

This MR makes some UX improvements:

  • Adds an explanatory paragraph under the page title
  • Adds a last updated date next to the Test Code Coverage title
  • Adds explanatory popovers to each single stat
  • Adds a help icon with popover next to the Latest test coverage results title
  • Moves the Download historic test coverage data (.csv) button into the Latest test coverage results card header, make the button and dropdown flex-wrap on narrower viewports
  • Splits the timespan description text (Last 30 days) off from the graph card title

And does some refactoring:

  • Moves the page title from haml to vue
  • Moves the Test Code Coverage title into the summary component
  • Passes the group name (groupName) to the vue app for use in some of the explanatory text
  • Fixes some vue warnings about undefined tooltip data by setting it to null by default
  • Extracts the i18n text for most of this page into one constants file
  • Switches to GlTableLite for the coverage table because it doesn't have any sorting or filtering (yet)
  • Make coverage table header buttons wrap better
  • Aligns the project select dropdown contents with the right side of the dropdown trigger

Screenshots or screen recordings

before after
Screen_Shot_2022-05-10_at_21.16.41 Screen_Shot_2022-05-11_at_11.09.02
Screen_Shot_2022-05-10_at_21.47.45 Screen_Shot_2022-05-10_at_21.48.26
popovers
Screen_Recording_2022-05-10_at_21.18.17

How to set up and validate locally

  1. have a GitLab Premium licence or higher
  2. git checkout 349826-group-repo-analytics-clarifications
  3. find or create a group, and within that group create projects that have coverage jobs
    tip: clone this test project and run pipelines using a variable called COVERAGE for an easy way to generate coverage results
  4. navigate to the group, in the sidebar find Analytics => Repository
  5. you should see aggregated coverage data from all the group's projects, though it might take a bit of time to show up

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 Miranda Fluharty

Merge request reports