toggling viewer mode closes the pending tab

then opens the file in edit mode

5 files changed, 33 insertions, 7 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index e443bd4e3fa..421be7fb3cb 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -1,7 +1,6 @@
 <script>
 import { mapActions } from 'vuex';
 import icon from '~/vue_shared/components/icon.vue';
-import router from '../../ide_router';
 
 export default {
   components: {
@@ -26,7 +25,6 @@ export default {
     openFileInEditor(file) {
       return this.updateViewer('diff').then(() => {
         this.openPendingTab(file);
-        router.push(`/project/${file.projectId}/tree/master/`);
       });
     },
   },
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 7048f5fab43..8502bbf4157 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -60,6 +60,7 @@ export default {
         v-if="activeFile"
       >
         <repo-tabs
+          :active-file="activeFile"
           :files="tabs"
           :viewer="viewer"
           :has-changes="hasChanges"
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index dcb2ff80ce1..200670e1565 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -2,6 +2,7 @@
 import { mapActions } from 'vuex';
 import RepoTab from './repo_tab.vue';
 import EditorMode from './editor_mode_dropdown.vue';
+import router from '../ide_router';
 
 export default {
   components: {
@@ -9,6 +10,10 @@ export default {
     EditorMode,
   },
   props: {
+    activeFile: {
+      type: Object,
+      required: true,
+    },
     files: {
       type: Array,
       required: true,
@@ -33,7 +38,16 @@ export default {
     this.showShadow = this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
   },
   methods: {
-    ...mapActions(['updateViewer']),
+    ...mapActions(['updateViewer', 'removePendingTab']),
+    openFileViewer(viewer) {
+      this.updateViewer(viewer);
+
+      if (this.activeFile.pending) {
+        this.removePendingTab(this.activeFile).then(() => {
+          router.push(`/project${this.activeFile.url}`);
+        });
+      }
+    },
   },
 };
 </script>
@@ -54,7 +68,7 @@ export default {
       :viewer="viewer"
       :show-shadow="showShadow"
       :has-changes="hasChanges"
-      @click="updateViewer"
+      @click="openFileViewer"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 5a39bfb02c4..755e8e14989 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -18,9 +18,9 @@ export const closeFile = ({ commit, state, getters, dispatch }, file) => {
     commit(types.TOGGLE_FILE_OPEN, path);
     commit(types.SET_FILE_ACTIVE, { path, active: false });
 
-    if (state.openFiles.length > 0 && fileWasActive) {
+    if (getters.tabs.length > 0 && fileWasActive) {
       const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
-      const nextFileToOpen = state.entries[state.openFiles[nextIndexToOpen].path];
+      const nextFileToOpen = state.openFiles[nextIndexToOpen];
 
       router.push(`/project${nextFileToOpen.url}`);
     } else if (!state.openFiles.length) {
@@ -133,6 +133,12 @@ export const discardFileChanges = ({ state, commit }, path) => {
   eventHub.$emit(`editor.update.model.content.${file.path}`, file.raw);
 };
 
-export const openPendingTab = ({ commit }, file) => {
+export const openPendingTab = ({ commit, state }, file) => {
   commit(types.ADD_PENDING_TAB, file);
+
+  router.push(`/project/${file.projectId}/tree/${state.currentBranchId}/`);
+};
+
+export const removePendingTab = ({ commit }, file) => {
+  commit(types.REMOVE_PENDING_TAB, file);
 };
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 915126f10eb..e9945055e6f 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -5,6 +5,13 @@ export default {
     Object.assign(state.entries[path], {
       active,
     });
+
+    Object.assign(state, {
+      pendingTabs: state.pendingTabs.map(f => ({
+        ...f,
+        active: false,
+      })),
+    });
   },
   [types.TOGGLE_FILE_OPEN](state, path) {
     Object.assign(state.entries[path], {