Refactored to scrollIntoView

- changed location.hash logic to Element.scrollIntoView

changelogs/unreleased/36103-links-to-design-comments-from-todos-and-system-notes-do-not-jump-to.yml

+---
+title: Links to design comments now lead to specific note
+merge_request: 21724
+author:
+type: fixed

ee/app/assets/javascripts/design_management/components/design_notes/design_note.vue

@@ -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>

ee/app/assets/javascripts/design_management/utils/design_management_utils.js

@@ -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;

ee/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap

+// 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>
+`;

ee/spec/frontend/design_management/components/design_notes/design_note_spec.js

@@ -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();
+  });
 });