diff options
Diffstat (limited to 'app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue')
-rw-r--r-- | app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue b/app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue new file mode 100644 index 00000000000..498d4af59b4 --- /dev/null +++ b/app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue @@ -0,0 +1,73 @@ +<script> +import { GlDropdownItem, GlAvatar } from '@gitlab/ui'; +import highlight from '~/lib/utils/highlight'; +import { truncateNamespace } from '~/lib/utils/text_utility'; + +export default { + name: 'SearchableDropdownItem', + components: { + GlDropdownItem, + GlAvatar, + }, + 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"> + <!-- eslint-disable-next-line vue/no-v-html --> + <span data-testid="item-title" v-html="highlightedItemName">{{ item[name] }}</span> + <span class="gl-font-sm gl-text-gray-700" data-testid="item-namespace">{{ + truncatedNamespace + }}</span> + </div> + </div> + </gl-dropdown-item> +</template> |