Skip to content

Create a single consistent style for the pipeline mini graph

Briley Sandlin requested to merge 323353-pmg-consistent-style into master

What does this MR do and why?

Resolves #323353 (closed)

This MR creates a parent class for the pipeline mini graph. As each instance of <PipelineMiniGraph> also accompanies <LinkedPipelineMiniList>, we are using <PipelineMiniGraph> as the parent component and renaming the child component (<PipelineMiniGraph>) to <PipelineStages>. This is to create a single source of truth around styling and also to make sure we are always including possible upstream/downstream pipelines when we want to show pipeline stages.

Before:

<div> // with custom styling that must be updated in 4 places
  <linked-pipeline-mini-list/>
  <pipeline-mini-graph/>
  <linked-pipeline-mini-list/>
</div>

After:

// with consistent styling and 2 child components
// PipelineStages and LinkedPipelineMiniList
<pipeline-mini-graph/> 

Screenshots or screen recordings

Everything here should look and function the same UI wise, but here is the component you are looking at:

Screen_Shot_2022-06-16_at_4.09.31_PM

How to set up and validate locally

There are 4 places to view the pipeline mini graph:

  • CI/CD/Pipelines
  • View a merge request that has a pipeline. Should appear right above the comments
  • Repository/Commits >> Select a commit with a pipeline
  • CI/CD/Editor

All pipeline mini graphs now have the exact same parent component and should render the same.

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 Briley Sandlin

Merge request reports