1 files changed, 59 insertions, 53 deletions

diff --git a/app/assets/javascripts/work_items/components/notes/activity_filter.vue b/app/assets/javascripts/work_items/components/notes/activity_filter.vue
index 71784d3a807..6d5535797ef 100644
--- a/app/assets/javascripts/work_items/components/notes/activity_filter.vue
+++ b/app/assets/javascripts/work_items/components/notes/activity_filter.vue
@@ -1,18 +1,35 @@
 <script>
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { ASC, DESC } from '~/notes/constants';
-import { TRACKING_CATEGORY_SHOW, WORK_ITEM_NOTES_SORT_ORDER_KEY } from '~/work_items/constants';
+import {
+  WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+  WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS,
+  WORK_ITEM_NOTES_FILTER_ONLY_HISTORY,
+  TRACKING_CATEGORY_SHOW,
+  WORK_ITEM_NOTES_FILTER_KEY,
+} from '~/work_items/constants';
 
-const SORT_OPTIONS = [
-  { key: DESC, text: __('Newest first'), dataid: 'js-newest-first' },
-  { key: ASC, text: __('Oldest first'), dataid: 'js-oldest-first' },
+const filterOptions = [
+  {
+    key: WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+    text: s__('WorkItem|All activity'),
+  },
+  {
+    key: WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS,
+    text: s__('WorkItem|Comments only'),
+    testid: 'comments-activity',
+  },
+  {
+    key: WORK_ITEM_NOTES_FILTER_ONLY_HISTORY,
+    text: s__('WorkItem|History only'),
+    testid: 'history-activity',
+  },
 ];
 
 export default {
-  SORT_OPTIONS,
+  filterOptions,
   components: {
     GlDropdown,
     GlDropdownItem,
@@ -20,11 +37,6 @@ export default {
   },
   mixins: [Tracking.mixin()],
   props: {
-    sortOrder: {
-      type: String,
-      default: ASC,
-      required: false,
-    },
     loading: {
       type: Boolean,
       default: false,
@@ -34,80 +46,74 @@ export default {
       type: String,
       required: true,
     },
-  },
-  data() {
-    return {
-      persistSortOrder: true,
-    };
+    discussionFilter: {
+      type: String,
+      default: WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+      required: false,
+    },
   },
   computed: {
     tracking() {
       return {
         category: TRACKING_CATEGORY_SHOW,
-        label: 'item_track_notes_sorting',
+        label: 'item_track_notes_filtering',
         property: `type_${this.workItemType}`,
       };
     },
-    selectedSortOption() {
-      const isSortOptionValid = this.sortOrder === ASC || this.sortOrder === DESC;
-      return isSortOptionValid ? SORT_OPTIONS.find(({ key }) => this.sortOrder === key) : ASC;
-    },
     getDropdownSelectedText() {
       return this.selectedSortOption.text;
     },
+    selectedSortOption() {
+      return (
+        filterOptions.find(({ key }) => this.discussionFilter === key) ||
+        WORK_ITEM_NOTES_FILTER_ALL_NOTES
+      );
+    },
   },
   methods: {
-    setDiscussionSortDirection(direction) {
-      this.$emit('updateSavedSortOrder', direction);
+    setDiscussionFilterOption(filterValue) {
+      this.$emit('changeFilter', filterValue);
     },
-    fetchSortedDiscussions(direction) {
-      if (this.isSortDropdownItemActive(direction)) {
+    fetchFilteredDiscussions(filterValue) {
+      if (this.isSortDropdownItemActive(filterValue)) {
         return;
       }
-      this.track('notes_sort_order_changed');
-      this.$emit('changeSortOrder', direction);
+      this.track('work_item_notes_filter_changed');
+      this.$emit('changeFilter', filterValue);
     },
-    isSortDropdownItemActive(sortDir) {
-      return sortDir === this.sortOrder;
+    isSortDropdownItemActive(discussionFilter) {
+      return discussionFilter === this.discussionFilter;
     },
   },
-  WORK_ITEM_NOTES_SORT_ORDER_KEY,
+  WORK_ITEM_NOTES_FILTER_KEY,
 };
 </script>
 
 <template>
-  <div
-    id="discussion-preferences"
-    data-testid="discussion-preferences"
-    class="gl-display-inline-block gl-vertical-align-bottom gl-w-full gl-sm-w-auto"
-  >
+  <div class="gl-display-inline-block gl-vertical-align-bottom">
     <local-storage-sync
-      :value="sortOrder"
-      :storage-key="$options.WORK_ITEM_NOTES_SORT_ORDER_KEY"
-      :persist="persistSortOrder"
+      :value="discussionFilter"
+      :storage-key="$options.WORK_ITEM_NOTES_FILTER_KEY"
       as-string
-      @input="setDiscussionSortDirection"
+      @input="setDiscussionFilterOption"
     />
     <gl-dropdown
-      :id="`discussion-preferences-dropdown-${workItemType}`"
       class="gl-xs-w-full"
       size="small"
       :text="getDropdownSelectedText"
       :disabled="loading"
       right
     >
-      <div id="discussion-sort">
-        <gl-dropdown-item
-          v-for="{ text, key, dataid } in $options.SORT_OPTIONS"
-          :key="text"
-          :data-testid="dataid"
-          is-check-item
-          :is-checked="isSortDropdownItemActive(key)"
-          @click="fetchSortedDiscussions(key)"
-        >
-          {{ text }}
-        </gl-dropdown-item>
-      </div>
+      <gl-dropdown-item
+        v-for="{ text, key, testid } in $options.filterOptions"
+        :key="text"
+        :data-testid="testid"
+        is-check-item
+        :is-checked="isSortDropdownItemActive(key)"
+        @click="fetchFilteredDiscussions(key)"
+      >
+        {{ text }}
+      </gl-dropdown-item>
     </gl-dropdown>
   </div>
 </template>