Commit 04c7be88 authored by Stanislav Lashmanov's avatar Stanislav Lashmanov Committed by Natalia Tepluhina

Replace v-html with gl-sprintf in commits_header.vue

parent 7e2be326
<script>
/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
import { GlButton } from '@gitlab/ui';
import { GlButton, GlSprintf } from '@gitlab/ui';
import { escape } from 'lodash';
import { __, n__, sprintf, s__ } from '~/locale';
import { __, n__, s__ } from '~/locale';
const mergeCommitCount = s__('mrWidgetCommitsAdded|1 merge commit');
export default {
mergeCommitCount,
components: {
GlButton,
GlSprintf,
},
props: {
isSquashEnabled: {
......@@ -47,22 +51,15 @@ export default {
ariaLabel() {
return this.expanded ? __('Collapse') : __('Expand');
},
targetBranchEscaped() {
return escape(this.targetBranch);
},
message() {
const message = this.isFastForwardEnabled
return this.isFastForwardEnabled
? s__('mrWidgetCommitsAdded|%{commitCount} will be added to %{targetBranch}.')
: s__(
'mrWidgetCommitsAdded|%{commitCount} and %{mergeCommitCount} will be added to %{targetBranch}.',
);
return sprintf(
message,
{
commitCount: `<strong class="commits-count-message">${this.commitsCountMessage}</strong>`,
mergeCommitCount: `<strong>${s__('mrWidgetCommitsAdded|1 merge commit')}</strong>`,
targetBranch: `<span class="label-branch">${escape(this.targetBranch)}</span>`,
},
false,
);
},
},
methods: {
......@@ -89,10 +86,19 @@ export default {
/>
<span v-if="expanded">{{ __('Collapse') }}</span>
<span v-else>
<span
class="vertical-align-middle"
v-html="message /* eslint-disable-line vue/no-v-html */"
></span>
<span class="vertical-align-middle">
<gl-sprintf :message="message">
<template #commitCount>
<strong class="commits-count-message">{{ commitsCountMessage }}</strong>
</template>
<template #mergeCommitCount>
<strong>{{ $options.mergeCommitCount }}</strong>
</template>
<template #targetBranch>
<span class="label-branch">{{ targetBranchEscaped }}</span>
</template>
</gl-sprintf>
</span>
<gl-button variant="link" class="modify-message-button">
{{ modifyLinkMessage }}
</gl-button>
......
import { shallowMount } from '@vue/test-utils';
import { GlSprintf } from '@gitlab/ui';
import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
describe('Commits header component', () => {
......@@ -6,6 +7,9 @@ describe('Commits header component', () => {
const createComponent = (props) => {
wrapper = shallowMount(CommitsHeader, {
stubs: {
GlSprintf,
},
propsData: {
isSquashEnabled: false,
targetBranch: 'main',
......
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