Added Diff Viewer to new VUE based MR page

11 files changed, 69 insertions, 29 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 82ca10f4163..deddb61ca31 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -26,6 +26,10 @@ export default {
       type: String,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
     shouldShow: {
       type: Boolean,
       required: false,
@@ -94,18 +98,16 @@ export default {
     },
   },
   mounted() {
-    this.setEndpoint(this.endpoint);
-    this
-      .fetchDiffFiles()
-      .catch(() => {
-        createFlash(__('Something went wrong on our end. Please try again!'));
-      });
+    this.setBaseConfig({ endpoint: this.endpoint, projectPath: this.projectPath });
+    this.fetchDiffFiles().catch(() => {
+      createFlash(__('Fetching diff files failed. Please reload the page to try again!'));
+    });
   },
   created() {
     this.adjustView();
   },
   methods: {
-    ...mapActions(['setEndpoint', 'fetchDiffFiles']),
+    ...mapActions(['setBaseConfig', 'fetchDiffFiles']),
     setActive(filePath) {
       this.activeFile = filePath;
     },
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index adcd22f7876..48ba967285f 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -1,5 +1,7 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
+import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
+import { diffModes } from '~/ide/constants';
 import InlineDiffView from './inline_diff_view.vue';
 import ParallelDiffView from './parallel_diff_view.vue';
 
@@ -7,6 +9,7 @@ export default {
   components: {
     InlineDiffView,
     ParallelDiffView,
+    DiffViewer,
   },
   props: {
     diffFile: {
@@ -15,7 +18,18 @@ export default {
     },
   },
   computed: {
+    ...mapState({
+      projectPath: state => state.diffs.projectPath,
+      endpoint: state => state.diffs.endpoint,
+    }),
     ...mapGetters(['isInlineView', 'isParallelView']),
+    diffMode() {
+      const diffModeKey = Object.keys(diffModes).find(key => this.diffFile[`${key}File`]);
+      return diffModes[diffModeKey] || diffModes.replaced;
+    },
+    isTextFile() {
+      return this.diffFile.text;
+    },
   },
 };
 </script>
@@ -23,16 +37,26 @@ export default {
 <template>
   <div class="diff-content">
     <div class="diff-viewer">
-      <inline-diff-view
-        v-if="isInlineView"
-        :diff-file="diffFile"
-        :diff-lines="diffFile.highlightedDiffLines || []"
-      />
-      <parallel-diff-view
-        v-if="isParallelView"
-        :diff-file="diffFile"
-        :diff-lines="diffFile.parallelDiffLines || []"
-      />
+      <template v-if="isTextFile">
+        <inline-diff-view
+          v-if="isInlineView"
+          :diff-file="diffFile"
+          :diff-lines="diffFile.highlightedDiffLines || []"
+        />
+        <parallel-diff-view
+          v-else-if="isParallelView"
+          :diff-file="diffFile"
+          :diff-lines="diffFile.parallelDiffLines || []"
+        />
+      </template>
+      <diff-viewer
+        v-else
+        :diff-mode="diffMode"
+        :new-path="diffFile.newPath"
+        :new-sha="diffFile.diffRefs.headSha"
+        :old-path="diffFile.oldPath"
+        :old-sha="diffFile.diffRefs.baseSha"
+        :project-path="projectPath"/>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index 0ed3dc7f3ad..21376117bef 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -36,7 +36,7 @@ export default {
   <table
     :class="userColorScheme"
     :data-commit-id="commitId"
-    class="code diff-wrap-lines js-syntax-highlight text-file">
+    class="code diff-wrap-lines js-syntax-highlight text-file js-diff-inline-view">
     <tbody>
       <template
         v-for="(line, index) in normalizedDiffLines"
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index f6840f87034..aae89109c27 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -16,6 +16,7 @@ export default function initDiffsApp(store) {
 
       return {
         endpoint: dataset.endpoint,
+        projectPath: dataset.projectPath,
         currentUser: convertObjectPropsToCamelCase(JSON.parse(dataset.currentUserData), {
           deep: true,
         }),
@@ -31,6 +32,7 @@ export default function initDiffsApp(store) {
         props: {
           endpoint: this.endpoint,
           currentUser: this.currentUser,
+          projectPath: this.projectPath,
           shouldShow: this.activeTab === 'diffs',
         },
       });
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index f8089b314d3..bf188a44022 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -10,8 +10,9 @@ import {
   DIFF_VIEW_COOKIE_NAME,
 } from '../constants';
 
-export const setEndpoint = ({ commit }, endpoint) => {
-  commit(types.SET_ENDPOINT, endpoint);
+export const setBaseConfig = ({ commit }, options) => {
+  const { endpoint, projectPath } = options;
+  commit(types.SET_BASE_CONFIG, { endpoint, projectPath });
 };
 
 export const setLoadingState = ({ commit }, state) => {
@@ -86,7 +87,7 @@ export const expandAllFiles = ({ commit }) => {
 };
 
 export default {
-  setEndpoint,
+  setBaseConfig,
   setLoadingState,
   fetchDiffFiles,
   setInlineDiffViewType,
diff --git a/app/assets/javascripts/diffs/store/modules/index.js b/app/assets/javascripts/diffs/store/modules/index.js
index 882a098c977..94caa131506 100644
--- a/app/assets/javascripts/diffs/store/modules/index.js
+++ b/app/assets/javascripts/diffs/store/modules/index.js
@@ -13,6 +13,7 @@ export default {
   state: {
     isLoading: true,
     endpoint: '',
+    basePath: '',
     commit: null,
     diffFiles: [],
     mergeRequestDiffs: [],
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index a65b205b8e7..63e9239dce4 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -1,4 +1,4 @@
-export const SET_ENDPOINT = 'SET_ENDPOINT';
+export const SET_BASE_CONFIG = 'SET_BASE_CONFIG';
 export const SET_LOADING = 'SET_LOADING';
 export const SET_DIFF_DATA = 'SET_DIFF_DATA';
 export const SET_DIFF_FILES = 'SET_DIFF_FILES';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index fd9ea73e33d..339a33f8b71 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -5,8 +5,9 @@ import { findDiffFile, addLineReferences, removeMatchLine, addContextLines } fro
 import * as types from './mutation_types';
 
 export default {
-  [types.SET_ENDPOINT](state, endpoint) {
-    Object.assign(state, { endpoint });
+  [types.SET_BASE_CONFIG](state, options) {
+    const { endpoint, projectPath } = options;
+    Object.assign(state, { endpoint, projectPath });
   },
 
   [types.SET_LOADING](state, isLoading) {
@@ -73,7 +74,7 @@ export default {
   [types.EXPAND_ALL_FILES](state) {
     const diffFiles = [];
 
-    state.diffFiles.forEach((file) => {
+    state.diffFiles.forEach(file => {
       diffFiles.push({
         ...file,
         collapsed: false,
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 2c47f5b9b35..d3cbe3c7e74 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
@@ -45,11 +45,15 @@ export default {
           return DownloadDiffViewer;
       }
     },
+    basePath() {
+      // We might get the project path from rails with the relative url already setup
+      return this.projectPath.indexOf('/') === 0 ? '' : `${gon.relative_url_root}/`;
+    },
     fullOldPath() {
-      return `${gon.relative_url_root}/${this.projectPath}/raw/${this.oldSha}/${this.oldPath}`;
+      return `${this.basePath}${this.projectPath}/raw/${this.oldSha}/${this.oldPath}`;
     },
     fullNewPath() {
-      return `${gon.relative_url_root}/${this.projectPath}/raw/${this.newSha}/${this.newPath}`;
+      return `${this.basePath}${this.projectPath}/raw/${this.newSha}/${this.newPath}`;
     },
   },
 };
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 8e8a879be88..7b8e66b6f12 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -502,6 +502,10 @@
   border-bottom: 0;
 }
 
+.merge-request-details .file-content.image_file img {
+  max-height: 50vh;
+}
+
 .diff-stats-summary-toggler {
   padding: 0;
   background-color: transparent;
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 4fe0ae17ec5..b23baa22d8b 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -73,7 +73,8 @@
           = render 'projects/commit/pipelines_list', disable_initialization: true, endpoint: pipelines_project_merge_request_path(@project, @merge_request)
       #js-diffs-app.diffs.tab-pane{ data: { "is-locked" => @merge_request.discussion_locked?,
         endpoint: diffs_project_merge_request_path(@project, @merge_request, 'json', request.query_parameters),
-        current_user_data: UserSerializer.new(project: @project).represent(current_user, {}, MergeRequestUserEntity).to_json } }
+        current_user_data: UserSerializer.new(project: @project).represent(current_user, {}, MergeRequestUserEntity).to_json,
+        project_path: project_path(@merge_request.project)} }
 
     .mr-loading-status
       = spinner