Refacotred vars to allow internationalization

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -20,14 +20,13 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import getAlerts from '../graphql/queries/get_alerts.query.graphql';
 import getAlertsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
 import {
-  ALERTS_STATUS,
   ALERTS_STATUS_TABS,
   ALERTS_SEVERITY_LABELS,
   trackAlertListViewsOptions,
   trackAlertStatusUpdateOptions,
 } from '../constants';
 import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql';
-import { capitalizeFirstCharacter, convertToSnakeCase } from '~/lib/utils/text_utility';
+import { convertToSnakeCase } from '~/lib/utils/text_utility';
 import Tracking from '~/tracking';
 
 const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
@@ -87,9 +86,9 @@ export default {
     },
   ],
   statuses: {
-    [ALERTS_STATUS.TRIGGERED]: s__('AlertManagement|Triggered'),
-    [ALERTS_STATUS.ACKNOWLEDGED]: s__('AlertManagement|Acknowledged'),
-    [ALERTS_STATUS.RESOLVED]: s__('AlertManagement|Resolved'),
+    TRIGGERED: s__('AlertManagement|Triggered'),
+    ACKNOWLEDGED: s__('AlertManagement|Acknowledged'),
+    RESOLVED: s__('AlertManagement|Resolved'),
   },
   severityLabels: ALERTS_SEVERITY_LABELS,
   statusTabs: ALERTS_STATUS_TABS,
@@ -204,7 +203,6 @@ export default {
       }
       this.sort = `${sortColumn}_${sortDirection}`;
     },
-    capitalizeFirstCharacter,
     updateAlertStatus(status, iid) {
       this.$apollo
         .mutate({
@@ -311,11 +309,7 @@ export default {
         </template>
 
         <template #cell(status)="{ item }">
-          <gl-dropdown
-            :text="capitalizeFirstCharacter(item.status.toLowerCase())"
-            class="w-100"
-            right
-          >
+          <gl-dropdown :text="$options.statuses[item.status]" class="w-100" right>
             <gl-dropdown-item
               v-for="(label, field) in $options.statuses"
               :key="field"

app/assets/javascripts/alert_management/constants.js

@@ -9,39 +9,31 @@ export const ALERTS_SEVERITY_LABELS = {
   UNKNOWN: s__('AlertManagement|Unknown'),
 };
 
-export const ALERTS_STATUS = {
-  OPEN: 'OPEN',
-  TRIGGERED: 'TRIGGERED',
-  ACKNOWLEDGED: 'ACKNOWLEDGED',
-  RESOLVED: 'RESOLVED',
-  ALL: 'ALL',
-};
-
 export const ALERTS_STATUS_TABS = [
   {
     title: s__('AlertManagement|Open'),
-    status: ALERTS_STATUS.OPEN,
-    filters: [ALERTS_STATUS.TRIGGERED, ALERTS_STATUS.ACKNOWLEDGED],
+    status: 'OPEN',
+    filters: ['TRIGGERED', 'ACKNOWLEDGED'],
   },
   {
     title: s__('AlertManagement|Triggered'),
-    status: ALERTS_STATUS.TRIGGERED,
-    filters: [ALERTS_STATUS.TRIGGERED],
+    status: 'TRIGGERED',
+    filters: 'TRIGGERED',
   },
   {
     title: s__('AlertManagement|Acknowledged'),
-    status: ALERTS_STATUS.ACKNOWLEDGED,
-    filters: [ALERTS_STATUS.ACKNOWLEDGED],
+    status: 'ACKNOWLEDGED',
+    filters: 'ACKNOWLEDGED',
   },
   {
     title: s__('AlertManagement|Resolved'),
-    status: ALERTS_STATUS.RESOLVED,
-    filters: [ALERTS_STATUS.RESOLVED],
+    status: 'RESOLVED',
+    filters: 'RESOLVED',
   },
   {
     title: s__('AlertManagement|All alerts'),
-    status: ALERTS_STATUS.ALL,
-    filters: [ALERTS_STATUS.TRIGGERED, ALERTS_STATUS.ACKNOWLEDGED, ALERTS_STATUS.RESOLVED],
+    status: 'ALL',
+    filters: ['TRIGGERED', 'ACKNOWLEDGED', 'RESOLVED'],
   },
 ];