Improve branch 404 error in Web IDE

Part of #47323

app/assets/javascripts/api.js

@@ -243,6 +243,15 @@ const Api = {
     });
   },
 
+  createBranch(id, { ref, branch }) {
+    const url = Api.buildUrl(this.createBranchPath).replace(':id', encodeURIComponent(id));
+
+    return axios.post(url, {
+      ref,
+      branch,
+    });
+  },
+
   buildUrl(url) {
     let urlRoot = '';
     if (gon.relative_url_root != null) {

app/assets/javascripts/ide/ide_router.js

@@ -95,14 +95,6 @@ router.beforeEach((to, from, next) => {
               }
             })
             .catch(e => {
-              flash(
-                'Error while loading the branch files. Please try again.',
-                'alert',
-                document,
-                null,
-                false,
-                true,
-              );
               throw e;
             });
         } else if (to.params.mrid) {

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

 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,7 +55,12 @@ export const getBranchData = ({ commit, state }, { projectId, branchId, force =
           commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });
           resolve(data);
         })
-        .catch(() => {
+        .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',
@@ -60,6 +69,7 @@ export const getBranchData = ({ commit, state }, { projectId, branchId, force =
               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,
+  );
+};

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 {