Correlate child pipeline to triggering job (UX improvement)
<!-- The first four sections: "Problem to solve", "Intended users", "User experience goal", and "Proposal", are strongly recommended, while the rest of the sections can be filled out during the problem validation or breakdown phase. However, keep in mind that providing complete and relevant information early helps our product team validate the problem and start working on a solution. -->
## Problem to solve
> As a user, I want to understand which job triggers a child pipeline, so I can understand the progression of the pipeline.
All child pipelines have the same appearance and there is no information that can link back to the job triggering them.
The user needs to expand the child pipeline and look at the jobs in it to understand what the pipeline is about.
| Screenshot of pipeline with multiple child pipelines, not easy to know which jobs triggered which child pipeline |
| --- |
|  |
## Intended users
* [Sasha (Software Developer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sasha-software-developer)
* [Devon (DevOps Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#devon-devops-engineer)
## User experience goal
<!-- What is the single user experience workflow this problem addresses?
For example, "The user should be able to use the UI/API/.gitlab-ci.yml with GitLab to <perform a specific task>"
https://about.gitlab.com/handbook/engineering/ux/ux-research-training/user-story-mapping/ -->
## Proposal
Create a visual link between the trigger job and the child pipeline.
1. When a user hovers on a job that is a bridge job, visually highlight the linked downstream pipeline
2. When user hovers on a downstream/child pipeline, visually highlight the trigger job in the parent pipeline
3. Change the display name of the child and downstream pipelines to 'Child Pipeline <#ID>' or 'Project name <#ID>', respectively to make the relation clearer
4. On hover
• For bridge jobs, shown the information about the pipeline that it triggers in the tooltip
• For child/downstream pipelines, show the information about the job that triggers it
(Designs are attached to the issue)
## Further details
<!-- Include use cases, benefits, goals, or any other details that will help us understand the problem better. -->
For a future iteration, we can address in a separate issue this proposed approach from [comment](https://gitlab.com/gitlab-org/gitlab/-/issues/197140#note_306946790):
To visualize which job created a specific child pipeline, instead of using labels we could enhance the display name of the downstream (child or multi-project) pipeline:
* Today is in the form like `gitlab • #86` (project + pipeline ID)
* A great improvement would be adding more context like `test/docs ▶ gitlab • #86` where `test` and `docs` are respectively the stage and job name of the trigger job that created the downstream pipeline.
<!-- ## Permissions and Security -->
<!-- What permissions are required to perform the described actions? Are they consistent with the existing permissions as documented for users, groups, and projects as appropriate? Is the proposed behavior consistent between the UI, API, and other access methods (e.g. email replies)?-->
<!-- ## Documentation -->
<!-- See the Feature Change Documentation Workflow https://docs.gitlab.com/ee/development/documentation/workflow.html#for-a-product-change
* Add all known Documentation Requirements in this section. See https://docs.gitlab.com/ee/development/documentation/feature-change-workflow.html#documentation-requirements
* If this feature requires changing permissions, update the permissions document. See https://docs.gitlab.com/ee/user/permissions.html -->
## Availability & Testing
<!-- This section needs to be retained and filled in during the workflow planning breakdown phase of this feature proposal, if not earlier.
What risks does this change pose to our availability? How might it affect the quality of the product? What additional test coverage or changes to tests will be needed? Will it require cross-browser testing?
Please list the test areas (unit, integration and end-to-end) that needs to be added or updated to ensure that this feature will work as intended. Please use the list below as guidance.
* Unit test changes
* Integration test changes
* End-to-end test change
See the test engineering planning process and reach out to your counterpart Software Engineer in Test for assistance: https://about.gitlab.com/handbook/engineering/quality/test-engineering/#test-planning -->
* Unit test changes - Yes, update existing unit test
* Integration test changes - Not required
* End-to-end test change - Yes, update existing E2E tests [parent_child_pipelines_dependent_relationship_spec.rb](https://gitlab.com/gitlab-org/gitlab/-/blob/master/qa/qa/specs/features/browser_ui/6_release/pipeline/parent_child_pipelines_dependent_relationship_spec.rb) and [parent_child_pipelines_independent_relationship_spec.rb](https://gitlab.com/gitlab-org/gitlab/-/blob/master/qa/qa/specs/features/browser_ui/6_release/pipeline/parent_child_pipelines_independent_relationship_spec.rb)
<!-- ## What does success look like, and how can we measure that? -->
<!-- Define both the success metrics and acceptance criteria. Note that success metrics indicate the desired business outcomes, while acceptance criteria indicate when the solution is working correctly. If there is no way to measure success, link to an issue that will implement a way to measure this. -->
<!-- ## What is the type of buyer? -->
<!-- What is the buyer persona for this feature? See https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/buyer-persona/
In which enterprise tier should this feature go? See https://about.gitlab.com/handbook/product/pricing/#four-tiers -->
<!-- ## Is this a cross-stage feature? -->
<!-- Communicate if this change will affect multiple Stage Groups or product areas. We recommend always start with the assumption that a feature request will have an impact into another Group. Loop in the most relevant PM and Product Designer from that Group to provide strategic support to help align the Group's broader plan and vision, as well as to avoid UX and technical debt. https://about.gitlab.com/handbook/product/#cross-stage-features -->
## Links / references
issue