Add support for toggling discussion filter from notes section

Adds discussion note style section under notes app from where
user can toggle discussion when they have selected a filter to show
only system notes.

4 files changed, 83 insertions, 2 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue
index e03d6e9cd02..31164f74201 100644
--- a/app/assets/javascripts/notes/components/discussion_filter.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter.vue
@@ -7,7 +7,9 @@ import {
   DISCUSSION_FILTERS_DEFAULT_VALUE,
   HISTORY_ONLY_FILTER_VALUE,
   DISCUSSION_TAB_LABEL,
+  DISCUSSION_FILTER_TYPES,
 } from '../constants';
+import notesEventHub from '../event_hub';
 
 export default {
   components: {
@@ -46,6 +48,7 @@ export default {
       this.toggleFilters(currentTab);
     }
 
+    notesEventHub.$on('dropdownSelect', this.selectFilter);
     window.addEventListener('hashchange', this.handleLocationHash);
     this.handleLocationHash();
   },
@@ -53,6 +56,7 @@ export default {
     this.toggleCommentsForm();
   },
   destroyed() {
+    notesEventHub.$off('dropdownSelect', this.selectFilter);
     window.removeEventListener('hashchange', this.handleLocationHash);
   },
   methods: {
@@ -86,12 +90,23 @@ export default {
         this.setTargetNoteHash(hash);
       }
     },
+    filterType(value) {
+      if (value === 0) {
+        return DISCUSSION_FILTER_TYPES.ALL;
+      } else if (value === 1) {
+        return DISCUSSION_FILTER_TYPES.COMMENTS;
+      }
+      return DISCUSSION_FILTER_TYPES.HISTORY;
+    },
   },
 };
 </script>
 
 <template>
-  <div v-if="displayFilters" class="discussion-filter-container d-inline-block align-bottom">
+  <div
+    v-if="displayFilters"
+    class="discussion-filter-container js-discussion-filter-container d-inline-block align-bottom"
+  >
     <button
       id="discussion-filter-dropdown"
       ref="dropdownToggle"
@@ -102,12 +117,17 @@ export default {
       {{ currentFilter.title }} <icon name="chevron-down" />
     </button>
     <div
+      ref="dropdownMenu"
       class="dropdown-menu dropdown-menu-selectable dropdown-menu-right"
       aria-labelledby="discussion-filter-dropdown"
     >
       <div class="dropdown-content">
         <ul>
-          <li v-for="filter in filters" :key="filter.value">
+          <li
+            v-for="filter in filters"
+            :key="filter.value"
+            :data-filter-type="filterType(filter.value)"
+          >
             <button
               :class="{ 'is-active': filter.value === currentValue }"
               class="qa-filter-options"
diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue
new file mode 100644
index 00000000000..46661e06f6d
--- /dev/null
+++ b/app/assets/javascripts/notes/components/discussion_filter_note.vue
@@ -0,0 +1,52 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { __, sprintf } from '~/locale';
+
+import notesEventHub from '../event_hub';
+
+export default {
+  components: {
+    GlButton,
+    Icon,
+  },
+  computed: {
+    timelineContent() {
+      return sprintf(
+        __(
+          "You're only seeing %{startTag}other activity%{endTag} in the feed. To add a comment, switch to one of the following options.",
+        ),
+        {
+          startTag: `<b>`,
+          endTag: `</b>`,
+        },
+        false,
+      );
+    },
+  },
+  methods: {
+    selectFilter(value) {
+      notesEventHub.$emit('dropdownSelect', value);
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="timeline-entry note note-wrapper discussion-filter-note js-discussion-filter-note">
+    <div class="timeline-icon">
+      <icon name="comment" />
+    </div>
+    <div class="timeline-content">
+      <div v-html="timelineContent"></div>
+      <div class="discussion-filter-actions mt-2">
+        <gl-button variant="default" @click="selectFilter(0)">
+          {{ __('Show all activity') }}
+        </gl-button>
+        <gl-button variant="default" @click="selectFilter(1)">
+          {{ __('Show comments only') }}
+        </gl-button>
+      </div>
+    </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 8d3f6d902f8..e2bd59f7631 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -6,6 +6,7 @@ import * as constants from '../constants';
 import eventHub from '../event_hub';
 import noteableNote from './noteable_note.vue';
 import noteableDiscussion from './noteable_discussion.vue';
+import discussionFilterNote from './discussion_filter_note.vue';
 import systemNote from '../../vue_shared/components/notes/system_note.vue';
 import commentForm from './comment_form.vue';
 import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
@@ -24,6 +25,7 @@ export default {
     placeholderNote,
     placeholderSystemNote,
     skeletonLoadingContainer,
+    discussionFilterNote,
   },
   props: {
     noteableData: {
@@ -235,6 +237,7 @@ export default {
           :help-page-path="helpPagePath"
         />
       </template>
+      <discussion-filter-note v-show="commentsDisabled" />
     </ul>
 
     <comment-form v-if="!commentsDisabled" :noteable-type="noteableType" />
diff --git a/app/assets/javascripts/notes/constants.js b/app/assets/javascripts/notes/constants.js
index 78d365fe94b..fba3db8542c 100644
--- a/app/assets/javascripts/notes/constants.js
+++ b/app/assets/javascripts/notes/constants.js
@@ -24,3 +24,9 @@ export const NOTEABLE_TYPE_MAPPING = {
   MergeRequest: MERGE_REQUEST_NOTEABLE_TYPE,
   Epic: EPIC_NOTEABLE_TYPE,
 };
+
+export const DISCUSSION_FILTER_TYPES = {
+  ALL: 'all',
+  COMMENTS: 'comments',
+  HISTORY: 'history',
+};