correctly activate the next tab when closing a tab

scroll to the active tab when opening/closing

[ci skip]

3 files changed, 28 insertions, 3 deletions

diff --git a/app/assets/javascripts/repo/stores/actions.js b/app/assets/javascripts/repo/stores/actions.js
index 20aee8707b4..cccedf643f6 100644
--- a/app/assets/javascripts/repo/stores/actions.js
+++ b/app/assets/javascripts/repo/stores/actions.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import flash from '../../flash';
 import service from '../services';
 import * as types from './mutation_types';
@@ -99,6 +100,15 @@ export const popHistoryState = ({ state, dispatch, getters }) => {
   }
 };
 
+export const scrollToTab = () => {
+  Vue.nextTick(() => {
+    const tabs = document.getElementById('tabs');
+    const tabEl = tabs.querySelector('.active');
+
+    tabs.scrollLeft = tabEl.offsetLeft;
+  });
+};
+
 export * from './actions/tree';
 export * from './actions/file';
 export * from './actions/branch';
diff --git a/app/assets/javascripts/repo/stores/actions/file.js b/app/assets/javascripts/repo/stores/actions/file.js
index 60964f90d34..7b384ad96f2 100644
--- a/app/assets/javascripts/repo/stores/actions/file.js
+++ b/app/assets/javascripts/repo/stores/actions/file.js
@@ -1,16 +1,29 @@
 import flash from '../../../flash';
 import service from '../../services';
 import * as types from '../mutation_types';
-import { createTemp } from '../utils';
+import {
+  createTemp,
+  findIndexOfFile,
+} from '../utils';
 
-export const closeFile = ({ commit }, file) => {
+export const closeFile = ({ commit, state, dispatch }, file) => {
   if (file.changed || file.tempFile) return;
 
+  const indexOfClosedFile = findIndexOfFile(state.openFiles, file);
+  const fileWasActive = file.active;
+
   commit(types.TOGGLE_FILE_OPEN, file);
   commit(types.SET_FILE_ACTIVE, { file, active: false });
+
+  if (state.openFiles.length > 0 && fileWasActive) {
+    const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
+    const nextFileToOpen = state.openFiles[nextIndexToOpen];
+
+    dispatch('setFileActive', nextFileToOpen);
+  }
 };
 
-export const setFileActive = ({ commit, state, getters }, file) => {
+export const setFileActive = ({ commit, state, getters, dispatch }, file) => {
   const currentActiveFile = getters.activeFile;
 
   if (currentActiveFile) {
@@ -18,6 +31,7 @@ export const setFileActive = ({ commit, state, getters }, file) => {
   }
 
   commit(types.SET_FILE_ACTIVE, { file, active: true });
+  dispatch('scrollToTab');
 };
 
 export const getFileData = ({ commit, dispatch }, file) => {
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 6a363b1710e..b082c3f4bb2 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -138,6 +138,7 @@
     }
 
     #tabs {
+      position: relative;
       flex-shrink: 0;
       display: flex;
       width: 100%;