Add latest changes from gitlab-org/gitlab@master

4 files changed, 307 insertions, 86 deletions

diff --git a/spec/frontend/header_search/components/app_spec.js b/spec/frontend/header_search/components/app_spec.js
index f0de5b083ae..5f2b71a22c5 100644
--- a/spec/frontend/header_search/components/app_spec.js
+++ b/spec/frontend/header_search/components/app_spec.js
@@ -1,22 +1,32 @@
-import { GlSearchBoxByType } from '@gitlab/ui';
+import { GlSearchBoxByType, GlToken, GlIcon } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { s__, sprintf } from '~/locale';
 import HeaderSearchApp from '~/header_search/components/app.vue';
 import HeaderSearchAutocompleteItems from '~/header_search/components/header_search_autocomplete_items.vue';
 import HeaderSearchDefaultItems from '~/header_search/components/header_search_default_items.vue';
 import HeaderSearchScopedItems from '~/header_search/components/header_search_scoped_items.vue';
-import { SEARCH_INPUT_DESCRIPTION, SEARCH_RESULTS_DESCRIPTION } from '~/header_search/constants';
+import {
+  SEARCH_INPUT_DESCRIPTION,
+  SEARCH_RESULTS_DESCRIPTION,
+  SEARCH_BOX_INDEX,
+  ICON_PROJECT,
+  ICON_GROUP,
+  ICON_SUBGROUP,
+  SCOPE_TOKEN_MAX_LENGTH,
+} from '~/header_search/constants';
 import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboard_navigation.vue';
 import { ENTER_KEY } from '~/lib/utils/keys';
 import { visitUrl } from '~/lib/utils/url_utility';
+import { truncate } from '~/lib/utils/text_utility';
 import {
   MOCK_SEARCH,
   MOCK_SEARCH_QUERY,
   MOCK_USERNAME,
   MOCK_DEFAULT_SEARCH_OPTIONS,
   MOCK_SCOPED_SEARCH_OPTIONS,
-  MOCK_SORTED_AUTOCOMPLETE_OPTIONS,
+  MOCK_SEARCH_CONTEXT_FULL,
 } from '../mock_data';
 
 Vue.use(Vuex);
@@ -52,11 +62,26 @@ describe('HeaderSearchApp', () => {
     });
   };
 
+  const formatScopeName = (scopeName) => {
+    if (!scopeName) {
+      return false;
+    }
+    const searchResultsScope = s__('GlobalSearch|in %{scope}');
+    return truncate(
+      sprintf(searchResultsScope, {
+        scope: scopeName,
+      }),
+      SCOPE_TOKEN_MAX_LENGTH,
+    );
+  };
+
   afterEach(() => {
     wrapper.destroy();
   });
 
+  const findHeaderSearchForm = () => wrapper.findByTestId('header-search-form');
   const findHeaderSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
+  const findScopeToken = () => wrapper.findComponent(GlToken);
   const findHeaderSearchDropdown = () => wrapper.findByTestId('header-search-dropdown-menu');
   const findHeaderSearchDefaultItems = () => wrapper.findComponent(HeaderSearchDefaultItems);
   const findHeaderSearchScopedItems = () => wrapper.findComponent(HeaderSearchScopedItems);
@@ -106,53 +131,38 @@ describe('HeaderSearchApp', () => {
     });
 
     describe.each`
-      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',
-      ({ search, showDefault, showScoped, showAutocomplete, showDropdownNavigation }) => {
-        describe(`when search is ${search}`, () => {
-          beforeEach(() => {
-            window.gon.current_username = MOCK_USERNAME;
-            createComponent(
-              { search },
-              {
-                autocompleteGroupedSearchOptions: () =>
-                  search.match(/^[A-Za-z]+$/g) ? MOCK_SORTED_AUTOCOMPLETE_OPTIONS : [],
-              },
-            );
-            findHeaderSearchInput().vm.$emit('click');
-          });
+      search         | showDefault | showScoped | showAutocomplete
+      ${null}        | ${true}     | ${false}   | ${false}
+      ${''}          | ${true}     | ${false}   | ${false}
+      ${'t'}         | ${false}    | ${false}   | ${true}
+      ${'te'}        | ${false}    | ${false}   | ${true}
+      ${'tes'}       | ${false}    | ${true}    | ${true}
+      ${MOCK_SEARCH} | ${false}    | ${true}    | ${true}
+    `('Header Search Dropdown Items', ({ search, showDefault, showScoped, showAutocomplete }) => {
+      describe(`when search is ${search}`, () => {
+        beforeEach(() => {
+          window.gon.current_username = MOCK_USERNAME;
+          createComponent({ search }, {});
+          findHeaderSearchInput().vm.$emit('click');
+        });
 
-          it(`should${showDefault ? '' : ' not'} render the Default Dropdown Items`, () => {
-            expect(findHeaderSearchDefaultItems().exists()).toBe(showDefault);
-          });
+        it(`should${showDefault ? '' : ' not'} render the Default Dropdown Items`, () => {
+          expect(findHeaderSearchDefaultItems().exists()).toBe(showDefault);
+        });
 
-          it(`should${showScoped ? '' : ' not'} render the Scoped Dropdown Items`, () => {
-            expect(findHeaderSearchScopedItems().exists()).toBe(showScoped);
-          });
+        it(`should${showScoped ? '' : ' not'} render the Scoped Dropdown Items`, () => {
+          expect(findHeaderSearchScopedItems().exists()).toBe(showScoped);
+        });
 
-          it(`should${
-            showAutocomplete ? '' : ' not'
-          } render the Autocomplete Dropdown Items`, () => {
-            expect(findHeaderSearchAutocompleteItems().exists()).toBe(showAutocomplete);
-          });
+        it(`should${showAutocomplete ? '' : ' not'} render the Autocomplete Dropdown Items`, () => {
+          expect(findHeaderSearchAutocompleteItems().exists()).toBe(showAutocomplete);
+        });
 
-          it(`should${
-            showDropdownNavigation ? '' : ' not'
-          } render the Dropdown Navigation Component`, () => {
-            expect(findDropdownKeyboardNavigation().exists()).toBe(showDropdownNavigation);
-          });
+        it(`should render the Dropdown Navigation Component`, () => {
+          expect(findDropdownKeyboardNavigation().exists()).toBe(true);
         });
-      },
-    );
+      });
+    });
 
     describe.each`
       username         | showDropdown | expectedDesc
@@ -185,12 +195,18 @@ describe('HeaderSearchApp', () => {
     `(
       'Search Results Description',
       ({ username, showDropdown, search, loading, searchOptions, expectedDesc }) => {
-        describe(`search is ${search}, loading is ${loading}, and showSearchDropdown is ${
-          Boolean(username) && showDropdown
-        }`, () => {
+        describe(`search is "${search}", loading is ${loading}, and showSearchDropdown is ${showDropdown}`, () => {
           beforeEach(() => {
             window.gon.current_username = username;
-            createComponent({ search, loading }, { searchOptions: () => searchOptions });
+            createComponent(
+              {
+                search,
+                loading,
+              },
+              {
+                searchOptions: () => searchOptions,
+              },
+            );
             findHeaderSearchInput().vm.$emit(showDropdown ? 'click' : '');
           });
 
@@ -200,6 +216,121 @@ describe('HeaderSearchApp', () => {
         });
       },
     );
+
+    describe('input box', () => {
+      describe.each`
+        search         | searchOptions                      | hasToken
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[0]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[1]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[2]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[3]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[4]]} | ${true}
+        ${'te'}        | ${[MOCK_SCOPED_SEARCH_OPTIONS[5]]} | ${false}
+        ${'x'}         | ${[]}                              | ${false}
+      `('token', ({ search, searchOptions, hasToken }) => {
+        beforeEach(() => {
+          window.gon.current_username = MOCK_USERNAME;
+          createComponent(
+            { search },
+            {
+              searchOptions: () => searchOptions,
+            },
+          );
+        });
+
+        it(`${hasToken ? 'is' : 'is NOT'} rendered when data set has type "${
+          searchOptions[0]?.html_id
+        }"`, () => {
+          expect(findScopeToken().exists()).toBe(hasToken);
+        });
+
+        it(`text ${hasToken ? 'is correctly' : 'is NOT'} rendered when text is "${
+          searchOptions[0]?.scope || searchOptions[0]?.description
+        }"`, () => {
+          expect(findScopeToken().exists() && findScopeToken().text()).toBe(
+            formatScopeName(searchOptions[0]?.scope || searchOptions[0]?.description),
+          );
+        });
+      });
+    });
+
+    describe('form wrapper', () => {
+      describe.each`
+        searchContext               | search         | searchOptions
+        ${MOCK_SEARCH_CONTEXT_FULL} | ${null}        | ${[]}
+        ${MOCK_SEARCH_CONTEXT_FULL} | ${MOCK_SEARCH} | ${[]}
+        ${MOCK_SEARCH_CONTEXT_FULL} | ${MOCK_SEARCH} | ${MOCK_SCOPED_SEARCH_OPTIONS}
+        ${null}                     | ${MOCK_SEARCH} | ${MOCK_SCOPED_SEARCH_OPTIONS}
+        ${null}                     | ${null}        | ${MOCK_SCOPED_SEARCH_OPTIONS}
+        ${null}                     | ${null}        | ${[]}
+      `('', ({ searchContext, search, searchOptions }) => {
+        beforeEach(() => {
+          window.gon.current_username = MOCK_USERNAME;
+
+          createComponent({ search, searchContext }, { searchOptions: () => searchOptions });
+
+          findHeaderSearchInput().vm.$emit('click');
+        });
+
+        const hasIcon = Boolean(searchContext?.group);
+        const isSearching = Boolean(search);
+        const isActive = Boolean(searchOptions.length > 0);
+
+        it(`${hasIcon ? 'with' : 'without'} search context classes contain "${
+          hasIcon ? 'has-icon' : 'has-no-icon'
+        }"`, () => {
+          const iconClassRegex = hasIcon ? 'has-icon' : 'has-no-icon';
+          expect(findHeaderSearchForm().classes()).toContain(iconClassRegex);
+        });
+
+        it(`${isSearching ? 'with' : 'without'} search string classes contain "${
+          isSearching ? 'is-searching' : 'is-not-searching'
+        }"`, () => {
+          const iconClassRegex = isSearching ? 'is-searching' : 'is-not-searching';
+          expect(findHeaderSearchForm().classes()).toContain(iconClassRegex);
+        });
+
+        it(`${isActive ? 'with' : 'without'} search results classes contain "${
+          isActive ? 'is-active' : 'is-not-active'
+        }"`, () => {
+          const iconClassRegex = isActive ? 'is-active' : 'is-not-active';
+          expect(findHeaderSearchForm().classes()).toContain(iconClassRegex);
+        });
+      });
+    });
+
+    describe.each`
+      search         | searchOptions                      | hasIcon  | iconName
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[0]]} | ${true}  | ${ICON_PROJECT}
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[2]]} | ${true}  | ${ICON_GROUP}
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[3]]} | ${true}  | ${ICON_SUBGROUP}
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[4]]} | ${false} | ${false}
+    `('token', ({ search, searchOptions, hasIcon, iconName }) => {
+      beforeEach(() => {
+        window.gon.current_username = MOCK_USERNAME;
+        createComponent(
+          { search },
+          {
+            searchOptions: () => searchOptions,
+          },
+        );
+      });
+
+      it(`icon for data set type "${searchOptions[0]?.html_id}" ${
+        hasIcon ? 'is' : 'is NOT'
+      } rendered`, () => {
+        expect(findScopeToken().findComponent(GlIcon).exists()).toBe(hasIcon);
+      });
+
+      it(`render ${iconName ? `"${iconName}"` : 'NO'} icon for data set type "${
+        searchOptions[0]?.html_id
+      }"`, () => {
+        expect(
+          findScopeToken().findComponent(GlIcon).exists() &&
+            findScopeToken().findComponent(GlIcon).attributes('name'),
+        ).toBe(iconName);
+      });
+    });
   });
 
   describe('events', () => {
@@ -285,18 +416,20 @@ describe('HeaderSearchApp', () => {
   });
 
   describe('computed', () => {
-    describe('currentFocusedOption', () => {
-      const MOCK_INDEX = 1;
-
+    describe.each`
+      MOCK_INDEX          | search
+      ${1}                | ${null}
+      ${SEARCH_BOX_INDEX} | ${'test'}
+      ${2}                | ${'test1'}
+    `('currentFocusedOption', ({ MOCK_INDEX, search }) => {
       beforeEach(() => {
-        createComponent();
+        createComponent({ search });
         window.gon.current_username = MOCK_USERNAME;
         findHeaderSearchInput().vm.$emit('click');
       });
 
-      it(`when currentFocusIndex changes to ${MOCK_INDEX} updates the data to searchOptions[${MOCK_INDEX}]`, async () => {
+      it(`when currentFocusIndex changes to ${MOCK_INDEX} updates the data to searchOptions[${MOCK_INDEX}]`, () => {
         findDropdownKeyboardNavigation().vm.$emit('change', MOCK_INDEX);
-        await nextTick();
         expect(wrapper.vm.currentFocusedOption).toBe(MOCK_DEFAULT_SEARCH_OPTIONS[MOCK_INDEX]);
       });
     });
@@ -308,15 +441,25 @@ describe('HeaderSearchApp', () => {
         createComponent();
       });
 
-      it('onKey-enter submits a search', async () => {
+      it('onKey-enter submits a search', () => {
         findHeaderSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
 
-        await nextTick();
-
         expect(visitUrl).toHaveBeenCalledWith(MOCK_SEARCH_QUERY);
       });
     });
 
+    describe('with less than min characters and no dropdown results', () => {
+      beforeEach(() => {
+        createComponent({ search: 'x' });
+      });
+
+      it('onKey-enter will NOT submit a search', () => {
+        findHeaderSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
+
+        expect(visitUrl).not.toHaveBeenCalledWith(MOCK_SEARCH_QUERY);
+      });
+    });
+
     describe('with currentFocusedOption', () => {
       const MOCK_INDEX = 1;
 
@@ -326,9 +469,9 @@ describe('HeaderSearchApp', () => {
         findHeaderSearchInput().vm.$emit('click');
       });
 
-      it('onKey-enter clicks the selected dropdown item rather than submitting a search', async () => {
+      it('onKey-enter clicks the selected dropdown item rather than submitting a search', () => {
         findDropdownKeyboardNavigation().vm.$emit('change', MOCK_INDEX);
-        await nextTick();
+
         findHeaderSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
         expect(visitUrl).toHaveBeenCalledWith(MOCK_DEFAULT_SEARCH_OPTIONS[MOCK_INDEX].url);
       });
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 8788fb23458..2db9f71d702 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,9 +1,11 @@
-import { GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
+import { GlDropdownItem, GlToken, GlIcon } 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 { truncate } from '~/lib/utils/text_utility';
+import { MSG_IN_ALL_GITLAB, SCOPE_TOKEN_MAX_LENGTH } from '~/header_search/constants';
 import {
   MOCK_SEARCH,
   MOCK_SCOPED_SEARCH_OPTIONS,
@@ -41,9 +43,12 @@ 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 findScopeTokens = () => wrapper.findAllComponents(GlToken);
+  const findScopeTokensText = () => findScopeTokens().wrappers.map((w) => trimText(w.text()));
+  const findScopeTokensIcons = () =>
+    findScopeTokens().wrappers.map((w) => w.findAllComponents(GlIcon));
   const findDropdownItemAriaLabels = () =>
     findDropdownItems().wrappers.map((w) => trimText(w.attributes('aria-label')));
   const findDropdownItemLinks = () => findDropdownItems().wrappers.map((w) => w.attributes('href'));
@@ -59,15 +64,31 @@ describe('HeaderSearchScopedItems', () => {
       });
 
       it('renders titles correctly', () => {
+        findDropdownItemTitles().forEach((title) => expect(title).toContain(MOCK_SEARCH));
+      });
+
+      it('renders scope names correctly', () => {
         const expectedTitles = MOCK_SCOPED_SEARCH_OPTIONS.map((o) =>
-          trimText(`"${MOCK_SEARCH}" ${o.description} ${o.scope || ''}`),
+          truncate(trimText(`in ${o.description || o.scope}`), SCOPE_TOKEN_MAX_LENGTH),
         );
-        expect(findDropdownItemTitles()).toStrictEqual(expectedTitles);
+
+        expect(findScopeTokensText()).toStrictEqual(expectedTitles);
+      });
+
+      it('renders scope icons correctly', () => {
+        findScopeTokensIcons().forEach((icon, i) => {
+          const w = icon.wrappers[0];
+          expect(w?.attributes('name')).toBe(MOCK_SCOPED_SEARCH_OPTIONS[i].icon);
+        });
+      });
+
+      it(`renders scope ${MSG_IN_ALL_GITLAB} correctly`, () => {
+        expect(findScopeTokens().at(-1).findComponent(GlIcon).exists()).toBe(false);
       });
 
       it('renders aria-labels correctly', () => {
         const expectedLabels = MOCK_SCOPED_SEARCH_OPTIONS.map((o) =>
-          trimText(`${MOCK_SEARCH} ${o.description} ${o.scope || ''}`),
+          trimText(`${MOCK_SEARCH} ${o.description || o.icon} ${o.scope || ''}`),
         );
         expect(findDropdownItemAriaLabels()).toStrictEqual(expectedLabels);
       });
@@ -98,21 +119,5 @@ 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 b6f0fdcc29d..8ccd7fb17e3 100644
--- a/spec/frontend/header_search/mock_data.js
+++ b/spec/frontend/header_search/mock_data.js
@@ -4,9 +4,12 @@ import {
   MSG_MR_ASSIGNED_TO_ME,
   MSG_MR_IM_REVIEWER,
   MSG_MR_IVE_CREATED,
-  MSG_IN_PROJECT,
-  MSG_IN_GROUP,
   MSG_IN_ALL_GITLAB,
+  PROJECTS_CATEGORY,
+  ICON_PROJECT,
+  GROUPS_CATEGORY,
+  ICON_GROUP,
+  ICON_SUBGROUP,
 } from '~/header_search/constants';
 
 export const MOCK_USERNAME = 'anyone';
@@ -27,12 +30,24 @@ export const MOCK_PROJECT = {
   path: '/mock-project',
 };
 
+export const MOCK_PROJECT_LONG = {
+  id: 124,
+  name: 'Mock Project Name That Is Ridiculously Long And It Goes Forever',
+  path: '/mock-project-name-that-is-ridiculously-long-and-it-goes-forever',
+};
+
 export const MOCK_GROUP = {
   id: 321,
   name: 'MockGroup',
   path: '/mock-group',
 };
 
+export const MOCK_SUBGROUP = {
+  id: 322,
+  name: 'MockSubGroup',
+  path: `${MOCK_GROUP}/mock-subgroup`,
+};
+
 export const MOCK_SEARCH_QUERY = 'http://gitlab.com/search?search=test';
 
 export const MOCK_SEARCH = 'test';
@@ -44,6 +59,20 @@ export const MOCK_SEARCH_CONTEXT = {
   group_metadata: {},
 };
 
+export const MOCK_SEARCH_CONTEXT_FULL = {
+  group: {
+    id: 31,
+    name: 'testGroup',
+    full_name: 'testGroup',
+  },
+  group_metadata: {
+    group_path: 'testGroup',
+    name: 'testGroup',
+    issues_path: '/groups/testGroup/-/issues',
+    mr_path: '/groups/testGroup/-/merge_requests',
+  },
+};
+
 export const MOCK_DEFAULT_SEARCH_OPTIONS = [
   {
     html_id: 'default-issues-assigned',
@@ -76,13 +105,51 @@ export const MOCK_SCOPED_SEARCH_OPTIONS = [
   {
     html_id: 'scoped-in-project',
     scope: MOCK_PROJECT.name,
-    description: MSG_IN_PROJECT,
+    scopeCategory: PROJECTS_CATEGORY,
+    icon: ICON_PROJECT,
+    url: MOCK_PROJECT.path,
+  },
+  {
+    html_id: 'scoped-in-project-long',
+    scope: MOCK_PROJECT_LONG.name,
+    scopeCategory: PROJECTS_CATEGORY,
+    icon: ICON_PROJECT,
+    url: MOCK_PROJECT_LONG.path,
+  },
+  {
+    html_id: 'scoped-in-group',
+    scope: MOCK_GROUP.name,
+    scopeCategory: GROUPS_CATEGORY,
+    icon: ICON_GROUP,
+    url: MOCK_GROUP.path,
+  },
+  {
+    html_id: 'scoped-in-subgroup',
+    scope: MOCK_SUBGROUP.name,
+    scopeCategory: GROUPS_CATEGORY,
+    icon: ICON_SUBGROUP,
+    url: MOCK_SUBGROUP.path,
+  },
+  {
+    html_id: 'scoped-in-all',
+    description: MSG_IN_ALL_GITLAB,
+    url: MOCK_ALL_PATH,
+  },
+];
+
+export const MOCK_SCOPED_SEARCH_OPTIONS_DEF = [
+  {
+    html_id: 'scoped-in-project',
+    scope: MOCK_PROJECT.name,
+    scopeCategory: PROJECTS_CATEGORY,
+    icon: ICON_PROJECT,
     url: MOCK_PROJECT.path,
   },
   {
     html_id: 'scoped-in-group',
     scope: MOCK_GROUP.name,
-    description: MSG_IN_GROUP,
+    scopeCategory: GROUPS_CATEGORY,
+    icon: ICON_GROUP,
     url: MOCK_GROUP.path,
   },
   {
diff --git a/spec/frontend/header_search/store/getters_spec.js b/spec/frontend/header_search/store/getters_spec.js
index d3510de1439..c76be3c0360 100644
--- a/spec/frontend/header_search/store/getters_spec.js
+++ b/spec/frontend/header_search/store/getters_spec.js
@@ -9,6 +9,7 @@ import {
   MOCK_SEARCH_CONTEXT,
   MOCK_DEFAULT_SEARCH_OPTIONS,
   MOCK_SCOPED_SEARCH_OPTIONS,
+  MOCK_SCOPED_SEARCH_OPTIONS_DEF,
   MOCK_PROJECT,
   MOCK_GROUP,
   MOCK_ALL_PATH,
@@ -284,7 +285,7 @@ describe('Header Search Store Getters', () => {
 
     it('returns the correct array', () => {
       expect(getters.scopedSearchOptions(state, mockGetters)).toStrictEqual(
-        MOCK_SCOPED_SEARCH_OPTIONS,
+        MOCK_SCOPED_SEARCH_OPTIONS_DEF,
       );
     });
   });
@@ -308,6 +309,11 @@ describe('Header Search Store Getters', () => {
     ${MOCK_SEARCH} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${[]}                                | ${MOCK_SCOPED_SEARCH_OPTIONS}
     ${MOCK_SEARCH} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${[]}                         | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SORTED_AUTOCOMPLETE_OPTIONS}
     ${MOCK_SEARCH} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS.concat(MOCK_SORTED_AUTOCOMPLETE_OPTIONS)}
+    ${1}           | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${[]}                         | ${[]}                                | ${[]}
+    ${'('}         | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${[]}                         | ${[]}                                | ${[]}
+    ${'t'}         | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SORTED_AUTOCOMPLETE_OPTIONS}
+    ${'te'}        | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SORTED_AUTOCOMPLETE_OPTIONS}
+    ${'tes'}       | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS.concat(MOCK_SORTED_AUTOCOMPLETE_OPTIONS)}
   `(
     'searchOptions',
     ({