Merge branch '328667-search-bar-in-members-list-does-not-work-with-spaces' into 'master'

Fix members search with multiple words

See merge request gitlab-org/gitlab!60051

app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue

 <script>
 import { GlFilteredSearchToken } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import { getParameterByName } from '~/lib/utils/common_utils';
-import { setUrlParams, queryToObject } from '~/lib/utils/url_utility';
+import { getParameterByName, urlParamsToObject } from '~/lib/utils/common_utils';
+import { setUrlParams } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import { SEARCH_TOKEN_TYPE, SORT_PARAM } from '~/members/constants';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
@@ -63,7 +63,7 @@ export default {
     },
   },
   created() {
-    const query = queryToObject(window.location.search);
+    const query = urlParamsToObject(window.location.search);
 
     const tokens = this.tokens
       .filter((token) => query[token.type])
@@ -97,9 +97,12 @@ export default {
 
         if (type === SEARCH_TOKEN_TYPE) {
           if (value.data !== '') {
+            const { searchParam } = this.filteredSearchBar;
+            const { [searchParam]: searchParamValue } = accumulator;
+
             return {
               ...accumulator,
-              [this.filteredSearchBar.searchParam]: value.data,
+              [searchParam]: searchParamValue ? `${searchParamValue} ${value.data}` : value.data,
             };
           }
         } else {

changelogs/unreleased/328667-search-bar-in-members-list-does-not-work-with-spaces.yml

+---
+title: Fix bug that prevented searching for group/project members with multiple words
+merge_request: 60051
+author:
+type: fixed

spec/frontend/members/components/filter_sort/members_filtered_search_bar_spec.js

@@ -146,6 +146,21 @@ describe('MembersFilteredSearchBar', () => {
         },
       ]);
     });
+
+    it('parses and passes search param with multiple words to `FilteredSearchBar` component as `initialFilterValue` prop', () => {
+      window.location.search = '?search=foo+bar+baz';
+
+      createComponent();
+
+      expect(findFilteredSearchBar().props('initialFilterValue')).toEqual([
+        {
+          type: 'filtered-search-term',
+          value: {
+            data: 'foo bar baz',
+          },
+        },
+      ]);
+    });
   });
 
   describe('when filter bar is submitted', () => {
@@ -175,6 +190,17 @@ describe('MembersFilteredSearchBar', () => {
       expect(window.location.href).toBe('https://localhost/?two_factor=enabled&search=foobar');
     });
 
+    it('adds search query param with multiple words', () => {
+      createComponent();
+
+      findFilteredSearchBar().vm.$emit('onFilter', [
+        { type: 'two_factor', value: { data: 'enabled', operator: '=' } },
+        { type: 'filtered-search-term', value: { data: 'foo bar baz' } },
+      ]);
+
+      expect(window.location.href).toBe('https://localhost/?two_factor=enabled&search=foo+bar+baz');
+    });
+
     it('adds sort query param', () => {
       window.location.search = '?sort=name_asc';