Fixed renamed and mode changed diff viewers

Renders mode changed and renamed file merge request diff
viewers on the frontend.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/52607

8 files changed, 71 insertions, 8 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index e405d8b20ae..11cc4c09fed 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -90,6 +90,8 @@ export default {
         :old-sha="diffFile.diff_refs.base_sha"
         :file-hash="diffFile.file_hash"
         :project-path="projectPath"
+        :a-mode="diffFile.a_mode"
+        :b-mode="diffFile.b_mode"
       >
         <image-diff-overlay
           slot="image-overlay"
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index f7e3655ea40..3b2a0d156ca 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -52,7 +52,9 @@ export default {
         (!this.file.highlighted_diff_lines &&
           !this.isLoadingCollapsedDiff &&
           !this.file.too_large &&
-          this.file.text)
+          this.file.text &&
+          !this.file.renamed_file &&
+          !this.file.mode_changed)
       );
     },
     showLoadingIcon() {
@@ -143,9 +145,8 @@ export default {
       <a
         :href="file.fork_path"
         class="js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
+        >Fork</a
       >
-        Fork
-      </a>
       <button
         class="js-cancel-fork-suggestion-button btn btn-grouped"
         type="button"
@@ -163,9 +164,9 @@ export default {
     <gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" />
     <div v-else-if="showExpandMessage" class="nothing-here-block diff-collapsed">
       {{ __('This diff is collapsed.') }}
-      <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">
-        {{ __('Click to expand it.') }}
-      </a>
+      <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{
+        __('Click to expand it.')
+      }}</a>
     </div>
     <div v-if="file.too_large" class="nothing-here-block diff-collapsed js-too-large-diff">
       {{ __('This source diff could not be displayed because it is too large.') }}
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index 54b9ee4d2d6..5c6b20109bb 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -324,5 +324,9 @@ export const generateTreeList = files =>
 
 export const getDiffMode = diffFile => {
   const diffModeKey = Object.keys(diffModes).find(key => diffFile[`${key}_file`]);
-  return diffModes[diffModeKey] || diffModes.replaced;
+  return (
+    diffModes[diffModeKey] ||
+    (diffFile.mode_changed && diffModes.mode_changed) ||
+    diffModes.replaced
+  );
 };
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index 3b201f006aa..09245ed0296 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -26,6 +26,7 @@ export const diffModes = {
   new: 'new',
   deleted: 'deleted',
   renamed: 'renamed',
+  mode_changed: 'mode_changed',
 };
 
 export const rightSidebarViews = {
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
index bb2e0e12c11..75c66ed850b 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
@@ -1,7 +1,10 @@
 <script>
+import { diffModes } from '~/ide/constants';
 import { viewerInformationForPath } from '../content_viewer/lib/viewer_utils';
 import ImageDiffViewer from './viewers/image_diff_viewer.vue';
 import DownloadDiffViewer from './viewers/download_diff_viewer.vue';
+import RenamedFile from './viewers/renamed.vue';
+import ModeChanged from './viewers/mode_changed.vue';
 
 export default {
   props: {
@@ -30,9 +33,25 @@ export default {
       required: false,
       default: '',
     },
+    aMode: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    bMode: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     viewer() {
+      if (this.diffMode === diffModes.renamed) {
+        return RenamedFile;
+      } else if (this.diffMode === diffModes.mode_changed) {
+        return ModeChanged;
+      }
+
       if (!this.newPath) return null;
 
       const previewInfo = viewerInformationForPath(this.newPath);
@@ -67,8 +86,10 @@ export default {
       :new-path="fullNewPath"
       :old-path="fullOldPath"
       :project-path="projectPath"
+      :a-mode="aMode"
+      :b-mode="bMode"
     >
-      <slot slot="image-overlay" name="image-overlay"> </slot>
+      <slot slot="image-overlay" name="image-overlay"></slot>
     </component>
     <slot></slot>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed.vue
new file mode 100644
index 00000000000..3c7a4ea6183
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed.vue
@@ -0,0 +1,30 @@
+<script>
+import { sprintf, __ } from '~/locale';
+
+export default {
+  props: {
+    aMode: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    bMode: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    outputText() {
+      return sprintf(__('File mode changed from %{a_mode} to %{b_mode}'), {
+        a_mode: this.aMode,
+        b_mode: this.bMode,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="nothing-here-block">{{ outputText }}</div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
new file mode 100644
index 00000000000..5c1ea59b471
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="nothing-here-block">{{ __('File moved') }}</div>
+</template>
diff --git a/app/serializers/diff_file_entity.rb b/app/serializers/diff_file_entity.rb
index 63ea8e8f95f..e570039d47e 100644
--- a/app/serializers/diff_file_entity.rb
+++ b/app/serializers/diff_file_entity.rb
@@ -46,6 +46,7 @@ class DiffFileEntity < Grape::Entity
 
   expose :deleted_file?, as: :deleted_file
   expose :renamed_file?, as: :renamed_file
+  expose :mode_changed?, as: :mode_changed
   expose :old_path
   expose :new_path
   expose :mode_changed?, as: :mode_changed