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>