Improve branch 404 error in Web IDE

Part of #47323

2 files changed, 66 insertions, 12 deletions

diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index 0b99bce4a8e..e597351f4d3 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -1,6 +1,7 @@
 import flash from '~/flash';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import service from '../../services';
+import api from '../../../api';
 import * as types from '../mutation_types';
 
 export const getProjectData = ({ commit, state }, { namespace, projectId, force = false } = {}) =>
@@ -32,7 +33,10 @@ export const getProjectData = ({ commit, state }, { namespace, projectId, force
     }
   });
 
-export const getBranchData = ({ commit, state }, { projectId, branchId, force = false } = {}) =>
+export const getBranchData = (
+  { commit, dispatch, state },
+  { projectId, branchId, force = false } = {},
+) =>
   new Promise((resolve, reject) => {
     if (
       typeof state.projects[`${projectId}`] === 'undefined' ||
@@ -51,15 +55,21 @@ export const getBranchData = ({ commit, state }, { projectId, branchId, force =
           commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });
           resolve(data);
         })
-        .catch(() => {
-          flash(
-            __('Error loading branch data. Please try again.'),
-            'alert',
-            document,
-            null,
-            false,
-            true,
-          );
+        .catch(e => {
+          let flashMessage = __('Error loading branch data. Please try again.');
+
+          if (e.response.status === 404) {
+            dispatch('showBranchNotFoundError', branchId);
+          } else {
+            flash(
+              __('Error loading branch data. Please try again.'),
+              'alert',
+              document,
+              null,
+              false,
+              true,
+            );
+          }
           reject(new Error(`Branch not loaded - ${projectId}/${branchId}`));
         });
     } else {
@@ -80,3 +90,36 @@ export const refreshLastCommitData = ({ commit }, { projectId, branchId } = {})
     .catch(() => {
       flash(__('Error loading last commit.'), 'alert', document, null, false, true);
     });
+
+export const createNewBranchFromDefault = ({ state, getters }, branch) => {
+  api
+    .createBranch(state.currentProjectId, {
+      ref: getters.currentProject.default_branch,
+      branch,
+    })
+    .then(() => {
+      location.reload();
+    })
+    .catch(() => {});
+};
+
+export const showBranchNotFoundError = ({ dispatch }, branchId) => {
+  flash(
+    sprintf(__('Branch %{branchName} was not found in project.'), {
+      branchName: branchId,
+    }),
+    'alert',
+    document,
+    {
+      href: '#',
+      title: 'Create branch',
+      clickHandler(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        dispatch('createNewBranchFromDefault', branchId);
+      },
+    },
+    false,
+    true,
+  );
+};
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index 2fbc9990fa2..817dbdbdfa1 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -99,7 +99,18 @@ export const getFiles = ({ state, commit }, { projectId, branchId } = {}) =>
           });
         })
         .catch(e => {
-          flash('Error loading tree data. Please try again.', 'alert', document, null, false, true);
+          if (e.response.status === 404) {
+            dispatch('showBranchNotFoundError', branchId);
+          } else {
+            flash(
+              'Error loading tree data. Please try again.',
+              'alert',
+              document,
+              null,
+              false,
+              true,
+            );
+          }
           reject(e);
         });
     } else {