Deploy button disappeared from MR widget
Summary
From https://gitlab.com/gitlab-com/dev-sub-department/section-dev-request-for-help/-/issues/162
Steps to reproduce
Given the following .gitlab-ci.yml
configuration:
stages:
- config
- deploy
create:
stage: config
script:
- echo pass
deploy_job:
stage: deploy
script:
- echo pass
environment:
name: yo
url: https://example.com
when: manual
The "Deploy" button does not appear as expected in the MR widget (found in the MR's main tab) when the pipeline runs. See screenshots in https://gitlab.com/gitlab-com/dev-sub-department/section-dev-request-for-help/-/issues/162#current-behaviour. (Please note that the other buttons might not be the same as the screenshot is from a project that has a different GitLab CI pipeline configuration).
Cause
In summary, the widget sets the deployment's computed status as MANUAL_DEPLOY
if status='created'
, but !125659 (merged) introduces a change where a deployment stays in the blocked
state (instead of going back to the created
state) once the approvals are given.
Because of this change, we will need a different way of computing the MANUAL_DEPLOY
status.
Proposal
The deployment data for the MR widget is taken from the GET /<project>/-/merge_requests/<merge_request_id>/ci_environments_status
endpoint. This points to the MergeRequestsController.ci_environments_status
action, which makes use of the EnvironmentStatusEntity through the EnvironmentStatusSerializer.
Backend change
In the backend, update the EnvironmentStatusEntity to add the deployment.approved?
field, e.g.:
diff --git a/app/serializers/environment_status_entity.rb b/app/serializers/environment_status_entity.rb
index 62dc323616eb..d36ede9a9bf7 100644
--- a/app/serializers/environment_status_entity.rb
+++ b/app/serializers/environment_status_entity.rb
@@ -41,6 +41,10 @@ class EnvironmentStatusEntity < Grape::Entity
DeploymentEntity.represent(es.deployment, options.merge(project: es.project, only: [:playable_job]))
end
+ expose :deployment_approved do |es|
+ es.deployment.approved?
+ end
+
expose :environment_available do |es|
es.environment.available?
end
Frontend change
In the frontend, change the MANUAL_DEPLOY
computation to check for both the deployment status
and the approved
field, e.g.:
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js b/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js
index 29d067a46a63..1d4de9e81fa9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js
@@ -1,4 +1,5 @@
// DEPLOYMENT STATUSES
+export const BLOCKED = 'blocked';
export const CREATED = 'created';
export const MANUAL_DEPLOY = 'manual_deploy';
export const WILL_DEPLOY = 'will_deploy';
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue
index 1829b674455e..a17cd3c51b7b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue
@@ -1,6 +1,6 @@
<!-- eslint-disable vue/multi-word-component-names -->
<script>
-import { MANUAL_DEPLOY, WILL_DEPLOY, CREATED } from './constants';
+import { MANUAL_DEPLOY, WILL_DEPLOY, CREATED, BLOCKED } from './constants';
import DeploymentActions from './deployment_actions.vue';
import DeploymentInfo from './deployment_info.vue';
@@ -26,6 +26,8 @@ export default {
computedDeploymentStatus() {
if (this.deployment.status === CREATED) {
return this.isManual ? MANUAL_DEPLOY : WILL_DEPLOY;
+ } else if (this.deployment.status === BLOCKED && this.deployment.deployment_approved && this.isManual) {
+ return MANUAL_DEPLOY;
}
return this.deployment.status;
},