Commit b8709555 authored by Phil Hughes's avatar Phil Hughes

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

Add link to incident title in list

See merge request gitlab-org/gitlab!82373
parents ce215249 32642d5e
<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"
......
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);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment