Convert Environment Details page from HAML to Vue with GraphQL

While the Screen_Shot_2018-06-29_at_21.08.59 is implemented in Vue, the page to show an Screen_Shot_2018-06-29_at_21.10.19 is still implemented in HAML.

We should refactor this page to

• improve performance when switching between environments overview and individual environment
• improve performance when triggering actions on an environment
• reduce maintenance costs and costs for new features (less duplication)

To complete this issue we need a new API endpoint which lists the deployments of an environment (https://gitlab.com/gitlab-org/gitlab-ce/issues/25084).

Techincal Proposal

• Use GraphQL API to render deployment page.
• Use GlTableLite to render the table
• Integrate the existing Vue apps on the page: ee/app/assets/javascripts/environments/components/environment_approval.vue and app/assets/javascripts/environments/components/environments_detail_header.vue

Logic optimization

#367410 (closed)

• In deployments index page, Frontend checks if the environment is protected, and if so, the details of the protection (e.g. who can deploy/approve). We can use this query for this purpose.
• If the environment is protected and requires an approval, frontend renders the approval button in all rows. When a user clicks the button, frontend renders the approval details. We can use this query for this purpose.
• By this reason, we don't need to check find_approval_rule_for for every deployment rows. We can drop the legacy path.
• The frontend will need to be rewritten in Vue in order to use this endpoint: #23036 (closed)