Commit 7336fe61 authored by Dheeraj Joshi's avatar Dheeraj Joshi Committed by Ezekiel Kigbo

Swaps out v-html with GlSprintf in MR widget

parent c6904269
<script>
import { GlModal, GlButton } from '@gitlab/ui';
import { escape } from 'lodash';
import { __, sprintf } from '~/locale';
import { GlModal, GlButton, GlSprintf, GlLink } from '@gitlab/ui';
import { __ } from '~/locale';
export default {
name: 'MergeImmediatelyConfirmationDialog',
components: {
GlModal,
GlButton,
GlSprintf,
GlLink,
},
props: {
docsUrl: {
......@@ -17,17 +18,8 @@ export default {
},
computed: {
bodyText() {
return sprintf(
__(
"Merging immediately isn't recommended as it may negatively impact the existing merge train. Read the %{docsLinkStart}documentation%{docsLinkEnd} for more information.",
),
{
docsLinkStart: `<a href="${escape(
this.docsUrl,
)}" target="_blank" rel="noopener noreferrer">`,
docsLinkEnd: '</a>',
},
false,
return __(
"Merging immediately isn't recommended as it may negatively impact the existing merge train. Read the %{docsLinkStart}documentation%{docsLinkEnd} for more information.",
);
},
},
......@@ -58,7 +50,13 @@ export default {
:title="__('Merge immediately')"
@shown="focusCancelButton"
>
<p v-html="bodyText /* eslint-disable-line vue/no-v-html */"></p>
<p>
<gl-sprintf :message="bodyText">
<template #docsLink="{ content }">
<gl-link :href="docsUrl" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
<p>{{ __('Are you sure you want to merge immediately?') }}</p>
<template #modal-footer>
<gl-button ref="cancelButton" @click="cancel">{{ __('Cancel') }}</gl-button>
......
import { GlSprintf, GlLink } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import MergeImmediatelyConfirmationDialog from 'ee/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue';
import { trimText } from 'helpers/text_helper';
......@@ -9,6 +10,9 @@ describe('MergeImmediatelyConfirmationDialog', () => {
beforeEach(() => {
wrapper = shallowMount(MergeImmediatelyConfirmationDialog, {
propsData: { docsUrl },
stubs: {
GlSprintf,
},
});
return wrapper.vm.$nextTick();
......@@ -21,10 +25,10 @@ describe('MergeImmediatelyConfirmationDialog', () => {
});
it('should render a link to the documentation', () => {
const docsLink = wrapper.find(`a[href="${docsUrl}"]`);
const docsLink = wrapper.findComponent(GlLink);
expect(docsLink.exists()).toBe(true);
expect(docsLink.attributes().rel).toBe('noopener noreferrer');
expect(docsLink.attributes('href')).toBe(docsUrl);
expect(trimText(docsLink.text())).toBe('documentation');
});
......
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