Add latest changes from gitlab-org/gitlab@master

6 files changed, 231 insertions, 45 deletions

diff --git a/spec/frontend/artifacts/components/job_artifacts_table_spec.js b/spec/frontend/artifacts/components/job_artifacts_table_spec.js
index 790b082c10b..44c242fa2cb 100644
--- a/spec/frontend/artifacts/components/job_artifacts_table_spec.js
+++ b/spec/frontend/artifacts/components/job_artifacts_table_spec.js
@@ -74,7 +74,14 @@ describe('JobArtifactsTable component', () => {
     ];
   }
   const getJobArtifactsResponseThatPaginates = {
-    data: { project: { jobs: { nodes: enoughJobsToPaginate } } },
+    data: {
+      project: {
+        jobs: {
+          nodes: enoughJobsToPaginate,
+          pageInfo: { ...getJobArtifactsResponse.data.project.jobs.pageInfo, hasNextPage: true },
+        },
+      },
+    },
   };
 
   const job = getJobArtifactsResponse.data.project.jobs.nodes[0];
@@ -316,7 +323,7 @@ describe('JobArtifactsTable component', () => {
   });
 
   describe('pagination', () => {
-    const { pageInfo } = getJobArtifactsResponse.data.project.jobs;
+    const { pageInfo } = getJobArtifactsResponseThatPaginates.data.project.jobs;
     const query = jest.fn().mockResolvedValue(getJobArtifactsResponseThatPaginates);
 
     beforeEach(async () => {
@@ -324,10 +331,7 @@ describe('JobArtifactsTable component', () => {
         {
           getJobArtifactsQuery: query,
         },
-        {
-          count: enoughJobsToPaginate.length,
-          pageInfo,
-        },
+        { pageInfo },
       );
 
       await waitForPromises();
diff --git a/spec/frontend/work_items/components/notes/activity_filter_spec.js b/spec/frontend/work_items/components/notes/activity_filter_spec.js
index eb4bcbf942b..86c4ad9b361 100644
--- a/spec/frontend/work_items/components/notes/activity_filter_spec.js
+++ b/spec/frontend/work_items/components/notes/activity_filter_spec.js
@@ -1,25 +1,33 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ActivityFilter from '~/work_items/components/notes/activity_filter.vue';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { ASC, DESC } from '~/notes/constants';
+import {
+  WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+  WORK_ITEM_NOTES_FILTER_ONLY_HISTORY,
+  WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS,
+  TRACKING_CATEGORY_SHOW,
+} from '~/work_items/constants';
 
 import { mockTracking } from 'helpers/tracking_helper';
-import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
 
-describe('Activity Filter', () => {
+describe('Work Item Activity/Discussions Filtering', () => {
   let wrapper;
 
   const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findNewestFirstItem = () => wrapper.findByTestId('js-newest-first');
+  const findOnlyCommentsItem = () => wrapper.findByTestId('comments-activity');
+  const findOnlyHistoryItem = () => wrapper.findByTestId('history-activity');
 
-  const createComponent = ({ sortOrder = ASC, loading = false, workItemType = 'Task' } = {}) => {
+  const createComponent = ({
+    discussionFilter = WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+    loading = false,
+    workItemType = 'Task',
+  } = {}) => {
     wrapper = shallowMountExtended(ActivityFilter, {
       propsData: {
-        sortOrder,
+        discussionFilter,
         loading,
         workItemType,
       },
@@ -30,45 +38,46 @@ describe('Activity Filter', () => {
     createComponent();
   });
 
-  describe('default', () => {
-    it('has a dropdown with 2 options', () => {
+  describe('Default', () => {
+    it('has a dropdown with 3 options', () => {
       expect(findDropdown().exists()).toBe(true);
-      expect(findAllDropdownItems()).toHaveLength(ActivityFilter.SORT_OPTIONS.length);
+      expect(findAllDropdownItems()).toHaveLength(ActivityFilter.filterOptions.length);
     });
 
     it('has local storage sync with the correct props', () => {
       expect(findLocalStorageSync().props('asString')).toBe(true);
     });
 
-    it('emits `updateSavedSortOrder` event when update is emitted', async () => {
-      findLocalStorageSync().vm.$emit('input', ASC);
+    it('emits `changeFilter` event when local storage input is emitted', () => {
+      findLocalStorageSync().vm.$emit('input', WORK_ITEM_NOTES_FILTER_ONLY_HISTORY);
 
-      await nextTick();
-      expect(wrapper.emitted('updateSavedSortOrder')).toHaveLength(1);
-      expect(wrapper.emitted('updateSavedSortOrder')).toEqual([[ASC]]);
+      expect(wrapper.emitted('changeFilter')).toEqual([[WORK_ITEM_NOTES_FILTER_ONLY_HISTORY]]);
     });
   });
 
-  describe('when asc', () => {
-    describe('when the dropdown is clicked', () => {
-      it('calls the right actions', async () => {
+  describe('Changing filter value', () => {
+    it.each`
+      dropdownLabel      | filterValue                             | dropdownItem
+      ${'Comments only'} | ${WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS} | ${findOnlyCommentsItem}
+      ${'History only'}  | ${WORK_ITEM_NOTES_FILTER_ONLY_HISTORY}  | ${findOnlyHistoryItem}
+    `(
+      'when `$dropdownLabel` is clicked it emits `$filterValue` with tracking info',
+      ({ dropdownItem, filterValue }) => {
         const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-        findNewestFirstItem().vm.$emit('click');
-        await nextTick();
+        dropdownItem().vm.$emit('click');
 
-        expect(wrapper.emitted('changeSortOrder')).toHaveLength(1);
-        expect(wrapper.emitted('changeSortOrder')).toEqual([[DESC]]);
+        expect(wrapper.emitted('changeFilter')).toEqual([[filterValue]]);
 
         expect(trackingSpy).toHaveBeenCalledWith(
           TRACKING_CATEGORY_SHOW,
-          'notes_sort_order_changed',
+          'work_item_notes_filter_changed',
           {
             category: TRACKING_CATEGORY_SHOW,
-            label: 'item_track_notes_sorting',
+            label: 'item_track_notes_filtering',
             property: 'type_Task',
           },
         );
-      });
-    });
+      },
+    );
   });
 });
diff --git a/spec/frontend/work_items/components/notes/activity_sort_spec.js b/spec/frontend/work_items/components/notes/activity_sort_spec.js
new file mode 100644
index 00000000000..289823dc59e
--- /dev/null
+++ b/spec/frontend/work_items/components/notes/activity_sort_spec.js
@@ -0,0 +1,69 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ActivitySort from '~/work_items/components/notes/activity_sort.vue';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import { ASC, DESC } from '~/notes/constants';
+
+import { mockTracking } from 'helpers/tracking_helper';
+import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
+
+describe('Work Item Activity Sorting', () => {
+  let wrapper;
+
+  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findNewestFirstItem = () => wrapper.findByTestId('newest-first');
+
+  const createComponent = ({ sortOrder = ASC, loading = false, workItemType = 'Task' } = {}) => {
+    wrapper = shallowMountExtended(ActivitySort, {
+      propsData: {
+        sortOrder,
+        loading,
+        workItemType,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('default', () => {
+    it('has a dropdown with 2 options', () => {
+      expect(findDropdown().exists()).toBe(true);
+      expect(findAllDropdownItems()).toHaveLength(ActivitySort.sortOptions.length);
+    });
+
+    it('has local storage sync with the correct props', () => {
+      expect(findLocalStorageSync().props('asString')).toBe(true);
+    });
+
+    it('emits `changeSort` event when update is emitted', () => {
+      findLocalStorageSync().vm.$emit('input', ASC);
+
+      expect(wrapper.emitted('changeSort')).toEqual([[ASC]]);
+    });
+  });
+
+  describe('when asc', () => {
+    describe('when the dropdown is clicked', () => {
+      it('calls the right actions', () => {
+        const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+        findNewestFirstItem().vm.$emit('click');
+
+        expect(wrapper.emitted('changeSort')).toEqual([[DESC]]);
+
+        expect(trackingSpy).toHaveBeenCalledWith(
+          TRACKING_CATEGORY_SHOW,
+          'work_item_notes_sort_order_changed',
+          {
+            category: TRACKING_CATEGORY_SHOW,
+            label: 'item_track_notes_sorting',
+            property: 'type_Task',
+          },
+        );
+      });
+    });
+  });
+});
diff --git a/spec/frontend/work_items/components/notes/work_item_history_only_filter_note_spec.js b/spec/frontend/work_items/components/notes/work_item_history_only_filter_note_spec.js
new file mode 100644
index 00000000000..339efad0608
--- /dev/null
+++ b/spec/frontend/work_items/components/notes/work_item_history_only_filter_note_spec.js
@@ -0,0 +1,44 @@
+import { GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import WorkItemHistoryOnlyFilterNote from '~/work_items/components/notes/work_item_history_only_filter_note.vue';
+import {
+  WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+  WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS,
+} from '~/work_items/constants';
+
+describe('Work Item History Filter note', () => {
+  let wrapper;
+
+  const findShowAllActivityButton = () => wrapper.findByTestId('show-all-activity');
+  const findShowCommentsButton = () => wrapper.findByTestId('show-comments-only');
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(WorkItemHistoryOnlyFilterNote, {
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('timelineContent renders a string containing instruction for switching feed type', () => {
+    expect(wrapper.text()).toContain(
+      "You're only seeing other activity in the feed. To add a comment, switch to one of the following options.",
+    );
+  });
+
+  it('emits `changeFilter` event with 0 parameter on clicking Show all activity button', () => {
+    findShowAllActivityButton().vm.$emit('click');
+
+    expect(wrapper.emitted('changeFilter')).toEqual([[WORK_ITEM_NOTES_FILTER_ALL_NOTES]]);
+  });
+
+  it('emits `changeFilter` event with 1 parameter on clicking Show comments only button', () => {
+    findShowCommentsButton().vm.$emit('click');
+
+    expect(wrapper.emitted('changeFilter')).toEqual([[WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS]]);
+  });
+});
diff --git a/spec/frontend/work_items/components/notes/work_item_notes_activity_header_spec.js b/spec/frontend/work_items/components/notes/work_item_notes_activity_header_spec.js
new file mode 100644
index 00000000000..3b87a5e3e88
--- /dev/null
+++ b/spec/frontend/work_items/components/notes/work_item_notes_activity_header_spec.js
@@ -0,0 +1,65 @@
+import { shallowMount } from '@vue/test-utils';
+import WorkItemNotesActivityHeader from '~/work_items/components/notes/work_item_notes_activity_header.vue';
+import ActivitySort from '~/work_items/components/notes/activity_sort.vue';
+import ActivityFilter from '~/work_items/components/notes/activity_filter.vue';
+import { ASC } from '~/notes/constants';
+import {
+  WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+  WORK_ITEM_NOTES_FILTER_ONLY_HISTORY,
+} from '~/work_items/constants';
+
+describe('Work Item Note Activity Header', () => {
+  let wrapper;
+
+  const findActivityLabelHeading = () => wrapper.find('h3');
+  const findActivityFilterDropdown = () => wrapper.findComponent(ActivityFilter);
+  const findActivitySortDropdown = () => wrapper.findComponent(ActivitySort);
+
+  const createComponent = ({
+    disableActivityFilterSort = false,
+    sortOrder = ASC,
+    workItemType = 'Task',
+    discussionFilter = WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+  } = {}) => {
+    wrapper = shallowMount(WorkItemNotesActivityHeader, {
+      propsData: {
+        disableActivityFilterSort,
+        sortOrder,
+        workItemType,
+        discussionFilter,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('Should have the Activity label', () => {
+    expect(findActivityLabelHeading().text()).toBe(WorkItemNotesActivityHeader.i18n.activityLabel);
+  });
+
+  it('Should have Activity filtering dropdown', () => {
+    expect(findActivityFilterDropdown().exists()).toBe(true);
+  });
+
+  it('Should have Activity sorting dropdown', () => {
+    expect(findActivitySortDropdown().exists()).toBe(true);
+  });
+
+  describe('Activity Filter', () => {
+    it('emits `changeFilter` when filtering discussions', () => {
+      findActivityFilterDropdown().vm.$emit('changeFilter', WORK_ITEM_NOTES_FILTER_ONLY_HISTORY);
+
+      expect(wrapper.emitted('changeFilter')).toEqual([[WORK_ITEM_NOTES_FILTER_ONLY_HISTORY]]);
+    });
+  });
+
+  describe('Activity Sorting', () => {
+    it('emits `changeSort` when sorting discussions/activity', () => {
+      findActivitySortDropdown().vm.$emit('changeSort', ASC);
+
+      expect(wrapper.emitted('changeSort')).toEqual([[ASC]]);
+    });
+  });
+});
diff --git a/spec/frontend/work_items/components/work_item_notes_spec.js b/spec/frontend/work_items/components/work_item_notes_spec.js
index 157e00d3eac..09d0022fa1e 100644
--- a/spec/frontend/work_items/components/work_item_notes_spec.js
+++ b/spec/frontend/work_items/components/work_item_notes_spec.js
@@ -9,7 +9,7 @@ import SystemNote from '~/work_items/components/notes/system_note.vue';
 import WorkItemNotes from '~/work_items/components/work_item_notes.vue';
 import WorkItemDiscussion from '~/work_items/components/notes/work_item_discussion.vue';
 import WorkItemAddNote from '~/work_items/components/notes/work_item_add_note.vue';
-import ActivityFilter from '~/work_items/components/notes/activity_filter.vue';
+import WorkItemNotesActivityHeader from '~/work_items/components/notes/work_item_notes_activity_header.vue';
 import workItemNotesQuery from '~/work_items/graphql/notes/work_item_notes.query.graphql';
 import workItemNotesByIidQuery from '~/work_items/graphql/notes/work_item_notes_by_iid.query.graphql';
 import deleteWorkItemNoteMutation from '~/work_items/graphql/notes/delete_work_item_notes.mutation.graphql';
@@ -59,10 +59,9 @@ describe('WorkItemNotes component', () => {
 
   const findAllSystemNotes = () => wrapper.findAllComponents(SystemNote);
   const findAllListItems = () => wrapper.findAll('ul.timeline > *');
-  const findActivityLabel = () => wrapper.find('label');
   const findWorkItemAddNote = () => wrapper.findComponent(WorkItemAddNote);
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
-  const findSortingFilter = () => wrapper.findComponent(ActivityFilter);
+  const findActivityHeader = () => wrapper.findComponent(WorkItemNotesActivityHeader);
   const findSystemNoteAtIndex = (index) => findAllSystemNotes().at(index);
   const findAllWorkItemCommentNotes = () => wrapper.findAllComponents(WorkItemDiscussion);
   const findWorkItemCommentNoteAtIndex = (index) => findAllWorkItemCommentNotes().at(index);
@@ -129,8 +128,8 @@ describe('WorkItemNotes component', () => {
     createComponent();
   });
 
-  it('renders activity label', () => {
-    expect(findActivityLabel().exists()).toBe(true);
+  it('has the work item note activity header', () => {
+    expect(findActivityHeader().exists()).toBe(true);
   });
 
   it('passes correct props to comment form component', async () => {
@@ -221,26 +220,22 @@ describe('WorkItemNotes component', () => {
       await waitForPromises();
     });
 
-    it('filter exists', () => {
-      expect(findSortingFilter().exists()).toBe(true);
-    });
-
-    it('sorts the list when the `changeSortOrder` event is emitted', async () => {
+    it('sorts the list when the `changeSort` event is emitted', async () => {
       expect(findSystemNoteAtIndex(0).props('note').id).toEqual(firstSystemNodeId);
 
-      await findSortingFilter().vm.$emit('changeSortOrder', DESC);
+      await findActivityHeader().vm.$emit('changeSort', DESC);
 
       expect(findSystemNoteAtIndex(0).props('note').id).not.toEqual(firstSystemNodeId);
     });
 
     it('puts form at start of list in when sorting by newest first', async () => {
-      await findSortingFilter().vm.$emit('changeSortOrder', DESC);
+      await findActivityHeader().vm.$emit('changeSort', DESC);
 
       expect(findAllListItems().at(0).is(WorkItemAddNote)).toEqual(true);
     });
 
     it('puts form at end of list in when sorting by oldest first', async () => {
-      await findSortingFilter().vm.$emit('changeSortOrder', ASC);
+      await findActivityHeader().vm.$emit('changeSort', ASC);
 
       expect(findAllListItems().at(-1).is(WorkItemAddNote)).toEqual(true);
     });