All files / ee/app/assets/javascripts/iterations/components iteration_breadcrumb.vue

4.76% Statements 1/21
0% Branches 0/27
0% Functions 0/7
4.76% Lines 1/21

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87                1x                                                                                                                                                            
<script>
// 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
import { GlBreadcrumb, GlSkeletonLoader } from '@gitlab/ui';
import { TYPENAME_ITERATIONS_CADENCE } from '~/graphql_shared/constants';
import { convertToGraphQLId } from '~/graphql_shared/utils';
import readCadence from '../queries/iteration_cadence.query.graphql';
 
const cadencePath = '/:cadenceId';
 
export default {
  components: {
    GlBreadcrumb,
    GlSkeletonLoader,
  },
  inject: ['groupPath'],
  apollo: {
    group: {
      skip() {
        return !this.cadenceId;
      },
      query: readCadence,
      variables() {
        return {
          fullPath: this.groupPath,
          id: convertToGraphQLId(TYPENAME_ITERATIONS_CADENCE, this.cadenceId),
        };
      },
      result({ data: { group, errors }, error }) {
        const cadence = group?.iterationCadences?.nodes?.[0];
 
        Iif (!cadence || error || errors?.length) {
          this.cadenceTitle = this.cadenceId;
          return;
        }
 
        this.cadenceTitle = cadence.title;
      },
    },
  },
  data() {
    return {
      cadenceTitle: '',
    };
  },
  computed: {
    cadenceId() {
      return this.$route.params.cadenceId;
    },
    allBreadcrumbs() {
      const pathArray = this.$route.path.split('/');
      const breadcrumbs = [];
 
      pathArray.forEach((path, index) => {
        let text = this.$route.matched[index]?.meta?.breadcrumb || path;
 
        Iif (this.$route.matched[index]?.path === cadencePath) {
          text = this.cadenceTitle;
        }
        const prevPath = breadcrumbs[index - 1]?.to || '';
        const to = `${prevPath}/${path}`.replace(/\/+/, '/');
 
        Iif (text) {
          breadcrumbs.push({
            path,
            to,
            text,
          });
        }
      });
 
      return breadcrumbs;
    },
  },
};
</script>
 
<template>
  <gl-skeleton-loader
    v-if="$apollo.queries.group.loading"
    :width="200"
    :lines="1"
    class="gl-mx-3"
  />
  <gl-breadcrumb v-else :items="allBreadcrumbs" class="gl-p-0 gl-shadow-none" />
</template>