Commit e7cb4fa0 authored by Dheeraj Joshi's avatar Dheeraj Joshi

Remove v-html from dependency list alert

parent d8f7c412
<script> <script>
import { GlAlert } from '@gitlab/ui'; import { GlAlert, GlSprintf } from '@gitlab/ui';
import { __, sprintf, s__ } from '~/locale'; import { __, s__ } from '~/locale';
export default { export default {
name: 'DependencyListJobFailedAlert', name: 'DependencyListJobFailedAlert',
components: { components: {
GlAlert, GlAlert,
GlSprintf,
}, },
props: { props: {
jobPath: { jobPath: {
...@@ -23,14 +24,15 @@ export default { ...@@ -23,14 +24,15 @@ export default {
} }
: {}; : {};
}, },
message() {
return {
text: s__(
'Dependencies|The %{codeStartTag}dependency_scanning%{codeEndTag} job has failed and cannot generate the list. Please ensure the job is running properly and run the pipeline again.',
),
placeholder: { code: ['codeStartTag', 'codeEndTag'] },
};
},
}, },
message: sprintf(
s__(
'Dependencies|The %{codeStartTag}dependency_scanning%{codeEndTag} job has failed and cannot generate the list. Please ensure the job is running properly and run the pipeline again.',
),
{ codeStartTag: '<code>', codeEndTag: '</code>' },
false,
),
}; };
</script> </script>
...@@ -42,6 +44,12 @@ export default { ...@@ -42,6 +44,12 @@ export default {
@dismiss="$emit('close')" @dismiss="$emit('close')"
v-on="$listeners" v-on="$listeners"
> >
<span v-html="$options.message /* eslint-disable-line vue/no-v-html */"></span> <span>
<gl-sprintf :message="message.text" :placeholders="message.placeholder">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</span>
</gl-alert> </gl-alert>
</template> </template>
import { GlAlert } from '@gitlab/ui'; import { GlAlert, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import DependencyListJobFailedAlert from 'ee/dependencies/components/dependency_list_job_failed_alert.vue'; import DependencyListJobFailedAlert from 'ee/dependencies/components/dependency_list_job_failed_alert.vue';
...@@ -21,7 +21,7 @@ describe('DependencyListJobFailedAlert component', () => { ...@@ -21,7 +21,7 @@ describe('DependencyListJobFailedAlert component', () => {
}); });
it('matches the snapshot', () => { it('matches the snapshot', () => {
factory({ propsData: { jobPath: '/jobs/foo/3210' } }); factory({ propsData: { jobPath: '/jobs/foo/3210' }, stubs: { GlSprintf } });
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
......
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