UX / Frontend:Improve navigation consistency between MR, Pipeline, Job, and Artifact pages

Situation

Development and testing of CICD YAML, including components, involves switching back and forth between the Pipeline, Job, and Artifact (browse) pages to view the behaviour of the configuration. Navigating between these pages, in the context of a single Pipeline run, requires figuring out where the links between them live, because they have subtly different designs.

The breadcrumbs in the UI don't really help. They're organized by class of object rather than by the associated activity. For example, when looking at the Job page, my mental model is that the job is part of the pipeline, but the breadcrumb leads back the the "Jobs" index page. That makes sense given the RESTful nature of application URLs (and the Rails convention) but offers little to the person testing their pipeline, who needs to move quickly between the Pipeline, Job, and Artifact pages.

When working in the context of an MR (as a pipeline author typically might), the MR itself forms a sort of local "home page" for pipeline testing, but it's especially tricky to navigate back to the MR.

So there's a broad problem of inconsistent navigation between the pages associated with a single Pipeline run, with added complexity for MRs. The workflow seems ripe for a redesign.

Example

On the Pipeline page, a link to the related MR appears in a line of text near the top.

pipeline-page

On the Job page, we can find it, also within text, to the side - a completely different location.

job-page

On the Artifact browse page, we have to go back to the pipeline or job first. There's no way straight back to the MR

artifact-browse-page

Proposal

Just a random idea as to how the specific problem above might be addressed (though really someone on the UX team might want to take a look at the whole flow):

A button or link to get back to the related MR from the Pipeline, Job, and Artifact pages that clearly appears in the same place, at the same size, in the same way, on all 3 pages.

My idea: Since it's like a breadcrumb, just across classes, locate it in the breadcrumb bar at the right end. Make it a button, maybe with the MR symbol on it for simplicity. Here's my amateur layout design:

idea

Edited by Francis Potter (GitLab)