Merge branch 'ide-more-error-improvements' into 'master'

Improve error messaging across various IDE actions

See merge request gitlab-org/gitlab-ce!20241

12 files changed, 489 insertions, 349 deletions

diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue
index e7408264c80..acbc98b7a7b 100644
--- a/app/assets/javascripts/ide/components/error_message.vue
+++ b/app/assets/javascripts/ide/components/error_message.vue
@@ -24,8 +24,8 @@ export default {
 
       this.isLoading = true;
 
-      this.$store
-        .dispatch(this.message.action, this.message.actionPayload)
+      this.message
+        .action(this.message.actionPayload)
         .then(() => {
           this.isLoading = false;
         })
diff --git a/app/assets/javascripts/ide/services/index.js b/app/assets/javascripts/ide/services/index.js
index 5e642067141..3e939f0c1a3 100644
--- a/app/assets/javascripts/ide/services/index.js
+++ b/app/assets/javascripts/ide/services/index.js
@@ -1,16 +1,11 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
 import axios from '~/lib/utils/axios_utils';
 import Api from '~/api';
 
-Vue.use(VueResource);
-
 export default {
-  getTreeData(endpoint) {
-    return Vue.http.get(endpoint, { params: { format: 'json' } });
-  },
   getFileData(endpoint) {
-    return Vue.http.get(endpoint, { params: { format: 'json', viewer: 'none' } });
+    return axios.get(endpoint, {
+      params: { format: 'json', viewer: 'none' },
+    });
   },
   getRawFileData(file) {
     if (file.tempFile) {
@@ -21,7 +16,11 @@ export default {
       return Promise.resolve(file.raw);
     }
 
-    return Vue.http.get(file.rawPath, { params: { format: 'json' } }).then(res => res.text());
+    return axios
+      .get(file.rawPath, {
+        params: { format: 'json' },
+      })
+      .then(({ data }) => data);
   },
   getBaseRawFileData(file, sha) {
     if (file.tempFile) {
@@ -32,11 +31,11 @@ export default {
       return Promise.resolve(file.baseRaw);
     }
 
-    return Vue.http
+    return axios
       .get(file.rawPath.replace(`/raw/${file.branchId}/${file.path}`, `/raw/${sha}/${file.path}`), {
         params: { format: 'json' },
       })
-      .then(res => res.text());
+      .then(({ data }) => data);
   },
   getProjectData(namespace, project) {
     return Api.project(`${namespace}/${project}`);
@@ -53,21 +52,9 @@ export default {
   getBranchData(projectId, currentBranchId) {
     return Api.branchSingle(projectId, currentBranchId);
   },
-  createBranch(projectId, payload) {
-    const url = Api.buildUrl(Api.createBranchPath).replace(':id', projectId);
-
-    return Vue.http.post(url, payload);
-  },
   commit(projectId, payload) {
     return Api.commitMultiple(projectId, payload);
   },
-  getTreeLastCommit(endpoint) {
-    return Vue.http.get(endpoint, {
-      params: {
-        format: 'json',
-      },
-    });
-  },
   getFiles(projectUrl, branchId) {
     const url = `${projectUrl}/files/${branchId}`;
     return axios.get(url, { params: { format: 'json' } });
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 29995a29d1a..6c0887e11ee 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -1,5 +1,5 @@
-import { normalizeHeaders } from '~/lib/utils/common_utils';
-import flash from '~/flash';
+import { __ } from '../../../locale';
+import { normalizeHeaders } from '../../../lib/utils/common_utils';
 import eventHub from '../../eventhub';
 import service from '../../services';
 import * as types from '../mutation_types';
@@ -66,13 +66,10 @@ export const getFileData = ({ state, commit, dispatch }, { path, makeFileActive
     .getFileData(
       `${gon.relative_url_root ? gon.relative_url_root : ''}${file.url.replace('/-/', '/')}`,
     )
-    .then(res => {
-      const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
-      setPageTitle(pageTitle);
+    .then(({ data, headers }) => {
+      const normalizedHeaders = normalizeHeaders(headers);
+      setPageTitle(decodeURI(normalizedHeaders['PAGE-TITLE']));
 
-      return res.json();
-    })
-    .then(data => {
       commit(types.SET_FILE_DATA, { data, file });
       commit(types.TOGGLE_FILE_OPEN, path);
       if (makeFileActive) dispatch('setFileActive', path);
@@ -80,7 +77,13 @@ export const getFileData = ({ state, commit, dispatch }, { path, makeFileActive
     })
     .catch(() => {
       commit(types.TOGGLE_LOADING, { entry: file });
-      flash('Error loading file data. Please try again.', 'alert', document, null, false, true);
+      dispatch('setErrorMessage', {
+        text: __('An error occured whilst loading the file.'),
+        action: payload =>
+          dispatch('getFileData', payload).then(() => dispatch('setErrorMessage', null)),
+        actionText: __('Please try again'),
+        actionPayload: { path, makeFileActive },
+      });
     });
 };
 
@@ -88,7 +91,7 @@ export const setFileMrChange = ({ commit }, { file, mrChange }) => {
   commit(types.SET_FILE_MERGE_REQUEST_CHANGE, { file, mrChange });
 };
 
-export const getRawFileData = ({ state, commit }, { path, baseSha }) => {
+export const getRawFileData = ({ state, commit, dispatch }, { path, baseSha }) => {
   const file = state.entries[path];
   return new Promise((resolve, reject) => {
     service
@@ -113,7 +116,13 @@ export const getRawFileData = ({ state, commit }, { path, baseSha }) => {
         }
       })
       .catch(() => {
-        flash('Error loading file content. Please try again.');
+        dispatch('setErrorMessage', {
+          text: __('An error occured whilst loading the file content.'),
+          action: payload =>
+            dispatch('getRawFileData', payload).then(() => dispatch('setErrorMessage', null)),
+          actionText: __('Please try again'),
+          actionPayload: { path, baseSha },
+        });
         reject();
       });
   });
diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js
index edb20ff96fc..4aa151abcb7 100644
--- a/app/assets/javascripts/ide/stores/actions/merge_request.js
+++ b/app/assets/javascripts/ide/stores/actions/merge_request.js
@@ -1,17 +1,16 @@
-import flash from '~/flash';
+import { __ } from '../../../locale';
 import service from '../../services';
 import * as types from '../mutation_types';
 
 export const getMergeRequestData = (
-  { commit, state },
+  { commit, dispatch, state },
   { 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 => {
+        .then(({ data }) => {
           commit(types.SET_MERGE_REQUEST, {
             projectPath: projectId,
             mergeRequestId,
@@ -21,7 +20,15 @@ export const getMergeRequestData = (
           resolve(data);
         })
         .catch(() => {
-          flash('Error loading merge request data. Please try again.');
+          dispatch('setErrorMessage', {
+            text: __('An error occured whilst loading the merge request.'),
+            action: payload =>
+              dispatch('getMergeRequestData', payload).then(() =>
+                dispatch('setErrorMessage', null),
+              ),
+            actionText: __('Please try again'),
+            actionPayload: { projectId, mergeRequestId, force },
+          });
           reject(new Error(`Merge Request not loaded ${projectId}`));
         });
     } else {
@@ -30,15 +37,14 @@ export const getMergeRequestData = (
   });
 
 export const getMergeRequestChanges = (
-  { commit, state },
+  { commit, dispatch, state },
   { projectId, mergeRequestId, force = false } = {},
 ) =>
   new Promise((resolve, reject) => {
     if (!state.projects[projectId].mergeRequests[mergeRequestId].changes.length || force) {
       service
         .getProjectMergeRequestChanges(projectId, mergeRequestId)
-        .then(res => res.data)
-        .then(data => {
+        .then(({ data }) => {
           commit(types.SET_MERGE_REQUEST_CHANGES, {
             projectPath: projectId,
             mergeRequestId,
@@ -47,7 +53,15 @@ export const getMergeRequestChanges = (
           resolve(data);
         })
         .catch(() => {
-          flash('Error loading merge request changes. Please try again.');
+          dispatch('setErrorMessage', {
+            text: __('An error occured whilst loading the merge request changes.'),
+            action: payload =>
+              dispatch('getMergeRequestChanges', payload).then(() =>
+                dispatch('setErrorMessage', null),
+              ),
+            actionText: __('Please try again'),
+            actionPayload: { projectId, mergeRequestId, force },
+          });
           reject(new Error(`Merge Request Changes not loaded ${projectId}`));
         });
     } else {
@@ -56,7 +70,7 @@ export const getMergeRequestChanges = (
   });
 
 export const getMergeRequestVersions = (
-  { commit, state },
+  { commit, dispatch, state },
   { projectId, mergeRequestId, force = false } = {},
 ) =>
   new Promise((resolve, reject) => {
@@ -73,7 +87,15 @@ export const getMergeRequestVersions = (
           resolve(data);
         })
         .catch(() => {
-          flash('Error loading merge request versions. Please try again.');
+          dispatch('setErrorMessage', {
+            text: __('An error occured whilst loading the merge request version data.'),
+            action: payload =>
+              dispatch('getMergeRequestVersions', payload).then(() =>
+                dispatch('setErrorMessage', null),
+              ),
+            actionText: __('Please try again'),
+            actionPayload: { projectId, mergeRequestId, force },
+          });
           reject(new Error(`Merge Request Versions not loaded ${projectId}`));
         });
     } else {
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index ab5cd8e4742..501e25d452b 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -104,7 +104,7 @@ export const createNewBranchFromDefault = ({ state, dispatch, getters }, branch)
     .catch(() => {
       dispatch('setErrorMessage', {
         text: __('An error occured creating the new branch.'),
-        action: 'createNewBranchFromDefault',
+        action: payload => dispatch('createNewBranchFromDefault', payload),
         actionText: __('Please try again'),
         actionPayload: branch,
       });
@@ -119,7 +119,7 @@ export const showBranchNotFoundError = ({ dispatch }, branchId) => {
       },
       false,
     ),
-    action: 'createNewBranchFromDefault',
+    action: payload => dispatch('createNewBranchFromDefault', payload),
     actionText: __('Create branch'),
     actionPayload: branchId,
   });
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index dcdd900fc7e..ffaaaabff17 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -1,9 +1,6 @@
-import { normalizeHeaders } from '~/lib/utils/common_utils';
-import flash from '~/flash';
 import { __ } from '../../../locale';
 import service from '../../services';
 import * as types from '../mutation_types';
-import { findEntry } from '../utils';
 import FilesDecoratorWorker from '../workers/files_decorator_worker';
 
 export const toggleTreeOpen = ({ commit }, path) => {
@@ -37,32 +34,6 @@ export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
   dispatch('showTreeEntry', row.path);
 };
 
-export const getLastCommitData = ({ state, commit, dispatch }, tree = state) => {
-  if (!tree || tree.lastCommitPath === null || !tree.lastCommitPath) return;
-
-  service
-    .getTreeLastCommit(tree.lastCommitPath)
-    .then(res => {
-      const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
-
-      commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
-
-      return res.json();
-    })
-    .then(data => {
-      data.forEach(lastCommit => {
-        const entry = findEntry(tree.tree, lastCommit.type, lastCommit.file_name);
-
-        if (entry) {
-          commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit });
-        }
-      });
-
-      dispatch('getLastCommitData', tree);
-    })
-    .catch(() => flash('Error fetching log data.', 'alert', document, null, false, true));
-};
-
 export const getFiles = ({ state, commit, dispatch }, { projectId, branchId } = {}) =>
   new Promise((resolve, reject) => {
     if (
@@ -106,14 +77,13 @@ export const getFiles = ({ state, commit, dispatch }, { projectId, branchId } =
           if (e.response.status === 404) {
             dispatch('showBranchNotFoundError', branchId);
           } else {
-            flash(
-              __('Error loading tree data. Please try again.'),
-              'alert',
-              document,
-              null,
-              false,
-              true,
-            );
+            dispatch('setErrorMessage', {
+              text: __('An error occured whilst loading all the files.'),
+              action: payload =>
+                dispatch('getFiles', payload).then(() => dispatch('setErrorMessage', null)),
+              actionText: __('Please try again'),
+              actionPayload: { projectId, branchId },
+            });
           }
           reject(e);
         });
diff --git a/spec/javascripts/ide/components/error_message_spec.js b/spec/javascripts/ide/components/error_message_spec.js
index 70d13a6ceb2..430e8e2baa3 100644
--- a/spec/javascripts/ide/components/error_message_spec.js
+++ b/spec/javascripts/ide/components/error_message_spec.js
@@ -36,13 +36,15 @@ describe('IDE error message component', () => {
   });
 
   describe('with action', () => {
+    let actionSpy;
+
     beforeEach(done => {
-      vm.message.action = 'testAction';
+      actionSpy = jasmine.createSpy('action').and.returnValue(Promise.resolve());
+
+      vm.message.action = actionSpy;
       vm.message.actionText = 'test action';
       vm.message.actionPayload = 'testActionPayload';
 
-      spyOn(vm.$store, 'dispatch').and.returnValue(Promise.resolve());
-
       vm.$nextTick(done);
     });
 
@@ -63,7 +65,7 @@ describe('IDE error message component', () => {
       vm.$el.querySelector('.flash-action').click();
 
       vm.$nextTick(() => {
-        expect(vm.$store.dispatch).toHaveBeenCalledWith('testAction', 'testActionPayload');
+        expect(actionSpy).toHaveBeenCalledWith('testActionPayload');
 
         done();
       });
@@ -74,7 +76,7 @@ describe('IDE error message component', () => {
 
       vm.$el.querySelector('.flash-action').click();
 
-      expect(vm.$store.dispatch).not.toHaveBeenCalledWith();
+      expect(actionSpy).not.toHaveBeenCalledWith();
     });
 
     it('resets isLoading after click', done => {
diff --git a/spec/javascripts/ide/components/repo_commit_section_spec.js b/spec/javascripts/ide/components/repo_commit_section_spec.js
index 6bf309fb4bf..30cd92b2ca4 100644
--- a/spec/javascripts/ide/components/repo_commit_section_spec.js
+++ b/spec/javascripts/ide/components/repo_commit_section_spec.js
@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import store from '~/ide/stores';
-import service from '~/ide/services';
 import router from '~/ide/ide_router';
 import repoCommitSection from '~/ide/components/repo_commit_section.vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
@@ -68,23 +67,6 @@ describe('RepoCommitSection', () => {
 
     vm.$mount();
 
-    spyOn(service, 'getTreeData').and.returnValue(
-      Promise.resolve({
-        headers: {
-          'page-title': 'test',
-        },
-        json: () =>
-          Promise.resolve({
-            last_commit_path: 'last_commit_path',
-            parent_tree_url: 'parent_tree_url',
-            path: '/',
-            trees: [{ name: 'tree' }],
-            blobs: [{ name: 'blob' }],
-            submodules: [{ name: 'submodule' }],
-          }),
-      }),
-    );
-
     Vue.nextTick(done);
   });
 
diff --git a/spec/javascripts/ide/stores/actions/file_spec.js b/spec/javascripts/ide/stores/actions/file_spec.js
index 5746683917e..58d3ffc6d94 100644
--- a/spec/javascripts/ide/stores/actions/file_spec.js
+++ b/spec/javascripts/ide/stores/actions/file_spec.js
@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import store from '~/ide/stores';
 import * as actions from '~/ide/stores/actions/file';
 import * as types from '~/ide/stores/mutation_types';
@@ -9,11 +11,16 @@ import { file, resetStore } from '../../helpers';
 import testAction from '../../../helpers/vuex_action_helper';
 
 describe('IDE store file actions', () => {
+  let mock;
+
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
     spyOn(router, 'push');
   });
 
   afterEach(() => {
+    mock.restore();
     resetStore(store);
   });
 
@@ -183,94 +190,125 @@ describe('IDE store file actions', () => {
     let localFile;
 
     beforeEach(() => {
-      spyOn(service, 'getFileData').and.returnValue(
-        Promise.resolve({
-          headers: {
-            'page-title': 'testing getFileData',
-          },
-          json: () =>
-            Promise.resolve({
-              blame_path: 'blame_path',
-              commits_path: 'commits_path',
-              permalink: 'permalink',
-              raw_path: 'raw_path',
-              binary: false,
-              html: '123',
-              render_error: '',
-            }),
-        }),
-      );
+      spyOn(service, 'getFileData').and.callThrough();
 
       localFile = file(`newCreate-${Math.random()}`);
-      localFile.url = 'getFileDataURL';
+      localFile.url = `${gl.TEST_HOST}/getFileDataURL`;
       store.state.entries[localFile.path] = localFile;
     });
 
-    it('calls the service', done => {
-      store
-        .dispatch('getFileData', { path: localFile.path })
-        .then(() => {
-          expect(service.getFileData).toHaveBeenCalledWith('getFileDataURL');
+    describe('success', () => {
+      beforeEach(() => {
+        mock.onGet(`${gl.TEST_HOST}/getFileDataURL`).replyOnce(
+          200,
+          {
+            blame_path: 'blame_path',
+            commits_path: 'commits_path',
+            permalink: 'permalink',
+            raw_path: 'raw_path',
+            binary: false,
+            html: '123',
+            render_error: '',
+          },
+          {
+            'page-title': 'testing getFileData',
+          },
+        );
+      });
 
-          done();
-        })
-        .catch(done.fail);
-    });
+      it('calls the service', done => {
+        store
+          .dispatch('getFileData', { path: localFile.path })
+          .then(() => {
+            expect(service.getFileData).toHaveBeenCalledWith(`${gl.TEST_HOST}/getFileDataURL`);
 
-    it('sets the file data', done => {
-      store
-        .dispatch('getFileData', { path: localFile.path })
-        .then(() => {
-          expect(localFile.blamePath).toBe('blame_path');
+            done();
+          })
+          .catch(done.fail);
+      });
 
-          done();
-        })
-        .catch(done.fail);
-    });
+      it('sets the file data', done => {
+        store
+          .dispatch('getFileData', { path: localFile.path })
+          .then(() => {
+            expect(localFile.blamePath).toBe('blame_path');
 
-    it('sets document title', done => {
-      store
-        .dispatch('getFileData', { path: localFile.path })
-        .then(() => {
-          expect(document.title).toBe('testing getFileData');
+            done();
+          })
+          .catch(done.fail);
+      });
 
-          done();
-        })
-        .catch(done.fail);
-    });
+      it('sets document title', done => {
+        store
+          .dispatch('getFileData', { path: localFile.path })
+          .then(() => {
+            expect(document.title).toBe('testing getFileData');
 
-    it('sets the file as active', done => {
-      store
-        .dispatch('getFileData', { path: localFile.path })
-        .then(() => {
-          expect(localFile.active).toBeTruthy();
+            done();
+          })
+          .catch(done.fail);
+      });
 
-          done();
-        })
-        .catch(done.fail);
-    });
+      it('sets the file as active', done => {
+        store
+          .dispatch('getFileData', { path: localFile.path })
+          .then(() => {
+            expect(localFile.active).toBeTruthy();
 
-    it('sets the file not as active if we pass makeFileActive false', done => {
-      store
-        .dispatch('getFileData', { path: localFile.path, makeFileActive: false })
-        .then(() => {
-          expect(localFile.active).toBeFalsy();
+            done();
+          })
+          .catch(done.fail);
+      });
 
-          done();
-        })
-        .catch(done.fail);
+      it('sets the file not as active if we pass makeFileActive false', done => {
+        store
+          .dispatch('getFileData', { path: localFile.path, makeFileActive: false })
+          .then(() => {
+            expect(localFile.active).toBeFalsy();
+
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      it('adds the file to open files', done => {
+        store
+          .dispatch('getFileData', { path: localFile.path })
+          .then(() => {
+            expect(store.state.openFiles.length).toBe(1);
+            expect(store.state.openFiles[0].name).toBe(localFile.name);
+
+            done();
+          })
+          .catch(done.fail);
+      });
     });
 
-    it('adds the file to open files', done => {
-      store
-        .dispatch('getFileData', { path: localFile.path })
-        .then(() => {
-          expect(store.state.openFiles.length).toBe(1);
-          expect(store.state.openFiles[0].name).toBe(localFile.name);
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(`${gl.TEST_HOST}/getFileDataURL`).networkError();
+      });
 
-          done();
-        })
-        .catch(done.fail);
+      it('dispatches error action', done => {
+        const dispatch = jasmine.createSpy('dispatch');
+
+        actions
+          .getFileData({ state: store.state, commit() {}, dispatch }, { path: localFile.path })
+          .then(() => {
+            expect(dispatch).toHaveBeenCalledWith('setErrorMessage', {
+              text: 'An error occured whilst loading the file.',
+              action: jasmine.any(Function),
+              actionText: 'Please try again',
+              actionPayload: {
+                path: localFile.path,
+                makeFileActive: true,
+              },
+            });
+
+            done();
+          })
+          .catch(done.fail);
+      });
     });
   });
 
@@ -278,48 +316,84 @@ describe('IDE store file actions', () => {
     let tmpFile;
 
     beforeEach(() => {
-      spyOn(service, 'getRawFileData').and.returnValue(Promise.resolve('raw'));
+      spyOn(service, 'getRawFileData').and.callThrough();
 
       tmpFile = file('tmpFile');
       store.state.entries[tmpFile.path] = tmpFile;
     });
 
-    it('calls getRawFileData service method', done => {
-      store
-        .dispatch('getRawFileData', { path: tmpFile.path })
-        .then(() => {
-          expect(service.getRawFileData).toHaveBeenCalledWith(tmpFile);
+    describe('success', () => {
+      beforeEach(() => {
+        mock.onGet(/(.*)/).replyOnce(200, 'raw');
+      });
 
-          done();
-        })
-        .catch(done.fail);
-    });
+      it('calls getRawFileData service method', done => {
+        store
+          .dispatch('getRawFileData', { path: tmpFile.path })
+          .then(() => {
+            expect(service.getRawFileData).toHaveBeenCalledWith(tmpFile);
 
-    it('updates file raw data', done => {
-      store
-        .dispatch('getRawFileData', { path: tmpFile.path })
-        .then(() => {
-          expect(tmpFile.raw).toBe('raw');
+            done();
+          })
+          .catch(done.fail);
+      });
 
-          done();
-        })
-        .catch(done.fail);
-    });
+      it('updates file raw data', done => {
+        store
+          .dispatch('getRawFileData', { path: tmpFile.path })
+          .then(() => {
+            expect(tmpFile.raw).toBe('raw');
 
-    it('calls also getBaseRawFileData service method', done => {
-      spyOn(service, 'getBaseRawFileData').and.returnValue(Promise.resolve('baseraw'));
+            done();
+          })
+          .catch(done.fail);
+      });
 
-      tmpFile.mrChange = { new_file: false };
+      it('calls also getBaseRawFileData service method', done => {
+        spyOn(service, 'getBaseRawFileData').and.returnValue(Promise.resolve('baseraw'));
 
-      store
-        .dispatch('getRawFileData', { path: tmpFile.path, baseSha: 'SHA' })
-        .then(() => {
-          expect(service.getBaseRawFileData).toHaveBeenCalledWith(tmpFile, 'SHA');
-          expect(tmpFile.baseRaw).toBe('baseraw');
+        tmpFile.mrChange = { new_file: false };
 
-          done();
-        })
-        .catch(done.fail);
+        store
+          .dispatch('getRawFileData', { path: tmpFile.path, baseSha: 'SHA' })
+          .then(() => {
+            expect(service.getBaseRawFileData).toHaveBeenCalledWith(tmpFile, 'SHA');
+            expect(tmpFile.baseRaw).toBe('baseraw');
+
+            done();
+          })
+          .catch(done.fail);
+      });
+    });
+
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(/(.*)/).networkError();
+      });
+
+      it('dispatches error action', done => {
+        const dispatch = jasmine.createSpy('dispatch');
+
+        actions
+          .getRawFileData(
+            { state: store.state, commit() {}, dispatch },
+            { path: tmpFile.path, baseSha: tmpFile.baseSha },
+          )
+          .then(done.fail)
+          .catch(() => {
+            expect(dispatch).toHaveBeenCalledWith('setErrorMessage', {
+              text: 'An error occured whilst loading the file content.',
+              action: jasmine.any(Function),
+              actionText: 'Please try again',
+              actionPayload: {
+                path: tmpFile.path,
+                baseSha: tmpFile.baseSha,
+              },
+            });
+
+            done();
+          });
+      });
     });
   });
 
diff --git a/spec/javascripts/ide/stores/actions/merge_request_spec.js b/spec/javascripts/ide/stores/actions/merge_request_spec.js
index b4ec4a0b173..c99ccc70c6a 100644
--- a/spec/javascripts/ide/stores/actions/merge_request_spec.js
+++ b/spec/javascripts/ide/stores/actions/merge_request_spec.js
@@ -1,110 +1,239 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import store from '~/ide/stores';
+import {
+  getMergeRequestData,
+  getMergeRequestChanges,
+  getMergeRequestVersions,
+} from '~/ide/stores/actions/merge_request';
 import service from '~/ide/services';
 import { resetStore } from '../../helpers';
 
 describe('IDE store merge request actions', () => {
+  let mock;
+
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
     store.state.projects.abcproject = {
       mergeRequests: {},
     };
   });
 
   afterEach(() => {
+    mock.restore();
     resetStore(store);
   });
 
   describe('getMergeRequestData', () => {
-    beforeEach(() => {
-      spyOn(service, 'getProjectMergeRequestData').and.returnValue(
-        Promise.resolve({ data: { title: 'mergerequest' } }),
-      );
+    describe('success', () => {
+      beforeEach(() => {
+        spyOn(service, 'getProjectMergeRequestData').and.callThrough();
+
+        mock
+          .onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1/)
+          .reply(200, { title: 'mergerequest' });
+      });
+
+      it('calls getProjectMergeRequestData service method', done => {
+        store
+          .dispatch('getMergeRequestData', { projectId: 'abcproject', mergeRequestId: 1 })
+          .then(() => {
+            expect(service.getProjectMergeRequestData).toHaveBeenCalledWith('abcproject', 1);
+
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      it('sets the Merge Request Object', done => {
+        store
+          .dispatch('getMergeRequestData', { projectId: 'abcproject', mergeRequestId: 1 })
+          .then(() => {
+            expect(store.state.projects.abcproject.mergeRequests['1'].title).toBe('mergerequest');
+            expect(store.state.currentMergeRequestId).toBe(1);
+
+            done();
+          })
+          .catch(done.fail);
+      });
     });
 
-    it('calls getProjectMergeRequestData service method', done => {
-      store
-        .dispatch('getMergeRequestData', { projectId: 'abcproject', mergeRequestId: 1 })
-        .then(() => {
-          expect(service.getProjectMergeRequestData).toHaveBeenCalledWith('abcproject', 1);
-
-          done();
-        })
-        .catch(done.fail);
-    });
-
-    it('sets the Merge Request Object', done => {
-      store
-        .dispatch('getMergeRequestData', { projectId: 'abcproject', mergeRequestId: 1 })
-        .then(() => {
-          expect(store.state.projects.abcproject.mergeRequests['1'].title).toBe('mergerequest');
-          expect(store.state.currentMergeRequestId).toBe(1);
-
-          done();
-        })
-        .catch(done.fail);
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1/).networkError();
+      });
+
+      it('dispatches error action', done => {
+        const dispatch = jasmine.createSpy('dispatch');
+
+        getMergeRequestData(
+          {
+            commit() {},
+            dispatch,
+            state: store.state,
+          },
+          { projectId: 'abcproject', mergeRequestId: 1 },
+        )
+          .then(done.fail)
+          .catch(() => {
+            expect(dispatch).toHaveBeenCalledWith('setErrorMessage', {
+              text: 'An error occured whilst loading the merge request.',
+              action: jasmine.any(Function),
+              actionText: 'Please try again',
+              actionPayload: {
+                projectId: 'abcproject',
+                mergeRequestId: 1,
+                force: false,
+              },
+            });
+
+            done();
+          });
+      });
     });
   });
 
   describe('getMergeRequestChanges', () => {
     beforeEach(() => {
-      spyOn(service, 'getProjectMergeRequestChanges').and.returnValue(
-        Promise.resolve({ data: { title: 'mergerequest' } }),
-      );
-
       store.state.projects.abcproject.mergeRequests['1'] = { changes: [] };
     });
 
-    it('calls getProjectMergeRequestChanges service method', done => {
-      store
-        .dispatch('getMergeRequestChanges', { projectId: 'abcproject', mergeRequestId: 1 })
-        .then(() => {
-          expect(service.getProjectMergeRequestChanges).toHaveBeenCalledWith('abcproject', 1);
-
-          done();
-        })
-        .catch(done.fail);
+    describe('success', () => {
+      beforeEach(() => {
+        spyOn(service, 'getProjectMergeRequestChanges').and.callThrough();
+
+        mock
+          .onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1\/changes/)
+          .reply(200, { title: 'mergerequest' });
+      });
+
+      it('calls getProjectMergeRequestChanges service method', done => {
+        store
+          .dispatch('getMergeRequestChanges', { projectId: 'abcproject', mergeRequestId: 1 })
+          .then(() => {
+            expect(service.getProjectMergeRequestChanges).toHaveBeenCalledWith('abcproject', 1);
+
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      it('sets the Merge Request Changes Object', done => {
+        store
+          .dispatch('getMergeRequestChanges', { projectId: 'abcproject', mergeRequestId: 1 })
+          .then(() => {
+            expect(store.state.projects.abcproject.mergeRequests['1'].changes.title).toBe(
+              'mergerequest',
+            );
+            done();
+          })
+          .catch(done.fail);
+      });
     });
 
-    it('sets the Merge Request Changes Object', done => {
-      store
-        .dispatch('getMergeRequestChanges', { projectId: 'abcproject', mergeRequestId: 1 })
-        .then(() => {
-          expect(store.state.projects.abcproject.mergeRequests['1'].changes.title).toBe(
-            'mergerequest',
-          );
-          done();
-        })
-        .catch(done.fail);
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1\/changes/).networkError();
+      });
+
+      it('dispatches error action', done => {
+        const dispatch = jasmine.createSpy('dispatch');
+
+        getMergeRequestChanges(
+          {
+            commit() {},
+            dispatch,
+            state: store.state,
+          },
+          { projectId: 'abcproject', mergeRequestId: 1 },
+        )
+          .then(done.fail)
+          .catch(() => {
+            expect(dispatch).toHaveBeenCalledWith('setErrorMessage', {
+              text: 'An error occured whilst loading the merge request changes.',
+              action: jasmine.any(Function),
+              actionText: 'Please try again',
+              actionPayload: {
+                projectId: 'abcproject',
+                mergeRequestId: 1,
+                force: false,
+              },
+            });
+
+            done();
+          });
+      });
     });
   });
 
   describe('getMergeRequestVersions', () => {
     beforeEach(() => {
-      spyOn(service, 'getProjectMergeRequestVersions').and.returnValue(
-        Promise.resolve({ data: [{ id: 789 }] }),
-      );
-
       store.state.projects.abcproject.mergeRequests['1'] = { versions: [] };
     });
 
-    it('calls getProjectMergeRequestVersions service method', done => {
-      store
-        .dispatch('getMergeRequestVersions', { projectId: 'abcproject', mergeRequestId: 1 })
-        .then(() => {
-          expect(service.getProjectMergeRequestVersions).toHaveBeenCalledWith('abcproject', 1);
-
-          done();
-        })
-        .catch(done.fail);
+    describe('success', () => {
+      beforeEach(() => {
+        mock
+          .onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1\/versions/)
+          .reply(200, [{ id: 789 }]);
+        spyOn(service, 'getProjectMergeRequestVersions').and.callThrough();
+      });
+
+      it('calls getProjectMergeRequestVersions service method', done => {
+        store
+          .dispatch('getMergeRequestVersions', { projectId: 'abcproject', mergeRequestId: 1 })
+          .then(() => {
+            expect(service.getProjectMergeRequestVersions).toHaveBeenCalledWith('abcproject', 1);
+
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      it('sets the Merge Request Versions Object', done => {
+        store
+          .dispatch('getMergeRequestVersions', { projectId: 'abcproject', mergeRequestId: 1 })
+          .then(() => {
+            expect(store.state.projects.abcproject.mergeRequests['1'].versions.length).toBe(1);
+            done();
+          })
+          .catch(done.fail);
+      });
     });
 
-    it('sets the Merge Request Versions Object', done => {
-      store
-        .dispatch('getMergeRequestVersions', { projectId: 'abcproject', mergeRequestId: 1 })
-        .then(() => {
-          expect(store.state.projects.abcproject.mergeRequests['1'].versions.length).toBe(1);
-          done();
-        })
-        .catch(done.fail);
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1\/versions/).networkError();
+      });
+
+      it('dispatches error action', done => {
+        const dispatch = jasmine.createSpy('dispatch');
+
+        getMergeRequestVersions(
+          {
+            commit() {},
+            dispatch,
+            state: store.state,
+          },
+          { projectId: 'abcproject', mergeRequestId: 1 },
+        )
+          .then(done.fail)
+          .catch(() => {
+            expect(dispatch).toHaveBeenCalledWith('setErrorMessage', {
+              text: 'An error occured whilst loading the merge request version data.',
+              action: jasmine.any(Function),
+              actionText: 'Please try again',
+              actionPayload: {
+                projectId: 'abcproject',
+                mergeRequestId: 1,
+                force: false,
+              },
+            });
+
+            done();
+          });
+      });
     });
   });
 });
diff --git a/spec/javascripts/ide/stores/actions/project_spec.js b/spec/javascripts/ide/stores/actions/project_spec.js
index c1f9fc4f148..ca79edafb7e 100644
--- a/spec/javascripts/ide/stores/actions/project_spec.js
+++ b/spec/javascripts/ide/stores/actions/project_spec.js
@@ -110,7 +110,7 @@ describe('IDE store project actions', () => {
             type: 'setErrorMessage',
             payload: {
               text: "Branch <strong>master</strong> was not found in this project's repository.",
-              action: 'createNewBranchFromDefault',
+              action: jasmine.any(Function),
               actionText: 'Create branch',
               actionPayload: 'master',
             },
diff --git a/spec/javascripts/ide/stores/actions/tree_spec.js b/spec/javascripts/ide/stores/actions/tree_spec.js
index 612a439cfbf..6860e6cdb91 100644
--- a/spec/javascripts/ide/stores/actions/tree_spec.js
+++ b/spec/javascripts/ide/stores/actions/tree_spec.js
@@ -1,5 +1,4 @@
 import MockAdapter from 'axios-mock-adapter';
-import Vue from 'vue';
 import testAction from 'spec/helpers/vuex_action_helper';
 import { showTreeEntry, getFiles } from '~/ide/stores/actions/tree';
 import * as types from '~/ide/stores/mutation_types';
@@ -117,6 +116,40 @@ describe('Multi-file store tree actions', () => {
             done();
           });
       });
+
+      it('dispatches error action', done => {
+        const dispatch = jasmine.createSpy('dispatchSpy');
+
+        store.state.projects = {
+          'abc/def': {
+            web_url: `${gl.TEST_HOST}/files`,
+          },
+        };
+
+        mock.onGet(/(.*)/).replyOnce(500);
+
+        getFiles(
+          {
+            commit() {},
+            dispatch,
+            state: store.state,
+          },
+          {
+            projectId: 'abc/def',
+            branchId: 'master-testing',
+          },
+        )
+          .then(done.fail)
+          .catch(() => {
+            expect(dispatch).toHaveBeenCalledWith('setErrorMessage', {
+              text: 'An error occured whilst loading all the files.',
+              action: jasmine.any(Function),
+              actionText: 'Please try again',
+              actionPayload: { projectId: 'abc/def', branchId: 'master-testing' },
+            });
+            done();
+          });
+      });
     });
   });
 
@@ -168,72 +201,4 @@ describe('Multi-file store tree actions', () => {
       );
     });
   });
-
-  describe('getLastCommitData', () => {
-    beforeEach(() => {
-      spyOn(service, 'getTreeLastCommit').and.returnValue(
-        Promise.resolve({
-          headers: {
-            'more-logs-url': null,
-          },
-          json: () =>
-            Promise.resolve([
-              {
-                type: 'tree',
-                file_name: 'testing',
-                commit: {
-                  message: 'commit message',
-                  authored_date: '123',
-                },
-              },
-            ]),
-        }),
-      );
-
-      store.state.trees['abcproject/mybranch'] = {
-        tree: [],
-      };
-
-      projectTree = store.state.trees['abcproject/mybranch'];
-      projectTree.tree.push(file('testing', '1', 'tree'));
-      projectTree.lastCommitPath = 'lastcommitpath';
-    });
-
-    it('calls service with lastCommitPath', done => {
-      store
-        .dispatch('getLastCommitData', projectTree)
-        .then(() => {
-          expect(service.getTreeLastCommit).toHaveBeenCalledWith('lastcommitpath');
-
-          done();
-        })
-        .catch(done.fail);
-    });
-
-    it('updates trees last commit data', done => {
-      store
-        .dispatch('getLastCommitData', projectTree)
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(projectTree.tree[0].lastCommit.message).toBe('commit message');
-
-          done();
-        })
-        .catch(done.fail);
-    });
-
-    it('does not update entry if not found', done => {
-      projectTree.tree[0].name = 'a';
-
-      store
-        .dispatch('getLastCommitData', projectTree)
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(projectTree.tree[0].lastCommit.message).not.toBe('commit message');
-
-          done();
-        })
-        .catch(done.fail);
-    });
-  });
 });