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,19 +66,24 @@ export default {
         if (this.discussion.resolved && !this.resolvedDiscussionsExpanded) {
           return;
         }
-        // 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 &&
-          activeDiscussionId === this.discussion.notes[0].id
-        ) {
-          this.$el.scrollIntoView({
-            behavior: 'smooth',
-            inline: 'start',
-          });
-        }
+
+        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 &&
+            [ACTIVE_DISCUSSION_SOURCE_TYPES.pin, ACTIVE_DISCUSSION_SOURCE_TYPES.url].includes(
+              data.activeDiscussion.source,
+            ) &&
+            activeDiscussionId === this.discussion.notes[0].id
+          ) {
+            this.$el.scrollIntoView({
+              behavior: 'smooth',
+              inline: 'start',
+            });
+          }
+        });
       },
     },
   },

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

@@ -60,9 +60,11 @@ export default {
     },
   },
   mounted() {
-    if (this.isNoteLinked) {
-      this.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
-    }
+    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,7 +91,9 @@ describe('Design note component', () => {
       note,
     });
 
-    expect(scrollIntoViewMock).toHaveBeenCalled();
+    return wrapper.vm.$nextTick().then(() => {
+      expect(scrollIntoViewMock).toHaveBeenCalled();
+    });
   });
 
   it('should not render edit icon when user does not have a permission', () => {

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);
 
-      expect(scrollIntoViewMock).toHaveBeenCalled();
+      return wrapper.vm.$nextTick().then(() => {
+        expect(scrollIntoViewMock).toHaveBeenCalled();
+      });
     });
   });
 });