Update alert status components

- provide defaults
- convert inject to prop
- update tests

app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue

@@ -20,9 +20,6 @@ export default {
     trackAlertStatusUpdateOptions: {
       default: null,
     },
-    statuses: {
-      default: PAGE_CONFIG.OPERATIONS.STATUSES,
-    },
   },
   props: {
     projectPath: {
@@ -41,6 +38,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    statuses: {
+      type: Object,
+      required: false,
+      default: () => PAGE_CONFIG.OPERATIONS.STATUSES,
+    },
   },
   computed: {
     dropdownClass() {

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue

@@ -94,6 +94,7 @@ export default {
         :project-path="projectPath"
         :is-dropdown-showing="isDropdownShowing"
         :is-sidebar="true"
+        :statuses="statuses"
         @alert-error="$emit('alert-error', $event)"
         @hide-dropdown="hideDropdown"
         @handle-updating="handleUpdating"

app/assets/javascripts/vue_shared/components/alert_details_table.vue

@@ -7,6 +7,7 @@ import {
   splitCamelCase,
 } from '~/lib/utils/text_utility';
 import { s__ } from '~/locale';
+import { PAGE_CONFIG } from '~/vue_shared/alert_details/constants';
 
 const thClass = 'gl-bg-transparent! gl-border-1! gl-border-b-solid! gl-border-gray-200!';
 const tdClass = 'gl-border-gray-100! gl-p-5!';
@@ -45,7 +46,7 @@ export default {
     statuses: {
       type: Object,
       required: false,
-      default: () => ({}),
+      default: () => PAGE_CONFIG.OPERATIONS.STATUSES,
     },
   },
   fields: [

spec/frontend/vue_shared/alert_details/alert_status_spec.js

@@ -12,6 +12,7 @@ describe('AlertManagementStatus', () => {
   let wrapper;
   const findStatusDropdown = () => wrapper.find(GlDropdown);
   const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
+  const findAllStatusOptions = () => findStatusDropdown().findAll(GlDropdownItem);
 
   const selectFirstStatusOption = () => {
     findFirstStatusOption().vm.$emit('click');
@@ -131,6 +132,24 @@ describe('AlertManagementStatus', () => {
     });
   });
 
+  describe('Statuses', () => {
+    it('renders default translated statuses', () => {
+      mountComponent({});
+      expect(findAllStatusOptions().length).toBe(3);
+      expect(findFirstStatusOption().text()).toBe('Triggered');
+    });
+
+    it('renders translated statuses', () => {
+      const status = 'TEST';
+      const translatedStatus = 'Test';
+      mountComponent({
+        props: { alert: { ...mockAlert, status }, statuses: { [status]: translatedStatus } },
+      });
+      expect(findAllStatusOptions().length).toBe(1);
+      expect(findFirstStatusOption().text()).toBe(translatedStatus);
+    });
+  });
+
   describe('Snowplow tracking', () => {
     beforeEach(() => {
       jest.spyOn(Tracking, 'event');

spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js

 import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
+import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue';
 import AlertSidebarStatus from '~/vue_shared/alert_details/components/sidebar/sidebar_status.vue';
+import { PAGE_CONFIG } from '~/vue_shared/alert_details/constants';
 import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
@@ -12,8 +14,16 @@ describe('Alert Details Sidebar Status', () => {
   const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
   const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findStatusDropdownHeader = () => wrapper.find('[data-testid="dropdown-header"]');
+  const findAlertStatus = () => wrapper.findComponent(AlertStatus);
+  const findStatus = () => wrapper.find('[data-testid="status"]');
 
-  function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) {
+  function mountComponent({
+    data,
+    sidebarCollapsed = true,
+    loading = false,
+    stubs = {},
+    provide = {},
+  } = {}) {
     wrapper = mount(AlertSidebarStatus, {
       propsData: {
         alert: { ...mockAlert },
@@ -32,6 +42,7 @@ describe('Alert Details Sidebar Status', () => {
         },
       },
       stubs,
+      provide,
     });
   }
 
@@ -96,8 +107,24 @@ describe('Alert Details Sidebar Status', () => {
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
         findStatusDropdownItem().vm.$emit('click');
         expect(findStatusLoadingIcon().exists()).toBe(false);
-        expect(wrapper.find('[data-testid="status"]').text()).toBe('Triggered');
+        expect(findStatus().text()).toBe('Triggered');
       });
     });
   });
+
+  describe('Statuses', () => {
+    it('renders default translated statuses', () => {
+      mountComponent({});
+      expect(findAlertStatus().props('statuses')).toBe(PAGE_CONFIG.OPERATIONS.STATUSES);
+      expect(findStatus().text()).toBe('Triggered');
+    });
+
+    it('renders translated statuses', () => {
+      const status = 'TEST';
+      const statuses = { [status]: 'Test' };
+      mountComponent({ data: { alert: { ...mockAlert, status } }, provide: { statuses } });
+      expect(findAlertStatus().props('statuses')).toBe(statuses);
+      expect(findStatus().text()).toBe(statuses.TEST);
+    });
+  });
 });

spec/frontend/vue_shared/components/alert_details_table_spec.js

 import { GlLoadingIcon, GlTable } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import { PAGE_CONFIG } from '~/vue_shared/alert_details/constants';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
 
 const mockAlert = {
@@ -76,54 +75,68 @@ describe('AlertDetails', () => {
     });
 
     describe('with table data', () => {
-      beforeEach(mountComponent);
-
-      it('renders a table', () => {
-        expect(findTableComponent().exists()).toBe(true);
-      });
-
-      it('renders a cell based on alert data', () => {
-        expect(findTableComponent().text()).toContain('SyntaxError: Invalid or unexpected token');
-      });
-
-      it('should show allowed alert fields', () => {
-        const fields = findTableKeys();
-
-        expect(findTableField(fields, 'Iid').exists()).toBe(true);
-        expect(findTableField(fields, 'Title').exists()).toBe(true);
-        expect(findTableField(fields, 'Severity').exists()).toBe(true);
-        expect(findTableField(fields, 'Status').exists()).toBe(true);
-        expect(findTableField(fields, 'Hosts').exists()).toBe(true);
-        expect(findTableField(fields, 'Environment').exists()).toBe(true);
+      describe('default', () => {
+        beforeEach(mountComponent);
+
+        it('renders a table', () => {
+          expect(findTableComponent().exists()).toBe(true);
+        });
+
+        it('renders a cell based on alert data', () => {
+          expect(findTableComponent().text()).toContain('SyntaxError: Invalid or unexpected token');
+        });
+
+        it('should show allowed alert fields', () => {
+          const fields = findTableKeys();
+
+          expect(findTableField(fields, 'Iid').exists()).toBe(true);
+          expect(findTableField(fields, 'Title').exists()).toBe(true);
+          expect(findTableField(fields, 'Severity').exists()).toBe(true);
+          expect(findTableField(fields, 'Status').exists()).toBe(true);
+          expect(findTableField(fields, 'Hosts').exists()).toBe(true);
+          expect(findTableField(fields, 'Environment').exists()).toBe(true);
+        });
+
+        it('should not show disallowed alert fields', () => {
+          const fields = findTableKeys();
+
+          expect(findTableField(fields, 'Typename').exists()).toBe(false);
+          expect(findTableField(fields, 'Todos').exists()).toBe(false);
+          expect(findTableField(fields, 'Notes').exists()).toBe(false);
+          expect(findTableField(fields, 'Assignees').exists()).toBe(false);
+        });
       });
 
-      it('should not show disallowed alert fields', () => {
-        const fields = findTableKeys();
+      describe('environment', () => {
+        it('should display only the name for the environment', () => {
+          mountComponent();
+          expect(findTableFieldValueByKey('Environment').text()).toBe(environmentName);
+        });
 
-        expect(findTableField(fields, 'Typename').exists()).toBe(false);
-        expect(findTableField(fields, 'Todos').exists()).toBe(false);
-        expect(findTableField(fields, 'Notes').exists()).toBe(false);
-        expect(findTableField(fields, 'Assignees').exists()).toBe(false);
-      });
-
-      it('should display only the name for the environment', () => {
-        expect(findTableFieldValueByKey('Environment').text()).toBe(environmentName);
-      });
-
-      it('should not display the environment row if there is not data', () => {
-        environmentData = { name: null, path: null };
-        mountComponent();
-
-        expect(findTableFieldValueByKey('Environment').text()).toBeFalsy();
-      });
+        it('should not display the environment row if there is not data', () => {
+          environmentData = { name: null, path: null };
+          mountComponent();
 
-      it('should show the provided status if statuses prop is not provided', () => {
-        expect(findTableFieldValueByKey('Status').text()).toBe('TRIGGERED');
+          expect(findTableFieldValueByKey('Environment').text()).toBeFalsy();
+        });
       });
 
-      it('should show the translated status if statuses prop is provided', () => {
-        mountComponent({ statuses: PAGE_CONFIG.OPERATIONS.STATUSES });
-        expect(findTableFieldValueByKey('Status').text()).toBe('Triggered');
+      describe('status', () => {
+        it('should show the translated status for the default statuses', () => {
+          mountComponent();
+          expect(findTableFieldValueByKey('Status').text()).toBe('Triggered');
+        });
+
+        it('should show the translated status for provided statuses', () => {
+          const translatedStatus = 'Test';
+          mountComponent({ statuses: { TRIGGERED: translatedStatus } });
+          expect(findTableFieldValueByKey('Status').text()).toBe(translatedStatus);
+        });
+
+        it('should show the provided status if value is not defined in statuses', () => {
+          mountComponent({ statuses: {} });
+          expect(findTableFieldValueByKey('Status').text()).toBe('TRIGGERED');
+        });
       });
     });
   });