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

fix_child_pipeline_hover

How to set up and validate locally

1. 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.
2. 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.