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)
Edited by Shinya Maeda