Basic Setup for Opening a MR

app/assets/javascripts/api.js

@@ -9,6 +9,9 @@ const Api = {
   projectsPath: '/api/:version/projects.json',
   projectPath: '/api/:version/projects/:id',
   projectLabelsPath: '/:namespace_path/:project_path/labels',
+  mergeRequestPath: '/api/:version/projects/:id/merge_requests/:mrid',
+  mergeRequestChangesPath: '/api/:version/projects/:id/merge_requests/:mrid/changes',
+  mergeRequestNotesPath: '/api/:version/projects/:id/merge_requests/:mrid/notes',
   groupLabelsPath: '/groups/:namespace_path/labels',
   licensePath: '/api/:version/templates/licenses/:key',
   gitignorePath: '/api/:version/templates/gitignores/:key',
@@ -90,6 +93,33 @@ const Api = {
     return axios.get(url);
   },
 
+  // Return Merge Request for project
+  mergeRequest(projectPath, mergeRequestId) {
+    const url = Api.buildUrl(Api.mergeRequestPath)
+            .replace(':id', encodeURIComponent(projectPath))
+            .replace(':mrid', mergeRequestId);
+
+    return axios.get(url);
+  },
+
+  // Return Merge Request Changes
+  mergeRequestChanges(projectPath, mergeRequestId) {
+    const url = Api.buildUrl(Api.mergeRequestChangesPath)
+            .replace(':id', encodeURIComponent(projectPath))
+            .replace(':mrid', mergeRequestId);
+
+    return axios.get(url);
+  },
+
+  // Return Merge Request Notes
+  mergeRequestNotes(projectPath, mergeRequestId) {
+    const url = Api.buildUrl(Api.mergeRequestNotesPath)
+            .replace(':id', encodeURIComponent(projectPath))
+            .replace(':mrid', mergeRequestId);
+
+    return axios.get(url);
+  },
+
   newLabel(namespacePath, projectPath, data, callback) {
     let url;
 

app/assets/javascripts/ide/ide_router.js

@@ -47,7 +47,7 @@ const router = new VueRouter({
           component: EmptyRouterComponent,
         },
         {
-          path: 'mr/:mrid',
+          path: 'merge_requests/:mrid',
           component: EmptyRouterComponent,
         },
       ],
@@ -87,6 +87,71 @@ router.beforeEach((to, from, next) => {
           flash('Error while loading the branch files. Please try again.', 'alert', document, null, false, true);
           throw e;
         });
+      } else if (to.params.mrid) {
+        store.dispatch('getMergeRequestData', {
+          projectId: fullProjectId,
+          mergeRequestId: to.params.mrid,
+        })
+        .then((mr) => {
+          store.dispatch('getBranchData', {
+            projectId: fullProjectId,
+            branchId: mr.source_branch,
+          });
+
+          store.dispatch('getTreeData', {
+            projectId: fullProjectId,
+            branch: mr.source_branch,
+            endpoint: `/tree/${mr.source_branch}`,
+          })
+          .then(() => {
+            const treeEntry = getTreeEntry(store, `${to.params.namespace}/${to.params.project}/${mr.source_branch}`, '/');
+            if (treeEntry) {
+              store.dispatch('handleTreeEntryAction', treeEntry);
+            }
+
+            store.dispatch('getMergeRequestChanges', {
+              projectId: fullProjectId,
+              mergeRequestId: to.params.mrid,
+            })
+            .then((mrChanges) => {
+              mrChanges.changes.forEach((change) => {
+                console.log('CHANGE : ', change);
+
+                const changeTreeEntry = getTreeEntry(store, `${to.params.namespace}/${to.params.project}/${mr.source_branch}`, change.new_path);
+
+                console.log('Tree ENtry for the change ' , changeTreeEntry);
+
+                if (changeTreeEntry) {
+                  store.dispatch('handleTreeEntryAction', changeTreeEntry);
+                }
+              });
+            })
+            .catch((e) => {
+              flash('Error while loading the merge request changes. Please try again.');
+              throw e;
+            });
+
+            store.dispatch('getMergeRequestNotes', {
+              projectId: fullProjectId,
+              mergeRequestId: to.params.mrid,
+            })
+            .then((mrNotes) => {
+              console.log('NOTES : ', mrNotes);
+            })
+            .catch((e) => {
+              flash('Error while loading the merge request notes. Please try again.');
+              throw e;
+            });
+
+          })
+          .catch((e) => {
+            flash('Error while loading the branch files. Please try again.');
+            throw e;
+          });
+        })
+        .catch((e) => {
+          throw e;
+        });
       }
     })
     .catch((e) => {
@@ -98,4 +163,6 @@ router.beforeEach((to, from, next) => {
   next();
 });
 
+
+
 export default router;

app/assets/javascripts/ide/services/index.js

@@ -26,6 +26,15 @@ export default {
   getProjectData(namespace, project) {
     return Api.project(`${namespace}/${project}`);
   },
+  getProjectMergeRequestData(projectId, mergeRequestId) {
+    return Api.mergeRequest(projectId, mergeRequestId);
+  },
+  getProjectMergeRequestChanges(projectId, mergeRequestId) {
+    return Api.mergeRequestChanges(projectId, mergeRequestId);
+  },
+  getProjectMergeRequestNotes(projectId, mergeRequestId) {
+    return Api.mergeRequestNotes(projectId, mergeRequestId);
+  },
   getBranchData(projectId, currentBranchId) {
     return Api.branchSingle(projectId, currentBranchId);
   },

app/assets/javascripts/ide/stores/actions.js

@@ -193,4 +193,5 @@ export const scrollToTab = () => {
 export * from './actions/tree';
 export * from './actions/file';
 export * from './actions/project';
+export * from './actions/merge_request';
 export * from './actions/branch';

app/assets/javascripts/ide/stores/actions/merge_request.js

+import service from '../../services';
+import flash from '../../../flash';
+import * as types from '../mutation_types';
+
+// eslint-disable-next-line import/prefer-default-export
+export const getMergeRequestData = (
+  { commit, state, dispatch },
+  { projectId, mergeRequestId, force = false } = {},
+) =>
+  new Promise((resolve, reject) => {
+    if (!state.projects[projectId].mergeRequests[mergeRequestId] || force) {
+      service
+        .getProjectMergeRequestData(projectId, mergeRequestId)
+        .then(res => res.data)
+        .then((data) => {
+          commit(types.SET_MERGE_REQUEST, {
+            projectPath: projectId,
+            mergeRequestId,
+            mergeRequest: data,
+          });
+          if (!state.currentMergeRequestId) {
+            commit(
+              types.SET_CURRENT_MERGE_REQUEST,
+              `${projectId}/${mergeRequestId}`,
+            );
+          }
+          resolve(data);
+        })
+        .catch(() => {
+          flash('Error loading merge request data. Please try again.');
+          reject(new Error(`Merge Request not loaded ${projectId}`));
+        });
+    } else {
+      resolve(state.projects[projectId].mergeRequests[mergeRequestId]);
+    }
+  });
+
+// eslint-disable-next-line import/prefer-default-export
+export const getMergeRequestChanges = (
+  { commit, state, dispatch },
+  { projectId, mergeRequestId, force = false } = {},
+) =>
+  new Promise((resolve, reject) => {
+    if (!state.projects[projectId].mergeRequests[mergeRequestId].changes || force) {
+      service
+        .getProjectMergeRequestChanges(projectId, mergeRequestId)
+        .then(res => res.data)
+        .then((data) => {
+          commit(types.SET_MERGE_REQUEST_CHANGES, {
+            projectPath: projectId,
+            mergeRequestId,
+            changes: data,
+          });
+          resolve(data);
+        })
+        .catch(() => {
+          flash('Error loading merge request changes. Please try again.');
+          reject(new Error(`Merge Request Changes not loaded ${projectId}`));
+        });
+    } else {
+      resolve(state.projects[projectId].mergeRequests[mergeRequestId].changes);
+    }
+  });
+
+// eslint-disable-next-line import/prefer-default-export
+export const getMergeRequestNotes = (
+  { commit, state, dispatch },
+  { projectId, mergeRequestId, force = false } = {},
+) =>
+  new Promise((resolve, reject) => {
+    if (!state.projects[projectId].mergeRequests[mergeRequestId].notes || force) {
+      service
+        .getProjectMergeRequestNotes(projectId, mergeRequestId)
+        .then(res => res.data)
+        .then((data) => {
+          commit(types.SET_MERGE_REQUEST_NOTES, {
+            projectPath: projectId,
+            mergeRequestId,
+            notes: data,
+          });
+          resolve(data);
+        })
+        .catch(() => {
+          flash('Error loading merge request notes. Please try again.');
+          reject(new Error(`Merge Request Notes not loaded ${projectId}`));
+        });
+    } else {
+      resolve(state.projects[projectId].mergeRequests[mergeRequestId].notes);
+    }
+  });

app/assets/javascripts/ide/stores/mutation_types.js

@@ -12,6 +12,12 @@ export const SET_PROJECT = 'SET_PROJECT';
 export const SET_CURRENT_PROJECT = 'SET_CURRENT_PROJECT';
 export const TOGGLE_PROJECT_OPEN = 'TOGGLE_PROJECT_OPEN';
 
+// Merge Request Mutation Types
+export const SET_MERGE_REQUEST = 'SET_MERGE_REQUEST';
+export const SET_CURRENT_MERGE_REQUEST = 'SET_CURRENT_MERGE_REQUEST';
+export const SET_MERGE_REQUEST_CHANGES = 'SET_MERGE_REQUEST_CHANGES';
+export const SET_MERGE_REQUEST_NOTES = 'SET_MERGE_REQUEST_NOTES';
+
 // Branch Mutation Types
 export const SET_BRANCH = 'SET_BRANCH';
 export const SET_BRANCH_WORKING_REFERENCE = 'SET_BRANCH_WORKING_REFERENCE';

app/assets/javascripts/ide/stores/mutations.js

 import * as types from './mutation_types';
 import projectMutations from './mutations/project';
+import mergeRequestMutation from './mutations/merge_request';
 import fileMutations from './mutations/file';
 import treeMutations from './mutations/tree';
 import branchMutations from './mutations/branch';
@@ -64,6 +65,7 @@ export default {
     });
   },
   ...projectMutations,
+  ...mergeRequestMutation,
   ...fileMutations,
   ...treeMutations,
   ...branchMutations,

app/assets/javascripts/ide/stores/mutations/merge_request.js

+import * as types from '../mutation_types';
+
+export default {
+  [types.SET_CURRENT_MERGE_REQUEST](state, currentMergeRequestId) {
+    Object.assign(state, {
+      currentMergeRequestId,
+    });
+  },
+  [types.SET_MERGE_REQUEST](state, { projectPath, mergeRequestId, mergeRequest }) {
+    // Add client side properties
+    Object.assign(mergeRequest, {
+      active: true,
+    });
+
+    Object.assign(state.projects[projectPath], {
+      mergeRequests: {
+        [mergeRequestId]: mergeRequest,
+      },
+    });
+  },
+  [types.SET_MERGE_REQUEST_CHANGES](state, { projectPath, mergeRequestId, changes }) {
+    Object.assign(state.projects[projectPath].mergeRequests[mergeRequestId], {
+      changes,
+    });
+  },
+  [types.SET_MERGE_REQUEST_NOTES](state, { projectPath, mergeRequestId, notes }) {
+    Object.assign(state.projects[projectPath].mergeRequests[mergeRequestId], {
+      notes,
+    });
+  },
+};

app/assets/javascripts/ide/stores/mutations/project.js

@@ -11,6 +11,7 @@ export default {
     Object.assign(project, {
       tree: [],
       branches: {},
+      mergeRequests: {},
       active: true,
     });
 

app/assets/javascripts/ide/stores/state.js

@@ -2,6 +2,7 @@ export default () => ({
   canCommit: false,
   currentProjectId: '',
   currentBranchId: '',
+  currentMergeRequestId: '',
   currentBlobView: 'repo-editor',
   discardPopupOpen: false,
   editMode: true,