From ba98e91c067444e5af8dee392921126390af78b6 Mon Sep 17 00:00:00 2001 From: Andrew Fontaine Date: Tue, 5 Mar 2019 18:33:10 +0000 Subject: Add Component to Confirm Environment Rollback Ensure a vue.js component to confirm the re-deployment/rollback of an environment pops up when rollback/re-deploy has been clicked so the user must confirm their actions before accidentally rolling back or re-deploying an environment. Only on the `environment-table` view. --- .../components/confirm_rollback_modal.vue | 108 +++++++++++++++++++++ .../environments/components/environment_item.vue | 1 + .../components/environment_rollback.vue | 43 +++++--- .../environments/components/environments_app.vue | 3 + .../environments/mixins/environments_mixin.js | 21 ++++ app/assets/stylesheets/framework/common.scss | 1 + .../deployments/_confirm_rollback_modal.html.haml | 23 +++++ app/views/projects/deployments/_rollback.haml | 3 +- ...hould-ask-for-confirmation-before-executing.yml | 5 + locale/gitlab.pot | 36 +++++++ .../environments/confirm_rollback_modal_spec.js | 70 +++++++++++++ .../environments/environment_rollback_spec.js | 32 +++++- .../_confirm_rollback_modal_spec.html.rb | 63 ++++++++++++ 13 files changed, 392 insertions(+), 17 deletions(-) create mode 100644 app/assets/javascripts/environments/components/confirm_rollback_modal.vue create mode 100644 app/views/projects/deployments/_confirm_rollback_modal.html.haml create mode 100644 changelogs/unreleased/27333-re-deploy-rollback-button-should-ask-for-confirmation-before-executing.yml create mode 100644 spec/javascripts/environments/confirm_rollback_modal_spec.js create mode 100644 spec/views/projects/deployments/_confirm_rollback_modal_spec.html.rb diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue new file mode 100644 index 00000000000..a8ee3f4ac10 --- /dev/null +++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue @@ -0,0 +1,108 @@ + + diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index 503c1b38f71..eb817beab9d 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -556,6 +556,7 @@ export default { diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index 50c86af057c..266cdc42518 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -5,29 +5,38 @@ * * Makes a post request when the button is clicked. */ +import { GlTooltipDirective, GlLoadingIcon, GlModalDirective, GlButton } from '@gitlab/ui'; import { s__ } from '~/locale'; -import { GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; +import ConfirmRollbackModal from './confirm_rollback_modal.vue'; import eventHub from '../event_hub'; export default { components: { Icon, GlLoadingIcon, + GlButton, + ConfirmRollbackModal, }, directives: { GlTooltip: GlTooltipDirective, + GlModal: GlModalDirective, }, props: { - retryUrl: { - type: String, - default: '', - }, - isLastDeployment: { type: Boolean, default: true, }, + + environment: { + type: Object, + required: true, + }, + + retryUrl: { + type: String, + required: true, + }, }, data() { return { @@ -45,23 +54,31 @@ export default { methods: { onClick() { - this.isLoading = true; - - eventHub.$emit('postAction', { endpoint: this.retryUrl }); + eventHub.$emit('requestRollbackEnvironment', { + ...this.environment, + retryUrl: this.retryUrl, + isLastDeployment: this.isLastDeployment, + }); + eventHub.$on('rollbackEnvironment', environment => { + if (environment.id === this.environment.id) { + this.isLoading = true; + } + }); }, }, }; diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue index aa2417d3194..6e55c3f901a 100644 --- a/app/assets/javascripts/environments/components/environments_app.vue +++ b/app/assets/javascripts/environments/components/environments_app.vue @@ -6,11 +6,13 @@ import eventHub from '../event_hub'; import environmentsMixin from '../mixins/environments_mixin'; import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin'; import StopEnvironmentModal from './stop_environment_modal.vue'; +import ConfirmRollbackModal from './confirm_rollback_modal.vue'; export default { components: { emptyState, StopEnvironmentModal, + ConfirmRollbackModal, }, mixins: [CIPaginationMixin, environmentsMixin], @@ -87,6 +89,7 @@ export default {