Merge branch '54206-show-the-activity-filter-dropdown-in-discussion-tab-only' into 'master'

Resolve "Show the activity filter dropdown in discussion tab only, show all discussions always in changes tab"

Closes #54206

See merge request gitlab-org/gitlab-ce!24082

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

@@ -2,7 +2,11 @@
 import $ from 'jquery';
 import { mapGetters, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
-import { DISCUSSION_FILTERS_DEFAULT_VALUE, HISTORY_ONLY_FILTER_VALUE } from '../constants';
+import {
+  DISCUSSION_FILTERS_DEFAULT_VALUE,
+  HISTORY_ONLY_FILTER_VALUE,
+  DISCUSSION_TAB_LABEL,
+} from '../constants';
 
 export default {
   components: {
@@ -23,6 +27,7 @@ export default {
     return {
       currentValue: this.selectedValue,
       defaultValue: DISCUSSION_FILTERS_DEFAULT_VALUE,
+      displayFilters: true,
     };
   },
   computed: {
@@ -32,6 +37,14 @@ export default {
       return this.filters.find(filter => filter.value === this.currentValue);
     },
   },
+  created() {
+    if (window.mrTabs) {
+      const { eventHub, currentTab } = window.mrTabs;
+
+      eventHub.$on('MergeRequestTabChange', this.toggleFilters);
+      this.toggleFilters(currentTab);
+    }
+  },
   mounted() {
     this.toggleCommentsForm();
   },
@@ -51,12 +64,15 @@ export default {
     toggleCommentsForm() {
       this.setCommentsDisabled(this.currentValue === HISTORY_ONLY_FILTER_VALUE);
     },
+    toggleFilters(tab) {
+      this.displayFilters = tab === DISCUSSION_TAB_LABEL;
+    },
   },
 };
 </script>
 
 <template>
-  <div class="discussion-filter-container d-inline-block align-bottom">
+  <div v-if="displayFilters" class="discussion-filter-container d-inline-block align-bottom">
     <button
       id="discussion-filter-dropdown"
       ref="dropdownToggle"

app/assets/javascripts/notes/constants.js

@@ -17,6 +17,7 @@ export const RESOLVE_NOTE_METHOD_NAME = 'post';
 export const DESCRIPTION_TYPE = 'changed the description';
 export const HISTORY_ONLY_FILTER_VALUE = 2;
 export const DISCUSSION_FILTERS_DEFAULT_VALUE = 0;
+export const DISCUSSION_TAB_LABEL = 'show';
 
 export const NOTEABLE_TYPE_MAPPING = {
   Issue: ISSUE_NOTEABLE_TYPE,

changelogs/unreleased/54206-show-the-activity-filter-dropdown-in-discussion-tab-only.yml

+---
+title: Discussion filter only displayed in discussions tab for merge requests
+merge_request: 24082
+author:
+type: changed

spec/javascripts/notes/components/discussion_filter_spec.js

@@ -7,8 +7,9 @@ import { discussionFiltersMock, discussionMock } from '../mock_data';
 describe('DiscussionFilter component', () => {
   let vm;
   let store;
+  let eventHub;
 
-  beforeEach(() => {
+  const mountComponent = () => {
     store = createStore();
 
     const discussions = [
@@ -22,7 +23,7 @@ describe('DiscussionFilter component', () => {
     const selectedValue = discussionFiltersMock[0].value;
 
     store.state.discussions = discussions;
-    vm = mountComponentWithStore(Component, {
+    return mountComponentWithStore(Component, {
       el: null,
       store,
       props: {
@@ -30,6 +31,11 @@ describe('DiscussionFilter component', () => {
         selectedValue,
       },
     });
+  };
+
+  beforeEach(() => {
+    window.mrTabs = undefined;
+    vm = mountComponent();
   });
 
   afterEach(() => {
@@ -83,4 +89,30 @@ describe('DiscussionFilter component', () => {
 
     expect(defaultFilter.lastChild.classList).toContain('dropdown-divider');
   });
+
+  describe('Merge request tabs', () => {
+    eventHub = new Vue();
+
+    beforeEach(() => {
+      window.mrTabs = {
+        eventHub,
+        currentTab: 'show',
+      };
+
+      vm = mountComponent();
+    });
+
+    afterEach(() => {
+      window.mrTabs = undefined;
+    });
+
+    it('only renders when discussion tab is active', done => {
+      eventHub.$emit('MergeRequestTabChange', 'commit');
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector).toBeUndefined();
+        done();
+      });
+    });
+  });
 });