WIP: Primitive next and previous commit buttons39380-next-and-previous-commit-buttons-in-merge-requests

- Not actually working but only because request to diffs.json ignores
  query parameters
- URL is still not changing

7 files changed, 70 insertions, 7 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index d5c9f697d0f..9c16a60e54d 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -68,7 +68,7 @@ export default {
       emailPatchPath: state => state.diffs.emailPatchPath,
     }),
     ...mapState('diffs', ['showTreeList', 'isLoading']),
-    ...mapGetters('diffs', ['isParallelView']),
+    ...mapGetters('diffs', ['isParallelView', 'commitId']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
     targetBranch() {
       return {
@@ -97,6 +97,11 @@ export default {
 
       this.adjustView();
     },
+    commitId(oldCommitId, newCommitId) {
+      if (oldCommitId && newCommitId && oldCommitId !== newCommitId) {
+        this.fetchData(newCommitId);
+      }
+    },
     isLoading: 'adjustView',
     showTreeList: 'adjustView',
   },
@@ -120,7 +125,7 @@ export default {
       'assignDiscussionsToDiff',
     ]),
     fetchData() {
-      this.fetchDiffFiles()
+      this.fetchDiffFiles(this.commitId)
         .then(() => {
           requestIdleCallback(
             () => {
@@ -187,7 +192,7 @@ export default {
       >
         <div v-show="showTreeList" class="diff-tree-list"><tree-list /></div>
         <div class="diff-files-holder">
-          <commit-widget v-if="commit" :commit="commit" />
+          <commit-widget v-if="commit" :commit="commit" :commit-list="commits"/>
           <template v-if="diffFiles.length > 0">
             <diff-file
               v-for="file in diffFiles"
diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index ebc4a83af4d..66d4ed7d2aa 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapActions } from 'vuex';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -33,6 +34,14 @@ export default {
       type: Object,
       required: true,
     },
+    nextCommit: {
+      type: Object,
+      required: false,
+    },
+    previousCommit: {
+      type: Object,
+      required: false,
+    },
   },
   computed: {
     authorName() {
@@ -49,6 +58,7 @@ export default {
       );
     },
   },
+  methods: mapActions('diffs', ['setCommit']),
 };
 </script>
 
@@ -80,6 +90,9 @@ export default {
           <icon :size="12" name="ellipsis_h" />
         </button>
 
+        <button v-if="nextCommit" @click="setCommit(nextCommit)">{{ __("Next Commit") }}</button>
+        <button v-if="previousCommit" @click="setCommit(previousCommit)">{{ __("Previous Commit") }}</button>
+
         <div class="commiter">
           <a :href="authorUrl" v-text="authorName"></a> {{ s__('CommitWidget|authored') }}
           <time-ago-tooltip :time="commit.authored_date" />
diff --git a/app/assets/javascripts/diffs/components/commit_widget.vue b/app/assets/javascripts/diffs/components/commit_widget.vue
index d45f91c7023..6b95c3042e6 100644
--- a/app/assets/javascripts/diffs/components/commit_widget.vue
+++ b/app/assets/javascripts/diffs/components/commit_widget.vue
@@ -23,6 +23,27 @@ export default {
       type: Object,
       required: true,
     },
+    commitList: {
+      type: Array,
+      required: false,
+    },
+  },
+  computed: {
+    currentCommitIndex() {
+      if (this.commitList) {
+        return this.commitList.findIndex(commit => commit.id === this.commit.id);
+      }
+    },
+    nextCommit() {
+      if (this.commitList && this.currentCommitIndex !== (this.commitList.length - 1)) {
+        return this.commitList[this.currentCommitIndex + 1];
+      }
+    },
+    previousCommit() {
+      if (this.commitList && this.currentCommitIndex !== 0) {
+        return this.commitList[this.currentCommitIndex - 1];
+      }
+    }
   },
 };
 </script>
@@ -31,7 +52,7 @@ export default {
   <div class="info-well w-100">
     <div class="well-segment">
       <ul class="blob-commit-info">
-        <commit-item :commit="commit" />
+        <commit-item :commit="commit" :next-commit="nextCommit" :previous-commit="previousCommit"/>
       </ul>
     </div>
   </div>
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index a3de058b20e..e8e71aa6aff 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -5,7 +5,7 @@ import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import { handleLocationHash, historyPushState } from '~/lib/utils/common_utils';
 import { mergeUrlParams, getLocationHash } from '~/lib/utils/url_utility';
-import { getDiffPositionByLineCode, getNoteFormData } from './utils';
+import { getDiffPositionByLineCode, getNoteFormData, getEndpointWithCommitId } from './utils';
 import * as types from './mutation_types';
 import {
   PARALLEL_DIFF_VIEW_TYPE,
@@ -19,11 +19,18 @@ export const setBaseConfig = ({ commit }, options) => {
   commit(types.SET_BASE_CONFIG, { endpoint, projectPath });
 };
 
-export const fetchDiffFiles = ({ state, commit }) => {
+export const setCommit = ({ commit }, newCommit) => {
+  commit(types.SET_COMMIT, newCommit);
+}
+
+export const fetchDiffFiles = ({ state, commit }, commitId) => {
   commit(types.SET_LOADING, true);
+  const endpoint = commitId
+    ? getEndpointWithCommitId(state.endpoint, commitId)
+    : state.endpoint;
 
   return axios
-    .get(state.endpoint)
+    .get(endpoint)
     .then(res => {
       commit(types.SET_LOADING, false);
       commit(types.SET_MERGE_REQUEST_DIFFS, res.data.merge_request_diffs || []);
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index e011031e72c..825eeff41cf 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -14,6 +14,7 @@ export const REMOVE_LINE_DISCUSSIONS_FOR_FILE = 'REMOVE_LINE_DISCUSSIONS_FOR_FIL
 export const TOGGLE_FOLDER_OPEN = 'TOGGLE_FOLDER_OPEN';
 export const TOGGLE_SHOW_TREE_LIST = 'TOGGLE_SHOW_TREE_LIST';
 export const UPDATE_CURRENT_DIFF_FILE_ID = 'UPDATE_CURRENT_DIFF_FILE_ID';
+export const SET_COMMIT = 'SET_COMMIT';
 
 export const OPEN_DIFF_FILE_COMMENT_FORM = 'OPEN_DIFF_FILE_COMMENT_FORM';
 export const UPDATE_DIFF_FILE_COMMENT_FORM = 'UPDATE_DIFF_FILE_COMMENT_FORM';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index 2133cfe4825..73132451f57 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -223,4 +223,7 @@ export default {
   [types.CLOSE_DIFF_FILE_COMMENT_FORM](state, fileHash) {
     state.commentForms = state.commentForms.filter(form => form.fileHash !== fileHash);
   },
+  [types.SET_COMMIT](state, newCommit) {
+    state.commit = newCommit;
+  }
 };
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index d9d3c0f2ca2..03bb9e81bcb 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -324,3 +324,16 @@ export const getDiffMode = diffFile => {
   const diffModeKey = Object.keys(diffModes).find(key => diffFile[`${key}_file`]);
   return diffModes[diffModeKey] || diffModes.replaced;
 };
+
+export const getEndpointWithCommitId = (currentEndpoint, commitId) => {
+  const commitIdLocation = currentEndpoint.indexOf("commit_id") + 10;
+  const nextQueryParameter = currentEndpoint.indexOf("&", commitIdLocation);
+
+  if (commitIdLocation) {
+    return currentEndpoint.slice(0, commitIdLocation) + commitId + currentEndpoint.slice(nextQueryParameter);
+  } else if (currentEndpoint.indexOf('?')) {
+    return `${currentEndpoint}&commit_id=${commitId}`
+  }
+
+  return `${currentEndpoint}?commit_id=${commitId}`;
+}