Merge branch 'kp-fix-roadmap-incorrect-filters-fetch' into 'master'

Fix unnecessary epics fetch request on Roadmap with no filter token value

See merge request gitlab-org/gitlab!72774

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

@@ -171,15 +171,17 @@ export default {
      * This watcher listens for updates to `filterValue` on
      * such instances. :(
      */
-    filterValue(value) {
-      const [firstVal] = value;
+    filterValue(newValue, oldValue) {
+      const [firstVal] = newValue;
       if (
         !this.initialRender &&
-        value.length === 1 &&
+        newValue.length === 1 &&
         firstVal.type === 'filtered-search-term' &&
         !firstVal.value.data
       ) {
-        this.$emit('onFilter', []);
+        const filtersCleared =
+          oldValue[0].type !== 'filtered-search-term' || oldValue[0].value.data !== '';
+        this.$emit('onFilter', [], filtersCleared);
       }
 
       // Set initial render flag to false

ee/app/assets/javascripts/roadmap/components/roadmap_filters.vue

@@ -150,9 +150,11 @@ export default {
       this.setEpicsState(epicsState);
       this.fetchEpics();
     },
-    handleFilterEpics(filters) {
+    handleFilterEpics(filters, cleared) {
+      if (filters.length || cleared) {
         this.setFilterParams(this.getFilterParams(filters));
         this.fetchEpics();
+      }
     },
     handleSortEpics(sortedBy) {
       this.setSortedBy(sortedBy);

ee/spec/frontend/roadmap/components/roadmap_filters_spec.js

@@ -277,6 +277,18 @@ describe('RoadmapFilters', () => {
         expect(wrapper.vm.fetchEpics).toHaveBeenCalled();
       });
 
+      it('does not set filters params or fetch epics when onFilter event is triggered with empty filters array and cleared param set to false', async () => {
+        jest.spyOn(wrapper.vm, 'setFilterParams');
+        jest.spyOn(wrapper.vm, 'fetchEpics');
+
+        filteredSearchBar.vm.$emit('onFilter', [], false);
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.setFilterParams).not.toHaveBeenCalled();
+        expect(wrapper.vm.fetchEpics).not.toHaveBeenCalled();
+      });
+
       describe('when user is logged in', () => {
         beforeAll(() => {
           gon.current_user_id = 1;

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

@@ -25,6 +25,7 @@ import {
   tokenValueMilestone,
   tokenValueMembership,
   tokenValueConfidential,
+  tokenValueEmpty,
 } from './mock_data';
 
 jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils', () => ({
@@ -43,6 +44,7 @@ const createComponent = ({
   recentSearchesStorageKey = 'requirements',
   tokens = mockAvailableTokens,
   sortOptions,
+  initialFilterValue = [],
   showCheckbox = false,
   checkboxChecked = false,
   searchInputPlaceholder = 'Filter requirements',
@@ -55,6 +57,7 @@ const createComponent = ({
       recentSearchesStorageKey,
       tokens,
       sortOptions,
+      initialFilterValue,
       showCheckbox,
       checkboxChecked,
       searchInputPlaceholder,
@@ -193,19 +196,27 @@ describe('FilteredSearchBarRoot', () => {
 
   describe('watchers', () => {
     describe('filterValue', () => {
-      it('emits component event `onFilter` with empty array when `filterValue` is cleared by GlFilteredSearch', () => {
+      it('emits component event `onFilter` with empty array and false when filter was never selected', () => {
+        wrapper = createComponent({ initialFilterValue: [tokenValueEmpty] });
         wrapper.setData({
           initialRender: false,
-          filterValue: [
-            {
-              type: 'filtered-search-term',
-              value: { data: '' },
-            },
-          ],
+          filterValue: [tokenValueEmpty],
+        });
+
+        return wrapper.vm.$nextTick(() => {
+          expect(wrapper.emitted('onFilter')[0]).toEqual([[], false]);
+        });
+      });
+
+      it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', () => {
+        wrapper = createComponent({ initialFilterValue: [tokenValueLabel] });
+        wrapper.setData({
+          initialRender: false,
+          filterValue: [tokenValueEmpty],
         });
 
         return wrapper.vm.$nextTick(() => {
-          expect(wrapper.emitted('onFilter')[0]).toEqual([[]]);
+          expect(wrapper.emitted('onFilter')[0]).toEqual([[], true]);
         });
       });
     });

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

@@ -282,6 +282,11 @@ export const tokenValuePlain = {
   value: { data: 'foo' },
 };
 
+export const tokenValueEmpty = {
+  type: 'filtered-search-term',
+  value: { data: '' },
+};
+
 export const tokenValueEpic = {
   type: 'epic_iid',
   value: {