Commit 1524192f authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Nathan Friend

Use v-html to build the breadcrumb

parent 7d91cbfe
<script> <script>
/* eslint-disable vue/no-v-html */
// We are forced to use `v-html` untill this gitlab-ui MR is merged: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1869
// then we can re-write this to use gl-breadcrumb
import { initial, first, last } from 'lodash'; import { initial, first, last } from 'lodash';
import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import { sanitize } from '~/lib/dompurify';
export default { export default {
directives: { SafeHtml },
props: { props: {
crumbs: { crumbs: {
type: Array, type: Array,
...@@ -11,6 +13,9 @@ export default { ...@@ -11,6 +13,9 @@ export default {
}, },
}, },
computed: { computed: {
parsedCrumbs() {
return this.crumbs.map(c => ({ ...c, innerHTML: sanitize(c.innerHTML) }));
},
rootRoute() { rootRoute() {
return this.$router.options.routes.find(r => r.meta.root); return this.$router.options.routes.find(r => r.meta.root);
}, },
...@@ -18,11 +23,11 @@ export default { ...@@ -18,11 +23,11 @@ export default {
return this.$route.name === this.rootRoute.name; return this.$route.name === this.rootRoute.name;
}, },
rootCrumbs() { rootCrumbs() {
return initial(this.crumbs); return initial(this.parsedCrumbs);
}, },
divider() { divider() {
const { classList, tagName, innerHTML } = first(this.crumbs).querySelector('svg'); const { classList, tagName, innerHTML } = first(this.crumbs).querySelector('svg');
return { classList: [...classList], tagName, innerHTML }; return { classList: [...classList], tagName, innerHTML: sanitize(innerHTML) };
}, },
lastCrumb() { lastCrumb() {
const { children } = last(this.crumbs); const { children } = last(this.crumbs);
...@@ -43,14 +48,14 @@ export default { ...@@ -43,14 +48,14 @@ export default {
<li <li
v-for="(crumb, index) in rootCrumbs" v-for="(crumb, index) in rootCrumbs"
:key="index" :key="index"
v-safe-html="crumb.innerHTML"
:class="crumb.className" :class="crumb.className"
v-html="crumb.innerHTML"
></li> ></li>
<li v-if="!isRootRoute"> <li v-if="!isRootRoute">
<router-link ref="rootRouteLink" :to="rootRoute.path"> <router-link ref="rootRouteLink" :to="rootRoute.path">
{{ rootRoute.meta.nameGenerator($store.state) }} {{ rootRoute.meta.nameGenerator($store.state) }}
</router-link> </router-link>
<component :is="divider.tagName" v-safe-html="divider.innerHTML" :class="divider.classList" /> <component :is="divider.tagName" :class="divider.classList" v-html="divider.innerHTML" />
</li> </li>
<li> <li>
<component :is="lastCrumb.tagName" ref="lastCrumb" :class="lastCrumb.className"> <component :is="lastCrumb.tagName" ref="lastCrumb" :class="lastCrumb.className">
......
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