Add latest changes from gitlab-org/gitlab@master

2 files changed, 67 insertions, 5 deletions

diff --git a/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue b/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue
index 4e65d2d5055..025c48f355d 100644
--- a/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue
+++ b/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue
@@ -12,7 +12,17 @@ import { mapState, mapGetters } from 'vuex';
 import { s__ } from '~/locale';
 import highlight from '~/lib/utils/highlight';
 import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
-import { GROUPS_CATEGORY, PROJECTS_CATEGORY, LARGE_AVATAR_PX, SMALL_AVATAR_PX } from '../constants';
+import { truncateNamespace } from '~/lib/utils/text_utility';
+
+import {
+  GROUPS_CATEGORY,
+  PROJECTS_CATEGORY,
+  MERGE_REQUEST_CATEGORY,
+  ISSUES_CATEGORY,
+  RECENT_EPICS_CATEGORY,
+  LARGE_AVATAR_PX,
+  SMALL_AVATAR_PX,
+} from '../constants';
 
 export default {
   name: 'HeaderSearchAutocompleteItems',
@@ -40,7 +50,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['search', 'loading', 'autocompleteError']),
+    ...mapState(['search', 'loading', 'autocompleteError', 'searchContext']),
     ...mapGetters(['autocompleteGroupedSearchOptions']),
   },
   watch: {
@@ -53,6 +63,13 @@ export default {
     },
   },
   methods: {
+    truncateNamespace(string) {
+      if (string.split(' / ').length > 2) {
+        return truncateNamespace(string);
+      }
+
+      return string;
+    },
     highlightedName(val) {
       return highlight(val, this.search);
     },
@@ -66,6 +83,35 @@ export default {
     isOptionFocused(data) {
       return this.currentFocusedOption?.html_id === data.html_id;
     },
+    isProjectsCategory(data) {
+      return data.category === PROJECTS_CATEGORY;
+    },
+    getEntityId(data) {
+      switch (data.category) {
+        case GROUPS_CATEGORY:
+        case RECENT_EPICS_CATEGORY:
+          return data.group_id || data.id || this.searchContext?.group?.id;
+        case PROJECTS_CATEGORY:
+        case ISSUES_CATEGORY:
+        case MERGE_REQUEST_CATEGORY:
+          return data.project_id || data.id || this.searchContext?.project?.id;
+        default:
+          return data.id;
+      }
+    },
+    getEntitytName(data) {
+      switch (data.category) {
+        case GROUPS_CATEGORY:
+        case RECENT_EPICS_CATEGORY:
+          return data.group_name || data.value || data.label || this.searchContext?.group?.name;
+        case PROJECTS_CATEGORY:
+        case ISSUES_CATEGORY:
+        case MERGE_REQUEST_CATEGORY:
+          return data.project_name || data.value || data.label || this.searchContext?.project?.name;
+        default:
+          return data.label;
+      }
+    },
   },
   AVATAR_SHAPE_OPTION_RECT,
 };
@@ -92,12 +138,22 @@ export default {
             <gl-avatar
               v-if="data.avatar_url !== undefined"
               :src="data.avatar_url"
-              :entity-id="data.id"
-              :entity-name="data.label"
+              :entity-id="getEntityId(data)"
+              :entity-name="getEntitytName(data)"
               :size="avatarSize(data)"
               :shape="$options.AVATAR_SHAPE_OPTION_RECT"
             />
-            <span v-safe-html="highlightedName(data.label)"></span>
+            <span class="gl-display-flex gl-flex-direction-column">
+              <span
+                v-safe-html="highlightedName(data.value || data.label)"
+                class="gl-text-gray-900"
+              ></span>
+              <span
+                v-if="data.value"
+                v-safe-html="truncateNamespace(data.label)"
+                class="gl-font-sm gl-text-gray-500"
+              ></span>
+            </span>
           </div>
         </gl-dropdown-item>
       </div>
diff --git a/app/assets/javascripts/header_search/constants.js b/app/assets/javascripts/header_search/constants.js
index 9cb08605444..045a552efb0 100644
--- a/app/assets/javascripts/header_search/constants.js
+++ b/app/assets/javascripts/header_search/constants.js
@@ -20,6 +20,12 @@ export const GROUPS_CATEGORY = 'Groups';
 
 export const PROJECTS_CATEGORY = 'Projects';
 
+export const ISSUES_CATEGORY = 'Recent issues';
+
+export const MERGE_REQUEST_CATEGORY = 'Recent merge requests';
+
+export const RECENT_EPICS_CATEGORY = 'Recent epics';
+
 export const LARGE_AVATAR_PX = 32;
 
 export const SMALL_AVATAR_PX = 16;