Re-factored openBranch action in Web IDE45687-web-ide-empty-state

- shortcut for rendering empty state right away
- do not attempt to fetch files alongside with
branchData as branch might not exist at all
- catch potential errors on both: fetching
branchData and getFiles

4 files changed, 104 insertions, 77 deletions

diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index d8ec7dd6be7..dd8f17e4f3a 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -92,43 +92,57 @@ export const showEmptyState = ({ commit, state }, { projectId, branchId }) => {
   });
 };
 
-export const openBranch = ({ dispatch, state }, { projectId, branchId, basePath }) => {
+export const openBranch = ({ dispatch, state, getters }, { projectId, branchId, basePath }) => {
   dispatch('setCurrentBranchId', branchId);
 
-  if (state.projects[projectId].empty_repo) {
+  if (getters.emptyRepo) {
     return dispatch('showEmptyState', { projectId, branchId });
   }
-  dispatch('getBranchData', {
-    projectId,
-    branchId,
-  });
-
-  return dispatch('getFiles', {
+  return dispatch('getBranchData', {
     projectId,
     branchId,
   })
     .then(() => {
-      if (basePath) {
-        const path = basePath.slice(-1) === '/' ? basePath.slice(0, -1) : basePath;
-        const treeEntryKey = Object.keys(state.entries).find(
-          key => key === path && !state.entries[key].pending,
-        );
-        const treeEntry = state.entries[treeEntryKey];
-
-        if (treeEntry) {
-          dispatch('handleTreeEntryAction', treeEntry);
-        } else {
-          dispatch('createTempEntry', {
-            name: path,
-            type: 'blob',
-          });
-        }
-      }
-    })
-    .then(() => {
       dispatch('getMergeRequestsForBranch', {
         projectId,
         branchId,
       });
+      dispatch('getFiles', {
+        projectId,
+        branchId,
+      })
+        .then(() => {
+          if (basePath) {
+            const path = basePath.slice(-1) === '/' ? basePath.slice(0, -1) : basePath;
+            const treeEntryKey = Object.keys(state.entries).find(
+              key => key === path && !state.entries[key].pending,
+            );
+            const treeEntry = state.entries[treeEntryKey];
+
+            if (treeEntry) {
+              dispatch('handleTreeEntryAction', treeEntry);
+            } else {
+              dispatch('createTempEntry', {
+                name: path,
+                type: 'blob',
+              });
+            }
+          }
+        })
+        .catch(
+          () =>
+            new Error(
+              sprintf(
+                __('An error occurred whilst getting files for - %{branchId}'),
+                {
+                  branchId: `<strong>${_.escape(projectId)}/${_.escape(branchId)}</strong>`,
+                },
+                false,
+              ),
+            ),
+        );
+    })
+    .catch(() => {
+      dispatch('showBranchNotFoundError', branchId);
     });
 };
diff --git a/changelogs/unreleased/45687-web-ide-empty-state.yml b/changelogs/unreleased/45687-web-ide-empty-state.yml
new file mode 100644
index 00000000000..9ef148275ab
--- /dev/null
+++ b/changelogs/unreleased/45687-web-ide-empty-state.yml
@@ -0,0 +1,5 @@
+---
+title: Empty project state for Web IDE
+merge_request: 26556
+author:
+type: added
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9de86aa40a1..1b397c7e23e 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -958,6 +958,9 @@ msgstr ""
 msgid "An error occurred whilst fetching the latest pipeline."
 msgstr ""
 
+msgid "An error occurred whilst getting files for - %{branchId}"
+msgstr ""
+
 msgid "An error occurred whilst loading all the files."
 msgstr ""
 
@@ -2987,6 +2990,9 @@ msgstr ""
 msgid "Create a new branch"
 msgstr ""
 
+msgid "Create a new file as there are no files yet. Afterwards, you'll be able to commit your changes."
+msgstr ""
+
 msgid "Create a new issue"
 msgstr ""
 
@@ -6422,6 +6428,9 @@ msgstr ""
 msgid "No file selected"
 msgstr ""
 
+msgid "No files"
+msgstr ""
+
 msgid "No files found."
 msgstr ""
 
@@ -8576,6 +8585,9 @@ msgstr ""
 msgid "Select Archive Format"
 msgstr ""
 
+msgid "Select a file from the left sidebar to begin editing. Afterwards, you'll be able to commit your changes."
+msgstr ""
+
 msgid "Select a group to invite"
 msgstr ""
 
diff --git a/spec/javascripts/ide/stores/actions/project_spec.js b/spec/javascripts/ide/stores/actions/project_spec.js
index aedbfc6e4e0..8ecb6129c63 100644
--- a/spec/javascripts/ide/stores/actions/project_spec.js
+++ b/spec/javascripts/ide/stores/actions/project_spec.js
@@ -4,9 +4,8 @@ import {
   refreshLastCommitData,
   showBranchNotFoundError,
   createNewBranchFromDefault,
-  // getBranchData,
-  openBranch,
   showEmptyState,
+  openBranch,
 } from '~/ide/stores/actions';
 import store from '~/ide/stores';
 import service from '~/ide/services';
@@ -197,41 +196,16 @@ describe('IDE store project actions', () => {
     });
   });
 
-  // describe('getBranchData', () => {
-  //   describe('error', () => {
-  //     it('dispatches branch not found action when response is 404', done => {
-  //       const dispatch = jasmine.createSpy('dispatchSpy');
-  //
-  //       mock.onGet(/(.*)/).replyOnce(404);
-  //
-  //       getBranchData(
-  //         {
-  //           commit() {},
-  //           dispatch,
-  //           state: store.state,
-  //         },
-  //         {
-  //           projectId: 'abc/def',
-  //           branchId: 'master-testing',
-  //         },
-  //       )
-  //         .then(done.fail)
-  //         .catch(() => {
-  //           expect(dispatch.calls.argsFor(0)).toEqual([
-  //             'showBranchNotFoundError',
-  //             'master-testing',
-  //           ]);
-  //           done();
-  //         });
-  //     });
-  //   });
-  // });
-
   describe('showEmptyState', () => {
-    it('calls actions and commits proper mutations', done => {
+    it('commits proper mutations when supplied error is 404', done => {
       testAction(
         showEmptyState,
         {
+          err: {
+            response: {
+              status: 404,
+            },
+          },
           projectId: 'abc/def',
           branchId: 'master',
         },
@@ -259,7 +233,7 @@ describe('IDE store project actions', () => {
 
   describe('openBranch', () => {
     const branch = {
-      projectId: 'feature/lorem-ipsum',
+      projectId: 'abc/def',
       branchId: '123-lorem',
     };
 
@@ -269,35 +243,38 @@ describe('IDE store project actions', () => {
         'foo/bar-pending': { pending: true },
         'foo/bar': { pending: false },
       };
-
-      spyOn(store, 'dispatch').and.returnValue(Promise.resolve());
     });
 
     describe('empty repo', () => {
       beforeEach(() => {
-        store.state.projects['feature/lorem-ipsum'] = {
+        spyOn(store, 'dispatch').and.returnValue(Promise.resolve());
+
+        store.state.currentProjectId = 'abc/def';
+        store.state.projects['abc/def'] = {
           empty_repo: true,
         };
       });
 
-      it('dispatches empty state action', done => {
+      afterEach(() => {
+        resetStore(store);
+      });
+
+      it('dispatches showEmptyState action right away', done => {
         openBranch(store, branch)
-        .then(() => {
-          expect(store.dispatch.calls.allArgs()).toEqual([
-            ['setCurrentBranchId', branch.branchId],
-            ['showEmptyState', branch],
-          ]);
-        })
-        .then(done)
-        .catch(done.fail);
+          .then(() => {
+            expect(store.dispatch.calls.allArgs()).toEqual([
+              ['setCurrentBranchId', branch.branchId],
+              ['showEmptyState', branch],
+            ]);
+            done();
+          })
+          .catch(done.fail);
       });
     });
 
-    describe('non-empty repo', () => {
+    describe('existing branch', () => {
       beforeEach(() => {
-        store.state.projects['feature/lorem-ipsum'] = {
-          empty_repo: false,
-        };
+        spyOn(store, 'dispatch').and.returnValue(Promise.resolve());
       });
 
       it('dispatches branch actions', done => {
@@ -306,8 +283,8 @@ describe('IDE store project actions', () => {
             expect(store.dispatch.calls.allArgs()).toEqual([
               ['setCurrentBranchId', branch.branchId],
               ['getBranchData', branch],
-              ['getFiles', branch],
               ['getMergeRequestsForBranch', branch],
+              ['getFiles', branch],
             ]);
           })
           .then(done)
@@ -355,5 +332,24 @@ describe('IDE store project actions', () => {
           .catch(done.fail);
       });
     });
+
+    describe('non-existent branch', () => {
+      beforeEach(() => {
+        spyOn(store, 'dispatch').and.returnValue(Promise.reject());
+      });
+
+      it('dispatches correct branch actions', done => {
+        openBranch(store, branch)
+          .then(() => {
+            expect(store.dispatch.calls.allArgs()).toEqual([
+              ['setCurrentBranchId', branch.branchId],
+              ['getBranchData', branch],
+              ['showBranchNotFoundError', branch.branchId],
+            ]);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
   });
 });