Commit 5133b028 authored by Phil Hughes's avatar Phil Hughes

Merge branch...

Merge branch '36103-links-to-design-comments-from-todos-and-system-notes-do-not-jump-to-specific-note' into 'master'

Links to design comments now lead to specific note

See merge request gitlab-org/gitlab!21724
parents f0e751e8 aa6d5c15
---
title: Links to design comments now lead to specific note
merge_request: 21724
author:
type: fixed
......@@ -2,6 +2,7 @@
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { findNoteId } from '../../utils/design_management_utils';
export default {
components: {
......@@ -19,12 +20,23 @@ export default {
author() {
return this.note.author;
},
noteAnchorId() {
return findNoteId(this.note.id);
},
isNoteLinked() {
return this.$route.hash === `#note_${this.noteAnchorId}`;
},
},
mounted() {
if (this.isNoteLinked) {
this.$refs.anchor.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
}
},
};
</script>
<template>
<timeline-entry-item class="design-note note-form">
<timeline-entry-item :id="`note_${noteAnchorId}`" ref="anchor" class="design-note note-form">
<user-avatar-link
:link-href="author.webUrl"
:img-src="author.avatarUrl"
......@@ -46,9 +58,9 @@ export default {
<span class="system-note-message"> <slot></slot> </span>
<template v-if="note.createdAt">
<span class="system-note-separator"></span>
<span class="note-timestamp system-note-separator">
<a class="note-timestamp system-note-separator" :href="`#note_${noteAnchorId}`">
<time-ago-tooltip :time="note.createdAt" tooltip-placement="bottom" />
</span>
</a>
</template>
</span>
<div class="note-text md" data-qa-selector="note_content" v-html="note.bodyHtml"></div>
......
......@@ -32,4 +32,6 @@ export const extractCurrentDiscussion = (discussions, id) =>
export const findVersionId = id => (id.match('::Version/(.+$)') || [])[1];
export const findNoteId = id => (id.match('DiffNote/(.+$)') || [])[1];
export const extractDesign = data => data.project.issue.designCollection.designs.edges[0].node;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design note component should match the snapshot 1`] = `
<timelineentryitem-stub
class="design-note note-form"
id="note_undefined"
>
<useravatarlink-stub
imgalt=""
imgcssclasses=""
imgsize="40"
imgsrc=""
linkhref=""
tooltipplacement="top"
tooltiptext=""
username=""
/>
<a
class="js-user-link"
data-user-id="author-id"
>
<span
class="note-header-author-name bold"
>
</span>
<!---->
<span
class="note-headline-light"
>
@
</span>
</a>
<span
class="note-headline-light note-headline-meta"
>
<span
class="system-note-message"
/>
<span
class="system-note-separator"
/>
<a
class="note-timestamp system-note-separator"
href="#note_undefined"
>
<timeagotooltip-stub
cssclass=""
time="2019-07-26T15:02:20Z"
tooltipplacement="bottom"
/>
</a>
</span>
<div
class="note-text md"
data-qa-selector="note_content"
/>
</timelineentryitem-stub>
`;
......@@ -3,6 +3,13 @@ import DesignNote from 'ee/design_management/components/design_notes/design_note
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
const scrollIntoViewMock = jest.fn();
HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
const $route = {
hash: '#note_123',
};
describe('Design note component', () => {
let wrapper;
......@@ -16,6 +23,9 @@ describe('Design note component', () => {
note: {},
...props,
},
mocks: {
$route,
},
});
}
......@@ -23,9 +33,24 @@ describe('Design note component', () => {
wrapper.destroy();
});
it('should match the snapshot', () => {
createComponent({
note: {
id: '1',
createdAt: '2019-07-26T15:02:20Z',
author: {
id: 'author-id',
},
},
});
expect(wrapper.element).toMatchSnapshot();
});
it('should render an author', () => {
createComponent({
note: {
id: '1',
author: {
id: 'author-id',
},
......@@ -39,6 +64,7 @@ describe('Design note component', () => {
it('should render a time ago tooltip if note has createdAt property', () => {
createComponent({
note: {
id: '1',
createdAt: '2019-07-26T15:02:20Z',
author: {
id: 'author-id',
......@@ -48,4 +74,17 @@ describe('Design note component', () => {
expect(wrapper.find(TimeAgoTooltip).exists()).toBe(true);
});
it('should trigger a scrollIntoView method', () => {
createComponent({
note: {
id: 'gid://gitlab/DiffNote/123',
author: {
id: 'author-id',
},
},
});
expect(scrollIntoViewMock).toHaveBeenCalled();
});
});
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