Merge branch...

Merge branch '418040-migrate-app-assets-javascripts-work_items-components-notes-work_item_activity_sort_filter' into 'master'

Migrate to GlCollapsibleListbox in work_item_activity_sort_filter

See merge request !128968



Merged-by: Deepika Guliani <dguliani@gitlab.com>
Approved-by: Paulina Sedlak-Jakubowska <psedlak-jakubowska@gitlab.com>
Reviewed-by: Miguel Rincon <mrincon@gitlab.com>

app/assets/javascripts/work_items/components/notes/work_item_activity_sort_filter.vue

 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlCollapsibleListbox,
     LocalStorageSync,
   },
   mixins: [Tracking.mixin()],
@@ -25,7 +24,7 @@ export default {
       type: String,
       required: true,
     },
-    filterOptions: {
+    items: {
       type: Array,
       required: true,
     },
@@ -63,8 +62,7 @@ export default {
     },
     selectedSortOption() {
       return (
-        this.filterOptions.find(({ key }) => this.sortFilterProp === key) ||
-        this.defaultSortFilterProp
+        this.items.find(({ key }) => this.sortFilterProp === key) || this.defaultSortFilterProp
       );
     },
   },
@@ -94,23 +92,14 @@ export default {
       as-string
       @input="setDiscussionFilterOption"
     />
-    <gl-dropdown
-      class="gl-xs-w-full"
-      size="small"
-      :text="getDropdownSelectedText"
+    <gl-collapsible-listbox
+      :toggle-text="getDropdownSelectedText"
       :disabled="loading"
-      right
-    >
-      <gl-dropdown-item
-        v-for="{ text, key, testid } in filterOptions"
-        :key="text"
-        :data-testid="testid"
-        is-check-item
-        :is-checked="isSortDropdownItemActive(key)"
-        @click="fetchFilteredDiscussions(key)"
-      >
-        {{ text }}
-      </gl-dropdown-item>
-    </gl-dropdown>
+      :items="items"
+      :selected="sortFilterProp"
+      placement="right"
+      size="small"
+      @select="fetchFilteredDiscussions"
+    />
   </div>
 </template>

app/assets/javascripts/work_items/components/notes/work_item_notes_activity_header.vue

@@ -64,7 +64,7 @@ export default {
         :work-item-type="workItemType"
         :loading="disableActivityFilterSort"
         :sort-filter-prop="discussionFilter"
-        :filter-options="$options.WORK_ITEM_ACTIVITY_FILTER_OPTIONS"
+        :items="$options.WORK_ITEM_ACTIVITY_FILTER_OPTIONS"
         :storage-key="$options.WORK_ITEM_NOTES_FILTER_KEY"
         :default-sort-filter-prop="$options.WORK_ITEM_NOTES_FILTER_ALL_NOTES"
         tracking-action="work_item_notes_filter_changed"
@@ -77,7 +77,7 @@ export default {
         :work-item-type="workItemType"
         :loading="disableActivityFilterSort"
         :sort-filter-prop="sortOrder"
-        :filter-options="$options.WORK_ITEM_ACTIVITY_SORT_OPTIONS"
+        :items="$options.WORK_ITEM_ACTIVITY_SORT_OPTIONS"
         :storage-key="$options.WORK_ITEM_NOTES_SORT_ORDER_KEY"
         :default-sort-filter-prop="$options.ASC"
         tracking-action="work_item_notes_sort_order_changed"

app/assets/javascripts/work_items/constants.js

@@ -208,24 +208,22 @@ export const WORK_ITEM_NOTES_FILTER_KEY = 'filter_key_work_item';
 
 export const WORK_ITEM_ACTIVITY_FILTER_OPTIONS = [
   {
-    key: WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+    value: WORK_ITEM_NOTES_FILTER_ALL_NOTES,
     text: s__('WorkItem|All activity'),
   },
   {
-    key: WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS,
+    value: WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS,
     text: s__('WorkItem|Comments only'),
-    testid: 'comments-activity',
   },
   {
-    key: WORK_ITEM_NOTES_FILTER_ONLY_HISTORY,
+    value: WORK_ITEM_NOTES_FILTER_ONLY_HISTORY,
     text: s__('WorkItem|History only'),
-    testid: 'history-activity',
   },
 ];
 
 export const WORK_ITEM_ACTIVITY_SORT_OPTIONS = [
-  { key: DESC, text: __('Newest first'), testid: 'newest-first' },
-  { key: ASC, text: __('Oldest first') },
+  { value: DESC, text: __('Newest first') },
+  { value: ASC, text: __('Oldest first') },
 ];
 
 export const TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION = 'confidentiality-toggle-action';

spec/frontend/work_items/components/notes/work_item_activity_sort_filter_spec.js

-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import WorkItemActivitySortFilter from '~/work_items/components/notes/work_item_activity_sort_filter.vue';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
@@ -19,15 +19,13 @@ describe('Work Item Activity/Discussions Filtering', () => {
   let wrapper;
 
   const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findByDataTestId = (dataTestId) => wrapper.findByTestId(dataTestId);
+  const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
 
   const createComponent = ({
     loading = false,
     workItemType = 'Task',
     sortFilterProp = ASC,
-    filterOptions = WORK_ITEM_ACTIVITY_SORT_OPTIONS,
+    items = WORK_ITEM_ACTIVITY_SORT_OPTIONS,
     trackingLabel = 'item_track_notes_sorting',
     trackingAction = 'work_item_notes_sort_order_changed',
     filterEvent = 'changeSort',
@@ -39,7 +37,7 @@ describe('Work Item Activity/Discussions Filtering', () => {
         loading,
         workItemType,
         sortFilterProp,
-        filterOptions,
+        items,
         trackingLabel,
         trackingAction,
         filterEvent,
@@ -50,13 +48,13 @@ describe('Work Item Activity/Discussions Filtering', () => {
   };
 
   describe.each`
-    usedFor        | filterOptions                        | storageKey                        | filterEvent       | newInputOption                          | trackingLabel                 | trackingAction                          | defaultSortFilterProp               | sortFilterProp                      | nonDefaultDataTestId
-    ${'Sorting'}   | ${WORK_ITEM_ACTIVITY_SORT_OPTIONS}   | ${WORK_ITEM_NOTES_SORT_ORDER_KEY} | ${'changeSort'}   | ${DESC}                                 | ${'item_track_notes_sorting'} | ${'work_item_notes_sort_order_changed'} | ${ASC}                              | ${ASC}                              | ${'newest-first'}
-    ${'Filtering'} | ${WORK_ITEM_ACTIVITY_FILTER_OPTIONS} | ${WORK_ITEM_NOTES_FILTER_KEY}     | ${'changeFilter'} | ${WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS} | ${'item_track_notes_sorting'} | ${'work_item_notes_filter_changed'}     | ${WORK_ITEM_NOTES_FILTER_ALL_NOTES} | ${WORK_ITEM_NOTES_FILTER_ALL_NOTES} | ${'comments-activity'}
+    usedFor        | items                                | storageKey                        | filterEvent       | newInputOption                          | trackingLabel                 | trackingAction                          | defaultSortFilterProp               | sortFilterProp                      | nonDefaultValue
+    ${'Sorting'}   | ${WORK_ITEM_ACTIVITY_SORT_OPTIONS}   | ${WORK_ITEM_NOTES_SORT_ORDER_KEY} | ${'changeSort'}   | ${DESC}                                 | ${'item_track_notes_sorting'} | ${'work_item_notes_sort_order_changed'} | ${ASC}                              | ${ASC}                              | ${DESC}
+    ${'Filtering'} | ${WORK_ITEM_ACTIVITY_FILTER_OPTIONS} | ${WORK_ITEM_NOTES_FILTER_KEY}     | ${'changeFilter'} | ${WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS} | ${'item_track_notes_sorting'} | ${'work_item_notes_filter_changed'}     | ${WORK_ITEM_NOTES_FILTER_ALL_NOTES} | ${WORK_ITEM_NOTES_FILTER_ALL_NOTES} | ${WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS}
   `(
     'When used for $usedFor',
     ({
-      filterOptions,
+      items,
       storageKey,
       filterEvent,
       trackingLabel,
@@ -64,12 +62,12 @@ describe('Work Item Activity/Discussions Filtering', () => {
       newInputOption,
       defaultSortFilterProp,
       sortFilterProp,
-      nonDefaultDataTestId,
+      nonDefaultValue,
     }) => {
       beforeEach(() => {
         createComponent({
           sortFilterProp,
-          filterOptions,
+          items,
           trackingLabel,
           trackingAction,
           filterEvent,
@@ -79,8 +77,7 @@ describe('Work Item Activity/Discussions Filtering', () => {
       });
 
       it('has a dropdown with options equal to the length of `filterOptions`', () => {
-        expect(findDropdown().exists()).toBe(true);
-        expect(findAllDropdownItems()).toHaveLength(filterOptions.length);
+        expect(findListbox().props('items')).toEqual(items);
       });
 
       it('has local storage sync with the correct props', () => {
@@ -96,7 +93,7 @@ describe('Work Item Activity/Discussions Filtering', () => {
 
       it('emits tracking event when the a non default dropdown item is clicked', () => {
         const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-        findByDataTestId(nonDefaultDataTestId).vm.$emit('click');
+        findListbox().vm.$emit('select', nonDefaultValue);
 
         expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, trackingAction, {
           category: TRACKING_CATEGORY_SHOW,