Merge branch '335066-dependency-list-multiple-default-sort-orders' into 'master'

Sort according to the field in Dependency List

See merge request gitlab-org/gitlab!66672

ee/app/assets/javascripts/dependencies/components/dependencies_actions.vue

@@ -3,11 +3,12 @@ import { GlButton, GlDropdown, GlDropdownItem, GlIcon, GlTooltipDirective } from
 import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
 import { DEPENDENCY_LIST_TYPES } from '../store/constants';
-import { SORT_FIELDS, SORT_ORDER } from '../store/modules/list/constants';
+import { SORT_FIELDS, SORT_ASCENDING } from '../store/modules/list/constants';
 
 export default {
   i18n: {
     sortDirectionLabel: __('Sort direction'),
+    sortFields: SORT_FIELDS,
   },
   name: 'DependenciesActions',
   components: {
@@ -27,11 +28,6 @@ export default {
         Object.values(DEPENDENCY_LIST_TYPES).some(({ namespace }) => value === namespace),
     },
   },
-  data() {
-    return {
-      sortFields: SORT_FIELDS,
-    };
-  },
   computed: {
     ...mapState({
       sortField(state) {
@@ -45,10 +41,10 @@ export default {
       },
     }),
     sortFieldName() {
-      return this.sortFields[this.sortField];
+      return this.$options.i18n.sortFields[this.sortField];
     },
     sortOrderIcon() {
-      return this.sortOrder === SORT_ORDER.ascending ? 'sort-lowest' : 'sort-highest';
+      return this.sortOrder === SORT_ASCENDING ? 'sort-lowest' : 'sort-highest';
     },
   },
   methods: {
@@ -71,7 +67,11 @@ export default {
   <div class="btn-toolbar">
     <div class="btn-group flex-grow-1 mr-2">
       <gl-dropdown :text="sortFieldName" class="flex-grow-1 text-center" right>
-        <gl-dropdown-item v-for="(name, id) in sortFields" :key="id" @click="setSortField(id)">
+        <gl-dropdown-item
+          v-for="(name, id) in $options.i18n.sortFields"
+          :key="id"
+          @click="setSortField(id)"
+        >
           <span class="d-flex">
             <gl-icon
               class="flex-shrink-0 gl-mr-2"

ee/app/assets/javascripts/dependencies/store/modules/list/constants.js

 import { __, s__ } from '~/locale';
 
+export const SORT_FIELD_NAME = 'name';
+export const SORT_FIELD_PACKAGER = 'packager';
+export const SORT_FIELD_SEVERITY = 'severity';
+
+export const DEFAULT_SORT_FIELD = SORT_FIELD_SEVERITY;
+
 export const SORT_FIELDS = {
-  name: s__('Dependencies|Component name'),
-  packager: s__('Dependencies|Packager'),
-  severity: s__('Vulnerability|Severity'),
+  [SORT_FIELD_NAME]: s__('Dependencies|Component name'),
+  [SORT_FIELD_PACKAGER]: s__('Dependencies|Packager'),
+  [SORT_FIELD_SEVERITY]: s__('Vulnerability|Severity'),
 };
 
-export const SORT_ORDER = {
-  ascending: 'asc',
-  descending: 'desc',
+export const SORT_ASCENDING = 'asc';
+export const SORT_DESCENDING = 'desc';
+
+export const SORT_ORDERS = {
+  [SORT_FIELD_NAME]: SORT_ASCENDING,
+  [SORT_FIELD_PACKAGER]: SORT_ASCENDING,
+  [SORT_FIELD_SEVERITY]: SORT_DESCENDING,
 };
 
 export const REPORT_STATUS = {

ee/app/assets/javascripts/dependencies/store/modules/list/mutations.js

-import { REPORT_STATUS, SORT_ORDER } from './constants';
+import { REPORT_STATUS, SORT_ORDERS, SORT_ASCENDING, SORT_DESCENDING } from './constants';
 import * as types from './mutation_types';
 
 export default {
@@ -36,9 +36,9 @@ export default {
   },
   [types.SET_SORT_FIELD](state, payload) {
     state.sortField = payload;
+    state.sortOrder = SORT_ORDERS[payload];
   },
   [types.TOGGLE_SORT_ORDER](state) {
-    state.sortOrder =
-      state.sortOrder === SORT_ORDER.ascending ? SORT_ORDER.descending : SORT_ORDER.ascending;
+    state.sortOrder = state.sortOrder === SORT_ASCENDING ? SORT_DESCENDING : SORT_ASCENDING;
   },
 };

ee/app/assets/javascripts/dependencies/store/modules/list/state.js

-import { FILTER, REPORT_STATUS, SORT_ORDER } from './constants';
+import { FILTER, REPORT_STATUS, SORT_ORDERS, DEFAULT_SORT_FIELD } from './constants';
 
 export default () => ({
   endpoint: '',
@@ -15,6 +15,6 @@ export default () => ({
     generatedAt: '',
   },
   filter: FILTER.all,
-  sortField: 'severity',
-  sortOrder: SORT_ORDER.descending,
+  sortField: DEFAULT_SORT_FIELD,
+  sortOrder: SORT_ORDERS[DEFAULT_SORT_FIELD],
 });

ee/spec/frontend/dependencies/store/modules/list/actions_spec.js

@@ -4,7 +4,7 @@ import { sortBy } from 'lodash';
 import * as actions from 'ee/dependencies/store/modules/list/actions';
 import {
   FILTER,
-  SORT_ORDER,
+  SORT_DESCENDING,
   FETCH_ERROR_MESSAGE,
 } from 'ee/dependencies/store/modules/list/constants';
 import * as types from 'ee/dependencies/store/modules/list/mutation_types';
@@ -194,7 +194,7 @@ describe('Dependencies actions', () => {
       describe('given params', () => {
         const paramsGiven = {
           sort_by: 'packager',
-          sort: SORT_ORDER.descending,
+          sort: SORT_DESCENDING,
           page: 4,
           filter: FILTER.vulnerable,
         };

ee/spec/frontend/dependencies/store/modules/list/mutations_spec.js

-import { REPORT_STATUS, SORT_ORDER } from 'ee/dependencies/store/modules/list/constants';
+import {
+  REPORT_STATUS,
+  SORT_ASCENDING,
+  SORT_DESCENDING,
+} from 'ee/dependencies/store/modules/list/constants';
 import * as types from 'ee/dependencies/store/modules/list/mutation_types';
 import mutations from 'ee/dependencies/store/modules/list/mutations';
 import getInitialState from 'ee/dependencies/store/modules/list/state';
@@ -86,24 +90,30 @@ describe('Dependencies mutations', () => {
   });
 
   describe(types.SET_SORT_FIELD, () => {
-    it('sets the sort field', () => {
-      const field = 'foo';
+    it.each`
+      field         | order
+      ${'name'}     | ${SORT_ASCENDING}
+      ${'packager'} | ${SORT_ASCENDING}
+      ${'severity'} | ${SORT_DESCENDING}
+      ${'foo'}      | ${undefined}
+    `('sets the sort field to $field and sort order to $order', ({ field, order }) => {
       mutations[types.SET_SORT_FIELD](state, field);
 
       expect(state.sortField).toBe(field);
+      expect(state.sortOrder).toBe(order);
     });
   });
 
   describe(types.TOGGLE_SORT_ORDER, () => {
     it('toggles the sort order', () => {
-      const sortState = { sortOrder: SORT_ORDER.ascending };
+      const sortState = { sortOrder: SORT_ASCENDING };
       mutations[types.TOGGLE_SORT_ORDER](sortState);
 
-      expect(sortState.sortOrder).toBe(SORT_ORDER.descending);
+      expect(sortState.sortOrder).toBe(SORT_DESCENDING);
 
       mutations[types.TOGGLE_SORT_ORDER](sortState);
 
-      expect(sortState.sortOrder).toBe(SORT_ORDER.ascending);
+      expect(sortState.sortOrder).toBe(SORT_ASCENDING);
     });
   });
 });