1 files changed, 21 insertions, 20 deletions

diff --git a/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue b/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
index b61b2bdd0c9..a318d013228 100644
--- a/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
+++ b/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlSorting, GlSortingItem } from '@gitlab/ui';
+import { GlSorting } from '@gitlab/ui';
 // eslint-disable-next-line no-restricted-imports
 import { mapState } from 'vuex';
 import { visitUrl } from '~/lib/utils/url_utility';
@@ -9,7 +9,7 @@ import { SORT_DIRECTION_UI } from '~/search/sort/constants';
 
 export default {
   name: 'SortDropdown',
-  components: { GlSorting, GlSortingItem },
+  components: { GlSorting },
   inject: ['namespace'],
   computed: {
     ...mapState({
@@ -29,6 +29,9 @@ export default {
     activeOptionLabel() {
       return this.activeOption?.label;
     },
+    activeOptionKey() {
+      return this.activeOption?.key;
+    },
     isAscending() {
       return !this.sort.sortDesc;
     },
@@ -39,14 +42,8 @@ export default {
       return FIELDS.filter(
         (field) => this.tableSortableFields.includes(field.key) && field.sort,
       ).map((field) => ({
-        key: field.key,
-        label: field.label,
-        href: buildSortHref({
-          sortBy: field.key,
-          sortDesc: false,
-          filteredSearchBarTokens: this.filteredSearchBar.tokens,
-          filteredSearchBarSearchParam: this.filteredSearchBar.searchParam,
-        }),
+        text: field.label,
+        value: field.key,
       }));
     },
   },
@@ -64,6 +61,16 @@ export default {
         }),
       );
     },
+    handleSortingItemClick(value) {
+      visitUrl(
+        buildSortHref({
+          sortBy: value,
+          sortDesc: false,
+          filteredSearchBarTokens: this.filteredSearchBar.tokens,
+          filteredSearchBarSearchParam: this.filteredSearchBar.searchParam,
+        }),
+      );
+    },
   },
 };
 </script>
@@ -76,15 +83,9 @@ export default {
     :text="activeOptionLabel"
     :is-ascending="isAscending"
     :sort-direction-tool-tip="sortDirectionData.tooltip"
+    :sort-options="filteredOptions"
+    :sort-by="activeOptionKey"
+    @sortByChange="handleSortingItemClick"
     @sortDirectionChange="handleSortDirectionChange"
-  >
-    <gl-sorting-item
-      v-for="option in filteredOptions"
-      :key="option.key"
-      :href="option.href"
-      :active="isActive(option.key)"
-    >
-      {{ option.label }}
-    </gl-sorting-item>
-  </gl-sorting>
+  />
 </template>