1 files changed, 8 insertions, 12 deletions
diff --git a/app/assets/javascripts/vue_shared/components/registry/registry_search.vue b/app/assets/javascripts/vue_shared/components/registry/registry_search.vue
index e41cd344b3f..e42bf405784 100644
--- a/app/assets/javascripts/vue_shared/components/registry/registry_search.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/registry_search.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlSorting, GlSortingItem, GlFilteredSearch } from '@gitlab/ui';
+import { GlSorting, GlFilteredSearch } from '@gitlab/ui';
 import { SORT_DIRECTION_UI } from '~/search/sort/constants';
 import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants';
 
@@ -9,7 +9,6 @@ const DESCENDING_ORDER = 'desc';
 export default {
   components: {
     GlSorting,
-    GlSortingItem,
     GlFilteredSearch,
   },
   props: {
@@ -56,6 +55,9 @@ export default {
     sortDirectionData() {
       return this.isSortAscending ? SORT_DIRECTION_UI.asc : SORT_DIRECTION_UI.desc;
     },
+    sortOptions() {
+      return this.sortableFields.map(({ orderBy, label }) => ({ text: label, value: orderBy }));
+    },
   },
   methods: {
     generateQueryData({ sorting = {}, filter = [] } = {}) {
@@ -138,16 +140,10 @@ export default {
       :text="sortText"
       :is-ascending="isSortAscending"
       :sort-direction-tool-tip="sortDirectionData.tooltip"
+      :sort-options="sortOptions"
+      :sort-by="sorting.orderBy"
       @sortDirectionChange="onDirectionChange"
-    >
-      <gl-sorting-item
-        v-for="item in sortableFields"
-        ref="packageListSortItem"
-        :key="item.orderBy"
-        @click="onSortItemClick(item.orderBy)"
-      >
-        {{ item.label }}
-      </gl-sorting-item>
-    </gl-sorting>
+      @sortByChange="onSortItemClick"
+    />
   </div>
 </template>