Use route hash in initial active discussion update

Ensures comment is highlighted on entry

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

@@ -62,16 +62,17 @@ export default {
     activeDiscussion: {
       query: activeDiscussionQuery,
       result({ data }) {
-        const discussionId = data.activeDiscussion.id;
+        const activeDiscussionId = data.activeDiscussion.id;
         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 (
-          discussionId &&
+          this.$el &&
+          activeDiscussionId &&
           data.activeDiscussion.source === ACTIVE_DISCUSSION_SOURCE_TYPES.pin &&
-          discussionId === this.discussion.notes[0].id
+          activeDiscussionId === this.discussion.notes[0].id
         ) {
           this.$el.scrollIntoView({
             behavior: 'smooth',

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

@@ -19,6 +19,7 @@ import {
   extractDiscussions,
   extractDesign,
   updateImageDiffNoteOptimisticResponse,
+  toDiffNoteGid,
 } from '../../utils/design_management_utils';
 import {
   updateStoreAfterAddImageDiffNote,
@@ -146,7 +147,9 @@ export default {
     Mousetrap.bind('esc', this.closeDesign);
     this.trackEvent();
     // We need to reset the active discussion when opening a new design
-    this.updateActiveDiscussion();
+    const [, noteId] = this.$route.hash.match(/#note_([0-9]+)/) || [];
+    const diffNoteGid = noteId ? toDiffNoteGid(noteId) : undefined;
+    return this.updateActiveDiscussion(diffNoteGid);
   },
   beforeDestroy() {
     Mousetrap.unbind('esc', this.closeDesign);

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

@@ -34,6 +34,8 @@ export const extractDesigns = data => data.project.issue.designCollection.design
 
 export const extractDesign = data => (extractDesigns(data) || [])[0];
 
+export const toDiffNoteGid = noteId => `gid://gitlab/DiffNote/${noteId}`;
+
 /**
  * Generates optimistic response for a design upload mutation
  * @param {Array<File>} files

changelogs/unreleased/fix-design-managemnt-comment-highlight.yml

+---
+title: Ensure design comment is highlighted when comment is in URL
+merge_request: 40477
+author:
+type: fixed