All files / ee/app/assets/javascripts/compliance_dashboard/components/shared drawer_avatars_list.vue

100% Statements 10/10
100% Branches 4/4
100% Functions 4/4
100% Lines 10/10

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  6x 6x 6x 6x                       3x                             21x     21x 8x     13x             121x                                      
<script>
import { GlAvatarsInline } from '@gitlab/ui';
import { DRAWER_AVATAR_SIZE, DRAWER_MAXIMUM_AVATARS } from '../../constants';
import DrawerSectionSubHeader from './drawer_section_sub_header.vue';
import UserAvatar from './user_avatar.vue';
 
export default {
  components: {
    DrawerSectionSubHeader,
    GlAvatarsInline,
    UserAvatar,
  },
  props: {
    avatars: {
      type: Array,
      required: false,
      default: () => [],
    },
    header: {
      type: String,
      required: false,
      default: '',
    },
    emptyHeader: {
      type: String,
      required: false,
      default: '',
    },
  },
  computed: {
    isEmpty() {
      return !this.avatars.length;
    },
    headerText() {
      if (this.isEmpty) {
        return this.emptyHeader;
      }
 
      return this.header;
    },
  },
  DRAWER_AVATAR_SIZE,
  DRAWER_MAXIMUM_AVATARS,
};
</script>
<template>
  <div>
    <drawer-section-sub-header v-if="headerText" :is-empty="isEmpty">
      {{ headerText }}
    </drawer-section-sub-header>
    <gl-avatars-inline
      v-if="!isEmpty"
      :avatars="avatars"
      :max-visible="$options.DRAWER_MAXIMUM_AVATARS"
      :avatar-size="$options.DRAWER_AVATAR_SIZE"
      class="gl-flex-wrap gl-w-full!"
      badge-tooltip-prop="name"
    >
      <template #avatar="{ avatar }">
        <user-avatar :user="avatar" />
      </template>
    </gl-avatars-inline>
  </div>
</template>