Fix discussions filter not working

This bug was introduced by
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/69933 when we
changed the mutation to append or update discussions.

When changing the discussions filter, we must clear the existing
discussions before fetching the filtered list.

This also disables the filter when discussions are loading to prevent
race conditions where the response of a previous request could show up
if the filters are switched very quickly

Changelog: fixed

app/assets/javascripts/notes/components/discussion_filter.vue

@@ -39,7 +39,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['getNotesDataByProp', 'timelineEnabled']),
+    ...mapGetters(['getNotesDataByProp', 'timelineEnabled', 'isLoading']),
     currentFilter() {
       if (!this.currentValue) return this.filters[0];
       return this.filters.find((filter) => filter.value === this.currentValue);
@@ -119,6 +119,7 @@ export default {
     class="gl-mr-3 full-width-mobile discussion-filter-container js-discussion-filter-container"
     data-qa-selector="discussion_filter_dropdown"
     :text="currentFilter.title"
+    :disabled="isLoading"
   >
     <div v-for="filter in filters" :key="filter.value" class="dropdown-item-wrapper">
       <gl-dropdown-item

app/assets/javascripts/notes/stores/actions.js

@@ -601,7 +601,8 @@ export const setLoadingState = ({ commit }, data) => {
   commit(types.SET_NOTES_LOADING_STATE, data);
 };
 
-export const filterDiscussion = ({ dispatch }, { path, filter, persistFilter }) => {
+export const filterDiscussion = ({ commit, dispatch }, { path, filter, persistFilter }) => {
+  commit(types.CLEAR_DISCUSSIONS);
   dispatch('setLoadingState', true);
   dispatch('fetchDiscussions', { path, filter, persistFilter })
     .then(() => {

app/assets/javascripts/notes/stores/mutation_types.js

 export const ADD_NEW_NOTE = 'ADD_NEW_NOTE';
 export const ADD_NEW_REPLY_TO_DISCUSSION = 'ADD_NEW_REPLY_TO_DISCUSSION';
 export const ADD_OR_UPDATE_DISCUSSIONS = 'ADD_OR_UPDATE_DISCUSSIONS';
+export const CLEAR_DISCUSSIONS = 'CLEAR_DISCUSSIONS';
 export const DELETE_NOTE = 'DELETE_NOTE';
 export const REMOVE_PLACEHOLDER_NOTES = 'REMOVE_PLACEHOLDER_NOTES';
 export const SET_NOTES_DATA = 'SET_NOTES_DATA';

app/assets/javascripts/notes/stores/mutations.js

@@ -129,6 +129,10 @@ export default {
     Object.assign(state, { userData: data });
   },
 
+  [types.CLEAR_DISCUSSIONS](state) {
+    state.discussions = [];
+  },
+
   [types.ADD_OR_UPDATE_DISCUSSIONS](state, discussionsData) {
     discussionsData.forEach((d) => {
       const discussion = { ...d };

spec/frontend/notes/components/discussion_filter_spec.js

+import { GlDropdown } from '@gitlab/ui';
 import { createLocalVue, mount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
@@ -88,6 +89,12 @@ describe('DiscussionFilter component', () => {
     );
   });
 
+  it('disables the dropdown when discussions are loading', () => {
+    store.state.isLoading = true;
+
+    expect(wrapper.findComponent(GlDropdown).props('disabled')).toBe(true);
+  });
+
   it('updates to the selected item', () => {
     const filterItem = findFilter(DISCUSSION_FILTER_TYPES.ALL);
 

spec/frontend/notes/stores/actions_spec.js

@@ -1183,8 +1183,14 @@ describe('Actions Notes Store', () => {
       dispatch.mockReturnValue(new Promise(() => {}));
     });
 
+    it('clears existing discussions', () => {
+      actions.filterDiscussion({ commit, dispatch }, { path, filter, persistFilter: false });
+
+      expect(commit.mock.calls).toEqual([[mutationTypes.CLEAR_DISCUSSIONS]]);
+    });
+
     it('fetches discussions with filter and persistFilter false', () => {
-      actions.filterDiscussion({ dispatch }, { path, filter, persistFilter: false });
+      actions.filterDiscussion({ commit, dispatch }, { path, filter, persistFilter: false });
 
       expect(dispatch.mock.calls).toEqual([
         ['setLoadingState', true],
@@ -1193,7 +1199,7 @@ describe('Actions Notes Store', () => {
     });
 
     it('fetches discussions with filter and persistFilter true', () => {
-      actions.filterDiscussion({ dispatch }, { path, filter, persistFilter: true });
+      actions.filterDiscussion({ commit, dispatch }, { path, filter, persistFilter: true });
 
       expect(dispatch.mock.calls).toEqual([
         ['setLoadingState', true],

spec/frontend/notes/stores/mutation_spec.js

@@ -159,6 +159,18 @@ describe('Notes Store mutations', () => {
     });
   });
 
+  describe('CLEAR_DISCUSSIONS', () => {
+    it('should set discussions to an empty array', () => {
+      const state = {
+        discussions: [discussionMock],
+      };
+
+      mutations.CLEAR_DISCUSSIONS(state);
+
+      expect(state.discussions).toEqual([]);
+    });
+  });
+
   describe('ADD_OR_UPDATE_DISCUSSIONS', () => {
     it('should set the initial notes received', () => {
       const state = {