Merge branch 'tr-alert-issue-link' into 'master'

Add issue column to alert list

See merge request gitlab-org/gitlab!35291

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

@@ -84,6 +84,13 @@ export default {
       tdClass: `${tdClass} text-md-right`,
       sortable: true,
     },
+    {
+      key: 'issue',
+      label: s__('AlertManagement|Issue'),
+      thClass: 'gl-w-12 gl-pointer-events-none',
+      tdClass,
+      sortable: false,
+    },
     {
       key: 'assignees',
       label: s__('AlertManagement|Assignees'),
@@ -278,6 +285,9 @@ export default {
         ? assignees.nodes[0]?.username
         : s__('AlertManagement|Unassigned');
     },
+    getIssueLink(item) {
+      return joinPaths('/', this.projectPath, '-', 'issues', item.issueIid);
+    },
     handlePageChange(page) {
       const { startCursor, endCursor } = this.alerts.pageInfo;
 
@@ -402,6 +412,13 @@ export default {
           <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div>
         </template>
 
+        <template #cell(issue)="{ item }">
+          <gl-link v-if="item.issueIid" data-testid="issueField" :href="getIssueLink(item)">
+            #{{ item.issueIid }}
+          </gl-link>
+          <div v-else data-testid="issueField">{{ s__('AlertManagement|None') }}</div>
+        </template>
+
         <template #cell(assignees)="{ item }">
           <div class="gl-max-w-full text-truncate" data-testid="assigneesField">
             {{ getAssignees(item.assignees) }}

changelogs/unreleased/tr-alert-issue-link.yml

+---
+title: Add issue column to alert list
+merge_request: 35291
+author:
+type: added

locale/gitlab.pot

@@ -1968,6 +1968,9 @@ msgstr ""
 msgid "AlertManagement|Info"
 msgstr ""
 
+msgid "AlertManagement|Issue"
+msgstr ""
+
 msgid "AlertManagement|Low"
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -48,6 +48,7 @@ describe('AlertManagementList', () => {
   const findSeverityColumnHeader = () => wrapper.findAll('th').at(0);
   const findPagination = () => wrapper.find(GlPagination);
   const findSearch = () => wrapper.find(GlSearchBoxByType);
+  const findIssueFields = () => wrapper.findAll('[data-testid="issueField"]');
   const alertsCount = {
     open: 14,
     triggered: 10,
@@ -278,6 +279,37 @@ describe('AlertManagementList', () => {
       expect(visitUrl).toHaveBeenCalledWith('/1527542/details');
     });
 
+    describe('alert issue links', () => {
+      beforeEach(() => {
+        mountComponent({
+          props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+          data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+          loading: false,
+        });
+      });
+
+      it('shows "None" when no link exists', () => {
+        expect(
+          findIssueFields()
+            .at(0)
+            .text(),
+        ).toBe('None');
+      });
+
+      it('renders a link when one exists', () => {
+        expect(
+          findIssueFields()
+            .at(1)
+            .text(),
+        ).toBe('#1');
+        expect(
+          findIssueFields()
+            .at(1)
+            .attributes('href'),
+        ).toBe('/gitlab-org/gitlab/-/issues/1');
+      });
+    });
+
     describe('handle date fields', () => {
       it('should display time ago dates when values provided', () => {
         mountComponent({

spec/frontend/alert_management/mocks/alerts.json

@@ -20,6 +20,7 @@
     "endedAt": "2020-04-17T23:18:14.996Z",
     "status": "ACKNOWLEDGED",
     "assignees": { "nodes": [{ "username": "root" }] },
+    "issueIid": "1",
     "notes": {
       "nodes": [
         {