Add "Open live environment" Button to Pipeline List View

Release notes

Problem to solve

As a release manager, I want to be able to see the running review apps being deployed from each pipeline

See user quote

I use review apps to have a separate deployment for every feature branch. I typically am looking at the pipeline list view, and would like to quickly view the review app for a given branch from this page. Right now, it takes 4 clicks from here to view any deployment. I realize space is limited so maybe it could go in the same dropdown that contains the manual jobs, where I already have a "Teardown Review" button.

The caveat here is that this may place buttons that do unexpected things. I deploy to http://<feature-branch>.staging.mydomain.com. If there is a button to view the deployment on a row for an older build, it might be surprising to click the button and see the newest build for that branch rather than the build in the same row as the button the user clicked on.

I think only showing the button for the most recent deployment to an environment will cover this.

Intended users

• Rachel (Release Manager)

User experience goal

The user should be able to see every available environment for each running pipeline from the pipeline view

Proposal

• Add a "Open live environment" button to all pipeline list views for each row
  • For single deployment URL pipelines there will be an Icon button
    • It features a tooltip: Open live environment
  • For multiple deployment URL pipelines there will be an Icon dropdown button
    • It features a tooltip: Open live environments
  • It is positioned after manual actions and before download artifacts in the button group
  • It features the external-link SVG icon (source)
  • It is featured on the following pipeline list pages:
    • /pipelines
    • /merge_requests/#/pipelines

	Mockup (Browser made)
Single URL available
Multiple URLs available

What does success look like, and how can we measure that?

Users adopting this functionality by opening environments from their pipeline view. We can measure usage through frontend click events.

Breakdown

• frontend to display the new button / dropdown in pipelines_table_row
• backend to provide the external URL(s) info

Note for the frontend:

There seem to be some color differences in the buttons in the button group going on. Can you inspect that? Perhaps some buttons using an outdated button component?

Note for the backend:

• the frontend currently uses the same component for both pages so the it's better if the property from the backend is the same
• the mr widget receives external_url: "https://production.example.com" and external_url_formatted: "production.example.com", just FYI

Permissions and Security

Documentation

Availability & Testing

What does success look like, and how can we measure that?

What is the type of buyer?

Is this a cross-stage feature?

Yes, with ~"group::verify" - grouppipeline execution

Links / references