diff options
Diffstat (limited to 'app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue')
-rw-r--r-- | app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue | 81 |
1 files changed, 33 insertions, 48 deletions
diff --git a/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue b/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue index 1cedcc41b2b..e77eda31596 100644 --- a/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue +++ b/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue @@ -1,66 +1,51 @@ <script> -/* eslint-disable vue/no-v-html */ -// We are forced to use `v-html` untill this gitlab-ui issue is resolved: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1079 -// then we can re-write this to use gl-breadcrumb -import { initial, first, last } from 'lodash'; -import { sanitize } from '~/lib/dompurify'; +// We are using gl-breadcrumb only at the last child of the handwritten breadcrumb +// until this gitlab-ui issue is resolved: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1079 +// +// See the CSS workaround in app/assets/stylesheets/pages/registry.scss when this file is changed. +import { GlBreadcrumb, GlIcon } from '@gitlab/ui'; export default { - props: { - crumbs: { - type: Array, - required: true, - }, + components: { + GlBreadcrumb, + GlIcon, }, computed: { - parsedCrumbs() { - return this.crumbs.map(c => ({ ...c, innerHTML: sanitize(c.innerHTML) })); - }, rootRoute() { - return this.$router.options.routes.find(r => r.meta.root); + return this.$router.options.routes.find((r) => r.meta.root); + }, + detailsRoute() { + return this.$router.options.routes.find((r) => r.name === 'details'); }, isRootRoute() { return this.$route.name === this.rootRoute.name; }, - rootCrumbs() { - return initial(this.parsedCrumbs); - }, - divider() { - const { classList, tagName, innerHTML } = first(this.crumbs).querySelector('svg'); - return { classList: [...classList], tagName, innerHTML: sanitize(innerHTML) }; + isLoaded() { + return this.isRootRoute || this.$store?.state.imageDetails?.name; }, - lastCrumb() { - const { children } = last(this.crumbs); - const { tagName, className } = first(children); - return { - tagName, - className, - text: this.$route.meta.nameGenerator(), - path: { to: this.$route.name }, - }; + allCrumbs() { + const crumbs = [ + { + text: this.rootRoute.meta.nameGenerator(), + to: this.rootRoute.path, + }, + ]; + if (!this.isRootRoute) { + crumbs.push({ + text: this.detailsRoute.meta.nameGenerator(), + href: this.detailsRoute.meta.path, + }); + } + return crumbs; }, }, }; </script> <template> - <ul> - <li - v-for="(crumb, index) in rootCrumbs" - :key="index" - :class="crumb.className" - v-html="crumb.innerHTML" - ></li> - <li v-if="!isRootRoute"> - <router-link ref="rootRouteLink" :to="rootRoute.path"> - {{ rootRoute.meta.nameGenerator() }} - </router-link> - <component :is="divider.tagName" :class="divider.classList" v-html="divider.innerHTML" /> - </li> - <li> - <component :is="lastCrumb.tagName" ref="lastCrumb" :class="lastCrumb.className"> - <router-link ref="childRouteLink" :to="lastCrumb.path">{{ lastCrumb.text }}</router-link> - </component> - </li> - </ul> + <gl-breadcrumb :key="isLoaded" :items="allCrumbs"> + <template #separator> + <gl-icon name="angle-right" :size="8" /> + </template> + </gl-breadcrumb> </template> |