Skip to content

Load MR pipeline widget artifacts on mount

What does this MR do and why?

For #337615 (closed)

This MR changes the data source for the downloadable artifacts dropdown inside of the pipeline MR widget: it was lazy-loaded like the rest of the artifacts dropdowns but because the pipeline details that the MR widget fetches include the list of artifacts, we will just pass them down from there instead.

Why? We implemented lazy loading for all artifact dropdowns (including this dropdown) for performance reasons, but didn't see much of a performance boost after all. We'd like to undo the lazy loading for this dropdown for UX reasons. When there are no artifacts, it's a distracting extra button that might give the impression that there are artifacts, until you click it and discover that there aren't any artifacts after all.

Note: This should NOT affect artifacts dropdowns that appear in these other places:

  • Project Pipelines List
  • Commit details View > Pipelines Tab
  • Merge request details view > Pipelines Tab
  • New merge request View > Pipelines Tab

These dropdowns should still fetch the list of artifacts asynchronously on click because they can show many pipelines and pre-fetching artifacts for the whole list slows the page down significantly.

Screenshots or screen recordings

header before after
with artifacts Screen_Recording_2021-11-04_at_14.09.14 Screen_Recording_2021-11-10_at_13.12.27
without artifacts Screen_Recording_2021-11-04_at_14.08.17 Screen_Shot_2021-11-08_at_15.21.42 dropdown never appears

How to set up and validate locally

  1. git checkout 337615-load-mr-widget-artifacts-on-mount-instead-of-click
  2. find or set up a project with a .gitlab-ci.yml configuration that generates artifacts

OR add this snippet of .gitlab-ci.yml to a project to generate an artifact:

make_artifact:
  script: ["echo 'test' > file.txt"]
  artifacts:
    expose_as: 'artifact 1'
    paths: ['file.txt']
  1. create a branch and open an MR for it in the project
  2. run a pipeline for the branch/MR to generate the artifact file
  3. navigate to the MR (overview tab)
  4. the artifact dropdown should show up in the pipeline widget

How to validate that it doesn't affect the other dropdowns

  1. navigate to the Pipelines tab of the MR
    • click the next to a pipeline in the list
    • verify that it still loads asynchronously (shows a loading spinner before showing the artifacts)
  2. click on the commit for one of the pipelines in the list
  3. navigate to the Pipelines tab on the commit page
    • click the next to a pipeline in the list
    • verify that it still loads asynchronously (shows a loading spinner before showing the artifacts)
  4. navigate to the list of pipelines for the project (sidebar CI/CD => Pipelines)
    • click the next to a pipeline in the list
    • verify that it still loads asynchronously (shows a loading spinner before showing the artifacts)
  5. run a pipeline for a non-default branch (if you haven't already)
  6. navigate to the list of branches for a project (sidebar Repository => Branches)
  7. click the Merge request button next to the non-default branch that you ran a pipeline for
  8. navigate to the Pipelines tab on the new merge request page
    • click the next to a pipeline in the list
    • verify that it still loads asynchronously (shows a loading spinner before showing the artifacts)

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