Add latest changes from gitlab-org/gitlab@master

3 files changed, 68 insertions, 86 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 e2fbb074fcd..de7fbc4241c 100644
--- a/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
+++ b/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
@@ -1,66 +1,77 @@
 <script>
 import { mapState } from 'vuex';
-import { GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
-import { parseSortParam, buildSortUrl } from '~/members/utils';
+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: { GlDropdown, GlDropdownItem, GlFormGroup },
+  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() {
-      const buildOption = (field, sortDesc) => ({
-        ...(sortDesc ? field.sort.desc : field.sort.asc),
-        key: field.key,
-        sortDesc,
-        url: buildSortUrl({
-          sortBy: field.key,
-          sortDesc,
-          filteredSearchBarTokens: this.filteredSearchBar.tokens,
-          filteredSearchBarSearchParam: this.filteredSearchBar.searchParam,
+      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,
+          }),
         }),
-      });
-
-      return FIELDS.filter(
-        field => this.tableSortableFields.includes(field.key) && field.sort,
-      ).flatMap(field => [buildOption(field, false), buildOption(field, true)]);
+      );
     },
   },
   methods: {
-    isChecked(key, sortDesc) {
-      return this.sort?.sortBy === key && this.sort?.sortDesc === sortDesc;
+    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-form-group
-    :label="__('Sort by')"
-    class="gl-mb-0"
-    label-cols="auto"
-    label-class="gl-align-self-center gl-pb-0!"
+  <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-dropdown
-      :text="sort.sortByLabel"
-      block
-      toggle-class="gl-mb-0"
-      data-testid="members-sort-dropdown"
-      right
+    <gl-sorting-item
+      v-for="option in filteredOptions"
+      :key="option.key"
+      :href="option.href"
+      :active="isActive(option.key)"
     >
-      <gl-dropdown-item
-        v-for="option in filteredOptions"
-        :key="option.param"
-        :href="option.url"
-        is-check-item
-        :is-checked="isChecked(option.key, option.sortDesc)"
-      >
-        {{ option.label }}
-      </gl-dropdown-item>
-    </gl-dropdown>
-  </gl-form-group>
+      {{ option.label }}
+    </gl-sorting-item>
+  </gl-sorting>
 </template>
diff --git a/app/assets/javascripts/members/constants.js b/app/assets/javascripts/members/constants.js
index 874e934e5b0..21af825f795 100644
--- a/app/assets/javascripts/members/constants.js
+++ b/app/assets/javascripts/members/constants.js
@@ -1,20 +1,12 @@
-import { __, s__ } from '~/locale';
-
-const ACCOUNT_SORT_ASC_LABEL = s__('Members|Account, ascending');
+import { __ } from '~/locale';
 
 export const FIELDS = [
   {
     key: 'account',
     label: __('Account'),
     sort: {
-      asc: {
-        param: 'name_asc',
-        label: ACCOUNT_SORT_ASC_LABEL,
-      },
-      desc: {
-        param: 'name_desc',
-        label: s__('Members|Account, descending'),
-      },
+      asc: 'name_asc',
+      desc: 'name_desc',
     },
   },
   {
@@ -29,14 +21,8 @@ export const FIELDS = [
     thClass: 'col-meta',
     tdClass: 'col-meta',
     sort: {
-      asc: {
-        param: 'last_joined',
-        label: s__('Members|Access granted, ascending'),
-      },
-      desc: {
-        param: 'oldest_joined',
-        label: s__('Members|Access granted, descending'),
-      },
+      asc: 'last_joined',
+      desc: 'oldest_joined',
     },
   },
   {
@@ -63,14 +49,8 @@ export const FIELDS = [
     thClass: 'col-max-role',
     tdClass: 'col-max-role',
     sort: {
-      asc: {
-        param: 'access_level_asc',
-        label: s__('Members|Max role, ascending'),
-      },
-      desc: {
-        param: 'access_level_desc',
-        label: s__('Members|Max role, descending'),
-      },
+      asc: 'access_level_asc',
+      desc: 'access_level_desc',
     },
   },
   {
@@ -81,15 +61,10 @@ export const FIELDS = [
   },
   {
     key: 'lastSignIn',
+    label: __('Last sign-in'),
     sort: {
-      asc: {
-        param: 'recent_sign_in',
-        label: s__('Members|Last sign-in, ascending'),
-      },
-      desc: {
-        param: 'oldest_sign_in',
-        label: s__('Members|Last sign-in, descending'),
-      },
+      asc: 'recent_sign_in',
+      desc: 'oldest_sign_in',
     },
   },
   {
@@ -101,9 +76,8 @@ export const FIELDS = [
 ];
 
 export const DEFAULT_SORT = {
-  sortBy: 'account',
+  sortByKey: 'account',
   sortDesc: false,
-  sortByLabel: ACCOUNT_SORT_ASC_LABEL,
 };
 
 export const AVATAR_SIZE = 48;
diff --git a/app/assets/javascripts/members/utils.js b/app/assets/javascripts/members/utils.js
index 5c58c4a9f6c..bf1fc2d7515 100644
--- a/app/assets/javascripts/members/utils.js
+++ b/app/assets/javascripts/members/utils.js
@@ -51,23 +51,20 @@ export const parseSortParam = sortableFields => {
   const sortParam = getParameterByName('sort');
 
   const sortedField = FIELDS.filter(field => sortableFields.includes(field.key)).find(
-    field => field.sort?.asc?.param === sortParam || field.sort?.desc?.param === sortParam,
+    field => field.sort?.asc === sortParam || field.sort?.desc === sortParam,
   );
 
   if (!sortedField) {
     return DEFAULT_SORT;
   }
 
-  const isDesc = sortedField?.sort?.desc?.param === sortParam;
-
   return {
-    sortBy: sortedField.key,
-    sortDesc: isDesc,
-    sortByLabel: isDesc ? sortedField?.sort?.desc?.label : sortedField?.sort?.asc?.label,
+    sortByKey: sortedField.key,
+    sortDesc: sortedField?.sort?.desc === sortParam,
   };
 };
 
-export const buildSortUrl = ({
+export const buildSortHref = ({
   sortBy,
   sortDesc,
   filteredSearchBarTokens,
@@ -79,7 +76,7 @@ export const buildSortUrl = ({
     return '';
   }
 
-  const sortParam = sortDesc ? sortDefinition.desc.param : sortDefinition.asc.param;
+  const sortParam = sortDesc ? sortDefinition.desc : sortDefinition.asc;
 
   const filterParams =
     filteredSearchBarTokens?.reduce((accumulator, token) => {