Frontend: Differentiate trigger jobs from regular jobs in the pipeline graph

Problem

Details of the main problem are noted in the design issue

Trigger jobs are special jobs that trigger downstream pipelines. They serve a special function but look the same in the UI. For example, there's no way to tell which job triggers a downstream pipeline by looking at the pipeline graph.

This makes it difficult to troubleshoot problems with downstream pipelines.

Proposal

Pipeline page pipeline graph 👉 See design

• Add a Trigger job badge to the trigger job pill. It should match the styling of the labels we use on multi-project and child pipelines.
• The label will appear underneath the job status and name, with 8px vertical padding between the pipeline status icon and the label.
• Give the trigger job pill a square shape with rounded corners (8px radius).
• Apply an 8px border radius to the downstream pipeline card to match the trigger job.

Implementation plan

Iteration	Description	Link
1	DESIGN/DISCUSSION	https://gitlab.com/gitlab-org/ci-cd/pipeline-authoring/-/issues/53
2	Frontend: Add a retry button to a downstream pipeline on the pipeline graph	#354974 (closed)
3	Backend: Differentiate trigger jobs from regular jobs in the UI	#355751 (closed)
4	Design: Differentiate trigger jobs in the UI	#340194 (closed)
5	Frontend: Differentiate trigger jobs from regular jobs in the pipeline graph	#356330 (closed) 👈 you are here
6	Frontend: Differentiate trigger jobs from regular jobs in the mini pipeline	#356331
7	Technical spike - expose unexpected behavior when recreating a downstream pipeline	#355508 (closed)
8	Backend issue to recreate downstream pipeline
9	Frontend issue to recreate downstream pipeline

Links/References