Create a single consistent style for the pipeline mini graph
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:
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.
-
I have evaluated the MR acceptance checklist for this MR.