Made discussion filters only visible in merge request discussions tab

Discussion filters will be hidden on Commits, Pipelines, and
Changes tabs on merge requests page.

This does not affect its behavior on issues page

4 files changed, 58 insertions, 4 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue
index 86c114a761a..f5c410211b6 100644
--- a/app/assets/javascripts/notes/components/discussion_filter.vue
+++ b/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"
diff --git a/app/assets/javascripts/notes/constants.js b/app/assets/javascripts/notes/constants.js
index 3147dc64c27..78d365fe94b 100644
--- a/app/assets/javascripts/notes/constants.js
+++ b/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,
diff --git a/changelogs/unreleased/54206-show-the-activity-filter-dropdown-in-discussion-tab-only.yml b/changelogs/unreleased/54206-show-the-activity-filter-dropdown-in-discussion-tab-only.yml
new file mode 100644
index 00000000000..e29987b0935
--- /dev/null
+++ b/changelogs/unreleased/54206-show-the-activity-filter-dropdown-in-discussion-tab-only.yml
@@ -0,0 +1,5 @@
+---
+title: Discussion filter only displayed in discussions tab for merge requests
+merge_request: 24082
+author:
+type: changed
diff --git a/spec/javascripts/notes/components/discussion_filter_spec.js b/spec/javascripts/notes/components/discussion_filter_spec.js
index 9070d968cfd..5efcab436e4 100644
--- a/spec/javascripts/notes/components/discussion_filter_spec.js
+++ b/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();
+      });
+    });
+  });
 });