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,48 +50,51 @@ 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, {
-      data() {
-        return {
-          incidents: [],
-          incidentsCount: {},
-          ...data,
-        };
-      },
-      mocks: {
-        $apollo: {
-          queries: {
-            incidents: {
-              loading,
+    wrapper = extendedWrapper(
+      mount(IncidentsList, {
+        data() {
+          return {
+            incidents: [],
+            incidentsCount: {},
+            ...data,
+          };
+        },
+        mocks: {
+          $apollo: {
+            queries: {
+              incidents: {
+                loading,
+              },
             },
           },
         },
-      },
-      provide: {
-        projectPath: '/project/path',
-        newIssuePath,
-        incidentTemplateName,
-        incidentType,
-        issuePath: '/project/issues',
-        publishedAvailable: true,
-        emptyListSvgPath,
-        textQuery: '',
-        authorUsernameQuery: '',
-        assigneeUsernameQuery: '',
-        slaFeatureAvailable: true,
-        canCreateIncident: true,
-        incidentEscalationsAvailable: true,
-        ...provide,
-      },
-      stubs: {
-        GlButton: true,
-        GlAvatar: true,
-        GlEmptyState: true,
-        ServiceLevelAgreementCell: true,
-      },
-    });
+        provide: {
+          projectPath: '/project/path',
+          newIssuePath,
+          incidentTemplateName,
+          incidentType,
+          issuePath: '/project/issues',
+          publishedAvailable: true,
+          emptyListSvgPath,
+          textQuery: '',
+          authorUsernameQuery: '',
+          assigneeUsernameQuery: '',
+          slaFeatureAvailable: true,
+          canCreateIncident: true,
+          incidentEscalationsAvailable: true,
+          ...provide,
+        },
+        stubs: {
+          GlButton: true,
+          GlAvatar: true,
+          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);