Call scrollIntoView for note on next tick

Also, add a `url` source for active discussion in Apollo

app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

@@ -66,12 +66,16 @@ export default {
         if (this.discussion.resolved && !this.resolvedDiscussionsExpanded) {
           return;
         }
+
+        this.$nextTick(() => {
           // We watch any changes to the active discussion from the design pins and scroll to this discussion if it exists
           // We don't want scrollIntoView to be triggered from the discussion click itself
           if (
             this.$el &&
             activeDiscussionId &&
-          data.activeDiscussion.source === ACTIVE_DISCUSSION_SOURCE_TYPES.pin &&
+            [ACTIVE_DISCUSSION_SOURCE_TYPES.pin, ACTIVE_DISCUSSION_SOURCE_TYPES.url].includes(
+              data.activeDiscussion.source,
+            ) &&
             activeDiscussionId === this.discussion.notes[0].id
           ) {
             this.$el.scrollIntoView({
@@ -79,6 +83,7 @@ export default {
               inline: 'start',
             });
           }
+        });
       },
     },
   },

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

@@ -60,9 +60,11 @@ export default {
     },
   },
   mounted() {
+    this.$nextTick(() => {
       if (this.isNoteLinked) {
         this.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
       }
+    });
   },
   methods: {
     hideForm() {

app/assets/javascripts/design_management/constants.js

@@ -11,6 +11,7 @@ export const VALID_DATA_TRANSFER_TYPE = 'Files';
 export const ACTIVE_DISCUSSION_SOURCE_TYPES = {
   pin: 'pin',
   discussion: 'discussion',
+  url: 'url',
 };
 
 export const DESIGN_DETAIL_LAYOUT_CLASSLIST = ['design-detail-layout', 'overflow-hidden', 'm-0'];

app/assets/javascripts/design_management/pages/design/index.vue

@@ -271,19 +271,19 @@ export default {
         this.isLatestVersion,
       );
     },
-    updateActiveDiscussion(id) {
+    updateActiveDiscussion(id, source = ACTIVE_DISCUSSION_SOURCE_TYPES.discussion) {
       this.$apollo.mutate({
         mutation: updateActiveDiscussionMutation,
         variables: {
           id,
-          source: ACTIVE_DISCUSSION_SOURCE_TYPES.discussion,
+          source,
         },
       });
     },
     updateActiveDiscussionFromUrl() {
       const noteId = parseDesignRouteHash(this.$route.hash);
       const diffNoteGid = noteId ? toDiffNoteGid(noteId) : undefined;
-      return this.updateActiveDiscussion(diffNoteGid);
+      return this.updateActiveDiscussion(diffNoteGid, ACTIVE_DISCUSSION_SOURCE_TYPES.url);
     },
     toggleResolvedComments() {
       this.resolvedDiscussionsExpanded = !this.resolvedDiscussionsExpanded;

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

@@ -91,8 +91,10 @@ describe('Design note component', () => {
       note,
     });
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(scrollIntoViewMock).toHaveBeenCalled();
     });
+  });
 
   it('should not render edit icon when user does not have a permission', () => {
     createComponent({

spec/frontend/design_management/pages/design/index_spec.js

@@ -315,7 +315,7 @@ describe('Design management design index page', () => {
       expect(mutate).toHaveBeenCalledTimes(1);
       expect(mutate).toHaveBeenCalledWith({
         mutation: updateActiveDiscussion,
-        variables: { id: 'gid://gitlab/DiffNote/123', source: 'discussion' },
+        variables: { id: 'gid://gitlab/DiffNote/123', source: 'url' },
       });
     });
   });

spec/frontend/design_management/pages/index_spec.js

@@ -579,7 +579,9 @@ describe('Design management index page', () => {
       });
       createComponent(true);
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(scrollIntoViewMock).toHaveBeenCalled();
       });
     });
+  });
 });