Add latest changes from gitlab-org/gitlab@master

3 files changed, 19 insertions, 32 deletions

diff --git a/app/assets/javascripts/work_items/components/notes/work_item_activity_sort_filter.vue b/app/assets/javascripts/work_items/components/notes/work_item_activity_sort_filter.vue
index 1ead16c944b..425679c1400 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_activity_sort_filter.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_activity_sort_filter.vue
@@ -1,13 +1,12 @@
 <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>
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_notes_activity_header.vue b/app/assets/javascripts/work_items/components/notes/work_item_notes_activity_header.vue
index 0c1419e983f..1578c78ac4f 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_notes_activity_header.vue
+++ b/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"
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 57206550328..d82ad31822c 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/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';