View Deployment button disappears if environment URL is invalid

Problem

View Deployment button turns into Copy URL if environment URL is invalid, leaving users with no context on why it's gone and what is the root cause of the problem.

Environment page for environment URL https://www.google.com:

Environment page for environment URL invalid-google.com:

Proposal

• Keep the View Deployment button and open up a modal to give users more context on where the URL goes:

Environment/Deployment Pages	Review App

Title:

• This link may be suspicious

Content:

• The URL of environment does not start with the HTTP(S) prefix.
• URL:
• Are you sure you want to view it?

Buttons:

• View app
• Cancel

Figma File

Technical Proposal

The initial fix of this is entirely a frontend change. We have 3 locations where environment urls are linked to:

1. The environments page,
2. the environment details page, and
3. the merge request page.

The tasks to fix this are as follows:

• create a self-contained button component that manages the link (GlLink) and the modal (GlModal),
• use the button on the environments page,
• use the button on the environment details page,
• use the button in the merge request page.

Key things to watch when implementing:

• We shouldn't open an MR just for introducing the component, we can handle one of the refactors in the same MR to show how it is used
• The button size for the merge request widget is different than the others, and so this must be taken into consideration.
• placing the file is a little challenging, we could theoretically put it in app/assets/javascripts/vue_shared and make it very flexible, but for now, I think putting it in app/assets/javascripts/environments makes the most sense. We can consider a follow-up refactor if UX wants to use this pattern more wide-spread.