Switch mini pipeline graph over to ci-icon
What does this MR do and why?
Relates to #300154 (closed) and #353980 (closed)
This will also close out #345569 (closed)
This is a prerequisite to #320737 (closed) (add sizing to the mini pipeline graph) and #323353 (closed) (consistent styling for mini pipeline graph).
We are dropping the use of custom icon components in favor of the <ci-icon> component which is now used elsewhere.
How to set up and validate locally
- Navigate to Pipelines (CI/CD > Pipelines)
- View a mini pipeline graph which has upstream and/or downstream pipelines
- The icons should now appear as ci-icons. The border will look thicker and the size is larger by 2px.
Functionality:
- icons now use the
ci-iconcomponent - Active states have been updated
- Wrapping behavior updated
- A couple of bugs and some redundant code removed. Lots of scss removed!
Screenshots or screen recordings
| Before | After |
|---|---|
 |
 |
| Hover State |
|---|
| Screen_Recording_2022-05-05_at_5.26.14_PM |
| Wrapping State in MR |
|---|
| Screen_Recording_2022-05-05_at_5.30.26_PM |
| Multiple downstream wrapping |
|---|
| Screen_Recording_2022-05-05_at_5.37.00_PM |
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.
Edited by Briley Sandlin