correctly toggle between tabs

app/assets/javascripts/ide/components/repo_editor.vue

@@ -71,7 +71,7 @@ export default {
       this.getRawFileData(this.file)
         .then(() => {
           const viewerPromise = this.delayViewerUpdated
-            ? this.updateViewer('editor')
+            ? this.updateViewer(this.file.pending ? 'diff' : 'editor')
             : Promise.resolve();
 
           return viewerPromise;

app/assets/javascripts/ide/components/repo_tab.vue

@@ -37,9 +37,15 @@ export default {
   },
 
   methods: {
-    ...mapActions(['closeFile']),
+    ...mapActions(['closeFile', 'updateDelayViewerUpdated', 'openPendingTab']),
     clickFile(tab) {
+      this.updateDelayViewerUpdated(true);
+
+      if (tab.pending) {
+        this.openPendingTab(tab);
+      } else {
         this.$router.push(`/project${tab.url}`);
+      }
     },
     mouseOverTab() {
       if (this.tab.changed) {

app/assets/javascripts/ide/lib/common/model.js

@@ -80,7 +80,7 @@ export default class Model {
 
     eventHub.$off(`editor.update.model.dispose.${this.file.key}`, this.dispose);
     eventHub.$off(
-      `editor.update.model.content.${this.file.key}`,
+      `editor.update.model.content.${this.file.path}`,
       this.updateContent,
     );
   }

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

@@ -92,6 +92,14 @@ export default {
   [types.ADD_PENDING_TAB](state, file) {
     const pendingTab = state.pendingTabs.find(f => f.path === file.path);
 
+    Object.assign(state, {
+      openFiles: state.openFiles.map(f =>
+        Object.assign(f, {
+          active: false,
+        }),
+      ),
+    });
+
     if (pendingTab) {
       Object.assign(state, {
         pendingTabs: state.pendingTabs.map(tab => ({
@@ -107,11 +115,6 @@ export default {
           pending: true,
           key: `pending-${file.key}`,
         }),
-        openFiles: state.openFiles.map(f =>
-          Object.assign(f, {
-            active: false,
-          }),
-        ),
       });
     }
   },