Sort according to the field in Dependency List

This makes the Dependency List use a more sensible sort order for the
chosen sort field. Specifically, sorting by "Component name" or
"Packager" should be alphabetical by default (ascending), while sorting
by "Severity" should be descending (most severe to least).

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/335066.

Changelog: changed
EE: true

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

@@ -9,6 +9,12 @@ export const SORT_FIELDS = {
 export const SORT_ASCENDING = 'asc';
 export const SORT_DESCENDING = 'desc';
 
+export const SORT_FIELD_ORDER = {
+  name: SORT_ASCENDING,
+  packager: SORT_ASCENDING,
+  severity: SORT_DESCENDING,
+};
+
 export const REPORT_STATUS = {
   ok: 'ok',
   jobNotSetUp: 'job_not_set_up',

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

-import { REPORT_STATUS, SORT_ASCENDING, SORT_DESCENDING } from './constants';
+import { REPORT_STATUS, SORT_FIELD_ORDER, SORT_ASCENDING, SORT_DESCENDING } from './constants';
 import * as types from './mutation_types';
 
 export default {
@@ -36,6 +36,7 @@ export default {
   },
   [types.SET_SORT_FIELD](state, payload) {
     state.sortField = payload;
+    state.sortOrder = SORT_FIELD_ORDER[payload];
   },
   [types.TOGGLE_SORT_ORDER](state) {
     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_DESCENDING } from './constants';
+import { FILTER, REPORT_STATUS, SORT_FIELD_ORDER } from './constants';
 
-export default () => ({
-  endpoint: '',
-  initialized: false,
-  isLoading: false,
-  errorLoading: false,
-  dependencies: [],
-  pageInfo: {
-    total: 0,
-  },
-  reportInfo: {
-    status: REPORT_STATUS.ok,
-    jobPath: '',
-    generatedAt: '',
-  },
-  filter: FILTER.all,
-  sortField: 'severity',
-  sortOrder: SORT_DESCENDING,
-});
+export default () => {
+  const sortField = 'severity';
+
+  return {
+    endpoint: '',
+    initialized: false,
+    isLoading: false,
+    errorLoading: false,
+    dependencies: [],
+    pageInfo: {
+      total: 0,
+    },
+    reportInfo: {
+      status: REPORT_STATUS.ok,
+      jobPath: '',
+      generatedAt: '',
+    },
+    filter: FILTER.all,
+    sortField,
+    sortOrder: SORT_FIELD_ORDER[sortField],
+  };
+};

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

@@ -90,11 +90,17 @@ 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);
     });
   });