Skip to content

GL University links Part 2 - Refactor pipeline empty state card templates

Briley Sandlin requested to merge 486985-bs-refactor-pipelines-cards into master

What does this MR do and why?

Part 2 for #486985

Refactoring pipelines empty state to implement reusable cards.

These cards were previously hard-coded in the empty state. There was also some noticeable responsiveness buginess. The new implementation has 2 major advantages:

  • All cards will reuse the same template and will resize dynamically together
  • Adding a card is a simple object addition in ci_cards.vue

This will make way for the GitLab University card as well as the CI/CD Catalog card

Screenshots or screen recordings

Viewport size Before After
lg before_large pipeline_page_empty_large
md before_md pipeline_page_empty_medium
mobile before_mobile pipeline_page_empty_mobile

How to set up and validate locally

NOTE: As this diff has gotten large, the unit test file for ci_cards.vue will be added as part of the third task here

  1. In a project that does not have CI set up, navigate to Project > Pipelines

If you want a shortcut for no CI setup, here's a patch file to render the empty state and also the jenkins prompt:

ci_cards.patch

Edited by Briley Sandlin

Merge request reports