diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2019-03-05 18:33:10 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-03-05 18:33:10 +0000 |
commit | a592a78072bb44fed1a25c25f2cabdc4cf4bc0bd (patch) | |
tree | 945a450b6d29f7226c1cfb38c94d7f995e39036a | |
parent | 5fd1dc1562b191599014ec61cc6693efbb36db05 (diff) | |
parent | ba98e91c067444e5af8dee392921126390af78b6 (diff) | |
download | gitlab-ce-a592a78072bb44fed1a25c25f2cabdc4cf4bc0bd.tar.gz |
Merge branch '27333-re-deploy-rollback-button-should-ask-for-confirmation-before-executing' into 'master'
Ask for confirmation before re-deploying/rolling back
Closes #27333
See merge request gitlab-org/gitlab-ce!25110
13 files changed, 392 insertions, 17 deletions
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 @@ +<script> +/** + * Render modal to confirm rollback/redeploy. + */ + +import _ from 'underscore'; +import { GlModal } from '@gitlab/ui'; +import { s__, sprintf } from '~/locale'; + +import eventHub from '../event_hub'; + +export default { + name: 'ConfirmRollbackModal', + + components: { + GlModal, + }, + + props: { + environment: { + type: Object, + required: true, + }, + }, + + computed: { + modalTitle() { + const title = this.environment.isLastDeployment + ? s__('Environments|Re-deploy environment %{name}?') + : s__('Environments|Rollback environment %{name}?'); + + return sprintf(title, { + name: _.escape(this.environment.name), + }); + }, + + commitShortSha() { + const { last_deployment } = this.environment; + return this.commitData(last_deployment, 'short_id'); + }, + + commitUrl() { + const { last_deployment } = this.environment; + return this.commitData(last_deployment, 'commit_path'); + }, + + commitTitle() { + const { last_deployment } = this.environment; + return this.commitData(last_deployment, 'title'); + }, + + modalText() { + const linkStart = `<a class="commit-sha" href="${_.escape(this.commitUrl)}">`; + const commitId = _.escape(this.commitShortSha); + const linkEnd = '</a>'; + const name = _.escape(this.name); + const body = this.environment.isLastDeployment + ? s__( + 'Environments|This action will relaunch the job for commit %{linkStart}%{commitId}%{linkEnd}, putting the environment in a previous version. Are you sure you want to continue?', + ) + : s__( + 'Environments|This action will run the job defined by %{name} for commit %{linkStart}%{commitId}%{linkEnd} putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?', + ); + return sprintf( + body, + { + commitId, + linkStart, + linkEnd, + name, + }, + false, + ); + }, + + modalActionText() { + return this.environment.isLastDeployment + ? s__('Environments|Re-deploy') + : s__('Environments|Rollback'); + }, + }, + + methods: { + onOk() { + eventHub.$emit('rollbackEnvironment', this.environment); + }, + + commitData(lastDeployment, key) { + if (lastDeployment && lastDeployment.commit) { + return lastDeployment.commit[key]; + } + + return ''; + }, + }, +}; +</script> +<template> + <gl-modal + :title="modalTitle" + modal-id="confirm-rollback-modal" + :ok-title="modalActionText" + ok-variant="danger" + @ok="onOk" + > + <p v-html="modalText"></p> + </gl-modal> +</template> 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 { <rollback-component v-if="canRetry" + :environment="model" :is-last-deployment="isLastDeployment" :retry-url="retryUrl" /> 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; + } + }); }, }, }; </script> <template> - <button + <gl-button v-gl-tooltip + v-gl-modal.confirm-rollback-modal + variant="secondary" :disabled="isLoading" :title="title" - type="button" - class="btn d-none d-sm-none d-md-block" + class="d-none d-md-block" @click="onClick" > <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" /> <gl-loading-icon v-if="isLoading" /> - </button> + </gl-button> </template> 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 { <template> <div :class="cssContainerClass"> <stop-environment-modal :environment="environmentInStopModal" /> + <confirm-rollback-modal :environment="environmentInRollbackModal" /> <div class="top-area"> <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" /> diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js index 9d83840c87c..71b6b578196 100644 --- a/app/assets/javascripts/environments/mixins/environments_mixin.js +++ b/app/assets/javascripts/environments/mixins/environments_mixin.js @@ -36,6 +36,7 @@ export default { page: getParameterByName('page') || '1', requestData: {}, environmentInStopModal: {}, + environmentInRollbackModal: {}, }; }, @@ -116,6 +117,10 @@ export default { this.environmentInStopModal = environment; }, + updateRollbackModal(environment) { + this.environmentInRollbackModal = environment; + }, + stopEnvironment(environment) { const endpoint = environment.stop_path; const errorMessage = s__( @@ -123,6 +128,16 @@ export default { ); this.postAction({ endpoint, errorMessage }); }, + + rollbackEnvironment(environment) { + const { retryUrl, isLastDeployment } = environment; + const errorMessage = isLastDeployment + ? s__('Environments|An error occurred while re-deploying the environment, please try again') + : s__( + 'Environments|An error occurred while rolling back the environment, please try again', + ); + this.postAction({ endpoint: retryUrl, errorMessage }); + }, }, computed: { @@ -181,11 +196,17 @@ export default { eventHub.$on('postAction', this.postAction); eventHub.$on('requestStopEnvironment', this.updateStopModal); eventHub.$on('stopEnvironment', this.stopEnvironment); + + eventHub.$on('requestRollbackEnvironment', this.updateRollbackModal); + eventHub.$on('rollbackEnvironment', this.rollbackEnvironment); }, beforeDestroy() { eventHub.$off('postAction', this.postAction); eventHub.$off('requestStopEnvironment', this.updateStopModal); eventHub.$off('stopEnvironment', this.stopEnvironment); + + eventHub.$off('requestRollbackEnvironment', this.updateRollbackModal); + eventHub.$off('rollbackEnvironment', this.rollbackEnvironment); }, }; diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index d0e33dfc853..aad5150c0b5 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -404,6 +404,7 @@ img.emoji { .flex-grow { flex-grow: 1; } .flex-no-shrink { flex-shrink: 0; } .ws-initial { white-space: initial; } +.ws-normal { white-space: normal; } .overflow-auto { overflow: auto; } .d-flex-center { diff --git a/app/views/projects/deployments/_confirm_rollback_modal.html.haml b/app/views/projects/deployments/_confirm_rollback_modal.html.haml new file mode 100644 index 00000000000..ff40e404e5f --- /dev/null +++ b/app/views/projects/deployments/_confirm_rollback_modal.html.haml @@ -0,0 +1,23 @@ +- commit_sha = link_to deployment.short_sha, project_commit_path(@project, deployment.sha), class: "commit-sha has-tooltip", title: h(deployment.commit_title) +.modal.ws-normal.fade{ tabindex: -1, id: "confirm-rollback-modal-#{deployment.id}" } + .modal-dialog + .modal-content + .modal-header + %h4.modal-title.d-flex.mw-100 + - if deployment.last? + = s_("Environments|Re-deploy environment %{environment_name}?") % {environment_name: @environment.name} + - else + = s_("Environments|Rollback environment %{environment_name}?") % {environment_name: @environment.name} + .modal-body + - if deployment.last? + %p= s_('Environments|This action will relaunch the job for commit %{commit_id}, putting the environment in a previous version. Are you sure you want to continue?').html_safe % {commit_id: commit_sha} + - else + %p + = s_('Environments|This action will run the job defined by staging for commit %{commit_id}, putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?').html_safe % {commit_id: commit_sha} + .modal-footer + = button_tag _('Cancel'), type: 'button', class: 'btn btn-cancel', data: { dismiss: 'modal' } + = link_to [:retry, @project.namespace.becomes(Namespace), @project, deployment.deployable], method: :post, class: 'btn btn-danger' do + - if deployment.last? + = s_('Environments|Re-deploy') + - else + = s_('Environments|Rollback') diff --git a/app/views/projects/deployments/_rollback.haml b/app/views/projects/deployments/_rollback.haml index 1bd538a08ff..d6bf8d564de 100644 --- a/app/views/projects/deployments/_rollback.haml +++ b/app/views/projects/deployments/_rollback.haml @@ -1,7 +1,8 @@ - if can?(current_user, :create_deployment, deployment) - tooltip = deployment.last? ? s_('Environments|Re-deploy to environment') : s_('Environments|Rollback environment') - = link_to [:retry, @project.namespace.becomes(Namespace), @project, deployment.deployable], method: :post, class: 'btn btn-build has-tooltip', title: tooltip do + = button_tag class: 'btn btn-default btn-build has-tooltip', type: 'button', data: { toggle: 'modal', target: "#confirm-rollback-modal-#{deployment.id}" }, title: tooltip do - if deployment.last? = sprite_icon('repeat') - else = sprite_icon('redo') + = render 'projects/deployments/confirm_rollback_modal', deployment: deployment diff --git a/changelogs/unreleased/27333-re-deploy-rollback-button-should-ask-for-confirmation-before-executing.yml b/changelogs/unreleased/27333-re-deploy-rollback-button-should-ask-for-confirmation-before-executing.yml new file mode 100644 index 00000000000..8c5f05c3575 --- /dev/null +++ b/changelogs/unreleased/27333-re-deploy-rollback-button-should-ask-for-confirmation-before-executing.yml @@ -0,0 +1,5 @@ +--- +title: Add Confirmation Modal to Rollback on Environment +merge_request: 25110 +author: +type: added diff --git a/locale/gitlab.pot b/locale/gitlab.pot index dbb81cb4186..92784f2c49d 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -3055,6 +3055,12 @@ msgstr "" msgid "Environments|An error occurred while making the request." msgstr "" +msgid "Environments|An error occurred while re-deploying the environment, please try again" +msgstr "" + +msgid "Environments|An error occurred while rolling back the environment, please try again" +msgstr "" + msgid "Environments|An error occurred while stopping the environment, please try again" msgstr "" @@ -3100,15 +3106,33 @@ msgstr "" msgid "Environments|Open live environment" msgstr "" +msgid "Environments|Re-deploy" +msgstr "" + +msgid "Environments|Re-deploy environment %{environment_name}?" +msgstr "" + +msgid "Environments|Re-deploy environment %{name}?" +msgstr "" + msgid "Environments|Re-deploy to environment" msgstr "" msgid "Environments|Read more about environments" msgstr "" +msgid "Environments|Rollback" +msgstr "" + msgid "Environments|Rollback environment" msgstr "" +msgid "Environments|Rollback environment %{environment_name}?" +msgstr "" + +msgid "Environments|Rollback environment %{name}?" +msgstr "" + msgid "Environments|Show all" msgstr "" @@ -3121,6 +3145,18 @@ msgstr "" msgid "Environments|Stopping" msgstr "" +msgid "Environments|This action will relaunch the job for commit %{commit_id}, putting the environment in a previous version. Are you sure you want to continue?" +msgstr "" + +msgid "Environments|This action will relaunch the job for commit %{linkStart}%{commitId}%{linkEnd}, putting the environment in a previous version. Are you sure you want to continue?" +msgstr "" + +msgid "Environments|This action will run the job defined by %{name} for commit %{linkStart}%{commitId}%{linkEnd} putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?" +msgstr "" + +msgid "Environments|This action will run the job defined by staging for commit %{commit_id}, putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?" +msgstr "" + msgid "Environments|Updated" msgstr "" diff --git a/spec/javascripts/environments/confirm_rollback_modal_spec.js b/spec/javascripts/environments/confirm_rollback_modal_spec.js new file mode 100644 index 00000000000..05715bce38f --- /dev/null +++ b/spec/javascripts/environments/confirm_rollback_modal_spec.js @@ -0,0 +1,70 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlModal } from '@gitlab/ui'; +import ConfirmRollbackModal from '~/environments/components/confirm_rollback_modal.vue'; +import eventHub from '~/environments/event_hub'; + +describe('Confirm Rollback Modal Component', () => { + let environment; + + beforeEach(() => { + environment = { + name: 'test', + last_deployment: { + commit: { + short_id: 'abc0123', + }, + }, + modalId: 'test', + }; + }); + + it('should show "Rollback" when isLastDeployment is false', () => { + const component = shallowMount(ConfirmRollbackModal, { + propsData: { + environment: { + ...environment, + isLastDeployment: false, + }, + }, + }); + const modal = component.find(GlModal); + + expect(modal.attributes('title')).toContain('Rollback'); + expect(modal.attributes('title')).toContain('test'); + expect(modal.attributes('ok-title')).toBe('Rollback'); + expect(modal.text()).toContain('commit abc0123'); + expect(modal.text()).toContain('Are you sure you want to continue?'); + }); + + it('should show "Re-deploy" when isLastDeployment is true', () => { + const component = shallowMount(ConfirmRollbackModal, { + propsData: { + environment: { + ...environment, + isLastDeployment: true, + }, + }, + }); + const modal = component.find(GlModal); + + expect(modal.attributes('title')).toContain('Re-deploy'); + expect(modal.attributes('title')).toContain('test'); + expect(modal.attributes('ok-title')).toBe('Re-deploy'); + expect(modal.text()).toContain('commit abc0123'); + expect(modal.text()).toContain('Are you sure you want to continue?'); + }); + + it('should emit the "rollback" event when "ok" is clicked', () => { + environment = { ...environment, isLastDeployment: true }; + const component = shallowMount(ConfirmRollbackModal, { + propsData: { + environment, + }, + }); + const eventHubSpy = spyOn(eventHub, '$emit'); + const modal = component.find(GlModal); + modal.vm.$emit('ok'); + + expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', environment); + }); +}); diff --git a/spec/javascripts/environments/environment_rollback_spec.js b/spec/javascripts/environments/environment_rollback_spec.js index 79f33c5bc8a..8c47f6a12c0 100644 --- a/spec/javascripts/environments/environment_rollback_spec.js +++ b/spec/javascripts/environments/environment_rollback_spec.js @@ -1,8 +1,11 @@ import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; +import eventHub from '~/environments/event_hub'; import rollbackComp from '~/environments/components/environment_rollback.vue'; describe('Rollback Component', () => { - const retryURL = 'https://gitlab.com/retry'; + const retryUrl = 'https://gitlab.com/retry'; let RollbackComponent; beforeEach(() => { @@ -13,8 +16,9 @@ describe('Rollback Component', () => { const component = new RollbackComponent({ el: document.querySelector('.test-dom-element'), propsData: { - retryUrl: retryURL, + retryUrl, isLastDeployment: true, + environment: {}, }, }).$mount(); @@ -25,11 +29,33 @@ describe('Rollback Component', () => { const component = new RollbackComponent({ el: document.querySelector('.test-dom-element'), propsData: { - retryUrl: retryURL, + retryUrl, isLastDeployment: false, + environment: {}, }, }).$mount(); expect(component.$el).toHaveSpriteIcon('redo'); }); + + it('should emit a "rollback" event on button click', () => { + const eventHubSpy = spyOn(eventHub, '$emit'); + const component = shallowMount(RollbackComponent, { + propsData: { + retryUrl, + environment: { + name: 'test', + }, + }, + }); + const button = component.find(GlButton); + + button.vm.$emit('click'); + + expect(eventHubSpy).toHaveBeenCalledWith('requestRollbackEnvironment', { + retryUrl, + isLastDeployment: true, + name: 'test', + }); + }); }); diff --git a/spec/views/projects/deployments/_confirm_rollback_modal_spec.html.rb b/spec/views/projects/deployments/_confirm_rollback_modal_spec.html.rb new file mode 100644 index 00000000000..54ec4f32856 --- /dev/null +++ b/spec/views/projects/deployments/_confirm_rollback_modal_spec.html.rb @@ -0,0 +1,63 @@ +# frozen_string_literal: true + +require 'spec_helper' + +describe 'projects/deployments/_confirm_rollback_modal' do + let(:environment) { create(:environment, :with_review_app) } + let(:deployments) { environment.deployments } + let(:project) { environment.project } + + before do + assign(:environment, environment) + assign(:deployments, deployments) + assign(:project, project) + end + + context 'when re-deploying last deployment' do + let(:deployment) { deployments.first } + + before do + allow(view).to receive(:deployment).and_return(deployment) + end + + it 'shows "re-deploy"' do + render + + expect(rendered).to have_selector('h4', text: "Re-deploy environment #{environment.name}?") + expect(rendered).to have_selector('p', text: "This action will relaunch the job for commit #{deployment.short_sha}, putting the environment in a previous version. Are you sure you want to continue?") + expect(rendered).to have_selector('a.btn-danger', text: 'Re-deploy') + end + + it 'links to re-deploying the environment' do + expected_link = retry_project_job_path(environment.project, deployment.deployable) + + render + + expect(rendered).to have_selector("a[href='#{expected_link}']", text: 'Re-deploy') + end + end + + context 'when rolling back to previous deployment' do + let(:deployment) { create(:deployment, environment: environment) } + + before do + allow(view).to receive(:deployment).and_return(deployment) + end + + it 'shows "rollback"' do + render + + expect(rendered).to have_selector('h4', text: "Rollback environment #{environment.name}?") + expect(rendered).to have_selector('p', text: "This action will run the job defined by staging for commit #{deployment.short_sha}, putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?") + expect(rendered).to have_selector('a.btn-danger', text: 'Rollback') + end + + it 'links to re-deploying the environment' do + expected_link = retry_project_job_path(environment.project, deployment.deployable) + + render + + expect(rendered).to have_selector("a[href='#{expected_link}']", text: 'Rollback') + end + end +end |