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

3 files changed, 55 insertions, 1 deletions

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>