Fix showing diff file header for renamed files

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -166,18 +166,16 @@ export default {
             :title="diffFile.oldPath"
             class="file-title-name"
             data-container="body"
-          >
-            {{ diffFile.oldPath }}
-          </strong>
+            v-html="diffFile.oldPathHtml"
+          ></strong>
           →
           <strong
             v-tooltip
             :title="diffFile.newPath"
             class="file-title-name"
             data-container="body"
-          >
-            {{ diffFile.newPath }}
-          </strong>
+            v-html="diffFile.newPathHtml"
+          ></strong>
         </span>
 
         <strong

app/assets/javascripts/notes/components/diff_file_header.vue

-<script>
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
-
-export default {
-  components: {
-    ClipboardButton,
-    Icon,
-  },
-  props: {
-    diffFile: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    titleTag() {
-      return this.diffFile.discussionPath ? 'a' : 'span';
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="file-header-content">
-    <div
-      v-if="diffFile.submodule"
-    >
-      <span>
-        <icon name="archive" />
-        <strong
-          class="file-title-name"
-          v-html="diffFile.submoduleLink"
-        ></strong>
-        <clipboard-button
-          :text="diffFile.submoduleLink"
-          title="Copy file path to clipboard"
-          css-class="btn-default btn-transparent btn-clipboard"
-        />
-      </span>
-    </div>
-    <template v-else>
-      <component
-        :is="titleTag"
-        ref="titleWrapper"
-        :href="diffFile.discussionPath"
-      >
-        <span v-html="diffFile.blobIcon"></span>
-        <span v-if="diffFile.renamedFile">
-          <strong
-            :title="diffFile.oldPath"
-            class="file-title-name has-tooltip"
-            data-container="body"
-          >
-            {{ diffFile.oldPath }}
-          </strong>
-          &rarr;
-          <strong
-            :title="diffFile.newPath"
-            class="file-title-name has-tooltip"
-            data-container="body"
-          >
-            {{ diffFile.newPath }}
-          </strong>
-        </span>
-
-        <strong
-          v-else
-          :title="diffFile.oldPath"
-          class="file-title-name has-tooltip"
-          data-container="body"
-        >
-          {{ diffFile.filePath }}
-          <span v-if="diffFile.deletedFile">
-            deleted
-          </span>
-        </strong>
-      </component>
-
-      <clipboard-button
-        :text="diffFile.filePath"
-        title="Copy file path to clipboard"
-        css-class="btn-default btn-transparent btn-clipboard"
-      />
-
-      <small
-        v-if="diffFile.modeChanged"
-        ref="fileMode"
-      >
-        {{ diffFile.aMode }} → {{ diffFile.bMode }}
-      </small>
-    </template>
-  </div>
-</template>

app/serializers/diff_file_entity.rb

@@ -84,7 +84,7 @@ class DiffFileEntity < Grape::Entity
   end
 
   expose :old_path_html do |diff_file|
-    old_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
+    old_path, _ = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
     old_path
   end
 

changelogs/unreleased/_acet-fix-diff-file-header.yml

+---
+title: Fix showing diff file header for renamed files
+merge_request: 22089
+author:
+type: fixed

spec/javascripts/diffs/mock_data/diff_file.js

@@ -33,7 +33,7 @@ export default {
   contentSha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13',
   storedExternally: null,
   externalStorage: null,
-  oldPathHtml: ['CHANGELOG', 'CHANGELOG'],
+  oldPathHtml: 'CHANGELOG',
   newPathHtml: 'CHANGELOG',
   editPath: '/gitlab-org/gitlab-test/edit/spooky-stuff/CHANGELOG',
   viewPath: '/gitlab-org/gitlab-test/blob/spooky-stuff/CHANGELOG',