refactor ADD_PENDING_TAB to stop multiple state changes

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

@@ -143,7 +143,7 @@ export const openPendingTab = ({ commit, getters, dispatch, state }, file) => {
     return false;
   }
 
-  commit(types.ADD_PENDING_TAB, file);
+  commit(types.ADD_PENDING_TAB, { file });
 
   dispatch('scrollToTab');
 

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

@@ -96,50 +96,33 @@ export default {
       changed,
     });
   },
-  [types.ADD_PENDING_TAB](state, file) {
+  [types.ADD_PENDING_TAB](state, { file, keyPrefix = 'pending' }) {
     const pendingTab = state.openFiles.find(f => f.path === file.path && f.pending);
+    let openFiles = state.openFiles.map(f =>
+      Object.assign(f, { active: f.path === file.path, opened: false }),
+    );
 
-    Object.assign(state, {
-      openFiles: state.openFiles.map(f => Object.assign(f, { active: false })),
-    });
+    if (!pendingTab) {
+      const openFile = openFiles.find(f => f.path === file.path);
 
-    if (pendingTab) {
-      Object.assign(state, {
-        openFiles: state.openFiles.map(f => {
-          if (f.pending && f.path === file.path) {
-            return Object.assign(f, { active: true });
-          }
+      openFiles = openFiles.concat(openFile ? null : file).reduce((acc, f) => {
+        if (!f) return acc;
 
-          return f;
-        }),
-      });
-    } else {
-      const openFile = state.openFiles.find(f => f.path === file.path);
-      const openFiles = state.openFiles
-        .concat(openFile ? null : file)
-        .filter(f => f)
-        .reduce((acc, f) => {
-          if (f.path === file.path) {
-            return acc.concat({
-              ...f,
-              active: true,
-              pending: true,
-              key: `pending-${f.key}`,
-            });
-          }
+        if (f.path === file.path) {
+          return acc.concat({
+            ...f,
+            active: true,
+            pending: true,
+            opened: true,
+            key: `${keyPrefix}-${f.key}`,
+          });
+        }
 
-          return acc.concat(f);
-        }, []);
-
-      Object.assign(state, {
-        entries: Object.assign(state.entries, {
-          [file.path]: Object.assign(state.entries[file.path], {
-            opened: false,
-          }),
-        }),
-        openFiles,
-      });
+        return acc.concat(f);
+      }, []);
     }
+
+    Object.assign(state, { openFiles });
   },
   [types.REMOVE_PENDING_TAB](state, file) {
     Object.assign(state, {

spec/javascripts/ide/stores/mutations/file_spec.js

@@ -183,7 +183,7 @@ describe('Multi-file store file mutations', () => {
     });
 
     it('adds file into openFiles as pending', () => {
-      mutations.ADD_PENDING_TAB(localState, localFile);
+      mutations.ADD_PENDING_TAB(localState, { file: localFile });
 
       expect(localState.openFiles.length).toBe(2);
       expect(localState.openFiles[1].pending).toBe(true);
@@ -191,7 +191,7 @@ describe('Multi-file store file mutations', () => {
     });
 
     it('updates open file to pending', () => {
-      mutations.ADD_PENDING_TAB(localState, localState.openFiles[0]);
+      mutations.ADD_PENDING_TAB(localState, { file: localState.openFiles[0] });
 
       expect(localState.openFiles.length).toBe(1);
     });
@@ -202,14 +202,14 @@ describe('Multi-file store file mutations', () => {
         pending: true,
       });
 
-      mutations.ADD_PENDING_TAB(localState, localFile);
+      mutations.ADD_PENDING_TAB(localState, { file: localFile });
 
       expect(localState.openFiles[1].pending).toBe(true);
       expect(localState.openFiles[1].active).toBe(true);
     });
 
     it('sets all openFiles to not active', () => {
-      mutations.ADD_PENDING_TAB(localState, localFile);
+      mutations.ADD_PENDING_TAB(localState, { file: localFile });
 
       expect(localState.openFiles.length).toBe(2);