Merge branch 'fix-discussions-filter' into 'master'

Fix discussions filter not working

See merge request gitlab-org/gitlab!74662

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 = {