Switch files before closing active one

To avoid disposing the repo_editor component, we have to
make sure we always have an active file if we have any
open files at all. Othewrwise the whole component gets
diposed that triggers all possible events and unnecessary
processing related to diposing the old one and setting up
the new editor instance

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

@@ -17,15 +17,8 @@ export const closeFile = ({ commit, state, dispatch, getters }, file) => {
   const indexOfClosedFile = state.openFiles.findIndex((f) => f.key === file.key);
   const fileWasActive = file.active;
 
-  if (file.pending) {
-    commit(types.REMOVE_PENDING_TAB, file);
-  } else {
-    commit(types.TOGGLE_FILE_OPEN, path);
-    commit(types.SET_FILE_ACTIVE, { path, active: false });
-  }
-
-  if (state.openFiles.length > 0 && fileWasActive) {
-    const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
+  if (state.openFiles.length > 1 && fileWasActive) {
+    const nextIndexToOpen = indexOfClosedFile === 0 ? 1 : indexOfClosedFile - 1;
     const nextFileToOpen = state.openFiles[nextIndexToOpen];
 
     if (nextFileToOpen.pending) {
@@ -35,14 +28,22 @@ export const closeFile = ({ commit, state, dispatch, getters }, file) => {
         keyPrefix: nextFileToOpen.staged ? 'staged' : 'unstaged',
       });
     } else {
+      dispatch('setFileActive', nextFileToOpen.path);
       dispatch('router/push', getters.getUrlForPath(nextFileToOpen.path), { root: true });
     }
-  } else if (!state.openFiles.length) {
+  } else if (state.openFiles.length === 1) {
     dispatch('router/push', `/project/${state.currentProjectId}/tree/${state.currentBranchId}/`, {
       root: true,
     });
   }
 
+  if (file.pending) {
+    commit(types.REMOVE_PENDING_TAB, file);
+  } else {
+    commit(types.TOGGLE_FILE_OPEN, path);
+    commit(types.SET_FILE_ACTIVE, { path, active: false });
+  }
+
   eventHub.$emit(`editor.update.model.dispose.${file.key}`);
 };
 

changelogs/unreleased/292498-webide-switch-before-closing.yml

+---
+title: In WebIDE switch files before closing the active one
+merge_request: 51483
+author:
+type: fixed

spec/frontend/ide/stores/actions/file_spec.js

@@ -75,7 +75,7 @@ describe('IDE store file actions', () => {
         });
     });
 
-    it('closes file & opens next available file', () => {
+    it('switches to the next available file before closing the current one ', () => {
       const f = file('newOpenFile');
 
       store.state.openFiles.push(f);
@@ -90,10 +90,12 @@ describe('IDE store file actions', () => {
     });
 
     it('removes file if it pending', () => {
-      store.state.openFiles.push({
-        ...localFile,
-        pending: true,
-      });
+      store.state.openFiles = [
+        {
+          ...localFile,
+          pending: true,
+        },
+      ];
 
       return store.dispatch('closeFile', localFile).then(() => {
         expect(store.state.openFiles.length).toBe(0);