All files / app/assets/javascripts/search/topbar/components searchable_dropdown_item.vue

100% Statements 7/7
100% Branches 0/0
100% Functions 4/4
100% Lines 7/7

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  6x 6x 6x                                                                       7x     7x     7x           40x                                                
<script>
import { GlDropdownItem, GlAvatar, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
import highlight from '~/lib/utils/highlight';
import { truncateNamespace } from '~/lib/utils/text_utility';
 
export default {
  name: 'SearchableDropdownItem',
  components: {
    GlDropdownItem,
    GlAvatar,
  },
  directives: {
    SafeHtml,
  },
  props: {
    item: {
      type: Object,
      required: true,
    },
    selectedItem: {
      type: Object,
      required: true,
    },
    searchText: {
      type: String,
      required: false,
      default: '',
    },
    name: {
      type: String,
      required: true,
    },
    fullName: {
      type: String,
      required: true,
    },
  },
  computed: {
    isSelected() {
      return this.item.id === this.selectedItem.id;
    },
    truncatedNamespace() {
      return truncateNamespace(this.item[this.fullName]);
    },
    highlightedItemName() {
      return highlight(this.item[this.name], this.searchText);
    },
  },
};
</script>
 
<template>
  <gl-dropdown-item
    :is-check-item="true"
    :is-checked="isSelected"
    :is-check-centered="true"
    @click="$emit('change', item)"
  >
    <div class="gl-display-flex gl-align-items-center">
      <gl-avatar
        :src="item.avatar_url"
        :entity-id="item.id"
        :entity-name="item[name]"
        shape="rect"
        :size="32"
      />
      <div class="gl-display-flex gl-flex-direction-column">
        <span v-safe-html="highlightedItemName" data-testid="item-title"></span>
        <span class="gl-font-sm gl-text-gray-700" data-testid="item-namespace">{{
          truncatedNamespace
        }}</span>
      </div>
    </div>
  </gl-dropdown-item>
</template>