Fix broken file name navigation on MRs

4 files changed, 25 insertions, 6 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 15b37243030..dcf1057eb84 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -20,6 +20,11 @@ export default {
     Tooltip,
   },
   props: {
+    discussionPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     diffFile: {
       type: Object,
       required: true,
@@ -65,8 +70,7 @@ export default {
       if (this.diffFile.submodule) {
         return this.diffFile.submoduleTreeUrl || this.diffFile.submoduleLink;
       }
-
-      return `#${this.diffFile.fileHash}`;
+      return this.discussionPath;
     },
     filePath() {
       if (this.diffFile.submodule) {
@@ -152,7 +156,7 @@ export default {
         v-once
         ref="titleWrapper"
         :href="titleLink"
-        class="append-right-4"
+        class="append-right-4 js-title-wrapper"
       >
         <file-icon
           :file-name="filePath"
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index 353aa790743..d9e99603238 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -94,6 +94,7 @@ export default {
     class="diff-file file-holder"
   >
     <diff-file-header
+      :discussion-path="discussion.discussionPath"
       :diff-file="diffFile"
       :can-current-user-fork="false"
       :discussions-expanded="isDiscussionsExpanded"
diff --git a/changelogs/unreleased/50185-fix-broken-file-name-navigation.yml b/changelogs/unreleased/50185-fix-broken-file-name-navigation.yml
new file mode 100644
index 00000000000..d1b341af457
--- /dev/null
+++ b/changelogs/unreleased/50185-fix-broken-file-name-navigation.yml
@@ -0,0 +1,5 @@
+---
+title: Fix broken file name navigation on MRs
+merge_request: 22109
+author:
+type: fixed
diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js
index c986ea604b2..1f7d5f42322 100644
--- a/spec/javascripts/diffs/components/diff_file_header_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_header_spec.js
@@ -6,6 +6,8 @@ import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 
+Vue.use(Vuex);
+
 const discussionFixture = 'merge_requests/diff_discussion.json';
 
 describe('diff_file_header', () => {
@@ -58,19 +60,19 @@ describe('diff_file_header', () => {
 
     describe('titleLink', () => {
       beforeEach(() => {
+        props.discussionPath = 'link://to/discussion';
         Object.assign(props.diffFile, {
-          fileHash: 'badc0ffee',
           submoduleLink: 'link://to/submodule',
           submoduleTreeUrl: 'some://tree/url',
         });
       });
 
-      it('returns the fileHash for files', () => {
+      it('returns the discussionPath for files', () => {
         props.diffFile.submodule = false;
 
         vm = mountComponentWithStore(Component, { props, store });
 
-        expect(vm.titleLink).toBe(`#${props.diffFile.fileHash}`);
+        expect(vm.titleLink).toBe(props.discussionPath);
       });
 
       it('returns the submoduleTreeUrl for submodules', () => {
@@ -91,6 +93,13 @@ describe('diff_file_header', () => {
 
         expect(vm.titleLink).toBe(props.diffFile.submoduleLink);
       });
+
+      it('sets the correct path to the discussion', () => {
+        props.discussionPath = 'link://to/discussion';
+        vm = mountComponentWithStore(Component, { props, store });
+        const href = vm.$el.querySelector('.js-title-wrapper').getAttribute('href');
+        expect(href).toBe(vm.discussionPath);
+      });
     });
 
     describe('filePath', () => {