Improve error message across IDE store modules

Closes #47323

3 files changed, 74 insertions, 19 deletions

diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js
index 69b6fe2985b..de55b8226f1 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js
@@ -198,11 +198,18 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
       if (err.response.status === 400) {
         $('#ide-create-branch-modal').modal('show');
       } else {
-        let errMsg = __('Error committing changes. Please try again.');
-        if (err.response.data && err.response.data.message) {
-          errMsg += ` (${stripHtml(err.response.data.message)})`;
-        }
-        flash(errMsg, 'alert', document, null, false, true);
+        dispatch(
+          'setErrorMessage',
+          {
+            text: __('An error accured whilst committing your changes.'),
+            action: () =>
+              dispatch('commitChanges').then(() =>
+                dispatch('setErrorMessage', null, { root: true }),
+              ),
+            actionText: __('Please try again'),
+          },
+          { root: true },
+        );
         window.dispatchEvent(new Event('resize'));
       }
 
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
index 551dd322c9b..cdd8076952f 100644
--- a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
@@ -1,6 +1,5 @@
 import { __ } from '../../../../locale';
 import Api from '../../../../api';
-import flash from '../../../../flash';
 import router from '../../../ide_router';
 import { scopes } from './constants';
 import * as types from './mutation_types';
@@ -8,8 +7,20 @@ import * as rootTypes from '../../mutation_types';
 
 export const requestMergeRequests = ({ commit }, type) =>
   commit(types.REQUEST_MERGE_REQUESTS, type);
-export const receiveMergeRequestsError = ({ commit }, type) => {
-  flash(__('Error loading merge requests.'));
+export const receiveMergeRequestsError = ({ commit, dispatch }, { type, search }) => {
+  dispatch(
+    'setErrorMessage',
+    {
+      text: __('Error loading merge requests.'),
+      action: payload =>
+        dispatch('fetchMergeRequests', payload).then(() =>
+          dispatch('setErrorMessage', null, { root: true }),
+        ),
+      actionText: __('Please try again'),
+      actionPayload: { type, search },
+    },
+    { root: true },
+  );
   commit(types.RECEIVE_MERGE_REQUESTS_ERROR, type);
 };
 export const receiveMergeRequestsSuccess = ({ commit }, { type, data }) =>
@@ -22,7 +33,7 @@ export const fetchMergeRequests = ({ dispatch, state: { state } }, { type, searc
 
   Api.mergeRequests({ scope, state, search })
     .then(({ data }) => dispatch('receiveMergeRequestsSuccess', { type, data }))
-    .catch(() => dispatch('receiveMergeRequestsError', type));
+    .catch(() => dispatch('receiveMergeRequestsError', { type, search }));
 };
 
 export const resetMergeRequests = ({ commit }, type) => commit(types.RESET_MERGE_REQUESTS, type);
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
index fe1dc9ac8f8..5d5628016ce 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
@@ -18,10 +18,27 @@ export const stopPipelinePolling = () => {
 export const restartPipelinePolling = () => {
   if (eTagPoll) eTagPoll.restart();
 };
+export const forcePipelineRequest = () => {
+  if (eTagPoll) eTagPoll.makeRequest();
+};
 
 export const requestLatestPipeline = ({ commit }) => commit(types.REQUEST_LATEST_PIPELINE);
-export const receiveLatestPipelineError = ({ commit, dispatch }) => {
-  flash(__('There was an error loading latest pipeline'));
+export const receiveLatestPipelineError = ({ commit, dispatch }, err) => {
+  if (err.response.status !== 404) {
+    dispatch(
+      'setErrorMessage',
+      {
+        text: __('An error occured whilst fetching the latest pipline.'),
+        action: () =>
+          dispatch('forcePipelineRequest').then(() =>
+            dispatch('setErrorMessage', null, { root: true }),
+          ),
+        actionText: __('Please try again'),
+        actionPayload: null,
+      },
+      { root: true },
+    );
+  }
   commit(types.RECEIVE_LASTEST_PIPELINE_ERROR);
   dispatch('stopPipelinePolling');
 };
@@ -46,11 +63,11 @@ export const fetchLatestPipeline = ({ dispatch, rootGetters }) => {
     method: 'lastCommitPipelines',
     data: { getters: rootGetters },
     successCallback: ({ data }) => dispatch('receiveLatestPipelineSuccess', data),
-    errorCallback: () => dispatch('receiveLatestPipelineError'),
+    errorCallback: err => dispatch('receiveLatestPipelineError', err),
   });
 
   if (!Visibility.hidden()) {
-    eTagPoll.makeRequest();
+    dispatch('forcePipelineRequest');
   }
 
   Visibility.change(() => {
@@ -63,9 +80,19 @@ export const fetchLatestPipeline = ({ dispatch, rootGetters }) => {
 };
 
 export const requestJobs = ({ commit }, id) => commit(types.REQUEST_JOBS, id);
-export const receiveJobsError = ({ commit }, id) => {
-  flash(__('There was an error loading jobs'));
-  commit(types.RECEIVE_JOBS_ERROR, id);
+export const receiveJobsError = ({ commit, dispatch }, stage) => {
+  dispatch(
+    'setErrorMessage',
+    {
+      text: __('An error occured whilst loading the pipelines jobs.'),
+      action: stage =>
+        dispatch('fetchJobs', stage).then(() => dispatch('setErrorMessage', null, { root: true })),
+      actionText: __('Please try again'),
+      actionPayload: stage,
+    },
+    { root: true },
+  );
+  commit(types.RECEIVE_JOBS_ERROR, stage.id);
 };
 export const receiveJobsSuccess = ({ commit }, { id, data }) =>
   commit(types.RECEIVE_JOBS_SUCCESS, { id, data });
@@ -76,7 +103,7 @@ export const fetchJobs = ({ dispatch }, stage) => {
   axios
     .get(stage.dropdownPath)
     .then(({ data }) => dispatch('receiveJobsSuccess', { id: stage.id, data }))
-    .catch(() => dispatch('receiveJobsError', stage.id));
+    .catch(() => dispatch('receiveJobsError', stage));
 };
 
 export const toggleStageCollapsed = ({ commit }, stageId) =>
@@ -90,8 +117,18 @@ export const setDetailJob = ({ commit, dispatch }, job) => {
 };
 
 export const requestJobTrace = ({ commit }) => commit(types.REQUEST_JOB_TRACE);
-export const receiveJobTraceError = ({ commit }) => {
-  flash(__('Error fetching job trace'));
+export const receiveJobTraceError = ({ commit, dispatch }) => {
+  dispatch(
+    'setErrorMessage',
+    {
+      text: __('An error occured whilst fetching the job trace.'),
+      action: () =>
+        dispatch('fetchJobTrace').then(() => dispatch('setErrorMessage', null, { root: true })),
+      actionText: __('Please try again'),
+      actionPayload: null,
+    },
+    { root: true },
+  );
   commit(types.RECEIVE_JOB_TRACE_ERROR);
 };
 export const receiveJobTraceSuccess = ({ commit }, data) =>