1 files changed, 77 insertions, 0 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
new file mode 100644
index 00000000000..de7fbc4241c
--- /dev/null
+++ b/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
@@ -0,0 +1,77 @@
+<script>
+import { mapState } from 'vuex';
+import { GlSorting, GlSortingItem } from '@gitlab/ui';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { parseSortParam, buildSortHref } from '~/members/utils';
+import { FIELDS } from '~/members/constants';
+
+export default {
+  name: 'SortDropdown',
+  components: { GlSorting, GlSortingItem },
+  computed: {
+    ...mapState(['tableSortableFields', 'filteredSearchBar']),
+    sort() {
+      return parseSortParam(this.tableSortableFields);
+    },
+    activeOption() {
+      return FIELDS.find(field => field.key === this.sort.sortByKey);
+    },
+    activeOptionLabel() {
+      return this.activeOption?.label;
+    },
+    isAscending() {
+      return !this.sort.sortDesc;
+    },
+    filteredOptions() {
+      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,
+          }),
+        }),
+      );
+    },
+  },
+  methods: {
+    isActive(key) {
+      return this.activeOption.key === key;
+    },
+    handleSortDirectionChange() {
+      visitUrl(
+        buildSortHref({
+          sortBy: this.activeOption.key,
+          sortDesc: !this.sort.sortDesc,
+          filteredSearchBarTokens: this.filteredSearchBar.tokens,
+          filteredSearchBarSearchParam: this.filteredSearchBar.searchParam,
+        }),
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-sorting
+    class="gl-display-flex"
+    dropdown-class="gl-w-full"
+    data-testid="members-sort-dropdown"
+    :text="activeOptionLabel"
+    :is-ascending="isAscending"
+    :sort-direction-tool-tip="__('Sort direction')"
+    @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>