Merge branch...

Merge branch '413497-migrate-app-assets-javascripts-tags-components-sort_dropdown-vue-to-gldisclosuredropdown-or' into 'master'

Migrate tags sort_dropdown GlDropdown to GlCollapsibleListbox

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/122451



Merged-by: Mark Florian <mflorian@gitlab.com>
Approved-by: Mark Florian <mflorian@gitlab.com>
Reviewed-by: Mark Florian <mflorian@gitlab.com>
Reviewed-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Co-authored-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Co-authored-by: Thomas Hutterer <thutterer@gitlab.com>

app/assets/javascripts/tags/components/sort_dropdown.vue

 <script>
-import { GlDropdown, GlDropdownItem, GlSearchBoxByClick } from '@gitlab/ui';
+import { GlCollapsibleListbox, GlSearchBoxByClick } from '@gitlab/ui';
 import { mergeUrlParams, visitUrl, getParameterValues } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 
@@ -8,8 +8,7 @@ export default {
     searchPlaceholder: s__('TagsPage|Filter by tag name'),
   },
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlCollapsibleListbox,
     GlSearchBoxByClick,
   },
   inject: ['sortOptions', 'filterTagsPath'],
@@ -23,6 +22,11 @@ export default {
     selectedSortMethod() {
       return this.sortOptions[this.selectedKey];
     },
+    sortOptionsListboxItems() {
+      return Object.entries(this.sortOptions).map(([value, text]) => {
+        return { value, text };
+      });
+    },
   },
   created() {
     const sortValue = getParameterValues('sort');
@@ -37,9 +41,6 @@ export default {
     }
   },
   methods: {
-    isSortMethodSelected(sortKey) {
-      return sortKey === this.selectedKey;
-    },
     visitUrlFromOption(sortKey) {
       this.selectedKey = sortKey;
       const urlParams = {};
@@ -62,16 +63,13 @@ export default {
       data-testid="tag-search"
       @submit="visitUrlFromOption(selectedKey)"
     />
-    <gl-dropdown :text="selectedSortMethod" right data-testid="tags-dropdown">
-      <gl-dropdown-item
-        v-for="(value, key) in sortOptions"
-        :key="key"
-        :is-checked="isSortMethodSelected(key)"
-        is-check-item
-        @click="visitUrlFromOption(key)"
-      >
-        {{ value }}
-      </gl-dropdown-item>
-    </gl-dropdown>
+    <gl-collapsible-listbox
+      v-model="selectedKey"
+      data-testid="tags-dropdown"
+      :items="sortOptionsListboxItems"
+      placement="right"
+      :toggle-text="selectedSortMethod"
+      @select="visitUrlFromOption"
+    />
   </div>
 </template>

spec/frontend/tags/components/sort_dropdown_spec.js

-import { GlDropdownItem, GlSearchBoxByClick } from '@gitlab/ui';
+import { GlListboxItem, GlSearchBoxByClick } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import * as urlUtils from '~/lib/utils/url_utility';
@@ -39,9 +39,9 @@ describe('Tags sort dropdown', () => {
     });
 
     it('should have a sort order dropdown', () => {
-      const branchesDropdown = findTagsDropdown();
+      const tagsDropdown = findTagsDropdown();
 
-      expect(branchesDropdown.exists()).toBe(true);
+      expect(tagsDropdown.exists()).toBe(true);
     });
   });
 
@@ -63,9 +63,9 @@ describe('Tags sort dropdown', () => {
     });
 
     it('should send a sort parameter', () => {
-      const sortDropdownItems = findTagsDropdown().findAllComponents(GlDropdownItem).at(0);
+      const sortDropdownItem = findTagsDropdown().findAllComponents(GlListboxItem).at(0);
 
-      sortDropdownItems.vm.$emit('click');
+      sortDropdownItem.trigger('click');
 
       expect(urlUtils.visitUrl).toHaveBeenCalledWith(
         '/root/ci-cd-project-demo/-/tags?sort=name_asc',