DRI: @andrei.zubov While the [Screen_Shot_2018-06-29_at_21.08.59](/uploads/4dfd0dfd2af344f5b1824eee8760daed/Screen_Shot_2018-06-29_at_21.08.59.png) is implemented in Vue, the page to show an [Screen_Shot_2018-06-29_at_21.10.19](/uploads/76cf70db917bde27e6309710035c2706/Screen_Shot_2018-06-29_at_21.10.19.png) 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). ## Technical Proposal * Use [GraphQL API](https://docs.gitlab.com/ee/api/graphql/reference/#fields-with-arguments-15) 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 https://gitlab.com/gitlab-org/gitlab/-/issues/367410 - 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](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/96221) 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](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/97102) 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: https://gitlab.com/gitlab-org/gitlab/-/issues/23036