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

2 files changed, 19 insertions, 2 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,