Merge branch '333186-add-link-to-incident-title' into 'master'

Add link to incident title in list

See merge request gitlab-org/gitlab!82373

app/assets/javascripts/incidents/components/incidents_list.vue

 <script>
 import {
+  GlLink,
   GlLoadingIcon,
   GlTable,
   GlAvatarsInline,
@@ -106,6 +107,7 @@ export default {
   ],
   MAX_VISIBLE_ASSIGNEES,
   components: {
+    GlLink,
     GlLoadingIcon,
     GlTable,
     GlAvatarsInline,
@@ -271,7 +273,7 @@ export default {
       return Boolean(assignees.nodes?.length);
     },
     navigateToIncidentDetails({ iid }) {
-      return visitUrl(joinPaths(this.issuePath, INCIDENT_DETAILS_PATH, iid));
+      return visitUrl(this.showIncidentLink({ iid }));
     },
     navigateToCreateNewIncident() {
       const { category, action } = this.$options.trackIncidentCreateNewOptions;
@@ -297,6 +299,9 @@ export default {
     getEscalationStatus(escalationStatus) {
       return ESCALATION_STATUSES[escalationStatus] || this.$options.i18n.noEscalationStatus;
     },
+    showIncidentLink({ iid }) {
+      return joinPaths(this.issuePath, INCIDENT_DETAILS_PATH, iid);
+    },
     pageChanged(pagination) {
       this.pagination = pagination;
     },
@@ -384,12 +389,14 @@ export default {
 
           <template #cell(title)="{ item }">
             <div :class="{ 'gl-display-flex gl-align-items-center': item.state === 'closed' }">
-              <tooltip-on-truncate
+              <gl-link
+                v-gl-tooltip
                 :title="item.title"
-                class="gl-max-w-full gl-text-truncate gl-display-block"
+                data-testid="incident-link"
+                :href="showIncidentLink(item)"
               >
                 {{ item.title }}
-              </tooltip-on-truncate>
+              </gl-link>
               <gl-icon
                 v-if="item.state === 'closed'"
                 name="issue-close"

spec/frontend/incidents/components/incidents_list_spec.js

 import { GlAlert, GlLoadingIcon, GlTable, GlAvatar, GlEmptyState } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import IncidentsList from '~/incidents/components/incidents_list.vue';
 import {
   I18N,
@@ -19,7 +20,7 @@ import mockIncidents from '../mocks/incidents.json';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn().mockName('visitUrlMock'),
-  joinPaths: jest.fn(),
+  joinPaths: jest.requireActual('~/lib/utils/url_utility').joinPaths,
   mergeUrlParams: jest.fn(),
   setUrlParams: jest.fn(),
   updateHistory: jest.fn(),
@@ -49,9 +50,11 @@ describe('Incidents List', () => {
   const findEmptyState = () => wrapper.find(GlEmptyState);
   const findSeverity = () => wrapper.findAll(SeverityToken);
   const findEscalationStatus = () => wrapper.findAll('[data-testid="incident-escalation-status"]');
+  const findIncidentLink = () => wrapper.findByTestId('incident-link');
 
   function mountComponent({ data = {}, loading = false, provide = {} } = {}) {
-    wrapper = mount(IncidentsList, {
+    wrapper = extendedWrapper(
+      mount(IncidentsList, {
         data() {
           return {
             incidents: [],
@@ -90,7 +93,8 @@ describe('Incidents List', () => {
           GlEmptyState: true,
           ServiceLevelAgreementCell: true,
         },
-    });
+      }),
+    );
   }
 
   afterEach(() => {
@@ -160,6 +164,14 @@ describe('Incidents List', () => {
       expect(findTimeAgo().length).toBe(mockIncidents.length);
     });
 
+    it('renders a link to the incident as the incident title', () => {
+      const { title, iid } = mockIncidents[0];
+      const link = findIncidentLink();
+
+      expect(link.text()).toBe(title);
+      expect(link.attributes('href')).toContain(`issues/incident/${iid}`);
+    });
+
     describe('Assignees', () => {
       it('shows Unassigned when there are no assignees', () => {
         expect(findAssignees().at(0).text()).toBe(I18N.unassigned);