Commit 22cf4a79 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Merge branch 'mw-fix-deploy-rollback-modal-regression' into 'master'

Deployment rollback modal: Change form submit to POST

See merge request gitlab-org/gitlab!67763
parents 2bdafdb3 4e2db193
......@@ -6,7 +6,8 @@
import { GlModal } from '@gitlab/ui';
import { escape } from 'lodash';
import { s__, sprintf } from '~/locale';
import csrf from '~/lib/utils/csrf';
import { __, s__, sprintf } from '~/locale';
import eventHub from '../event_hub';
......@@ -35,6 +36,11 @@ export default {
required: false,
default: true,
},
retryUrl: {
type: String,
required: false,
default: null,
},
},
computed: {
......@@ -66,6 +72,12 @@ export default {
return this.environment.commitUrl;
},
modalActionText() {
return this.environment.isLastDeployment
? s__('Environments|Re-deploy')
: s__('Environments|Rollback');
},
modalText() {
const linkStart = `<a class="commit-sha mr-0" href="${escape(this.commitUrl)}">`;
const commitId = escape(this.commitShortSha);
......@@ -90,10 +102,17 @@ export default {
);
},
modalActionText() {
return this.environment.isLastDeployment
? s__('Environments|Re-deploy')
: s__('Environments|Rollback');
primaryProps() {
let attributes = [{ variant: 'danger' }];
if (this.retryUrl) {
attributes = [...attributes, { 'data-method': 'post' }, { href: this.retryUrl }];
}
return {
text: this.modalActionText,
attributes,
};
},
},
......@@ -114,15 +133,20 @@ export default {
return '';
},
},
csrf,
cancelProps: {
text: __('Cancel'),
attributes: [{ variant: 'danger' }],
},
};
</script>
<template>
<gl-modal
:title="modalTitle"
:visible="visible"
:action-cancel="$options.cancelProps"
:action-primary="primaryProps"
modal-id="confirm-rollback-modal"
:ok-title="modalActionText"
ok-variant="danger"
@ok="onOk"
@change="handleChange"
>
......
<script>
import { parseBoolean } from '~/lib/utils/common_utils';
import { redirectTo } from '~/lib/utils/url_utility';
import eventHub from '../event_hub';
import ConfirmRollbackModal from './confirm_rollback_modal.vue';
export default {
......@@ -22,10 +20,6 @@ export default {
};
},
mounted() {
eventHub.$on('rollbackEnvironment', () => {
redirectTo(this.retryPath);
});
document.querySelectorAll(this.selector).forEach((button) => {
button.addEventListener('click', (e) => {
e.preventDefault();
......@@ -57,6 +51,7 @@ export default {
v-model="visible"
:environment="environment"
:has-multiple-commits="false"
:retry-url="retryPath"
/>
<div v-else></div>
</template>
......@@ -23,66 +23,73 @@ describe('Confirm Rollback Modal Component', () => {
commitUrl: 'test/-/commit/abc0123',
};
const retryPath = 'test/-/jobs/123/retry';
describe.each`
hasMultipleCommits | environmentData
${true} | ${envWithLastDeployment}
${false} | ${envWithoutLastDeployment}
`('when hasMultipleCommits=$hasMultipleCommits', ({ hasMultipleCommits, environmentData }) => {
beforeEach(() => {
environment = environmentData;
});
hasMultipleCommits | environmentData | retryUrl | primaryPropsAttrs
${true} | ${envWithLastDeployment} | ${null} | ${[{ variant: 'danger' }]}
${false} | ${envWithoutLastDeployment} | ${retryPath} | ${[{ variant: 'danger' }, { 'data-method': 'post' }, { href: retryPath }]}
`(
'when hasMultipleCommits=$hasMultipleCommits',
({ hasMultipleCommits, environmentData, retryUrl, primaryPropsAttrs }) => {
beforeEach(() => {
environment = environmentData;
});
it('should show "Rollback" when isLastDeployment is false', () => {
const component = shallowMount(ConfirmRollbackModal, {
propsData: {
environment: {
...environment,
isLastDeployment: false,
it('should show "Rollback" when isLastDeployment is false', () => {
const component = shallowMount(ConfirmRollbackModal, {
propsData: {
environment: {
...environment,
isLastDeployment: false,
},
hasMultipleCommits,
retryUrl,
},
hasMultipleCommits,
},
});
const modal = component.find(GlModal);
});
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?');
});
expect(modal.attributes('title')).toContain('Rollback');
expect(modal.attributes('title')).toContain('test');
expect(modal.props('actionPrimary').text).toBe('Rollback');
expect(modal.props('actionPrimary').attributes).toEqual(primaryPropsAttrs);
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,
it('should show "Re-deploy" when isLastDeployment is true', () => {
const component = shallowMount(ConfirmRollbackModal, {
propsData: {
environment: {
...environment,
isLastDeployment: true,
},
hasMultipleCommits,
},
hasMultipleCommits,
},
});
const modal = component.find(GlModal);
expect(modal.attributes('title')).toContain('Re-deploy');
expect(modal.attributes('title')).toContain('test');
expect(modal.props('actionPrimary').text).toBe('Re-deploy');
expect(modal.text()).toContain('commit abc0123');
expect(modal.text()).toContain('Are you sure you want to continue?');
});
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', () => {
const env = { ...environmentData, isLastDeployment: true };
const component = shallowMount(ConfirmRollbackModal, {
propsData: {
environment: env,
hasMultipleCommits,
},
});
const eventHubSpy = jest.spyOn(eventHub, '$emit');
const modal = component.find(GlModal);
modal.vm.$emit('ok');
it('should emit the "rollback" event when "ok" is clicked', () => {
const env = { ...environmentData, isLastDeployment: true };
const component = shallowMount(ConfirmRollbackModal, {
propsData: {
environment: env,
hasMultipleCommits,
},
expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', env);
});
const eventHubSpy = jest.spyOn(eventHub, '$emit');
const modal = component.find(GlModal);
modal.vm.$emit('ok');
expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', env);
});
});
},
);
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment