Commit 7b35e68f authored by Dheeraj Joshi's avatar Dheeraj Joshi

Switch to v-safe-html for commit messages

parent 025ec8c4
<script> <script>
import { GlButtonGroup, GlButton, GlTooltipDirective } from '@gitlab/ui'; import { GlButtonGroup, GlButton, GlTooltipDirective, GlSafeHtmlDirective } from '@gitlab/ui';
import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue'; import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
...@@ -34,6 +34,7 @@ export default { ...@@ -34,6 +34,7 @@ export default {
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
SafeHtml: GlSafeHtmlDirective,
}, },
mixins: [glFeatureFlagsMixin()], mixins: [glFeatureFlagsMixin()],
props: { props: {
...@@ -88,6 +89,9 @@ export default { ...@@ -88,6 +89,9 @@ export default {
initUserPopovers(this.$el.querySelectorAll('.js-user-link')); initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
}); });
}, },
safeHtmlConfig: {
ADD_TAGS: ['gl-emoji'],
},
}; };
</script> </script>
...@@ -101,7 +105,7 @@ export default { ...@@ -101,7 +105,7 @@ export default {
> >
<div <div
v-if="commit.signature_html" v-if="commit.signature_html"
v-html="commit.signature_html /* eslint-disable-line vue/no-v-html */" v-safe-html:[$options.safeHtmlConfig]="commit.signature_html"
></div> ></div>
<commit-pipeline-status <commit-pipeline-status
v-if="commit.pipeline_status_path" v-if="commit.pipeline_status_path"
...@@ -142,9 +146,9 @@ export default { ...@@ -142,9 +146,9 @@ export default {
<div class="commit-detail flex-list"> <div class="commit-detail flex-list">
<div class="commit-content" data-qa-selector="commit_content"> <div class="commit-content" data-qa-selector="commit_content">
<a <a
v-safe-html:[$options.safeHtmlConfig]="commit.title_html"
:href="commit.commit_url" :href="commit.commit_url"
class="commit-row-message item-title" class="commit-row-message item-title"
v-html="commit.title_html /* eslint-disable-line vue/no-v-html */"
></a> ></a>
<span class="commit-row-message d-block d-sm-none">&middot; {{ commit.short_id }}</span> <span class="commit-row-message d-block d-sm-none">&middot; {{ commit.short_id }}</span>
...@@ -174,9 +178,9 @@ export default { ...@@ -174,9 +178,9 @@ export default {
<div> <div>
<pre <pre
v-if="commit.description_html" v-if="commit.description_html"
v-safe-html:[$options.safeHtmlConfig]="commitDescription"
:class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }" :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
class="commit-row-description gl-mb-3 gl-text-body" class="commit-row-description gl-mb-3 gl-text-body"
v-html="commitDescription /* eslint-disable-line vue/no-v-html */"
></pre> ></pre>
</div> </div>
</li> </li>
......
<script> <script>
import { GlTooltipDirective, GlLink, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui'; import {
GlTooltipDirective,
GlLink,
GlButton,
GlButtonGroup,
GlLoadingIcon,
GlSafeHtmlDirective,
} from '@gitlab/ui';
import defaultAvatarUrl from 'images/no_avatar.png'; import defaultAvatarUrl from 'images/no_avatar.png';
import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql'; import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
import { sprintf, s__ } from '~/locale'; import { sprintf, s__ } from '~/locale';
...@@ -23,6 +30,7 @@ export default { ...@@ -23,6 +30,7 @@ export default {
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
SafeHtml: GlSafeHtmlDirective,
}, },
mixins: [getRefMixin], mixins: [getRefMixin],
apollo: { apollo: {
...@@ -96,6 +104,9 @@ export default { ...@@ -96,6 +104,9 @@ export default {
}, },
}, },
defaultAvatarUrl, defaultAvatarUrl,
safeHtmlConfig: {
ADD_TAGS: ['gl-emoji'],
},
}; };
</script> </script>
...@@ -121,10 +132,10 @@ export default { ...@@ -121,10 +132,10 @@ export default {
<div class="commit-detail flex-list"> <div class="commit-detail flex-list">
<div class="commit-content qa-commit-content"> <div class="commit-content qa-commit-content">
<gl-link <gl-link
v-safe-html:[$options.safeHtmlConfig]="commit.titleHtml"
:href="commit.webPath" :href="commit.webPath"
:class="{ 'font-italic': !commit.message }" :class="{ 'font-italic': !commit.message }"
class="commit-row-message item-title" class="commit-row-message item-title"
v-html="commit.titleHtml /* eslint-disable-line vue/no-v-html */"
/> />
<gl-button <gl-button
v-if="commit.descriptionHtml" v-if="commit.descriptionHtml"
...@@ -150,15 +161,15 @@ export default { ...@@ -150,15 +161,15 @@ export default {
</div> </div>
<pre <pre
v-if="commitDescription" v-if="commitDescription"
v-safe-html:[$options.safeHtmlConfig]="commitDescription"
:class="{ 'd-block': showDescription }" :class="{ 'd-block': showDescription }"
class="commit-row-description gl-mb-3" class="commit-row-description gl-mb-3"
v-html="commitDescription /* eslint-disable-line vue/no-v-html */"
></pre> ></pre>
</div> </div>
<div class="commit-actions flex-row"> <div class="commit-actions flex-row">
<div <div
v-if="commit.signatureHtml" v-if="commit.signatureHtml"
v-html="commit.signatureHtml /* eslint-disable-line vue/no-v-html */" v-safe-html:[$options.safeHtmlConfig]="commit.signatureHtml"
></div> ></div>
<div v-if="commit.pipeline" class="ci-status-link"> <div v-if="commit.pipeline" class="ci-status-link">
<gl-link <gl-link
......
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