Merge branch 'lm-add-status-list-view' into 'master'

Add status dropdown to alert list view

See merge request gitlab-org/gitlab!30434

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

 <script>
-import { GlEmptyState, GlDeprecatedButton, GlLoadingIcon, GlTable, GlAlert } from '@gitlab/ui';
+import {
+  GlEmptyState,
+  GlDeprecatedButton,
+  GlLoadingIcon,
+  GlTable,
+  GlAlert,
+  GlNewDropdown,
+  GlNewDropdownItem,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import getAlerts from '../graphql/queries/getAlerts.query.graphql';
@@ -42,6 +50,11 @@ export default {
       label: s__('AlertManagement|Status'),
     },
   ],
+  statuses: {
+    triggered: s__('AlertManagement|Triggered'),
+    acknowledged: s__('AlertManagement|Acknowledged'),
+    resolved: s__('AlertManagement|Resolved'),
+  },
   components: {
     GlEmptyState,
     GlLoadingIcon,
@@ -49,6 +62,8 @@ export default {
     GlAlert,
     GlDeprecatedButton,
     TimeAgo,
+    GlNewDropdown,
+    GlNewDropdownItem,
   },
   props: {
     projectPath: {
@@ -140,6 +155,13 @@ export default {
         <template #cell(title)="{ item }">
           <div class="gl-max-w-full text-truncate">{{ item.title }}</div>
         </template>
+        <template #cell(status)="{ item }">
+          <gl-new-dropdown class="w-100" :text="item.status">
+            <gl-new-dropdown-item v-for="(label, field) in $options.statuses" :key="field">
+              {{ label }}
+            </gl-new-dropdown-item>
+          </gl-new-dropdown>
+        </template>
 
         <template #empty>
           {{ s__('AlertManagement|No alerts to display.') }}

locale/gitlab.pot

@@ -1695,6 +1695,9 @@ msgstr[1] ""
 msgid "Alert Details"
 msgstr ""
 
+msgid "AlertManagement|Acknowledged"
+msgstr ""
+
 msgid "AlertManagement|Alert"
 msgstr ""
 
@@ -1731,6 +1734,9 @@ msgstr ""
 msgid "AlertManagement|Overview"
 msgstr ""
 
+msgid "AlertManagement|Resolved"
+msgstr ""
+
 msgid "AlertManagement|Severity"
 msgstr ""
 
@@ -1749,6 +1755,9 @@ msgstr ""
 msgid "AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear."
 msgstr ""
 
+msgid "AlertManagement|Triggered"
+msgstr ""
+
 msgid "AlertService|%{linkStart}Learn more%{linkEnd} about configuring this endpoint to receive alerts."
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_list_spec.js

 import { mount } from '@vue/test-utils';
-import { GlEmptyState, GlTable, GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlEmptyState, GlTable, GlAlert, GlLoadingIcon, GlNewDropdown } from '@gitlab/ui';
 import AlertManagementList from '~/alert_management/components/alert_management_list.vue';
 
 import mockAlerts from '../mocks/alerts.json';
@@ -11,6 +11,7 @@ describe('AlertManagementList', () => {
   const findAlerts = () => wrapper.findAll('table tbody tr');
   const findAlert = () => wrapper.find(GlAlert);
   const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findStatusDropdown = () => wrapper.find(GlNewDropdown);
 
   function mountComponent({
     props = {
@@ -103,5 +104,14 @@ describe('AlertManagementList', () => {
       expect(findAlertsTable().exists()).toBe(true);
       expect(findAlerts()).toHaveLength(mockAlerts.length);
     });
+
+    it('displays status dropdown', () => {
+      mountComponent({
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+        data: { alerts: mockAlerts, errored: false },
+        loading: false,
+      });
+      expect(findStatusDropdown().exists()).toBe(true);
+    });
   });
 });