Prevents child pipelines from rendering incorrectly on hover
What does this MR do and why?
This MR fixes a bug introduced in !69656 (merged) which caused issue #340799 (closed)
The issue occurred due to the mixing of types in the way we handle classes on the cssClassJobName
prop.
jobClasses() {
return this.relatedDownstreamHovered || this.relatedDownstreamExpanded
? `${this.$options.hoverClass} ${this.cssClassJobName}`
: this.cssClassJobName;
}
If the cssClassJobName
was an array and the downstream was hovered, we would cast that array to a string and incorrectly render the classnames. e.g. ['class-1', 'class-2']
would render as "class-1,class-2"
instead of the expected "class-1 class-2".
My solution is to refactor jobClasses to use array/object syntax.
return [
{
[this.$options.hoverClass]:
this.relatedDownstreamHovered || this.relatedDownstreamExpanded,
},
this.cssClassJobName,
];
Screenshots or screen recordings
Before
After
How to set up and validate locally
- Set up a pipleine with linked pipelines. You can use the parent child pipeline example project to set up a pipeline that will showcase this behaviour.
- Hover over a linked child pipeline to see the bug outlined in #340799 (closed)
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 Payton Burdette