Extract sort field name constants

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

@@ -8,6 +8,7 @@ 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,7 +41,7 @@ export default {
       },
     }),
     sortFieldName() {
-      return this.sortFields[this.sortField];
+      return this.$options.i18n.sortFields[this.sortField];
     },
     sortOrderIcon() {
       return this.sortOrder === SORT_ASCENDING ? 'sort-lowest' : 'sort-highest';
@@ -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_ASCENDING = 'asc';
 export const SORT_DESCENDING = 'desc';
 
-export const SORT_FIELD_ORDER = {
-  name: SORT_ASCENDING,
-  packager: SORT_ASCENDING,
-  severity: SORT_DESCENDING,
+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_FIELD_ORDER, SORT_ASCENDING, SORT_DESCENDING } from './constants';
+import { REPORT_STATUS, SORT_ORDERS, SORT_ASCENDING, SORT_DESCENDING } from './constants';
 import * as types from './mutation_types';
 
 export default {
@@ -36,7 +36,7 @@ export default {
   },
   [types.SET_SORT_FIELD](state, payload) {
     state.sortField = payload;
-    state.sortOrder = SORT_FIELD_ORDER[payload];
+    state.sortOrder = SORT_ORDERS[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_FIELD_ORDER } from './constants';
+import { FILTER, REPORT_STATUS, SORT_ORDERS, DEFAULT_SORT_FIELD } from './constants';
 
-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],
-  };
-};
+export default () => ({
+  endpoint: '',
+  initialized: false,
+  isLoading: false,
+  errorLoading: false,
+  dependencies: [],
+  pageInfo: {
+    total: 0,
+  },
+  reportInfo: {
+    status: REPORT_STATUS.ok,
+    jobPath: '',
+    generatedAt: '',
+  },
+  filter: FILTER.all,
+  sortField: DEFAULT_SORT_FIELD,
+  sortOrder: SORT_ORDERS[DEFAULT_SORT_FIELD],
+});