Commit 7c41df0d authored by Martin Wortschack's avatar Martin Wortschack Committed by Brandon Labuschagne

Use GlSprintf in deployment rollback modal

parent 73bd174d
<script>
/* eslint-disable vue/no-v-html */
/**
* Render modal to confirm rollback/redeploy.
*/
import { GlModal } from '@gitlab/ui';
import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
import { escape } from 'lodash';
import csrf from '~/lib/utils/csrf';
import { __, s__, sprintf } from '~/locale';
......@@ -13,9 +11,10 @@ import eventHub from '../event_hub';
export default {
name: 'ConfirmRollbackModal',
components: {
GlModal,
GlSprintf,
GlLink,
},
model: {
prop: 'visible',
......@@ -42,7 +41,6 @@ export default {
default: null,
},
},
computed: {
modalTitle() {
const title = this.environment.isLastDeployment
......@@ -53,7 +51,6 @@ export default {
name: escape(this.environment.name),
});
},
commitShortSha() {
if (this.hasMultipleCommits) {
const { last_deployment } = this.environment;
......@@ -62,7 +59,6 @@ export default {
return this.environment.commitShortSha;
},
commitUrl() {
if (this.hasMultipleCommits) {
const { last_deployment } = this.environment;
......@@ -71,37 +67,11 @@ 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);
const linkEnd = '</a>';
const name = escape(this.environment.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,
);
},
primaryProps() {
let attributes = [{ variant: 'danger' }];
......@@ -115,16 +85,13 @@ export default {
};
},
},
methods: {
handleChange(event) {
this.$emit('change', event);
},
onOk() {
eventHub.$emit('rollbackEnvironment', this.environment);
},
commitData(lastDeployment, key) {
if (lastDeployment && lastDeployment.commit) {
return lastDeployment.commit[key];
......@@ -150,6 +117,34 @@ export default {
@ok="onOk"
@change="handleChange"
>
<p v-html="modalText"></p>
<gl-sprintf
v-if="environment.isLastDeployment"
:message="
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?',
)
"
>
<template #link>
<gl-link :href="commitUrl" target="_blank" class="commit-sha mr-0">{{
commitShortSha
}}</gl-link>
</template>
</gl-sprintf>
<gl-sprintf
v-else
:message="
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?',
)
"
>
<template #name>{{ environment.name }}</template>
<template #link>
<gl-link :href="commitUrl" target="_blank" class="commit-sha mr-0">{{
commitShortSha
}}</gl-link>
</template>
</gl-sprintf>
</gl-modal>
</template>
import { GlModal } from '@gitlab/ui';
import { GlModal, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import ConfirmRollbackModal from '~/environments/components/confirm_rollback_modal.vue';
import eventHub from '~/environments/event_hub';
describe('Confirm Rollback Modal Component', () => {
let environment;
let component;
const envWithLastDeployment = {
name: 'test',
......@@ -25,6 +26,17 @@ describe('Confirm Rollback Modal Component', () => {
const retryPath = 'test/-/jobs/123/retry';
const createComponent = (props = {}) => {
component = shallowMount(ConfirmRollbackModal, {
propsData: {
...props,
},
stubs: {
GlSprintf,
},
});
};
describe.each`
hasMultipleCommits | environmentData | retryUrl | primaryPropsAttrs
${true} | ${envWithLastDeployment} | ${null} | ${[{ variant: 'danger' }]}
......@@ -37,15 +49,13 @@ describe('Confirm Rollback Modal Component', () => {
});
it('should show "Rollback" when isLastDeployment is false', () => {
const component = shallowMount(ConfirmRollbackModal, {
propsData: {
environment: {
...environment,
isLastDeployment: false,
},
hasMultipleCommits,
retryUrl,
createComponent({
environment: {
...environment,
isLastDeployment: false,
},
hasMultipleCommits,
retryUrl,
});
const modal = component.find(GlModal);
......@@ -58,15 +68,14 @@ describe('Confirm Rollback Modal Component', () => {
});
it('should show "Re-deploy" when isLastDeployment is true', () => {
const component = shallowMount(ConfirmRollbackModal, {
propsData: {
environment: {
...environment,
isLastDeployment: true,
},
hasMultipleCommits,
createComponent({
environment: {
...environment,
isLastDeployment: true,
},
hasMultipleCommits,
});
const modal = component.find(GlModal);
expect(modal.attributes('title')).toContain('Re-deploy');
......@@ -78,12 +87,12 @@ describe('Confirm Rollback Modal Component', () => {
it('should emit the "rollback" event when "ok" is clicked', () => {
const env = { ...environmentData, isLastDeployment: true };
const component = shallowMount(ConfirmRollbackModal, {
propsData: {
environment: env,
hasMultipleCommits,
},
createComponent({
environment: env,
hasMultipleCommits,
});
const eventHubSpy = jest.spyOn(eventHub, '$emit');
const modal = component.find(GlModal);
modal.vm.$emit('ok');
......
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