Add latest changes from gitlab-org/gitlab@master

2 files changed, 73 insertions, 21 deletions

diff --git a/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js b/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js
index b6be53fec99..7952661e2d2 100644
--- a/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js
+++ b/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js
@@ -8,6 +8,9 @@ import {
   LARGE_AVATAR_PX,
   PROJECTS_CATEGORY,
   SMALL_AVATAR_PX,
+  ISSUES_CATEGORY,
+  MERGE_REQUEST_CATEGORY,
+  RECENT_EPICS_CATEGORY,
 } from '~/header_search/constants';
 import {
   MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
@@ -50,7 +53,12 @@ describe('HeaderSearchAutocompleteItems', () => {
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findGlDropdownDividers = () => wrapper.findAllComponents(GlDropdownDivider);
   const findFirstDropdownItem = () => findDropdownItems().at(0);
-  const findDropdownItemTitles = () => findDropdownItems().wrappers.map((w) => w.text());
+  const findDropdownItemTitles = () =>
+    findDropdownItems().wrappers.map((w) => w.findAll('span').at(1).text());
+  const findDropdownItemSubTitles = () =>
+    findDropdownItems()
+      .wrappers.filter((w) => w.findAll('span').length > 2)
+      .map((w) => w.findAll('span').at(2).text());
   const findDropdownItemLinks = () => findDropdownItems().wrappers.map((w) => w.attributes('href'));
   const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findGlAvatar = () => wrapper.findComponent(GlAvatar);
@@ -95,10 +103,17 @@ describe('HeaderSearchAutocompleteItems', () => {
         });
 
         it('renders titles correctly', () => {
-          const expectedTitles = MOCK_SORTED_AUTOCOMPLETE_OPTIONS.map((o) => o.label);
+          const expectedTitles = MOCK_SORTED_AUTOCOMPLETE_OPTIONS.map((o) => o.value || o.label);
           expect(findDropdownItemTitles()).toStrictEqual(expectedTitles);
         });
 
+        it('renders sub-titles correctly', () => {
+          const expectedSubTitles = MOCK_SORTED_AUTOCOMPLETE_OPTIONS.filter((o) => o.value).map(
+            (o) => o.label,
+          );
+          expect(findDropdownItemSubTitles()).toStrictEqual(expectedSubTitles);
+        });
+
         it('renders links correctly', () => {
           const expectedLinks = MOCK_SORTED_AUTOCOMPLETE_OPTIONS.map((o) => o.url);
           expect(findDropdownItemLinks()).toStrictEqual(expectedLinks);
@@ -106,15 +121,30 @@ describe('HeaderSearchAutocompleteItems', () => {
       });
 
       describe.each`
-        item                                                             | showAvatar | avatarSize
-        ${{ data: [{ category: PROJECTS_CATEGORY, avatar_url: null }] }} | ${true}    | ${String(LARGE_AVATAR_PX)}
-        ${{ data: [{ category: GROUPS_CATEGORY, avatar_url: '/123' }] }} | ${true}    | ${String(LARGE_AVATAR_PX)}
-        ${{ data: [{ category: 'Help', avatar_url: '' }] }}              | ${true}    | ${String(SMALL_AVATAR_PX)}
-        ${{ data: [{ category: 'Settings' }] }}                          | ${false}   | ${false}
-      `('GlAvatar', ({ item, showAvatar, avatarSize }) => {
+        item                                                                                                          | showAvatar | avatarSize                 | searchContext                            | entityId | entityName
+        ${{ data: [{ category: PROJECTS_CATEGORY, avatar_url: null }] }}                                              | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ project: { id: 29 } }}               | ${'29'}  | ${''}
+        ${{ data: [{ category: GROUPS_CATEGORY, avatar_url: '/123' }] }}                                              | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ group: { id: 12 } }}                 | ${'12'}  | ${''}
+        ${{ data: [{ category: 'Help', avatar_url: '' }] }}                                                           | ${true}    | ${String(SMALL_AVATAR_PX)} | ${null}                                  | ${'0'}   | ${''}
+        ${{ data: [{ category: 'Settings' }] }}                                                                       | ${false}   | ${false}                   | ${null}                                  | ${false} | ${false}
+        ${{ data: [{ category: GROUPS_CATEGORY, avatar_url: null }] }}                                                | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ group: { id: 1, name: 'test1' } }}   | ${'1'}   | ${'test1'}
+        ${{ data: [{ category: PROJECTS_CATEGORY, avatar_url: null }] }}                                              | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ project: { id: 2, name: 'test2' } }} | ${'2'}   | ${'test2'}
+        ${{ data: [{ category: ISSUES_CATEGORY, avatar_url: null }] }}                                                | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ project: { id: 3, name: 'test3' } }} | ${'3'}   | ${'test3'}
+        ${{ data: [{ category: MERGE_REQUEST_CATEGORY, avatar_url: null }] }}                                         | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ project: { id: 4, name: 'test4' } }} | ${'4'}   | ${'test4'}
+        ${{ data: [{ category: RECENT_EPICS_CATEGORY, avatar_url: null }] }}                                          | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ group: { id: 5, name: 'test5' } }}   | ${'5'}   | ${'test5'}
+        ${{ data: [{ category: GROUPS_CATEGORY, avatar_url: null, group_id: 6, group_name: 'test6' }] }}              | ${true}    | ${String(LARGE_AVATAR_PX)} | ${null}                                  | ${'6'}   | ${'test6'}
+        ${{ data: [{ category: PROJECTS_CATEGORY, avatar_url: null, project_id: 7, project_name: 'test7' }] }}        | ${true}    | ${String(LARGE_AVATAR_PX)} | ${null}                                  | ${'7'}   | ${'test7'}
+        ${{ data: [{ category: ISSUES_CATEGORY, avatar_url: null, project_id: 8, project_name: 'test8' }] }}          | ${true}    | ${String(SMALL_AVATAR_PX)} | ${null}                                  | ${'8'}   | ${'test8'}
+        ${{ data: [{ category: MERGE_REQUEST_CATEGORY, avatar_url: null, project_id: 9, project_name: 'test9' }] }}   | ${true}    | ${String(SMALL_AVATAR_PX)} | ${null}                                  | ${'9'}   | ${'test9'}
+        ${{ data: [{ category: RECENT_EPICS_CATEGORY, avatar_url: null, group_id: 10, group_name: 'test10' }] }}      | ${true}    | ${String(SMALL_AVATAR_PX)} | ${null}                                  | ${'10'}  | ${'test10'}
+        ${{ data: [{ category: GROUPS_CATEGORY, avatar_url: null, group_id: 11, group_name: 'test11' }] }}            | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ group: { id: 1, name: 'test1' } }}   | ${'11'}  | ${'test11'}
+        ${{ data: [{ category: PROJECTS_CATEGORY, avatar_url: null, project_id: 12, project_name: 'test12' }] }}      | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ project: { id: 2, name: 'test2' } }} | ${'12'}  | ${'test12'}
+        ${{ data: [{ category: ISSUES_CATEGORY, avatar_url: null, project_id: 13, project_name: 'test13' }] }}        | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ project: { id: 3, name: 'test3' } }} | ${'13'}  | ${'test13'}
+        ${{ data: [{ category: MERGE_REQUEST_CATEGORY, avatar_url: null, project_id: 14, project_name: 'test14' }] }} | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ project: { id: 4, name: 'test4' } }} | ${'14'}  | ${'test14'}
+        ${{ data: [{ category: RECENT_EPICS_CATEGORY, avatar_url: null, group_id: 15, group_name: 'test15' }] }}      | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ group: { id: 5, name: 'test5' } }}   | ${'15'}  | ${'test15'}
+      `('GlAvatar', ({ item, showAvatar, avatarSize, searchContext, entityId, entityName }) => {
         describe(`when category is ${item.data[0].category} and avatar_url is ${item.data[0].avatar_url}`, () => {
           beforeEach(() => {
-            createComponent({}, { autocompleteGroupedSearchOptions: () => [item] });
+            createComponent({ searchContext }, { autocompleteGroupedSearchOptions: () => [item] });
           });
 
           it(`should${showAvatar ? '' : ' not'} render`, () => {
@@ -124,6 +154,16 @@ describe('HeaderSearchAutocompleteItems', () => {
           it(`should set avatarSize to ${avatarSize}`, () => {
             expect(findGlAvatar().exists() && findGlAvatar().attributes('size')).toBe(avatarSize);
           });
+
+          it(`should set avatar entityId to ${entityId}`, () => {
+            expect(findGlAvatar().exists() && findGlAvatar().attributes('entityid')).toBe(entityId);
+          });
+
+          it(`should set avatar entityName to ${entityName}`, () => {
+            expect(findGlAvatar().exists() && findGlAvatar().attributes('entityname')).toBe(
+              entityName,
+            );
+          });
         });
       });
     });
diff --git a/spec/frontend/header_search/mock_data.js b/spec/frontend/header_search/mock_data.js
index 358c224dfa6..b6f0fdcc29d 100644
--- a/spec/frontend/header_search/mock_data.js
+++ b/spec/frontend/header_search/mock_data.js
@@ -96,19 +96,22 @@ export const MOCK_AUTOCOMPLETE_OPTIONS_RES = [
   {
     category: 'Projects',
     id: 1,
-    label: 'MockProject1',
+    label: 'Gitlab Org / MockProject1',
+    value: 'MockProject1',
     url: 'project/1',
   },
   {
     category: 'Groups',
     id: 1,
-    label: 'MockGroup1',
+    label: 'Gitlab Org / MockGroup1',
+    value: 'MockGroup1',
     url: 'group/1',
   },
   {
     category: 'Projects',
     id: 2,
-    label: 'MockProject2',
+    label: 'Gitlab Org / MockProject2',
+    value: 'MockProject2',
     url: 'project/2',
   },
   {
@@ -123,21 +126,24 @@ export const MOCK_AUTOCOMPLETE_OPTIONS = [
     category: 'Projects',
     html_id: 'autocomplete-Projects-0',
     id: 1,
-    label: 'MockProject1',
+    label: 'Gitlab Org / MockProject1',
+    value: 'MockProject1',
     url: 'project/1',
   },
   {
     category: 'Groups',
     html_id: 'autocomplete-Groups-1',
     id: 1,
-    label: 'MockGroup1',
+    label: 'Gitlab Org / MockGroup1',
+    value: 'MockGroup1',
     url: 'group/1',
   },
   {
     category: 'Projects',
     html_id: 'autocomplete-Projects-2',
     id: 2,
-    label: 'MockProject2',
+    label: 'Gitlab Org / MockProject2',
+    value: 'MockProject2',
     url: 'project/2',
   },
   {
@@ -157,7 +163,8 @@ export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [
         html_id: 'autocomplete-Projects-0',
 
         id: 1,
-        label: 'MockProject1',
+        label: 'Gitlab Org / MockProject1',
+        value: 'MockProject1',
         url: 'project/1',
       },
       {
@@ -165,7 +172,8 @@ export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [
         html_id: 'autocomplete-Projects-2',
 
         id: 2,
-        label: 'MockProject2',
+        label: 'Gitlab Org / MockProject2',
+        value: 'MockProject2',
         url: 'project/2',
       },
     ],
@@ -178,7 +186,8 @@ export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [
         html_id: 'autocomplete-Groups-1',
 
         id: 1,
-        label: 'MockGroup1',
+        label: 'Gitlab Org / MockGroup1',
+        value: 'MockGroup1',
         url: 'group/1',
       },
     ],
@@ -202,21 +211,24 @@ export const MOCK_SORTED_AUTOCOMPLETE_OPTIONS = [
     category: 'Projects',
     html_id: 'autocomplete-Projects-0',
     id: 1,
-    label: 'MockProject1',
+    label: 'Gitlab Org / MockProject1',
+    value: 'MockProject1',
     url: 'project/1',
   },
   {
     category: 'Projects',
     html_id: 'autocomplete-Projects-2',
     id: 2,
-    label: 'MockProject2',
+    label: 'Gitlab Org / MockProject2',
+    value: 'MockProject2',
     url: 'project/2',
   },
   {
     category: 'Groups',
     html_id: 'autocomplete-Groups-1',
     id: 1,
-    label: 'MockGroup1',
+    label: 'Gitlab Org / MockGroup1',
+    value: 'MockGroup1',
     url: 'group/1',
   },
   {