Add alert ID to list view

We add the ALert ID to the Alert
list view to ensure the user has
access to this variable.

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

@@ -35,6 +35,7 @@ const tdClass =
 const thClass = 'gl-hover-bg-blue-50';
 const bodyTrClass =
   'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-bg-blue-50 gl-hover-cursor-pointer gl-hover-border-b-solid gl-hover-border-blue-200';
+const TH_TEST_ID = { 'data-testid': 'alert-management-severity-sort' };
 
 const initialPaginationState = {
   currentPage: 1,
@@ -61,6 +62,7 @@ export default {
       key: 'severity',
       label: s__('AlertManagement|Severity'),
       thClass: `${thClass} gl-w-eighth`,
+      thAttr: TH_TEST_ID,
       tdClass: `${tdClass} rounded-top text-capitalize sortable-cell`,
       sortable: true,
     },
@@ -72,7 +74,7 @@ export default {
       sortable: true,
     },
     {
-      key: 'title',
+      key: 'alertLabel',
       label: s__('AlertManagement|Alert'),
       thClass: `gl-pointer-events-none`,
       tdClass,
@@ -397,8 +399,14 @@ export default {
           {{ item.eventCount }}
         </template>
 
-        <template #cell(title)="{ item }">
-          <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div>
+        <template #cell(alertLabel)="{ item }">
+          <div
+            class="gl-max-w-full text-truncate"
+            :title="`${item.iid} - ${item.title}`"
+            data-testid="idField"
+          >
+            #{{ item.iid }} {{ item.title }}
+          </div>
         </template>
 
         <template #cell(issue)="{ item }">

changelogs/unreleased/230572-display-alert-number-in-list.yml

+---
+title: Add Alert Id to Alert list view
+merge_request: 39706
+author:
+type: changed

spec/frontend/alert_management/components/alert_management_table_spec.js

@@ -39,11 +39,13 @@ describe('AlertManagementTable', () => {
   const findStatusFilterBadge = () => wrapper.findAll(GlBadge);
   const findDateFields = () => wrapper.findAll(TimeAgo);
   const findFirstStatusOption = () => findStatusDropdown().find(GlDeprecatedDropdownItem);
-  const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]');
-  const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
-  const findSeverityColumnHeader = () => wrapper.findAll('th').at(0);
   const findPagination = () => wrapper.find(GlPagination);
   const findSearch = () => wrapper.find(GlSearchBoxByType);
+  const findSeverityColumnHeader = () =>
+    wrapper.find('[data-testid="alert-management-severity-sort"]');
+  const findFirstIDField = () => wrapper.findAll('[data-testid="idField"]').at(0);
+  const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]');
+  const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
   const findIssueFields = () => wrapper.findAll('[data-testid="issueField"]');
   const findAlertError = () => wrapper.find('[data-testid="alert-error"]');
   const alertsCount = {
@@ -192,6 +194,17 @@ describe('AlertManagementTable', () => {
       ).toContain('gl-hover-bg-blue-50');
     });
 
+    it('displays the alert ID and title formatted correctly', () => {
+      mountComponent({
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
+        loading: false,
+      });
+
+      expect(findFirstIDField().exists()).toBe(true);
+      expect(findFirstIDField().text()).toBe(`#${mockAlerts[0].iid} ${mockAlerts[0].title}`);
+    });
+
     it('displays status dropdown', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },