Link "Go to environments page to approve or reject" button directly to corresponding environment detail page

Proposal

When a pipeline is blocked because a deployment to a protected environment needs approval, the approval screen currently looks like this:

The Go to environments page to approve or reject button currently links to /-/environments. The proposal would be to instead link the button directly to the correct environment page. This is currently linked to in the text on top of the screen already, and the environment name is mentioned in the text above the button.

However, the button is the big call to action. A user is likely to click it and find themselves on the environments list. In case of multiple environments they can now easily get disoriented, as this page has no indication of which environment to pick.

---

This becomes an even bigger problem in case of multiple blocked deployments to the same environment. In the environment list, expanding an environment will only show the latest deployment that can be approved. If a user intends to approve an older blocked deployment, the button will first bring them to the collapsed list of environments where they have to have remembered which environment to expand… but then will actually not find the deployment they wanted to approve there. They need to know to manually navigate to the details page for this environment where they will find all deployments that can currently be approved.

---

I'm pretty sure the relevant code is in waiting_for_approval.rb#L35-41. I'm not sure if project_environment_path(subject.project, subject.deployment&.environment) would be the correct way to create the intended link.

UX Proposal

Screenshot

Header: Waiting for approvals

Body Text: This job deploys to the protected environment environment name, which requires approvals. You can approve or reject the deployment on the environment details page.

CTA: View environment details page

CTA brings users to the specific Environment Details Page for the deployment that requires approval.

Implementation Guide

Update ee/lib/ee/gitlab/ci/status/build/waiting_for_approval.rb to contain the new text and link.

• #illustration contains the body text shown under the content key, and the header text under the title key
• #action_build_title contains the CTA text
• #action_path contains the CTA link, which should be updated to project_environment_path(subject.project, subject.deployment.environment)

Update tests in ee/spec/lib/ee/gitlab/ci/status/build/waiting_for_approval_spec.rb to match the new expected output.