Fixed not updating properly other scopes when multimatch search term changes

app/assets/javascripts/search/store/actions.js

 import { omitBy } from 'lodash';
+import { nextTick } from 'vue';
 import Api from '~/api';
 import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
@@ -23,6 +24,7 @@ import {
   prepareSearchAggregations,
   setDataToLS,
   skipBlobESCount,
+  buildDocumentTitle,
 } from './utils';
 
 export const fetchGroups = ({ commit }, search) => {
@@ -103,7 +105,45 @@ export const setFrequentProject = ({ state, commit }, item) => {
   commit(types.LOAD_FREQUENT_ITEMS, { key: PROJECTS_LOCAL_STORAGE_KEY, data: frequentItems });
 };
 
-export const setQuery = ({ state, commit, getters }, { key, value }) => {
+export const fetchSidebarCount = ({ commit, state }) => {
+  const items = Object.values(state.navigation)
+    .filter(
+      (navigationItem) =>
+        !navigationItem.active &&
+        navigationItem.count_link &&
+        skipBlobESCount(state, navigationItem.scope),
+    )
+    .map((navItem) => {
+      const navigationItem = { ...navItem };
+
+      const modifications = {
+        search: state.query?.search || '*',
+      };
+
+      if (navigationItem.scope === SCOPE_BLOB && loadDataFromLS(LS_REGEX_HANDLE)) {
+        modifications[REGEX_PARAM] = true;
+      }
+
+      navigationItem.count_link = setUrlParams(
+        modifications,
+        getNormalizedURL(navigationItem.count_link),
+      );
+      return navigationItem;
+    });
+
+  const promises = items.map((navigationItem) =>
+    axios
+      .get(navigationItem.count_link)
+      .then(({ data: { count } }) => {
+        commit(types.RECEIVE_NAVIGATION_COUNT, { key: navigationItem.scope, count });
+      })
+      .catch((e) => logError(e)),
+  );
+
+  return Promise.all(promises);
+};
+
+export const setQuery = async ({ state, commit, getters }, { key, value }) => {
   commit(types.SET_QUERY, { key, value });
 
   if (SIDEBAR_PARAMS.includes(key)) {
@@ -117,10 +157,14 @@ export const setQuery = ({ state, commit, getters }, { key, value }) => {
   if (
     state.searchType === SEARCH_TYPE_ZOEKT &&
     getters.currentScope === SCOPE_BLOB &&
-    gon.features.zoektMultimatchFrontend
+    gon.features?.zoektMultimatchFrontend
   ) {
     const newUrl = setUrlParams({ ...state.query }, window.location.href, false, true);
-    updateHistory({ state: state.query, url: newUrl, replace: true });
+    document.title = buildDocumentTitle(state.query.search);
+    updateHistory({ state: state.query, title: state.query.search, url: newUrl, replace: false });
+
+    await nextTick();
+    fetchSidebarCount({ state, commit });
   }
 };
 
@@ -148,53 +192,16 @@ export const resetQuery = ({ state }) => {
   );
 };
 
-export const closeLabel = ({ state, commit }, { title }) => {
-  const labels = state?.query?.[LABEL_FILTER_PARAM].filter((labelName) => labelName !== title);
-  setQuery({ state, commit }, { key: LABEL_FILTER_PARAM, value: labels });
+export const closeLabel = ({ state, commit, getters }, { title }) => {
+  const labels =
+    state?.query?.[LABEL_FILTER_PARAM]?.filter((labelName) => labelName !== title) || [];
+  setQuery({ state, commit, getters }, { key: LABEL_FILTER_PARAM, value: labels });
 };
 
 export const setLabelFilterSearch = ({ commit }, { value }) => {
   commit(types.SET_LABEL_SEARCH_STRING, value);
 };
 
-export const fetchSidebarCount = ({ commit, state }) => {
-  const items = Object.values(state.navigation)
-    .filter(
-      (navigationItem) =>
-        !navigationItem.active &&
-        navigationItem.count_link &&
-        skipBlobESCount(state, navigationItem.scope),
-    )
-    .map((navItem) => {
-      const navigationItem = { ...navItem };
-      const modifications = {
-        search: state.query?.search || '*',
-      };
-
-      if (navigationItem.scope === SCOPE_BLOB && loadDataFromLS(LS_REGEX_HANDLE)) {
-        modifications[REGEX_PARAM] = true;
-      }
-
-      navigationItem.count_link = setUrlParams(
-        modifications,
-        getNormalizedURL(navigationItem.count_link),
-      );
-
-      return navigationItem;
-    });
-
-  const promises = items.map((navigationItem) =>
-    axios
-      .get(navigationItem.count_link)
-      .then(({ data: { count } }) => {
-        commit(types.RECEIVE_NAVIGATION_COUNT, { key: navigationItem.scope, count });
-      })
-      .catch((e) => logError(e)),
-  );
-
-  return Promise.all(promises);
-};
-
 export const fetchAllAggregation = ({ commit, state }) => {
   commit(types.REQUEST_AGGREGATIONS);
   return axios

app/assets/javascripts/search/store/constants.js

@@ -84,3 +84,4 @@ export const SEARCH_LEVEL_PROJECT = 'project';
 export const SEARCH_LEVEL_GROUP = 'group';
 
 export const LS_REGEX_HANDLE = `${REGEX_PARAM}_advanced_search`;
+export const SEARCH_WINDOW_TITLE = `${s__('GlobalSearch|Search')} · GitLab`;

app/assets/javascripts/search/store/mutations.js

@@ -33,7 +33,7 @@ export default {
     state.frequentItems[key] = data;
   },
   [types.RECEIVE_NAVIGATION_COUNT](state, { key, count }) {
-    const item = { ...state.navigation[key], count, count_link: null };
+    const item = { ...state.navigation[key], count };
     state.navigation = { ...state.navigation, [key]: item };
   },
   [types.REQUEST_AGGREGATIONS](state) {

app/assets/javascripts/search/store/utils.js

@@ -14,6 +14,7 @@ import {
   NUMBER_FORMATING_OPTIONS,
   REGEX_PARAM,
   LS_REGEX_HANDLE,
+  SEARCH_WINDOW_TITLE,
 } from './constants';
 
 function extractKeys(object, keyList) {
@@ -114,7 +115,6 @@ export const mergeById = (inflatedData, storedData) => {
 
 export const isSidebarDirty = (currentQuery, urlQuery) => {
   return SIDEBAR_PARAMS.some((param) => {
-    // userAddParam ensures we don't get a false dirty from null !== undefined
     const userAddedParam = !urlQuery[param] && currentQuery[param];
     const userChangedExistingParam = urlQuery[param] && urlQuery[param] !== currentQuery[param];
 
@@ -219,3 +219,22 @@ export const skipBlobESCount = (state, itemScope) =>
     state.zoektAvailable &&
     itemScope === SCOPE_BLOB
   );
+
+export const buildDocumentTitle = (title) => {
+  const prevTitle = document.title;
+
+  if (prevTitle.includes(SEARCH_WINDOW_TITLE)) {
+    if (prevTitle.startsWith(SEARCH_WINDOW_TITLE)) {
+      return `${title} · ${SEARCH_WINDOW_TITLE}`;
+    }
+
+    if (prevTitle.trim().startsWith(` · ${SEARCH_WINDOW_TITLE}`.trim())) {
+      return `${title} · ${SEARCH_WINDOW_TITLE}`;
+    }
+
+    const pattern = new RegExp(`^.*?(?= · ${SEARCH_WINDOW_TITLE})`);
+    return prevTitle.replace(pattern, title);
+  }
+  // If pattern not found, return the original
+  return title;
+};

app/assets/javascripts/search/topbar/components/app.vue

 <script>
 import { GlButton } from '@gitlab/ui';
-import { isEmpty } from 'lodash';
+import { isEmpty, debounce } from 'lodash';
 // eslint-disable-next-line no-restricted-imports
 import { mapState, mapActions, mapGetters } from 'vuex';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { InternalEvents } from '~/tracking';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__ } from '~/locale';
@@ -51,6 +52,10 @@ export default {
         return this.query ? this.query.search : '';
       },
       set(value) {
+        if (this.isMultiMatch) {
+          this.debouncedSetQuery({ key: 'search', value });
+          return;
+        }
         this.setQuery({ key: 'search', value });
       },
     },
@@ -86,6 +91,7 @@ export default {
   created() {
     this.preloadStoredFrequentItems();
     this.regexEnabled = loadDataFromLS(LS_REGEX_HANDLE);
+    this.debouncedSetQuery = debounce(this.setQuery, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
   },
   methods: {
     ...mapActions(['applyQuery', 'setQuery', 'preloadStoredFrequentItems']),

spec/features/search/user_searches_for_code_spec.rb

@@ -7,7 +7,13 @@
   include ListboxHelpers
 
   let_it_be(:user) { create(:user) }
-  let_it_be_with_reload(:project) { create(:project, :repository, namespace: user.namespace) }
+  let_it_be_with_reload(:project) do
+    # This helps with some of the test flakiness.
+    project = create(:project, :repository, namespace: user.namespace)
+    project.repository.root_ref
+    project.repository.ls_files('master')
+    project
+  end
 
   context 'when signed in' do
     before do

spec/frontend/search/mock_data.js

@@ -220,7 +220,7 @@ export const MOCK_DATA_FOR_NAVIGATION_ACTION_MUTATION = {
     label: 'Projects',
     scope: 'projects',
     link: '/search?scope=projects&search=et',
-    count_link: null,
+    count_link: '/search/count?scope=projects&search=et',
   },
 };
 

spec/frontend/search/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import { mapValues } from 'lodash';
+// rspec spec/frontend/fixtures/search_navigation.rb to generate this file
+import noActiveItems from 'test_fixtures/search_navigation/no_active_items.json';
 import testAction from 'helpers/vuex_action_helper';
+import { setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import Api from '~/api';
 import { createAlert } from '~/alert';
 import * as logger from '~/lib/logger';
@@ -45,6 +48,17 @@ jest.mock('~/lib/logger', () => ({
   logError: jest.fn(),
 }));
 
+jest.mock('~/lib/utils/url_utility', () => {
+  const urlUtility = jest.requireActual('~/lib/utils/url_utility');
+
+  return {
+    __esModule: true,
+    ...urlUtility,
+    setUrlParams: jest.fn(() => 'mocked-new-url'),
+    updateHistory: jest.fn(),
+  };
+});
+
 describe('Global Search Store Actions', () => {
   let mock;
   let state;
@@ -159,41 +173,112 @@ describe('Global Search Store Actions', () => {
     });
   });
 
-  describe.each`
-    payload                                      | isDirty  | isDirtyMutation
-    ${{ key: SIDEBAR_PARAMS[0], value: 'test' }} | ${false} | ${[{ type: types.SET_SIDEBAR_DIRTY, payload: false }]}
-    ${{ key: SIDEBAR_PARAMS[0], value: 'test' }} | ${true}  | ${[{ type: types.SET_SIDEBAR_DIRTY, payload: true }]}
-    ${{ key: SIDEBAR_PARAMS[1], value: 'test' }} | ${false} | ${[{ type: types.SET_SIDEBAR_DIRTY, payload: false }]}
-    ${{ key: SIDEBAR_PARAMS[1], value: 'test' }} | ${true}  | ${[{ type: types.SET_SIDEBAR_DIRTY, payload: true }]}
-    ${{ key: 'non-sidebar', value: 'test' }}     | ${false} | ${[]}
-    ${{ key: 'non-sidebar', value: 'test' }}     | ${true}  | ${[]}
-  `('setQuery', ({ payload, isDirty, isDirtyMutation }) => {
-    describe(`when filter param is ${payload.key} and utils.isSidebarDirty returns ${isDirty}`, () => {
-      const expectedMutations = [{ type: types.SET_QUERY, payload }].concat(isDirtyMutation);
+  describe('setQuery', () => {
+    describe('when search type is zoekt and scope is blob with zoektMultimatchFrontend feature enabled', () => {
+      const payload = { key: 'some-key', value: 'some-value' };
+      let originalGon;
+      let commit;
+      let fetchSidebarCountSpy;
 
       beforeEach(() => {
-        storeUtils.isSidebarDirty = jest.fn().mockReturnValue(isDirty);
+        originalGon = window.gon;
+        commit = jest.fn();
+
+        fetchSidebarCountSpy = jest
+          .spyOn(actions, 'fetchSidebarCount')
+          .mockImplementation(() => Promise.resolve());
+
+        window.gon = { features: { zoektMultimatchFrontend: true } };
+        storeUtils.isSidebarDirty = jest.fn().mockReturnValue(false);
+
+        state = createState({
+          query: { ...MOCK_QUERY, search: 'test-search' },
+          navigation: { ...MOCK_NAVIGATION },
+          searchType: 'zoekt',
+        });
       });
 
-      it(`should dispatch the correct mutations`, () => {
-        return testAction({ action: actions.setQuery, payload, state, expectedMutations });
+      afterEach(() => {
+        window.gon = originalGon;
+        fetchSidebarCountSpy.mockRestore();
       });
-    });
-  });
 
-  describe.each`
-    payload
-    ${{ key: REGEX_PARAM, value: true }}
-    ${{ key: REGEX_PARAM, value: { random: 'test' } }}
-  `('setQuery', ({ payload }) => {
-    describe(`when query param is ${payload.key}`, () => {
-      beforeEach(() => {
-        storeUtils.setDataToLS = jest.fn();
-        actions.setQuery({ state, commit: jest.fn() }, payload);
+      it('should update URL, document title, and history', async () => {
+        const getters = { currentScope: 'blobs' };
+
+        await actions.setQuery({ state, commit, getters }, payload);
+
+        expect(setUrlParams).toHaveBeenCalledWith(
+          { ...state.query },
+          window.location.href,
+          false,
+          true,
+        );
+
+        expect(document.title).toBe(state.query.search);
+
+        expect(updateHistory).toHaveBeenCalledWith({
+          state: state.query,
+          title: state.query.search,
+          url: 'mocked-new-url',
+          replace: false,
+        });
+      });
+
+      it('does not update URL or fetch sidebar counts when conditions are not met', async () => {
+        let getters = { currentScope: 'blobs' };
+        state.searchType = 'not-zoekt';
+
+        await actions.setQuery({ state, commit, getters }, payload);
+
+        expect(setUrlParams).not.toHaveBeenCalled();
+        expect(updateHistory).not.toHaveBeenCalled();
+        expect(fetchSidebarCountSpy).not.toHaveBeenCalled();
+
+        setUrlParams.mockClear();
+        updateHistory.mockClear();
+        fetchSidebarCountSpy.mockClear();
+
+        state.searchType = 'zoekt';
+        getters = { currentScope: 'not-blobs' };
+
+        await actions.setQuery({ state, commit, getters }, payload);
+
+        expect(setUrlParams).not.toHaveBeenCalled();
+        expect(updateHistory).not.toHaveBeenCalled();
+        expect(fetchSidebarCountSpy).not.toHaveBeenCalled();
+
+        setUrlParams.mockClear();
+        updateHistory.mockClear();
+        fetchSidebarCountSpy.mockClear();
+
+        getters = { currentScope: 'blobs' };
+        window.gon.features.zoektMultimatchFrontend = false;
+
+        await actions.setQuery({ state, commit, getters }, payload);
+
+        expect(setUrlParams).not.toHaveBeenCalled();
+        expect(updateHistory).not.toHaveBeenCalled();
+        expect(fetchSidebarCountSpy).not.toHaveBeenCalled();
       });
+    });
+
+    describe.each`
+      payload
+      ${{ key: REGEX_PARAM, value: true }}
+      ${{ key: REGEX_PARAM, value: { random: 'test' } }}
+    `('setQuery with REGEX_PARAM', ({ payload }) => {
+      describe(`when query param is ${payload.key}`, () => {
+        beforeEach(() => {
+          storeUtils.setDataToLS = jest.fn();
+          window.gon = { features: { zoektMultimatchFrontend: false } };
+          const getters = { currentScope: 'not-blobs' };
+          actions.setQuery({ state, commit: jest.fn(), getters }, payload);
+        });
 
-      it(`setsItem in local storage`, () => {
-        expect(storeUtils.setDataToLS).toHaveBeenCalledWith(LS_REGEX_HANDLE, expect.anything());
+        it(`setsItem in local storage`, () => {
+          expect(storeUtils.setDataToLS).toHaveBeenCalledWith(LS_REGEX_HANDLE, expect.anything());
+        });
       });
     });
   });
@@ -201,7 +286,12 @@ describe('Global Search Store Actions', () => {
   describe('applyQuery', () => {
     beforeEach(() => {
       setWindowLocation('https://test/');
-      jest.spyOn(urlUtils, 'visitUrl').mockReturnValue({});
+      jest.spyOn(urlUtils, 'visitUrl').mockImplementation(() => {});
+      jest
+        .spyOn(urlUtils, 'setUrlParams')
+        .mockReturnValue(
+          'https://test/?scope=issues&state=all&group_id=1&language%5B%5D=C&language%5B%5D=JavaScript&label_name%5B%5D=Aftersync&label_name%5B%5D=Brist&search=*',
+        );
     });
 
     it('calls visitUrl and setParams with the state.query', async () => {
@@ -355,17 +445,29 @@ describe('Global Search Store Actions', () => {
     });
   });
 
-  describe('fetchSidebarCount uses wild card seach', () => {
+  describe('fetchSidebarCount uses wild card search', () => {
     beforeEach(() => {
-      state.navigation = MOCK_NAVIGATION;
-      state.urlQuery.search = '';
+      state.navigation = noActiveItems;
+      state.query = { search: '' };
+      state.urlQuery = { search: '' };
+
+      jest.spyOn(urlUtils, 'setUrlParams').mockImplementation((params) => {
+        return `http://test.host/search/count?search=${params.search || '*'}`;
+      });
+
+      storeUtils.skipBlobESCount = jest.fn().mockReturnValue(true);
+
+      mock.onGet().reply(HTTP_STATUS_OK, MOCK_ENDPOINT_RESPONSE);
     });
 
     it('should use wild card', async () => {
-      await testAction({ action: actions.fetchSidebarCount, state, expectedMutations: [] });
-      expect(mock.history.get[0].url).toBe('http://test.host/search/count?scope=projects&search=*');
-      expect(mock.history.get[3].url).toBe(
-        'http://test.host/search/count?scope=merge_requests&search=*',
+      const commit = jest.fn();
+
+      await actions.fetchSidebarCount({ commit, state });
+
+      expect(urlUtils.setUrlParams).toHaveBeenCalledWith(
+        expect.objectContaining({ search: '*' }),
+        expect.anything(),
       );
     });
   });
@@ -409,16 +511,16 @@ describe('Global Search Store Actions', () => {
         {
           payload: {
             key: 'label_name',
-            value: ['Aftersync', 'Brist'],
+            value: ['Aftersync'],
           },
           type: 'SET_QUERY',
         },
         {
-          payload: true,
+          payload: false,
           type: 'SET_SIDEBAR_DIRTY',
         },
       ];
-      return testAction(actions.closeLabel, { key: '60' }, state, expectedResult, []);
+      return testAction(actions.closeLabel, { title: 'Brist' }, state, expectedResult, []);
     });
   });
 

spec/frontend/search/store/utils_spec.js

+// rspec spec/frontend/fixtures/search_navigation.rb to generate these files
 import subItemActive from 'test_fixtures/search_navigation/sub_item_active.json';
 import noActiveItems from 'test_fixtures/search_navigation/no_active_items.json';
 import partialNavigationActive from 'test_fixtures/search_navigation/partial_navigation_active.json';
@@ -17,6 +18,7 @@ import {
   injectRegexSearch,
   scopeCrawler,
   skipBlobESCount,
+  buildDocumentTitle,
 } from '~/search/store/utils';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
@@ -447,4 +449,46 @@ describe('Global Search Store Utils', () => {
       expect(skipBlobESCount(state, SCOPE_BLOB)).toBe(false);
     });
   });
+
+  describe('buildDocumentTitle', () => {
+    const SEARCH_WINDOW_TITLE = `Search`; // Make sure this matches your actual constant
+    let originalTitle;
+
+    beforeEach(() => {
+      originalTitle = document.title;
+    });
+
+    afterEach(() => {
+      document.title = originalTitle;
+    });
+
+    it('returns original title when document title does not include search title', () => {
+      document.title = 'GitLab';
+      expect(buildDocumentTitle('test')).toBe('test');
+    });
+
+    it('prepends new title when document title starts with search title', () => {
+      document.title = `${SEARCH_WINDOW_TITLE} · GitLab`;
+      const result = buildDocumentTitle('test');
+      expect(result).toBe(`test · ${SEARCH_WINDOW_TITLE} · GitLab`);
+    });
+
+    it('prepends new title when document title starts with dot and search title', () => {
+      document.title = ` · ${SEARCH_WINDOW_TITLE} · GitLab`;
+      const result = buildDocumentTitle('test');
+      expect(result).toBe(`test · ${SEARCH_WINDOW_TITLE} · GitLab`);
+    });
+
+    it('replaces title before search title with new title', () => {
+      document.title = `Issues · ${SEARCH_WINDOW_TITLE} · GitLab`;
+      const result = buildDocumentTitle('test');
+      expect(result).toBe(`test · ${SEARCH_WINDOW_TITLE} · GitLab`);
+    });
+
+    it('handles complex titles correctly', () => {
+      document.title = `Something · With · Dots · ${SEARCH_WINDOW_TITLE} · GitLab`;
+      const result = buildDocumentTitle('test');
+      expect(result).toBe(`test · ${SEARCH_WINDOW_TITLE} · GitLab`);
+    });
+  });
 });

spec/frontend/search/topbar/components/app_spec.js

@@ -229,4 +229,48 @@ describe('GlobalSearchTopbar', () => {
       });
     });
   });
+
+  describe('search computed property setter', () => {
+    describe.each`
+      FF                                    | scope       | searchType    | debounced
+      ${{ zoektMultimatchFrontend: true }}  | ${'blobs'}  | ${'zoekt'}    | ${true}
+      ${{ zoektMultimatchFrontend: false }} | ${'blobs'}  | ${'zoekt'}    | ${false}
+      ${{ zoektMultimatchFrontend: true }}  | ${'issues'} | ${'zoekt'}    | ${false}
+      ${{ zoektMultimatchFrontend: true }}  | ${'blobs'}  | ${'advanced'} | ${false}
+    `(
+      'when isMultiMatch is $debounced (FF: $FF, scope: $scope, searchType: $searchType)',
+      ({ FF, scope, searchType, debounced }) => {
+        beforeEach(() => {
+          getterSpies.currentScope = jest.fn(() => scope);
+          actionSpies.setQuery.mockClear();
+
+          createComponent({
+            featureFlag: FF,
+            initialState: { searchType },
+          });
+
+          wrapper.vm.debouncedSetQuery = jest.fn();
+        });
+
+        it(`${debounced ? 'calls debouncedSetQuery' : 'calls setQuery directly'}`, () => {
+          findGlSearchBox().vm.$emit('input', 'new search value');
+
+          if (debounced) {
+            expect(actionSpies.setQuery).not.toHaveBeenCalled();
+          } else {
+            expect(actionSpies.setQuery).toHaveBeenCalled();
+
+            const lastCallArgs = actionSpies.setQuery.mock.calls[0];
+            const payload = lastCallArgs[lastCallArgs.length - 1];
+            expect(payload).toEqual(
+              expect.objectContaining({
+                key: 'search',
+                value: 'new search value',
+              }),
+            );
+          }
+        });
+      },
+    );
+  });
 });

spec/support/helpers/search_helpers.rb

@@ -9,15 +9,16 @@ def fill_in_search(text)
   end
 
   def submit_search(query)
-    # Forms directly on the search page
     if page.has_css?('.search-page-form')
       search_form = '.search-page-form'
-    # Open search modal from super sidebar
+
     else
       find_by_testid('super-sidebar-search-button').click
       search_form = '#super-sidebar-search-modal'
     end
 
+    wait_for_all_requests
+
     page.within(search_form) do
       field = find_field('search')
       field.click