Add latest changes from gitlab-org/gitlab@master

4 files changed, 173 insertions, 7 deletions

diff --git a/spec/frontend/header_search/components/app_spec.js b/spec/frontend/header_search/components/app_spec.js
index dcbeeeffb2d..f0de5b083ae 100644
--- a/spec/frontend/header_search/components/app_spec.js
+++ b/spec/frontend/header_search/components/app_spec.js
@@ -16,6 +16,7 @@ import {
   MOCK_USERNAME,
   MOCK_DEFAULT_SEARCH_OPTIONS,
   MOCK_SCOPED_SEARCH_OPTIONS,
+  MOCK_SORTED_AUTOCOMPLETE_OPTIONS,
 } from '../mock_data';
 
 Vue.use(Vuex);
@@ -108,6 +109,11 @@ describe('HeaderSearchApp', () => {
       search         | showDefault | showScoped | showAutocomplete | showDropdownNavigation
       ${null}        | ${true}     | ${false}   | ${false}         | ${true}
       ${''}          | ${true}     | ${false}   | ${false}         | ${true}
+      ${'1'}         | ${false}    | ${false}   | ${false}         | ${false}
+      ${')'}         | ${false}    | ${false}   | ${false}         | ${false}
+      ${'t'}         | ${false}    | ${false}   | ${true}          | ${true}
+      ${'te'}        | ${false}    | ${true}    | ${true}          | ${true}
+      ${'tes'}       | ${false}    | ${true}    | ${true}          | ${true}
       ${MOCK_SEARCH} | ${false}    | ${true}    | ${true}          | ${true}
     `(
       'Header Search Dropdown Items',
@@ -115,7 +121,13 @@ describe('HeaderSearchApp', () => {
         describe(`when search is ${search}`, () => {
           beforeEach(() => {
             window.gon.current_username = MOCK_USERNAME;
-            createComponent({ search });
+            createComponent(
+              { search },
+              {
+                autocompleteGroupedSearchOptions: () =>
+                  search.match(/^[A-Za-z]+$/g) ? MOCK_SORTED_AUTOCOMPLETE_OPTIONS : [],
+              },
+            );
             findHeaderSearchInput().vm.$emit('click');
           });
 
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 f427482be46..b6be53fec99 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
@@ -1,4 +1,4 @@
-import { GlDropdownItem, GlLoadingIcon, GlAvatar, GlAlert } from '@gitlab/ui';
+import { GlDropdownItem, GlLoadingIcon, GlAvatar, GlAlert, GlDropdownDivider } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
@@ -9,7 +9,14 @@ import {
   PROJECTS_CATEGORY,
   SMALL_AVATAR_PX,
 } from '~/header_search/constants';
-import { MOCK_GROUPED_AUTOCOMPLETE_OPTIONS, MOCK_SORTED_AUTOCOMPLETE_OPTIONS } from '../mock_data';
+import {
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
+  MOCK_SORTED_AUTOCOMPLETE_OPTIONS,
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_SETTINGS_HELP,
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_HELP,
+  MOCK_SEARCH,
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_2,
+} from '../mock_data';
 
 Vue.use(Vuex);
 
@@ -41,6 +48,7 @@ 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 findDropdownItemLinks = () => findDropdownItems().wrappers.map((w) => w.attributes('href'));
@@ -140,6 +148,34 @@ describe('HeaderSearchAutocompleteItems', () => {
         });
       });
     });
+
+    describe.each`
+      search         | items                                              | dividerCount
+      ${null}        | ${[]}                                              | ${0}
+      ${''}          | ${[]}                                              | ${0}
+      ${'1'}         | ${[]}                                              | ${0}
+      ${')'}         | ${[]}                                              | ${0}
+      ${'t'}         | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_SETTINGS_HELP} | ${1}
+      ${'te'}        | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_HELP}          | ${0}
+      ${'tes'}       | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_2}             | ${1}
+      ${MOCK_SEARCH} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_2}             | ${1}
+    `('Header Search Dropdown Dividers', ({ search, items, dividerCount }) => {
+      describe(`when search is ${search}`, () => {
+        beforeEach(() => {
+          createComponent(
+            { search },
+            {
+              autocompleteGroupedSearchOptions: () => items,
+            },
+            {},
+          );
+        });
+
+        it(`component should have ${dividerCount} dividers`, () => {
+          expect(findGlDropdownDividers()).toHaveLength(dividerCount);
+        });
+      });
+    });
   });
 
   describe('watchers', () => {
diff --git a/spec/frontend/header_search/components/header_search_scoped_items_spec.js b/spec/frontend/header_search/components/header_search_scoped_items_spec.js
index a65b4d8b813..8788fb23458 100644
--- a/spec/frontend/header_search/components/header_search_scoped_items_spec.js
+++ b/spec/frontend/header_search/components/header_search_scoped_items_spec.js
@@ -1,17 +1,21 @@
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { trimText } from 'helpers/text_helper';
 import HeaderSearchScopedItems from '~/header_search/components/header_search_scoped_items.vue';
-import { MOCK_SEARCH, MOCK_SCOPED_SEARCH_OPTIONS } from '../mock_data';
+import {
+  MOCK_SEARCH,
+  MOCK_SCOPED_SEARCH_OPTIONS,
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
+} from '../mock_data';
 
 Vue.use(Vuex);
 
 describe('HeaderSearchScopedItems', () => {
   let wrapper;
 
-  const createComponent = (initialState, props) => {
+  const createComponent = (initialState, mockGetters, props) => {
     const store = new Vuex.Store({
       state: {
         search: MOCK_SEARCH,
@@ -19,6 +23,8 @@ describe('HeaderSearchScopedItems', () => {
       },
       getters: {
         scopedSearchOptions: () => MOCK_SCOPED_SEARCH_OPTIONS,
+        autocompleteGroupedSearchOptions: () => MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
+        ...mockGetters,
       },
     });
 
@@ -35,6 +41,7 @@ describe('HeaderSearchScopedItems', () => {
   });
 
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findGlDropdownDivider = () => wrapper.findComponent(GlDropdownDivider);
   const findFirstDropdownItem = () => findDropdownItems().at(0);
   const findDropdownItemTitles = () => findDropdownItems().wrappers.map((w) => trimText(w.text()));
   const findDropdownItemAriaLabels = () =>
@@ -79,7 +86,7 @@ describe('HeaderSearchScopedItems', () => {
     `('isOptionFocused', ({ currentFocusedOption, isFocused, ariaSelected }) => {
       describe(`when currentFocusedOption.html_id is ${currentFocusedOption?.html_id}`, () => {
         beforeEach(() => {
-          createComponent({}, { currentFocusedOption });
+          createComponent({}, {}, { currentFocusedOption });
         });
 
         it(`should${isFocused ? '' : ' not'} have gl-bg-gray-50 applied`, () => {
@@ -91,5 +98,21 @@ describe('HeaderSearchScopedItems', () => {
         });
       });
     });
+
+    describe.each`
+      autosuggestResults                   | showDivider
+      ${[]}                                | ${false}
+      ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${true}
+    `('scoped search items', ({ autosuggestResults, showDivider }) => {
+      describe(`when when we have ${autosuggestResults.length} auto-sugest results`, () => {
+        beforeEach(() => {
+          createComponent({}, { autocompleteGroupedSearchOptions: () => autosuggestResults }, {});
+        });
+
+        it(`divider should${showDivider ? '' : ' not'} be shown`, () => {
+          expect(findGlDropdownDivider().exists()).toBe(showDivider);
+        });
+      });
+    });
   });
 });
diff --git a/spec/frontend/header_search/mock_data.js b/spec/frontend/header_search/mock_data.js
index 1d980679547..358c224dfa6 100644
--- a/spec/frontend/header_search/mock_data.js
+++ b/spec/frontend/header_search/mock_data.js
@@ -226,3 +226,98 @@ export const MOCK_SORTED_AUTOCOMPLETE_OPTIONS = [
     url: 'help/gitlab',
   },
 ];
+
+export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_HELP = [
+  {
+    category: 'Help',
+    data: [
+      {
+        html_id: 'autocomplete-Help-1',
+        category: 'Help',
+        label: 'Rake Tasks Help',
+        url: '/help/raketasks/index',
+      },
+      {
+        html_id: 'autocomplete-Help-2',
+        category: 'Help',
+        label: 'System Hooks Help',
+        url: '/help/system_hooks/system_hooks',
+      },
+    ],
+  },
+];
+
+export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_SETTINGS_HELP = [
+  {
+    category: 'Settings',
+    data: [
+      {
+        html_id: 'autocomplete-Settings-0',
+        category: 'Settings',
+        label: 'User settings',
+        url: '/-/profile',
+      },
+      {
+        html_id: 'autocomplete-Settings-3',
+        category: 'Settings',
+        label: 'Admin Section',
+        url: '/admin',
+      },
+    ],
+  },
+  {
+    category: 'Help',
+    data: [
+      {
+        html_id: 'autocomplete-Help-1',
+        category: 'Help',
+        label: 'Rake Tasks Help',
+        url: '/help/raketasks/index',
+      },
+      {
+        html_id: 'autocomplete-Help-2',
+        category: 'Help',
+        label: 'System Hooks Help',
+        url: '/help/system_hooks/system_hooks',
+      },
+    ],
+  },
+];
+
+export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_2 = [
+  {
+    category: 'Groups',
+    data: [
+      {
+        html_id: 'autocomplete-Groups-0',
+        category: 'Groups',
+        id: 148,
+        label: 'Jashkenas / Test Subgroup / test-subgroup',
+        url: '/jashkenas/test-subgroup/test-subgroup',
+        avatar_url: '',
+      },
+      {
+        html_id: 'autocomplete-Groups-1',
+        category: 'Groups',
+        id: 147,
+        label: 'Jashkenas / Test Subgroup',
+        url: '/jashkenas/test-subgroup',
+        avatar_url: '',
+      },
+    ],
+  },
+  {
+    category: 'Projects',
+    data: [
+      {
+        html_id: 'autocomplete-Projects-2',
+        category: 'Projects',
+        id: 1,
+        value: 'Gitlab Test',
+        label: 'Gitlab Org / Gitlab Test',
+        url: '/gitlab-org/gitlab-test',
+        avatar_url: '/uploads/-/system/project/avatar/1/icons8-gitlab-512.png',
+      },
+    ],
+  },
+];