Merge branch 'nmezzopera-restore-breadcrumb-divider' into 'master'

Use v-html to build the breadcrumb

See merge request gitlab-org/gitlab!48350

app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue

 <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 { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { sanitize } from '~/lib/dompurify';
 
 export default {
-  directives: { SafeHtml },
   props: {
     crumbs: {
       type: Array,
@@ -11,6 +13,9 @@ export default {
     },
   },
   computed: {
+    parsedCrumbs() {
+      return this.crumbs.map(c => ({ ...c, innerHTML: sanitize(c.innerHTML) }));
+    },
     rootRoute() {
       return this.$router.options.routes.find(r => r.meta.root);
     },
@@ -18,11 +23,11 @@ export default {
       return this.$route.name === this.rootRoute.name;
     },
     rootCrumbs() {
-      return initial(this.crumbs);
+      return initial(this.parsedCrumbs);
     },
     divider() {
       const { classList, tagName, innerHTML } = first(this.crumbs).querySelector('svg');
-      return { classList: [...classList], tagName, innerHTML };
+      return { classList: [...classList], tagName, innerHTML: sanitize(innerHTML) };
     },
     lastCrumb() {
       const { children } = last(this.crumbs);
@@ -43,14 +48,14 @@ export default {
     <li
       v-for="(crumb, index) in rootCrumbs"
       :key="index"
-      v-safe-html="crumb.innerHTML"
       :class="crumb.className"
+      v-html="crumb.innerHTML"
     ></li>
     <li v-if="!isRootRoute">
       <router-link ref="rootRouteLink" :to="rootRoute.path">
         {{ rootRoute.meta.nameGenerator($store.state) }}
       </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>
       <component :is="lastCrumb.tagName" ref="lastCrumb" :class="lastCrumb.className">