All files / app/assets/javascripts/sidebar/components/assignees assignee_avatar_link.vue

100% Statements 6/6
81.81% Branches 9/11
100% Functions 4/4
100% Lines 6/6

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        25x                                             72x     74x 74x     74x     74x                                              
<script>
import { GlTooltipDirective, GlLink } from '@gitlab/ui';
import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
import AssigneeAvatar from './assignee_avatar.vue';
 
export default {
  components: {
    AssigneeAvatar,
    GlLink,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    user: {
      type: Object,
      required: true,
    },
    issuableType: {
      type: String,
      default: TYPE_ISSUE,
      required: false,
    },
  },
  computed: {
    isMergeRequest() {
      return this.issuableType === TYPE_MERGE_REQUEST;
    },
    cannotMerge() {
      const canMerge = this.user.mergeRequestInteraction?.canMerge || this.user.can_merge;
      return this.isMergeRequest && !canMerge;
    },
    assigneeUrl() {
      return this.user.web_url || this.user.webUrl;
    },
    assigneeId() {
      return isGid(this.user.id) ? getIdFromGraphQLId(this.user.id) : this.user.id;
    },
  },
};
</script>
 
<template>
  <!-- must be `d-inline-block` or parent flex-basis causes width issues -->
  <gl-link
    :href="assigneeUrl"
    :data-user-id="assigneeId"
    :data-username="user.username"
    :data-cannot-merge="cannotMerge"
    data-placement="left"
    class="gl-display-inline-block js-user-link"
  >
    <!-- use d-flex so that slot can be appropriately styled -->
    <span class="gl-display-flex">
      <assignee-avatar :user="user" :img-size="24" :issuable-type="issuableType" />
      <slot></slot>
    </span>
  </gl-link>
</template>