Merge branch 'kp-fix-history-select-event' into 'master'

Fix history item select event bug in FilteredSearchBar shared component

See merge request gitlab-org/gitlab!36933

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -83,6 +83,7 @@ export default {
     return {
       initialRender: true,
       recentSearchesPromise: null,
+      recentSearches: [],
       filterValue: this.initialFilterValue,
       selectedSortOption,
       selectedSortDirection,
@@ -180,11 +181,9 @@ export default {
             this.recentSearchesStore.state.recentSearches.concat(searches),
           );
           this.recentSearchesService.save(resultantSearches);
+          this.recentSearches = resultantSearches;
         });
     },
-    getRecentSearches() {
-      return this.recentSearchesStore?.state.recentSearches;
-    },
     handleSortOptionClick(sortBy) {
       this.selectedSortOption = sortBy;
       this.$emit('onSort', sortBy.sortDirection[this.selectedSortDirection]);
@@ -196,9 +195,13 @@ export default {
           : SortDirection.ascending;
       this.$emit('onSort', this.selectedSortOption.sortDirection[this.selectedSortDirection]);
     },
+    handleHistoryItemSelected(filters) {
+      this.$emit('onFilter', filters);
+    },
     handleClearHistory() {
       const resultantSearches = this.recentSearchesStore.setRecentSearches([]);
       this.recentSearchesService.save(resultantSearches);
+      this.recentSearches = [];
     },
     handleFilterSubmit(filters) {
       if (this.recentSearchesStorageKey) {
@@ -207,6 +210,7 @@ export default {
             if (filters.length) {
               const resultantSearches = this.recentSearchesStore.addRecentSearch(filters);
               this.recentSearchesService.save(resultantSearches);
+              this.recentSearches = resultantSearches;
             }
           })
           .catch(() => {
@@ -225,16 +229,15 @@ export default {
       v-model="filterValue"
       :placeholder="searchInputPlaceholder"
       :available-tokens="tokens"
-      :history-items="getRecentSearches()"
+      :history-items="recentSearches"
       class="flex-grow-1"
-      @history-item-selected="$emit('onFilter', filters)"
+      @history-item-selected="handleHistoryItemSelected"
       @clear-history="handleClearHistory"
       @submit="handleFilterSubmit"
-      @clear="$emit('onFilter', [])"
     >
       <template #history-item="{ historyItem }">
-        <template v-for="token in historyItem">
-          <span v-if="typeof token === 'string'" :key="token" class="gl-px-1">"{{ token }}"</span>
+        <template v-for="(token, index) in historyItem">
+          <span v-if="typeof token === 'string'" :key="index" class="gl-px-1">"{{ token }}"</span>
           <span v-else :key="`${token.type}-${token.value.data}`" class="gl-px-1">
             <span v-if="tokenTitles[token.type]"
               >{{ tokenTitles[token.type] }} :{{ token.value.operator }}</span

ee/app/assets/javascripts/requirements/components/requirements_root.vue

@@ -10,7 +10,6 @@ import { updateHistory, setUrlParams } from '~/lib/utils/url_utility';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
 import { ANY_AUTHOR } from '~/vue_shared/components/filtered_search_bar/constants';
-import RecentSearchesStorageKeys from 'ee/filtered_search/recent_searches_storage_keys';
 
 import RequirementsTabs from './requirements_tabs.vue';
 import RequirementsLoading from './requirements_loading.vue';
@@ -28,7 +27,6 @@ import { FilterState, AvailableSortOptions, DEFAULT_PAGE_SIZE } from '../constan
 export default {
   DEFAULT_PAGE_SIZE,
   AvailableSortOptions,
-  requirementsRecentSearchesKey: RecentSearchesStorageKeys.requirements,
   components: {
     GlPagination,
     FilteredSearchBar,
@@ -526,7 +524,7 @@ export default {
       :sort-options="$options.AvailableSortOptions"
       :initial-filter-value="getFilteredSearchValue()"
       :initial-sort-by="sortBy"
-      :recent-searches-storage-key="$options.requirementsRecentSearchesKey"
+      recent-searches-storage-key="requirements"
       class="row-content-block"
       @onFilter="handleFilterRequirements"
       @onSort="handleSortRequirements"

ee/spec/frontend/requirements/components/requirements_root_spec.js

@@ -766,7 +766,7 @@ describe('RequirementsRoot', () => {
         },
       ]);
       expect(wrapper.find(FilteredSearchBarRoot).props('recentSearchesStorageKey')).toBe(
-        'requirements-recent-searches',
+        'requirements',
       );
     });
 

spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js

@@ -139,14 +139,6 @@ describe('FilteredSearchBarRoot', () => {
       });
     });
 
-    describe('getRecentSearches', () => {
-      it('returns array of strings representing recent searches', () => {
-        wrapper.vm.recentSearchesStore.setRecentSearches(['foo']);
-
-        expect(wrapper.vm.getRecentSearches()).toEqual(['foo']);
-      });
-    });
-
     describe('handleSortOptionClick', () => {
       it('emits component event `onSort` with selected sort by value', () => {
         wrapper.vm.handleSortOptionClick(mockSortOptions[1]);
@@ -178,6 +170,14 @@ describe('FilteredSearchBarRoot', () => {
       });
     });
 
+    describe('handleHistoryItemSelected', () => {
+      it('emits `onFilter` event with provided filters param', () => {
+        wrapper.vm.handleHistoryItemSelected(mockHistoryItems[0]);
+
+        expect(wrapper.emitted('onFilter')[0]).toEqual([mockHistoryItems[0]]);
+      });
+    });
+
     describe('handleClearHistory', () => {
       it('clears search history from recent searches store', () => {
         jest.spyOn(wrapper.vm.recentSearchesStore, 'setRecentSearches').mockReturnValue([]);
@@ -187,7 +187,7 @@ describe('FilteredSearchBarRoot', () => {
 
         expect(wrapper.vm.recentSearchesStore.setRecentSearches).toHaveBeenCalledWith([]);
         expect(wrapper.vm.recentSearchesService.save).toHaveBeenCalledWith([]);
-        expect(wrapper.vm.getRecentSearches()).toEqual([]);
+        expect(wrapper.vm.recentSearches).toEqual([]);
       });
     });
 
@@ -223,6 +223,16 @@ describe('FilteredSearchBarRoot', () => {
         });
       });
 
+      it('sets `recentSearches` data prop with array of searches', () => {
+        jest.spyOn(wrapper.vm.recentSearchesService, 'save');
+
+        wrapper.vm.handleFilterSubmit(mockFilters);
+
+        return wrapper.vm.recentSearchesPromise.then(() => {
+          expect(wrapper.vm.recentSearches).toEqual([mockFilters]);
+        });
+      });
+
       it('emits component event `onFilter` with provided filters param', () => {
         wrapper.vm.handleFilterSubmit(mockFilters);
 
@@ -236,10 +246,9 @@ describe('FilteredSearchBarRoot', () => {
       wrapper.setData({
         selectedSortOption: mockSortOptions[0],
         selectedSortDirection: SortDirection.descending,
+        recentSearches: mockHistoryItems,
       });
 
-      wrapper.vm.recentSearchesStore.setRecentSearches(mockHistoryItems);
-
       return wrapper.vm.$nextTick();
     });