Improve error messaging across various IDE actions

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;
         })

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

 import { normalizeHeaders } from '~/lib/utils/common_utils';
-import flash from '~/flash';
+import { __ } from '../../../locale';
 import eventHub from '../../eventhub';
 import service from '../../services';
 import * as types from '../mutation_types';
@@ -80,7 +80,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 },
+      });
     });
 };
 
@@ -113,7 +119,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();
       });
   });

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

-import flash from '~/flash';
 import service from '../../services';
 import * as types from '../mutation_types';
 
@@ -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 {
@@ -47,7 +54,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 {
@@ -73,7 +88,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 {

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,
   });

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

-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('getRawFileData', payload).then(() => dispatch('setErrorMessage', null)),
+              actionText: __('Please try again'),
+              actionPayload: { path, baseSha },
+            });
           }
           reject(e);
         });

spec/javascripts/ide/stores/actions/tree_spec.js

@@ -168,72 +168,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);
-    });
-  });
 });